Ma méthode pour créer des Apps avec Cursor (Débutant)

OK les amis, il faut absolument que je vous montre ce que j'ai réussi à construire. Donc j'ai fait une app qui permet juste au son de ma voix de construire des devis. Je l'ai faite pour mon beau-père qui est plombier, vous allez voir.

J'ai besoin que tu me fasses un devis pour monsieur Martin qui habite à venue de la paix à Paris et il a besoin d'un changement de douche. OK. Maintenant, j'ai envie que tu fasses un devis du coup pour un pour l'enlèvement d'une baignoire, pour l'ajout d'une douche. Euh c'est une douche 90 x 90, c'est il va y avoir du déplacement, il va y avoir de l'approvisionnement et surtout moi je charge la TVA. Donc fais en sorte de d'avoir la TVA dessus, s'il te plaît.

Là, vous voyez à droite, c'est en train d'ajouter les éléments un par un avec les 20 % de TVA. Je vais réactiver le micro. Hm. Est-ce que tu peux ajouter une une réduction de 10 % s'il te plaît pour Monsieur Martin ? Et euh est-ce que tu peux télécharger le PDF s'il te plaît ? C'est incroyable. C'est ouf.

Euh en gros ça, j'y suis arrivé avec quelques promptes, mais surtout avec une méthodologie que j'ai envie de vous présenter. Cette nouvelle série, c'est la série où je vous montre ce que je fais au quotidien. Et vous l'avez bien remarqué, j'ai un peu changé de tête. J'étais en train de perdre mes cheveux et du coup ça me saoulait et du coup j'ai préféré simplifier. Bref, je vous montre un petit peu comment j'ai réussi à faire ça.

La première chose, je l'ai construit avec Cursor. Donc Cursor, je vous l'ai déjà un petit peu présenté. C'est un outil qui permet d'écrire du code, mais surtout qui a un agent intégré. Ça veut dire que c'est un agent IA qui est connecté à euh des modèles comme là Opus 4.5, mais il a plein de modèles. Je peux le mettre en mode auto aussi et c'est lui qui choisit les modèle. Mais la plus grande importante chose des choses importantes à connaître, c'est que bah il écrit du code. Euh et beaucoup de gens font l'erreur dès qu'ils ont une idée bah d'aller sur Cursor euh et de commencer à écrire du code. Sauf que c'est là où ils se trompent.

Et j'ai envie de montrer très rapidement une méthodologie que moi j'utilise à chaque fois que j'ai une idée parce que ça c'est une idée que j'ai eu il y a 15 jours et très honnêtement il y a je pense en trois promptes j'avais la première version et j'aimerais vous montrer comment j'y arrive. Donc euh je vais aller ici sur un petit schéma que j'ai fait. Donc pour vous montrer un petit peu comment ça marche déjà ce système de devis. En gros, moi j'ai mon micro et mon ordi. Je parle à mon application et mon application est connectée à la real time API. Pour ceux qui avaient suivi la vidéo il y a une semaine, j'avais fait un truc assez similaire parce que cette API ce qui est génial c'est qu'elle est conversationnelle, elle permet de parler et d'envoyer ce qu'on appelle des custom function. Donc en gros de pouvoir communiquer avec une application pour pouvoir faire des choses. Et c'est pour ça que j'arrive quand je lui dis ajoute des lignes bah qu'il arrive à m'ajouter des lignes.

Une fois que j'ai fait ça, qu'est-ce qui se passe ? Comment est-ce que j'arrive en fait à cette application ? Et bien en fait, c'est une c'est une méthode en en tro qu étapes. À chaque fois j'ai une idée. La première chose que je vais faire c'est communiquer. Communiquer avec Géini pour pouvoir valider mon idée. Et là c'est ce que j'ai fait donc l'autre jour, c'est que je suis venu le voir, j'ai dit écoute, c'est quoi le problème de la plupart des artisans ? J'ai une idée de pouvoir créer une une espèce d'application, on pourrait construire des devis et cetera. Donc je discute un peu avec lui et la chose qu'il me faut avant de partir euh sur la partie construction et bien c'est ce qu'on appelle un PRD. Un PRD et donc là je vais le retrouver normalement. Hop. Euh voilà. C'est ça. Un PRD en fait ça c'est un produit requirement document. C'est grossièrement tout le travail que doivent faire les équipes produits dans une entreprise pour pouvoir valider le besoin, pour pouvoir voir exactement ce qu'on va avoir dans l'application. Et donc c'est une sorte de spécification technique et fonctionnelle euh pour ceux à qui ça parle qui va permettre en fait et c'est la partie la plus importante euh qui va permettre derrière à Cursor de faire son plan et derrière de coder.

