Je remplace un dev avec LOVABLE (Révélation) 😱

[Transcript language: fr] 0:00 répondre à une offre de développement 0:01 web ou de développeur full stack sans 0:04 écrire une seule ligne de code est-ce 0:06 que c'est possible on va prendre une 0:08 offre de projet de développement web on 0:12 va essayer de la coder avec ces nouveaux 0:14 outils de développement euh en prompt 0:18 euh sans écrire une seule ligne de code 0:21 et on va y aller de bout en bout alors 0:23 je sais pas où cette vidéo va nous 0:25 emmener vous allez le voir euh est-ce 0:27 que c'est possible ou est-ce que c'est 0:28 pas possible on va le dé ouvrir ensemble 0:30 pour cela je me suis mis sur coder et 0:33 j'ai pris une offre un peu au hasard 0:36 d'une de développement alors l'offre 0:39 elle est déjà clôturée mais c'était 0:41 juste pour pour pour notre vidéo 0:43 d'aujourd'hui alors il y a Fabien qui a 0:45 gagné le projet bravo Fabien mais nous 0:47 on va essayer de le 0:49 faire 0:51 sans forcément on naura pas toutes les 0:54 toutes les données du client mais on a 0:57 une description assez précise de ce que 0:59 veut le client euh dans son application 1:02 full stack et euh des fonctionnalités 1:06 qu'il veut alors ce qu'il demande ici 1:08 c'est le développement d'un site de mise 1:11 en relation pour prestation de 1:14 services donc un peu de une sorte de 1:17 Marketplace disons 1:19 euh et il souhaite être l'intermédiaire 1:22 pour la réservation et la facturation de 1:25 ces services là euh alors il y a un 1:28 système de paiement forcément euh les 1:31 utilisateurs pourront créer des profils 1:33 donc il y a un système 1:34 d'authentification à mettre en place il 1:36 y a une carte géographique sur lequel on 1:38 voit les prestataires et proximité on 1:40 peut réserver le 1:42 prestataire pour pour faire pour faire 1:45 la prestation en question donc pour ça 1:48 il y a différents outils aujourd'hui qui 1:51 permettent de créer des applications en 1:54 mode promt il y a certainement vous avez 1:57 entendu parler de Bolt euh mais aussi 2:00 lov B et lovable pour moi est beaucoup 2:03 plus approprié pour créer des 2:04 applications et des fonctionnalités de A 2:07 à Z il est beaucoup plus abouti alors en 2:11 tout cas au jour où on en parle 2:13 aujourd'hui parce que ça évolue tous les 2:16 jours il est beaucoup plus abouti il a 2:18 beaucoup plus de fonctionnalités et il 2:20 est il a été construit en ayant en tête 2:24 euh la partie back end et la partie base 2:28 de données où on va stocker les 2:31 informations et où on va créer les 2:34 fonctionnalités une par une alors ça 2:36 veut pas dire que Bolt ou les autres ne 2:38 le font pas c'est juste que l'ovall a 2:41 été conçu dans cette optique là et 2:44 forcément certainement il est beaucoup 2:46 plus apte à les faire et beaucoup plus 2:49 facilement en tout cas et donc le vobble 2:53 on va faire un tour d'abord de l'overall 2:55 euh comment il se présente donc c'est 2:57 une interface assez simple avec un un un 3:01 carré au milieu où on peut écrire notre 3:03 promte pour démarrer 3:05 euh il y a un il y a un accès gratuit 3:09 enfin il y a il y a un certain nombre de 3:11 promes que vous pouvez faire 3:13 gratuitement donc c'est ce qu'on va 3:14 faire aujourd'hui après on prendra un un 3:17 compte payant si s'il le faut et donc 3:20 pour commencer ce que je vais lui dire 3:22 c'est que je souhaite créer mon mon mon 3:25 projet là donc je vais lui créire un 3:28 Prom je souhaite 3:30 créer 3:32 un un site de mise en relation pour 3:35 prestation de servic euh le site se 3:38 place si je me trompe pas c'est ce qu'il 3:41 disait euh ce site se place à mettre en 3:45 relation des clients le site se place en 3:48 tant qu'intermédiaire donc on va copier 3:49 ça on va le mettre on va le donner euh à 3:53 lovable pour lui donner le contexte 3:56 ensuite on va lui demander de nous 3:57 développer une fonctionnalité alors euh 4:00 ces outilslà il ils réalis ils 4:04 interagissent mieux ou ils réalisent 4:07 mieux les tâches quand on leur donne les 4:08 tâches une par une c'est-àdire que si je 4:10 lui donne le décrit toute l'application 4:12 toutes les fonctionnalités dont j'ai 4:13 besoin il aura du mal euh il les fera 4:16 peut-être mais ils seront probablement 4:19 pas euh aboutis donc ce qu'on va faire 4:21 c'est qu'on va y aller fonctionnalité 4:22 par fonctionnalité et pour avoir testé 4:25 le système euh je pense que le meilleur 4:28 framework 4:30 au jour d'aujourd'hui pour justement 4:32 développer une application dans ces 4:34 outils là et notamment dans loveroball 4:36 c'est le framework où on commence par 4:38 mettre en place la landing page donc la 4:40 page d'accueil que ce soit d'un site de 4:43 mise en relation d'une application peu 4:45 importe donc la page 4:47 d'accueil ensuite mettre en place 4:50 l'authentification donc comment on se 4:52 connecte on crée un 4:54 compte et on accède à notre 4:57 interface et puis euh mettre en place le 5:01 paiement euh donc tout ce qui est 5:03 paiement stripe et cetera et on finit 5:06 par les fonctionnalités du produit donc 5:09 euh dans ce sens-là l'application moi 5:12 j'ai remarqué dans les tests que j'ai 5:14 fait dessus elle interagit mieux et et 5:16 elle réalise mieux les tâches ça veut 5:18 pas dire qu'elle trouvera qu'elle nous 5:19 fera pas de bug ou qu'elle fera pas des 5:21 fonctionnalités qui qu' qu'elle devra 5:23 reprendre c'est veut dire force euh 5:26 juste qu'elle qu'elle interagissera 5:28 mieux euh au début 5:31 donc ce qu'on va lui dire donc pour 5:35 commencer peux-tu créer une landing 5:40 page moderne pour ce 5:45 site 5:46 l'ensemble du texte de 5:50 l'interface devra 5:53 être en 5:57 français je pense qu'on est n'est pas 6:00 trop mal on peut le lancer donc ce qu'on 6:03 va faire c'est qu'on va faire un signup 6:05 le compte est gratuit alors pour ce 6:08 connecter il faut soit utiliser Google 6:11 soit utiliser 6:12 GitHub GitHub il le mieux vu qu'on va 6:15 développer une application l'idéal c'est 6:18 de stocker le code qu'on va générer dans 6:20 GitHub donc gitub c'est quoi c'est c'est 6:23 un répertoire où on place notre code que 6:26 ce soit du code public ou que ce soit du 6:28 code privé qu'on veut garder pour nous 6:31 donc ce qu'on va faire c'est qu'on va 6:32 aller sur GitHub c'est assez simple 6:35 GitHub euh très très simple il faut 6:39 créer un compte signup et donc là vous 6:42 indiquez votre 6:49 email un mot de passe et un nom 6:52 d'utilisateur alors c'est le nom qui 6:54 apparaîtra dans votre code 6:58 euh je vais essayer croissance si ça 7:03 existe 7:06 croissance il 7:09 a ça existe 7:12 là je me connecte et donc je suis dans 7:14 GitHub je vais pouvoir créer des 7:17 répertoires ce qu'on appelle des 7:19 repository on peut déposer notre code 7:22 donc là j'ai mon compte GitHub je vais 7:23 revenir sur lable et je vais faire un 7:26 signup avec github 7:30 euh et donc 7:34 là je vais lui dire que je 7:39 l'autorise et bim j'ai mon compte qui 7:43 est créé et donc là je peux lancer mon 7:47 promt alors vous voyez l'interface de 7:50 lovable elle est divisée en deux parties 7:53 il y a une partie ici sur la gosse ou là 7:56 sur la gauche ou là je vais pouvoir 7:58 chatter avec loverable donc là comme 8:00 vous voyez moi je lui ai envoyé un promt 8:03 il m'a répondu il m'a répondu en 8:05 français d'ailleurs ce qui est super 8:08 euh et c'est dans cette partie-là que je 8:11 vais pouvoir interagir avec lui juste à 8:15 côté de chat ici vous voyez il y a un 8:18 petit onglet history et en fait à chaque 8:21 fois qu'il va me créer une nouvelle 8:23 version on reviendra plus tard dessus 8:25 mais à chaque fois que je vais lui 8:27 demander de faire des modifications ou 8:28 de rajouter des fonctionnalité il va 8:31 faire une nouvelle version ici et donc 8:33 c'est super pratique si en faisant une 8:37 version il m'a 8:40 euh il m'a défait une fonction où il a 8:43 cassé quelque chose que je veux revenir 8:45 en arrière j'ai juste à cliquer sur la 8:47 version qui m'intéresse et ça revient en 8:50 arrière vers la version qui m'intéresse 8:52 donc c'est super pratique sur 8:55 lable là il est en train de créer le 8:58 code de la la landing 9:01 page on va le laisser terminer il a 9:04 presque 9:06 terminé 9:08 waouh il a terminé il a créé landing 9:12 page avec les 9:14 boutons sans que je lui donne tout ce 9:16 détail là donc il a mis les avantages de 9:19 la plateforme comment ça marche une 9:22 tarification il a même mis une 9:25 tarification transparente les menus de 9:27 bas de page donc en fait il a créer déjà 9:30 un squelette complet euh de mon site euh 9:35 ce qui est de de ma page d'accueil ce 9:38 qui est ce qui est excellent 9:43 euh je pense que il y a pas grandchose à 9:46 revoir sur cette page d'accueil en tout 9:48 cas pour une première version où on va 9:52 répondre à une Appel d'offre à une offre 9:55 comme ça qu'on a trouvé sur coder je 9:58 pense qu'elle est qu'elle est super en 10:00 lui rajoutant une ou deux 10:01 fonctionnalités euh on peut rapidement 10:05 euh faire une petite vidéo de 2 minutes 10:09 sur l'OM ou autre où on présente ce 10:12 qu'on a fait on envoie au client le lien 10:14 vers ce qu'on a fait je vous montrerai 10:16 comment on le déploie tout à l'heure et 10:18 cetera et ça nous met déjà en tout haut 10:23 de la liste des gens qui vont proposer 10:25 des offres et je pense que c'est la 10:26 meilleure façon pour répondre à un offre 10:28 même si si vous êtes pas un développeur 10:31 web full stack la deuxième étape après 10:34 la landing page c'est l'authentification 10:35 et pour pouvoir commencer à traiter 10:38 l'authentification il faut qu'on le 10:39 connecte à une base de données alors la 10:41 base de données qui est déjà préintégré 10:46 disons avec le vbble elle s'appelle 10:48 supabase et en fait 10:51 supabase c'est un peu plus qu'une base 10:54 de données même et en fait supabase vous 10:57 donne toutes les composants qui vont 11:00 vous permettre de créer votre votre 11:04 application donc la base de données 11:07 l'authentification vous allez pouvoir 11:09 aussi mettre dedans si vous en avez 11:12 besoin un stockage vectoriel pour votre 11:16 pour votre système de prompting si vous 11:18 créez un système de prompting bref va 11:20 créer un compte sur supabase et ensuite 11:23 on va demander à loverob de se connecter 11:25 avec ce compte là et de commencer à 11:27 créer la base de données derrire donc je 11:30 vais faire starture project toujours 11:32 avec mon GitHub c'est le mieux 11:37 hop en fait vu que c'est tous des outils 11:40 de développement GitHub et vraiment la 11:42 référence là-dedans pour pour lier tout 11:45 ce ce petit monde ok dès qu'on arrive 11:48 sur dès qu'on se connecte sur supabase 11:50 qu'on a créé notre compte il nous 11:51 demande de créer une 11:53 organisation il lui donne déjà un nom on 11:57 va prendre le plan gratuit ça nous 11:58 suffit et on va faire créer une 12:00 organisation alors quand on est en 12:02 compte gratuit sur superpabase je crois 12:04 que vous pouvez créer deux bases 12:07 gratuitement et ensuite il faudra payer 12:09 pour les prochaines mais avec une seule 12:12 appli pour l'instant ça nous suffit 12:14 largement ok donc maintenant 12:16 l'organisation a été créée dans 12:18 superabase on va créer un nouveau projet 12:21 on va lui donner un nom donc on va 12:24 l'appeler prestataire par exemple 12:33 Marketplace disons 12:36 donné on va choisir où est-ce que je 12:38 veux stocker ma base de données à parier 12:40 c'est parfait et je vais lancer la 12:43 création de la base de données et elle 12:44 va prendre quelques 12:47 minutes maintenant le temps que supabase 12:50 termine de de créer le projet comme vous 12:51 voyez il est toujours en cours on va 12:54 aller sur 12:56 l'interface on va lui dire de rajouter 12:58 une 13:01 une comment dire ça une une barre de 13:04 navigation au 13:06 haut ajoute une barre de 13:13 navigation visible sur l'ensemble du 13:23 site on va s'arrêter 13:27 là excellent il a rajouté une barre de 13:30 de de une barre de navigation il a même 13:34 nommé mon projet il a mis quelques 13:36 boutons ici et puis il a mis connexion 13:39 et inscription donc en fait j'ai même 13:42 pas eu besoin de lui dire quoi que ce 13:43 soit il s'est débrouillé tout seul euh 13:46 on va revenir sur notre 13:47 base soup base on voit je vois que ces 13:51 deux indicateurs sont ouverts security 13:53 issues project status les deux sont 13:56 ouverts donc c'est tout bon on peut 13:58 maintenant commencer à connecter notre 14:02 base 14:03 dessus en fait je clique sur ce bouton 14:06 là je vais donner l'accès à loverball à 14:11 mon 14:18 organisation automatiquement il voit mon 14:21 organisation et il voit toutes les bases 14:24 qui sont dans mon organisation alors 14:25 dans mon cas j'en ai qu'une 14:27 seule et donc je sélectionne celle-là 14:31 euh et là je suis en train de lui dire 14:34 oui connecte-moi cette base à mon projet 14:37 que je suis en train de créer là me dit 14:39 que ma base a été connectée euh que 14:44 c'est tout bon et qu'on peut passer à la 14:46 suite donc la suite comme je vous ai dit 14:48 landing page 14:51 authentification paiement et ensuite le 14:55 produit donc on va passer à la partie 14:57 authentification est-ce qu'on va lui 14:59 dire peux-tu mettre en 15:01 place un système 15:06 d'authentification euh 15:09 [Musique] 15:12 ouais c'est tout c'est-à-dire que 15:15 pouvoir se connecter créer un compte 15:17 s'inscrire et cetera on va pas aller 15:20 plus loin dans le Prom on va le laisser 15:21 faire et donc là ce qu'il fait c'est que 15:24 il me dit je vais faire un système de 15:27 d'tique je vais créer un système 15:29 d'authentification complet avec supabase 15:31 avant de commencer voilà les tables que 15:33 je vais créer donc en fait il va 15:35 commencer à créer des tables dans 15:37 supabase dans la base de données 15:38 supabase pour stocker les informations 15:41 de connexion des utilisateurs et cetera 15:45 donc il me propose un 15:47 script qui est qui est là et il me dit 15:50 est-ce que ça te va et ben ça me va je 15:53 vais te laisser 15:55 faire donc là il est en train d' iqu la 15:59 partie migration il dit la migration a 16:03 été appliquée avec succès et maintenant 16:05 il dit je peux maintenant commencer à 16:08 créer le système 16:09 d'authentification en fait si je reviens 16:11 sur ma base spabase on a plusieurs 16:16 onglets ici et on a notamment la partie 16:19 authentification et en fait les 16:21 utilisateurs ils vont apparaître sur 16:23 cette partie authentification du moment 16:25 où on 16:26 créera nos premiers utilis Atur la base 16:30 de données elle elle apparaîtra ici et 16:32 on pourra voir notamment les vous voyez 16:36 donc il y a déjà une base profil avec 16:39 premier first name last name 16:42 donc prénom nom et rôle de la personne 16:45 et un identifiant et peu à peu lovble va 16:49 créer les tables qu'il faut il va me 16:51 proposer il va créer les tables qu'il 16:53 faut donc 16:55 là il a fait la migration il a créé le 17:00 système d'authentification et pendant 17:03 qu'il était en train de le créer il a vu 17:05 qu' il a vu qu'il y avait une erreur 17:08 alors ça c'est des choses qui arrivent 17:10 euh et donc en fait il faut les traiter 17:13 donc du coup euh assez simple sur lovble 17:18 dès qu'il y a une 17:19 erreur vous cliquez sur try to fixite et 17:23 en fait il va tout seul essayer de 17:25 comprendre l'erreur et il va essayer de 17:29 la 17:31 corriger donc là je comprends l'erreur 17:33 il y a des références à vous avez pas 17:36 besoin de comprendre d'ailleurs il y a 17:38 des références à à un composant qui sont 17:41 pas qui sont pas partout donc en fait il 17:43 est en train de reprendre son système 17:45 d'authentification pour que ça 17:53 fonctionne ok donc là il nous dit qu'il 17:55 a corrigé les erreurs euh bah ce qu'on 17:58 va faire c'est qu'on va aller h se 18:01 connecter donc en fait il a 18:03 créé carrément une nouvelle page 18:06 d'auutentification qui va nous permettre 18:08 de s'authentifier avec email et 18:10 password et donc là je vais rentrer mon 18:15 email et on va tester 18:24 ça on va rentrer un mot de passe 18:29 et on va voir ce que ça donne alors là 18:32 il nous donne une 18:33 erreur on peut voir l'erreur et on peut 18:36 lui demander d'essayer de la corriger 18:39 pourquoi il a cette erreur 18:53 là 18:55 ah en fait c'est une erreur parce que 18:57 j'essayais pas de créer un compte 18:59 j'essay de me connecter alors j'avais 19:01 pas de compte donc il y a une il y a 19:03 superabase qui a renvoyé une erreur 19:05 disant attention c'est un utilisateur 19:07 qui a pas de compte qui Essie de se 19:10 connecter donc c'était pas une erreur 19:12 qui était gérée par leble par défaut 19:14 donc ce qu'il a fait maintenant c'est 19:16 que il a amélioré son code et il a 19:20 rajouté un message d'erreur quand 19:22 quelqu'un essaie de se connecter et 19:23 qu'il a pas de 19:25 compte on va réessayer 19:39 hop il y a non encore une erreur on va 19:42 lui renvoyer la nouvelle erreur qu'on a 19:44 eu 19:47 ok donc là il me fait une recommandation 19:49 mais moi je veux pas sa recommandation 19:50 je veux que 19:52 peux-tu gérer l'erreur pour 19:56 afficher un message 20:00 d'erreur lorsque un utilisateur 20:05 essae de se 20:07 conncter 20:10 avec un compte inexistant 20:15 ou avec un 20:18 faux euh 20:21 login password 20:25 ok donc on est arrivé à notre limite de 20:27 pr euh en mode gratuit donc ce qu'on va 20:31 faire c'est qu'on va upgrader pour le 20:33 compte des 20 dollars et on va voir et 20:36 on va continuer 20:38 ok donc là j'ai fait le paiement 20:40 euh on continue la construction et en 20:44 fait notre projet il est là alors point 20:47 important que j'ai oublié de vous 20:49 mentionner 20:51 ici mettez votre projet en mode private 20:56 c'est important parce que si vous le 20:57 mettez en mode public 20:59 votre projet va être visible pour tous 21:02 les utilisateurs de lovable qui ont des 21:05 comptes et donc si vous commencez à 21:07 mettre des clés d'API type clé API 21:10 stripe ou clé API peu importe qu quelle 21:13 qu'elle soit ils vont commencer à être 21:16 visibl possible enfin les gens qui pour 21:19 ont accès à loverball vont pouvoir les 21:21 voir donc mettez votre projet en mode 21:23 privé c'est super 21:25 important pour éviter tout souci euh ok 21:30 maintenant on va revenir sur Connexion 21:32 on va réessayer on va voir ce que ça 21:34 donne 21:47 ok donc il y a une erreur maintenant qui 21:48 s'affiche email au mot de passe 21:50 incorrect c'est 21:52 excellent donc il gère maintenant tout 21:55 ce qui est 21:57 email et mot de pass 21:59 qui sont pas bons maintenant on va aller 22:02 sur l'inscription donc normalement ça va 22:04 créer un 22:10 compte il reste sur chargement si je 22:13 vais dans superbas ici je vais voir s'il 22:16 a créé quelque 22:17 chose il a créé un 22:24 profil et ici il est revenu sur la page 22:27 connexion donc en fait 22:30 ok donc le système de connexion est a 22:33 priori en place 22:37 ok donc là il me 22:39 dit tu as essayé de créer un compte 22:42 c'est bien on l'a bien reçu par contre 22:44 tu as pas confirmer ton email avant de 22:47 te connecter donc en fait je vais aller 22:48 voir effectivement j'ai un truc qui 22:52 s'appelle confirme your signup il est là 22:56 où je peux confirmer 22:58 la création de mon 23:01 compte donc si je clique dessus alors le 23:04 lien il emmène sur un lien qui n'existe 23:07 pas mais mon compte est quand même 23:08 confirmé pourquoi parce qu'on est en 23:10 mode 23:12 supabase développement on n pas en mode 23:14 prod 23:16 production c'est pour cela que ça qu'il 23:18 affiche une page en local host point 23:21 important vous pouvez 23:24 désactiver l'authentification par email 23:27 ça c'est dans provider donc vous voyez 23:30 que loverable par défaut quand je crée 23:33 un compte il m'a activé la validation de 23:36 l'email donc de confirmer que l'email 23:39 qui a été rentré est bon par la 23:41 réception d'un email et je peux euh et 23:46 je peux le désactiver ici pour mes tests 23:49 donc là je l'ai laissé actif et on a vu 23:51 que ça confirmer le compte tpabase et 23:54 lovable forcément derrière propose la 23:56 connexion par email mais mais il propose 23:59 aussi les connexions via Google les 24:02 connexions avec Spotify figma peu 24:04 importe enfin il y a plusieurs modes 24:07 d'authentification que vous pouvez 24:09 rajouter et laisser superp base le gérer 24:13 pour vous demander à loverb de le 24:15 connecter et supabase gérera tout ce 24:18 qu'il faut derrière quand je vais dans 24:19 les tables éditor dans les profils je 24:22 vois que j'ai un rôle client donc il m'a 24:25 créé comme étant client par défaut 24:29 je lui ai rien demandé mais il a rajouté 24:31 cette notion de client et de prestataire 24:34 donc on verra après si comment comment 24:36 gère ça mais en tout cas il m'a mis en 24:39 place tout ce qui est euh système 24:41 d'authentification euh et là on peut 24:44 passer à l'étape d'après étape d'après 24:46 ça va être le paiement sauf que le 24:47 paiement dans ce cas particulier euh je 24:51 va pas commencer à créer des paiements 24:53 si j'ai pas de prestataire euh parce que 24:56 tu vas payer quoi tu vas payer euh le 24:58 prestataire donc il faut quelques cas de 25:01 prestataire dont euh qu'on ait une base 25:04 de prestataire et qu'ensuite on met en 25:07 place les paiements de ces prestataires 25:09 là donc qu'on va lui dire on va revenir 25:12 sur notre besoin client euh donc mettre 25:16 en place le système de paiement on va 25:18 voir ce système de 25:21 paiement pouvoir créer des profils donc 25:23 ça on l'a fait pour en tout cas la 25:25 partie 25:26 authentification mettre remplace une 25:28 carte géographique sur laquelle le 25:30 client voit le les prestataires au 25:32 proximité donc ça on va attaquer cette 25:35 partie là on va voir comment le vbble se 25:46 débrouille ok donc là je lui demande de 25:49 créer la base des prestataires et de 25:52 créer dedans quelques prestataires pour 25:54 qu'on puisse euh tester ok donc il me 25:57 propose une base de prestataire 26:00 jardinage bricolage ménage cours 26:02 informatique autre euh table des 26:05 prestataires euh il qu'est-ce qu'il a 26:08 mis dedans il a mis une catégorie donc 26:10 c'est les catégories de service qui sont 26:11 là une description un nom de business 26:15 euh une cité un code postal euh une une 26:20 note qu'est-ce qu'il a mis donc là il a 26:23 il gère toute la 26:25 partie toute la partie sécurité ce qui 26:27 est ce qui est important donc en fait en 26:30 gros il 26:32 dit les utilisateurs peuvent voir tous 26:35 les prestataires dans cette police 26:37 là politique pour permettre au 26:39 prestataires de modifier leur propre 26:41 information donc un prestataire peut 26:43 modifier ses propres 26:44 information un prestataire peut 26:47 supprimer son profil insertion de 26:50 quelques prestataires hop il les 26:53 insère donc ce qu'on va faire c'est 26:56 qu'on va lui dire 26:58 appliquer ces modifications là al là ce 27:01 qui me dit c'est que maintenant qu'on a 27:03 créé ça on peut procéder dans 27:06 l'implémentation 27:07 de de la partie 27:10 visible pour afficher 27:13 et et gérer les 27:16 providers je vais lui 27:18 dire donc là je va pas parler encore de 27:22 la de la carte de la map où je veux 27:26 afficher tous mes prestataires on va 27:27 voir comment comment il avance et on va 27:31 le 27:35 guider donc là il m'a dit qu'il a 27:38 rajouté une section ici mais je vois 27:39 qu'elle est vide donc probablement il a 27:43 pas connecté ça comme il faut à la base 27:45 de données donc là il me dit puisque 27:47 nous voulons que les prestataires soient 27:48 visibles sur la landing page mais même 27:51 pour les utilisateurs non connecté nous 27:53 d'ouvriant modifier la politique ok donc 27:56 parfait moi je vois que je veux que tout 27:58 le monde voit les prestataires j'ai pas 27:59 forcément besoin que ça soit que les 28:01 gens qui sont connectés qui ont des 28:02 comptes excellent vous voyez donc il a 28:05 rajouté euh les prestataires avec leur 28:09 adresse leur code postal une petite 28:12 description une note avec même l'étoile 28:15 à côté le le tarif ici enfin en fait il 28:18 a tout fait pour que ça s'appiche bien 28:22 comme il faut sur ma page d'accueil euh 28:25 tout seul sans que je lui demande rien 28:27 du tout euh c'est vraiment excellent il 28:30 y a deux choses que j'aimerais faire la 28:33 première chose c'est que comme vous 28:34 voyez ici il a créé les prestataires 28:37 mais il les a pas lié à un compte euh 28:42 déjà utilisateur c'estàd que je je un 28:46 prestataire doit avoir un compte sur le 28:48 site web donc il doit être authentifié 28:51 ici dans la page des profils et donc il 28:55 doit avoir un lien entre euh le 28:58 prestataire et le profil et ça il l'a 29:01 pas fait donc ça je vais lui demander de 29:02 le 29:09 faire on va lui dire ok applique-moi ça 29:14 ah il a une 29:17 erreur on va lui demander de corriger 29:20 l'erreur et en fait l'erreur si j'essaie 29:22 de la voir il lui dit que il a pas 29:24 réussi le problème vient de 29:26 l'utilisateur de Windows 29:28 functions round number dans la 29:31 clauseware ce qui n'a pas autorisé en 29:33 SQL modifi la requête donc en fait il a 29:36 modifié la requête lui-même je vais lui 29:39 dire vas-y applique la la requête 29:41 modifiée si je reviens sur ma base 29:43 superbase je vois que mes deux autres 29:46 utilisateurs qu'il a proposé de créer 29:48 sont là donc Marie Martin et et Jean 29:51 Dupon et je vois que il y a la nouvelle 29:54 table qui s'appelle provider avec tous 29:57 les ser service donc teex solution clean 30:00 prof Express Express jardin vert bricoot 30:04 pro avec la catégorie de de services 30:07 qu'il présente et pour chacun j'ai un 30:10 utilisateur qui lui est lié et un 30:13 utilisateur peut avoir plusieurs 30:15 services donc je vois ici que par 30:17 exemple lui là il a trois services le 30:21 celui qui se termine par 30:23 66d il a il peut il a un service de 30:26 ménage un service de particulier et un 30:29 service de d'expert en entretien de 30:31 jardin et espace donc en fait loverble 30:33 m'a créé ma base et il a créé il a 30:36 rajouté des données de test dedans tout 30:38 seul alors il a eu fait quelques erreurs 30:41 donc je l'ai guidé pour les réparer mais 30:42 il s'est débrouillé comme un comme un 30:44 chef 30:47 derrière on va faire cette parti-là 30:49 cartographie on va voir comment il se 30:51 débrouille sur la partie cartographie 30:53 c'est pas forcément quelque chose de 30:54 simple donc là il me propose de utiliser 30:56 ma box avant de procéder au code nous 30:59 devons obtenir votre token public map 31:02 box l'ajouter comme secret dans subbase 31:05 euh et ben en fait on va aller sur 31:09 mapbox on va voir comment ça fonctionne 31:11 mapbox en fait dès que vous créez un 31:14 compte alors vous avez besoin de rentrer 31:17 euh votre carte de paiement même si euh 31:22 il y a euh un taux d'utilisation super 31:25 important ici vous voyez que 50 31:28 chargement gratuit 50000 chargement 31:30 gratuit 31:32 pardon il y a mon token public qui est 31:35 là donc dès que vous vous connectez il 31:37 est affiché sur la droite donc je vais 31:40 le copier et euh je vais le passer à 31:44 lovable 31:46 ok ok donc là il a pas aimé que je lui 31:49 colle comme ça il préfère que je lui 31:51 donne comme ça euh comme euh pour qu'il 31:55 soit 31:55 stocké de façon 31:58 sécuriser ok maintenant ma carte 32:01 s'affiche bien je peux zoomer 32:05 dézoomer parfois alors parfois quand 32:07 vous avez une erreur récurrente il 32:09 arrive qu'il rentre dans une boucle de 32:11 correction c'estàd que vous il essae la 32:13 première fois il arrive pas il deuxè une 32:15 deuxème trè fois parfois j'ai remarqué 32:18 il y a des erreurs qui s'affichent vous 32:20 devez juste rafraîchir l'écran tout 32:23 l'écran d'ailleurs et elle s'affiche 32:25 plus je crois je pense que ça doit être 32:27 une sorte de ch qui qui est local et 32:31 donc quand vous faites un refresh global 32:33 de la 32:34 page l'erreur est est est corrigé quoi 32:38 donc là qu'est-ce qu'il me dit 32:41 euh juste avant qu'il corrige l'erreur 32:44 il m'a dit j'ai modifié le code pour 32:46 créer une ge fonction qui récupère le 32:47 token mettre à jour le composant ajouter 32:50 une meilleure gestion d'erreur donc ça 32:51 c'était aussi une erreur euh là il m'a 32:55 dit j'ai créé une carte interactive 32:56 affiche une carte centrée sur Paris 32:58 montre des marqueurs pour chaque 33:00 prestateur alors je vois pas de marqueur 33:04 euh je vais lui dire je ne vois aucun 33:08 marqueur dans la 33:11 carte voilà donc il dit que il essaie 33:15 d'afficher les marqueurs avant que la 33:17 carte soit totalement chargée donc il va 33:21 corriger ça 33:23 ok donc vous comme vous voyez il il 33:25 examine tout seul les problèmes qu'il 33:29 rencontrre il essaie de corriger donc en 33:31 fait on n'est plus vraiment développeur 33:34 avec ces outilslà on est plus ce que 33:37 j'appelle product manager alors qu'on 33:39 définit les fonctionnalités et on les 33:42 décrit le mieux possible pour que 33:45 l'intelligence artificielle derrière 33:48 puisse la développer comme nous on on on 33:51 on le pense et ensuite on le guide pour 33:55 essayer de corriger s'il a des des 33:57 problèmes donc en fait c'est plus un 33:59 boulot de product manager qu'un boulot 34:01 de de développeur finalement 34:04 ok donc là j'essay j'ai essayé trois 34:07 quatre fois il y arrive toujours pas à 34:09 résoudre le problème de la carte donc ce 34:11 que je vais faire c'est que je vais 34:12 revenir en arrière 34:14 euh je vais revenir en arrière juste 34:18 ici non c'est celle d'avant je 34:22 pense à un moment on avait la carte qui 34:26 fonctionnait 34:34 voilà on avait la carte qui fonctionnait 34:36 ici voilà donc on va se 34:40 remettre dans cette version là et on va 34:44 lui dire 34:47 ok 34:52 euh récupère cette version là donc tous 34:56 ces là hop on revient en arrière parce 35:01 qu'on avait une version qui fonctionnait 35:03 bien je reviens tout en arrière et 35:05 d'ailleurs je vois que même 35:08 euh j'ai vu un bouton en fait il y A TEX 35:12 solution qui s'affiche ici alors c'est 35:14 Bordeaux c'est pas Paris mais il y a 35:16 quelque chose qui s'affiche donc on va 35:18 repartir de cette version là on va lui 35:21 dire 35:33 ok donc là il m'a dit je vais ajouter un 35:35 champ dans la base 35:39 avec avec 35:42 l'adresse je va lu dire 35:44 vas-y alors les marqueurs s'affiche j'ai 35:49 Tex 35:51 solution j'ai jardin vert alors jardin 35:54 vert il a mis à 15 ru Rivoli 35:58 tech solution il a mis à 25 ru des 36:01 archives parce que c'est ouais 36:03 exactement et si je regarde bien est-ce 36:06 que c'est la bonne adresse ouais c'est 36:08 rue 36:09 Rivoli exactement et là c'est rue des 36:12 Archives donc c'est bien positionné euh 36:28 notre service d'affichage sur carte est 36:32 là et franchement avec ce qu'on a fait 36:35 là 36:36 euh il y a moyen de décrocher le projet 36:40 pour et c'est un projet d'ailleurs on en 36:42 a pas parlé mais c'est un 36:44 projet il est le le le client a dit que 36:48 il y a un budget indicatif entre 1000 et 36:50 10000 moi je suis certain que Fabien l'a 36:54 proposé 36:54 Z disons entre 4 et et et 7000 € 4 et 37:01 8000 37:01 € je pense que pour si vous proposer un 37:06 tarif à 7005 8005 et que vous faites une 37:10 petite vidéo et vous envoyez le lien 37:12 dans sur ce que vous avez fait là vous 37:14 décrochez le projet vous serez le 37:16 premier sur la liste vous avez déjà 37:18 compris ce qu'il veut vous avez déjà 37:20 implémenté quelques truc qui 37:21 correspondent à son besoin c'est 37:24 largement suffisant pour pour gagner le 37:26 projet 37:28 euh donc maintenant on a notre carte on 37:31 a notre landing page on a notre mode de 37:34 connexion euh maintenant ce qu'on va lui 37:37 demander c'est 38:14 ok donc là il m'a dit j'ai fait 38:16 euh chaque carte maintenant applicable 38:20 et dirige vers la page de détail du 38:22 correspondant dans une prochaine étape 38:23 nous pourrons implémenter la 38:24 fonctionnalité de paiement avec stripe 38:26 il est très gentil il m'indique ce que 38:28 je dois faire juste après donc si je 38:30 clique sur mon prestataire ici alors je 38:32 vois pas de bouton alors les euh par 38:36 contre les euh les les euh comment on 38:40 appelle ça les cartes ici sont 38:41 cliquables donc si je clique sur une 38:42 carte waouh waouh 38:45 euh donc j'ai euh jardin vert euh avec 38:49 une carte où je peux sélectionner une 38:52 date je peux sélectionner un nombre 38:54 d'heure le nombre d'heure est déjà à 38:56 deux si je augmente il y a le tarif qui 38:58 augmente c'est c'est waouh c'est 39:02 excellent en fait il j'ai même pas eu 39:05 besoin de lui donner plus de détails que 39:08 ça il a déjà compris le 39:11 besoin moi j'aimerais bien que lorsque 39:14 la personne voit ça 39:18 h que le bouton réservé maintenant 39:21 emmène la personne vers la connexion et 39:25 ensuite elle pourra faire le 39:28 paiement donc ce qu'on va lui dire c'est 39:31 que 39:33 [Musique] 39:47 euh ok donc là il veut mettre en place 39:50 stripe eu nous devons d'abord configurer 39:52 la clé secret stripe dans les secrets de 39:55 superbase je vais vous donner je vais 39:57 demander de l'ajouter la r une fois que 40:00 vous aurez ajouté la clé secret stripe 40:03 je pourrais implémenter la redirection 40:05 la création d'une session et cetera donc 40:07 pour pour récupérer votre clé secrète 40:11 sur stripe il y a la clé des la page des 40:15 clés API stripe qui est juste là vous 40:18 cliquez 40:19 dessus en fait quand vous êtes dans 40:22 votre compte 40:23 stripe dans cette page 40:25 là vous faites créer une clé 40:29 secrète créer votre propre 40:36 intégration donc en fait on va 40:38 l'utiliser dans une application tierre 40:40 et vous cliquez sur Créer une clé 40:43 secrète et ça va créer directement une 40:45 clé vous allez la copier et la et la 40:48 passer sur le ok donc là j'ai récupéré 40:51 ma clé secrète j'ai cliqué sur apiy hop 40:55 j'ai la submité et donc ce qu'on va 40:58 faire c'est qu'on va tester 41:04 ça je aller sur teex solution je veux 41:07 réserver 2 heures de teex solution ça va 41:09 être pour le 31 41:14 janvier réserver maintenant 41:21 ok donc 41:23 là j'étais je me suis connecté il 41:27 m'emmène sur la page 41:30 stripe la page stripe elle charge sans 41:34 arrêt et ben on va lui faire une capture 41:37 d'écran et on va voir ce qu'il peut 41:40 faire avec ça 41:54 hop là je vais envoyer une capture écan 41:57 de ce que je vois je dis ma P stripe ne 41:59 s'affiche pas proprement et je vais voir 42:01 s'il va réussir à gérer ça al je vais 42:07 aussi 42:08 tester dans une page séparée c'est 42:12 peut-être aussi le fait queon est qu'on 42:14 soit dans lovable 42:17 lui-même qui fait que 42:28 yes stripe fonctionne il m'a emmené sur 42:31 la page stripe forcément de mon compte à 42:33 moi avec une réservation de service il 42:38 m'a même mis la date le nombre d'heures 42:40 que je veux réserver 150 € et je peux 42:44 rentrer maises mon paiement donc en fait 42:48 c'est excellent alors parfois quand 42:49 c'est comme ça que c'est des service 42:52 extern si potentiellement stripe aussi 42:56 je 42:57 expérimenter pendant mes 43:00 tests la page va continuer à s'afficher 43:03 sans rien faire donc allez cliquez sur 43:05 ce bouton là ça va vous sortir de 43:07 loverball et vous afficher une page 43:09 complète avec votre site et là il y a il 43:13 y a des chances que ça que ça fonctionne 43:15 bien le dernier point qu'on voulait 43:17 corriger 43:18 justement c'est de dire euh 43:33 ok ici il nous affiche une note assez 43:35 intéressante il nous dit le service 43:38 service details dépasse maintenant les 43:40 195 lignes recommandées nous devriant 43:43 envisager de le refactoriser en 43:45 composant plus petit dans une prochaine 43:47 itération donc en fait il regarde ce qui 43:49 est intéressant chez lovble c'est qu'il 43:51 regarde son code et du moment où il voit 43:53 que le code commence à être trop grand 43:55 difficile à maintenir il te propose de 43:58 le refactoriser de l'améliorer pour toi 44:00 pour que ça soit plus condensé et euh 44:03 plus lisible ok donc au bout de 44:05 plusieurs tentatives j'ai réussi à le 44:07 faire fonctionner en fait euh j'ai 44:10 remarqué qu'à un certain moment euh il 44:12 m'afficher ce message d'erreur celui-là 44:15 dès que je me connectais il m'affichait 44:17 que veuillez vous connecter pour 44:18 réserver ce service alors j'étais déjà 44:20 connecté donc je lui ai envoyé et j'ai 44:25 il avait des erreurs donc du coup je 44:27 j'ai continué à l'aider en en lui 44:29 envoyant les erreurs euh et puis la page 44:33 de service ne s'affichait plus donc je 44:35 lui disais de revoir ça et cetera donc 44:38 on est arrivé à un résultat qui est pas 44:40 trop mal on va reprendre le service et 44:42 là il m'affiche un petit message en haut 44:44 donc une petite bande où il me dit 44:46 connexion requise veuillez vous 44:47 connecter pour réserver ce service donc 44:49 même si je mets une date et un nombre 44:50 d'heure je peux pas le réserver je 44:53 clique sur Connecter je saisis mon 44:55 adresse mail mon mot de 44:58 passe je me connecte il me remet sur la 45:01 page et là je mets ma date mon nombre 45:04 d'heure je clique sur Réserver 45:06 maintenant et il m'emmène sur stripe et 45:08 je peux faire mon paiement comme vous 45:10 l'avez vu c'est c'est c'est pas c'est 45:13 pas je je je je je mets un prompt et il 45:15 me fait tout il faut l'accompagner il 45:18 faut l'aider en corrigeant les erreurs 45:19 et cetera mais c'est a un un gain de 45:22 temps considérable et pour quelqu'un qui 45:25 n'est pas expert en développement c'est 45:27 ça change la vie c'est vraiment on a 45:30 fait un bon dans le futur avec ce ce 45:33 type d'outil et et le veball en 45:37 particulier donc là vous avez votre 45:40 produit disons que vous avez terminé les 45:42 quelques fonctionnalité qui vous reste à 45:44 faire je pense que d'ici allez 1 heure 45:48 vous aurez terminé ce qui resté à faire 45:50 on a la carte il restait à peut-être 45:54 rajouter une page où on peut modifier 45:56 son 45:58 les détails de son service et cetera 46:00 pour la personne qui s'inscrit et puis 46:03 une page où on détail tous les toutes 46:06 les réservations que j'ai déjà 46:08 faites chez des 46:10 prestataires et puis quand je suis 46:13 client et puis pouvoir les les 46:17 annuler ou réserver d'autres créneaux 46:21 quoi et voir toutes mes toutes mes 46:24 toutes mes RA quand vous aurez termin 46:26 terminé alors vous pourrez euh il y a 46:29 plusieurs choses que vous pouvez faire 46:30 d'abord vous pourrez publier euh sur une 46:34 sur un site et donc on peut lancer ça 46:37 pour pour voir comment ça fonctionne 46:39 sera pas le code le code euh sera public 46:43 ou privé à partir de ce togle là euh et 46:48 le déploiement vers un site qui sera 46:50 disponible pour le client c'est celui-là 46:52 donc il m'a créé un lien 46:54 connect-prestataire.lov 46:57 app il est là que je peux envoyer à mon 47:00 client alors si vous voulez pas avoir le 47:03 lovable.a vous voulez avoir votre propre 47:05 domaine c'est tout à fait possible et 47:08 donc là il faudra cliquer sur custom 47:11 domains et là il nous explique comment 47:13 faire pour publier en custom domains 47:16 première chose c'est qu'il faut qu'on 47:18 transfère notre code vers gitlab et donc 47:22 là on va cliquer sur 47:24 Edit code Connect to gitlab maintenant 47:29 si je reviens ici 47:37 normalement voilà et donc il m'a créé un 47:41 un git un gitub il est là si je copie le 47:44 lien tout mon code qui est disponible 47:48 ici avec la documentation qui a déjà été 47:51 faite par loverball lui-même 47:53 euh et c'est un 47:57 un gub qui est privé et vous pourrez le 47:59 rendre publ si vous avez envie donc vous 48:02 allez sur 48:05 netlify.com Get Started donc ça c'est 48:08 une sorte de serveur où vous allez 48:10 pouvoir déployer vos 48:13 application et donc là vous cliquez sur 48:17 Start 48:19 import existing 48:22 project nous on est en github 48:27 il me dit est-ce que vous autorisez 48:30 netliify à les récupérer 48:33 oui je 48:35 l'autorise je vais sélectionner le 48:37 repository qui est là Connect 48:43 prestataire et donc là il va récupérer 48:46 le code du coup il me demande si je veux 48:48 mettre un nom de site et 48:51 cetera et là deploy Connect prestataire 48:58 il est en train de le 49:01 déployer le site est déployé je vais 49:03 pouvoir définir mon domaine donc si j'ai 49:06 besoin de définir un 49:08 domaine avec mon domaine à moi je c'est 49:11 ici que je vais le 49:12 définir ça peut être un domaine ou un 49:15 sous-domaine donc si je peux ça peut 49:16 être 49:17 croissanceconsulting.com et ça peut être 49:20 euh 49:22 go.croissanceconsulting.com enfin un 49:24 sous-domaine et vous pourrez le définir 49:26 ici le lien qui vous a donné par défaut 49:29 c'est celui-là donc c'est un lien 49:31 netlyify c'est plus un lien lov Ball et 49:34 donc vous pourrez très bien envoyer ça 49:36 directement à votre client pas besoin 49:38 d'aller définir un sous-domaine mais si 49:41 vous voulez besoin si vous voulez livrer 49:42 le projet à votre client le projet 49:45 final faut juste prendre son domaine à 49:48 lui configurer les DNS c'est là où il a 49:51 acheté son son domaine pour rediriger 49:54 vers netli et c'est c'est fait et petit 49:59 point qu'on a oublié de regarder 50:01 d'ailleurs c'est est-ce qu'il est euh 50:03 est-ce qu'il 50:04 est mobile friendly donc là vous avez un 50:07 petit bouton ici qui vous change du mode 50:10 mobile au mode au mode Desktop et vous 50:13 voyez qu'en mode mobile les les boutons 50:16 s'affichent bien le menu tout est bien 50:20 déjà bien fait pour que ça ça rentre 50:24 vraiment dans les 50:27 dans le mode mobile donc je pense qu'on 50:28 a fait un bon tour de l'overball vous 50:31 avez vu c'est 50:33 pas c'est pas j'envoie un Prom et j'ai 50:37 toute mon application qui est faite je 50:39 l'accompagne vous avez vu le framework 50:41 qu'on a suivi vous commencez d'abord par 50:44 la landing page ensuite la partie 50:46 authentification 50:48 ensuite selon le cas et selon les le le 50:52 projet que sur lequel vous êtes en train 50:54 de travailler soit vous commencez une 50:56 partie du produit et vous faites le 50:58 paiement ou alors si c'est possible 51:00 commenz directement par le paiement 51:02 comme ça vous avez terminé les grosses 51:04 briques qui sont l'authentification le 51:05 paiement et vous pourrez ensuite 51:08 attaquer la partie produit voilà pour 51:10 cette démo de Lover ball j'espère que 51:13 vous l'avez apprécié j'espère que ça 51:15 vous donnera des idées pour justement 51:18 essayer de décrocher des projets de 51:21 développement full stack vous avez vu 51:23 c'est plus réservé vraiment à des 51:26 développeur expérimentés vous pourrez 51:30 avec quelques quelques notions euh vous 51:33 débrouiller pour livrer un projet qui 51:36 soit utilisable sécurisé conncter à une 51:40 base de données qui soit professionnelle 51:43 déployé sur un serveur professionnel et 51:45 cetera et cetera et je pense que 51:47 loverball est lancé depuis à peu près 2 51:51 mois 2 mois et demi mais vous voyez le 51:54 potentiel que ça je vous laisse imaginer 51:56 dans dans un an où est-ce qu'on sera 51:57 avec ce type de de d'agents ila qui 52:01 permettent de de créer des applications 52:04 on sera un toute nouvel air de de 52:08 création donc c'est le moment de 52:11 rejoindre le bateau et de commencer à 52:14 apprendre ce type de 52:16 technologie pour ne pas être dépassé 52:19 justement dans 6 mois 9 mois 1 an donc à 52:22 votre succès je vous dis à la prochaine 52:24 vidéo