Comment créer une application en vibe coding : de l'idée à l'application publiée

Pour créer une application en vibe coding, rédigez une description d'une page de la première version, donnez-la à un outil de création d'applications IA comme premier message, puis faites grandir l'application par petites étapes testées : données, connexion, flux de travail principal, finitions, revue de sécurité et, enfin, publication. Ce guide suit un projet exemple, une application de réservation de cours pour un petit studio de yoga, à chaque étape, avec les messages utilisés à chacune.

Si vous n'avez jamais rien créé de cette façon, notre tutoriel de vibe coding pour débutants commence plus simplement. Pour un aperçu plus large, qui ne se limite pas au vibe coding, consultez comment créer une application avec l'IA.

Le projet

Imaginez une propriétaire de studio de yoga, Sara, qui offre huit cours par semaine. Les réservations arrivent par WhatsApp; elle tient une liste papier par cours et surréserve souvent. Elle veut que :

• les élèves voient l'horaire de la semaine et réservent une place;
• chaque cours ait une capacité;
• elle dispose d'une liste par cours qu'elle peut consulter à la porte;
• les élèves puissent annuler jusqu'à deux heures avant le cours.

C'est toute la première version. Pas de paiements, pas d'abonnements, pas d'application dans les magasins. Ces fonctions viendront plus tard, ou jamais.

Étape 1 : rédiger un cahier des charges d'une page

Avant d'ouvrir un outil, décrivez la première version en quelques phrases simples. Dix minutes ici vous épargnent des heures d'allers-retours. Une forme utile :

• Qui l'utilise : les élèves (réserver et annuler), Sara (gérer les cours, voir les listes).
• Écrans : horaire, détail d'un cours, mes réservations, admin des cours, liste des cours pour l'admin.
• Données : cours (nom, enseignant, heure de début, durée, capacité), réservations (élève, cours, statut), élèves (nom, courriel, téléphone).
• Règles : pas de réservation dans un cours complet; une seule réservation par élève et par cours; annulation jusqu'à deux heures avant; seule Sara voit les pages d'administration.
• Pas dans la v1 : paiements, forfaits de cours, listes d'attente, rappels.

La liste « pas dans la v1 » compte le plus. C'est elle qui permet de terminer la création. Notre guide sur la rédaction d'un document d'exigences produit avec l'IA va plus loin si vous voulez une spécification plus complète.

Étape 2 : choisir un outil qui gère tout le cycle

Pour une application avec une base de données, des connexions et une adresse publique, utilisez un outil de création d'applications IA qui exécute le code, rattache une base de données et publie, plutôt qu'un assistant de clavardage qui vous remet des fichiers. Notre comparatif des outils de vibe coding présente les options. Nous utiliserons Mythex ici, car il couvre chaque étape au même endroit : clavardage, aperçu en direct, base de données et stockage de fichiers réels, et publication en un clic.

Étape 3 : le premier message

Transformez le cahier des charges en un paragraphe. Ne collez pas tout le document d'un coup avec chaque détail; donnez l'essentiel et ajoutez le reste par étapes.

Crée une application de réservation de cours pour mon studio de yoga. Les élèves s'inscrivent avec leur nom, leur courriel et leur téléphone, consultent l'horaire de la semaine et réservent une place dans un cours. Chaque cours a un nom, un enseignant, une heure de début, une durée et une capacité; un cours complet affiche « Complet » et ne peut pas être réservé. Les élèves voient leurs réservations et peuvent annuler jusqu'à deux heures avant le cours. Je suis l'administratrice : je peux ajouter et modifier des cours et voir la liste des inscrits pour chacun. Design calme et simple, qui fonctionne bien sur téléphone.

Si vous doutez que l'outil ait bien compris, demandez d'abord un plan. Dans Mythex, le mode Plan présente les écrans et les données avant d'écrire du code, et vous l'approuvez.

Étape 4 : faire fonctionner le flux principal

Le flux principal est la seule chose pour laquelle l'application existe : un élève réserve un cours, et Sara le voit. Testez seulement cela :

1. Inscrivez-vous comme élève et réservez un cours.
2. Ouvrez la vue d'administration. La réservation y est-elle?
3. Réservez le même cours une deuxième fois. Cela doit être refusé.
4. Fixez la capacité d'un cours à 2, réservez-le depuis deux comptes d'élèves, puis essayez une troisième réservation.

Deux problèmes apparaissent généralement à ce stade. L'horaire affiche les heures selon le fuseau horaire du serveur, et non celui du studio. De plus, la vérification « Complet » ne se fait que dans la page : un double clic rapide crée deux réservations.

Affiche toutes les heures des cours dans le fuseau horaire du studio, [Asia/Dubai], quel que soit le réglage de l'appareil du visiteur.

Vérifie la capacité et les doubles réservations sur le serveur au moment de la création d'une réservation, et pas seulement dans la page. Si deux demandes arrivent en même temps pour la dernière place, une seule doit réussir.

Corrigez le flux principal avant d'ajouter quoi que ce soit d'autre. Tout le reste en dépend.

