CODER UNE APP COMPLÈTE AVEC ChatGPT 🤖💻

en ce moment tout le monde parle de chat GPT est-ce que liya va remplacer notre métier est-ce que les efforts qu'on a fait pendant des années pour devenir développeur vont s'anéantir du jour au lendemain ou est-ce qu'au contraire l'intelligence artificielle peut devenir un allié et faire de nous des surhomes la question est légitime et c'est pour ça qu'au lieu d'analyser bêtement deux ou trois réponse que chat GPT nous donne quand on lui demande de nous écrire des recettes de gâteau ou de coder une todo list la meilleure façon d'y répondre c'est de créer une application

complète en partant de zéro avec chat GPT du coup dans cette vidéo je me suis mis au défi de développer une app complète avec chat GPT en lui demandant des écrire le code à ma place pour faire une app fonctionnelle de A à Z et histoire de corser un petit peu les choses on va pas se contenter d'une simple application de todo list mais plutôt d'une app qui propose des recettes qu'on peut ajouter au panier et qui génère automatiquement la liste de courses avec les ingrédients regroupés par rayon pour optimiser ses courses bon déjà première

étape avant même de se lancer dans le code avec chat GPT il faut faire une maquette donc là j'ai pris un petit cahier de brouillon un stylo j'ai quelques idées de à quoi va ressembler l'application mais voilà on va quand même mettre ça au propre et voir ce que ça [Musique] donne donc voici ce que j'ai pour l'instant l'idée c'est d'afficher un premier écran avec la liste des recettes donc là par exemple on aurait les recettes qui sont populaires ici les recettes qui seraient créées par l'utilisateur et là les recettes sauvegardées ensuite dans chaque cellule

d'une recette on aurit bien sûr une photo il faut aussi ajouter le titre le budget le nombre d'ingrédients le temps de cuisson et le temps de préparation ensuite lorsqu'on clique sur une recette on se retrouve sur l'écran de détail avec bien sûr l'image toujours le titre les ingrédients et évidemment les étapes mais là où je trouve que l'application va vraiment apporter de la valeur ça va être sur cet écran- là la liste de courses où on aura évidemment la liste de tous les ingrédients qu'il va falloir acheter pour faire toutes les recettes mais là où

ça devient intéressant c'est qu'on va pouvoir les filtrer par recette ou par rayon par exemple je peux grouper les ingrédients pour la recette numéro une mais je peux aussi les grouper en fonction des rayons donc le rayon crèmer-ie boîte de conserve et cetera et cetera ce qui permettra d'augmenter sa productivité ce qui est toujours un petit peu l'objectif de mes vidéos alors là il faut faire attention parce que l'application comme ça a l'air très basique il y a deux ou trois écrans maximum mais ça c'est sur la maquette évidemment il va y avoir plein de

trucs à développer il y aura des petites cellules des écrans complémentaires pour par exemple ajouter une recette chose que j'ai pas mis dans le brouillon bref tout ça pour dire que je veux garder l'application la plus minimaliste possible pour l'instant parce que je sais qu'il y a plein de choses auxquelles on n' pas forcément pensé et qui vont venir s'ajouter lors du dével donc maintenant qu'on a une version très basique de la maquette ce qu'on va faire c'est demander à chat GPT de faire le front de l'application c'est-à-dire tout ce qui est visuel on va

commencer par ça dans un premier temps donc déjà on va lui demander de coder l'écran d'accueil avec les différentes recettes qui sont affichées de différentes manières d'ailleurs il y a quelques jours sur Instagram je vous ai aussi parlé de Master des France qui est le sponsor de cette vidéo master de France c'est le grand rendez-vous annuel de la tech il revient pour la 8e édition et ils organise un salon dédié aux nouveautés dans le monde de la tech c'est gratuit il y aura une vingtaine de conférences avec des experts dans leur domaine sur des sujets

comme lia le metéaverse le web 3.0 ou encore la cybécurité le salon se déroule à Paris Porte de Versailles le 9 mars et c'est l'occasion de découvrir tout ce qui se passe en ce moment dans la sphère francophone des start-up parce que oui il y aura aussi un espace dédié au start-up justement mais c'est aussi l'événement parfait pour faire du networking rencontrer des gens qui pourraient vous amener un job ou des clients si vous voulez vous lancer en freelance et donner un bon coup de boost à votre carrière de dev et surtout l'inscription visiteur est

