Créer des applications d’IA rapidement : de l’idée au MVP sans codage

1. Introduction au cours: Salut, voilà. Bienvenue dans le cours Build AI Apps VAST. m'appelle Nima Tahami, et ces dernières années, j' ai eu la chance d'enseigner à plus de 18 000 étudiants et de créer Vous voyez, la plupart des gens abandonnent leur idée avant même de commencer à la développer et à la lancer. Ils commencent à trop réfléchir à toutes les parties ou à rester coincés dans le code Vous n'avez plus besoin de compétences en codage pour donner vie à vos idées. Grâce à l'IA. Tout au long de ce cours, je vais vous montrer les étapes exactes que je dois suivre pour transformer une idée en une simple idée en un produit concret. Aucune expérience de codage n'est nécessaire, et vous repartez avec une application qui est réellement en ligne sur Internet et que les utilisateurs peuvent utiliser et payer. Que vous soyez un designer une fois que vous avez dépassé le stade de la conception d'écrans ou un chef de produit désireux de donner vie à ses idées, ce cours est exactement pour vous. Et vous ne vous contenterez pas de regarder ce cours. Vous pouvez réellement créer à mes côtés , donner vie à votre propre idée et apprendre à utiliser des outils tels que Claude et Cursor pour vous aider à créer votre application beaucoup plus rapidement. C'est un super cours pratique. J'espère que vous serez prêt à exécuter et à donner enfin vie à votre idée. Commençons. 2. Note en coulisses Note Note: Avant de poursuivre les conférences, je voudrais faire une petite pause ici juste pour vous montrer les coulisses de la création de ces conférences . Une tonne de temps est consacrée à la planification des conférences, Une tonne de temps est consacrée à la planification des à leur tournage et à leur montage. J'ai créé un outil appelé clip sur lequel je fais maintenant tous mes enregistrements, y compris les conférences que vous vous apprêtiez à regarder. Je suis vraiment enthousiasmé, c' est pourquoi je vous le montre. Je dépose essentiellement les images que j'ai pour les cours, et au lieu d'avoir à passer, vous savez, des dizaines d'heures à côté du monteur à éditer l'intégralité du cours, j'ai maintenant l'IA intégrée à cet outil, occupe du montage. Si vous envisagez à distance de faire des didacticiels, YouTube ou un type de contenu de cours, d'ailleurs, ou du contenu éducatif du type Talking Head, cela pourrait être très utile. Donc, en ce moment, il s'agit de passer toutes les erreurs que j'ai commises afin que, lorsque vous regardez les conférences, vous savez, c'est professionnel, fluide, net, et vous ne perdez pas votre temps à regarder conférences qui n'ont aucun sens ou simplement des pauses aléatoires tout au long de la vidéo. Alors, jetez-y un coup d'œil. Il y a un lien ici si, encore une fois, vous êtes intéressé par le contenu de tournage ou simplement pour voir si c'est quelque chose que vous pouvez utiliser pour votre usage quotidien. Profitez du reste du cours. 3. Concevoir rapidement: C'est donc une semaine passionnante au cours de laquelle nous pouvons réellement créer notre produit, mais pas n' importe quel produit ou n'importe quelle version de notre produit, le produit minimum viable ce que vous avez sûrement entendu parler de la partie la plus précieuse du produit ou de la valeur que notre entreprise aura, nous allons le regrouper dans une petite application ou un produit et le vendre spécifiquement, n'est-ce pas ? Hum, donc, bien sûr, je sais que vous avez peut-être des tonnes de fonctionnalités en tête et des tonnes de façons de concrétiser votre idée, et, vous savez, même chose pour moi et pour l'application en matière de création, mais je ne vais pas me lancer dans la rédaction d'une liste de 20 fonctionnalités d'une liste de 20 fonctionnalités pour ensuite créer chacune d'elles, d'accord ? À moins d'avoir la garantie d'obtenir des clients pour mon produit, ce sera potentiellement une perte de temps. Mais ce qui sera utile, c'est de préciser fonctionnalités ou les éléments du type de valeurs dont nous avons parlé l'utilisateur attend du produit et de se concentrer spécifiquement sur cela Hum, donc avec cet ensemble, nous allons concevoir pour la rapidité et non pour la perfection. Je vais donc vous donner un exemple. Il s'agit de la toute première version de mon clip d'application de montage que j'ai créée. Ce n'était pas encore un éditeur complet. Tout d'abord, je n'ai créé qu' une seule fonctionnalité de ce produit. Et cette fonctionnalité consiste en fait à transformer longues conférences ou de longues vidéos en de courtes bobines Cela prendra donc votre plus longue vidéo, et nous la transformerons en vidéos plus petites en fonction la transcription et de ce qui en ressort intéressant Et comme vous pouvez le constater, les designs sont également très simples. Il n'y a pas de design sophistiqué, même si j' aurais probablement pu passer plus de temps à le concevoir. J'ai choisi la version la plus simple possible. Il vous suffit de déposer vos vidéos. Et à l'époque, en fait, même dans les designs, j'autorisais les gens à publier plusieurs vidéos, mais j'ai finalement eu recours à une seule vidéo Encore une fois, vous souhaitez affiner vos fonctionnalités à la valeur la plus fondamentale que vous souhaitez apporter aux utilisateurs. Vas-y avec ça. C'est la même chose. Voici un aperçu de la vidéo. Une fois que vous aurez déposé la vidéo, il vous sera demandé s' agit du cours Figma Encore une fois, j'ai conçu ce Figma, mais en réalité, j'ai même franchi cette étape et j'ai fait en sorte que vous choisissiez simplement les sujets que vous souhaitez exporter Une fois la transcription analysée, au lieu de vous demander en quoi consiste ce cours, il vous suffira de cocher le sujet que vous souhaitez exporter Hum, c'est tellement simple. Encore une fois, tout cela représente probablement trois écrans au total, peut-être quatre. Tout cela fait partie du même écran. C'est comme un écran de chargement. Encore une fois, bien que je sois designer et que je recherche la perfection, j'essaie de ne pas trop m'attarder sur les détails du design et contenter de la partie la plus simple de ce produit. Ensuite, vous pouvez voir leurs vidéos, et à partir de là, ils peuvent à nouveau, il est écrit « modifier ». Il n'y avait aucune possibilité d'édition dans la première version. Tout ce que vous pouvez faire est de l' ouvrir, de voir les séquences, l'exporter, de le supprimer, puis de passer à la suivante Encore une fois super simple. Et là, je l'ai même fait pour que vous puissiez avoir, encore une fois, des dossiers pour chaque projet, et que vous puissiez accéder à des projets. Donc, pour la première version, c'était super simple, et je vous encourage à faire de même. Ne concevez pas à la perfection, conçu pour une sorte de MVP ou de compilation de fonctionnalités, n'est-ce pas ? Concentrez-vous donc sur la fonctionnalité la plus importante de votre application qui permet localiser les utilisateurs et concentrez-vous là-dessus Oubliez toutes les autres fonctionnalités, non ? vous aider à le faire, je vous recommande vivement d' utiliser également la section communauté Figma si vous créez vos créations dans Figma, ce que j'encourage vivement Ils contiennent déjà des tonnes de kits d'interface utilisateur que les gens ont déjà conçus. Je vous encourage vivement si vous utilisez une bibliothèque de design comme ShatCN C'est une excellente idée également. De nombreuses entreprises l'utilisent, en particulier si vous concevez quelque chose qui pourrait avoir un écran de tableau de bord ou quelque chose d'un peu plus sophistiqué. Ils contiennent des tonnes de composants tels que des graphiques que vous pouvez utiliser et des tableaux de bord Donc, référez-vous certainement à celui-ci ici. Encore une fois, si vous ouvrez l'un d'entre eux, disons que j'ai ouvert le premier ici. Encore une fois, il s'agit d'une bibliothèque de design ouverte par Verso que vous pouvez utiliser Vous pouvez donc voir tous les composants qu'ils possèdent déjà. Par exemple, vous n'avez pas besoin de concevoir un composant d'entrée à partir de zéro, il suffit de le faire glisser à partir d'ici. Ils ont des types de couleurs, et il en existe également des versions plus complètes , je crois. Donc, si vous regardez celui-ci, ils l'ont fait, comme tous les composants, ventilés par pages. Vous avez donc des dialogues d'alerte, euh, des avatars, des badges, une navigation par fil d'Ariane, des groupes de boutons, etc. Alors, explorez ce que vous avez à votre disposition et n'essayez pas d'inventer à partir de zéro. Et vous verrez que lorsque nous commencerons à créer notre produit, nous tirerons parti de ces bibliothèques au lieu de tout faire à partir de zéro. Alors que vous concevez le produit et que nous reviendrons et utiliserons ChatGPT pour nous aider à affiner notre ensemble de fonctionnalités, gardez à l'esprit que vous souhaitez utiliser des bibliothèques externes Vous voulez limiter le nombre minimum de pages dont vous avez besoin pour votre application. Vous n'avez pas besoin de paramètres ou de fonctionnalités de profil sophistiqués , vous savez. Ces petits détails sont donc importants à grande échelle, mais au départ, lorsque vous débutez, vous n'avez pas vraiment besoin de passer du temps à créer toutes les pages individuelles Revenez et commencez à vraiment planifier, qu' allons-nous construire ? Je vais parler de mon produit, mais évidemment, que je fais cela, vous faites la même chose pour votre produit. 4. Utiliser ChatGPT pour planifier notre application: Bien, nous nous préparons donc à commencer à travailler sur notre première version de notre application avant de la créer et même de rédiger les fonctionnalités que nous voulons. Nous voulons bien entendu tirer parti de l' IA pour nous aider à choisir certaines de ces fonctionnalités. Et l'un de mes exercices préférés est de discuter avec ChatGPT de, vous savez, de la première version de notre produit Voilà, j'ai écrit une invite, aidez-moi à planifier la première version d'un MVP d'une application Pour une application qui aide les utilisateurs à suivre leurs dépenses , à répartir facilement les factures lors des voyages et à ne rédiger que les fonctionnalités qui apporteront le plus de valeur aux utilisateurs. recherches pour savoir ce qui manque à des concurrents comme Split Wise dans leur produit ou ce dont les utilisateurs se plaignent en ligne. Cela fait deux choses. La première est que cela nous donne certaines des fonctionnalités les plus importantes que nous allons créer au lieu de simplement tout ce que nous pouvons créer. Ensuite, il va également examiner un peu en ligne, peut-être sur Reedit et d'autres sources Il examinera donc ces ressources lorsque vous lui demanderez de faire des recherches pour voir en ligne quelles sont leurs plaintes à l'égard de ces produits Si vous le souhaitez, vous pouvez être plus précis et dire : «  Regardez la réédition et les sites Web comme G two, qui est la plateforme d'évaluation des applications Nous allons donc appuyer sur Entrée et voir ce que cela donne. Et comme vous pouvez le constater, il effectuera des recherches le Web, puis proposera plan MVP basé sur les plaintes réelles des utilisateurs de Redt, examinera le pilote Trust et les forums de commentaires sur les applications C'est sur cette base que je suis revenue avec des frictions artificielles et des paywalls, ce qui m'a le plus pénible. Cela a du sens. Chaque fois que j'utilise Blitwise, vous ne pouvez ajouter qu'un certain nombre de transactions Comme il est dit ici, il y a trois par jour que vous pouvez réellement ajouter, en a trois par jour que vous pouvez réellement ajouter, puis cela vous oblige à payer pour l'application, n'est-ce pas ? Cela pourrait donc être intéressant pour nous d'en tirer parti et de créer un produit qui est peut-être, vous savez, payant une fois, comme une offre à vie ou quelque chose comme ça. Payez, je ne sais pas, 20, 30, 40 dollars. Encore une fois, nous allons fixer le prix, mais payer X dollars. Vous recevez le produit, vous n' avez pas à vous inquiéter à chaque fois qu'il vous demande un paiement, n'est-ce pas ? Donc je crois qu'il faut diviser les frais de quelques dollars par mois. Mais encore une fois, cela peut être ennuyeux de toujours être confronté à cet écran, et je sais que cela m'est déjà arrivé. Toute friction semble inacceptable. Nous allons donc construire avec ça, non ? Bien que ce ne soit pas une fonctionnalité, il s'agit d' une expérience utilisateur sur laquelle nous allons nous appuyer pour en créer une meilleure version. Trop de friction de configuration est logique. Je l'ai fait aussi. Des groupes sont impliqués et les invitations peuvent être compliquées. Donc, si nous invitons des amis, nous allons rendre les choses super simples. En fait, nous allons faire en sorte que vous n'ayez même pas besoin de saisir leurs e-mails, peut-être simplement de partager un lien pour que les gens puissent rejoindre automatiquement des voyages sans avoir à connaître leurs e-mails à l' avance. Donc, si nous voulons le créer, nous allons le créer de manière à ce que les utilisateurs puissent effectuer le moins d'étapes possible pour inviter des amis, n'est-ce pas ? Nous allons donc garder cela à l'esprit. Ce n'est pas nécessairement une fonctionnalité. Encore une fois, il s'agit d'une amélioration de l' expérience utilisateur, mais je le construis en utilisant le design comme facteur de différenciation, et vous voulez faire de même Allons-y donc et gardons cela à l'esprit. Et au fur et à mesure, notez également, que ce soit sur une feuille de papier ou sur votre ordinateur, notez ce que vous voulez faire qui est différent de ce font les concurrents que font les concurrents, afin de vous aider à vous différencier. Modèle mental confus et stable, non ? Ainsi, lorsque vous essayez de vous mettre d'accord, les gens ne comprennent pas nécessairement comment cela fonctionne, pas qui doit payer qui trop de microtransferts, ils sont maladroits sur le plan émotionnel Nous pouvons donc également l'intégrer au produit, n'est-ce pas ? Une fois le voyage terminé, pourquoi ne pas faire en sorte qu'il soit très simple déterminer qui doit payer combien ? Peut-être même leur envoyer des rappels par e-mail ou quelque chose comme ça, non ? J'ai remarqué que sur Split Wise, je n'ai reçu aucun rappel lorsque je dois payer quelqu'un. Ça m'envoie des relevés mensuels, mais c'est différent de, tu sais, quand tu as besoin de pousser ton ami à me dire : peux-tu me payer ça environ 100 dollars pour un truc comme Airbnb, n'est-ce pas ? peut donc être comme des moments difficiles, et cela pourrait être un autre angle pour différencier notre produit du split wise. Donc oui, il y a des tonnes de choses ici que je n'entrerai pas trop dans les détails, mais que je garderai à l'esprit pour mon processus de conception. Donc, principale opportunité, les utilisateurs ne veulent pas d'outil financier. Ils veulent une aide à la coordination des voyages qui gère automatiquement l'argent Nous sommes en voyage, dressez simplement cette liste d'efforts. Le MVP ne propose que des fonctionnalités qui permettent de créer des voyages instantanés à valeur réelle, n'est-ce pas ? Cela signifie donc qu'il n'y a pas de comptes. Créez un voyage, générez lien de partage exactement ce que j'avais en tête également. Les gens se joignent via Link. Aucune inscription n'est requise. Je ne suis pas sûr à 100 % qui concerne l'inscription et simplement parce que nous avons toujours besoin que les utilisateurs s'authentifient Mais je voyais que cela pourrait également fonctionner. Au moins une personne doit donc créer un compte pour créer le voyage, mais les invités n'en ont peut-être pas besoin. Et encore une fois, c'est le cas en ce moment, nous ne faisons que réfléchir. En ce qui concerne la partie proprement dite du bâtiment, qui se produira peu de temps après, nous les définirons avant d'aller de l'avant. propose même un tas de fonctionnalités qui, selon ChatGPT, ne les mettent certainement pas dans le MVP, et nous allons en tenir compte, comme, vous savez, l'intégration bancaire, les abonnements, etc. Voici donc ce qu'il en est ressorti. Il dit, Cor loop, créez un voyage, partagez un lien, ajoutez des dépenses instantanément, voyez le solde, clairement, réglez avec un minimum de paiements. Je pense que c'est génial, non ? C'est donc un peu plus simple que toutes les autres fonctionnalités qu'il a configurées ici. Mais si nous en créons une version simple, la fonctionnalité n' est vraiment qu'une chose. Et c'est, vous savez, être capable de régler votre voyage en fonction des dépenses, n'est-ce pas ? Nous ne sommes pas en train de construire, même si cela nous indique cette boucle de différents types d'écrans dont nous pourrions avoir besoin, vous pourriez avoir besoin d'un écran pour créer un voyage. Sur le même écran, vous pouvez partager le lien. L'ajout de dépenses s' inscrirait dans le même écran, solde devant être affiché, encore une fois, sur le même écran. concerne les paiements minimaux, nous allons simplement vous envoyer un message sur le même écran pour que vous puissiez réellement voir à qui appartient quoi. De toute évidence, l'écran aura différents états et différents composants, mais nous allons le garder aussi propre que possible. De toute évidence, vous aurez également besoin d'un écran d'accueil pour pouvoir créer des voyages à partir de. Vous disposez donc d'un écran d'accueil pour voir tous vos trajets. Euh, alors sur la page des voyages, vous n'avez pas besoin de naviguer vers différents endroits, un endroit très simple pour voir quel est le total, quel est le solde courant, à qui appartient quoi ? Et puis la possibilité d' ajouter une sorte de dépenses, et nous allons rester aussi propres que possible et utiliser le moins d'écrans possible, encore une fois. C'est dans cet esprit que je vais commencer par les designs. Vous ferez de même lors de la prochaine conférence Je reviendrai pour vous expliquer comment j'ai mon design et quelles sont les décisions que j'ai prises par rapport aux pages que je viens d'expliquer en ce moment. Je vais donc concevoir les deux ou trois premiers écrans principaux, l'authentification, tous les voyages puis les pages de voyage individuelles spécifiques. Je vais donc le concevoir. Vous concevez vos écrans essentiels, limitez-vous à trois ou quatre au maximum, si possible. Je sais que certains produits peuvent être un peu plus compliqués que d'autres, mais encore une fois, essayez de vous en tenir au minimum et aux écrans les plus importants. Je vous verrai dans une minute et hâte de voir également votre design. 5. Choisir l'appareil: Avant de commencer votre processus de conception, vous vous demandez peut-être si je dois créer une application Web ? Dois-je créer une application mobile ? Dois-je créer une application de bureau. Il y a des tonnes de questions sur ce qu' il faut construire et sur la pile avec laquelle construire. La pile comprend tous les outils et logiciels que nous allons utiliser pour développer réellement notre application Maintenant, mon point de vue à ce sujet est très simple. En général, j'opte simplement pour une application Web adaptée aux mobiles, laquelle les utilisateurs peuvent accéder sur le Web depuis leur navigateur moins que ce ne soit ici les applications natives entrent en jeu. À moins que vous ne fassiez quelque chose de spécifique, comme du montage vidéo, quelque chose qui implique l'arrêt automatique de l'utilisateur. Vous souhaitez utiliser une partie de cette mémoire, de cette alimentation ou de ce stockage. Pour mon éditeur de clips de bureau, j'ai décidé de le créer uniquement pour ordinateur de bureau, mais il traite localement tout le montage vidéo et le rendu, et je n' ai pas à le faire sur un serveur, ce qui peut être coûteux, surtout au départ. Maintenant, pour une simple application Web comme Bitwise Petitor Friends on Trips, soyez capable de partager les factures Une application Web suffit. Maintenant, je pourrais avoir tendance à créer une application native plus tard, que je pourrais soumettre aux App Stores et que les utilisateurs pourront télécharger sur leur téléphone. sera pratique si mon ENS doit utiliser cette application quotidiennement ou chaque semaine, surtout si j'emprunte utiliser cette application quotidiennement ou chaque semaine, des itinéraires b2b et que j'ai utilisateurs qui voyagent peut-être sur une base hebdomadaire pour le travail C'est là qu'il est le plus logique de créer une application mobile native. Ou votre cas, si vous créez une application qui implique que l'utilisateur interagisse avec cette application sur une base quotidienne ou hebdomadaire et fréquemment, il serait peut-être préférable de créer en tant qu'application native. Bien entendu, ils ont tous leurs défis à relever. Si vous créez une application native, vous devez la soumettre à l'App Store et Apple doit l'examiner avant de pouvoir la voir en direct sur l'App Store. L'App Store peut également être très compétitif. Mais si vous créez une application Web, vous serez également confronté à ce défi. Mais il y a des avantages et des inconvénients. Tu dois décider toi-même en fonction de ça, ce qui est le plus logique. Encore une fois, en général, j' opterais simplement une application Web accessible sur le navigateur. Tout le monde a un navigateur sur son téléphone et il faut vraiment y réfléchir. votre application est un SAS accessible uniquement sur le Web sur un ordinateur, Si votre application est un SAS accessible uniquement sur le Web sur un ordinateur, dans ce cas, c'est un choix facile. Mais si vous créez quelque chose les gens pourraient utiliser davantage sur mobile, le choix devient un peu plus délicat. Mais encore une fois, je penche pour une application Web, sauf dans des cas spécifiques où l'utilisateur aura besoin de A, d' utiliser la puissance de l'appareil dans la mesure, par exemple, un jeu, ou si vous souhaitez créer une application que les utilisateurs utiliseront quotidiennement ou chaque semaine , par exemple, une application de shopping. Maintenant, gardez à l'esprit que plus tard, vous pourrez toujours changer de pile. Vous pouvez toujours faire de votre application Web une application mobile. Commencez simplement par les bases, commencez par ce qui est le plus rapide, et c'est pourquoi je suggère une application Web pour la plupart des idées. 6. Obtenir l'inspiration: Bien, maintenant que nous avons décidé de ce que nous voulons créer et des fonctionnalités que nous voulons développer pour notre MVP, nous avons besoin de nous inspirer d'autres outils qui existent déjà pour créer notre propre application La meilleure façon de le faire est d'utiliser cette plate-forme appelée Mobiin qui contient des captures d'écran de milliers d'applications différentes, et qui affiche même des animations C'est un excellent outil pour voir ce que font les autres applications. Donc, ici, vous pouvez réellement effectuer une recherche par application spécifique. Vous pouvez également filtrer selon que vous recherchez des conceptions Web, iOS ou mobile. Donc, ici, je vais rechercher Split Wise parce que c'est un outil similaire à celui que je vais créer. Si je l'ouvre, vous pouvez voir tous les écrans divisés apparaître ici. Vous pouvez réellement continuer et le sauvegarder. Je vais garder celui-ci. Vous pouvez voir tous les écrans individuels ici. Ici, nous avons des ajouts et des dépenses. Je vais en utiliser une partie pour être réellement capable de concevoir. Vous pouvez voir exactement comment vous pouvez effectuer les divisions. Comment ils affichent leur page de transaction et ont même quelques pages supplémentaires ici. Au fur et à mesure, vous pouvez sélectionner des écrans individuels. J'aime sélectionner ces écrans ici pour l' ajout du flux de dépenses. Je vais aller de l'avant et copier ces trois-là. Ils ont ce plugin que vous pouvez installer, puis accéder à l'application, appuyer sur Exécuter. Ensuite, à partir de là, vous pouvez réellement coller les écrans. Je vais appuyer sur Command V. Et c'est parti et j'ai collé ces écrans ici Pendant que je conçois mon application, je vais jeter un œil à ces écrans pour m'inspirer. Vous pouvez le faire, bien sûr, avec plusieurs applications différentes. Si vous effectuez une recherche sur Mobiin, vous trouverez certainement les captures d'écran de vos concurrents et vous les utiliserez comme source d'inspiration pour vos propres designs. Il existe une autre façon très utile d' utiliser mobiin : l'onglet des flux ici. Depuis les écrans, si vous passez réellement aux flux, vous pouvez effectuer des recherches dans les écrans plus facilement. Par exemple, je voudrais voir comment gens ajoutent des dépenses sur Split Wise. Je peux voir la catégorie des flux. Nous allons donc passer à ajouter et à dépenser, et nous avons tous les écrans relatifs à l'ajout d'une dépense côte à côte, ce qui est très utile. Maintenant, lorsque je crée ma propre application, je m'assure de ne rien manquer de ce flux. Encore une fois, je peux soit l'enregistrer dans ma collection mobile, soit l' appeler application Trip expenses , soit appuyer sur Créer, copier sur Figma 7. Planifier nos caractéristiques: Maintenant que nous avons vu quelques exemples d'applications offrant des fonctionnalités similaires, je vais passer en revue les maquettes ou maintenant ce sont principalement des wireframes que j'ai Pas même des wireframes, mais surtout juste des exigences, je dirais Pour la page d'authentification, j'ai extrait de la bibliothèque ShatSN Figma, écran inscription simple Ou écran de connexion dans ce cas, je vais garder l'écran d' inscription très similaire avec une image ici, saisie sur la gauche, puis éventuellement une vérification par e-mail qui ressemble à ceci. Encore une fois, je l'ai extrait directement de cette bibliothèque de chat CN. Maintenant, je vais avoir une page d' accueil qui demande rapidement le nom de l'utilisateur et peut-être même de faire son premier voyage. Il s'agirait de trois champs rapides pour obtenir leur nom ainsi que leur premier voyage, qui impliqueront le nom du voyage et les dates, mais les dates, je pense qu'il faudrait simplement les avoir à la place. Ensuite, une fois qu'ils accèdent à leur tableau de bord, qui est l'écran d'accueil principal, ils voient tous leurs voyages. Ils peuvent créer un nouveau voyage à partir de là, cliquer sur un bouton pour créer un nouveau voyage. Ils voient une barre de navigation. Ensuite, sous chaque voyage ou pour chaque carte de voyage, il y aura un nom à l'intérieur, les dates des participants potentiels, et vous pourrez voir qui et combien de statuts Je veux savoir si les voyages sont terminés, tous payés ou s'ils sont toujours en cours, disons, le coût total. Maintenant, cela peut être facultatif. Encore une fois, rien de tout cela n' est gravé dans le marbre pour le moment et le coût pour l'utilisateur. Pour l'utilisateur qui le consulte depuis son tableau de bord, le coût de ce voyage. , un lien de copie rapide ce cas, un lien de copie rapide serait bien, vous n'aurez même pas à participer au voyage si vous souhaitez inviter rapidement quelqu'un d'autre. Ce sera le tableau de bord, encore une fois super simple. Enfin, la page du voyage. La page du voyage contiendra tous les détails du voyage. Ce sera le nom, les dates, encore une fois, potentiellement facultatifs. Toutes les informations de la carte, jusqu'à ce point, où l'utilisateur peut réellement quitter le voyage ou le supprimer s'il l'a créé, il peut régler le problème et vous donne une ventilation simple de qui doit, combien à qui, si un public ou si un utilisateur non authentifié ou connecté visite, ils peuvent voir un bouton pour rejoindre le voyage et ensuite ils seront invité à s'inscrire et à s'inscrire, super simple en deux clics maximum. Si l'utilisateur crée un voyage, il lui suffit d' ajouter un nom, les dates seront facultatives, puis d' appuyer simplement sur Copier le lien pour partager. Pour ajouter une dépense, il va y avoir un flux simple. Je me dis encore une fois, sur la même page, je ne pense pas vouloir afficher ne serait-ce une fenêtre contextuelle ou une autre page, mais une fois que j'aurai fini de concevoir, je les trouverai en détail. Ensuite, nous avons le nom de la dépense. Quelle a été cette dépense ? Quel était le total ? Qui était impliqué, puis quelques types divisés. Est-ce que c'était égal ? S'agit-il de montants ou de pourcentages spécifiques entre les personnes, ou même potentiellement, je pense que c'est une nouveauté Je ne l'ai pas vu sur d'autres outils, mais depuis des jours. Imaginez quelque chose comme Airbnb si quelqu'un restait 20 jours au lieu de 30 jours Il suffit de dire combien de jours ou de nuits cette personne est restée par rapport aux autres et de cette façon, vous pourrez le calculer facilement. C'est bien de les avoir, mais nous allons probablement les garder hors de portée du MVP, moins pour moi Les étiquettes qui peuvent être étiquetées peuvent être des types de catégories de clôtures S'agit-il d'un repas ou d'un B&B, d'un logement, etc. Puis aussi la sélection des devises. Si vous voulez avoir plusieurs devises, ce serait bien aussi, car comme vous pouvez l'imaginer, si vous avez plusieurs devises dans l'application, cela peut devenir un peu plus compliqué. Pour l'instant MVP, première version, les utilisateurs viennent s'en plaindre plus tard Mais pour l'instant, nous voulons simplement sortir la première version le plus rapidement possible. Il n'y aura donc qu'une seule devise, quelle que soit la devise que vous connaissez, utilisée dans votre pays ou dans le pays de l'utilisateur, nous allons choisir. Alors tout est prêt maintenant. Encore une fois, tout cela pourrait changer et changera dans le processus de conception et de développement proprement dit. Vous n'avez pas encore besoin d'en avoir une idée parfaitement claire lors de la phase de conception ou de planification en fil de sel Nous avons examiné quelques exemples. Nous avons dressé une liste de ce que nous voulons sur chaque page. C'est super simple. Encore une fois, à part l'authentification, qui compte deux pages ici, tout le reste n'est qu' un écran de bienvenue et deux autres écrans. C'est ce qu'est vraiment un MVP. Vous pourriez même aller plus loin et le réduire, mais je dirais que ce serait le produit minimum viable qui ait également de la valeur. Nous voulons qu'il soit précieux. Nous ne voulons pas non plus le rendre trop MVP lorsqu'il est trop petit pour être rechargé, car n'oubliez pas que nous chargeons ce produit et qu'il ne gèlera pas Nous voulons également nous assurer qu'il crée de la valeur et qu'il a une apparence professionnelle et propre. Mais vous n'avez pas nécessairement besoin de milliers de fonctionnalités pour facturer les utilisateurs, une seule suffit. Oui, je vais commencer à concevoir maintenant avec tous ces écrans. Revenez m'expliquer mon processus de conception et j' espère que vous ferez de même. 8. Évaluer les conceptions: Très bien, j'ai donc fini de concevoir ma première version. Et encore une fois, je n'en suis pas très fier car c'est censé être le MVP. J'ai assemblé ces dessins en moins de, je dirais, quatre ou cinq heures. La clé ici est la rapidité et c'est ce que vous recherchez pour votre première version. Encore une fois, j'ai une authentification ici. Vous voyez, beaucoup de ces composants proviennent de la bibliothèque ShatSN de Figma Vous pouvez le trouver dans la section communautaire. J'ai collé l'écran de vérification à partir de là, puis c'est très simple : quelle est votre page de nom ? Ça a l'air un peu simple, alors peut-être que dans le MVP lui-même, je vais l'améliorer un peu Et puis nous avons la page MiTripsPage. J'ai mes voyages ici. Uh, Bali avec sept amis, et voici ce que l'on vous doit. Ainsi, vous avez tout de suite une idée de tous vos voyages, montant qui vous est dû ou du montant que vous devez. Donc dans ce cas, on me doit quelque chose et j' ajoute cette petite touche sympa ici, comme, vous savez, tampon que vous recevez sur un passeport. Donc, de petites touches de design comme ça sont toujours, euh, importantes, je dirais. Donc, le titre de MVP ne signifie pas que vous devez créer quelque chose de moche. Hum, tu sais, ce n'est pas convivial. Il s'agit simplement de la version la plus simple que vous puissiez mettre sur le marché et qui ne vous coûtera pas des semaines de développement. Copiez rapidement le lien ici, afin que les utilisateurs puissent rapidement copier le voyage et l'envoyer à leurs amis. Ils peuvent créer un nouveau voyage et s' ils sont sur cette page et qu'ils n'ont encore aucun voyage, ils ont un petit état vide comme celui-ci. Encore une fois, j'ai extrait ce modèle de la bibliothèque Chat CN, apporté quelques modifications, et nous y voilà Euh, alors la page la plus importante. J'ai commencé avec deux versions. abord, j'ai commencé par cette version et j'ai commencé à l'assembler, et elle était un peu partout et elle m'a fait penser à Split Wise. C'est là que ChatGPT entre en jeu. En fait, tout d'abord, je me suis demandé : comment puis-je rendre mon application différente ? Du point de vue du design, quelles sont les choses qui me différencient ? L'un des points sur lesquels il met l'accent est de raconter une histoire et de permettre de comprendre facilement où vous en êtes par rapport à votre équilibre. Au lieu de commencer par les transactions, nous nous intéressons au montant que les utilisateurs me doivent et qu'ils peuvent facilement comprendre. Je lui ai donné le premier design et j'ai dit : Qu'en pensez-vous ? C'est ce que j'ai jusqu'à présent. Encore une fois, cela a été répété avec moi. Je m'ai dit d'avoir un résumé plus clair pour les utilisateurs. Au fur et à mesure que je mettais à jour le design de plus en plus, continuais à envoyer des versions et à me faire des idées. Évidemment, je n'ai pas implémenté tout cela, mais à un moment donné, cela m'a dit que vous êtes assez bon pour lancer en tant que MVP. C'était V One. Je l'ai conçu pour créer quelque chose comme ça. Maintenant, sur la page des voyages, j'ai invité des amis ici. C'est le principal CTA, tous les voyages Vous pouvez donc revenir à tous les voyages, puis, ici, avoir quelques informations rapides sur le créateur du voyage, le moment et le nombre de personnes impliquées Je pense que si vous passez la souris dessus, vous pourrez voir la liste réelle des personnes ou quelque chose comme ça Encore une fois, ces petites interactions auxquelles nous faisons face dans le processus de développement proprement dit. Vous n'avez pas besoin d'approfondir vos designs. Ensuite, vous avez une liste de soldes, par exemple qui vous doit combien immédiatement, vous savez combien vous est dû au total et qui doit vous payer. Quick Mark a payé. Vous n'avez pas besoin de procéder à une installation complète dans d'autres applications. Nous voyons l'activité des voyages ici, puis vous pouvez voir toutes les transactions répertoriées une par une. Quelles ont été les transactions ? Titre, qui l'a ajouté et qui s'est passé entre les deux ? Plus important encore, combien recevrez-vous ou combien devez-vous si vous devez payer pour quelque chose ? Encore une fois, c'est super simple, cela n' ajoute aucune dépense ici. Je n'ai pas encore travaillé sur cet article pour ajouter une dépense. C'est mon design. J'espère que vous avez fait quelque chose de similaire pour votre application. Encore une fois, limitez le nombre d'écrans au minimum si vous n'avez pas encore lancé ce processus et utilisez ChatGPT et d'autres outils d'intelligence artificielle pour vous faire ChatGPT et d'autres outils d'intelligence artificielle part de vos commentaires, mais ne vous y fiez pas entièrement car encore une fois, ce n'est pas parfait, ce n'est pas un concepteur, parfois il vous dira ce que vous voulez entendre ou il vous indiquera des informations supplémentaires qui pourraient ne pas être pertinentes. C'est là que vous, en tant que designer ou votre équipe de designer, pouvez également intervenir et vous défendre ou relever un petit défi grâce à l' IA. Hum, donc oui, nous l'avons et il est temps de commencer à le construire. Donc, avant de passer au curseur et de développer cette application, voyons quelle pile nous allons réellement utiliser. 9. Choisir une pile: Très bien, passons enfin à la partie passionnante, création de notre première version, notre application MVP Nous allons passer en revue la pile que nous allons utiliser ou du moins je vais utiliser. Si vous voulez suivre, utilisez la même pile, veuillez le faire par tous les moyens. Si vous avez déjà une pile que vous préférez, faire la même pile fait essentiellement référence à tous les outils et à ce que vous utilisez pour coder votre application ou lui donner vie. le moment, nous ne faisons que concevoir Figma, une application qui nous permet de concevoir nos écrans Mais pour transformer ce design en une véritable application Web fonctionnelle et la mettre en ligne pour que une véritable application Web fonctionnelle les utilisateurs puissent l'utiliser, payer, recevoir des e-mails, etc., nous devons utiliser une pile pour nous devons utiliser une pile tout fonctionne, à la fois en termes de front end, c'est-à-dire la partie design, et de back-end, c'est-à-dire toute la partie serveur qui gère toutes les informations et données. Alors très rapidement, examinons ce que je vais utiliser, puis vous déciderez vous-même si vous voulez suivre ou utiliser un autre cerf Les principaux outils que j'utiliserai pour coder ce projet seront Cursor, l'outil de codage par IA. Il dispose d'un agent AI intégré avec lequel vous pouvez discuter et, bien sûr, il utilise des modèles tels que le Cloud et le GPT Hum, et d'autres pour donner vie à l'idée. Ensuite, nous avons le dépôt de code sur Github. C'est ici que le code sera enregistré. Chaque fois que vous mettez à jour le code, il finira par le mettre en ligne également aux utilisateurs, dont nous verrons dans une seconde comment cela fonctionne. Pour le stack, l'application Web elle-même sera construite avec NexGS, ce qui nous permettra créer des applications et des API frontales et dorsales, puis pour la base de données, la manière dont nous allons stocker les données ou l'endroit où nous les stockerons, ce sera via Mongo DEB, qui est très facile à configurer C'est là que je vais stocker mes données d'utilisateur et de voyage. Ensuite, ATJS nous permet essentiellement d' authentifier les utilisateurs, sorte qu'ils leur permettent simplement de s'inscrire, avoir des options d' inscription simples comme connexion avec Google, le courrier électronique, etc. Versal est ce que nous utiliserons pour déployer notre code. Une fois notre code déployé sur GitHub, il sera transféré sur Versal, qui héberge essentiellement l' application et le back-end À partir de là, nous pouvons même voir des choses comme des analyses, des journaux et des choses comme ça. Stripe sera la société de paiement qui nous aidera à traiter les paiements pour cette application. Encore une fois, nous déciderons du prix de notre application, mais une fois que nous l'aurons fait, Stripe sera l'outil que nous utiliserons pour traiter ces paiements. Resend est un outil d'envoi d'e-mails. Pour les notifications et les e-mails de connexion, nous utiliserons Renvoyer pour les envoyer. Au départ, tout cela est presque gratuit Ils ont tous des forfaits payants, bien sûr, et des entreprises comme Stripe, Stripe ne facture que le pourcentage des transactions, vous n'avez donc pas à soucier de tout autre paiement de leur part. Encore une fois, tous les autres, c'est gratuit ou gratuit. Ce sont des options facultatives. AW est destiné au stockage. Si vous souhaitez stocker des images d'utilisateurs ou des téléchargements de reçus, dans mon cas, je le ferai via AWS Encore une fois, pour le MVP, probablement en omettant cela. Google Analytics est un bon outil pour suivre les données des visiteurs et des utilisateurs. est un autre bon outil d'analyse PostHG est un autre bon outil d'analyse. Vous pouvez même obtenir plus d'informations, telles que des cartes thermiques, la façon dont les utilisateurs interagissent et ce qu'ils regardent lorsqu'ils interagissent avec votre application Très bon pour le débogage et des choses comme ça pour déterminer où se situent les problèmes Donc certainement un bon outil utile. Mais encore une fois, la censure optionnelle de Super base remplace off et database, vous n'aurez donc pas besoin de Next JS et de Mongo DB Si vous utilisez Super Base et que je crois que même pour certains e-mails, vous n'en aurez probablement pas besoin non plus. Je vais remplacer certaines choses. Mais encore une fois, je ne l'ai pas vraiment utilisé parce que je ne vois pas vraiment la nécessité que nous ayons déjà une pile de solutions. Si vous étudiez à l'extérieur et que vous voulez l'essayer, ce n' est pas une mauvaise option non plus, d'après ce que je sais. C'est la pile que nous allons utiliser. Nous allons maintenant commencer par accéder à Cursor. Avant cela, nous allons configurer notre projet dans la prochaine vidéo, puis revenir pour commencer à travailler dessus. 10. Configurer notre projet: C'est bon. Avant de commencer, vous devez installer NoJS Rendez-vous sur nojs.org et cliquez sur Genjs. Vous en aurez besoin pour créer une nouvelle application à l'aide de la pile dont nous avons parlé. Encore une fois, si vous ne voulez pas suivre cette pile et que vous avez déjà la vôtre ou si vous avez déjà découvert qu'il n'y avait pas de JS, vous n'avez évidemment pas besoin de suivre cette procédure. C'est le cas si vous le faites pour la première fois et que vous n'avez jamais créé d'application NoJS Une fois que vous avez terminé, vous voulez continuer et ouvrir le terminal. Donc, depuis votre machine ou depuis votre dossier d'applications, recherchez l' application appelée terminal. Cela ressemble à ceci, puis vous pouvez créer un dossier sur votre bureau ou partout où vous conservez déjà du code ou d'autres projets pour vous-même. Si vous avez un dossier, il est préférable d'y accéder. J'ai déjà un dossier appelé code. Je vais juste faire du code CD comme celui-ci. Allons-y. Je suis dans le dossier de code. Évidemment, si vous avez un dossier pour vous-même, faites-le là. Tu n'en as pas besoin. C'est juste une question d'organisation. Ensuite, vous devez écrire NPX, créer Next App, ajouter Enter, et il vous demandera quel est le nom du projet Pour l'instant, je vais appeler cette application Trips et appuyer sur Entrée. Je vais réellement personnaliser les paramètres, donc je vais choisir mes propres préférences, il suffit de descendre ici. Je ne vais pas utiliser TypeScript, je vais utiliser yes int, appuyer sur non sur celui-ci, sur oui sur celui-ci Pour le reste, je vais garder la valeur par défaut. Oui, non Voilà, c'est en train de s'installer. Encore une fois, c'est ainsi que je configure les projets, vous n'êtes pas obligé de suivre cela, mais c'est ainsi que je ferais. Il est en train de créer ce projet en ce moment. Maintenant, dans ce dossier, j'ai cette application de frais de voyage et elle a créé tous les fichiers. Ce que je veux faire maintenant, c'est ouvrir ce dossier dans Cursor. J'ai déjà installé Cursor. Si vous ne l'avez pas installé, allez-y et faites-le. Ensuite, une fois que je l'ai ouvert Cursor, je vois que j'ai cette interface ici. J'aime avoir la barre latérale ici, la barre latérale principale. Vous pouvez également exécuter la commande B. Et maintenant vous pouvez voir tous les dossiers ici, ce qui est parfait. Vous pouvez même aller de l'avant et exécuter ce projet. Je vais ouvrir un nouveau terminal en accédant à l'onglet supérieur de la barre d'état ou de la barre de menu, en appuyant sur terminal et en appuyant sur Nouveau terminal. Ici, si vous exécutez NPM run Dev So, il exécutera réellement le projet et il s' ouvrira dans un nouveau navigateur Comme ça. Si vous l'avez, cela signifie que vous avez créé une application sans JS et qu'elle fonctionne correctement. Cela servira de base pour le code ou le projet que nous utiliserons Revenons dans la prochaine conférence pour le transférer GitHub ou sur le référentiel de code 11. Utiliser Git: C'est bon. Nous voulons réellement mettre le code que nous venons de créer, même s'il s'agit actuellement d'une base sur Git Hub afin que le code y soit stocké. Ainsi, lorsque nous mettons à jour notre code, nous pouvons l' y transférer afin qu'il soit enregistré avec toutes les modifications. Ensuite, lorsque nous connecterons le versal, qui, si vous vous souvenez, est la plateforme d'hébergement, il utilisera automatiquement le dernier code de GitHub et le déploiera auprès des utilisateurs ou en ligne sur votre domaine afin que utilisateurs ou en ligne sur votre domaine afin les utilisateurs puissent utiliser facilement votre produit Hum, c'est super simple de configurer Git via Inside of Cursor. Évidemment, vous pouvez le faire via github.com et inscrire ici, alors créez un compte si vous n' en avez pas déjà Mais ici, si vous allez simplement dans l' onglet Git Essentially, vous pouvez créer votre premier, vous savez, Commit. Je vais juste faire un commit initial comme celui-ci et publier cette branche. Maintenant, en ce moment, cela me dit voulez-vous en faire un dépôt public ? Cela signifie que tout le monde sur GitHub peut voir mon code ou un code privé ? la plupart des cas, vous souhaitez créer un dépôt privé sauf si vous faites un projet open source. Mais sinon, vous allez choisir le mode privé et tout de suite, il publiera dessus. Ensuite, vous pouvez même l' ouvrir sur GitHub. Si vous cliquez sur Ouvrir sur GitHub, de gestion des frais de voyage est créée sur mon compte GitHub cette application de gestion des frais de voyage est créée sur mon compte GitHub en tant que référentiel privé contenant tout le code ici Euh, et maintenant, si vous apportez des modifications au code, à titre d'exemple, je vais passer à la page point JS, qui est, vous savez, l'écran initial que nous avons vu. Donc, tout d'abord, je vais m'assurer que l'application fonctionne. Donc, cet écran initial, disons, je veux juste mettre à jour le texte ici pour commencer, euh, vous savez, et le remplacer par frais de voyage. Er clique sur Enregistrer qui, d'ailleurs, le met à jour automatiquement . Maintenant, nous l'avons. Ensuite, nous pouvons voir si vous vous dirigez vers l'onglet Git, nous pouvons voir qu'il y a des modifications dans le point de page JS, et nous pouvons voir si vous cliquez dessus exactement ce qui a changé, cette ligne change en ceci, ce qui est correct, puis nous pouvons réellement modifier le texte de validation. Nous allons donc appuyer sur Valider , puis synchroniser ces modifications. Cette modification est désormais également disponible sur GitHub. Si vous continuez sur votre If I open this Git Hub repo, encore une fois, vous pouvez voir qu' il y a eu un commit et je peux voir tous les commits ici Cela vous permet de suivre facilement toutes les modifications que vous avez apportées à votre code au fil du temps Au cas où vous auriez commis une erreur quelque part, vous pouvez toujours revenir à l'un de ces validations C'est pourquoi nous utilisons Git tout au long du projet au fur et à mesure que je le développe. Vous allez me voir l'utiliser plusieurs fois entre chaque fonctionnalité, implémentation ou écran afin que je puisse suivre l' avancement au cas où il y aurait à nouveau des problèmes, je puisse revenir en arrière ou revenir au commit précédent. 12. Choisir le modèle de curseur: Je voulais aborder brièvement les différences entre les différents modèles et modes d'agent et la façon dont je les utilise. En ce qui concerne les modes, vous avez le mode Agent, que nous avons utilisé pour confier des tâches à Cursor à accomplir pour nous. Mais nous avons également le mode plan qui avant que l'agent prenne des mesures pour modifier le code, nous vous demandons de planifier les choses, de nous dire ce qu'il va faire et comment il implémenterait quelque chose afin que nous puissions examiner un document avant qu'il ne soit réellement implémenté. Il existe également le mode débogage, que vous pouvez demander pour résoudre spécifiquement les bogues, et également mode demande si vous souhaitez simplement poser des questions sur votre code ou sur le fonctionnement actuel de votre application Parmi les modèles, vous pouvez désactiver Auto si vous ne le souhaitez pas et activer le mode Max si vous souhaitez utiliser le maximum de jetons pour cette tâche. Composer est le propre modèle du curseur qui fonctionne plutôt bien. J'ai essayé ça de nombreuses fois. Ops est également un excellent jeu, y compris Sont. Je ne travaille généralement pas avec les modèles GPT, mais ils sont également disponibles ici Mon préféré est aussi le compositeur de Sonnet ou d'Ops. Mais gardez à l'esprit que ce n'est pas nécessaire, sauf si vous confiez une tâche plus complexe ou compliquée que l'automate aurait généralement du mal à Une fois que vous aurez un peu plus de complications ou de tâches compliquées à confier à Cursor, j' utiliserai ces modèles, en gardant à l'esprit que, bien entendu, utilisation coûte plus de jetons et de crédits. 13. Ajouter une page d'accueil: Bien entendu, il y a plusieurs choses que vous pouvez faire à partir d'ici. Soit vous configurez les routes d'API pour le backend, vous pouvez créer la base de données et configurer MongoDB Vous pouvez configurer l' interface utilisateur et les designs. Personnellement, j'aime d'abord configurer les designs, puis aborder les fonctionnalités de l'application. L' une des plus grosses erreurs que je constate dans le codage Vibe est de donner l'application tout ce qu'il faut faire en même temps Une fois cela fait, vous perdez techniquement le contrôle de tout et vous devez alors revenir en arrière et lui demander d'apporter des changements partout. Mais si vous contrôlez entièrement l' aspect « Vibe Coding », qu'une tâche, une chose à la fois, sur laquelle travailler, non seulement nous pouvons le contrôler et le contenir parce que nous pouvons voir ce qu'il fait chaque page à la fois, mais c'est également mieux parce que c'est mieux organisé et qu'il y a moins de risques de bogues. Bien que je sois presque sûr qu'il y aura encore des bugs à venir, oh, je vais commencer par l'interface utilisateur. Je vais commencer par la page d'accueil. Ici, dans les designs, nous avons les pages d'authentification, et je suis sûr que vous pourriez également avoir besoin de pages d'authentification pour vous-même. Mais ma page principale est une page de tableau de bord, et si vous avez une page de tableau de bord ou une page d'accueil comme celle-ci, vous pouvez toujours commencer par celle-ci et c'est ce que je vous encourage à faire. Euh, et nous allons utiliser ce que l' on appelle le serveur Figma MCP, qui crée essentiellement une connexion entre Figma et Cursor pour pouvoir le faire ou facilement afin que nous puissions copier un lien depuis Figma, le coller dans Cursor, coller dans Cursor, et nous allons prendre toutes les propriétés de l'écran, pas seulement des captures d'écran et implémenter un très proche, pas seulement des captures d'écran et implémenter version propre de ce design ou de cette interface utilisateur. Euh, donc pour ce faire, vous aurez besoin de Figma Pro, vous aurez besoin d'un compte de niveau professionnel , puis vous allez passer en mode Dev ici Ici, vous pouvez voir le MCP sur ce panneau. Si vous ne le voyez pas, c'est peut-être parce que le MCP est désactivé. Si MCP est désactivé, vous verrez ce serveur MCP de bureau activé . Tu vas toucher ça. Ensuite, MCP sera activé sur cette URL et vous allez continuer à la copier Une fois que vous l'avez copié dans Cursor, si vous utilisez d'autres outils, ils sont également équipés de MCP pour la plupart d'entre eux Faites quelques recherches sur votre outil et sur la façon de configurer MCP Pour Cursor, vous allez dans les paramètres, vous allez dans Outils et MCP, puis vous cliquez sur Nouveau serveur MCP, puis vous remplacez cette URL celle que vous avez obtenue de Je l'ai déjà configuré, donc je ne vais pas le faire, mais assurez-vous d'appuyer sur Enregistrer une fois que vous l'avez fait. Ensuite, si vous l'avez bien fait, vous devriez voir FICMA le nombre d' outils activés et c'est activé ici Assurez-vous de cela avant de continuer. De cette façon, vous pouvez simplement cliquer sur la page que vous souhaitez. Je veux la page du tableau de bord. Copiez cette invite ici, mais nous allons y apporter quelques modifications , puis réintégrer dans le nouveau chat ici dans Cursor. Collez-le dedans. Je vais utiliser juste un modèle de voiture pour celui-ci. Mais bien sûr, il existe d'autres modèles que vous pouvez utiliser et nous parlerons un peu des modèles et de la façon d'en choisir un plus tard. Mais pour l'instant, un mode automatique devrait suffire. Nous allons écrire quelques notes ci-dessous. Nous allons nous assurer de transformer chaque carte en composant. Et assurez-vous de transformer la barre de navigation en composant. Ce que je demande à Cursor de faire, c'est de transformer la barre de navigation et ces cartes en composants afin que nous puissions facilement apporter des modifications ultérieurement et que notre code soit plus propre Nous allons juste le faire, appuyer sur Entrée. Je vais commencer à le faire. Maintenant, si le MTP fonctionne correctement, vous devriez le voir vous demander des autorisations en une minute. Voilà. Vous voyez qu'il exécute get design context Figma. Vous pouvez voir les captures d'écran. Encore une fois, il peut vous demander certaines autorisations si vous ne l' avez jamais exécuté auparavant. Nous allons lui donner une minute. En attendant, je vais retourner à la page d'accueil et voir quelles modifications elle apporte ou au navigateur de fichiers lui-même, devrais-je dire. Maintenant, il commence à créer chaque composant, il crée un composant NAVR, un composant de carte de voyage, et met à jour la page avec l'utilisation du NAVR et des cartes de voyage Encore une fois, nous nous concentrons d'abord sur le design, puis sur la mise en œuvre des fonctionnalités, base de données et les fonctionnalités de la création de voyages réels, etc. Tout est fait. Il nous a donné un résumé de tout ce qu'il a fait avec ces composants et il a mis à jour la page que JS a créée. Nous allons conserver toutes les modifications, revenez sur notre navigateur qui exécute cette application. Nous l'avons là. Voici le design, il est copié de Figma. C'est plutôt décent. De toute évidence, il y a des problèmes tels que l'étirement de ces icônes, mais c'est très proche de ce que nous voulons qu'elles soient au final. Je vais faire une dernière chose et je vais lui faire installer ChadSN pour utiliser les composants à partir de là à l'avenir Comme j'utilise la bibliothèque ShatSN, je veux m'assurer qu'elle a accès aux composants Shad CN Il devrait procéder à l' installation. Il recherchera le Shad CNUI, l'installera et espérons-le, apportera quelques mises à jour afin que ces boutons proviennent réellement de Shad CN plutôt que de boutons codés sur mesure Je vais le laisser faire. Vous pouvez faire la même chose, puis nous reviendrons lors de la prochaine conférence pour peaufiner cela et passer à notre page de voyage. 14. Affinements de conception: J'ai fait quelques petites choses ici pour améliorer un peu le design. Je vais juste vous montrer ici. J'ai corrigé les problèmes liés l'ellipse et au texte à l'intérieur qui n'y figuraient pas et à ce SVG étiré pour l'avion Pour ce faire, j'ai écrit quelques instructions. Je vais les passer en revue très rapidement, car encore une fois, je ne veux pas trop insister sur la phase de construction ou sur cette partie du bâtiment, mais simplement dire rapidement quel type d'instructions j'ai données à l'IA J'ai fait en sorte que cela agrandisse l'ellipse du texte. Mais en fait, avant cela, permettez-moi commencer par ce que j'ai fait au départ. Au départ, je lui ai donné deux corrections à apporter. J'ai dit : assurez-vous qu'il y a une couche de texte autour de l'ellipse à l'intérieur et répétez les noms des villes comme dans le design de Figma Vous voulez vous référer au design Figma que vous lui avez donné et que le logo simple est écrasé Pouvez-vous vous assurer qu'il préserve le rapport hauteur/largeur ? Il n'a pas fait un excellent travail sur ce point. Ensuite, j'ai parcouru Figma, sélectionné cette couche simple, puis je sélectionné cette couche simple, l' ai exportée au format SVG En tant que SBG ici. Une fois que vous l'avez exporté, assurez-vous le coller dans le dossier public. Si vous entrez dans les dossiers où se trouve votre fichier ou votre projet, assurez-vous de coller dans ce dossier public toutes les icônes de votre choix, car c'est là que les icônes doivent être stockées. Vous pouvez même créer des dossiers à l'intérieur d'ici et c'est une bonne pratique. Si vous souhaitez créer un dossier d'icônes , puis y stocker toutes vos icônes. Je vais rester simple et tout placer à l'intérieur. J'ai donc fait un travail décent. Le texte était un peu trop petit par rapport à l'ellipse qui s'y trouvait déjà, le cercle Je me suis assuré que c'était la bonne taille. Je lui ai simplement demandé de faire en sorte qu'il suive le même chemin. L'un d'eux était plus circulaire qu'ovale, alors je me suis assuré qu'il assorti. Il a fait un excellent travail et je lui ai dit d' utiliser le SPG pour l'avion Hum, et encore une fois, quelques petits ajustements agrandissent un peu les textes Donc, si vous devez apporter des ajustements, il suffit de le réduire légèrement ou de l'agrandir, faire pivoter le plan SPG parce qu' il était orienté dans le mauvais sens Assurez-vous donc de lui donner ces rotations spécifiques de 90 degrés, etc. Encore une fois, l' horodatage était éteint. Comme vous pouvez le voir dans les dessins ici, ça a l'air plutôt bien. Mais au départ, dans l'application, ce n'était pas le cas. Mais ensuite je lui ai demandé de m' assurer que c'était au centre. Alors maintenant, ça a l'air plutôt bien. Encore une fois, quelques micro-ajustements, abaissez le texte, essayez un ou cinq, apportez quelques modifications. Vous m'avez dit que c'était le rembourrage de 110 pixels, au lieu de 100, j'ai dit d'en essayer un sur cinq parce que c'était trop Donnez des chiffres précis lorsque vous le pouvez. Ensuite, nous allons revenir travailler sur la page du voyage. 15. Page Voyages version antérieure: Donc, avant de continuer, je vais m'assurer de mettre à jour le design de ma carte de voyage et de valider cette modification. Encore une fois, entre les modifications que vous apportez, vous devez les envoyer sur Github de temps en temps afin de pouvoir suivre tout et toutes les modifications que vous avez apportées Juste au cas où vous auriez besoin de revenir en arrière, cela facilite également les choses. Passons à notre page suivante, qui est la page du voyage pour moi, je suppose, celle-ci ici. Il s'agit de la version mise à jour. Je vais passer en mode Dev, copier le lien MCP, le minimiser Encore une fois, assurez-vous que tout ce que vous sélectionnez va à Figma Assurez-vous que Cursor. Assurez-vous que dans Figma, vous sélectionnez le cadre entier. Assurez-vous donc qu'entre les modifications que vous apportez, vous créez une nouvelle discussion dans votre section de discussion basée sur l'IA ici afin qu'elle n'utilise pas trop de crédit ou que vous ne fassiez pas une discussion trop longue, ce qui pourrait être inefficace pour les modifications ainsi que pour la base de crédit Vous voulez vous assurer de créer une nouvelle discussion, appuyer sur Commande ou Contrôle sous Windows, puis je vais coller ce lien depuis Figma pour cette page de voyages, et je vais lui donner quelques informations Je vais dire, ajoutez une nouvelle page de voyages. Sur la base des modèles ci-dessous, l'utilisateur accède à cette page en cliquant sur la carte de voyage depuis la page d'accueil Permettez-moi de revoir les dessins et de voir s' il y a autre chose. Encore une fois, je vais faire en sorte que les cartes d'équilibre soient transformées en composants et que cartes de dépenses en composants soient transformés. Le reste semble bon. Une autre chose que je veux faire est de m' assurer que c'est en cours de téléchargement, afin qu'il télécharge les icônes. Parfois, cela ne fonctionne pas, nous devrons peut-être exporter manuellement les icônes et les images dans notre projet. Mais voyons comment cela fonctionne du premier coup. Je vais faire une pause et revenir quand ce sera fait. C'est bon. C'est fait et je donne un résumé de tout ce qui a été fait, y compris la carte de dépenses qui fait partie de la carte de crédit et la page des voyages, ainsi que les itinéraires. Les itinéraires sont la façon dont les gens naviguent dans votre application NextGS et elle gère donc tout cela Nous pouvons maintenant l'essayer et même créer le lien ici. Trips Slug est essentiellement l'identifiant de ce voyage. Cela jette même les bases de notre backend plus tard, ce qui est incroyable. Jusqu'à présent, nous n'avons eu aucune intégration de back-end ou de serveur. Mais nous le ferons bientôt et cela sera très utile. faisant, le design des cartes de voyage a un peu foiré design des cartes de voyage Nous allons régler ce problème dans une seconde. Mais voyons si nous cliquons sur l'un d'eux. Nous avons une erreur. C'est très courant lorsque vous travaillez avec l'IA. Si vous obtenez une telle erreur, copiez simplement les informations d'erreur ici, renvoyez-les à votre agent de codage. Laissez-le simplement regarder cette erreur et corrigez-la. La plupart du temps, il s'agit soit d'une erreur logique oubli d'un oubli de définir une variable ou quelque chose comme ça , alors qu'elle est généralement petite et qu'elle sera corrigée immédiatement. Donnez-lui un peu de temps. Et pendant ce temps, nous pouvons y retourner ici et là. C'est réparé, et ça a l'air génial, pour être honnête. C'est dès le départ, c'est aussi proche que possible des designs de Figma Encore une fois, c'est ce qui fait la beauté du MCP. Cela m'aurait pris au moins deux jours auparavant. Mais maintenant, nous avons tout cela. Bien entendu, il n'a rien fait que vous ne lui ayez dit, sinon l'ajout de dépenses ne fonctionne pas encore. Tous les voyages fonctionnent, reprennent tous les voyages. Inviter des amis ne fait rien pour l'instant , pas plus que ces trois points ici. Et vous pouvez voir qu'il a créé deux versions différentes. Voici cette version pour Tokyo. Mais si j'y repense, il y a aussi cette version pour Bali, elle a l'air différente. Ce ne sont pas encore des boutons, donc bien sûr, nous avons quelques points à corriger. Je vais prendre note de ces choses et vous devriez faire de même. Au fur et à mesure que vous assemblez chaque page, notez ce qui ne va pas. Je vais prendre note du le bouton ici doit être corrigé. Prenez note de l' ajout de frais, mais aussi pour celui-ci, je vais créer une nouvelle invite à ce sujet. Euh, le reste semble correct, mais bien sûr, il y a des problèmes comme celui-ci, des problèmes d'alignement. Vous voyez que celui-ci est aligné. petites choses comme ça, prenez-en note et renvoyez-les à l'IA. n'y a pas de dégradé derrière la flèche, comme c' est le cas dans mes dessins. Ce sont vraiment de petites choses subtiles. Je vais apporter ces correctifs parce qu'ils sont plus petits , puis revenir et continuer avec le reste du flux, ce qui va augmenter les dépenses. Ensuite, je vais également travailler à la création d'un nouveau voyage. Ce sont deux choses sur lesquelles je vais travailler ensuite. Hum, et encore une fois, pour votre application, suivez-nous. Mais si tu fais exactement la même chose, tu sais, tu peux suivre exactement le même chemin. 16. Router vers le tableau de bord avec: C'est bon. Mon curseur apporte maintenant petites modifications, comme le dégradé dont je parlais ici. Maintenant, une chose que je veux dire, c' est qu' une petite modification que je veux apporter et m'assurer que vous apportez à votre projet est que le projet se trouve dans le dossier de votre application, votre point de page JS est initialement la page d'origine qui apparaît. Donc dans notre cas, pour le moment, c'est juste un hôte local, 3 000. Il n'y a aucune sorte de barre oblique ou de page de somme. Quand tu es ici, hiplah Bali, en gros , tu regardes, dans ce dossier d'applications, la page des voyages C'est là que vous avez ce numéro de voyage. Nous voulons également déplacer notre page ici dès maintenant, celle-ci ici. Si vous avez une page de tableau de bord comme celle-ci, vous ne voulez pas que ce soit votre page point JS, car elle est en fait destinée à votre page de destination. Lorsque les gens arrivent sur votre site Web, la page marketing, la première page qui apparaît par exemple, ici pour la version actuelle de QClip c'est cette page, alors j'ai une page de tableau de bord Le tableau de bord Slash est en fait la page du tableau de bord. Un petit changement, je vais l' avoir et je vais le faire dans un nouveau chat. Assurez-vous que la page JS actuelle devient une page de tableau de bord. Et modifiez le point de page JS pour avoir simplement un texte d'espace réservé pour notre page de destination Nous ne voulons pas qu'elle devienne une page de destination pour le moment. C'est ce que nous allons faire dans un moment. Mais pour l'instant, je veux juste m' assurer que cette page devienne une page de tableau de bord afin d'éviter toute confusion par la suite. Assurez-vous de faire quelque chose comme ça également si vous avez pas fait, car cela apporte un changement, si nous revenons ici, la page de destination sera bientôt disponible, puis si vous allez sur Slash Dashboard, Nous avons une page de tableau de bord ici. Par souci de simplicité, je vais vous proposer d'ajouter un bouton sur la page de destination qui m' amène au tableau de bord. Ainsi, à chaque fois que nous lançons le projet, car par défaut, nous arrivons sur la page de destination, qui se trouve actuellement ici. Nous voulons juste un bouton. Encore une fois, c'est temporaire juste pour que nous puissions accéder rapidement à cette page. Je vais donc continuer à apporter de petites modifications, principalement au design et aux fonctionnalités comme celle-ci ici pour le côté design. Ensuite, une fois que tout sera prêt, nous procéderons ou je procéderai à l'ajout d'une dépense et d'un flux de voyage. Une autre chose que je vais faire est, euh, vous savez, modifier les liens de tous les boutons qui étaient auparavant liés à la page JS pour accéder à Porta JS, sur la page Trips. Je veux juste m' assurer qu'il modifie également ce lien ici. Tous les voyages doivent être renvoyés au tableau de bord plutôt qu'à la page d'accueil ou, encore une fois, à la page de destination. Assurez-vous d'effectuer cette modification. Juste quelque chose de subtil à noter. 17. Ajouter les dépenses: Très bien, les choses commencent à bien paraître et à être beaucoup plus propres, alors je vais procéder aux modifications. Changez les cartes et ajoutez une page de voyages. Je vais maintenant synchroniser ces modifications. En revenant en arrière, je souhaite ajouter mon flux de dépenses. Je l'ai déjà conçu ici parce que je me suis dit pourquoi il n'était pas plus facile de le transmettre à Cursor. Ici, je vais double-cliquer pour sélectionner cette carte qui ajoute une dépense , puis me rendre sur MCP pour copier le lien ou le mode Dev ici dans Cursor Pour créer une nouvelle discussion, collez-la et dites «  ajoutez une carte » pour permettre aux utilisateurs ajouter des dépenses une fois qu'ils ont cliqué sur Ajouter des dépenses. Mais sur la page des voyages, vous devez être précis comme ça, donner un exemple de l'endroit où cela se trouve, même si nous allons probablement le découvrir aussi, mais cela facilite un peu les choses. Assurez-vous de faire disparaître ce blog et, si l'utilisateur clique sur Annuler, fermez-le. Si des modifications sont apportées ou si des numéros sont ajoutés dans les champs de saisie, affichez d'abord une alerte, puis annulez-la ou fermez-la. C'est bon. lui ai donné quelques instructions et la principale était la suivante : si l'utilisateur clique pour annuler cette dépense, assurez-vous qu'il y était la suivante : si l'utilisateur clique pour annuler cette dépense, soit réellement invité, veut-il vraiment la clôturer ou non ? De cette façon, ils ne perdent pas certaines données. Juste un résumé très rapide. Ici, j'ai un champ de montant, donc l'utilisateur saisit le montant. Cela leur indique à quoi c'était destiné. C'est là que la catégorie apparaît ici. Ou le nom de la dépense. Alors c'est comme ça qu'il se divise Habituellement, le partage par défaut est égal, donc égal pour tout le monde. Mais ensuite, s'ils le souhaitent, ils peuvent entrer et modifier les chiffres et ils seront mis à jour dynamiquement . S'ils veulent opter pour un pourcentage, ils peuvent le faire. S'ils optent pour un dollar par dollar, ils peuvent le faire, ou s'ils souhaitent au jour le jour, ils peuvent également le faire. Ensuite, si vous vous en souvenez, il calculera combien de jours à partir du voyage total, cette personne a-t-elle dormi dans cet Airbnb, facturera donc le bon montant , puis ajoutera les frais. Donc, c'est assez simple et direct. Il va commencer à le faire et voyons ce qu'il fera dans une minute. C'est bon. Cela a fini de fonctionner et voyons voir à un prix. Il est donc évident qu'il n'a pas accédé aux designs de Figma. Je peux le constater par le design, mais je ne comprends pas exactement à quoi cela devrait ressembler. Je vais vous demander : avez-vous suivi exactement les designs de la FICMA et lui avez-vous demandé cela ? Nous n'y avions pas accès, nous allons chercher les designs maintenant. Cela arrive parfois. Il fait des erreurs, il n'y accède pas réellement pour une raison quelconque, vous devrez peut-être le réactiver Juste un rappel amical, vous devrez peut-être le faire plusieurs fois si cela ne se produit pas la première fois. Voyons ce qu'il fait cette fois-ci. Cette fois-ci, ça l'a réparé. En fait, j'ai saisi des chiffres. 20$ ça calcule automatiquement le tout à 30$, et voilà Vous pouvez en retirer des personnes. Ce ne sont probablement pas les bons états, donc je dois juste mettre à jour ces petites choses. Vous pouvez utiliser une base de pourcentage. Et cela ne semble pas tout à fait correct non plus. Encore une fois, il se peut que je doive apporter quelques modifications ici et là pour m' assurer que, pour les détails, il le met à jour. Mais le design de base est correct. Bien entendu, leur placement pas correct, mais au moins il nous demande si nous voulons réellement les supprimer, à un prix, et ensuite vous ne pouvez pas maintenant, cela vous permet d'ajouter des dépenses vides De petites choses comme ça ont besoin d'être réparées. Mais nous allons apporter ces modifications et continuer dans la prochaine conférence. 18. Authentication Pages: Très bien, nous entrons dans le vif du sujet, la phase de construction, et nous devenons plus réalistes. J'ai modifié la configuration de l'éclairage derrière moi pour qu'elle corresponde à cette ambiance. Mais en gros, nous allons commencer à travailler sur notre authentification dès maintenant. Je vais donc diriger le projet et revoir une fois de plus où nous en sommes. J'ai configuré ma page de tableau de bord. Il s'agit évidemment de données de test et non de données réelles Nous allons donc créer de vrais trajets et des données réelles. Pour l'instant, ce ne sont que des tests, mais j'ai une première interface utilisateur fonctionnelle. Il y a évidemment encore des améliorations à apporter, mais nous n'entrerons pas dans les détails. En fait, pour devenir votre MVP, vous devriez privilégier l' élan et le faire ressortir rapidement plutôt que les petits détails. En tant que designer, je me retrouve parfois dans le terrier du lapin qui corriger de petits détails de conception, et dans une certaine mesure, ils sont importants à Oui, j'ai également ajouté le flux de dépenses ici pour moi. Encore une fois, ce n'est pas parfait. Il reste encore des ajustements à apporter. Mais je pense que c'est le bon moment pour commencer à travailler sur l'authentification. En d'autres termes, permettre aux utilisateurs se connecter et de créer un compte. Pour cela, nous allons utiliser deux outils. Nous allons utiliser ATJS bibliothèque qui vous permet connecter vos utilisateurs à l'aide de différentes applications, comme Github et Google, Twitter, Apple, ainsi que Email, bien sûr Encore une fois, nous allons faire du MVP et nous en tenir aux e-mails pour le moment Mais évidemment, pour les configurer, vous pouvez également passer par là. Ils prennent juste un peu plus de temps et un peu plus de configuration en soi. Vous pouvez en fait suivre les instructions pour ceux-ci sur la façon de configurer, par exemple, Google. Pour l'instant, nous allons commencer par simplement se connecter par e-mail, afin que les utilisateurs puissent saisir leur e-mail. Je leur enverrai un lien magique pour se connecter. Et pour ce lien magique, nous devons réellement envoyer des e-mails. Pour envoyer des e-mails, nous allons utiliser cet outil appelé Renvoyer essentiellement qui vous permet essentiellement d'envoyer jusqu'à 3 000 e-mails par mois gratuitement C'est une excellente option. Alors allez-y et commencez à créer un compte pour Resend Je vais faire la même chose ici. C'est bon. Ainsi, une fois que vous êtes connecté, vous pouvez créer une clé d'API pour vos comptes, et c'est ce que vous pouvez faire. Et assurez-vous de le copier. Maintenant, ce que vous allez faire , c'est revenir dans votre curseur ou partout où vous avez vos fichiers et vous allez créer un nouveau fichier, et vous allez l' appeler exactement orthographié point ENV point Local Il s'agit donc d'un fichier d' environnement dans lequel toutes vos clés d'API seront stockées afin que ces clés d'API puissent être utilisées pour authentifier votre application par renvoi pour l'envoi d'e-mails Il s'agit d'un fichier super privé. Vous ne souhaitez pas le publier ou le publier sur GitHub. C'est pourquoi il se trouve automatiquement dans le fichier Ignorer, qui ignorera le téléchargement de ce fichier Ce fichier définit en fait ce qui sera envoyé sur GitHub par rapport à ce qui ne l'est pas et les fichiers ENV à points ne le seront pas Elles sont secrètes. Vous voulez le garder secret et le garder sur votre machine. Euh, donc pour le moment, vous pouvez vraiment le taper comme vous le souhaitez, mais j'aime simplement renvoyer la clé de soulignement de l'API de soulignement, égale à, puis y vous pouvez vraiment le taper comme vous le souhaitez, mais j'aime simplement renvoyer clé de soulignement de l'API de soulignement, coller votre valeur Une fois que vous avez collé votre valeur, appuyez sur Enregistrer, fermez ce fichier. Maintenant, nous voulons également configurer Auth JS. Nous allons donc demander à Cursor de nous aider dans ce domaine. Mais d'abord, je vais copier le design de nos écrans d'authentification. Je vais donc juste faire celui-ci ici. Je vais aller ici. Nous y voilà. Implémentons cet écran de connexion de Figma. Tout d'abord, allons-y et implémentons le design avant d' intégrer l'écran de connexion. Je vais juste m'assurer d'utiliser les éléments Shad CN. Et cette page devrait être slash Login. Je vous indique le nom pour le créer, même si vous l' auriez probablement découvert de toute façon, mais je vous dis de créer explicitement une page de connexion dans notre application Lorsque vous accédez à votre app.com, cliquez sur Login, people et sur cette page Nous allons commencer par cela. Nous reviendrons dans une seconde pour voir comment cela fonctionne. Passons à Slash Login. Et nous y voilà. Pas mal du tout, très proche de ce que nous avons. Nous nous occuperons du graphisme plus tard, une fois que notre application sera lancée. Mais c'est génial. Il y a encore des problèmes mineurs à corriger lorsque je passe le curseur sur les boutons, ce bouton de connexion n' affiche pas le bon curseur Encore une fois, pour ces petites choses, assurez-vous simplement de le faire savoir sur le bouton de connexion le bon type de curseur ne s'affiche pas. C'est ainsi que vous souhaitez aborder votre ensemble de correctifs petit à petit, un par un. Ensuite, nous voyons que nous avons une inscription. Nous n'avons pas encore d'écran d' inscription, donc je vais également lui demander de dupliquer cette page et de créer une version d'inscription sur Slash Signup Je fais la queue. Ensuite, il travaillera là-dessus. Pendant ce temps, nous reviendrons dans la prochaine conférence pour poursuivre notre configuration d'authentification. 19. Base de données: Bien, j'ai une page d' inscription à laquelle je vais accéder et avant que nous puissions réellement faire en sorte que notre authentification fonctionne vraiment, nous devons créer une base de données. La base de données est donc l'endroit où les données sont stockées. Ainsi, une fois qu'un utilisateur saisit son adresse e-mail, passe et souhaite créer un compte, c'est là que dans la base de données, un enregistrement de compte sera créé, et chaque fois que nous aurons besoin de mettre à jour cet utilisateur ajouter des voyages ou d'ajouter des dépenses. Tous ces éléments doivent être séparés. Vous pouvez les considérer comme des tables ou des catégories distinctes de documents dont nous avons besoin à l'aide d'une base de données. Pour notre base de données, nous allons utiliser MongoDB. Bien sûr, il existe d' autres options comme Postgres et Neon et bien d'autres Si vous en avez déjà l' habitude, choisissez-le. Sinon, démarrer avec Mongo DB est simple. Rendez-vous sur mongodb.com, lancez-vous. J'ai déjà un compte, je vais me connecter. Une fois connecté, assurez-vous de créer un nouveau projet. Je vais juste donner un nom à mon projet Trip Expense pour le moment. Encore une fois, vous pourrez le modifier ultérieurement. Appuyez sur Suivant. Cliquez sur Créer un projet. Ensuite, une fois que vous êtes ici, vous souhaitez créer un cluster. Le cluster est essentiellement un conteneur pour votre base de données. C'est ici que certaines options apparaîtront. Je vais choisir la version gratuite qui est suffisante pour commencer, puis au fur et à mesure que vous aurez de plus en plus d'utilisateurs, vous voudrez peut-être passer aux autres. Il suffit de laisser le cluster zéro pour le nom, puis laisser avec les paramètres par défaut, de créer un déploiement. Maintenant, tout de suite, vous verrez un nom d'utilisateur et un mot de passe ici. Vous allez continuer et appuyer sur Créer un utilisateur de base de données. Vous allez choisir une méthode de connexion et je vais choisir une boussole. Compass est donc une application qui vit sur votre machine et vous pouvez gérer essentiellement les données grâce à laquelle vous pouvez voir les données. Vous n'êtes pas obligé de vous connecter à mongodb.com à chaque fois sur votre navigateur En fait, vous pouvez simplement utiliser cette application MongoDB Compass pour ce faire Allez-y, téléchargez-le. Prenez une seconde pour le faire si vous ne l'avez pas. Je l'ai déjà, donc je vais cliquer sur J'ai installé Compass. Ensuite, ici, vous obtiendrez une chaîne pour votre connexion. Vous avez à nouveau besoin de cette chaîne pour l'avoir dans votre code. Assurez-vous de le copier. Cliquez sur OK ici. Retournez à votre code et à l'intérieur du point Local que nous avons créé, vous allez créer une nouvelle ligne, URI de soulignement Mongo est égal à, puis coller la chaîne que vous avez obtenue de Mongo DB Appuyez sur Enregistrer et fermez-le. Maintenant, une fois dans la boussole MongoDB, vous pouvez ajouter une nouvelle connexion, coller l'URI que vous avez obtenu Je vais changer le nom application Trip Expense ici , puis enregistrer et me connecter. Je suis donc à l'intérieur maintenant. n'y a pas encore de données, donc il n'y a rien que vous puissiez voir ici. Nous allons faire encore une chose. Vous allez revenir à votre adresse locale à la fin de votre chaîne où il est écrit mongodb.net slash, vous allez écrire Dev DEV Peu importe la façon dont vous l'écrivez ou même si vous écrivez le développement ou autre. Tout cela est juste pour créer un dossier appelé Dev ou un conteneur, vous pouvez y penser qui sépare essentiellement votre base de développement de votre base de données de test de votre production. Une fois que nous serons en ligne et que les autres utilisateurs pourront l'utiliser, vous souhaitez qu' il reste généralement sur un autre conteneur de votre base de données ou de votre cluster afin d'éviter toute confusion. C'est davantage une question d'organisation et de bonnes pratiques. Une fois que nous serons arrivés à la production réelle, vous verrez comment procéder. Mais pour l'instant, assurez-vous d'ajouter cette barre oblique Dev. Nous sommes tous installés ici. Revenons maintenant dans la prochaine conférence pour commencer à authentifier les utilisateurs 20. Finishing Authentication: Pour commencer à créer des utilisateurs. Une chose que je tiens à noter, c'est qu'en ce moment, dans mon application, nous avons cet e-mail et ce mot de passe. Je vais choisir de ne pas utiliser de mot de passe et de rester simple pour que les utilisateurs saisissent simplement leur adresse e-mail obtiennent un lien pour se connecter facilement à l'application. De cette façon, c'est beaucoup plus simple et ils n'ont pas besoin de se souvenir du mot de passe, etc. Évidemment, vous pouvez choisir de le faire si vous le souhaitez. Bien entendu, ces boutons ne fonctionneront probablement pas au départ. Plus tard, si nous avons le temps, nous pourrons toujours le configurer. Mais pour l'instant, concentrons-nous uniquement sur la connexion des utilisateurs par e-mail. Pour ce faire, je vais me rendre ici et participer à une nouvelle discussion. Nous allons installer Next Auth et implémenter l'authentification, cela fonctionne et également ajouter un modèle utilisateur et les fichiers nécessaires pour Mongo Vous allez écrire cela et en gros, tout ce que vous vous dites de faire est d'installer la prochaine bibliothèque JS dont nous avons parlé, puis elle créera un modèle utilisateur. Chaque fois que nous parlons de quelque chose comme un modèle, cela signifie essentiellement définir quels sont les paramètres d'un utilisateur. Par exemple, un utilisateur a un e-mail , un mot de passe, prénom, a des voyages qu'il a créés et des voyages peuvent être liés à un autre modèle, essentiellement. Il faut y voir les données relatives à l'utilisateur ou à tout autre modèle que relatives à l'utilisateur ou à nous sommes en train de créer. Une fois que nous aurons commencé à créer le modèle de voyage, nous aurons également besoin de champs de date à partir de quel jour. Hum, combien de personnes participent à ce voyage, qui participe à ce voyage ? Quelles sont les dépenses liées à ce voyage. Nous pouvons voir que Cursor en a déjà créé un pour notre utilisateur point js. C'est à ça que ça ressemble, non ? Nous avons le nom, l'e-mail, le mot de passe. Il a ajouté un mot de passe parce qu'il l'a vu dans les designs, mais encore une fois, nous n'en aurons pas besoin. Il s'agit d'horodatages, qui indiquent simplement quand cet utilisateur a-t-il été créé ? Quand ont-ils été mis à jour pour la dernière fois ou quand leurs données ont-elles été mises à jour pour la dernière fois ? Par défaut, ils devraient être présents. Nous allons conserver ce dossier. J'ai fait une erreur ici et j'ai oublié de lui dire de supprimer passe et d'utiliser le renvoi pour envoyer des e-mails de vérification C'est ce que je fais exactement en ce moment, lui demandant de supprimer le mot de passe de l'application et de l' authentification et d' utiliser le champ e-mail et de le renvoyer pour vérification Je vais attendre que ça se termine, puis je reviendrai. Une autre chose que vous devez faire pour Next Auth fonctionne, c'est que nous avons besoin cette clé secrète d'authentification pour pouvoir l' intégrer ou l'ajouter à notre fichier local ou à notre fichier d' environnement Copiez simplement ce NPxotSecret d'ici, puis exécutez-le dans Je vais ouvrir un nouveau terminal ici, puis l'exécuter. Tu fais de même. Ensuite, il peut vous demander d' installer un nouveau package, alors tapez simplement Y et appuyez sur Entrée comme pour oui. Je vais vous donner une certaine valeur. Assurez-vous simplement de le copier et de le mettre dans votre propre fichier local. Cursor m'a même préparé un exemple pour voir quelles sont les choses dont j'ai besoin. J'ai également besoin de ce récent e-mail. Assurez-vous de l'ajouter . Pour les tests, vous pouvez simplement le conserver comme ça. Une fois que nous avons acheté un domaine, nous voulons réellement utiliser le domaine réel. vais redémarrer mon serveur en appuyant sur Control C puis en montant ici pour exécuter NPM Run Dev J'utilise simplement la flèche vers le haut pour revenir à la dernière commande que j'ai écrite, j'appuie sur Entrée, puis j'ouvre mon projet une fois de plus. Nous avons cet e-mail. Bon retour. Maintenant, je n'ai pas de compte, alors je vais m'inscrire. Assurez-vous de saisir ici l'adresse e-mail à laquelle vous vous êtes inscrit avec Resend à des fins de test. Nous y voilà. Quand je consulte mes e-mails, je reçois quelque chose comme ça. Il semblerait que nous n'ayons pas collé correctement le secret suivant, tel qu'il figure dans cet exemple de fichier. Alors testons cela une fois de plus, cliquez pour vous connecter, et voilà. Nous sommes connectés. Nous avons en fait un utilisateur maintenant. Notre e-mail est indiqué ici, nous pouvons nous déconnecter d'ici. Si je vais sur notre boussole Mongo DB et que je rafraîchis cette application de frais de voyage, nous pouvons voir que nous avons maintenant ce dossier Dev parce que nous avons mis cette barre oblique Ensuite, si je vais ici, nous avons des utilisateurs, et c'est parti. C'est mon utilisateur, donc il y est apparu . Nous n' avons pas de nom ici. Peut-être que dans la page d'inscription, nous pouvons l'avoir pour que l' utilisateur y inscrive son prénom. À l'origine, pour ce qui est de mon design, je pensais créer une page séparée, mais c'est stupide de n' avoir qu'un seul champ ici Je vais créer un nouveau chat et demander à Cursor d'ajouter un nouveau champ de nom à la page d'inscription ci-dessus. Le prénom de l' utilisateur est également enregistré dans la base de données, abréviation de base Je vais laisser cela fonctionner et nous aurons pratiquement terminé notre authentification. Nous avons maintenant des utilisateurs, une base de données et nous sommes sur le point de rendre cette application pleinement fonctionnelle. Revenons ensuite pour nous concentrer sur le fait de permettre aux utilisateurs de créer des voyages. 21. Créer des voyages: C'est bon. Je pense que je suis prêt à commencer à créer un nouveau voyage ici afin que les gens puissent cliquer sur Créer un nouveau voyage. Je pense à MVP, restez simple, modèle d'alerte rapide qui s'affiche, leur demande le nom du voyage, et les dates, les dates seront facultatives, mais je vais garder ça là Et je vais m'assurer d' utiliser les composants Hat CN car ils ont déjà des sélecteurs de dates, vous n'avez donc pas besoin de le découvrir Ensuite, pour le reste, nous n'avons pas vraiment besoin de quoi que ce soit d'autre de la part de l'utilisateur. Alors peut-être que je vais juste avoir un rapide lien de création de voyage et d'encre et de copie du lien d'invitation. Ils le font simplement et ils peuvent ensuite envoyer à qui ils veulent participer à leur voyage. Commençons par ça. Je vais y retourner et créer une nouvelle discussion ici et dire, euh, faisons en sorte que l'ajout d'un voyage soit fonctionnel. Les utilisateurs peuvent ajouter un nouveau voyage. Assurez-vous de l'ajouter au modèle utilisateur. Assurez-vous de créer un nouveau modèle de voyage. Encore une fois, le modèle ci-dessous est façon dont nous suivons différents types de données Un voyage doit avoir ses propres données distinctes de celles de l'utilisateur, et le voyage inclura des éléments tels que, comme nous en avons parlé avant le nom du voyage, euh, le nombre de dépenses ou les dépenses correspondantes, qui fait partie de ce voyage afin que nous puissions réellement montrer ou permettre aux utilisateurs de voir les bons voyages, etc. et ainsi de suite. Donc, dans le cadre de ce modèle de voyage, je vais simplement écrire dans le cadre du modèle de voyage, assurez-vous d'ajouter le nom de propriétaire suivant, donc qui a créé ce voyage, les utilisateurs qui en font partie. Plus tard, nous ajouterons les dépenses. Comme nous n'avons pas de modèle de dépenses, nous allons simplement le laisser de côté. Date de début, date de fin des voyages. Nous n'avons pas vraiment besoin d'un lieu, ce serait juste le nom. De quoi d'autre avons-nous besoin ? Je pense que c'est une bonne chose pour commencer. Ensuite, nous allons lui demander de créer un nouveau modèle à l'aide Shad CN, les composants qui apparaîtront lorsque l'utilisateur cliquera, créera un nouveau voyage et ne demandera que le nom, les dates et les dates de début Rendez les dates facultatives, mais le nom est obligatoire et lancez le CTA principal ou l'appel à l'action, créez un voyage et copiez le lien d'invitation avec un CTA secondaire pour simplement créer Nous allons l'exécuter, lui donner une seconde et revenir pour voir ce que cela fait. Il est important de savoir ce qui se passe en arrière-plan lorsqu'il fait ce truc et qu'il ajoute cela. Je veux m'assurer que vous comprenez ce que fait l'agent d'IA en arrière-plan, car encore une fois, je pense qu'il est important d' avoir également des informations générales. Il fait certaines choses. Il s'agit de créer un modèle pour notre voyage. Si nous continuons ici, nous voyons toutes les données que nous lui avons demandées. J'en ai même ajouté d'autres comme le code d'invitation que je ne lui ai pas demandé d'ajouter, mais il le fait de telle sorte qu'il peut générer un code de voyage que les gens peuvent s'envoyer les uns aux autres. Il a également créé une route API. La route de l'API est essentiellement un moyen pour le front-end de communiquer avec le back-end et de faire des choses telles que créer de nouveaux voyages. Si nous allons ici, il fait certaines choses en vérifiant d'abord si l'utilisateur est authentifié. Il effectue quelques vérifications initiales, en s'assurant que le nom du voyage est ajouté. Si l'utilisateur ne les ajoute pas et essaie de créer un nouveau trajet, cette route d'API l' empêchera essentiellement de le faire. Mais si tout semble correct, il pourra alors créer le voyage avec les informations suivantes : nom, à qui appartient, qui en fait partie, où se trouvent les utilisateurs, quelle est la date de début ? Quelle est la date de fin. Essentiellement, ce code ne fait que permettre au front-end communiquer avec le back-end en utilisant cette route d'API. Hum, de toute évidence, il fait des suppositions à lui tout seul. L'IA le fera donc si vous ne lui donnez pas suffisamment d'informations ou de contexte. Je crois que je n'ai pas complètement parlé de ce que nous voulions faire sur la page des voyages, qu'il s'agisse de remplacer le type de cartes vides ou de fausses cartes que nous avons créées jusqu'à présent. Voyons ce qu'il fait, puis partons de là. D'accord, il semble donc que je n'ai pas de voyage pour le moment. Il n'a pas encore implémenté la page vide que j'ai déjà conçue, mais je ne lui ai pas encore donné cette page. C'est la prochaine étape dans les choses à faire. Mais essayons de créer un nouveau voyage. Appelons-le Bali 2025. Date de début Choisissons le 2 mars, faisons le 6, créons un voyage et copions l' encre d'invitation, échouons à créer Trip. Il s'est passé quelque chose. Voyons ce qui s'est passé. Ici, dans votre terminal, vous verrez toujours les erreurs qui ont pu se produire. Il semblerait qu'il y ait eu une erreur en rapport avec le suivant écrit ici. Ce que vous pouvez faire ici dans le curseur, c'est que vous pouvez réellement faire et ensuite accéder aux terminaux et vous pouvez sélectionner « c' est le terminal du nœud Vous pouvez donc sélectionner le terminal du nœud et dire «  nous avons eu une erreur et le laisser le résoudre ». On dirait que c'est réglé. Essayons encore une fois. Et il y a toujours un problème. Encore une fois, répétez exactement le même processus. Il y a une autre erreur, il semble que l'erreur soit ailleurs maintenant. Voyons si nous pouvons y remédier. Plusieurs fois le charme. Appuyons sur Créer un voyage et copions l'encre d'invitation. Boum, c'est toujours une erreur. Après les corrections, assurez-vous d'arrêter le serveur de temps en assurez-vous d'arrêter le serveur Appuyez sur Control C dans votre terminal et relancez votre environnement de développement , relancez votre application, puis recommencez. Bali 2025 et nous allons fixer quelques dates, même si ce n'est pas nécessaire. Et nous y voilà. Nous sommes à Bali 2025. Il a même créé ce lien ici. Maintenant, je ne suis pas sûr qu'il ait réellement copié le lien. Essayons de créer lui-même une encre d'invitation et nous l' exécutons à l'extérieur. Nous n'avons pas le bon lien ici, donc la partie invitation n'a pas été correctement implémentée, mais c'est simplement parce que nous nous sommes précipités dans la création du voyage et que nous n'avons pas donné plus de détails sur la façon dont il gérera les invitations d'amis, etc. Ma logique est donc la suivante finalisons d' abord la création du voyage. Faisons en sorte de créer des dépenses et de comprendre tout cela. Ensuite, nous allons travailler sur la manière dont les utilisateurs peuvent réellement inviter des amis à les rejoindre. Pour le moment, c'est incroyable. Si nous revenons ici, le voyage a été créé, et ce n'est pas simplement faux, mais il est en fait passé par notre agenda et si nous actualisons notre boussole Mongo DB, nous pouvons voir que nous avons ce dossier de voyages ici maintenant avec tous les voyages que nous avons créés, celui-ci que nous avons créé, nous pouvons voir qui en fait partie Avez-vous déjà vu un ID d'objet faisant référence à une autre table d'un autre dossier ? C'est l'utilisateur que j'ai ici. C'est l'identifiant de l'objet ici. Il correspond à l'utilisateur ou au propriétaire et , en tant qu'utilisateur, c'est aussi mon compte. Je suis à la fois le propriétaire et l'utilisateur de ce voyage, ce qui est logique. Nous avons la date de début et la date de fin. Il a créé un code d'invitation. Encore une fois, nous n'avons pas donné plus d'informations sur le fonctionnement des invitations, mais nous le ferons plus tard, une fois que j'aurai terminé le processus complet pour un voyage. Revenons et travaillons réellement sur les dépenses. Hum, puis passez aux invitations. 22. Flux de dépenses: Il semble donc que nous sommes sur la bonne voie. Alors pourquoi ne pas continuer à avancer en concrétisant les dépenses ? Ajoutons donc des fonctionnalités aux dépenses, créons un modèle de dépenses avec tous les paramètres nécessaires et veillons à ajouter les dépenses au modèle de voyages, si ce n'est déjà fait. Assurez-vous que les dépenses calculent réellement les soldes des différents utilisateurs. Nous y voilà. Nous sommes en train de le faire passer. Il est temps de tester notre flux de dépenses. Ajoutons une dépense. Disons que c'était 20$ et que c'était pour faire les courses. Et évidemment, je n'ai ajouté qu' une seule personne au voyage, donc cela n'a pas vraiment de sens. Mais allons-y, disons-le et voyons si cela fonctionne. Nous y voilà. Cela a été ajouté. De toute évidence, il faut du travail pour le moment , afficher l'e-mail ici au lieu du prénom. Je suppose que quelque part dans le code, l'e-mail s'affiche s' il n'y a pas de nom pour l'utilisateur, testons-le Je vais aller sur Mongo DB Compass et au lieu que le nom soit vide ou nul, allons-y et modifions-le Si nous appuyons sur Mettre à jour, définissons le nom. À Nima Tahami. Cet ensemble change essentiellement ce nom en Nima Tommy. Habituellement, vous pouvez le modifier directement ici, mais comme il était nul, nous avons dû le faire comme ça. Maintenant, si nous sommes frais, nous avons un nom. Si je rafraîchis l' application, et c'est parti. J'avais raison, le code remplace le nom par e-mail. Si l'utilisateur n'a pas de nom, il l'affichera. Mais j'ai veillé à ce qu'à partir de maintenant, je collecte les noms des utilisateurs dans le flux d'inscription pour voir si nous revenons à tous les voyages et que nous nous déconnectons. Allons nous inscrire maintenant. Je vais vous demander votre nom complet, à moins que vous ne mettiez votre nom complet, je ne vous laisserai pas vraiment vous inscrire, vous devez inscrire votre nom complet. Nous y voilà. Le flux de dépenses fonctionne également. Si nous actualisons notre base de données ici, je devrais voir les dépenses dans un tableau distinct, et c'est parti. Nous avons le voyage auquel il appartient, euh, payé par, qui a réellement payé ce voyage ? Quel en était le montant ? Quelle est la description ? Comment est-il divisé ? Il a en fait gardé tout cela à l'esprit, ainsi que les scissions. Qui doit combien ? Ça a l'air plutôt bien. Je ne vais pas mentir. De toute évidence, il y a encore des améliorations que je peux apporter à cela pour permettre aux utilisateurs de supprimer les dépenses, en m'assurant que cette répartition fonctionne correctement. À l'avenir, je vais faire quelques tests pour m' assurer que cela fonctionne. Prochaine étape, je vais faire fonctionner le flux Inviter des amis afin que les utilisateurs puissent copier un lien ici, appuyer sur Inviter des amis, copier un lien, puis inviter d'autres amis à rejoindre l'application. Le problème est qu'à l' heure actuelle, nous ne pouvons pas créer plusieurs comptes, car Resend nous permet uniquement d' envoyer des e-mails à partir de domaines que nous possédons et nous n'avons pas vraiment marque pour cette application, ni trouvé de domaine ou quoi que ce soit d' Nous devons faire une pause, parler un peu de l'image de marque , trouver un nom et tout ça. Une fois cela terminé , nous pouvons réellement continuer à tester ce flux. Pour l'instant, je n'ai pas à m'inquiéter à ce sujet. C'est davantage en phase de test. Pour l'instant, je vais d'abord m' assurer qu' il est implémenté et que cette option Inviter des amis fonctionne. Les utilisateurs qui ne sont pas authentifiés peuvent voir la page, juste les informations sur le voyage ici, et peut-être un bouton pour rejoindre le 23. L'image de marque: Nous devons donc créer une marque avant de continuer. Tu sais, à un moment donné de ton projet, tu dois le faire. C'est l'une de ces choses qui prennent parfois un peu de temps à trouver, surtout pour choisir le bon nom, le bon logo, polices, les couleurs, etc. Je suis confronté à ce problème à de nombreuses reprises, comme vous pouvez l'imaginer, euh, en créant, je ne sais pas, plus de 16 applications. Alors, créez moi-même une application pour vous aider. Maintenant, bien sûr, vous pouvez également le faire dans ChatGPT Vous n'avez pas besoin de le faire exactement dans cet outil, mais j'ai essentiellement assemblé cet outil pour être en mesure de vous donner une image de marque rapide, y compris des couleurs, des idées de domaines , des idées de noms, etc. Je possède donc déjà un domaine tripvela.com, et comme je l'avais pour un projet précédent qui n'a jamais vu le jour, je souhaite l'utiliser pour ce projet car il est très pertinent, mais je n'ai pas de logo pour celui-ci et je n'ai pas vraiment de polices et de couleurs spécifiques Je vais donc utiliser le kit Brand pour le trouver. Vous allez écrire la marque ou, vous savez, l'idée ici, une application pour aider les amis à partager les dépenses des voyages. Comme j'ai déjà un nom, je vais dire qu'il s' appelle Tripvela Je n'ai pas besoin du nom D. J'ai juste besoin du logo et peut-être de quelques couleurs de police. Ça va prendre une seconde ici. De toute évidence, Tripvela est un nom. Voici un logo simple que je peux utiliser. Il s'agit d'un logo de base, mais vous pouvez également en obtenir un premium. Je vais essayer le logo premium. Cette palette de couleurs n'est pas mal, mais je vais la changer et essayer de voir ce que nous pouvons obtenir d'autre ici. C'est une bonne idée. Ce gris est beau aussi. Je pourrais utiliser certaines de ces couleurs. Mais pour l'instant, voyons voir, c' est le logo premium qu'il a créé. Donnons-lui encore une chance. Évidemment, tripl.com est utilisé parce que c'est le domaine que j'ai, mais il vous montre également d'autres domaines disponibles Si vous voulez d'autres noms, vous pouvez les mélanger. Vous n'êtes pas obligé d'inscrire votre propre nom dans l'outil. Tout est associé à une signature e-mail pour vous, vous pouvez donc l'utiliser pour votre e-mail. N'hésitez pas à jouer avec ça, à trouver une idée de nom, à trouver des polices et des couleurs. Encore une fois, vous pouvez l'utiliser ou vous pouvez discuter avec ChatGPT pour le trouver, puis acheter un domaine Assurez-vous d'acheter un domaine, puis de revenir pour intégrer votre domaine dans Resend, afin que nous puissions créer plusieurs utilisateurs afin que nous puissions réellement tester notre flux d'invitations ou du moins pour mon application Si votre candidature est différente et que vous n'avez pas besoin de le faire, vous pouvez la laisser jusqu'à la fin. Je te verrai dans une minute. 24. Connecter le domaine à renvoyer: J'espère que vous avez déjà acheté le domaine que vous allez utiliser pour votre projet. Une fois que vous l'avez fait, j' utilise maintenant Namechep ici, donc vous utilisez peut-être Go Daddy, Namechep Assurez-vous de trouver la section DNS avancé afin de pouvoir ajouter des enregistrements ici. Ces enregistrements nous permettront d' envoyer des e-mails à renvoyer aux utilisateurs Nous devons passer sous les domaines ici resend.com sur un Écrivez votre domaine. Vous pouvez également ajouter un domaine. Vous pouvez envoyer des e-mails depuis, par exemple, notification dotdmain.com Je vais faire de même. Je vais utiliser notifications.tripvela.com , qui est mon domaine. Ensuite, nous allons ajouter un domaine. Alors je vais vous donner quelques instructions ici. Vous pouvez même regarder une vidéo si vous le souhaitez. Mais c'est assez simple. Tout ce que vous avez à faire est de copier ces enregistrements dans votre DNS, chez votre fournisseur de domaine. Vous allez ajouter un nouvel enregistrement. Si vous regardez en arrière, il s'agit d'un enregistrement TXT, vous souhaitez sélectionner un enregistrement TXT. Pour l'hôte, encore une fois, collez ce que vous voyez ici. Pour la valeur, collez ce que vous voyez ici, vous pouvez simplement le copier facilement et vous assurer que vous le faites correctement. Prends ton temps avec ça. Vous allez également faire un enregistrement MX. Les disques MC sont en fait ici. J'ai déjà envoyé des notifications par points. Alors je veux copier celui-ci ici. Pour ajouter un autre enregistrement MX, en fait, ou en fait, il s'agit d'un enregistrement TXT, pas d'un enregistrement MX, mais d'un autre enregistrement TXT ici, collez l'hôte et collez celui-ci ici, la valeur. Nous les avons déjà faites ici, et celle-ci est facultative, mais je vous recommande de le faire. Un autre enregistrement TXT. Alors, appuyez sur Entrée. La seule chose que je veux m' assurer que vous faites également est de fixer la priorité à dix pour l'enregistrement MX. Comme nous n'allons pas recevoir d'e-mails à ce sujet, il sera simplement envoyé aux utilisateurs pour qu'ils se connectent. Il n'est pas nécessaire d' activer la réception. J'ai ajouté les enregistrements , puis il vérifiera le DNS. Donnez-lui juste un peu de temps. Si vous l'avez bien fait, tout sera bientôt vert. Vous savez alors que vous avez cette configuration et que vous pouvez commencer à envoyer des e-mails à partir de ce domaine. Parfois, cela peut prendre un peu plus de temps que d'habitude, laissez-lui un peu de temps. Cela peut prendre jusqu'à quelques heures ou minutes, mais cela se fait généralement instantanément et nous sommes vérifiés. Nous sommes prêts à partir. Maintenant, tout ce que nous avons à faire est de retourner à notre base de code et de nous assurer que dans la base de code de votre local à points, la base de code de votre local à points, comme dans l'exemple sur point ici, modifiez le renvoi d' un e-mail vers l'e-mail que vous venez de créer Mais bien sûr, vous venez de créer un domaine. Le mien était une notification, point tripvela.com, mais vous avez besoin d'un début pour l'e-mail et pour celui-ci, en général, vous pouvez faire quelque chose comme ne pas répondre Aucune réponse sur notifications.tripvela.com. Je vais juste vérifier que c'est ce que j'ai ici. Assurez-vous de remplacer e-mail renvoyé par e-mail afin qu'il sache et qu'il soit envoyé à partir du bon e-mail Je suis juste en train de tester cela à partir d' un autre e-mail pour voir si cela fonctionne. Je vois que ça marche. Maintenant, je le reçois notifications Tripvela sur tribella.com, envoie et je peux le Maintenant que nous avons créé un autre utilisateur, je peux créer des voyages sous cet utilisateur. Mais ce qui m' intéresse, c'est de pouvoir participer à un voyage que quelqu'un d'autre a déjà fait. Revenons et travaillons sur ce flux lors de la prochaine conférence. 25. Configuration des amis: Ainsi, à partir de l'utilisateur que je viens de créer, qui est un autre utilisateur avec lequel j'ai créé le voyage initial, j'ai essayé d'accéder au même lien que cet utilisateur avait pour ce voyage. Voici le lien pour ce voyage. Mais maintenant, ce que je constate, c'est que je n'ai pas accès à ce voyage. Comme je ne suis pas le créateur du voyage et que je ne fais pas partie des utilisateurs du voyage, je ne peux pas y accéder. Mais ce que nous voulons, c'est montrer certaines informations sur le voyage, peut-être juste cette partie supérieure, qu'il s'agit d'un voyage à Bali, c'est le propriétaire, que ce sont les dates et le nombre de personnes qui y vont. Euh, et au lieu de voir toutes les autres informations, comme les soldes et l'activité du voyage , parce que cela ne me concerne encore, je n'ai pas rejoint le voyage. Ce que nous pouvons faire, c'est avoir un bouton qui indique de rejoindre ce voyage pour voir l'activité ou quelque chose comme ça. Ils cliquent sur le bouton. Ensuite, s'ils n' ont pas de compte ou s'ils sont déconnectés, il leur sera demandé de créer un compte ou de se connecter. Une fois cela fait, ils devraient être en mesure de faire automatiquement partie de cette bande, puis de voir tous les soldes et l'activité du voyage. Pour l'instant, nous allons le dire à Cursor ou à l'agent Cursor AI. Nous voulons permettre aux utilisateurs anonymes ou connectés, ils soient anonymes ou connectés, mais qui ne participent pas à un voyage, de voir des informations de haut niveau sur le voyage. Cela inclut uniquement la partie supérieure, non les sections relatives au solde ou aux activités du voyage. Il devrait plutôt y avoir un bouton pour rejoindre le voyage. Si un utilisateur clique dessus, il doit être redirigé vers la page de connexion, et s'il ne fait pas partie du voyage, il doit alors participer au voyage et voir toutes les informations pertinentes. Ce que nous vous disons de faire c' est que nous voulons les internautes puissent trouver cette bande par ce lien. Si vous avez ce lien, cela signifie que vous pouvez accéder au voyage. Quelqu'un qui a accès à ce lien l' a donc partagé avec vous. Il ne s'agit donc pas d'un lien accessible au public que tout le monde connaît. C'est un lien unique. Comme vous le voyez ici, il contient un identifiant que les gens ne trouveront généralement pas. À moins que quelqu'un n'ait partagé ce lien avec vous, de la même manière qu'un lien Google Dog ou Figma fonctionne également Les utilisateurs peuvent accéder à cette page, mais ils ne peuvent voir aucune donnée tant qu'ils créé un compte et n'ont pas rejoint le voyage. C'est ainsi que nous verrons des amis participer au voyage. En tant que propriétaire du voyage, j'enverrai ce lien à mes amis, puis les autoriserai à créer un compte ou à se connecter s'ils en ont déjà un pour participer à ce voyage et participer à l'ajout dépenses et à la consultation des soldes qu'ils doivent ou doivent. Je vais laisser cela se terminer , puis nous reviendrons pour voir à quoi cela ressemble à partir de là. 26. Tester les liens d'invitation: Euh, j'ai transmis une autre demande à Cursor une fois que c'est fait, et j'ai dit que lorsqu'un utilisateur clique sur Inviter des amis et j'ai dit que lorsqu'un utilisateur clique sur Inviter des amis, montrez-lui un toast, ce qui signifie un petit message indiquant succès, etc., ou des erreurs, disant lien copié, envoyez-le à un ami ou deux, c'est juste un message amical, puis copiez-le dans son presse-papiers pour qu'ils puissent l'envoyer Parce que j'ai remarqué que lorsque je vais sur Inviter des amis, cela ne fonctionne pas, alors je me suis assuré qu'il ajoute également des fonctionnalités pour cela. N'hésitez pas à toujours envoyer plusieurs invites pour pouvoir ajouter des éléments dans la file d'attente sorte qu'une fois que l' agent AI a fait une chose, il fonctionne également sur une autre Bien entendu, vous pouvez exécuter des agents en parallèle en créant un nouvel agent et en faisant exécuter plusieurs agents en parallèle. ce que j'aime faire si je travaille sur quelque chose d'un peu plus compliqué. Ce projet est suffisamment simple pour que nous puissions simplement en exécuter un à la fois. C'est bon. Nous allons le tester. Nous allons aller ici et y jeter un œil tout de suite, même si ce n'est pas mon voyage, c'est un voyage auquel j'ai accédé un autre compte utilisateur que j'ai. Je peux en fait participer au voyage. Donc, si je clique sur Joint Trip Boom, je peux voir toutes les informations et je peux même ajouter une dépense. Nous y voilà. Cet utilisateur s'appelle Tim Cook, donc je peux voir les dépenses ici. Si j'ajoute 20 ici, vous pouvez voir que c'est tout aussi beau si je fais le pourcentage. Le pourcentage ne fonctionne pas correctement. Il doit être calculé en pourcentage, donc il va changer ces champs en pourcentage. Même chose pour le dollar et même chaque jour. De toute évidence, il faut y travailler. Nous ne sommes pas encore là pour perfectionner quoi que ce soit. Nous sommes là juste pour nous assurer que la base fonctionne, puis nous allons commencer à faire de petits ajustements. Si j'ajoute une dépense, d'accord, celle-ci sera ajoutée. Magnifique. Il est montré partagé entre cette personne et cette personne. Encore une fois, de petits ajustements ici et là à faire. Je peux voir que 10$ me sont dus, donc c'est bien et je peux le marquer comme payé, mais cela ne fonctionne pas car jusqu'à présent, cela n'a pas été implémenté. Nous allons également nous assurer que les équilibres sont correctement mis en œuvre. Nous allons donc aller de l'avant et le faire également. Mais pour l'instant, nous pouvons voir que tout fonctionne bien pour que d'autres utilisateurs puissent participer aux voyages. Nous avons deux problèmes avec Next JS . Chaque fois que vous avez des erreurs, il suffit de les copier sur Cursor comme ceci, d'ouvrir une nouvelle discussion partager l'erreur et j'espère que nous la corrigerons . Même chose pour celui-ci. Je vais le faire dans un nouveau chat. Je vais lui demander de corriger ces erreurs. Vous travaillez également sur vos fonctionnalités , puis nous reviendrons lors de la prochaine conférence pour travailler sur les soldes afin que les gens puissent réellement voir ses soldes C'est intelligent et calcule automatiquement ou simplifie la dette, comme le fait Spitwise Ensuite, une fois que ce sera prêt, je vais apporter quelques petites modifications. Je reviendrai vous expliquer les modifications que j'ai apportées. Nous pouvons voir que ces erreurs ont disparu d'ailleurs, donc c'est bien. Mais pour l'instant, je pense que nous sommes presque prêts. Si je participe à tous les voyages, je peux voir ce voyage ici. Ce n'est pas juste parce que cela ne parle que de vous, mais cela devrait en fait indiquer le nombre de personnes participant ce voyage, car il n' y a pas que moi maintenant, il y a trois membres, mais cela devrait être deux. Encore une fois, de petites erreurs ici et là. Notez toutes les erreurs que vous voyez. Lorsque vous testez votre application de cette manière, notez tous les problèmes qui surviennent afin de pouvoir les résoudre un par un. Hum, c'est la meilleure chose à faire. N'essayez pas de régler tous les problèmes en même temps. curseur peut compliquer encore plus les choses, mais j'ai une liste de choses à faire, y compris, vous savez, un meilleur format pour afficher la répartition entre une meilleure icône ici, afin que cette icône puisse changer en fonction du nom de la dépense, euh, vous savez, en ce moment, cela m'a permis d'ajouter une dépense sans dire à quoi elle servait. Donc, il y a pas mal de choses à corriger ici en examinant des problèmes tels que la raison pour laquelle il a choisi trois membres. Je vais revenir et apporter ces modifications à la toute fin. Enfin, avant de terminer notre MVP, je veux également m' assurer que l'application est également adaptée aux mobiles au cas où les utilisateurs essaieraient d' y accéder sur mobile, ce qui, j'en suis sûr, sera le cas pour une application comme celle-ci Il se peut que nous devions également apporter quelques ajustements à cela. Revenons, travaillons sur les équilibres, veillons à ce que les fonctionnalités fonctionnent, puis passons aux petits correctifs et aux écrans mobiles. 27. Ajouter des équilibres: De retour dans l'application, j'ai créé un autre utilisateur et j'y ai ajouté une autre dépense. Maintenant, mon solde est nul car un utilisateur me doit 10$, l'autre, je dois 10$. Maintenant, je veux m'assurer que cette fonction d'équilibre fonctionne et que les utilisateurs peuvent réellement marquer les choses comme payées. Je veux m'assurer que les dettes seront simplifiées afin que, si les utilisateurs se doivent entre eux, cela simplifie qui doit payer qui, afin que les gens du monde entier n'aient pas à effectuer transactions ou de virements, et cela simplifie simplement la tâche pour savoir qui doit à qui afin de réduire le nombre de transactions requises. Il y a évidemment d'autres choses que je voudrais régler, mais avant cela, je vais me rendre sur Cursor, ouvrir une nouvelle discussion et nous allons dire que je veux faire en sorte que l'équilibre fonctionne et soit fonctionnel. De telle sorte que les utilisateurs peuvent l'utiliser pour suivre le paiement de chaque utilisateur à qui ils doivent de l'argent ou à qui ils doivent de l'argent. Je souhaite également que le calcul des soldes soit simplifié afin de calculer automatiquement qui doit payer quel montant afin de favoriser le moins de transactions ou de transferts que les utilisateurs doivent effectuer entre eux pendant le voyage Ajoutez un bouton en haut à droite des soldes, en disant que le calcul automatique est activé S'ils le désactivent, indiquez le montant que chaque utilisateur doit ou doit à l'utilisateur. clair et simple, je vous dis C'est clair et simple, je vous dis de le rendre fonctionnel, de le suivre dans la base de données, de savoir qui a payé qui pour que l'utilisateur puisse le voir ici, de sorte que, par exemple, si je payais cet utilisateur ici, il en garde une trace. Ou je suppose que, dans ce cas, si l'utilisateur m'a payé, je peux dire que Mark a payé. en va de même pour celui-ci, gardez-le en compte et mettez-le en ligne, puis simplifiez les dettes afin que, si les utilisateurs se doivent les uns aux autres, il effectue le moins de transferts nécessaires, comme il le fait en deux parties. Ce sont deux modifications que j'ai apportées. Voyons comment ils s'en sortent. regarde Cursor en train de faire quelque chose parce que parfois je remarque qu'il essaie de faire quelque chose de nouveau. Je lui ai demandé de m'assurer que le bouton payant fonctionne ici et je voulais créer une nouvelle liste dont nous n'avons même pas besoin. Maintenant, les calculatrices automatiques sont activées et si je vois un autre utilisateur, elles fonctionnent parce qu'en ce moment, elles sont éteintes et je vois que ces deux personnes me doivent 10$ chacune Mais si je fais le calcul automatique, cette personne me paie 20 dollars et je suis réglé. Cela fonctionne, c'est bien, mais nous devons nous assurer que le mark paid fonctionne également. Cela dit que cela fonctionne maintenant, voyons voir. Il a simplement disparu de là. C'est intéressant. Nous allons nous assurer que les cartes ne disparaissent pas. J'y ai parlé trop tôt. Il travaille toujours sur cette fonctionnalité, nous allons donc lui donner un peu de temps maintenant. Nous voyons que cela fonctionne maintenant. Je peux annuler ces paiements, les marquer comme payés. Il y a des problèmes liés à la duplication des cartes Je vais m'assurer qu'il conserve réellement la même carte et qu'il la change simplement. Au cours de ce processus, je me rends également compte qu' il existe une lacune en matière d'expérience utilisateur qui pourrait être améliorée. J'ai utilisé le split wise d'innombrables fois et l'une des choses est qu' on ne sait jamais quand agir. Quand devriez-vous réellement commencer à payer d'autres personnes ? Ce que je pense faire, c'est ajouter un bouton de règlement que le propriétaire du voyage pourra utiliser. Ils ont un bouton indiquant, euh, régler, qui clôturera activité du voyage afin que les gens ne puissent plus ajouter de dépenses. Ensuite, il enverra un e-mail à chaque participant dire combien il doit exactement à qui. De cette façon, ils n'ont même pas besoin de se rendre sur l'application pour la voir et ils peuvent simplement avoir un simple bouton dans l'e-mail indiquant que Mark a payé. Je vais travailler sur la prochaine conférence, puis m' assurer que toute la boucle est bouclée avant de revenir et de simplement résoudre quelques problèmes supplémentaires liés à l'application, puis nous devrions être prêts à partir. 28. Conclusion: C'est bon. Voici où nous en sommes. J'ai demandé à Cursor d'ajouter ce bouton «   prêt à régler ». Maintenant, en tant que propriétaire de ce voyage, je peux indiquer que c'est prêt à être réglé. Nous y voilà. C'est prêt à être réglé. Je ne peux plus ajouter de transactions ici, et les autres participants au voyage ne peuvent pas non plus dire ce qu'ils doivent faire. Voici un utilisateur qui dit que tout est prêt. Incroyable. En voici un autre qui dit que vous devez 20$ à cet utilisateur. Nous y voilà. Cela fonctionne plutôt bien maintenant pour un MVP, c'est très bien Nous avons un bouton d'annulation si vous en avez besoin ici. Ensuite, j'ai compilé une liste de toutes les petites et grandes corrections sur lesquelles je souhaite travailler. De toute évidence, ce serait trop pour moi , pour que nous le fassions ensemble, et c'est un peu redondant car je vais simplement introduire ces notes d'interface utilisateur dans Cursor pour qu'il les corrige une par une Ensuite, je vais faire des tests, m'assurer que cela fonctionne et essayer de ne pas y consacrer trop de temps. Bien entendu, il est important de ne pas expédier de produits pour poussettes. Mais pour moi, cela va probablement prendre quelques heures au maximum, sorte que d'ici la fin de la journée, j'aurai une version fonctionnelle de Tripvela puis nous reviendrons et découvrirons comment nous pouvons réellement faire passer reviendrons et découvrirons comment nous pouvons réellement faire notre application via Verso pour qu'elle soit mise en production afin que les utilisateurs puissent réellement visiter notre domaine, voir production afin que les utilisateurs puissent réellement visiter notre domaine, voir notre application et s'y inscrire Maintenant, une chose importante que nous n'avons pas encore mise en œuvre, c'est aussi le paiement. Possibilité d'autoriser les utilisateurs à payer pour ce produit. Ce que nous allons faire, c'est travailler là-dessus lorsque nous créerons notre page de destination dans les conférences ou modules suivants afin que l'utilisateur puisse payer à ce moment-là sur la page de destination, puis nous ferons que l'intégration fonctionne essentiellement à ce moment-là. Ce serait un peu trop de le faire actuellement, car nous sommes également en train de créer l'application. Alors faites la même chose, terminez vos pages et vos fonctionnalités seront les principales, puis commencez à prendre des notes sur les petites choses que vous remarquerez en cours de route. Vous pouvez également montrer votre application à un ou deux amis sur votre machine pour moment afin de recueillir leurs commentaires Peut-être que l'un d'eux note quelque chose que vous avez oublié. Mais c'est aussi un bon exercice. Ensuite, une fois que vous serez prêt, revenez et nous passerons à notre section suivante, qui portera sur la page d'accueil , le marketing et les paiements. 29. Examen final de l'application: C'est bon. J'ai passé quelques heures à tout réparer et à le préparer à être expédié. Je vais donc passer en revue quelques modifications que j'ai apportées. J'ai ajouté quelques états de chargement ici. J'ai demandé à Cursor de créer un squelette en chargeant cette carte. Donc, quand il charge, ça a l'air sympa. J'ai également un état vide maintenant, donc lorsque les utilisateurs accèdent au tableau de bord, ils n'ont aucun voyage similaire à celui que j'ai fait dans Figma J'ai également créé un logo. J'ai placé le logo et le nom ici. La création d'un nouveau voyage est à peu près la même sauf que j'ai modifié le champ de date ici pour rendre un peu plus agréable et passons à un voyage qui existe déjà J'ai donc ajouté quelques éléments ici, la possibilité de voir toutes les personnes participant au voyage, les cartes de solde fonctionnent désormais et les dépenses ont toutes des icônes personnalisées basées sur les dépenses. Si vous ne trouvez pas d'icône, elle affichera simplement le signe du dollar comme ceci. L'ajout de dépenses fonctionne maintenant. J'ai ajouté qui a payé, afin que vous puissiez réellement changer l'utilisateur qui a payé. Vous pouvez modifier la date et maintenant tout fonctionne correctement. Les divisions ont du sens. Si je gagne 20$, tout cela a du sens. Vous pouvez même le faire de jour. C'est bon pour des choses comme les hôtels, Airbnbs, où vous souhaitez le diviser par jour Oui, et ensuite vous pouvez ajouter cette dépense. Si vous avez ajouté des dépenses, vous devez vous assurer de dire à quoi elles servaient. Disons que j'ai dépensé 200 dollars pour une annonce d'hôtel, puis j'en récupère 150 et je peux voir qui était entre les deux. Toutes ces petites modifications, j'ai ajouté le montant total dépensé pour ce voyage, j'ai légèrement ajusté le Snavbr et j'ai ajouté une liste déroulante pour le profil ici ou la liste déroulante du profil Ensuite, j'ai également apporté quelques modifications pour le mobile. Sur mobile, ça a aussi l'air bien maintenant et laissez-moi juste vous montrer que c'est juste pour vous montrer à quoi cela ressemble sur mobile. Il est désormais compatible avec les appareils mobiles. Encore une fois, j'ai donné des choses à chacun petit à petit. J'ai dit que pour les mobiles, faites ce qui suit et maintenant vous pouvez voir que toutes les cartes sont belles. Pour ce qui est de l'application elle-même, elle est prête. Bien que nous n'ayons pas encore de page de destination, nous en avons besoin avant de passer production et d' autoriser les utilisateurs à l'utiliser. C'est ce que nous allons faire dans le prochain module pour revenir et commencer à rassembler davantage d'actifs marketing, y compris la page de destination, et notamment la possibilité collecter des paiements auprès des utilisateurs pour cette application avant de pouvoir la mettre en ligne pour que les utilisateurs puissent l'utiliser. Mais dans l'ensemble, j'ai testé l'application. Cela fonctionne bien et je vous encourage à faire de même avec votre application Une fois que vous serez prêt à lancer dans d'autres activités de marketing, je vous verrai lors de la prochaine conférence. 30. Examen de la page d'atterrissage: Créez ma page de destination que je vais utiliser pour Tripvela, mon application de suivi des frais de voyage J'ai consacré environ une journée à l'élaborer, et je vais expliquer comment j'ai suivi le modèle que j'ai présenté et comment j'ai choisi les éléments que j'ai ici. Tout d'abord, je suis allée de l'avant et ajouté un texte vraiment accrocheur en H one, et c'est ce que je vous recommande de refaire. Votre section consacrée aux héros est l'une des sections les plus importantes Vous devez donc vous assurer de mentionner exactement le problème que vous souhaitez résoudre pour les clients. Hum, donc, tu sais, j'ai écrit mon point H d'une manière pour parler du genre de tracas liés au partage des dépenses en voyage J'ai donc divisé les frais de voyage sans tracas. Et puis le sous-texte est endroit où vous expliquez un peu plus, vous savez, euh, ce que fait ce produit. J'ai donc suivi les dépenses partagées et les régler instantanément afin que tout le monde puisse se concentrer sur le plaisir. Ensuite, vous pourrez planifier votre premier voyage. C'est le principal appel à l'action. Les utilisateurs seront en fait redirigés vers la page d'inscription pour créer un compte. Un joli graphisme ici sur le côté, une jolie petite animation. Ici, pour montrer différents voyages vous pouvez voir les gens dépenser pour un voyage. J'explique vraiment exactement quel est le produit et quel est le problème. Ensuite, vous allez ici et vous lisez l'énoncé du problème. Partez en groupe Les dépenses s'accumulent rapidement, une personne paie le dîner, une autre réserve les billets, quelqu'un d'autre paie l'Uber et personne ne se souvient donc qui doit quoi. C'est une réalité qui se produit souvent lors des voyages et qui reflète donc vraiment l'émotion de l'utilisateur et son expérience. Ensuite, j'ai l'énoncé de la solution. TripLa vous aide à garder une trace afin que vous puissiez profiter du voyage. Encore une fois, l'application vous aide à garder une trace, sorte que vous vous concentrez plutôt sur le voyage. Voici comment inviter des amis à votre voyage, organiser un voyage et partager le lien avec vos amis et votre famille. Voici un exemple de voyage et je vais vous le montrer dans une seconde, ajoutez les dépenses. Voici un exemple de dépense ici. Ajoutez des dépenses à votre voyage et suivez les transactions, puis, ici, réglez. Encore une fois, de jolies petites animations en survol. Vous n'êtes pas obligé de le faire votre page de destination, mais encore une fois, comme j'utilise le design comme facteur de différenciation par rapport à mon produit, j'applique ici de belles animations et microinteractions Encore une fois, arrangez-vous, voyez qui doit quoi, Mark a payé quand vous êtes au carré et faites le voyage en ordre. Avant de vous montrer un exemple de voyage ici, je vais aller ici et vous montrer le reste. Encore une fois, une petite section sur les pauses, le partage des coûts, le règlement, pas de discussions gênantes avec l'IOU, puis un autre appel à l'action, créez votre premier voyage Comme vous pouvez le constater, les appels à l'action sont très alignés les uns avec les autres. Planifiez votre premier voyage, créez votre premier voyage autour d' un seul appel à l'action principal. Je n'en ai pas un million de différents. Celui que vous voyez dans le tableau de navigation, Go to my trips », ne s' affiche que parce que je suis déjà connecté en tant qu'utilisateur, sinon il indiquerait simplement s'inscrire ou se connecter. Ensuite, j'ai établi le prix en fonction de ce dont nous discutons. J'ai décidé de faire deux plans, un par voyage. Donc, si certains clients veulent simplement l'utiliser et l'essayer, ils peuvent simplement payer dix dollars par voyage et avoir dépenses illimitées, contrairement aux autres concurrents du marché, euh, puis se séparer avec autant d'amis que possible. n'y a pas de limite, ou ils ne paient que 40$ une fois, puis ils ont un nombre illimité de voyages pour toujours, tout est inclus dans ce forfait, plus aucun frais par voyage, encore une fois illimités, les dépenses, donc c'est un excellent rapport qualité-prix Quelqu'un qui étudie cette et qui voyage beaucoup se dit probablement que si je voyage plus de quatre fois au cours de ma vie et que je partage les dépenses avec des amis, ce qui correspond exactement au public cible que je souhaite, il obtiendra certainement cette offre au lieu de celle-ci. Et puis je termine en me basant sur certaines questions fréquemment posées. Encore une fois, j'ai posé quelques questions qui pourraient venir à l'esprit des gens, vous savez. Quand est-ce que je peux marquer quelqu'un comme étant payé ? Est-ce que d'autres personnes ou d'autres personnes doivent payer pour adhérer ? Existe-t-il un essai gratuit ? J'ai donc répondu à toutes ces questions une par une. Je vous encourage à faire de même pour votre section FAQ. Il y a, bien sûr, une page de conditions, page de confidentialité, celles que je n'ai pas encore créées, mais vous pouvez utiliser différentes ressources pour cela, notamment consulter les conditions des concurrents ou consulter ChatGPT à ce sujet également Je vous laisse entièrement le soin de le faire, car ce sont des petits caractères et ils ont un peu d'importance, pour certains, selon le type d'application que vous créez. Je vous laisse le soin de le faire et je vais m'en occuper. Euh, il n'y a qu'une chose de plus que cela qui est nécessaire pour que cette page de destination soit fonctionnelle ou en fait deux autres choses. L'une consiste à configurer un favicon et image de partage social afin que les utilisateurs voient correctement les métadonnées et tout Pour le moment, il suffit de dire Tripvela, ce qui est génial. Mais encore une fois, l'icône est générique, c'est juste un logo polyvalent Nous allons les configurer lors la prochaine conférence, car cela s'appliquera certainement à votre projet, ainsi qu'à une image de partage social, qui apparaît chaque fois que vous envoyez votre lien à des personnes à qui j'envoie des messages ou sur LinkedIn et les réseaux sociaux. Comme nous allons faire du marketing plus tard, il est important que vous les configuriez correctement. Ensuite, une fois que nous l'aurons fait, nous allons connecter Stripe afin de pouvoir facturer les utilisateurs. heure actuelle, nous avons ce système de paiement, mais nous ne pouvons pas encore facturer les utilisateurs. Ils ne font rien, nous les connecterons donc à Stripe plus tard également. Je promets de vous montrer un exemple de voyage. J'ai mis ici un exemple de voyage à Barcelone auquel les utilisateurs peuvent participer, et cela ressemble à un vrai voyage Cela leur donne un avant-goût de ce à quoi ils peuvent s'attendre, en particulier parce que je n'ai pas de plan gratuit. Ils peuvent se faire une idée de ce à quoi ressemble l' ajout de dépenses, et ils peuvent même jouer avec cela et aimer ajouter des dépenses comme ils le feraient dans une vraie application. Mais bien sûr, cela n'est pas lié au back-end. J'ai demandé à Cursor de faire tout cela en tant que site Web fictif, rien n'est enregistré ici. C'est surtout pour que les gens puissent jouer avec eux et se faire une idée de ce à quoi ressemble l'application. Je pense que c'est vraiment important pour leur donner un avant-goût de l'application. Nous allons revenir et discuter des dernières touches à apporter à la page de destination avant de passer à autre chose et commencer notre marketing et notre distribution. 31. Stripe Setup: Sélectionnez les paiements sur notre page d'accueil, nous allons utiliser Stripe pour traiter les paiements. C'est le moyen le plus simple de faire en sorte que cela fonctionne. Lorsqu'il s'agit de créer un compte, c'est le moyen le plus rapide et le plus simple de gérer les paiements en ligne. Ainsi, une fois que vous avez créé un compte sur stripe.com, il peut vous poser des questions comme celle-ci pour configurer les choses. Tu n'es pas obligée d'y répondre. Vous pouvez les ignorer, mais vous pouvez choisir si vous avez des paiements récurrents ou non récurrents Nos paiements ne sont pas basés sur un abonnement Nous allons donc choisir les paiements non récurrents, puis cliquer sur Continuer, et nous allons continuer ici. Maintenant, il vous a demandé si vous vouliez accéder à un compte Sandbox ou Live Le compte Live est le compte de production de votre application lorsqu' elle est en ligne pour les utilisateurs. Sandbox est destiné à l'environnement de test. Nous allons passer à Sandbox pour le moment. Ensuite, vous allez continuer à rechercher des clés d'API pour développeurs. Généralement, cela apparaît également sur votre page d'accueil ici. Allez-y, récupérez deux clés à ajouter à votre fichier d' environnement. L'une d'elles est la clé API. L'autre est secret. Encore une fois, vous devez vous assurer qu'ils sont protégés et ajoutés uniquement à votre fichier d'environnement. Dans le fichier d'exemple ici, je vais avoir la clé API Stripe. Vous avez la clé API Stripe , puis Stripe l'appelle Stripe secret. Vous devez continuer et vous assurer qu'elles sont ajoutées dans votre fichier d'environnement actuel, puis vous devez ajouter ces valeurs pour que cela fonctionne. Prenez un moment pour le faire. Maintenant que j'ai ajouté ces clés, je vais demander à Cursor d' implémenter Stripe pour traiter les paiements des deux forfaits présents sur notre page d'accueil. Je vais simplement lui expliquer que le plan par voyage est par voyage et coûte 999 dollars, ce qui permet aux utilisateurs de créer un seul voyage. Si les utilisateurs essaient de créer d'autres voyages, dirigez-les vers la page de paiement Stripe assurez-vous de suivre les crédits par voyage dans le cadre du modèle utilisateur. Voici donc informations sur le premier plan, qui est par plan de voyage, coûte 999 dollars et permet à l'utilisateur de créer un seul voyage. Et s'ils essaient de créer d'autres voyages, page de paiement s'ouvrira à nouveau pour qu'ils puissent payer et, vous savez, acheter un autre voyage. Je vous demande de vous assurer de garder trace du crédit de voyage. Alors, combien de voyages les gens peuvent effectuer en fonction cela dans le cadre du modèle utilisateur. Ensuite, l'autre plan est à vie et coûte 39 99$ et permet aux utilisateurs de créer des voyages illimités sur leur compte. Assurez-vous d'en tenir compte également dans le modèle utilisateur. Je vais juste m' assurer qu'il sache que les utilisateurs ne peuvent pas créer de voyages sans avoir de crédits ou un accès à vie. C'est bon. Je vais l'envoyer et encore une fois parler brièvement de ce que j'ai fait. J'ai expliqué les deux forfaits que j'ai proposés, leur prix, et je lui ai demandé d'implémenter Stripe pour ceux-ci. J'ai donné des instructions spécifiques pour m'assurer de mettre à jour le modèle utilisateur, c'est-à-dire la façon dont nous stockons les informations sur les utilisateurs, informations sur les utilisateurs comme vous pouvez le voir dans les modèles ici. Ainsi, le modèle utilisateur et tout de suite, vous pouvez le voir mis à jour, de sorte qu' il a ajouté des crédits de voyage. Donc, par voyage, ce numéro serait mis à jour ici. Nous savons donc combien de voyages les gens peuvent créer grâce au nombre de crédits dont ils disposent. Ou s'ils ont un accès à vie, il s'agit d'une valeur booléenne créée ici, vraie ou fausse, qui vous permet d'en garder une trace Je vais continuer, conserver ce fichier et m' assurer que lorsque l'application changera de modèle, vous arrêtez réellement le serveur, puis vous le relancerez assurer que lorsque l'application changera de modèle, vous arrêtez réellement le serveur, plus tard. Je vais donc attendre que ce soit terminé, puis le relancer. Il m'a dit, assurez-vous d' ajouter vos valeurs Stripe. Nous l'avons déjà fait, donc c'est bien. Ensuite, nous ajouterons les scripts d'API correspondants. Il semble que la mise en œuvre soit prête. Je vais maintenant tester l'implémentation. En tant qu'utilisateur n' ayant aucun crédit, je vais essayer de créer un nouveau voyage. Allons à Bali et cliquez simplement sur Créer un voyage. Vous avez besoin d'un plan pour créer un voyage, effectuer un achat par voyage ou un accès à vie. Le seul inconvénient, c'est que cela me montre de manière réaliste les options qui s'offrent à moi au lieu de simplement me dire que j'ai besoin des crédits de Maintenant, testons à partir de la page d'accueil si elles fonctionnent. Une erreur s'est produite, je vais donc m'assurer de transmettre cette erreur. Et si on gagnait la vie ? Même chose. Encore une fois, retransmettez-la à Cursor et demandez-lui de l'analyser. On dirait donc que c'est réglé. Il semblerait que l'erreur soit en fait de mon côté. Je m'ai demandé de définir l'identifiant de prix Stripe par voyage ainsi que la durée de vie de l' identifiant de prix dans le fichier local de l'environnement. Nous devons en fait créer ces plans dans Stripe. Il vous donne les instructions, accédez au tableau de bord Stripe, au catalogue de produits et au produit. que nous allons faire. Nous allons accéder au catalogue de produits, créer un produit et le nommer par voyage. Il s'agit d'un paiement unique de 999$ et nous allons ajouter un produit et nous assurer que vous avez saisi ce produit et que vous avez bien copié ajouter un produit et assurer que vous avez saisi ce produit et que vous avez bien le numéro de prix ici. Tout comme dans mon fichier d' exemple ici. Je vais le copier et m' assurer de coller cet identifiant de prix dans ce fichier d' environnement. Prends une seconde pour le faire. De retour dans Stripe, je vais également créer un produit à vie et en faire un produit unique sur 39 99. Produit, même idée. Copiez le numéro de prix et remettez-le dans le fichier d'environnement, je vais le coller , en m'assurant que vos valeurs commencent par un soulignement du prix Maintenant que c'est en place, je vais l'essayer. Nous y voilà. Chaque fois que vous effectuez un test avec un compte Stripe, vous pouvez simplement saisir 42, quatre, deux, quatre, deux, le répéter plusieurs fois pour la carte de crédit, indiquer une date d'expiration aléatoire et CVC payer maintenant Voilà le truc. À l'heure actuelle, nous avons connecté le compte Stripe et nous avons connecté le prix ou les forfaits que nous proposons au compte Stripe et à notre produit. Désormais, notre produit peut réellement générer ce lien permettant aux utilisateurs d'acheter le plan. Mais nous avons besoin de ce que l'on appelle un webhook ou un webhook Stripe afin de pouvoir réellement comprendre ou faire notre application et nos applications, comprendre et d'écouter lorsque Stripe lui dit que oui, en fait, cette personne a acheté un plan Nous avons donc connecté la première étape. Nous devons maintenant revenir et connecter le webhook qui est également mentionné ici. Comme vous le voyez, au point de terminaison d'un webhook, il devrait ressembler Et ajoutez-y cet événement, et vous devrez également définir un secret de webhook Stripe dans votre environnement, dans un fichier local Comme nous le testons localement sur notre machine et que nous n'avons pas encore de serveur de production, nous devons également utiliser l'écouteur webhook localement pour indications provenant de Stripe indiquant qu'un utilisateur a effectivement créé ou acheté Revenons dans la section suivante pour implémenter le webhook Stripe 32. Webhook Stripe: Nous avons donc connecté Stripe, et maintenant nous devons réellement nous connecter au webhook, qui permet essentiellement à notre backend de savoir quand les utilisateurs achètent des forfaits via Stripe Parce qu'à l'heure actuelle, lorsque nous autorisons les utilisateurs à créer un plan, nous les redirigeons vers Stripe, et il s'agit en fait du site Web de Stripe Ce n'est pas notre site Web. Nous ne savons pas quand le paiement d'un utilisateur est réellement effectué jusqu'à ce que Stripe nous indique que cela se fait par le biais de ce que l' on appelle un webhook Si vous vous rendez ici pour les développeurs sur Stripe, rendez-vous sur les webhooks. Vous pouvez configurer un webhook à partir ici ou vous pouvez le tester avec un écouteur local Pour l'instant, nous allons tester avec un écouteur local. Suivez les instructions ici et assurez-vous de vous connecter . Vous pouvez faire tout cela via votre terminal ici. Suivez le lien depuis le terminal et appuyez sur Autoriser l'accès. Assurez-vous ensuite de copier cette ligne ici et de la déposer également dans votre terminal. Maintenant, lorsque vous le collez dans votre terminal, vous obtenez un secret de webhook Vous devez également vous assurer d'ajouter un secret de webhook Stripe similaire à so equals, puis de saisir votre secret de webhook qui commence comme ceci WHSecunderscore Prenez le temps de le localiser et de le faire. Une fois que j'ai fait cela, j'ai rencontré un problème ici. Donc, si vous rencontrez des problèmes, trouvez simplement ce terminal Stripe, envoyez-le et signalez qu'il y a eu des erreurs à Cursor. Il vous demandera d'aller de l' avant, de comprendre ce qui s'est mal passé et de vous indiquer ce que vous devez faire pour y remédier. Encore un problème, mais cela explique que nous devons vraiment nous assurer qu'il s' agit du webhook APISISH de localhost point Colon 3,000 slash APISISH Assurez-vous de suivre exactement cela. Essayons encore une fois. J'ai de nouveau mis à jour mon secret, et nous allons continuer à créer une autre fois. Voyons si cela fonctionnera cette fois. Vous voyez, nous avons obtenu un 200 points grâce à notre API. Le webhook SipeSash signifie que cela fonctionnait localement Vous pouvez voir dans nos données d'utilisateur sur Mongo que j'ai maintenant un crédit de voyage Cela s'est produit uniquement parce que le webhook Stripe fonctionnait, ce qui signifie que vous pouvez désormais créer un voyage. Essayons ça. Il suffit de mettre Bali Two Create et le tour est joué. Maintenant, j'ai créé ce voyage parce que j'avais des crédits. J'actualise les crédits ou si j'actualise ma base de données d'utilisateurs, car vous pouvez constater que le crédit de voyage a disparu. Cela fonctionne correctement maintenant. Si j'y retourne et que j'essaie de créer un autre voyage comme Bali Three, il saura que je n'ai plus de crédits et me redirigera vers la page de paiement. Je sais que ça marche maintenant. Je vais également tester mon plan à vie, même configuration, mais avec la durée de vie, je devrais être capable de créer plusieurs voyages. Je vous laisse le faire pour votre propre configuration. Vous êtes peut-être abonné, suivez les instructions et le curseur pour le configurer. Notez que jusqu'à présent, nous avons uniquement configuré le webhook Stripe pour qu'il fonctionne localement et pas encore sur notre production. Nous devons revenir une fois que nous avons mis notre application en production pour réellement connecter notre Stripe de production à l'application. Une fois cela fait, nous devons accéder au compte Switch to Live et copier nos prix du test à la production. Nous le ferons dans une seconde lorsque nous serons prêts à publier notre application. 33. Paramètres de sécurité: Nous nous préparons à mettre notre application en production et à permettre à n'importe qui dans le monde de l'utiliser. Nous devons encore faire deux petites choses , mais elles sont vraiment importantes. La première chose à faire est que dans votre projet sur MongoDB, vous devez vous connecter, accéder à votre projet Ensuite, sous l'onglet Sécurité, vous souhaitez accéder à la base de données et à l'accès au réseau. Accédez ensuite à la liste d'accès IP. Il s'agit essentiellement de la liste des adresses IP qui peuvent accéder à la base de données. heure actuelle, votre adresse IP est incluse ici, ce qui vous permet, depuis votre machine locale, apporter des modifications à la base de données, euh, mais le fait est qu'une fois que nous serons en ligne, utilisateurs ayant des adresses IP différentes les utilisateurs ayant des adresses IP différentes dans le monde entier utiliseront votre application. Euh, cela ne fonctionnerait donc pas nécessairement, car la base de données ne fonctionnera pas et autorisera de nouvelles entrées ou des suppressions de différentes adresses IP C'est pourquoi vous devez ajouter une adresse IP ici et vous assurer de taper l'entrée de la liste d'accès zéro point zéro point zéro. Donc quatre zéros puis zéro. Vous voulez continuer et confirmer cela, puis il devrait être ajouté ici et actif. Cela présente bien sûr un certain risque de sécurité et il existe d'autres moyens de le faire, mais c'est le moyen le plus simple de le configurer. Assurez-vous simplement que le mot de passe et le nom d'utilisateur de votre base de données sont sécurisés. Celui qui vous a été donné par Mongo Di B lorsque vous avez configuré ce cluster Le plus important est de vous assurer que tout est protégé afin que personne ne puisse accéder à votre base de données. Une autre chose que nous allons faire dans la base de code notre application pour la sécuriser est de faire un audit de sécurité pour nous assurer que rien n'est révélé publiquement ou incorrect et mettre en œuvre une limitation du débit des API pour empêcher les utilisateurs abusifs faire un contrôle de sécurité approfondi de toutes les fonctions de Bend et d'entrer C'est juste pour s'assurer que Cursor effectuera une dernière vérification de la sécurité de votre projet et qu'il examinera votre base de code, pour s'assurer qu'une certaine limitation de débit est en vigueur, ce qui empêche essentiellement les gens de spammer votre serveur ou votre API à plusieurs reprises Encore une fois, il existe de nombreux utilisateurs et certains d'entre eux pourraient essayer de tirer parti de votre plateforme. Maintenant, cela arrive à n'importe quel développeur, alors assurez-vous d'exécuter cette invite et, bien sûr, il y a probablement d'autres invites que vous pouvez également exécuter pour vous en assurer Mais c'est celui qu' IE utilise généralement en ce moment . Il vérifie tout en termes d'authentification, de middleware, de routes d'API, laisse faire son travail pour que votre code soit plus sécurisé Mais avant de revenir et de mettre notre application ligne sur notre domaine afin que d'autres utilisateurs puissent l'utiliser. 34. Pousser la production: C'est bon. C'est une époque passionnante. Nous sommes enfin prêts à publier sur laquelle nous avons travaillé si dur le Web notre application sur que n'importe qui dans le monde puisse l'utiliser. C'est donc passionnant et nous allons le refaire Comme expliqué dans notre stack, nous utilisons Versal pour déployer notre application Donc, en gros, Versal est la plateforme qui héberge notre projet, et c'est une excellente plateforme Vous pouvez commencer gratuitement et suivre, vous savez, les journaux qui arrivent. Assurez-vous donc de faire un test final de votre application, assurez-vous qu'elle fonctionne sur Github si ce n'est pas Vous vous inscrivez sur Verso, vous créez un nouveau projet, puis nous vous demanderons de connecter votre Github Assurez-vous de connecter votre Github pour pouvoir réellement connecter votre application ou l' importer dans Verso en un seul clic. Je l'ai déjà fait. Je vais maintenant renommer celui-ci Tripvela. Alors voici une autre chose importante que vous devez faire. Vous devez réellement ajouter les variables d'environnement ici pour qu'une fois votre application poussée, cela fonctionne. Je vais faire une pause ici juste pour expliquer rapidement. Vous voulez réellement accéder à votre environnement, le fichier local, copier chacune de ces chaînes individuelles. Mongo URI, par exemple, vous allez le coller dans la clé, puis pour la valeur, vous allez coller la valeur qui vient après le signe égal ici Prenez votre temps avec celui-ci car il est très facile de se tromper et vous devez également mettre à jour certaines d'entre elles pour qu'elles soient légèrement différentes. Par exemple, pour le site de Mongo, si vous vous souvenez de notre site de développement ou de notre site de développement, nous avons créé Dev Dans votre production, vous souhaitez réellement effectuer une Prod ou une production de manière à ce que données utilisateur provenant utilisateurs du monde réel soient stockées dans une partie du cluster différente de celle des données de test Ensuite, vous allez continuer et en ajouter d'autres. Encore une fois, en gardant à l'esprit que certaines d'entre elles seront différentes. Mong restera le même, sauf pour la dernière partie, à la place de Dev, assurez-vous que c'est Slash Le prochain secret d'authentification restera le même. authentification suivante sera l'URL laquelle les utilisateurs accèderont à ce site Web Assurez-vous de mettre HTTPS, donc assurez-vous d' inclure le S pour sécurisé, puis Colin, barre oblique, puis votre site Web réel Dans mon cas, ce sera tripvelala.com, HTTPS. TripVela.com. Vous n'avez pas besoin de mettre de barre oblique à la fin clé de renvoi sera la même car vous envoyez des e-mails depuis le même compte L'e-mail du formulaire doit également rester le même. Vous n'avez pas besoin de le changer. Désormais, l'API Stripe, secret Stripe et le webhook Stripe seront différents Dans ce cas, vous devrez passer à Stripe pour passer à votre compte réel. Si vous avez des accords, assurez-vous simplement de les consulter dans le document Stripe Live, puis vous pourrez les copier . Choisissez ce que vous souhaitez copier. Nous voulons copier nos produits, cliquez sur Continuer. Ensuite, vous avez vos clés ici que vous pouvez copier pour le compte réel, qui devraient à nouveau être insérées ici sur Versll Maintenant, laissez de côté le secret du webhook. Nous le ferons ensemble lors de la prochaine conférence. Votre numéro de prix Stripe par voyage ou tout autre identifiant Stripe dont vous disposez pour votre type de paiement sera également différent. Assurez-vous de les copier également directement depuis la version en ligne de votre Stripe, alors assurez-vous de cliquer à l'intérieur d'ici, de les copier correctement. Encore une fois, le seul autre secret qui devrait être différent est un webhook secret de Stripe, que nous aborderons ensemble lors de la prochaine conférence Allez-y et saisissez correctement ces variables. Je vais prendre une minute pour le faire, les examiner, assurer qu'ils sont correctement configurés, et je vous verrai dans une minute. Une fois que vous les avez tous copiés, assurez-vous de cliquer sur Déployer. Une fois que vous avez cliqué sur Déployer, vous pouvez voir que l'application commence à être créée ou que Versa commencera à créer votre prochain projet sur ses propres serveurs et vous donnera un résumé de ce qu'elle a fait. Il y a une chance, parfois une grande chance que vous obteniez ou que vous rencontriez des erreurs. Si c'est le cas, il vous suffit de le développer, de copier ces erreurs et de le saisir dans Cursor pour vous assurer qu'il y est mis à jour ou qu'il y apporte des modifications. Si vous l'avez bien fait, que tout va bien, vous devriez procéder à un déploiement en direct. N'oubliez nous n'avons pas encore connecté notre domaine. Un autre avantage de Versell est que chaque fois que vous appuyez sur votre branche principale de Github, votre application en ligne est mise à jour Vous n'avez donc rien d'autre à faire pour le faire Si vous apportez des modifications à votre application, mises à jour de fonctionnalités, etc., et que vous les envoyez à GitHub, votre application sera automatiquement mise à jour pour les utilisateurs Assurez-vous qu'ils sont testés avant de publier quoi que ce soit sur GitHub En attendant, passons aux domaines et ajoutons un domaine existant à ce projet, trilala.com, et nous allons cliquer sur Enregistrer J'ai déjà ce domaine dans une autre application, je vais simplement transférer les domaines vers ce projet. La seule chose que vous devez faire à partir de là est de vous assurer d'accéder à votre registre de domaine. Si vous avez un name chip ou un Go Daddy, assurez-vous de vous rendre sur place, de passer au DNS avancé et d' ajouter ces valeurs, comme nous l'avons fait pour les clés de renvoi Suivez ces instructions dans votre fournisseur de domaine , puis retrouvez-moi ici. Maintenant, assurez-vous de mettre à jour ces paramètres à la fois pour la version sans WWW et pour la version avec WWW déjà fait. Ensuite, vous pouvez essayer d'appuyer sur Actualiser une fois que vous l'avez fait, vous l'avez configuré correctement. Allons-y. J'ai quelques problèmes avec le design de la page d'accueil, je vais donc les intégrer à Cursor pour les corriger. J'espère que vous n'avez aucun problème ou si c'est le cas, prenez votre temps pour résoudre prenez votre temps pour résoudre ces problèmes, puis nous reviendrons pour configurer correctement le webhook Stripe afin que l'ensemble de l'application fonctionne correctement Mais félicitations pour avoir rendu votre application publique. 35. Intégration des rayures: Une dernière étape pour configurer notre application afin qu'elle soit prête à accepter les paiements, consiste à configurer notre webhook Stripe en cours de production Maintenant, si vous vous souvenez, le webhook est ce qui nous permet de comprendre si un utilisateur a réellement payé, puis de lui donner l'abonnement ou de lui donner l'avantage, le plan, etc. En tant qu'agent Cursor ou AI, allez-y, demandez-lui de vous donner des instructions sur la façon configurer Webhook pour la production de votre application Donnez-le étape par étape en fonction de ce que vous devez faire. Dans mon cas, il a été procédé et m'a dit que je devais suivre cette étape, accéder au tableau de bord Stripe. Voici un tableau de bord Stripe. Accédez aux développeurs, puis cliquez sur Webhooks, puis vous souhaitez ajouter une destination Une fois que vous avez ajouté la destination, c'est le lien que vous souhaitez, mais nous en aurons besoin dans une seconde. Pour mon application, il suffit que la session de paiement soit terminée. Je vais rechercher le point de session point terminé, et il apparaîtra déjà. Pour votre application, cela peut être différent. Il s'agit de l'événement que le webhook écoutera. Dans mon cas, chaque fois qu' une session de paiement est terminée avec succès, nous voulons continuer et écouter ce point de terminaison pour cela. L'URL du point de terminaison est celle que vous avez obtenue depuis l'application, mais bien sûr, vous devez la remplacer par votre domaine sans la barre oblique de l'API, puis je vais appuyer sur Créer une destination et m'assurer que vous copiez ce secret, puis revenez à votre déploiement, accédez aux paramètres Assurez-vous de sélectionner votre projet, d'accéder à vos paramètres, accéder aux variables d'environnement, puis de continuer et d'ajouter une variable d'environnement. Maintenant, si vous vous en souvenez dans votre code, ça devrait être comme ça, Stripe underscore webhook underscore Assurez-vous de le copier , puis de coller la valeur que vous avez obtenue de Stripe. Appuyez sur Enregistrer, puis sur Redéployer. Chaque fois que vous modifiez vos variables d'environnement, vous devez procéder au redéploiement afin que cette clé d'environnement soit ajoutée à votre dernier déploiement clé d'environnement soit ajoutée à Ensuite, dans votre projet, vous pouvez suivre vos déploiements, nous voyons que c'est en cours de construction Maintenant, une fois que vous avez cliqué, le seul moyen de savoir si ce webhook Stripe fonctionne est de procéder à un paiement test Vous pouvez soit sortir votre carte de crédit et l'utiliser, soit créer un coupon ici dans Stripe, créer un coupon de réduction de 100 %, puis vous assurer de demander à Cursor d'activer les codes promotionnels. Et une fois que vous l'avez fait, vous pouvez simplement saisir votre code promo , puis vérifier que l'abonnement ou la tarification de votre application fonctionnent. Maintenant que cela est réglé, notre application est opérationnelle. Vous pouvez le partager avec vos amis. Maintenant, je promets de vous montrer à quoi ressemblent l'image OG et les métadonnées que nous avons configurées. Donc, si vous collez votre lien vers votre application dans un message « disons moi », vous pouvez voir ici que Tripvela divise les frais de voyage sans tracas Tripvela divise les frais de voyage sans tracas Ainsi, chaque fois que quelqu'un partage tripvela.com, il s'affichera comme ça, ce qui avait l'air génial À l'avenir, je pourrais apporter le changement au lieu de simplement avoir le nom ici, peut-être avoir une description de ce que fait le produit. Cela met fin à l' assemblage de notre produit. La prochaine étape consiste à en parler gens et à commencer à obtenir des ventes. 36. Quoi faire ensuite ?: Félicitations pour avoir atteint ce stade dans le cours. Je voudrais parler un peu ce qui se passe à partir d' ici. Où allons-nous ? Que faites-vous de votre produit, et comment vous assurez-vous de rester sur la bonne voie et à quoi ressemblera le succès à partir de maintenant ? Beaucoup de gens pensent que simple fait de lancer un produit fera en sorte que des milliers d'utilisateurs l'utiliseront immédiatement. En réalité, les chiffres sont bien inférieurs à cela et cela prend plus de temps. En plus d'avoir besoin d'un plus grand nombre de patients pour suivre votre progression, vous devez comprendre qu' au cours des prochaines semaines ou des prochains mois, votre objectif est d'obtenir le plus de commentaires possible de la part des 50 à 100 premiers utilisateurs que vous pouvez obtenir. Ne vous concentrez pas sur les milliers pour l'instant. Parlez à ces 50 à 100 utilisateurs, assurez-vous d'améliorer votre produit, de les écouter et de vous votre produit, de les écouter et améliorer en fonction des commentaires qu'ils vous fournissent réellement. Le véritable objectif est de partager votre produit dans sa version la plus récente avec les utilisateurs et de tirer parti des commentaires afin de créer un produit que vous pourrez ensuite étendre à des milliers d'utilisateurs par la suite. commentaires des utilisateurs réels constituent un énorme levier et de nombreux fondateurs l'ignorent, mais si vous les exploitez correctement, vous créerez un produit pour un certain segment du public ou du marché cible, que vous pourrez adapter et développer rapidement au fil du temps. heure actuelle, nous faisons certaines suppositions concernant notre produit, mais nous les soumettons aux utilisateurs, nous découvrons réellement qui est notre vrai client et ce qui les intéresse vraiment dans notre produit. Une fois que nous aurons obtenu ces réponses, nous pourrons redoubler d'efforts sur le marketing et nous pourrons redoubler d'efforts pour créer les ensembles de fonctionnalités qui leur conviennent. Vous apprenez également quelles sont les méthodes de marketing qui vous conviennent le mieux. S'agit-il d'une vidéo, d'un billet de blog, un partenariat ou peut-être d'une diffusion directe. expérimentant et en apprenant quelle méthode fonctionne le mieux, vous apprendrez sur quoi redoubler d'efforts afin que lorsque vous dépensez de l'argent pour votre marketing, vous ne gaspillez pas votre argent et vous le dépensiez correctement sur les bons canaux de marketing Vous recherchez de bons signaux provenant de votre produit, tels que des utilisateurs partageant votre produit, parlant de votre produit, répondant et vous donnant des commentaires sur votre produit Parfois, vous devrez peut-être faire tout votre possible pour pouvoir parler aux clients et obtenir des commentaires directement de leur part. Parfois, les clients ne se soucient pas suffisamment de vous faire part de leurs commentaires à moins que vous ne leur en fassiez la demande. Assurez-vous donc de les contacter et de leur poser des questions sur leur expérience. Certains d'entre eux peuvent être configurés comme des e-mails automatiques envoyés depuis votre application Assurez-vous de tirer pleinement parti des e-mails, en particulier à destination de votre base d'utilisateurs existante. vais continuer à partager mon produit Tripvela différentes communautés de voyageurs auprès des différentes communautés de voyageurs et à m'adresser directement afin d' attirer les cent premiers utilisateurs. À partir de là, je vais explorer des moyens cibler peut-être les nomades numériques qui ont des abonnés sur les réseaux sociaux pour créer du contenu destiné à le promouvoir pour Ce seront les prochaines semaines et les prochains mois. J'espère que vous tirerez parti de tous les outils et méthodes de marketing dont nous avons parlé pour développer votre produit de plus de milliers d' utilisateurs et vous souhaiter bonne chance auprès de plus de milliers d' utilisateurs et vous souhaiter bonne chance. Merci d'avoir participé au cours.