Créer une App en 10 min avec l'IA

00:00:02 J'espère que vous allez bien. Je vous

00:00:03 fais cette petite vidéo pour vous

00:00:05 montrer un peu dans quel monde je vis.

00:00:07 Ce matin, je prenais mon café, j'ai

00:00:08 grossièrement fait le schéma d'une

00:00:09 application que ça fait longtemps que

00:00:10 j'ai envie de faire. Une application

00:00:12 tracking qui me permettrait de tracker à

00:00:13 la fois comment est-ce que je mange bien

00:00:14 ou pas bien dans une semaine et quels

00:00:16 sont les types de sport que je fais dans

00:00:17 une semaine. J'ai essayé avant ça de le

00:00:19 faire avec Notion, avec Air Table, de

00:00:20 faire des automatisations de partout et

00:00:21 en fait il y avait toujours un truc qui

00:00:23 manquait. Et là, ce matin, en à peu près

00:00:25 5 minutes, je suis passé de ce schéma à

00:00:27 une application complète qui me permet

00:00:29 de tracker toute ma nourriture, de faire

00:00:31 des graphiques sur mes semaines passées,

00:00:33 d'avoir une visualisation sur ma qualité

00:00:35 et ma quantité de sport que je fais

00:00:36 semaine par semaine. Je l'ai fait en 5

00:00:37 minutes sans moi écrire une seule ligne

00:00:39 de code. Et pour faire ça, j'ai pas

00:00:41 utilisé de d'outils no code comme ce que

00:00:42 j'aurais pu faire il y a 6 mois. Là, ce

00:00:44 que j'ai fait, c'est que en un seul

00:00:46 prompte, je suis arrivé à déjà un

00:00:47 front-end complètement dingue. Donc

00:00:49 c'est parti, je vais partager mon écran

00:00:50 et vous montrer un peu tout ça. OK, déjà

00:00:52 je commence par le schéma que je lui ai

00:00:53 donné. Je lui donné deux parties. Une

00:00:55 première partie qui était food tracking,

00:00:57 donc la le tracking de tout ce que je

00:00:59 mange et le tracking de mon sport.

00:01:01 Grossièrement, je mange deux fois dans

00:01:02 la journée vu que je fais du jeune

00:01:04 intermittent. Et je voulais enf, il y

00:01:05 avait un coach qui m'a dit ça qui

00:01:06 s'appelle Vincent que je salue. Il m'a

00:01:07 dit "Écoute mec, tu peux pas tout le

00:01:09 temps bien manger. Donc il faut que tu

00:01:10 essayes dans une semaine quand tu manges

00:01:12 14 fois, essayer de manger au moins 10

00:01:14 fois dans les 14 bien." C'est-à-dire que

00:01:16 c'est là où tu respectes tes macros, tes

00:01:18 appareines et cetera et les quatre fois

00:01:19 tu peux manger n'importe quoi. Et donc

00:01:21 j'ai en tête une nappe que je voulais

00:01:23 faire dans laquelle je pouvais avoir

00:01:25 quatre fois où je pouvais mettre où je

00:01:26 pouvais manger n'importe quoi mais

00:01:27 j'avais un besoin de le traquer parce

00:01:29 que sinon bah c'est pas quatre fois mais

00:01:30 10 fois dans la semaine que je mange

00:01:32 n'importe quoi. Et donc je lui ai fait

00:01:34 schéma en disant bah 10/ 10 sur good et

00:01:36 4 sur 4 sur bad. Voilà, j'ai fait ce

00:01:37 truc là. Et maintenant au niveau du

00:01:38 sport, j'ai besoin de traquer combien de

00:01:40 fois je fais du sport dans la semaine.

00:01:41 Alors pour ça, il y a Strava, ça c'est

00:01:43 trop cool. Strava marche très très bien.

00:01:44 Le problème avec Strava, c'est que il me

00:01:45 dit pas quel type de séance c'est en

00:01:46 sachant que moi j'ai besoin de faire

00:01:48 trois séances de run dans la semaine

00:01:49 parce que j'essaie d'augmenter le mon

00:01:51 nombre de kilomètres par semaine et

