Comment créer des applications et des sites web avec l'IA | Guide pratique du codage Vibe

1. Bienvenue en cours: Nous vivons à une époque où lancement de produits rentables est plus accessible que jamais. Vous n'avez pas besoin d'un budget énorme. Vous n'avez pas besoin d'engager qui que ce soit, et vous n' avez certainement pas besoin de savoir comment coder. Cela signifie que vous êtes indépendant, que vous dirigez une agence, créez une start-up ou que vous avez simplement une idée de produit, mais que vous ne savez pas comment la créer Ce cours est pour toi. Salut, tout le monde. Je m'appelle Adi. Dans ce cours, je vais vous montrer comment créer une véritable application Web fonctionnelle, que vous pouvez réellement utiliser ou même vendre sans écrire une seule ligne de code. Maintenant, je ne suis pas un développeur principal, et créer quelque chose comme ça avec l'authentification des utilisateurs, vraies bases et une interface utilisateur propre nécessiterait normalement une équipe ou des mois d'apprentissage Mais aujourd'hui, nous allons le faire en moins d'une heure simplement en discutant avec l'IA, et il existe de nombreuses plateformes basées sur l'IA, et j'en ai testé plusieurs. Pour ce cours, nous utilisons HostingErhizons, et ce qui le distingue, c'est qu'il a été conçu par HostingERH. Nous travaillons dans le domaine de l'hébergement depuis plus de 20 ans et dessert près de 4 millions de personnes dans le monde entier . Ainsi, lorsqu'ils promettent de gérer les domaines d'hébergement et le dimensionnement, ils disposent en fait de l' infrastructure nécessaire pour le soutenir. Nous allons créer l'application étape par étape en guidant l' IA à l'aide d'instructions, en élaborant la structure de base, en affinant les fonctionnalités, en ajustant les mises en page et en améliorant les fonctionnalités au fur et Le projet, un gestionnaire de factures simple mais fonctionnel pour les indépendants Il permet aux utilisateurs de se connecter, de gérer les clients, générer des factures et même de les télécharger au format PDF Et oui, nous intégrerons Superbase pour l' authentification des utilisateurs et stockage sécurisé des données via l'interface AI Codage du backend requis. À la fin de ce cours, vous saurez comment parler à une IA créer des applications Web ou des sites Web utiles, comment structurer vos instructions pour obtenir de meilleurs résultats, comment intégrer des outils tels que Super Base sans compétences approfondies et comment créer rapidement de vrais produits Donc, cette idée sur laquelle vous vous asseyez, celle que vous n' arrêtez pas de dire que vous allez créer un jour, eh bien, vous pouvez la lancer aujourd'hui Plus d'excuses pour ne pas être assez technique ou pour ne pas avoir le budget ou l'équipe. Commençons. 2. Visite rapide de Hostinger Horizons: Bien, avant de passer en mode création d'applications, permettez-moi de vous présenter rapidement HostingerHorizon, afin que vous compreniez avec quoi nous travaillons Horizons, c'est comme avoir un développeur, designer et un rédacteur dans une seule IA vous suffit de discuter avec lui, et il crée de véritables sites Web et applications Web complets avec des bases de données, des comptes utilisateurs, le traitement des paiements, le tout. Il existe d'autres plateformes qui fonctionnent de la même manière, mais ce qui distingue Hostinger c'est que tout Vous n'avez pas besoin d'hébergement séparé, services de messagerie, de certificats SSL, Hostinger s'occupe de tout Ainsi, lorsque vous êtes prêt à vous lancer, vous pouvez gérer votre domaine et votre hébergement à partir de la même plateforme au lieu de jongler avec plusieurs services Cela dit, laissez-moi vous montrer comment commencer. La toute première chose à faire est créer un compte gratuit avec Hostinger Vous devez donc vous rendre sur tohstinger.com et cliquer sur Mon compte. Cela va ouvrir une page qui vous permettra créer un compte ou de vous connecter avec votre compte existant. Maintenant, je l'ai déjà fait. Une fois connecté, vous serez redirigé vers votre tableau de bord. Où vous pouvez contrôler l' intégralité de votre expérience d'hébergement. Maintenant, pour commencer à utiliser Horizons, vous pouvez cliquer sur Horizons ici, dans la barre latérale gauche Si vous avez déjà créé des projets avec Horizons, ils seront listés ici. Sinon, vous pouvez simplement cliquer sur Ajouter des projets. Vous pouvez également accéder directement à hoizons dothstingor.com, et vous pouvez Maintenant, l'interface ici est très, très simple. C'est ici que vous écrivez l'invite, et il existe en fait trois façons de communiquer avec l'IA. Vous pouvez le faire par chat. Vous pouvez le faire en téléchargeant une image ou en utilisant la voix, ce qui est plutôt cool Aujourd'hui, Horizons prend en charge plus de 80 langues. Vous pouvez donc penser et parler dans votre langue maternelle, ce qui est tout simplement fantastique. Maintenant, juste pour vous donner une idée de la façon dont cela fonctionne, créons une démo très simple, c' est-à-dire un simple projet de test juste pour avoir une idée des choses. Donc, ici, je vais vous dire créer une page de destination pour un SAS appelé Time Tracker, et je ne vais pas donner d'autres détails. Je vais donc appuyer sur Envoyer et l'IA vient de commencer à faire son travail. Il s'agit en fait d'une IA très communicative. Je viens de me dire : Allons-y. Je suis sur le point de créer une incroyable page d'accueil SAS pour le suivi du temps, me dira exactement ce qu'elle fait. Et cela va prendre un peu de temps, pendant que l'IA construit toutes les pages et tout le design. Et vous pouvez voir ici que cela fonctionne. Vous avez ici quelques conseils que vous pouvez suivre pendant que vous attendez. Et comme nous attendons, je tiens juste à vous dire que cette plateforme s'intègre en fait à de nombreux services tels que PayPal, Stripe, Super Base et même Google AdSens Cela vous donne donc vraiment la possibilité de créer des applications très complexes, et vous en aurez un avant-goût dans ce cours lorsque nous utiliserons intégration Superbase pour l' authentification des utilisateurs et le stockage sécurisé pour notre application de facturation D'accord, donc l'IA semble avoir terminé. Cela me dit que tout est fait, votre superbe outil de suivi du temps, page de destination SAS est prête à impressionner. Et voyons ce que cela a créé. Et permettez-moi de réinitialiser le zoom ici pour que nous puissions tout voir. Donc, juste comme ça, il a créé une page de destination à partir d'une phrase que je lui ai donnée , avec des animations. avez même des tableaux de prix ici, des boutons, et cela a tout créé, du texte aux images en passant par la mise en page. Et vous pouvez même passer en plein écran et le prévisualiser. Et vous pouvez également consulter la vue mobile. Il crée donc des mises en page réactives par défaut, même si je ne lui ai pas demandé de le faire, ce qui est plutôt cool C'est donc ce qu'il vous donne par défaut. Maintenant, c'est à vous de passer en revue ce qu'il a créé et commencer à changer les choses et à les adapter aux besoins de ce projet. De plus, si vous repérez des erreurs ou des défauts dans la mise en page, vous pouvez simplement les signaler à l'IA, qui fera de son mieux pour les corriger. Par exemple, si je fais défiler la page vers le bas jusqu'à la zone de tarification, nous pouvons voir que le badge le plus populaire se trouve sous la carte tarifaire, ce que je ne veux pas. Disons-le donc à l'IA. Je dois dire que j'ai repéré une erreur. Le badge le plus populaire dans la section des prix se trouve en dessous de la carte tarifaire, et il doit être placé au-dessus de celle-ci. Réparez-le, s'il vous plaît. Entrez, et maintenant l'IA interprétera cela, et elle fera de son mieux pour résoudre ce problème. Et il va réellement converser avec vous. Il vous le dira dans un tout petit moment. Tu l'as. Je vais tout de suite réparer le badge le plus populaire dans la section des prix. Je vais parfaitement me placer au-dessus de la carte cette fois. Voyons donc s'il le fait réellement. OK, alors l'IA m'a dit que tout était fait. Allons y jeter un œil. Et sûrement, il se trouve désormais au-dessus de la carte de prix. Et vous pouvez ensuite continuer et, vous savez, lui demander d'apporter des modifications supplémentaires. Par exemple, si vous souhaitez que cela se superpose en quelque sorte à la carte de prix, vous pouvez simplement lui demander de le faire, et cela devrait être une solution très simple Ou s'il y a d'autres modifications que vous souhaiteriez apporter, je ne sais pas, à la mise en page, aux couleurs, à la typographie, vous pouvez lui demander ce que vous voulez, gros, et c'est ce que vous ferez Maintenant, en supposant que vous ayez un produit qui vous convient, la prochaine étape est de le publier et permettez-moi d'en parler rapidement. Vous devez vous rendre dans le coin supérieur droit ici et appuyer sur Publier. Hostinger Horizons vous permet en fait de publier votre projet sur un sous-domaine temporaire gratuit, celui que vous voyez ici Pour moi, pour ce projet, c'est vert pâle, vrais chiffres parsèment le site d'hébergement site.com Et vous pouvez toujours cliquer dessus pour afficher votre site en direct. Et c'est formidable si vous souhaitez présenter votre travail à , je ne sais, à vos clients, à vos parties prenantes, à votre équipe, vous avez un lien en direct que vous pouvez utiliser pour leur montrer ce que vous avez fait. Vous pouvez également ajouter un domaine personnalisé. C'est pourquoi j'ai dit plus tôt que hostinger fait tout pour vous car même si vous n' avez pas de domaine actuellement, vous pouvez l'acheter via hostinger et l' appliquer Ici, vous n'avez pas besoin d'aller ailleurs pour le faire , puis de revenir et de faire tout le processus d' attribution de domaine Tout est intégré, et je pense que c'est un gros avantage. Et une autre chose que je voulais mentionner avant de conclure, si vous êtes bloqué à un moment donné, ou si vous avez besoin d'aide pour la configuration, vous pouvez obtenir de l'aide 7 auprès de l'équipe de service client d'Hostinger. N'hésitez donc pas à les contacter pour tout ce qui concerne l'assistance. Bien, maintenant que vous savez à quel point Horizons est intuitif pour les projets simples, abordons quelque chose de plus ambitieux comme notre application de gestion de factures Cela sera abordé dans la prochaine leçon. 3. Ce que nous allons construire: Comme je l'ai mentionné plus tôt, nous développons une application de gestion des factures, un projet qui aborde défis du monde réel tels que l'authentification des utilisateurs, bases de données et les intégrations de tiers Si vous pouvez le construire, vous pouvez construire à peu près n'importe quoi. Laissez-moi d'abord vous expliquer l'application que nous visons, puis je vais vous montrer comment créer une invite solide pour démarrer l'IA. C'est ce que j'ai écrit comme idée d'application de facturation. Vous savez, écrire rapidement mes pensées, vous pouvez l'imaginer comme un simple vidage de cerveaux, gros, simplement écrire rapidement des idées. Je veux donc créer cette application, comme un outil de facturation pour les indépendants, et je pense peut-être l'appeler Freelance Bill Il n'a pas besoin d'être sophistiqué, juste fonctionnel. Les utilisateurs doivent se connecter, peut-être via Superbse. Ils peuvent ensuite ajouter des clients et établir des factures. L'application a besoin d'un tableau de bord avec une liste de factures et peut-être quelques statistiques telles que le chiffre d'affaires total, nombre de clients, les factures de dépenses, etc. Chaque facture possède un numéro de préfixe. Il va s'incrémenter automatiquement, quelque chose comme INV, 001, 002, etc. Maintenant, lors de la création d'une facture, je souhaite pouvoir sélectionner le client dans une liste déroulante. Je veux avoir des articles qui ont une description, la quantité, le prix, comme toute autre facture. Le total de la facture devrait être mis à jour automatiquement. Je peux définir le statut de chaque facture sur « nouvelle », ce qui correspond au statut envoyé ou payé par défaut, et j'aimerais pouvoir télécharger le PDF de la facture. Et peut-être que plus tard, je pourrai ajouter fonctionnalité de courrier électronique afin de pouvoir envoyer la facture aux clients directement depuis l'application. J'aimerais aussi une page pour les clients. Je voudrais ajouter des clients de modification et de suppression, et j'ai besoin de quelques informations de base pour cela, telles que le nom, e-mail, le téléphone et l'adresse. Et j'aimerais également une page de paramètres où ils peuvent saisir les informations de leur entreprise et modifier le préfixe de la facture Mise en page épurée, peut-être avec une barre de navigation latérale, et très important, toutes les données sont liées à l'utilisateur connecté C'est donc un peu ce à quoi je pense pour l'application. C'est comme un plan approximatif. Ce n'est certainement pas une bonne idée parce que c'est un peu partout. Et lors de la rédaction d'instructions basées sur l'IA. Vous devez le faire d'une manière spécifique si vous voulez obtenir les meilleurs résultats. Et je vais vous donner quelques conseils et astuces ce sujet lors de la rédaction de l' invite pour ce projet. Créons donc un nouveau projet ou un nouveau document texte, devrais-je dire, pour répondre à l' invite, et commençons. tout premier conseil est de commencer par un objectif clair et de dire exactement ce que vous voulez construire et ce qu'il doit faire. Par exemple, créez une application Web permettant aux indépendants de gérer et d'envoyer des factures Ainsi, dans notre exemple, cette première phrase ressemblerait à ceci. Bonjour, j'aimerais créer une application Web pour les indépendants appelée Freelance Bill L'application devrait aider les utilisateurs à gérer les clients et les factures en un seul endroit. Description donc très claire de ce que nous voulons réaliser. Ensuite, nous devrions répertorier les principales fonctionnalités sous forme de courtes pièces scannables Et utiliser des puces est une excellente idée. Donc, pour les fonctionnalités de base, j'aimerais une connexion et une authentification sécurisées , utiliser Superbse, créer une vue, modifier et supprimer des factures et des clients, télécharger les factures au format PDF et enfin, toutes les données sont liées aux utilisateurs connectés Ce sont là les fonctionnalités les plus importantes. Ensuite, nous pouvons commencer à décrire les pages que nous voulons que l'IA crée. Et dans mon cas, ça ressemble à ça. Je veux donc une page de tableau de bord contenant un tableau montrant toutes les factures avec des actions de modification et de suppression. Et je veux également des statistiques générales qui me montrent le numéro de facture total, le chiffre d'affaires total, le nombre total de clients, ainsi que le montant en attente. La deuxième page est la page d'édition de création de factures ou le formulaire de facture, comme je l'appelle ici. J'aimerais donc qu'une liste déroulante sélectionne un client, ajoute plusieurs lignes pour la description, la quantité, prix unitaire, calcule automatiquement les totaux, génère automatiquement le numéro de facture avec un préfixe personnalisé, et je donne quelques exemples de ce que je veux dire par là J'aimerais également la possibilité de sélectionner le statut de la facture, nouvelle envoyée ou payée. Ensuite, sur la page des clients, je voudrais une liste de tous les clients avec la possibilité d'ajouter, de modifier et de supprimer. Chaque client a un nom, un e-mail, une adresse de téléphone. Comme vous pouvez le constater, je suis très détaillé dans ma description de ce que je veux réaliser et de ce à quoi je veux que cette page ressemble. Enfin, la page des paramètres, qui contient les informations personnelles ou professionnelles utilisées comme expéditeur sur les factures, ainsi que la possibilité de définir préfixe personnalisé pour les numéros de facture. Enfin, j'ai ajouté quelques notes techniques. J'ai dit d'utiliser Superbse pour l'authentification des utilisateurs et le stockage des données, et j'ai également ajouté quelques préférences de conception, si elles sont importantes, n'est-ce pas ? J'ai dit que le design doit être propre, moderne, réactif et utiliser une palette de couleurs claires. À la fin, j'ai dit : commençons par générer la structure de base et l'interface utilisateur, et je vais tout affiner étape par étape dans les instructions de suivi Ce n'est pas nécessaire, mais j'ai juste pensé que c'était un ajout intéressant. Voici donc à quoi ressemble l'invite finale. Nous sommes passés de cette idée d' application, qui n'était qu' un recueil aléatoire de pensées, à une invite plus structurée qui informe l'IA de ce que nous voulons créer et des objectifs de ce projet. fois cela fait, copions cette invite, et nous reviendrons à Horizons, nous la collerons et commencerons à créer notre application de facturation Allons-y. Bien que cela fonctionne, il y a une autre chose que je voulais mentionner, et vous pouvez la considérer comme une bonne pratique. N'ayez pas peur d' itérer, non ? Il n'est pas nécessaire que tout soit parfait dès le premier essai. Tu dois traiter ça comme une conversation avec la plateforme. L'IA, en gros. Commencez donc par jeter les bases de votre application, puis recommencez. Ajoutez ensuite des fonctionnalités, apportez des modifications. Comme je l'ai dit, traitez-le comme une conversation. C'est la meilleure chose que tu puisses faire. Et voici un autre bon conseil, en fait, de Hostinger cette fois Donc, pour de meilleurs résultats, faites en sorte que vos messages soient simples, courts et axés sur un changement à la fois. Ainsi, lorsque vous souhaitez apporter des modifications, n'écrivez pas de message disant : « Eh bien, modifiez ceci, puis modifiez cela, puis apportez une autre modification à ces éléments. Apportez une modification à la fois. Cela ne confond pas l'IA de cette façon. Et il vous sera également plus facile de tout déboguer et de tout tester, car lorsque vous et de tout tester, car créez des choses avec des plateformes comme celle-ci, vous constaterez que vous devez faire beaucoup de tests, n'est-ce Une fois que l'IA a apporté un changement spécifique que vous demandez aux deux, vous devez tester et voir si cela a été correctement implémenté. Et dans certains cas, vous devez tester et voir si cette modification particulière n'a pas affecté d'autres parties de l'application ou leurs fonctionnalités. Donc, vous savez, c'est un processus, mais il vaut mieux, vous savez, engager une équipe, dépenser des budgets énormes pour créer une application et, surtout, et, surtout, passer des semaines et des mois à créer quelque chose. Avec ce type de vibe coding, je suppose qu'on peut l'appeler, c'est très facile de le faire soi-même Nous avons donc presque terminé là où l'IA a presque fini de jeter les bases de l'application. Je suis vraiment curieux de voir ce qu'il a construit. OK, tout est fait, il semble que votre application de facturation indépendante soit prête à fonctionner. Faites-moi savoir si vous souhaitez des ajustements. D'accord, nous voyons donc une page de connexion très simple, en gros, parce que dans l'invite que je lui ai donnée, j'ai dit que, accord, les utilisateurs doivent être connectés pour faire quoi que ce soit sur l'application. La première étape logique consiste donc à demander aux utilisateurs de se connecter. Nous pouvons donc saisir notre e-mail, notre mot de passe, et si nous cliquons sur ces liens, ils passeront simplement de la connexion à la création de compte. Nous avons également une petite introduction à l'application avec les fonctionnalités de base, en gros. Cela ne fonctionnera pas pour l'instant car nous n' avons pas d'intégration Superbase active L'IA m'a même dit que lorsque vous serez prêt à passer à Super Base pour une authentification et un stockage de données sécurisés, vous devrez suivre ces étapes. Et si on faisait ça ensuite ? Parce que, vous savez, intégrer Super Base est probablement la chose la plus technique que nous ayons à faire pour cette version. Je vous verrai donc dans la prochaine leçon. 4. Intégrer Supabase et réaliser un test initial: OK, alors Super Base, c'est quoi ? En termes simples, il s'agit d'une plateforme de développement. Vous trouverez plus d' informations à ce sujet sur superbs.com Nous n'allons pas entrer dans détails car honnêtement, je n'en sais pas grand-chose non plus. De mon côté, je ne suis pas un développeur backend, donc je n'ai jamais utilisé Supabse Cependant, avec des outils d'intelligence artificielle tels que Hosting ou Horizons, cela ne m'empêche pas de créer une application avec eux, car la connecter à votre projet Horizons est très simple. Voici donc comment procéder. Vous êtes de retour ici sur la plateforme Horizons, et vous devez passer en haut à droite où il est écrit « intégrations Vous devez cliquer dessus et sélectionner SupaBase. Il vous indique même que vous pouvez ajouter des inscriptions d'utilisateurs, des connexions, du stockage de données et d'autres fonctionnalités dorsales Alors allez-y et cliquez ici, il vous sera demandé de sélectionner une organisation et un projet. Maintenant, j'en ai déjà défini certaines ici car j'ai déjà fait quelques tests avec Super Base. Mais lorsque vous l'utiliserez pour la première fois, il aura un aspect différent pour vous. Essentiellement, ce que vous devez faire c'est créer une organisation. Pour moi, cela s'appelle Hostinger Horizons Org. Tu peux le nommer comme tu veux. Une fois que vous l'avez créé, vous pouvez créer un nouveau projet. Faisons-le ensemble dès maintenant, et cela vous mènera au site Web de Super Base où vous devez vous connecter. Si vous n'avez pas de compte, il vous suffit d'en créer un. C'est gratuit. Je vais cliquer sur S'inscrire maintenant saisir une adresse e-mail et un mot de passe, puis cliquer sur S'inscrire. Nous devons donc maintenant vérifier notre courrier électronique pour confirmer l'inscription. L'e-mail ressemble à ceci. Il vous suffit de cliquer sur Confirmer l'adresse e-mail. Et à ce stade, Super Base va en fait me demander de créer une nouvelle organisation. Bien sûr, allons-y. Je vais parler de l'équipe Audi. Personnellement, pour le moment, je peux sélectionner le plan gratuit. C'est idéal pour la plupart des personnes qui commencent tout juste. C'est plus que suffisant. Cliquez donc sur Créer une organisation. Ensuite, je vais sélectionner cette organisation, et je vais appeler le projet Freelance Bill. Et nous pouvons définir un bon mot de passe ici, qui sera utilisé pour la base de données elle-même. Vous pouvez ensuite sélectionner la région la plus proche de vos utilisateurs, optimiser les performances. Je suis basé en Europe, je vais donc simplement sélectionner Central U , puis créer un nouveau projet. OK, cool. Donc, une fois que cela sera fait dans Superbse, nous devrons retourner à l' hébergement de nos Horizons, et nous devons actualiser ce projet Ensuite, nous devons revenir à Integrations . Cliquez sur Sup Base. Ensuite, nous cliquerons sur Ajouter une autre organisation, car je souhaite ajouter celle que nous venons de créer. Et là, je vais voir une fenêtre contextuelle demandant d' autoriser l'accès à l'API pour Hosting ou Horizons, et je vais sélectionner l'organisation de l'équipe Addis que je viens de créer Je vais donc cliquer sur Autoriser Hosting Horizons. Et maintenant, cette nouvelle organisation est connectée. Et je peux voir le projet indépendant Build, et je vais simplement cliquer sur Connect ici dans la barre latérale OK. Et il va demander une confirmation, et je vais cliquer à nouveau pour me connecter. Ce faisant, j'ai donné un message à l'IA et je lui ai dit connecter ma facture SuperBasePject, indépendant, à mon site Web, et j'ai reçu Bien entendu, je connecterai immédiatement votre SuperBasePject à Freelance Bill, ce qui permettra une authentification sécurisée des utilisateurs et stockage de données robuste pour Et en ce moment, l'IA met tout en place pour vous. Il définit les tables de base de données, vous savez, pour les factures, les clients et les paramètres. Il intègre l'authentification Super Base pour une connexion et une inscription sécurisées, et il passe du stockage local à Superbase pour la gestion de toutes les données C'est bon. Maintenant, tout devrait être entièrement connecté, je devrais avoir accès à mon application, et je devrais pouvoir créer des comptes et me connecter. Voyons donc si c'est le cas. Commençons par aller sur la page d'inscription. Je vais saisir mon nom complet et Pod. Et je vais entrer mon adresse e-mail en tant qu'Adi Pordla gmail.com, et je vais entrer un mot de passe, et je vais Voyons donc si cela fonctionne, si cela fonctionne. Il m'a donné une notification disant que, oups, il avait disparu. Compte créé, en gros. Passons maintenant à la page de connexion. Cliquez sur Se connecter. Et il est écrit que l'e-mail n'a pas été confirmé. D'accord, nous avons également quelques erreurs dans la plateforme. Il dit que c'est une super erreur de base. Il indique que l'e-mail n'est pas confirmé. Voyons si j'ai vraiment reçu un e-mail de confirmation. Et je l'ai fait. Il dit, confirmez votre inscription, alors confirmons-le Maintenant, je reçois une erreur de refus de connexion d'un hôte local. D'accord, c'est en fait courant avec Super Base. J'ai fait quelques recherches sur le sujet, et c'est l'un des problèmes que vous pourriez rencontrer lors de la construction de quelque chose comme ça. Alors, voici comment y remédier, non ? Vous revenez à Super Base, vous passez à l'authentification. Vous allez à la configuration de l'URL, et vous pouvez voir ici qu'elle est actuellement configurée sur l'hôte local 3 000. Vous devez remplacer cette adresse par l'adresse réelle de votre site Web. Pour cela, revenons à Horizons. Oui, nous publions ceci pour obtenir cette URL, et, vous savez, nous pouvons l'ouvrir et consulter notre site. Et nous pouvons le copier sans la partie connexion, et nous pouvons revenir à Super Base. Nous pouvons le coller et enregistrer les modifications. OK, alors nous devons renvoyer cet e-mail de confirmation. Le problème est qu'il n'est envoyé qu'une seule fois. Voici donc ce que nous allons faire. Nous allons passer à la gestion des utilisateurs dans Super Base, et je vais sélectionner cette option, et je vais dire supprimer un utilisateur. Nous revenons donc à notre plateforme. Faisons une mise à jour rapide. Et inscrivons-nous, mais utilisons une adresse e-mail différente cette fois. Je vais donc simplement utiliser celui-ci et créer un compte. OK. Rien ne s'est encore produit. Jetons un coup d'œil à Super Base pour voir si oui. Cela a été ajouté, et nous devons maintenant vérifier le lien de vérification dans l'e-mail . Alors faisons-le. Et bien sûr, nous avons un lien de confirmation pour cette adresse e-mail. Nous allons confirmer. Cela nous a donc menés quelque part. Si nous revenons à Super Base et que nous actualisons, nous devrions maintenant voir cette connexion lorsque cela se produira. Maintenant, l'e-mail est confirmé et nous devrions pouvoir nous connecter à l'application. Revenons donc à Horizons ici. Nous allons cliquer sur Se connecter. Alors maintenant, une erreur d' application Web est détectée. Demandez à Horizons de corriger cette erreur pour vous. Demandons-lui donc de le réparer. OK, donc apparemment, tout est corrigé, et cela me dit que la mise en page utilise maintenant correctement l'authentification Superbase, et j'ai nettoyé les anciens fichiers Eh bien, que diriez-vous de ça ? Nous avons donc ici une facture indépendante, un tableau de bord, clients, une nouvelle facture et des paramètres. OK, puis quelques informations sur le compte. Mais avant de poursuivre, j'aimerais tester les fonctionnalités de connexion et de déconnexion pour voir si elles fonctionnent correctement. Je vais donc cliquer sur Se déconnecter. Cool. OK, ça me ramène à la page de connexion. Choisissons donc mes informations d'identification ou saisissons mes informations d'identification, une fois de plus, connectez-vous. Et oui, le succès. Cela semble donc très bien fonctionner. Et c'est en fait un peu trop brillant pour moi. Donc, avant de poursuivre, changeons notre déclaration d'origine et créons cette application en utilisant un schéma sombre. Je vais donc parler à nouveau à l'IA, et je dois dire que j'ai changé d'avis. Veuillez utiliser une palette de couleurs sombres pour l'application avec, disons, un accent vert menthe, parce que c'était un peu trop clair pour mes yeux. Cela nous donne donc également l' occasion de tester ce type de modifications de conception car modifier un schéma de couleurs pour une application comme celle-ci est une entreprise assez importante. Cela prend un certain temps si vous le faites à la main, comme vous pouvez le constater, l'IA le fait en très peu de temps. Cela ne fait même pas une minute que je lui ai demandé de le faire. Voyons donc ce qu' il en est ressorti. OK, touche finale. Et juste avant que cela ne soit fait, il m'a dit qu' il semblerait qu' une erreur embêtante glissée dans les fichiers JSX du client, et je vais tout de suite le démêler et vous remettre il m'a dit qu' il semblerait qu'une erreur embêtante s'est glissée dans les fichiers JSX du client, et je vais tout de suite le démêler et vous remettre en parfait état de fonctionnement. Intéressant Ainsi, pendant qu'il générait, tout en modifiant le schéma de couleurs, il a remarqué cette erreur de syntaxe dans l'un des fichiers et l'a corrigée. C'est bon. C'est donc ce que nous avons obtenu de bien meilleurs, mais ce n'est pas parfait, évidemment. Le designer et moi remarquons immédiatement les choses qui devraient être corrigées, mais, vous savez, je ne lui ai pas vraiment donné indications précises sur ce à quoi cela devrait ressembler. Je viens de le lui dire, d'utiliser une palette de couleurs sombres, et c'est ce qu'il a fait. Et ça a l'air parfait pour le moment. J'aime aussi le choix des couleurs. C'est sympa. Nous avons ici des animations très subtiles. Et oui, il s'agit donc du tableau de bord indiquant le total des factures, les revenus, le montant en attente des clients. Cool. Clientèle. Aucun client n' a encore la possibilité d'en ajouter. Nouvelle facture. Je peux sélectionner le client dans cette liste. Je peux sélectionner le statut, nouvel envoi est payé, comme je l'ai indiqué dans l'invite. Nous avons une date de facturation. Nous avons une date d'échéance, cool, puis les rubriques, et je peux en ajouter autant que je le souhaite. Et en cliquant sur Annuler, je reviens au tableau de bord, puis aux paramètres, aux informations sur l'entreprise, à l'adresse e-mail, à l' adresse professionnelle, aux paramètres de facturation. J'ai le préfixe du numéro de facture. Puis-je créer une facture ? Je dois d'abord créer un client, en fait. Ajoutons notre premier client. Disons client 1, e-mail, client one@gmail.com. Téléphone, adresse, adresse du client. Ajoutons-le. Cool. Cela a donc été ajouté. Ensuite, revenons au tableau de bord, pour créer une facture. OK, il est écrit : « Aucun client n'a été trouvé, aucun client n'a été trouvé ». Un premier test montre donc que la majeure partie fonctionne, mais nous avons du travail à faire nous-mêmes. Revenons en fait à Super base, et nous allons passer à la base de données. Et ici, il nous montre en fait la structure de nos bases de données. Nous avons donc un tableau pour les factures. Nous en avons un pour les paramètres, et nous en avons un pour les clients, et vous pouvez voir comment ils sont interconnectés. Ainsi, par exemple, chaque facture a un identifiant client, accord, qui est directement «   laissez-moi vous le montrer ». L'identifiant du client dans le tableau des factures est lié à l'idée du client réel. Oui, intéressant. OK, donc tout semble aller bien ici. Revenons aux tables. Et si nous accédons aux clients ici et que nous les visualisons dans l'éditeur de tableaux, oui, nous pouvons voir le client que nous venons de créer dans l'application. Nous pouvons voir le nom, l'e-mail, le téléphone, l'adresse et la date de création. Le lien avec Superbase fonctionne donc très bien. Et c'est tout ce que je voulais voir pour le moment. Nous avons probablement terminé la partie la plus compliquée du processus, savoir l'intégration de la super base. Maintenant, affinons simplement l'application étape par étape et apportons les modifications nécessaires pour qu'elle atteigne l' état souhaité. Nous allons commencer à le faire dans la prochaine leçon. 5. Correction des erreurs et affinage de la mise en page: OK, les objectifs de cette leçon sont donc de tester les éléments suivants. Puis-je créer des factures correctement et les associer à des clients spécifiques ? Puis-je modifier les paramètres correctement et les appliquer aux factures ? Et puis-je associer factures et les paramètres des clients à l'utilisateur connecté, ce qui signifie que si je crée un nouvel utilisateur, données de cet utilisateur seront-elles totalement différentes ? Ce sont les éléments que je veux tester dans cette leçon. Commençons donc par les factures. Comme je vous l'ai montré dans la leçon précédente, nous avons créé un client avec succès, mais lorsque nous voulions créer une nouvelle facture, nous ne pouvions pas sélectionner un client dans la liste déroulante. Disons-le donc exactement à l' IA. Lorsque vous créez une nouvelle facture, la liste déroulante des clients est vide, même si j'ai créé des clients avec succès, et c'est tout. L'IA me dit : « Hé, vous l'avez remarqué, toutes mes excuses Il semblerait que j'ai laissé un fil débranché entre les données de votre nouveau client Superbase et le Vous savez, j'aime la façon dont cette IA communique. C'est très poli, mais il y a parfois un sens de l'humour. Attendons donc qu'il corrige cette erreur. Et remarquez que je ne lui ai demandé qu'une seule chose par invite. C'est une bonne pratique que je vous encourage également à utiliser. Alors DAI me dit que tout est réglé. Alors voyons voir, cliquez sur Nouvelle facture, sélectionnez le client, et bien sûr, cela me permet maintenant de sélectionner un client. Créons un nouveau client ici, le client 2. Ajoutons cela. Cela a été ajouté avec succès. Revenons maintenant à la nouvelle facture et nous pouvons choisir entre le client 1 et le client 2. Génial OK. Donc, premier client, nouvelle facture, date d'aujourd'hui, date d' échéance de la facture. Disons les articles de fin de mois. Disons, je ne sais pas, une vidéo YouTube. Une seule quantité, disons 100$. Pouvons-nous également l'utiliser pour incrémenter ? Nous le pouvons. Mais la valeur d'incrément ici n'est pas correcte car elle incrémente simplement les décimales C'est quelque chose que nous devons corriger, mais ce n'est pas urgent. Nous pouvons également mettre à jour la quantité ici. Deuxièmement, et il met automatiquement à jour le total, ce qui était l'une de mes exigences. Cool. Créons donc une facture. OK. La nouvelle facture a été créée avec succès, mais elle ne m'affiche pas réellement la facture ici dans la liste. Disons-le. Je dois dire que j'ai créé une facture, mais l'application ne me l'affiche dans la section des factures récentes. Et, vous savez, j'ai fait une petite faute de frappe en disant que cela n'a pas vraiment importance avec l'IA parce qu' elle comprend ce que vous essayez de dire Euh, hein. Apparemment, le tableau de bord recherche toujours les factures dans l'ancien emplacement de stockage local au lieu de la nouvelle base de données Superbse que nous venons de créer Et c'est pourquoi votre nouvelle facture ne s'affiche pas Cool. Cela vous indique donc également que c'est pourquoi cela ne fonctionne pas. Laisse-moi arranger ça. J'aime bien ça. C'est cool. Et ça l' a réparé. Super sympa. Factures récentes, je peux maintenant voir la facture que je viens de créer. Cool. Créons-en un autre. Cette fois, sélectionnons le client 2. Nouveau. Fixons la date limite pour je ne sais pas, le 7 août. Ajoutons deux rubriques cette fois. Faisons donc un cours YouTube pour 2 000$, et ajoutons un service de marketing, je ne sais pas Un pour 1230$ (9$). OK, le total est donc calculé correctement. Créons une facture. Bien. OK, cela a donc mis à jour la liste des factures récentes. Il a également mis à jour le montant en attente ici, ce qui est une bonne chose. Il s'agit donc de la somme totale des factures. J'ai deux clients, le chiffre d'affaires total est nul. Cela sera mis à jour, je pense, lorsque les factures seront marquées comme payées. Cela dépend de la manière dont l'IA a élaboré la logique, et j'ai deux factures au total. Cool. OK, je peux donc créer de nouvelles factures. Je peux créer de nouveaux clients. Voyons si nous pouvons modifier une facture ou un client en particulier. Commençons par les clients ici. Disons que je vais mettre à jour l'adresse du client deux, et que je vais dire l' adresse longue du client deux au lieu de l'adresse. Donc, mettez à jour le client, les informations du client ont été mises à jour avec succès. C'est une bonne chose. Maintenant, si je reviens au tableau de bord et que je modifie la facture 2, disons que je change le cours YouTube à 5 000 et que je mets à jour la facture. Et oui, cela semble très bien se mettre à jour. Si je le modifie et que je change de client, cela fonctionne également très bien. Changeons à nouveau le client et mettons à jour le statut en «   envoyé » au lieu de « nouveau ». Oui, ça marche aussi, et ce qui est bien, c'est que l'IA utilise ces pilules ici colorées différemment selon le statut. C'est un très beau changement. Modifions la première facture, marquons-la comme payée et voyons comment cela se reflète. D'accord, cela est maintenant reflété en vert et l'IA a maintenant mis à jour le chiffre d'affaires total. Le revenu total est donc constitué des montants des factures payées, tandis que le montant en attente, comme il se doit, est basé sur le montant des factures envoyées ou nouvelles. Et ce qui est intéressant, c'est que je ne l'ai pas vraiment précisé à l'IA. Je ne lui ai pas demandé cette fonctionnalité, mais il le savait, non ? Sans que j'aie à lui dire exactement comment cela doit fonctionner, c'est très intuitif. Il savait donc exactement comment cela devait fonctionner. Cela rend les choses tellement plus faciles lorsque l'IA vous rencontre à mi-chemin. Bien, revenons aux objectifs de cette leçon. J'ai dit que je voulais tester si, vous savez, ils peuvent être modifiés, ce qui est possible. De plus, si les paramètres font correctement leur travail. Nous allons donc réellement modifier ces paramètres. Commençons par les paramètres de facturation car par défaut, le préfixe de facture est INV, mais changeons-le en AD, disons, ou ADR Et sauvegardons les paramètres. Maintenant, lorsque je crée une nouvelle facture, je suis curieuse de voir le numéro de facture et le préfixe, car normalement, dans ma tête, le numéro de facture devrait automatiquement augmenter en fonction de la dernière facture, mais je devrais maintenant utiliser le nouveau préfixe que Et je ne l'ai pas précisé à l'IA, mais je suis curieux de voir si elle l' a réellement implémentée elle-même. Sélectionnons donc le client deux et disons, bla, avec un prix de dix, créons la facture. Waouh, cool. OK, cela a donc créé la facture ADR 003. Il a donc non seulement utilisé le nouveau préfixe que je lui ai donné, mais il a également repris le numéro de facture là où il s'était arrêté Super cool. OK, supprimons réellement cette facture. Êtes-vous sûr de vouloir supprimer cette facture ? Cette action ne peut pas être annulée ? OK. Mais pourquoi est-ce que je reçois une notification dans le navigateur plutôt qu'une notification intégrée à l'application ? Alors, cliquons sur «   OK, la facture a été supprimée avec succès ». Alors maintenant, si j'en crée un nouveau, disons un client. Oh, saisie non valide. Je n'ai pas vraiment pu le voir, mais je pense que c'est parce que je n'ai pas pu sélectionner la date d'échéance. OK. Revenons donc aux erreurs. Erreur de super base. Copions ceci. Et disons à l' IA de résoudre ce problème. J'ai reçu cette erreur, et je vais lui demander de faire de la date d'échéance un champ obligatoire car j'ai oublié de choisir la date d'échéance. Donc, à cause d'une erreur. Et pour éviter cela, je ne dois pas nécessairement compter sur l' IA en permanence. Je peux le dire, Hey, rendez ce champ obligatoire. Cela devrait régler tous les problèmes que nous pourrions avoir à l'avenir. OK, donc apparemment, tout est fait, l'erreur est corrigée et la date d'échéance est désormais un champ obligatoire, comme vous le vouliez, me l'indique l'IA OK. Voyons si ces ajustements fonctionnent. Créons donc une nouvelle facture. Oui, sélectionnez le client. La date d'échéance est désormais requise, mais que se passera-t-il si je clique sur Créer une facture maintenant ? OK ? Il me dit donc, veuillez remplir ce champ. Il a en fait automatiquement renseigné la date d'échéance. Intéressant OK. Alors faisons-le. C'est ce que nous allons faire. Créez une facture. OK, c'est donc ce que je voulais tester à l'origine. Si je supprime une facture, par exemple la facture 003, et que j'en crée une nouvelle IA utilisera-t-elle toujours le préfixe 003, ce qu' il devrait être, ou passera-t-elle à 004, car nous avions déjà une facture portant ce numéro, mais elle a fait le bon choix. Il a utilisé 003. Et créons-en une autre car j'étais curieuse de connaître cette date d'échéance. Apparemment, cette date d'échéance est automatiquement renseignée avec le dernier jour du mois en cours Ce qui me convient, je suppose. Et je pense que pour le moment, cela fonctionnera très bien. Je peux donc ajouter, modifier et supprimer des clients, je suppose. Je n'ai pas réellement testé la suppression du client. Supprimez donc. Oui, donc ça marche. Je peux donc modifier la suppression chez les clients et les factures, et je peux modifier le préfixe en conséquence Maintenant, la dernière chose que je veux tester est de savoir si les données créées ici, les paramètres des factures des clients, sont liées à l'utilisateur connecté. Et pour cela, il nous suffit de créer un nouvel utilisateur et de créer de nouvelles données pour celui-ci. Et lorsque nous changeons d'utilisateur, nous ne devrions pouvoir voir les données associées à un utilisateur spécifique que si cela a du sens. Alors déconnectons-nous. Sympa. Cela a également mis à jour l'écran de connexion. J'aime bien ça. Inscrivons-nous, créons un nouveau compte ici. Et je vais juste utiliser une adresse e-mail aléatoire que j'ai pour les tests, et je vais créer un compte avec elle. Alors maintenant, je devrais recevoir un e-mail. Ouais, ça marche. Confirmez. Alors maintenant, connectons-nous avec ces informations. Nous n'avons donc aucune facture. De toutes sortes. Nous n'avons aucun client. Et lorsque nous passons aux paramètres, tout est vide, sauf les paramètres, disons que le numéro de préfixe de facture est ADR, mais c'est quelque chose que j'ai ajouté récemment pour l'utilisateur précédent Alors allons-y et réglons ce problème. Et je vais juste dire que lorsqu'un nouvel utilisateur est créé, veuillez utiliser INV comme préfixe de facture par défaut Bien, voyons voir si cela fonctionne. Il s'agit donc d'un nouvel utilisateur, et nous avons sûrement l'INV. Eh bien, c'est sympa. Il a également rempli automatiquement l'e-mail que j'ai utilisé pour m'inscrire, et je ne pense pas qu'il s'y trouvait auparavant, n'est-ce pas ? D'accord, mais nous avons également une erreur ici. Nous avons une erreur de super base, alors corrigeons-la. Et juste un petit conseil. Si vous souhaitez écrire plus d'une ligne dans cette zone, vous pouvez appuyer sur Shift Enter pour passer à une nouvelle ligne. Si vous appuyez directement sur Entrée, l'invite sera envoyée à l'IA. Bon, alors revenons aux paramètres, et nous avons une autre erreur, des valeurs clés dupliquées. OK, disons-le. Maintenant, j'ai ça. Voyons ce qu'il dit. Indique une erreur de clé dupliquée. Il semble que nous ayons une condition de course classique. Je ne sais pas ce que cela signifie. fois mon déclencheur de base de données et la page des paramètres, nous essayons de créer un profil par défaut pour vous en même temps. Euh, hein. Toutes mes excuses pour le petit embouteillage Très intéressant Donc, il me dit que tout sera réparé en un clin d'œil. La page des paramètres se charge désormais sans problème. Voyons si c'est le cas. Hé, c'est le cas. C'est très impressionnant. OK. C'est donc ce que je voulais tester. Créons un nouveau client, et je vais dire client de démonstration 1, client de démonstration one@gmail.com, et je vais l'ajouter. Ensuite, créons une nouvelle facture ici pour le client de démonstration 1. Appelons cela le design du logo. 1 000$ pour créer une facture. OK, donc pour cet utilisateur pour l'utilisateur Audi, j'ai la facture 001 pour le client de démonstration 1 de 1 000$, n'est-ce pas Donc, si nous nous déconnectons maintenant et que nous utilisons mon autre compte, toutes les données sont désormais correctement associées. J'ai mon client 1 et client 2 que nous avons créés initialement. J'ai les trois factures que j'y ai créées. Et pour ce qui est des paramètres, oui, j'ai le préfixe INV, même si je me rappelle l'avoir changé en ADR Alors maintenant, si je crée une nouvelle facture, attends. Nous allons donc changer le préfixe ici en ADR. OK. Donc maintenant, si je crée une nouvelle facture, ce sera ADR 004. OK. Alors maintenant, si je me déconnecte et que je me connecte à l'autre compte, que je vais ici et que je change le préfixe de la facture en « Je ne sais pas », disons, HHH, sauvegardez les modifications et je crée une nouvelle Oui, tu vois, ce n'est pas correct car il n'utilise pas ce nouveau préfixe de facture Alors laisse-moi te le dire. Supposons que le nouveau préfixe de facture modifié ne soit pas utilisé lors de la création d'une nouvelle facture Comme vous pouvez le constater, tout ce bâtiment d'IA est très conversationnel, n'est-ce pas ? Vous lui demandez de faire quelque chose, vous le testez. Si cela ne fonctionne pas, vous lui dites de recommencer. Tu testes d'autres choses. Si cela ne fonctionne pas, vous lui demandez d'apporter des modifications. C'est tout ce qu'il y a en gros. Mais ce qui est bien, c'est que, bien sûr, vous n'avez pas besoin de savoir comment écrire du code. L'IA le fait pour vous. Euh, hein. Le problème, apparemment, était que le formulaire de facture examinait toujours les anciens paramètres mis en cache au lieu de récupérer les derniers OK, alors testons cela correctement. Alors maintenant, si vous allez dans les paramètres, nous avons le préfixe HHH Créons donc une nouvelle facture. Maintenant, il utilise HHH 003, mais je ne veux pas vraiment ce trait d'union Je vais donc dire à l'IA je ne veux pas de trait d'union dans le numéro de facture Utilisez simplement le préfixe et le numéro. HHH, par exemple, HHH 03 ou 003. Donc oui, je viens de le remarquer. Une erreur, et j'ai demandé de la corriger. Donc, je suppose que vous pourriez l'appeler ici, votre rôle est celui de superviseur, de chef d' équipe, voire de responsable du contrôle qualité. En gros, vous êtes celui qui a une vision. Vous devez savoir, vous savez, à quoi vous voulez que le projet ressemble et comment vous voulez qu'il fonctionne, puis vous devez transmettre cette vision à l'IA en lui parlant. C'est un monde très intéressant dans lequel nous vivons en ce moment. Très bien, créons encore une fois une nouvelle facture HHH 04 Et si je change cela en DDD, j'enregistre les modifications et que je crée une nouvelle facture, créons le client En fait, sélectionnons le client. Oui DDD 05. OK, faisons encore une fois, déconnectez-vous et connectez-vous avec l'autre compte. Et je veux vérifier les paramètres ici. Il utilise toujours le préfixe ADR. Nous allons également changer cela en OOOO je ne sais pas, QQQ, enregistrer les modifications, nouvelle facture Et c'est maintenant QQ q005. Cool. OK, donc tout ce que je voulais tester dans cette leçon fonctionne très bien. Je peux ajouter, modifier, supprimer des clients. Je peux faire de même pour les factures, et toutes les données que je crée pour l'utilisateur LogN sont associées à cet utilisateur LogN, ce qui est super cool Au cours de la leçon suivante, nous allons commencer à ajouter des fonctionnalités plus avancées à notre application de facturation et, comme d'habitude, nous allons tester les choses de manière approfondie et assurer que tout fonctionne correctement. Et si ce n'est pas le cas, nous demanderons simplement à l'IA de le réparer. Je vous verrai donc dans la prochaine leçon. 6. Étendre la fonctionnalité de facture: Très bien, j'ai donc un objectif très précis pour cette leçon Je souhaite implémenter une fonctionnalité de téléchargement au format PDF dans mon application. Et j' aimerais également implémenter un aperçu des factures. Qu'est-ce que cela signifie ? Lorsque je crée une nouvelle facture ou que je modifie une facture existante, j'aimerais avoir un aperçu quelque part sur le côté qui me montrera à quoi ressemblera cette facture telle qu'elle sera lorsqu'elle sera téléchargée au format PDF, si cela a du sens. Alors faisons-le. Commençons par ceci. Le bouton de téléchargement fonctionne-t-il ici ? Le téléchargement du PDF n'est pas encore implémenté. Vous pouvez le demander dans votre prochaine invite. OK, demandons-le. Je vais dire, veuillez implémenter téléchargement PDF pour les factures. Demande très simple. Nous traitons une demande à la fois. Comme je l'ai dit, c'est une bonne pratique, car ce n'est même pas la meilleure pratique pour l'IA, mais pour vous aussi, car elle limite les éléments que vous souhaitez tester. Lorsque vous demandez ou demandez à l'IA, savez-vous cinq choses dans une invite, vous devez tester cinq choses différentes. Mais lorsque vous vous concentrez sur une chose à la fois, c'est beaucoup plus facile pour vous et c'est également beaucoup plus clair pour l'IA. Je suis toujours très heureuse de lire les réponses que m'apporte l'IA. Voici donc mon plan de match. Installez Auto Table, un outil qui m' aidera à créer des tableaux d' aspect professionnel dans vos factures PDF, créer une page dédiée, élaborer la logique de génération de PDF. Cela m'indique que je vais ajouter un bouton de téléchargement PDF à la nouvelle page de visualisation et mettre à jour les éléments nécessaires. OK, alors voyons ce qu'il a fait. Il a donc changé l'icône de téléchargement. À une icône en forme d'œil. Et quand on clique dessus , c'est super cool. Cela me montre en fait un aperçu, et c'est ce qui m'étonne lorsque j' utilise de tels outils Je voulais un aperçu, non ? Je le voulais sur la page d'édition ou sur la page d'annonce. Mais je n'ai jamais pensé : pourquoi ajouter une fonctionnalité de prévisualisation ici en dehors de celle-ci ? Je ne lui ai même pas demandé de le faire, mais il l'a fait quand même. Numéro de facture, informations sur l'entreprise, date de facturation du client. Vous pouvez voir le contenu de la facture, puis vous pouvez la télécharger. Téléchargez-le. Facture QQQ 05 PDF Téléchargez-le et voyons à quoi il ressemble. Il contient toutes les informations nécessaires. Il porte le nom de mon entreprise, Bill, tiré du projet de loi 2. Il a donc trouvé le client, n'est-ce pas ? Oui Quantité, prix unitaire, est-ce exact ? Oui, ça l'est. Merci de faire affaire avec vous. Oui, donc ça marche. Est-ce que c'était facile ? Et si je modifie la facture, ai-je également un bouton de téléchargement ? Je ne le sais pas. La seule façon de télécharger actuellement la facture est donc de l'ouvrir , puis de télécharger le PDF. Et je peux également cliquer sur Modifier pour accéder à la page d'édition. Oui, je suis d'accord avec ce flux. Je pense que ça va très bien fonctionner pour le moment. Je peux également cliquer sur une facture pour accéder à la page d'aperçu NIE. Ce sont en fait certaines des meilleures pratiques matière d'expérience utilisateur, et l'IA les a simplement mises en œuvre automatiquement, ce qui est très impressionnant, très impressionnant. OK. La partie téléchargement du PDF est donc terminée, et cela n'a pris que quelques minutes. Très cool. Implémentons la partie où elle me montre un aperçu lorsque j'ajoute ou modifie une facture. Ainsi, par exemple, lorsque j'accède à cette page, je souhaite pouvoir modifier les détails de la facture comme avant, mais j'aimerais voir un aperçu de la facture finale ici sur un côté. Alors faisons-le. Demandons-lui donc ceci. Lors de l'ajout ou de la modification d'une facture, j'aimerais voir un aperçu de la facture en direct sur le côté. ligne, ce qui signifie qu'il met à jour son contenu au fur et à mesure que je modifie les détails de la facture. Voyons ce qu'il fait. Bien entendu, un aperçu des factures en temps réel est une excellente idée. Je vais redessiner le formulaire de facture pour inclure un bel aperçu en temps réel qui se met à jour instantanément au fur et à mesure que vous tapez Voyons ce qu'il en résulte. Pouvez-vous vous imaginer assis sur une plage avec votre ordinateur portable, vous savez, en train de créer des applications, des produits ? Très, très bien. OK, allons-y. Modifions-le. Effectivement, nous avons cet aperçu sur le côté droit. Remplacez la date d'échéance par la première, qui sera mise à jour instantanément. Cool. Nous allons remplacer la description ici par des vidéos, mises à jour en temps réel. Nous allons changer la quantité ici à deux. Cela fonctionne. Modifions le prix. C'est un problème. Le formulaire ici est tout simplement trop serré. Nous devons donc changer cela. Changez donc la quantité à trois. Oui, les prix sont mis à jour automatiquement. Cool. Ajoutons quelques notes. Hey, merci de travailler avec moi. Mettre à jour la facture. OK, c'était donc celui-ci, je crois. Ouais. OK. C' était donc la page d'édition. Si nous ouvrons la nouvelle page, oui, elle fonctionne très bien. Donc, d'un point de vue fonctionnel, cela fonctionne, mais nous devons corriger certains problèmes d'utilisabilité ici Tout d'abord, ces champs sont désormais trop petits. Je veux dire, la quantité, oui, je suppose que c'est bon parce qu' elle n'a généralement qu'une petite valeur, mais le prix est trop faible. Le total est trop faible. Comme vous pouvez le constater, le texte déborde en quelque sorte ici. Et j'ai l'impression que la barre latérale n' est qu'une perte de place. Commençons donc par supprimer la barre latérale et déplacer ce contenu dans une barre supérieure. Je vais donc vous dire ce qui suit. La barre latérale prend trop de place. Supprimez-le et déplacez son contenu dans une barre supérieure. Ça devrait être assez facile. Et encore une fois , je pense que ce type de changement prendrait probablement plusieurs heures, selon la personne qui le fait pour vous, s'il s'agit d'un peuple vivant. Mais oui, l'IA va simplement le coder en un rien de temps. OK, ça a l'air bien mieux. Cela a fait monter tout ça au sommet. Il me montre le tableau de bord, la nouvelle facture du client, mais aucun paramètre. Aussi, ah, d'accord. Cela a donc fait comme un menu déroulant où il me montre, à moi, l'utilisateur, la page des paramètres. Et puis le lien de déconnexion. Plutôt cool, sauf que j'ai juste un G là et que ce n'est pas un cercle, gros, donc il faut corriger ça. Je vais donc dire que le bouton du menu déroulant dans la barre supérieure ne semble pas correct. Il affiche simplement un G en forme de pilule verticale. Veuillez le mettre à jour pour afficher une icône d'utilisateur et déplacer le nom d'utilisateur et l'e-mail en dehors du menu déroulant. Cela devrait donc être assez facile. Ainsi, l'utilisateur peut toujours voir son nom, son e-mail lorsqu'il est connecté. C'est bon. Cela semble donc un peu mieux, mais ce n'est pas encore parfait car cette forme est très étrange. Cela ressemble à une pilule, mais nous avons accès aux paramètres, ce qui est bien, ainsi qu' au lien de déconnexion Cool. Mais réglons réellement ce problème. Je vais donc dire que l' arrière-plan de l'icône est toujours en forme de pilule verticale. S'il te plaît, fais-en un cercle. Très bien, voyons comment ça fonctionne. OK, et je pense que ça a finalement réglé le problème. Le bouton est désormais très beau. Cela fonctionne comme il se doit. J'ai bien les informations ici, et je peux passer d'une page à l'autre. OK, maintenant que nous avons déplacé la barre latérale, modifions cette page de modification de facture et voyons comment cela se passe avec l'espace supplémentaire Maintenant, évidemment, sur un site Web en ligne, nous n'avons pas cette barre latérale. Ça va ressembler à ça, en gros. Mais, vous savez, nous devons encore nous assurer que cette mise en page fonctionne sur de nombreuses tailles d'écran différentes. Voici donc à quoi cela ressemble sur mobile. OK, ce qui n'est pas trop mal, et le menu fonctionne toujours Sympa. Mais sur ordinateur, j'ai l'impression que nous n'en sommes pas encore là avec ce formulaire. Voyons donc comment nous pouvons résoudre ce problème. Et tu sais quoi ? En fait, je ne vais même pas essayer de trouver une solution à ce problème. Je vais simplement décrire le problème à l'IA et voir ce qu'il en résulte, car si elle fait quelque chose et que cela ne me plaît pas, je peux toujours revenir à une version spécifique de l'application en cliquant sur le bouton Restaurer Donc, après chaque discussion, oui, nous pouvons restaurer une version spécifique de cette application si nous n'aimons pas le changement. Je vais donc décrire mes problèmes ici. Et les problèmes se situent essentiellement dans la section des articles, car nous n'avons pas assez d'espace pour le prix unitaire de la quantité au total. Je dois donc dire que le formulaire de facture dans la section des articles n'offre pas assez d'espace pour les champs des articles, en particulier les champs de prix. Pouvez-vous trouver une solution pour cela, n'est-ce pas ? Donc, je ne fais que décrire le problème, en fait. Je n'essaie pas de le trouver pour l'IA. J'attends juste de voir quelles suggestions il me donnera à ce sujet. Et si je ne les aime pas, je peux toujours revenir en arrière ou vous demander d'apporter d'autres modifications Voyons son plan ici, en fait. Il indique donc qu'il souhaite retravailler la disposition de la grille et améliorer l'affichage mobile C'est bon. Eh bien, voyons comment ça se passe. OK, nouvelle facture. Voyons voir. Hum. Je veux dire, ça n'a pas vraiment fait grand-chose, n'est-ce pas ? Donc, si je change cela, non, cela ne fonctionne toujours pas correctement parce que le total ici, s' il s'agit de quantités plus importantes, se chevauche toujours ou sort de sa limite. Et voyons en fait la vue mobile car elle indique qu'elle a mis à jour la vue mobile. Demandons-lui ceci. Il n'a pas vraiment apporté de modifications importantes Je ne vais donc pas revenir à une ancienne vue, mais plutôt lui demander de les déplacer un peu Je lui ai donc demandé une solution qui ne m'a pas vraiment donné de bonne solution, alors je vais lui dire quoi faire. Dans la section des articles, veuillez faire en sorte que la description de l' article pleine largeur et déplacez la quantité, le prix unitaire et le prix total séparément ou, devrais-je dire, sur la deuxième ligne. De cette façon, les données disposent de suffisamment d'espace. OK. Voici un autre conseil, et je l'ai déjà fait auparavant si jamais vous ne parvenez pas à communiquer avec l'IA, si vous lui demandez de faire quelque chose, mais qu'elle ne semble tout simplement pas comprendre ce qu'elle doit faire, essayez d'utiliser une autre IA pour générer une invite à le faire. J'avais donc l'habitude de le faire par le passé. Je demandais à l'IA quelque chose qu'elle ne comprendrait pas, puis je demandais à CHAT GPT d' écrire un message pour que je lui donne l'IA Et j'ai expliqué ce que je voulais faire à HatGPT. Alors HatGPT a pris cela, a écrit un message très détaillé très technique, que j'ai ensuite donné à cette autre IA, et elle a finalement fait le travail Cela ne fonctionne pas tout le temps, mais cela aide généralement. OK. À présent, modifions la facture. Oui, allons-y. C'est bien mieux. Nous avons maintenant suffisamment d'espace pour la description et les trois autres champs. autre chose que j' aimerais ajouter ici est une devise au prix unitaire. Je dirais donc qu'il faut également ajouter le dollar américain au prix unitaire. OK, donc l'IA a apporté des modifications. Qu'est-ce que cela signifie ? Nous devons les tester. Nous éditons donc. Nous avons maintenant le signe du dollar également, et le changement de ce signe met également à jour les montants ici et les met également à jour ici même dans l'aperçu. Très sympa Si nous regardons l'aperçu ici, cela fonctionne toujours. Et si je crée une nouvelle facture, sélectionne le client, il y a un petit détail ici. Le numéro de facture semble avoir été coupé. Il n'est donc pas coupé. Dans la page d'édition, mais elle est coupée dans la page Créer. Intéressant Nous allons le dire. Sur la page de création de facture, le numéro de facture est supprimé, veuillez corriger le problème en testant une nouvelle facture. Maintenant, il est écrit A, sélectionnez le numéro de facture du client, la date et la date d'échéance. Et si je modifie, le numéro de facture s'affiche correctement, mais je ne veux pas que ce signe de hachage s'y OK. Mais il ne s'affiche pas correctement sur la nouvelle facture. Cette fois, cette invite serait donc de supprimer le signe dièse du numéro de facture sur la page des détails de la facture De plus, lors de la création d'une nouvelle facture, le numéro de facture indique A, veuillez corriger. J'ai donc en quelque sorte enfreint ma propre recommandation parce que je lui ai demandé de faire deux choses en une seule fois. Voyons comment cela fonctionne. Normalement, comme je l'ai dit, je ne le recommanderais pas vraiment, car c' est beaucoup plus facile pour vous et beaucoup plus clair pour l'IA. Mais voyons comment cela fonctionne pour cette fois. OK. Maintenant, il supprime ce signe de hachage du numéro de facture, et lorsque je crée une nouvelle facture, QQQ 06, oui, c'est correct Comme vous pouvez le constater, cela a maintenant résolu les problèmes et m'indique le bon numéro de facture. Maintenant, examinons rapidement les autres détails qui devraient apparaître sur la facture. Donc, lorsque je sélectionne le client, il sélectionne le client un, le client deux, c'est correct. Mais qu'en est-il de mes données personnelles ? Donc, revenons en arrière. Passons aux paramètres. Et inscrivons le nom de l' entreprise ici. Disons, je ne sais pas, Pordla Designs Ic DiPord mon adresse e-mail, mon numéro Bien sûr. Disons juste un faux numéro de téléphone, l'adresse Mettons euh, l'adresse, et remplissons tous les champs ici. OK ? Enregistrez les modifications. Cool. Alors maintenant, lorsque je crée une nouvelle facture, oui, mes informations sont correctement renseignées. Bien qu'il n'affiche pas mon site Web. Oh, non, oui, c'est le cas. Je ne l'ai pas vu. Cool. OK, fixons donc au client un statut, une date de facture, une date d'échéance. Je le remplis automatiquement. Date d'échéance demain. Et disons, je ne sais pas, YouTube, que quantité deux coûte 100 unités et que vous appuyez sur Entrée pour créer la facture. Cool. Et nous avons une erreur ici. Je ne vois pas le client pour cette facture. Si je le remplace par le client 2, le voyons-nous ? Nous ne le faisons pas. La facture QQQ 006 présente quelques problèmes Si je crée une nouvelle facture, rencontrons-nous les mêmes problèmes ? Oui, nous le savons. OK. Nous venons donc de découvrir un nouveau problème. C'est pourquoi vous devez tester, tester, tester et simplement continuer à réparer les choses. Lors de la création, disons, le client n'apparaît pas dans le tableau des factures récentes pour les nouvelles factures. C'est un comportement étrange. Voyons voir si cela résout le problème. Apparemment, le nom du client n'était pas correctement enregistré lors de la création d'une nouvelle facture, est pourquoi il n' apparaissait pas sur votre tableau de bord. Ce genre de choses arrive, tu sais, même à l'IA. Lorsque vous apportez ces modifications, vous modifiez le code lui-même. Il est donc naturel que lorsque vous modifiez quelque chose, vous gâchiez autre chose, mais cela semble avoir réglé le problème. Donc maintenant, si je crée une nouvelle facture pour un client, oui, je l'affiche correctement. Génial OK. Et le numéro de facture y est correctement indiqué. Une chose que j'ai remarquée, c'est que l' aperçu de la facture que je vois ici est en fait différent de l'aperçu de la facture que je vois ici. Il se peut donc que nous voulions changer cela. Permettez-moi de vous demander de le faire. Je vais donc vous dire exactement ce que je vous ai dit. Les aperçus des factures sont différents entre la page d'aperçu et les pages d'édition des annonces S'il vous plaît, faites en sorte qu'ils soient identiques. Très bien, allons-y voir. Voici donc l'aperçu. Ça a l'air d'une certaine façon, c'est bien. Et si nous allons modifier, oui. Je pense donc que ça ressemble à peu près à la même chose. J'en suis donc content. Donc, si je télécharge cette facture maintenant, la facture 008, et que je l'ouvre, elle me montre les informations correctes, n'est-ce pas ? Ouais. Mais le design de la facture elle-même ne ressemble pas vraiment à l' aperçu que je vois ici. Et ce serait bien que tout cela soit la même chose. C'est ce que nous allons faire, sauf que l'aperçu utilise ce schéma de couleurs sombres et que la facture que je génère doit être sur un schéma de couleurs claires car vous voudrez peut-être l'imprimer sur du papier. Donc, dans ce cas, posons-nous la question suivante. Faites en sorte que le format PDF téléchargeable ressemble exactement aux deux aperçus que vous venez de créer, sauf en utilisant un jeu de couleurs claires pour le PDF Voyons si c'est possible. Oh, mec. J'adore ça. Il semble qu'il n'y ait rien que l'IA ne puisse faire. Je veux dire, je lui ai juste demandé de le faire, ce qui, à mon avis, est une tâche très complexe, n'est-ce pas ? Mais l'IA me dit : « Hé, tu as compris ». Je vais l'installer et le mettre à jour. Plutôt cool. Voyons donc s'il a apporté des modifications aux aperçus ici. Je ne l'ai pas fait Donc, si je télécharge le PDF maintenant, Oh. OK. Qu'est-ce que c'est ? Oui, ce n'est pas bon. Alors peut-être que je n'ai pas été très clair. Il semble qu'il n' ait fait que prendre une image de l'aperçu que j' avais dans l'application et l' simplement placée sur un fond blanc. Et ce n'est pas ce que je voulais. Je veux essentiellement avoir ce format, cette mise en page de la facture, gros, mais sur une palette de couleurs claires. Demandons-le donc à nouveau. Je dois dire que ce n'est pas la bonne solution. Veuillez utiliser le même format et mise en page pour le PDF que pour l'aperçu, ou devrais-je dire, pour l'aperçu de la facture. Cependant, le PDF utilisera un schéma de couleurs claires. Et je pense que cela devrait suffire. Voyons si c'est suffisamment précis pour cela. Sinon, je pense que je vais parler à mon bon ami Chad GPT et vous demander de créer un meilleur guide pour l'IA Prévisualisons, téléchargeons. Oui, ce n'est toujours pas correct car oui, il utilise le format, mais il ne fonctionne pas correctement. Il s'agit de la première facture. Et le texte était en fait sélectionnable ici, mais dans les deux cas, il n' est même pas sélectionnable Il s'agit essentiellement d'une image. Passons donc à HatGPT et essayons de trouver une solution à Très bien, après avoir discuté avec CHADGPT, je lui ai essentiellement dit que, écoutez, je développais une application de facturation J'essaie de faire correspondre le format du PDF à celui de l'aperçu de l'application. Je lui ai donc donné un peu de contexte et je lui ai demandé pouvez-vous m'aider avec un message ? Cela m'a donc donné un message. Celui-ci est un peu trop détaillé. Alors je l'ai dit, c'est trop détaillé. L'IA sait déjà ce que nous sommes en train de construire, elle m'a donc donné une petite invite. Alors essayons-le comme ça. Je vais juste prendre ça. Je vais le coller dedans. Et l'invite ici dit essentiellement : Faites en sorte que le PDF exporté corresponde à la disposition vocale à l'écran exactement la même structure, le même espacement et le La seule différence, c'est d'utiliser une palette de couleurs claires, du texte noir sur fond blanc pour l'impression, garder le design propre et cohérent avec l'aperçu. Voyons donc si cela aide de quelque manière que ce soit. D'après mon expérience, comme je l'ai dit, cela fonctionne la plupart du temps cela fonctionne la plupart du temps, car le fait qu'une autre IA rédige les instructions pour vous donne généralement des instructions plus détaillées et plus techniques, mais ce n'est pas toujours le cas Si cela ne fonctionne pas correctement, nous envisageons peut-être, vous savez, quelque chose que l'IA ne peut pas faire, mais je doute que ce soit le cas, honnêtement. Donc il dit, ou il dit, que vous l'avez compris. Toutes mes excuses. La dernière tente n'était pas parfaite au pixel près. OK, alors cliquons dessus. Cliquez sur Télécharger le PDF. Voyons si non, cela ne semble pas fonctionner correctement, même pas cette fois. Alors disons-le ceci. Vous continuez à mettre une image dans ce PDF. Le texte n'est même pas sélectionnable. Veuillez générer le PDF de la même manière que lors de la première création de cette application. Mais utilisez la mise en page et la structure de l' aperçu de la facture à l'écran. Nous attaquons donc cela sous un angle différent. Voyons voir si cela fait quelque chose. Je suis sincèrement désolée pour ces faux pas répétés. Je suis en train de mettre en œuvre cette bonne solution et je suis sûr que vous serez satisfait de la qualité professionnelle des résultats. Eh bien, cela reste à voir, mon ami IA. Euh, hein. Donc, apparemment , il a utilisé un package HTML to canvas pour le créer. Maintenant, il supprime cela et rétablit le tableau automatique pour créer un PDF avec du vrai texte sélectionnable OK, allons-y. Oups. Téléchargeons. Ah ah. Allons-y. Alors maintenant, il semble presque l'afficher correctement. Ce n'est pas 100 %, mais c'est assez proche. Par exemple, toutes les informations sont au bon endroit, sauf sur la facture. Il s'agit d'une sorte de disposition de boîte avec l'en-tête, l'en-tête du tableau étant coloré comme ceci, et l'aperçu le montre simplement comme ça. Je pense que je vais le prendre. Je pense que je peux le modifier un peu plus, mais cette leçon est de toute façon trop longue Je pense donc que pour le moment, nous avons une ressemblance assez étroite avec notre aperçu, et je vais remporter la victoire Les objectifs de cette leçon étaient donc d'implémenter l'aperçu des factures ainsi que le téléchargement au format PDF. Et comme vous l'avez vu, tout fonctionne très bien, vous pouvez cliquer sur n'importe quelle facture pour en voir un aperçu ici. Vous pouvez le télécharger au format PDF La création d'une nouvelle facture ou la modification d'une facture existante affichera également modification d'une facture existante affichera un aperçu sur le côté droit. Et cet aperçu est mis à jour en temps réel au fur et à mesure que vous mettez à jour les détails de la facture. Alors, de quoi d'autre ai-je besoin ou que je veux créer pour cette application ? Eh bien, cela semble très bien fonctionner pour le moment. La seule chose que je pense que je changerais tout de suite , c'est le fait que nous avons trop de boutons, disons une nouvelle facture, n'est-ce pas ? Nous en avons une ici, et nous en avons une ici, et le menu principal indique également une nouvelle facture. Je pense donc que j' aimerais rationaliser cela et avoir un seul bouton, peut-être ici ou peut-être ici dans l'en-tête. Supprimez cet élément de menu, puis apportez peut-être quelques modifications à la conception pour lui donner un aspect un peu plus raffiné. Mais c'est pour la prochaine leçon car, comme je l'ai dit, c'est déjà trop long. Je vous verrai donc dans la prochaine leçon où nous allons implémenter les modifications finales de notre application. 7. Ajouter des touches finales: Bon, bon retour à la dernière leçon de construction de ce projet, et les objectifs de celui-ci sont très simples. Nous avons dû affiner les nouveaux boutons de facturation parce qu'ils sont trop nombreux et qu'ils sont éparpillés sur toute la mise en page. Et nous devons également apporter quelques modifications esthétiques. Il suffit de peaufiner un peu plus l'EUI. Commençons donc par le bouton. Je dois donc dire que nous avons trop de boutons pour créer une nouvelle facture. Gardez-en un seul accentué dans la barre supérieure. Et je pense qu'il va sans dire que les deux autres devraient être supprimés. Voyons donc s'il le fait correctement. Et apparemment, pendant qu' elle le faisait, l'IA a trouvé une erreur, un point-virgule embêtant OK, je ne l'ai pas vu, mais apparemment c'est le cas. Donc oui, nous avons maintenant un seul bouton de nouvelle facture qui nous amène à la page Créer une nouvelle facture. Sympa. Et lorsque nous cliquons sur Modifier, cela nous amène à la page Modifier la facture. C'est donc l'objectif numéro un. L'objectif numéro deux est d'apporter quelques modifications esthétiques. Et pour cela, j'aimerais vraiment tester cette fonctionnalité d'image. J'aimerais donc trouver des images qui montrent le type de mise en page que j'essaie réaliser, les donner à l'IA et lui demander faire correspondre les couleurs et, vous savez, l'espacement et tout le reste aux images que je viens de leur donner Voyons donc comment cela se passe. Passons au dribble et cherchons ce que serait ce tableau de bord sombre Voyons si nous pouvons trouver quelque chose qui me plaît et qui, selon moi, fonctionnerait bien pour ce type de projet. C'est donc intéressant. De Use Mind. Cela semble intéressant. Alors, sauvegardons ça. Et cela l'enregistre en fait sous forme d'image Web P. Je me demande si l'IA accepte les téléchargements Web P. C'est trop sombre. Cela semble intéressant. Encore une fois, je ne vais pas essayer de prononcer ton nom. Sauvegardons donc cette image. OK, essayons-le avec ces deux images, non ? Nous allons donc revenir ici et cliquer sur Télécharger. Je vais juste sélectionner ces deux images Web P et voir si cela fonctionne. Donc, apparemment, c'est le cas. OK, cool. Donnons-lui donc un message. Veuillez utiliser les deux images comme référence et modifier couleurs et l'espacement de l'interface utilisateur. Je suis très curieuse ce sujet, car si cela fonctionne bien, il sera très facile de créer une application qui fonctionne bien, mais aussi qui soit belle . Vous pouvez un designer professionnel de créer un design pour cette application et vous pouvez simplement demander l'IA de le faire correspondre au plus près possible. Cela signifie que le plan est de réorganiser la palette de couleurs, d' affiner l'espacement et les mises en page, et passer en revue chaque composant de l'interface utilisateur pour s'assurer qu'ils sont parfaitement alignés avec leur nouvelle palette de couleurs et qu'ils sont parfaitement alignés avec leur nouvel espacement. D'accord, d'accord. Eh bien, le plan semble excellent. Voyons la mise en œuvre. Et nous y voilà. Donc, pour référence, j'ai ouvert une ancienne version de l'interface utilisateur. C'était, vous savez, avant que nous n'apportions les modifications de mise en page ici. Et voici le nouveau. Donc oui, c'est définitivement différent de ce que nous avions avant. Ouvrons l'un d'entre eux. Ce n'est pas comme le jour et la nuit, mais je pense que c'est une amélioration. Cela a changé la couleur d'accent parce que les deux images que je lui ai données utilisaient ce type de couleur orange-orange. Oui, j'ai certainement fait quelques modifications ici. Par exemple, il a ajouté une couleur de fond claire à toutes ces sections. Cela a en quelque sorte réduit le contraste de cette bordure. Et il a également ajouté que je venais de le remarquer. J'ai ajouté un effet de flou, un effet de flou d'arrière-plan à la barre d'arrêt, et je pense que cela a Je ne pense pas que cela ait été corrigé avant. Alors maintenant, il reste en place lorsque nous faisons défiler la page vers le haut et vers le bas. OK, donc dans l'ensemble, oui, j'aime bien ces changements, et je pense que je peux simplement continuer discuter avec l'IA , perfectionner choses et les faire ressembler à ce que j'ai en tête. Il s'agit simplement du temps que vous êtes prêt à passer avec l'IA. Si vous essayez de créer un MVP, comme un produit minimum viable que vous voulez montrer aux parties prenantes, alors, vous savez, créer quelque chose comme ça est largement suffisant Ça a l'air super. Il est réactif. Vous savez, cela fonctionne également sur mobile. C'est propre, et vous pouvez toujours y apporter des modifications visuelles. Je veux donc juste faire une dernière série de tests pour m' assurer que tout fonctionne parfaitement avant de passer à autre chose. Passons donc aux clients. Ajoutons un client. Oh, cela a également changé ces champs ici. Cela a également changé leur apparence, en gros. OK, ajouter des clients. Fonctionne, édite des clients. Œuvres. Retournons ici. Créons une nouvelle facture. Sélectionnez le client 3. Oui, cool. Description de la quantité de l'article, deux d'entre eux pour 300$. Hey, bonne facture. Ouaip. Cela a donc fonctionné. Je peux très bien le prévisualiser. Je peux en télécharger un PDF. Et le PDF ressemble à ceci. Cela a également changé les couleurs du PDF, même si je ne le lui ai pas demandé. Cool. Je peux modifier la facture, puis je peux supprimer des factures. Sympa. Et je pense que je vais m'arrêter ici avec cette application. Je pense que je l'ai trouvé dans un état très décent dans quoi ? Dans une heure. Peut-être que le cours durera probablement un peu plus d'une heure, mais vous devez comprendre que si je devais faire tout ce processus sans parler à la caméra, cela prendrait évidemment moins de temps. Mais je suis content de ce que j'ai créé jusqu'à présent, et je vais m'arrêter là. Veuillez vous joindre à moi dans la prochaine leçon pour la conclusion et les prochaines étapes. Je t'y verrai.