Vibe coding : créer soi-même une petite application

Avec le vibe coding, vous décrivez avec vos propres mots ce que vous voulez créer. L’assistant écrit le code, vous montre le résultat et l’ajuste selon vos retours. Vous n’avez pas besoin de savoir programmer. Vous pouvez ainsi créer, par exemple, un quiz d’entraînement, un petit jeu ou un outil pratique pour votre classe.

Seule l’application de bureau est nécessaire. Inutile d’installer Node.js ou git : l’application les embarque.

1. Choisir un dossier de travail

Créez un dossier vide sur votre ordinateur, par exemple Quiz-calcul, et choisissez-le comme dossier de travail de votre chat. Le fonctionnement est décrit dans Accès aux fichiers locaux. L’assistant travaille uniquement dans ce dossier.

2. Décrire ce que vous voulez

Décrivez aussi précisément que possible ce que vous voulez créer. Par exemple :

Crée un quiz de calcul pour des élèves de CM1 sous la forme d’une seule page HTML. Dix questions sur les tables de multiplication jusqu’à 10, avec de grands boutons, un score à la fin et un bouton pour recommencer.

L’assistant affiche une page simple comme celle-ci avec le serveur web intégré de l’application. Le résultat apparaît dans le navigateur intégré : le bouton Navigateur (l’icône de globe) à droite de la barre supérieure. Pour en savoir plus, consultez Serveurs locaux et navigateur intégré.

Pas satisfait ? Dites simplement ce qui doit changer :

Mets les boutons en vert et, en cas de mauvaise réponse, affiche la bonne réponse.

Vos propres photos et le regard de l’assistant

Joignez une photo à votre message et demandez :

Mets cette photo sur la page web.

L’assistant enregistre la photo dans le dossier du projet, par exemple dans img/, et la place sur la page. Cela fonctionne aussi avec une image que l’assistant vient de créer pour vous.

Quelque chose ne va pas sur la page ouverte dans le navigateur intégré ? Demandez :

Regarde ce qui ne va pas sur la page.

L’assistant examine alors le texte, une capture d’écran et les messages d’erreur de la page. Voir Laisser l’assistant regarder.

Quand l’assistant ouvre lui-même une page dans le navigateur intégré, il attend qu’elle soit chargée et voit ses messages d’erreur, par exemple une erreur de script ou un fichier qui ne se charge pas. Il les corrige avant de dire que cela fonctionne. Ensuite, il essaie la page comme un utilisateur : il clique sur les boutons, remplit les champs, appuie sur des touches et corrige les erreurs qui apparaissent. C’est à vous de vérifier que tout fonctionne comme vous le souhaitez.

3. Des applications plus grandes

Si vous voulez quelque chose de plus grand, comme une application avec plusieurs écrans, l’assistant peut créer un projet avec, par exemple, Vite et React :

Dans ce dossier, crée une application React avec Vite pour un quiz de vocabulaire. Installe tout, démarre l’application et montre le résultat.

Vous approuvez la création d’un tel projet (par exemple avec npm create vite@latest) sur la carte de commande. Ensuite, l’assistant installe des paquets. Vous approuvez cela aussi, ou vous activez Autoriser les installations de paquets sans demander. Voir Installer des paquets. Vous ne voulez pas de carte pour chaque commande ? Choisissez Faire confiance à ce projet sur la première carte.

4. Enregistrer des versions

Une version est un instantané de votre projet. Si une modification ne vous plaît pas, vous pouvez revenir à une version précédente. Au bon moment, demandez à l’assistant :

Enregistre une version.

La première fois, l’assistant crée un historique des versions pour le dossier. Les fichiers qui ressemblent à des secrets, comme des mots de passe ou des clés (y compris les clés d’API Google), n’entrent jamais dans une version. L’assistant vous prévient lorsqu’il ignore quelque chose.

5. Mettre votre projet sur GitHub

GitHub vous permet de conserver votre projet en ligne. Vous disposez ainsi d’une copie de sauvegarde et pouvez continuer à y travailler depuis un autre ordinateur.

