Formation Vibe coding : prototyper une application complète avec l’IA

– Vibe coding : décrire une intention en langage naturel et confier l’écriture du code à l’IA, en se concentrant sur le produit
– Du copilote à l’agent : différence entre complétion ligne à ligne, assistant conversationnel et agent qui exécute une tâche de bout en bout
– Ce qu’il faut savoir des modèles de langage : rôle du contexte, hallucinations, réponses non déterministes et leurs conséquences sur le code produit
– La boucle de travail : intention, contexte, génération, vérification, puis itération
– Cas d’usage adaptés : prototype, MVP, outil interne, preuve de concept
– Limites : situations où le développement traditionnel reste préférable, et nouveau rôle du développeur, de l’implémentation à la supervision

– App-builders IA (par exemple Lovable, Bolt, v0) : génération d’une application complète dans le navigateur, stack imposée, mise en ligne intégrée
– Agents de code et IDE assistés par IA (par exemple Claude Code, Cursor, Codex) : travail sur un projet local, contrôle complet du code et de la stack
– Critères de choix : niveau de contrôle sur le code, export et propriété du code, stack imposée ou libre, confidentialité des données
– Coûts et quotas : modèles d’abonnement, consommation lors d’un usage intensif, maîtrise du budget
– Configuration et prise en main : création du projet, connexion au dépôt Git, réglages essentiels
– Combiner les familles : démarrer dans un app-builder, poursuivre dans un agent de code

– Concevoir avant de prompter : profils utilisateurs, parcours clés, cas limites et rôles d’accès
– Structurer l’interface : liste des écrans, navigation, hiérarchie de l’information, pages de connexion et de profil
– Décrire le « quoi » plutôt que le « comment » : exprimer le besoin, les contraintes métier et le résultat attendu
– Références visuelles et exemples : maquettes, captures et données d’exemple pour guider la génération
– Fichier d’instructions du projet (AGENTS.md, règles, spécification produit) : un contexte persistant que l’outil relit à chaque demande
– Dialogue itératif : une demande à la fois, validation du résultat avant d’enchaîner

– Découper le produit en fonctionnalités : ordre de construction, périmètre de chaque itération
– Générer l’architecture initiale : structure du projet, composants, routage entre les écrans
– Construire écran par écran : listes, formulaires, vues détaillées, états de chargement, d’erreur et vide
– Données fictives d’abord : simuler les données et les rôles pour valider les parcours avant de brancher le back-end
– Tester en continu : vérifier chaque incrément dans le navigateur avant de passer au suivant
– Git comme filet de sécurité : commits fréquents, points de restauration et retour arrière après une génération ratée

– Décrire une erreur à l’IA : message, comportement attendu et observé, étapes pour la reproduire
– Techniques de débogage par le dialogue : faire formuler des hypothèses, ajouter des traces, isoler le problème
– Demander des explications : faire commenter le code généré pour le comprendre avant de le modifier
– Affiner sans tout régénérer : demandes ciblées sur un fichier ou un comportement précis
– Régressions et effets de bord : les détecter, les signaler à l’IA, revenir à un état stable
– Savoir reprendre la main : quand une correction manuelle est plus rapide qu’une nouvelle demande

– Plateforme de backend (par exemple Supabase, Firebase) ou base PostgreSQL : modèle de données, tables et relations générées à partir du cadrage
– Remplacer les données fictives : branchement des écrans sur les données réelles et vérification des parcours
– Authentification : inscription, connexion, gestion de session
– Rôles et contrôle d’accès : appliquer les droits définis au cadrage, côté interface et côté données
– Connexion à des API externes : clés d’API, appels côté serveur, gestion des erreurs
– Intégrations possibles selon le projet : paiement en ligne, fonctionnalités temps réel
– Déploiement (par exemple Vercel, Netlify) : mise en ligne, variables d’environnement, déploiements successifs

– Évaluer le code généré : lisibilité, duplication, structure du projet, dépendances ajoutées
– Refactorisation et optimisation à la demande : améliorer le code sans changer le comportement
– Tests automatisés générés par le dialogue, et documentation du projet
– Failles typiques des applications générées : clés d’API et secrets exposés côté navigateur, règles d’accès à la base mal configurées, dépendances inexistantes ou malveillantes suggérées par l’IA
– Propriété intellectuelle et licences du code généré, confidentialité des données transmises aux outils
– Travailler en équipe : conventions de projet, fichier d’instructions partagé, revue du code généré
– Vibe coding ou développement traditionnel : critères de décision selon la criticité et la durée de vie du projet, et veille sur des outils qui évoluent vite