00:01:53 trois séances de muscu. Et dans les

00:01:54 séances de muscu, il y a une séance

00:01:55 d'yox que j'aimerais faire au minimum et

00:01:58 deux séances de renforcement classique

00:01:59 dans la semaine. Ça, c'est ce que

00:02:00 j'essaie de tracker. Je l'ai pris en

00:02:02 photo et je l'ai envoyé à chat GPT et

00:02:04 j'ai dicté ce trucl. Tu es un product

00:02:05 designer. j'aimerais que tu me fasses

00:02:07 une application qui me permette à la

00:02:08 fois de tracker et cetera. Donc je lui

00:02:10 ai expliqué petit à petit tout ce qu'il

00:02:11 y avait mais je lui ai dit propose-moi

00:02:13 des solutions qui utilisent les

00:02:14 meilleures recommandations en terme de

00:02:16 design produit. Et là il m'a fait bah

00:02:17 toute une description de l'application,

00:02:19 l'architecture de l'application, ce que

00:02:21 je voulais dedans ou pas. Et après, il

00:02:23 m'a proposé si je voulais avoir une

00:02:25 maquette Figma. Donc Figma, c'est un

00:02:27 logiciel de design produit. Il m'a

00:02:29 proposé si je voulais qu'il me fasse un

00:02:31 peu la maquette Figma. Et en effet déjà

00:02:32 le résultat est plutôt cool. Ça veut

00:02:34 dire que ici j'ai un semblant de ce que

00:02:36 je veux tracker et c'est déjà pas mal en

00:02:37 vrai. Beaucoup de gens s'arrêtent là

00:02:40 mais sauf que ici en fait on a que la

00:02:41 partie visible de l'iceberg,

00:02:43 c'est-à-dire qu'on va avoir le code HTML

00:02:44 qui va être généré, qui va me permettre

00:02:46 de faire mon application, mais derrière

00:02:47 je vais pas pouvoir en créer une vraie

00:02:49 app. Je vais pas pouvoir la déployer et

00:02:50 cetera. Et c'est pourquoi on va devoir

00:02:52 utiliser d'autres types d'outils. J'en

00:02:53 ai déjà parlé sur cette chaîne, il y a

00:02:54 d'autres types d'outils aujourd'hui qui

00:02:55 existent qui permettent de de générer

00:02:57 une app tout simplement avec un prompt.

00:02:59 Donc il y a Lovable, il y a Bolt, il y a

00:03:01 Replit, il y a V0. aussi. Et en ce

00:03:03 moment, je m'amise beaucoup avec V0. Et

00:03:04 toutes ces app là, elles ont un endroit

00:03:06 où on peut mettre un prompt. Donc là,

00:03:07 c'est Lovable par exemple ou ça c'est

00:03:09 Bolt. Et on va lui dire quoi faire. Et

00:03:10 moi ce que je vais faire là, c'est que

00:03:12 je vais prendre tout ce que m'a donné

00:03:14 chat GPT avant qu'il me génère le Figma

00:03:16 et je vais aller le coller directement

00:03:18 dans V0. Et je vais le faire aussi dans

00:03:20 Bolt comme ça vous voyez aussi ce que ça

00:03:21 va donner. Et je vais le faire aussi

00:03:23 dans Levable Bolt. Et vous allez voir

00:03:25 que sur chacune des trois, il va me

00:03:27 proposer des versions assez stylées. On

00:03:28 va choisir la meilleure et on va partir

00:03:29 de là. Et là, chacune de ces

00:03:31 applications ont écrit pas mal de codes

00:03:33 et on va avoir le résultat de chacune.

00:03:35 Donc ça c'est Bolt Bolt. Donc du coup,

00:03:37 il m'a fait deux tables, un tableau de

00:03:39 bord et un suivi quotidien. Je peux

00:03:41 cliquer sur ces suivis quotidiens en

00:03:44 question. Si je clique deux fois, hop,

00:03:46 ça c'est pas mal. Tac. Et donc je peux

00:03:47 dire combien de fois j'ai bien mangé ou

00:03:49 pas bien mangé. Déjà, la première fois

00:03:51 qu'on passe d'un truc comme ça à quelque