Connecter GitHub

Chacun connecte son propre compte GitHub. Pas encore de compte ? Créez-en d’abord un gratuitement sur github.com/signup.

1. Allez dans Paramètres et repérez le panneau GitHub sous État du bureau.
2. Cliquez sur Connecter GitHub. L’application affiche un code et ouvre github.com/login/device dans votre navigateur.
3. Saisissez le code sur GitHub (Copier le code le copie pour vous) et accordez l’autorisation. Si la page ne s’est pas ouverte, cliquez sur Ouvrir GitHub.
4. Le panneau affiche maintenant Connecté en tant que @votre-nom.

Ce que GitHub demande. GitHub affiche l’application AI-School Desktop de HandiHow-B-V et demande l’accès à vos dépôts (repo) : lecture et écriture, y compris dans les dépôts privés. Cet accès est nécessaire pour créer et mettre à jour votre projet. N’acceptez que si la page est sur github.com.

Code expiré ? Le code est valable environ 15 minutes. S’il a expiré, cliquez à nouveau sur Connecter GitHub.

Dépôts d’une organisation, comme l’organisation GitHub de votre école :

• Si l’organisation limite les applications tierces, cliquez sur Request (demander l’accès) à côté de l’organisation sur l’écran d’autorisation. Vous pouvez aussi le faire plus tard sur github.com/settings/applications > AI-School Desktop.
• Un propriétaire de l’organisation l’approuve dans Settings > Third-party access > OAuth application policy de l’organisation.
• Sans cette approbation, vos propres dépôts fonctionnent, mais pas ceux de l’organisation.

Utiliser un autre compte ? Cliquez sur Déconnecter et déconnectez-vous de github.com dans votre navigateur (ou utilisez une fenêtre privée) avant de vous reconnecter. Sinon, GitHub reprend le compte avec lequel vous êtes déjà connecté.

remarque

Les anciennes versions de l’application affichent « La connexion avec GitHub n’est pas encore disponible dans cette version de l’application. » Mettez alors l’application à jour.

Mettre en ligne et mettre à jour

Demandez ensuite, par exemple :

Mets ce projet sur GitHub.

L’assistant affiche une carte avec l’adresse exacte et les étiquettes Intégré à l’application et Réseau activé. Cliquez sur Exécuter pour continuer ou sur Refuser pour arrêter. Un nouveau dépôt est privé, sauf si vous en demandez un public. Si l’adresse n’est pas github.com ou si le dépôt devient public, la carte vous avertit. Pour une mise en ligne, vous voyez quels fichiers seront envoyés.

Plus tard, vous pouvez par exemple dire :

• "Mets la nouvelle version en ligne." L’assistant envoie vos nouvelles versions sur GitHub.
• "Récupère la dernière version." L’assistant récupère les modifications depuis GitHub.
• "Télécharge le projet https://github.com/naam/project dans ce dossier." L’assistant télécharge un projet existant.

Vous pouvez aussi télécharger un projet public sans connecter GitHub. Pour mettre en ligne et créer un nouveau dépôt, la connexion est nécessaire.

6. Conseils de sécurité

• Les nouveaux dépôts sont privés. Ne rendez un dépôt public que si tout le monde peut voir le code.
• Ne mettez jamais de mots de passe, de clés ou d’autres secrets dans votre application.
• Vous utilisez une clé d’API Google (elle commence par AIza, comme la clé web d’une application Firebase) ? Placez-la dans un fichier que l’assistant laisse hors des versions, comme .env. Si la clé reste dans votre code, ce fichier n’est pas mis en ligne.
• Vérifiez toujours l’adresse sur la carte avant de cliquer sur Exécuter.
• La connexion est enregistrée de manière chiffrée avec votre compte utilisateur sur cet ordinateur. L’assistant ne voit jamais votre clé GitHub. Si vous travaillez sur un ordinateur partagé, cliquez ensuite sur Déconnecter.
• Déconnecter supprime la connexion uniquement de cet ordinateur. Pour révoquer complètement l’accès, faites-le sur GitHub dans Settings > Applications.