Crée une App Complète en 25 min avec l'IA ! (Base de données, Paiement, OpenAI...)

[Transcript language: fr] 0:00 aujourd'hui tu peux créer n'importe 0:01 quelle application avec le design et les 0:03 fonctionnalités de ton choix intégrer de 0:05 l'intelligence artificielle et même 0:06 ajouter un système de paiement et tout 0:08 ça en quelques minutes et sans coder lia 0:11 que je vais te présenter aujourd'hui 0:12 s'appelle lovable et tu vas voir c'est 0:13 complètement dingue donc on se retrouve 0:15 sur l'interface de l'ovable et comme 0:17 d'habitude c'est une interface assez 0:18 classique pour un logiciel d'IA tu as 0:20 une fenêtre de chat avec laquelle tu vas 0:22 pouvoir interagir et ici on va lui 0:24 lancer n'importe quelle requête et lui 0:26 demander de créer toutes les 0:27 applications qu'on souhaite mais avant 0:28 de commencer avec un Prom que je trouve 0:29 très pratique et que je vais te partager 0:31 dans la description je voulais juste 0:32 montrer que ici tu peux accéder à 0:34 l'ensemble des templates de la 0:35 communauté donc en fait tu vas pouvoir 0:37 accéder au travail des personnes qui ont 0:39 utilisé lovable tu vas pouvoir récupérer 0:41 leur site web parce qu'ils ont décidé je 0:43 précise bien de les mettre en public et 0:44 tu vas pouvoir retrouver l'ensemble de 0:46 la discussion l'ensemble des promptes 0:48 qu'ils ont utilisé donc ça peut être 0:49 hyper pratique pour te donner des idées 0:51 voir comment les personnes promptent et 0:53 discutent avec le Wable et voir en 0:54 fonction de ça quels sont leurs 0:55 résultats bref cet aspect communautaire 0:57 il est aussi très pratique sur le weble 0:59 d'ailleurs quand tu démarre un projet tu 1:00 peux décider de le lancer en public ou 1:02 en privé et on va commencer tout de 1:04 suite avec un premier prompt et ce 1:05 prompt là il est vraiment très standard 1:07 on va dire à lovable crée un site pour 1:09 mon business de ABC évidemment on va le 1:11 remplacer c'est un prompt que tu peux 1:12 réutiliser et remplacer en fonction de 1:14 ton activité ajoute des fonctionnalité 1:16 différenciant pour me démarquer des 1:17 concurrents alors j'adore ce Prom parce 1:19 qu'il permet d'avoir quelque chose de 1:20 standard et de laisser l'ovable être 1:22 proactif et d'avoir des bonnes idées de 1:24 fonctionnalité c'est aussi à double 1:25 tranchant tu vas voir parce qu'on lui 1:27 demande de faire preuve d'énormément 1:28 d'initiativ et du coup forcément ça peut 1:30 être parfois un peu indigeste pour lui 1:31 en tout cas on va voir et forcément à la 1:33 place d'ABC on va remplacer par une 1:36 activité en particulier donc là par 1:38 exemple on va lui dire conseil en 1:39 immobilier sur Paris mais tu pourrais 1:41 très bien mettre magasin de bricolage 1:42 jardinage bref peu importe donc on va 1:44 lancer la demande comme ceci et là 1:46 normalement d'ici quelques minutes 1:47 lovable devrait être en mesure de nous 1:49 proposer un site complet alors 1:51 évidemment modul certaines erreurs parce 1:52 que comme je te l'ai dit ce prompt il 1:54 est quand même assez général assez large 1:56 et donc potentiellement peut-être que 1:57 lia qui doit faire preuve d'initiative 1:59 va rencontrer quelques soucis auquel cas 2:01 on pourra les régler en un simple clic 2:03 mais en tout cas sur la gauche on a du 2:05 détail sur les fonctionnalités et le 2:07 design qui compte mettre en place et sur 2:09 la droite il est déjà en train de 2:10 s'exécuter et d'écrire le code donc j'ai 2:12 hâte de voir ce qu'il va nous proposer 2:13 d'ici quelques minutes et donc ça y est 2:15 au bout d'exactement 7 minutes on a 2:17 notre site apparemment qui a l'air déjà 2:19 plutôt pas mal avec beaucoup de détails 2:20 on va passer tout en revue on va 2:22 rajouter des fonctionnalités optimiser 2:24 le design tu peux cliquer ici en haut à 2:26 droite pour aller le consulter en plein 2:27 écran évidemment donc qu'est-ce qu'on a 2:29 alors déjà au niveau du design on est 2:30 plutôt pas mal bon il y a quelques 2:32 parties ajusté en fonction des couleurs 2:33 parce que là le bouton n'apparaît pas 2:34 bien on a différentes fonctionnalités ou 2:36 en tout cas on a une partie qui liste 2:38 les différents services conseil en 2:39 acquisition investissement locatif et 2:41 cetera avec à chaque fois un peu de 2:43 détail la possibilité d'aller cliquer 2:45 ici pour demander du Conseil ça nous 2:47 redirige vers la page Contactez-nous 2:49 c'est parfait si on retourne sur 2:50 l'accueil on va voir ce qu'on a on a des 2:52 propriétés qui sont sélectionné alors là 2:54 pour l'instant on n' pas d'image mais 2:55 c'est quelque chose qu'on va pouvoir 2:56 régler rapidement on a ensuite un espace 2:58 pour réserver une consultation privée la 3:00 partie témoignage pareil on n pas les 3:02 photos pour l'instant mais on va pouvoir 3:03 rectifier tout ça et ensuite la partie 3:06 Contact qu'on retrouvait tout à l'heure 3:07 sur une are page mais qu'on retrouve 3:08 également en fin de page avec également 3:10 une carte Google Maps bah écoute c'est 3:12 pas mal hein franchement pour une 3:13 première version si on clique sur la 3:14 partie propriété on va retrouver 3:16 certains bien toujours sans photo on va 3:18 pouvoir modifier tout ça pas de souci à 3:20 propos on a des informations sur le 3:22 cabinet avec des chiffres évidemment qui 3:24 sont factices mais je trouve que d'un 3:25 point de vue design pur pour une 3:27 première maquette un premier MVP c'est 3:29 assez dingue une approche unique avec 3:30 beaucoup de détails bref franchement 3:32 pour un prompt et 7 minutes d'attente 3:35 c'est déjà plutôt pas mal donc si on 3:36 retourne sur le weble je vais te montrer 3:38 comment tu vas pouvoir optimiser ce site 3:40 que ce soit en matière de design ou 3:41 simplement la possibilité de rajouter 3:43 d'autres fonctionnalités tu vas pouvoir 3:45 directement interagir avec lovable dans 3:47 la barre de chat pour lui demander de 3:48 faire les modifications autre 3:50 fonctionnalité qui est assez 3:51 intéressante avec lovable si tu n'as pas 3:53 forcément envie d'interagir avec le chat 3:55 et que tu veux faire des petites 3:56 modifications tu peux cliquer ICI sur 3:58 Edit et sélectionner une partie en 4:00 particulier par exemple ce boutonlà et 4:02 effectuer des modifications de manière 4:03 manuelle pour par exemple élargir le 4:05 padding donc la marge au niveau du 4:07 bouton donc ça tu vas pouvoir travailler 4:09 dessus tu peux effectuer comme ça 4:10 quelques modifications tu peux changer 4:12 le texte changer la couleur du texte et 4:13 cetera on va rester là-dessus et 4:15 uniquement interagir avec le chat mais 4:17 sache que c'est possible en tout cas et 4:19 on va donc régler les quelques petits 4:21 soucis en matière d'accessibilité de 4:23 couleur et pour ça on va prendre un 4:24 screenshot et ça c'est des bonnes 4:25 pratiques avec lovable tu peux prendre 4:27 un screenshot de la partie que tu as 4:28 envie de modifier copier le screenshot 4:30 et l'envoyer dans la discussion et dire 4:32 le bouton en blanc n'apparaît pas bien 4:34 quand on ne passe pas le curseur dessus 4:36 donc on va voir s'il va comprendre comme 4:38 ça et là en quelques secondes 4:39 apparemment il a compris le problème et 4:41 si tu cliques ici tu peux accéder au 4:42 code et tu vois toutes les modifications 4:44 qu'il est en train d'effectuer et ça y 4:46 est du coup maintenant le bouton 4:47 apparaît bien on a plus de souci et on 4:49 peut toujours cliquer dessus pour 4:50 accéder à la fonctionnalité propriété 4:52 donc ça c'est réglé on peut passer plus 4:54 de temps pour par exemple optimiser la 4:55 partie photo on va lui dire d'ailleurs 4:57 aucune photo n'apparaît je veux que tu 4:59 en M on va lancer une demande comme ça 5:01 très basique et on va voir s'il est 5:02 capable de mettre à la fois des photos à 5:04 ce niveau-là et pour les différents 5:05 biens honnêtement si on a les photos on 5:07 devrait quand même avoir quelque chose 5:08 de pas mal donc a priori il nous dit 5:09 qu'il a réglé ça mais ça fonctionne 5:10 toujours pas on va prendre un screenshot 5:12 pour l'aider voir si il peut nous aider 5:14 à le faire les photos n'pparaissent 5:15 toujours pas donc là apparemment il va 5:17 mettre des images mais tu vas le voir 5:18 juste après on va connecter le site à 5:20 une base de données hyper facilement 5:21 avec supabase et c'est comme ça que tu 5:23 pourrait éventuellement charger des 5:25 images dans la base de données et 5:26 choisir tes propres images mais bon 5:27 voilà ça y est il a remplacé avec des 5:29 images standard donc a priori on est 5:31 bien ici il manque toujours quelques 5:32 photos on va lui indiquer voilà on lui 5:34 partage l'info et d'ailleurs il a mis 5:36 des photos en haut du site donc ça il 5:38 avait fait en même temps que la partie 5:39 pour les biens il manquait juste une 5:40 photo à ce niveau-là au niveau du design 5:42 on commence à être pas mal ah oui il 5:43 manque aussi les visages pour les 5:45 témoignages donc là maintenant on est 5:46 bon et on va lui dire une dernière fois 5:48 ici non plus je n'ai pas de photos avec 5:49 des screenshots que je viens de prendre 5:51 et ensuite on va rajouter des 5:52 fonctionnalités et puis après on va 5:54 aller beaucoup plus loin on va connecter 5:55 comme je t'ai dis à une base de données 5:56 on va rajouter de l'intelligence 5:58 artificielle directement dans notre site 6:00 grâce à la connexion avec openi et on va 6:02 même mettre un système de paiement à la 6:04 fin tu verras c'est génial et on pourra 6:06 publier notre site directement avec une 6:07 version mobile bref reste bien jusqu'à 6:09 la fin de la vidéo parce qu'on va avoir 6:10 quelque chose d'hyper complet en tout 6:12 cas ça y est il nous a mis des visages 6:13 donc là on est bon et on va pouvoir lui 6:15 demander de rajouter des fonctionnalités 6:17 tu vas voir ça va être assez 6:18 impressionnant déjà la première chose ça 6:20 va être de lui dire de nous créer des 6:21 pages pour les différents biens parce 6:22 que là quand on clique effectivement il 6:24 y a rien donc on va tout simplement lui 6:26 dire créer une page pour chacun des 6:27 biens accessible en cliquant sur la 6:29 photo tu lances ta demande encore une 6:30 fois c'est vraiment avec du français 6:31 très simple tuas pas besoin de t'embêter 6:33 et c'est comme si tu travaillais avec un 6:35 développeur directement il va pouvoir 6:37 t'effectuer toutes les modifications en 6:39 quelques secondes en attendant qu'il 6:40 travaille là-dessus je vais en profiter 6:42 pour prendre un petit moment pour te 6:43 parler du pricing des différents plans 6:44 disponibles avec lovable pour ça on va 6:46 se retrouver sur la partie plan et 6:47 billing donc avec lovable comme avec 6:49 beaucoup d'a tuas un plan gratuit qui te 6:51 permet de tester l'outil avec un certain 6:53 nombre de crédit pour être honnête ça te 6:54 permet vraiment de faire des premiers 6:56 essais mais si tu veux créer une 6:57 application complète il faudra 6:59 rapidement que tu passes sur le plan à 7:00 20 dollars par mois ce plan là 7:02 honnêtement il suffit pour pouvoir créer 7:04 des applications de A à Z après il faut 7:06 faire attention à ne pas faire trop de 7:07 prompt parce que tu seras limité en 7:09 terme d'alli-retour mais j'ai une bonne 7:11 nouvelle si tu veux tester un petit peu 7:13 plus les limites sans devoir payer 7:14 directement un plan payant j'ai négocié 7:16 avec lovable un lien disponible dans la 7:18 description et si tu crées un compte 7:20 avec ce lien tu auras plus de crédits 7:21 gratuits ça aide également la chaîne 7:23 évidemment rien d'obligatoire libre 7:25 à-toi de choisir de passer par ce lien 7:26 ou pas du tout mais en tout cas si tu 7:28 veux tester tout ça et aller aller plus 7:29 loin gratuitement ça peut être une bonne 7:31 opportunité et donc on va retourner sur 7:32 notre site on va voir s'il a bien 7:34 travaillé pendant ce temps on arrive sur 7:35 la partie au niveau des biens et si on 7:37 clique attention et ça y est on a une 7:39 page qui a été créée pour chacun des 7:40 biens apparemment avec énormément de 7:42 détails tu vois que c'est quand même 7:43 assez dingue on a les caractéristiques 7:45 la surface les années de construction 7:47 les prestations le quartier bon là on 7:49 pourrait ajouter une carte Google Maps 7:50 et d'ailleurs on va le faire je vais te 7:51 montrer c'est quand même assez simple 7:52 avec la PI et donc on va pouvoir tester 7:54 quand même s'assurer que ça soit bien 7:56 sur tous les biens et oui ça fonctionne 7:57 également sur celle-ci derrière on a des 7:59 boutons qui j'imagine ne fonctionnent 8:00 pas encore effectivement ça fait une 8:02 petite notification en mode demande 8:03 envoyée à notre agent mais déjà tu vois 8:05 à quel point c'est impressionnant on a 8:06 créé un site avec deux trois prompts ça 8:08 commence à être de plus en plus complet 8:10 et c'est que le début on va lui demander 8:12 de rajouter une fonctionnalité avancée 8:13 qui va être super utile et je suis sûr 8:15 qu'il peut faire quelque chose d'assez 8:16 sympa donc on va retourner sur l'accueil 8:18 et on va dire à lovable rajoute une 8:20 fonctionnalité de calculateur 8:21 d'emprunt/ashduto on va voir ce qu'il 8:23 nous propose cette fois-ci encore j'ai 8:24 un promp qui est quand même assez large 8:25 assez général je l'aide pas trop 8:27 honnêtement mais on va voir pour 8:28 l'instant il s'en est bien sor je suis 8:30 sûr qu'il va nous proposer quelque chose 8:31 d'assez sympa et pendant qu'il travaille 8:33 là-dessus je vais te montrer comment 8:34 connecter ta première API à ce site Web 8:36 pour avoir encore plus de 8:38 fonctionnalités donc comme je te l'ai 8:39 dit on va essayer de voir pour pouvoir 8:40 aller chercher l'API de Google Maps pour 8:42 avoir une carte interactive 8:44 éventuellement avec les prix de 8:45 l'immobilier parisien par arrondissement 8:47 ça peut être plutôt sympa on va quand 8:49 même avoir beaucoup de fonctionnalités 8:50 sur ce site he mais c'est pas grave on 8:51 va faire quelque chose de complet et 8:53 donc pour ça il va falloir que tu te 8:54 rendes sur la console Google cloud donc 8:56 c'est juste ici il faut que tu crées un 8:58 compte moi je vais me connecter voilà je 8:59 me connecte normalement créer un compte 9:01 c'est gratuit et tu vas devoir rentrer 9:02 une carte bleue mais tu auras des 9:04 crédits voilà comme j'ai des crédits 9:05 gratuits donc normalement ça devrait 9:06 rien de coûter ensuite tu vas créer un 9:08 projet si tu sais pas le faire c'est 9:09 vraiment très simple mais tu peux 9:10 demander à chat GPT là j'ai déjà créé un 9:12 projet pour le vble et ensuite tu vas 9:14 taper Google Maps dans la barre de 9:15 recherche donc là c'est l'API qu'on va 9:17 rechercher mais on pourrait aller 9:18 chercher une API YouTube par exemple à 9:20 la limite il y en a plein qui sont 9:21 disponibles sur la console de Google on 9:23 va aller sur la partie Google Maps 9:24 platform je crois que c'est ici on va 9:26 aller sur la gauche sur Keys et 9:27 crentials et c'est ici qu'on va pouvoir 9:29 récupérer la clé ài là j'en ai déjà créé 9:32 une tu cliques ici pour la créer pour la 9:33 première fois et ensuite tu vas pouvoir 9:35 faire apparaître ta clé juste ici cette 9:37 clé il faut évidemment que tu la 9:38 partages à personne moi je la 9:39 supprimerai juste après cette vidéo et 9:41 une fois que tu l'as copié tu vas 9:42 pouvoir la partager à lovable donc on se 9:45 retrouve sur le weble pendant ce temps 9:46 il a dû travailler sur la partie 9:48 calculateur de taux on lui fait 9:49 confiance on va voir si la 9:50 fonctionnalité est disponible alors je 9:52 la vois pas sur la page principale mais 9:53 j'imagine qu'il a dû créer une section 9:55 particulière alors c'est aussi 9:56 l'occasion pour moi de te montrer là 9:58 apparemment on n pas de bouton pour y 9:59 accéder mais normalement si tu cliques 10:01 ici voilà tu as accès à l'ensemble des 10:02 pages qui ont été créées et si on clique 10:05 sur la partie lone calculator donc 10:06 calculateur de prês on accède à la 10:08 partie simulateur ça a l'air assez 10:10 génial on a un slider pour pouvoir 10:12 sélectionner le montant du prêt on peut 10:14 également faire une modification manuel 10:15 taux d'intérêt annuel durée du prê et on 10:18 a un calcul automatique à ce niveau-là 10:20 avec un tableau d'amortissement des 10:22 courbes dynamiques je trouve que c'est 10:23 assez génial des conseils pour le prêt 10:25 besoin d'aide contacter et cetera on 10:27 pourrait lui demander d'avoir un bouton 10:29 pour pour accéder directement à cette 10:30 page ça c'est quelque chose qui peut 10:31 être fait hyper facilement mais tu vois 10:33 que tu peux rajouter des fonctionnalités 10:35 en quelques secondes avec une simple 10:36 demande et là on va rajouter une 10:38 dernière fonctionnalité avant de 10:40 connecter la base de données et de 10:42 rajouter l'intelligence artificielle 10:43 puis le paiement on va retourner sur la 10:45 page d'accueil donc a priori là on est 10:47 bon et on va lui dire ajoute une 10:49 visualisation du prix au mètre carré par 10:51 arrondissement parisien je veux que les 10:53 arrondissements puissent être 10:54 sélectionnés sur une carte Google Maps 10:56 je vais te donner la clé àay donc voilà 10:58 là va tout d'abord construire la 11:00 fonctionnalité et après on va lui 11:01 partager la clé et normalement on aura 11:03 notre site complet et on pourra 11:05 continuer à avancer et après s'est 11:06 occupé de la partie front-end donc 11:08 vraiment tout ce qui est visuel 11:09 s'occuper du backend avec vraiment les 11:11 bases de données on va créer un espace 11:13 client pour qu'on puisse se connecter 11:14 stocker une partie login mot de passe et 11:16 cetera avoir vraiment un espace 11:17 Utilisateur on pourra d'ailleurs 11:19 réserver certaines des fonctionnalités 11:21 comme le simulateur de Tau uniquement 11:22 aux personnes qui ont créé un compte et 11:24 qui sont connectés donc voilà il y a 11:25 énormément de choses que tu peux mettre 11:27 en place j'imagine que ça te donne des 11:28 bonnes idées pour pour ton business 11:29 d'une manière générale si tu gères une 11:31 entreprise lia ça peut vraiment t'aider 11:33 que ce soit lovable ou d'autres outils 11:34 qui te permettent de créer des agents et 11:36 cetera ça peut te faire gagner un temps 11:37 fou et apporter beaucoup plus de valeur 11:39 pour tes clients d'ailleurs si ces 11:40 sujets autour de la mise en place et de 11:42 l'intégration de l'IA au sein d'un 11:43 business t'intéresse j'ai une bonne 11:45 nouvelle je viens de lancer ma toute 11:46 nouvelle chaîne exploreia business qui 11:48 justement traite de ces thématique je 11:50 t'invite à aller la checker sur le 11:51 premier lien dans la description et 11:53 pendant ce temps a priori il a mis en 11:54 place la fonctionnalité mais on a une 11:55 petite erreur on va cliquer ici pour 11:57 pouvoir régler l'erreur directement en 11:59 un clic c'est ça qui est génial avec 12:00 l'ovble c'est qu'on a pas besoin de se 12:02 pencher sur les différentes erreurs on a 12:04 simplement à cliquer sur un bouton et il 12:05 va régler l'ensemble des problèmes là 12:07 j'imagine que c'est peut-être parce 12:08 qu'on lui a pas partagé la clé API on va 12:10 regarder quand même une fois qu'il aura 12:11 fini on va lui dire aide-moi à 12:12 implémenter la clé API Google Maps voilà 12:15 a priori on est bon si on clique ici 12:17 effectivement on a la nouvelle page la 12:18 partie price map et donc là on va devoir 12:20 rentrer la clé API mais c'est pas ce 12:21 qu'on veut on veut pas que cet encar 12:23 soit disponible directement sur le site 12:24 on va lui dire comme ça on va voir s'il 12:26 se débrouille bon normalement il doit 12:27 être capable de nous proposer un encart 12:28 Sécur pour partager la clé là a priori 12:31 veut pas on va le faire comme ça c'est 12:32 pas forcément la meilleure pratique 12:33 surtout quand le projet est en public 12:35 donc fait bien attention mais là on va 12:36 lui partager comme ça voici la clé à pay 12:39 et normalement il va intégrer tout ça 12:41 directement dans le code et on devrait 12:42 avoir notre carte avec les prix par 12:44 arrondissement et bien écoute on est pas 12:46 mal on a la carte Google Maps avec les 12:48 différents prix on peut sélectionner un 12:49 arrondissement particulier et avoir les 12:51 prix sur la droite juste ici alors là le 12:53 site rame un petit peu j'ai l'impression 12:54 qu'il faudrait qu'on fasse quelques 12:55 optimisations mais franchement c'est pas 12:57 mal on peut sélectionner aussi les 12:58 arrondiss directement ici avec la 13:00 comparaison des prix par arrondissement 13:02 une moyenne pour un bien de 75 m² bref 13:05 là il a fait des propositions de manière 13:06 autonome mais tu peux lui demander tout 13:08 ce que tu veux évidemment si tu 13:10 maîtrises le sujet de l'immobilier à 13:11 Paris tu auras plein d'idées qui seront 13:12 meilleures que les miennes et tu pourras 13:13 faire quelque chose d'assez incroyable 13:15 et donc là je viens de faire une petite 13:16 demande pour rendre la page plus 13:17 performante c'est beaucoup mieux on peut 13:19 se balader sur la carte là on a une 13:20 vraie carte Google Maps donc c'est top 13:22 on peut sélectionner un arrondissement 13:23 là c'est quand même beaucoup plus rapide 13:25 et maintenant on va passer à la partie 13:26 base de données et pouvoir créer un 13:28 espace client pour rendre ses 13:29 fonctionnalités de Price map et de 13:31 calculateur de taux exclusive uniquement 13:33 pour les membres qui auront créé un 13:34 compte sur notre site ok donc maintenant 13:36 pour passer à la partie connexion de 13:38 base de données c'est très simple on va 13:39 passer par supabase et l'avantage aussi 13:41 de lovable c'est qu'on a une intégration 13:43 directe avec supabase donc pour ça tu as 13:45 simplement à cliquer ICI sur le bouton 13:47 en haut à droite au préalable si tu as 13:49 pas de compte supabase il va falloir en 13:50 créer un donc tu vas te rendre sur le 13:51 site supabase tu vas te créer un compte 13:53 en quelques secondes c'est complètement 13:54 gratuit et ensuite tu vas cliquer ICI 13:56 sur starture project ensuite tu vas 13:58 devoir créer une organisation donc là 13:59 j'en ai déjà une je vais la récupérer et 14:01 enfin tu vas créer un nouveau projet en 14:03 cliquant ici tu choisis ton organisation 14:06 existante là tu peux mettre n'importe 14:07 quel nom tu vas choisir un nom pour ton 14:09 projet on va mettre lovable je vais 14:11 mettre un password pour la base de 14:12 données et ici tu vas sélectionner ta 14:14 région à la limite peu importe ça c'est 14:16 plutôt si tu as une application en 14:17 production tu auras besoin d'avoir une 14:19 région qui est assez proche de ta zone 14:21 effective en tout cas de la zone des 14:22 utilisateurs qui vont consulter ton site 14:24 on va rester sur Frankfort et on va 14:26 cliquer ici pour créer un nouveau projet 14:29 ensuite on va attendre quelques secondes 14:30 le temps que tout se paramètre donc 14:32 voilà au niveau de la sécurité on est 14:33 bon et on va attendre un petit peu le 14:35 temps du paramétrage de la base de 14:36 données du Real Time des fonctions et 14:39 voilà on a attendu quelques minutes et 14:40 maintenant notre projet est prêt donc on 14:42 est bon côté superabase on va retourner 14:43 sur le weble et on va simplement cliquer 14:46 sur ce bouton d'intégration et on va 14:48 arriver sur un espace pour paramétrer la 14:50 connexion entre superabase et lovable 14:52 donc là j'ai déjà connecté la première 14:54 partie tu peux le faire en quelques 14:55 clics c'est vraiment très simple et ici 14:57 tu vas pouvoir sélectionner ton projet 14:59 donc en l'occurrence ici celui que je 15:00 viens de créer on va cliquer sur Connect 15:02 ici on va connecter effectivement la 15:04 base et voilà c'est déjà prêt on a la 15:06 connexion qui vient d'être faite si on 15:08 retourne au niveau du projet ici lovable 15:10 nous dit que l'application est 15:11 maintenant bien connectée à superabas 15:13 c'est juste génial on va pouvoir mettre 15:14 en place la partie user account et login 15:16 on va pouvoir stocker et utiliser de la 15:18 vraie donnée donc des vraies photos des 15:19 vidéos et cetera et également utiliser 15:22 des fonctionnalités avancé de supabase 15:23 là pour le coup c'est un petit peu plus 15:25 technique mais en tout cas là a priori 15:27 tout est bon pour pouvoir créer les 15:29 espace Utilisateur donc du coup on va 15:30 demander directement à lovable créer un 15:32 espace utilisateur avec login et mot de 15:34 passe et on va rester comme ça pour la 15:36 première demande on va pas lui donner 15:37 trop d'informations dans un premier 15:38 temps on va voir s'il s'en sort et c'est 15:40 parti il nous propose du SQL on va pas 15:42 rentrer dans le détail et partir du 15:44 principe que tout est bon on va 15:45 appliquer les changements et normalement 15:47 d'ici quelques secondes tout devrait 15:49 être bon voilà donc il est en train de 15:50 mettre en place la base de données et 15:51 ensuite on va demander à lovable que les 15:53 fonctionnalités de Price map donc la 15:55 carte avec les différents prix et le 15:57 calculateur de taux calculateur d'emprun 15:59 soit disponible uniquement pour les 16:01 utilisateurs qui sont connectés donc on 16:02 va simplement lui demander de faire 16:04 cette petite connexion parce que là les 16:05 boutons ne permettent pas d'aller 16:06 directement sur les pages on va apporter 16:08 les petits ajustements et à la fin on va 16:10 avoir quelque chose d'assez incroyable 16:11 je pense en terme de site reste bien 16:13 accroché parce qu'on va aussi aller 16:14 chercher la pay d' open tu vas voir 16:16 c'est hyper simple pour pouvoir ajouter 16:17 l'intelligence artificielle dans notre 16:19 site on va par exemple essayer de créer 16:21 une fonctionnalité pour proposer à nos 16:22 clients des conseil sur l'arrondissement 16:23 qui devrait choisir en fonction de leur 16:25 préférence et ça tous ces conseils ça va 16:27 être grâce à lia en tout cas a priori on 16:29 est bon on a la page de connexion et 16:31 d'inscription donc bah écoute on va 16:33 tester tout ça on va voir si ça 16:34 fonctionne on va essayer simplement de 16:36 se créer un compte donc on va faire 16:37 prénom nom allez je vais mettre Exploria 16:39 je vais mettre mon adresse mail un mot 16:41 de passe pour pouvoir me connecter et on 16:42 va essayer de se créer un compte on va 16:44 voir si ça fonctionne et Ben a priori 16:46 c'est bon le compte a été créé avec 16:47 succès mais bon ça c'est juste un 16:49 affichage on va quand même vérifier et 16:50 pour ça on va aller côter supabase on va 16:53 aller dans la partie database et là on a 16:54 un tableau nommé profil et si on clique 16:56 ici view in Table editor a priori on 16:59 devrait retrouver notre utilisateur 17:01 alors effectivement on est bon on a 17:02 notre inscription en tout cas si on va 17:04 sur nos emails on a bien l'email de 17:06 confirmation pour créer le compte on va 17:08 cliquer ici pour confirmer ici on a un 17:10 message d'erreur mais c'est normal c'est 17:11 parce qu'on a pas créé de page de 17:12 redirection une fois qu'on a cliqué sur 17:14 le lien de confirmation et maintenant si 17:15 tu vas dans la partie authentications et 17:17 users tu peux aller récupérer toutes les 17:19 informations qu'on vient de capturer on 17:21 a le provider à savoir un email la date 17:23 de création la date de dernière 17:24 connexion pour la partie base de données 17:26 on est bon donc on va se reconnecter et 17:28 je vais te montrer que ça fonctionne 17:29 bien parce que si tu reprends le même 17:30 email par exemple et que tu mets le 17:32 mauvais mot de passe donc par exemple je 17:33 vais changer un chiffre dans le mot de 17:34 passe tu vas voir que ça fonctionne pas 17:36 alors que si je mets le bon chiffre 17:38 juste ici voilà là j'arrive à me 17:40 connecter donc ça fonctionne réellement 17:41 il y a vraiment une vraie connexion qui 17:42 marche derrière et donc si on clique sur 17:44 mon profil voilà on est connecté mais on 17:46 a que des choses vraiment très basiques 17:47 maintenant on a quand même la carte des 17:49 prix qui est accessible juste ici mais 17:50 on va demander à lovable de réserver 17:53 cette fonctionnalité en plus du 17:54 calculateur exclusivement aux personnes 17:56 connectées donc on va lui dire les 17:58 fonctionnalités price map et l'ONE 18:00 calculator doivent être réservés aux 18:01 utilisateurs connectés et voilà donc 18:03 pour être honnête après mettre un petit 18:04 peu battu avec le weble pour pouvoir 18:06 régler de trois problèmes d'ailleurs si 18:07 tu as des soucis et que tu commences à 18:09 être bloqué dans une certaine boucle 18:11 avec cet outil tu peux cliquer ici pour 18:12 accéder à l'historique des versions et 18:14 récupérer une version précédente qui 18:16 avait peut-être moins de bugs et qui te 18:17 permet de repartir d'une feuille un peu 18:18 plus blanche en tout cas je lui ai 18:20 demandé d'enlever l'accès à la price map 18:22 et au calculateur de taux aux personnes 18:23 qui ne sont pas connectées et donc là 18:25 effectivement on peut pas y accéder en 18:27 revanche quand on se connecte donc là je 18:28 renseigne mes informations je clique sur 18:30 ce connecter et là j'ai bien accès aux 18:32 nouvelles fonctionnalités à savoir la 18:34 carte des prix et le calculateur de prêt 18:36 donc là au niveau du design c'est assez 18:37 ramassé si on clique ici on est en plein 18:39 écran et c'est forcément beaucoup plus 18:40 propre là pour le coup en terme de 18:42 design on est plutôt bien pareil pour la 18:44 carte des prix comme tout à l'heure tout 18:45 a l'air plutôt OK et maintenant on va 18:47 passer à la partie connexion avec openi 18:50 donc pour ça c'est très simple on va 18:51 continuer à échanger avec l vble 18:53 directement dans le chat et là cette 18:54 fois-ci on va retenter notre chance on 18:56 va lui dire aide-moi à implémenter la 18:57 clé API ai de manière sécurisée pendant 19:00 ce temps je vais te montrer comment 19:01 aller chercher cette fameuse clé API sur 19:03 la console open ai c'est très simple tu 19:05 tapes console open a dans google tu vas 19:07 prendre le premier lien donc open 19:09 platform tu vas te créer un compte si tu 19:10 en as pas déjà un c'est complètement 19:11 gratuit il va falloir cependant que tu 19:13 mettes quelques crédits sur cette 19:15 console donc ça peut être seulement 5 19:16 dollars tu as pas besoin de beaucoup ça 19:17 va prendre uniquement quelques centimes 19:19 pour ce type de scénario ensuite une 19:21 fois que c'est fait tu vas dans 19:22 dashboard tu vas dans la partie API Keys 19:24 et c'est ici que tu vas pouvoir créer ta 19:26 clé tu vas lui donner un nom on va 19:27 l'appeler lovable on va rester sur la 19:29 partie default project et on va cliquer 19:31 ici pour créer la clé et de manière 19:33 instantanée on a une clé qui est 19:34 disponible encore une fois fait 19:36 attention à ne pas la partager on la 19:38 copie on retourne sur le weble et cette 19:40 fois-ci il a compris il nous permet 19:41 d'ajouter la clé à pay de manière 19:43 sécurisée en cliquant sur ce petit 19:45 bouton là qui nous est suggéré et on va 19:46 pouvoir la coller juste ici donc cette 19:48 fois-ci c'est 100 % safe on l'ajoute 19:51 notre site web est connecté à 19:52 l'intelligence artificielle d'Open c'est 19:54 juste génial et à partir de là on va lui 19:56 demander de créer n'importe quelle 19:58 fonctionnalité qui va faire appel à 19:59 l'intelligence artificielle et donc par 20:01 exemple on va lui demander avec ce 20:02 prompt d'ajouter une fonctionnalité qui 20:04 permet de suggérer des quartiers de 20:05 Paris en fonction des goût et des 20:07 préférences partagées par l'utilisateur 20:08 basé effectivement sur des 20:10 recommandations de l'intelligence 20:11 artificielle d'Open a on lance la 20:13 demande et on va voir sous quelle forme 20:14 il nous propose cette nouvelle 20:15 fonctionnalité et ça y est donc il a un 20:17 petit peu modifié le design si on veut 20:18 le design précédent encore une fois on 20:20 peut aller chercher dans l'historique et 20:21 a priori on a cette nouvelle page 20:23 district Finder qui est accessible j'ai 20:25 l'impression uniquement lorsqu'on est 20:26 connecté donc c'est plutôt pas mal ça 20:27 permet de réserver certaines 20:29 fonctionnalités aux membres on va se 20:30 connecter on clique sur trouver votre 20:32 quartier et là ça y est on a une page où 20:34 on va pouvoir décrire notre quartier 20:35 apparemment on a des exemple exemple 1 20:37 exemple 2 exemple 3 on va se baser sur 20:39 l'exemple 3 et on va lui dire je cherche 20:40 un quartier familial avec de bonnes 20:42 écoles des espaces verts qui soient 20:44 accessible financièrement et qui me 20:46 permettent de faire du sport facilement 20:47 et là on va cliquer sur obtenir des 20:49 suggestions de quartier et normalement 20:51 avec l'intelligence artificiel d'Open on 20:53 va avoir une suggestion optimisé en 20:56 fonction de notre besoin donc ça voilà 20:57 c'est un service qu'on peut proposer à 20:59 des clients quand on construit un site 21:00 notamment avec le webble et avec 21:02 l'intelligence artificielle et ça y est 21:04 on a trois quartiers qui nous sont 21:05 recommandés le 12e le 13e et le 15e avec 21:09 à chaque fois une description pourquoi 21:10 c'est bien pour nous le 13e 21:12 arrondissement est un quartier dynamique 21:13 et familial avec des écoles réputé comme 21:15 on avait demandé si on clique ici sur 21:16 voir les prix on rebascule sur la carte 21:18 des prix c'est juste génial et là en 21:20 faisant précédent je perd la demande 21:21 initiale mais on va refaire une on va 21:23 prendre l'exemple de et on va voir ce 21:24 qu' nous propose voir si à chaque fois 21:26 c'est bien optimisé et personnalisé pour 21:28 la demande mais j'ai pas trop de doute 21:29 et oui donc quand on demande un quartier 21:30 calme et résidentiel avec des beaux 21:32 parcs on a plutôt le 16e toujours le 12e 21:34 et le 5e et on peut derrière cliquer ici 21:36 pour explorer les propriétés et on est 21:38 redirigé vers une autre fonctionnalité 21:40 du site franchement c'est génial en 21:42 quelques minutes on a été capable de 21:43 rajouter de l'intelligence artificielle 21:45 dans notre site et maintenant ce qui 21:46 manque à notre site c'est la possibilité 21:48 d'encaisser des paiements et pour ça on 21:50 va faire appel à la p de sripe comme 21:52 tout à l'heure on va aller dans le chat 21:53 on va dire à lable aide-moi à 21:55 implémenter la clé AP de stripe de 21:56 manière sécurisée et derrière il va nous 21:59 proposer de partager cette clé qu'on va 22:00 aller récupérer sur un espace stripe je 22:02 vais te montrer comment faut faire donc 22:04 pour ça évidemment il faut que tu ailles 22:05 sur le site de stripe il faut que tu es 22:06 un compte si tu en as pas il faut que tu 22:07 t'en crées un et derrière ce que tu vas 22:09 devoir faire c'est aller dans la partie 22:10 catalogue de produits tu vas créer un 22:12 produit et ce produit ça va être 22:14 simplement ce que tu vas vouloir vendre 22:15 donc admettons qu'on veut vendre une 22:16 consultation d'une heure avec un de nos 22:18 experts on va donc créer le produit on 22:20 va le nommer consultation une heure on 22:22 va choisir un prix on va mettre un prix 22:23 ponctuel en montant on va mettre 100 € 22:26 on va cliquer ici pour ajouter le 22:27 produit et ça y est le produit 22:28 disponible on peut le consulter ici tu 22:30 vas retrouver sur la droite l'ID du 22:32 produit et c'est important il va falloir 22:34 que tu le mettes de côté ensuite on va 22:35 aller chercher la clé API pour ça tu vas 22:37 aller en haut et taper API c'est ici 22:39 qu'on va récupérer nos clés encore une 22:41 fois fais attention à ne pas les 22:42 partager tu vas pouvoir récupérer tout 22:44 d'abord la clé publique on va cliquer 22:45 ici pour la copier maintenant l'ovable 22:47 nous propose d'ajouter la clé ici on 22:49 clique ici on va lui partager la clé en 22:51 fait il faut lui donner la clé secrète 22:52 j'ai pas pris la bonne donc je vais la 22:54 copier ici on la colle à ce niveau-là on 22:56 ajoute voilà donc là la clé a bien été 22:57 ajoutée il nous dit que tout est bon et 22:59 maintenant on va utiliser ce prompt 23:01 ajoute la possibilité de réserver donc 23:03 une session d'une heure avec un expert 23:04 pour un prix de 100 € en intégrant le 23:06 paiement avec stripe et on va devoir lui 23:08 partager davantage d'informations comme 23:10 je te l'ai dit tout à l'heure on va 23:11 récupérer l'id du produit et on va le 23:13 partager à lovable voici l'ID du produit 23:16 on le colle ici et ensuite il va falloir 23:17 que tu aillees ici sur la gauche sur 23:19 payment Link pour récupérer tout 23:21 simplement un lien de paiement pour 23:22 pouvoir effectuer le paiement avec la 23:24 carte bleue on va en créer un on va 23:26 sélectionner notre produit à savoir la 23:27 consultation d'une heure avec un expert 23:29 au niveau des options tu as pas besoin 23:31 de mettre plus tu cliques ici sur créer 23:32 un lien et tu vas récupérer le lien 23:35 encore une fois que tu vas partager à 23:36 lovable donc on va faire exactement 23:38 pareil on va mettre voici le lien de 23:39 paiement on le colle ici et on lance la 23:41 demande et là on va croiser les doigts 23:43 en espérant que ça fonctionne et voilà 23:44 j'ai une petite erreur mais normalement 23:46 on est bon et maintenant on va tester le 23:48 site final pour ça tu as simplement à 23:50 cliquer en haut à droite sur publish 23:52 évidemment je t'en ai pas parlé mais si 23:53 tu veux pouvoir effectuer des actions 23:55 directement sur le code tu peux utiliser 23:57 le connecteurvec avec gthub lovable 23:59 sinon c'est vraiment un outil qui 24:00 s'adresse aux personnes qui ne savent 24:01 pas coder mais bref on va publier tout 24:03 ça on clique ici on clique sur publish 24:06 et là en fait on va avoir un nom de 24:07 domaine qui est disponible pour pouvoir 24:08 accéder au site et on va pouvoir le 24:10 partager à n'importe qui et cette 24:12 personne va pouvoir accéder à notre 24:13 application directement avec ce lien 24:15 mais évidemment tu peux décider 24:16 d'ajouter ton propre domaine là pour 24:18 cette vidéo on va pas acheter de domaine 24:19 mais on aurait pu le faire derrière tu 24:21 cliques ici sur manage domaine et tu 24:23 peux ajouter ton propre domaine bref le 24:25 site est publié on va regarder tout ça 24:27 donc ça y est on a notre nouveau site et 24:28 on va voir si la réservation fonctionne 24:30 avec le lien de paiement on arrive sur 24:32 la page de consultation et on peut 24:33 réserver la consultation juste ici on va 24:36 tester voir si tout fonctionne on met 24:38 notre nom on va renseigner comme tout à 24:39 l'heure l'adresse email on va pouvoir 24:41 choisir une date pour la consultation je 24:43 vais prendre le 27 à 15h et on clique 24:45 ici pour réserver et payer et voilà on 24:47 est redirigé vers la page de paiement 24:49 donc évidemment j'ai pas design la page 24:51 je pourrais mettre plus d'information 24:52 pour rassurer le client mais on va 24:54 tester le process en entier on va 24:55 redonner l'adresse email juste ici on va 24:57 mettre un moyen paiement pour avoir une 24:59 carte test tu peux aller sur le site de 25:00 stripe et il te suggère des numéros de 25:02 cartes qui sont cohérents en fonction de 25:03 si tu veux une visa une MasterCard et 25:05 cetera donc j'ai copié le numéro on va 25:07 le coller ici pour la date on va mettre 25:08 quelque chose de cohérent juste 25:10 postérieur à la date actuelle on va 25:12 mettre un code à trois chiffres on va 25:14 mettre notre nom et on va essayer de 25:16 payer et normalement tout va bien se 25:17 passer voilà c'est enregistré donc 25:19 évidemment on est sur un compte de test 25:20 si on se retrouve sur le dashboard de 25:22 stripe tu vois que j'ai bien activé le 25:23 mode test mais si tu veux mettre ça en 25:25 place en production évidemment il y a 25:26 aucun souci ça serait exactement la même 25:28 chose là notre site il est disponible à 25:29 cette adresse avec toutes les 25:31 fonctionnalités l'intelligence 25:32 artificielle la possibilité de se 25:34 connecter les fonctionnalités réservées 25:35 à l'espace membre bref ça y est Paris 25:37 réussi on a créé un site complet de A à 25:40 Z grâce à lia en quelques minutes en 25:42 tout cas si la vidéo t'a plu tu peux la 25:43 liker et tu peux t'abonner à la chaîne 25:45 ça m'aide beaucoup si tous ces sujets 25:47 t'intéressent et que tu veux aller plus 25:48 loin tu peux nous rejoindre dans la 25:49 communauté disponible sur le lien dans 25:51 la description et si tu vas approfondir 25:52 avec une autre vidéo je t'invite à aller 25:54 regarder celle-ci tu vas voir tu vas 25:56 apprendre énormément de choses