00:03:53 chose qui marche assez bien, même si les

00:03:54 icônes sont alignées à la gauche et

00:03:56 cetera, c'est plutôt cool. Là, en plus,

00:03:58 il m'écrit objectif en vue continu et

00:04:00 cetera, c'est vraiment cool. Et si

00:04:02 normalement je dépasse ça, il me dit

00:04:04 attention au repas cheat, au cheat days.

00:04:05 Et là, au niveau du sport, j'ai aussi un

00:04:07 truc qui est plutôt pas mal. Ce qui est

00:04:09 dommage, c'est moi dans ma capacité à

00:04:10 expliquer que j'ai pas été bon, c'est

00:04:11 que je peux pas cliquer deux fois si je

00:04:12 fais deux fois la même séance. Mais ça,

00:04:13 c'est parce que moi je lui ai pas

00:04:16 expliqué. Après, on va aller sur V0. V0,

00:04:18 il nous a fait un truc comme ça. On va

00:04:19 le mettre en full screen. Pareil, j'ai

00:04:21 un dashboard qui est un peu plus complet

00:04:23 et j'ai un suivi quotidien. Tac. Alors,

00:04:25 il s'est planté un peu dans la manière

00:04:27 dont il a fait ses colonnes. Et là,

00:04:28 c'est c'est cool. Il m'affiche tout ça.

00:04:29 Pareil, je peux pas cliquer deux fois en

00:04:31 même temps. Là, je lui ai pas expliqué.

00:04:32 Et j'ai un score global et je peux

00:04:34 naviguer de semaine en semaine et ça

00:04:36 c'est trop trop cool. Et au niveau de

00:04:38 loveovable, j'ai un truc plutôt cool

00:04:40 aussi ou pareil dès que je clique, boum,

00:04:41 il me donne ma progression et cetera. Et

00:04:43 donc, j'aimerais que vous si à un moment

00:04:45 donné vous aviez une idée juste, faites

00:04:48 ces deux étapes, passez-la déjà sur chat

00:04:50 GPT, demandez-lui en tant que product

00:04:51 manager et designer produit de

00:04:53 reformuler votre idée et mettez-la ici

00:04:56 sur Lovable, sur Bolt ou alors sur V0

00:04:57 Replit, je l'ai pas testé mais ça va

00:04:58 être plus ou moins la même chose. Et une

00:05:00 fois qu'on a ça, et ben il nous manque

00:05:01 un truc. Il nous manque un truc et je

00:05:03 vais vous expliquer ce que c'est en fait

00:05:05 là. Si vous voulez, je suis parti de mon

00:05:07 idée qui est là, c'est une ampoule, a en

00:05:11 effet déjà un espèce de de prompte qui

00:05:13 est un peu plus précis sur ce que ça

00:05:14 fait donc le prompte de product

00:05:17 designer, product manager. Et ensuite je

00:05:20 suis allé dans V0 ou dans le Vable, on

00:05:21 va dire. C'estàdire ce genre

00:05:22 d'application qui me permet de créer

00:05:25 l'app et ça ça a généré du code et ce

00:05:27 code là, j'arrive à le visualiser sur

00:05:29 mon écran. Donc ça c'est mon écran

00:05:30 d'ordinateur. Et en fait le truc qui se

00:05:32 passe c'est que ce code là en question

00:05:34 il donc si on se met dans ce référentiel

00:05:36 il run sur un serveur. C'estd que ce

00:05:37 code là en question je peux le déployer

00:05:39 le mettre sur internet. Le problème

00:05:40 c'est que pour l'instant il a pas de

00:05:41 base de données. Donc c'est-à-dire qu'à

00:05:44 partir de ce moment-là si je publie

00:05:45 cette application veut dire qu'à partir

00:05:47 de ce moment-là si vous allez là-dessus

00:05:49 et bien cette application est publiée et

00:05:51 vous pouvez vous aussi l'utiliser. Donc

00:05:52 elle est disponible pour tout le monde

00:05:53 et que moi si je commence à l'utiliser

00:05:55 et bien je vais perdre toute ma data. Ça

00:05:58 veut dire que la persistante vu qu'il y