gratuite donc franchement si vous êtes dispo n'hésitez pas à vous inscrire au salon ou au concours de code parce que oui durant ce salon il y a aussi le plus grand concours de code live de France il y a plus de 30000 € de récompense à gagner donc franchement pour le prix d'un billet de train ou d'un ticket de métro ça peut vite devenir rentable et si vous me dites je suis encore qu'un débutant je m'y connais pas trop je vous rassure tout de suite c'est ouvert à tout le monde et ça peut être justement

un bon défi technique et dans tous les cas venir rencontrer des experts ça peut être vraiment impressionnant toutes les informations sont dans la description vous n'avez juste qu'à cliquer sur le premier lien qui vous amènera vers le site de masterdeffance.com et vous allez voir ça se fait en quelques secondes alors on va tout de suite commencer par demander à chat GPT de définir le modèle d'une recette donc on va lui dire bah voilà dans une recette il doit y avoir une image un titre des ingrédients et cetera et [Musique] cetera bon donc voilà là il

m'a défini le modèle de la recette avec donc l'image le titre les ingrédients et cetera et cetera donc pour l'instant rien de très exceptionnel on va déjà copier ça et l'insérer dans le projet et maintenant qu'on a ce modèle on va essayer de créer plusieurs cellules qui vont afficher toujours la même même recette mais avec différents affichages pour bien dissocier les recettes qui sont en tendance on va dire des recettes que j'ai créé moi-même ou celles que j'ai sauvegarder je vais essayer de décrire de manière la plus complète possible à quoi je veux que cette

cellule ressemble comment sont affichés les différents éléments mais dans un premier temps ce que je vais faire c'est que je vais créer un tout petit composant qui sera en fait une étiquette qui va représenter par exemple le temps de cuisson le temps de préparation et cetera et cetera donc je vais lui demander de créer ce petit composant et ensuite ce composant là on va l'utiliser dans la cellule [Musique] ok bon là il m'a généré une vue qui l'appelle par exemple la belle view on verra si on la renomme après ça m'a l'air correct on va

faire un copier-coller directement de ce code là on va créer un nouveau fichier de type Swift i View qui va s'appeler justement la belle view on verra après si on le renomme et dedans ben je vais tout simplement mettre ce composant là alors on voit aussi qu'il m'a proposé de créer une instance de cet objet là bon bah on va la mettre on va voir ce que ça donne et là on voit qu'il m'a créé une étiquette qui est basique mais franchement stylé et là honnêtement j'ai même pas envie d'y toucher on garde le composant

tel qu'il est maintenant je vais lui demander de coder une cellule qui représente une recette en utilisant justement c'est la belle View pour indiquer le temps de cuisson de préparation et cetera et [Musique] cetera bon là il m'a défini la vue ce qu'on va faire c'est qu'on va copier-coller le texte on va analyser le code une fois qu'il sera sera placé dans Xcode bon alors là bien sûr je suis allé chercher une image d'une recette sur pixel parce que évidemment il allait pas me trouver une image de recette mais en tout cas on voit que

c'est pas mal et un truc qui est assez impressionnant c'est que là il a été cherché automatiquement les SF symboles alors pour ceux qui savent pas les SF symboles ce sont les icônes natifes d'Apple parce que dans la vue la belle viw il faut effectivement un titre mais aussi un icône qui est lui optionnel et ce qui est intéressant c'est qu'il s'est pas dit ah bah tiens comme il est optionnel je vais ne jamais en mettre mais plutôt il est allé chercher des icônes qui correspondent à ce qui est affiché on voit par exemple que

pour les ingrédients il a utilisé l'icône d'une liste pour le temps de cuisson l'icône d'une flamme et le temps de préparation un petit chronomètre donc ça déjà c'est assez impressionnant bon après on aurait plus qu'à jouer par exemple avec la taille et ajouter des ombres mais ce qu'on va faire au lieu de le faire à la main c'est lui demander tout simplement de modifier la taille de cette cellule et d'ajouter des bords arrondis ou encore une [Musique] ombre donc là on voit qu'il a réécrit le code en ajoutant notamment le corner radius le frame et

