Créez un générateur d'idées avec Github et Dotenv
Table des matières
- Introduction
- Création du repo GitHub
- Configuration de l'environnement
- Ajout du fichier
.env
- Installation des dépendances
- Configuration de Webpack
- Tester l'appel fetch
- Conclusion
📚 Introduction
Dans cet article, nous allons vous montrer comment créer une application qui utilise vos signets pour générer des idées d'apprentissage en développement web. Nous expliquerons étape par étape comment construire cette application, en utilisant des ressources existantes et en combinant les fonctionnalités pour obtenir un générateur d'idées performant. Commençons dès maintenant !
1️⃣ Création du repo GitHub
La première étape consiste à créer un nouveau repo GitHub. Pour cela, nous allons utiliser l'organisation Professor K. Vous pouvez également le créer dans votre propre espace si vous le souhaitez. L'objectif est de partir d'un modèle existant, en utilisant le gabarit du site étudiant. Cela nous permettra de bénéficier des dépendances déjà configurées pour d'autres projets. Créons donc un nouveau repo appelé "Générateur d'idées" dans l'organisation Professor K. Vous pouvez choisir de le rendre public ou privé en fonction de vos préférences.
2️⃣ Configuration de l'environnement
Une fois le repo créé, nous allons configurer notre environnement de développement. Vous devez vous assurer d'avoir installé les dépendances requises pour le projet. Nous utiliserons NPM pour cela. Ouvrez votre terminal et exécutez la commande npm install
pour installer toutes les dépendances nécessaires au bon fonctionnement du générateur d'idées.
3️⃣ Ajout du fichier .env
Maintenant que notre environnement est configuré, nous allons ajouter un fichier .env
à notre projet. Ce fichier nous permettra de stocker des informations sensibles, telles que les tokens d'authentification, de manière sécurisée. Créez un nouveau fichier .env
à la racine du générateur d'idées et définissez les variables nécessaires. Dans notre cas, nous aurons besoin d'un token OAuth pour l'authentification avec raindrop.io. Assurez-vous de garder ce token confidentiel et ne le partagez avec personne. Dans le fichier .env
, ajoutez la variable OAUTH_TOKEN
et attribuez-lui une valeur aléatoire pour l'Instant.
4️⃣ Installation des dépendances
Maintenant que notre fichier .env
est prêt, nous pouvons installer les dépendances nécessaires à l'utilisation de ce fichier dans notre projet. Pour cela, nous utiliserons un plugin Webpack appelé dotenv-webpack
. Exécutez la commande npm install dotenv-webpack --save-dev
pour installer ce plugin. Une fois l'installation terminée, ouvrez votre fichier de configuration Webpack et ajoutez le plugin dotenv-webpack
à la liste des plugins. Ceci permettra de charger les variables d'environnement définies dans le fichier .env
. Redémarrez ensuite votre serveur de développement pour prendre en compte les modifications.
5️⃣ Configuration de Webpack
Maintenant que nous avons installé le plugin dotenv-webpack
, nous devons le configurer pour qu'il puisse charger les variables d'environnement dans notre projet. Dans le fichier de configuration Webpack, importez le plugin dotenv-webpack
en haut du fichier. Ensuite, ajoutez-le à la liste des plugins en bas du fichier, en utilisant la syntaxe new Dotenv()
. Assurez-vous de sauvegarder vos modifications et redémarrez votre serveur de développement.
6️⃣ Tester l'appel fetch
Maintenant que notre environnement est configuré, nous pouvons tester l'appel fetch pour obtenir des données à partir de l'API de raindrop.io. Pour cela, nous devons d'abord nous authentifier. Raindrop.io nécessite une authentification pour accéder à l'API, même pour récupérer nos propres données. Dans notre cas, nous n'avons pas besoin de demander à l'utilisateur de fournir des informations, car nous n'avons besoin que de nos propres données. Nous allons donc utiliser une clé d'intégration fournie par raindrop.io pour authentifier nos appels. Dans le code, nous utilisons l'objet headers
pour ajouter l'en-tête d'autorisation à notre requête fetch. Cet en-tête contient notre token OAuth que nous avons défini dans le fichier .env
. Ainsi, nous pouvons effectuer des appels sécurisés à l'API sans révéler notre token au monde entier.
7️⃣ Conclusion
Dans cet article, nous avons vu comment créer un générateur d'idées à partir de vos signets en utilisant des ressources existantes. Nous avons configuré un environnement de développement, ajouté un fichier .env
pour stocker les informations sensibles, installé les dépendances nécessaires et configuré Webpack pour charger les variables d'environnement. Nous avons également testé l'appel fetch pour obtenir des données à partir de l'API de raindrop.io. Nous espérons que ce tutoriel vous a été utile et que vous pourrez maintenant créer votre propre générateur d'idées pour l'apprentissage du développement web. Bonne programmation !
🌟 Highlights
- Créez un générateur d'idées à partir de vos signets
- Utilisez les ressources existantes pour faciliter le développement
- Protégez vos informations sensibles grâce au fichier
.env
- Effectuez des appels fetch sécurisés en utilisant l'authentification OAuth
FAQ
Q: Quels sont les avantages d'utiliser un template pour commencer un projet ?
R: L'utilisation d'un template permet de gagner du temps en commençant avec une base déjà configurée et fonctionnelle. Cela évite de devoir configurer chaque dépendance et chaque fichier depuis zéro.
Q: Comment puis-je obtenir un token OAuth auprès de raindrop.io ?
R: Vous pouvez obtenir un token OAuth en créant une nouvelle application dans le panneau de gestion des applications de raindrop.io. Ce token vous permettra de vous authentifier et d'accéder à l'API.
Q: Quelle est la différence entre un token OAuth et un token d'accès ?
R: Un token OAuth est utilisé pour s'authentifier auprès d'un service, tandis qu'un token d'accès est utilisé pour accéder à des ressources spécifiques de ce service une fois l'authentification réussie.
Q: Comment puis-je cacher mes informations sensibles dans un fichier .env
?
R: Le fichier .env
est conçu pour stocker des variables d'environnement sensibles, comme des tokens d'authentification. Ces variables ne seront pas visibles lorsque vous publierez votre code, grâce à l'utilisation de Webpack et du plugin dotenv-webpack
.
Ressources