Donc moi si je vais dans Cursor et je vous montre un petit peu ce que j'ai fait c'est que j'ai copié collé ce PRD. Je lui ai donné le PRD que j'ai découvert enfin que j'ai récupéré de Gini tout à l'heure. Je lui ai donné ça ici et je l'ai mis curseur en mode plan. En fait, il faut savoir que sur Cursor, il y a plein de types de modes différentes possibles. Et là, je l'ai mis en mode plan pour qu'il planifie un petit peu euh tout ce qu'il va faire. Un des problèmes quand on quand on commence à faire du V coding ou en tout cas du code assisté par IA, euh c'est on a tellement de puissance qu'on a envie de poser des briques tout de suite. C'est un peu comme si vous étiez en train de construire une maison, vous avez une une pressente envie de commencer à poser la première brique alors que vous avez pas encore fait le plan. Et c'est à quoi sert le PRD. Et ensuite le plan le plan sur Cursor va nous permettre de faire un petit peu le le blueprint donc le l'espèce de plan d'architect de notre application. Il va vous poser quelques petites questions et une fois qu'il a posé les euh les questions là euh genre typiquement euh quel framework je veux utiliser et cetera, pour la génération de PDF, est-ce que je veux utiliser quelque chose de différent ou quoi que ce soit ? Bref, à ce moment-là, il va construire lire en quelque sorte de plan de ce qu'il faut développer. Et à partir de ce moment-là, on clique sur build. Et en fait, une fois qu'on a cliqué sur build, là curseur commence son travail. Et là, on peut utiliser n'importe quel modèle pour pouvoir faire en sorte de créer cette base. Moi, généralement, j'ai tendance à utiliser des modèles plutôt très bons comme Opus 4.5 ou Gemini 3 pour la partie planification. euh PRD et encore spécification technique où je vais poser les bases techniques. Et ensuite pour coder, je peux utiliser un modèle un petit peu moins cher. Mais là très honnêtement vu l'application, c'était un modèle, c'était encore EPUS 4.5 euh que j'ai utilisé.

Une fois que j'ai fait ça, on arrive à la première version et quand on lance euh sur Cursor et vous allez voir que généralement si vous codez un petit peu avec Cursor, bah il vous fait le lancement lui-même en background. Généralement, il le fait avec un truc qui s'appelle npm rundev. Bon, grossièrement, ça vous permet de lancer une application JS. Je vais pas aller dans les détails parce que je sais qu'il y a plein de gens qui sont non techniques qui nous suivent euh qui me suivent ici sur la chaîne, mais grossièrement, ce que ça va se passer, c'est que je vais pouvoir lancer l'application euh en local host. Ça veut dire quoi ? Ça veut dire qu'elle est lancée en local. Là, ici, en plus, maintenant Cursor, ils ont un browser, donc un navigateur qui est directement dedans. Et donc, si je fais ça comme ça, normalement je suis censé arriver sur mon application. La voici. Mais sauf que cette application là, elle est lancée en mode local. Et c'est ça le vrai problème. C'est là où il y a plein de gens qui s'arrêtent aussi, c'est que elle est sur mon ordinateur. Et en fait, comment je fais pour la déployer sur internet pour que tout le monde puisse avoir accès ? Et c'est un peu ce que j'avais fait avec mon application la dernière fois où vous avez dit "Trop bien, super, mais maintenant comment est-ce qu'on l'utilise ?" Et ben cette fois-ci, je vais vous donner un lien en dessous de cette vidéo. Vous pourrez aller utiliser euh ce truc de devis et je vais vous montrer comment.

Euh mon but, ça serait bien en fait, j'aimerais bien petit à petit arriver vers des applications que je sors vraiment en mode sass. Là, c'était un besoin pour mon beau-père où vraiment lui il se pose tous les dimanches et il fait ses devis et ça lui prend du temps. Et pour les clients en question, et bah eux, ils attendent leur devis et je me dis ça serait génial qu'il puisse avoir une application, un truc où il puisse parler et que bah ses clients juste après il puissent lui envoyer son devis par email. En plus quand je l'ai appelé, il m'a donné d'autres idées. Donc une fois qu'il m'avait donné d'autres idées, bah moi j'ai itéré et je lui ai j'ai demandé à à l'agent de de faire plus de choses, notamment de d'ajouter les niveaux de TVA et cetera, de pouvoir changer les logos, de pouvoir changer les assurances et cetera. Bref, tous ces sujets-l, de pouvoir changer en bas son footeur pour qu'il puisse ajouter des informations sur les virements qu' doivent recevoir et cetera. Bref, tout ça pour dire qu'une fois que vous l'avez en local euh pour la déployer, et bien vous devez quelque part la mettre sur un serveur. Et euh là, il y a des milliards de manières de faire. Notamment, il y a des outils euh qui sont qui sont propriétaires comme Versel, Netlifi qui sont euh très connus pour ce monde-là. Et souvent en fait suivant le trafic que vous allez avoir, suivant et bien l'utilisation que vous allez en faire, bah ça va commencer à devenir payant au bout d'un moment. Il y a aussi des outils open source que moi j'utilise et je vais vous montrer aussi euh dans cette vidéo qui est comme vous le voyez à l'arrache et sans cut. Euh mais la première chose à faire avant de commencer à déployer, bah c'est déjà la mettre sur GitHub votre application. Vous avez déjà certainement entendu parler de Github. À quoi ça sert GitHub ? un endroit où en fait on va euh et bien mettre notre code notre code pour que il soit version pour avoir différentes versions de notre code et notamment moi mon code il est ici donc il est en privé et en fait ce qui se passe c'est que dans Cursor vous avez la possibilité et bien de synchroniser votre code. Et si par exemple je modifie un fichier, par exemple mon mon système prompt, hop. Et bien si je dis mon système prompte, c'est le prom que j'envoie pour que lui il se comporte comme quelqu'un qui gère des devis. Mais si je fais euh menuiserie et euh voilà par exemple ça porte tac, je viens de modifier, changer quelque chose. Le système en local, lui s'est rechargé. Mais moi, si j'ai envie de mettre ça sur GitHub et vous allez comprendre dans 2 secondes pourquoi j'ai besoin de le mettre sur GitHub, et bien là vu que j'ai fait synchroniser et là du coup si je vais sur Gitub, vous voyez là dans SRC, il y a le fichier qui hop dans Lib qui est bah mon système prompt bref qui a été modifié et je peux voir les différentes modifications et cetera. Bref, une fois que j'ai modifié mon fichier, en fait la raison pour laquelle je j'utilise GitHub, c'est que derrière une fois que mon code il est quelque part sur internet, et ben je vais pouvoir le déployer beaucoup plus facilement.

