Construire une application de location de vélo décentralisée sur la chaîne intelligente Binance

1. Bienvenue et aperçu du projet: Bonjour à tous et bienvenue dans mon cours. Dans ce cours, nous allons construire une application décentralisée de location de vélos sur le réseau de test de la chaîne intelligente de finance, nous allons commencer par coder un contrat intelligent et mettre toute cette logique en place. ensemble. Ensuite, nous allons le déployer dans la chaîne intelligente financière qui le teste. Ensuite, nous allons construire notre interface utilisateur. Nous allons donc utiliser React. Nous allons créer une page d'accueil dans une page de tableau de bord. Enfin, nous allons relier ce front-end à leur contrat intelligent déployé afin que nous puissions interagir avec la blockchain pour effectuer des transactions et extraire des données dans toutes ces bonnes choses. Et parfois, il vaut mieux le voir en action. Voici donc un aperçu de l'application finale dans une explication de son fonctionnement. Bon, donc voici l'application. Imaginez donc que vous avez beaucoup de pistes cyclables dans le centre-ville, vous achetez un peu d' espace de bureau , que vous y mettiez un tas de vélos et que vous créez une entreprise de location de vélos. Mais au lieu d'accepter de l'argent comptant, une carte de débit ou autre, vous allez accepter le B&B donc si je voulais venir là-bas et louer un vélo, je viendrais sur cette application. Si c'était ma première fois, je connecterais d'abord mon portefeuille. Cliquez donc sur Connect wallet et connectez votre portefeuille. Et puis je cliquerais sur Choisir mon vélo. Et ici, nous avons un formulaire. Il est écrit : Bienvenue, veuillez entrer votre prénom et votre nom de famille pour vous inscrire. Vous devez vous inscrire en tant que locataire sur le contrat intelligent pour vérifier les vélos. Je vais juste passer le test Travis et cliquer sur Submit. Ensuite, je confirmerai la transaction dans MetaMask. Et au fait, je regarde ces bas frais d'essence, c'est comme 0,20$. Confirmez donc. Une fois que c'est fait, mon tableau de bord affichera mon tableau , car je serai locataire sur le contrat intelligent. Donc, il est dit bienvenue, Travis ou quel que soit votre prénom. Voici vos statistiques. Il y a donc un crédit B&B. Je peux donc ajouter du crédit à mon compte. Mon montant dû, mon nombre de minutes de trajet, si je vérifie un vélo et que mon statut de vélo est actuellement rouge, ce qui signifie que je n'ai pas de vélo vérifié. Nous avons maintenant deux formes. L'un pour créditer votre compte, l'autre pour payer vos cotisations, et nous avons le choix entre trois vélos. Et je peux venir ici voir un vélo et vérifier les antibiotiques. Allons donc créditer notre compte. Je vais ajouter 0,2 B&B pour créditer mon compte. Mon total est donc de 0,2 avec quelques frais d'essence minimes. Cliquez donc sur Confirmer. Et lorsque cette transaction sera terminée, j'aurai un crédit de 0 à B et B. Maintenant, je suis prêt à vérifier mon vélo. J'ai un certain mérite ici. Et je veux vérifier, disons que je veux voir ce vélo du milieu. Cliquez donc sur le paiement et confirmez-le. Et ce qui va se passer ici, c'est statut de ma moto va devenir vert, ce qui signifie que je fais vérifier un vélo actuellement. Au cours de mon trajet, les minutes commenceront à augmenter et je pourrai sortir mon vélo pour une balade. Et nous sommes toujours en attente. On y va. Le statut de mon vélo est vert. Le vélo est gratuit à emporter pour une promenade. Je vais revenir dans environ sept ou huit minutes et nous allons vérifier la moto et je vous montrerai le reste de l'application. Ok, donc ça fait environ huit minutes, alors revenons à la moto. Je vais donc venir ici et cliquer sur l'enregistrement et confirmer la transaction. Maintenant, ce qui va se passer, c'est que le statut de ma moto redeviendra rouge, ce qui signifie qu'il n'est pas vérifié. Mon B&B do sera totalisé dans mes minutes de trajet totaliseront également. Mon statut de vélo est donc rouge. Mon B&B est-ce que j'ai 0,005 B & B en quelques minutes de trajet ou à huit heures. Donc maintenant je peux payer mon B&B, faire 0,005 BNB. Et cliquez sur Soumettre. Confirmez cela. Maintenant, une fois que je paierai mon solde, ça va passer à 0. Mes minutes de trajet passeront à 0 et statut de mon vélo sera de retour. Je vais pouvoir vérifier à nouveau un vélo. Parce que si vous avez un solde, vous n'êtes pas en mesure de vérifier un vélo parce que vous devez payer votre solde, ce qui empêche le propriétaire d' avoir à chasser les gens. C'est une façon dont le propriétaire n'a pas à être super impliqué avec ses clients. Il a juste besoin de fournir le vélo. Parce que si vous ne payez pas votre solde, vous pouvez acheter un autre vélo. Maintenant, dans le cadre de notre contrat intelligent, nous avons également beaucoup de chèques en place pour nous assurer que les locataires ne font pas choses qu'ils ne devraient pas aimer essayer payer mon travail lorsque je n' ai pas de montant dû. Donc, si je clique sur Soumettre, cela devrait générer une erreur. Je devrais avoir une diapositive d'erreur ici, me donnant une sorte de message d'erreur. Oui, l'exécution est revenue. Vous n'avez rien dû pour le moment ? Si j'essaie de faire autre chose comme vérifier un antibiotique que je n'ai jamais vérifié, je devrais aussi recevoir un message. Veuillez d'abord jeter un coup d'œil à un vélo. Et c'est essentiellement l' essentiel de l'application. De plus, à la toute fin du cours, il y a une leçon bonus où nous construisons un tableau de bord du propriétaire. Ce tableau de bord, il va afficher le montant total du contrat, le montant qui appartient aux propriétaires, le bouton qui permet au propriétaire de retirer son montant. Maintenant, vous vous demandez peut-être comment un propriétaire en tire-t-il de l'argent ? Donc, si quelqu'un vient ici et crédite son compte avec 10$, il crédite le contrat intelligent de 10$, mais ces 10$ lui sont alloués. Ainsi, quand ils paient leur don, cela résulte de leur crédit dans montant qu'ils paient devient en fait les propriétaires. Ainsi, chaque fois que quelqu'un paie sa Rosée de montagne, cela est transféré au propriétaire. Nous allons donc créer à la fin un tableau de bord bonus et propriétaires où ils pourront réellement voir ce montant et retirer ce montant. J'ai donc eu beaucoup de plaisir à construire ça et je sais que vous le ferez aussi. Alors, qui devrait suivre ce cours ? Nous verrons si l'un de ces scénarios vous séduira. Premièrement, vous êtes peut-être à la recherche d'un projet Web trois solide à ajouter à votre portefeuille. Alors peut-être que vous apprenez le développement de la blockchain et que vous voulez décrocher cet emploi et vous lancer dans ce secteur, mais vous avez besoin de projets solides à ajouter à votre portefeuille. Alors ce cours est fait pour vous. Peut-être avez-vous fait du développement de la blockchain avec un thorium ou sur la machine virtuelle Ethereum. Et vous vous demandez comment cela fonctionne avec B&B ou comment utiliser le BNB et le remix, ou comment vous déployez sur le réseau de test BSC, alors vous trouverez ce cours bénéfique. Ou peut-être que vous voulez simplement tout le paquet. Vous souhaitez apprendre comment créer un contrat intelligent, comment le déployer et comment interagir avec lui à partir d'une bibliothèque comme React. Ou peut-être souhaitez-vous voir comment nous pouvons afficher des erreurs de solidité sur le front end pour informer notre utilisateur lorsqu'il a commis une erreur. Ou peut-être êtes-vous simplement intéressé par façon dont une application comme celle-ci fournirait un revenu durable au propriétaire. Si l'un de ces éléments vous intéresse , je pense que vous êtes au bon endroit. Il y a maintenant quelques conditions préalables. Premièrement, vous devriez avoir des connaissances de base en développement Web. Donc, vous auriez probablement dû apprendre le HTML et le CSS et avoir construit quelques pages Web faciles. Deuxièmement, vous devriez avoir une compréhension de base de JavaScript et réagir. On va donc utiliser un réactif ce cours et on s' y attend. Ce ne sera pas fou comme si nous n'allons pas utiliser Redux et avoir tous ces trucs élaborés. Nous allons essayer de rester simple, mais vous devriez toujours avoir ces connaissances de base. Et enfin, vous devriez avoir une compréhension de la blockchain et de son fonctionnement, ce que je suppose que vous faites ou vous ne seriez pas ici. Et pour ce qui est de la solidité, vous n'avez pas besoin de connaître la solidité pour suivre ce cours car j'ai une leçon facultative avec une base de solidité pour vous mettre au courant si vous ne le savez pas. Je pense que vous allez vous amuser autant que je l'ai fait à construire cette application. Commençons donc. 2. Créer notre contrat intelligent: Donc, si vous allez sur remix.ethereum.org, nous allons utiliser l'IDE de remixage comme nous le devrions. Changez mon espace de travail en espace de travail par défaut. Cliquez sur les contrats et créez-en un nouveau. simplement avec le bouton droit sur un nouveau fichier. Et appelons ça la chaîne de vélo parce que je ne suis pas très douée pour inventer des noms, mais la chaîne de vélo, la blockchain, un peu accrocheur. Ensuite, comme toujours avec solidité, vous allez le placer dans votre identifiant de licence. Ceci est donc commenté par l'identifiant de licence SPD MIT, ce qui signifie dîner open source, déclaration pragma, solidité pragma. Ensuite, on va juste faire 0 point 0 , parce que c'est un bon nombre. Et nous allons dire contrat et nous appelons cette chaîne de vélos. Et nous y voilà. N'est-ce pas excitant d'avoir un nouvel écran pour codon ? Quoi qu'il en soit, j'ai eu quelques plaintes et une vidéo précédente disant que ce n'était pas assez grand. Je peux agrandir cette partie du code, mais pas vraiment ici. Alors, portez avec moi. Donc, comme nous le faisons d'habitude, commençons par un pseudocode et ça va se passer quelque chose comme ça. Ajoutez-vous en tant que locataire car vous devez vous ajouter comme quelqu'un qui peut louer un vélo ou acheter un vélo. Vous y allez et vous allez vérifier le vélo. Enregistrez un vélo. Donc, vous vérifiez le vélo, vous le partout, puis vous l'enregistrez. Obtenez la durée totale d'utilisation du vélo. Combien de temps étiez-vous sur le vélo ? Ensuite, nous voulons des choses comme obtenir solde du contrat simplement parce qu'il est bon d' avoir ces informations et d' obtenir spécifiquement le solde des locataires. Et ensuite, avec cette durée totale, nous devons être en mesure de fixer le montant dû, comme le montant du loyer ou des O. Définissez donc le montant dû. Et je pense que c' est un bon début. Commençons par, ça va partir d'ici. Et j'ai cette erreur ici. C'est parce que je n'ai pas mis de point-virgule derrière ça. Je suis en JavaScript ces derniers jours, alors supportez moi si j' oublie le point-virgule. Très bien, ajoutez-vous en tant que locataire. Et en fait, avant de le faire, une chose que j'aime faire est de créer un propriétaire. Donc, si quiconque déploie le contrat intelligent, c'est le propriétaire au cas où il voudrait restreindre les choses à lui-même. Pour ce faire, nous allons simplement mettre une variable ici, une variable de stockage de propriétaire de type adresse. Nous allons créer un constructeur. Et nous allons configurer le propriétaire pour envoyer un message à l'expéditeur de points. Ce que cela fait, c'est ce constructeur s'exécute lorsqu'il est déployé pour la première fois. Ainsi, lorsque ce contrat sera déployé pour la première fois, l'expéditeur qui sera la personne le déploiera sera le propriétaire. Les contrats intelligents sont désormais immuables. Ils sont sur la blockchain, ils ne peuvent pas être modifiés. Ce constructeur s'exécute donc une fois et le propriétaire sera défini. Nous allons donc mettre ça avant le pseudocode. Voici donc le premier. Ajoutez-vous en tant que locataire. Nous allons donc créer une structure appelée locataire et nous allons définir certaines propriétés. Donc d'abord, adresse, adresse de portefeuille payable. Parce que chaque locataire possède une adresse portefeuille, tout ce qui se trouve dans le Web 3 est une adresse portefeuille. Nous pouvons identifier la personne que nous pouvons payer, la personne peut payer d'autres personnes. Et c'est un type d'adresse et nous la définissons comme étant payables. Au fait, si vous êtes comme, je n'ai aucune idée de ce que sont ces trucs, ce pragma dans ce payable. J'ai créé une vidéo YouTube il n'y a pas si longtemps. Il dure environ une heure. Il s'appelle Apprendre la solidité en une heure. Si vous voulez d'abord vérifier cela, je vous expliquerai tous les types de données ne traiteraient pas est ce qu'est un payant. Et nous allons passer en revue des choses comme les fonctions et les boucles et nous allons créer un contrat intelligent assez facile pour que je puisse vous apprendre comment fonctionne Solidity. Donc, si vous n'avez aucune idée de ce que je fais, allez regarder ça, puis revenez à ça. Je pense que ce sera très bénéfique pour vous. Je vais mettre un lien ci-dessous à cela. Encore une fois, il s'agit d'une vidéo YouTube gratuite. Ils ont donc une adresse portefeuille. Ensuite, nous allons faire String FirstName. Et bien sûr String LastName. Parce que même s'il s' agit d'une adresse portefeuille, nous voulons une sorte de personnalité derrière elle. Ensuite, nous allons fixer quelques Booléens pour que Bool puisse louer, peuvent-ils louer, sont-ils autorisés à louer ? Ne sont pas autorisés à louer. Vous verrez comment cela fonctionne en une minute. Bool active, sont-ils actifs ? Sont-ils actuellement sur le vélo lorsqu'ils le vérifient ? Il sera actif lorsqu'ils le réintègrent , ils ne seront pas actifs. L'équilibre. Ils peuvent envoyer l'argent sur leur solde pour couvrir les frais. Et puis quelques autres Nations Unies. Le montant dû est donc le montant qu'ils doivent payer. Ils sortent donc le vélo et cela coûte autant de minutes pour un montant total jusqu'à ce montant. C'est ce qui est dû. Ensuite, vous êtes allé commencer une fin afin que nous puissions suivre l'heure de début et de fin afin que nous puissions obtenir cette période. Vous avez fini. Et c'est tout. C'est tout ce que je veux avec mon locataire. Et nous l'avons créé dans une structure qui ressemble à un objet. Si vous avez regardé ma solidité Learn dans une vidéo d'une heure, ce que nous avons fait, c'est que nous avons créé un ensemble de locataires, puis nous avons fait une boucle pour trouver l'index que nous voulions. Chaque fois que nous voulions un locataire en particulier, nous cherchions l' adresse du portefeuille, obtenions cet indice. Nous saurions que c'est le locataire. Dans cette vidéo, nous allons faire quelque chose de différent. Nous n'allons pas utiliser de tableau. Nous allons utiliser une carte, ce qui, à mon avis, facilite grandement la tâche. Et vous n'avez pas à faire face aux boucles, ce qui, parfois, s'il y en a trop ou s'il y a un nombre inconnu de boucles, cela pourrait entraîner des frais d'essence élevés. Nous allons donc faire une chose appelée cartographie. C'est comme un dictionnaire, c'est une paire clé-valeur. Effectuez un mappage, et la clé sera l'adresse. La valeur sera le locataire. allons le rendre public, et nous appellerons ça des locataires. Nous pouvons donc rechercher un locataire en fonction de l'adresse de son portefeuille. Nous n'aurons pas à parcourir quoi que ce soit. On peut juste dire que voici l'adresse du portefeuille, donnez-moi le locataire. Et enfin, nous pouvons faire en sorte que cette annonce renter fonctionne pour les paramètres d'air. Ce sera les paramètres du locataire. Nous allons donc dire adresse. En fait, il est probablement plus facile de copier ceci, de le coller, car nous allons mettre exactement la même chose que les paramètres. Sortez ces points-virgules et mettez des virgules. Et au fait, c'est la commande D. Si vous sélectionnez quelque chose et que vous effectuez la commande D sur un Mac, vous pouvez simplement sélectionner l'instance suivante, puis les modifier tous en même temps. Et je n'ai pas changé celui-là. Et puis je peux prendre comme les espaces blancs et revenir en arrière. Et nous y allons, placez un espace entre eux et ils sont tous en ligne. Tous ces éléments correspondent donc aux propriétés et au locataire. C'est tout ce que c'est. Enlevez ensuite cette virgule de et mettez mes crochets bouclés. Et à partir de là, nous voulons ajouter ce locataire à notre cartographie. Et pour ajouter à une cartographie, vous ne faites que des locataires, n'est-ce pas ? Parce qu'ils cartographient s'appelle les locataires. Et entre parenthèses, vous mettez l'adresse du portefeuille parce que c'est notre clé. Les adresses sont essentielles. En passant, c' est le type, le type est adresse. Dans notre portefeuille, l'adresse sera la clé. La valeur sera le locataire. Ainsi, pour ajouter quelque chose à une carte, vous utilisez simplement comme l'adresse du portefeuille du locataire est égale à un ou quelque chose , ajoute une clé d' adresse de portefeuille dans une valeur de 1. Mais au lieu d'un, nous voulons un locataire. Nous allons ajouter un locataire avec les mêmes valeurs ci-dessus. Adresse du portefeuille, prénom. Le nom de famille peut louer. Actif, équilibré. Et laissez-moi allumer. Ont-ils un enveloppement de mots Word Wrap et éditeur ne semble pas l' être. Oh, on y va. J'ai dû le couper et le réduire. Mais c'est ici dans ces options. Équilibre, commencez une fin. Ce sont nos paramètres. Nous allons donc utiliser cette option Ajouter un loyer ou une fonction. Nous allons mettre en place tous les paramètres que nous voulons et cela va nous créer un nouveau locataire. Sur cette carte. Ça va juste arriver, c'est comme une poussée. En JavaScript. Nous ne faisons que pousser un locataire dans ce mappage ou ce dictionnaire ou ce que vous voulez appeler. Maintenant, j'ai une erreur. Que se passe-t-il ici ? Aucune visibilité spécifiée. Et oui, nous voulons rendre cela public. Nous avons une autre erreur et l'emplacement des données doit être une mémoire appelée données. Donc, les chaînes doivent être de la mémoire sont appelées données, que nous allons utiliser de la mémoire. Et cela devrait effacer l'erreur. Génial. C'est donc notre location ou notre fonction publicitaire. Si j'ouvre l'onglet Déployer ici, et que je choisis simplement la machine virtuelle JavaScript. Cliquez sur Déployer. Nous pouvons tester cela. Ajoutez donc un locataire. Laissez-moi donc mettre mes valeurs ici. Je vais donc choisir juste une adresse ici et une adresse de compte parmi laquelle vous avez le choix. Vous pouvez en utiliser un comme propriétaire et les autres ne sont pas propriétaires, mais pour le moment, cela n'a pas d'importance. Je vais donc copier le premier, le coller ici. Maintenant, FirstName, je vais mettre Travis. Nom de famille. Mettons le test. Et ensuite, je peux louer. Tellement vrai, tout le monde peut louer initialement actif, faux. Et ensuite, les quatre prochains seront 0, donc 0000. Essayons donc d'ajouter un locataire. En bas, ici. On dirait que c'est un succès. Et si je choisis les locataires et que je mets l'adresse de mon portefeuille, ce qui est notre clé, nous pouvons le rechercher en cliquant sur les locataires. Et je suis là. Voici toutes les valeurs du locataire que je viens d'ajouter, donc tout va bien. Maintenant, fermez cela et continuez. Très bien, donc le prochain pseudocode est de vérifier un vélo. Nous allons donc faire une fonction appelée checkout. Et nous allons passer une adresse. Comme je l'ai dit, vous allez voir ça beaucoup parce que je vais vérifier un vélo et quand je transmettrai l' adresse de mon portefeuille pour qu'il puisse s'identifier, c'est moi qui vérifie le vélo. Et je veux le rendre public. Et à l'intérieur, je veux retourner quelques-unes de mes propriétés locataires, deux valeurs différentes. Donc, quand je vérifie quelque chose, je veux être actif à vrai, n'est-ce pas ? Donc. Adresse du portefeuille des locataires, point actif. Il s'agit donc de la largeur du locataire, cette adresse de portefeuille dans le mappage, point actif est égale à true. Donc, je viens de vérifier un vélo. Je suis actuellement actif. La prochaine chose que je vais faire, c'est que je vais enregistrer cet horodatage. Ainsi, l'adresse du portefeuille point point start correspond à l'horodatage par bloc, point. Maintenant, cela était utilisé pour simplement taper maintenant. Mais maintenant, dans la solidité, vous utilisez l'horodatage des points de blocs. Cela va donc nous donner un horodatage et c'est en partie convertisseur. Donc c'est un horodatage Unix qui n'est pas comme un mois, une année. Il s'agit d'un horodatage unique Unix, qui est un uint8, qui date toutes dans Solidity RUN. Nous allons donc définir l'heure de début. Et nous voulons aussi, si vous y réfléchissez, s'ils vérifient un vélo, nous devons définir la location de la voiture sur faux. Ça commence, je peux louer. n'y a aucune restriction pour moi, mais une fois que j'ai vérifié un vélo, je dois régler ce qui peut être loué faux parce que j' ai déjà un vélo dehors. Permettez-moi de le sélectionner, coller et de louer faux, cette personne ne peut pas louer un vélo parce qu'elle en a déjà un. Et je pense que c'est bien. Nous pouvons donc maintenant vérifier un vélo. Nous allons maintenant enregistrer une fonction vélo, l'enregistrement, l' adresse, le portefeuille, l'adresse, le public. Et nous allons faire quelque chose de similaire ici. Nous devons revenir à faux actifs parce qu'ils ne sont plus sur le vélo. Nous devons fixer l'heure de fin. Maintenant, nous définissons l'heure de début, nous devons définir l'heure de fin. horodatage de fin est bloqué, cela nous donnera l' horodatage de l'enregistrement. Enfin, nous voulons fixer le montant dû. N'oubliez pas qu'ils ont cette propriété due. C'est ce qu'ils doivent fonction de la durée pendant laquelle ils ont sorti le vélo. Nous allons le faire dans quelques minutes. Je vais donc simplement le mettre ici, pour fixer le montant dû. Et c'est l'enregistrement d'un vélo pour que nous puissions ajouter un locataire, nous pouvons vérifier le vélo et vérifier le backend du vélo. Ensuite, obtenez la durée totale d'utilisation du vélo. Et créons une fonction pour cela. Nous appellerons la fonction obtenir durée totale et l'adresse, l'adresse du portefeuille. Nous transmettons l' adresse du portefeuille pour obtenir un identifiant. Public dans ce cas renvoie un U, et donc il va nous renvoyer un total, la durée totale sous forme d'un entier, d'un U et d'un entier non signé. La première chose que nous pouvons faire est soustraire l'heure de fin de l'heure de début. N'oubliez pas qu'il s'agit d'un horodatage Unix, donc nous pouvons simplement soustraire les deux. Mais je vais créer une autre fonction pour cela. Je n'ai donc pas à saisir beaucoup de paramètres ici. Je vais appeler cette période du locataire. Tu veux commencer, tu as fini. Et je vais garder cela interne au contrat. Et il ne fait rien de tout cela, ne modifie pas le contrat, touche vraiment des variables en dehors de cette fonction. Je peux donc l'étiqueter comme pur. S'il interagit avec d' autres variables, je pourrais le faire comme vue, mais pur signifie que je ne touche aucune variable. Je fais tout mon travail ici même dans la fonction parce que je transmets ces deux valeurs. Et cela renvoie une uint8. Et c'est aussi simple que de dire retour, fin moins début. Revenons donc à ma fonction ici. Je peux dire que vous et timespan est égal au locataire, à l' heure, à l' adresse du portefeuille des locataires, au point de départ. Et nous verrons un autre paramètre. Je vais mettre mon heure de début dans mon enzyme. Ce sera donc la même chose. Mais l'horodatage de fin, le ND, qui devrait faire la différence entre les deux. C'est donc en quelques secondes. Je veux que ça se passe en quelques minutes. Je peux donc faire uint8 timespan et minutes est égal à temps divisé par 60. 60 secondes en une minute. Cela devrait le faire. Puis retournez le temps et les minutes. Et j'ai une erreur ici, elle dit que la mutabilité de l'état de la fonction peut être limitée à la vue. Je peux donc mettre ici un point de vue. Il n'est donc pas aussi bas que pur. Pure ne lit même pas d'autres variables. Il ne traite que de cette vue de fonction qui lira d'autres variables mais n'altère pas la blockchain de quelque façon que ce soit. Ensuite, si je devais changer une valeur ou quelque chose, cela me dirait que je dois supprimer la vue. C'est tout ce que c'est. Encore une fois, si vous voulez un plongeon profond sur ce sujet, vérifiez cette solidité et 60 minutes où je passe en revue toutes ces choses en détail. Allons-y bien. Nous avons donc la durée totale des files d'attente de pourquoi. Nous avons donc le temps, la durée totale en minutes, et nous pouvons passer au pseudocode suivant. Ce ne sont donc que des méthodes simples que nous pouvons utiliser. Ainsi, comme obtenir le solde du contrat, nous pouvons faire fonction balance of view public retours, un uint8. Tout ce que nous faisons, c'est retourner, adresse. Cette balance de points. Maintenant, ça a l'air moche et tu es probablement comme, quoi ça sert ? Eh bien, il s'agit du contrat retourné, l'équilibre des contrats et c'est un peu une convention. Vous le verrez dans la solidité. Il suffit de l'accepter, de le mémoriser, et si jamais vous en avez besoin, utilisez-le. Je peux donc obtenir le solde à chaque fois que vous retournez le solde adresse de ceci, c'est le contrat. Et puis, pour obtenir le solde des locataires, faisons cette seule fonction, le solde du locataire. Et nous voulons savoir quel Renner. Allons donc adresser le portefeuille, l'adresse. Retour en vue publique. Vous finissez. Et nous voulons simplement restituer le solde de ce locataire en particulier. Donc, le portefeuille des locataires adresse la balance des points, un point-virgule. Nous avons donc des locataires équilibrés, nous avons le solde du contrat, la durée totale d'utilisation du vélo. La prochaine chose que nous voulons faire est de fixer le montant dû. Maintenant, pour cela, il y a plusieurs façons de le faire. Ce que je vais faire, c'est que je vais dire toutes les cinq minutes qu'ils ont le vélo. Je vais facturer 0,005 B & B , donc le prix du B&B USD. Très bien, donc 0,05, c'est 2$. Donc, toutes les cinq minutes, vous allez payer 2$. Je vais donc utiliser ce 0,005 BNB. Et une chose que vous demandez peut-être, si vous ne l'avez pas déjà demandé, c'est remix.ethereum.org. Que faisons-nous avec B et B ? Eh bien, la chaîne intelligente binaire utilise la même quantité de décimales qu'un théorème. Le théorème possède ce système à 18 décimales, ce qui lui permet d'avoir de petites parties fractionnaires d'un éther. Et c'est la même chose sur la chaîne intelligente ByteDance. C'est 18 décimales. Sur la chaîne à baïonnettes, je pense qu' elle est huit, mais la chaîne intelligente de biomasse est de 18 ans. Donc, techniquement, nous pouvons faire n'importe quoi ici dans l'éther. Et il sera transféré à la chaîne financière lorsque nous allons le déployer. En fait, quand nous allons le tester , vous verrez ici dans une minute. Cela signifie que je peux prendre ce 0,005 et déplacer cette décimale 18 et supposer que c'est ainsi. quel sens se situe entre dix et les années 1800 d'un éther ? C'est un nombre plus petit, ce qui signifie qu'il y a plus de zéros. C'est une façon de diviser votre éther en quantités fractionnées. Nous pouvons supposer que c'est la même chose sur BNB et je vais le montrer. Tout cela aura du sens pour vous ici dans une minute. Nous allons donc écrire un jeu de fonctions. Pour ce faire, nous allons définir le montant dû d'une adresse particulière. Ça va être interne. Nous sommes en train de définir cela en interne. Nous ne voulons pas que quelqu' un d'autre s'en mêle. Mettons le temps, les minutes sont égales à la durée totale. Nous appelons cette fonction pour obtenir la durée totale et les minutes. Allons comprendre ça. Ensuite, nous allons diviser cela par incréments de cinq minutes. Donc, s'il y a 20 minutes sur le vélo, cela ne compte que quatre minutes car nous ne comptons que des intervalles de cinq minutes. Donc cinq minutes Vous allez être facturé 0,005 B&B. Le deuxième cinq minutes, 0,005 B&B. Je vais donc diviser cela par incréments de 555 minutes équivaut minutes divisées par cinq minutes. Donc, si vous êtes à nouveau là pendant dix minutes, ce sera dix divisé par cinq, soit deux. Vous allez être facturé au point O un, O, B et B. Maintenant, nous voulons définir cette propriété do. L'adresse du portefeuille des locataires est donc égale à un temps d' incréments de cinq minutes. Voici ce que nous allons déplacer la décimale, 0,05 B&B par incréments de cinq minutes. Je vais juste dire commencer ici avec ma décimale et dire 12345678910111213141516171818 décimales. C'est donc cinq. Voyons voir. Permettez-moi de mettre des virgules pour que cela soit clair. Virgule là, virgule là, virgule là. Virgule là, virgule là. Nous avons donc obtenu 3691215 zéros, 515 zéros. Encore une fois, si nous revenons cela, nous avons obtenu 123456789101112131415161718. Et puis nous avons mis r dot et nous avons 0,005. C'est tout ce que c'est. On ne fait que coder ça à 0,05. Vous voudrez peut-être tirer le prix le plus récent et faire des calculs. Le problème de la solidité, c'est qu'ils ne font pas de pointes fixes. Il faut faire une sorte de maths folles pour obtenir une décimale. Je vais donc juste garder les décimales en dehors de cela et ne pas essayer d'être comme 0,005 divisé par le dollar américain ou quelque chose de fou comme ça. Nous allons juste fixer 0,05 toutes les cinq minutes. Certains ont mis un point-virgule. Et nous avons un problème. C'est parce que je mets l'unité à la place de toi et que je fais tout le temps. Et mauvais nombre d'arguments pour la fonction appelée obtenir la durée totale. Nous devons transmettre l'adresse du portefeuille parce que nous devons savoir à qui la durée. Et c'est le montant dû. Maintenant, nous pouvons visiter cela pour que nous ayons ici. Donc, quand ils réenregistrent le vélo, nous voulons régler ce montant. Nous pouvons donc simplement appeler le set dû à l'adresse du portefeuille. Et cela réglera cette valeur variable dès qu'ils enregistrent le vélo. Et gardons ça. Je pense que nous sommes sur le point de pouvoir le tester. Nous devons mettre quelques déclarations requises ici, mais passons un test. En fait, avant de le faire, il y a une autre chose que je veux ajouter, et c'est juste vérifier quelque chose que nous pouvons utiliser, je pense sur le front end. Et c'est juste une fonction appelée « peut louer un vélo ». C'est juste une façon de dire : Hé, peuvent-ils louer un vélo sans avoir à aller voir les propriétés de la structure. Nous pouvons simplement l'appeler ici et obtenir un vrai ou un faux retour. Donc, adresse, alors qu'elle est à l'adresse. vue publique retourne bool, tournant les locataires, adresse du portefeuille, dot peut louer. Donc, c'est juste nous dire vrai ou faux. Qu'est-ce que cela définit S ? C'est tout. Essayons ça. Ça va être très amusant. Je pense que pendant ce temps, vous verrez toutes ces conditions de choses que nous voulons protéger. Ils ne devraient pas être en mesure de le faire. Ils ne devraient pas être en mesure de le faire. Et cela nous amènera à créer des instructions requiert. Essayons donc ça. Essayons tout d'abord localement avant faire quoi que ce soit sur la chaîne ByteDance. Vous venez donc ici et nous allons choisir JavaScript VM. Encore une fois, comme avant, je vais juste choisir la première adresse et faire le propriétaire car nous la déployons et cliquons Déployer et ouvrir cette adresse. Donc, tout d'abord, ajoutons un locataire. Et faisons en sorte que ce n'est pas le propriétaire. Choisissons la deuxième personne et copions. Je vais donc mettre l'adresse. Voici tous mes paramètres ici. Et vous pouvez également les trouver ici avec le locataire. Mais je vais mettre l'adresse de mon portefeuille. Ce coffre Travis peut louer. Vrai ? Parce que je peux râler. Je n'ai pas de vélo. Faux actif, puis pas d'équilibre, rien n'est dû, pas de début ni d'heure de fin. Pour ajouter un locataire. Et venez ici, choisissez l'adresse de mon portefeuille. Venez voir que j'ai un locataire ici. Super. Puis-je louer un vélo ? Vrai ? Je peux louer un vélo. Obtenez la durée totale 0. Et pour être honnête, nous ne devrions pas être en mesure de vérifier cela si les vélos sont sortis, donc nous mettrons une condition là-dessus dans une minute. Mais allons-y et regardons le vélo. Je vais le vérifier. Et quand je clique sur les locataires ici, il faut dire peux louer faux parce que nous ne voulons pas pouvoir louer tant que nous n'avons pas vérifié. Il faut dire « actif », vrai. Et il devrait y avoir une heure de départ. Je vais donc relancer ça. Là, vous pouvez louer faux, actif est vrai et voici mon heure de départ. Maintenant, nous avons mis cela en place par incréments de cinq minutes et je pourrais changer cela, mais je vais juste attendre les cinq minutes et revenir. Je vais faire une pause, revenir au bout de cinq minutes et nous allons revenir sur la moto, voir comment ça marche. Très bien, ça fait environ cinq minutes. Je vais donc revenir sur le vélo. Je vais donc choisir l' enregistrement, cliquer sur l'enregistrement. Et maintenant, si je vérifie, vérifie mon locataire ici, ça devrait avoir n temps. Active devrait passer à faux et le loyer peut rester faux parce qu'ils n'ont pas payé et nous devrions avoir un montant dû. Alors cliquons sur les locataires, et nous y allons. Nous avons donc une heure de départ, nous n'avons pas de temps. Nous ne sommes plus actifs et nous ne pouvons pas louer. Super. Nous avons aussi une Rosée de montagne, et elle sera cinq avec tous les zéros, ce qui va être un éther. Mais encore une fois, cela se transformera en B&B quand nous y arriverons. Nous allons donc vérifier certaines de ces autres choses. Je peux louer un vélo faux. Ou le solde du locataire, équilibre que j' ai là-dedans. Je n'ai rien mis dedans. Il faut donc dire 0. solde du contrat est de 0 et ma durée totale devrait maintenant être de six minutes. Oui, c'est six. Donc, cela a été calculé correctement. Nous avons eu le vélo pendant six minutes. Maintenant, la prochaine chose que nous voudrions faire est pouvoir payer notre solde, car maintenant, puis-je vérifier un vélo  ? Non, je ne peux pas. Parce que j'ai un dû équilibré et que je viens réaliser que nous n'avions pas fixé de moyen d'effectuer un paiement. Nous devons donc pouvoir envoyer de l'argent sur notre solde pour le rembourser. Nous allons donc conclure le contrat et le mettre en place. C'est donc un autre que j'ai complètement oublié. Alors mettons un autre commentaire pseudocode ici et disons simplement faire un paiement. Et en fait, avant de faire cette fonction, je me suis rendu compte que nous n'avions pas non plus mis en place un moyen de déposer de l'argent. Le flux est donc comme ça. Le locataire va déposer de l'argent dans son solde. L'une des propriétés ici est donc équilibrée. Ils vont déposer de l'argent dans le solde pour qu' il y ait déjà de l'argent là-dedans. C'est un peu comme un prépaiement. Mais l'argent, quand vous le déposerez, il ira à l' intégralité du contrat et ensuite le montant que vous avez investi vous ira. Donc, si dix personnes placent 10$, ce sera 100$ dans le contrat, mais 10$ crédités à chaque personne. Et alors que ces personnes effectuent des paiements, l'argent sera déduit de leur solde pour que cet argent et le contrat total deviennent les propriétaires. J'espère que c'est logique. Je pense qu'une fois que nous aurons écrit ceci. Faisons donc ça. Déposez rapidement. Fonction composite, dépôt, adresse, portefeuille, adresse, payable, public, puis locataires. Et juste pour vous montrer cela, je peux le fermer et simplement le laisser dedans. Cela permettra de déposer de l'argent dans le contrat car il est payable. Je peux appeler cette fonction de dépôt et envoyer de l'argent. Et il va le déposer dans le contrat. Il va le faire de toute façon. Mais nous voulons également l'ajouter au solde des locataires. Nous voulons donc que le solde de l' adresse du portefeuille des locataires soit égal à la valeur du point de message. Maintenant, le message est l'une de ces variables globales, comme nous l'avions fait ici, que je n'ai pas mentionné. Je devrais probablement avoir un expéditeur de points de message, qui envoie cet expéditeur de points de message. Nous avons également une valeur de point de message. Quelle est la valeur que j'envoie ? Donc, quand j'appelle cette fonction de dépôt, je vais lui envoyer une valeur et elle peut être récupérée dans son message global, sa variable, sa valeur de point de message. C'est tout ce que c'est. Nous déposons donc de l'argent dans le contrat, mais cela va également être crédité spécifiquement à cette personne. Nous déposons donc de l'argent dans le contrat, mais nous allons également créditer cette adresse de portefeuille ou cette personne. Maintenant, pour effectuer le paiement, créons une fonction appelée effectuer le paiement. Adresse, adresse portefeuille. Cela est payable au public. Et ce que nous allons faire ici, c'est que nous allons faire des locataires, adresse de portefeuille, un solde de points, et nous allons retirer de l'argent du solde. Donc moins est égal à la valeur du point de message. Disons donc que vous êtes le seul locataire, que vous mettez 10$ pour votre solde. Il y a donc 10$ dans le contrat, mais ce montant de 10$ est dans votre solde. Donc, ce que vous faites lorsque vous effectuez un paiement, vous ne faites que retirer ce montant de votre solde. Il y a donc 10$ dans le contrat et tout est alloué à moi. Et je fais du vélo pour 10$. Quand on retire ces 10$ de mon solde, ces 10$ ne m'appartiennent plus. Je n'ai plus d'équilibre. Ces 10$ appartiennent au propriétaire. Et c'est en quelque sorte la façon dont la propriété se déroule, façon dont leur propriétaire est payé. Nous n'envoyons donc pas d'argent au contrat, nous supprimons réellement de l'argent de notre solde. Et il y a aussi quelques autres choses que nous voulons vérifier, par exemple, voyons moi juste copier ça. Et il y a aussi quelques autres choses que nous voulons faire. Comme si on veut s'asseoir, on peut le louer à vrai. Parce qu'ils peuvent maintenant courir à nouveau. Hé, il y a des soldes payés, ils sont à nouveau libres de louer. Et je vais juste copier ça encore quelques fois. Le montant dû sera 0 car ils ont payé le montant dû. L'heure de début sera 0. En fin de compte, le temps sera de retour à 0. Donc, tout est un peu frais à nouveau. Vous avez payé les choses, vous pouvez louer. Vous n'avez pas de temps sur l'horloge. Va prendre une bouchée, et je pense que c'est tout. Je pense que c'est tout ce dont nous avons besoin. Allons-y maintenant avant de le déployer et de le mettre dans certaines instructions requiert, certaines vérifications pour nous assurer que nous n'autorisons pas les choses que nous ne devrions pas. Et de la façon dont vous devriez faire cela, je l'ai déjà fait, donc je vais les ajouter et les expliquer. Mais la façon dont vous le faites normalement, c'est que vous prenez cela ici et que vous le déployez. Et puis vous allez cliquer sur des boutons et tester les choses et vous allez, Hé, attendez une minute, ils ont un équilibre. Ils ne devraient pas être en mesure de payer ou bon, ils ne devraient pas être en mesure d' effectuer un paiement parce qu'ils n' ont rien. Tu dois avoir des chèques comme ça ? Alors que vous testez et que vous cliquez sur des boutons, vous trouverez les instructions requises, mais je vais aller de l'avant et les mettre et les expliquer. Passons donc d'abord à la fonction de paiement, il y a deux choses que nous voulons vérifier. Premièrement, nous voulons nous assurer qu'ils n'ont pas d'équilibre. S'ils ont un solde dû alors qu'ils ne devraient pas pouvoir vérifier à nouveau, cela permet aux gens de payer leurs factures. Sinon, ils continuent vérifier le vélo et ne font aucun paiement car nous n'allons pas l'appliquer. Nous essayons d'être décentralisés ici. Ce que c'est qu'ils ne pourront tout simplement pas vérifier à moins de payer leur solde. Nous devons donc vérifier cela. Et nous devons également vérifier qu'ils peuvent louer et qu'ils peuvent louer un bien immobilier est réglé sur vrai. Nous le faisons donc avec des déclarations requiert. Et ce qui est intéressant dans les déclarations requiert c'est qu'elles vont annuler la transaction avant que les gaz ne s'étendent, ce qui est assez soigné. Vous ne faites pas sauter l' essence, puis vous le faites échouer, puis vous perdez votre argent. Pour ce faire, vous indiquez requiert , puis vous définissez votre condition selon laquelle vous aux locataires d'adresse de portefeuille point point do et que nous voulons faire pour être égal à 0. Nous ne voulons pas de montant, voulons-nous qu' ils paient leur facture ? Si ce n'est pas vrai, nous pouvons mettre une virgule et ensuite un message. Vous avez un point-virgule de solde en attente et nous allons mettre l'autre. Faisons une copie et au lieu de le faire, nous allons le vérifier. Le loyer peut-il être égal à vrai ? C'est ce dont nous avons besoin. Nous exigeons qu' ils puissent louer. Si ce n'est pas le cas, nous allons envoyer un message. Vous ne pouvez pas louer pour le moment. C'est tout pour le paiement. Maintenant, pour l'enregistrement, nous voulons vérifier qu'ils sont actifs car si vous n'êtes pas actif, vous n'avez pas de vélo, n'est-ce pas ? Donc, si vous cliquez simplement sur l'enregistrement et que vous n'avez pas de vélo vérifié, cela devrait générer une erreur. Je vais donc copier cette déclaration requise. Je vais mettre ça ici et être actif. Si actif devrait être vrai, ce qui signifie qu'ils font vérifier activement le vélo. Sinon, les messages, veuillez d'abord jeter un coup d'œil à un vélo. Allons maintenant pour obtenir la durée totale et nous voulons mettre un chèque ici. Nous voulons vérifier que l' actif est faux, ce qui signifie qu'ils ont enregistré leur vélo. Ils ne peuvent pas obtenir la durée à moins d'avoir enregistré le vélo. Et si ce n'est pas vrai , nous allons dire que le vélo est actuellement vérifié. Enfin, sur cette fonction de paiement, il y a probablement plus que vous pourriez mettre ici. Comme quelqu'un dans les commentaires YouTube l'a dit, vous avez oublié ce chèque. Eh bien, il y a beaucoup de chèques et de choses que vous pourriez mettre. Celui-ci va être produit. Nous voudrions nous assurer qu'il y a beaucoup de contrôles en place. Mais la dernière chose que je veux faire est de payer. Je veux m'assurer que j'ai une rosée de montagne qui pourrait faire plus de 0. Si je fais un paiement, je n'ai rien à payer. Quel est le but ? Je veux également vérifier que mon solde est supérieur au montant je paie en essayant de payer dix dollars et que je n'en ai que huit, ça ne marchera pas. Je dois donc faire ce chèque aussi. Pour exiger des déclarations ici. Le premier va vérifier que du est supérieur à 0. Ce n'est pas vrai. Je vais dire que tu n'as rien dû pour le moment. Le prochain, nous voulons vérifier que le solde est supérieur à la valeur du point du message. Alors rappelez-vous que c'est payant, les gens envoient de l'argent. Nous voulons que notre solde soit supérieur au montant d'argent envoyé. Ici, nous allons dire que vous n'avez pas assez de fonds pour couvrir le paiement. S'il vous plaît, faites un dépôt. Vous ne pouvez pas payer directement, vous devez déposer de l'argent, puis transférer cet argent est un paiement et l'enregistrer. Et je pense que c'est fini et que nous sommes prêts à faire quelques tests. Nous allons donc d'abord le tester sur cette machine virtuelle JavaScript. Ensuite, nous allons le déployer dans la chaîne intelligente de la finance. Une dernière chose que nous devrions faire pour tester cela a une durée totale ici. Nous n'avons pas défini d'incréments de cinq minutes. Alors rappelez-vous que la dernière fois que nous avons testé, nous avons dû attendre cinq minutes pour pouvoir remplir un numéro. Eh bien, passons cela à quelque chose de codé en dur, comme les retours de six minutes, donc nous n'avons pas à attendre à nouveau. Renvoie six et il va falloir les supprimer car cela n' aime pas les variables inutilisées. Alors, sauvegardez ça. Donc, cette fois, on n'aura que six minutes. Nous n'avons pas à attendre. Nous pouvons vérifier, revenir immédiatement et être en mesure de tester. Déployons donc cela. Quelqu'un pour choisir la première adresse est mon propriétaire. Copiez l' adresse et déployez-la. À la deuxième adresse, il y aura un de mes locataires. Ajoutez donc l'adresse. prénom est Travis, nom est test, ce qui n'est pas mon nom de famille, je peux dire que c'est vrai. Et quels sont les autres ? L'actif est faux. 0 balance 0, faites 00, heures début et de fin. Je vais ajouter que le locataire devrait pouvoir venir ici, indiquer l'adresse et voir le locataire. Super. Voyons maintenant quelqu'un pour vérifier un vélo. Cliquez sur Passez à la caisse. 3. Finaliser notre contrat intelligent: Bon, donc avant de passer à la section suivante, nous devons ajouter quelques autres fonctions au contrat intelligent. Et je le sais parce que je suis allé avant et j'ai construit le front end et j'ai réalisé que nous avions besoin d' autres choses pour nous aider. Nous allons donc ajouter trois fonctions ici. Le premier va s'appeler « Get do », tout ce qu'il fait, c'est d'obtenir le double support pour fait, c'est d'obtenir le double support pour une adresse de locataire, une adresse de portefeuille , une fonction publique, c'est une vue et elle vous renvoie et nous allons juste revenir l' adresse du portefeuille du locataire, point do. Donc, le montant que le locataire doit faire. Ensuite, nous allons chercher le locataire réel. Nous allons donc chercher le locataire et il va nous retourner quatre informations sur ces locataires. C'est donc comme retourner le loyer ou l'objet, mais sans la partie Uinta, certaines parties de celui-ci. Donc, ça se passe comme ça. Fonction, obtenez le locataire. Nous allons encore transmettre l'adresse du portefeuille. C'est public à voir, et ça revient pour les choses. Donc, mémoire de chaîne, FirstName, mémoire de chaîne, LastName. Bull peut louer. En taureau actif. C'est tout ce que nous voulons savoir dans ce cas. Donc, ici, nous allons dire FirstName est égal à l' adresse du portefeuille du locataire point prénom. Whoops. Ensuite, je vais copier cela trois fois de plus sur un Mac, c'est l'option Shift. Et puis vers le bas pour copier la ligne sur laquelle vous vous trouvez. Et je vais utiliser la commande D pour sélectionner les instances du FirstName et de LastName. Et puis je vais changer celui-ci aussi, peux louer celui-ci trop actif. Et tout ce que nous faisons, c'est simplement restituer ces propriétés de ce locataire. Et enfin, nous allons créer une fonction appelée locataire existe. Et il va rendre un livre, que ce loyer existe ou non. Nous devons donc savoir si ce locataire doit s' ajouter au contrat intelligent ou s'il est déjà ajouté. Nous pouvons donc dire que le locataire de fonction existe une adresse à l'adresse, vue publique et qu'il renvoie un bool. Ici, nous devons vérifier si cette adresse de portefeuille existe ou non. Nous pouvons donc dire si les locataires sont au point d'adresse alors qu'ils sont à l'adresse adresse, si cette adresse de portefeuille n'est pas égale à l'adresse 0. Maintenant, vous êtes peut-être comme l'adresse 0 ? Qu'est-ce que c'est censé être ? Eh bien, voici une bonne explication. Ainsi, avec les mappages dans Solidity, il n'y a aucun moyen de vérifier directement s'il existe quelque chose. Tout est défini sur sa valeur par défaut jusqu'à ce qu'il soit modifié. Cela signifie que chaque entier commence par 0, chaque chaîne commence par un guillemets. Chaque tableau commence comme ceci et la solidité n'a pas de concept nul comme les autres langages. Donc, ce qu'ils disent, c'est que si vous vous souvenez du remix, allons-y. Il suffit de commenter cela car nous n'avons pas fini. Venez donc ici et déployons notre contrat. Je vais cliquer sur Déployer et l'ouvrir. Alors, que se passe-t-il si je vais chez les locataires et que je mets simplement une adresse et que je clique sur le bouton. Eh bien, vous verrez que tout est dans son état par défaut. n'y a rien de non, comme le courrier dit qu'il n'y a rien de nul et de solidité. Il va les avoir, ça va être la valeur de ce que ce serait fondamentalement, donc le solde est 0, do est 0. Tout ça va être 0. Les taureaux vont être faux. Je veux dire, c'est juste la valeur par défaut, ce n'est pas nul. Et vous verrez ici l'adresse du portefeuille est les zéros, zéros, zéros. Il y a, c'est tout le long de l'autre côté. Et cela équivaut à l'adresse 0. Je pense que nous pourrions également nous adresser à 000 ou quelque chose comme ça. Mais l'adresse 0 dit, hé, si cette personne est dans les locataires n'a pas cela, alors elle doit exister. C'est tout ce que c'est. Je ne veux pas aller trop loin là-dessus. J'espère que c'est logique, mais c'est un bon moyen de vérifier si une clé se trouve dans un mappage. Permettez-moi de terminer ça et d'y revenir. Si l'adresse du portefeuille du locataire l'adresse de portefeuille de points n'est pas égale à une adresse vide, ce qui signifie qu'ils existent. Ensuite, nous allons revenir vrai. Sinon, retourne faux. Ensuite, il y a quelques ajustements que je veux faire. Donc, si nous montons pour obtenir la durée totale, je veux supprimer cette déclaration requiert parce que c'est tout simplement inutile. Nous supprimons donc cette déclaration requiert. Maintenant, je veux mettre une seule condition. Donc, si l'heure de départ du locataire est 0 ou si son heure de départ est 0, ce qui signifie qu'il a vérifié le vélo mais qu'il ne l'a pas réintégré. Ou si, pour une raison quelconque, ils ont juste une enzyme qui n'arrivera probablement jamais, je veux retourner 0 parce qu'ils sont, ils sont vérifiés, le temps n'est pas terminé. Donc, s'ils veulent obtenir leur durée totale avant vérifier le vélo et ils ne peuvent pas le faire. Il faut vérifier le vélo et d' abord faire ce calcul. Donc je vais juste venir ici et le faire si l'adresse du portefeuille des locataires point start est égale à 0. Ou si je vais copier et coller ça juste parce que c'est plus rapide pour moi. Si l'heure de fin est égale à 0 , je veux simplement renvoyer 0. Vous disposez d'une durée de 0 en minutes. Sinon. Vous allez faire tout ça. Nous avions déjà une copie et nous le collions. C'est ça. Votre contrat est prêt à être lancé. Nous avons notre contrat et le remixage, et à partir de là, nous pouvons le compiler, nous pouvons le déployer, nous pouvons obtenir l'ABI et toutes ces choses importantes. Mais personne ne veut vraiment le faire à partir du remixage parce que c' est basé sur un navigateur. Je pense qu'il l'enregistre dans le navigateur, mais il pourrait être perdu. Et vous voulez que tout votre code soit normalement ensemble et vous voulez le contrôler dans GitHub et ce genre de choses. Nous allons donc faire passer cela dans un nouveau projet. Et je vais vous montrer comment nous pouvons utiliser qu'on appelle un casque de sécurité pour bootstrap tout cet écosystème afin de gérer ce contrat intelligent. Vous allez adorer ça. Alors, ouvrez votre terminal et nous allons créer un dossier pour notre application. Je vais donc aller sur mon bureau et je vais créer un répertoire MKDIR. Je vais appeler ça une application de location de vélos. Appuyez sur Entrée. Et puis je vais y faire un CD. Et code dot pour l' ouvrir dans le code VS. Vous pouvez également faire glisser le dossier, ou vous pouvez cliquer avec le bouton droit de la souris ou faire ce que vous voulez, il suffit de l'ouvrir dans VS Code. Maintenant, ce que je vais faire, c'est que je vais aller sur hard hat.org. Allez donc sur hardhead.org. Et ce que c'est encore, c'est dans l' environnement de développement théorème. Il vous permet d'exécuter la solidité localement, de déboguer, de tester. Cela vous donne de la souplesse et toutes ces autres bonnes choses. Mais ce que vous verrez dans une minute, toutes les grandes choses qu'il fait. Allez-y en haut ici et cliquez sur Commencer. Et nous allons suivre ces étapes car elles sont très bien écrites. Donc, l'installation, nous devons faire un casque d'installation NPM. Assurez-vous donc que vous n'avez pas installé JS. Si ce n'est pas le cas, allez simplement sur NodeJS et Google et cliquez sur NodeJS et téléchargez simplement la version LTS. Une fois cela fait, vous aurez NPM, vous aurez dans Bx, vous aurez un nœud, tout ce dont vous avez besoin. Nous allons donc utiliser cette commande. Et nous allons commencer par créer un répertoire appelé contrat. Je vais faire un CD dans ce répertoire de contrats. Ensuite, je vais faire npm dedans, y dash y. Donc npm init dash y. Ce que cela fait, c'est que cela crée un paquet JSON, afin que nous puissions installer les paquets npm dans le tableau de bord y fait simplement l'installation par défaut. Cliquez donc sur Entrée et il devrait tout configurer pour vous et vous devriez avoir dans votre dossier de contrat un fichier package.json. Nous pouvons donc maintenant exécuter notre commande, qui est npm install save-dev hardhat. Cliquez donc sur Entrée pour installer la tête rigide. Une fois que c'est fait, nous allons faire ce Quickstart. Ce démarrage rapide va faire est de bootstrap un exemple de projet que nous allons utiliser. Pour ce faire. Tu viens de courir dans un casque dur px. Donc, copiez ça. Très bien, donc je vais coller ça dans NP x Hardhat, appuyer sur Entrée. Et cela va nous donner quelques options. Nous allons donc choisir de créer un exemple de projet de base. Donc le premier ici, la racine du projet hardhat va être le dossier du contrat, donc nous y sommes bons. Oui, je veux être ignoré. Et il est dit, voulez-vous installer cet exemple de dépendances de projets avec NPM que vous devrez installer. Alors cliquez sur, assurez-vous qu' il y a un y et appuyez sur Entrée. Il va installer quelques paquets qui nous aideront à tester et à parler du contrat et de toutes ces choses pendant l' installation. Voyons ce qui se passe ensuite. Il va donc nous donner quelques exemples ici de la façon d'exécuter des tâches. Vous pouvez donc exécuter dans px hardhat pour exécuter des tâches. Vous pouvez donc vérifier, imprimer la liste des comptes. Vous pouvez compiler votre contrat. Vous pouvez exécuter un nœud, faire des tests, beaucoup de bonnes choses. Il existe une configuration matérielle qui vous permet de configurer vos déploiements. Nous allons en parler dans une minute. Vous pouvez exécuter dans des comptes hardhat px pour afficher tous les comptes avec lesquels vous pouvez travailler. Il crée à peu près 20 comptes que vous pouvez utiliser. Vous pouvez compiler vos contrats en exécutant NPM Hardhead Compile. Vous pouvez tester en exécutant NPS Hall au test. Et beaucoup de choses géniales. On va passer par là. Très bien, c'est fait. Donc, si vous regardez dans notre dossier, nous avons maintenant un dossier Contracts, qui nous donne une démo appelée Greeter dot soul. Nous avons bien sûr nos scripts de modules de nœuds. Il s'agit de notre script de déploiement. Nous allons en parler dans une minute. Vous pouvez effectuer des tests. Nous n'allons pas faire beaucoup de tests parce que nous ne voulons pas suivre ce cours très long, donc nous allons probablement sauter les tests. Et voici notre configuration. Et bien sûr, ils sont emballés JSON. Faisons un premier exemplaire ou un contrat ici. Cliquez avec le bouton droit de la souris sur le dossier du contrat. Créez un fichier appelé Bike Rental dot soul. En fait, je pense que nous appelons cette chaîne de vélo dot soul. Et je vais retirer mon contrat de solidité, tout mettre en valeur et le coller ici et le sauvegarder. Vous voulez probablement installer le, bien que je ne sache pas si vous en avez besoin, mais vous voudrez peut-être installer l'extension de solidité. Je pense que je l'ai installé. Oui, j'ai l'extension de la solidité. Il me crie dessus parce qu' il n'aime pas la version. Nos compilateurs actuels 0 points phi dot 0. Je peux donc ouvrir mon pilote de commande et choisir Modifier la version du compilateur de l'espace de travail. Je vais le remplacer par 080, que je peux sélectionner ici, et il faut généralement cinq secondes ou soda pour le nettoyer. Oui, on y va. J'ai éclairci. Mon contrat est donc ici. Et en fait, nous pouvons jeter un coup d'œil à la façon dont cela fonctionne. Donc, si nous allons saluer ou non l'âme, vous voyez que nous avons un contrat appelé Greeter. Nous avons notre constructeur et nous avons deux fonctions. Nous avons une fonction de salutation qui renvoie un message d'accueil, puis nous avons une fonction set greet qui vous permet de modifier le message d'accueil. Voici donc le contrat. Et ensuite, si vous accédez aux scripts et aux exemples de script, il est configuré pour déployer ces contrats. Vous voyez donc ici tous les bons commentaires que nous obtenons le contrat à déployer. Alors obtenez une usine contractuelle appelée Greeter, qui est le contrat. Ensuite, il déploie ces objets. Il s'agit donc de l'objet Greeter qui représente le contrat. Et puis il déploie cet objet avec Hello Hard Hat comme paramètre. Donc, si vous revenez à Greeter, vous verrez dans le constructeur que vous transmettez un message d'accueil, quel que soit votre message d'accueil par défaut. L'exemple de script va le déployer , puis attendre le déploiement de Greeter. Ensuite, il imprime Greeter déployé à n'importe quelle adresse de contrat vers laquelle il le déploie. Il y a donc le contrat de niveleuse, voici comment le greeter est déployé. Tests d'échantillonnage. Donc, le seul test qu'ils font est que l'hôte doit renvoyer le nouveau message d'accueil une fois qu'il aura changé. Cela fait la même chose, crée un objet Greeter, un objet de contrat. Il se moqué le déploie avec le paramètre HelloWorld et ensuite il s'attend, il ne s'attend pas à une déclaration, assurant que ce contrat a HelloWorld comme il salue, puis il définit le saluer quelque chose de différent, puis il s'attend à ce que ce soit différent. C'est donc le test et il doit passer le message d'accueil original et le changement de salutation. Ensuite, dans la configuration Hardhat, vous n'avez pas vraiment besoin de configurer quoi que ce soit pour le déploiement local et nous verrons cela dans une minute. C'est donc un peu comme ça que ça marche. Et maintenant que nous savons comment cela fonctionne, supprimons ce salut, pas l'âme en reproduisant tout cela pour notre contrat. Supprimez donc Greeter dots soul. Passons ensuite à l'exemple de script et nous allons changer cela en vélos et obtenir une chaîne vélo d'usine contractuelle et un greeter. Nous allons fabriquer une chaîne de vélo minuscule. Et ensuite, nous voulons déployer cet objet qui est maintenant une chaîne de vélo, pas plus grand. Changez cela en chaîne de vélos, déployez-le et nous n'envoyons rien avec leur déploiement. Alors, sortons ça. Changez ceci par une chaîne de vélo minuscule. Dans la console, chaîne de vélo en rondins déployée à l'adresse du point de chaîne de vélo J'espère que c'était logique. Nous ne faisons que modifier ces variables pour déployer notre contrat et non le greeter. Cela devrait donc être bon. Accédez aux tests d'échantillonnage. Nous allons juste commenter cela. Et c'est tout. Donc maintenant, nous pouvons faire en px hardhat, compiler, compiler notre contrat. Et quand nous le ferons, nous aurons un nouveau dossier avec leurs artefacts compilés par air. Vous verrez donc maintenant que nous avons un dossier d'artefacts. Si vous ouvrez cela, il y a des informations de construction. Nous n'avons pas besoin de nous préoccuper de cela. Et si vous ouvrez le dossier Contracts, il y a un autre dossier appelé bike chain dots soul avec deux fichiers. Dans le fichier qui nous intéresse est la chaîne de vélo point json. Et ici, nous avons quelques informations clés que nous allons devoir utiliser pour relier notre front end. L'un d'entre eux est l'ABI. Maintenant, l'ABI décrit toutes les fonctions. Ils sont disponibles dans notre contrat pour que nous puissions appeler. Notre contrat est disponible sur la blockchain et l'ABI indique à notre application quelles fonctions elle peut appeler. Vous verrez donc ici le constructeur, et vous verrez l' équilibre des fonctions, l' ajout, l'ajout d'un locataire, solde des loyers ou toutes les fonctions que nous avons créées. C'est ce qu'est l'ABI. Nous devrons mettre cela dans notre projet dans une minute. Ensuite, en bas, nous avons ce joli code, et c'est le bytecode. Il s'agit de l'exécutable qui vit sur la machine virtuelle Ethereum. Donc, lorsque nous le déploierons, ce sera là quelques informations clés. Mais nous n'avons pas besoin de suivre cela. Chaque fois que vous apportez une modification à votre contrat, vous devrez exécuter cette compilation de casque NPM. Et tout ce qui va faire, c'est qu'il va se recompiler, rafraîchir les artefacts. Nous avons parlé de compiler nos contrats et de tester les contrats. Examinons maintenant le déploiement. Ce que nous allons faire dans ce cours, c'est que nous allons le déployer dans la chaîne intelligente de la finance. Mais supposons que vous ne vouliez pas aller sur un réseau de test, mais que vous voulez simplement qu' il fasse tout cela localement. Eh bien, voici comment vous feriez cela. Nous pouvons donc utiliser cet exemple de script pour le déploiement. Donc, ici, vous verrez dans px hardhat exécuté dans le script R. Il s'agira de déployer un message d'accueil avec salutation, salutation déployée à cette adresse contractuelle. Mais vous voyez ici qu'un casque de sécurité fera toujours tourner une instance en mémoire par défaut. Ce sera donc une instance en mémoire. Mais il est également possible d'exécuter Hardhead de manière autonome afin que des clients externes tels que MetaMask puissent s'y connecter. Il peut s'agir de MetaMask, votre frontal dapp ou d'un script. Vous pouvez donc le faire dans le nœud hardhat px. Et cela crée un nœud autonome qui s'exécute sur votre ordinateur. Donc, si je tape dans px hardhat node, appuyez sur Entrée, ça va faire quelques choses sympas. Donc, ça va me donner ces 20 adresses, mais ça va me donner les clés privées ces adresses, ce qui est vraiment cool et ça va me donner 10 000. Dans. Ce que je peux faire maintenant, c'est que je peux ouvrir un MetaMask. Et prenons ce premier compte. Il a donc saisi la clé privée de ce premier compte et est allé sur MetaMask. Avant cela, vous devez ajouter le point de terminaison 8545 de l'hôte local à votre MetaMask. Donc, si vous allez sur le réseau publicitaire et que vous ajoutez un nouveau réseau, je l'ai déjà. Mais j'ai ici localhost 8545. Le nom du réseau va donc être localhost 8545. La nouvelle URL RPC sera la barre oblique des deux-points HTTP , le deux-points de l' hôte local 854 ou cinq. L'ID de la chaîne est 1337. Et au fait, si le nœud n'est pas en cours d'exécution, cela vous donnera une erreur. Mais de toute façon, c'est 1337. Le symbole monétaire va être IV. Et ensuite, vous pouvez laisser celui-ci vide. Puis cliquez sur Enregistrer. Et cela va réellement sauver ce réseau d'hôtes local pour que vous puissiez jouer. Je peux maintenant copier cette clé privée, puis aller dans Importer un compte et définir la clé privée, appuyer sur Importer. Et maintenant, j'ai 10 000 à jouer avec un compte deux. Et je peux en fait des détails de compte. Je peux changer cela par un test de casque dur local ou quelque chose comme ça. Peu importe. Ensuite, vous souhaitez laisser ce nœud en cours d'exécution. Je dois laisser ça courir. Si vous avez arrêté, cela ne fonctionnera plus. Vous voulez donc vous rendre dans un autre terminal. Et nous allons exécuter cette prochaine commande, NPS Hardhat Run. Nous allons donc déployer ce script, mais nous allons utiliser l'hôte local du réseau. Vous pouvez donc dire à la patinoire du réseau informatique OB ou tout test que vous souhaitez utiliser. Il suffit de le configurer dans votre configuration. Mais nous allons utiliser le réseau hôte local. Et je ne sais pas. Je pense que c'est juste par défaut. Je ne le vois pas ici. Mais de toute façon, prenons ça et déployons ça. Dans un autre terme dont nous nous souviendrons, laissez cela fonctionner dans un autre terminal, exécutez-le. Oh, ce n'est pas bon. Assurez-vous que vous êtes dans votre dossier de contrats. Assurez-vous que vous êtes dans votre dossier de contrat car lorsque vous changez de terminal, il vous replonge dans la racine. Alors, lancez-le encore une fois. Et c'est là. Chaîne de vélo déployée à cette adresse contractuelle. Ce contrat intelligent a été déployé sur votre nœud en cours d'exécution ici. Ainsi, lorsque vous créez votre application frontale, vous pouvez simplement utiliser ce compte. Je veux dire, vous devrez mettre votre contrat pour vous habiller et tout ce genre de choses, mais vous utiliserez ce compte et ensuite vous pourrez tout tester localement. Tu as eu beaucoup d'Eve. C'est très amusant. Mais nous voulons vraiment aller plus loin et utiliser le réseau de tests de chaîne intelligente de finance. Cela sera donc en direct sur le réseau de test. Et si, pour une raison quelconque, vous vouliez faire vivre et la production, ou si vous voulez savoir comment arriver à la production. C'est très simple à partir de là. Alors, faisons-le maintenant. Je vais donc fermer ce navigateur. Je n'en ai plus besoin. Je n'ai pas besoin que ce nœud fonctionne. Et je vais juste fermer ce terminal et effacer tout ça. C'était donc le scénario de développement dans votre environnement hôte local. Il fait donc tourner un nœud autonome avec lequel vous pouvez travailler. Vous pouvez le déployer sur ce nœud, puis vous pouvez lui parler avec clients externes tels que MetaMask. Excellente option. Mais encore une fois, nous voulons aller sur un filet de test. Nous voulons rendre cette chose légitime et avoir une réelle idée à ce sujet, pas un hôte local. Les choses ne se passent pas vraiment. Situation. Il existe maintenant plusieurs façons de vous connecter à la chaîne intelligente ByteDance. Mais de nombreux développeurs utilisent un service tiers pour cela, car il vous permet un accès rapide et vous permet de faire évoluer votre application si jamais vous vouliez mettre votre application en production. Il y a donc des services comme interferer, c'est un service populaire. alchimie est très populaire, mais les deux se concentrent davantage sur un théorème, pas sur la finance. Nous allons utiliser un service appelé Morales aujourd'hui. Morales va nous permettre de parler directement au réseau de tests de chaîne intelligente Biodefense. Il y a beaucoup d'autres choses que vous pouvez également explorer, mais il vous permet d'y accéder rapidement. Il vous permet d'évoluer. Il a juste une plate-forme conçue pour ce genre de choses. Donc, si vous allez Morales.io et que vous cliquez sur vous inscrire gratuitement, c'est totalement gratuit. Il suffit de saisir votre adresse e-mail, de créer un mot de passe. Je pense qu'il va vous envoyer un e-mail pour confirmer et vous serez prêt. Je vais donc me connecter et entrer mon mot de passe. Une fois arrivé ici, vous voulez accéder aux nœuds rapides et cliquer sur le réseau BSC en points. Ici, vous avez un ensemble de points de terminaison. Vous disposez du réseau principal, l'archive réseau principale, du jeu de tests et de l'archive réseau de test. Ce que nous voulons, c'est le filet de test. Donc, copiez ça. Revenons à notre projet et ajoutons à cela. Alors mettez une virgule ici. C'est donc ici que nous pouvons définir nos différents réseaux. Nous pouvons donc faire des tests sur le réseau principal, hôte local, comme ce que nous venons de faire. Nous pouvons y mettre des informations, quels que soient les réseaux que nous voulons utiliser. Nous allons donc appeler ce filet de test. Et il y a deux propriétés dont nous avons besoin, l'URL et les comptes. Pour l'URL, nous allons coller exactement ce que nous avons copié à partir de Morales. Ensuite, pour les comptes, nous allons récupérer notre compte de MetaMask. Donc, si vous ouvrez MetaMask et accédez au réseau de test BSC. Maintenant, si vous ne l'avez pas, cliquez à nouveau sur réseaux et réseau publicitaire. Et vous voudrez ajouter un nouveau réseau pour le réseau de test BSC. Et cette information est juste ici. Le nom du réseau est donc BSC test net. La nouvelle URL RPC est une barre oblique de deux-points https. En fait, il suffit d' aller taper par la chaîne Nance Smart sur MetaMask ou quelque chose comme ça. Et cela dira la connexion de MetaMask à la chaîne intelligente de financement. Ici, vous obtiendrez les valeurs ici, test net. Voici donc l'URL du RPC. Voici l' ID de chaîne, qui est 97, symbole est B&B dans l'URL de l' explorateur de blocs est celui-ci. Assurez-vous donc de copier ces N. Encore une fois, allez dans Paramètres réseaux d'un réseau, copiez ces valeurs dans et cliquez sur Enregistrer. Ensuite, vous devriez avoir une option appelée réseau de test BSC. Et ce que vous voulez faire, c'est probablement créer un nouveau compte. Vous ne souhaitez pas utiliser l'un de vos comptes habituels. J'ai un test BSC. Pour créer un nouveau compte, il vous suffit de cliquer sur ce cercle et de créer compte, puis de lui donner un nom et de cliquer sur Créer et cela en crée un pour vous. Mais ce que vous voulez faire maintenant, c'est vous assurer que c'est un compte que vous n' utiliserez pour rien d'autre, bien sûr. Mais ce que vous voulez faire maintenant, c'est accéder aux détails du compte. Ensuite, vous souhaitez exporter une clé privée. Cliquez donc sur Exporter la clé privée. Et j'ai compris, tu dois entrer ton mot de passe MetaMask. Alors, laissez-moi saisir ça. Saisissez donc votre mot de passe MetaMask et cliquez sur Confirmer, pour afficher votre clé privée. Donc, copiez ça. Copiez ça. Revenez ensuite au code VS et ce sera vos comptes. Mais voyez que c'est au pluriel. Le fait qu'il soit au pluriel signifie que vous devez le mettre dans un tableau. Je vais donc mettre vos citations et les coller comme ça. Bien sûr, nous ne voulons pas cela dans notre fichier de configuration. Nous voulons le placer dans un fichier ENV. Passons donc au contrat et créons un nouveau fichier. Il va s'appeler Dot ENV. Et nous allons avoir une valeur appelée URL. Et nous allons récupérer cette URL. Et en fait, c'est égal et collez ça dans. Et puis vous le souhaitez, puis un autre appel à compter est égal. Et ensuite, c'est là que vous voulez coller votre clé privée. Alors allez-y et collez votre clé privée ici et enregistrez-la. Revenons maintenant au fichier de configuration et nous voulons utiliser un paquet appelé dot ENV. Donc, ne pas installer Dot ENV. Et j'oublie toujours comment cela fonctionne. Dot ENV, ES6. Oui, nous allons donc importer Dot ENV. Et une fois cela fait, nous pourrons l'utiliser car NodeJS utilise ces variables d'environnement qui sont traitées par le nom d'environnement ENV. Donc, en haut, nous allons importer la configuration point ENV, et ensuite nous devrions être en mesure de dire URL de point ENV de processus. Ensuite, ici, dans le tableau, nous allons dire traiter les points ENV, doter les comptes et l'enregistrer. Et maintenant, nous devrions pouvoir nous déployer. Nous avons tout ce dont nous avons besoin. Essayons ça. Casquette en boîte à pois. En fait, j'ai activé Auto Suggest. Donc, NPS Hardhat exécute des scripts slash exemple script.js, dash, dash network. Maintenant, nous ne voulons pas d'hôte local, nous voulons ce que nous avons ici, c' est-à-dire le réseau de test. Nous devrions donc pouvoir effacer que dans le réseau que nous voulons utiliser est test net. Si nous le voulions, si nous voulions définir autre chose, nous mettons tout le réseau principal et le même genre de choses. Ensuite, nous pouvons déployer le réseau principal si nous le voulions, mais nous allons le déployer pour tester net et appuyer sur Entrée. Et cela indique que vous ne pouvez pas utiliser d'instruction d'importation en dehors d'un module. C'est très bien. Revenons en arrière et prenons l'autre, qui est la déclaration requise. Pour mettre besoin là et réessayer. On y va. Chaîne de vélo déployée à cette adresse contractuelle. Et si nous passons aux tests de balayage BSC , notre adresse ou notre adresse de contrat. Le voilà, l'âge de trente-cinq secondes ou le contrat. Voici notre bytecode. Allez à des événements. Je ne pense pas que nous ayons d'événements. Transactions, pas de transactions. Génial. Nous avons déployé notre contrat sur le réseau de test de la chaîne intelligente financière. Nous en avons donc fini avec la partie contractuelle. Si nous devons apporter des modifications à nouveau, nous allons simplement le recompiler et le redéployer. Il nous donnera une nouvelle adresse de contrat et nous allons juste la mettre à jour en front end. Félicitations, vous en avez fini avec votre contrat. Il est maintenant temps de commencer sur le front end. 4. Configuration du projet et construction de Setup: Très bien, maintenant nous allons nous concentrer sur le front end. Et ce que nous ferions normalement avec l'application React, c'est que nous utiliserions l'application Create React pour amorcer un projet, mais nous allons utiliser quelque chose de différent appelé vite. Maintenant, vite est exactement comme l'application Create React, mais elle est plus rapide et comporte d' autres personnalisations, mais nous n'allons pas nous en inquiéter. Il devrait donc être comme un pour l'autre. Nous devrions être en mesure de l'utiliser et de faire tout ce que nous ferions dans l'application Create React. Donc, si vous allez au vote, c'est un octet, js dot dev. Et cliquez sur Commencer. Et puis descendez à, faisons du fil créer vite. N'hésitez pas à faire npm si vous le souhaitez. Je préfère juste le fil. Et dans votre dossier racine, il suffit de le coller et de cliquer sur Entrée du fil, créer une morsure. Et il va bootstrap un projet React. Donc, nom du projet, appelons-le client. Parce que ça va être la première ligne de notre application. Ensuite, sélectionnez un cadre. Bien sûr, nous allons choisir React. Je ne veux pas utiliser TypeScript. Il suffit donc de choisir React. Et on y va. Terminé. Par conséquent, si vous clôturez votre contrat, vous verrez que vous disposez désormais d'un dossier client. Et si vous le regardez, c'est presque exactement la même chose que l'application Create React. Nous allons donc prendre le CSS de l' application et le supprimer. Et le favicon et le logo, supprimez-les. Ensuite, dans l'application JSX, nous allons simplement supprimer toute cette div d'entrée. Bonjour juste pour voir que ça marche. Et pour exécuter cela, si nous regardons le paquet JSON, c'est le cas, le script est sourd. Nous pouvons donc faire un dev run ou npm run dev. L'un ou l'autre. Bien sûr, je dois être dans le bon dossier. Assurez-vous donc de voir la fin de votre dossier client. Lancez-le encore une fois. Et bien sûr, nous devons installer Yarn ou NPM pour installer des paquets R. Très bien, essayons encore une fois. Vous n'êtes pas Yarn, installez Yarn run dev, et allez sur localhost. 3 000 n'ont pas réussi à entrer. Ok, on a donc supprimé quelques fichiers. Nous devons supprimer les importations, aller également dans l'application JSX, supprimer cette importante déclaration de logo. Nous n'avons pas de CSS d'application, vous pouvez le supprimer, l'enregistrer. Et je pense que c'est tout. JS principal. Oui, c'est bien. Si nous ouvrons notre application . On y va. Oui, ça dit bonjour, donc nos applications fonctionnent bien. Donc la première chose que je vais faire, nous allons en fait utiliser une réflexion sur framework CSS que nous devrions utiliser avec ça. En fait, nous allons utiliser l'interface utilisateur du chakra parce que je pense que nous pouvons vraiment faire tourner ça rapidement avec ça. Maintenant, je ne l'ai pas beaucoup utilisé. Donc, si vous ne l'avez pas utilisé non plus, nous sommes dans le même bateau, mais c'est vraiment facile. Nous allons donc d'abord visiter le site Web. Chakra II. Et je suis dans Brave, je ne veux pas être dans Brave. Laissez-moi fermer ça. Chakra UI.com. Chakra-UI.com, puis cliquez sur Commencer. J'envisagerais d'utiliser Tailwind, mais j'ai fait un tutoriel à deux vents arrière une fois par le passé et c'était tellement, tellement de cours à suivre. Je pense que ce sera beaucoup plus facile avec ça. Nous allons donc commencer et nous accédons à cette page des premières étapes. Nous allons faire défiler vers le bas jusqu' à la page Créer une application React. Cliquez dessus. Et nous voyons ici que si nous utilisons l'application Create React, nous pouvons exécuter la commande qui amorce ce framework CSS avec elle. Nous n'utilisons pas l'application Create React même si elle est très similaire. Nous devons donc le faire manuellement. Alors venez ici à l'installation manuelle. Cliquez sur fil ou sur VM, puis installez-le. Arrêtez donc votre serveur et collez cette commande et installons l'interface utilisateur de chakra. Il y a d'autres paquets, émotion et du cadre ou du mouvement. Ensuite, nous voudrons configurer ce fournisseur. Nous devons donc ajouter ce fournisseur qui enveloppe notre composant d'application. Je vais donc d'abord utiliser cette déclaration d'importation. Je vais le copier et aller au JS principal. Collons simplement ça ici au-dessus de votre CSS d'index. Ensuite, nous voulons envelopper l'application. Et je vais juste prendre tout ça et le remplacer. Nous allons également utiliser des icônes. Donc, si vous allez dans Components et quelque part il y a des icônes. Nous allons juste le chercher. Les médias et les icônes recherchent cette section et cliquez sur l'icône, vous voudrez installer ce package d'icônes pour le copier et l'installer. Alors collez-le ici et installez votre paquet d'icônes. Et bien que ce soit installer ce que nous voulons faire pour le temps, comme ce n'est pas vraiment un cours CSS, interface utilisateur de chakra a beaucoup de composants que vous pouvez copier et coller. Vous pouvez le copier, puis le modifier comme vous le souhaitez. Nous ne voulons pas faire les choses à partir de zéro ici. Nous ne voulons pas réinventer la roue. Donc, si vous accédez à la barre de navigation de l'interface utilisateur chakra, vous accéderez à une page contenant de nombreux composants prédéfinis. Il y a donc les sections de page, les formulaires de navigation, les composants, beaucoup de choses déjà assemblées. Maintenant, cette page ne se charge parfois pas pour une raison quelconque, comme si ce contenu ne se charge pas. Je veux donc ce premier bar de navigation parce que c'est le plus simple. Il suffit donc de cliquer sur cette flèche pour l'ouvrir dans une nouvelle page afin d'avoir un aperçu de ce à quoi elle ressemble. Donc oui, c'est à ça que ça ressemble. Voici votre logo, voici quelques articles de navigation. Ils disposent de sous-menus , puis d'une connexion et de s'inscrire. Nous allons courir avec ça. Revenons donc à cette page et cliquons sur le code. Nous allons utiliser la sous-navigation largeur et le CTA. Cliquez sur Code et cliquez sur Copier. Ensuite, nous allons créer un nouveau composant. Allons donc à la source, créons un nouveau dossier appelé composants, et créons un nouveau fichier appelé nav bar dot js X. Et je vais coller ça dans tout ça. Et je vais trouver la fonction principale avec ceci, qui est avec la sous-navigation. Je vais le changer juste en barre de navigation. Il est déjà exporté par défaut, donc nous n'avons pas besoin de l'ajouter en bas. Et nous avons des erreurs. Que se passe-t-il ? Oh, on dirait que c'est TypeScript, donc il faut juste s'y adapter. Allons donc vers le bas et retirons simplement tous ces types. Supprimez donc cela de la baie d'éléments NAB. Et nous n'avons pas besoin d'interfacer car il ne s'agit pas de TypeScript. Trouvez la prochaine erreur. Supprimez ce type sous l'élément de navigation mobile. Continuez à monter sous le sous-réseau de bureau. Enlevez ça. Et je pense que nous sommes dans le clair. Nous devrions donc être en mesure de sauvegarder cela et d' exécuter le fil du serveur air, lancer dev. Et nous devrions voir que cette barre de navigation devrait être aussi simple. Bien sûr, ce n'est pas le cas parce que nous ne l'avons pas ajouté à notre composant d'application. C'est donc un bar de navigation. Revenons donc à l'application. Donc APA, JSX, puis en haut, importons, importons la barre de depuis la barre de navigation oblique des composants barre oblique de points. Et puis ici, nous pouvons simplement changer ce bonjour et le remplacer par la barre de navigation et l'enregistrer. Et nous devrions avoir une barre de navigation. On y va. C'est génial. Maintenant, nous n'avons pas besoin de tout cela, tout ce que nous allons garder comme section logo. Nous allons mettre quel que soit le nom de notre application. Et nous n'avons pas besoin de nous connecter et de nous inscrire, nous avons juste besoin de connecter le portefeuille. Faisons donc quelques ajustements pour que nous puissions nous en débarrasser. Voyons voir, trouver du travail. Voici donc les éléments de la barre de navigation. Débarrassez-vous des concepteurs d'embauche. Débarrassez-vous de Learn Design et ces sous-navigations. Débarrassons-nous du bon travail. Débarrassez-vous de l'étiquette d'inspiration. Et nous nous retrouvons avec un tableau vide. Enregistrez-le et voyez si c'est bon. Oui, je me suis débarrassé de nos objets de navigation. Très bien, objet de navigation mobile. Débarrassons-nous de tout cela parce que nous n' avons pas d'objets de navigation. les cas, ça va bien paraître. Je vais donc effacer ça. Je vais effacer la navigation mobile. Débarrasse-toi de ça. Et je suis sûr que c'est référencé quelque part. Alors, trouvons-le. Navigateur mobile Il y est. Je vais donc me débarrasser de toute cette section là-bas. Et je pense que c'est le cas. Nous allons le sauvegarder et nous assurer que tout va bien. Ça va toujours. Trouvons le panneau ici. Connectez-vous et inscrivez-vous. Débarrassez-vous du panneau M. et changez simplement l'inscription pour connecter le portefeuille. Nous ne voulons pas vraiment ce rose. Nous le voulons jusqu'à 500. Et le vol stationnaire, on va aussi faire du sarcelle, mais un peu plus léger, donc oui, faisons-le jusqu'à 300. Et au lieu du logo, mettons une chaîne de vélo. Je pense que c'est ce que nous appelons la chaîne de vélos d'application. Et passons à droite avant cette balise de fermeture. Ajoutons un poids de police égal à 900. Faisons en sorte que ça soit grand. Et la taille de la police. Il va être X grand. Alors sauvegardez-le et voyez à quoi ça ressemble. chaîne de vélo. Ensuite, nous voulons rendre ce fond un peu plus sombre. Ici, là où il est utilisé la valeur du mode couleur, il est réglé sur blanc. Mettons 200 gris. Gardez ça et jetez un coup d'œil. Et ça a l'air génial. Et si nous le réduisons au mobile, nous avons cette petite icône de hamburger, ce que je ne veux pas vraiment. Voyez si nous pouvons savoir où c'est. Bouton d'icône, probablement ça. Débarrassons-nous complètement de ça. Et économisez. C'est. On dirait que nos boutons disparaissent, donc il se passe encore quelque chose de mobile. C'est probablement quelque chose à voir avec le sous-NAB des ordinateurs de bureau. Débarrassez-vous du sous-marin. Et puis, nous allons nous débarrasser de la navigation de bureau car nous n'avons besoin d'aucun de ces éléments de navigation. Débarrassons-nous de cela aussi. Et ça tomberait ici même sur le bureau. Maintenant, débarrassons-nous de cela sauvegardons cela et voyons ce que nous avons. Très bien, et le bouton est toujours en train de disparaître. Et il semble que vous voyez ce bouton ici avec cette base d'affichage MD. Il est réactif comme les requêtes multimédias. Donc, à la base, ce qui est le plus petit, il n'en dit rien. Sortons ça et laissons simplement le médium. Ayez toujours le flex en ligne et cela devrait le réparer. Oui, on y va. Et cela se déplace, mais ça ne m' inquiète pas vraiment. Nous pourrons le réparer plus tard si nécessaire. Ça a l'air bien. Donc, chaîne de vélo et nous avons notre portefeuille Connect. Je vois à quel point c'était facile à configurer, il suffit de coller l'exemple et de le modifier comme vous le souhaitez. Ensuite, nous allons mettre un grand héros ici qui nous pointe vers la page du tableau de bord. Donc, si nous revenons à nos modèles de chakra, il y a quelque part des sections héros de la page héros ici. C'est ce que nous voulons. Je vais choisir ce premier ici. Il y a d'autres options si vous voulez aller avec celles-ci, je vais choisir cette première, et désolé, allez à code, copiez. Et nous allons créer un composant pour ce héros Dot JSX. Je vais le coller comme avant, et nous allons changer le nom de la fonction principale , le héros. Nous allons créer un autre composant appelé home. Donc, le point est X. Et ça va être notre page d'accueil. Nous n'aurons que deux pages sur cette application, donc nous allons le faire comme ça. Et pour la maison, disons que const home est égal à retourner une maison. Ramenons juste à la maison pour rendre quelque chose. En fait. Allons-le. Bien sûr, retournez notre héros. Héros. Assurez-vous de faire votre déclaration d'importation en haut. Et en bas, en bas, je vais exporter la maison par défaut. Et revenons à notre héros et modifions cela pour que cela fonctionne. Et en fait, nous allons juste rentrer chez nous pour l'instant. Je ne le veux pas ici, mais mettons-le ici pour que nous puissions voir à quoi cela ressemble lorsque nous le construisons. Et encore une fois, assurez-vous d'avoir importé en haut. Et cela n'aime pas que nous n'ayons pas d'élément parent qui les enveloppe. Je vais donc l'envelopper avec ces éléments vierges. Super, et nous avons quelques erreurs car nous devons ajuster certaines choses et héros. Donc la première chose est qu'il est dit importer caché de la prochaine tête, qui ressemble à côté de JS. Ces modèles utilisent donc différentes technologies. Nous n'utilisons pas à côté de nous. Je vais supprimer ça. Et je vais juste enlever la partie de la tête. Nous n'en avons pas besoin. Et tout le reste semble bien. Sauvons-le et voyons un peu à quoi il ressemble. C'est comme déjà prêt à aller ici, mais nous devons changer ce texte. Retrouvons notre texte ici et il dit gagner de l'argent à partir de, et nous allons dire, louez votre prochain vélo. Et puis ce texte ici, nous allons dire avec crypto. Ensuite, pour ce texte, saisissons connecter votre portefeuille, choisir votre vélo et vous partirez aux courses. Quand vous le rendez. Vous pouvez facilement payer votre billet avec B&B et activons l'emballage de mots. Et nous aimons tous ces frais d'essence de B&B parce que nous économisons vraiment cela et jetons un coup d'œil. Votre prochain vierge avec crypto, et voici notre déclaration. Et faisons en sorte que cela corresponde avec notre bouton là-haut. Faisons tout ce match vert et il y a un Get Started et à partir de 15 ans, abordons cela aussi. La première chose que je vais faire, c'est de louer votre prochain vierge. Mettons ça comme un bleu sarcelle. Nous voulons utiliser du bleu sarcelle, pas du vert. Ensuite, ici, commencez, disons choisir mon vélo. Et encore une fois, réglez ça pour sarcelle. Et ces derniers ici, l'arrière-plan jusqu' au jeu de couleurs Faisons TOO aussi voir à quoi cela ressemble. Ensuite, cela apprenez-en plus. Nous n'en avons pas vraiment besoin. Débarrassez-vous de tout ce bouton. Ensuite, il y a 15$ par mois. Mettons le loyer sans frais à l'avance. Et nous devrions en avoir fini avec cela. Choisir mon vélo loué sait coûter à l'avance, donc nous devrions pouvoir cliquer dessus. Et cela devrait nous amener au tableau de bord. Et ça s'est déroulé sans frais. C'est un peu proche. Revenons en arrière et voyons si nous pouvons faire avancer cela. Mettons donc le haut. Nous voulons le dire comme 25 au lieu de 15. Je pense que c'est bien. Oui, c'est très bien. J'ai couru sans frais à l'avance. Vous pouvez sortir le vélo, vous pouvez l'écrire et vous n'avez qu'à payer à leur retour. Nous voulons maintenant pouvoir cliquer sur ce bouton et accéder à la page du tableau de bord. Pour cela, nous allons avoir besoin du routeur React. Je vais donc voir Google aussi vite que ça. Routeur React. Lisez l'installation des documents et nous avons juste besoin du fil ou du fil NPM Yarn ajouter React routeur dom à six. Nous allons donc ajouter ça. J'ai arrêté mon serveur, exécutez-le, démarrez la sauvegarde de mon serveur. Et nous allons aller sur l'application JSX et ajouter tout cela ici. Nous devons donc effectuer une importation. En fait, je peux probablement l' obtenir sur la page. Importez le routeur du navigateur. Allons de l'avant et saisissons ça, économise un peu de saisie. Faisons ça en tant que routeur. Je pense que c'est une convention. Importons l'itinéraire, l'itinéraire et les itinéraires à partir du routeur React, dom. Dans cette déclaration de retour, nous allons mettre un composant routeur, majuscule R. Nous allons tout envelopper dans ce composant de routeur. Je vais garder ma barre de navigation là. Je vais rentrer chez moi. Et à l'intérieur de ce routeur, je veux définir mes itinéraires. Donc les itinéraires. Et puis, à l'intérieur, nous allons mettre en place deux itinéraires, un pour une page d'accueil, un pour notre page de tableau de bord. Le premier est donc la route. Ensuite, faites le chemin exact est égal à barre oblique, qui est leur page d'accueil. L'élément plus mince est le composant domestique et sa fermeture automatique. Et ensuite, il suffit de copier ça. Et le deuxième chemin sera le tableau de bord. Element va être un tableau de bord que nous n'avons pas encore créé. Nous le ferons dans une minute, ça va probablement s' éteindre, mais c'est bon. Laissez-moi juste formater ça. Yup. Je pense que c'est tout. C'est bien, et nous n'en avons pas besoin. C'est le reste du Bootstrap initial. Nous avons donc un routeur à l'intérieur, nous avons des itinéraires et nous avons deux itinéraires définis. Maintenant, nous pouvons revenir à notre héros pour savoir où se trouve un bouton juste ici. Et comme il s'agit d'un bouton, vous ne pouvez pas vraiment faire de lien. Alors, faisons simplement un onclick. Nous allons avoir des parenthèses et nous allons appeler Handle Click. Et en argument, nous allons passer le tableau de bord. Définissons ensuite cela. Alors, revenons ici à notre fonction de héros. Et en fait, avant cela, nous devons importer navigation, qui est une fonctionnalité du routeur React dom, qui nous permet de naviguer vers différents chemins. Donc, nous importons, utilisons navigation à partir du routeur React, dom. Nous devons maintenant définir ce crochet. Laissez donc naviguer égaux utiliser naviguer. Et maintenant créons notre fonction Const, gérer le clic égal. Nous allons passer n'importe quel chemin en tant que paramètre. Et nous allons appeler Navigate. Il s'agit d'une convention React routeur six, soit dit en passant, utilisez le crochet navigué et nous le définissons simplement comme naviguer et nous allons simplement l'utiliser ici. Parcourez donc le chemin dans le chemin étant ce que je passe. Et si vous regardez ici, je passe des tableaux de bord. Cela devrait donc nous naviguer, nous diriger vers l'itinéraire du tableau de bord. Enregistrez cela et nous n' avons pas d'itinéraires de tableau de bord. Passons donc à un nouveau fichier et créons un nouveau composant. Dot de tableau de bord JSX. Et je vais juste copier la maison et coller ici et changer d' accueil pour Dashboard. Et je n'ai pas besoin de cette importation de héros. Nous devons corriger l'orthographe, et je n'ai pas besoin de ce composant ici non plus. Je vais juste mettre un H qui dit tableau de bord. Nous allons donc vérifier notre composant maison. Nous avons notre héros. Donc, ça va afficher votre héros. Dans ce composant d'accueil sera appelé chaque fois que nous allons sur la page d'accueil en fonction de nos itinéraires, rappelez-vous les itinéraires que nous avons créés. Nous devrions donc pouvoir maintenant accéder à notre application et accéder à la page d'accueil. Donc localhost 3 000 rafraîchissent et ça ne fonctionne pas. Qu'est-ce qu'on oublie de faire ? Le tableau de bord n'est pas défini. Bien sûr, ce n'est pas défini. Nous ne l'avons pas importé en haut. Voyez que nous utilisons le composant , mais nous ne l'avons pas importé. Il nous suffit donc d'ajouter une instruction d' importation sous ce tableau de bord d'importation à partir du tableau de bord des composants. Enregistrez-le et notre page d'accueil devrait être cela. On y va. Nous avons donc notre barre de navigation, nous avons un bouton Connect Wallet, que nous traiterons plus tard. Nous avons un héros sympa et si nous cliquons sur Choisir mon vélo, il devrait nous conduire à la page du tableau de bord. Génial, notre page d'accueil est terminée. Pour résumer, nous avons notre principal JSX, qui est encapsulé avec cette interface utilisateur de chakra, afin que nous puissions l'utiliser n'importe où par ce fournisseur de chakra. Leur application JSX, nous avons des itinéraires en cours. Ainsi, notre page d' accueil, route de la page d'accueil va afficher le composant d'accueil. Notre itinéraire de tableau de bord va afficher le composant de tableau de bord. Et puis nous avons une barre de navigation, qui est notre barre de navigation qui est appelée dans l'application ici. Parce que nous voulons que ce soit aussi dans un routeur. Nous avons notre composante maison, qui affiche notre héros. Parce que c'est ce qui se trouve sur la page d'accueil. Nous avons notre héros, que nous venons de regarder. Ensuite, nous avons un tableau de bord auquel nous allons passer ensuite. Sur le tableau de bord, nous allons pouvoir afficher toutes les statistiques. Nous allons pouvoir choisir leur vélo et interagir avec leur portefeuille. C'est ici que toute la magie va se produire. Allons de l'avant et construisons cela. 5. Créer le tableau de bord: Très bien, la prochaine chose que nous voulons faire est de créer notre page de tableau de bord. Voici à quoi il est censé ressembler. Nous allons donc avoir cette déclaration bienvenue et nous aurons quelques statistiques ici. Ce sera notre tableau de bord, aura un formulaire qui vous permettra de payer What's du aura un formulaire pour créditer votre compte, aura une sélection de vélos ici. Nous avons donc trois types de vélos différents. Une description de chaque vélo et la possibilité de vérifier un vélo et un vélo, c'est ce que nous allons construire. Tout d'abord, créons le panneau de statistiques. Je vais donc revenir à ces modèles de chakra et j'ai cette section Page appelée statistiques. Et nous allons juste le tirer directement à partir de là. Nous utilisons donc celui qui s'appelle les statistiques avec icône. Ça va ressembler à ça. Cliquez donc sur le code et copiez-le simplement. Ensuite, je vais créer un nouveau composant pour cela. Je vais appeler ça les totaux actuels point JSX et coller simplement dans ce code. Et je pense que c'est aussi TypeScript, donc nous devrons supprimer les types. Nous allons donc supprimer cela, supprimerons l'interface. Et je pense que c'est tout ce que nous avons à faire. Nous allons maintenant l'importer dans notre composant de tableau de bord, qui sera le composant parent de ces composants enfants. Importez donc le total actuel. Et mon intelligence n'arrive pas à me dire que nous ne l'avons pas exporté. Nous allons donc vérifier cela. Carte de statistiques de fonction. En fait, nous ne l'avons même pas nommé. Donc, exportez la fonction par défaut, nous allons appeler ces totaux actuels. Et essayons encore une fois. Retournez au tableau de bord. Importez les totaux actuels à partir des totaux actuels. Il se trouve dans le même dossier. Et puis, au lieu de ce H1, affichons les totaux actuels et voyons à quoi cela ressemble. Et nous avons un filtre d'erreur résolu des icônes réactées, BS à partir des totaux actuels, JSX le fichier existe-t-il ? Et il semble qu'ils utilisent le package NPM des icônes React. Nous allons nous assurer qu'il s'agit d'un paquet. Icônes React. Et oui, on peut donc cliquer dessus et l'installer. Donc ici, npm install, React, icônes de tiret. Je vais utiliser du fil comme je l'ai fait. Installation Yarn, icônes React. Oups, ajout de fils, icônes de réaction. Et installons, et nous devrions être bons après ça. Maintenant, je vais relancer mon serveur et le rafraîchir. Et on y va. Nous avons nos trois statistiques, mais nous en voulons quatre et nous voulons les modifier un peu. Nous voulons donc que le premier soit doté d'une icône de portefeuille. Deuxièmement, une icône d'argent. Travaillons là-dessus. Défilons donc vers le bas jusqu' à la fiche de statistiques, composants du chocolat ou à l'interface utilisateur. Et vous verrez ici qu'il est dit comme icône BS person, F phi server, go location. Qu'est-ce que tout ça ? Eh bien, nous pouvons revenir sur les icônes de réaction et regarder ça. Je veux donc un portefeuille. Lequel avons-nous utilisé ici ? On dirait ça. Il semble que nous utilisions ce compte contour MD. Vous pouvez maintenant savoir de quelle bibliothèque ils proviennent par les deux premières lettres ou trois lettres. Donc, si vous voyez comme IO alors qu'il est net, il s'agit probablement de ces icônes ioniques. Si vous voyez MD, c'est probablement Material Design dans nos yeux est comme une icône de remixage. Ainsi, lorsque vous cliquez dessus, il copie ce nom dans votre presse-papiers. Vous voulez aller ici et voir où il est écrit oblique BS slash FI. Voici les différentes bibliothèques ici. Nous ne le ferons donc pas car il s' agit d'un compte contour Md dans MD est Material Design. Je vais juste copier cela et importer mon nom d'icône copié à partir de la barre oblique d'icône React MD. Et nous devrions y être bons. Je vais donc y aller changer le premier. Je vais changer l'icône en porte-monnaie du solde du compte contour MD. Et nous appelons ce crédit B et B, crédit B&B. Et disons 0,05. Génial, ça a l'air bien. Ensuite, nous avons ce symbole d'argent. Je vais donc aller sur mes icônes React et taper de l'argent. Peut-être. Oui, le voilà, RI, argent, cercle de dollars et c'est des RI, donc c'est une icône remixée. Cliquez donc dessus et faites défiler vers le haut. Et je peux probablement commencer les remplacer parce que je ne vais pas les utiliser. Je vais donc coller ça ici et c'est RI, et je vais venir ici et le coller dans le prochain. Alors, collez ça. Et puis je vais le changer en B et B. Ainsi, B&B le fait. Et je vais juste mettre 0,001 juste pour le remplissage. Ensuite, notre prochaine icône est cette horloge. Et ça va prendre quelques minutes de trajet. Je vais donc revenir à mon icône React et taper une horloge. On va y aller avec celui-là, un cercle d'horloge à contour. C'est de l'IA. Nous devons donc nous assurer de le dire. Mais c'est mon troisième. Et changez cela en minutes de trajet. Je vais en laisser sept. C'est bien avec moi. Ensuite, nous devons en ajouter un autre. Donc, si vous regardez ici, la grille simple est configurée pour une base à trois colonnes , puis une sur de petits écrans. Mais nous devons changer cela par quatre. Nous aurons donc quatre colonnes car nous voudrions des icônes. Et puis je vais juste copier ça et l'enregistrer pour m' assurer que c'est bien. Ce n'est pas le cercle d'horloge de contour IA n' est pas défini bien sûr. Allons ici et collons ça. Et c'est un jour. Ensuite, nous pourrons nous débarrasser de celui-ci et l'enregistrer et cela devrait fonctionner. Maintenant, on y va. Nous avons donc notre crédit B&B ou notre B&B faire quelques minutes de trajet. Et puis le dernier indique statut de la moto et est en fait une couleur. Ce que nous pouvons faire, c'est que nous pouvons tout d'abord obtenir le même statut de vélo. Et ensuite, nous n'avons pas besoin de ces deux-là, donc je vais les commenter. Nous devons ajouter une variable de couleur d' arrière-plan afin de pouvoir examiner le parent statistique réel. Et ensuite, nous verrons ici qu'il y a réellement des invites qui sont transmises. Ainsi, la statistique du titre et l'icône sont corrélées à chaque carte de statistiques avec une statistique de titre et une icône. Et puis, ici, nous transmettons cette information. Il suffit donc d'ajouter un autre accessoire ici appelé BG color pour la couleur d'arrière-plan. Nous allons donc passer ça. Et ceux-ci sont détruits, donc nous n'avons pas besoin d'aller avec des accessoires de couleur BG. Nous pouvons simplement utiliser la variable. Nous pouvons ajouter ici un autre attribut indiquant que couleur d'arrière-plan est égale à la couleur BG. Donc, peu importe ce que nous transmettons comme accessoire, il va le changer en couleur d'arrière-plan. Génial. Allons-y maintenant. Et cette dernière, nous allons dire que la couleur est égale. Allons de l'avant et faisons simplement du rouge pour l'instant. Enregistrez-le et voyez si cela a fonctionné. Oui, ici, nous l'avons maintenant. Les couleurs de fond rouge. Donc, aucun des autres n'obtient couleur d'arrière-plan car elle n'est pas transmise. C'est seulement en train d'être transmis . Et ce dernier. Ce que nous pouvons faire, c'est que nous pouvons rendre cela conditionnel, comme si le locataire a vérifié un vélo et que nous voulons qu'il soit vert. Nous reviendrons donc sur cette question lorsque nous commencerons à mettre en place toute la logique. Je pense donc que nous en avons fini avec leur petit tableau de bord. En fait, nous devons changer ce texte. Changeons donc cela pour accueillir votre nom. Voici vos statistiques et votre nom sera dynamique plus tard. Si vous venez ici, juste ici. Bienvenue. Travis. Voici vos statistiques. Génial. Encore une fois, nous ne faisons que construire l'interface utilisateur. Nous n'avons rien de dynamique. On ne fait que rendre ça beau. Ensuite, sur notre liste, nous avons ces deux formulaires, payons votre dû et créditons votre compte. Revenons donc à ces modèles de chakra et voyons si nous pouvons trouver quelque chose. Voici des formulaires. Et je ne veux pas vraiment les utiliser. Je veux quelque chose de simple. Et quand je fais des forums et que je réagis, j'aime utiliser le formulaire React hook, qui est une bibliothèque que je trouve vraiment facile, je pense qu'elle est plus facile que certains autres. Si vous utilisez un formulaire de crochet React et une interface utilisateur de chakra, vous devriez obtenir un bel exemple avec lequel nous pouvons travailler. Il s'agit donc en fait du site Web du chakra. Encore une fois, je suis allé sur Google, j'ai tapé dans la forme de crochet React et l'interface utilisateur du chakra. Et vous allez obtenir cette URL, l'interface utilisateur du chakra. Plus un crochet React pour eux. Cliquez donc dessus. Et prenons, copions ça ici et voyons à quoi ça ressemble. Créons donc un nouveau composant. Appelons ça un formulaire de paiement. C'est la formule pe avec point JSX. Et collez cela dans et trouvez ensuite notre fonction principale appelée Hook form et changez-le simplement pour les payer. Et puis dans notre tableau de bord, et en fait je pense que je vais inclure cela dans les totaux actuels en un peu , car nous allons ajouter ces valeurs à ce tableau de bord. Je vais donc les mettre en bas ici. Et ce que je vais faire, c'est que je vais créer un composant flex. Et je vais justifier le contenu au centre. Et je vais aligner les objets sur le centre. Entre les deux, je vais mettre le formulaire de paye. Un formulaire. Si je clique sur Entrée, je pense qu'il l'importe automatiquement pour moi. Si ce n'est pas le cas, assurez-vous d'arriver au sommet et d'importer un formulaire de paiement à partir d'un formulaire. Dans ma mise en forme, tout est désactivé. Permettez-moi de formater ça. On y va. Et voyons à quoi ça ressemble. Je vais donc l'enregistrer et j'ai un problème. Ne parvient pas à résoudre, React crochet pour lui. OK. Oui. Nous devons donc installer cette bibliothèque. Laissez-moi tuer mon serveur et faire du fil. Ajouter, réagir, former un crochet. Je pense que c'est ce que nous disons. Ou vous pouvez faire npm install, React hook form. Nous allons d'abord installer ça. Très bien, exécutez à nouveau votre serveur. Jetons un coup d'œil. Très bien, bien. Nous avons donc ici un petit formulaire qui dit « FirstName ». Il contient une entrée de texte pour votre nom, puis un bouton Envoyer. Donc, c'est très bien. Nous allons le modifier un peu pour dire que vous payez votre dû , puis prenez un paiement. Donc, si nous faisons défiler vers le bas, nous verrons ici que c'est notre formulaire. Nous avons une étiquette de formulaire indiquant FirstName. Nous avons une entrée qui possède certains attributs. Nom de l'identifiant, nom de l'espace réservé, ce registre, comme les registres, cette valeur avec le formulaire de crochet. Vous verrez comment cela fonctionne en une minute , puis vous y définissez certaines exigences. Il s'agit donc d'un champ obligatoire, longueur minimale doit être de quatre. Et puis il y a ce message d'erreur qui peut apparaître si ces exigences ne sont pas remplies. Nous allons donc modifier cela avant d'avoir le contrôle des formulaires. Je vais juste faire juste au-dessus du contrôle de formulaire ici. Et laissez-moi formater cela parce que je n' aime pas non plus le format, juste au-dessus de ce contrôle de formulaire sur l'instruction retour. Faisons un composant de texte. Il s'agit du composant Text de l' interface utilisateur chakra. Et à l'intérieur de cela, nous allons mettre une police de caractères. La famille de polices est égale taille du titre et de la police. Parce que nous voulons que ce soit plus grand, nous allons faire un poids extra large et un poids de police. Nous allons en faire 600. Et ensuite, nous allons mettre une marge sur le fond. Donc, nb est égal à quatre. Et laissez-moi vous rapporter ça. Et entre les deux, nous allons mettre le paiement à votre compte. Nous allons donc avoir cela au-dessus du formulaire ou au-dessus de l'entrée. Donc, tout ce que nous avons à faire ici, c'est de changer toutes ces occurrences de noms par quelque chose comme le paiement. Nous allons donc changer ce qui est invalide deux erreurs, le paiement par point. Nous retirerons complètement l'étiquette parce que nous n'en avons pas besoin, car nous avons le texte au-dessus du contrôle de formulaire ici. Pour l'entrée, nous effectuerons le paiement d'identité, espace réservé, le paiement Let's put, le paiement du capital P. Nous allons enregistrer cette valeur, quelle que soit la valeur que nous saisissons, nous allons l'enregistrer comme paiement. Et c'est vraiment cool. Comme si vous avez fait tout un tas d'entrées ici, cela créera un tableau de paires de valeurs clés de tout ce que vous soumettez dans votre formulaire. Il va donc dire deux-points de paiement, peu importe ce que nous entrons dans le forum, il fait tout le travail pour nous. Nécessaire. Oui, c'est obligatoire. Je ne vais pas avoir de longueur minimale. Je vais donc m'en sortir. Puis ici les flèches nom du point, je vais mettre le nom du point de paiement et les erreurs, message de point, changer le paiement. Au fait, vous pourriez laisser ça comme nom. Il va simplement dire que sur la sortie, il aura la clé de nom au lieu du paiement. C'est un peu déroutant. Nous effectuons donc le paiement à la place. Génial. Et il a un crochet intégré, se soumet, je pense qu'il crée un spinner ou quelque chose comme ça. Mais voici votre bouton Soumettre. Voyons donc à quoi ça ressemble. En fait, avant de faire cela, passons ici et regardons la fonction onsubmit. Ils incluent donc même ce formulaire sursoumit handle soumettre, à soumettre, à soumettre. Il s'agit d'une forme de crochet React. Convention ici, mais vous verrez ici lors de la soumission, nous avons une nouvelle promesse. Maintenant, je ne veux pas ce SetTimeout. C'est juste de mettre comme un produit de remplissage pour nous qu'au bout de trois secondes il montrera toutes les valeurs que nous faisons pour le rendre réel. Je ne le veux pas vraiment. Je vais m'en sortir. Je vais garder ce JSON stringify. Mais je vais m'en sortir. Et je vais faire ça dans une fonction de flèche ES6. Const onsubmit est donc égal à des valeurs. Ensuite, je vais en faire un évier. Et tout ce que je vais faire, c'est enregistrer les valeurs dans la console, console.log. Et voyons si cela fonctionne. Oups, j'en ai besoin. Donc, JSON stringifie ces valeurs , sauvegarde ça, et donnons un tourbillon. Mais bien sûr, nous avons une erreur car nous avons toujours une erreur. Impossible de construire du texte, veuillez utiliser le nouvel opérateur. Je pense donc que c'est parce que nous n'avons pas importé ce composant de texte. Ajoutons donc du texte à notre importation, l'importation de l'interface utilisateur chakra. Et qu'est-ce que nous avons utilisé d'autre ? Je ne pense pas que nous ayons utilisé autre chose, donc ça devrait fonctionner. Gardez-le. Et nous y voilà. Payez votre do. Permettez-moi de vider la console et nous devrions voir notre valeur apparaître. Je vais donc dire bonjour et me soumettre. Le voilà, le paiement. Bonjour, valeur clé. C'est bon d'y aller, mais nous ne voulons pas que les gens mettent des ficelles ici. Nous voulons qu'ils ne placent que des nombres et non seulement des nombres, mais des nombres décimaux parce que nous avons affaire à B&B. Pour ce faire, nous venons ici et nous définissons le type sur nombre. Et puis, parce que nous voulons pouvoir utiliser des décimales, nous pouvons ajouter l'attribut step et simplement mettre n'importe quelle sauvegarde. Et maintenant, nous pouvons faire comme un 0.001, appuyer sur Soumettre, et il se soumet correctement. Et si nous essayons de nous soumettre sans rien, cela va dire que c'est nécessaire. Cela est obligatoire. Je ne vais pas nous laisser le faire. C'est ce qui est intéressant dans les formes à crochet React. Il aime tous ces trucs pour vous. Et une fois que vous vous êtes habitué à l'utiliser, c' est une excellente bibliothèque. Et juste au cas où vous vous demandez quelle est cette étape, si je la retire et que j'essaie de mettre ce numéro, je peux mettre 0,01 mais quand je clique sur Soumettre, il est indiqué s'il vous plaît entrer une valeur valide. Les valeurs les plus proches sont 01, vous ne pouvez donc utiliser que des nombres entiers. Vous ne pouvez pas utiliser cette décimale. Nous devons donc autoriser la fonctionnalité de cette étape. Par conséquent, l'étape est égale à NE. Maintenant que cela fonctionne, continuons et ajoutons l'autre, c' est-à-dire le crédit de votre compte, où vous pouvez ajouter du crédit à votre solde. Nous allons donc faire exactement la même chose. Je peux simplement copier ce formulaire de page. Je vais créer un nouveau composant et l'appeler ajouter deux formes équilibrées que JSX colle ça dans notre autre forme et juste faire quelques ajustements. Donc, au lieu de payer votre compte, nous créditerons votre compte. Ensuite, au lieu de payer, nous ne ferons que le solde de crédit. Je vais donc sélectionner tous ces éléments en fait et faire un solde de crédit. Ensuite, pour l' espace réservé que je veux voir et je pense que c'est tout. Nous allons nous assurer que cela fonctionne. Nous avons le type et l' étape dont nous aurons besoin. Sauvegardons cela et actualisons cette page. Et bien sûr, nous devons ajouter le formulaire à notre page. Vous allez aux totaux actuels et écrivez un formulaire de sous-paiement, ajoutez, ajoutez au solde. Et nous devons en fait changer les noms de fonctions qui sont payants. Ajouter à une forme équilibrée. Ensuite, nous devons l'ajouter à nos totaux actuels, n'est-ce pas ? Formulaire de sous-paiement. Nous devons ajouter le composant. Assurez-vous de l'importer dans les grands esprits, de le faire automatiquement et d' équilibrer la forme. Il y a donc mon composant et il est importé ici. Maintenant, regardons ça. Super. J'ai le payeur dû et je crédite votre compte. Maintenant, ces deux-là ont l'air coincés ensemble, voyez à quel point ils sont proches. Donnons-leur une certaine séparation entre eux et avec le contenu au-dessus. Je vais aller au formulaire PE. Et juste au-dessus de ce formulaire, je vais ajouter flex justifitify content égal à Center. Et c'est juste Flexbox aligner les éléments dans les chakras au centre. Ensuite, nous allons mettre un peu de rembourrage, donc P est égal à cinq. Et puis je vais mettre une marge supérieure à dix. Et je dois faire la même chose sur les autres. Je vais donc juste copier le premier morceau. Assurez-vous de descendre vers le bas et de le fermer. Et j'ai aussi mis mon tag de fermeture là et s'assurer que vous avez importé en haut. Assurez-vous donc de mettre Flex pour l' importer à partir de la bibliothèque de chakras. Et ensuite, nous voulons faire de même sur l'annonce pour une forme équilibrée. Donc juste au-dessus de la forme, collez sur le flex avec la balise de fermeture et venez en bas pour coller cela. Et puis, ici, ajouté à l'importation. Jetons un coup d'oeil là-dessus. On y va. Ils ont donc un peu d'espace entre eux et ils ont un peu d' espace au-dessus et en dessous. Maintenant, juste en dessous, nous allons mettre trois vélos. Nous sommes donc en train de créer ce que le chakra appelle une pile ici. Nous empilons ça au-dessus de ça, en plus de ça. Je veux donc mettre une pile dans le composant de tableau de bord. Et ici, au-dessus de ça, je vais écrire la pile comme boîte, boîtes et autres conventions de chakra. Centre d'alignement du texte. Tout est centré. Et ensuite, nous allons faire des choses réactives ici. Et je pense que j'ai copié ça depuis un autre endroit du projet. Comme je l'ai dit, je ne veux pas passer beaucoup de temps sur CSS car ce n'est vraiment pas la raison pour laquelle nous sommes ici. Nous essayons de construire cela très rapidement pour que nous puissions accéder aux trucs amusants de la blockchain. Donc, espacement de la base huit. Et ce ne sont que des dictons sur de petits écrans, en utilisant huit sur support, c'est 14. Donc MD 14. Et puis le rembourrage PY y, qui est le rembourrage supérieur et inférieur. Nous allons mettre la base 20 et la MD 36. Et nous ferons une étiquette de clôture. Et en bas, sous les totaux actuels, collez cette balise de fermeture. Et puis, en haut, vous devez importer la pile. Importe la pile à partir de Chakra Dash UI slash React. Il suffit donc d'utiliser cette instruction d'importation et de l'enregistrer. Et maintenant, nous avons une erreur. Box n'est pas défini, nous devons donc également importer box. Gardez ça. On y va. Vous voyez maintenant que nos étiquettes, nos zones de texte et nos boutons sont tous centrés en conséquence parce que nous avons fait cette pile et que tout ce qui se trouve dans cette pile doit être centré. Donc, ça a l'air génial. Donc, juste en dessous, nous allons mettre cette rangée de vélos. Donc, une description et ces deux boutons, et nous serons tous prêts à trouver les choses amusantes. Donc ici, sous les totaux actuels, je vais mettre le flex, justifier le contenu égal au centre et aligner les éléments au centre également. Et mon tag de clôture que je vais mettre ci-dessous dans mon tag de clôture, je vais le mettre directement en dessous. Entre les deux. Je vais ajouter ces composants de vélo. Je vais juste mettre un vélo pour l'instant. Et nous allons avoir trois vélos. Alors, allez ici aux composants, cliquez avec le bouton droit de la souris pour créer un nouveau fichier, et appelons ça bike dot JSX. Const bike équivaut à un vélo de retour à un vélo H1 de vélo. Exportons ce vélo d'exportation par défaut. Ensuite, dans notre tableau de bord, ajoutons trois de ces vélos et assurez-vous de l'importer en haut. Importez un vélo depuis un vélo. Ajoutons trois d'entre eux et veillerons à ce que cela fonctionne. Regardez ça. Et la case n'est pas définie dans le tableau de bord. Il est défini. Gardons ça encore une fois. Peut-être que j'ai juste besoin de me rafraîchir. Ok, flex n'est pas défini, alors assurez-vous d'ajouter du flex ici aussi. On y va, vélo, vélo, vélo. Nous devons donc les remplacer par des images. J'ai trois images à utiliser. Il se trouve en dessous de cette vidéo ou quelque part, où que se trouve le contenu du cours. Et ce que je peux faire, c'est que je peux ouvrir, eh bien, je vais créer un dossier appelé assets. Laissez-moi ouvrir cela dans Finder et en ouvrir un autre. Et laissez-moi trouver le mien. Je vais donc coller ces trois éléments. Vélo un, vélo jusqu'à et vélo trois. Très bien, donc pour notre vélo, ce que nous allons faire, c'est créer une boîte. Rappelez-vous ceux-ci, ils sont tous fléchis. Donc, chacun va avoir ce composant de boîte. Ensuite, la taille de la boîte est égale à la grande marge x, qui est gauche ou droite. On va en mettre deux. Il y a donc un peu d'espace entre elle. Fermez ça. Et entre la boîte, nous allons faire une image qui sera notre source d'image égale à vélo, marge, le bas équivaut à dix. Dans ce vélo, ça va être un accessoire. Donc, au lieu d'accessoires, nous allons juste le détruire et mettre un vélo. Nous allons passer ça comme accessoire. Fermons cette image. Il se ferme automatiquement. Ensuite, nous allons créer un composant de texte. Et ici, vous pouvez juste mettre un peu de Lorem Ipsum. Vous trouverez des détails sur le vélo si vous le souhaitez. Je vais juste faire Lorem Ipsum Generator pour l'instant. Et je vais juste copier ce morceau. Une fois encore. Vous pouvez y mettre ce que vous voulez, le coller. Et je vais mettre du papier papier. Donc, si vous allez dans le code VS jusqu'à Afficher et cliquez sur « Wrap ». Il y a donc des textes qui seront sous l'image. Ensuite, je vais empiler quelques boutons. Je vais donc faire une pile. espacement est égal à 0, la direction est égale à rho, aligner, centrer, justifier le centre. Et ensuite, le haut de la marge est égal à cinq. À l'intérieur de la pile, nous voulons mettre un bouton. N'oubliez pas que nous avons utilisé un bouton dans le héros. Je vais juste copier ça. Allez ici et copiez ce bouton. Cela rendra la vie plus facile que nous ne saisissons tout cela. Retournez à vélo et collez ça. Donc, mon bouton va changer ce texte pour dire « checkout ». Et nous en mettrons un autre en dessous. Copiez cela à nouveau et modifiez-le pour enregistrer et supprimer l'onclick. Nous ne voulons pas encore faire face à cela. Je vais formater mon document et l'enregistrer. Et faisons cela avant de cocher le bouton Importer à partir de l'interface utilisateur du tracker, de la zone d'importation, de l'image, de la pile de texte. Et je pense que c'est tout. Nous voulons aussi, eh bien, nous ne pourrons pas encore voir nos images parce que nous passons les vélos. Faisons face à cela avant de consulter notre site. Notre vélo est donc un enfant au tableau de bord. C'est donc ici que nous devons définir l'image de notre vélo. Donc, ici, je peux importer un vélo. Un de je pense que c'est point, point slash assets slash bike one dot JPEG parce que je pense que le nom de l' image, copie ça deux fois. Et changez de vélo un en vélo pour changer de vélo 12 par trois. Nous pouvons donc maintenant les prendre et les passer comme accessoires. On peut donc dire que le vélo est égal à un vélo. Vélo est égal à vélo à vélo équivaut à vélo trois. Nous passons donc dans chaque vélo individuel et nous le recevons comme accessoire dans la composante du vélo. Génial, jetons un coup d' œil à ça et voyons si ça marche. Super. Nos images sont donc ici. Ils doivent être réactifs. Nous utilisons Flex. Oui, ils sont réactifs. Et nous avons un texte que nous pouvons revenir en arrière et modifier comme vous le souhaitez. Et nous avons des boutons de paiement et d'enregistrement. Maintenant, ils sont circulaires et ils n'ont pas d' espace entre eux, alors résolvons cela. Donc sous le bouton, nous n'avons pas besoin de ce jeu de couleurs, bleu sarcelle, mettons m égal à deux pour y mettre une marge. La taille de la police est petite. Le poids de la police est égal à 600. Et ensuite, ce contexte devrait être de 500 au total. Retirez l'arrondi et retirez ce rembourrage x. Et ensuite, pour le survol, faisons un 300. Il est donc un peu plus léger quand on le survole. Je vais donc prendre tout ça et le coller ici. Je vais coller ça ici et le sauvegarder. Et maintenant, il devrait être beaucoup mieux, sauf que le texte est noir. Faisons en sorte que le texte soit blanc. La couleur est égale au blanc. Pour correspondre à tout le reste. Assurez-vous de le faire sur l'autre bouton pour enregistrer et le boom, c'est beau. Maintenant, nous devrions créer cette chaîne de vélo, ce logo ici, aller à la page d'accueil lorsque vous cliquez dessus. Allons donc à la barre de navigation d'en-tête, désolé. Découvrons où c'est, chaîne de vélo, et faisons de cela un maillon. Nous allons donc mettre un lien. Parce que rappelez-vous que le routeur React a configuré un lien vers la barre oblique, qui est notre page d'accueil. Et ensuite, nous mettrons la chaîne de vélo entre ça. Et cela sera lié à la page d'accueil. Alors, sauvegardez-le. Et maintenant, rafraîchissez-vous. Et maintenant, lorsque nous le survolerons, nous verrons qu'il s'agit d'un lien. Nous pouvons cliquer dessus. Et cela ne nous amène pas à la page d'accueil. Quelque chose s'est mal passé. Oh, je vois ce qui se passe. Il importe un lien depuis l'interface utilisateur du chakra. Et nous devons en fait l'importer à partir du routeur React dom, importer le lien depuis React routeur dom. C'est ce qui se passe. Nous n'avons donc pas besoin de ce lien ici. Sortons ça et comment ça devrait fonctionner. Oui, on y va. Chaîne de vélo et vous voyez ci-dessous localhost 3 000 vient ici. Si nous cliquons dessus, nous accédons à la page d'accueil. C'est tellement génial. Je pense que nous en avons fini avec l'interface utilisateur et que nous pouvons réellement commencer maintenant et la logique. Donc, si je suis sur ma page d'accueil, je peux connecter le portefeuille, le bouton là, je peux choisir mon vélo pour accéder au tableau de bord, que nous avons configuré ici. Le tableau de bord donne un crédit à mon B&B. B & B font des minutes de route dans mon statut de vélo. Je suis autorisé à payer mon paiement, mon crédit, mon compte. Je peux choisir un vélo ici, le départ, l'enregistrement. Et je pense que je vais bien. La seule chose qui reste vraiment, c'est quand un nouvel utilisateur arrive sur cette page, ne veut pas voir son tableau de bord parce qu'il ne s'est pas encore inscrit en tant que locataire dans le contrat intelligent. Donc, si je viens sur cette application et que je ne l'ai jamais utilisée, je dois m'inscrire en tant que locataire. N'oubliez pas que nous avons un loyer ou une fonction supplémentaire. Donc, quand ils viennent ici pour la première fois, il doit y avoir un formulaire où ils peuvent s'ajouter en tant que locataire, mais nous n'avons pas encore défini de logique pour le déterminer. Nous allons donc nous arrêter. Et au fur et à mesure que nous commençons la logique, quand nous sommes réellement en mesure déterminer si c'est le cas ou non. Nous ajouterons ce formulaire. Très bon travail de faire passer cette interface utilisateur. Je sais que vous êtes plus enthousiaste interagir avec le contrat intelligent développer cette logique , de vous connecter au portefeuille et de faire des transactions, tous ces trucs amusants. Mais nous avons dû sortir ça du chemin et c'est maintenant hors du chemin. Et nous allons nous amuser encore plus dans la prochaine section. 6. Connecter MetaMask et parler de notre contrat: Ok, donc maintenant pour la partie amusante, connectons notre application au contrat intelligent et commençons à parler à la blockchain. Donc, avant d' entrer dans le front end, nous devons retourner dans le dossier des contrats ici. Et rappelez-vous que lorsque nous compilons ce contrat, il a créé ce dossier d'artefacts et un dossier Contracts, un dossier d'âme de chaîne de vélos dans ce fichier JSON contenant un tas de données. Et rappelez-vous que nous avons parlé du bytecode et de l'ABI. Encore une fois, l'ABI est un moyen de dire à votre application quelles fonctions ou méthodes elle peut appeler, quelles fonctions peuvent appeler, vous êtes contrat intelligent et d' autres informations à ce sujet. Nous devons inclure cela dans notre projet, cet ABI. Prenez donc l'ensemble du tableau et faites simplement défiler jusqu'à la fin de celui-ci, incluez les crochets et copiez-le. Et maintenant, nous allons créer dans notre dossier client un fichier dans le dossier source appelé config dot json. Et nous allons créer juste un JSON normal. Donc les crochets bouclés ici, nous allons mettre ABI comme clé et a une valeur. Nous allons coller dans ce tableau. Et je vais le formater. Et ce sera notre ABI. En plus de cela, nous devons maintenant pouvoir , en plus de cela, nous avons besoin d' une adresse de contrat aérien comme celle où nous avons déployé notre contrat. Je vais donc ajouter une autre clé ici après ça. Mettez donc une virgule et saisissez l'adresse du contrat. Et la valeur sera l'adresse à laquelle nous avons déployé. Et je ne me souviens pas de ce que c'était quand j'ai fait ça. Je vais donc le déployer à nouveau. Je vais revenir sur le dossier racine, CD dans mon dossier de contrat et exécuter NP x hardhat, exécuter des scripts slash sample script.js. Nous allons définir ce drapeau réseau pour le réseau de tests. Rappelez-vous que nous avons mis dans notre configuration hardhat, en fait, nous avons configuré ces réseaux, cet objet de réseaux et recréé un réseau appelé test net. C'est donc ce que nous faisons. Nous sommes en train de déployer l'exécution cet exemple de script ou script de déploiement sur le réseau de test. Je vais donc appuyer sur Entrée et laisser cela se déployer, puis je vais saisir l'adresse du contrat qui a été déployée là, c'est la chaîne de vélos déployée à cette adresse. Je vais le copier, revenir à ma configuration JSON et coller cela en tant que valeur à l' adresse du contrat et l'enregistrer dans notre contrat, nous pouvons le ranger pour l'instant. Ouvrez donc la sauvegarde du dossier client. Et nous y allons, et nous allons y revenir. Ce que nous allons faire ensuite, c'est nous avons besoin d'un moyen de stocker l'état. Et je ne veux pas vraiment m'occuper redox car il s'agit d'un petit projet et Redux est un peu compliqué. Nous allons donc utiliser quelque chose de beaucoup plus facile appelé l'API Context. Et cela fait partie de Reactant livré avec React et cela nous permet de gérer l'état. Donc, si vous avez déjà travaillé avec React, vous savez que nous transmettons des accessoires aux enfants et que parfois cela peut devenir incontrôlable et que nous transmettons des événements sauvegardés aux parents et cela C'est juste fou. Donc, ce que fait cette API contextuelle est comme Redux en ce sens qu'elle gère l'état. Mais ce que cela fait, ce qui nous profite c'est que nous pouvons envelopper l'intégralité de notre projet dans ce fournisseur et que n' importe quel composant de ce fournisseur peut accéder à l'état. L'État va donc être mondial et vous pourrez y accéder n'importe où. Vous n'avez qu'à intégrer ce contexte, en y accédant. Nous allons donc configurer cela et cela va réellement contrôler comme toutes nos fonctions avec lesquelles nous avons parlé de ce contrat intelligent. Donc, si vous accédez à la source et que vous cliquez avec le bouton droit créez un nouveau dossier, et créez un nouveau dossier, nous appellerons cela contextuel. Whoops, créez un. Nous allons cliquer avec le bouton droit de la souris sur le dossier source, créer un nouveau dossier appelé contexte. Pour une raison quelconque, ce n'est tout simplement pas le cas. Laissez-moi le faire. Le voici, le contexte. Cliquez avec le bouton droit de la souris sur le dossier source et créons un nouveau dossier appelé contextes. Et dans ce dossier va créer un fichier appelé blockchain context dot js X. Et à partir de là, nous allons importer quelques choses. Donc, importez, réagissez et utilisez l'état parce que nous allons l'utiliser à partir de React. Ensuite, nous allons importer cela. Configurez JSON. Nous allons donc importer cet ABI et l'adresse du contrat, et nous allons la structurer afin que nous puissions accéder à ces deux éléments individuellement. Importez donc ABI, adresse de contrat à partir de. Et puis je pense que c'est JSON config dot, dot slash config. Bien. Ensuite, nous allons le faire, puis ensuite nous allons utiliser un paquet appelé ethers js. Maintenant, beaucoup de gens utilisent Web trois js. Ce paquet nous permet de parler à la blockchain, mais je vais ensuite utiliser un paquet appelé ethers JS. Maintenant, beaucoup de gens que je connais utilisent Web three JS. J'aime les éthers, JS est de plus en plus familiarisé avec lui. Je vais donc utiliser cela dans ce paquet qui nous permet de parler à notre contrat intelligent dans la blockchain. Il est donc très facile à installer. Venez ici. Permettez-moi de revenir dans mon dossier client. Dans Run Yarn, ajoutez des éthers, ETA GRS. Et pendant l'installation, je vais importer des ethers. Ethers. C'est assez facile. Super. Ensuite, nous allons créer un contexte et exporter sous forme de contextes blockchain. Nous allons donc mettre Export. Prochaine. Nous allons réellement créer ce contexte. Nous parlons de l'API contextuelle. Nous allons créer cela maintenant et nous allons définir comme variable et l'exporter. Nous pouvons donc mettre le contexte export, const, blockchain égal au contexte de création de points React. Et c'est tout. Nous allons ensuite créer notre composant. Exporter. Nous allons ensuite créer notre composant fournisseur. Et si vous ne savez pas comment l'utiliser, il suffit de le Google. Et c'est assez facile. Vous pouvez lire là-dessus et être pris en quelques minutes. Et rappelez-vous qu' il allait y avoir la variation des crochets, ce qui est beaucoup plus facile à mon avis. Exportons, le fournisseur de blockchain const est égal. Et nous allons détruire nos enfants au lieu d'accessoires. Et ça a l'air bien. Donc, ce que nous allons revenir ici, la clé de tout cela est de renvoyer ce fournisseur de points contextuels blockchain. Faisons donc un point de contextes blockchain et vous verrez qu'ils ont un fournisseur de consommateurs. Nous n'avons pas besoin de consommateurs. Nous utilisons des crochets, mais il y a beaucoup de choses que vous pourriez utiliser ici. Nous allons utiliser le fournisseur. Et il est obligatoire que vous y mettiez une valeur, ce que nous n'avons pas pour le moment. Je vais donc laisser ça vide. En fait, laissez-moi mettre ça sur la ligne suivante. Nous allons retourner ici le composant clé de ce fournisseur. Nous allons donc faire un retour, point de contexte blockchain, et vous voyez qu'il y a un consommateur et un fournisseur. Si vous lisez sur l'API contextuelle, vous apprendrez que les deux utilisaient des hooks. Nous allons donc utiliser le fournisseur. Et nous allons fournir, en fait, laissez-moi fermer tout ça. Nous allons fournir ici une valeur que nous devons fournir. Mais nous n'avons encore rien . Je vais laisser ça vide. Et puis, entre les deux, ils mettront les enfants parce que c'est ce que nous passons . Alors, sauvegardez ça. Et puis nous avons ce fournisseur ici. Mais nous devons aller sur notre JSX principal et envelopper toute l'application dans ce fournisseur. Je vais donc d'abord l'importer. Importez un fournisseur de blockchain à partir de contextes obliques de points contextuels de blockchain oblique. Et ensuite, nous allons envelopper tout ça. Donc ici, je peux dire fournisseur de blockchain et simplement le mettre en dehors du chakra ou fournisseur d' interface utilisateur et de l'application entière. Et sauvegardez ça. Maintenant, ces valeurs que nous transmettons, toutes les valeurs que nous transmettons ici seront disponibles pour tous les composants qui entrent dans ce contexte. J'espère que c'est logique. Très bien, alors passons ensuite à la documentation Ethers, JS. Ethers. Saisissons simplement ethers JS dans la recherche Google, puis cliquez simplement sur Démarrer. Nous allons suivre ces instructions. Alors, comment l'installer ? C'est déjà ce que nous avons fait. Nous l'avons déjà importé. Nous n'utilisons pas de balises de script, alors continuez. Voici donc la clé de tout ce paquet. À mon avis, c'est trois choses. Vous devez fournir un signataire et un contrat. Donc le fournisseur merci, en lecture seule. Un fournisseur est donc une classe que je fournit en ethers. confondons pas cela avec leur fournisseur Blockchain ou son API Context. C'est distinct. Un fournisseur dans ethers est une classe qui fournit une abstraction pour une connexion au réseau Ethereum. Il offre un accès en lecture seule à la blockchain et à son statut. N'oubliez pas que lorsque vous pensez fournisseur pense un accès en lecture seule à la blockchain. Désormais, un signataire est une classe qui, d'une manière ou d'une autre, a accès directement ou indirectement à une clé privée. N'oubliez pas que nous avons mis sa clé privée une clé privée qui peut signer des messages et des transactions pour autoriser le réseau à facturer votre compte ou à effectuer des opérations. Ainsi, lorsque vous pensez fournisseur, vous pensez en lecture seule, lorsque vous pensez que le signataire pense clé privée et signe des messages, crée des transactions, apporte des modifications directement sur la blockchain. Vous aurez donc besoin du signataire pour cela. Le signataire en lecture seule du fournisseur peut agir et faire des choses. Vous avez donc le fournisseur lecture seule et le signataire capable d'effectuer des transactions et d'effectuer des transactions. Et ensuite, vous avez ce contrat. Et nous en parlerons ensuite. Contrats et abstraction, qui représentent une connexion à un contrat spécifique sur le réseau Ethereum. Contrat intelligent que nous avons déployé pour que les applications puissent l'utiliser comme un objet JavaScript normal. Nous allons donc créer cet objet contractuel et nous allons en appeler toutes nos fonctions. La première tâche ici consiste donc à connecter notre portefeuille à notre application et nous le faisons via MetaMask. Assurez-vous donc de télécharger MetaMask si vous ne l'avez pas, allez simplement dans MetaMask. Je ne sais pas pourquoi c'est Zendesk. Si vous ne l'avez pas téléchargé et que vous ne l'avez pas configuré, il y a un million d'articles sur la façon de le faire. Mais je suppose que puisque vous suivez ce cours que vous avez déjà MetaMask, mais juste Google MetaMask et allez à Télécharger et c'est un navigateur. Assurez-vous donc d'avoir téléchargé et configuré MetaMask. Voici un exemple d'éthers sur la façon de parler. Voici donc les éthers qui interagissent avec MetaMask. N'oubliez pas qu'il y a un fournisseur, qu'il y a un signataire. Le fournisseur est la connexion au réseau Ethereum. Le fournisseur va donc être MetaMask. Ensuite, le signataire tient votre clé privée et envoie des objets. N'oubliez pas que nous avons saisi notre clé privée lorsque nous l'avons déployée. Et rappelez-vous que notre clé privée se trouve dans ce fichier ENV. Et nous l'utilisons lorsque nous déployons le contrat et que le contrat et nos portefeuilles correspondent à cette clé privée. Vous allez utiliser le même compte que celui que vous utilisez pour votre contrat. Très bien, alors regardons ça. Allez-y et copiez-le parce que nous allons l'utiliser. C'est vrai ? Donc, en regardant ici, les commentaires sont vraiment utiles. Cette documentation est vraiment bonne, à mon avis. Mais d'abord, vous avez ce fournisseur et ils sont passés par fournir un wraps, un fournisseur web trois standard, qui est ce que MetaMask injecte En tant que fenêtre point un théorème dans chaque page. Ainsi, sur cette page de navigateur, MetaMask injecte un théorème appelé «  point de fenêtre » dans chaque page. Ainsi, lorsque nous configurons ce fournisseur, nous utilisons, nous instancions un nouveau fournisseur Web trois, fourni par ethers. Nous faisons donc un nouveau fournisseur d'ethers adoptent des fournisseurs de largeur de point trois et nous transmettons essentiellement le théorème de données de la fenêtre MetaMask est l'objet MetaMask. Ce sera donc un fournisseur. Nous le disons sous la variable fournisseur. Ensuite, nous pouvons utiliser le fournisseur pour envoyer cela. Ensuite, nous pouvons utiliser la méthode d'envoi pour demander l'autorisation de connecter des comptes d'utilisateurs. Enfin, nous pouvons prendre ce fournisseur et appeler, obtenir le signataire et l' enregistrer en tant que signataire. En fait, nous allons le copier et le coller dans nos applications. Donc, copiez ça. Et en haut, en haut, il suffit de le coller. Et je vais supprimer tous ces commentaires. Une chose que je vais faire est de retirer ce qui attend les fournisseurs. Et nous allons ajouter cela dans une fonction réelle, car nous voulons que cela se produise uniquement lorsque nous cliquons sur les boutons Connect Wallet. Alors, sortez ça. Nous avons un fournisseur, nous avons notre signataire. Maintenant, nous avons besoin du contrat. C'est là que ça va avoir tout le sens pour vous. Donc, si vous continuez à passer aux contrats, cela indique que l'objet contrat facilite l'utilisation d' un contrat onchange en tant qu' objet JavaScript normal avec le tapis, les méthodes étant mappées sur encoder et décoder des données pour vous. C'est génial. Cet objet de contrat le rend juste, cet objet de contrat permet de traiter toutes ces fonctions de contrat intelligentes ne sont que ces fonctions de contrat intelligentes des objets JavaScript. Donc, si vous continuez à faire défiler, ils vous donnent le meilleur exemple ici. Copiez donc tout cela et collez-le dans votre application. Je vais donc venir ici, copier ça, et nous allons travailler un par un et ça vous paraîtra logique. Donc, au lieu d'une adresse de jour, nous ne traitons pas seulement de B&B alors changez cela par adresse et nous mettons simplement en place, qu'en pensez-vous ? Eh bien, si vous montez, rappelez-vous que nous importons l'ABI et l'adresse du contrat. Donc, notre adresse peut être en fait sous contrat vestimentaire. Maintenant, mourrez ABI, où encore une fois nous n'utilisons pas die, changez simplement cela en ABI. Et que pensez-vous que cela pourrait être ? Eh bien, ABI. Mais le problème, c'est que nous avons un peu confondu JavaScript. Abi est grisé, ce qui signifie qu'il ne fonctionnera pas. Changeons donc cela pour contracter ABI. Contrat ABI. On va donc mettre ici le contrat ABI. Nous avons donc défini notre adresse. Nous avons l'ABI. Encore une fois, c'est un bon commentaire. Le contrat ERC-20 ABI, qui est une interface contractuelle commune pour ne pas le dire. Débarrassons-nous donc de ce commentaire. Et enfin, nous avons l'objet réel. Encore une fois, changez cela par contrat. Il instancie ensuite un nouveau contrat. Donc, au lieu de l'adresse de jour, placera l'adresse, au lieu de jour ABI, mettra un contrat ABI. Ensuite, nous passons à notre fournisseur. Mais je vais en fait passer mon Signer parce que je vais faire beaucoup de transactions. Génial. Alors, sauvegardez ça. Nous avons toutes nos informations ici pour lui parler . Contrat intelligent. Maintenant, lançons une application aérienne. Alors, lancez Dev. Et faisons 3 000 localhost. Et voici notre application. Faisons donc tourner le dev pour exécuter notre serveur et ouvrir localhost 3 mille. Et nous avons quelques erreurs, bien. Très bien, alors faisons-le, lançons dev au démarrage ou à un serveur. Ça va être sur l'hôte local, 3 000. Alors ouvrons ça. Oups, le rafraîchissement ouvert saoudien. Et nous avons une erreur ou le module demandé ne fournit pas d'exportation appelée contrat ABI. Donc, quelque chose ne va pas là-dedans. Vous l'appelez probablement comme ça, mais il importe ABI parce que dans notre configuration JSON, c'est sous la clé d'ABI, donc nous devons le garder. Alors, faisons-le. Modifions la TVA, la variable pour contracter ABI et laisser ce que nous importons en tant qu'ABI. Et puis on change ici. Maintenant, le problème est que nous importons le contrat ABI, ce qui est erroné parce que dans leur Config JSON, c'est une clé d'ABI. Nous devons donc importer ABI. Ensuite, nous appellerons ce contrat constant ABI, c'est ABI, ce que nous importons. Et puis, ici, nous avons bien compris, donc nous avons eu toutes sortes d' erreurs là-bas. Vous l'avez probablement attrapé. Mais assurez-vous d' apporter ces changements. Importez ABI, enregistrez-le en tant que variable appelée contrat ABI, puis transmettez-la dans votre contrat. Nous allons le sauvegarder et voir si cela le résout . Oui, on y va. Maintenant, ce que nous voulons faire, c'est lorsque nous cliquons sur ce portefeuille Connect, nous voulons qu'il ouvre MetaMask et demande leur autorisation de connecter le portefeuille à notre compte. Demande l'autorisation de se connecter à l'un des comptes. Créons donc une fonction pour cela, juste en dessous, je vais dire const, connect wallet égal va être asynchrone. Nous allons faire une déclaration d'essai. Essayez-attraper. Ici, nous allons dire si le théorème des données de fenêtre, donc si cet objet MetaMask n'existe pas, nous allons simplement renvoyer une alerte et une alerte. Veuillez installer MetaMask. Ensuite, nous allons faire des comptes const. Nous voulons obtenir les comptes de MetaMask, alors attendez l'envoi de points du fournisseur. Rappelez-vous dans Ethers JS, si je l'ai toujours. C'était notre exemple, un fournisseur de poids point péché. Et ce que nous voulons, c'est de demander des comptes. C'est comme ça que nous les appelons juste pour des coups de pied. Consolons les comptes de journaux de points. Et le premier, parce que ce sera celui que nous utilisons actuellement, le compte courant. Laissons-le là et voyons que nous consolons cela ou que nous l' enregistrons correctement. Et puis ici, dans la prise, nous ferons l'erreur console.log. Et je vais faire une nouvelle erreur ici. Et disons simplement non, un objet théorème. Et je ne peux pas épeler le mot lancer. On y va. Nous voulons donc appeler cela lorsque vous appuyez sur le bouton Connect Wallet. Donc, comment nous travaillons avec ce fournisseur c'est que nous prenons ce nom de fonction, nous venons ici et nous le transmettons en tant que valeur, connectez portefeuille. Et puis, où est le bouton ? Eh bien, le bouton si on y va et les composants, le bouton est une barre de navigation. En haut de la barre de navigation, nous allons donc importer le fournisseur. Importez donc des contextes blockchain à partir de contextes de blockchain oblique contextuelle . Assurez-vous donc de l'importer. Ensuite, parce que nous utilisons des crochets. Nous pouvons venir ici et taper Const. Et quelle est la fonction que nous fournissons et le fournisseur connectera portefeuille égal au contexte d'utilisation, au contexte de la blockchain. Vous pouvez désormais créer plusieurs contextes dans votre application. Vous pouvez avoir comme un contexte utilisateur dans un contexte de transaction et des choses similaires. Donc, tout ce que nous faisons ici pour ça. Le composant est que nous ne faisons que rendre disponible ce contexte blockchain. Et nous introduisons un portefeuille Connect. Et là où nous avons notre bouton qui indique le portefeuille Connect, nous allons ajouter un onclick. Onclick équivaut à connecter le portefeuille pour appeler cette fonction. Et c'est à quel point c'est facile. Nous allons donc le sauvegarder et vérifier et voir si cela fonctionne. Ouvrez l'application et une erreur s'est produite. L'erreur est donc utilisée, le contexte n'est pas défini. Il faut donc venir ici. Et là où nous ne sommes même pas. Et il suffit de faire une importation. Utilisez le contexte de React dans, rappelez-vous quand vous avez maintenant un fichier JSX dans React, rappelez-vous quand vous l'avez fait, alors assurez-vous de l'importer. Nous allons le sauvegarder et réessayer. Et donc, lorsque nous cliquons sur ce bouton Se connecter à Wallet, il devrait ouvrir MetaMask comme ça. Et je souhaite connecter mon compte de test BSC. Je vais donc cliquer sur Suivant. Maintenant, si j'en ai sélectionné plusieurs, ça va mettre les quatre là-dedans. C'est pourquoi nous choisissons le premier. Mais je vais juste cliquer sur l'un d'eux parce que c'est tout ce que je fais vraiment. Cliquez sur Suivant. Donc, si je clique sur Connect wallet, il va apparaître MetaMask comme il se doit. Et je vais sélectionner le compte que je veux connecter. Maintenant. Je pourrais collecter Connect. Maintenant, il peut se connecter plusieurs. Et c'est pourquoi nous avons les comptes 0, car il s'agit d'un tableau de comptes dans le premier qui va être votre compte courant. Mais je vais juste en sélectionner un et cliquer sur Suivant et me connecter. Et il va connecter mon portefeuille MetaMask à mon application. Super, donc nous sommes connectés. Si nous ouvrons MetaMask, nous voyons que ce petit voyant connecté est vert. Mais le problème, c'est que nous ne le savons pas dans notre application. Il est dit juste pendant qu'il est encore. Je vais donc me déconnecter et on va régler ça. Déconnectez donc ce compte, puis revenons en arrière et faisons quelque chose de mieux avec lui. Revenons donc au contexte de la blockchain. Nous allons créer un état dans lequel stocker ce compte courant. Je vais donc arriver au sommet et faire un compte courant const. Set. Le compte courant est égal à l'état d'utilisation. Et ce n'est que React Hooks. Ils utilisent le statut d'État. Et tout ce que ça dit, c'est que le compte courant va être la variable qui maintient mon état en jeu. Le compte courant est ce que j'utilise pour définir cet état ici où j'ai consolé le compte. Je vais également enregistrer cela dans l'état du compte courant. Et vous le faites en disant définir le compte courant, comptes 0. Donc ça va l'enregistrer à, donc ça va l' enregistrer là-dedans. Cela va donc l'enregistrer en tant que compte courant. Mais cela ne nous aide pas vraiment parce que nous devons passer ce compte courant par l'intermédiaire du fournisseur aérien. Alors venez ici et mettez une virgule et mettez un compte courant pour que nous puissions le transmettre à notre fournisseur , puis revenir à la barre de navigation. Et nous voulons également mettre cela dans le compte courant, mettre cela à la disposition de notre composant. Ensuite, ici, nous pouvons faire une certaine logique. Nous dirons donc s'il n' y a pas de compte courant, notez le point d'exclamation, alors nous dirons simplement connecter le portefeuille. Cela signifie que rien n'est connecté car aucun compte courant n'a encore été défini. Sinon, nous allons afficher l'adresse de notre portefeuille, mais nous allons la découper pour qu'elle soit comme les cinq premiers caractères, point, point, point, puis les quatre derniers caractères. La plupart des applications le font. Nous allons donc le faire aussi. Et nous pouvons dire que nous allons utiliser un littéral de gabarit. Il en va de même pour les deux backticks, des accolades bouclées. Et nous allons mettre la tranche de points du compte courant. Puis 0 à cinq, donc les cinq premiers caractères. Et puis on mettra le point, le point, le point. C'est pourquoi nous utilisons ces littéraux de gabarit car nous pouvons mélanger des variables avec des valeurs de chaîne telles que point, point, point. Et juste après, nous ferons le signe du dollar. Accolades en type compte courant, en type compte courant, tranche de points. Et cette fois, nous allons aller jusqu'au bout et compter tous les personnages et ensuite prendre les quatre derniers. Nous pouvons donc le faire en indiquant la longueur des points du compte courant. Cela obtiendra la longueur de ce temps à l'adresse moins quatre. Et c'est ce que nous allons trancher. Alors, gardons ça et essayons. Actualisez. Et maintenant, allons connecter le portefeuille. Assurez-vous de vous déconnecter pour pouvoir vous connecter à nouveau. Choisissez votre compte, cliquez sur Suivant. Et une fois que j'ai cliqué sur Connect, il faut le stocker dans l'état, puis mettre à jour mon composant pour afficher l'adresse de mon portefeuille. Alors, cliquez sur Connect. Regardez-moi déjà ça. Il y a mon adresse de portefeuille, 0 x six à 73 points, point B F6. Mais nous avons toujours un problème. Si je me rafraîchis, ça va disparaître. Maintenant, il est écrit le portefeuille Connect, même si je suis toujours connecté. Déconnectons et résolvons ça. Pour résoudre ce problème, nous aurons besoin d' une autre fonction dans le contexte de la blockchain pour vérifier si le réseau sans fil est connecté. Voici donc comment nous nous connectons. Mais lorsque l'application se charge pour la première fois, nous devons vérifier si elle est connectée ou non. Si c'est le cas, nous devons stocker l'état. Créons une autre fonction. Et en fait, je vais juste copier ça. Et nous allons appeler celui-ci. Vérifiez si le portefeuille est connecté. Et nous allons toujours le faire. Nous allons vérifier si l'objet MetaMask est présent. Nous allons faire des comptes. Mais dans ce temps, au lieu de comptes de demande de soulignement, nous allons simplement faire des comptes de soulignement. Cela va donc demander aux comptes, non pas à l'autorisation d'utiliser les comptes, mais uniquement aux comptes en général. Donc, s'il y a quelque chose de relié, ça va apparaître ici. Et ensuite, nous ferons quelque chose ici comme si longueur des points des comptes est vraie. Par conséquent, s'il y a un lien sur les comptes , nous définirons les comptes courants 0. Sinon console.log. Non, aucun compte n'a été trouvé. Et débarrassez-vous de ces deux-là. Cette fois je ne vais pas lancer d'erreur. Mais encore une fois, tout ce que nous faisons c'est d'obtenir les comptes connectés. Et puis s'il y en a, définira l'état. Si ce n'est pas le cas, nous allons simplement le consoler. Nous le saurons donc. Nous ne voulons donc pas transmettre celui-ci au fournisseur parce que nous n'en avons besoin nulle part ailleurs. Nous en avons réellement besoin lorsque la page se charge pour la première fois. Je vais donc venir ici et ajouter un effet utilisateur Hooke. Et utiliser des crochets d'effets vous permettent de courir. Et utiliser des crochets d'effets vous permet d' exécuter des fonctions une fois que quelque chose se charge ou une fois que quelque chose change. Donc, à la fin de cela, vous pouvez faire des virgules, peu importe. Comme si vous regardez une variable chaque fois que cette variable change, cette chose s'exécutera à nouveau. Mais nous allons mettre des crochets vides ici sont vides. Des supports vides ici, ce qui signifie qu'il sera exécuté lorsque le composant se charge pour la première fois, finira le chargement. Nous allons réellement faire ce bilan pendant qu'il y est connecté. Cela s'exécutera lorsque la page sera chargée pour la première fois. Encore une fois, lorsque la page se charge pour la première fois, elle vérifie si un portefeuille est connecté. Si c'est le cas, il va définir l'état. Alors, gardons ça et essayons à nouveau. Et d'ailleurs, chaque fois que vous chargez, d'ailleurs, chaque fois que vous économisez. Au fait, chaque fois que j'économise, ça ne fait que lancer ces erreurs folles. Je vais vous montrer comment résoudre ce problème dans une minute. Mais rafraîchissons et testons ça. Cliquez donc sur Connect Wallet. Je vais le connecter à nouveau, connecter et ça définit mon adresse. Et maintenant, si je me rafraîchis, ça reste. C'est bon d'y aller. Si je passe à la page suivante, elle est toujours là. Je vais à la première page est toujours là. Cela a donc pris soin de cela. Maintenant, comme je le disais, si je sauve encore ça, et revenez, ma page est complètement détruite. Et pour être honnête, je ne sais pas ce qui se passe. Pour une raison quelconque, vite JS effectue un chargement de page, effectue un rechargement de page au lieu du rechargement à chaud. Je ne sais pas si c'est un insecte ou peut-être quelque chose que j'ai négligé. Mais d'autres personnes se plaignent en ligne. Je pense que c'est une nouvelle chose. Et si je le savais, j' aurais utilisé l'application Create React, mais c'est en fait une solution assez facile. Ce type vient de l'énumérer ici. Et ce que nous devons faire, c'est d'aller notre configuration rapide et dans notre configuration rapide et d'ajouter simplement cette configuration de serveur. Donc, si vous partez, si le vôtre ne fait pas cela, ne vous inquiétez pas. Mais s'il est allé à vite, config js et ajoute simplement ceci, mettez une virgule après cela, et faites le serveur h EMR true, qui n'est pas le rechargement du module, ce qui est censé se produire de quelque façon que ce soit que je pensais. Et ensuite, regardez. Utilisez le sondage. C'est vrai ? Et c'est tout. Maintenant, sauvegardez-le. Et je veux probablement redémarrer mon serveur juste parce qu'il s'agit d'une configuration. plupart du temps, nous devons redémarrer et cela devrait régler le problème. Laissez-moi me rafraîchir maintenant, laissez-moi enregistrer et voir si cela génère cette erreur. Je vais venir ici et cliquer sur Enregistrer quelques fois. Et il y a toujours une erreur. Que se passe-t-il ? Serveur ASMR vrai, regarder, utiliser le sondage, vrai. Très bien, le serveur a redémarré. Laissez-moi le sauver. C'est très bien. Sauvegardez-le encore une fois. Gardez-le ici. Sauvegardez-le encore ici. En fait, il semble que ça se passe juste dans mon fichier de fournisseur. Donc, si je viens ici à JSX principal et que je clique sur Enregistrer , tout va bien. Mais si je vais chez mon fournisseur et que je le fais, sauvegardez-le, ça gâche. Je vais essayer de trouver la réponse à cette question à l'avenir. Moi. Nous reviendrons vous dire comment y remédier. Mais ça n'a vraiment pas d'importance. Ce n'est qu'en développement, comme si vous venez ici et que vous cliquez autour, cela n'arrive jamais. Cela n'arrive qu'avec ce rechargement de module chaud blanc. Donc je vais comprendre ça et je vais poster ici dans un petit moment. Très bien, la dernière chose que nous voulons faire dans cette vidéo, c'est que nous voulons essayer de parler à notre contrat pour nous assurer que nous l'avons établi. Et une fois que nous aurons dans la vidéo suivante, nous allons aller à pleine vitesse et tout mettre en place. Revenons donc à nos contextes blockchain. Et créons une fonction qui obtient l'équilibre de leur contrat intelligent. Donc, si vous vous souvenez, nous avons dans notre dossier de contrat et dans notre contrat, rappelez-vous que nous avons une fonction appelée balance de qui renvoie le solde des contrats. Essayons d'appeler cela et de voir si cela fonctionne. Je vais donc aller dans mon contexte blockchain et faire const, obtenir l'équilibre égal, équivaut à un puits. Et on va faire un essai. Erreur de journal de points de la console. Ici, sous l'essai, nous allons dire équilibre const. Et n'oubliez pas que nous avons cet objet contractuel qui nous permet de parler à notre contrat intelligent. Nous allons dire « contrat ». Nous allons attendre parce que nous avons une fonction asynchrone. Et puis la balance des points de contrat points balance parce que c'est leur nom de fonction de contrat intelligent. Juste après cela, nous allons sauver cela dans notre état. Donc. En fait, consolons-le à Ashley. Il suffit de se connecter à la console. Donc console.log équilibre et voyez simplement si cela apparaît. Revenez au projet et rechargez la page, et elle devrait apparaître dans notre console. Il faut une minute pour appeler ça un non, ça ne va pas marcher. Ensuite, juste après, nous allons fixer l'état, nous allons le mettre dans l'état. Ensuite, nous pouvons le mettre dans la console pour voir si cela fonctionne. Montons ici et créons une nouvelle variable d'état, constante, balance, solde SET. Et vous voyez le schéma ici. Il y a le mot, puis définir le mot est égal à l'état d'utilisation. Et donc, ici, nous allons équilibrer l'équilibre. Ensuite, je vais équilibrer console.log. Et cela n'est utilisé nulle part, donc il ne sera pas appelé. Rien de tout cela ne va marcher. Mais juste pour le tester, venons ici et appeler à équilibrer. Lorsque la page est chargée. Nous allons le sauvegarder et actualiser notre page. Et regardez ça. On nous revient ce qu' on appelle un grand nombre. Un grand nombre est montant d'erreur ou la quantité d'air avec 18 zéros. C'est pourquoi on appelle ça un grand nombre. C ici à 0 x 00 est un grand nombre vrai. Le grand nombre est donc génial. C'est génial de faire le travail sur le contrat, mais il n'est pas lisible. Comme si nous ne voulions pas regarder et être comme si j'ai eu 1 000 milliards d'éther. Nous voulons dire que j'ai 0,001 ou 0,01, B&B ou autre. Il y a donc une fonction d'aide. Si vous allez dans ethers, JS, saisissez utils et tapez utils. Et cela n'a pas été utile. Tapez ethers, dot js utils et cliquez sur utilitaires. Ensuite, vous devriez voir, puis taper un grand nombre. C'est là. Et vous devriez voir ici, je pense que ça s'appelle l'éther d'analyse. Oui, on y va. Il y en a donc, il y a ces conversions. Ether dot utils, unités de format de point, éthers utils formatent les unités d'analyse d' éther. Et tout ce qui fait, c'est qu'il convertit cette valeur pour nous, comme celui que nous allons utiliser est le format Ether. Et ce n'est tout simplement pas une bonne page. Laissez-moi copier et coller ça. Les éthers nous pointent. On y va. Cordes d'éther et pesent. Celui que nous allons utiliser s' appelle format éther. Et c'est à ce moment que vous avez du chemin et que vous voulez le montrer comme éther ordinaire ou un B&B régulier ou tout ce que vous avez l'habitude de voir comme la quantité lisible par l'homme. Ainsi, la quantité de chemin formatée dans une chaîne décimale représentant la quantité d'éther. C'est ce que nous allons utiliser. Pour ce faire, nous allons taper. Pour ce faire, nous devons donc établir un équilibre. Donc, pour ce faire, nous devons mettre au lieu de l'équilibre, nous devons mettre des ethers, dot util, utils dot format ether. Et puis nous passons dans la balance. Et cela va le régler sur ce format joliment lisible dans l'éther ou le B&B, pas la façon de formater 180. Donc, sauvegardons cela et maintenant il devrait afficher 0. Rafraîchissons la page. Il y a toujours un grand nombre. Nous allons le sauvegarder encore une fois. Je ne sais pas, peut-être que mon état est toujours très important et c'est probablement parce que j'appelle balance, c'est ça. Oh, oui, c'est qu'il y a toujours un grand nombre. Je pense que mon problème est que j'ai nommé cet équilibre et ensuite j'ai également défini, mon état est équilibré, que j'utilise ici. Il utilise donc probablement ce numéro d'origine. Changeons cela par un équilibre de juste mettre l'équilibre de. Et maintenant, nous sommes sûrs que c'est notre variable d'état ici et non pas cela. C'est donc ma mauvaise chose. Appelons donc la balance des variables de format, puis saisissons les variables d'état. Alors sauvegardez-le et maintenant ça devrait être bon. Rafraîchissez donc la page. Dans la partie d'essai, on va dire const, balance des égaux. Et nous allons utiliser notre objet contractuel. N'oubliez pas que c'est comme ça que nous allons appeler toutes ces fonctions de contrat intelligentes feront l'équilibre des points contractuels, car vous vous souvenez que si vous revenez à notre contrat, nous avons une fonction appelée balance of Nous pourrions appeler obtenir la durée totale ou définir le faire et nous allons faire tout ça. Mais pour l'instant, nous allons juste tester celui-ci. Nous allons donc l'appeler. Nous dirons donc l'équilibre des points contractuels de. Ensuite, juste en dessous, nous allons définir une autre variable d'état pour conserver cette valeur. Revenons ici et saisissons, juste en dessous de ce put const, balance, SET balance égal à l'état d'utilisation. Maintenant, vous voyez le schéma ici. première est la variable et la seconde commence par set, car c'est la variable que vous utilisez. C'est ce que v 7. Créer le formulaire Ajouter le formulaire de location: Nous allons maintenant commencer sur notre tableau de bord ici, où nous pourrons commencer à les remplir dynamiquement. Actuellement, nous n' avons que des valeurs statiques, mais nous devons pouvoir les remplir. Nous devons pouvoir effectuer un paiement et créditer notre compte. Et au fait, ici, nous avons du crédit puis le paiement ici, c'est à l'envers. Nous allons les échanger très rapidement. Si nous passons aux totaux actuels en bas, il suffit d'échanger ces deux composants, ajouter le formulaire équilibré avant de les payer. Ça va arranger ça. Mais avant de faire tout cela, nous devons créer un formulaire comme celui-ci, comme ce bord est actuellement, il suppose que le locataire s'est déjà ajouté en tant que locataire, mais nous ne l'avons pas encore fait . Là encore, ce n'est que du texte statique. Nous devons donc mettre un formulaire ici pour afficher si le loyer ou s' est pas ajouté en tant que locataire. Et s'ils l'ont déjà fait, nous afficherons le tableau de bord et leurs valeurs actuelles. Si nous essayons de créditer le locataire et de vérifier ses minutes de trajet et tout cela, cela ne fonctionnera pas car rappelez-vous que nous avons cette fonction dans notre contrat ici qui dit Ajouter un locataire. Nous devons ajouter le locataire à notre cartographie des locataires ici. C'est donc ce qu'ils doivent faire. Essentiellement, ils doivent remplir le formulaire pour s'ajouter en tant que locataire, ce qui leur permet ensuite de vérifier un vélo. Juste avant de faire cela, nous avons une chose à aborder. Donc dans la vidéo précédente, vous, une chose que vous auriez pu remarquer est chaque fois que je travaillais dans son fichier contextuel de blockchain et que j'ai fait un changement ou quoi que ce soit que je faisais. Et je suis allé sur Command S pour l'enregistrer, ça a effectivement écrasé ma page. Laissez-moi toucher Command S, revenez en arrière et vous verrez mes pages s'écraser. Si j'ouvre la console, vous verrez tout un tas d'erreurs liées au crochet des contextes utilisés. La raison en est que dans le contexte de la blockchain air en contexte de la blockchain air haut où nous créons les contextes, nous avons laissé l'argument nul ou paramètre. Non, nous devrions mettre quelque chose ici et nous allons juste mettre une chaîne vide. Et je vais sauver ça. Et maintenant, essayons encore une fois. Laissez-moi rafraîchir ça. Et je vais venir ici et le sauver quelques fois. Et vous devriez voir que ma page va bien. C'est donc une erreur de ma part. Accédez au contexte de création de points React et assurez-vous d'entrer une valeur, auquel cas nous allons mettre une chaîne vide. Très bien ? Nous allons donc créer un nouveau formulaire. On va appeler ça un loyer ou un point JSX. Et encore une fois, nous allons simplement prendre l'une de ces autres formes. Essayons l'annonce à une forme équilibrée. Et nous allons simplement copier et coller ça dans. Ensuite, nous allons voir le nom de la fonction et l' appeler loyer ou formulaire. Très bien, puis nous faisons défiler vers le bas, vous voyez ce crédit sur votre compte. Nous voulons changer cela par quelque chose différent et je vais en fait venir ici au-dessus du flex. Et je vais juste mettre un champ de texte. Et dans le champ TextField, je vais mettre comme attributs, la famille de polices est égale à titre. La taille de police est égale à 600, ou en fait x grande. Et ensuite, le poids de la police est égal à 600. Très bien, et assurez-vous de mettre la balise de fermeture. Et puis, à l'intérieur de cela, nous allons mettre des textes. Nous allons dire bienvenue. Et puis je vais mettre un saut de ligne. Et veuillez entrer votre prénom et votre nom de famille pour vous inscrire. Vous pourriez être comme, n' est-ce pas une application décentralisée ? Pourquoi voulons-nous le nom de famille ou même le prénom de quelqu'un ? Mais c'est juste un concept que j'ai trouvé lorsque j'ai créé l'application. Si vous souhaitez le modifier, n' hésitez pas à le modifier. Et vous verrez que nous avons cette erreur car nous, parce que nous ne pouvons pas avoir plusieurs balises et un retour, nous résolvons ce problème en ouvrant et fermant des balises vides. Alors mettez-le en haut et un de fermeture en bas aussi. Nous avons donc nos textes ici. Nous avons un flex , puis nous avons notre forme. Dans le formulaire, nous voulons simplement le FirstName et LastName car peut louer se souvenir sera défini vrai parce qu'ils ne font que créer leur compte. Bien sûr, ils peuvent louer. Active sera défini sur faux car ils n' ont pas encore de vélo. L'heure de début, heure de fin, le solde et le montant dû seront tous 0. Cela va donc être défini sur le backend, en dehors du forum ou en dehors de la capacité des utilisateurs à modifier cela. Nous avons donc juste besoin d'un prénom et d'un nom de famille. Nous avons donc déjà une contribution. J'ai donc pris le contrôle. Allons-y. Faisons une étiquette ici. Par conséquent, l'étiquette de formulaire en HTML quatre est égale à FirstName. Et on va mettre FirstName ici. Ce n'est qu'une étiquette. Ensuite, nous avons notre contribution, notre message d'erreur. Ensuite, nous allons copier et coller un autre d'entre eux. Donc, une autre entrée d'étiquette de formulaire et un message d'erreur. Alors, juste sous le message d'erreur, collez un autre. Et nous allons mettre en place ces deux-là. Donc HTML pour FirstName. Nous allons donc à nouveau mettre FirstName, retirer ce numéro de type à l'étape n'importe laquelle parce que nous voulons des caractères. Espace réservé, prénom. Et puis partout où il y a un solde de crédit, suffit de faire FirstName. Et puis dans le second, nous voulons que le nom de famille soit ici, remplacez-le par LastName, LastName, sortez le numéro par étape. espace réservé va être LastName. S'inscrire est LastName. Et rappelez-vous que je vous ai dit ce registre, et je vais faire en sorte que ce n'est pas cette affaire de chameau. Je veux que tout soit en minuscules pour qu'il corresponde aux autres. Mais rappelez-vous que je vous ai parlé de ce registre. Il enregistre en fait l'entrée que vous placez dans les champs et la place dans cet objet qui est ensuite envoyé à l'endroit où vous envoyez le formulaire, c'est plutôt cool. C'est tout ce que j'ai à faire. Donc LastName, remplacez ces deux-là par LastName. Et là où il est dit contrôle de formulaire, il y a une vérification pour n'est pas valide. Je veux vérifier s' il y a des erreurs. Prénom et whoops, et erreurs de nom de famille. Donc, ici, nous avons un message d'erreur. Donc, s'il y a une erreur dans celle-ci ou celle-ci, et qu'en fait, nous l'avons définie, et donc ces deux éléments doivent être exempts d' erreur pour passer. Vous ne pouvez donc pas mettre de champ. Vous ne pouvez donc pas mettre de valeurs dans l'une et non dans l'autre. Et pour celle-ci, nous voulons une longueur minimale. Faisons donc quatre hommes longueur. Et le message sera d'une longueur minimale devrait être de quatre. Nous allons mettre ça dans le prochain. Nous allons le sauver. Et là où il est dit créditer votre compte, retirez tout ce texte parce que leurs textes vont être au-dessus. Dans ce cas, en l'air sur soumission. Nous allons consigner les valeurs de la console. Donc, je pense que nous sommes bons. En fait, voyons à quoi ça ressemble. Nous n'avons donc pas mis de conditions ici si je me rafraîchis et, en fait, nous ne l'avons même pas ajouté à la page. Donc, ça va aller dans les totaux actuels, je pense. Non, ça va aller dans le tableau de bord. Donc, là où il est indiqué les totaux actuels. Nous allons simplement commenter cela pour l'instant. Juste pour voir à quoi ça ressemble. Nous allons extraire un formulaire de locataire et nous assurer que vous l'importez, enregistrez-le et jetons un coup d' œil à quoi cela ressemble. Oui, donc voici Prénom, LastName. Je vais donc ajouter un peu d'espace en dessous du premier pour le rendre un peu plus beau. Donc, si je vais au tableau de bord, il s'agira de loyer ou de formulaire. Donc, cette deuxième étiquette de formulaire, je vais juste faire une marge supérieure à quatre. Allons en faire trois. Voyez à quoi cela ressemble. Trois ne suffisent pas tout à fait. Essayons cinq. Très bien, alors bienvenue, mangez de l'éther. J'ai mis de l'éther. Veuillez entrer votre prénom et votre nom de famille pour vous inscrire. Essayons Travis et essayons ensuite. Et si je clique sur Soumettre, il devrait se connecter à la console. Le voilà, prénom Travis, nom de famille, test. C'est aussi facile avec la forme de crochet React. Génial. Nous avons donc maintenant besoin d'un moyen de savoir si un locataire existe ou non. Et si vous vous souvenez, dans notre contrat, si nous allons à la chaîne de vélos dot soul, nous avons créé ce locataire existe dans tout ce qu'il fait est retourné vrai s'il y a une adresse portefeuille pour ce locataire et faux si non, nous allons utiliser cela pour déterminer et cela nous aidera à basculer entre les formes aériennes dans notre tableau de bord. Si bon contextes de blockchain. Et là où nous nous sommes arrêtés à ce moment, soyez équilibré. Et en fait, vous n'avez pas besoin d' appeler l'équilibre parce que personne n'a vraiment besoin d' obtenir le solde du contrat, sauf le propriétaire. Nous ne voulons donc pas cette couleur, mais vous pouvez la laisser ici sous Get équilibrée, nous allons créer une nouvelle fonction appelée get renter existe. Nous allons donc vérifier si le locataire existe. Un évier. Et on va essayer de rattraper. Et le problème, on va juste le consoler. Ensuite, ici, nous allons faire deux choses. Nous allons vérifier s'ils existent. Et s'ils existent, nous obtiendrons leurs informations. N'oubliez pas que dans notre contrat ici, nous avons une fonction appelée locataire. Et ce que cela fait, c' est que cela retourne vrai s'ils ont une adresse de portefeuille et notre cartographie. Il retourne donc vrai s'ils existent en faux, s'ils ne le font pas. Si cela retourne vrai, alors nous allons appeler cette fonction obtenir le locataire afin que nous puissions obtenir les informations des locataires stockées dans notre état et faire tout ce dont nous avons besoin avec elles. Nous allons donc avoir deux fonctions ici. Nous commencerons par faire en sorte que le locataire existe. Et en fait, je ne sais pas pourquoi je l'ai nommé que le locataire de chèque existe est plus logique. Nous allons donc dire ici que const renter est égal à attendre le point de contrat, et nous appelons que la fonction renter existe. Voyez ici le contrat intelligent. locataire de points de contrat existe. Et nous devons transmettre l'adresse du portefeuille aérien. Et si vous vous en souvenez ici, nous sauvegardons cela en état sous une variable appelée compte courant. Alors copiez ça, venez ici et transmettez-le. Ensuite, nous voulons définir cet état. Nous voulons donc définir l'état de leur existence ou non. J'aime garder les choses dans l' état au cas où j'en ai besoin. Je pense que dans d'autres pages, nous allons devoir savoir si c'est vrai ou faux. Créons donc une variable d'état. Ainsi, le locataire peut exister, le locataire existant est égal à l'état américain. Et mettons ici l' ensemble du locataire existe. Le locataire va le transmettre. Génial. Et comme je l'ai dit, s'ils existent, nous voulons aller de l'avant et obtenir leurs informations. Donc, juste en dessous de ça, je vais dire si le locataire existe, si c'est vrai, alors nous allons appeler une fonction appelée get renter. Et mettons un poids là-dessus. Donc juste en dessous, je vais mettre Const, trouver un locataire. Créons cette fonction égale à un lavabo, qui est égal à une flèche d'évier. Ensuite, nous ferons cet essai, mais je vais juste le copier pour gagner du temps. Et le point contracté. Maintenant, quelle est leur fonction pour cela ? C'est ce qu'on appelle obtenir un locataire et nous transmettons une adresse de portefeuille. Alors, allez chercher un locataire, nous transmettons une adresse de portefeuille et ensuite nous allons définir l'état. Nous allons sauvegarder les valeurs de ces locataires dans leur état. Alors venons ici et créons un nouveau. Const, loueur, set renter est égal à l'état U. Et ici, nous allons juste mettre un locataire, un locataire pour le sauvegarder dans notre état. Ensuite, nous pourrons supprimer cela. Donc maintenant, lorsque ce composant se charge, ce contexte se charge, nous voulions appeler le locataire de vérification existant parce que nous voulons le savoir à l'avance. Nous devons donc prendre cela et inclure dans notre effet utilisateur. Pour qu'on l'appelle quand ça se charge. Et puis ce rendu de vérification existe, enregistre, enregistre cette variable d'état true ou false dans la variable d' état existante du locataire. Pour que nous puissions venir ici et passer à notre fournisseur, le locataire existe. Donc, cela nous dira vrai ou faux. Et puis gardons cela et nous reviendrons pour obtenir les informations du locataire. Mais nous voulons simplement savoir maintenant vrai ou faux s'ils existent. Nous allons envoyer cela à notre fournisseur. Et ensuite, dans notre tableau de bord, nous pourrons vérifier si nous devrions afficher le formulaire ou le tableau de bord. Donc, ici, nous allons dire const, renter existe est égal à utiliser les contextes, le contexte blockchain, et assurez-vous que vous apportez cela. Vous importez des contextes d'utilisation à partir de React et importez également les contextes blockchain. Maintenant, nous pouvons venir ici et dire, donc nous devons vérifier quelques choses ici. Nous voulons vérifier si le locataire existe. Nous voulons afficher un spinner. Sinon, si le locataire existe, c'est vrai. Nous voulons afficher le tableau de bord. Sinon, affichez leur formulaire. Donc, si nous définissons la valeur par défaut du locataire si nous définissons cette valeur sur false ou quelque chose comme ça, cela ne serait pas bon, car cela nous dirait toujours d'afficher le formulaire parce que leur loyer ou non exister. Alors montrez le formulaire. Mais nous voulons qu'il tourne avant qu'il ne fixe quoi que ce soit. Nous voulons donc filer avant que ça ne détermine, Hé, c'est faux ou hé, c'est vrai. Nous pouvons donc réellement le faire avec l'opérateur ternaire. Et beaucoup de gens n'aiment pas ça. Cela ne me dérange pas parce que je le vois beaucoup et j'y suis habitué. Mais nous pouvons faire comme un si autre, sinon avec ternaire ou si autrement. Et nous pouvons le faire comme ça. Par conséquent, un locataire existe est égal à null. Puis montre Spinner. Je vais juste mettre ça entre guillemets pour l'instant. Sinon, si le locataire existe est vrai , affichez les totaux actuels. Sinon, montrez le loyer ou le formulaire. Je sais que ça peut paraître bizarre pour toi. Si le locataire existe est égal à null, affichez le spinner. Et c'est généralement comme quelque chose d'autre. Mais vous pouvez dire que si le locataire existe est vrai, alors lorsque vous placez ce point d' interrogation ici, affichez les totaux actuels, sinon affichez le loyer ou le formulaire. Cela vérifie donc trois conditions, null, false et true. Donc, au lieu du ShowSpinner, ça ne fera rien. Installons une sorte de paquet de spinner. Je vais aller ici et réagir à Spinner. Spinners. Allons-y avec ça. Donc le fil ajoute, réagissez aux fileuses. Démarrez mon serveur. Installez cela. Génial. Donc, ici, nous allons afficher un spinner. Et comment pouvons-nous faire cela ? Nous allons donc simplement utiliser ce chargeur de clips. Alors copiez ça. Il s'agit d'un clip court Loder de ces fileuses React. Je vais le coller en haut. Quoi d'autre ? On dirait que c'est. Nous devons définir un chargement variable d'état et définir le chargement. Et par défaut, cela va être vrai. Ce sera donc en cours de chargement lorsque nous commencerons la page. Ensuite, cela va probablement être en corrélation avec notre fileur d'une manière ou d'une autre. Voici donc notre chargeur de clips. Il y a une propriété de couleur que nous ne voulons pas gâcher, ou CSS ou taille, peut-être voulons-nous gâcher avec la taille, mais voici le chargement équivaut au chargement. Nous allons donc copier cela et le mettre dans un clip spinner d'erreur. Et en fait, je vais juste copier tout ça. Et nous allons simplement retirer ce dont nous n'avons pas besoin pour le copier et le coller ici. Et sortons de la couleur. Et sortons CSS égal à override. Et je pense que 150 vont être gros. Faisons donc 75. Ensuite, sortez ce pseudocode et enregistrez-le et voyez à quoi cela ressemble. Commençons donc notre application. Yarn run dev. Et rafraîchissons. Nous avons une grosse erreur. L'état d'utilisation n'est pas défini, oui, donc nous devons introduire l'état américain. Il y a des contextes utilisés. Il suffit d'ajouter un état d'utilisation, de l'enregistrer. Génial. On dirait donc que nous avons un fileur et qu'il ne se résout à rien. Et puis on dirait que nous affichons toujours le formulaire. Nous voulons nous débarrasser de ce formulaire car il n'est pas censé être affiché. Et ensuite, nous voulons centrer cette fileuse. donc très facile de centrer la toupie. Nous prenons simplement ce chargeur de clips et nous l'enveloppons dans ce composant Chakra UI Center. Il suffit donc de mettre le centre et de le placer au début , puis la balise de fermeture à la fin du chargeur de clips. Ensuite, nous avons oublié de supprimer le loyer ou le formulaire ici , puis d'aller de l'avant et de supprimer les totaux actuels commentés. Maintenant, sauvegardons cela et voyons ce qui se passe. Il a donc rafraîchi la page et elle est juste coincée en rotation. nous indique que quelque chose ne va pas parce qu'il devrait se résoudre comme un loyer ou qu'il existe devrait changer dans cette condition. Elle ne devrait plus montrer ce chargeur de clips. Il doit en fait afficher les totaux actuels, le loyer ou la forme une fois qu'il est résolu. Il y a donc un autre problème qui se passe. Et vous pouvez le constater ici même, nous avons une erreur. Cette erreur indique que le résolveur ou l'adresse n'est pas configuré pour le nom DNS. C'est comme l'une des erreurs les plus vagues de Ethers JS. Cela peut signifier un million de choses, mais je sais que dans notre contexte, cela signifie probablement que dans notre contexte blockchain, lorsque nous utilisons ce compte courant, cela signifie probablement que ce compte courant n'est pas encore réglé lorsque nous appelons cela. Et nous pouvons le déterminer en mettant un journal de console ici, compte courant. Et en fait, je vais mettre des backticks et dire compte courant. Et puis le compte courant juste pour que nous sachions ce que c'est. Enregistons-le et voyons ce qu'il nous donne au compte courant. Alors, regardez ça. Le compte courant est vide. C'est donc exactement ce qui se passe. Et pour être honnête, je ne connais pas la solution pour le moment. Je dois me pencher là-dessus pour voir pourquoi, mais je vais le comprendre et je vous le ferai savoir dans la prochaine vidéo. Mais une solution rapide pour nous est maintenant de venir ici à l'effet américain et d'ajouter un compte courant ici. Maintenant, utiliser l'effet utilise l' effet est appelé lorsque le composant se charge. Il peut également être appelé à nouveau lorsque ces valeurs modifient quelque chose dans ce tableau. Donc je peux avoir un compte courant, je peux avoir un locataire et toutes ces autres choses. Lorsque ces valeurs changent. Ou mis à jour d'une certaine manière, cela provoquera à nouveau l'effet de l'appel qu'ils utilisent. Si nous mettons un compte courant ici, si cette fonction est appelée, il n'y a pas de compte courant et elle génère une erreur. Eh bien, quand le compte courant sera résolu, il va revenir et appeler cela à nouveau, ce qui va appeler ces deux fonctions. Une fois encore. Bien qu'il s'agisse d'une erreur, il reviendra et l'appellera à nouveau une fois qu'il sera résolu. Donc, nous allons le faire pour l'instant juste pour pouvoir continuer à avancer. Je vais vous donner le correctif ici dans un peu, mais si vous enregistrez ça maintenant, ça devrait bien fonctionner. Alors rafraîchissez-vous. Et on y va. Et puis vous voyez que le compte courant est vide ici, mais il l'affiche à nouveau avec l'adresse. C'est donc le problème qui se pose. Nous allons aborder cette question dans un peu. Mais ici, il est dit : Bienvenue, veuillez entrer votre prénom et votre nom de famille afin que cela montre que les choses fonctionnent. Si on se rafraîchit à nouveau, il s'agit de tours, puis ça s'affiche, Hé, le locataire n'existe pas. C'est donc passer un appel, il retourne faux et montre notre formulaire. Définissons-le maintenant pour que nous puissions réellement nous inscrire en tant que locataire. Donc, dès que vous recevez un locataire, nous devons téléphoner pour nous inscrire en tant que locataire. Revenons donc à notre contrat pour trouver que je pense que nous l'avons appelé ajouter un locataire ici ajoute un locataire. C'est ce que nous devons appeler. Revenons ici et créons une nouvelle fonction. Je vais copier et coller ça dans. Je vais appeler ça ajouter un locataire. Et le locataire. Et puis nous allons faire un contrat dot add renter parce que c'est une fonction de contrat intelligente. Ensuite, dans cette annonce de location ou de fonction, si vous revenez au contrat intelligent, nous transmettons tout alors que l'adresse, le prénom, le nom famille peuvent louer actifs, commencer dans le solde temporel et le faire. Donc. Nous allons juste passer cela directement dans notre fonction ici. Donc, mettez l'adresse du portefeuille, FirstName, LastName peut louer, actif , équilibrer, commencer et terminer. Nous allons donc passer tout ça quand on l'appellera. Et donc, ici, dans le locataire de la publicité, nous allons transmettre cette information. Je peux donc prendre ça, le copier et le coller ici. Ensuite, lorsque nous appelons le contrat, nous pouvons utiliser cette méthode intéressante appelée poids. Vous pouvez donc voir un poids, ajouter le poids du locataire. Et ce que cela fait, c'est qu'il s'arrête là jusqu'à ce que la transaction soit terminée. Il reste donc ici et attend. Puis, une fois la transaction terminée, elle continue à exécuter du code. Nous allons donc juste tester cela par journal de console, en louant ou en ajoutant. En fait, nous pouvons faire des choses amusantes. Nous pouvons ajouter FirstName. Et juste en dessous de cela, nous allons vouloir obtenir ces informations de locataire. Nous avons donc cette fonction appelée get renter qui définit la variable d'état des locataires avec les informations du locataire dans laquelle get renter est appelé par ce chèque de location ou existe. Donc, tout ce que nous avons à faire ici, c'est simplement appeler un chèque de loyer ou existe. Et cela vérifiera qu'ils existent dans notre État avec les informations des locataires. Alors, gardons ça. Nous ne voulons pas que cela soit appelé lors du chargement de la page. Nous allons donc prendre toute la fonction et la transmettre à notre fournisseur. Gardez cela, puis nous allons accéder à un formulaire de locataire. Et nous voulons intégrer les informations de ce fournisseur qui indiquent des informations dans un composant de formulaire de locataire. Et vous l'avez fait beaucoup, vous savez comment le faire. C'est aussi simple que Const. Ajouter des valeurs égales au locataire, utiliser le contexte, les contextes de blockchain. Et assurez-vous d'importer des contextes d' utilisation depuis React et d'importer le contexte blockchain. Et puis, lorsque nous allons à OnSubmit, nous appellerons ce locataire. N'oubliez pas que nous obtenons uniquement le Prénom et le LastName du formulaire. Et c'est parce que peut louer quand un locataire a créé peut louer est vrai parce qu'il est évident qu'il est en mesure de louer. Actif va être faux parce qu'ils n' ont pas encore de vélo. Ils ne font que s'inscrire. Le solde sera de 0. Le montant dû est de 0, et les heures de début et de fin seront à zéro. Ils peuvent donc toujours être définis à partir d'ici pour que la personne remplissant le formulaire n'ait pas besoin de fournir des informations inutiles. Donc, dans notre onsubmit, nous allons le faire. Nous transmettons les valeurs. Nous allons dire des valeurs. Peut louer est vrai. Et ce que nous faisons ici, c'est définir plus de valeurs dans un objet. Laissez-moi simplement le copier et le coller quelques fois. Les valeurs actives sont égales à 0, les valeurs, le solde est égal à 0. Les valeurs commencent et finissent. Tout est égal à 0. Désolé, l'actif est faux. Puis zéros, zéros, zéros. On les remplit donc parce qu'ils seront toujours par défaut. Ensuite, nous devons également transmettre l'adresse du portefeuille. Et nous ne voulons pas que l'utilisateur doive transmettre cette adresse dans un certain temps et nous ne l'avons pas mise sur le forum, nous devons donc l'inclure également. Nous pouvons donc faire entrer le compte courant ici à partir des contextes blockchain. Et nous pouvons faire cet opérateur de propagation pour créer un nouvel objet de valeurs. Donc const new values objet. Ce que nous allons faire, c'est que nous aurons une adresse portefeuille. Whoops. Ce que nous allons faire, c'est de créer un objet. La première valeur clé de l' objet sera l'adresse du portefeuille, qui sera égale au compte courant. Ensuite, nous pouvons simplement répartir les valeurs. Dans cet objet. Il s'agit de l'opérateur de propagation. Et ce que cela fait, c'est qu'il ajoute simplement toutes ces valeurs, celles qu'ils ont soumises, y compris ces deux-là, cet objet. C'est vraiment cool. Si nous consolons, déconnectez un nouvel objet de valeurs. Voyons à quoi ça ressemble. Un nouveau test, mettons Travis, soumettons et regardons ça. Nous avons un objet qui a une adresse de portefeuille, FirstName, LastName peut louer, actif dans toutes ces autres choses. Nous avons donc nos valeurs clés et nous sommes prêts à les utiliser. Mais nous ne voulons pas avoir à être comme nouvelles valeurs objet dot wallet adresse nouvelles valeurs objet dot peut louer. Nous allons maintenant utiliser la structuration D pour les extraire. Ainsi, l'adresse de portefeuille const, prénom, le nom de famille, peut louer. Équilibre actif. Commencez par, puis équivaut à un nouvel objet Valeurs. Ce n'est que la structuration. Il extrait toutes ces valeurs afin que nous n'ayons pas besoin d'utiliser cette notation par points. Et enfin, la dernière étape est que nous appellerons l'air wait, ajouter le locataire va passer tout cela. Encore une fois, si nous n'avions pas fait cette restructuration, nous aurions juste à faire comme ça. Le portefeuille de points d'objet New Values aborde de nouvelles valeurs ou de nouveaux objets. s'agit donc que d'un raccourci. Vous pouvez le faire. Mais je pense que cela semble beaucoup plus propre. Encore une fois, nous transmettons nos valeurs. Nous y ajoutons ces valeurs par défaut. Nous ajoutons notre adresse de portefeuille lors de la création d'un nouvel objet dans lequel D structurait les valeurs à partir de celui-ci. Ensuite, nous les transmettons dans notre fonction d'ajout de locataire. Génial, essayons ça et voyons s'il ajoute un locataire. Je vais donc dire test Travis et cliquer sur Soumettre. Et ça devrait faire apparaître MetaMask. Nous avons une erreur. La propriété Impossible de lire est d' une longueur de lecture non définie. Ajoutez donc un locataire. Oui, il y a un problème ici. Revenons donc à ici au lieu de. Mais attendez, ajoutez un loyer ou faisons un console.log. Gardez cela et voyez ce qu'il dit. Test Travis. Nous avons eu des zéros vrais faux indéfinis. Très bien, le nom de famille n'est pas défini. On dirait que c'est le problème adresse de portefeuille, FirstName. Le nom de famille n'est pas défini. Voyons ce qui se passe. Donc, si nous allons à notre formulaire de rendu ici. Oui, je savais que je l' ai fait par sentiment. Nom de famille. C'est comme la dernière capitale N. Voici le prénom sans la capitale N. Je vais remettre ces fins de capital juste pour être cohérent. Soulignons donc tout cela. Et faites FirstName. Ensuite, mettez en surbrillance tous les noms de famille. Et faites-le de la même façon, capitale N. Et là, nous devons nous assurer que nous avons les bonnes choses. Et ceux-ci changent ces deux prénom, nom de famille et sauvegardent cela. Et maintenant, nous devrions être bons. Essayons de le consoler à nouveau. Travis teste, soumet et nous avons une adresse portefeuille Travis teste vrai faux 0000. Très bien, on va bien. Retournons cela pour attendre, ajouter un locataire et réessayer. Rafraîchissez-vous juste pour vous assurer que tout est clair. Travis teste et cliquez sur Soumettre. Cela devrait faire apparaître MetaMask. Et nous y voilà. Regardez ces bas frais d'essence. C'est génial. Je l'aime bien. Maintenant. Je vais cliquer sur Confirmer. Et voyons voir. Il est probablement en attente. Il est en attente maintenant et voyez comment cela tourne toujours. C'est la forme de crochet React. Le crochet de soumission qu'ils ont ajouté au formulaire qui maintient cette rotation jusqu'à ce qu'il soit terminé. Maintenant, regardez ça. Une fois que nous avons été ajoutés, il a détecté le changement et affiche maintenant notre tableau de bord. N'est-ce pas génial ? C'est génial. Maintenant, si je me rafraîchis, je devrais voir mon tableau de bord à la place. J'ai donc eu la roue tournante et il y a mon tableau de bord. Génial. Encore une fois, pour résumer cela, problème était que nous aurions dû utiliser ce camel, minuscule , premier mot puis majuscule, tous les autres mots. Cela a foiré notre nom de famille. Nous sommes donc retournés et avons changé toutes ces caisses CamelCase. Changez les prénoms en CamelCase. Ensuite, ici, je m' assure que nous passons dans la version CamelCase. Très bon travail. Il semble qu' un tableau de bord fonctionne. Il peut déterminer si nous sommes locataires ou non un rendu. Dans la vidéo suivante, nous allons commencer à remplir ces champs de manière dynamique. Nous allons pouvoir créditer notre compte, payer nos soldes et vérifier les vélos. Nous allons donc faire un gros coup de pouce dans la prochaine vidéo. Et cela nous rapprochera de la fin de notre application. 8. Populer le tableau de bord final optimisé: Très bien, je redéploie mon contrat juste pour pouvoir tester que tout fonctionne à nouveau. Je vais donc passer le test Travis et je vais m'ajouter en tant que locataire. Je vais donc cliquer sur Soumettre. Metamask va apparaître et je le confirmerai. Et une fois cela fait, il devrait afficher mon tableau de bord. Il est donc en attente. On y va. Tableaux de bord vers le haut. Donc, avant de passer en revue toutes ces valeurs, ce qui ne prendra pas autant de temps que vous le pensez car ce sont des contrats intelligents qui ont fait tout le travail. Avant que nous ne le fassions réellement, il y a deux choses que je veux aborder. abord, nous avons un petit bug. Donc, si j'ouvre mes outils de développement, donc si je viens ici pour MetaMask en déconnectant mon portefeuille. Déconnectez-vous, puis rafraîchissez-vous. Vous verrez que le spinner continuera simplement à tourner, à tourner et tourner et à tourner. Et rien ne va charger. Nous devons remédier à cela. Et la façon dont nous réglons cela, c'est que nous venons au tableau de bord et nous nous souvenons que nous avons mis cela si autrement ternaire ici. Eh bien, nous devons ajouter une autre condition. Donc, si le problème est, si le locataire existe est nul , le spinner tourne. Mais si nous n'avons pas de compte connecté , le locataire existe, ce sera non. Le spinner va donc toujours tourner jusqu'à ce que nous connections un portefeuille. Donc, pour y remédier, nous avons juste mis une autre condition ici. Nous mettons fin au compte courant. Ce que cela fait, c'est que si le rendu existe est nul et qu' il y a un compte courant , affichez le spinner. Donc, s'il n' y a pas de compte courant, le spinner ne sera pas affiché car les deux ne correspondront pas. Ensuite, il va continuer à vérifier si le locataire existe, ce qui n'est pas le cas, et il affichera le formulaire du locataire. Il suffit donc d'ajouter ce compte courant et de l'enregistrer. Essayons encore une fois. Laissez-moi me rafraîchir. Et en fait, j'ai besoin de l'apporter. Donc, ici, dans mon contexte, je dois dire compte courant pour pouvoir y accéder. Je vais donc le sauver. Et nous devrions être bons maintenant. Oui, on y va. Mon portefeuille n'est pas connecté et il affiche mon formulaire. Maintenant, ça ne va rien faire. Si je le remplis, ça va générer une erreur. Si je mets quelque chose comme ça, ça va générer une erreur car évidemment nous n'avons pas de portefeuille connecté. Nous ne pouvons pas parler à la blockchain ou au contrat intelligent. Allez-y et connectons son portefeuille. Connectez-vous. Et maintenant, mon tableau de bord s'affiche. Maintenant, la deuxième chose que nous voulons aborder est problème que nous avions rencontré dans la dernière vidéo. Maintenant, rappelez-vous que chaque fois que nous appelons le compte courant dans ces fonctions, la valeur n'avait pas encore été renseignée dans l'état, ce qui déclenchait une erreur. Et nous avons lutté contre cela en ajoutant un compte courant à notre effet utilisateur. Donc, quand cela a changé, ça appellerait à nouveau l'effet Hughes. Ensuite, nous aurions obtenu notre valeur. Rappelez-vous donc que compte courant est vide et que nous obtenons une erreur car nous appelons une valeur qui n'existe pas encore et qui se remplit, puis cela fonctionne. Nous en avons donc parlé dans notre dernière vidéo et nous allons résoudre ce problème maintenant. Nous ne voulons pas générer d'erreur à chaque fois avant qu'elle ne s'exécute réellement. Donc, la façon dont je vais l'aborder dans cette application est de l' envelopper dans une déclaration if. Donc partout où nous cherchons à obtenir le compte courant, comme ici, je vais me débarrasser de ce journal de console partout où nous cherchons à obtenir ce compte courant. Je vais encapsuler un compte si courant. Donc, si cela existe, n'exécutez que ceci. Je vais passer à ma prochaine fonction qui utilise le compte courant. Et je vais aussi terminer ça. Si le compte courant ne fait que cela, faites ces choses. Je pense que ce sont les deux seuls en ce moment. Ce que cela fait, c'est lorsque cela se charge et qu'il arrive ici et qu'il essaie d'obtenir le locataire ou de vérifier si le locataire existe et qu'il appelle le rendu existe dans le compte courant n'est pas encore défini dans les lancers cette erreur. Cette fois-ci, il vérifiera si ce compte courant est défini en premier. Ce ne sera pas le cas, donc ça va sauter ça. Et puis ici, dans l' effet américain quand on l'appelle, rappelez-vous que nous l'avons passé ici. Donc, chaque fois que cela change, il va appeler à nouveau l'effet Hughes. Chaque fois que cela se produit, il va réappeler cette fonction. Et cette fois, ça va marcher. Maintenant, si nous l'enregistrons et revenons en arrière et rafraîchissons, nous n'obtenons pas cette erreur, nous obtenons simplement ceci. Quelque chose n'est plus pris en charge. Et réagir 18, ce qui n'est pas grave, je dois me pencher là-dessus. Mais nous avons aussi cette erreur favicon, que nous pouvons corriger en allant index.html et en sortant simplement le favicon. Je pense que je dois arrêter ou redémarrer mon serveur pour que cela prenne effet. Laissez-moi me rafraîchir et cette erreur a disparu. Je pense donc que nous sommes bons pour commencer ici. La première chose que nous allons faire c'est remplir ce crédit BNB. Il s'agit donc d'un bilan aérien, de l'équilibre des locataires. Donc, si nous revenons à notre contrat et que nous faisons défiler vers le bas, nous avons cette fonction appelée balance of renter. C'est ce que nous allons appeler qui va vérifier le solde aérien ou crédit Air BnB que nous avons mis sur le solde du compte ERA de Renner. Revenons aux contextes blockchain. Et faisons const, obtenons. Un solde locataire équivaut à un évier. Nous allons faire une erreur d'essai dans le journal des points de la console d'erreur. Ensuite, nous allons juste dire que l' équilibre const est égal à l'attente. Utilisez notre objet contractuel et appelez le solde du loyer ou de la fonction. Nous allons passer dans le compte courant. Et enveloppons encore une fois dans une déclaration if. Si le compte courant, ne faites que ces choses. Et ensuite, nous allons définir l'état. Nous allons donc venir ici et créer un état pour cela. On va donc dire le loyer, le loyer ou le solde. Set. solde du locataire est égal à l'état d'utilisation. Ici, nous allons fixer le solde du locataire. Définissez le solde du locataire sur l'équilibre. En fait, nous devons formater cela car il va revenir en arrière. Nous devons donc formater cela comme nous l'avons fait avec leur autre équilibre que nous avons fait au début. Donc, pour ce faire, vous mettez des ethers dot utils, format point ether. Et nous allons passer en équilibre. Nous devons appeler cela lorsque le contexte est chargé. Nous allons donc l'ajouter à notre effet utilisateur. Nous allons appeler ça et ça va fixer les états. Nous devons donc transmettre cette variable d'état à notre fournisseur. Nous allons donc mettre le solde du locataire. Et maintenant, cela devrait être disponible pour que nous puissions l'utiliser ailleurs. Nous devons donc accéder à notre tableau de bord. En fait, les totaux actuels sont là où nous devons aller. Totaux actuels. Nous devons introduire des contextes aériens. Faisons donc Const. solde du locataire est égal. Utilisez le contexte, la blockchain, le contexte. Génial. Assurez-vous maintenant de l'importer en haut. Nous devrions donc avoir un contexte Blockchain et nous aurions dû utiliser des contextes importants. C'est disponible ici. Maintenant, dans notre carte de statistiques, nous pouvons modifier ce numéro statique en location ou en solde. Alors, gardons ça. Et rafraîchissons la page. Et nous avons 0, ce qui doit être correct car nous n' avons pas de valeur par défaut. Mais pour vérifier cela, allons de l'avant et faire fonctionner ce formulaire de crédit de votre compte afin que nous puissions créditer notre compte et nous assurer qu'il modifie cette valeur ici en fonction à ce que nous avons sur le contrat intelligent. Passons donc à la forme Ajouter à l'équilibre. En fait, nous devons commencer dans les contextes blockchain. Allons ici au fond. Et nous allons appeler, si nous examinons notre contrat intelligent, nous allons appeler la fonction de dépôt. Voyez si nous pouvons trouver ce dépôt. Le voilà. Nous allons appeler cette fonction de dépôt. Nous transmettons l' adresse de notre portefeuille dans son payant. Le fait qu'il soit payable signifie que nous pouvons également lui envoyer une quantité d' éther ou de B&B ou tout ce que nous envoyons qui sera envoyé dans un objet, que je vous montrerai dans une minute. Nous avons donc un dépôt, il est également payable et cela va ajouter cela au contrat intelligent, mais créditons le compte du locataire qui se trouve à cette adresse de portefeuille. Appelons donc cette fonction de dépôt. Revenons au contexte de la blockchain. Et je vais juste copier cette fonction. Et je vais appeler ça un dépôt. Et je peux supprimer ça si on enlève ça Totalement. Pensez-y donc. Nous entrons maintenant une décimale et nous voulons convertir en pesée ou dix en années 1800. Parce que dans notre contrat intelligent, nous voulons faire face décimales, car la solidité ne prend pas encore en charge les décimales. Nous devons donc convertir cela dans l'autre sens. Nous avons donc utilisé Format ether pour le convertir en décimales. Nous devons maintenant utiliser une fonction utilitaire pour convertir des décimales en pesée. Cette fonction s'appelle l'éther d'analyse. Donc, nous allons y arriver quand je dirai la valeur de const B&B. Donc, le montant que nous allons transmettre. Et en fait, mettons cela en paramètre. Valeur. Ainsi, la valeur B & B est égale à ethers dot utils. Nous allons formater cette valeur dans les deux sens. Nous devons donc appeler Parse Ether. Et nous transmettrons la valeur. Une fois que nous avons cela, alors nous pouvons appeler notre fonction de dépôt Const, le dépôt est égal à attendre. fonction interne du point de contrat est appelée dépôt. Et nous allons transmettre l'adresse de notre portefeuille, qui est un compte courant. Et nous n'avons pas besoin d' encapsuler cela dans un si parce que cela ne se charge pas lors du chargement de la page, il ne le recherche que lorsque nous cliquons sur le bouton. Donc, à ce moment-là, il sera bien chargé. Et après le compte courant, c'est ici que nous pouvons transmettre la valeur du montant que nous envoyons au contrat. Et je vous ai dit que c' était un objet. Créons donc des accolades bouclées. Et pour la clé va mettre de la valeur. Pour la valeur, nous allons mettre les valeurs b et b car nous passons ce montant ici. Et puis, il y a cette belle méthode appelée poids, où lorsque nous effectuons cette transaction, nous commençons la transaction et nous voulons attendre que cette transaction soit terminée avant de passer à La prochaine chose. Pour ce faire, il suffit de mettre un dépôt en attente, ce que nous avons défini au-dessus du poids des points. Et cela va attendre que la transaction soit terminée. Ensuite, nous voulons rafraîchir le solde, le solde des locataires. Une fois que nous créditons le compte, nous voulons actualiser ce numéro sur la page. Et pour ce faire, c'est assez facile. Nous appelons simplement obtenir le solde du locataire. Une fois encore. Ce dépôt n'est pas appelé lors du chargement de la page. Il n'est appelé que lorsque nous soumettons ce formulaire. Allons donc ici et envoyons cette fonction au dépôt du fournisseur aérien. Et puis passons à notre forme Ajouter à l'équilibre. Ici, nous allons aller à l'onsubmit et les valeurs sont ce que nous obtenons. Examinons et voyons à nouveau ce que cela soumet. Alors cliquez sur Enregistrer. Voyons à quoi ressemble ce journal sur la console, le test et il est un peu lent. On y va. Donc, si je mets 0,1 et que je le soumets, il va soumettre un objet avec une clé de solde de crédit et une valeur de 0,1, nous n'avons pas besoin de ce solde de crédit, nous ne voulons que le nombre. Nous allons donc établir une structure qui en passant par le crédit const, solde de crédit est égal à des valeurs. Ensuite, nous pouvons appeler les distorsions de dépôt d'attente. Qu'est-ce que c'était ? Attendez le dépôt, le solde de crédit. Et c'est tout ce que nous devons faire. Alors, gardons ça et donnons un coup de feu. J'aime toujours rafraîchir ma page juste pour m'assurer que je commence à nouveau. Avant de faire cela, assurez-vous d'avoir des tests B&B sur votre compte. Donc, si j'ouvre le mien, j'ai 1,96. Si vous n'en avez pas, il suffit d'aller dans le robinet de test B et B dans Google. Cliquez sur le test net.finance.org, puis envoyez-vous un B&B. Vous pouvez vous envoyer un B&B par jour. Ici, vous venez de saisir l'adresse de votre portefeuille. Cliquez sur Donnez-moi un BNB et cliquez sur le BNB et il vous l' enverra en cinq minutes. C'est vraiment cool. Mais j'ai déjà pris fin aujourd'hui, donc je ne peux plus envoyer. Je vais donc créditer mon compte avec 0.1 B&B donc si je clique sur Soumettre, nous avons une erreur. Le dépôt n'est pas défini. C'est dans notre formulaire d'annonce pour équilibrer c'est probablement parce que nous ne l'avons pas apporté. Oui, nous ne pouvons pas appeler dépôt parce que nous n' avons pas intégré notre contexte. Revenez donc au sommet. dépôt est égal aux contextes d'utilisation. Et je vais passer dans le contexte de la blockchain et m' assurer que vous importez ces deux-là. Le mien le fait-il automatiquement ? Je vous l'ai dit un million de fois, mais j' essaie juste de vous le rappeler. Alors, essayons à nouveau. Actualisez la page. Et je vais créditer mon équilibré avec 0.1 B&B. Cliquez sur Envoyer, et j' attendrai MetaMask. Très bien, donc mon total, donc c'est un très petit gaz v, c'est pourquoi j'aime le BNB. C'est 0,0043 B & B et tapez ça sur mon 0.01. C'est très peu de gaz. Nous allons donc le confirmer. Quand nous le ferons, il va attendre. Rappelez-vous que nous appelons cette méthode du poids, elle va attendre. Et quand c'est fait, il devrait rafraîchir le crédit Airbnb. Cliquez donc sur Confirmer pour le regarder ici. Il est actuellement coupé en cubes. Maintenant, c'est en attente. Dans notre filature à cause de cette forme de crochet React , crochet intégré, je pense que ça s' appelle la soumission, mais vous verrez maintenant que notre crédit B&B est 0,01 ou 0,1 prix B&B. Voyons ce que c'est. 0,1. B & B vaut 38 dollars. Super. J'ai aimé cet équilibre. Cela fonctionne. Allons maintenant à B et B peuplent cela. Revenons donc au contexte de la blockchain. Et je vais copier et coller ça dans le prochain. Si nous examinons notre contrat, nous avons une fonction appelée get du. C'est donc ce que nous allons appeler « get do ». Nous ne passons rien. Et puis je vais supprimer ce rapide dans un compte si courant. Ensuite, nous ferons ce kannst du égal à attendre contrat dot get, faire un compte courant. Et ensuite, nous allons définir l'état. Ce sera un modèle récurrent pour les prochaines fonctions. Je vais donc venir ici et créer une variable d'état appelée do, puis définir du est égal à l'état U. Je peux donc venir ici et définir, faire, et je le fixerai au montant dû que nous avons défini juste au-dessus de cela. Ne confondez donc pas cela avec la variable d'état. Et nous voulons appeler cela « get do » lorsque les contextes se chargent. Alors, prends du. Ensuite, cela va définir les variables d'état d'échéance. Nous voulons donc transmettre cela à nos fournisseurs afin de pouvoir l'utiliser dans notre tableau de bord. Il suffit donc de passer et de sauvegarder cela, aller dans votre tableau de bord, non sur les totaux actuels du tableau de bord. Et puis passez, faites-le ici. Nous allons donc passer en raison de notre contexte. Et puis sur le second où il est de 0,01, nous allons juste passer à échéance et l'enregistrer et voir si cela nous donne un montant una à travers nous une grosse erreur. Et cela indique que les objets ne sont pas valides en tant qu'enfant React, ce qui signifie qu'ils renvoient un grand nombre, c'est-à-dire un objet. Nous avons donc besoin de l'analyser, de l'oublier. Donc, au lieu de le faire, nous devons mettre des éthers, des points utils, des points format éther. Fais, et ça devrait y remédier. Cela va nous donner notre nombre décimal. Et c'est déjà là. J'ai regardé 0, rafraîchir à nouveau, 0, cool. Et nous allons le tester dans une minute. Allons de l'avant et organisons une configuration de minutes de trajet. Alors, qu'en est-il des minutes de trajet ? Où est-ce que c'est dans notre contrat ? Donc, si nous revenons à notre contrat, nous avons cette fonction appelée obtenir la durée totale. Nous allons donc appeler cela, cela renvoie 0 s'ils n'ont pas encore enregistré leur vélo ou s'ils ne l'ont pas encore vérifié. J'ai dit qu'il retourne le temps qu'ils étaient sur le vélo. Donc, s'ils ont un début et une heure de fin, il va le calculer ici. Nous devons donc appeler cela pour obtenir la durée totale. Encore une fois, je vais le copier et le coller. Je vais en fait appeler cela pour obtenir la durée totale. Et nous allons laisser cette déclaration si. Et nous allons faire exactement la même chose ici. Nous allons dire que la durée totale de const est égale à attendre contrat et obtenir la durée totale, ce qui est une fonction de notre contrat comme nous venons de le voir. Puis transmettez le compte courant. Et ensuite, nous allons définir l'état. Alors, montons ici. Et juste en dessous de cela, mettez const, duration, définissez la durée égale à l'état d'utilisation. Et revenons ici et nous allons le régler. Définissez la durée sur la durée totale. Et ça va vraiment être une ficelle. Nous voulons l'attribuer à un chiffre. Alors, gardons ça. Et nous voulons également obtenir cela lorsque la page charge car elle se trouve sur un tableau de bord. Nous venons donc à utiliser Effect, obtenir la durée totale dans ce réglage de la durée. Passons donc la valeur de l'état de durée à leur fournisseur. Et puis, comme nous l'avons fait auparavant, passons aux totaux actuels et ajoutons-les ici, durée pour l'intégrer. Et puis ici, en quelques minutes de trajet au lieu de sept, nous allons mettre la durée. Gardez-le. Rafraîchissez ma page, et nous avons Ryan minutes de 0. Définissons maintenant le statut de cette moto. Donc, la façon dont je l'ai mis en place, c'est que ça va rester rouge jusqu'à ce que tu regardes le vélo. Si le vélo est activement vérifié, il va passer au vert. Comme Hey, vous êtes prêt à partir, profitez de votre vélo. Une fois que votre vélo est enregistré , le dos devient rouge. rouge signifie que lorsque votre vélo est réenregistré, vous ne pouvez pas en vérifier un autre tant que vous n'avez pas payé votre solde. Maintenant, vous voudrez peut-être faire la distinction entre le moment où ils paient le solde moment où ils vérifient à nouveau le vélo. Vous pouvez le faire si vous le souhaitez. Je vais laisser ça rouge juste pour plus de simplicité. Pour ce faire, nous devons venir ici et voir, oui, nous réglons cette couleur d' arrière-plan sur le rouge. Ce que nous voulons faire, c'est que nous voulons savoir s'ils sont actifs ou non. S'ils sont actifs , nous voulons le définir en vert sinon, lisez. Revenons donc en arrière. Je pense que nous l'avons déjà en l'air. Nous avons des erreurs. Ajoutez un locataire. Non, nous n' avons pas quelque part ici. Trouve le locataire ici. Nous vérifions si le locataire existe, si c'est le cas, nous appelons get renter in populate que les locataires indiquent la variable C où elle indique Définir le locataire. Nous devrions donc pouvoir venir ici et simplement passer le montant du locataire. Donc, le locataire et cela devrait nous rappeler quand nous ajoutons un locataire, cela nous donne l' adresse du portefeuille, FirstName, LastName peut louer un solde actif, toutes ces bonnes choses. Nous devrions donc en disposer. Cela devrait donc être aussi simple que transmettre les informations du locataire, d' accéder à nos totaux actuels et d'ajouter un locataire à nos contextes. Et puis, au lieu de rouge ici, nous dirons que le locataire est actif. Si c'est vrai, nous voulons changer cela en vert. Sinon, rouge. Gardez-le. Essayons ça. Nous avons donc une grosse erreur ici. Il est dit que les propriétés non définies ne peuvent pas lire. Et ce que cela signifie généralement, c'est qu'il n'était pas encore peuplé. Il vérifie donc cette variable d'état avant qu'elle ne soit remplie. Ce que nous pouvons faire, c'est également faire un enregistrement pour le locataire afin de nous assurer que locataire est également disponible. Ainsi, le locataire et le locataire sont actifs dans le vert alors seul le texte vert est lu. Donc, si nous sauvegardons cela, nous devrions être bons. statut du vélo de rafraîchissement est rouge. Maintenant, lorsque nous le vérifions, cela devrait devenir vert. Ensuite, nous devons faire fonctionner ce formulaire afin de pouvoir payer le montant dû. Une fois que nous aurons fait cela et ajouté nos vélos vérifieront que tout cela fonctionne. Alors, allons le faire ensuite. Revenons donc aux contextes de blockchain. Et je vais encore copier ceci, le coller en dessous. Et je vais appeler ça « faire un paiement ». Et nous allons passer une valeur. Parce que rappelez-vous que c'est payable. On va envoyer un montant avec ça. Jetons un coup d'œil à la fonction de notre contrat. Donc, quelque part, ce devrait être là où nous effectuons notre paiement. Ici, effectuez le paiement. Voici donc notre fonction de paiement. N'oubliez pas qu' il le soustrait de notre solde, donc il effectue un paiement au contrat et soustrait ce montant de nos ensembles équilibrés qu' il peut louer à vrai, car maintenant vous pouvez louer un vélo à nouveau. Il est défini en raison de 0 et commence et se termine à zéros. Il effectue donc votre paiement et vous rafraîchit comme vous l' étiez au début. Nous allons donc venir ici et nous appellerons simplement la fonction faire le paiement. Et à l'intérieur de ce compte courant. Et nous n'avons pas besoin du compte courant car encore une fois, il ne fonctionne que lorsque nous appuyons sur le bouton. Je vais donc faire un peu comme je l'ai fait ici. Je vais copier ça. En fait, je vais juste copier tout ça. Collez-le. Et donc la valeur B & B, c'est la valeur que j'envoie. Et puis je vais appeler dépôt parce que nous déposons de l'argent, nous effectuons un paiement. Mais au lieu d'appeler la fonction de dépôt, nous appellerons la fonction de paiement. Nous transmettrons l'adresse de notre portefeuille et le montant que nous envoyons, nous attendrons que cela soit fait. Ensuite, nous devons faire plusieurs choses ici. Alors n'oubliez pas que dans notre fonction contractuelle, nous faisons beaucoup de choses. Nous soustrayons de notre équilibre. Nous sommes en train de passer à la valeur vraie dans tous ces deux zéros. Nous devons donc rafraîchir quelques choses. Bien, sous ça, nous allons appeler un locataire de poids. Parce que nous devons rafraîchir notre locataire. Ils ont de nouvelles valeurs maintenant, peuvent louer le solde. Tout cela est rafraîchi. Nous devons donc rafraîchir le locataire. Nous devons rafraîchir le loyer ou l'équilibre. Il faut le rafraîchir car notre équilibre va changer. Nous devons actualiser la durée car nous avons eu une émeute de dix minutes. Nous avons besoin que cela revienne à 0, donc nous devons le rafraîchir. Attendez donc, obtenez la durée totale. Et enfin, nous devons rafraîchir le montant dû. Alors attendez, faites-le, car ça va aussi être 0. Et cela ne fonctionne que lorsque nous appuyons sur un bouton. Nous allons donc transmettre la fonction au fournisseur. Ensuite, nous allons passer au formulaire de paye. Et apportez notre contexte. Canst, faire le paiement est égal à utiliser le contexte. Dans notre contexte, il y a les contextes de la blockchain. Encore une fois, assurez-vous d'importer ces deux éléments dans les airs lors de notre sommet. Essayons donc d' abord notre Soumettre, voir si cela fonctionne. Alors payez vos cotisations 0.1 soumettez, et voilà. Encore une fois, nous voulons structurer cela pour obtenir le 0.1. Pour ce faire, nous dirons le paiement de const. Je pense que c'est ce que nous utilisons ici. Oui, le paiement D est égal des valeurs et nous pouvons appeler attendez, effectuez le paiement. Paiement, paiement. Laissez-moi le sauver et nous pourrions l'essayer, mais nous n'avons pas de Mountain Dew. Nous allons donc aussi sauter sur nos vélos et faire fonctionner ces boutons. Donc, dans le contexte de la blockchain, ajoutons deux fonctions. On va s' appeler checkout, const, check-out équivaut à un évier. Et l'autre va s' appeler « check-in ». Nous allons donc vérifier le vélo. Nous allons revenir sur le vélo. Et nous allons essayer de rattraper. Console.log l'erreur. Ici. Nous dirons que si le compte courant effectue cette vérification, alors seul l'exécuter fera cette vérification. Si c'est vrai, n'exécutez que ceci. Nous allons donc commencer par const checkout égal à attendre le point de contrat. Et voyons ce que nous avons obtenu. Nous avons donc un départ et nous avons un enregistrement. Et vous remarquerez que lors du paiement, nous souhaitons probablement actualiser le locataire car il aura de nouvelles valeurs. Et puis à l'enregistrement, il se passe beaucoup de choses. Nous modifions certaines valeurs du locataire, mais nous définissons également le montant dû. Nous calculons donc le montant dû et nous allons régler cela. Nous devons actualiser ces valeurs. Donc les contrats, le point, la caisse, le compte courant. Nous allons attendre la fin de la transaction, en achetant le poids des points. Et ensuite, nous allons appeler get renter pour le rafraîchir. Ici, en bas. Je vais vraiment copier ça, le coller. Ici. Nous dirons l'enregistrement, l' enregistrement par point de contrat. Ensuite, nous allons attendre l'enregistrement. Ensuite, nous allons appeler obtenir un locataire. Nous allons appeler get pour actualiser cette valeur et obtenir la durée totale car nous devons remettre cette valeur à 0. Dans ceux-ci, comme les autres, il y a des boutons sur lesquels vous appuyez. Nous allons donc transmettre les fonctions réelles à notre fournisseur. Et en fait, je n'en ai pas besoin si le compte courant parce que c'est une pression sur un bouton, cela ne se produira pas lors du chargement de la page. Nous allons donc les reculer et les sauvegarder. Et je vais passer la caisse et m'enregistrer auprès de mon fournisseur. Et ensuite, on va aller au vélo du tableau de bord. Maintenant, ce sera un vélo. On y va. Rappelons donc le contexte de notre composant vélo. Const, vérifiez, vérifiez n égal, utilisez des contextes, contextes blockchain, apportez vos importations. Et je vais le sauver. Il y a maintenant une chose dont nous devrions parler. Une chose que vous pouvez faire avec votre contrat est que lorsque vous vérifiez ce vélo, vous pouvez le faire enregistrer dans votre contrat ou dans votre état ou quelque chose du genre. Vous pouvez donc afficher ici le type de vélo que vous avez vérifié. Je ne voulais pas rendre cela trop compliqué et je voulais laisser quelques choses pour que vous soyez créatif et que vous en fabriquiez votre propre application. Mais tous ces départs et enregistrements vont faire la même chose. Donc, si je vérifie ce vélo, c'est la même chose que de vérifier ce vélo. Nous n'avons pas besoin de différencier le vélo que nous sommes en train de vérifier. Ce sera donc la même chose et chacun de ces composants de vélo. Pour le paiement, je vais ajouter un clic. Équivaut à la caisse. Et pour ce bouton, le bouton d'enregistrement, j'ajouterai un message d'enregistrement en cliquant sur ma fonction d'enregistrement. Et ensuite, nous l'avons sauvegardé. Et je pense que nous sommes bons pour eux. Nous pouvons vraiment l'essayer. Alors rafraîchissez ma page. Et je vais essayer de vérifier un vélo. Maintenant, il y a beaucoup de choses qui vont se passer ici que nous pourrons tester. Donc, tout d'abord, je vais vérifier ce vélo. Très bien. Et ça me fait payer des frais d'essence très minimes. Prix B & B. Voyons ce que c'est réellement. C'est comme 27, gaz v est de 0,20$. Je suis content que nous ayons recours au BnB, même si c'est un témoignage. Laissez-moi donc revenir à MetaMask. Permettez-moi de le confirmer. Ce qui va se passer ici, c'est que lorsque je le confirmerai, ce statut devrait devenir vert. Et cela devrait définir un tas de choses que nous avons dites dans notre contrat, comme si location peut être fausse, l'heure de départ de l'air devrait être documentée, il devrait y avoir un horodatage pour cela et tous les que, vous savez, le contrat tout aussi bien que moi, vous savez, ce qui va se passer. Je peux donc cliquer sur Confirmer. Maintenant, c'est en attente. Une fois cette attente terminée, elle devrait devenir verte, alors attention à cela. C'est fait. Et nous sommes verts. Regardez ça. Ou le vélo est vérifié. Et ce que nous voulons faire maintenant, c'est attendre environ six minutes, quelque chose de plus de cinq minutes, puis nous allons vérifier que tout se passe correctement. C'est donc 1157 ici. Je vais donc revenir à 1203 et nous reviendrons à ce moment-là. Nous devrions avoir six minutes de trajet. Nous devrions avoir une quantité de B&B. Ne vous souvenez pas de 0,05 toutes les cinq minutes. Et à partir de là, nous devrions pouvoir payer ou payer cela jusqu'à 0 et faire en sorte que notre crédit B & B reflète la différence. Je vous reverrai dans cinq minutes environ. Très bien, il est donc presque temps de vérifier l'arrière de mon vélo. Avant de faire cela, je vais vérifier mes variables d'état juste pour voir que les choses ont changé correctement. Allez donc dans les composants. Vous verrez que le loyer peut être faux maintenant parce qu'il a été vérifié, donc ça a bien fonctionné. Et alors, c'est vrai, actif est vrai. Ceux-ci ont très bien fonctionné. Et tout fonctionne correctement. Très bien, il y a donc environ 78 minutes. Donc, ce que nous allons faire, c'est vérifier la moto. Lorsque nous faisons cela et que cette transaction se termine, je devrais avoir mon statut de vélo pour lire mes minutes de trajet devraient être renseignées avec combien de temps j'étais sur le vélo dans mon B&B. peuplés également. Essayons donc ça. Je vais donc cliquer sur l'enregistrement et le confirmer dans MetaMask. Et vérifions ce statut. C'est donc en attente. Lorsque cela est fait, les valeurs devraient être remplies. Très bien, super. statut de la moto est donc revenu au rouge. J'étais sorti sept minutes dans mon B&B do est 0.005, ce qui est juste. Si j'avais 12 minutes, j'aurais 0,01. N'oubliez pas que c'est 0,005 toutes les cinq minutes. C'est tellement génial. Le dernier test est donc de savoir si je peux payer le montant dû et le faire réinitialiser et le déduire de mon crédit B&B. Notre État en ce moment est que le loyer peut toujours être faux parce que je n'ai pas payé mes cotisations. Et l'activité est fausse parce que je ne suis plus active sur le vélo. Mettons donc dans la monture 0,005 et essayons de le payer. Soumettez donc et nous effectuons un paiement de 0,005, puis des frais d'essence. Alors cliquez sur Confirmer et cela va être en attente, mais une fois que c'est fait, mes hommes de course, ça devrait être à 0. Mon B&B do devrait être égal à 0 et mon crédit doit être déduit du montant que j'ai payé. Il vient de passer par Reimann, c'est 0. Le B&B Do n'est rien. Et le crédit B & B, c'est tellement. Donc 0,01 moins 0,05 est 0,095. J'ai donc encore un certain crédit. Je peux encore vérifier qu'un autre vélo dans notre application fonctionne à merveille. Dans la vidéo suivante, nous allons faire un peu nettoyage et nous allons ajouter quelques fonctionnalités de sécurité que nous n'avons pas ajoutées dès le départ. Une fois que c'est fait ou Apple sera fini. Vous serez en mesure de montrer tout votre travail. Je vous verrai dans la prochaine vidéo. 9. Optimiser les contrôles d'interface utilisateur et de sécurité: Dans cette vidéo, nous allons mettre la touche finale à notre application. En terminant les choses, nous allons commencer par afficher ces messages nécessitant sur notre front end. Donc, si vous vous souvenez, dans notre contrat intelligent, nous avons ces déclarations qui exigent que si elles ne sont pas vraies, nous recrachons ce message. Nous devons les afficher à l'avant. Nous allons donc travailler là-dessus. Ensuite, nous allons implémenter certaines fonctionnalités de sécurité afin que les locataires ne puissent pas interférer avec les informations des autres locataires ainsi que certains éléments qui sont vraiment importants. Alors, poussez cette leçon parce qu'il va y avoir beaucoup de plaisir. Et comme toujours avant de commencer, nous devons corriger quelques bugs. Nous allons en réparer un simple à l'avance et un autre plus tard dans la vidéo. Dans le premier cas, ça se passe comme ça. Donc, si vous ouvrez votre contexte blockchain, et que vous l'avez peut-être déjà remarqué. Si vous ouvrez votre contexte blockchain et que vous l'enregistrez, ce tableau de bord devient le formulaire des locataires d'annonces, qui signifie que nous perdons notre état d'une manière ou d'une autre. Donc, si vous allez dans le contexte de la blockchain et que vous l'enregistrez , vous verrez que, maintenant, nous avons le formulaire Ajouter des locataires. Si vous accédez à votre tableau de bord et que vous effectuez simplement un console.log, locataire existe, vous verrez le problème. Alors, sauvegardez ça. Et je vais rafraîchir la page. Et je vais sauvegarder mon contexte blockchain. Dès que vous faites cela, vous voyez ici, dans la console, il est écrit Hot update, ce qui signifie que Vijay S est Hot Reload s'est produit et que cette valeur n'est pas définie. Vous voyez juste au-dessus, c'est vrai. Mais dès que cette recharge se produit, elle n'est pas définie. Maintenant, j'ai essayé de trouver une bonne solution pour cela, et je suis convaincu que ce doit juste être un bug JS d'octet ou un problème avec Vijay S que je ne connais tout simplement pas, mais j'ai une solution facile pour nous, qui ne nous aura pas beaucoup d'impact. Il s'agit d'un plugin utilisé par Vijay S. Donc, si vous allez dans le dossier racine et allez à vite dot config dot js. Il y a ce plugin React Plugin. Nous l' importons donc ici et nous l'utilisons ici avec React. Maintenant, à l'intérieur de cela, il suffit de désactiver l'actualisation plus rapide. Et vous le faites en écrivant ceci un objet de clé, actualisation rapide, de valeur false. Nous désactivons donc le rafraîchissement rapide. Si nous sauvegardons cela et que nous allons maintenant actualiser cette page, en fait actualisé quand même. Vous ne devriez plus avoir ce problème. Je vais donc passer au contexte de la blockchain, contexte, et je vais le sauvegarder ici. Et je vais l' enregistrer dans ma page, il suffit de les rafraîchir sans perdre l'état. C'est donc une solution simple. Ajoutez-le dans votre fichier de configuration et nous pouvons aller de l'avant. Maintenant, juste un mot de prudence si vous apportez modifications à l' interface utilisateur et que vous souhaitez les voir instantanément, je pense que vous devrez réactiver cela, mais nous avons terminé les modifications de l'interface utilisateur. Vous n'avez donc pas besoin de vous inquiéter à ce sujet, mais vous vouliez simplement le noter. Une fois encore. Si vous trouvez une solution, faites-le moi savoir. Ou si j'en trouve un en attendant, je le collerai sous cette vidéo. Très bien, donc d'abord, comme je l'ai dit, nous voulons ajouter ces messages d'erreur lorsque nous avons des erreurs. Donc, si nous revenons à notre contrat, vous vous souvenez que nous avons ces déclarations exigées qui disent des choses comme si vous n' avez rien à cela cette fois-ci, vous n'avez pas assez de fonds pour couvrir le paiement, des choses comme ça. Donc, si l'utilisateur essaie faire quelque chose qu'il n'est pas autorisé à faire, un message d'erreur devrait apparaître. Par exemple, si j'essayais de payer, pourrais le faire quand je n' ai rien dû. Donc 0.1 et soumettez-le, je reçois cette erreur ici dans la console. Ici, c'est cet objet. Donc, il est écrit message de code, pile de données. Toutes ces bonnes choses. Donc, si nous ouvrons cela, vous verrez que nous avons cet objet de données. Et si nous ouvrons cela, il y a un message qui indique que l'exécution est rétablie. Vous n'avez rien à faire pour le moment. C'est ce que nous voulons afficher sur la page. Pour ce faire, il suffit de saisir ces valeurs spécifiques. Donc, si je vais effectuer un paiement, c'est ce que nous appelons en ce moment, dans mes contextes blockchain. Au lieu de l'erreur console.log, nous allons dire les données de points d'erreur. N'oubliez pas que c'était le message de point d'objet. Alors sauvegardez-le et réessayez. Laissez-moi rafraîchir 0.1 et soumettez-moi, et je devrais simplement voir le message ici. L'exécution est rétablie. Vous n'avez rien à faire pour le moment. Il nous suffit donc de l'afficher sur la page. Eh bien, l'un de mes paquets préférés et réagit est Toast Defy. Testify est utilisé pour alerter l' utilisateur sur certaines actions. Et il y a des millions de façons de les afficher. Il peut être glissé sur la page. Il peut faire tout ça, mais nous allons simplement rester simple. Donc, si vous allez témoigner, réagissez, il devrait y avoir un paquet NPM mais réagir pour témoigner. C'est très facile à installer. Vous pouvez voir ici tous les différents messages que vous pouvez utiliser. Vous pouvez faire des fileuses. Vous pouvez y mettre des icônes. Vous avez des couleurs différentes, beaucoup d'options. Donc, pour l'installer, il suffit d'avoir un fil et réagir pour justifier ou installer NPM. Arrêtez donc votre serveur, installez-le, puis démarrez la sauvegarde de votre serveur. Dans ce que nous allons faire, c'est que nous allons l' afficher dans le même contexte ici, les contextes blockchain. Normalement, vous voudriez créer un nouveau contexte pour cela. Comme dans un contexte phi grille-pain. Configurez-le et utilisez-le simplement pour alerter les messages et les erreurs. Mais si je commence à le faire, nous allons obtenir une vidéo de plus d'une heure de configuration des messages d'erreur. On va donc le faire facilement ici. Mais si vous étiez dans un projet plus important et que vous vouliez y consacrer plus de temps, vous voudriez bien sûr utiliser un contexte distinct. Donc, si nous examinons notre documentation pour le témoignage de React, je vais cliquer sur la démo et la documentation. Et vous verrez ici, nous allons juste vérifier le positionnement du toast. En fait, passons à la suivante parce que ce n'est pas très utile. Mais ce que vous devez faire ici, c'est que vous devez placer ce conteneur de toast sur la page où vous souhaitez l'afficher. Ensuite, vous pouvez appeler la fonction toast. Vous pouvez donc le voir mieux ici. Alors, Toast dot succès, puis vous recevez votre notification, ce que vous voulez dire, puis vous choisissez votre position sur la page pour l'afficher. Vous pouvez porter un toast pour accéder à une erreur, un mandat et à des informations, ou à un toast personnalisé. Nous allons donc commencer par mettre ce récipient à pain grillé. En fait, c'est importé. Nous allons mettre cela sur la page des totaux actuels car nous avons les deux formulaires. Celui sur lequel nous créditons notre compte, celui sur lequel nous effectuons un paiement. Allez donc aux totaux actuels. Ensuite, en haut, vous souhaitez simplement mettre cette instruction d'importation, importer le conteneur toast. Ensuite, je vais prendre cet exemple. Et je vais faire défiler vers le bas, puis en bas. Voici donc mes totaux actuels fonctionnant en bas sous la boîte, sorte que je n'ai aucune sorte de style avec elle. Je vais juste mettre que la fermeture automatique du conteneur d'orteils est réglée sur huit secondes. Je vais le changer pour, on va faire 3 000 pendant trois secondes. Et puis nous avons plusieurs parents ici. Nous devons donc mettre une étiquette vide. Un en haut, un en bas. Mon bac à pain grillé est sur cette page. Ainsi, lorsqu'il est appelé, il devrait s'afficher sur cette page. Maintenant, je vais revenir aux contextes de la blockchain, et je vais l' appeler ici avec cet appel d'erreur de toast dot. Je reviens donc à l'erreur de positionnement et de toast dot. Je vais donc retirer ce message de journal de points de la console et remplacer par cette erreur de point toast, que vous trouverez encore une fois sur la partie de positionnement du toast de cette page. Ensuite, pour ma notification d'erreur, je vais mettre des données de points d'erreur, un message de points. Et je voulais entrer en haut à droite. Alors, gardons ça. Maintenant, il y a encore une chose à faire. Vous devez importer le CSS sinon il n'aura pas air correct ou ne fonctionnera même pas correctement. Il suffit donc de commencer l'installation. Et ils ne le mentionnent pas ici avec l'installation, mais vous le verrez importé ici. Donc, copiez ça. Et nous voulons l'importer sur la page des totaux actuels , car c'est là que nous affichons ce conteneur de toast. Alors, en haut, apportez-le, sauvegardez-le. Et essayons ça. Je vais donc rafraîchir la page juste parce que j'aime le faire. Maintenant, je vais mettre juste le numéro un et le soumettre. Et voyons si nous recevons un message de toast. Nous ne le faisons pas, car le toast n'est pas défini. Revenons donc à notre exemple et veillons à ce que nous prenions des toasts importés des réacteurs au feu. De retour dans le contexte de la blockchain air, placez cela au sommet. Toast importé. Nous pouvons retirer le récipient à pain grillé car nous ne l'utilisons pas ici. Nous utilisons simplement les orteils parce que nous appelons une erreur de toast. Alors sauvegardez-le et réessayez. Alors rafraîchissez-vous. Très bien, et je vais mettre le numéro un et soumettre, et vous devriez voir quelque chose apparaître en haut à droite. C'est là. L'exécution est rétablie. Vous n'avez rien à faire pour le moment. On dirait qu'il y a raccroché une seconde, mais il est censé disparaître dans trois secondes. Mais c'est génial. Donc quelqu'un arrive et soumet que cela lui fera savoir que vous n'avez rien à voir avec cette fois-ci. Ajoutons-en un à notre formulaire de crédit. Donc, Get du mettra la même chose là. Vous pouvez les personnaliser comme vous le souhaitez. Il y a un million de façons de le faire. Vous allez là-dessus. Où est-il dans les réacteurs défient Demo. Il y a comme toutes sortes de choses que vous pouvez regarder l'erreur d'avertissement de succès des informations. Mais oui, vous pouvez choisir celui que vous voulez voir. Puis cliquez sur Afficher le toast, et il vous montrera à quoi il ressemble. Différents thèmes. Voici le thème sombre et le thème des couleurs. C'est plutôt cool si vous utilisez, si vous utilisez des promesses, vous pouvez dire des promesses en attente, puis la promesse résolue. Beaucoup de choses géniales. Je vais donc saisir ça et l'ajouter au formulaire de crédit. Donc, le dépôt. Et je vais le sauvegarder, et en fait, ça ne sera pas une erreur. Je ne sais pas si nous avons quelque chose pour la tarte. Nous n'avons rien à déposer. Mais trouvons autre chose. Effectuez le paiement, obtenez un locataire , enregistrez, effectuons l' enregistrement et le départ car tous les deux ont besoin de relevés. Revenons en arrière. Je vais donc retirer ça du dépôt. Il se rendra à l'enregistrement et au départ et l'ajoutera là. Génial. Donc, si j'essaye d'enregistrer un vélo que je n'ai pas, je pense que j'obtiendrai une erreur. Permettez-moi de le confirmer. Enregistrez-vous. Veuillez d'abord jeter un coup d'œil à un vélo. Oui, voyons s'il y a quelque chose. Donc, je vais choisir de me laisser me rafraîchir juste à ma habitude et d'aller m'enregistrer. Et c'est là. Veuillez d'abord jeter un coup d'œil à un vélo. Génial. Nous avons donc des messages et n'hésitez pas à modifier que, quelle que soit la façon dont vous voulez le mettre d'un côté différent, ajouter des couleurs différentes, faire un thème sombre, peu importe. Je pense donc que les couvertures aériennes nécessitent des déclarations. Nous avons la caisse, nous devons enregistrer l'acquisition requise, nous devons effectuer le paiement. Et c'est tout. Donc c'est réagir pour justifier ont ajouté. Maintenant, la prochaine chose que nous voulons faire est d'ajouter des fonctionnalités de sécurité à Air Smart Contract. Donc théoriquement, si j'ai adresse de portefeuille public de quelqu'un d'autre et que je peux l'insérer dans certaines de ces fonctionnalités. Ensuite, je peux vérifier un vélo pour quelqu'un d'autre responsable, l'argent sur le compte de quelqu'un d'autre. Je peux faire des choses sur le compte d'autres personnes. Il n'y a aucun chèque pour dire que vous ne pouvez interagir qu' avec votre adresse. Et je ne pense pas en général ce soit sur le front end que vous puissiez le faire comme si je ne pense pas pouvoir venir ici et cliquer sur la caisse et ajouter l'adresse du portefeuille de quelqu'un d'autre. Mais vous voulez quand même mettre ces chèques là. Et je pense qu'il est bon d'y aller juste pour voir que si vous passez au contrat de la chaîne de vélos, permettez-moi de vous donner un exemple. Si je passe à la caisse et que je connais l'adresse du portefeuille de quelqu'un d'autre, je peux mettre son adresse et vérifier un vélo, puis laisser fonctionner pendant une semaine, puis l'enregistrer. Et puis ils ont eu cet équilibre énorme n'ont-ils pas participé à la course ? Nous voudrions donc simplement mettre un chèque indiquant que vous ne pouvez effectuer ces actions sur votre compte particulier. Et c'est vraiment facile à faire. Il suffit d'insérer un modificateur. Donc, juste sous Ajouter un locataire, je vais dire modificateur. Whoops. Je vais dire que le modificateur est locataire. Et puis je vais passer une adresse pendant que je suis à l'adresse. Ensuite, vous mettez ces crochets et vous dites que expéditeur de points de message est égal à l'adresse du portefeuille. Ce n'est pas vrai. Vous direz que vous ne pouvez gérer que votre compte. Juste en dessous, vous avez ce point-virgule de soulignement. Et ce que cela signifie, c'est continuer avec le reste de la fonction. Donc, comment cela fonctionne, c'est ici. Pour cette fonction de paiement, vous devez ajouter ici est locataire. Il s'agit d'un modificateur et vous devez passer le temps à l'adresse. Il s'agit d'une façon propre d' ajouter une instruction requiert répétable deux fonctions. Donc, lorsque cette fonction est exécutée, elle va d'abord vérifier, s' il s'agit d'un locataire, elle va transmettre cette adresse de portefeuille et elle va dire, est-ce que l'expéditeur du message, le personne qui passe cet appel, correspond à l'adresse du portefeuille, ce qui signifie qu'elle ne peut modifier que son propre compte. Ainsi, lorsque vous créez un modificateur, il suffit de le coller sur la fonction. Et je vais vous montrer comment cela fonctionne dans une minute quand nous le lancerons en remix. Mais nous devons ajouter cela à tout ce que nous ajoutons également à une adresse de portefeuille. Je vais donc le poser ici à l'enregistrement. Vous ne pouvez enregistrer un vélo qu'avec votre adresse. Le loyer ou la période de temps de personne d'autre n'est interne. Nous n'avons pas à nous inquiéter à ce sujet. Obtenez la durée totale. Vous voulez uniquement obtenir votre propre durée. Et comme celui-ci retourne quelque chose, nous allons mettre cela juste après le public. Et puis celui-ci retourne également quelque chose et il est public. Mais c'est le solde du contrat. Nous voulons seulement que le propriétaire le fasse et nous allons nous en occuper ensuite. Mais obtenez le solde des locataires, vous ne pouvez obtenir que votre propre solde. Placez cela après le montant dû fixé par le public. C'est interne, pas de problème. Appelez-le en dehors du contrat, vous pouvez louer un vélo, le mettre là, déposer un dépôt. Vous ne pouvez effectuer un dépôt que via votre propre adresse, même si les gens souhaitent que vous fassiez un dépôt dans la leur. Effectuer un paiement. Touchez ça à la fin. Allez, mettez-le là. Obtenez un locataire. Vous ne pouvez obtenir que vos propres informations. Et le locataire existe, mettez-le là aussi. Donc tout cela se refait, au lieu de mettre une instruction requiert plusieurs reprises dans chacun d'entre eux, nous mettons simplement ce modificateur dans cette instruction de fonction ici . avant les bretelles bouclées, nous ajoutons simplement ce modificateur. Vous modifiez la fonction pour répondre à ces exigences. Très bien, donc c'est le modificateur du locataire. Maintenant, nous avons deux autres choses et nous allons tout faire. Tout d'abord, nous devons corriger un bug. Deuxièmement, nous devons parler du propriétaire. Le propriétaire devrait être en mesure de voir combien d'argent est réellement le sien. Et ils devraient pouvoir retirer les gains qu'ils ont réalisés grâce à ces transactions. Donc, corrigeons d'abord le bug. Maintenant, vous vous souvenez que nous avons parlé la logistique derrière le contrat intelligent. Si quelqu'un dépose de l'argent, il passe au contrat intelligent, mais il crédite son compte. Donc, si quelqu'un met 10$ là-dedans, la seule personne qui y a mis de l'argent, il y a 10$. Il y a 10$ dans le contrat intelligent, mais tous les dix sont crédités sur leur compte. Maintenant, ils dépensent 5$ pour un vélo et effectuent un paiement, puis il y a encore 10$ sur le contrat, mais seulement cinq d'entre eux sont crédités. Eh bien, nous avons commis une erreur en effectuant le paiement. Lorsque nous effectuons un paiement, nous ne faisons que soustraire ce montant du solde. Nous n'envoyons pas réellement d'argent au contrat. Nous sommes simplement en train de le soustraire du solde de l'argent qui reste est l'argent du propriétaire. Nous ne pouvons donc pas payer ici et nous ne pouvons pas utiliser la valeur du point de message. En fait, dans le contexte de la blockchain, lorsque nous effectuons un paiement, nous envoyons de l'argent, cette valeur BNB. C'est donc une erreur. Nous ne devrions pas faire cela. Nous devrions simplement soustraire du crédit. Dans le contrat intelligent, il y a quelques ajustements que nous devons apporter. Tout d'abord, prenez à payer parce qu'il n'y a plus de fonction payable. Deuxièmement, mettons une seconde, mettons un U et un montant. Nous allons donc envoyer un montant. Lorsque nous effectuons un paiement, nous devons envoyer un montant qui sera effectivement déduit de notre solde. Nous avons donc un montant ici. Ensuite, nous allons modifier la valeur du point de message en montant parce que nous n'envoyons pas réellement d'argent, nous déduisons simplement de notre solde. Et ça devrait être tout. Donc, lorsque nous lançons le paiement, nous allons tester cela dans une minute. Nous allons envoyer un montant et ce montant sera déduit de notre solde. Ensuite, comme nous avons supprimé le facteur payable en ajoutant un paramètre de montant uint8, nous devons mettre à jour notre fonction de contexte blockchain ici et effectuer le paiement. Nous transmettons cet objet de valeur, c'est ainsi que vous gérez une fonction payable. C'est ainsi que nous transmettons un montant à une fonction payable. La seule différence étant donné que nous introduisons le montant maintenant sous forme d'uint8 et non de ce montant payable, nous devons simplement remplacer cet objet par la valeur B&B comme deuxième paramètre ou deuxième argument. Assurez-vous donc de le mettre à jour dans le contexte de la blockchain, puis de revenir à votre contrat. Maintenant que la ségue est parfaitement dans le propriétaire. Le propriétaire, si quelqu'un a 10$ et qu'il paie 5$ sur son compte, il reste 5$ dans les cinq autres, appartient réellement au propriétaire. Nous devons donc permettre au propriétaire du contrat qui va essentiellement gérer le magasin de vélos de vérifier son solde. Quel est le montant de leurs profits ? Combien, tout l' argent du contrat intelligent, combien de cela est osé, basé sur les gens qui accumulent des factures, effectuent des paiements et recréent leur compte et tout cela. Il y a donc plusieurs façons de le faire. J'y ai pensé. Nous utilisons donc des mappages. Vous ne pouvez pas parcourir un mappage en boucle. J'ai pensé à peut-être quand nous ajouterons un locataire pour créer un tableau et avoir juste un tableau d'adresses que nous pouvons parcourir en boucle. Mais nous ne voulons vraiment pas parcourir les choses parce que nous pourrions finir par avoir des centaines, peut-être des milliers de locataires et ce sera des frais d'essence monstrueux. Si nous arrivons à parcourir 11000 locataires, je pense que la meilleure façon d'y remédier est de créer une nouvelle variable appelée uint8, solde du propriétaire. Nous avons donc l'équilibre des propriétaires. Et si vous y réfléchissez, la seule fois que l'argent ira dans le solde du propriétaire, c'est quand les gens effectuent des paiements. Encore une fois, si j'ai 10$ sur le contrat intelligent et que tous les dix sont à moi et que je fais un paiement de 5$ , mon solde descend à cinq et les cinq autres appartiennent au propriétaire. C'est donc vraiment le seul moment où nous devons ajouter au solde du propriétaire. Ici, là où nous effectuons le paiement, nous allons juste ajouter une autre chose nous allons juste ajouter une autre chose à cela. Ce sera le cas. Le solde du propriétaire plus est égal à un montant. Cela va donc être crédité sur ce solde de propriétaire. Et ensuite, là où nous avons l'équilibre, nous voulons que cela soit appelé par le propriétaire. Créons donc un autre modificateur, modificateur, seul propriétaire. Et nous n'avons pas de paramètres ici. Et nous pouvons exiger que l'expéditeur de points de message soit égal au propriétaire. Parce que c'est une adresse portefeuille. Et vous n'avez pas le droit d'accéder à cet accès. Ensuite, nous allons faire notre point-virgule de soulignement pour exécuter le reste de la fonction. Et nous n'utiliserons que le propriétaire sur la balance de l'air ici même sur le propriétaire. Si nous voulons ajouter deux autres fonctions liées au propriétaire, une pour obtenir sa fonction équilibrée ou sa fonction d'équilibre, obtenez le solde du propriétaire. Et nous allons voir public et le rendre uniquement propriétaire et renvoyer un uint8. Et ici, nous allons juste restituer le solde du propriétaire. Ensuite, nous voulons faire une autre fonction pour le propriétaire retire l'argent. Maintenant, vous pourriez être comme, Mec, c'est risqué parce que le propriétaire peut juste arracher l'argent de tout le monde et courir avec lui. Mais ce n'est pas vrai parce que le solde du propriétaire est uniquement l'argent du compte qui n'est pas crédité aux personnes. Alors, fonctionnons. Retrait, solde du propriétaire. Cela va être payable et public. Et nous allons dire transfert de points du propriétaire, solde du propriétaire. Vous voyez maintenant que nous avons cette erreur ici. Et il est indiqué que l'envoi et le transfert ne sont disponibles que pour les objets de type adresse payable et non adresse. Maintenant, nous pouvons résoudre ce problème en jetant simplement ce propriétaire S à payer. Enfin, nous devons remettre le solde du propriétaire à 0 car nous transférons ce solde du propriétaire, qui est configuré en haut. Vous êtes allé à l'équilibre du propriétaire. Nous transférons ce montant vers notre portefeuille. Nous devons maintenant ramener cette valeur à 0. Le solde du propriétaire est donc égal à 0. Et avec ça, je pense que c'est fini. Alors, sélectionnez tout cela et copiez-le et nous allons le coller dans le remix afin que nous puissions le tester. Je vais le coller ici et le compiler. Et ensuite, agrandissez ça. Très bien, nous allons donc déployer le contrat. Et je vais, je vais me déployer en utilisant le premier compte qui sera le propriétaire. Cliquez donc sur Déployer. Ensuite, ajoutons un locataire. Je vais donc choisir la deuxième personne. Copiez et placez-le dans l'adresse de ce portefeuille. Vous voulez passer le test Travis ? La location peut être vraie. Les activistes sont faux. Zéros, zéros, zéros 0. Nous allons donc cliquer sur Ajouter un locataire. Et je vais aller voir un vélo pour ce locataire. Le vélo est vérifié. Et maintenant, je vais passer au troisième compte. Ce sera donc le deuxième locataire qui va copier ça. Collez-le ici. Et je vais mettre quelque chose comme Tracy. Et je vais aller voir un vélo. Je dois d'abord les ajouter. Assurez-vous donc d' avoir la bonne adresse pour cette tierce personne et ajoutez le locataire. Et puis je vais vérifier un vélo pour ce locataire. Génial. Nous avons donc des horodatages, pourrons le vérifier ici dans une minute. Mais allons-y pendant que nous sommes ici et déposons de l'argent. Je vais donc choisir un éther et je choisirai le deuxième locataire. Et ils vont déposer un éther dans le contrat intelligent. Alors, là où il est dit dépôt, assurez-vous qu'il s'agit d'un éther, puis cliquez sur dépôt. Génial. Ils ont donc déposé un éther. Si je vérifie ce locataire ici, vous verrez qu' il a une heure de départ, donc les vélos sont partis et ils ont un solde. Maintenant, que se passe-t-il si j'essaie de passer au troisième locataire ici ? Et faites un dépôt à l'aide de la première adresse du locataire, je devrais recevoir une erreur. Cliquez donc sur Dépôt. On y va. Vous pouvez uniquement gérer votre compte. Donc, c'est que le modificateur de locataire fonctionne. C'est génial. Et c'est le cas d'utilisation. Donc, si je dépose de l'argent, mais je le fais à partir d'un autre portefeuille que le mien sur le compte de quelqu'un d'autre. Cela ne devrait pas être autorisé. Cela fonctionne. Passons donc à la bonne personne. Prenons donc l' adresse de cette personne et déposons également un éther. Je vais donc cliquer sur le dépôt. Et je n'ai pas changé d'adresse, alors assurez-vous de changer l'adresse. Cliquez donc sur Dépôt. D'accord. Nous devons donc prendre deux vélos en location chacun. locataire a déposé de l'argent. Donc, dans quelques minutes, je reviendrai et nous allons vérifier la moto et nous finirons les choses. Très bien, donc avant de vérifier ces back-end, passons au propriétaire. Et en fait, avant de revenir à nouveau, vérifions les octets, essayons d'obtenir le solde du contrat avec l' un des locataires. Cliquez donc sur Balance of et vous obtenez une erreur. Vous n'êtes pas autorisé à y accéder. Obtenez le solde du propriétaire. Vous n'êtes pas autorisé à y accéder. Passons maintenant au propriétaire et voyons ce que c'est. Si nous obtenons le solde de nous, nous avons un éther que je pensais en avoir déposé un autre. Voyons nos locataires et voyons. Le premier locataire a gagné. Le deuxième locataire n'en a pas, donc je ne dois pas avoir cliqué sur le dépôt pour l'autre Entrée. Laissez-moi le faire très rapidement. Ou peut-être que je n'ai rien déposé et peut-être que je n'ai pas choisi le huitième. Mettons-le dans l' autre locataire se terminant en dB. Assurez-vous de choisir ce locataire. Ensuite, placez cet éther sur un et cliquez sur le dépôt. Un Alpha revient au propriétaire. Je peux vérifier le solde de ça pour Eve. Permettez-moi de mettre ça ici pour garder la trace. Le contrat doit partir. Le solde du propriétaire est de 0. Le propriétaire a 0. loyer ou un a, a, a un éther en orange sont deux, a un éther aussi. Ok, donc c'est là que nous en sommes et nous allons tester ça. Revoyons ces vélos. Je vais donc choisir ce premier rendu. Je vais les vérifier à nouveau. Enregistrez-vous. Et ce locataire a maintenant une Rosée de montagne. Ensuite, je vais vérifier l'autre rendu. Enregistrez-les. Et ensuite, ils devraient avoir le même montant. Fais génial. Dans un GAN ou une balance. Encore une fois, permettez-moi de retourner voir le propriétaire. Le solde doit être le même et le solde du propriétaire doit toujours être égal à 0. Voyons donc ce qui se passe lorsque nous effectuons un paiement. Nous effectuons un paiement que le solde du contrat intelligent ne devrait pas changer. Il devrait simplement échanger les mains sur l'équilibre du propriétaire. Donc ce locataire ici, loue ou deux O, autant de cinq à autant de zéros. Nous allons donc copier cela et faire ce paiement. Je vais donc prendre ce montant. Ils ont cinq quoi qu'il en soit, peu importe le nombre de zéros, nous n'avons pas besoin de venir ici et d'ajouter ce montant jusqu'ici. Parce que maintenant, dans la fonction de paiement nous avons accepté comme deuxième argument. Je vais dire ça et le premier argument a été leur adresse de portefeuille. Allons de l'avant et effectuons le paiement. Effectuez donc le paiement et je ne peux gérer que mon compte. Permettez-moi donc de passer au bon compte. On y va. Je vais aller de l'avant et faire le paiement. Et vous voyez maintenant que lorsque je clique sur les locataires, ils n'ont rien à faire. Mais ils ont eu ces cinq plusieurs zéros déduits de leur solde. Maintenant ce montant, ces cinq, mais beaucoup devraient maintenant faire partie du solde du propriétaire. Permettez-moi donc de revenir au propriétaire. En fait, laissez-moi apporter ces changements ici. Donc, le solde maintenant à louer ou un est de 995. Ils en ont eu cinq déduits. Et si je passe au propriétaire maintenant, je devrais avoir ce montant en ma possession. Je suis donc passé au propriétaire. Je vais cliquer sur balance de et c'est pareil, rien n'a changé. C'est ce que nous avons corrigé parce qu'avant d'ajouter au solde et de déduire du compte Eric, ce qui est faux. L'équilibre est donc toujours le même. Obtenez le solde du propriétaire, cliquons et il y a ce montant. Donc maintenant, le propriétaire en a autant. Et si vous ajoutez cela avec un loyer ou un seul, nous revenons à celui-ci à autant de zéros, donc nous savons que cela fonctionne, tout fonctionne très bien. Et je pense que c'est tout. Nous testons qu'il s'agit d'un locataire. Nous avons testé uniquement les contrats de propriétaire et de DSE fonctionnant correctement. Maintenant, tout ce que nous avons à faire c'est qu'ils ont changé de contrat intelligent, nous devons réellement le redéployer. Faisons donc ça pour obtenir un nouveau contrat. C'est très simple. Il suffit de revenir à votre application, d'arrêter votre serveur, de sortir de votre dossier client dans votre dossier de contrat. Avant de redéployer, nous devons en fait compiler ce nouveau contrat. Et en fait, permettez-moi de le copier à partir d' ici pour m'assurer que j' ai les dernières modifications. Alors copiez cela dans mon contrat, enregistrez-le et nous devons le recompiler, actualiser ce dossier d' artefacts avec nouveaux ABI de bytecode, toutes ces bonnes choses. Alors, faites juste NP x, hardhat, compilez. Awesome a compilé un fichier Solidity avec succès. Maintenant, allez dans votre dossier d'artefacts, contractez par chaîne dots soul et choisissez la chaîne de vélo point json. La première chose que nous voulons faire est de récupérer tout cet ABI à partir du crochet deux, copiez-le et collez-le dans notre json config dot dans notre dossier client. Prenez tout ça, et collez ça. Ensuite, nous devons mettre à jour l'adresse du contrat. Nous devons donc d'abord le déployer. C'est donc NP x hardhat exécuté , puis les scripts slash exemple script.js. Ensuite, pour votre réseau, choisissez le réseau de test à redéployer. Cliquez donc sur Entrée. Lorsque nous le faisons, nous avons un tout nouveau contrat. Dans une toute nouvelle application. Essentiellement. Il y a là une chaîne de vélos déployée à cette adresse. Copiez-le et collez-le dans votre adresse de contrat. Gardez-le et c'est bon. Donc cd dot dot cd client et ensuite yarn run dev et nous devrions avoir une nouvelle application. Je vais aller sur localhost 3 000 et je vais en déconnecter mon portefeuille pour prendre un nouveau départ, déconnecter ce compte et actualiser la page. Choisissez mon vélo et il est dit : Bienvenue, veuillez entrer votre prénom et votre nom de famille. Laissez-moi d'abord connecter mon portefeuille. Connectez-vous. Très bien. Entrez mon nom pour vous inscrire en tant que locataire. Test Travis. Soumettre. Déployez-le. Génial. Créditons le compte avec le 0.1 B&B. C'est là. 0,1 juste pour les coups de pied. Essayons d'enregistrer un vélo que nous n'avons jamais vérifié et nous recevons cet avertissement ici. Veuillez d' abord jeter un coup d'œil à un vélo. Cela fonctionne toujours. Voyons maintenant un vélo et confirmons. Et une fois que c'est fait, nous devrions devenir verts ici parce que leurs vélos sont sortis. Encore en attente. C'est là. Nous sommes verts. Il semble donc que notre application fonctionne très bien. Notre tableau de bord est en ordre. Nous avons maintenant des chèques pour que les utilisateurs ne puissent modifier que leurs propres comptes. Et nous avons des messages qui apparaissent pour afficher les erreurs que nous obtenons des instructions requiert. Et c'est tout ce que j'ai pour vous. J'espère que ce cours vous a beaucoup plu. Si vous cherchez d'autres choses à faire ici, une chose qui serait amusante est de placer un élément de navigation ici, comme un élément de menu qui dit admin, qui apparaît si le propriétaire se connecte. Comme si j'ai pensé à faire ça, mais je ne veux pas que le cap continue et continue. Vous avez déjà parcouru un long chemin. Mais si disons que depuis que je suis le propriétaire, je déploie cette adresse de contrat, je suis le propriétaire. Et nous avons déjà les fonctions en place dans le cadre d'un contrat intelligent. Vous pouvez donc mettre un ou vous voudrez peut-être ajouter une fonction appelée propriétaire. Et ensuite, vous pouvez vérifier comme si cette personne était le propriétaire. Si c'est le cas, placez un élément de menu d'administration ici et lorsque vous cliquez dessus, il y aura deux formulaires. L'un où vous pouvez cliquer et vérifier votre solde, l' autre où vous pouvez retirer le solde et vous devriez savoir 100 % comment le faire parce que avons fait ici et nous l'avons fait ici. Et dans le contrat intelligent déjà en place, nous avons déjà construit la fonction. Nous venons de rafraîchir le contrat et redéployer, donc il est là. C'est donc mon défi pour vous. Ce sera très amusant de faire le suivi. Mais à ce stade, nous avons une application entièrement fonctionnelle. Nous avons fait beaucoup de travail. Vous devriez vous féliciter. N'hésitez pas à le modifier pour le rendre plus propre. Ajoutez-y d'autres fonctionnalités , de meilleurs CSS, peu importe ce que vous voulez faire, poussez-le sur GitHub et montrez-le au monde entier. Une fois encore. Merci d'avoir choisi ce cours et suivre avec moi pendant que j'ai assemblé ce truc. Si cela vous a plu, pensez laisser un avis ou à me faire un message, me disant si vous l'avez aimé ou si vous avez quelque chose, vous aimeriez voir mieux faire à l'avenir. J'aimerais bien l'entendre. Encore une fois, merci d'avoir suivi ce cours avec moi. Maintenant, parle-toi plus tard. 10. Fonctionnalités de bonus du propriétaire: Voici donc un projet bonus pour vous. Ce que nous allons faire, c'est créer un tableau de bord pour le propriétaire. Le propriétaire serait en mesure de voir le solde du contrat, son solde, le solde du propriétaire et serait en mesure de retirer le solde du propriétaire. Donc, ça ressemble à ça. Je suis connecté en tant que propriétaire. Et si je vais à Dash Admin, je vais obtenir une page indiquant que l'accès est refusé. Donc, ce que vous voulez faire, c'est créer un itinéraire appelé slash admin. Et si vous n'êtes pas le propriétaire, l'accès est refusé. Maintenant, si vous êtes le propriétaire, laissez-moi déconnecter ça. Et je vais connecter le compte propriétaire. Vous devriez maintenant voir un tableau de bord. Cette page ressemble donc au tableau de bord que nous avons ici. Il y a un titre, il y a des cartes statistiques, puis il y a un formulaire. C'est donc la même chose ici. Donc, si je retourne à l'administrateur, j'ai un titre, il y a des cartes statistiques et puis j'ai un formulaire sans champs de texte n'est qu'un bouton. Et ce que nous allons faire ici, c'est que nous aurons le solde du propriétaire, aurons le solde total du contrat. Et puis, lorsque nous nous retirons, retirez le solde du propriétaire sur notre portefeuille. Et comme le solde du propriétaire fait partie de l'ensemble du solde du contrat, nous devrions voir ce changement à 0,18. Essayons donc ça. C'est donc le traitement. Très bien, j'ai donc retiré mon B&B de 0,01 dans mon solde contractuel est maintenant de 0,18. C'est donc votre défi. Si vous êtes un peu épuisé par rapport au projet, vous y avez travaillé dur et que vous fini et que vous ne voulez même faire face, ne vous inquiétez pas. C'est un bonus. Mais je pense que c'est important si vous le pouvez, faire parce qu' un propriétaire doit être payé, n'est-ce pas ? Il génère des revenus grâce à ces locations de vélos. Il doit être en mesure d'être payé pour ça. Deuxièmement, c'est une excellente occasion pour vous de prendre tout ce que vous avez appris dans ce cours et de faire quelque chose sans aucune aide. Prenez donc toutes les compétences que vous avez apprises et essayez de le faire vous-même. Maintenant, en dessous de cette vidéo, j'ai mis quelques étapes pour vous aider. Comme quelques mesures que vous devriez prendre pour y parvenir. Et enfin, j'ai posté un lien vers la branche sur GitHub avec ces modifications de code que vous pouvez consulter, mais ne regardez pas cela tant que vous n'avez pas fini. Essayez de tenter cela. De toute façon. Je pense que vous allez trouver ça très amusant. Alors, faites-le.