- Apprenez les actions GitHub Core pour la gestion du code et la collaboration
- Connectez-vous à des services d'IA externes de manière sûre et sécurisée.
- Utilisez l'IA pour synthétiser les commentaires provenant de plusieurs sources en informations exploitables.
- Suivi des parties prenantes : Un système simple pour organiser vos recherches sur les parties prenantes
- Analyseur de commentaires : Un outil alimenté par l'IA qui identifie les tendances et les priorités parmi tous les commentaires recueillis.
- Les étudiants ont une formulation affinée du problème qui intègre les commentaires des parties prenantes.
- Les étudiants ont mené des entretiens avec les parties prenantes et rempli leur fiche de validation des parties prenantes AIVA 3.
- Les étudiants ont un compte GitHub et ont terminé les activités proposées dans Vibe Coding Your Own Founder’s Toolkit.
Vous avez recueilli les commentaires de vos amis et de votre famille, remis en question votre façon de penser et mené des entretiens avec les parties prenantes.
Dans la leçon « Vibe Coding Your Own Founder's Toolkit », vous avez créé votre boîte à outils du fondateur avec un module de stockage des commentaires et utilisé localStorage pour enregistrer vos données entre les actualisations de page.
Dans cette leçon, nous allons apprendre à ajouter des commentaires générés par l'IA à notre boîte à outils du fondateur, afin de nous aider à synthétiser tous les commentaires que nous avons recueillis.
Mais avant cela, vous apprendrez à améliorer vos compétences GitHub. Les développeurs professionnels utilisent les branches et les pull requests pour expérimenter en toute sécurité et collaborer avec d'autres. Ces compétences vous seront utiles tout au long de votre parcours entrepreneurial.
Améliorez vos compétences GitHub
Avant d'ajouter de nouvelles fonctionnalités, vous apprendrez comment travaillent les développeurs professionnels : en utilisant des branches pour expérimenter en toute sécurité, en validant le code pour enregistrer les progrès et en effectuant des requêtes pull/push pour fusionner le code.
Il s'agit d'informations importantes qui vous aideront tout au long de votre parcours avec votre application professionnelle. Vous collaborerez très probablement avec d'autres étudiants pour ce projet et dans la vie réelle.
Tout cela se fait via Git . Pour mieux comprendre, examinons quelques concepts.
Git est un système de contrôle de version qui suit chaque modification que vous apportez à votre code. Il vous permet notamment de :
- Expérimentez en toute sécurité: essayez de nouvelles fonctionnalités sans compromettre votre code de travail.
- Annuler les erreurs: Revenez à une version précédente si quelque chose ne fonctionne plus ou si vous changez d'avis.
- Collaborer: Travaillez avec d'autres personnes sans écraser les modifications de chacun.
Branches
Imaginons que vous rédigiez un document important. Au lieu de modifier votre seule version, vous décidez de créer un document en double pour faire des essais. Si les modifications fonctionnent, vous les fusionnez. Sinon, vous disposez toujours du document original et du nouveau document contenant les modifications qui n'ont pas fonctionné.
Les branches Git dans GitHub fonctionnent de la même manière. Voici comment cela fonctionne :
- branche principale – Votre version « officielle » de travail
- branche de fonctionnalité – une copie de la branche principale où vous créez une nouvelle fonctionnalité ou apportez des modifications. Vous pouvez nommer cette branche comme vous le souhaitez, mais nous vous recommandons d'utiliser un nom descriptif afin de vous souvenir de son objectif.
- fusionner –combiner votre branche de fonctionnalité et ses modifications dans la branche principale officielle
Supposons que votre branche principale fonctionne et ait été entièrement testée. Vous décidez ensuite de créer une nouvelle fonctionnalité, comme un nouveau bouton sur une page, ou même une simple modification de texte. Vous créez une nouvelle branche appelée « copy-change » à partir de votre branche officielle principale. Si quelque chose ne fonctionne pas pendant les tests, votre branche principale reste intacte et peut être utilisée pour recommencer.
Dans l'activité suivante, vous allez apporter une petite mise à jour à votre application, simplement pour vous exercer au processus de branchement et de fusion dans Github.
ACTIVITÉ 1
Pratiquez le workflow Github
Durée estimée : 20 minutes
1. Ouvrez Github et accédez à votre référentiel.
Aller à Github.com, accédez à votre référentiel, sélectionnez la branche sur laquelle vous avez travaillé dans l'unité technique précédente.
Vous devriez voir apparaître un message indiquant que cette branche a une validation d'avance sur la branche « main ».
Cela se produit parce que nous avons apporté des modifications au code dans cette branche, mais que nous ne les avons jamais poussées vers la branche principale.
Alors allons-y et faisons cela en cliquant sur le lien du message.
En cliquant sur le lien, vous ouvrirez la page Pull Request de GitHub où vous pourrez comparer les modifications, puis créer une pull request.
2. Créer une demande d'extraction
- Ajoutez un titre et une description. Github a peut-être déjà inséré un titre lorsque vous avez créé la branche, mais vous pouvez le modifier et ajouter une description de ce que vous avez fait.
2. Cliquez sur le bouton vert Créer une pull request ».
3. Fusionner le code et supprimer la branche
Comme vous êtes le seul propriétaire de ce dépôt, vous pouvez approuver vos propres pull requests. Dans les applications réelles impliquant plusieurs membres d'équipe, il est courant qu'un autre développeur examine votre demande et collabore avec vous en cas de problème. C'est ce que l'on appelle souvent la révision de code.
- Cliquez pour fusionner la demande d'extraction et confirmer la demande.
Notez qu'il s'agit ici d'un processus en deux étapes. Il s'agit d'une action importante, c'est pourquoi GitHub a mis en place un processus en deux étapes afin d'éviter toute erreur.
- Vous devriez voir un bouton permettant de supprimer la branche que vous avez utilisée pour apporter les modifications au code. Cela permet de garder votre référentiel propre et organisé, sans branches résiduelles qui l'encombrent. Cliquez sur le bouton pour supprimer la branche.
5. Accédez à votre référentiel pour créer une nouvelle branche.
- Revenez à votre référentiel.
- Sélectionnez la « branche » principale en haut à gauche de votre dépôt pour afficher la liste des branches disponibles.
- Sélectionnez « Afficher les branches », puis créez-en une nouvelle.
- Donnez un nom descriptif à cette leçon sur la validation par les parties prenantes.
- Cliquez Créer une nouvelle branche.
Conseil : Cette étape est facultative, mais nous vous recommandons vivement de travailler sur de nouvelles branches chaque fois que vous effectuez des mises à jour importantes. Vous pouvez choisir de démarrer cette nouvelle branche à partir de la branche « principale » ou d'une autre branche, en fonction de votre objectif. Mais il est courant de démarrer à partir de la branche principale officielle.
6. Ouvrez votre espace de code
Alors que nous ouvrons une nouvelle branche, nous allons continuer à utiliser l'espace de code que nous avons utilisé pour la dernière leçon. Rappelez-vous que nous avons enregistré certains commentaires de notre famille et de nos amis dans localStorage, qui est stocké dans le navigateur, mais lié à une URL particulière. Chaque espace de code a sa propre URL. Si nous ouvrions un nouvel espace de code, nous perdrions ce localStorage.
Donc, pour notre travail sur la boîte à outils du fondateur, continuons à utiliser le même espace de code afin de ne pas perdre ce stockage et d'avoir à le retaper sans cesse.
- Dans Github, accédez à vos espaces de code à partir du menu hamburger situé à gauche.
- Recherchez votre espace de code de la dernière activité et ouvrez-le.
6. Connectez votre espace de code à la nouvelle branche.
Comme nous avons supprimé notre ancienne branche et ouvert une nouvelle branche, nous voulons nous assurer que notre espace de code met à jour la nouvelle branche.
- Dans la fenêtre Terminal en bas de l'écran, tapez (sur deux lignes distinctes) :
git checkout main
git pull origin mainCela synchronise votre espace de code avec votre branche principale.
- Type
git checkout -b ma-branche
où ma-branche est le nom que vous avez donné à votre nouvelle branche dans Github à l'étape 5.
Cela vérifie la nouvelle branche afin que toutes les mises à jour, une fois validées et poussées, soient transférées vers la nouvelle branche. En même temps, vous préservez votre espace de code et votre stockage local dans le navigateur.
7 : Demander à l'IA de mettre à jour le formulaire
- Copiez et collez cette invite dans la section de discussion Copilot, qui devrait se trouver dans le volet le plus à droite.
Réduire la hauteur de tous les champs de saisie du formulaire à une seule ligne.
- Testez les modifications en tapant python3 -m http.server 8000 dans l'onglet terminal du panneau inférieur.
- Vérifiez dans l'application en cours d'exécution que la hauteur du formulaire a bien été réduite.
8. Valider les modifications sur Github
Dans la dernière leçon, vous avez validé et poussé ces modifications vers Github à l'aide de la fonctionnalité de contrôle de source dans Codespaces.
Vous avez pu voir les fichiers qui ont été modifiés, ajouter une instruction de validation et cliquer sur Valider pour valider les modifications dans votre branche de référentiel.
Vous pouvez faire la même chose ici. Cependant, pour savoir comment procéder à l'aide des commandes du terminal, suivez les étapes suivantes.
- Ouvrez le sous-onglet Terminal dans le panneau inférieur.
- Cliquez sur l'icône + pour ouvrir un menu.
- Sélectionnez Nouveau terminal.
- Tapez git statuspour afficher les informations relatives à la branche.
Cela vous indiquera toutes les modifications que vous avez apportées et qui sont prêtes à être intégrées dans le processus de codage. Vous devriez voir quelque chose de similaire à ceci :
- Lisez le message pour voir les modifications apportées.
- Type git add . à mettre de côté vos modifications. Le « . » signifie que vous mettez en attente toutes les modifications apportées aux fichiers.
- Type git status à nouveau pour vérifier que vos modifications sont préparées et prêtes à être validées.
- Validez vos modifications en tapant git commit -m « Mise à jour de la hauteur du formulaire ».
« Mise à jour de la hauteur du formulaire » est ce qu'on appelle le message de validation. Il est important que ce message soit suffisamment descriptif pour vous et pour toute autre personne qui examinera la validation. Maintenant, envoyez vers GitHub en tapant git push origin tech-unit-2-activity1-updating-form (ou quel que soit le nom que vous avez donné à votre branche après origin).
Cela indique à git de pousser vos commits vers le dépôt Github distant (origin) et de les placer dans la branche spécifiée, dans ce cas, «tech-unit-2-activity1-updating-form ».
Astuce : l'utilisation du drapeau -u, comme dans git push -u origin tech-unit-2-activity1-updating-form, définit l'origine et votre branche par défaut, de sorte que les commandes futures ne nécessitent que git push.
9. Vérifier sur Github
- Revenez sur Github dans le navigateur et retournez à la branche où vous avez poussé ces modifications.
Vous devriez voir un message indiquant qu'une modification récente a été effectuée sur cette branche. - Cliquez Compare & pull request ce qui devrait lancer le processus que vous avez appris dans les étapes précédentes.
- Suivez les étapes pour créer une pull request et fusionner les modifications dans la branche principale.
Dans ce cas, vous pouvez conserver votre branche pour l'utiliser dans les activités restantes de cette leçon plutôt que de la supprimer.
Dans la leçon technique précédente, vous avez créé un formulaire de saisie pour votre énoncé de problème et les commentaires de vos amis et de votre famille dans votre boîte à outils du fondateur. Dans cette activité, vous allez ajouter un nouvel onglet à votre boîte à outils du fondateur afin de pouvoir saisir les informations et les commentaires des parties prenantes que vous avez recueillis dans la leçon « Affiner le problème ».
ACTIVITÉ 2
Créez votre outil de suivi des parties prenantes
Durée estimée : 30 minutes
1. Ouvrez Github et Codespaces.
Aller à Github.com, puis naviguez jusqu'à vos espaces de code et ouvrez celui de l'activité précédente ou vous l'avez peut-être déjà ouvert dans un onglet depuis la dernière activité.
2. Ajouter une fonctionnalité de suivi des parties prenantes
Dans Codespaces, dans le panneau Copilot, ajoutez l'invite suivante.
Ajouter un onglet « Suivi des parties prenantes » où je peux consulter les commentaires des parties prenantes de manière structurée.
L'onglet « Suivi des parties prenantes » doit contenir :
- Titre : « Suivi des parties prenantes »
- Sous-titre : « Gérez vos recherches pour vos entretiens »
- Un formulaire comportant les champs suivants :
- Nom (texte)
- Type (menu déroulant : entretien, enquête, e-mail, SMS)
- Commentaires clés (idées, préoccupations soulevées, points qui ont trouvé un écho) (zone de texte)
Lorsque l'on clique sur le bouton :
- Stockez toutes les informations dans des enregistrements localstorage, au format JSON.
- Afficher toutes les informations relatives aux parties prenantes dans un tableau au bas de l'écran.
- Afficher un message de réussite après avoir ajouté un enregistrement avec succès
Autres directives :
- Maintenir une interface utilisateur claire et cohérente
Remarque concernant le stockage des données :
Les données relatives à vos parties prenantes sont enregistrées dans le localStorage de votre navigateur. Dans l'unité technique 1, nous avons appris que :
- Vos données peuvent persister entre les sessions du navigateur, mais elles sont spécifiques à ce navigateur sur cet appareil.
- De plus, si vous effacez les données de votre navigateur, utilisez un autre ordinateur ou démarrez un nouvel environnement Codespace, vous devrez saisir à nouveau vos données.
Pour l'instant, cela suffit pour organiser vos recherches. Dans les unités suivantes, vous découvrirez le stockage dans le cloud pour les données permanentes.
Voici à quoi ressemble notre boîte à outils du fondateur lorsque vous utilisez cette invite. Votre application peut avoir un aspect différent.
3. Ajoutez vos dossiers de parties prenantes au formulaire.
- Saisissez les informations issues de votre feuille de travail AIVA 3 : Validation des parties prenantes dans le formulaire.
Veuillez noter que nous avons conçu un formulaire minimaliste et ouvert. Faites donc de votre mieux pour saisir les informations importantes que vous avez recueillies auprès de chaque partie prenante. - Vérifiez que toutes les informations saisies apparaissent dans le tableau.
- Vérifiez également localStorage à l'aide des outils de développement pour vous assurer que toutes les informations sont correctement stockées au format JSON.
Nous continuerons à enrichir l'application dans la prochaine activité, il n'est donc pas nécessaire de valider et de publier vos modifications pour l'instant.
Remarque : l'utilisation gratuite de Copilot est limitée à :
- 50 messages instantanés/mois
- 2000 complétions de code par mois (code en ligne)
Pour cette raison, vous devez faire attention au nombre de discussions que vous initiez avec Copilot dans Codespaces. Si vous épuisez vos crédits, ils ne seront réinitialisés qu'au mois suivant. Dans ce cas, vous pouvez utiliser d'autres LLM externes (Claude, Gemini, ChatGPT) pour vous aider à coder. Bien qu'ils ne soient pas aussi rapides que Copilot intégré, ils ont tous la capacité de vous aider à coder. Il vous suffira de copier/coller le code (dans les deux sens).
Connexion aux services d'IA
Vous avez pu organiser les commentaires de vos parties prenantes dans cet onglet. Et vous avez déjà effectué une analyse des informations que vous avez recueillies.
C'est le moment idéal pour mettre l'IA à contribution afin de repérer les tendances qui auraient pu vous échapper. Il s'agit d'un outil collaboratif qui vous aidera à faire progresser l'excellent travail que vous avez déjà accompli.
Dans cette partie, vous connecterez votre application à un véritable service d'IA et créerez un analyseur de commentaires qui mettra en évidence les informations issues de votre étude auprès des parties prenantes.
Nous utiliserons Gemini de Google comme LLM, car il offre des limites gratuites généreuses sur les modèles LLM puissants.
Comment fonctionnent les applications basées sur l'IA
Vous avez probablement déjà utilisé ChatGPT, Claude ou Gemini. Mais vous êtes-vous déjà demandé comment d'autres applications telles que Notion, Grammarly ou Duolingo intègrent des fonctionnalités d'IA dans leurs produits ?
Ils ne créent pas leurs propres modèles d'IA à partir de zéro. Ils se connectent plutôt à des modèles et services d'IA existants via des API. Nous entrerons plus en détail dans les unités suivantes, mais voici les concepts de base.
Une API (interface de programmation d'application) est simplement un moyen pour un logiciel de communiquer avec un autre. Lorsque votre application a besoin de capacités d'IA, elle envoie un message à un service d'IA, et celui-ci renvoie une réponse.
Cet échange prend généralement moins de quelques secondes. Votre application envoie une requête API IA, attend une réponse, puis affiche le résultat.
Voici comment fonctionne chaque application d'IA
Une fois que vous comprenez ce modèle, vous pouvez ajouter l'IA à n'importe quelle application que vous développez.
Choisir un fournisseur d'IA
Tout comme vous pouvez choisir entre différents fournisseurs de stockage cloud (Google Drive, Dropbox, iCloud), vous pouvez choisir entre différents fournisseurs d'IA. Voici quelques options :
Fournisseur
Niveau gratuit
Connu pour
Google (Gemini)
Généreux avec les modèles haut de gamme proposés
Applications nécessitant plusieurs modèles offrant le meilleur rapport performances/coût
OpenAI (ChatGPT)
Limité (version gratuite uniquement via leur application ChatGPT)
Première entreprise à disposer d'un modèle LLM public, qui est devenu la norme dans le secteur.
Groq
Idéal pour le développement, 30 requêtes/minute et 1 000 jetons/minute, aucune carte de crédit requise
Fournisseur de modèles LLM dans le cloud. Idéal pour les applications qui nécessitent différents modèles pour différents cas d'utilisation, y compris open source .
Anthropique (Claude)
Limité (version gratuite via leur application Claude)
Applications qui analysent les documents longs, la logique et le raisonnement
Pour ce cours, nous recommandons les modèles Gemini de Google car :
- Google n'exige pas de carte de crédit pour accéder à ses API d'IA.
- Niveau gratuit généreux avec de très bons modèles de frontière
- Configuration très facile: vous pouvez obtenir une clé API en moins de 5 minutes
- Bonne documentation: facile à dépanner en cas de problème
Les concepts que vous apprenez ici sont transférables à n'importe quel fournisseur LLM. Si vous souhaitez ultérieurement utiliser OpenAI ou Claude dans votre application de production, le code et la structure sont pratiquement identiques. Il suffit souvent d'une clé API différente.
Que sont les clés API ?
Lorsque vous utilisez Google Drive, Google sait qui vous êtes car vous êtes connecté. Mais lorsque votre code communique avec l'IA de Google, comment Google sait-il que c'est vous ?
C'est à cela que sert une clé API. Il s'agit d'une méthode d'authentification simple qui fonctionne de manière similaire à un mot de passe. Il existe d'autres méthodes d'authentification que nous aborderons dans les unités suivantes.
Les clés API sont généralement une longue chaîne de caractères qui ressemble à ceci :
AIzaSyB1234567890abcdefghijklmnopqrstuvwx
Lorsque votre application appelle l'API Gemini, elle inclut cette clé. Google vérifie la clé, confirme qu'elle appartient à un compte valide et traite votre demande.
Pourquoi les clés API doivent rester secrètes
Les clés API étant assimilables à des mots de passe, elles doivent être conservées en lieu sûr.
Si quelqu'un s'empare de votre clé, il peut causer beaucoup de dégâts, par exemple :
- Utilisez votre quota API, qui peut entraîner des frais supplémentaires sur les comptes payants, ou épuisez votre quota gratuit. Cela peut coûter très cher.
- Votre compte sera suspendu pour abus, ce qui est vraiment grave.
Cela arrive plus souvent que vous ne le pensez. Les développeurs téléchargent parfois accidentellement leurs clés sur GitHub, et les robots automatisés peuvent les trouver en quelques minutes.
Pour cette unité, nous utiliserons une approche simple et efficace : nous stockerons la clé dans un fichier local accessible uniquement dans Codespaces au moment de l'exécution. Elle comprend :
- Un fichier .env: fichier spécial qui stocke la configuration.
- Ce fichier doit être ajouté au fichier .gitignore afin que Git sache qu'il ne doit jamais le télécharger sur le cloud GitHub.
- Un paquet de code appelé « dotenv » chargera la clé à partir de l'environnement.
Cela permet de conserver votre clé sur votre environnement de développement local ou votre ordinateur local, et jamais dans votre référentiel.
Dans les unités suivantes, vous découvrirez des méthodes d'authentification plus sûres et sécurisées, telles que l'utilisation des secrets GitHub.
REMARQUE IMPORTANTE CONCERNANT LA SÉCURITÉ :
Dans votre environnement Codespaces, votre clé API reste sécurisée car le serveur gère les appels API. Dans une application de production, vous aurez besoin de mesures de sécurité supplémentaires que vous apprendrez dans les unités suivantes. Pour plus d'informations sur Codespaces, rendez-vous sur Sécurité dans GitHub Codespaces
ACTIVITÉ 3
Configurez l'intégration LLM et créez votre analyseur de commentaires
Durée estimée : 45 minutes
1. Obtenir une clé API via Google AI Studio
- Accédez à aistudio.google.com
- Connectez-vous avec votre compte Google (ou créez un nouveau compte)
- Accédez à la page Tableau de bord -> Clés API.
- Si vous êtes nouveau sur AI Studio, Google génère une clé API Gemini par défaut pour vous. Vous devez tout de même cliquer sur «Créer une clé API »et vous devrez peut-être également créer un projet cloud.
Si vous avez déjà utilisé AI Studio, recherchez un élément tel que «Clé API Gemini par défaut »sur cet écran.
De plus, si vous avez déjà des projets dans Google Cloud, AI Studio peut vous demander de choisir l'un de ces projets existants pour y associer la clé API, ou vous pouvez envisager de créer un nouveau projet dans Google Cloud Console et d'associer la nouvelle clé API à ce nouveau projet.
- Ajoutez un nom descriptif qui vous permettra de vous souvenir quelle application utilise la clé. Si vous utilisez la clé par défaut, cliquez sur les 3 points à l'extrême droite pour renommer la clé.
- Vous pouvez copier la clé et la stocker temporairement dans un endroit sûr. Nous l'utiliserons plus tard.
Conseil : Nous vous recommandons d'utiliser une clé API par application créée afin de mieux gérer et contrôler l'utilisation. Dans les unités suivantes, vous découvrirez également d'autres bonnes pratiques, telles que la gestion de clés API distinctes pour chaque environnement.
2. Ouvrez votre espace de code Github à partir de l'activité précédente.
Accédez à vos espaces de code dans GitHub et ouvrez l'espace de code de l'activité 2.
Si vous avez déjà validé et fusionné vos modifications et supprimé la branche, suivez les étapes pour créer une nouvelle branche, synchronisez votre espace de code avec la branche principale et extrayez la nouvelle branche.
3. Créer un nouveau fichier pour stocker la clé API
N'oubliez pas que les clés API sont comme des mots de passe. Nous devons les stocker de manière spéciale dans notre code afin que Git sache les ignorer et les garder hors du référentiel GitHub, où n'importe qui pourrait les voir.
- Accédez au Gestionnaire de fichiers dans le panneau de gauche : Cliquez sur l'icône représentant deux documents dans la barre latérale supérieure gauche.
- Créer un nouveau fichier : Passez votre souris sur le nom de votre projet (le dossier racine). Cliquez sur la petite icône « + » intitulée « Nouveau fichier ».
- Nommez le fichier .env (notez le point dans le nom du fichier) et ajoutez ce texte à l'aide de l'éditeur dans ce fichier, puis enregistrez-le.
GEMINI_API_KEY=<paste your key here>
Par exemple :
GEMINI_API_KEY=AIzaSyB1234567890abcdefghijklmnopqrstuvwx
4. Vérifiez que le fichier est configuré pour être ignoré.
- Trouver .gitignore dans le gestionnaire de fichiers et ouvrez-le.
- Assurez-vous qu'il contient ces deux lignes de texte :
- .env
- node_modules/
Ces deux lignes indiquent à Git d'ignorer ces fichiers et dossiers dans tous les commits, afin qu'ils ne soient pas stockés sur le serveur Github.
La première ligne concerne le fichier de clé API (.env), et la seconde concerne tous les paquets de code dont notre application a besoin pour fonctionner. Il est recommandé d'inclure les dossiers contenant les paquets de code, car nous ne voulons pas utiliser tout l'espace qui nous est alloué sur GitHub pour les stocker. Copilot a peut-être ajouté automatiquement de nombreux autres fichiers et dossiers à ignorer, mais effectuez une recherche pour confirmer que .env et node_modules/ sont présents dans le fichier.
Si ce n'est pas le cas, ajoutez-les dans de nouvelles lignes et enregistrez le fichier.
- Vérifiez que le fichier .env est ignoré en tapant git status dans la fenêtre du terminal.
- Vérifiez ce que renvoie git status pour vous assurer que .env n'apparaît pas dans la liste. Si c'est le cas, assurez-vous que votre fichier .gitignore est correctement enregistré et qu'il contient la ligne .env que nous avons ajoutée.
5. Installez le paquet « dotEnv ».
Votre application actuelle n'est pas configurée pour lire les fichiers .env . C'est pourquoi nous devons installer un package de code populaire appelé «dotenv», qui charge vos variables d'environnement variables d'environnement, afin que votre code puisse accéder à la clé API sans qu'elle soit écrite directement dans votre code.
Il existe d'autres alternatives, mais celle-ci est l'une des approches les plus courantes, et la plupart des développeurs la connaissent bien.
- Allez dans le panneau du terminal et tapez npm install dotenv
- Attendez que le paquet soit installé (cela ne devrait prendre que quelques secondes).
6. Demandez à l'IA de créer votre analyseur de commentaires
Maintenant que vous avez ajouté la clé API de manière sûre et sécurisée et installé le package de code « dotenv » qui peut charger vos variables d'environnement dans votre fichier .env (votre clé API), vous êtes prêt à utiliser Copilot pour ajouter le module Feedback Analyzer.
Copiez et collez cette invite :
Votre tâche consiste à apporter les modifications suivantes :
- Créez un nouvel onglet intitulé « Analyseur de commentaires » en suivant les instructions spécifiques ci-dessous.
Pour l'onglet Analyseur de commentaires :
- Ajoutez un sous-titre avec le texte « Trouvez des tendances dans tous vos commentaires ».
- Champ permettant à l'utilisateur de saisir le problème.
- Un bouton pour « Enregistrer le problème » et le stocker dans localStorage.
- Un bouton « Analyser tous les commentaires »
- Une zone de sortie pour les résultats
Lorsque vous cliquez sur le bouton Enregistrer, le problème est stocké dans le stockage local.
Lorsque vous cliquez sur le bouton Analyser :
- Interrogez le problème et tous les enregistrements des parties prenantes stockés dans localStorage.
- Envoyez toutes les informations relatives aux problèmes et aux commentaires des parties prenantes à l'IA pour analyse en effectuant un appel API LLM à Gemini.
- Afficher les résultats de l'analyse IA tels que renvoyés par le LLM.
Invite IA :
Utilisez l'invite d'instruction système suivante :
« Vous êtes un analyste commercial expérimenté. Analysez les commentaires des parties prenantes fournis en rapport avec le problème et structurez votre réponse en plusieurs sections :
- TENDANCES : Quels thèmes apparaissent dans plusieurs sources ? (3 à 5 points)
- SURPRISES : Les divergences entre les sources et leur signification (3 à 5 points)
- HYPOTHÈSES À RÉEXAMINER : Quelles hypothèses ont été remises en question ou se sont révélées fausses ? (3 à 5 points)
- SIGNAL D'ALERTE : Quelles préoccupations ou quels risques sont apparus ? (3 à 5 points)
- LES 3 PRINCIPALES CONCLUSIONS : Les points les plus importants à retenir pour votre problème (3 à 5 puces) »
Exigences techniques :
- Utilisez l'environnement local pour charger la clé API.
- Ajoutez un serveur backend Node.js/Express simple pour lire à partir de .env.
- Effectuez une requête API à l'aide de la clé API Gemini, en suivant les directives relatives aux spécifications API.
- Utilisez le modèle Gemini « gemini-2.5-flash » avec la configuration suivante :
Température = 0,7
Notez les exigences techniques. Comme nous voulons que la clé API soit lue à partir du fichier .env pour plus de sécurité, cela nécessite un serveur backend. C'est pourquoi nous demandons d'utiliser le serveur Node.js/Express.
Copilot pourrait vous inviter à installer les paquets express, node et @google/generative-ai. Suivez ses instructions pour installer les paquets requis.
Conseil : Il est impossible de suivre tous les derniers modèles de Google. Au 7 janvier 2026, « Gemini 3 Pro » est le modèle d'IA le plus récent et le plus puissant de Google. Il est disponible gratuitement dans Google AI Studio avec certaines limites. En règle générale, il est recommandé d'utiliser le modèle gratuit le plus avancé disponible à ce stade précoce du processus de développement de votre idée commerciale basée sur l'IA. Mais une fois que vous l'avez déployé, vous devez vous assurer de sélectionner le modèle adapté à vos besoins spécifiques et qui offre un bon équilibre entre coût et performances. Gemini Pro 3 est très coûteux à exploiter en production réelle et doit être utilisé à bon escient.
7. Tester l'analyseur
Une fois que l'IA a fini de construire le module, vous pouvez le tester.
- Installez toutes les dépendances nécessaires, conformément aux instructions de Copilot.
- Avant de lancer votre application, vérifiez que Copilot a ajouté la bonne version de Gemini (pour janvier 2026 !).
- Ouvrez server.js.
- Recherchez la chaîne « generativelanguage.googleapis.com » et vérifiez qu'elle utilise gemini-2.5-flash.
- Exécutez l'application en tapant npm start dans le panneau du terminal.
Il s'agit d'une commande différente, car vous exécutez désormais un serveur backend et il existe donc des dépendances. - npm start ouvrira un autre port (3000) afin qu'il dispose de son propre localStorage.
Vous devrez saisir à nouveau les parties prenantes et les commentaires dans l'application. - Ensuite, accédez à l'onglet Analyseur, saisissez votre énoncé du problème et enregistrez-le.
- Cliquez sur le bouton Analyser tous les commentaires pour appeler l'API Gemini.
- Attendez les résultats. Cela peut prendre quelques secondes.
Ce que vous devriez voir :
- L'analyse IA doit synthétiser tous les commentaires de l'ensemble de vos parties prenantes.
- La sortie doit être organisée en sections comme indiqué.
Et si cela ne fonctionne pas :
- Vérifiez que votre clé API est correcte et enregistrée dans le fichier .env.
- Demandez à Copilot (ou à un autre LLM) de vous aider à déboguer le problème.
8. Notez ce que l'analyseur vous indique
Prenez quelques minutes pour lire les résultats fournis par l'API Gemini. Vous pouvez copier ces résultats et les enregistrer dans un document afin de pouvoir vous y référer ultérieurement.
Voici quelques éléments à prendre en considération :
- Quels sont les modèles pour lesquels l'IA a détecté avec un haut degré de confiance ce que vous n'auriez pas remarqué vous-même ? Et inversement.
- Les parties prenantes ont-elles exprimé un avis différent de celui de vos proches ?
- Quelles lacunes pourriez-vous avoir besoin d'approfondir ?
9. Valider et envoyer les modifications vers Github
- Une fois que vous êtes satisfait du bon fonctionnement de l'Analyzer, validez et envoyez vos modifications vers Github, soit à l'aide de la fonctionnalité Source Control dans Codespaces, soit en saisissant les commandes git dans une fenêtre de terminal.
- Ouvrez Github et votre référentiel dans une nouvelle fenêtre, trouvez le commit pour votre branche, créez une pull request et fusionnez-la.
- Pour garder les choses organisées, vous pouvez supprimer la branche que vous avez créée pour cette unité.
- Fermez l'onglet Codespace pour enregistrer vos crédits Codespace (voir conseil ci-dessous), mais ne supprimez pas le Codespace.
Conseil : votre compte Github gratuit vous donne droit à un temps limité dans Codespaces (ainsi qu'à des crédits Copilot limités). Pour Codespaces, vous bénéficiez de :
- 120 heures de calcul par mois (sur une machine classique à deux cœurs, cela correspond à environ 60 heures par mois)
- 15 Go de stockage
Cela devrait suffire pour l'utilisation de Codespace dans le cadre de ce projet.
Il est recommandé de fermer l'onglet du navigateur Codespace lorsque vous avez terminé de travailler dans un espace de code, afin de ne pas utiliser de temps d'inactivité qui sera décompté de votre allocation mensuelle. Vous pouvez toujours le rouvrir en y accédant depuis votre compte Github.
Les espaces de code seront automatiquement supprimés après 30 jours d'inactivité. Cependant, si vous avez validé et poussé des modifications, vous ne perdrez aucun code, même si l'espace de code est supprimé. Vous pouvez toujours créer un nouvel espace de code dans Github.
Réflexion
Vous avez passé beaucoup de temps à coder pour créer une application Founder's Toolkit permettant de stocker et de synthétiser diverses informations. Voici quelques questions à vous poser :
Termes clés
- Git — Un système de contrôle de version qui enregistre toutes les modifications apportées à votre code au fil du temps, ce qui vous permet de corriger vos erreurs, d'expérimenter en toute sécurité et de collaborer avec d'autres personnes.
- Branche — Une copie parallèle de votre base de code qui vous permet de développer de nouvelles fonctionnalités ou d'apporter des modifications sans affecter la version principale stable.
- Commit — Un instantané enregistré des modifications apportées à votre code à un moment précis, accompagné d'un message descriptif expliquant ce qui a changé et pourquoi.
- Pull Request (PR) — Proposition formelle visant à fusionner les modifications d'une branche avec celles d'une autre, souvent mise à profit pour procéder à une révision du code avant que les modifications ne soient officialisées.
- Push — Transfert de vos commits locaux vers un dépôt distant sur GitHub afin qu'ils soient enregistrés dans le cloud et accessibles à vos collaborateurs.
- Dépôt (Repo) — Emplacement central où sont stockés tous les fichiers, dossiers et l'historique des versions de votre projet, que ce soit en local ou sur GitHub.
- API (interface de programmation d'application) — Moyen standardisé permettant à deux logiciels de communiquer entre eux. Lorsque votre application a besoin de fonctionnalités d'IA, elle envoie une requête à l'API d'un service d'IA et reçoit une réponse.
- Clé API — Une chaîne de caractères secrète et unique qui permet d'authentifier votre application auprès d'un service externe ; elle fonctionne comme un mot de passe permettant d'identifier l'auteur d'une requête.
- Fichier .env — Fichier de configuration caché servant à stocker localement des valeurs sensibles, telles que des clés API, afin de les maintenir hors de votre code source et à l'écart du contrôle de version.
- .gitignore — Fichier qui indique à Git quels fichiers et dossiers exclure des commits, afin d'empêcher que des données sensibles (comme .env) ou des fichiers superflus (comme node_modules) ne soient publiés sur GitHub.
- dotenv — Un package qui lit votre fichier .env et met ses valeurs à la disposition de votre application lors de l'exécution, sans avoir à intégrer de données sensibles en dur dans votre code.
- LLM (modèle linguistique à grande échelle) — Type de modèle d'IA entraîné sur d'énormes quantités de texte, capable de comprendre et de générer du langage humain, utilisé ici pour analyser et synthétiser les retours des parties prenantes.
- Température LLM — Paramètre qui détermine le degré de créativité ou de prévisibilité des réponses d'un modèle d'IA. Des valeurs faibles produisent des résultats plus cohérents ; des valeurs élevées apportent davantage de variété et de créativité.
- npm (Node Package Manager) — Un outil permettant d'installer et de gérer des paquets de code réutilisables (tels que dotenv et Express) qui enrichissent votre projet de nouvelles fonctionnalités sans que vous ayez à tout écrire vous-même.
Ressources complémentaires
- Guide de démarrage rapide de l'API Google AI Studio: Documentation officielle de l'API Google AI Studio
- API Gemini | Google AI pour les développeurs
- Guide des branches GitHub: En savoir plus sur les branches