00:06:01 a pas de base de données ou de backend,

00:06:03 grossièrement, il y a pas de base de

00:06:04 données dans lequel toutes les

00:06:06 informations euh vont dedans. Et c'est

00:06:07 la seule chose qui me manque pour faire

00:06:08 en sorte que cette application à partir

00:06:09 de ce moment-là et bien elle soit

00:06:11 viable. Et donc si je suis sur loveable,

00:06:13 très honnêtement le le en ce moment ce

00:06:15 que je trouve mieux c'est lovable et et

00:06:17 V0. V0 parce que je trouve que les

00:06:19 applications que ça génère ont une

00:06:21 utilise par défaut cette librairie

00:06:23 d'ailleurs qui s'appelle Chat CN. Et

00:06:24 donc je trouve que la qualité des

00:06:26 applications est meilleure en terme de

00:06:28 visuel. Leable, je trouve qu'en terme de

00:06:30 design général, structuration, je trouve

00:06:31 qu'il est meilleur. Donc c'est souvent

00:06:32 les deux que j'ai tendance à utiliser.

00:06:34 Et admettons, j'utilise Loveable. Et

00:06:35 bien Loveable, j'ai de la chance, il est

00:06:37 connecté avec un truc qui s'appelle

00:06:40 Super base. Super base c'est une base de

00:06:42 données. Donc si je vais sur super base,

00:06:43 en fait je peux créer des projets et

00:06:47 dans ces projets, je peux hop mettre des

00:06:48 bases de données. Donc j'ai plein de

00:06:50 bases de données qui sont déjà là. Et

00:06:51 par exemple ici ce que je peux faire

00:06:54 c'est direable c'est vraiment super. Le

00:06:56 problème c'est que ma donnée elle est

00:06:57 pas du tout persistante. Donc j'aimerais

00:06:59 que tu crées une base de données dans

00:07:01 Super Base et que à partir de ce

00:07:03 moment-là et bien pour moi et moi seul,

00:07:04 donc pas besoin de créer un login ou

00:07:06 quoi que ce soit et bien cette donnée

00:07:08 soit persistante. Et là quand je vais

00:07:10 aller ici du coup j'ai un bouton déjà il

00:07:13 me propose de le connecter à Supase et

00:07:14 parce que il a une intégration native

00:07:15 avec Super Base. Donc je peux là par

00:07:17 exemple tout simplement écrire connecter

00:07:18 avec Super Base. Donc le truc cool pour

00:07:20 moi c'est que j'ai déjà connecté

00:07:22 Superabase avec le Bble et je vais

00:07:24 choisir une des bases de données ici. Je

00:07:26 viens de le laisser gérer une base de

00:07:27 données de Supabase et à partir de ce

00:07:29 moment-là, vous allez voir que j'ai mon

00:07:31 application qui est connectée et je vais

00:07:33 lui dire créer un une nouvelle table

00:07:35 dans laquelle tu vas stocker tout ça ne

00:07:36 touche pas du tout aux tables existantes

00:07:38 dans ma base de données. Et à partir de

00:07:40 ce moment-là, créer une intégration en

00:07:42 temps réel avec ma base de données et

00:07:44 fait ce qu'il faut en terme de schéma de

00:07:45 base de données et cetera. Je vais lui

00:07:47 donner ça et là vous allez voir, il va

00:07:48 par lui-même créer une nouvelle table.

00:07:50 Donc là, il vient de me créer une table

00:07:51 qui s'appelle Fitness Week. Il est en

00:07:52 train de m'écrire du code en plus pour

00:07:54 que tout cela fonctionne. Et comme je

00:07:55 l'ai dit ici, je le fais avec le Vable

00:07:56 parce que j'aime beaucoup le Vable. Mais

00:07:58 sinon, je pourrais très bien aussi

00:08:00 continuer avec Versel et Versel aussi a

00:08:01 des intégrations de partout. Donc là

00:08:04 avec Supase, Néon, Nextgs et cetera, ils

00:08:05 ont des templates prêt à l'emploi. Je

00:08:07 vais aller sur mon levable voir ce qu'il

00:08:09 en est. Donc là, il est en train de de