le Shadow donc je vais prendre tout ça et on va venir les mettre sur ma [Musique] vue donc là je continue de demander à chat GPT de me créer l'écran d'accueil donc avec les différentes cellules qui représentent les recettes qui sont populaires les recettes enregistrées et cetera et cetera donc là j'ai déjà deux cellules différentes celles qui seront affichées en premier et un autre design de cellules qui sont ici et maintenant l'objectif ça va être de toutes les afficher dans un écran [Musique] [Musique] d'accueil donc voilà ce qu'on obtient pour l'instant bon c'est pas hyper

beau au niveau du design mais à la limite ça c'est pas grave ça se modifie on a les recettes les plus populaires ensuite les recettes que j'ai créé moi-même et les recettes que j'ai ajouté en favoris maintenant qu'on a l'écran d'accueil où vont être affiché les différentes recettes il va falloir gérer ce qu'on appelle le Back donc le backend c'est là où vont être stocké les données moi je vais utiliser un service qui s'appelle firebase et donc pour ça on va stocker les données au format jison le format Jon c'est un simple texte formaté d'une

certaine manière donc ce qu'on peut faire c'est demander à chat GPT s'il est capable de me structurer un jison qui va contenir toutes les informations des recettes des utilisateurs et cetera et cetera donc ce qu'on va faire c'est dans un premier temps lister toutes les données qu'on va vouloir stocker sur le serveur et ensuite on va demander à chat GPT de Me structurer toutes ces données là en Jason [Musique] donc chat GPT vient de me proposer une structure de données pour le format Gon on va l'analyser un petit peu on voit effectivement qu'il m'a donné

les utilisateur les recettes mais également les différents ingrédients donc là on a par exemple quatre ingrédients des pommes la farine poulet de l'ail et cetera avec le rayon alors ce qui est intéressant c'est que on voit que chat GPT est aussi capable de catégoriser automatiquement des ingrédients donc là en soi pour l'instant on va pas forcément s'en servir mais pour ce qui va être de la génération de recettees on pourra par exemple lui demander de fournir des recettes et d'associer chacun des ingrédients à un rayon l'avantage c'est que le jour où l'application sera mise sur

les stor bah il y aura déjà des recettes fournies on aura pas besoin nous-même de les créer puisque chat GPT les aura créé et qu'on les aura inséré dans la base de données et puis on pourrait aussi imaginer plus tard utiliser l'API de chat GPT pour catégoriser automatiquement des ingrédients lorsqu'un utilisateur va créer une recette bon donc là je viens d'exporter le Jeson sur firebase alors j'avais pas remarqué mais il y avait une toute petite erreur dans le Jason il a écrit qu'ici la quantité c'était trois gousses alors trois gouses d'ail ok pourquoi pas mais

en fait ce qu'il faut savoir c'est qu'on peut pas écrire du texte comme ça il faut absolument que ce soit soit un chiffre soit du texte et donc si c'est du texte il faut que ce soit entre guillemets donc c'est pour ça que la première fois que j'ai lancé le code j'avais une erreur bon là on voit que c'est une erreur assez classique je pense que si j'avais demandé à chat GPT de la corriger il aurait réussi à le faire mais il aurait pu aussi l'éviter de lui-même maintenant il va falloir demander à chat GPT

de coder la partie de l'application qui va aller récupérer ces données là sur le serveur et donc pour ça je pourrais faire une bête requête en lui demandant va récupérer les données sur le serveur firebase mais le problème c'est que là il va rien comprendre il lui faut beaucoup plus d'informations sur notamment comment sont structuré les données ça ça tombe bien il les a puisque c'est lui qui l'a défini mais il va falloir aussi que je lui donne plusieurs étapes pour récupérer ces données parce que récupérer des données ça veut rien dire estce que moi

