Comment créer une application avec le 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 créateur d'applications IA comme premier prompt, puis faites grandir l'application par petites étapes testées : données, connexion, parcours principal, finitions, revue de sécurité, et enfin publication. Ce guide suit un exemple concret, une application de réservation de cours pour un petit studio de yoga, à travers chaque étape, avec les prompts utilisés à chaque moment.

Si vous n'avez jamais rien construit de cette façon, notre tutoriel de vibe coding pour débutants commence plus simplement. Pour une vue d'ensemble plus large, non limitée au vibe coding, voir comment créer une application avec l'IA.

Le projet

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

• Que les élèves voient le planning de la semaine et réservent une place.
• Que chaque cours ait une capacité maximale.
• Une liste par cours qu'elle peut consulter à l'entrée.
• Que les élèves puissent annuler jusqu'à deux heures avant.

C'est toute la première version. Pas de paiements, pas d'abonnements, pas de store d'applications. Ce sera pour plus tard, ou jamais.

Étape 1 : rédiger une spécification d'une page

Avant d'ouvrir un outil, décrivez la première version en termes simples. Dix minutes ici font gagner des heures d'allers-retours. Une structure utile :

• Qui l'utilise : les élèves (réserver et annuler), Sara (gérer les cours, consulter les listes).
• Écrans : planning, détail d'un cours, mes réservations, admin des cours, liste des élèves par cours.
• Données : cours (nom, professeur, heure de début, durée, capacité), réservations (élève, cours, statut), élèves (nom, e-mail, téléphone).
• Règles : pas de réservation sur un cours complet ; une seule réservation par élève et par cours ; annulation jusqu'à deux heures avant ; seule Sara accède aux pages d'administration.
• Hors v1 : paiements, forfaits de cours, listes d'attente, rappels.

La liste « hors v1 » est la plus importante. C'est elle qui garde le projet réalisable. Notre guide sur la rédaction d'un document d'exigences produit avec l'IA va plus loin si vous voulez une spécification complète.

Étape 2 : choisir un outil qui couvre tout le cycle

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

Étape 3 : le premier prompt

Transformez la spécification 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éez une application de réservation de cours pour mon studio de yoga. Les élèves s'inscrivent avec leur nom, leur e-mail et leur téléphone, voient le planning de la semaine et réservent une place dans un cours. Chaque cours a un nom, un professeur, une heure de début, une durée et une capacité ; un cours complet affiche « Complet » et ne peut plus ê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, agréable sur téléphone.

Si vous n'êtes pas sûre que l'outil a 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 validez.

Étape 4 : faire fonctionner la boucle principale

La boucle principale est la seule raison d'être de l'application : un élève réserve un cours, et Sara le voit. Ne testez que cela :

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

Deux problèmes apparaissent en général à ce stade. Le planning affiche les heures dans le fuseau horaire du serveur, et non dans celui du studio. Et la vérification « Complet » ne se fait que dans la page, si bien qu'un double clic rapide crée deux réservations.

Affichez 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érifiez la capacité et les doublons de réservation sur le serveur, au moment où la réservation est créée, 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 la boucle principale 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

Parcourez maintenant les règles de la spécification une à une :

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

Seul mon compte peut ouvrir les pages d'administration. Vérifiez-le côté serveur pour chaque action d'administration, et pas seulement en masquant le menu.

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

Étape 6 : soigner 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 le moment » plutôt qu'une page blanche.
• Confirmation : « Votre place est réservée pour Vinyasa, mardi à 18 h » après la réservation.
• Mise en page mobile : de gros boutons, un planning lisible sur un écran de 375 px.
• Places restantes : « 3 places restantes » sur chaque cours, pour inciter à réserver plus tôt.

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

Étape 7 : tester comme un inconnu

Avant que quelqu'un d'autre ne l'utilise, passez une demi-heure à essayer de la casser :

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

Listez dix actions qu'un vrai élève pourrait effectuer et qui risqueraient de casser la réservation ou l'annulation, testez chacune et corrigez ce qui échoue. Dites-moi ce que vous avez modifié.

Étape 8 : une revue de sécurité

Cette application stocke des noms, des e-mails et des numéros de téléphone : une courte revue de sécurité en vaut 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 figurent-ils dans du code exécuté 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 fournit des prompts pour les effectuer, et la liste de contrôle de sécurité pour les applications créées avec l'IA en constitue la version complète.

Étape 9 : publier

Lorsque la boucle principale, les règles et les vérifications passent, publiez. Sur Mythex, c'est un clic : l'application obtient une URL publique, avec sa base de données et son hébergement déjà en place. Avec Pro, vous pouvez connecter 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 production et l'aperçu doivent se comporter de la même façon, mais confirmez-le.

Étape 10 : premiers utilisateurs et version suivante

Donnez le lien d'abord à cinq élèves réguliers, et non à tous. Demandez-leur de réserver leur prochain cours via l'application et de vous dire ce qui les a déroutés. Corrigez ensuite les trois points principaux qu'ils mentionnent.

Après quelques semaines d'usage réel, une liste de v2 pour une application de ce type s'écrit presque d'elle-même : une liste d'attente pour les cours complets, des e-mails de rappel la veille au soir, et des forfaits de cours payés en ligne. Chacune suit le même processus : spécifier en quelques lignes, rédiger le prompt, tester, publier. 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 importez sur Google Play) et une application iPhone envoyée sur TestFlight avec votre propre clé App Store Connect, sans Mac. L'application pour téléphone ouvre l'application web publiée : chaque mise à jour publiée est donc aussi disponible dans l'application pour téléphone.

Ce qu'il faut retenir

La construction proprement dite a été la partie la plus courte. Ce qui a rendu l'application utilisable : la liste « hors v1 » de la spécification, le test de la boucle principale avant tout le reste, les règles côté serveur pour la capacité et les accès, et cinq vrais utilisateurs avant cinquante. C'est à cela que ressemble le vibe coding lorsque l'application doit fonctionner pour d'autres personnes.

Prêt à essayer la vôtre ? Rédigez votre spécification d'une page, puis collez le premier paragraphe dans le créateur d'applications IA. Pour découvrir d'autres types d'applications et les prompts qui les accompagnent, lisez nos exemples de vibe coding.

Questions