00:00:00Bienvenue dans ce cours d'initiation au Vibe Coding. Si vous ne savez pas coder mais que vous voulez
00:00:04concrétiser une idée, comme un site portfolio, un projet perso ou un outil dont vous avez toujours
00:00:10rêvé, cette vidéo est pour vous. À la fin, vous saurez bâtir une plateforme fonctionnelle
00:00:15sans écrire une seule ligne de code. Et si vous êtes développeur, cela vous sera aussi utile
00:00:21car on veut parfois un résultat rapide sans tout sur-optimiser. Dans cette
00:00:26vidéo, je vais vous guider à travers tout le processus du Vibe Coding et ses bonnes pratiques,
00:00:32et nous allons créer un projet réel ensemble. Pour concevoir notre application, nous utiliserons
00:00:37Abacus AI Deep Agent. C'est ma plateforme préférée pour l'IA car avec un seul abonnement,
00:00:43on peut créer des applis, des sites, des présentations et bien plus. Je l'utilise surtout pour le
00:00:50Vibe Coding car j'ai remarqué qu'elle produit moins d'erreurs et qu'elle est très abordable.
00:00:54J'ai mis le lien dans la description, alors n'hésitez pas à y jeter un œil.
00:00:59Il y a cinq étapes pour bien « vibe coder » une application. Beaucoup connaissent ces étapes,
00:01:05mais le problème est qu'ils ne maîtrisent pas les bonnes pratiques de chaque phase, d'où
00:01:09des résultats médiocres ou instables avec l'IA. On va régler ça. La première étape,
00:01:14c'est l'idéation. C'est là que vous décidez de ce que vous voulez créer (un portfolio ou autre).
00:01:19Si vous n'avez pas d'idée, vous pouvez demander des suggestions à l'IA. Pour cela,
00:01:25j'utilise Abacus Chat LLM, qui fonctionne très bien. Il sélectionne automatiquement le meilleur
00:01:31modèle d'IA selon la tâche, donc vous obtenez de meilleurs résultats sans avoir à choisir.
00:01:36Une fois l'idée trouvée, mettez-la par écrit. Ouvrez Google Docs ou Word
00:01:42et décrivez votre projet en langage simple. C'est ce qu'on appelle un
00:01:47document d'exigences produit (PRD). Ne soyez pas intimidé. Pour le Vibe Coding, c'est juste
00:01:53un document d'une ou deux pages expliquant votre projet. Il servira ensuite de prompt initial.
00:01:59J'utilise un modèle de PRD simple venant de cet article. Merci à l'auteur, allez le lire
00:02:05si vous voulez en savoir plus. Le lien de téléchargement du modèle est en description.
00:02:09Passons vite en revue les sections. Dans la description en une phrase,
00:02:14résumez votre application. Ici, nous créons un site de partage de dépenses.
00:02:20Notre description ressemblera à ceci. La section suivante décrit
00:02:25la cible et le problème résolu. Ensuite, listez les fonctionnalités principales.
00:02:31Inutile d'être technique, écrivez simplement ce que vous voulez en langage courant.
00:02:36La section suivante précise ce qu'il ne faut pas construire pour éviter que le projet dérive.
00:02:41Si vous n'êtes pas sûr, vous pouvez ignorer cela pour le moment.
00:02:47Vient ensuite le flux utilisateur, qui explique le parcours principal. C'est aussi
00:02:52facultatif. Enfin, la section des critères de succès sert à définir
00:02:58quand vos fonctionnalités sont réussies. C'est également optionnel. Si tout cela
00:03:03semble trop complexe, une astuce consiste à ne remplir que la description en une phrase,
00:03:07à coller le modèle dans ChatLLM et à lui demander de compléter le PRD pour vous.
00:03:13Ensuite, place à l'étape deux : choisir votre plateforme et coller votre PRD
00:03:19comme prompt initial. Le choix de la plateforme est crucial car pour avoir
00:03:25d'excellents résultats, il faut un excellent outil. J'utiliserai Abacus AI Deep Agent.
00:03:30Copiez simplement votre PRD dans la zone de prompt. Si vous voulez un design
00:03:36particulier, vous pouvez importer un fichier de design en référence. Notez toutefois
00:03:41qu'on ne peut pas importer de fichier Figma directement. Sinon, décrivez le design
00:03:47avec vos propres mots. Appuyez sur envoyer. L'agent pourrait alors vous poser
00:03:53quelques questions. C'est rarement technique, donnez juste vos préférences. Si vous
00:03:59ne comprenez pas un point, demandez à l'IA de clarifier. Une fois vos réponses envoyées,
00:04:05l'agent commencera à coder. C'est ma partie préférée : je peux regarder des
00:04:10vidéos courtes pendant que l'IA génère le code pour moi. Quelques instants plus tard...
00:04:17Bien, notre application semble prête. Passons à l'étape suivante.
00:04:23Cette phase consiste à tester l'appli, corriger les bugs et ajouter des fonctions.
00:04:28C'est là que beaucoup échouent. Voyons d'abord notre plateforme : tout marche bien.
00:04:58Parlons maintenant des erreurs à éviter lors de cette phase d'affinage.
00:05:04L'erreur classique est de lister tous les problèmes et de les jeter dans un seul prompt géant.
00:05:09L'IA n'aime pas ça. La règle d'or est de corriger une chose à la fois et d'être très précis.
00:05:15Si un bouton ne marche pas, évitez les prompts vagues. Utilisez plutôt ce modèle de prompt.
00:05:20Voyons maintenant comment ajouter une fonctionnalité supplémentaire.
00:05:25Reprenez le format de votre PRD. Par exemple, sur notre site,
00:05:32ajoutons le partage de frais inégal. Actuellement, les coûts sont divisés
00:05:38équitablement. Avec cette option, je pourrai définir le montant par personne.
00:05:44J'ai rédigé la description selon notre modèle. Retournons sur l'agent pour la coller.
00:05:50Mais avant, ajoutez cette ligne d'instruction, puis collez votre texte. On envoie et on attend.
00:05:56La nouvelle fonction est prête. Testons-la... Tout semble parfait.
00:06:17C'est tout pour cette étape. On ajoute une fonction, on teste, et on recommence.
00:06:23Quelques précisions avant la suite. D'abord, n'hésitez pas à revenir en arrière.
00:06:29Cela signifie restaurer une version précédente du code. Parfois,
00:06:33ajouter une fonction ou corriger un bug peut tout casser ailleurs. Dans ce cas, expliquez
00:06:39à l'IA que les changements ont corrompu le code et demandez-lui de réparer.
00:06:44Ça marche souvent, mais sinon, mieux vaut restaurer la version précédente.
00:06:49Aussi, sentez-vous libre de modifier mes modèles de prompts selon vos besoins.
00:06:54On arrive à l'étape suivante : la validation finale. Une fois tout ajouté,
00:06:59vous devez tester l'application de fond en comble. Rien de sorcier.
00:07:04Parcourez votre plateforme et testez chaque fonction. Vérifiez que les résultats
00:07:09et les comportements sont les bons. En cas de souci, repartez en phase d'affinage.
00:07:14L'idée est de s'assurer que tout est nickel avant la mise en ligne. La dernière étape,
00:07:20c'est le déploiement. Avec Abacus AI Deep Agent, ça se fait en quelques clics.
00:07:27Cliquez sur le bouton « Deploy » en haut. Trois options s'offrent à vous :
00:07:33domaine Abacus AI, domaine personnalisé ou sous-domaine personnalisé. Avec Abacus,
00:07:40l'URL suivra ce format. Pour un domaine personnalisé, il faudra en acheter un et
00:07:45le pointer vers Abacus via les DNS. Le sous-domaine est plus simple : si vous avez déjà
00:07:51un domaine, utilisez un préfixe sans rien payer de plus. Utilisons le domaine Abacus.
00:07:57Donnez le nom voulu, et ce sera l'URL de votre site une fois déployé.
00:08:03Félicitations ! Votre première application en Vibe Coding est en ligne. Vous pouvez
00:08:09partager l'URL pour que les gens l'utilisent. Une dernière chose importante
00:08:14avant de vous lancer : ces applis ne sont pas idéales pour des projets commerciaux d'envergure.
00:08:20Elles sont parfaites pour des projets personnels, des prototypes ou des outils internes.
00:08:26Il peut y avoir des limites de sécurité, de performance ou d'évolution. Pour passer à
00:08:32la vitesse supérieure, il faudra des développeurs. Et voilà les 5 étapes du Vibe Coding.
00:08:38N'oubliez pas de tester Abacus AI Deep Agent, le lien est en description.
00:08:44Si cette vidéo vous a aidé, likez, partagez et abonnez-vous. À bientôt !
00:08:49On se retrouve dans la prochaine vidéo !