je veux récupérer que les ingrédients que les étapes de chaque recette les recettes au complet ou peut-être une seule recette en particulier donc ce qu'on va faire dans un premier temps c'est lui demander de récupérer par exemple toutes les recettes et pour ça on va lui demander de cré un objet qui s'appelle un repository parce que en général c'est cet objet là qui va se charger dans l'application de récupérer les données sur un serveur mais ça il faut encore le savoir et pour savoir que c'est le repository qui récupère les données il faut forcément s'y

connaître un minimum en développement donc là on voit que les résultats sont assez impressionnant en terme de code que m'a fourni chat GPT mais il faut garder en tête que c'est parce que j'ai su lui poser les bonnes questions au bon moment et le guider étape par étape donc quelqu'un qui n'aurait pas les mêmes connaissances en programmation et en développement n'aurait pas su lui fournir le même raisonnement donc on va essayer de lui demander de cré un repository qui récupère toutes les recettes donc là je lui ai demandé de se baser sur le Jason qui

m'avait fourni précédemment pour créer une classe qui contient une fonction pour récupérer toutes les recettes une autre pour récupérer un ingrédient en fonction de son identifiant ou encore une autre pour récupérer une recette en fonction de son identifiant bon là j'ai l'impression qu'il me crée une fonction qui va juste chercher dans une donnée qui a déjà été récupérée à chacun des identifiant pour les recettes ou les ingrédients c'est absolument pas ce que moi je vais obtenir parce que juste avec ce code là j'arriverai pas à me connecter à fireb base mais voilà le problème c'est

que je ne lui ai pas expliqué que mes données étaient stockées là-dessus donc on va essayer de lui expliquer tout ça et voir ce qui me répond bon là c'est déjà un peu mieux parce que effectivement il va créer une référence vers la base de données firebase alors là c'est clairement ce qu'il faut faire pour se connecter à firebase et ensuite il me crée plusieurs fonctions donc une pour aller chercher toutes les recettes une autre pour aller chercher un ingrédient en fonction de son identifiant et la troisième que j'avais demandé on voit qu'il utilise notamment

les clés qu'il avait utilisé dans la structure du jison donc celle que moi j'ai utilisé et que pour fa tout ça il utilise bien le package firebase donc on va déjà copier coller tout ça et voir ce que ça [Musique] donne donc là j'ai modifié le code pour d'une part le rendre un peu plus propre mais aussi pour lier ma propre base de données parce que chat GPT ne savait pas sur quelle base de données se liait donc ça je lui ai dit et maintenant on va appeler ces trois fonction pour voir s'il arrive bien

à récupérer les trois informations qu'on lui avait demandé et donc là si on fouille un petit peu dans la console on voit ement qu'il a été me chercher l'ingrédient numéro 1 ça c'est quoi ça doit être la liste des recettes effectivement donc on a une première recette de tarte pomme ensuite on en avoir une deuxième voilà ici avec le poulet rôti et cetera et cetera et puis je lui avais demandé aussi la recette avec l'identifiant numéro 1 donc ça c'est effectivement ce qu'il m'a trouvé ici donc on voit qu'il a réussi à aller chercher les

données que je lui ai demandé ça c'est assez incroyable et puis petit détail si on analyse un petit peu le code que chat GPT m'a fourni on voit qu'il y a une réelle intelligence sur ce qu'il manipule puisque là par exemple il a été cherché une recette en particulier et il l'a stocké dans une variable qu'il appelle receip donc pour une recette alors ça c'est bien beau mais c'est pas exactement comme ça que j'aurais fait moi en tant que développeur et la plupart des développeurs vous auraient dit la même chose parce que là en fait

il m'a retourné les différents objets que je lui ai demandé donc les recettes les ingrédients et cetera sous forme de tableau mais moi je veux pas les stocker sous forme de tableau je veux créer un modèle qui représente par exemple une recette et retourner une recette au lieu d'un tableau qui contient les différents éléments de la recette et pour ça on peut utiliser ce qu'on appelle des objets reste donc je vais pas rentrer dans les détails ici je vais juste lui demander s'il est capable de me créer ces modèles là en fonction des données sur