Étape 5 : ajouter les règles restantes, une par message

Passez maintenant en revue les règles du cahier des charges, une à la fois :

Les élèves peuvent annuler une réservation jusqu'à deux heures avant le début du cours. Après ce délai, masque le bouton d'annulation et refuse l'annulation sur le serveur avec un message clair.

Seul mon compte peut ouvrir les pages d'administration. Assure-toi que cela est vérifié sur le serveur pour chaque action d'administration, et pas seulement en cachant le menu.

Après chacune, testez-la et passez à la suivante seulement lorsqu'elle fonctionne. Si un changement casse quelque chose, revenez au dernier point de contrôle fonctionnel et formulez une demande plus claire, au lieu d'empiler les corrections.

Étape 6 : peaufiner ce que les vrais utilisateurs remarqueront

Les vrais utilisateurs remarquent les petites choses. Une courte liste pour l'application de Sara :

• États vides : « Aucun cours cette semaine pour l'instant » au lieu d'une page blanche.
• Confirmation : « Votre place est réservée pour Vinyasa, mardi à 18 h » après une réservation.
• Mise en page mobile : gros boutons, horaire lisible sur un écran de 375 px.
• Places restantes : « 3 places restantes » sur chaque cours, pour inciter les élèves à réserver plus tôt.

Sur chaque carte de cours, affiche les places restantes, par exemple « 3 places sur 12 ». Après une réservation, affiche une confirmation avec le nom du cours, le jour et l'heure, et un bouton menant à mes réservations.

Étape 7 : tester comme un inconnu

Avant que quiconque d'autre utilise l'application, passez une demi-heure à tenter de la faire planter :

Vous pouvez aussi demander à l'IA de parcourir les cas limites :

Liste dix choses qu'un véritable élève pourrait faire et qui risqueraient de casser la réservation ou l'annulation, teste chacune et corrige ce qui échoue. Dis-moi ce que tu as modifié.

Étape 8 : une revue de sécurité

Cette application stocke des noms, des courriels et des numéros de téléphone, une courte revue de sécurité en vaut donc la peine. Les questions principales :

• Un élève peut-il voir les réservations ou les coordonnées d'un autre élève?
• Des clés ou des mots de passe se trouvent-ils dans du code qui s'exécute dans le navigateur?
• Le formulaire d'inscription est-il protégé contre les robots?
• Existe-t-il une sauvegarde des données?

Notre page sur la sécurité du vibe coding explique chaque vérification et propose des messages pour les faire, et la liste de contrôle de sécurité pour les applications créées par IA en est la version complète.

Étape 9 : publier

Lorsque le flux principal, les règles et les vérifications fonctionnent, publiez. Dans Mythex, c'est un clic : l'application reçoit une adresse publique, avec sa base de données et son hébergement déjà en place. Avec Pro, vous pouvez relier votre propre domaine, comme book.sarasyoga.com; voir comment connecter un domaine personnalisé.

Avant d'envoyer le lien, vérifiez une dernière fois la version publiée. Réservez un cours depuis votre téléphone. La version de production et l'aperçu doivent se comporter de la même façon, mais confirmez-le.

Étape 10 : les premiers utilisateurs et la prochaine version

Envoyez le lien à cinq élèves réguliers d'abord, et non à tout le monde. Demandez-leur de réserver leur prochain cours avec l'application et de vous dire ce qui était déroutant. Corrigez ensuite les trois éléments principaux qu'ils mentionnent.

Après quelques semaines d'utilisation réelle, une liste v2 pour une application de ce type s'écrit presque d'elle-même : une liste d'attente pour les cours complets, des courriels de rappel la veille au soir et des forfaits de cours payables en ligne. Chacun reçoit le même traitement : une spécification en quelques lignes, un message, un test, une publication. Pour ajouter des paiements, voir comment ajouter des paiements à votre application. Pour faire connaître l'application, comment lancer une application et obtenir les premiers utilisateurs.

Transformer l'application en application pour téléphone

Beaucoup de studios veulent une icône sur le téléphone de leurs élèves. Avec Mythex Pro, l'application publiée peut devenir une application Android (un fichier que vous pouvez téléverser dans Google Play) et une application iPhone envoyée à TestFlight avec votre propre clé App Store Connect, sans Mac. L'application pour téléphone ouvre l'application web publiée; chaque fois que vous publiez une mise à jour, l'application pour téléphone en profite aussi.

Ce qu'il faut retenir

La création elle-même a été la partie courte. Ce qui a rendu l'application utilisable : la liste « pas dans la v1 » du cahier des charges, le test du flux principal avant tout le reste, les règles de capacité et d'accès appliquées sur le serveur, et cinq vrais utilisateurs avant cinquante. C'est à quoi ressemble le vibe coding lorsque l'application doit fonctionner pour d'autres personnes.

Vous voulez essayer la vôtre? Rédigez votre cahier des charges d'une page, puis collez le premier paragraphe dans le créateur d'applications IA. Si vous souhaitez voir d'autres types d'applications et les messages qui s'y rattachent, lisez nos exemples de vibe coding.

Questions