Donc pour pouvoir le déployer, moi j'utilise un truc qui s'appelle Doc Plooy qui est en gros une version open source de tout ce qui est Versel, Netlifi et qui me permet de déployer autant d'applications que je veux en fait qui est dans laquelle je suis pas limité en terme de nombre d'App ni en terme de trafic et cetera. Donc c'est un outil qui permet de déployer. Donc une fois que je suis sur Doc ploy, je vois ici. Et en fait ce qui est fou c'est que là vous voyez il est en mode deploy. C'est parce que à chaque fois que je vais pusher une nouvelle version sur Doc Plooloy, enfin sur GitHub, Docploy va pouvoir automatiquement en fait détecter qu'il y a eu un changement et mettre à jour l'app automatiquement. Donc ça veut dire qu'il y a pas besoin de d'aller sur Docploy et dire déployer à chaque fois et cetera et cetera. Docploy, bah vu que c'est open source, je peux l'installer sur n'importe quel VPS, donc n'importe quel virtual private serveur. Donc c'est un serveur à vous que vous allez pouvoir prendre en ligne. Euh moi, j'utilise H Stinger. Comme vous le savez, c'est l'outil maintenant sur lequel je commence à déployer vraiment beaucoup de choses, notamment NBen, des Coolify et cetera. Pour ceux qui n'ont pas encore de VPS, suringer, il y a plein d'offres. Moi, par exemple, j'ai pris le KVM2 pour celui-là. Euh vous allez pouvoir utiliser un code qui est Shubam Charma si vous l'avez pas encore utilisé. Hop. Et du coup, ça va vous permettre de d'avoir une réduction supplémentaire de je crois 10 ou 20 % ici 10 % sur les plans de 12 et 24 mois. Et vous allez voir que derrière ici comme système d'exploitation et bien j'ai Docploy et Docloy une fois qu'il est installé, je vais pouvoir brancher Gitub à Docloy afin qu'il puisse déployer et synchroniser ce que je veux. Je vais pouvoir en plus et bien mettre ici des variables d'environnement. Je vais pouvoir faire plein plein de choses. En plus de ça, vous allez pouvoir mettre votre propre domaine, votre nom de domaine dessus. Donc là par exemple, c'est devis.fr. Je vous le mets en dessous en lien pour ceux que ça intéresse et que ça intéresse de tester.

Étant donné que bah je veux pas éclater tous mes crédits Open AI, je vous ai laissé un endroit où vous pouvez ajouter votre clé API Open AI. Donc pour en créer une, c'est assez simple hein. Vous allez sur platform. Openai, vous récupérez votre clé à API et vous pouvez jouer avec. Et contrairement à la dernière fois, bah je vous donne l'accès à l'outil. Je sais pas pendant combien de temps, mais si je décide de faire un vrai produit, bah je l'enlèverai et je je le changerai au fur et à mesure. Mais en tout cas, ça sera le lien pour ceux qui voudront y accéder. Et j'avais oublié de vous dire un truc, je fais en ce moment pas mal de workshop privés euh sur ce genre de truc, genre NN, euh Collify ou encore ce genre de déploiement avec Cursor et cetera. Si ça vous intéresse, il y a un lien en description que vous pourrez aller utiliser si vous voulez vous inscrire. Entre-temps, merci à Hostinger euh pour le code promo et je vous laisse avec cette vidéo où la semaine dernière, je construisais un truc assez similaire avec de la voix. Ciao. Ciao.