le serveur et voir s'il arrive à les incorporé dans le code qu'il m'a fourni jusqu'à présent bon là je lui ai demandé quelque chose d'assez complexe c'est-à-dire de créer un modèle en fonction de la structure du Jon qu'il m'avait donné mais en plus de ça d'utiliser ce modèle dans les trois méthodes du repo donc là il est en train de me créer effectivement la structure de la Reip qui est codable ça c'est obligatoire pour un objet rest et donc là on voit alors je découvre en même temps que vous he c'est assez bluffant qu'il est

en train de remplacer tout le code des méthode de la classe Reip repository donc celle qui s'occupe d'aller chercher les données en utilisant justement les trois modèles qu'il vient de me fournir et j'ai l'impression que le code est assez correct bon maintenant qu'il a fini je vais pouvoir copiercoller ça sur mon projet et on va voir ce que ça donne donc à ce moment-là j'ai apporté quelques petites modifications au Code qui a été fourni par chat GPT parce qu'il y avait quelques petites améliorations à faire et l'objectif maintenant ça va être d'afficher toutes les recettes

que l'on vient de récupérer puisque pour l'instant ce ne sont que des recettes fictives qui sont affichées donc ce que je vais faire c'est que je vais demander à chat GPT d'utiliser les fonctions qu'il vient de me coder qui permettent de récupérer les données sur le serveur et donc d'afficher les résultats récupérés c'est-à-dire les recettes sur un écran et de faire ça au chargement de la page alors comme d'habitude je lui pose une première question assez V et on verra si après il faut modifier le prompt pour lui donner un petit peu plus de détails

bon alors on voit qu'il m'a donné un résultat assez succin mais qui en soit peut fonctionner donc ça marche mais c'est pas comme ça qu'un développeur aurait [Musique] fait alors le problème du code qu'il m'a donné c'est qu'il provoque une erreur et c'est normal parce qu'on a oublié un bout de code je vous passe les détails et chat GPT a omis de m'expliquer qu'il fallait ajouter ce bout de code à tel endroit donc pour l'expérience on va réagir de manière naïve on va faire comme si on ne savait pas d'où venaent les erreur et puis

on va demander à chat GPT de résoudre cette erreur et donc là effectivement il m'explique bien que la classe Reip prepository doit se conformer au protocole bref encore une fois je vous passe les détails mais effectivement c'est la solution à l'erreur bon j'ai mis le code au propre j'ai fait quelques modifs pour que ce soit un peu plus clair et maintenant si je simule l'application on va voir qu'elle va aller chercher aussi bien les recettes qui sont en top mais également les recettes que l'utilisateur a créé et celles qu'il a sauvegardé donc les recettes que

vous voyez ici ce sont celles qui sont stockées sur sur le serveur c'est tout à fait fonctionnel ici je peux scroller et descendre alors évidemment je me suis pas embêté j'ai mis les mêmes recettes à chaque fois mais ça on va bien sûr le remplacer par la suite donc l'objectif maintenant ça va être de créer un deuxième écran sur lequel on va lister tous les ingrédients dont on a besoin dans les recettes de la semaine et sur cet écran on va devoir regrouper les ingrédients soit par recette soit par rayon comme ça dans le magasin

je pourrais aller chercher directement tous les fruits et légumes donc encore une fois on va demander à chat GPT de créer cet écran là et on va voir ce qu'il est capable de faire donc pour ça la première chose qu'on va faire c'est demander à chat GPT qu'il nous code un petit élément qu'on puisse activer ou désactiver comme ça on aura ces deux éléments les uns à côté des autres pour activer soit le groupe par catégorie soit activer le groupe par recette donc je lui ai donné tous mes critères à savoir que je voulais un

petit composant avec du texte et une case à cocher que la case à cocher devait être blanche et cetera et cetera je lui demandé aussi de mettre des bords arrondis avec une couleur de fond bon là il est en train de tout coder ce qu'on va faire c'est un copiercoller pour voir le rendu évidemment en swiftu et voilà ce que ça donne alors franchement le résultat est assez cool c'est exactement ce que je voulais quelque chose qui puisse être coché et décoché ce qu'il faut savoir c'est que cet élément là n'existe pas nativement en swiftui

