J'ai créé une app complète, ça m'a pris 28 minutes. (Lovable.dev)

[Transcript language: fr] 0:00 je n'ai aucune connaissance en code et 0:01 pourtant dans cette vidéo je vais te 0:03 montrer que c'est bel et bien possible 0:04 de créer une application de A à Z en se 0:07 reposant uniquement sur lia on va partir 0:09 d'un simple prompt avec chat GPT et 0:11 utiliser un outil qui s'appelle lovable 0:13 et qui te permet juste en échangeant 0:15 avec lui de manière totalement naturel 0:16 de créer l'application de tes rêves de 0:18 la faire interagir avec d'autres 0:19 services grâce aux API et de la 0:20 connecter à une base de données et tout 0:22 ça comme d'habitude sans jamais coder et 0:24 si on a le moindre problème on fera 0:25 appel à chat GPT pour qu'il nous aide à 0:27 y voir plus clair j'ai vraiment hâte 0:28 qu'on fasse tout ça ensemble à alors on 0:30 démarre tout de suite donc l'outil qui 0:31 va nous permettre de créer notre 0:32 application aujourd'hui c'est celui-ci 0:33 il s'appelle lovable au niveau de 0:35 l'interface c'est très simple comme 0:36 d'habitude on a juste une barre de chat 0:38 qui va nous permettre d'interagir 0:39 directement avec cette IA donc c'est 0:41 assez similaire avec ce qu'on peut 0:42 retrouver sur l'application Bolt mais 0:44 ici on a quand même quelques petites 0:45 différences assez sympa et on va 0:47 regarder tout ça ensemble donc la 0:48 première chose que je trouve très sympa 0:49 avec cette IA c'est qu'ici on va avoir 0:51 des suggestions pour pouvoir démarrer 0:52 une application donc si tu as pas 0:54 forcément d'idée tu vas pouvoir 0:55 sélectionner une de ces suggestions par 0:57 exemple celle-ci tu peux cliquer ici et 0:59 automatiquement on va te donner des 1:00 idées de prompt que tu pourrais utiliser 1:02 pour créer une application donc là tu as 1:03 même pas besoin d'avoir une idée en 1:05 particulier et tu vas pouvoir utiliser 1:06 directement ce prompt pour créer une 1:08 application là en l'occurrence pour 1:09 suivre le marché des crypt 1:10 automatiquement on nous suggère 1:12 d'utiliser une APU en particulier pour 1:13 récupérer les données des marchés on va 1:15 demander le top 50 des cryptos permett 1:17 de pouvoir cliquer sur une crypto en 1:18 particulier pour accéder à du détail et 1:20 utiliser un thème en particulier on 1:22 lance la demande et là ce qui va être 1:24 intéressant c'est que sur la gauche il 1:25 va détailler les différents éléments du 1:26 site en terme de design en terme de 1:28 fonctionnalité il va également ement 1:30 détailler les couleurs qu'il utilise 1:31 avec les codes couleurs c'est quand même 1:32 très agréable d'avoir pas mal de détails 1:34 sur les différents éléments du site et à 1:36 droite il est en train de travailler et 1:37 d'écrire le code bon là ça me parle pas 1:39 particulièrement mais si tu veux 1:40 progresser dans ce domaine ça peut être 1:42 sympa de regarder ce qu'il a écrit et 1:43 normalement c'est déjà prêt 1:44 l'application vient d'apparaître et là 1:46 avec un simple prompt de quelques lignes 1:48 on a une application fonctionnelle qui 1:50 nous permet de tracker le marché des 1:51 crypt avec les différents prix en direct 1:54 grâce à laapi donc là du coup c'est 1:55 laapi de coin cap qui nous permet 1:57 d'avoir toutes ces données en live on a 1:58 la possibilité de SLE i une crypto en 2:00 particulier par exemple le Bitcoin et là 2:02 on arrive sur une page avec un graphe 2:04 bon il y a encore quelques éléments à 2:05 optimiser pour que ce soit parfaitement 2:07 esthétique mais là avec une simple 2:09 demande avoir une application aussi 2:10 détaillée je trouve que c'est quand même 2:12 déjà assez fou petite fonctionnalité 2:13 aussi propre à lovable ça va se passer 2:15 en haut à droite tu peux cliquer ICI sur 2:16 l'icône mobile pour voir à quoi 2:18 correspond ton site sur une version 2:19 téléphone bon là ici on a un tableau 2:21 assez long donc c'est pas forcément le 2:22 meilleur site pour une version mobile 2:23 mais au moins ça te permet d'avoir une 2:25 vue rapide sur la partie téléphone et 2:27 aussi chose importante si on retourne 2:28 sur la partie PC comme ceci voilà et que 2:30 tu cliques sur le bouton Select tu vas 2:32 pouvoir sélectionner une partie du site 2:34 par exemple ce pourcentage et tu vas 2:35 pouvoir demander à lovable d'effectuer 2:37 une modification uniquement sur 2:39 l'élément que tu as sélectionné donc là 2:41 on va lui dire par exemple mets du bleu 2:43 à la place du vert sur cet élément donc 2:45 vraiment pas besoin de coder on 2:46 sélectionne une partie on lui demande en 2:48 français d'effectuer une modification et 2:50 il nous dit directement qu'il va changer 2:51 la couleur du pourcentage de vert à bleu 2:54 et voilà c'est fait en quelques secondes 2:55 on a notre modification donc je voulais 2:57 te montrer rapidement en introduction à 2:59 quel point c'était facile de créer une 3:00 application en quelques secondes autre 3:02 petite spécificité sur l'ovable si on 3:04 retourne ici sur le dashboard comme ceci 3:06 et vraiment j'adore cette particularité 3:08 donc tu vas retrouver ici tous tes 3:09 projets là en l'occurrence on en a qu'un 3:11 seul mais surtout tu peux accéder à 3:13 l'ensemble des projets de la communauté 3:15 tu cliques ici et tu vas pouvoir 3:16 consulter en direct tous les projets 3:18 créés par l'ensemble des utilisateurs 3:19 donc par exemple celui-ci encore dans le 3:21 domaine des investissements là tu as une 3:23 personne qui a créé une application 3:24 beaucoup plus complète et tu as non 3:25 seulement accès à l'application mais 3:27 aussi à l'ensemble du chat ici donc tu 3:29 vois toute les interactions qu'il a eu 3:30 avec lia pour pouvoir obtenir ce 3:32 résultat ça te permet de te donner 3:34 énormément d'idées de pouvoir reprendre 3:35 des exemples pour pouvoir progresser en 3:37 matière de création d'application sans 3:39 coder c'est juste génial bon maintenant 3:41 je t'ai assez présenté l'outil on va 3:42 rentrer dans le vif du sujet et créer 3:44 notre propre application et pour ça on 3:46 va s'appuyer sur Chat GPT donc on va se 3:48 retrouver dans chat GPT et on va 3:49 utiliser un prompt qui va nous permettre 3:51 d'utiliser chat GPT en tant qu'assistant 3:53 pour pouvoir nous aider à la création 3:55 d'application donc on va utiliser ce 3:57 Prom suivant c'est un Prom que tu vas 3:58 pouvoir réutiliser si tu le souhaites on 4:00 va lui dire je veux utiliser l'ovable 4:01 donc le nom de Lia que je viens de te 4:03 présenter pour créer un site de A à Z et 4:05 l'héberger sur supabase supabase tu vas 4:07 le voir c'est une base de données qui 4:08 est partenaire de lovable et qui permet 4:10 de très facilement intégrer une base de 4:12 données à l'application c'est super 4:14 simple on va le faire ensemble en 4:15 proposant également unesace utilisateur 4:17 donc c'est également un élément 4:18 important qu'on va pouvoir mettre en 4:19 place grâce à supabase tu es mon 4:21 assistant qui m'aidera à créer un site 4:23 avec l'ovable donne-moi une idée de site 4:25 sympa à créer et les prompt étape par 4:27 étape pour créer ce site je vais 4:29 utiliser une ou deux API qui soi facile 4:31 à mettre en place encore une fois on n 4:32 pas technique donc on a besoin de faire 4:33 quelque chose d'assez simple mais pour 4:35 autant on peut quand même avoir quelque 4:36 chose de sympa je veux que ce site soit 4:38 le plus moderne possible avec un thème 4:39 sombre et des animations au niveau du 4:41 design je veux quelque chose qui 4:43 ressemble à ce site donc décris au mieux 4:45 le style et là on va aller chercher des 4:46 exemples sur Internet prendre un 4:48 screenshot d'un site qu'on trouve sympa 4:49 lui donner et derrière chat GPT va nous 4:51 prédécouper tout le travail et on va 4:53 utiliser les prompts qui va nous donner 4:55 pour les mettre derrière dans l'IA et 4:57 créer l'application donc on va tout 4:58 d'abord rechercher un des de site on va 5:00 aller sur le site de template de Webflow 5:02 qui permet de créer beaucoup de sites on 5:03 va avoir beaucoup d'exemples sympas on 5:04 va aller dans la catégorie technologie 5:06 parce qu'on veut créer une application 5:07 et on va prendre un des premiers sites 5:09 par exemple celui-ci voilà un thè som ça 5:11 peut être assez intéressant on va le 5:12 consulter dans le browser comme ceci 5:14 voilà c'est parfait et on va prendre un 5:16 exemple du site qui est plutôt 5:17 représentatif on va aller ici on prend 5:19 un screenshot comme ceci on copie le 5:21 screenshot et on retourne en chat GPT on 5:23 colle le screenshot très simplement et 5:25 on va pouvoir lancer notre demande et 5:27 donc là qu'est-ce qui nous suggère donc 5:28 l'idée du site c'est un haur d'habitude 5:30 un site qui aide les utilisateurs à 5:31 suivre leurs habitudes quotidiennes et à 5:33 recevoir des suggestions personnalisées 5:35 pour améliorer leur productivité ou leur 5:37 bien-être grâce à l'intelligence 5:38 artificielle l'utilisateur peut se 5:40 connecter ajouter ses habitudes et 5:42 visualiser ses progrès à l'aide de 5:44 graphique interactif pas mal on va 5:46 partir sur ça au niveau du style visuel 5:48 donc inspiré de l'image le design du 5:50 site inclura un thème sombre avec des 5:51 nuances de violet et bleu pour un look 5:52 moderne et technologique des polices 5:54 arrondiers modernes un effet de Glot 5:56 néon sur les boutons donc ça c'est les 5:58 éléments du site qu'on a juste ici des 5:59 animations fluides pour les transitions 6:01 et les interactions utilisateurs et des 6:03 sections structurées par exemple feature 6:05 dashboard FAQ au niveau des 6:07 fonctionnalité principale on a un 6:08 dashboard personnalisé suggestion 6:10 d'amélioration d'habitude via une API et 6:12 là on va installer open pour pouvoir 6:14 mettre de l'intelligence artificielle au 6:15 sein de l'application connexion et 6:17 gestion des utilisateurs grâce à 6:18 l'intégration avec supabase ça on va le 6:20 faire aussi et visualisation des progrès 6:22 avec des graphiques là on va voir si on 6:23 peut utiliser ces API et voici les 6:25 promptes qu'on va utiliser étape par 6:26 étape donc pour la création de la page 6:28 d'accueil la création de l'espace 6:30 utilisateur et cetera tout est détaillé 6:32 on a un véritable assistant avec chat 6:34 GPT qui va nous aider à créer 6:35 l'application beaucoup plus facilement 6:37 on regarde ce qu'on a ensuite ici donc 6:38 on a la configuration pour les API c'est 6:40 assez compliqué mais j'imagine que si on 6:42 est bloqué à un moment on demandera un 6:44 petit peu plus de détail à chatpt les 6:46 étapes pour finaliser le site ok bonus 6:48 visuel ça a l'air pas mal là si je 6:50 remonte un petit peu je vois que j'ai le 6:52 détail en anglais on va quand même 6:53 demander à chat GPT de N faire les 6:54 prompts en français l'ovable comprend le 6:56 français donc autant qu'on lui demande 6:57 de faire la traduction on va lui dire je 6:59 veux les prompts en français comme ceci 7:03 donc voilà il est en train de tout 7:04 réécrire en français on est pas mal on 7:05 va prendre ce premier prompt le copier 7:07 donc on va se retrouver dans l'ovable et 7:09 on va coller le premier prompt donc crée 7:11 une page d'accueil avec un thème moderne 7:12 sombre utilisant des nuances de violet 7:14 de bleu ajoute une section principale 7:16 donc qu'on appelle Hero avec un slogan 7:18 accrocheur votre hackur d'habitude 7:19 personnelle propulsé par l'A ajoute deux 7:21 boutons lumineux avec un effet néon 7:23 commencer se connecter et en dessous 7:25 ajoute une section fonctionnalité avec 7:27 des icônes et du texte utilise des 7:29 animations fluide pour les transitions 7:31 on va voir ce qu' nous propose on lance 7:32 notre demande et voilà il est en train 7:34 de se mettre au travail donc ici sur la 7:36 gauche encore une fois très agréable il 7:37 va nous dire qu'il a un design inspiré 7:39 de notion pour sa simplicité Linéar pour 7:41 les effets de transition fluide Rayas 7:43 pour les effets néon les fonctionnalités 7:45 pour la première version donc heroction 7:47 bouton néon section fonctionnalité 7:49 transition fluide design responsif pour 7:51 que ça fonctionne sur mobile et les 7:53 couleur principale on a du violet avec 7:55 un code couleur en particulier du bleu 7:57 foncé également avec ce code des 7:59 animations 7:59 une police qui a été choisie directement 8:01 par l'A et on va voir ce qu'il nous 8:03 propose et c'est parti on a une première 8:04 ébuche du site ça a l'air assez propre 8:06 évidemment on va aller plus loin au 8:07 niveau du design donc on a la tagline 8:10 ici les boutons qui ne fonctionnent pas 8:11 encore mais on va les connecter les 8:13 différentes fonctionnalités donc là on a 8:15 vraiment une landing page basique mais 8:16 on va continuer avec différentes étapes 8:18 donc on va se retrouver sur Chat GPT on 8:20 va prendre le deuxième prompt on va le 8:21 copier et on va continuer ici on va le 8:23 coller dans le weble et on va relancer 8:25 une demande donc ici on va demander de 8:26 créer un tableau de bord utilisateur 8:28 avec un thème sombre qui inclut une 8:30 barre de navigation latérale qui permet 8:31 d'ajouter une habitude une zone 8:33 principale montrant une liste des 8:34 habitudes avec des cases à cocher 8:35 lumineuses une zone de graphique pour 8:37 afficher la progression des habitudes et 8:39 on lui a dit d'utiliser apex chart pour 8:40 visualiser la progression il est déjà en 8:42 train de travailler sur tout ça tu peux 8:43 accéder au code en direct en cliquant 8:45 sur le bouton ici on accède à la 8:47 création des différentes sections donc 8:48 là tu vois qu'il est en train de 8:49 travailler sur les couleurs et voilà il 8:51 nous sort de l'éditeur de code parce 8:52 qu'il a déjà mis en place les 8:53 fonctionnalité et ça y est on est 8:55 confronté à notre première erreur mais 8:56 pas de souci on peut juste cliquer ici 8:58 en bas sur tr fix pour pouvoir régler 9:00 tout ça on clique dessus automatiquement 9:02 l'ovable va comprendre quel est le 9:04 problème effectuer les petites 9:05 modifications et dans quelques secondes 9:07 on aura notre seconde partie qui 9:09 fonctionne normalement parfaitement 9:10 voilà donc c'est bon on est revenu à la 9:12 normale si on regarde ici donc là tu vas 9:14 voir les différentes pages ici en haut 9:15 donc on a notre page d'index la page 9:17 principale ici on a la partie dashboard 9:19 qui vient d'être créée et voilà on a 9:20 notre dashboard avec un graphique les 9:22 différentes habitude comme demandé qu'on 9:24 va normalement pouvoir cocher comme ceci 9:25 voilà ça fonctionne bien on peut cliquer 9:27 ici pour ajouter une habitude ça 9:29 fonctionne pas encore mais on va le 9:30 connecter le progrès et les paramètres 9:32 c'est pareil donc pour l'instant on a 9:33 uniquement le tableau de bord mais c'est 9:35 pas grave on avance on va retourner dans 9:37 chat GPT prendre le troisème prompt et 9:39 puis après quand on aura toutes les 9:40 fonctionnalités de base on connectera 9:41 tout ça bien sur le site pour que 9:43 l'ensemble soit bien homogène donc on 9:44 récupère le prompt on retourne sur le 9:46 weble et on va coller ce troisème prompt 9:48 on le lance comme ceci donc là on va 9:50 demander d'ajouter une fonctionnalité de 9:51 suggestion basée sur l'IA et là on va 9:53 lui dire de faire appel à laapi d'OP 9:56 donc il est en train de mettre en place 9:57 ce qu'on vient lui demander si on clique 9:58 ici encore une fois tu peux réaccéder au 10:00 code on va retourner sur la page 10:02 principale de toute façon le code ça 10:03 nous intéresse pas forcément et voilà il 10:05 a ajouté une nouvelle section de 10:07 suggestion il a au tableau de bord et 10:09 pour que ça fonctionne on va devoir 10:11 donner notre clé API open ai et pour ça 10:13 c'est très simple je vais te montrer 10:15 comment faire donc pour faire ça tu vas 10:16 devoir aller sur 10:17 plateforme.openi.com te créer un compte 10:19 gratuitement et après devoir rajouter 10:21 quelques crédits pour pouvoir utiliser 10:22 la pay donc tu peux mettre simplement 5 10:24 dollars ça sera largement suffisant et 10:26 une fois que tu as fait ça tu vas aller 10:27 ici en haut à droite sur dashboard on va 10:29 zoomer un petit peu pour que ce soit 10:30 plus visible et tu vas pouvoir aller sur 10:32 la gauche maintenant aller sur apiiky et 10:34 cliquer sur Créer une nouvelle clé API 10:36 tu vas pouvoir mettre le nom que tu veux 10:37 pour ta clé donc moi je vais mettre 10:38 lovable comme ceci au niveau du projet 10:41 tu mets default project peu importe on 10:43 crée la clé là c'est une clé que tu vas 10:44 pouvoir copier fais attention de pas la 10:46 partager d'ailleurs moi je vais la 10:47 supprimer après cette vidéo il faut 10:48 vraiment que tu la gardes pour toi et 10:50 une fois que tu as copié la clé on va 10:51 tout simplement retourner sur le weble 10:54 et lui dire voici la clé comme ceci on 10:56 colle la clé et on va lancer notre 10:58 demande et il va comprendre directement 11:00 o ù intégrer la clé au sein du code le 11:02 faire à notre place et normalement on 11:04 devrait être pas mal donc là il nous dit 11:05 de faire attention de donner directement 11:06 la clé au sein du chat encore une fois 11:08 faut faire vraiment attention moi je 11:09 vais la supprimer juste après voilà donc 11:11 après avoir pas mal insisté il a accepté 11:13 de mettre directement la clé API dans 11:14 l'application pour ça je pense qu'il 11:16 fallait aller ici en haut à droite sur 11:17 la partie project settings et passer de 11:19 public à privé pour que ce soit beaucoup 11:21 plus sécurisé et que personne ne puisse 11:22 accéder à notre application là 11:24 normalement on est pas mal et du coup si 11:26 on va ici sur index et qu'on retourne 11:28 sur la partie DASH board et voilà là tu 11:30 vois qu'on a la partie suggestion ila et 11:32 on va pouvoir tester l'application donc 11:34 par exemple on va mettre une habitude 11:36 manger plus sainement on va cliquer ICI 11:39 sur obtenir une suggestion et on va voir 11:41 si ça fonctionne et voilà c'est génial 11:43 donc on a une réponse pour manger plus 11:44 sainement absolument je serais ravi de 11:46 vous aider voici une suggestion concrète 11:48 et actionnable pour vous aider à manger 11:49 plus sainement planifiez vos repas à 11:51 l'avance chaque semaine prenez le temps 11:53 de planifier les repas et cetera cela 11:54 vous aidera seulement à manger plus 11:56 sainement soyez patient avec vous-même 11:58 donc on a une première suggestion on va 11:59 voir si on peut en faire une deuxième 12:01 progresser en tennis par exemple on 12:04 clique ici et là à chaque fois tu fais 12:05 appel à la p d'Open je vais te montrer à 12:07 quoi ça correspond dans le dashboard 12:09 côté open juste après voilà on a la 12:11 deuxième suggestion qui est prête avec 12:13 plusieurs conseils donc un pratique 12:14 régulière de exercices spécifiques donc 12:17 voilà ça commence à fonctionner on a pas 12:18 mal de choses si on retourne côté open 12:20 sur la partie usage tu vois qu'on a bien 12:22 les utilisation donc c'est bien connecté 12:24 les deux roquettes nous ont coûté 3 12:26 centimes donc ça va on a un peu de marge 12:27 et du coup on va continuer à améliorer 12:29 l'application et avant de passer à la 12:31 partie création de base de données on va 12:32 quand même essayer d'améliorer un petit 12:33 peu tout ça parce que là on a pas mal 12:35 d'éléments mais ils sont pas forcément 12:36 connectés donc on va tout simplement de 12:38 manière très naturelle interagir avec le 12:40 weble et essayer d'avoir quelque chose 12:42 de plus cohérent donc du coup si on 12:43 repart sur la partie index et sur la 12:45 première page qu'est-ce qui nous manque 12:46 donc déjà au niveau du design je trouve 12:48 qu'on est pas terrible si on retourne 12:49 sur ch GPT il nous avait préparé pas mal 12:51 de choses pour la partie visuelle on va 12:52 quand même utiliser ce prompt ça coûte 12:54 pas grand-chose donc on va le coller 12:55 dans le vable comme ceci ça va permettre 12:57 d'ajouter des effets interactifs pour 12:59 améliorer l'expérience utilisateur un 13:01 effet de survol lumineux pour les 13:02 boutons une transition fluide de type 13:04 fadein et des animations subtiles on va 13:06 voir s'il y a des choses qui change donc 13:07 on a une petite erreur on va la relancer 13:09 ok donc on a quelques petits changements 13:11 mais c'est pas non plus énorme ce qu'on 13:12 va faire je pense c'est pas s'embêter et 13:14 coller l'image du site qu'on avait au 13:15 début pour pouvoir lui donner de 13:16 l'inspiration on va lui dire je veux que 13:18 le design soit plus abouti inspire-toi 13:22 de ce site on va voir si pour lui là 13:24 c'est plus clair donc il nous dit qu'il 13:25 va améliorer le design en s'inspirant du 13:27 style moderne et puré du site qui 13:28 s'appelle starve avec des effets de 13:30 glacmorphisme des dégradés violets et 13:32 des animations fluides ah voilà donc là 13:33 on a eu du changement mais on a un 13:35 problème d'image on va lui dire le fond 13:36 est trop clair ce n'est pas bien visible 13:39 et on va lui dire met des images ou une 13:42 grille pour un effet moderne on va voir 13:45 s'il comprend ce qu'on lui dit c'est 13:47 aussi normal he volontairement je te 13:48 montre que c'est pas non plus toujours 13:49 évident ça prend parfois quelques 13:51 allers-retours pour avoir vraiment le 13:52 résultat que tu veux mais si tu es 13:54 persévérant tu vas voir on peut avoir 13:55 quelque chose d'assez sympa bon voilà là 13:57 on commence à progresser c'est un peu 13:59 mieux il nous manque quand même des 14:00 éléments en haut on n pas de header si 14:02 on clique ici par contre voilà ça 14:03 fonctionne donc ça c'est pas mal les 14:04 boutons ici fonctionnent pas on va lui 14:06 demander de faire les modifications je 14:08 veux un header en haut et des boutons 14:12 fonctionnels ici donc donc sur la partie 14:15 sur la partie dashboard ajouter une 14:17 habitude progrès et paramètres on va 14:20 voir s'il comprend comme ça là on fait 14:21 vraiment des choses basiques on n pas 14:22 très clair dans les instructions 14:24 volontairement j'ai envie de tester s'il 14:25 est intelligent et qu' peut comprendre 14:27 les modifications même si on n pas 14:28 forcément super structuré dans la 14:30 demande voilà donc il a effectué des 14:31 modifications si on teste ici là c'est 14:33 bon pour le coup ça fonctionne c'est pas 14:35 encore hyper complet mais quand même on 14:37 avance dans le bon sens on a notre 14:38 header ici avec habit tracker le header 14:41 on l'a pas sur la première page on va 14:42 lui demander donc je veux le header sur 14:44 la page principale voilà là on commence 14:46 à être pas mal si on clique sur 14:47 dashboard ici ça fonctionne parfait là 14:49 tout ça ça a l'air bon au niveau des 14:51 habitudes on peut les cocher mais ça a 14:53 pas l'air d'avoir un impact sur le 14:54 graphique là par contre le graphique il 14:55 est dynamique donc c'est assez 14:57 intéressant donc on va lui dire je veux 14:59 veux que le fait de cocher des habitudes 15:02 impactent le graphe et pendant ce temps 15:05 on va retourner dans chat GPT pour voir 15:07 ce qui nous manquait donc il nous manque 15:08 évidemment la partie base de données 15:10 gestion des utilisateurs on n' pas fait 15:12 non plus cette partie progrès avec les 15:13 graphiques on va le faire d'ailleurs on 15:15 va copier ça si on retourne ici on va 15:17 voir s'il a effectué la modification 15:18 écoute ça a l'air pas mal dès qu'on 15:20 coche une habitude on a une progression 15:22 au moins sur ce jour-là et puis 15:23 j'imagine que si on le refait demain on 15:25 aura un graphique qui va commencer à se 15:26 construire donc on est pas mal on va 15:29 quand même lui demander d'effectuer 15:30 l'amélioration suggérée par chat GPT on 15:32 va le coller ici c'est hyper intéressant 15:34 tu lances directement les demandes dans 15:36 le weble tu fais les alertois avec 15:38 charpt vu que ça prend à chaque fois 15:39 quelques secondes au moins ça te permet 15:41 de pas perdre de temps donc on retourne 15:42 en charpt il nous manque donc les 15:44 visuels ça on l'a fait on est bon la 15:45 fonctionnalité utilisateur on va pouvoir 15:47 le faire également donc on va le copier 15:49 donc ça y est au niveau de l'ovable il a 15:50 travaillé il a ajouté la nouvelle page 15:52 progrès juste ici mais ça en fait on 15:54 l'avait déjà tout à l'heure donc la 15:55 partie ajouter une habitude on l'avait 15:56 déjà également mais si on lui fait la 15:58 demande on va voir s'il la améli la page 15:59 en attendant ce qui est intéressant on 16:01 va pouvoir tester la partie mobile je 16:02 trouve que c'est pas terrible he sur 16:03 mobile on va lui demander de modifier ça 16:05 également ah là ça commence à être sympa 16:07 donc non seulement on peut cocher les 16:08 différentes habitudes ça on pouvait déjà 16:09 le faire mais on peut les supprimer on 16:12 peut en ajouter une comme ceci voilà là 16:14 c'est génial si on met par exemple faire 16:15 du yoga on ajoute l'habitude voilà 16:17 l'habitude est ici on peut la cocher on 16:20 peut la modifier aussi comme ceci génial 16:22 franchement là ça commence à devenir 16:24 structuré c'est pas mal l'application 16:26 elle va ressembler à quelque chose en 16:27 fait tout à l'heure je me suis rendu 16:28 compte quand on a a demandé de faire des 16:29 améliorations sur la partie progrès on 16:31 l'a ici donc ici on a carrément les 16:33 progrès sur 7 jours les habitudes du 16:34 jour on peut télécharger nos graphi en 16:36 cliquant ici donc ça c'est aussi très 16:38 intéressant donc on va retourner sur le 16:39 dashboard au niveau des progrès bon là 16:41 on l'avait tout à l'heure ajouter 16:42 l'habitude ici ça a pas bougé les 16:44 paramètres on peut réinitialiser tout ça 16:46 voilà donc là on est reparti à zéro 16:47 c'est assez pratique on va lui demander 16:49 la modification sur la partie mobile 16:50 parce qu'encore une fois c'est pas 16:52 terrible comme ceci ouais on va lui 16:53 demander d'améliorer tout ça donc on va 16:54 simplement lui dire le responsive mobile 16:56 n'est pas très joli et j'imagine qu'il 16:58 va comprendre avec des mots assez 16:59 basiques on va voir ce qu'il nous 17:00 propose voilà il a effectué la 17:02 modification on va tester ça est-ce que 17:04 c'est mieux bah oui c'est carrément 17:06 beaucoup mieux là pour le coup sur 17:07 mobile on a une vue assez claire si on 17:09 clique ici on a les menus 17:10 ça commence à être vraiment pas mal sur 17:12 les progrès aussi on est bien si on 17:14 clique ici sur la page principale c'est 17:16 aussi intéressant franchement 17:17 honnêtement dis-moi ce que tu penses de 17:18 cetteia dans les commentaires ça as vu 17:19 hein vraiment je fais des demandes assez 17:21 basiques je fais pas des choses hyper 17:22 complexes et j'ai des résultats mais 17:24 quand même voilà il y a des 17:25 allers-retours il y a des choses à faire 17:26 mais tu peux obtenir des choses hyper 17:27 satisfaisantes en vrai vraent très peu 17:29 de temps là on commence à s'approcher de 17:30 quelque chose qui pourrait press être 17:31 commercialisé on a de l' qui intégré 17:33 tout ça c'est plutôt joli franchement je 17:35 commence à être assez satisfait du 17:36 résultat bon on pourrait continuer à 17:38 rajouter des fonctionnalités et 17:39 optimiser tout ça mais à présent on va 17:40 passer à la partie intégration avec la 17:42 base de données et pour ça on va 17:44 utiliser supabase c'est complètement 17:45 gratuit et directement intégré à 17:47 l'ovable tu vas voir c'est très simple 17:49 mais avant ça si la vidéo te plaît et 17:50 que tu as appris des choses jusque- là 17:52 tu peux la liker ça m'aide beaucoup et 17:53 surtout t'abonner à la chaîne allez 17:55 objectifs 10000 abonnés donc maintenant 17:57 la base de données pour ça on va tout 17:59 simplement aller sur superabase ici tu 18:01 vois en haut à droite que tu as une 18:02 intégration avec l'outil le plus simple 18:04 pour pas qu'er de souci je te conseille 18:06 d'aller directement sur le site donc là 18:07 on est sur le site de superbase 18:09 superbase.com tu crées un compte c'est 18:11 complètement gratuit tu crées ton 18:12 organisation donc là automatiquement 18:14 j'ai mon organisation Exploria et ce 18:16 qu'il va falloir faire ça va être de 18:17 créer un projet comme ceci le projet peu 18:19 importe on va mettre habitude au niveau 18:21 de la base de données tu mets un mode 18:22 pass classique là on doit être pas mal 18:24 c'est parfait on va se mettre en France 18:26 et on crée un nouveau projet encore 18:28 encore une fois on a des clés à P donc 18:29 fais attention à pas les partager à 18:31 n'importe qui moi je les supprimerai 18:32 juste après la vidéo là le projet est en 18:34 train de se mettre en place ça peut 18:35 prendre quelques minutes au niveau du 18:37 statut tout est en train de charger la 18:39 base de données l'authentification on va 18:41 mettre tout ça en place et voilà on est 18:42 bon on a le statut au vert donc 18:44 maintenant on va pouvoir retourner sur 18:45 le weble comme ceci et maintenant on va 18:47 pouvoir cliquer sur superab juste ici on 18:49 a notre projet habitude qui est vert et 18:51 on peut le connecter ça va hyper vite he 18:53 tu vois c'est très simple tout est 18:54 directement connecté il y a une vraie 18:56 intégration qui te permet de faciliter 18:57 les choses et donc automatiquement il va 18:59 connecter la base de données et voilà 19:01 c'est génial l'application est 19:02 maintenant connectée à superpabase on a 19:04 maintenant la possibilité de se 19:05 connecter d'avoir des profils 19:06 utilisateur stocker la donnée en temps 19:08 réel et utiliser des fonctionnalités 19:09 avancées avec les API les notifications 19:11 par email les paiements donc ça c'est 19:13 des choses qu'on pourra voir dans une 19:14 autre vidéo si ça t'intéresse dis-moi 19:16 dans les commentaires quelque chose de 19:17 beaucoup plus complet c'est aussi 19:18 quelque chose qu'on va aborder dans ma 19:20 formation chat GPT de Z0 à pro et dans 19:22 les lives qu'on va mettre prochainement 19:23 en place avec les membres et donc du 19:24 coup maintenant on va lui dire de mettre 19:26 en place la partie création de profil 19:27 utilisateur donc on lui fait la demande 19:29 avec inscription et connexion et voilà 19:31 c'est juste génial il est en train de 19:32 mettre en place l'authentification il 19:34 s'occupe de créer la table des profils 19:36 la directement on a vraiment rien fait 19:37 on a simplement créé un compte 19:39 superpabase on a effectué la connexion 19:41 tout ça gratuitement on clique ici pour 19:43 appliquer les changements qui nous 19:44 propose bon on lui fait croire qu'on a 19:45 fait la review du code encore une fois 19:47 on y connaît rien mais c'est pas grave 19:48 on lui dit que ça semble être pas mal il 19:50 est en train de mettre en place la 19:51 migration pour l'instant aucun souci 19:53 franchement je suis content parce que 19:54 dans la démonstration on n pas eu 19:55 beaucoup de problèmes et quand on en a 19:57 eu on a réussi à les régler assez fac 19:58 facilement en attendant j'en profite un 20:00 peu pour te parler du prix de lovable 20:01 donc évidemment comme sur beaucoup d' 20:03 tuas un plan gratuit ce plan il permet 20:04 quand même de faire quelques 20:05 allers-retours et de créer ta première 20:06 application bon ça reste quand même 20:08 assez limité assez rapidement si tu veux 20:10 t'amuser avec l'outil et aller un peu 20:11 plus loin il faudra que tu prennes cet 20:13 abonnement c'est 20 dollars par mois et 20:14 honnêtement tu as quand même de quoi 20:16 faire là j'ai pris l'abonnement et j'ai 20:17 quand même fait beaucoup de tests créé 20:18 différentes applications et j'ai utilisé 20:20 à peu près la moitié donc franchement 20:22 c'est raisonnable ok donc c'est bon il a 20:24 mis en place l'authentification et la 20:25 gestion des utilisateurs pour faciliter 20:27 les tests il nous recommande de 20:28 désactiver la confirmation par email 20:30 dans les paramètres de super base ah 20:31 ouais ça c'est une chose importante je 20:33 vais te montrer comment faire donc là 20:34 déjà c'est plutôt une bonne nouvelle on 20:35 a un petit icône avec le profil 20:37 utilisateur on va tester tout ça mais 20:39 avant ça on va effectivement aller dans 20:40 supase on va quand même lui demander où 20:42 est-ce qu'on doit le faire ou faire ça 20:43 dans superpabase avant en fait je me 20:44 rends compte que si on clique ici voilà 20:46 on a directement accès au bon endroit 20:47 donc c'est parfait on a même pas besoin 20:49 de lui demander et on va aller ici sur 20:50 les emails et voilà on va décocher cette 20:52 partie là en fait c'est juste génial tu 20:53 as même pas besoin de lui faire la 20:54 demande à partir du moment où c'est 20:56 connecté à superpabase il te met 20:57 directement les liens sur lesquels tu 20:59 vas devoir accéder pour pouvoir faire 21:01 éventuellement une modification donc là 21:03 pour le coup le prompt on en avait pas 21:05 besoin bon il nous a quand même 21:06 expliquer où est-ce qu'on devit aller 21:07 chercher ça et donc là normalement on a 21:09 plus de problème on va quand même tester 21:11 tout ça si on clique ici donc on a quoi 21:12 on était connecté donc on peut cliquer 21:14 sur déconnexion et voilà donc là on a 21:16 une page pour créer notre compte et nous 21:17 connecter on va créer notre compte on 21:19 clique sur s'inscrire on va tester tout 21:21 ça alors on a un problème au niveau du 21:23 design on va lui demander d'effectuer la 21:24 modification tout de suite donc on lui 21:26 dit que le texte est noir sur noir on 21:27 lui demande effectu la modification 21:29 comme ça au moins ça sera fait voilà là 21:31 on a notre nouvelle page on va tester 21:33 tout ça donc si on met par exemple 21:35 hello@gmail.com on va créer un compte on 21:37 met un mot de passe alors on a un petit 21:39 souci on va régler ce problème en 21:41 cliquant ici ah donc en fait l'erreur 21:42 c'est qu'on avait un mot de passe trop 21:43 court j'ai mis seulement quatre 21:45 caractères on va essayer à la fin des 21:46 modifications d'avoir un mot de passe un 21:48 petit peu plus long donc voilà là au 21:49 moins il a précisé qu'il nous fallait 21:50 six caractères minimum c'est parfait on 21:52 réessaye tac comme ceci ah non là on est 21:54 sur la page de connexion on va le faire 21:56 sur la page d'inscription voilà là c'est 21:57 bon on clique ici donc à priori le 21:59 compte est créé normalement on avait 22:01 décoché la partie email de confirmation 22:02 on va voir dans la base de données si ça 22:04 fonctionne et donc si on va sur la 22:05 partie authentification on a bien notre 22:07 compte qui a été créé ici en fait je 22:09 crois que c'est moi qui ai fait une 22:10 erreur j'avais pas sauvegardé les 22:11 changements c'est pour ça qu'en fait on 22:12 nous a redemandé la confirmation par 22:14 email voilà donc on va le refaire parce 22:16 que si on retourne ici donc du coup sur 22:17 la partie authentification on a 22:19 effectivement le compte qui va pas 22:21 pouvoir être créé parce qu'on attend la 22:22 vérification email donc on va le refaire 22:24 tac donc on va mettre hello 22:26 1@gmail.com on s'inscrit et voilà voilà 22:28 là on est déjà inscrit on n pas besoin 22:30 d'avoir la vérification email et si on 22:31 retourne dans la base de données et 22:33 qu'on rafraîchit on a bien notre nouvel 22:35 user qui a été créé et celui-ci vu qu'on 22:37 a pas besoin de confirmation il a été 22:38 créé et connecté franchement c'est assez 22:41 bluffant ça a pris vraiment quelques 22:42 secondes et encore je m'y suis pas bien 22:44 pris mais franchement quand tu commences 22:45 à maîtriser tout ça ça va juste super 22:47 vite donc maintenant on va retourner sur 22:49 le weble et tester notre espace 22:50 Utilisateur on va tester la déconnexion 22:53 et la reconnexion avec le profil donc 22:55 par exemple si on met n'importe quoi 22:56 normalement ça devrait pas fonctionner 22:58 tac on essaye voilà donc là on a pas de 23:01 compte forcément ça fonctionne pas si on 23:03 utilise notre compte qu'on a créé tout à 23:04 l'heure voilà comme ceci on va mettre le 23:07 bon mot de passe et là on peut se 23:10 connecter aucun problème et derrière 23:12 ajouter toutes nos habitudes on peut en 23:14 créer une comme ceci faire du sport on 23:16 clique sur Ajouter et voilà on a notre 23:18 nouvelle habitude le suivi des habitudes 23:20 ici les progrès on commence à être bien 23:22 là je pense et du coup maintenant on va 23:23 dire à lovable je veux que les habitudes 23:26 soient enregistré dans la base de 23:29 données et donc du coup ça c'est génial 23:31 il va tout faire à notre place il va 23:32 créer une nouvelle table pour stocker 23:33 les habitudes dans ce pase et mettre à 23:35 jour le code pour que persiste les 23:36 données on applique les changements 23:37 comme tout à l'heure tout est bon pour 23:39 nous encore une fois on lui fait 23:40 confiance alors apparemment on a une 23:41 petite erreur on va cliquer ici pour la 23:43 résoudre voilà je pense que tout est 23:44 réglé ah j'ai l'impression qu'il y a 23:46 encore quelques petits soucis on va 23:47 appliquer les changements bon on va 23:48 quand même tester tout ça on rajoute une 23:50 nouvelle habitude boire de l'eau par 23:52 exemple on ajoute ici et le mieux c'est 23:54 de tester directement dans la base de 23:55 données on retourne sur supabase dans la 23:57 partie base de données on va consulter 23:59 les tables et là on a notre table avec 24:01 les habitudes c'est parfait est-ce qu'on 24:03 peut accéder à notre table facilement on 24:04 va cliquer ICI sur View intable Editor 24:07 et voilà c'est parfait on a notre ligne 24:09 boire de l'eau qui a été enregistrée 24:11 donc l'ensemble des habitudes vont 24:12 arriver directement dans la base de 24:13 données et là du coup c'est juste top on 24:15 a la colonne compled qui est en false 24:17 évidemment parce qu'on n pas coché 24:19 l'habitude si on retourne ici et qu'on 24:20 coche boire de l'eau on refrche la page 24:23 comme ceci et voilà on est en trou boire 24:25 de l'eau a été coché et du coup la 24:27 variable a été modifié donc après 24:28 évidemment tu peux rajouter autant de 24:30 données que tu veux tu pourrais décider 24:31 également que les suggestions on y a 24:33 quand tu fais une demande ici elles soi 24:35 ajouté dans la base de données là on a 24:36 juste une application hyper complète 24:38 avec un suivi des habitudes on peut 24:40 ajouter des habitudes les modifier les 24:42 cocher les décocher les supprimer on a 24:44 le suivi avec les graphiques on a des 24:46 paramètres bon uniquement la possibilité 24:47 de tout réinitialiser en cliquant ici là 24:49 du coup on a plus rien et la base de 24:51 données va se mettre automatiquement à 24:52 jour on peut aller beaucoup plus loin il 24:54 y a énormément de possibilités qu'on 24:55 pourrait mettre en place d'ailleurs je 24:56 vais te montrer hein c'est vraiment très 24:57 simple tu retour sur Chat GPT tu lui dis 24:59 je voudrais rajouter une fonctionnalité 25:02 très simple mais utile pour mon app sans 25:05 API on va préciser pour que ce soit 25:07 assez simple et rapide et on va voir ce 25:09 qu'il nous propose donc il nous propose 25:10 de rajouter un minuteur intégré pour 25:12 suivre les sessions d'habitude ou de 25:13 travail en temps réel il décrit la 25:15 fonctionnalité et il nous refait les 25:16 prompts en détail donc c'est parfait on 25:18 va simplement copier les prompts on va 25:19 même pas attendre qu'il ait fini la 25:20 réponse pour retourner dans l'ovable ici 25:22 tu colles le prompt qui vient d'être 25:23 copié par chat GPT on le lance comme 25:25 ceci on attend maintenant quelques 25:26 secondes il est déjà en train de 25:28 travailler trer pendant ce temps on peut 25:29 retourner dans le chat GPT pour voir ce 25:30 qu'il nous a proposé voilà donc là il a 25:32 rajouté du détail pour les animations et 25:33 cetera c'est juste génial he vraiment 25:35 travailler avec une comme lovable qui 25:37 permet de créer des applications mais 25:38 également avoir chat GPT à côté en tant 25:41 qu'assistant tu peux évidemment utiliser 25:42 uniquement lovable mais je trouve que 25:44 ajouter chat GPT qui t'aide en plus sur 25:47 le côté c'est juste incroyable ça te 25:48 permet de gagner du temps d'être 25:50 beaucoup plus pertinent et performant il 25:51 a beaucoup de jargon de connaissance qui 25:53 permet d'être plus précis dans tes 25:54 demandes pour une autre ria comme l VB 25:56 derrière c'est vraiment pour ça que je 25:57 pense qu'aujourd'hui GPT c'est lié à la 25:59 plus complète peut-être même plus que 26:00 claud qui est quand même déjà pertinent 26:01 chat GPT te permet vraiment de tout 26:03 faire de t'aider pour pouvoir utiliser 26:05 plus facilement d'A triia il y a 26:06 évidemment le mode vocal qui est 26:07 d'ailleurs disponible sur la version web 26:09 maintenant il y a tellement de choses et 26:10 c'est pour ça que j'ai fait une 26:11 formation dédiée sur Chat GPT parce que 26:13 je suis convaincu que c'est l a la plus 26:14 importante à maîtriser si ça t'intéresse 26:16 le lien dans la description et de toute 26:18 façon si tu sais maîtriser chat GPT et 26:20 sa logique tu seras hyper à l'aise avec 26:21 l'ensemble des as du marché bon du coup 26:23 on en est où avec l'ovable maintenant 26:25 ben voilà il nous a rajouté la 26:26 fonctionnalité en quelques secondes on 26:27 peut cliquer ici pour démarrer le 26:29 minuteur voilà ça fonctionne on peut le 26:31 mettre en pause le réinitialiser bon 26:33 voilà là c'est une micro fonctionnalité 26:34 mais c'est ch GPT qui nous l'a suggéré 26:36 d'ailleurs on lui avait pas précisé 26:37 quelques détails au niveau du design on 26:39 va récupérer tout ça d'ailleurs comme 26:41 ceci et on va le mettre ici en le 26:43 collant très simplement on s'embête pas 26:45 donc on va ajouter une section dédiée au 26:47 minuteur sur le tableau de bord parce 26:48 que là il est intégré directement on va 26:49 améliorer l'UX voilà donc il a effectué 26:52 les modifications si on va directement 26:53 dans le dashboard ici on va voir ce 26:55 qu'on a on a donc le minuteur avec un 26:57 meilleur design on peut pe choisir une 26:58 habitude en l'occurrence on n a pas donc 27:00 on va en créer une nouvelle travailler 27:02 en deep work voilà donc on a la nouvelle 27:05 habitude on peut choisir une habitude 27:06 elle vient d'apparaître ici c'est génial 27:08 on lance le minutur et là on a notre 27:10 vrai dashboard pour pouvoir être hyper 27:11 efficace on peut avoir des suggestions 27:13 il a pour pouvoir nous aider à mettre en 27:14 place les bonnes habitudes donc par 27:16 exemple on va lui dire aide-moi à 27:18 progresser en deepwk tu lances ta 27:20 demande c'est connecté à la PI d'OP il 27:22 nous donne des conseils pour mettre en 27:23 place les méthodes de deepwork 27:25 l'habitude est lancé tu relances le 27:26 chrono et une fois que tu as effectu tu 27:28 es ton he handpwork tu coches ton 27:29 habitude le graphique se complète tu 27:31 peux suivre ici tous tes progrès que ce 27:33 soit à la journée ou sur 7 jours bon on 27:35 pourrait aller plus loin rajouter des 27:37 fonctionnalités connecter tout ça à un 27:39 agenda Google et même à la fin décider 27:40 de vendre cette application pourquoi pas 27:42 la publier sur l'App Store bon en tout 27:44 cas pour la création d'application je 27:45 t'ai montré tout le process dis-moi 27:46 aussi si tu veux que je fasse une 27:47 nouvelle vidéo sur le vable pour aller 27:49 plus loin ou alors pour développer une 27:51 toute autre application si tu as des 27:52 bonnes idées partage-les-moi et si c'est 27:54 des choses qui t'intéressent il y a 27:55 aussi bol.ne Qui est unea qui est très 27:57 performante pour créer des application 27:58 et j'ai fait une vidéo sur le sujet qui 27:59 s'affiche juste ici dans laquelle on 28:01 crée également une application en 28:02 quelques phrases si cette vidéo t'a plu 28:04 celle-ci aussi devrait t'intéresser