00:08:11 faire ce qu'il faut pour pouvoir

00:08:12 j'imagine, ajouter la donnée de ce qui

00:08:14 va y avoir ici dans mon SPA base. Et on

00:08:16 va tester ça dès que c'est fini. Donc

00:08:18 là, si je vais sur ma vraie application,

00:08:20 à partir de ce moment-là, si je modifie

00:08:22 des éléments ici sur par exemple sur mon

00:08:24 suivi quotidien cette semaine et cetera,

00:08:26 si je copie le lien et que je vais en

00:08:29 recherche incognito, et bien je vais

00:08:31 avoir mes informations qui seront encore

00:08:32 là. Et ça, comment c'est possible ?

00:08:33 C'est possible parce que il y a la base

00:08:35 de données qui est persistante et

00:08:37 c'est-à-dire que dedans, il y a les

00:08:39 informations en question et moi, j'ai dû

00:08:40 m'occuper de rien. Donc voilà comment en

00:08:42 2 secondes, j'ai réussi à créer mon app.

00:08:43 Je peux la modifier à l'infini. Le

00:08:45 problème avec Loveable encore une fois,

00:08:46 c'est que c'est une solution payante. Je

00:08:47 l'avais déjà présenté sur ma chaîne et

00:08:49 en plus les applications que vous allez

00:08:50 pouvoir faire avec Lovable, bah elles

00:08:51 sont assez simples. Souvent c'est des

00:08:52 applications qui vont être des

00:08:54 applications de front end mais tout ce

00:08:57 qui est back end tout ce qui est action

00:08:59 dont on a envie qu'il se fasse sans que

00:09:01 le frontend soit connecté et tout, on va

00:09:02 avoir un peu de mal. La manière dont

00:09:04 Lovable arrive à tricher avec ça, c'est

00:09:06 justement en se connectant à Superabase

00:09:09 et en mettant des edge function. J'en ai

00:09:10 déjà parlé sur cette chaîne aussi qui

00:09:12 permet de tricher un peu. Mais la

00:09:13 réalité c'est que dès qu'on veut des

00:09:15 vraies applications qui vont un peu plus

00:09:17 loin, et bien là on va devoir utiliser

00:09:19 des outils comme Cursor. Et ça en ce

00:09:21 moment les amis, c'est là où je passe

00:09:23 tout mon temps. J'ai plein plein plein

00:09:24 de projets sur lesquels j'utilise

00:09:26 Curseur en ce moment. En sachant que moi

00:09:28 à la base bien je suis un dev et le fait

00:09:30 de pouvoir développer sans devoir

00:09:32 développer, on est dans un monde de

00:09:33 dingue. Si jamais ça vous intéresse que

00:09:34 je fasse un peu plus de vidéos. Je sais

00:09:36 que c'est une chaîne de no code à la

00:09:37 base, mais qu'on bascule petit à petit

00:09:40 sur comment faire du Vib parce que tout

00:09:41 ça s'appelle du vibe coding. N'hésitez

00:09:42 pas à me le dire en commentaire. Moi en

00:09:43 ce moment, je passe tout mon temps à ça.

00:09:44 Donc peut-être que en fait je vais faire

00:09:46 évoluer cette chaîne en sachant que très

00:09:47 honnêtement même des développeurs

00:09:49 débutants aujourd'hui peuvent faire des

00:09:50 choses de dingues avec des outils comme

00:09:52 curseur. Bref, je voulais juste vous

00:09:53 montrer ce truc là. Maintenant bah mon

00:09:54 application elle est là, elle est

00:09:57 disponible et puis elle fonctionne très

00:09:59 bien. Je peux très facilement cliquer

00:10:01 comme je veux. Et là, ce que je vais

00:10:03 aller implémenter, si je le veux

00:10:04 évidemment, c'est tout ce qui est

00:10:06 report, donc toutes les semaines, ça

00:10:08 m'envoie un rapport et que ça me fasse

00:10:10 des graphiques un peu plus stylés que

00:10:12 ça. Bref, voilà, petite vidéo un peu

00:10:14 tranquille. J'espère que ça vous a plu.

Créer une App en 10 min avec l'IA

Transcription horodatee