- Commencez à créer une application fonctionnelle basée sur l'IA à l'aide d'un outil sans code.
- Découvrez comment les applications Web enregistrent les données à l'aide du stockage du navigateur.
- Comprendre comment l'IA peut être un partenaire de réflexion, et non un substitut à la réflexion.
- Apprenez à connecter votre projet à GitHub afin que votre code ne soit jamais perdu.
- Une application Founder's Toolkit fonctionnelle intégrée à Github Codespaces qui comprend :
- Module de stockage des commentaires pour organiser les contributions initiales des parties prenantes
- Module contradictoire qui apporte une « troisième voix » et remet en question votre définition du problème.
- A référentiel GitHub avec votre projet Founder's Toolkit où votre code sera enregistré
- Les élèves comprennent les concepts fondamentaux de l'IA et ont exploré les outils d'IA dans le cadre des modules consacrés à l'entrepreneuriat (sensibilisation à l'IA et esprit d'entreprise).
- Aucune expérience préalable en codage ou en ingénierie rapide n'est requise.
De l'exploration à l'action
Jusqu'à présent, dans ce programme, vous avez découvert ce qu'est l'IA et comment elle transforme le monde. Vous avez également mis en pratique votre esprit d'entreprise en partageant votre problème initial avec vos amis et votre famille et en leur posant les questions suivantes :
- Ce problème les touche-t-il ?
- Quels aspects considèrent-ils comme les plus importants ?
- Quelles questions ou préoccupations vous viennent à l'esprit ?
- Qu'est-ce qui vous échappe dans ce problème ?
Vous les avez encouragés à jouer les anticonformistes et avez pris note de leurs commentaires.
Il est maintenant temps de mettre l'IA à contribution. Vous disposez d'informations précieuses, mais celles-ci sont probablement dispersées dans des notes, des messages et votre mémoire. Et même si vos amis et votre famille peuvent être honnêtes, ils peuvent néanmoins hésiter à aborder les questions les plus difficiles.
L'IA comme partenaire de réflexion
Un partenaire de réflexion vous aide à explorer des idées, à poser de meilleures questions et à repérer ce qui pourrait vous échapper. L'IA est étonnamment douée pour cela, et de nombreuses entreprises prospères l'utilisent déjà à cette fin. Mais pour utiliser efficacement l'IA, vous devez comprendre ses forces et ses limites.
Dans les deux premières unités techniques, vous apprendrez à utiliser l'IA comme partenaire de réflexion grâce auvibe coding. Le vibe coding consiste à décrire ce que vous voulez en langage clair, et l'IA génère les fonctionnalités pour vous. Pour cette leçon, nous utiliserons le vibe coding avec Github Copilot pour créer une application Founder's Toolkit, une application potentiellement utile pour renforcer votre propre projet.
Important : Les outils d'IA que vous créez sont destinés à compléter les commentaires humains, et non à les remplacer. Vous avez déjà discuté avec de vraies personnes, ce qui est essentiel. L'IA ajoute une troisième perspective et vous aide à donner un sens à ce que vous avez entendu.
Premiers pas avec Github
Pour l'ensemble de ce programme, vous utiliserez GitHub et nous tirerons parti de nombreuses fonctionnalités, notamment ses capacités de stockage.
Outre son utilisation principale pour la gestion de code, Github propose également l'agent IAGithub Copilot et la plateforme de codage dans le cloud Codespaces. Nous utiliserons Codespaces, un environnement de développement qui s'exécute dans votre navigateur. Vous pourrez indiquer à Copilot en langage naturel ce que vous souhaitez créer et voir le code généré dans Codespaces afin de le comprendre, de le tester et, enfin, de le déployer.
Nous pouvons les décrire ici :
- GitHub => Accueil de votre projet, similaire à Google Drive pour le code
- Espaces de code => Votre espace de travail similaire à Google Docs, mais destiné à la création d'applications
- Copilot => Votre partenaire de codage IA qui transforme vos idées en code fonctionnel
GitHub résout de nombreux problèmes liés au développement de produits. Il s'agit d'une plateforme sur laquelle les développeurs stockent et partagent principalement du code, mais qui s'est récemment transformée en partenaire de codage IA. L'une de ses missions consiste à démocratiser la création de logiciels pour tous. C'est pourquoi elle a investi dans davantage de capacités IA afin de donner les moyens à chacun d'agir, et propose des niveaux gratuits avec des limites généreuses.
Pour commencer :
- Si vous possédez déjà un compte Github, vous pouvez ignorer ces étapes. Sinon, rendez-voussur github.com
- Cliquez sur « S'inscrire » et suivez les étapes (c'est gratuit et cela prend environ 2 minutes).
- Utilisez une adresse e-mail que vous consultez régulièrement et nous vous conseillons de choisir un nom d'utilisateur professionnel, car ce nom d'utilisateur sera celui qui apparaîtra auprès des autres développeurs lorsque vous collaborerez avec eux.
Si vous êtes inscrit dans un établissement scolaire ou une université, inscrivez-vous à un compte étudiant Github Education . Avec le Student Developer Pack, vous bénéficierez d’un compte Github Pro gratuit, d’un nombre illimité de dépôts et de crédits Copilot supplémentaires. Vous aurez également accès à des outils de développement gratuits proposés par des tiers.
Enregistrement de vos commentaires
Préparez votre fiche de travail « Unité 2 : Esprit d'entreprise » et vos notes d'entretien.
Dans ces activités, vous allez configurer votre environnement de développement et créer un collecteur de commentaires afin d'organiser les informations que vous avez recueillies.
ACTIVITÉ 1
Démarrez votre environnement de développement
Durée estimée : 15 minutes
1. Ouvrez Github et créez votre premier référentiel.
Un référentiel (ou « repo ») est un emplacement central pour votre projet sur GitHub.
- Créons-en un en cliquant sur « Créer un référentiel » ou « Nouveau ».
- Ajoutez un nom et une description pour le dépôt.
- Pour un nom , vous pouvez lui donner un nom tel que « AIVA Founders Toolkit », mais il doit être unique, alors ajoutez-y un identifiant personnel.
- Pour une description, l'application AIVA Founder's Toolkit suffira.
- Sélectionnez les éléments suivants dans la configuration :
- Visibilité = Privée pour garantir que vous êtes le seul à pouvoir consulter le référentiel
- Readme = True pour que Github crée automatiquement un fichier par défaut qui sera utilisé pour la documentation
- Ajouter le fichier .gitignore = Node
- Ajouter une licence = Licence MIT
Nous verrons ce que signifient ces détails dans les unités suivantes. Si vous en avez manqué certains, ne vous inquiétez pas, nous pourrons les ajouter manuellement plus tard.
2. Créer une nouvelle branche
- Cliquez sur la branche « main » en haut à gauche de votre dépôt pour afficher la liste des branches disponibles.
- Sélectionner « Afficher les branches » puis créez une nouvelle branche.
- Donnez un nom à la nouvelle branche. Ce nom est uniquement destiné à votre usage personnel, vous pouvez donc le nommer comme vous le souhaitez, mais il est utile de lui donner un nom identifiable, tel que tech-unit-1.
Cette étape est facultative, mais nous vous recommandons vivement de travailler sur de nouvelles branches chaque fois que vous effectuez des mises à jour importantes. Dans les unités suivantes, nous aborderons en détail les meilleures pratiques.
3. Sélectionnez la branche et ouvrez Codespaces.
Nous avons créé une branche où une version du code sera stockée et enregistrée. Nous voulons maintenant commencer à coder dans un environnement de développement à l'aide de Codespaces.
- Accédez à la branche que vous venez de créer. Pour ce faire, cliquez sur le nom de la branche dans la fenêtre Afficher toutes les branches.
- Cliquez sur le « Code » et sélectionnez Créer un nouvel espace de code.
- Attendez que Github crée l'environnement de développement.
Vous verrez que votre navigateur ouvre une fenêtre qui est un outil de développement de code qui ressemble et fonctionne comme Visual Studio Code. Il s'agit de votre espace de travail de développement où nous commencerons à coder.
4. Explorer l'interface
Une fois Codespaces chargé, vous remarquerez qu'il comporte plusieurs panneaux :
- Explorateur de fichiers : vos fichiers de projet
- Éditeur : où vous pouvez prévisualiser et modifier les fichiers
- Terminal : où vous exécutez les commandes
- Github Copilot : où vous demanderez à l'IA de vous aider à créer
- Panneau supérieur : avec une barre de menu et une fonction de recherche
Points à noter :
- Votre code est déjà enregistré dans Codespaces : Contrairement à d'autres outils où vous risquez de perdre votre travail, tout ce que vous créez dans Codespaces est automatiquement enregistré. À un moment donné, vous devrez valider vos modifications dans votre branche de référentiel sur Github, mais vous pouvez fermer et rouvrir Codespaces et votre code sera toujours là.
- Les espaces de code qui ne sont pas actifs pendant 30 jours sont supprimés.
- Il existe d'autres fonctionnalités : Inutile pour l'instant de vous attarder sur ces onglets et ces panneaux. Ils représentent d'autres workflows du processus de développement que nous aborderons dans les unités suivantes.
Maintenant que votre environnement de développement est configuré dans Codespaces, vous êtes prêt à commencer à créer une application fonctionnelle en moins de 10 minutes.
Principes fondamentaux de l'ingénierie rapide
Vous utiliserez l'IA pour vous aider à développer cette application fonctionnelle.
Voici l'idée clé : l'IA n'est efficace que dans la mesure où les instructions que vous lui donnez sont pertinentes.
Si vous donnez des instructions vagues, vous obtiendrez des résultats vagues. Si vous donnez des instructions spécifiques et bien structurées, vous obtiendrez des résultats utiles et ciblés.
L'ingénierie des invites consiste à rédiger des instructions qui incitent l'IA à produire des résultats utiles et spécifiques. En améliorant vos instructions, vous améliorez votre application. Il existe de nombreuses techniques pour améliorer les instructions de l'IA. D'innombrables ouvrages ont été écrits à ce sujet.
Mais en substance, la plupart des techniques impliquent :
Contexte
Par exemple
« Donnez-moi votre avis sur mon idée. »
Avec contexte :
« Je suis un entrepreneur débutant qui s'intéresse au problème du gaspillage alimentaire dans les cantines scolaires. J'ai interrogé deux élèves qui sont confrontés à ce problème quotidiennement. Donnez-moi votre avis sur mon idée. »
Structure de sortie
Par exemple
« Énumérez quelques défis. »
Avec contexte :
« Énumérez exactement 3 défis, chacun en une seule phrase de moins de 20 mots. »
Contrôle de tonalité
Par exemple
« Dis-moi ce qui ne va pas dans mon idée. »
Avec contexte :
« Agissez comme un mentor commercial qui me soutient. Soulignez les faiblesses de mon idée tout en me suggérant comment je pourrais y remédier. »
Vous souhaitez en savoir plus sur l'ingénierie des invites ? Consultez l'annexe et les liens dans la section Ressources supplémentaires.
ACTIVITÉ 2
Mettre en place un système de collecte des commentaires
Durée estimée : 30 minutes
1. Ouvrez Github et ouvrez votre espace de code à partir de l'activité 1.
Si vous l'avez déjà ouvert, vous pouvez ignorer cette étape. Sinon,
- Connectez-vous à Github.
- Cliquez sur le menu hamburger en haut à gauche et sélectionnez « Codespaces » dans le menu déroulant.
- Lorsque la fenêtre Codespaces s'ouvre, cliquez sur le nom aléatoire que Github a attribué à votre espace de code pour le rouvrir.
2. Demandez à l'IA de créer votre « espace de stockage des commentaires ».
Commencez par cette instruction textuelle de base ci-dessous dans la fenêtre de dialogue.
Il s'agit d'une invite que vous donnerez à Github Copilot ; celui-ci suivra vos instructions et fera des suppositions supplémentaires pour vous aider à remplir les blancs.
Copiez-collez exactement ce qui s'affiche dans la fenêtre de dialogue du panneau Github Copilot situé à droite.
Créer une application simple qui aide les entrepreneurs à recueillir les commentaires de deux parties prenantes sur mes idées commerciales préliminaires.
– Le titre devrait être « AI Founder’s Toolkit » (Boîte à outils du fondateur d'IA).
– Les utilisateurs doivent saisir le problème qu'ils cherchent à résoudre, puis les commentaires de deux personnes à ce sujet.
Conseil :
Il est impossible de suivre tous les derniers modèles et fonctionnalités disponibles dans GitHub Copilot. Au 7 janvier 2025, GitHub dispose de plusieurs modèles LLM, mais la sélection du modèle est réglée par défaut sur « Auto ». Cela leur donne la possibilité de choisir le modèle qui leur convient le mieux et qui est peut-être le plus adapté à la tâche spécifique à accomplir. Nous vous recommandons d'activer la sélection du modèle afin d'avoir le choix et de sélectionner le modèle que vous préférez. Vous devrez accepter leurs conditions en cliquant sur « Utiliser les fonctionnalités IA », ce qui activera la sélection du modèle. Bien que cela ne soit pas obligatoire (malgré le texte confus du bouton) pour utiliser leurs fonctionnalités IA, cela est nécessaire pour permettre la sélection du modèle.
3. Attendez que votre application soit créée par l'IA.
Copilot générera votre application et affichera la progression au fur et à mesure.
Cela peut prendre environ 1 à 2 minutes, selon nos instructions. Vous verrez le code s'écrire en temps réel, ce qui vous permettra d'apprendre comment le modèle d'IA raisonne comme un ingénieur logiciel/entrepreneur.
Vous indiquez au modèle d'IA ce que vous voulez dans un langage simple. Le modèle d'IA lit votre description et génère automatiquement le code. C'est ce qu'on appelle le «développement sans code», car vous décrivez l'application plutôt que de la coder.
L'IA fait diverses suppositions, comme choisir de créer une application web à l'aide d'un cadre commun, tel que HTML, CSS et Javascript. Elle complétera également les détails stylistiques que vous n'avez pas spécifiés, comme le choix des couleurs, des polices et de la mise en page. Vous n'avez pas besoin de comprendre le code ; contentez-vous de le regarder fonctionner et commencez à réfléchir à ce que vous pourriez ajouter par la suite.
Si vous effectuez cette opération pour la première fois, il se peut que vous soyez invité à autoriser certaines permissions, telles que la création, la modification ou la suppression de fichiers, voire l'exécution de certaines commandes en votre nom.
Conseil important :
À mesure que vous progresserez dans votre parcours de développement, vous souhaiterez peut-être disposer de contrôles supplémentaires sur son fonctionnement afin de réduire tout risque de dérive. Vous pouvez donc tester les paramètres qui vous semblent les plus adaptés. Les développeurs professionnels autorisent souvent des commandes simples comme « edit », qui peuvent être facilement annulées, mais disposent de contrôles plus précis sur les commandes bash, car celles-ci peuvent entraîner des coûts supplémentaires en termes d'API. Nous aborderons ce sujet dans les unités suivantes.
4. Testez votre application
Comme il s'agit d'une application web, il se peut qu'elle vous ait demandé l'autorisation d'ouvrir une application web (voir capture d'écran ci-dessous), ce que nous aurions dû activer lors des étapes précédentes.
Une fois que Copilot a terminé le codage de l'application, vous pouvez commencer à la tester en :
- Lancez l'application en tapant «python3 -m http.server 800 0 »dans le panneau terminal situé en bas de l'écran. C'est la manière la plus simple d'exécuter votre application de démarrage.
- Un nouvel onglet de navigateur s'ouvrira avec votre application en cours d'exécution.
- Vous pouvez saisir votre problème.
- Ajoutez les commentaires de tous vos amis et membres de votre famille initiaux à partir de la fiche de travail sur l'état d'esprit entrepreneurial.
- Cliquez pour enregistrer vos commentaires.
- Vérifiez que les informations apparaissent dans la zone de sortie.
Dépannage :
Si votre application n'apparaît pas :
- Vous pouvez demander à Copilot : « Comment puis-je exécuter mon application ? » ou « Aidez-moi à déboguer pourquoi je ne peux pas voir le formulaire et trouver les problèmes identifiés ».C'est ce que nous appelons débogage assisté par l'IA que vous apprendrez dans les unités suivantes.
Si votre application ne se charge pas :
- Essayez d'actualiser la page. Si cela ne fonctionne pas, recommencez depuis le début.
Si le résultat ne correspond pas à ce que vous attendiez :
- Ce n'est pas grave. Vous apprendrez à faire des ajustements plus tard.
5. Affinez votre invite
Le modèle d'IA que nous avons utilisé pour créer notre application est puissant. Les hypothèses qu'il a formulées peuvent produire un résultat qui ne correspond pas à vos attentes, mais le processus qu'il a suivi et le résultat qu'il a produit pourraient permettre d'affiner l'application afin d'améliorer le résultat.
Pour nous, l'IA a supposé qu'il fallait enregistrer les informations et donner à l'utilisateur la possibilité de les enregistrer sous forme de fichier CSV après les avoir saisies. Il se peut que le résultat ait été différent pour vous. Mais nous devons être plus précis et plus détaillés dans nos instructions pour obtenir ce que nous voulons.
Copiez et collez l'invite ci-dessous dans l'invite de chat du panneau Github Copilot situé à droite de votre écran Codespaces.
Ajoutez une ligne supplémentaire à l'invite pour rendre les instructions encore plus claires et améliorer encore davantage votre application !
Perfectionnez cette application qui aidera les entrepreneurs à recueillir les commentaires de deux parties prenantes sur mes idées commerciales préliminaires.
L'application devrait comporter :
– Un titre en haut : « Boîte à outils pour les fondateurs d'IA »
– Sous-titre : « Commencer à recueillir des commentaires sur mon problème. »
– Une zone de texte où je peux saisir mon problème et décrire le problème commercial que je souhaite résoudre.
– Une section pour « Partie prenante 1 » avec des zones de texte pour :
- Ce problème les touche-t-il ?
- Quels aspects considèrent-ils comme les plus importants ?
- Quelles questions ou préoccupations vous viennent à l'esprit ?
- Qu'est-ce qui vous échappe dans ce problème ?
– Une section pour « Partie prenante 2 » avec les quatre mêmes zones de texte
– Un bouton intitulé « Enregistrer le problème et les commentaires »
– Une zone de sortie qui ne contiendra que le problème saisi et les commentaires recueillis auprès des parties prenantes.
4. Testez à nouveau votre application
Une fois que Copilot a terminé la mise à jour de l'application, vous pouvez actualiser l'onglet du navigateur qui exécute l'application pour voir les modifications.
N'oubliez pas : si vous rencontrez des problèmes lors de l'exécution de l'application ou si le résultat ne vous semble pas correct, demandez à Copilot de vous aider à trouver la solution.
6. Validez vos modifications
Exécutez et testez votre application jusqu'à ce que vous soyez satisfait du résultat.
Même si Codespaces enregistre votre code, nous devons tout de même valider toutes les modifications apportées à la branche dans notre référentiel Github. Valider et le push télécharge les modifications de code dans votre référentiel. Une fois poussées, elles sont enregistrées de manière permanente et suivies dans Github.
Pour valider et pousser :
- Dans le panneau de gauche, cliquez sur Contrôle de source .
- Sous le onglet Modifications , ajoutez manuellement un message de validation ou utilisez l'IA pour en créer un à votre place.
Pour nous, l'IA a créé un bon message de validation :
3. Vous pouvez recevoir un message indiquant qu'il n'y a aucune modification en attente à valider. Si tel est le cas, cliquez sur Oui pour valider.
4. Cliquez sur Synchroniser les modifications pour synchroniser la plateforme Codepace avec Github.
5. Retournez sur Github, dans votre référentiel et votre branche, pour vérifier que les fichiers y apparaissent. Tous les fichiers créés, modifiés ou supprimés devraient y figurer. Il existe toutefois quelques exceptions (indice : les fichiers répertoriés dans le fichier gitignore).
Cette étape garantit que vos modifications sont enregistrées dans la branche et réduit tout risque de perte de travail si un problème survient dans votre environnement Codespace. Dans les unités suivantes, vous apprendrez ce que sont ces commandes « Git ».
Vous venez de créer une application !
Prenez un moment pour apprécier ce que vous venez de faire.
Ce stockage des commentaires vous offre un espace structuré où vous pouvez conserver toutes les informations que vous recueillez, et vous continuerez à l'enrichir tout au long de ce programme.
Points à noter :
- Vous n'avez pas écrit de code. Vous avez simplement décrit ce que vous vouliez.
- L'IA a fait des suppositions pour remplir les détails que vous n'avez pas précisés (couleurs, mise en page, texte de remplacement, etc.).
Dans notre cas, il a ajouté quelques éléments que nous n'avions pas précisés dans nos instructions, tels que :
- « Textes de remplacement » pour chaque entrée de texte
- Un bouton « Modifier les commentaires »
- Message de confirmation après l'envoi du commentaire
Votre résultat peut être différent de celui de vos amis, voire différent si vous créez de nouvelles applications et ajoutez les mêmes invites, et ce n'est pas grave. L'IA interprète vos instructions et fait des choix de conception. Si ceux-ci ne vous conviennent pas, vous pouvez toujours demander à les modifier ou les modifier vous-même dans le code.
Stockage des données
À l'heure actuelle, chaque fois que vous actualisez votre application, toutes vos données disparaissent. Ce n'est pas pratique pour un outil réel.
Dans l'activité suivante, vous ajouterez un stockage local à votre application afin qu'elle puisse enregistrer des données plus complexes provenant de votre application.
Le stockage local protège toutes les données soumises pendant que vous travaillez dans le navigateur. Votre code est déjà en sécurité sur GitHub si vous utilisez Codespaces, mais désormais, les données que vous saisissez seront stockées en toute sécurité dans le navigateur afin que vous puissiez y accéder.
Comment les applications Web stockent les données
Lorsque vous créez une application web (comme celle créée par Google AI Studio), vous ne pouvez pas enregistrer directement des fichiers sur l'ordinateur d'un utilisateur pour des raisons de sécurité. À la place, les applications web utilisent stockage du navigateur, une fonctionnalité intégrée qui permet aux sites Web d'enregistrer des données localement dans votre navigateur.
Pour ajouter de la mémoire à votre application, nous devons comprendre quelques notions générales :
- Le QUOI: Types de stockage du navigateur
- Le COMMENT: Comment les données sont-elles écrites pour être stockées ?
- Le LIEU: Où les données sont conservées
Qu'est-ce que le stockage local du navigateur ?
Il existe deux principaux types de stockage dans les navigateurs :
- Stockage local: les données restent enregistrées même après la fermeture du navigateur.
- Stockage de session: les données disparaissent lorsque vous fermez l'onglet du navigateur.
Pour notre boîte à outils du fondateur, nous utiliserons les deux options, afin que vos commentaires soient conservés d'une session à l'autre.
COMMENT ça marche ?
Le stockage du navigateur stocke les données sous forme de paires clé-valeur, à l'instar d'un dictionnaire, où chaque donnée possède un nom (la clé) et une valeur.
Par exemple :
- Clé => Problème
- Valeur => « Les agriculteurs ne peuvent pas vendre leurs produits »
La clé et la valeur doivent être toutes deux sous forme de texte (chaînes) et sont stockées au format JSON. Le JSON (JavaScript Object Notation) est un format standard pour représenter des données qui sont faciles à lire à la fois pour les humains et les ordinateurs.
La structure JSON entière est stockée sous forme d'une seule valeur de chaîne dans localStorage, avec une imbrication supplémentaire s'il existe plusieurs paires clé-valeur.
Par exemple, l'enregistrement d'un problème et des commentaires de deux personnes pourrait générer la chaîne JSON suivante :
{
"problem": "Farmers from local rural communities can't sell their farming goods",
"feedback": [
{"person": "J Smith", "resonates": "Yes, sees it daily"},
{"person": "M Jones", "resonates": "Note sure it's a big issue"}
]
}
OÙ sont stockées les données ?
Le stockage local est intégré à votre navigateur, ce qui le différencie des fichiers locaux stockés sur un ordinateur.
Vous pouvez le voir dans le navigateur. Voici comment le voir en utilisant Chrome comme navigateur.
- Cliquez avec le bouton droit n'importe où sur un site et sélectionnez « Inspecter » (ou appuyez sur F12).
- Cliquez sur le onglet « Application » (dans Chrome).
- Rechercher « Stockage local» dans la barre latérale.
- Cliquez dessus pour voir vos données enregistrées (il se peut que vous n'ayez encore rien enregistré, donc il se peut que ce soit vide).
Limitation :
Le stockage du navigateur ne se synchronise pas entre les appareils. Si vous changez d'ordinateur ou effacez les données de votre navigateur, vos informations disparaissent. Dans les leçons suivantes, vous découvrirez le stockage dans le cloud qui permet de résoudre ce problème.
Cela signifie que si vous changez d'ordinateur, utilisez un autre navigateur ou effacez vos données de navigation en actualisant la page, vos informations enregistrées seront perdues. Dans les chapitres suivants, nous aborderons des options de stockage plus permanentes, telles que les bases de données et le stockage dans le cloud.
La plupart des applications stockent et partagent leurs données au format JSON. Les LLM lisent et interprètent également très bien les fichiers JSON. En apprenant cela dès maintenant, vous posez les bases de nombreuses fonctionnalités, telles que :
- Enregistrement des préférences utilisateur
- Stockage des travaux en cours afin que les utilisateurs ne perdent pas leurs données
- Synchronisation des données entre les appareils (dans les unités ultérieures)
- Connexion à des services externes et à des API
ACTIVITÉ 3
Ajouter un stockage local
Durée estimée : 20 minutes
1. Ouvrir Github Codespaces
Rendez-vous sur Github.com, accédez à vos espaces de code et ouvrez l'espace de code correspondant à votre application Founder's Toolkit.
2. Demandez à l'IA d'ajouter un stockage local.
Copiez et collez cette invite dans la section de discussion Copilot, qui devrait se trouver dans le volet le plus à droite.
Après avoir soumis le problème et les commentaires, créez un nouvel enregistrement et stockez toutes les données dans le stockage local du navigateur.
– Incluez des champs pour le problème et chaque réponse de feedback de manière structurée.
– une fois que l'utilisateur a enregistré les informations, les données saisies doivent apparaître sous le formulaire de saisie.
3. Test de persistance des données
Une fois que l'IA a fini d'ajouter le code, vous pouvez commencer à tester en soumettant votre problème et vos commentaires.
- Entrez votre problème et vos commentaires pour chaque partie prenante.
- Cliquez pour enregistrer le problème et les commentaires
- Actualisez la page (en appuyant sur F5, en cliquant sur le bouton d'actualisation de votre navigateur ou en cliquant sur le bouton de rechargement de l'application dans Codespaces, en haut à droite du panneau d'aperçu).
- Vérifiez que les données que vous avez soumises apparaissent bien.
- Si cela ne fonctionne pas, utilisez Copilot pour vous aider à identifier le problème et le résoudre.
Vous devriez pouvoir voir ce que Copilot a mis en œuvre une fois qu'il a terminé.
Pour nous, l'IA a ajouté un code qui a effectué les opérations suivantes :
- Mise à jour du script.js .
- Conversion des entrées du formulaire en une chaîne au format JSON avec les clés correspondantes et ajout d'un horodatage.
- JSON stocké dans la mémoire locale de votre navigateur
- Récupère les données lorsque l'application se charge.
Pour vérifier cela, suivez les étapes ci-dessus (OÙ sont stockées les données) pour ouvrir les outils de développement dans votre navigateur et inspecter le stockage local. Voici à quoi cela ressemble pour nous dans stockage local avec la clé « feedback_records ».
Voici une vue plus claire du JSON créé.
[
{
"problem": "Farmers in rural Chiapas, Mexico struggle to sell their farming products at fair prices",
"stakeholder1": {
"resonate": "Yes — my neighbors grow amazing coffee and honey but only sell to the same buyer who pays very little.",
"aspects": "Finding buyers who pay fairly and on time, not months later.",
"concerns": "How would farmers get their products to buyers because the roads here are difficult.",
"missing": "Many farmers don't have smartphones so how would they use an app?"
},
"stakeholder2": {
"resonate": "Absolutely. I see farmers walk hours to the market and come back with unsold vegetables.",
"aspects": "Knowing ahead of time if someone will actually buy, so the trip isn't wasted.",
"concerns": "Internet is unreliable here — sometimes no signal for days. Would an app still work?",
"missing": "Trust and safety is everything. Here carrying cash can be dangerous."
},
"timestamp": "2026-01-07T23:08:35.579Z"
},
{
"problemStatement": "farmers selling their products",
"stakeholder1": {
"resonance": "Yes — my neighbors grow amazing coffee and honey but only sell to the same buyer who pays very little.",
"importantAspects": "Finding buyers who pay fairly and on time, not months later.",
"questionsConcerns": "How would farmers get their products to buyers because the roads here are difficult.",
"missingPoints": "Many farmers don’t have smartphones so how would they use an app?"
},
"stakeholder2": {
"resonance": "Absolutely. I see farmers walk hours to the market and come back with unsold vegetables.",
"importantAspects": "Knowing ahead of time if someone will actually buy, so the trip isn't wasted.",
"questionsConcerns": "Internet is unreliable here — sometimes no signal for days. Would an app still work?",
"missingPoints": "Trust and safety is everything. Here carrying cash can be dangerous."
},
"timestamp": "2026-01-03T19:27:37.272Z"
}
]
4. Validez vos modifications
- Accédez à Contrôle de source dans le panneau de gauche.
- Saisissez une description des modifications et appuyez sur le bouton Commit pour valider ces modifications dans votre référentiel.
- Synchroniser les modifications.
Vous disposez désormais d'un moyen de saisir et de stocker les commentaires des utilisateurs concernant votre projet. Cela vous sera utile à mesure que vous avancerez dans votre projet. Nous continuerons à développer cette application Founder's Toolkit dans les leçons suivantes afin d'acquérir davantage de compétences en matière de développement avec l'IA.
Limites de stockage du navigateur
Il y a des choses importantes à comprendre au sujet du stockage local du navigateur :
Ce qu'il fait bien
- Enregistre les données entre les actualisations de page
- Rapide et simple
- Fonctionne hors ligne
- Aucun compte/connexion nécessaire
Ce qu'il ne fait pas
- Ne sauvegarde pas sur le cloud et ne synchronise pas entre les appareils
- Peut être effacé si vous effacez les données du navigateur.
- Fonctionne uniquement dans le même navigateur
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
- GitHub : Une plateforme initialement conçue pour stocker et partager du code.
- Espaces de code : Une fonctionnalité de la plateforme GitHub qui permet à un environnement de développement exécutant VS Code dans votre navigateur d'exécuter votre code.
- GitHub Copilot : Un assistant de codage IA qui génère du code à partir de descriptions en langage naturel, alimenté par des modèles linguistiques à grande échelle (LLM).
- Référentiel (Repo) : Un dossier pour votre projet sur GitHub qui contient tous vos fichiers de code et est organisé en différentes branches où vous pouvez collaborer avec d'autres développeurs.
- Boîte à outils du fondateur: l'application qui évoluera au fur et à mesure que les élèves progresseront dans les unités techniques.
- Codage par ambiance : Décrire ce que vous voulez dans un langage simple et laisser l'IA générer le code. Également appelé « développement sans code ».
- Stockage du navigateur : Fonctionnalité intégrée qui permet aux applications Web d'enregistrer des données localement dans votre navigateur, sans avoir besoin d'un serveur.
- localStorage : Type de stockage du navigateur qui persiste même après la fermeture du navigateur. Vos données restent stockées jusqu'à ce que vous les effaciez.
- sessionStorage : type de stockage du navigateur qui persiste pendant toute la durée d'une session sur une seule page. Les données sont effacées lorsque l'onglet ou la fenêtre du navigateur est fermé.
- JSON (JavaScript Object Notation) : Format standard permettant d'organiser des données lisibles à la fois par les humains et les ordinateurs. Se prononce « Jason ».
- Paire clé-valeur : Une méthode de stockage des données où chaque élément possède un nom (la clé) et une valeur. Comme une étiquette sur un dossier.
- Ingénierie rapide : La pratique consistant à rédiger des instructions claires et précises qui aident l'IA à produire des résultats utiles.
- Non déterministe : L'IA ne produit pas des résultats identiques pour des entrées identiques. Chaque réponse peut varier légèrement.
Ressources complémentaires
- Apprendre à inciter: Cours complet gratuit
- Guide de conception rapide de Google: conseils officiels de Google
- GitHub Copilot: Découvrez les fonctionnalités de Copilot, notamment les meilleures pratiques pour devenir un utilisateur avancé.
- Guides Git : documentation sur l'utilisation de Github et l'exécution de commandes git pour gérer des projets
Annexe
Ingénierie rapide
L'ingénierie des invites consiste à créer des invites efficaces afin de guider les modèles d'IA dans la génération de réponses précises et pertinentes.
Il est principalement utilisé dans les tâches d'IA textuelle et de traitement du langage naturel (NLP).
L'objectif est de rédiger des invites de manière intelligente afin que le modèle puisse produire des résultats qui répondent aux besoins spécifiques des utilisateurs.
Que sont les invites ?
- Les invites sont de courts morceaux de texte qui fournissent un contexte et des instructions à un modèle d'IA.
- Ils aident le modèle à générer des réponses qui correspondent à l'intention de l'utilisateur.
De bonnes invites doivent
- Donnez des instructions claires sans trop d'informations.
- Évitez d'être trop général ou trop détaillé.
- Précisez clairement l'objectif et le contexte de l'utilisateur.
Pourquoi l'ingénierie rapide est-elle importante ?
- Des invites spécifiques améliorent la compréhension du modèle des exigences de la tâche.
- Conduit à des résultats qui correspondent étroitement aux résultats souhaités.
- De meilleures invites permettent d'améliorer l'efficacité des tâches de traitement du langage naturel et de mieux former les modèles pour les tâches futures.
Tout comme lorsque vous donnez des instructions à un assistant talentueux mais inexpérimenté, vous fournissez des instructions claires et précises afin d'obtenir le résultat souhaité.
Techniques
L'ingénierie des invites ne se limite pas à la rédaction d'invites : c'est un ensemble d'outils permettant d'ajuster votre façon de travailler avec les LLM en fonction d'objectifs spécifiques.
Niveau 1 : Essentiel
- Soyez précis
- Fournir le contexte
- Donnez des exemples.
- Invite unique – donnez un exemple d'entrée/sortie.
- Exemple :
« Texte : Jane Smith, 45 ans, est développeur de logiciels à Londres.
JSON : « nom » : « Jane Smith », « âge » : 45, « fonction » : « Développeur web », « ville » : « Londres »
Texte : John Doe, 29 ans, est étudiant à Paris.
JSON : [Nouvelle entrée ici]
- Exemple :
- Prompting en quelques clics : donnez quelques exemples pour aider le LLM à apprendre le modèle.
- Utile pour les tâches plus complexes où plusieurs exemples peuvent être utiles.
- Invite unique – donnez un exemple d'entrée/sortie.
- Spécifier le format
- Affiner de manière itérative
Niveau 2 : Intermédiaire (à utiliser si nécessaire)
- Chaîne de pensée – demandez au LLM de montrer son raisonnement et/ou ses étapes
- Attribution des rôles – par exemple « Vous êtes un expert… »
- Invitation négative – par exemple « Ne pas inclure... »
- Contrôle de la température – par exemple, créativité vs cohérence
Niveau 3 : Avancé (facultatif, pour plus tard)
- Cohérence : demandez plusieurs résultats, puis demandez au LLM de choisir le « meilleur » résultat.
- Arbre des pensées – demande à LLM d'explorer plusieurs branches de raisonnement afin de déterminer sa réponse finale.
- Génération augmentée par la récupération (RAG) – demande au LLM d'utiliser des informations externes pour lui fournir un meilleur contexte
Voici une liste complète des techniques d'incitation : https://www.ibm.com/think/topics/prompt-engineering-techniques
