Développement Web NextJS pour les débutants : créer et lancer un SaaS basé sur des abonnements étape par étape 2025

1. Intro: Le cours s'adresse à tous ceux qui souhaitent apprendre à créer une application SAC complète. Dans ce cas, microSAS avec Next JS. Vous apprenez à utiliser le routeur, à passer des appels vers la base de données et à configurer et mettre en œuvre services tiers tels que Clerk pour la gestion des utilisateurs, Stripe pour les paiements ou Super Base en tant que fournisseur de base de données. N'oubliez pas de consulter le projet de cours et de vous lancer le défi de créer votre propre microSAS après avoir suivi ce cours Nous allons créer un site Web de bibliothèque avec SAS ou plus précisément MicroSASPduct Nous allons commencer par préparer l'interface utilisateur, puis passer à l'ajout des fonctionnalités nécessaires au produit Live SAS. Cela inclut la configuration de l' authentification à l'aide de Clerk, établissement d'une connexion à la base de données à l'aide de Prisma ORM et le stockage des données dans suba baase, que j'utiliserai dans ce Mais ne t'inquiète pas. Vous n'êtes pas obligé d'utiliser SupaBase Puisque nous établissons des connexions avec BisMorm, il est incroyablement facile de remplacer SupaBase par n'importe quelle autre base de données de votre Nous intégrerons également Stripe pour mettre en place un modèle d'abonnement afin que les utilisateurs puissent accéder au produit après s'être abonnés L'objectif de ce didacticiel est de vous aider à acquérir de l'expérience pratique, à créer un produit SAS et à en avoir un que vous pouvez simplement modifier, personnaliser, adapter et utiliser. Au final, nous déploierons notre application sur HID Live où je vous montrerai étape par étape comment tout fonctionner ensemble. Sans plus tarder, laissez-moi vous expliquer la démo, puis nous commencerons enfin à construire. Nous allons commencer par la page en tant que nouvel utilisateur et nous commençons par la barre de novembre où nous avons un prix, la composition de l'équipe et une éventuelle connexion. Ensuite, sur la page, nous pouvons voir que nous avons des soldes pour le prix de départ de notre produit, le nom du produit. Nous avons là le point de départ, puis les trois étapes simples, comment utiliser notre produit. Si vous continuez vers le bas de la page, nous y verrons une démo de notre produit sur cette image animée qui change la rotation et l'opacité au fur et à mesure que nous défilons Ensuite, nous avons la section des questions fréquemment posées où nous cliquerons sur la question et la réponse sera affichée. Vous trouverez ci-dessous une section de tarification, laquelle vous pouvez acheter le plan annuel ou mensuel, selon la façon dont vous l'avez défini. Et ci-dessous se trouve cette section animée avec des vignettes déjà réalisées y sont tournées en cercle Et maintenant, passons au produit lui-même. Nous essaierons de nous inscrire. Ensuite, je vais continuer avec Google. Une fois connectés, nous pouvons voir que nous ne sommes pas encore abonnés, mais aussi de nouveaux éléments dans notre barre de navigation agit du produit lui-même, prix et également du profil où nous définirons le nom de la chaîne que nous utiliserons dans le produit. Cliquez sur S'abonner. Nous y remplirons les données. Et nous arriverons sur la page de confirmation du paiement, et voilà notre produit car nous sommes maintenant abonnés à l'application. Vous pouvez y voir que nous pouvons définir le titre de la carte vidéo, puis l'onglet lui-même et le nom de la chaîne. Pour le nom de la chaîne, nous allons en fait accéder au profil et comme nous allons maintenant l'utiliser, nous y définirons notre chaîne, quelque chose comme ça. Je vais le soumettre. Je vais maintenant revenir au produit, et vous pouvez voir que je l'ai prérempli, et chaque fois que j'examinerai la demande, je l' aurai là Il s'agit maintenant de l'outil de prévisualisation lui-même. Je vais y mettre une miniature pour le titre. Je vais également y mettre quelque chose, puis je pourrai voir la carte vidéo avec la miniature Maintenant, je peux rendre la commande aléatoire, et je peux également la changer en vue tablette ou en vue mobile Et si nous voulons gérer l'abonnement, nous avons ce bouton qui nous redirigera vers Stripe où nous pourrons simplement le gérer. Et voilà, une fonctionnalité simple pour les microSAS, avec une seule fonctionnalité pour tester le produit Et bien sûr, en cas de succès, plus de fonctionnalités peuvent être ajoutées. Ce sera tout pour la démo, et sans plus attendre, plongeons-nous enfin dans le code et donnons vie à ce projet. 2. Configuration: Dans notre dossier, nous allons commencer par ouvrir un terminal et coller la commande pour créer l'application suivante Comme nous sommes déjà dans le dossier, nous pouvons y faire juste le point, la tête, entrer, et il installera les éléments nécessaires. Nous allons passer à Y. Là, nous ferons oui au vent arrière, non à la source, oui à un routeur, non à Maintenant, nous allons juste attendre un peu et nous pouvons continuer à définir le thème de notre application. Je prépare l'équipe pour notre application, et vous la trouverez sur ce lien Gita qui se trouvera dans la description, et là nous allons commencer par prendre Globus CSS et tailwind Si vous ne voulez accéder à aucun lien, je vais vous montrer le code et vous pouvez le réécrire, mais ce sera un peu compliqué Commençons par prendre ce point de configuration Ts, copier-coller Accédez à tell and config point Ts que vous avez dans votre application et collez-y simplement le code mural. Je vais maintenant passer en revue le code mural au cas où, pour une raison ou une autre, vous ne voudriez pas le copier-coller et voudriez simplement le prendre. Nous allons maintenant revenir à la page. Nous allons entrer dans Globals point CSS, et nous le mettrons dans notre application, globals point Ce que nous avons dépassé en tant qu'équipe claire et équipe obscure, et encore une chose. Sur Git up, vous allez maintenant prendre la mise en page à un point Tsix. Maintenant, dans la mise en page Tsix, vous allez y coller le mur LayoutTsix de Layout 1 que vous avez pris Et pourquoi avons-nous la mise en page 2 ? En ce qui concerne la mise en page, deux éléments ne sont pas encore implémentés. Nous allons donc prendre la deuxième mise en page dans quelques minutes, je pense, dans environ 10 minutes. Je pense que nous pouvons maintenant définir la profondeur de fonctionnement de NPM et commencer à développer la barre de navigation, qui sera le premier composant que nous allons Nous pouvons maintenant voir la première erreur sur notre page. Il nous manque une bibliothèque. Nous allons simplement ouvrir un autre terminal et nous allons faire NPM. Et pour cette animation CSS Tailwind, nous allons appuyer sur Entrée. Je vais installer la bibliothèque. Maintenant, notre page va fonctionner. Vous pouvez voir que notre page contient actuellement le prochain modèle J. Nous allons changer cela très bientôt. Nous allons maintenant commencer par la barre de navigation. Passons à notre dossier d'applications, et dans ce dossier d'applications, nous pouvons créer un dossier de composants. Ou ce que nous pouvons simplement faire, c'est commencer à charger certains composants. La commande pour ajouter ces composants est très simple. Il vous suffit de faire nPx, shed CN, au plus tard, at, et maintenant vous allez simplement taper les composants Nous allons utiliser un bouton. là que nous pouvons utiliser des variables CSS neutres à New York pour le travail d'équipe. Oui, maintenant il sera créé. Ensuite, nous utiliserons également une carte. Ensuite, nous utiliserons la saisie. Ensuite, nous utiliserons une étiquette. Nous utiliserons la zone de défilement. Et nous utiliserons également la zone de texte. Maintenant, tel que nous l'avons, il a créé des dossiers de composants pour nous et il a également créé un dossier Lip pour nous avec ce point utils Ts. dossier à lèvres est comme une boîte à outils contenant les outils et accessoires importants pour le projet mural Et en parlant de utils point Ts, il s'agit donc de combiner des noms de classes CSS à des fins de style Dans ce dossier à lèvres, nous ajouterons également des assistants ultérieurs pour la base de données. Par exemple, en ajouterons également des assistants ultérieurs pour la base de données. Par exemple, voyant ces composants et le dossier de l'interface utilisateur, nous avons les composants het CN si nous cliquons sur les composants Cependant, si nous cliquons sur les composants eux-mêmes et cliquons sur un nouveau fichier, nous pouvons y créer, Navbar TSX, et nous aurons l'interface utilisateur séparée pour les ChetSN et juste le dossier des composants pour notre barre de navigation, mais tout est enveloppé dans ce dossier de composants mais tout est enveloppé dans 3. Paramètres de la barre de navigation et du thème: Dans notre barre de navigation, nous allons commencer par notre client pour définir qu'il s'agit d'un composant client et nous allons importer un lien depuis une bibliothèque appelée nextink Nous allons commencer par utiliser la constante d'exportation Navbar. Et nous allons rétablir la navigation. Et pour cette navigation, nous allons commencer par un arrière-plan à arrière-plan, c' est-à-dire l'arrière-plan que nous avons défini dans notre équipe et en bas de la bordure. Ensuite, à l'intérieur, nous ferons de la plongée et lors de cette plongée, nous fixerons un poids maximum. Je vais faire sept Excel. Je vais le centrer et le fond vert 200, afin que nous puissions voir où il se trouve réellement sur notre page. Bien sûr, nous devons ajouter des éléments à la mise en page. Nous avons maintenant leur barre de navigation. Nous pouvons le copier. Passons maintenant à la mise en page racine, qui est celle-ci. Et là, nous pouvons commencer à taper Navbar, appuyer sur Entrée, et elle sera importée Maintenant, nous allons l'enregistrer sur notre page, nous pourrons le voir très bientôt. Je vais juste y mettre quelque chose et vous pouvez voir en haut le fond vert, qui est notre barre de navigation. Réglons ça. Maintenant, nous allons continuer. Nous y définirons la disposition de la boîte flexible, justifierons entre les deux. Cela signifie que nous aurons un espacement égal entre nos éléments et une hauteur allant jusqu'à 16 Dans ce div, nous allons créer le lien, et ce lien contiendra notre logo. Nous allons y mettre uniquement SAS maintenant, et là, dans le lien, le HRF redirigera vers la page de prêt Dans notre cas, il n' y a aucun moyen d'y parvenir. C'est juste une barre oblique qui nous amènera à la page racine, et nous y mettrons texte de literie, trois Excel et une police Bum Ensuite, ci-dessous, vous allez faire un rendu conditionnel, et nous vous demanderons de signer. Et au cas où, oui, cela y affichera quelque chose. Et au cas où, maintenant, cela affichera une autre chose qui sera en fausse position. Maintenant, pour simuler cela, car nous n'avons pas encore implémenté l'ALF, je vais mettre que la const est signée, et pour le moment, je vais simplement coder en dur la Mais plus tard, cela dépendra d'autres facteurs. Actuellement, il affichera toujours le vrai, mais nous pouvons également le changer en faux, et à des fins de test, nous le ferons maintenant avant implémenter l' authentification réelle. Si cela est vrai, le lien vers notre application réelle sera affiché. Nous pouvons simplement prendre ce lien. Nous pouvons appeler ce produit. Là, l'utilisateur accèdera à la page du tableau de bord et juste en dessous, il pourra accéder au profil, qui se trouvera sous Profil du tableau de bord. Maintenant, s'il n'est pas connecté, rien ne sera rendu. Cela signifie que nous y mettrons une fausse valeur, vous pouvez voir que les objets disparaîtront. Maintenant, prenons ce lien, mettons-le en dessous de ce rendu conditionnel, et il sera lié à la tarification, et la tarification ne sera pas inférieure au tableau de bord. Il sera accessible même aux utilisateurs non authentifiés. Il s'agira donc simplement de réduire les prix. Ensuite, je vais placer ce rendu conditionnel mural, même avec les prix dans une division parce que , dans une division parce que j'aimerais que ce soit au milieu . Comme nous utilisons justify between, nous aurons d'abord le logo de notre SAS, puis nous aurons cette division où figureront les prix. Ou si l'utilisateur est signé, il y aura un profil du produit et des prix. Et ci-dessous, nous aurons un div et dans ce div, il y aura un réglage du Tuggle que nous n'avons pas actuellement, mais que nous modifierons plus tard Pour l'instant, nous pouvons simplement mettre une table d' équipe fictive , mais c'est vraiment pour Cela sera supprimé un peu plus tard. Et maintenant, nous allons refaire le rendu conditionnel. Nous l'utiliserons comme constante signée que nous avons là. Et s'il est connecté il y aura le bouton de déconnexion. Et s'il n'est pas connecté, il y aura le bouton de connexion. Cela sera changé pour les boutons réels que nous obtiendrons de la bibliothèque de notre fournisseur. ce qui concerne le style de notre barre de navigation, je vais simplement mettre la note de fond à 400 pendant un moment, car nous n'avons toujours pas l'équipe disponible pour cette division. Je vais mettre de l'espace x22. Ensuite, pour le texte, nous savons qu' un texte de grande taille nous suffira. Supprimons simplement le dimensionnement du texte partout où il se trouve, et nous le mettrons dans la section d'emballage. Passons à ce div et mettons le texte en gros. Ensuite, pour justifier entre les deux, nous pouvons simplement ajouter le centre des éléments , l' enregistrer, et il sera bien centré comme ça. Pour la barre de navigation, je pense que c'est bon. Et ce que nous ferons, c'est qu' après avoir créé le tableau, nous l'y placerons à la place du présentoir, et après avoir implémenté le O, nous l' y placerons à la place du Sigou et Actuellement, je vais également supprimer cet arrière-plan. Maintenant, pour ajouter l'équipe, nous allons exécuter les étapes que nous pouvons trouver sur stsn.com Vous pouvez le trouver dans la documentation de recherche, en mode sombre, vous y sélectionnerez Next Js et nous exécuterons simplement ces étapes. Nous allons d'abord installer les prochaines équipes. Ouvrons le terminal. Faites du NPMI. Next Teams, je l'ai fait deux fois parce que je l'ai copié, mais cela ne devrait pas avoir d'importance. Là, vous pouvez voir que nous devons créer le fournisseur d' équipe TSX. Copions ce code. Passons maintenant à Explorer et aux composants. Créons un nouveau fichier. Le fournisseur de l'équipe marque TSX, collez le code ici, enregistrez-le Passons maintenant à la page. Continuons . C'est ce dont j'ai parlé. Nous utiliserons le wrapper Team provider, et ils accéderont à Git upp Là, vous passerez à la mise en page 2. Vous allez prendre ce code et le mettre dans le dossier de mise en page du TaiX dans l'application Et maintenant, nous avons créé leur fournisseur d' équipe, donc ça ressemble à ça Nous éditons également le titre et le corps de police pour notre police. Nous le définissons ici dans le nom et le corps d'une classe. Là, nous utilisons le fournisseur d' équipe et nous emballons la barre de navigation avec des enfants Et ce que nous allons faire ensuite, c'est retourner à Chet CN. Nous pouvons maintenant vérifier cette étape et continuer à ajouter le mode Toggle Là, nous utiliserons celui-ci, et dans un code, je cliquerai sur copier, et nous créerons un composant à bascule Dans notre identifiant, je vais passer aux composants. Je vais créer un nouveau fichier, et je vais activer le bouton Team, Tsix Et à l'intérieur, je vais coller le code. Il nous manque le menu déroulant. Pour y remédier, nous allons NPX ShetCN au plus tard dans le menu déroulant, et il installera ce composant depuis la bibliothèque het CN dans notre dossier d'interface utilisateur Maintenant, cliquons à nouveau sur ce point, pesons le bit, sauvegardons-le, et c'est tout. Enfin, ce que nous pouvons faire, c'est utiliser le mode Tuggle dans notre barre de navigation car nous y avons l'export Passons à notre barre de navigation pour accéder à l'espace réservé, où se trouve le tableau d'équipe que nous allons faire en mode Tuggle Il ne s'appelle pas Team table car l'export s' appelle simplement mode Tuggle Et là, nous allons maintenant passer à notre page, vous pouvez voir que nous l'avons à côté du bouton d' inscription et que nous passons à la lumière, il utilisera le mode lumière. Pour faire sombre, il utilisera le mode sombre, et pour le système, il utilisera le mode système défini. Revenons maintenant à la barre de navigation, et pour ce DIF qui ces deux boutons Sinnot et le tableau des modes, nous ajouterons également un espace Et aussi la mise en page Flexbox et les éléments à centrer. C'est tout pour la barre de navigation, et nous y reviendrons après avoir défini le fournisseur Of 4. Interface utilisateur: Vous pouvez commencer à travailler sur notre page de prêt. Tout d'abord, nous allons supprimer ce prochain modèle GS et commencer par DIV. Dans ce div, nous utiliserons arrière-plan BG et également du texte pour le sol. Dans cette division, nous allons créer une technologie principale et dans cette technologie principale, nous allons placer les classes de conteneur, AMS auto, literie x deux, quatre, literie du haut à 12, et aussi du texte au centre. Dans l'ensemble, nous allons faire le premier titre. Nous pouvons y mettre pour le moment un espace réservé comme micro SAS, tutoriel, et nous y ajouterons un style qui sera du texte pour Excel Sur un écran moyen, nous allons passer au texte six, Excel. Nous allons faire le boulon de police et la marge de bas à quatre. Ci-dessous également, j' ajouterais une balise de paragraphe, et il y aura la description de nos micro sas. Pour l'instant, je vais juste ajouter ce texte. Et pour le style, je vais ajouter du texte Excel sur du texte moyen à Excel, une marge jusqu'au huit en bas, largeur maximale de trois Excel, et un mix Auto. Ensuite, nous allons ajouter un div. Dans cette section, nous aurons deux boutons. Le bouton sera celui que nous avons importé de Chet CN. Je vais l'importer comme ça. Et à l'intérieur, vous verrez les prix. Ensuite, ci-dessous, nous aurons à nouveau ce bouton, et c'est parti. En fait, permettez-moi peut-être le modifier pour commencer et voir des prix comme celui-ci. Le style de ces boutons sera flexible, justifiez le centre et l'espace X car ces boutons seront placés à côté de l'autre et en dessous de ce creux, nous aurons une image. Et dans cette image, nous aurons la balise de fermeture, et elle aura une source et un d ainsi qu'un nom de classe. Pour le nom de la classe, il s' agira de la largeur à la totalité, hauteur à automatique et de la marge à partir des huit premiers. raison pour laquelle j'utilise cette image et non l'image de l'image suivante, je peux en fait supprimer l' entrée à partir de là, c'est parce que j'utiliserai leur source à partir de l'URL. Pour l'instant, nous allons laisser ce champ vide car nous le styliserons plus tard une fois que nous aurons notre produit et nous mettrons la photo de notre démo sur cette page de destination. Actuellement, nous allons laisser la page de destination comme ceci et nous finaliserons le style plus tard, même avec l'image Avant de passer à autre chose, dernière chose, ce que nous allons faire n'est qu' une variante et nous en ferons les grandes lignes. Maintenant, si nous voulons l'enregistrer, vous pouvez voir à quoi il ressemblera sur notre page. Et maintenant, nous pouvons passer à la création de l' interface utilisateur de notre application Micross Continuons en créant le dossier Dashboard. Nous allons cliquer ici sur l'application, là sur un dossier, et le nommer Dashboard. Dans le dossier Dashboard, nous allons créer des points de page six. Mais nous y créerons également un autre dossier, qui s'appellera Profile. Dans ce dossier de profil, nous allons créer un autre point de page Tsix Nous allons également créer un dossier de tarification. Ce ne sera pas dans le tableau de bord, mais dans l'application. Dans l'application, nous créerons une nouvelle tarification des dossiers. Et dans ce dossier, nous allons créer des points de page six. façon dont cela fonctionnera est que lorsque nous voulons accéder au tableau de bord, notre URL devra ressembler à un tableau de bord. Pour le profil, il s'agira d'une barre oblique du tableau de bord, et pour la tarification, il s' agira simplement d'une barre oblique Sur notre page de tableau de bord, nous définirons le composant principal du tableau de bord comme fonction asynchrone, exportation par défaut, tableau de bord de fonction asynchrone Et voilà pour le moment, nous allons juste faire un retour. Et dans ce retour, nous allons créer une balise de paragraphe avec «   are Not subscribe ». Et ci-dessous, nous allons créer un lien. Et à ce lien, nous ajouterons subscribe. Ensuite, nous appliquerons le HRF à la tarification. Ensuite, nous pouvons fabriquer cette doublure et nous l' envelopperons dans un bouton que nous avons importé de Chet CN. Maintenant, mettons-le là, enregistrons-le et il sera affiché sur notre page de tableau de bord. D'ailleurs, faisons-le également sur la page de destination où j'ai oublié de le faire. Là, nous allons simplement établir un lien avec HRF. Tableau de bord à l'intérieur, je vais le mettre pour commencer. Je dois également l'importer sur la ligne suivante, nous en ferons une tarification avec HRF à la tarification Je vais aller sur notre page et nous cliquerons sur Commencer, nous arriverons au tableau de bord. Là, nous cliquerons sur S'abonner et nous arriverons à une tarification qui n' est pas encore définie. Restons-en au tableau de bord, et nous allons maintenant en définir le style. Vous n'êtes pas inscrit. Texte, je vais ajouter la mise en page Flexbox avec éléments Colum de direction flexible au centre Justifiez le centre, le lit jusqu'à huit, arrondissez-le, large et ombragé, moyen. Maintenant, je vais le sauvegarder pour la technologie des paragraphes. J'ajouterai du texte en grand, marge inférieure à quatre. Peut-être que je vais faire du texte Excel, en fait, et dans la marge inférieure, j'en ferai 26, et ce ne sera qu'un texte initial pour le tableau de bord lorsque l'utilisateur ne sera pas abonné. Mais bien sûr, il y aura beaucoup de backend à cela. Ce qui nous manque, c'est une page de profil et une interface utilisateur de page de tarification. Passons à la page de tarification maintenant. Nous allons à nouveau exporter fonction de suivi par défaut appelée tarification À l'intérieur, nous ferons un retour, et dans ce retour, nous créerons une division dans laquelle figurera le premier titre, le plan d'abonnement. En dessous de ce titre, il y aura une division. Et dans cette division, il y aura la deuxième place. Vous pouvez simplement faire un accès complet. Et ci-dessous, nous allons continuer avec accès technique des paragraphes à toutes les fonctionnalités. Ensuite, avec un autre, cela coûtera 10$ par mois. Ensuite, il y aura un rendu conditionnel. Nous pouvons réellement y aller, cela est également abonné. Il y aura un formulaire s'il est abonné pour gérer le portail Stripe, et s'il n'est pas abonné, il y aura un formulaire pour la création de l'abonnement. Actuellement, cette information est souscrite sera toujours vraie ou fausse. Et une fois que nous aurons procédé à l'intégration de Stripe, cela dépendra de l'état de l'abonnement au cas où il serait actif, ce sera la vraie valeur, dans le cas contraire. Il s'agira d'une valeur fausse. Dans ce formulaire, nous allons mettre un bouton et ce bouton sera géré par abonnement car lorsqu'un utilisateur sera abonné, il n'y a aucune raison pour qu'il s'abonne à nouveau. Il sera simplement redirigé vers un portail Stripe où il pourra annuler son abonnement. Le type de ce bouton sera soumis, puis nous pouvons le copier et le mettre dans notre formulaire ci-dessous, et cet abonnement ne sera pas géré, mais ce sera un abonnement. Jetons un coup d'œil à notre page de tarification. Nous l'avons là. Ajoutons maintenant un peu de style. Commençons par le haut avec le poids maximum jusqu'à Excel, et mélangeons Oto, BY huit et Bx quatre Ensuite, nous passerons au premier titre avec du texte pour Excel, pour un suivi plus précis des boulons, et sur le gros, nous augmenterons ce chiffre sur le texte avec du texte pour Excel, pour un suivi plus précis des boulons, et sur le gros, nous augmenterons ce chiffre sur le texte cinq Excel et passerons aux six derniers. Maintenant, pour ce dif, nous allons faire un grand arrondi. Nous allons définir la bordure et également la carte de fond. Puis carte texte, au premier plan. Quelques ombres pour le mode lumière, un peu de literie et une marge inférieure. Ensuite, pour un accès complet, nous ajouterons une bordure en bas, puis une bordure en bas, un texte trois (Excel), une police semi-boulon, également en suivant un tracé serré, et une marge en bas (quatre). Pour accéder à toutes les fonctionnalités, nous ajouterons les sept principales fonctionnalités au prix. Nous ajouterons du texte à Excel et à Font Bolt. Et pour le titre, en fait, nous allons supprimer cette marge vers le bas, et là nous allons faire l'espace Y quatre. Cela signifie également que nous pouvons y supprimer la marge vers le bas. Maintenant, enregistrons-le, consultez notre page. Et sur la tarification, nous pouvons également ajouter les fonctionnalités dont bénéficiera l'utilisateur après son abonnement. Actuellement, il n'est pas inscrit. Nous pouvons également définir les données d' abonnement aux chutes. Mais comme je le pensais, cela va changer avec le pack que nous allons coder un peu plus tard Actuellement, cela concerne le plan d'abonnement, et nous pouvons continuer et commencer à intégrer certains tiers que nous utilisons et commencer à coder le pack pour notre application 5. Préparation de commis: Nous intégrerons la gestion des utilisateurs à Clark et vous vous connecterez, puis vous accéderez à ce tableau de bord. Dans nos applications, nous cliquerons sur Créer une application. Pour le nom de l'application, je vais sélectionner SAS Tutorial, et à côté de l'e-mail, je devrai également me connecter avec Google. Je vais cliquer sur Créer une application et maintenant j'ai un guide sur la façon de le faire avec NextJS Il faut d'abord l'installer. Ouvrons un terminal, passons la commande et appuyons sur Entrée pour installer la bibliothèque. Ensuite, nous avons leurs variables d' environnement. Cliquons sur Copier. Et dans notre dossier, nous allons créer un nouveau fichier dans le dossier racine, qui s'appellera point NF Nous allons également passer à Git Ignore, et en dessous du local, nous ajouterons le point NF lui-même. Et maintenant, nous allons le coller ici. Ensuite, nous devons définir ce middleware Copions le code et le fichier intergiciel doit également être créé dans ce dossier racine Je vais y créer un nouveau fichier appelé middleware point Ts, et j'y collerai le Ensuite, nous pouvons également voir l'exemple de mise en œuvre de cette déconnexion par connexion, mais à partir de là, nous ne prendrons que le fournisseur de greffier et le placerons dans notre schéma racine. Et ces boutons, nous allons mettre la barre de navigation. De plus, il ne s'agit que de NPM run D, ce que nous faisons déjà Maintenant, prenons ce fournisseur de greffier. Allons-y. Là, nous passerons à la mise en page de l'application. Nous y intégrerons ce code HTML dans le fournisseur Clark. Vous devez le faire comme ça et également l'importer. Et maintenant, nous pouvons passer à la barre de navigation, où nous utiliserons les fonctions de connexion et de déconnexion. Si vous souhaitez continuer avec un guide, vous allez cliquer ici et passer au guide Next Jazz, où vous trouverez une documentation que nous allons faire maintenant. La première consiste à créer ces dossiers pour l' inscription et la connexion Passons à notre IDE, et là, nous passerons à l'application. Et dans l'application, nous allons créer un nouveau dossier qui s' appellera Sign in. Là, nous allons créer un autre dossier , composé de trois points, connecté entre crochets. Et à l'intérieur de celui-ci se trouvera le point de page TSX. Encore une fois, cliquez sur un dossier et faites la même chose, mais pour vous inscrire, encore une fois, inscrivez-vous avec deux points de page TSX À l'intérieur de ces deux pages, nous allons mettre ce code pour vous inscrire. Et puis le second pour la connexion. Et je faisais référence à ces deux extraits de code. Ensuite, si nous faisons défiler la page vers le bas, nous allons prendre ceci. Nous allons le mettre dans nos variables d' environnement. Ensuite, nous allons nous connecter et nous inscrire. Et là, après la connexion, nous définirons un attribut avec une URL de redirection forcée, qui sera dirigée vers le tableau de bord. Maintenant, nous allons le copier et nous allons nous inscrire et nous l'y mettrons également. Cela signifie qu'une fois que l'utilisateur s'est connecté ou s'est inscrit, il sera redirigé vers son tableau de bord. Et dans les variables d'environnement, nous configurons que lorsque greffier appellera pour se connecter ou s'inscrire, il sera redirigé vers les dossiers que nous y avons créés et il les gérera automatiquement. Maintenant, avant de l'essayer, nous devons le mettre dans notre barre de navigation. Passons à la barre de navigation des composants, et nous l'utiliserons à la place de ces dossiers de déconnexion et de Je vais mettre le bouton de déconnexion. Passons à la documentation. Nous allons y aller. Nous allons revenir à notre carte d'identité, et nous l'y mettrons. Et avec Clark, nous n'avons pas besoin de ce rendu conditionnel car le texte correspondant est connecté et déconnecté. Il suffit de l'importer. Également connecté et bouton de connexion. Et je n' utiliserai pas le bouton utilisateur. J'utiliserai simplement le bouton de déconnexion. Je vais m'assurer que les importations sont correctes et qu'elles ressemblent à la DS. Et je pense que nous pouvons maintenant aller sur notre page et tester cela. Nous sommes sur notre page. Nous ne sommes pas connectés. Cliquons dessus. Nous avons leur greffier. Je vais cliquer sur Continuer avec Google. Nous sommes connectés, et maintenant si vous cliquez sur se déconnecter, nous serons déconnectés. Nous pouvons à nouveau nous connecter avec un autre utilisateur, et maintenant nous pouvons aller au greffier pour vérifier nos utilisateurs. Dans cet aperçu, vous pouvez voir le nombre total d'utilisateurs et renvoyer les inscriptions ou les connexions J'utilise ces deux comptes. Je me suis inscrit et je me connecte. Vous y aurez tous vos utilisateurs. 6. Configuration du prisme: Configurons maintenant la base de données et nous allons commencer par Prisma ORM, puis nous allons stocker les données dans une super base qui utilise le SQL Post grass Si vous allez dans Prisma IO, vous pouvez cliquer sur Get Started pour accéder à cette documentation Vous pouvez cliquer ici pour commencer à zéro au cas où vous voudriez le faire vous-même. Là, ce que nous allons faire, c'est utiliser la première commande dans le terminal. Ouvrons-en un nouveau et installons leur NPM Prisma avec Safe Si vous êtes curieux de connaître d'autres commandes, vous pouvez utiliser NPXprisma Et cela peut vous aider. Et maintenant, nous allons y ajouter NPxPrisma, et cela initialisera Prisma dans et cela initialisera Prisma Voilà, nous l'avons. Et dans ce fichier, nous ajouterons des modèles pour nos objets. Dans la documentation de Prisma, cliquez sur Se connecter à votre base Vous y trouverez également de la documentation sur la manière de vous connecter, et nous y installerons également le client Prisma Prenons ce client Prisma pour installer NPM et nous le mettrons également dans notre terminal Cela ajoute un outil spécial appelé Prisma client à notre projet, ce qui nous aidera essentiellement à communiquer plus facilement avec notre base de données Chaque fois que nous apporterons des modifications, comme ajout de nouveaux champs ou tables, et que nous exécuterons la commande et que Px Prisma générera, le dossier du client Prisma sera mis à jour avec le nouveau code, et il le fera correspondre à notre base Dans notre cas, ce sera super basique. De cette façon, notre application peut utiliser les dernières modifications de base de données. Prisma est vraiment facile à configurer. C'est ça. Et si nous voulons simplement utiliser Prisma et ne pas utiliser SupaBase et conserver la base de données localement, nous pouvons simplement le remplacer par le fichier point n pour la source et nous pouvons commencer à et nous pouvons écrire nos modèles pour les objets Mais nous aimerions conserver notre base de données sur un serveur, nous déploierons ce projet à la fin et il sera accessible en ligne. Cela signifie que nous allons maintenant configurer Supase, puis nous allons le connecter à PRISMA 7. Configuration de Supabase: Nous irons sur SupaBase et là, nous nous inscrirons ou connecterons si vous avez déjà un compte ou si vous pouvez simplement utiliser Continue with Git Vous cliquerez alors sur créer un nouveau projet. Nous choisirons l'organisation. Nous y sélectionnerons le nom du projet. Là, nous allons générer un mot de passe et cliquer sur Copier. Enregistrez ce mot de passe quelque part. Nous l'utiliserons dans un moment, sélectionnerons la région, puis nous cliquerons sur Créer un nouveau projet. Maintenant, dans Super Base dans les paramètres du projet, et là dans la base de données, nous pouvons obtenir cette chaîne de connexion. Nous allons cliquer sur copier, puis nous allons accéder à nos variables d' environnement et nous les y collerons. Maintenant, dans votre mot de passe, vous allez coller le mot de passe que vous avez obtenu auprès de Superbase et qui ressemblera à ceci, mais bien sûr, c'est votre mot de passe Ensuite, prenez cette chaîne murale et placez-la dans l'URL de cette base de données. Nous allons maintenant passer à la documentation intitulée Super Base with Prisma, où nous pouvons également voir les prochaines étapes à suivre pour le connecter à Prisma Vous y trouverez ces deux chaînes. Le premier sera destiné à l'URL de la base de données. En gros, c'est la même chose que nous. La seule chose modifiée ici se trouve après nom de la base de données, c'est ce point d' interrogation avec PG Bouncer Prendons-le et collons-le là. Pour l'URL de la base de données, votre chaîne ressemblera à celle d'avant, mais avec Edit Questionpoint et PG Bouncer, nous pouvons la supprimer, et nous créerons alors mais avec Edit Questionpoint et PG Bouncer, nous pouvons la supprimer, et nous créerons une nouvelle variable d'environnement appelée URL directe Et cela permettra d'obtenir la deuxième chaîne. Si vous voulez bien le vérifier, il s'agit du même code de chaîne Superbase. Il possède un port différent. Il utilise 5432 et le nom de la base de données. Cela signifie que nous pouvons revenir à nos variables d'environnement. Prends cette ficelle. Mets-le là. Nous allons maintenant le supprimer jusqu'au nom de cette base de données, qui est Post Cress, et nous allons changer ce port en 5432 Nous allons maintenant l'enregistrer et passer au point de schéma Prisma Et là, nous ajouterons ci-dessous cette URL pour l'URL de la base , URL directe, et nous définirons la variable d'environnement, URL directe. Maintenant, nous allons le sauvegarder. Nous pouvons maintenant commencer à écrire les modèles de nos objets. Nous allons commencer par le modèle utilisateur pour utilisateur, nous allons définir un identifiant qui sera de type chaîne. Ensuite, nous définirons et ce sera l'identifiant, la technologie et l'unique. Ensuite, nous définirons un e-mail qui sera également de type chaîne. Il sera également unique. Ensuite, nous définirons identifiant client de Stripe pour une implémentation ultérieure de Stripe. Il s'agira d'une chaîne avec un point d'interrogation qui marquera ce champ comme facultatif, et nous le considérerons également comme unique car nous n'aurons qu'un seul type de cet identifiant. Nous allons continuer avec un nom qui sera également une chaîne avec un point d'interrogation, ce qui signifie également qu'il est facultatif, qu'il peut l'être maintenant et qu'il sera même valable pour un abonnement. Maintenant, ce que j'ai fait là-bas, c'est que je l'ai dit comme une relation facultative avec un modèle d'abonnement. Ci-dessous, nous allons créer un nouveau modèle qui s'appellera abonnement. Nous en avons besoin car nous devons savoir si l'utilisateur est abonné ou non à notre application. Nous aurons besoin d' identifiant d'abonnement Stripe qui sera un identifiant de chaîne et unique. Et nous l'utiliserons comme identifiant unique pour l'abonnement. Ci-dessous, nous devrons ajouter d' autres champs qui seront statuts que nous utiliserons pour le statut de l'abonnement. Ce sera une chaîne, puis ce sera début de la période en cours, qui sera la date et l'heure, puis la période en cours et ce sera à nouveau la date et l'heure , puis il sera créé un qui sera datetime et la valeur par défaut sera now Cela indiquera pour notre abonnement, la date et l'heure d'aujourd'hui, ce qui semble évident, mais c'est aussi simple que cela Puis je l'ai mis à jour. Nous l'utiliserons chaque fois que l' abonnement sera mis à jour. Ensuite, l'intervalle, puis l'intervalle si l'abonnement est annuel ou mensuel, l'identifiant du plan. Si vous avez un forfait Stripe, nous l'enregistrerons dans ce champ nom d'utilisateur ou l'utilisateur qui bénéficiera de l'abonnement. Maintenant, ce sera une chaîne et ce sera également une chaîne et ce sera également unique. Ensuite, nous y créerons une relation avec le modèle utilisateur qui se fera comme utilisateur utilisateur et relation avec les champs, ID utilisateur. Identifiant des références. Maintenant, dans ce terminal, nous pouvons utiliser le format NPXprisma Et si vous voulez ajouter quelque chose, vous pouvez simplement faire flèche vers le haut, Henter et recommencer. Et si vous voulez effacer votre terminal, écrivez simplement CLS. Nous pouvons le sauver. Et avec cela, nous avons créé le schéma Prisma. Nous allons maintenant accéder au studio NPXprisma, qui ouvrira l'interface utilisateur où nous verrons ce tableau Ouvrons maintenant le terminal N et exécutons NPXprisma DB push. Vous voyez, cela a échoué pour moi et c'est parce que j'ai utilisé le mauvais mot de passe parce que je vous montrais cet exemple de mot de passe, et maintenant je vais simplement y mettre le vrai mot de passe de la superbase Si vous l'avez oublié, je vais vous montrer comment vous le procurer. Dans la base de données, vous cliquerez sur Réinitialiser le mot de passe de la base de données, générer le mot de passe, le réinitialiser auparavant, copiez-le simplement si vous en voulez un nouveau, puis vous l'afficherez . Maintenant, ce que nous allons faire, c'est y mettre dans le terminal NPXprisma Nous allons y entrer, nous allons mettre un nom pour la migration et attendre un peu. Nous pouvons également le faire avec NPXprisma DB push. Le push de base de données NPXprisma se produit lorsque vous souhaitez apporter rapidement des modifications à votre base de données, cela ne les déchiffre pas, et NPXprisma migrate Lorsque nous ajouterons des champs ou un modèle, nous le supprimerons. Vous pouvez également le voir dans les migrations Prisma. Ça y est. Je pense que maintenant que nous l'avons fait, nous pouvons aller dans Superbse et là, dans l'éditeur de table, vous pouvez maintenant voir l'utilisateur de l' abonnement, et vous pouvez y voir tous les champs Il est maintenant temps de charger l' utilisateur dans notre base de données. Comment y parviendrons-nous ? Nous devons utiliser le webhook Clark pour cela, car lorsque l'utilisateur le fera à nouveau, webhook du greffier nous aidera à enregistrer l'utilisateur dans notre Actuellement, l'endroit où l'utilisateur Web Clerk se connecte est simplement enregistré dans Clerk. Codons maintenant la partie où nous allons le récupérer. 8. Webhook pour commis: Ouvrez la documentation du greffier et nous y irons pour synchroniser les données du greffier avec votre application à l'aide de webhooks. La première étape consiste à configurer Engroc. Cela nous aidera à exposer notre serveur local à Internet. Ce que nous devons faire, c'est simplement télécharger Ngrog et après l'avoir téléchargé, vous ouvrirez le fichier EngrogTexa, qui ouvrira un qui ouvrira Et avant de le télécharger, vous devez vous connecter sur ce site ungrog.com, y créer un compte, puis vous le téléchargerez et ouvrirez le fichier engrog point X Sur la page, nous irons au point de terminaison. Nous cliquons sur le tunnel de Sarto. Là, nous allons le copier, et maintenant nous allons y aller dans notre terminal. Dans ce terminal, nous allons le coller, mais ce ne sera pas 80, sera 3 000 car il s'agit de notre hébergeur local. Maintenant, nous pouvons voir qu'il le transmet comme ça. Si nous enfonçons dans notre rocher et empruntons les tunnels, nous pouvons le voir affiché là. La prochaine chose que nous devons faire est de créer des webhooks d'API. Nous y entrerons dans notre IDE dans l'application. Nous allons créer un nouveau dossier appelé API. Dans ce dossier, nous allons créer un dossier suivant appelé webhooks. Dans ce cas, nous ne créerons pas de Route through Ts. Mais d'abord, nous allons créer le dossier du greffier, et dans celui-ci, nous allons créer Route Ts. Nous pouvons également créer un autre dossier dans Webooks. Il s'appellera Stripe. Et dans Stripe, nous pouvons également créer Route DS, et c'est quelque chose que nous configurerons plus tard. Pour l'instant, passons au greffier pour l'étape suivante, nous avons déjà ces variables d' environnement. La seule chose que nous allons prendre, c'est ce secret du Webhook. Copions-le et mettons-le dans notre fichier N. Là, dans les variables d'environnement, je vais le mettre comme ça et l'enregistrer. Pour l'étape suivante, qui consiste à configurer le middleware, ce que nous avons déjà fait, nous l'avons déjà fait Si nous voulons continuer, nous devons maintenant installer SwiX. Copions-le, accédons à notre IDE, puis au terminal, collons-le et appuyons sur Installer. Maintenant, si vous passez à l'étape suivante, vous pouvez voir que nous obtenons l'itinéraire pour notre webhook Nous cliquerons sur une copie et nous la collerons dans notre itinéraire. Passons au greffier, acheminons DS en fonction du code qui s'y trouve. Et là, à la septième étape, nous pouvons voir que si une condition, où le type Evans est créé par l'utilisateur, quelque chose se produit. Nous aimerions l'utiliser car pour cela, lorsque l'utilisateur sera créé, nous aimerions appeler la section de base pour créer l'utilisateur dans notre base de données. Revenons à la deuxième étape. À la deuxième étape, vous pouvez voir que nous devons mettre à jour ce tableau de bord Clerk avec notre point de terminaison. Nous avons obtenu d'Engroc. Nous allons entrer dans notre greffier, nous allons y aller dans les webhooks Là, nous cliquerons sur le point de terminaison, et là, ce que nous ferons. Nous allons coller cette URL depuis l'Engoc. Nous allons le coller ici. Et ensuite nous ferons l'API, les webhooks, le greffier. Et c'est l' URL du point de terminaison que nous devons utiliser ici. Et ce à quoi nous voulons nous abonner, c'est la création d'utilisateurs. Nous pouvons y mettre l'utilisateur point create, et nous pouvons également laisser la sélection mise à jour, supprimée, etc. Cliquons sur Créer, cliquez sur Attribuer un secret et copiez-le à partir de là Retournez maintenant à notre IDE, accédez aux variables d'environnement, et nous l'afficherons dans notre secret de webhook Prochaine étape, ce que nous allons faire, nous irons dans notre dossier à lèvres, et là nous créerons un nouveau fichier. Ce fichier s'appellera db point Ts. Dans ce fichier, nous allons essentiellement créer et exporter une instance de Prisma, afin de pouvoir ensuite l'utiliser dans notre application Commençons par importer le client Prisma depuis la bibliothèque cliente Ensuite, nous définirons un type pour l'objet global qui inclura la propriété Prisma globraFprisma, global aussi inconnu que, global aussi inconnu que puis nous définirons Prisma deux clients Prisma ou undefined au cas où il ou undefined Ensuite, nous allons créer et exporter les prisminstans eux-mêmes. Nous utiliserons ici l'instance de prisme existante au cas où elle existerait. Dans le cas contraire, nous créerons une nouvelle instance du client Prisma. Et à l'intérieur, nous allons configurer journalisation pour afficher les requêtes de base de données. Dans le cas où nous aurions des environnements non liés à la production, ce qui est notre cas, nous enregistrerons l' instance Prisma dans l'objet global Global pour prisma Prisma est égal à Prisma. Enfin, nous allons exporter Prisma par défaut Maintenant, avec cela, nous pouvons revenir au webhook. Là, nous allons importer Prisma depuis Lip Folder DB comme ceci. Et nous allons redescendre. Nous pouvons maintenant supprimer cette partie. Et au lieu de cette partie, nous allons appliquer la condition if en vérifiant si l'événement est du type créé par l'utilisateur. Si le type d'événement est égal au point créé par l'utilisateur, nous utiliserons des adresses e-mail d'identification constantes, prénom et le nom de famille égaux aux données de l'événement. Vous allez faire Trikageblock. Dans le Strikageblock, nous allons écrire pour enregistrer l' utilisateur dans la base de données Nous attendrons Prisma point user dot Create. Nous y collecterons des données. plus, il s'agira d' abord d'un identifiant, d' un e-mail à une adresse e-mail à un e-mail à une adresse e-mail à partir de ce tableau, car sur le greffier, il peut y avoir plus d'adresses e-mail. premier devrait être le principal qui nous intéresse. Ensuite, le prénom et nous utilisons en fait le nom. Si vous consultez notre schéma prisma, nous allons créer une constante ci-dessus ou simplement créer une constante dans le bloc de pulvérisation ci-dessus, lui donner le nom complet et le définir ici comme prénom au cas où il ne s'y trouverait dans le bloc de pulvérisation ci-dessus, lui donner le nom complet et le définir s'y trouverait pas, nous le rendrons simplement vide Et associez-le au nom de famille. Encore une fois, si ce n'est pas le cas, nous allons le vider et nous allons couper les points à la fin. Maintenant, pour le nom, nous allons définir ce nom complet et y définir une nouvelle valeur au cas où il n'existerait pas. Nous avons principalement besoin de l'e-mail et de l'identifiant. L'essentiel pour nous, c'est le courrier électronique. Ci-dessous, nous pouvons faire en sorte que l'utilisateur du journal de la console dont identifiant a été inséré dans la base de données. Ensuite, dans Catch, nous allons faire l'erreur et nous y ajouterons une erreur de console au cas où cela échouerait en enregistrant l'utilisateur la base de données avec l'erreur, et nous renverrons une nouvelle réponse avec erreur en enregistrant l'utilisateur et en réglant le statut sur 500. Sinon, au cas où cela arriverait, la réponse passerait au statut 200. Nous pouvons maintenant le sauvegarder et il est temps de le tester. C'est actuellement notre super base ou Prisma, peu importe Nous allons maintenant cliquer sur Se connecter. Et nous utiliserons à nouveau certains de nos comptes pour nous connecter. Je peux voir que je suis partante. Voyons ce qui s'est passé et rien ne se passera, ce sera parce que notre utilisateur n'a pas été créé. Par exemple, avec l'utilisateur auquel je suis actuellement connecté, il a déjà été créé dans Clerk. Ce que je dois faire, c'est aller chez le greffier et supprimer les deux utilisateurs actuels que j'ai dans mon greffier. Dans Clerk, les utilisateurs s'assurent qu'il n'y a aucun utilisateur avec qui vous testez ce webhook Répétons le processus, connectez-vous. Encore une fois, je suis partante, et ça a marché. Je peux maintenant voir mon utilisateur dans une super base. Bien entendu, comme nous utilisons Prisma O RM, ce sera également le cas dans Prisma si nous actualisons le En fait, si ce n'est pas dans Prisma, faites-le simplement dans le terminal Sutter C, puis refaites NPXprisma studio qui devrait Ensuite, si vous allez dans Prisma, vous pouvez également y voir l'utilisateur 9. Webhook dans Stripe: Nous allons maintenant configurer une bande. abord, vous allez vous connecter ou vous inscrire à Stripe, puis dans Stripe, vous allez créer un nouveau produit, et là, dans le nouveau produit, nous allons aborder les développeurs nous allons entrer dans les clés d'API, et là nous allons prendre la clé publiable Ensuite, nous irons dans notre IDE, collerons là, et nous reviendrons chercher la clé secrète, nous cliquerons sur révéler puis cliquerons à nouveau pour la mettre dans le presse-papiers, et nous la collerons dans notre fichier point Nf, donc dans nos variables d' environnement J'ai la clé publiable et la clé secrète, je vais donner un nom à ces variables d' environnement. Comme il s'agira d'une clé publique, je mettrai la clé publique suivante puis la clé publiable Stripe, et pour la clé secrète, je mettrai Stripe Ensuite, nous reviendrons à la page Stripe. Là, nous irons au catalogue des produits et vous pouvez voir que j'ai déjà deux produits, mais je vais en créer un nouveau avec vous. Cliquons ici sur le produit. J'y mettrai le nom du produit SAS. J'y fixerai un prix récurrent et 9$ en 1990. Ce ne sera pas mensuel. Je vais le définir comme annuel et là je cliquerai sur le produit. Maintenant, je vais cliquer dessus pour y accéder. À partir de là, si vous cliquez, vous pouvez copier le numéro de prix, puis l'enregistrer dans vos variables d'environnement. Tu peux voir comme ça. Je l'ai mis là. Et la dernière variable d'environnement dont nous aurons besoin de Stripe est le secret du Stripe Webbook Préparons-le donc là-bas. Ce n'est pas le secret que tu devrais révéler. Pour le secret, vous l'obtiendrez réellement généré à partir du terminal. Donc, ce que nous devons faire maintenant, y aller via des webhooks. Nous allons cliquer sur tester dans l'environnement local, et nous y trouverons un guide sur ce que nous devons faire pour configurer le strip pour les webhooks Nous devons donc d'abord télécharger le client dans lequel vous allez sélectionner votre système pour répondre à Windows. Là, je téléchargerai ce fichier zip depuis Github. Vous le décompresserez, puis vous ouvrirez le dossier, puis vous ouvrirez les variables d' environnement sur votre ordinateur et vous y ajouterez un chemin vers ce fichier point ax Vous allez ouvrir votre terminal. Vous y écrirez une bande, et vous obtiendrez cette information. C'est ainsi que vous saurez que vous avez correctement installé le client. Là, nous reviendrons sur cette page. Ensuite, nous y mettrons cette première commande, Stripe Login. Nous copierons l'URL. Ouvre-le là, là nous verrons le mot. Nous cliquerons sur Lo Access et l'accès sera accordé. Maintenant, si nous revenons à cette page, nous la verrons terminée, puis nous copierons cette commande et nous y ouvrirons un nouveau terminal. Nous allons maintenant le coller pour transférer les événements vers nos webhooks. Ce que nous devons faire, c'est le remplacer par notre hébergeur local. Nous allons également mettre la bande de webhooks de l'API. Nous allons ajouter Enter avec ceci, nous obtiendrons le secret du webhook à rayures Nous allons le coller et le mettre là. Et maintenant, ce que nous allons faire, c'est essayer de déclencher un événement. Nous ouvrons votre terminal, nous y collons cette intention de paiement par Stripe Trip Trip et nous appuyons sur Entrée Vous pouvez voir que cela a essayé quelque chose, mais comme nous n'avons pas encore de code dans ce StrpOutttts, cela ne fonctionnera bien sûr Maintenant, nous allons coder cette partie et la faire fonctionner, puis une fois que nous aurons à nouveau exécuté cette nous aurons à nouveau exécuté intention de paiement par Stripe Trip Trigger succès, cela fonctionnera pour nous. Mais bien sûr, nous pouvons également le déclencher à partir de l'interface utilisateur elle-même, où nous essaierons simplement d'acheter le produit. Pour l'instant, allons simplement coder le webhook. abord, nous allons aller dans le dossier Lipfolder, et dans Lipfolder, nous allons créer un nouveau fichier Ce fichier s'appellera stripe point ts. Nous allons commencer par importer la bibliothèque Stripe. Et nous n'avons pas encore Stripe. Ouvrons un terminal, et faisons NPM I Stripe. Maintenant, tout ira bien et nous pouvons continuer. Nous allons créer et exporter une nouvelle instance de Stripe avec une clé secrète issue de nos variables d' environnement. Tapons la bande constante d'exportation dans laquelle nous allons créer une nouvelle instance de bande. Et comme paramètre d'entrée, nous enverrons la clé secrète Stripe process point point en tant que ressort. À l'intérieur, nous mettrons la version de l' API que nous devons définir sur 202-04-0620, et si cela ne fonctionne pas pour vous, vérifiez simplement quelle est la dernière version de l' API et De plus, je vais définir le tapuscrit sur true pour activer le support dactylographié Et nous pouvons y voir une erreur. Mettons-y celui recommandé au cas où cela poserait des problèmes, nous le corrigerons plus tard. Maintenant que nous le testons, en mode développeur, nous y incluons également une fonctionnalité bêta avec point Acacia et une fois que nous serons en production, elle ne pourra être utilisée qu'avec la version actuelle de l'API Actuellement, nous utiliserons cette fonctionnalité bêta pour inclure également. Nous allons continuer à définir une fonction asynchrone pour créer une session de paiement par bande. Je vais faire la constante d'exportation pour obtenir une session Stripe asynchrone Et à l'intérieur, nous allons définir les paramètres d'entrée. Il s'agira de l'identifiant du prix, l'URL du domaine et de l'identifiant du client. Et ses types seront des chaînes de caractères. L'URL du domaine sera également une chaîne et l'identifiant du client sera également une chaîne. Nous allons continuer comme ça et nous ouvrirons un corps lequel nous créerons une nouvelle session de paiement Stripe avec ces paramètres spécifiés. Je vais créer une constante pour la session. Je vais attendre Stripe Dot Checkout Dot Sessions point Create. Et là, je vais définir le client pour cette session, qui sera un identifiant client par client. Ensuite, je mettrai le mode qui sera celui de l'abonnement. Ensuite, je définirai les types de méthodes de paiement. Pour nous, s'agira de la collecte par carte, puis de l'adresse de facturation. Il y aura des éléments automatiques, puis des éléments de ligne. Nous le définirons sur le prix où figureront identifiant du prix et la quantité, qui seront un. Ci-dessous, nous poursuivrons les mises à jour destinées aux clients, et là, nous définirons la mise à jour du nom Auto et de l'adresse en Audo également Enfin, il y aura le succès et l'URL d'annulation. Ces deux URL seront présentes une fois que l' utilisateur aura acheté le produit sur Stripe, qui le redirigera vers cette URL Et si le paiement échoue, il sera redirigé vers cette URL. Et ces deux pages sont quelque chose que nous définirons dans un moment après avoir terminé ces points à rayures L'URL de réussite ressemblera à l'URL du domaine, barre oblique de réussite du paiement et l'URL d' annulation ressemblera beaucoup à la première, mais elle sera annulée Nous définirons ces pages dans un moment. Maintenant, en dessous, nous allons mettre URL du point de session de retour sous forme de chaîne. Cela signifie que nous allons renvoyer l' URL de la session créée. Ce que nous faisons également en dessous de cette session de création de commande consiste à définir une session de portail client. Lorsque l'utilisateur souhaitera gérer son abonnement, nous lui créerons un portail, et lorsqu'il cliquera sur l'abonnement géré, il sera redirigé vers Stripe et dans Stripe, il aura la gestion des abonnements. Il peut annuler l' abonnement sur place et ainsi de suite. Faisons la fonction Export asynchrone, créons un portail client avec paramètre d'entrée de l'ID client sous forme de chaîne Nous allons créer une promesse à cet égard. Et à l'intérieur, nous créerons une nouvelle session de portail de facturation à bande, une session de portail constante. Attendez les sessions du portail de facturation Stripe point Créez-les là, nous enverrons à l'identifiant du client et renverrons l'URL vers quelque chose de similaire. Nous allons le prendre à partir de nos variables d' environnement, prochaine URL publique. Dans notre cas, il s'agira d'une réduction tarifaire de l'hôte local. Mais une fois que nous serons en production, nous remplacerons cette variable d' environnement de la prochaine URL publique par le domaine réel de notre page. Maintenant que nous avons la promesse d' une chaîne de caractères, nous devons la renvoyer. Nous allons donc renvoyer une chaîne , appelée URL point de session du portail. Maintenant, nous avons même préparé la création d'un portail client à côté de la session de paiement que nous avons là. Cela devrait être le cas pour Stripe D dans notre dossier à lèvres. Nous pouvons maintenant passer aux webhooks. Dans les webhooks, nous irons sur Stripe et dans Stripe, nous ouvrirons le point de route Ds, nous commencerons à y nous ouvrirons le point de route Ds coder le webhook Stripe C'est là que nous pouvons commencer. Tout d'abord, nous allons importer l'instance Stripe depuis notre dossier Lip. Faisons Importer une bande depuis le dossier Lip qui s'y trouve, puis nous continuerons à importer une bande pour la prise en charge de la dactylographie Nous allons ensuite importer le client de base de données Prisma. Nous l'avons également dans notre dossier à lèvres. Ensuite, nous allons importer la fonction d' en-tête à partir de NextS afin de pouvoir accéder aux en-têtes de requête Ce que nous allons faire ensuite est de définir une fonction de gestion de post-requête asynchrone Nous y mettrons les paramètres d'entrée de la requête tels que rec et elle sera de type request. Nous y extrayons le corps brut de la demande sous forme de texte. Faisons le corps constant, la requête elate, le texte. Ensuite, nous obtiendrons une signature rayée à partir des en-têtes de demande et nous l' enregistrerons dans une signature nommée constante Là, nous allons créer des en-têtes, signature à points, une chaîne, et nous l' enregistrerons dans cette constante de signature Ensuite, nous déclarerons une variable pour contenir l'événement Stripe. Nous organiserons un événement à dix bandes. Ci-dessous, nous allons créer un Tricgblock. Dans ce bloc de capture de bandes, nous allons vérifier et événement de bande en utilisant le secret du webhook Nous y organiserons un événement équivalent à un événement Stripe point webhooks point Construct Et nous devons y mettre en tant que paramètres d'entrée, corps, signature, et traiter le point N Stripe webhook secret sous forme de chaîne Au cas où cela échouerait, nous le retrouverons dans ce bloc, et nous y retournerons dans une nouvelle réponse réglant sur erreur Webhook et en réglant le statut sur 400 Ensuite, nous créerons une nouvelle session constante, puis nous transformerons l' objet de données d'événement en session de paiement par bandes. Faisons un objet de données d'événement sous forme de session de paiement à points rayés. Pour expliquer cela, cet objet de données d' événement accède à la propriété de l'objet dans le champ de données de l'événement Stripe. Cet objet contient tous les détails du sujet de l'événement. Ce que nous faisons là, c'est demander au tapuscrit de traiter l'objet de données d' événement comme s'il s'agissait d'une sorte de session de paiement par bande et nous expliquons pourquoi nous le faisons Par exemple, un objet de données d'événement peut être une session de paiement, abonnement ou un type de facture, et le tapuscrit ne peut pas indiquer automatiquement de quel type il s'agira Et comme il peut s' agir de n'importe laquelle d'entre elles, nous la définirons comme une session de paiement à bande. Continuons avec la gestion des différents événements. Tout d'abord, nous allons commencer par la gestion de l'événement appelé Session de paiement terminée. Nous vérifierons leur état et nous vérifierons le type d'événement. Cette session de paiement sera terminée comme je l'ai indiqué. Tout d'abord, pour chaque événement, nous récupérerons les détails complets de l' abonnement auprès de Stripe et nous les enregistrerons dans un abonnement à code constant. Nous y attendrons la récupération des abonnements Stripe. Et nous récupérerons l'abonnement à la session sous forme de chaîne. Ensuite, nous trouverons l'utilisateur dans la base de données à l'aide de son identifiant client Stripe, et nous l' enregistrerons dans Constant user wait Prisma point user find Unique, et là nous sélectionnerons simplement où l'identifiant client Stripe est session point customer sous forme de chaîne Cela signifie que cela vérifiera notre base de données et trouvera l'utilisateur qui possède cet identifiant client Stripe. Nous allons maintenant l'enregistrer dans la constante utilisateur, et nous allons continuer. Nous vérifierons si l' utilisateur a été trouvé ou non. Au cas où il n'aurait pas été trouvé, nous vous enverrons un message d'erreur, comment procéder. Notons-le et si la condition marquée d'un point d'exclamation, utilisateur, cela signifie que si l' utilisateur n'est pas trouvé, nous exécuterons ce bloc de code, et nous y ferons renvoyer une nouvelle réponse Et dans cette réponse, nous mettrons le message, utilisateur introuvable, et nous mettrons également le statut, et le statut sera défini sur 44, ce qui signifie introuvable. Ensuite, nous poursuivrons la création d' un nouvel abonnement au cas où l'utilisateur existerait et que tout serait prêt. Nous attendrons la création de l' abonnement Prisma point point. Et nous devons y créer les données, bien sûr, et les données que nous allons créer. Nous pouvons également voir dans notre schéma le point Prisma. Commençons par l'ID utilisateur, qui sera défini sur user point ID, qui est l'ID de cet utilisateur que nous avons ici. Ensuite, stripez l'identifiant d'abonnement qui sera défini comme identifiant d' abonnement. Ça y est. Ensuite, nous continuerons à définir la période en cours et nous la fixerons à une nouvelle date, puis nous mettrons la fin de la période d'abonnement en cours, multipliée par 1 000. Maintenant, permettez-moi de vous expliquer cela. Comme le constructeur de date s'attend à des millisecondes, nous devons le multiplier par 1 Ensuite, nous enregistrerons cette date dans notre période de fin de période en cours et nous ferons de même pour le début de la période en cours. Encore une fois, vous datez, convertissez ou allons-y d'abord, période en cours commence, convertissez également en millisecondes. Nous allons continuer par intervalles. Nous allons définir celui-ci sur les points d'abonnement, et maintenant nous utilisons des données et zéro pour représenter le premier élément de notre gamme. Il n'y aura qu'un seul élément, et ce sera celui pour lequel nous voulons un intervalle entre les plantes, puis nous passerons à l'ID du plan. Ensuite, nous utiliserons des points d'abonnement de style similaire, les données d'abord issues du tableau, l'identifiant des points du plan. Enfin et surtout, le statut, il ne s'agira que d'un point d'abonnement. Cela clôturera le type d'événement terminé lors de la session de paiement, et ci-dessous, nous pouvons commencer par un autre. Nous créerons une condition si, type d' événement, le paiement de la facture a réussi. Maintenant, pour ce type d'événement, nous allons à nouveau récupérer les détails complets de l'abonnement auprès de Stripe et les enregistrer dans une constante appelée abonnement. Nous y ferons des abonnements Avade Stripe, récupérer via un abonnement à une session sous forme de chaîne Maintenant, nous n'avons pas besoin de vérifier l'utilisateur. Nous allons simplement mettre à jour l'enregistrement des abonnements dans la base de données, et ce sera tout pour ce type d'événement. façon dont nous allons procéder est de procéder à la mise à jour abonnement à Awad Prisma point Nous y sélectionnerons ceux dont l'identifiant d'abonnement ou l'identifiant d' abonnement Stripe est égal à l'identifiant par point d'abonnement. Quelles données souhaitons-nous mettre à jour ? Nous aimerions mettre à jour le statut, le statut des points d'abonnement, ainsi que la période en cours avec une nouvelle date, et encore une fois, nous devons convertir ce point d'abonnement pour la période en cours et le multiplier par 1 000. Nous pouvons passer à un autre type d'événement, qui sera la mise à jour de l' abonnement. Faisons en sorte que le type d' événement conditionnel soit égal à la mise à jour de l' abonnement client. Et là encore, nous ferons de même. Il y aura un abonnement constant, les abonnements Weight Stripe Dot Retrieve Session Abonnement sous forme de chaîne. Cela signifie que nous récupérons à nouveau détails complets de l'abonnement auprès de Stripe Je pourrais essentiellement le copier-coller, mais laissez-moi simplement le coder. Nous pouvons le refaire pour ces deux événements. Vous vous en souviendrez donc pour la prochaine fois. Nous allons maintenant simplement mettre à jour l'enregistrement des abonnements dans la base de données. Ensuite, nous attendrons la mise à jour du point d'abonnement RSma, et nous le ferons sur les dossiers où l'abonnement est un identifiant de point d'abonnement Et avec les données, nous le ferons , nous fixerons la fin de la période en cours à une nouvelle date. Fin de la période d'abonnement en cours multipliée par 1 000, encore une fois, pour la même raison. Ensuite, nous avons besoin du début de la période en cours, ce qui sera le même cas, début de la période d'abonnement en cours. Ensuite, nous mettrons à jour les données relatives aux intervalles et aux articles d'abonnement. Cela se répète, je dirais, c'est exactement la même chose encore et encore avec la définition de différents champs, etc. Maintenant, nous définissons l'intervalle, nous allons également définir l'identifiant du plan, les points d'abonnement, les points, les points, les données. Encore une fois, il s'agit d'un tableau. Nous allons accéder au premier élément, le plan point ID. Et il y aura une chose intéressante et vous pouvez la définir ou vous n'avez pas besoin de la définir. Lorsqu'un utilisateur achète l'abonnement, il a accès pour un mois ou un an. Cela dépend de ce que nous allons définir. Lorsque l'utilisateur annule l'abonnement, il lui reste encore le temps qu'il a acheté. Pendant un mois, s'il annule la deuxième aujourd'hui, il lui reste encore 28 jours. Pendant un an, s'il annule au bout d'un mois, il lui restera encore 11 mois Mais que faire si vous souhaitez définir une condition selon laquelle, lorsque l'utilisateur se désabonnera, il perdra immédiatement l'accès à notre application. Ce n'est probablement pas le meilleur cas ni la meilleure chose à faire, mais nous pouvons le faire. Et au cas où vous voudriez le faire, je peux vous montrer comment, et nous pouvons également le configurer pour l'application , car il est tout simplement facile à supprimer. Si vous supprimez simplement cette ligne, tout ira bien alors. Pour ce faire, nous nous occuperons de leur statut. Et pour ce qui est du statut, nous annulerons l' abonnement à la fin de la période. Et dans le cas où cela existe, cela signifie que l' utilisateur a réellement annulé l'abonnement car sinon, ce champ est vide. Et lorsque ce champ est rempli, cela signifie qu'il a annulé l'abonnement. Si cela existe, il exécutera cette vraie position, qui sera annulée. S'il n'existe pas, il exécutera ce statut de point d'abonnement. Chaque fois que l'utilisateur annule l'abonnement, le statut passe d'actif à annulé. Et comme nous vérifierons sur notre page l'accès au produit dont abonnement de l'utilisateur a besoin pour être actif, il n' y aura pas accès car son statut sera annulable au lieu d'être actif immédiatement après avoir cliqué sur Annuler l'abonnement J'espère que vous l'avez compris, et nous allons vous le montrer à l'aide d'un exemple concret. Comme nous testerons l'application ultérieurement, vous verrez comment cela fonctionne exactement et vous comprendrez également mieux comment travailler avec ces types d'événements. Et nous allons passer au dernier événement, et l' abonnement du client sera supprimé. Faisons-le s'il y a une condition. Type d'événement, abonnement client supprimé. Encore une fois, sauf pour l'abonnement à nom constant, les détails complets de l'abonnement de Stripe attendent l'abonnement Stripe point. Ne pas récupérer une chaîne d'abonnement à une session. Et là, nous mettrons à jour l'enregistrement des abonnements dans la base de données. Nous attendrons la mise à jour des points d'abonnement à Prisma point. Et où, encore une fois, l' identifiant d'abonnement Stripe est égal à l'identifiant par point d'abonnement. Et en ce qui concerne les données, nous mettrons à jour le statut en un point d'abonnement. J'attendrai cet événement et en dessous de cet événement à la fin de ce corps, nous allons renvoyer une réponse, 200, qui sera une bonne réponse, sera tout pour ce webhook. Le message sera nul au cas où et le statut sera simplement défini sur 200. Vous pouvez y voir les événements. Vous pouvez également y faire quelques commentaires. C'est certainement pratique pour le futur Lorsque vous reviendrez sur ce code, nous pourrons maintenant tester notre webhook. Bien sûr, nous voulons le tester sur Y pour le moment car nous ne l'avons toujours pas codé. Mais nous allons ouvrir notre terminal et y faire un strip-trigger ( intention de paiement réussie). Ça va fonctionner. Maintenant, nous devons trouver celui-ci exactement et il fonctionne. Cela signifie que le webhook a été codé avec succès. Vous pouvez voir que nous recevons 200 réponses à des demandes de statut. Maintenant, nous pouvons coder 200 réponses à des demandes de statut. Maintenant, nous pouvons coder DI et suivre le processus normal, vérifier si notre abonnement est activé, définir la page principale du produit et tester la gestion de l'affichage du contenu en fonction du statut de l' abonnement. Ouvrons l'explorateur de fichiers, et là, nous passerons à la page de tarification TS six, et nous continuerons à coder le back-end. Faisons d' abord quelques importations. À côté du bouton. Nous allons également importer la réaction. Ensuite, nous allons importer Prisma nous l'avons dans notre dossier LIP et dans notre fichier DBDT TS. Ensuite, nous obtiendrons session Stripe que nous avons définie dans notre Lip Folder Stripe. Nous y trouverons également la bande elle-même. Ensuite, nous deviendrons instables sans stockage à partir du cache suivant, et nous l'utiliserons pour indiquer aux Next Gs que nous ne voulons pas mettre certaines données en cache. Dans notre cas, ce seront les données la fonction G data que nous coderons. Importons un fichier instable Aucun magasin depuis le cache suivant. Et puis nous importerons également redirection à partir de la prochaine navigation. Celui-ci sera utile car nous redirigerons nos utilisateurs au cas où ils souhaiteraient s'abonner et il ne serait pas bloqué Nous le redirigerons vers la page de connexion. Ce sera pour les importations et nous pouvons commencer par la première fonction. Juste en dessous des importations, nous allons créer fonction asynchrone et nous l' appellerons get the data Cela prendra un ID utilisateur et une chaîne ou également une valeur vide. Pourquoi est-il important de vérifier également cette nouvelle valeur ? Parce que si ce n'est pas le cas et que ce sera le cas, chaque fois qu'un utilisateur débloqué accède à cette page de tarification, elle échouera, et c'est quelque chose que nous ne voulons pas Nous voulons que tous les utilisateurs de notre page de tarification puissent vérifier le prix. Mais chaque fois qu'il voudra acheter le produit, il sera redirigé pour se connecter. Nous y ferons le dossier unstable no store. Cela signifie que nous disons à NextGS, comme je l'ai mentionné plus tôt, nous ne voulons pas mettre ces données en cache Pourquoi ne voulons-nous pas attraper ça ? Parce que le statut de l'abonnement peut changer, nous aimerions montrer le plus d' informations à jour à l'utilisateur, c'est pourquoi nous les utiliserons ici. Ensuite, nous vérifierons si nous avons trouvé le nom d'utilisateur ou non. Au cas où cela serait faux, nous renverrons null, et je dois me corriger ici, nom d'utilisateur, même si le nom d'utilisateur est nul, mais bien sûr, nous le vérifierons et nous reviendrons maintenant. Cela signifie que cette fonction ne renverra aucune valeur. Ensuite, nous rechercherons un abonnement dans la base de données pour notre utilisateur, qui est celui-ci. Donc, si cet ID utilisateur existe, il continuera simplement à exécuter ce code, et là, nous pourrons créer une constante avec abonnement, et dans l'abonnement, nous enregistrerons RSma, procéderons à l'abonnement, trouverons l'Unique, et nous sélectionnerons où l'ID utilisateur est l'ID utilisateur Là, nous aimerions obtenir le statut et également un utilisateur par utilisateur, nous sélectionnerons l'identifiant client Stripe de cette manière. Cela signifie que nous y connaîtrons le statut de l'abonnement ainsi que l'identifiant client Stripe. Maintenant, nous pouvons continuer dans le composant principal et nous pouvons également supprimer ce qui s'appelle s'abonner. Dans ce composant principal, nous allons commencer avec un ID utilisateur constant, et nous allons le récupérer en tant qu'utilisateur constant, l'utilisateur actuel. Il s'agit d'obtenir l'ID utilisateur et les données complètes de l'objet utilisateur. Il semblerait que nous ne l'ayons pas importé . Maintenant, ça devrait aller. Nous obtiendrons également les données d'abonnement des utilisateurs en appelant la fonction get data que nous venons de faire. Nous l'enregistrerons sous forme d'abonnement constant pour obtenir des données avec un identifiant utilisateur. Ce que nous venons de faire maintenant, c'est de citer cette fonction que nous y avons créée. Nous y envoyons ce paramètre ID utilisateur, nous renverra ce statut et l'identifiant client Stripe de l'utilisateur. Ensuite, nous créerons une autre nouvelle constante qui sera « ceci est abonné », et nous vérifierons si l' abonnement est actif. Nous avons une erreur et c'est parce que nous n'avons rien renvoyé dans notre fonction d' obtention des données. Nous devons retourner l'abonnement, bien sûr, le sauvegarder. Maintenant, cela fonctionnera, et cela fonctionnera comme avant, mais ce ne sera plus du tout hardcdt. Nous avons maintenant cette vérification de l'état de l'abonnement. Cette valeur sera vraie ou fausse en fonction de cette sortie. Ce que nous voulons faire ensuite, c'est une autre fonction, et celle-ci sera une fonction asynchrone, créer Un abonnement sera créé pour cet abonnement , puis abonnement géré pour cet autre abonnement géré par bouton. Dans cette fonction, créer un abonnement, nous allons commencer par le définir en tant que serveur d'utilisation. Cela signifie que nous demanderons à Next JS d'exécuter cette fonction sur le serveur. Ci-dessous, nous vérifierons le nom d'utilisateur. Et s'il n'y a pas d'identifiant utilisateur, nous utiliserons la redirection. Nous l'importons ici, et nous redirigerons l'utilisateur pour qu'il se connecte à la tarification des URL de redirection. Chaque fois qu'il cliquera sur un excellent abonnement, qui se trouve sous le bouton d'abonnement, il sera redirigé vers cette URL. Ensuite, si nous avons un identifiant utilisateur et que l'utilisateur existe, cela signifie qu'il s'est connecté. Nous allons enregistrer l'utilisateur de la base et attendre ismadtuser point Découvrez où l'identifiant est l'identifiant utilisateur, et nous sélectionnerons l'identifiant client Stripe. Nous pouvons effectuer leur vérification supplémentaire. Si nous ne parvenons pas à trouver l'utilisateur, nous allons générer un message d'erreur. Faisons-le si c'est la condition. Si l'utilisateur de la base de données n'est pas trouvé, nous lancerons une nouvelle erreur que nous pouvons faire. L'utilisateur ou l'utilisateur de la base de données est introuvable. Faisons en sorte que l' utilisateur de la base de données soit introuvable. Nous savons ce qui se passe au cas où nous consulterions nos journaux après un échec sur notre page. Nous pouvons maintenant obtenir l'e-mail de l'utilisateur auprès du greffier. Enregistrons-le dans un e-mail constant. Là, nous rechercherons simplement l'adresse e-mail principale de l'utilisateur, puis nous accèderons à l'adresse e-mail. Ce sera le principal, et il devrait toujours être là car lorsqu'il se connectera via Google, il l'aura. Et quand il se connectera par e-mail et mot de passe, il sera également là. Dans Clerk, il peut avoir plusieurs adresses e-mail, mais nous allons accéder à celle-ci principale. Ensuite, comme indiqué ci-dessous, au cas où l'utilisateur n'aurait pas encore d'identifiant client Stripe, nous en créerons un, ce qui sera essentiellement peu comme s'inscrire à un nouveau service et obtenir le numéro d'identification. Dans notre cas, obtenir l'identifiant client Stripe. Là, nous le ferons en cas de condition, et si l'identifiant client Stripe de la base de données n'existe pas, nous créerons une nouvelle constante pour le client, nous attendrons que les clients de Stripe point créent un point d'e-mail à e-mail. Et nous mettrons à jour notre base de données avec le nouvel identifiant client Stripe dès que nous l'aurons reçu. Passons à l'utilisateur de la base de données, attendons que Prisma point user point create où l'ID se trouve dans l'ID utilisateur ou l'ID utilisateur dans l'ID pour les données Tapez l'identifiant du client sur l'identifiant à points du client. Et sélectionnez Stripe Customer ID. Maintenant, nous pouvons également ajouter un utilisateur de base de données Consolog pour nous Maintenant, j'ai raté quelque chose parce que j'ai une erreur. Et oui, parce que je ne crée pas mais je mets à jour les données ou l'utilisateur. Ensuite, nous vérifierons que nous avons maintenant un identifiant client Stripe. Faisons en sorte que l'identifiant client Stripe de l'utilisateur de la base de données soit conditionnel. Dans le cas contraire, nous tirerons une nouvelle erreur Impossible de définir l'identifiant client Stripe pour l'utilisateur. Nous pouvons enfin créer une session de paiement par bandes. Cela signifie que nous enverrons enfin l'utilisateur à la page de paiement de Stripe où il pourra acheter notre produit. Faisons l' abonnement constant, URL. Nous attendrons la session Get Stripe nous définirons l'identifiant client sur la base de données User point Stripe Customer ID. Nous définirons l'URL du domaine pour traiter le point enfTNN au cas où il s'agirait d'une production Utilisons l'URL de production du point N sous forme de chaîne, et dans le cas contraire, nous utiliserons l'hôte local HTDP 3,000 Et puis le numéro de prix de notre produit, nous l'avons enregistré dans les variables d' environnement. Nous traiterons le point point strip price ID sous forme de chaîne et ce sera tout. Ce que nous faisons là-bas, c'est que nous vérifions, nous sommes en production, cela peut être lu à partir de ce nœud N au cas où oui, nous définirons cette URL de domaine comme URL de production. Et au cas où non, ce sera juste pour notre hébergeur local, 3 000, où nous gérons notre serveur. Ensuite, nous reviendrons, redirigerons vers l'URL d'abonnement. Et avec cela, nous terminons cette création d'abonnement. Ce que nous devons faire ci-dessous est également de définir une fonction pour créer une nouvelle session de portail client. Il y aura un endroit où l'utilisateur pourra annuler ou mettre à jour son abonnement. Faisons une fonction asynchrone, créons un portail client. Et nous allons à nouveau définir le serveur d'utilisation. Ensuite, nous vérifierons l'ID utilisateur au cas où il n'y en aurait pas, nous retournerons la redirection pour se connecter, tarification de l'URL de redirection. Cela ne devrait pas se produire car le chèque est souscrit et l'utilisateur ne peut pas être abonné s'il n'est pas verrouillé. Cela signifie que lorsque l'utilisateur n'est pas abonné ou n'est pas connecté du tout, il verra ce bouton d' abonnement. Ce bouton d'abonnement aura la fonction OnClick. Cela crée un abonnement là où ce chèque se trouve déjà. Maintenant, c'est à nous de décider si nous voulons également effectuer cette vérification dans la création du portail client, car techniquement, ce n'est pas nécessaire. Créons maintenant une session sur le portail client Stripe. Nous allons créer une URL de portail client constante, et nous attendrons les sessions point du portail de facturation Stripe Créez ce que nous avons dit qu'il y a un client à partir de l' abonnement, tripez l'identifiant du client sous forme de chaîne, et également l'URL de retour sera là chaque fois que l'utilisateur cliquera sur un bouton B dans le portail client Stripe. Il y sera redirigé, et ce sera encore une fois, comme avant, rosst Noe N. Au cas où, ce sera en production Il exécutera cette position au cas où cela ne serait pas en production, il le renverra sur l'hôte local 3 000. En gros, au cas où cela ne serait pas déployé, nous l'aurons simplement sur notre ordinateur. s'agit d'un opérateur de tour, cela signifie qu'il est vérifié, et lorsqu'il s'agit d'une valeur vraie, il exécute la première position, lorsqu'il s'agit d'une fausse valeur, il exécute la deuxième position. Maintenant, si cela est vrai, nous allons définir l'URL de production du point Nf du processus sous forme de chaîne Enfin et surtout, nous allons renvoyer la redirection vers l'URL du portail client. Nous préparons maintenant ces deux fonctions et nous sommes prêts à les utiliser sur nos boutons. De plus, nous allons y faire une constante appelée lien B, et là nous vérifierons si l'ID utilisateur existe au cas où, oui, nous utiliserons à nouveau ce terme opérateur au cas où oui, quelque chose se passerait là-bas, dans le cas où non, quelque chose se passerait sur cette fausse position. Lorsque l'utilisateur sera verrouillé et qu'il aura cet identifiant utilisateur, signifie que lorsqu'il cliquera sur la page de tarification, nous le redirigerons vers un tableau de bord. Lorsqu'il ne sera pas connecté, ce sera donc un utilisateur non autorisé, il sera redirigé vers une page de prêt. raison de l'implémenter est que nous aurons une page de tarification dans le dossier racine. Tout le monde peut accéder à cette page de tarification, et pour se connecter, les utilisateurs accèdent généralement à cette page de tarification à partir d'un tableau de bord. Ainsi, lorsqu'ils voudront revenir de la page de tarification, ils seront redirigés vers leur tableau de bord. Et lorsque les utilisateurs ne sont pas connectés, ils accèdent à cette page de tarification à partir d'une page de prêt. Ainsi, lorsqu'ils cliqueront sur le bouton Retour , ils seront redirigés vers page de prêt, car ils voudront peut-être revoir la démo et simplement consulter la page de prêt, et ils voudront toujours décider s' ils achèteront notre produit ou non. Maintenant, si nous passons au rendu de ce composant, ne nous reste plus qu'à définir l'action sur ce formulaire. Pour cet abonnement géré, il s'agira de créer un portail client. Et pour cet abonnement, il s'agira de créer un abonnement. Ensuite, sur la carte, j' ajouterai le bouton B. Cela signifie que quelque part là-bas, je vais créer un lien. Je peux l'importer, et à l'intérieur, je vais le remettre avec la flèche arrière qui devrait être celle-ci. Si je ne me trompe pas, voyons voir. Pour ce lien, le HRF sera lien B et dans certaines classes également, nous traiterons la fin du texte petite, la police moyenne, le texte, soulignement principal décalé de quatre et sur notre soulignement Enregistrons-le et allons sur notre page pour voir à quoi il ressemble et comment il fonctionne. Nous revenons maintenant au tableau de bord et nous pouvons tester les fonctionnalités du monde. Cliquez sur s'abonner et nous avons été redirigés vers Stripe. Nous pouvons voir que le prix de notre produit est là. L'e-mail est là. Complétons maintenant les données. Maintenant, nous avons été redirigés vers Payments Success, et nous n'avons pas encore codé cette page. Même chose pour les paiements annulés. Mais le fait que le paiement sur page soit un succès signifie que notre paiement a été effectué avec succès. Dans notre super base, vous pouvez voir que nous avons obtenu un nouvel abonnement connecté à notre utilisateur Cela signifie que la mise à jour du statut des paiements et des abonnements a été effectuée avec succès Notre webbook Stripe fonctionne donc correctement Nous pouvons maintenant passer aux fonctionnalités suivantes. Par exemple, nous devons maintenant nous occuper de la page de réussite et d' annulation notre dossier de paiement au cas où le paiement par Stripe se terminerait par un bon ou un mauvais scénario. 10. Pages de paiement: Maintenant, nous allons créer le dossier dans l'application, nous l'appellerons paiement. Dans ce dossier, nous allons en créer un autre et ce sera un succès. Ensuite, cliquez sur le paiement, créez-en un autre et appelez-le annulé. À l'intérieur de ces deux dossiers, nous allons créer un point de page Tsix Pareil ici. Et maintenant, nous pouvons commencer par la page T six annulée, nous allons la définir comme use client comme ce sera le cas sur le site du client, et nous pouvons commencer par annuler la fonction d'exportation par défaut. Et à l'intérieur, nous ferons le retour, et en retour, nous commencerons par le dif Dans cette section, nous aurons un titre avec le paiement annulé. Ci-dessous, nous aurons une balise de paragraphe où nous aurons la description de ce qui vient de se passer. Votre paiement a été annulé. Aucune accusation n'a été portée. Tu peux faire quelque chose comme ça. Et ci-dessous je ferais un bouton et notre bouton que nous avons importé de Chet CN, qui sera celui-ci, à l'intérieur de ce bouton, nous ferons un lien. Nous allons importer le lien à partir du lien suivant. Nous allons maintenant ajouter leur TF, et ce sera à la tarification. Nous reviendrons à la question des prix. Ajoutons maintenant un peu de style à la couche qui l'entoure. Nous allons faire la mise en page de la boîte flexible, la colonne de direction flexible, puis le centre des éléments, le centre de justification Nous l'avons donc bien centré horizontalement et verticalement. Ensuite, hauteur minimale de l'écran. Maintenant, si nous voulons le sauvegarder. Nous voulons également voir ce que nous faisons. Je vais y aller sur ma page, et dans l'URL, vous allez supprimer les paiements CanSLD Maintenant, nous pouvons déjà le voir d'annulation de paiement, nous ajouterons une police, à la fois et du texte dans Excel. Nous allons maintenant ajouter l'espace Y six. Pour le paragraphe, nous allons ajouter du texte Excel et je pense que c'est possible. Nous allons cliquer sur Retourner aux prix, cela devrait fonctionner, et cela fonctionne. Maintenant, si vous voulez vraiment, prenons-le d'abord, copiez-le, passez à Success, collez-le là, renommez-le en succès, enregistrez-le Nous pouvons revenir à la page. Nous y ferons slash payment slash Success. Nous allons maintenant le remplacer par « paiement réussi ». Et nous allons remplacer cette balise de paragraphe par quelque chose comme «   merci pour votre achat ». Votre paiement a été traité avec succès. Nous allons maintenant l'enregistrer et nous pouvons voir à quoi ressemble la page. Et peut-être que nous pouvons également ajouter un div qui aura une largeur de 300 pixels une hauteur, un sera un fond vert, 300. La hauteur, en fait, passons à quelque chose comme dix pixels. Voyons ce qui va se passer. OK, un pixel, trois ou deux. Oui, maintenant ça a l'air mieux. Cela signifie que la page de paiement réussie ressemblera à ceci. Si je le copie et que je le colle pour annuler, je le changerai en rouge. Voyons comment cela se passera sur un téléphone portable. Je vais changer cela en iPhone 14, et nous devrions ajouter leur texte au centre. Sinon, ça a l'air bien. Retournons là-bas. Nous allons placer leur texte au centre de la section d'emballage principale. Maintenant, copiez-le également sur une page de réussite. Maintenant, vérifions-le à nouveau. Nous pouvons faire l'inspection et nous pouvons voir maintenant que tout va bien. 11. Se connecter, s'inscrire: La prochaine chose que nous ferons est d'aller dans le dossier de l'application, puis de cliquer sur créer un nouveau dossier. Nous allons faire la parenthèse et la créer à partir de là. Cela signifie que cela ne sera pas visible en cours de route. Si nous ajoutons ce panneau et que nous nous inscrivons, l'itinéraire ne ressemblera pas à un panneau hors barre oblique, mais simplement à un panneau avec barre oblique Nous l'utiliserons parce que la structure des dossiers est meilleure, sorte que tout ce qui concerne la désactivation de l'utilisateur se trouvera dans ce dossier. Maintenant, déplaçons-le là. Ce ne sera pas facile car nous ne sommes pas en mesure de déplacer les fichiers muraux, ou du moins je ne suis pas capable de le faire . Déplaçons-le comme ça. Ensuite, je vais y mettre cette inscription, et maintenant nous allons mettre se connecter pour se connecter et s'inscrire pour s'inscrire. Maintenant, ça devrait aller. Nous y sommes pour connecter. Nous sommes là pour nous inscrire. Et la prochaine chose que nous allons faire est non seulement d'améliorer la structure, mais aussi de créer un style pour notre connexion et notre inscription, même si cela vient de Clark, allons-y maintenant. Ce que nous allons faire, c' est cliquer ici sur Se déconnecter, puis cliquer à nouveau sur se connecter. Et nous avons là deux pages. La première est lorsque nous cliquons sur le bouton de connexion. Mais lorsque l'utilisateur n'est pas enregistré, vous cliquez sur S'inscrire et cela changera la page pour nous Revenons à notre IDE, ouvrons la page d'inscription Assurons-nous qu'il soit également ouvert sur notre page SAS. Et là, nous pouvons commencer à styliser. Commençons par créer des parenthèses pour ce retour Nous utiliserons toujours cette inscription, mais nous créerons également un dif et nous mettrons cette balise d'inscription dans cette Maintenant, pour ce qui est de l'inscription, nous allons la conserver, mais nous y ajouterons d'autres attributs Le premier attribut que nous ajouterons s'appellera apparence. Dans cette apparence, nous allons créer des éléments, puis nous allons créer un style distinct pour tous les éléments contenus dans ce composant d'inscription. Je vais vous donner un exemple ici. Je vais y mettre le pied de page, et pour le pied de page, j' ajouterai le style caché Vous pouvez maintenant voir que le pied de page de notre composant d' inscription a disparu. Et nous aimerons ce style tous les éléments contenus dans le composant d'inscription Peut-être qu'avant de le faire, commençons par le DIV. Et dans cette section, nous allons faire le titre deux, et nous l'appellerons «   créer un compte ». Ci-dessous, nous nous occuperons de la technologie des paragraphes, et à l'intérieur, nous nous inscrirons pour commencer Ajoutons maintenant un peu de style. Donc, pour le div principal, nous ajouterons la marge par le haut, les éléments de mise en page Flex Books et Justify center, flex direction, espace de colonne Y 12. Et je pense aussi que c'est ça. Pour le trait ci-dessous qui encadre ce titre et ce paragraphe, nous allons placer le texte au centre Pour le titre, nous utiliserons l'arbre de texte Excel, boulon de police et le premier plan du texte Et pour la technologie des paragraphes, nous allons placer une marge à partir du haut, même si cela peut être géré par un espace Y deux, exemple, texte petit, par exemple, texte petit, texte masqué, premier plan sous forme de couleur, enregistrez-le Voyons maintenant à quoi cela ressemble sur la page. Peut-être que nous pouvons agrandir leur texte. Je pense que c'est mieux. Et maintenant, nous pouvons passer au style de ce composant d'inscription. Commençons par le style de la carte. Pour la carte, nous allons mettre la carte de fond. Ensuite, nous continuerons avec la frontière et la frontière. Nous allons ajouter un peu d'ombre pour le mode lumière et arrondir Excel avec un peu de literie. Oui Maintenant, l'élément suivant sera le titre de l'en-tête. Nous pouvons le cacher. Pour le sous-titre de l'en-tête, nous pouvons mettre ce texte en sourdine Laissez-moi vérifier à quoi cela ressemble. Maintenant, nous allons passer au bouton social, bouton Bloquer et à Google. Là, nous allons définir l'arrière-plan sur. Utilisons le blanc car il est vraiment à peine visible. Oui, je pense que nous utiliserons le blanc là-bas, même pour le mode sombre et le mode clair. De plus, nous allons l'utiliser, je pense que nous allons simplement le garder comme ça. Notre arrière-plan est blanc avec une opacité de 0,6. Oui, je pense que c'est bon. Et pour le mode lumière, il sera toujours beau. Peut-être si on fait le premier plan. Mais ça ne marchera pas bien en mode lumière. Je garderais le fond blanc. Maintenant, si nous continuons, nous allons créer le texte du diviseur, le texte du diviseur Nous y mettrons le texte en sourdine au premier plan. Maintenant, ligne de séparation. Celui-ci, nous pouvons le définir comme bordure de fond. Et sur la page maintenant, c'est à peine visible, mais c'est là pour faire une belle distinction entre Google App et e-mail. Passons maintenant à l'étiquette du champ de formulaire. Pour cela, nous allons définir le premier plan du texte. Maintenant, comment faire le lien pour nous connecter par nous-mêmes. Nous allons créer un lien. Nous allons cliquer ici sur Importer. De cette façon, nous l' y trouverons depuis la bibliothèque Next Link. Et à l'intérieur, nous allons mettre quelque chose comme, en fait, copions-le à partir de là. Mais d'abord, modifions le Hf. La connexion fonctionne donc. Nous allons maintenant l'avoir sur la page. Là, nous allons le copier. Nous allons le mettre là. Et nous allons le faire comme ça. Nous allons mettre toute cette phrase dans Paragraph Tech, et nous laisserons darlink pour la connexion Cela redirigera l'utilisateur vers la page de connexion. Pour ce qui est du style, nous allons copier à partir de cette phrase le tag de ce paragraphe, inscrire pour commencer, mettre là, l'enregistrer. Nous allons cacher ce scooter. Nous allons maintenant vérifier à quoi ressemble la page. Nous y ajouterons pour ce lien un soulignement. Maintenant, ce sera tout, si vous cliquez sur ce lien, nous arriverons à la page de connexion . Cela signifie que nous pouvons maintenant personnaliser la page de connexion et que nous sommes prêts à le faire. Allons-y et connectons-nous. Et ce qui nous aidera, c'est de simplement le copier et de le mettre là. Ensuite, nous verrons ce que nous pouvons réutiliser. Nous pouvons réutiliser cette importation de lien, et nous pouvons simplement coller cette connexion, supprimer ces lignes de code, mettre là, puis l'enregistrer. Maintenant, supprimez ce pied de page masqué. Accédez à la page, copiez-la. Vous n'avez pas de compte, inscrivez-vous. Nous allons maintenant le mettre dans le dernier paragraphe technique. Nous allons prendre ce panneau et le mettre là à la place de ce panneau. Ce qu'il est important de mentionner, c'est que nous ne pouvons pas avoir cette seule citation pour la technologie des paragraphes, sinon le déploiement échouera ultérieurement. Ajoutons-y ceci, et c'est là comme signe de cette citation unique. Maintenant, si nous allons vérifier la page et ajouter ce pied de page comme masqué, je pense que nous l'avons pour la connexion, et maintenant nous pouvons essayer de cliquer sur Inscription et cela ne fonctionnera pas car, bien sûr, lorsque nous copions du code, nous oublions généralement Faites donc attention lorsque vous faites du copier-coller, et cela devrait être inscrit dans ce href du lien. Sinon, bien entendu, cliquer dessus nous redirigerait pour nous connecter là où nous sommes actuellement. Maintenant, essayons ceci, inscrivez-vous, connectez-vous. Tout a l'air bien. Et en mode lumière, ça a l'air bien. Et maintenant, nous pouvons nous connecter 12. Vérification de l'abonnement: Et après nous être connectés, nous pouvons maintenant voir que nous sommes sur la page du tableau de bord où vous n'êtes pas abonné. Mais si vous cliquez sur S'abonner, puis sur Abonnement géré. Nous pouvons voir que nous avons un abonnement en cours, nous devrions donc voir le produit, bien sûr, et c'est quelque chose que nous allons coder maintenant. Nous n'avons aucune fonctionnalité permettant de présenter notre produit , car nous y accèderons dans le tableau de bord et à la page TS six . Nous devons vérifier si l'abonnement est actif, et s'il le sera, nous montrerons le produit. Dans le cas contraire, nous vous le renverrons simplement . Vous n'êtes pas inscrit. Nous allons importer Prisma depuis notre dossier Lip, DB, puis nous importerons la redirection depuis la prochaine navigation et ce sera tout Maintenant, au-dessus du retour, nous allons créer une nouvelle constante avec l'ID utilisateur, et là nous utiliserons le off. Il sera importé lorsque nous cliquerons dessus. Nous allons maintenant vérifier si le nom d'utilisateur a été trouvé, et dans le cas contraire, nous allons rediriger vers la page de connexion. Nous interrogerons ensuite la base de données pour connaître l'abonnement de l' utilisateur. Nous ferons un abonnement constant, attend l'abonnement à Prisma point Find Unique À l'intérieur, nous allons faire où l'ID utilisateur est l'ID utilisateur, et nous allons sélectionner statut parce que nous sommes curieux de savoir si le statut est actif. Si nous voulons y aller en retour, faisons les fragments vides. La vérification donnera l'impression que si statut des points d'abonnement n'est pas actif, nous vous renverrons ce texte. Dans tous les cas, il est actif, il renverra le contenu de ce tableau de bord principal où nous pouvons pour l'instant mettre le texte similaire et juste là, abonnés à l'application, et nous pouvons supprimer le bouton. Pour l'instant, nous allons juste l' avoir comme ça. Bien entendu, nous y mettrons le contenu principal de notre produit. Allons consulter la page, et nous pouvons voir que nous sommes abonnés à l'application. Maintenant, déconnectons-nous, et nous allons nous connecter avec un autre compte, et nous pouvons voir que nous avons les informations indiquant que nous ne sommes pas abonnés. Maintenant, le prochain test que nous pouvons faire est entrer dans Super Base et de le rendre actif. KK, par exemple, n'a pas vraiment d'importance. Il ne s'agit que d'un test et nous reviendrons sur cette page. Nous verrons que nous ne sommes plus abonnés. Revenons maintenant à Superbase, redéfinissez-le en mode actif Et nous sommes de nouveau abonnés. Bien entendu, cela a été généré par Stripe. Maintenant, nous venons de tester qu'il lit vraiment la valeur du statut et qu'il fonctionne. Ce que nous allons faire maintenant, c'est revenir à notre IDE, où nous pouvons supprimer ces polices, et nous pouvons préparer quelques dossiers supplémentaires. Tout d'abord, ce sera dans le tableau de bord, et nous y créerons un nouveau dossier avec des composants de soulignement Cela signifie que nous créons un répertoire privé pour le tableau de bord, et dans ces composants, nous n'insérerons que les composants liés à notre page de tableau de bord Ensuite, dans les composants du dossier racine, nous allons créer un nouveau dossier appelé Landing page. N'oubliez pas non plus de terminer la page de tableau de bord, car Next JS utilise un étui Kebab et non un étui Cam, par exemple, comme une page de prêt Et nous n'y mettrons pas le soulignement. Comme nous allons personnaliser la page de prêt, nous allons placer tous les composants dans ce dossier de page de prêt. Nous y trouverons, par exemple, des témoignages, des démonstrations de produits, etc. Dans ce but, nous utiliserons ce dossier pour obtenir une belle structuration des dossiers de notre projet et chaque fois que nous y reviendrons, nous saurons où nous pouvons trouver chacun de nos composants En voyant la page lorsque nous sommes déconnectés, nous pouvons toujours y voir le profil du produit et les prix. Même si nous ne devrions voir que les prix, car le produit et profil sont des fonctionnalités réservées aux utilisateurs connectés. Ce que nous allons faire, c'est que dans notre IDE, nous allons accéder à la barre de navigation car il y a une fonctionnalité, et là, nous avons codé en dur et signé Avec Clark, c'est vraiment facile à gérer. Là, nous allons simplement le faire et le mettre dans bretelles bouclées comme celui-ci et utiliser les utilisateurs Il l'y importera depuis Clark use user, puis nous le renommerons en assigned in Nous allons le réutiliser là-bas. Nous allons le sauvegarder, et maintenant cela devrait être géré pour nous. Et maintenant, nous avons implémenté la fonctionnalité. Ainsi, chaque fois qu'un utilisateur est verrouillé ou verrouillé, nous nous baserons sur l'affichage certains éléments de menu dans notre barre de navigation 13. Produit: Dans le dossier du tableau de bord, je vais accéder aux composants, et j'y créerai le composant principal que j' appellerai thumbnail previewer Là, je vais définir et indiquer qu'il s'agit d'un composant du site client avec use client. Je vais également importer les hooks de réaction et autres composants nécessaires. Je vais d'abord importer leur état d'utilisation et leur effet d'utilisation. Et je vais également importer l'entrée du composant d'entrée personnalisé que nous utilisons depuis Chet CN. Ensuite, je vais continuer à importer le bouton, puis avec l'ordinateur portable, tablette et le smartphone pour les icônes, et également à importer l'équipe utilisateur comme outil de gestion d'équipe. En ce qui concerne les images que nous montrerons sur le YouTube Mc, nous utiliserons l'URL. Je vais définir la constante d'une image fictive. Cela sera là sous forme d'image de remplacement. Au cas où il n'y aurait pas d'image réelle pour la miniature, nous devrions idéalement y mettre l'URL de cette image de remplacement J'utiliserai un espace réservé au format SVG à points. Avec une hauteur 720 et une largeur de 1 280. Vous devez maintenant définir un tableau d' objets vidéo aléatoires pour l'affichage initial que nous allons montrer sur notre produit. Je vais créer leur constante de vidéos aléatoires. Et là, pour chaque vidéo, je vais définir une chaîne de titre que nous avons en H et la miniature elle-même Dans le moignon, je vais mettre l'URL du moignon. Comment je m'y prends. Je le fais manuellement car je n'utilise aucune fonctionnalité permettant à l' administrateur de déployer des vignettes Cela peut être fabriqué. Je peux aussi être une bonne idée, mais pour notre usage, il suffit de le faire manuellement. Parce que nous pouvons le prédéfinir et le laisser là pour notre produit, peut-être mis à jour tous les mois. J'utilise cette page, uploadf.com. Il ne vous reste plus qu' à connecter votre Git. Vous allez cliquer sur Télécharger. Vous y mettrez une partie de l'image. Par exemple, j'y mets les images miniatures, je les télécharge Ensuite, vous cliquerez sur ces trois points après le téléchargement et vous cliquerez sur Copier l'URL du fichier. Après avoir cliqué sur l'URL du fichier Copier, vous l'aurez dans votre presse-papiers et il vous suffira coller dans l'URL de la miniature Ensuite, vous y mettrez simplement un peu d'âge, quelques points de vue. Chaîne et titre. Ainsi, je vais maintenant y saisir certaines des vidéos que je vais utiliser pour recréer l'interface utilisateur de YouTube afin de tester les vignettes Vous l'aurez dans le projet sur mon Git qui sera lié dans la description de cette vidéo. Donc, si vous ne voulez pas maintenant mettre le travail dans toutes les URL, les télécharger et les coller dans la miniature, vous pouvez simplement Mais attention. Il est possible que ces URL ne soient plus valides, car elles les supprimeront peut-être de mon téléchargement Si vous voulez être sûr que ces URL miniatures fonctionneront, suffit d'utiliser les vôtres ou de cliquer sur les miniatures pour accéder aux ressources quelque part et d' y placer les et d' y placer Nous allons maintenant définir l'interface pour les accessoires du composant. Faisons leur interface. Réviseur de vignettes. Où nous allons enregistrer le nom de la chaîne dans une chaîne. nom de chaîne enregistré est quelque chose que nous n'avons pas encore, mais nous le définirons dans le profil car pour que notre utilisateur peu, car pour que notre utilisateur n'écrive pas à nouveau son nom de chaîne, nous l'enregistrerons pour lui dans notre base de données, et chaque fois qu'il voudra tester la nouvelle miniature, nous l'afficherons Définissons maintenant le composant principal du réviseur. En guise d'accessoire, nous allons enregistrer le nom de la chaîne. Ça devrait être une chaîne. Nous allons commencer à l'intérieur du composant par définir les variables d'état à l' aide de U State Hook. Tout d'abord, il s'agira d'un titre avec titre défini et la valeur par défaut sera vide. Nous allons continuer avec l'URL Tumbil avec l'URL miniature définie, et la valeur par défaut Ensuite, avec le nom de la chaîne, celui-ci sera certainement à nouveau vide, puis avec les vidéos. Il y aura un état pour la liste des vidéos, et nous y entrerons des vidéos aléatoires, c' est-à-dire le tableau que nous avons là. Nous allons continuer avec la mise en page. Pour la mise en page, la valeur par défaut sera desktop. Et laisse-moi t'expliquer. Nous utiliserons leurs multiples mises en page. L'utilisateur pourra choisir si vous souhaitez afficher cette interface utilisateur pour les vignettes sur un ordinateur de bureau, une tablette ou un mobile, car lorsqu'il testera les vignettes, nous voulons qu'il puisse les tester pour toutes les Continuons avec l' effet d'utilisation pour mettre à jour le titre de la vidéo, le nom de la chaîne ou l'URL de la miniature Nous allons définir l'effet d'usage. Et à l'intérieur, nous allons mettre en scène des vidéos avec le titre 2, le nom de la chaîne utilisé à zéro, à l'âge de deux ans, maintenant. D'ailleurs, ce sera le réglage de la vidéo utilisateur. miniature à une URL ou une image d' espace réservé au cas où il ne chargerait aucune image miniature, puis nous la définirons Le tableau de dépendances apparaît chaque fois que le titre change, que nom de la chaîne change ou que l'URL de la miniature Nous allons maintenant déclarer une fonction permettant de randomiser l'ordre des vidéos, car nous aurons leur bouton qui fois cliqué, deviendra un désordre aléatoire Ainsi, l'utilisateur pourra alors s'il peut facilement repérer sa miniature ou non Créons un ordre aléatoire. Et définissez des vidéos dans lesquelles vous faites des vidéos sur le souffle. Point SO et nous appellerons le point mathématique aléatoire -0,5. Et cela permet de rendre ordre aléatoire, comme je l'ai mentionné, et de créer une copie du tableau vidéo précédent à l' aide de l'opérateur de propagation Ensuite, il utilisera une méthode de tri avec un nombre de comparaison aléatoire qui renverra moins cinq à 0,5. Ensuite, remettez le nouveau tableau aléatoire état à l'aide de vidéos définies La prochaine fonction que nous devrons déclarer est une fonction pour obtenir la grille appropriée. Sur la base de la mise en page actuelle, nous allons créer une fonction appelée Get grid class. Là, nous allons activer la mise en page et le fonctionnement du commutateur. Dans le cas où il s'agit d'un ordinateur de bureau, nous retournerons une grille avec un petit écran, grille deux et une grande grille cinq. Ensuite, dans le cas d'une tablette, nous répondrons également aux appels sur le réseau un avec un petit écran et au-dessus du charbon, deux Nous fixerons le poids maximum à mille cents pixels, et nous le centrerons avec Mix Auto. Ensuite, dans le cas d'un mobile, nous vous renverrons une grille une épaisseur maximale de 340 pixels et le mixage automatique sera le dernier paramètre par défaut Cela signifie que par défaut, ce commutateur renverra grandes colonnes une, le petit écran, les grandes colonnes deux, et le grand écran, les grandes colonnes quatre. Peu importe ce qui sera transmis à cette classe get grid, nous prendrons en compte la tablette de bureau, le mobile ou le transfert, bien sûr, au cas où ce serait une autre valeur, puis elle reviendra et appliquera les classes de talents que nous y avons définies Nous ferons leur retour, et à l'intérieur, nous commencerons par le Div. Pour ce div, nous allons ajouter des noms de classes. Nous allons faire leur largeur et leur hauteur relatives à fond, puis G deux en arrière-plan. Et du texte au premier plan. À l'intérieur, nous allons commencer par la section de saisie et de prévisualisation. Nous allons faire la plongée. Et pour ce plongeon, nous allons mettre un poids maximum à 1 200 pixels en mélangeant le tout pour le centrer. À l'intérieur, commençons par un autre div où nous utiliserons la disposition en grille. Sur un écran moyen, nous allons également l' étendre aux appels réseau, et nous allons combler un certain écart. À l'intérieur, nous allons diviser qui contiendra les entrées et en dessous de cette largeur, nous créerons également un div, contiendra l'aperçu de Tominal Commençons par le div supérieur. Là, nous allons commencer par le titre trois entrées. Ensuite, les deux entrées seront maintenues dans le div pour les entrées, nous utiliserons l'espace Y ou à l'intérieur, nous ferons une entrée. Pour cette entrée, les attributs que nous ajouterons seront un espace réservé au titre, valeur au titre, et en cas de modification, le titre sera défini sur la valeur cible Ensuite, nous allons créer une autre entrée. Et dans cette entrée, il y aura un fichier de type. Ensuite, il n'acceptera que les images et aucune modification, nous créerons un fichier dans lequel nous définirons un fichier cible, le premier du tableau. Et au cas où ce fichier serait là, nous créerons une constante de reader, nouveau lecteur de fichiers, et nous appellerons ce lecteur au chargement. Lorsque nous définissons tous l'URL miniature de la cible du fichier, nous le chargeons simplement Et nous allons lire comme URL de données. Maintenant, nous allons l'enregistrer et aussi pour le voir et le tester, passons à la page suivante sur la page. Nous vérifions simplement sa page de tableau de bord. Nous pouvons ajouter ci-dessous la miniature de chaque utilisateur abonné à l'application. Importez-le, gardez-le là. Maintenant, nous devons également saisir le nom du canal enregistré, où je peux mettre le test pour le moment, l'enregistrer. Il sera maintenant affiché sur notre page. Et revenons un peu à cette entrée que je devrais peut-être expliquer un peu mieux. La pile de types créera l'entrée pour nous où nous pourrons sélectionner le fichier depuis notre PC. L'image d'exception figurera sur images disponibles pour nous. Cette modification sera appliquée chaque fois que nous choisirons un nouveau fichier. Et ce que nous allons faire là-bas, c'est obtenir le premier fichier sélectionné. Ensuite, si c'est vrai, donc si le fichier existe, nous créerons un outil spécial capable de lire le lecteur de fichiers, et une fois la lecture du fichier terminée, nous enregistrerons les données de l'image sous forme de chaîne URL. Ensuite, nous allons commencer à lire le fichier sous forme d'URL. Nous pouvons maintenant accéder à notre page. Vous pouvez voir que nous pouvons y mettre un titre, et là, si je clique dessus, je peux choisir une image Maintenant que l'image n'est pas encore prévisualisée, je vais la laisser là et nous pouvons passer au réglage de l'outil de prévisualisation d'images après cette saisie et aussi après ce div, laissez-moi vous montrer où cela commence Nous allons créer une entrée. Les attributs que nous y ajouterons seront un espace réservé, qui sera le nom du canal enregistré, c'est-à-dire la sonde que nous envoyons à ce composant ou simplement le nom du canal La valeur sera alors nom du canal ou un nom de canal enregistré. Et en cas de changement, nous définirons le nom du canal sur la valeur cible. Nous allons maintenant passer à ce deuxième div, et nous allons faire l'aperçu de l' image. Nous allons commencer par le titre trois, et nous allons mettre l'aperçu en miniature Ajoutons les classes de somme. Faisons textarge, police moyenne, six en tête avec une marge inférieure de quatre, et c'est possible pour Nous allons continuer avec le diff. Pour ce div, nous allons mettre les classes de largeur d'aspect 16 et de hauteur d'aspect neuf. Cela signifie que nous voulons conserver le rapport hauteur/largeur de 16 à 9. Ensuite, nous utiliserons un grand arrondi pour augmenter le rayon de la bordure. Nous allons masquer le trop-plein, afin que rien ne sorte de cette faille et nous allons également définir w à, disons, Ensuite, à l'intérieur de ce plongeon, nous allons créer une image. Les attributs que nous avons définis seront la source de l' URL miniature ou de l'image de remplacement au cas où elle serait vide Notez ensuite l'aperçu des vignettes, puis les noms des classes avec l'objet pour couvrir w et hauteur complète Maintenant, vous allez l'enregistrer , vous pouvez voir qu' il y a l'image que j'ai mise dans le fichier. Et c'est là. Nous pouvons maintenant le styliser davantage. Je pense que je vais commencer par prendre le nom de cette classe, espacé par quatre, et le mettre là. De plus, entre ces deux entrées, l'entrée un et l'entrée deux, nous n'avons pas d'espace car celui-ci doit être placé à côté des entrées. Et peut-être que nous pouvons même supprimer ce mur Div. Je parle de celui-ci. Cela signifie que nous pouvons formater comme ça, le mettre là. Celui-ci est comme ça, sauvegardez-le, et maintenant il sera plus beau. Cela correspond parfaitement aux entrées et à l'aperçu des vignettes là où se trouvent les Il y a l'aperçu de la miniature que nous voulons y afficher dans notre produit que nous allons définir ci-dessous Et pour l'instant, il suffira de mettre la bordure en bas et la bordure blanche avec des points d'opacité Peut-être pouvons-nous aussi ajouter un peu de rembourrage en bas, 12. Maintenant, si vous voulez vérifier où se termine ce di et ci-dessous, nous mettrons du contenu et l'enregistrerons Nous pouvons voir comment il est divisé. Nous pouvons la nommer ou la commander en tant que section de saisie et de prévisualisation Nous pouvons alors prendre cette commande, et ci-dessous, nous pouvons commencer par la section produit. Nous allons y créer un div, et d'abord, nous allons utiliser un bouton de commande aléatoire avec un curseur de mise en page, où nous allons sélectionner la mise en page sur laquelle nous voulons voir notre miniature. Nous aurons également un bouton aléatoire, où nous pourrons mélanger toutes les cartes vidéo qui se trouveront à côté de Sélection aléatoire de l'ordre et de la mise en page. Pour cette sélection aléatoire d'ordre et de mise en page, nous allons définir les classes de marge sur les six derniers, disposition Flexbox avec les éléments sur l'espace central X, donc l'espacement horizontal, nous allons le faire passer à quatre entre les arrondissements Ensuite, nous fixerons un poids maximum à 1 200 pixels et un ordre de mixage pour le centrer. Nous aurons d'abord le bouton. Et pour ce bouton sur un clic, nous appellerons ordre aléatoire, et nous l'appellerons ordre aléatoire, ce qui est assez évident Nous allons maintenant le sauvegarder. Voyons si le bouton a été modifié et je peux le voir sur notre interface utilisateur. Ensuite, nous allons continuer avec un div. Et pour ce div, nous allons à nouveau ajouter des classes de mise en page flexbox, des éléments à centrer, espace X deux, arrondir pour que nous puissions faire le plein car ce sera un slider Ajoutons-y un peu de rembourrage. Nous pouvons faire de l'ombre, et je pense que nous pouvons l'enregistrer tel quel, nous ajouterons un bouton, et ce bouton aura l'icône de l'ordinateur portable. Pour cette icône d'ordinateur portable, nous pouvons simplement définir quelque chose comme la hauteur 24 avec 24. Ajoutons-y ensuite quelques classes. Pour le bouton, nous allons abord définir quelques attributs différents. Et ce sera une variante. Nous allons nous mettre en relation avec l'opérateur Turner. Vérifions si la mise en page est définie sur le bureau. Si oui, nous utiliserons le style par défaut, dans le cas contraire, nous utiliserons la variante Ghost. Ensuite, nous allons continuer à dimensionner l'endroit où nous allons définir l'icône. Ensuite, nous allons définir la fonction OnClick. Cela définira la mise en page. Ainsi, au cas où l'utilisateur cliquerait sur ce bouton pour le bureau, il définira la mise en page sur le bureau. Ensuite, nous allons étiqueter selon la mise en page du bureau. Ci-dessous, nous pouvons continuer avec un autre bouton. Là, nous utiliserons à nouveau l'icône de la tablette avec certaines classes, 24 avec 24, et nous la fermerons. Pour le bouton, nous allons à nouveau ajouter quelques attributs. Je vais refaire la variante qui vérifiera auprès de l'opérateur du tourneur la valeur de la mise en page. Et s'il s'agit d'une tablette la vraie position sera celle par défaut et la fausse position sera un fantôme. Donc, si ce n'est pas le cas, la variante de ce bouton sera définie comme fantôme. La taille de ce bouton sera une icône, puis au clic, la variable d'état de sortie sera définie sur la variable d'état de sortie tablette et l'étiquette sera la disposition de la tablette. Nous allons maintenant passer au dernier bouton, et encore une fois, il y aura une icône de smartphone avec les classes 24 et 24, et les attributs seront à nouveau une variante, où nous vérifierons la mise en page au cas où elle serait mobile, nous exécuterons la valeur par défaut et dans le cas contraire, nous définirons un style de fantôme. Pour la taille, nous allons à nouveau définir l'icône. Pour le clic, nous appellerons la mise en page définie, où nous définirons la variable d'état sur mobile. Ensuite, l'étiquette sera une mise en page mobile. Maintenant, si nous allons sur notre page, je peux essayer de définir une mise en page différente. Et cela fonctionne, vous pouvez également voir comment il change les variantes des boutons. La variante sélectionnée est donc une variante par défaut, celle qui n'est pas sélectionnée est la variante fantôme. Bien entendu, le style de l'interface utilisateur de notre Mac des critiques YouTube sera également modifié. Passons au bas de cette section. Nous y prendrons le commandement. Nous le placerons au-dessus du div que nous allons créer et nous y mettrons des cartes vidéo pour la révision des vignettes En dessous de cette commande, nous pouvons créer un div. Et dans cette division, nous allons faire nom de la classe où nous allons mettre un guillemet et nous allons mettre le nom de la classe de notes, puis à côté de ce nom de classe, nous allons mettre le signe $1 et les valeurs de Get grade class. Sur la base de la mise en page que nous allons sélectionner, il y aura un ordinateur de bureau avec ces deux ou cinq colonnes, tablette avec un poids maximum et un mobile avec un poids maximum également différent. Maintenant, nous allons également voir un écart de six et également en fonction de la mise en page. Si la valeur de mise en page est mobile, nous définirons la largeur sur complète. Au cas où cela serait faux, nous ne définirons rien. Nous allons maintenant cartographier notre ensemble de vidéos. Widow sera le nom de l'élément actuel du tableau et indiquera sa position. Nous allons maintenant l'ouvrir et y mettre un div. Dans ce div, nous allons ajouter une clé. Cette clé sera un index. Alors nous pouvons déjà l'enregistrer. Nous continuerons à ajouter leurs noms de classe, et nous utiliserons leurs guillemets, car il y aura une vérification des variables ou un opérateur de rotation sur la mise en page, car nous vérifierons s'il s'agit d'une mise en page mobile ou non. Faisons des bretelles bouclées et mettons leurs guillemets à l'intérieur, et nous allons commencer par les classes de queue normales Permettez-moi de commencer par le premier et celui-ci sera masqué pour ne pas extraire de contenu de cette div Puis un peu d'ombre. Puis arrondissez-le en grand. De plus, nous allons maintenant y mettre la vérification de la mise en page. Nous allons donc y faire appel à l'opérateur, et dans le cas où il s'agit d'un appareil mobile, nous reviendrons également pour ce poids maximum de 340 pixels et mixerons pour le centrer. Sinon, s'il n'est pas mobile, il suffit de ne rien renvoyer. Maintenant, nous pouvons entrer dans ce div, créer un autre. Pour ce plongeon, nous allons ajouter une classe relative et un peu de rembourrage en bas Je vais y mettre quelque chose comme disons que nous en ferons 60. Ensuite, à l'intérieur, nous pouvons commencer par le tag image. Et nous ajouterons les attributs de la source, qui sera une miniature vidéo Si ce n'est pas le cas, nous utiliserons l'image de remplacement Nous allons continuer avec OT, qui sera une miniature vidéo Ensuite, nous continuerons avec des lunettes. Nous y mettrons la position absolue à l'intérieur de zéro, largeur et la hauteur au maximum et l'objet à couvrir pour montrer le meilleur de l'image. Ensuite, nous avons la fermeture du div et en dessous de ce div, nous allons créer un autre div. Maintenant, vous pouvez déjà voir que nous affichons les vignettes des vidéos sur notre page Donc, tout ce que nous y avons chargé est affiché. Mais bien sûr, elle n'est toujours pas dans la forme nous souhaiterions, car actuellement, l'image prend toute la largeur de la carte vidéo murale. Ce n'est pas ainsi que cela fonctionne. Au lieu, disons, de 25 % de ce que nous pouvons voir sur une seule carte vidéo, c' est-à-dire un carré, nous devons également y afficher le titre, les vues et la date de téléchargement. Juste la carte vidéo standard qui se trouve sur YouTube, par exemple. Revenons au jour où nous venons de créer parce que nous allons le faire là-bas. Pour cette nouvelle division, nous ajouterons une literie et nous ajouterons également une autre division. Dans celui-ci, nous allons mettre les noms des classes avec les éléments de mise en page flexbox start et spacex three Nous allons créer une technologie de premier paragraphe qui contiendra le titre de la veuve, puis une technologie de paragraphe suivant qui conservera la chaîne au cas où elle serait vide Je vais enregistrer le nom de la chaîne car ce sera le nom de la chaîne de notre utilisateur. Il le fera donc préremplir. Et la balise de paragraphe suivante qui contiendra les vues de la vidéo, et maintenant l'ère de la vidéo et nous devons aussi faire un point entre les vues et la vidéo, lui et maintenant ça a l' air un peu mieux, mais bien sûr, il reste encore un peu de style. Alors faisons-le maintenant. Et nous avons également oublié l'avatar. Nous devons donc le faire là-bas. Ajoutons-y un div. Et à l'intérieur de ce disque, nous mettrons une image, et nous ajouterons à nouveau certains attributs, qui seront pour l'instant des miniatures vidéo Nous utiliserons la miniature de la vidéo comme avatar, nous n'avons donc pas besoin de charger à nouveau les avatars séparés pour Il y aurait beaucoup de travail en plus de cela car il s' agit simplement de télécharger les images et de les y placer Je pense que c'est facile à faire alors, mais c'est juste beaucoup de travail répétitif, mais tout le monde le fera probablement lui-même. Il s'agit simplement de les charger ici au lieu de la miniature, de l'URL, ou URL de l'avatar, mais je ne veux pas les recharger à nouveau sur le téléchargement, comme huit images Je vais donc simplement le laisser là et je vais réutiliser la miniature de la vidéo Je crois que lors du test de la miniature, cela n'aura aucun effet Donc, pour Avatar, nous utiliserons vidéo Tumnail au cas où elle serait vide. Nous utiliserons une image de substitution, ou ce sera le canal Avatar, et les classes auront une largeur de neuf, hauteur de neuf et arrondirons le tout Maintenant, ce que nous allons également ajouter à cet avatar sera flex shrink, zéro, et ce que nous y ajouterons pour cette mise en page flexbox sera une colonne de direction flexible En passant à ces paragraphes, nous allons créer un div pour eux. Nous allons passer à ce dein à zéro et à flex un. Peut-être que nous pouvons maintenant supprimer la colonne de direction du flex. Nous allons maintenant voir la page. Cela s'affiche déjà bien sur la tablette. Nous devons corriger ce problème pour le bureau. Continuons avec le style. Peut-être que je peux aussi l'agrandir un peu pour que nous puissions mieux le voir. Comme ça, et nous pouvons continuer avec le style. Pour le paragraphe, j'y mettrai les premiers cours. Je vais commencer par le texte petit, la police, le moyen, le tronqué, titre de police, et j'utiliserai une couleur de texte de ce code, que j'avais dans mon fichier de conception Ensuite, pour le paragraphe suivant, j'utiliserai à nouveau Tex small. Et maintenant, la couleur pour l'avoir exactement comme sur l'interface utilisateur des vignettes que nous voulons recréer, je vais y mettre le code d'une couleur vraiment très gris clair Maintenant, je peux simplement copier-coller ceci également dans le paragraphe suivant. Voyons à quoi ça ressemble maintenant. Maintenant, je crois que nous sommes très proches. Je vais Le problème, cependant, c'est le poids des cartes vidéo pour ce test. Permettez-moi d'ajouter une miniature. Je vais y mettre, par exemple, celui-ci La première chose que nous allons faire est de retirer un poids maximum à partir de là pour qu'il soit exactement comme ça. Et cela signifie que je pense qu'au final, nous pouvons également supprimer cette division. Prenons la balise de fermeture du div ici et supprimons-la là afin ne pas avoir à conserver le div supplémentaire vide. Maintenant, si vous allez dans la page, cela ressemble à plus d'interface utilisateur avec les cartes vidéo, mais je suppose que nous devrons tout de même vérifier rapidement la largeur et la hauteur appropriées et les définir comme il se doit. Nous aimerions qu' il y ait un ratio de neuf pour cinq. Pour y parvenir, nous ajouterons un rembourrage au bas Cela signifie que nous allons passer au code. Passons à la miniature, qui se trouve là Maintenant, nous utilisons des caresses jusqu'aux 60 derniers, mais je vais les caresser jusqu'à 55 % Je vais l'enregistrer, et maintenant nous avons le format vidéo que nous allons utiliser pour nos ongles. Maintenant, on dirait que nous sommes enfin sur une page et nous écoutons avec les tumnails Maintenant, comme nous avons déjà renseigné les données avec le tumnail, testons la fonctionnalité elle-même. Je vais donc randomiser la commande, qui fonctionne correctement, donc c'est bon Maintenant, je vais écrire la version pour tablette, la rendre aléatoire également, pour que cela fonctionne J'écrirai la version mobile. Et sur la version mobile, nous pouvons voir que nous avons un plus petit d. Nous devons donc corriger cette mise en page, mobile, largeur maximale et Modo, et la largeur au maximum Sauvegardez-le, et tout ira bien. 14. Page d'atterrissage - Conteneur d'animation: Récipient. Il s'agira d'un composant dans lequel nous mettrons motion div et animation set, puis nous l' appellerons et nous y encapsulerons notre contenu pour que notre page de destination soit également animée. Nous ne voulons certainement pas réécrire toute l'analyse des mouvements dans tous les composants que nous utiliserons, car il y aura de nombreuses lignes de code supplémentaires Nous pouvons simplement le faire là, le mettre dans un composant global, puis le réutiliser. Commençons par écrire ce conteneur d'animation, afin de pouvoir ensuite le réutiliser dans notre section héros. Utilisez le client pour qu'il soit rendu sur le site du client. Ensuite, je vais importer le mouvement à partir d'un cadre ou d'un mouvement. Nous n'avons pas encore cette bibliothèque, alors ouvrons le terminal. Lancez NPM I framer motion, installons-le, et maintenant tout ira bien Nous allons définir l'interface pour les accessoires du conteneur d'animation Nous mettrons les enfants seront note de réaction par point de réaction. Également avec un petit N, puis nous ferons delay, ce sera un chiffre, inversé, ce sera un bulling, puis le nom de la classe sera une chaîne, animer, qui sera NA, puis initialiser également NA exit, et mode, il y aura une Ensuite, nous avons besoin d'une transition et d'un clic. Donc, transition et fonction onclick. Nous allons le définir comme blanc. Nous pouvons maintenant continuer avec constante de notation pour le conteneur d'animation, et nous allons commencer à définir les accessoires Il y aura d'abord les enfants, puis le nom de la classe. J'anime l'envers, transition de sortie initiale, et c'est tout Également en cliquant. Ensuite, ce sont des accessoires de conteneur d'animation. Et là, nous allons renvoyer le motion div. Et les attributs du mouvement div seront un nom de classe avec le nom classe initial avec initiale et si le champ est vide, nous mettrons l'opacité à zéro et le blanc à l'opérateur des rivières. Si c'est l'inverse, nous mettrons -20 Au cas où c'est faux, nous n'en mettrons que 20. Ensuite, animez, encore une fois, nous allons définir l'animation. Si c'est zéro ou s'il n' existe pas du tout, je veux dire, nous réglerons l'opacité à un et Y à zéro Cela signifie que lorsque la valeur n'est pas là, nous l'utilisons ou nous exécuterons cette valeur. Cette animation aura donc cette valeur, mais si nous avons une valeur pour animate ou si les initiales se trouvent dans les accessoires, elle utilisera Continuons vers la sortie. Nous allons définir cette sortie, puis cette fenêtre d'affichage, où nous allons en définir une rapidement, car nous voulons que l'animation réapparaisse lorsque nous entrerons et dans la fenêtre d'affichage, puis nous définirons la transition . Nous vérifierons la valeur au cas où elle ne s'y trouverait définir cette sortie, puis cette fenêtre d'affichage, où nous allons en définir une rapidement, car nous voulons que l'animation réapparaisse lorsque nous entrerons et dans la fenêtre d'affichage, puis nous définirons la transition . Nous vérifierons la valeur au cas où elle ne s'y Nous allons définir la durée. Donc, quelques valeurs de base pour notre animation de transition, je vais définir la durée sur 0,2, puis delay to delay c'est, je vais régler sur is in out pour un type d' accélération fluide, je vais régler sur spring. Cela signifie qu'il utilise une animation printanière basée sur la physique . Nous réglerons également la rigidité à 260 et l'amortissement à 220. De plus, en cliquant sur ce div, nous allons définir l' accessoire onclick puis à l'intérieur de ce div, nous allons afficher les enfants, et ce sera tout Nous allons ensuite simplement exporter le conteneur d'animation par défaut . Et c'est tout. Nous avons notre composant d'animation que nous utiliserons pour encapsuler notre contenu afin de l'animer. Passons à la composante héros, et là nous pouvons enfin commencer à coder. Je vais commencer par les importations, et je vais importer le lien à partir du lien suivant. Ensuite, je vais importer le conteneur d'animation, et ce sera pour le moment. Nous pouvons passer à la création de la fonction d'exportation hero et nous y déclarerons tout dans ce retour. Faisons-le. Et là, nous allons commencer par la classe relative, puis la disposition de la boîte flexible, direction de flexion, les éléments de colonne à centrer, et nous allons faire un peu d'espacement J'utiliserai l'espace Y 20, et sur un écran moyen, nous utiliserons l'espace Y 40 pour avoir un espacement uniforme entre les éléments de cette page Dans ce div, nous allons commencer par le conteneur d'animation. Et la seule chose que je peux dire, ce sera la disposition de la boîte flexible, direction de flexion, les éléments de colonne au centre, centre de justification et la largeur au maximum Ensuite, à l'intérieur, je vais créer un div. Pour ce div, je vais ajouter une marge par le haut sur un écran moyen, je vais l'augmenter un peu et l'ajouter à quatre. Nous pouvons enfin commencer à ajouter le contenu lui-même. Encore une fois, un conteneur d'animation pour que tout soit animé et qu'on y mette la première propriété, ce sera le délai que nous fixerons là 4.2. Et à l'intérieur, nous allons mettre le titre 1. Ce sera un réviseur de vignettes. Maintenant, nous l'aurons sur notre page très bientôt. Les classes pour cela seront le texte trois Excel, texte sur petit écran pour Excel, texte sur écran moyen, six Excel et le fond du bateau et de la marge inférieure. Maintenant, pour avoir tous les composants, nous allons les créer sur notre page. Bien entendu, nous devons l' ajouter à la page. Donc, une application, et cette page, nous allons commencer par les composants. Je vais donc ajouter leur section héros. Et comme ça, je vais également y ajouter tous les autres composants. Vous pouvez voir que le titre d'aperçu du terminal est désormais affiché sur la page de destination Derrière, nous avons la disposition en grille. Cela commence à bien paraître et nous n'avons que deux mots. J'espère donc que cela se passera bien. Maintenant, nous allons continuer. Ce que nous allons faire ensuite, c'est qu'en dessous ce conteneur d'animation, nous allons le refaire Nous appellerons à nouveau notre composant Animation container. Nous y ajouterons un délai plus long. Faisons 0.3. Et à l'intérieur, nous nous occuperons de la technologie des paragraphes. Dans ce paragraphe technique, nous rédigerons une révision vos vignettes dans un environnement réaliste Nous allons maintenant faire l' espacement, la technologie Spen et trois étapes simples, car nous devons faire une belle promotion pour notre produit afin que les gens l'achètent réellement Nous allons commencer le coiffage. Je vais mettre le texte Large text seven Excel. Du texte vers Excel sur petit écran, du texte Excel, moyen, du texte, du texte, vers Excel, de la police vers le boulon, marge vers le bas, de la largeur maximale dans Excel et un mixage automatique. Peut-être que nous n'avons pas besoin d'un verrou de police, et peut-être que nous avons aussi un centre de texte. Mettons une technologie Spen sur la ligne suivante car nous allons ajouter le texte dégradé Et qu'est-ce que ce texte dégradé ? Il s'agit en fait d'un texte dégradé personnalisé que nous allons maintenant créer dans le CSS à points globaux Passons donc à ce fichier Globals point CSS. Il y a un endroit où on peut le faire en bas. Nous allons passer aux classes CSS pour le texte dégradé, mais également pour le bouton. Ce sera facile. Nous allons simplement faire le texte du dégradé et le placer pour appliquer le dégradé d'arrière-plan à droite et le numéro de couleur. Encore une fois, numéro de couleur. Deux, encore une fois, un numéro de couleur différent. Maintenant, je crois que nous l'avons, nous pouvons donc simplement le copier et le coller ci-dessous, appeler ce bouton de dégradé. Et en fait, ce que nous allons faire, c'est que pour le texte, nous devrions également ajouter du texte transparent et du texte de clip d' arrière-plan. Maintenant, tout ira bien et cela fonctionnera. Nous pouvons retourner à notre section consacrée aux héros. Vous pouvez maintenant voir à quoi cela ressemble sur notre page. Opacité jusqu'à 70. Et peut-être que ça semble encore mieux. Maintenant que nous avons également utilisé le bouton de dégradé, cela signifie que nous allons créer les boutons eux-mêmes. Bien entendu, continuons en dessous de cette animation, et nous y ajouterons à nouveau un conteneur d'animation avec D 2.4. Et à l'intérieur, nous allons faire un div pour ce plongeon, nous allons ajouter une disposition flexbox avec petit écran Columo à direction flexible et au-dessus, nous allons en faire une ligne de direction flexible, elle se trouve l'une à côté de l'autre, justifier le centre, puis un espace Y quatre pour avoir un certain espacement entre les deux sur un écran plus petit, nous pouvons remettre cet espace Y à zéro Encore une fois, sur un écran plus petit, il suffira d' ajouter un espace X à quatre car les boutons ont une position différente. À l'intérieur, on peut commencer par un bouton. Importons-le également. Donc, si vous n'avez pas encore le bouton, lancez simplement cette commande N PX ChetCN au plus tard au bouton Et ainsi, vous ajouterez n'importe quel composant de la bibliothèque ChetSin Vous pouvez également créer ce coffre de commandes à la carte. Vous allez ajouter une carte à vos composants, puis vous pourrez la réutiliser comme si j' utilisais ce bouton ou non, mais très bientôt, oui. Nous avons besoin de quelques attributs, commençant par une variante où nous mettrons par défaut. Ensuite, avec le dimensionnement, ce sera paramètre important en tant qu'enfant et aussi des noms de classe Pour les noms de classe, je vais y mettre la transformation de transition du bouton dégradé car je serai sur Her en train d' augmenter l'échelle à 105. Ensuite, je mettrai également le texte au premier plan et la police d'écriture à la fois. Ajoutons maintenant un lien avec HRF vers probablement quelque chose comme un tableau de bord et commençons Maintenant, nous pouvons voir le bouton. Et ci-dessous, nous pouvons continuer avec un autre. Préparons les attributs. Nous allons maintenant utiliser le plan des variantes, puis la taille à nouveau, grands comme les enfants et aussi les noms de classe qui seront avec deux plein écran et deux en automatique sur petit écran. Nous devons maintenant ajouter du contenu, donc faites un lien avec HRF two pricing, et il sera indiqué « Afficher les prix Nous avons maintenant les deux boutons sur la page. Nous passerons au composant suivant qui se trouvera juste en dessous de notre introduction sur la page de destination, et ce sera le composant étapes où nous démontrerons à l'utilisateur à quel point il est facile d'utiliser notre produit en trois étapes. 15. Page d'atterrissage - Composant par étapes: Je vais effectuer les étapes de la fonction d'exportation avec un certain retour. Je vais aller à la page, mettre là, l'importer, et nous pourrons continuer avec plaisir à coder. Dans la section étape, nous allons d'abord effectuer quelques importations, puis nous allons commencer par importer l'image à partir de l'image suivante. Maintenant, je veux y mettre quelques photos, je vais placer le dossier des actifs dans mon application et à partir de là, je vais importer les vignettes Je vais donc importer la miniature 1 des actifs de l'application d'un point BNG, et je veux aussi le faire pour Et pareil pour la miniature, trois, et c'est Ensuite, je peux importer des icônes. J'utiliserai un crayon de Lucid React, Layout, et I. Ensuite, je continuerai à importer le conteneur d'animation, et je pourrai passer directement au composant steps dans le retour, et je peux commencer par là avec le conteneur d'animation comme emballage principal, mettre un nom de classe Mix Auto, poids maximum étant de sept Excel Marge vers le haut et relative. Ensuite, j'aimerais également fermer la technologie, bien sûr. Et à l'intérieur, nous pouvons commencer à faire le rendu de quelque chose. Je vais y mettre un div. Et dans cette section, je vais commencer par la bordure supérieure. Nous utiliserons leurs bordures autour de nos marches, et la première se trouvera dans cette division. Donc, en fait, il ne sera même pas ouvert en div, et nous pouvons commencer par la position absolue, le zéro supérieur, zéro gauche, le zéro droit, la hauteur de deux pixels. Dégradé d'arrière-plan vers la droite, du transparent au premier plan avec une opacité de 0,5 à Maintenant, vous ne pouvez toujours pas le voir sur notre page, nous y mettrons seulement quelque chose comme ça, et maintenant vous allez vérifier la page. Vous le verrez un peu au-dessus. Mais bien sûr, au fur et à mesure que nous ajouterons les étapes, cela sera bien visible. Nous allons faire leur bordure verticale gauche. Encore une fois, il sera fermé sur la première ligne. Et pour les cours, nous resterons à leur position absolue, soit 33 %. Ensuite, je vais continuer à régler le haut à 10 %, le bas à 10 %. Largeur à un pixel, dégradé d'arrière-plan vers le bas depuis le transparent, un avant-plan 50 et un dégradé vers le transparent Encore une différence et nous passons directement au contenu Encore une fois, comme ça et mettez les classes d'absolu. Celui-ci sera sur la droite, 33 %, en haut, également, 10 % en bas. Avec la même largeur. Maintenant que je le vois je pourrais peut-être simplement le copier-coller, le dégradé du sol vers le bas depuis le transparent et un premier plan avec une opacité de 0,5 vers Ajoutons le contenu maintenant et nous verrons à quoi cela ressemble. Tout d'abord, pour cette journée, je vais ajouter une mise en page en grille. Et dans cette disposition en grille figureront les trois étapes. Donc, sur un écran moyen, il faudra trois colonnes de grille. À l'intérieur, nous pouvons appeler le conteneur d'animation. Nous y mettrons un délai de 0,2 pour le nom de la classe, je vais saisir le groupe. Et à l'intérieur, nous allons faire un div et y ajouter les classes relatives, bedding, huit, passer toute la durée à 300, fond BG, avec 0,3 opacité pour changer un peu la façon dont nous allons le faire 0,5 opacité, puis un flou de fond petit, peu d'ombre, et comment nous allons augmenter l' Maintenant, ajoutons d'abord contenu pour styliser les autres éléments. Ce que nous devons mettre à l'intérieur, c'est d'abord le div qui contiendra la première étape, qui sera essentiellement l'icône. Et à côté de l'icône, il y aura un texte avec la première étape. Ensuite, en dessous de ce div , il y aura un paragraphe. Téléchargez donc votre miniature et vos informations. Et puis ci-dessous, nous mettrons également l'image. Je vais donc créer le div avec image. L'image aura une source de vignette, une autre provenant de Tumbernil également, puis le remplissage et le nom de classe de l' objet pour couvrir la durée de transition 500, le survol de groupe à couvrir la durée de transition 500, l'échelle un cinq pour augmenter la taille chaque fois que Maintenant, nous l' avons enfin sur notre page, afin que nous puissions mieux le styliser. Et vous pouvez voir la mise en page, à quoi elle ressemblera. Il y aura donc une première étape, une deuxième et une troisième. Bien sûr, nous allons le styliser pour qu'il soit encore plus beau. Continuons maintenant. Faisons le commentaire que nous appellerons étapes. Nous pouvons commencer par le style. Donc, pour ce plat qui tient cette première étape au crayon, je vais mettre leur marge en bas. Flexible en ligne. Ensuite, je vais continuer avec les articles au centre, un peu d'espace et un peu de rembourrage Ensuite, je vais l' arrondir à Excel avec une bordure et une bordure principale avec une opacité de 0,1 Maintenant, à la profondeur ci-dessous qui contient l'icône, je vais mettre un peu de literie, je vais mettre un peu de fond avec une couleur primaire et une opacité de 0,1 et un Excel arrondi Maintenant, il n'est toujours pas visible car l'image le recouvre. Mettons le style de l'image, je dirais. Pour l'image, nous allons régler la hauteur relative à 52, le trop-plein étant masqué Arrondissez-le à Excel, bordure et bordure blanches avec une opacité de 0,5. Sympa. Maintenant que l'étape est enfin visible, nous pouvons continuer avec le style. Revenons-en à cette icône. Mais je pense que nous avons vraiment tout ce qu'il faut. Pour l'icône elle-même, nous allons mettre 25 de hauteur et de largeur avec le texte principal. À cette étape, nous allons ajouter les classes de texte dans Excel, Font Medium, Text Primary et Tracking Wider. Et maintenant, il ne reste que le texte du paragraphe , nous allons mettre le texte petit, le texte, le texte muet, le premier plan et la marge en bas, Maintenant, nous voulons également ajouter les étapes deux et trois. Mais ne répétez pas notre code. Nous allons simplement évaluer la constante par étapes. Et à l'intérieur, je mettrai les informations sur chaque étape. aura d'abord l'icône, qui sera un crayon, puis une étape, ce sera la première étape, puis une description que j'y entrerai plus tard, l'image qui sera une miniature, puis l'image t. Ce ne sera qu' une miniature ou je n'ai même pas besoin de la mettre Je peux ensuite reconvertir l'image en ancienne. Alors D, je vais le faire 0,2. En fait, je n'ai même pas besoin de le mettre là. Je peux juste le laisser 0,2 pour toutes les étapes. Maintenant, je vais copier-coller ceci deux fois de plus. Je vais passer aux deuxième et troisième étapes. Ce sera la mise en page. Ce sera moi. Ce sera la miniature 2, et ce sera la miniature 3 Maintenant, notre composant s'appelle steps, donc steps array. Ensuite, je vais m'y rendre au-dessus de ce conteneur d'animation, je vais créer la carte à points du tableau d' étapes. nom de l'élément dans l'itération sera step et l'index sera la position Je vais maintenant y mettre ce code avec le conteneur d'animation. Maintenant, je vais y mettre l'étape. La description de l'étape I will put point. Là, je vais mettre l'image Step point, et j'y mettrai aussi la clé, qui sera l'index La seule chose que je ferai est de supprimer ce conteneur d'animation. Je laisserai juste ce div. Je vais y déplacer le conteneur d'animation. Je vais suivre ces cours pour la grille, mettre là, supprimer ce div. Dans cette différence, je vais mettre une autre balise de fermeture du conteneur d'animation Maintenant, nous l'avons déplacé comme ça. Enregistrons-le et voyons ce qu'il y a sur notre page. Et voici les trois étapes. Ce que nous devons faire, c'est augmenter la largeur. Cela signifie que nous allons y aller et que nous pouvons faire arrière-plan blanc pour voir comment cela se passe actuellement. Nous pouvons supprimer cette largeur maximale. Avec mixoto. Et ce que nous pouvons faire, c'est supprimer ce poids maximum sur un écran moyen AmexOof, nous mettrons x comme 48 Nous pouvons maintenant vérifier à quoi cela ressemble. Et lorsque nous testons cette autre chose, nous devons déplacer ce groupe vers cette division. Maintenant, ça devrait aller. Nous allons donc tester la section des étapes. Nous allons tester la réactivité. Cela signifie que nous pouvons passer à une autre section. La section suivante sera la section de démonstration, et cette section est en fait, je pense, la plus simple. 16. Page d'atterrissage - Composant de démonstration: Passons au composant de démonstration, créons la démo de la fonction d'exportation. Faites un retour, mettez-le sur notre page. Nous pouvons maintenant continuer là en tant que composant client, et là nous allons importer l'image à partir de l'image suivante. Nous allons importer une application à partir des actifs, un fichier PNG pour mes actifs. Ensuite, je vais importer des éléments utiles à partir de frame motion. Ce sera du mouvement, il utilisera le défilement, il utilisera la transformation à partir du mouvement du cadre, puis importera Rf depuis React parce que nous utiliserons ces déplacer cette image qui est essentiellement une image de notre application Ci-dessous, ci-dessous les importations dans la fonction de notre démo, nous allons créer une const of app image rev, laquelle nous appellerons le hook use Rev et définirons la valeur par défaut sur null Ensuite, nous allons créer une constante de progression du défilement Y et le défilement depuis l'image ou mouvement où nous allons définir la cible. Cela devrait donc aller à l'image rev and offset de notre application où nous allons définir du début à la fin et de fin en début. Nous allons maintenant créer deux variables. La première sera la rotation X, où nous transformerons la progression du défilement, zéro à un, en rotation. Progrès de la transformation Y, transformation de zéro à un pour 14 moins dix. Ci-dessous, vous allez créer une variable d' opacité dans laquelle nous transformerons à nouveau la progression de zéro à un, 20 à deux Ce que cela signifie. Pour la rotation, lorsque la progression du défilement est nulle, elle sera de 14 degrés et quand elle est égale à un, elle sera de moins dix degrés. Pour l'opacité, pareil. Quand c'est zéro, c' est toujours zéro. Et lorsque la progression du défilement est égale à un, l'opacité est égale à deux, ce qui le rend entièrement visible En fait, il y en a probablement un qui suffit. Continuons dans le retour, et dans un moment nous verrons comment fonctionne cette animation. Je vais faire le d pour cette journée, nous allons mettre le texte au premier plan et nous allons le régler PAR 20, et sur un écran plus petit, nous pouvons l'augmenter un peu plus Supposons également qu'il existe une largeur maximale de 1 400 pixels et une automatique mixte À l'intérieur, nous allons faire le titre deux avec tester vos vignettes sans limites Et là, nous allons placer la marge entre le haut du texte et le centre. Textez cinq Excel. Maintenant, sur un écran plus petit, textez six Excel, faites les deux, disons peut-être une certaine opacité Et en dessous du titre deux, nous pouvons ajouter un paragraphe technique. À l'intérieur, nous passerons revue vos vignettes sur ordinateur, tablette ou mobile, interfaces utilisateur. Pour les cours, nous mettrons du texte Excel, le centre du texte, marge du haut à cinq et le texte pour le sol avec 0,5 Je veux dire 0,8 d'opacité. Je pense que l'opacité peut être modifiée à 0,9 sur le titre pour partir comme ça, c'est mieux Maintenant, en dessous de cette balise de paragraphe, nous allons continuer avec le motion diff, car nous allons y ajouter quelque chose que je ne veux pas ajouter maintenant au conteneur, afin que nous puissions peut-être le refactoriser plus tard Pour l'instant, je n'utiliserai qu' une seule motion si c'est bon. Pour la référence, je vais définir la référence de l'image de l'application. Pour le style, je vais définir l'opacité, que je vais définir sur mon opacité variable, faire pivoter X, que je vais définir sur ma variable, faire pivoter X, et également transformer la perspective que je vais régler sur 700 pixels Ajoutons-y également un nom de classe, marge depuis le haut, Excel arrondi, trop-plein masqué Shadow to Excel, ombre violette. Ajoutons une belle couleur à l'ombre. Puis bordure et bordure au premier plan avec une opacité de 0,1. Enfin, nous allons ajouter l' image à l'image dont nous sommes la source de l'application, qui est l'image que nous avons importée. ancien sera epidemo, par exemple, nom de la classe sera de la largeur au complet et de la hauteur à faire Maintenant, enregistrons-le, et nous aurons l'image même avec l'animation. Faisons défiler la page vers le bas, et le tour est joué. Et là, vous pouvez voir à quel point il est à peine visible et qu' il change également. En fait, nous devrions y aller et modifier deux fois l'opacité. Sauvegardez-le. Oui, c'est mieux. Je peux donc rafraîchir la page. Faites défiler vers le bas. Ça commence et ça devient comme ça sur notre page. Vous pouvez même voir comment il bouge, et vous pouvez même voir l'ombre qui l'entoure. Passons maintenant au mode lumière. Oui, ça marche, bien sûr, tout. Le design fonctionne également avec le mode lumière. Mais bien sûr, le mode sombre est bien meilleur, du moins pour ce design, certainement. Mais si quelqu'un veut simplement utiliser un mode lumière, il le peut. Et ce sera tout pour la section de démonstration. 17. Page d'atterrissage - Composant FAQ: Nous pouvons passer à un autre, et les questions seront fréquemment posées. Ouvrons Explorer et là, dans la page de destination, nous ferons la fonction d'exportation, la FAQ, le retour, nous pouvons y faire juste des fragments vides. Accédez à la page, mettez-la en dessous de la démo. Importez-le et c'est prêt. Ce que nous devons faire en tant que client, c'est importer des cadeaux animés à partir d'images ou de mouvements Ensuite, nous allons également importer l'état. Et nous allons également importer le conteneur d'animation que nous utiliserons comme précédemment. Nous allons maintenant créer un tableau avec des FAQ. Et pour chaque FAQ, nous établirons une question et une réponse. Je vais faire les trois. Je pense donc que trois questions, trois réponses suffisent pour le moment, et posons-y quelques questions. La première question porterait donc sur notre produit. Qu'est-ce que TumbnailpViewer ? Alors, comment fonctionne le système de prévisualisation ? Et peut-être la dernière question, y a-t-il un plan disponible ? Dans le composant, nous allons d' abord évaluer la variable d'état. Donc, question sélectionnée avec définir la question sélectionnée pour la définir et utiliser numéro d'état ou null et la valeur par défaut de notre variable d' état sera nulle. Nous pouvons maintenant passer directement au retour. Nous allons l'encapsuler dans div, et nous pouvons commencer par le premier cours. Faisons en sorte que cette largeur maximale soit de 1 200 pixels. Faisons en sorte que ce x soit automatique pour le centrer, BI 32, pour qu'il ait un certain espacement vertical et que les sommets aient un certain espacement horizontal Maintenant, si nous continuons, nous allons créer le conteneur d'animation. Nous y inclurons un certain délai. Faisons 0.1. Et à l'intérieur, nous pouvons faire le titre deux avec FAQ. Pour ce titre, nous allons mettre le texte trois Excel sur petit écran, le texte quatre Excel, sur l'écran moyen, texte six Excel sur le boulon de police, le centre du texte, suivi serré et maintenant nous l'avons là. Peut-être que nous pouvons également y mettre une certaine opacité à 90. Ci-dessous, vous allez continuer avec un autre div pour ce div. Nous allons définir une disposition en grille. Nous pouvons créer un écart. Nous aurons les questions fréquemment posées. Sur écran moyen, nous allons créer cette grille avec une marge à partir du bas. À l'intérieur de ce creux, nous allons cartographier le tableau que nous y avons créé. Cela signifie que nous allons créer une carte à points des FAQ. Nous nommerons l'élément actuel dans la FAQ sur l'itération du tableau, et l'index sera la position Ensuite, à l'intérieur, nous allons créer un conteneur d'animation. Pour ce conteneur d'animation, nous devons définir les propriétés, qui seront essentielles en tant qu'index. Delay 20.2, et pour chaque FAQ que nous allons mapper, nous l'augmenterons d'un indice multiplié par 0,1 Ensuite, pour le nom de la classe, nous aurons leur opérateur pour vérifier les questions sélectionnées, et si la question sélectionnée actuellement sélectionnée ou si la question est actuellement sélectionnée, elle aura une couleur différente de celle des questions non sélectionnées pour la différencier Faisons donc là les derniers guillemets. Et à l'intérieur, nous pouvons commencer par Bereni à six, Berny à cinq, du texte à gauche, arrondir à Excel, passer à 500 pour utiliser les animations, le pointeur du curseur, la toile de fond, le flou, Passons maintenant à une autre ligne où nous indiquons le signe du dollar, et voilà, nous allons vérifier la réponse à la question sélectionnée. Ou plus probablement si la question sélectionnée est l'index actuel, ce qui signifie qu'il s'agit de l'élément actuel de l'itération. Si oui, nous exécuterons la disposition au cas où, non, nous exécuterons cette position. S'il s'agit d'une question sélectionnée, nous définirons l'arrière-plan comme principal avec une opacité de 0,5, et la bordure principale avec une opacité de 0,2 Et en fait, il ne s' agit pas d'une opacité de 0,5. Il s'agit d'une opacité de 0,05. Et une ombre avec une certaine opacité primaire de 0,0 à 0,05 Nous pouvons maintenant passer à une autre ligne. Faisons-le vraiment comme ça. Et sur une autre ligne, au cas où c'est faux, donc ce n'est pas sélectionné, nous allons simplement régler l'arrière-plan à 0,2 opacité sur notre arrière-plan, 0,05 opacité, bordure blanche, 0,5 opacité et sur notre bordure De plus, une fois que nous pouvons ajouter la classe de bordure, nous devons l'enregistrer dans la classe de bordure. Et maintenant, nous ne pouvons rien voir car nous devons encore ajouter la question elle-même. Faisons le H trois. Affichons ici la question. Nous l'avons donc au moins sur notre écran, mais nous n'en avons pas encore fini avec les attributs. Nous devons également mettre en place une transition, et nous allons régler la transition entre la durée, qui est de 0,3, le type d'animation qui correspond au ressort pour nous, puis la rigidité et l'amortissement De plus, définissons-y la fonction de clic au cas où l'utilisateur cliquerait sur cette question, nous définirons la variable d'état, donc définissons la question sélectionnée. Envoyez l'index, le numéro correct de la question sectée. Supposons que nous sélectionnions la troisième question, elle sera donc définie sur la variable d'état et cette question sera sélectionnée. Nous allons le tester très prochainement. Ajoutons simplement un style supplémentaire à l'arbre des en-têtes, qui est simplement un texte de grande taille avec une police claire et un blanc de suivi. Maintenant, sélectionnons la question. J'ai donc sélectionné le premier. Vous pouvez voir comment tout fonctionne désormais avec une ombre de bordure très claire, etc., et comment je peux sélectionner les différentes questions qu'elles restent sélectionnées. Ce que cela fera, c'est que nous allons affaisser la question et ensuite elle affichera la réponse ci-dessous. En dessous de ce mappage, nous allons continuer avec un nouveau div, et dans ce div, nous allons mettre des noms de classes d'une hauteur relative de 140 pixels, puis des éléments de mise en page flexbox et justifier le centre pour qu' il soit centré verticalement et horizontalement Arrondissez cet Excel, bordure avec bordure blanche 0,05 opt, arrière-plan, nous réglerons à 0,2 opacite et le flou de fond Dans ce div, nous allons lancer le cadeau animé. Et pour les cadeaux animés, nous allons régler le mode d'attente Qu'est-ce que l'animation présente à partir du mouvement de l'image ? Il s'agit d'un composant spécial qui nous aidera à créer une animation fluide lorsque des objets disparaîtront et, bien sûr, apparaîtront également sur notre page. Lorsque nous cliquons sur différentes questions, présence animée fait en sorte que l'ancienne réponse s'estompe bien avant de disparaître, et que la nouvelle réponse s' estompe en douceur Nous pouvons maintenant animer la présence et continuer à vérifier la question sélectionnée S'il n'est pas nul, nous allons afficher ce conteneur d'animation. Où nous devrons définir les attributs, saisissez touche sélectionnée. Question initiale sous la forme OPAcid à zéro avec Y à dix. Nous aimerions également qu'ils soient animés avec opAcid à un et Y à zéro et qu'ils sortent avec opaCD à zéro et Y Ensuite, nous définirons une transition dont la durée sera fixée à 0,4. Et le nom de la classe où nous allons juste pédaler. À l'intérieur, nous pouvons commencer par ajouter une balise de paragraphe dans laquelle nous placerons les FAQ, sélectionnant la réponse à point. Et nous allons afficher la réponse à la question comme suit. Ajoutons ensuite un peu de style. Mettons cela sur une autre ligne. Et pour le style, nous y mettrons la base du texte, la police, la lumière, le suivi, le blanc et le premier plan du texte avec une opacité de 0,9 Nous pouvons le tester et voir l'animation. Et si cette option n'est pas sélectionnée, il n'y aura rien, mais nous allons corriger cela en dessous de ce mappage Nous allons faire un rendu conditionnel, définir la question au cas où elle serait nulle, nous ferons un conteneur d'animation à l'intérieur, nous afficherons une question sélectionnée ci-dessus. Pour cela, nous pouvons réutiliser le style que nous avons indiqué dans la FAQ ci-dessus et nous pouvons également y mettre une animation ou simplement le laisser tel quel. Regardons maintenant la page. Maintenant, nous allons corriger l'esprit. Allons-y et nous allons le faire la place de ces 1 400 pixels et nous avons également réglé la largeur sur pleine largeur Maintenant, il prendra le poids total, mais il ne faudra pas non plus dépasser 1 400 pixels de poids Voyons à quoi ça ressemble. Et maintenant, vous pouvez voir que cela ne change pas le poids, car nous changeons les questions. Vous pouvez également voir les animations, boum, boum, boum. Et encore une chose que nous allons faire, c'est de faire notre FAQ, mettant la marge inférieure à 12. Ce sera pour les sections de questions fréquemment posées, et nous pouvons maintenant passer à la suivante. Et ce sera le prix. 18. Page d'atterrissage - Composante de tarification: Passons à la tarification et pour faire la différence entre les autres composantes de la tarification, nommons cette tarification des prêts. Faisons donc de l'exportation une fonction de tarification des prêts. Nous allons maintenant modifier. Nous devons d'abord y retourner. Nous le ferons sur la page. Pas de prix, en fait. Tarification des prêts. Maintenant, ce que nous devons faire, ce sont des importations de première somme. Je vais donc importer le lien à partir du lien suivant. J'importerai également le conteneur d'animation et j'importerai également le check de Lucid React car nous l' utiliserons comme icône Là, nous pouvons commencer par une section. Et nous pouvons mettre le nom de leur classe de poids maximum, sept Excel. Je mélange Auto, PY, 20, quatre, Px, quatre et relatif. À l'intérieur, nous allons faire deux diffs vides, et nous allons leur attribuer des classes Pour le premier, je vais mettre position absolue, le zéro supérieur, le zéro gauche et le zéro droit pour l' étirer d'un côté à l'autre de la ligne. Ensuite, je mettrai leur hauteur à deux pixels. Dégradé d'arrière-plan vers la droite à partir du transparent, via le premier plan 50, opacité de 0,5 à Ci-dessous, je vais essentiellement faire des choses similaires, mais je vais le mettre en bas à gauche, zéro, droite, zéro, hauteur. Nous pouvons également utiliser deux pixels et dégradé d' arrière-plan allant du transparent au premier plan avec une opacité de 0,5 au Maintenant que nous avons fait défiler la section, nous pouvons déjà voir le point, mais ce sont en fait ces lignes, mais nous verrons après avoir ajouté du contenu au fur et à mesure qu'il sera développé Commençons donc par le conteneur d' animation. Pour le conteneur d'animation, nous allons d'abord définir un certain délai avec 0.0 et nous allons le faire comme ça. Et nous allons commencer et nous allons commencer par quelques noms de classes. Je vais y mettre la disposition de la boîte flexible, la colonne de direction du flex, puis aussi les éléments au centre, largeur maximale l, et Amora, marge de largeur jusqu'au 16 en bas Commençons maintenant à ajouter du contenu dans ce conteneur d'animation. À l'intérieur, nous allons commencer par le titre deux, et ce titre deux sera intitulé prix ou nous allons afficher les prix, le nom de cette section. Et pour cette deuxième rubrique, nous ajouterons de la literie à trois arrière-plans principaux avec une opacité de 0,1, Excel arrondi, et également du texte vers Excel, police, support, texte, principal et suivi plus large C'est maintenant sur notre page. Nous pouvons voir à quoi cela ressemble. Et en fait, je pense que l' arrière-plan a arrondi Excel, nous allons nous en débarrasser. Laissons les choses comme ça et peut-être qu'il est plus probable d' y trouver un panneau de porte en forme d'icône, puis de le mettre là. Signe du dollar, voyez à quoi ça ressemble. Donc, ce que nous allons faire en fait, c'est créer un div. Pour ce div, nous allons ajouter une couche de 2,5, un arrière-plan principal avec une opacité de 0,1 et un Excel arrondi Nous mettrons le signe du dollar à l'intérieur, et nous y créerons également une autre division. Mettez-y les choses. Et pour ce jour, nous allons faire de la mise en page Flexbox, Flex Row, donc les prix, nous faisons le signe du dollar les uns à côté des autres, et aussi nous placerons les articles au centre Voyons maintenant à quoi cela ressemblera, et peut-être pourrions-nous y réduire le nombre de lits pour le symbole du dollar. Nous pouvons faire un certain écart entre 0,5 et 0,05 opacité pour mon dernier 0,5 et 0,05 opacité Et c'est probablement ça. Je pense qu'on peut laisser les choses comme ça. Cela signifie que nous pouvons continuer. Et ce que nous pouvons également faire là-bas , c'est ajouter du texte ci-dessous. Un seul plan les régit tous, peut-être quelque chose comme ça. Texte au centre, texte à arceau, texte en sourdine, premier plan. Voyons à quoi cela ressemblera. Oui, bien sûr, nous devons le mettre ci-dessous. Donc comme ça, oui, c' est mieux, peut-être 0,8 d'opacité Et peut-être que je changerais également le signe du dollar avec le prix inférieur à ce conteneur d'animation. Nous allons commencer par un autre. Nous y définirons un délai 2.2, ainsi que le nom de la classe, disposition de la boîte flexible justifiant le centre et la largeur au maximum À l'intérieur, nous pouvons commencer par un di et pour ce div, nous allons définir la largeur sur full. Sur un écran moyen, nous réglerons la largeur à 500 pixels. Ensuite, nous définirons la classe relative avec une couche de huit, une transition vers durée totale de 300 et un arrière-plan avec une opacité de 0,3, avec un arrière-plan d'une opacité de 0,5 Nous allons maintenant continuer là, et nous allons parler d'un flou de fond trop petit puis d' un peu d'ombre sur la façon dont nous pouvons augmenter l'ombre et l'arrondir dans Excel pour augmenter le rayon de la bordure et ajouter également une bordure elle-même Nous allons maintenant ajouter du contenu, enfin, et nous allons encore une fois affiner un peu le style. Créons le div. Dans cette section, nous allons mettre une technologie de paragraphe utilisée pendant un an. Quelque chose comme ça, peut-être pourrons-nous le mettre à jour plus tard. Ensuite, ci-dessous, nous allons créer un div. Dans cette section, nous allons créer deux balises Spen dont le prix sera, disons, 19$ Et ici, les classes il y aura des éléments flexibles de base et un écart de 22. Maintenant, pour ce qui est de la durée, le style que nous allons ajouter sera du texte pour Excel, semi-bot de police et le texte mis en sourdine pour Voyons à quoi cela ressemble actuellement. En dessous de ce div, nous pouvons continuer avec un autre div. Nous créerons un tableau illimité, téléchargerons et enregistrerons les informations de votre chaîne. Ensuite, nous allons le cartographier. Nous nommerons l'élément feature, et nous vérifierons sa position à l'aide d'un index, puis à l'intérieur, nous créerons un div. Dans ce div, la clé sera l' index et les noms des classes Nous utiliserons des éléments de mise en page Flexbox pour centrer l'espace trois, le texte et le premier plan en sourdine À l'intérieur de ce div, nous allons mettre un autre div et ce div contiendra l'icône en forme de coche. Pour l'icône en forme de coche, nous allons simplement régler la hauteur sur quatre avec 24 et également le texte sur le principal. Ci-dessous, nous allons créer un spenteg qui montrera la fonctionnalité que nous avons là Pour le div qui contient l'icône en forme de coche, nous ajouterons un arrière-plan principal arrondi avec une opacité de 0,1 Flexbox place les éléments au centre, justifie le centre pour le centrer Et maintenant, nous pouvons voir à quoi cela ressemble. J'augmenterais également le pédalage. Mettons leur rembourrage deux et mettons-y également de l'espace Y deux. Disons celui de la pédicure. Nous allons créer le lien. Nous nous rendrons à HF pour nous inscrire et le nom du cours avec le flex intégré complet Les articles placés au centre justifient le XL arrondi au centre, rembourrage horizontal à quatre et le rembourrage vertical à trois et la transition, le tout avec une durée de 500 Bien sûr, maintenant nous devons également y mettre quelques noms, alors commençons, et là, sur une autre ligne, finissons le style avec l'arrière-plan principal. Ensuite, sur le primaire de fond H 20 et le principal de texte, également avec la bordure et le principal de bordure avec une opacité de 0,2 et sur le primaire de bordure H avec une opacité de 0,3 Maintenant que nous l'avons, nous pouvons le voir sur notre page, et maintenant nous devons mettre à jour un peu le style car nous avons besoin quelques espacements, car actuellement, c'est un peu tout superposé. Supprimons cette division et ajoutons-y un espace par six. Ainsi, lorsque nous le survolons, il devient plus clair, de même que le bouton Pour le bouton, lorsqu' un utilisateur clique dessus, il est redirigé vers une page d'inscription Lorsqu'il s'inscrira, il pourra acheter le produit. Je pense que c'est tout pour la page de tarification, rien de plus. Nous allons maintenant y ajouter, et nous pouvons passer à une autre section, qui sera appelée à l'action. 19. Page d'atterrissage - appel à l'action, pied de page, mises à jour: Revenons au code VS, ouvrons l'explorateur, passons à l'appel à l'action. Faites une fonction d'exportation, appelez à l'action, revenez là-bas, mettez-la sur notre page. Appel à l'action. Nous l'avons maintenant et nous pouvons continuer. Ce que nous devons faire là-bas, c'est d'abord utiliser le client et également y importer l' image à partir de l'image suivante. La prochaine étape serait également d'importer le mouvement du cadreur. Actuellement, juste à des fins de test, je vais y placer une miniature à partir des actifs de l'application et une partir des actifs de l'application et une Et je vais le faire plusieurs fois. Je vais m'en servir huit fois, je ne sais pas. Parce que je dois faire un cercle complet avec ces vignettes heure actuelle, pour les tests et comme espace réservé, je vais y placer huit importations ce type avec la même image, et plus tard, nous la remplacerons par des vignettes réelles Je n'y mettrai donc que huit importations de huit images différentes, et elles seront toutes affichées dans cette section d'appel à l'action, car il s' agira essentiellement d'un cercle rotatif. Et à chaque fois que je passe à l'écran, je pense que trois ou quatre images seront visibles parce que les autres images seront cachées en dessous car, bien sûr, dans cette section, seul le haut de l' anneau sera visible. Nous pouvons passer directement à l'appel à l'action, et là nous pouvons commencer par un di. Pour ce div, nous allons mettre une classe relative avec PI 240 complet et un débordement masqué Nous ajouterons le superbe arrière-plan. Faisons donc le div qui ne contiendra rien. Juste deux noms de classe, nous allons mettre la position absolue dans le set zéro, et maintenant nous allons également y mettre quelque chose que nous avons déjà sur notre page. Partons donc de là. Et en gros, nous voulons copier ceci, le mettre là, régler l'opacité sur 25 Ça devrait aller alors. Maintenant, nous pouvons déjà le voir sur notre page. Et ci-dessous, nous allons également faire, encore une fois, un Di vide où nous mettrons juste un nom de classe, et il y aura un dégradé de fond absolu zéro vers bas, du transparent noir avec une opacité de 0,5 à Avec cela, nous allons tracer la ligne la plus foncée de notre section comme suit. Ci-dessous, nous allons commencer à ajouter le contenu. Je vais donc y mettre une division. Pour cette différence, je vais définir une classe relative avec un index de dix, pics de quatre et une hauteur de 220 pixels Ensuite, à l'intérieur, nous ajouterons un motion div. Je n'ajoute pas le conteneur d'animation que nous utilisons car je vais ajouter propriétés légèrement différentes et je ne veux pas mettre à jour le composant uniquement pour ce cas spécifique. Je vais juste utiliser Motion Div ici. Pour les noms de classe, j' ajouterai la position absolue, à gauche à 50 %, en haut à 50 %, et je traduirai X de 50 % et je traduirai Y de 50 %. Ensuite, nous allons définir l'animation. rotation de 360 degrés, la transition avec une durée de 90, la répétition à l'infini sont linéaires, et ce sera tout. Nous allons maintenant cartographier nos vignettes. Je vais mettre la miniature un ongle deux, la miniature trois, la miniature quatre Et comme ça pour toutes les vignettes, je vais y faire une carte, et j'y mettrai une miniature miniature sera donc le nom de l' élément dans le tableau et indexera la position Et à l'intérieur, je vais commencer par la variable d' angle où je vais diviser l'indice par quatre, multiplier par deux et par le point mathématique BI. Ainsi, nous répartirons les vignettes uniformément en cercle Puis variable pour le rayon, je dirai qu'il y en a 750 , puis je retournerai où je retournerai un dif Pour ce div, je vais définir une clé qui sera index. Je vais définir un nom de classe absolu, et je vais définir le style, qui sera transformé pour traduire -50 % et -50 %, faire pivoter où nous multiplierons à nouveau l'angle par 90, diviserons par Mv point PI, et nous devrons indiquer nos Nous pouvons également le fermer comme ça et aussi après avoir mis une traduction, où nous utiliserons à nouveau ces radios et ces pixels et nous pourrons continuer à l'intérieur où nous créerons un autre div et ce div contiendra une image. Et cette image aura pour source une miniature de miniature, et le nom de classe de width to full height to fool object to cover opacity 2.9, et Pour le style de ce div, nous allons y mettre une classe relative de 480 pixels. Nous allons le regrouper. Maintenant, on peut déjà y voir. Ce que nous devons faire, c'est y mettre une rotation de 90, et c'est tout. Maintenant, nous pouvons diminuer la largeur, peut-être même davantage. 340 pixels. Et nous pouvons également diminuer le rayon. Utilisons 650. Nous devons maintenant le déplacer un peu vers le bas, mais avant de le faire, ajoutons également du texte à cette section, et ce texte sera placé en dessous de cette division de mouvement. Et là, en fait, nous devons le mettre à jour un peu. Disons que nous pouvons laisser les choses comme ça, mais là, nous allons créer le div où nous allons définir la position absolue en haut à -50 %, gauche zéro avec les hauteurs complètes à 1 500 pixels et x auto. Maintenant, prenons le div et enveloppons ce div de mouvement mural Maintenant, formatez-le un peu. Oui, c'est comme ça que ça devrait être maintenant. Vous verrez donc dans notre section que nous avons les vignettes Et la dernière chose que nous allons faire, c'est qu' en dessous de ces deux divs, nous en ajouterons une nouvelle À l'intérieur, nous allons ajouter le titre deux, tester vos vignettes. Et ci-dessous, paragraphe, visualisez vos miniatures dans un environnement de révision dynamique avant Maintenant, centrez le texte sur le style. Pour le titre deux, nous allons au texte cinq Excel, police, volt. Et en fait, je n'y ai pas fait d'Excel. Nous pouvons le rendre plus réactif. Commençons donc par ceci pour les écrans moyens. Sinon, faisons le texte Excel et le texte pour Excel pour le petit écran. Pour le paragraphe, nous utiliserons les noms des classes avec du texte volumineux, du texte sourdine au premier plan, une largeur maximale par rapport à Excel et un mixage automatique, peut-être même Oui. Et aussi, mettons là l'espace Y deux. Ça devrait aller. Nous y saisirons les images des vignettes que nous voulons afficher, puis cela créera cette animation rotative Ouvrons le pied de page. Nous y exporterons le pied de page de la fonction avec le retour. Mettez-le sur notre page. Pour le Futer, nous allons d' abord importer le lien, et nous allons également importer le conteneur d'animation Maintenant, dans Putter lui-même, nous allons créer le tag Putter et les classes que nous allons ajouter seront la marge inférieure, bordure relative vers le haut et la bordure par bordure avec une opacité de 0,4 En haut, nous passerons à 16, pariant en bas à huit Sur un écran moyen, nous pouvons le réinitialiser et le rembourrage horizontal à six Sur grand écran, on peut le porter à huit. Nous pouvons le régler sur complet, et nous utiliserons le dégradé d'arrière-plan du fond transparent à l'arrière-plan avec une opacité de 0,8 et un flou de fond faible Maintenant, à l'intérieur, nous allons créer un di pour ce div, nous allons mettre un poids maximum de sept Excel avec Amex Auto, puis pour un autre div, nous allons créer, nous allons mettre une disposition en grille avec Gap 212, Excel et supérieur, nous allons définir colonnes de la grille à trois et également l'écart à huit Ensuite, à l'intérieur, nous allons créer un conteneur d'animation avec Dla 2.1. Et à l'intérieur, nous allons mettre une page avec Tumbernail Reviewer. Nous y placerons le style du texte Excel, boulon de police et en dessous de ce conteneur d'animation, nous pouvons continuer avec un di à ce jour, nous définirons la disposition de la grille avec deux colonnes de la grille, écart huit, et dans Excel et les versions supérieures, nous réglerons la portée du charbon à deux. Cela signifie que cela prendra des colonnes spécifiques sur la taille d'écran Excel et supérieure. Ensuite, à l'intérieur, nous allons créer un div. Aujourd'hui, nous allons créer des conteneurs d'animation, afin de pouvoir créer le premier avec un second puis nous définirons un écran moyen au-dessus, disposition en grille avec deux objectifs en grille sur l'écran moyen au-dessus, et aussi un certain écart. Pour le conteneur, nous allons définir un délai 2.2, et le contenu sera un titre trois avec prévisualisation, puis une liste ordonnée avec un élément de liste, lien que nous avons dû utiliser dans deux sections spécifiques, par exemple, les étapes Pour Link, nous devrions également avoir HRF et le nom de classe qui peut être sur Hard text, primary, transition, colors et duration 200 Nous pouvons maintenant copier cet élément de la liste, le coller ci-dessous, et au lieu des étapes, nous indiquerons leur prix. Pour la liste standard, nous allons placer leur marge à partir des quatre premiers, un espace par trois, texte est petit et le texte est muet pour le sol Maintenant, nous l'avons là, et la prochaine chose que nous allons faire, c' est de décaler l' élingue pour le prévisualiseur, qui sera le texte en petit, le téléphone en demi-boulon et le texte au premier plan Et nous allons essentiellement copier ce conteneur d'animation, mettre à la place du second. Là, nous pouvons augmenter le délai à 0,3. Nous allons remplacer l'outil de prévisualisation par les réseaux sociaux, les étapes vers Facebook et les tarifs Ensuite, nous allons prendre ce Valdiv et le coller juste en dessous, nous allons donc créer deux lignes supplémentaires Mettons 0,4 et 0,5 comme délai. Et aussi, mettons là au lieu du contact avec le prévisualiseur, au lieu des étapes d' assistance et de suppression cette tarification pour qu'il en soit ainsi Et pour terminer, nous pouvons parler de nous, et il y a quelque chose comme politique de confidentialité et des termes et conditions. Maintenant, enregistrons-le et vérifions-le sur la page. Voyons si tout va bien. Nous avons l'introsection avec les étapes. Nous avons la démo, l'animation où nous montrons la démo de notre application. Questions fréquemment posées concernant cette section interactive, les prix, l'appel à l' action et le pied de page Maintenant, bien entendu, nous voulons également tester la réactivité. Maintenant, le seul problème lié la création d'espaces vides autour notre page sur un écran mobile est cette section de démonstration. Nous devons donc entrer dans le code VS, et nous devons y remédier. Mettons-le dans ce composant de démonstration dans ce div animé qui enveloppe l'image. Avec deux pixels fixes de 300 pixels, et un mixage automatique et sur écran moyen, nous allons régler avec deux pixels complets. Faisons défiler la page et voyons à quoi elle ressemble. M 20. Page d'atterrissage - Nouvelle barre de navigation, mises à jour: Maintenant, nous allons également créer une meilleure barre de navigation, et non une barre de navigation fictive que nous avions au début, mais elle est tout de même bonne. Tu peux le garder. Si vous ne voulez pas faire cette version améliorée avec moi, les fonctionnalités seront les mêmes. Tout d'abord, dans le composant Navbar, nous utiliserons le client, puis nous importerons quelques éléments Nous allons commencer par le lien du lien suivant. Importez ensuite le changement de mode depuis Team Toggle. Ensuite, nous allons importer la connexion depuis Clark, ainsi que le bouton de connexion déconnecté, le bouton de connexion et l'utilisateur utilisateur Ensuite, nous allons importer use State et nous allons également importer le menu depuis Lucid React et X. Nous allons également importer un conteneur d' animation Ensuite, nous allons exporter la barre de navigation const. Nous allons y créer une variable une fois que vous êtes connecté. Et nous utiliserons use user. Pour cet utilisateur, il vérifiera essentiellement si nous avons un utilisateur de Clark. Mais si vous n'avez pas encore de greffier ou si vous ne faites que le front-end, vous pouvez le faire simplement avec True. Mais ensuite, vous devez supprimer ces bretelles bouclées. Nous pouvons le faire maintenant comme ça ensemble. C'est tellement hardcore, c'est la vraie valeur, et c'est tout. Ensuite, cela fonctionnera comme si l'utilisateur était connecté et qu'il était également préparé pour votre future implémentation de sum of. Ensuite, nous allons créer une constante avec une variable d'état, afin que son ensemble ouvert soit ouvert. Par défaut, nous attirons l' état vers les chutes. Ensuite, nous allons créer une fonction, le menu Toggle, et l' ouvrir à une valeur différente à la valeur opposée, je veux dire Ci-dessous, nous pouvons faire le retour, et là, nous pouvons faire Nap Tech. Dans le Naftac, nous placerons les classes BG background et relative, et cet indice sera égal à 50 À l'intérieur, nous allons créer le pour ce div, nous allons mettre un poids maximum de sept Excel, Mx Auto, et en économisant quatre À l'intérieur de ce div, nous allons mettre un div qui comportera une classe de mise en page flexible entre les différentes classes, espacement uniforme entre les éléments, les éléments au centre, une hauteur allant jusqu' à 16 et une classe relative À l'intérieur, nous allons créer le conteneur d'animation avec un délai de 0,1. Nous y ferons le lien avec HF vers le chemin souhaité et classes de literie ( deux et un support). Nous y mettrons le nom de l'entreprise. Je vais y mettre SAS. maintenant au bouton du menu mobile, nous allons créer un div dans un conteneur d'animation avec le délai 2.2. Et à l'intérieur du bouton où nous allons vérifier est ouvert, au cas où, oui, nous afficherons l'icône avec une hauteur six et une largeur six. Dans le cas présent, nous allons afficher l' icône du menu avec une hauteur de six, et nous allons également définir certains attributs pour ce bouton ou nous allons cliquer pour appeler la fonction de menu Toggle, que nous avons créée ci-dessus Ensuite, pour les cours, nous définirons Bedding sur deux, puis pour l'étiquette, nous définirons le menu Toggle Nous pouvons maintenant passer en bas. Ci-dessous, nous allons créer une navigation de bureau. Là, nous allons le masquer sur écran mobile ou un écran moyen, nous l'afficherons. Flexbox dispose les éléments au centre et SpaceX à quatre pour avoir un certain espacement horizontal, puis le conteneur d'animation avec Et là, nous allons vérifier, s'il est connecté. Dans certains cas, nous vous retournerons ces deux Lenkspduct ainsi Il y aura un HRF du chemin souhaité et le nom de classe de Bedding two font medium En gros, nous pouvons le copier-coller ici. Et s'il n'est pas connecté, nous allons l'afficher maintenant. Ci-dessous, nous allons créer un lien que nous pouvons simplement copier à partir de là et le mettre là et ce sera le prix. Cela sera affiché chaque fois que l'utilisateur n'aura pas besoin de se connecter pour cela. Et nous pouvons passer en dessous de ce conteneur d'animation, créer un autre conteneur d'animation avec un délai de 0,4. Et à l'intérieur, nous allons créer un div avec les classes space X four, flex et items to center. Et il y aura le changement de mode. Clark sera déconnecté au cas où il serait déconnecté Quel greffier vérifiera pour nous, il verra le bouton de connexion. Au cas où il serait connecté, encore une fois , le greffier vérifiera pour nous. Il verra le bouton de déconnexion. Cela nous a permis d'économiser quelques lignes de code, car nous n'avons plus besoin de vérifier s'il signe ou s'il se déconnecte pour afficher ce bouton. Nous sommes en train de vérifier le point de vue théorique. Mais oui, vous avez essentiellement deux options pour le faire. W est connecté, où vous allez le cocher, puis dans le cas où oui ou non, vous l'afficherez ou avec le texte « se déconnecter » ou « se connecter », où vous afficherez ensuite le contenu qu'il contient. Il est donc vrai que nous pourrions nous débarrasser et mettre ce texte, connecter puis y mettre ces liens Mais je crois qu'il existe ces deux options, comment vous pouvez le faire via cette condition ou via le texte du greffier si vous souhaitez utiliser le greffier pour l'authentification. Et là, nous allons créer un div qui sera destiné à la navigation mobile, et là nous mettrons sur un écran moyen masqué, fixe, en encart zéro, cet index 40, et nous vérifierons qu' il est ouvert auprès de l'opérateur de tournage S'il est ouvert et que la valeur est vraie, nous ne ferons rien. Si la valeur est fausse, nous effectuerons des événements de pointeur, aucun. Il n'y en a donc pas, il n' y a donc pas d'événements pointeurs. Ensuite, dans ce div, nous en créerons un autre. Mais juste au-dessus de cette différence, nous allons créer un creux qui ne fera que maintenir la classe Dans ce cours, nous allons définir la position absolue avec zéro intérieur, l' arrière-plan avec une opacité de 0,8, le position absolue avec zéro intérieur, l' arrière-plan avec une opacité de 0,8, flou de fond sur petit, l'opacité de transition avec flou de fond sur petit une durée de 300, et nous allons définir l'option « ouvert ». Si oui, réglez l'opacité à 100. Dans le cas contraire, réglez l'opacité à zéro. Comme ça. Il s'agit d'un div vide, il suffit donc de le fermer à la fin de la ligne. Nous allons donc définir la position absolue, 16 en haut, 16 à gauche, droite à zéro, arrière-plan à arrière-plan, bordure en bas, bordure à bordure avec une opacité de 0,4, ombre à grande Et pour les animations de transition, la durée 300 est dépassée. Nous n'en avons pas encore fini avec ce cours. Continuons. Nous y ferons le signe du dollar, et avec un aperçu, nous ferons, encore une fois, le contrôle de l'opérateur Turner. S'il est ouvert, nous exécuterons traduction Y zéro et l'opacité à 100 Quatrièmement, nous allons traduire Y, complet et opacité zéro, afin qu'il s'éloigne de l'écran Dans ce div, nous appellerons le conteneur d'animation avec D 0.2. Nous y ferons un div avec des pics quatre, PT, deux, étant les trois derniers, l'espace Y un. Et à l'intérieur, nous vérifierons s'il est connecté. Et dans CS, nous montrerons à nouveau ces deux liens que nous avons là afin que nous puissions essentiellement copier cette condition comme ceci. Et ci-dessous le lien de tarification, que nous pouvons également copier. Ensuite, ci-dessous, nous n'avons pas encore terminé. Nous devrions également le copier. Donc, en gros, le contenu mural de ce conteneur d'animation se trouvait sur le bureau. Utilisons également un peu de literie par le haut. Et maintenant je vois que nous avons là l'icône. Passons donc à l'icône de l' animation. Là, nous devons définir l'écran moyen et supérieur en mode caché et cet indice 250. Et je vais maintenant ouvrir le menu de navigation et nous pouvons voir que cela devrait être un peu stylisé Cela devrait être stylisé différemment. Il nous manque donc colonne de flexion et de direction de flexion et également laissé zéro, et non 16. Et là, nous devrons ajouter des HRF. Faisons donc un tableau de bord. Pour le profil, nous allons créer un profil de tableau de bord. La tarification, c'est juste la tarification. Et pareil ici, tableau de bord avec profil et prix. Passons au CSS global à points et rendons le texte dégradé un peu plus brillant. Je dirais quelque chose comme ça, puis quelque chose comme ça et quelque chose comme ça. De plus, je passerais au héros et je pense que trois étapes simples permettent de dégrader le texte, peut-être de diminuer l'opacité 2,9 Enfin, nous allons créer un effet lumineux sur les boutons Passons à notre identifiant, et dans notre identifiant, nous ouvrirons un bouton avec effet lumineux là que nous allons commencer et cela ne prendra pas si longtemps, nous allons simplement importer un lien. Nous allons importer une icône, Chevron, à droite. Et nous y créerons une interface pour les accessoires lumineux des boutons, laquelle nous devrons définir le texte qui doit être sous forme de chaîne, et nous devrions avoir le texte à chaque fois, bien sûr, car il devrait y avoir quelque chose sur notre bouton et notre HRF, qui n'est pas obligatoire, mais qui serait une chaîne s'il y en a une Ensuite, nous créerons une fonction d'exportation par défaut, boutons lumineux, où nous prendrons le texte et le HF comme accessoires professionnels pour la croissance des boutons Et nous y retournerons dans cette fonction. Ce que nous allons faire là-bas, c'est une division. À l'intérieur de cette division, nous ajouterons un rembourrage à huit éléments disposition en fait une boîte flexible, puis des éléments à centrer avec ify center pour le centrer horizontalement et verticalement Dans ce div, nous allons créer le lien pour le lien, nous allons définir le HF sur HF et quelques noms de classes. Nous allons le regrouper, nous allons le rendre relatif en ligne flex, éléments à centrer avec Gap 2, arrondi complet, arrière-plan, noir, rembourrage horizontal à quatre, rembourrage vertical à deux, texte petit, texte blanc, transition vers tous et sur notre fond blanc, laissez-moi le mettre sur une autre ligne afin que vous puissiez voir sur une autre ligne afin que vous puissiez voir sur notre fond blanc avec une opacité de 0,05 Disons maintenant de la technologie Spen. Ce Spenteg sera en fait vide ne contiendra que le nom de la classe Pour le nom de la classe, il conservera position absolue dans le set zéro arrondi, puis le dégradé de fond vers la droite à partir de ce code couleur que j'ai là. C'est donc FFE 56 via un autre code couleur , FF 00 FF, et deux derniers codes couleurs, 00 et quatre fois F. Maintenant, définissons-y également une certaine opacité Nous allons définir l'opacité à 70, le flou à petit, transition à tous, et également pour un groupe, nous allons fixer l'opacité à 100 Passons à notre section consacrée aux héros. Et dans notre section consacrée aux héros, au-dessus de l' outil de prévisualisation du terminal, nous appellerons le bouton qui brille comme accessoire, nous y saisirons le texte, le prix de départ est disponible à 30 % avec un nous y saisirons le texte, le HRF qui ne se remplit pas, et maintenant nous l'aurons Bien sûr, nous devons encore ajouter le style. Passons donc à l'effet lumineux des boutons, et finissons là, en dessous du Spentec, j'en mettrai De plus, sans aucun contenu, il suffit de mettre le nom de la classe avec une position absolue dans le set 05, puis de l'arrondir complètement et de l'arrière-plan au noir. Ci-dessous, je vais mettre un Spentec, mais maintenant il aura un contenu Il comportera également des classes d' éléments flexibles relatifs à center, Gap two et Font Medium. À l'intérieur, il affichera l'accessoire de texte, et à côté du texte, il affichera l' icône Chevron Et pour les noms de classe, il aura une taille quatre, transition transform puis group Her avec translate X 0.5. Maintenant, nous pouvons aller sur notre page et nous y avons le bouton. Vous pouvez voir comment cela fonctionne sur Her et nous pouvons également vérifier sa réactivité. Voilà. Nous devons mettre à jour l'écran tonomble, et y mettre le texte au centre De plus, je vois que dans la section des héros, nous devons corriger ce titre. Nous pouvons simplement y aller. Le texte au centre indique que nous allons définir le poids maximum sur Excel, nous l'avons déjà indiqué. Réglons-le donc depuis un écran moyen ou depuis Excel. Sinon, poids maximum, définissons-le trop grand, peut-être même moins. Oui, nous pouvons le laisser petit et là nous le changerons en Excel. Ensuite, cela ressemblera à ceci sur les appareils mobiles ou à écran plus petit. 21. Page de profil: Peut passer à autre chose et accéder à la page de profil. Et pendant le profil, nous définirons le nom de notre chaîne, et le nom de la chaîne y sera automatiquement renseigné. Et il y sera enregistré pour notre utilisateur. Ainsi, une fois qu'ils auront défini le nom de leur chaîne dans l'onglet de profil, ils l'auront déjà là lorsqu'ils se connecteront à l'application et que nous voudrons l'utiliser. Ils ne feront donc que remplir le titre, puis, bien sûr, la miniature Passons maintenant au Schema point prisma et nous y ajouterons une nouvelle valeur Nous pouvons le faire en dessous du nom. Faisons-le comme le nom de la chaîne. Ce sera une chaîne de caractères et optionnel. Maintenant, je vais le sauvegarder. Je vais faire NPXprisma DB push. Hum, cela le redirigera vers ma base de données. Maintenant, dans mon tableau, j'ai aussi le nom de cette chaîne et je peux travailler avec, puis je vais aller la page de profil et nous pouvons commencer à coder là-bas. Nous allons commencer par quelques importations, abord Prisma depuis notre base de données Lip, puis off et user current depuis Clark next J server, rediriger et revalider Ensuite, nous allons commencer par définir une fonction asynchrone pour récupérer les données utilisateur depuis la base de données Faisons une fonction asynchrone, obtenons l' ID utilisateur des données sous forme Et à l'intérieur, on peut commencer. Nous allons d'abord interroger la base de données pour trouver un utilisateur avec un ID utilisateur donné. Enregistrons-le dans la variable utilisateur. Nous y attendrons Prisma point user find Unique, où l'identifiant se trouve dans le nom d'utilisateur, et nous sélectionnerons le nom de la chaîne parce que c'est ce que nous voulons, afin que nous puissions réellement le définir Et nous renverrons le nom du canal user point au cas où il ne serait pas trouvé, nous renverrons une chaîne vide. Nous pouvons continuer à définir le composant principal de la page de profil également en tant que fonction asynchrone. Exportez donc la page de profil de fonction asynchrone par défaut. Et d'abord, nous allons obtenir la session d'authentification. Donc, identifiant utilisateur off, que nous utiliserons depuis Clerk Library, et nous récupérerons les informations des utilisateurs authentifiés et les enregistrerons dans la variable utilisateur, nous attendrons donc l'utilisateur actuel Cela provient également de la bibliothèque du greffier. Ensuite, nous vérifierons si l' utilisateur est authentifié. Nous vérifierons si le nom d' utilisateur ou l'utilisateur n'est pas vrai, nous redirigerons vers une page de connexion. Ensuite, nous pouvons continuer à récupérer les données utilisateur de la base de données et nous les enregistrerons dans le nom du canal. Nous attendrons. Nous allons maintenant appeler la fonction que nous avons créée plus tôt, obtenir des données et le paramètre que nous y enverrons sera l'ID utilisateur, que nous obtiendrons du greffier. Cela permettra ensuite d'obtenir l'ID utilisateur. Interrogez la base de données et renvoyez le nom de canal de cet ID utilisateur, et nous l'enregistrerons dans cette variable de nom de canal. Vous allez maintenant définir une fonction asynchrone pour gérer la soumission du formulaire, c' est-à-dire le moment où l'utilisateur souhaitera mettre à jour le nom de ce canal Faisons donc une fonction asynchrone, publions des données. Nous allons commencer par marquer cette fonction comme une action du serveur avec use server. Cela signifie que cette fonction s' exécutera uniquement du côté serveur et qu'elle permettra un accès direct à la base de données. Ensuite, nous obtiendrons le nom de la chaîne à partir de la soumission du formulaire, et nous l'enregistrerons dans le nom de chaîne variable. Formez donc le nom du canal du point de données G. Si cela vous intéresse, les données du formulaire, en gros, c' est-à-dire les données saisies par l'utilisateur seront renseignées dans la zone de texte du formulaire Nous y allons dans une seconde. Nous mettrons ensuite à jour le nom de chaîne de l'utilisateur dans la base de données. Nous allons donc attendre la mise à jour du point utilisateur de Prisma point, et nous mettrons à jour où l'ID est l'ID utilisateur est une chaîne Et les données seront le nom du canal défini sur le nom du canal Oops, une chaîne Une fois cela fait, nous revaliderons le chemin sur le tableau de bord avec une barre oblique à Sympa. Nous avons maintenant également une fonction de post-data. Cela signifie qu'il ne nous reste plus qu'à renvoyer le TSX pour afficher la page de profil Nous allons donc créer le retour. Ensuite, nous allons y créer, nous allons commencer par le Ditech. Pour ce dftech, nous allons commencer par définir la largeur maximale sur Excel, et mélanger l'ordre pour la centrer, PY et Px 24 pour ajouter de la literie De plus, une étape importante que nous devons faire est d'accéder à la page de profil. Donc, dans notre navigation, cliquez ici sur la page de profil. Impossible d'accéder au site. Laisse-moi voir pourquoi. Oui, parce que je dois d'abord exécuter NPM Run Depth, car je l'ai fermé d'une manière ou d'une autre, vous pouvez voir qu'il n'y a rien, mais bientôt cela changera Continuons donc le codage. La prochaine chose que nous allons faire est d'ajouter un titre de page. Je vais donc en faire un titre avec un profil, et j'y définirai des classes de texte pour Excel. Police supplémentaire, suivi serré, et en grand format, je vais augmenter la taille du texte à cinq Excel, disons, je vais faire une marge vers le bas. Nous pouvons en faire six. Ensuite, je vais continuer avec un div qui sera là en tant que conteneur de cartes pour le formulaire. Dans ce div, je vais mettre un formulaire lui-même. Tout d'abord, organisons quelques cours. Arrondissons une grande bordure, un arrière-plan à la carte, du texte à la carte, un premier plan, une petite ombre et un peu de rembourrage Il se passe déjà quelque chose sur notre page de profil. Continuons avec le formulaire. Et pour ce formulaire, l'action sera de publier des données. Ensuite, nous allons créer un div à cet endroit. Nous y placerons l'espace Y quatre. À l'intérieur, on peut créer un autre div, y placer l'espace Y deux. Dans cette section, nous allons créer une étiquette. À cette étiquette, nous ajouterons d'abord qu'il s'agit du code HTML quatre pour le lier au nom de la chaîne. Ci-dessous, nous allons faire la saisie. Mettons-y l'étiquette elle-même, nom de la chaîne, et maintenant nous devons faire les cours. Pour les cours, nous utiliserons du texte petit, en police, en moyen, en début de ligne, aucun, et je pense que c'est tout. Ci-dessous, nous allons faire la saisie. Nous pouvons en fait le fermer là, et les attributs que nous ajouterons seront le type de texte, puis l'ID au nom de la chaîne, puis le nom au nom de la chaîne. Ensuite, sur la valeur par défaut, ce sera le nom de la chaîne au cas où l'utilisateur l' enregistrerait déjà une fois. Il l'aura là pour la prochaine fois, et lorsqu'il voudra le changer, il sera toujours là. Ensuite, nous allons définir les noms des classes. Faisons la disposition de la boîte flexible, hauteur jusqu'à dix, largeur trop complète, arrondissez-la trop grande, saisie de bordure, arrière-plan BG Alors du PX et du PY, quoi d'autre ? Le texte est trop petit, et maintenant en dessous, DIV, mais toujours au-dessus de celui-ci. Vérifions-le. Nous avons un div qui contient l'étiquette et entrée et le second div qui contiendra cette étiquette avec l'entrée, et nous y trouverons également quelque chose comme le bouton de soumission. Nous n'avons pas encore le bouton d'envoi , mais nous allons le corriger maintenant. Ouvrons donc l'explorateur de fichiers. Nous y aborderons les composants. Nous allons créer un nouveau fichier. Nous l'appellerons bouton de soumission. Et dans le bouton d'envoi, nous pouvons commencer à créer le bouton d'envoi que nous utiliserons sur notre page de profil. Tout d'abord, nous allons définir ici qu'il s'agit d'un composant client, puis nous allons importer le statut du formulaire d'utilisation depuis React Doom Ensuite, nous allons importer le bouton. Nous l'avons depuis Chet CN, et nous allons importer le chargeur depuis Lucid React Nous allons commencer par le bouton de soumission de la fonction d'exportation, et à l'intérieur, nous allons créer une nouvelle constante en attente, et nous utiliserons le statut du formulaire dessus. Donc, si ce formulaire est en attente, nous utiliserons cette variable. Faisons maintenant le retour à l'aide de ce bouton. Nous allons vérifier la variable en attente. Si c'est vrai, nous exécuterons cette position. Dans le cas où c'est faux, nous exécuterons cette position qui sera simplement soumise. Mais si c'est vrai et que le formulaire est vraiment en attente, nous nous chargerons également du dossier . Avec des classes de hauteur quatre à quatre, puis animez spin et margin pour écrire deux Ci-dessous, nous mettrons une mise à jour. Ensuite, nous irons sur notre page de profil. Nous allons commencer à taper leur bouton d'envoi. Nous allons l'importer. Il va maintenant arriver sur notre page. Vous pouvez maintenant voir que nous l' avons également sur la mise en page. Nous allons maintenant le tester. Mettons-y le nom de la chaîne de test, je soumets. Vous pouvez voir qu'il est en train de se mettre à jour. Le terrain a vraiment été sauvé. Nom du canal de test. 22. Afficher le nom du canal sur le tableau de bord: Et ce que nous devons faire, c'est accéder à une page de tableau de bord, la page Adashboard Tsix Et là, nous allons maintenant envoyer ce nom de chaîne que nous avons dans notre base de données à ce nom de canal accessoire enregistré Nous devons donc d'abord le mettre sur cette page, puis nous l'y enverrons. Commençons par la fonction de tableau de bord, et là nous allons faire une fonction asynchrone. Obtenez le nom de la chaîne, où nous enverrons l' ID utilisateur sous forme de chaîne, et là nous l'enregistrerons dans le poids de l'utilisateur Prisma point user point Find Unique, où l'ID sera l'ID utilisateur, et nous sélectionnerons le nom de la chaîne et nous renverrons le nom de la chaîne au cas où il s'y trouverait, sinon, ampithe Maintenant, nous avons la fonction, get channel name, et nous allons faire défiler la page, et au-dessus du retour, nous allons créer un nom de canal variable, et nous allons contourner la fonction get channel name où nous enverrons l'ID utilisateur, nous y arriverons Nous pouvons maintenant prendre le nom de cette chaîne et l'y envoyer comme accessoire Nous pouvons maintenant le tester. Passons à notre page. Passons d'abord au produit. Vous pouvez y voir le nom de la chaîne. Passons au profil. Changeons cela. Je vais cliquer sur Soumettre. Maintenant, je vais revenir au produit, et vous pouvez voir qu'il est là. Changeons cela, que je viens de changer. Alors je vais y remplir juste une vidéo de test. Je vais y mettre la miniature et cela fonctionne même avec le nom de la chaîne C'est donc aussi le cas pour la page de profil. Il est maintenant temps de tester notre site Web. Nous essaierons de nous inscrire. Ensuite, je vais continuer avec Google. Une fois connectés, nous pouvons voir que nous ne sommes pas encore abonnés, mais aussi de nouveaux éléments dans notre barre de navigation agit du produit lui-même, prix et également du profil où nous définirons le nom de la chaîne que nous utiliserons dans le produit. Cliquons sur s'abonner. Là, nous remplirons les données et nous arriverons sur la page de paiement effectué, et là nous aurons notre produit car nous sommes maintenant abonnés à l'application. Vous pouvez y voir que nous pouvons définir le titre de la carte vidéo, puis la tabine elle-même et le nom de la chaîne Pour le nom de la chaîne, nous allons en fait accéder au profil et comme nous allons maintenant l'utiliser, nous y définirons notre chaîne, quelque chose comme ça. Je vais le soumettre. Je vais maintenant revenir au produit, et là, vous pouvez voir que je l'ai prérempli, et chaque fois que je me connecterai l'application, je l' aurai là Il s'agit maintenant de l'outil de prévisualisation lui-même. Je vais y mettre une miniature pour le titre. Je vais également y mettre quelque chose, puis je pourrai voir la carte vidéo avec la miniature Maintenant, je peux randomiser la commande, et je peux également la changer en vue tablette ou en vue mobile Et si vous souhaitez gérer l'abonnement, nous avons le bouton qui nous redirigera vers Stripe où nous pourrons simplement le gérer. Et ce sera tout. Fonctionnalité simple pour microSAS avec une fonctionnalité pour tester le produit Et bien sûr, en cas de succès, plus de fonctionnalités peuvent être ajoutées. 23. Déploiement: Tout est prêt, et nous pouvons passer à la dernière étape, à savoir le déploiement sur Arsl Tout d'abord, nous allons ouvrir un Git Ignore et nous assurer que nous avons bien fichier, car nous ne voulons absolument pas le télécharger pour obtenir l'une de nos variables d' environnement. Ensuite, vous pouvez également vérifier le code JSON du package point et vous assurer que dans les scripts, vous l'avez défini pour votre Death Build et votre start. Nous devons maintenant publier notre projet sur Get up, nous allons donc le publier sur GU. Maintenant, sur Git up, nous pouvons voir que tout a été publié et diffusé au cas où vous apporteriez des modifications, par exemple, vous les mettrez simplement en place dans votre contrôle de source. Vous y désactiverez une mise à jour du message de validation. Git Ignore, par exemple, vous allez le valider, puis il sera transféré dans Git up. Et une fois que nous l'aurons connecté à Versal, il y sera également automatiquement , car Versal lancera automatiquement le cycle de déploiement pour vous et déploiera sur le site en ligne onvrslot com Vous choisirez comment vous souhaitez vous connecter. Je vais continuer avec Git AP. Sur ce tableau de bord, je vais cliquer sur un nouveau projet, et je vais configurer celui que j'ai envoyé à Git. Ce sera celui-ci. Je vais cliquer sur Importer. Et là, vous devez maintenant définir toutes les variables d'environnement, où vous placez la clé, qui sera le nom de la variable et la valeur, qui sera sa valeur. Et vous allez accéder à votre fichier et à partir de là, vous allez prendre ces valeurs. Vous le mettrez là, vous cliquerez sur Ajouter plus et vous y mettrez toutes les valeurs , du greffier à la bande, etc. J'y mets toutes mes variables d' environnement, et il y a la dernière URL publique suivante. Et celui-ci, nous le remplirons de valeur après déployé avec le nom de domaine que nous obtiendrons de Versal Je vais maintenant cliquer sur Déployer. Et j'attendrai que la construction soit terminée. Vous pouvez maintenant le voir pendant le déploiement. Attendons donc un peu. Nous pouvons voir que l'erreur est définie mais que nous ne l'avons jamais utilisée dans Stripe route Ts. Passons au code VS. Cela signifie que dans le code VS, nous passerons à la route Stripe et nous vérifierons l'erreur définie mais jamais utilisée. Nous allons juste utiliser l'erreur, nous allons donc mettre une erreur point sur la console. Nous y mettrons un message. La vérification de la signature du webhook a échoué, et nous y indiquerons l'erreur La prochaine erreur concerne l'équipe d'utilisation Nous supprimerons simplement l'importation. Ensuite, le bouton et le lien dans la page TS six. Encore une fois, nous supprimerons les importations. Maintenant, l'erreur suivante était dans le conteneur d'animation, je vais donc ouvrir à nouveau le code VS, et là j'importerai également des accessoires d'animation Nous avions le type d'ANA pour la transition, la sortie initiale et l'animation. Au lieu du type ANA, nous allons placer les accessoires d'animation, et pour animate, nous allons créer des accessoires d'animation pour l' initiale, pour la sortie de sortie et pour la transition et pour Pour les autres erreurs, nous allons d'abord entrer dans la saisie, puis nous allons simplement la redéfinir et y placer le type de sondes d' entrée pour réagir, puis nous pouvons copier-coller ces attributs HTML d'entrée, et nous pouvons supprimer les sondes d'entrée avant cela et nous pouvons supprimer les sondes d'entrée Il suffit donc de le supprimer là, de l'enregistrer, et nous pouvons passer à la zone de texte. Et dans la zone de texte, nous ferons la même chose. Nous y mettrons des sondes de zone de texte qui deviendront des attributs HTML de la zone Tex à point de réaction, et nous supprimerons celui d'avant, y laissant juste celui-ci, et ce sera Maintenant, pour résoudre les autres problèmes, vous allez créer un fichier appelé nexdot config dotgs et y mettre ce code Nous pouvons également supprimer le point js. Dans celui-ci, nous allons donc définir la prochaine configuration. Le prochain fichier que nous allons créer est le JSON versal point. Et dans VrsalJSN, nous allons mettre la commande build et la commande install et y définir ces commandes y définir ces Pour le premier, Prisma génère et construit ensuite, et pour le second, installez NPM Ensuite, nous passerons au package point JSON, et en dessous du script Lind in, nous ajouterons également post Install et y définirons Prisma generate Et ce que nous ferons également, c'est que dans le package JSON, au lieu de cette commande de construction, vous y mettrez cette commande pour compiler cette commande, Prisma generate et next build Une fois que vous aurez effectué toutes ces modifications, vous passerez au contrôle de source. Vous allez tous les mettre en scène, y mettre un message et le valider. Ensuite, vous irez chez Versal et vous n'aurez même pas besoin de démarrer le nouveau déploiement Il vous suffit de cliquer sur votre projet, cliquer ici sur Déploiements, et la nouvelle version devrait commencer Si ce n'est pas le cas, répétez simplement le processus déploiement ou recherchez le bouton de redéploiement Tout devrait bien se passer ou du moins avec mon code et les modifications que je vous ai montrées, tout fonctionnait pour moi. Ce que nous allons faire, c'est prendre ce domaine et nous concentrer sur notre projet. Ils s'intéressent aux réglages. Ils s'intéressent aux variables d' environnement. Je vais simplement cliquer ici sur la nouvelle variable, et j'y mettrai la valeur du domaine que j'ai copié. Vous devez également y mettre l'URL publique HDDPS Next était le nom, je crois Nous allons maintenant cliquer sur Enregistrer modification a été modifiée et juste un petit avertissement, assurer que l'URL de la base de données et l'URL directe sont sans les guillemets au début et la fin et qu'elles sont simplement collées comme ceci Dans notre projet, nous allons passer aux paramètres. Ensuite, nous passerons à la protection du déploiement, et nous la désactiverons. Maintenant, nous allons le sauvegarder. Lors de la configuration du point de terminaison dans Clerk, nous devons également créer leur API Webhooks Clerk et l' enregistrer comme ceci De plus, juste après le déploiement, assurez-vous de le tester auprès d'un utilisateur qui n'est pas à la fois dans Clerk ou Superbse Juste avec un tout nouveau compte Google, par exemple, si vous n'avez aucun des deux pour le tester correctement Maintenant, nous allons également tester la bande, je vais donc faire une connexion par bande. Et là, je devrai mettre le domaine avec des webhooks API, Stripe Et maintenant, sur la page de tarification, lorsque nous essayons de nous abonner, nous avons reçu une erreur, et c'est parce que nous avons quelques problèmes avec cette URL de réussite et d'annulation. Passons en fait aux scripts Lip Slash et à ces nouveaux changements Vérifiez ici l'URL du domaine, est égale à true à la fin de l'URL de réussite et à l' URL d' annulation, ainsi qu'à l'ID client des métadonnées. Ensuite, dans la page de tarification de l'application, vous allez créer cette nouvelle variable pour l'URL du domaine. Ensuite, nous vérifierons l'URL du domaine. Au cas où elle serait absente, nous enverrons une erreur et, au lieu de cette URL de domaine qui figurait dans l'URL d'abonnement pour Stripe, nous définirons l'URL du domaine simplement l'URL du domaine maintenant que nous l'avons définie. Avec ces deux modifications apportées à page de tarification des applications dotix et à Stripe point Ts, vous pouvez le voir dans le dépôt lui-même, d'ailleurs, nous passerons à la page de tarification DTaix et voici les autres modifications, et là nous définirons l' et là nous Nous allons maintenant nous assurer que vous validez toutes les modifications et que vous les transférez dans votre dépôt. Ensuite, vous attendrez le déploiement, et maintenant nous sommes prêts à tester même le Stripe. Je vais cliquer sur S'abonner. Là, je vais renseigner les informations. Et après un paiement réussi, nous pouvons voir que nous sommes maintenant abonnés et que nous pouvons utiliser l'application. Et notre abonnement est actif dans SupaBase. Et de mon côté, c'est tout pour le tutoriel.