donc il me l'a recréé alors maintenant je vais demander à chat GPT d'utiliser cet élment là et d'en utiliser deux plus précisément pour activer une ou l'autre des deux options et je vais également lui demander de faire en sorte que lorsque une des deux cases est coché l'autre soit obligatoirement décoché donc encore une fois j'ai essayé d'écrire le plus précisément possible ma vue je lui ai dit par exemple que là je voulais deux checkbx text view aligné horizontalement et de faire en sorte que si l'un éé activé l'autre devait forcément se désactiver donc là on

voit bien qu'il m' cré mascroll view avec une hashtag pour aligner les deux options horizontalement par contre il a pas du tout réussi à faire en sorte que si l'une des deux options était activée l'autre se désactivé automatiquement donc là on voit bien qu'on a les deux cases àocher aligné horizontalement avec soit le rectangle rouge soit le bleu mais le problème comme on le voit bien c'est que lorsque j'active l'option 1 l'option 2 n'est pas désactivée pour ça il faut modifier un petit peu le code et c'est ce que je vais faire tout de suite

bon j'ai un résultat assez satisfaisant j'ai réussi à regrouper les éléments en fonction soit des rayons soit de la recette donc voici ce que ça donne là on peut cliquer sur la case rayon pour avoir les différents ingrédients en fonction de leur catégorie ou sur la case recette pour avoir les ingrédients en fonction de leur recette alors évidemment là on a à chaque fois les mêmes ingrédients et les mêmes recettes sont reprises plusieurs fois donc pour vous prouver que ça marche bien je vais ajouter différentes recettes sur le serveur et là on verra que tous

les ingrédients sont bien regroupés en fonction de l'option [Musique] choisie donc voilà j'ai ajouté quelques recettes sur la base de données qui se retrouve du coup dans l'application évidemment j'ai demandé à chat GPT de me créer ces recettes là et je lui ai demandé de convertir ces recettes là en fichier jison que je peux directement ensuite uploader sur le serveur donc voilà ce que ça donne on a bien les top recettes qui sont ici et puis ici on a les recettes créées par l'utilisateur et les recettes favories donc au final on voit bien que chat

GPT arrive à nous fournir du code pour quasiment tout ce qu'on lui demande et en plus de ça la plupart du temps le code est correct donc on pourrait croire que l'intelligence artificielle est sur le point de remplacer le métier de développeur mais ce qu'il faut retenir de cette vidéo c'est qu'il y a eu deux conditions essentielles pour que tout le développement de l'application fonctionne correct le premier prérequis c'est qu'il faut absolument comprendre les différentes étapes du processus de développement d'une application si vous ne savez pas comment est architecturer le code d'un site web ou

d'une application mobile vous ne serez jamais en mesure de poser les bonnes questions au bon moment à lia et le deuxième prérequis c'est qu'il faut savoir poser les bonnes questions avec les bons termes dans le bon ordre sinon on voit très vite que l'ya peut fournir des réponses qui sont complètement à côté de la plaque et ces deux prérequis sont justement des compétences que seul un développeur peut avoir donc certaines a comme chat GPT sont certes capables de développer des applications mobiles complètes mais pas toute seule il faudra forcément un développeur en soutien lia se

positionne alors comme un outil un allié mais absolument pas comme un remplaçant et ça ne sera jamais le cas donc maintenant si tu veux apprendre à développer tes propres applications mobiles sur iPhone et iPad avec l'aide du nia ou pas je t'ai préparé une formation totalement gratuite d'une heure qui te permettra de créer tes premières applications sur iOS pour y accéder c'est tout simple il suffit de cliquer sur le lien dans la description tu auras juste à rentrer ton mail et tu recevras immédiatement accès à ta formation et maintenant si ça t'intéresse je t'invite à

regarder cette vidéo dans laquelle je te partage cette cette idée de business que tu peux créer avec une intelligence artificielle et tu verras que certaines d'entre elles vont t'étonner en tout cas merci beaucoup d'avoir regardé cette vidéo jusqu'au bout si c'est pas déjà fait je t'invite à mettre un gros pouce bleu et à t'abonner pour être au courant des prochaines vidéos publiées et en attendant moi je te dis à très bientôt