Construire une application de gestion de bibliothèque décentralisée avec Solidity

1. INTRODUCTION DU COURS: blockchain est la force motrice de la prochaine génération, également appelée arbre de verbes. La blockchain réinvente la façon dont les données sont stockées et gérées. L'arborescence Web englobe la décentralisation et est en cours de construction et de propriété par ses utilisateurs. Comme c'est le cas dans de nombreuses nouvelles opportunités pour les développeurs comme nous dans cette dominante. Dans ce cours, nous allons apprendre à créer une application complète de gestion des célébrités décentralisée à partir de zéro, nous utiliserons la solidarité pour le paradigme de développement de contrats intelligents pour test et déploiement a eu soif de communiquer avec le contrat, MetaMask pour signer la transaction, React JS pour le financement et alchimie est que la blockchain les fournira. À la fin du cours, vous comprendrez les concepts nécessaires pour postuler pour qu'ils placent un emploi ou même construire votre propre application sur la blockchain araméen sans perdre plus de temps. Inscrivez-vous maintenant et commençons. 2. Créez un nouveau projet de chapeau: Bonjour, bienvenue dans la toute première vidéo du cours, où nous allons apprendre à créer une application décentralisée de gestion de bibliothèque. Je ne perdrai donc pas votre temps à expliquer ce qu'est le Web trois, ce qu'est la décentralisation et tout. Si vous le souhaitez, vous pouvez Google par vous-même. Je vais simplement accéder de façon statique au programme du cours ou à la feuille de route du cours. Le cours est donc divisé en étapes D7. La première étape consistera à mettre en place l' environnement de développement. Ensuite, nous créerons un contrat intelligent. Ensuite, nous écrirons un test unitaire. Ensuite, nous déploierons un contrat intelligent. Après tout, les tests sont couronnés de succès. Ensuite, nous utiliserons un framework React connu sous le nom deux prochaines années pour construire un front-end. Ensuite, nous utiliserons des chaises Ethers sur le front-end pour interagir avec le contrat intelligent. Et enfin, nous allons tester l'ensemble de l'application si tout fonctionne bien ou non. Avant d'aller de l'avant, je voudrais juste m' assurer que vous avez installé Matter mask et que vous avez testé des intérêts universitaires dans votre compte. Je ne vais pas m' arranger avec, encore une fois. Veuillez regarder n'importe quel didacticiel et continuer le cours. Il n'y aura guère cinq minutes, c'est tout. Avant de travailler sur l'application, vous devez au moins connaître cette pile technologique. Donc, évidemment, nous utilisons une blockchain en titane. Et la solidité est ce langage de programmation pour rédiger des contrats intelligents. Ensuite, nous utiliserons le casque dur comme outil de déploiement. Puis porte-monnaie MetaMask. Alchimie est alors un fournisseur de nœuds cachés. Il vous indique qu'il s'agit d'un laboratoire pour communiquer avec le contrat intelligent, puis HTML, CSS et enfin React JS, ou vous pouvez dire Next JS. C'est ça. Commençons par l'environnement de développement. Commencez par créer un dossier. Le nom est la gestion des bibliothèques. Si vous voulez, vous pouvez le nommer n'importe quoi, puis y ajouter un terminal. Et pour installer Hearted, vous devez d'abord créer un package NPM en exécutant la commande et la machine virtuelle qui s'y trouve. Pourquoi ? Il initialisera un package NPM vide. C'est ça. Vous pouvez donc voir que ce fichier package.json est là. Ensuite, faire du style hardhead. Cette commande est NPM. Installez, tiret, tiret, enregistrez, tabutez, casquette et appuyez sur Entrée. D'accord. Les paquets de tête rigide sont la dépendance la plus difficile qui est installée. Pour ne pas créer un projet de casque dur, nous utiliserons cette commande, qui nous donnera une structure minimale, c' est-à-dire le casque NP. Appuyez ensuite sur Entrée. Sélectionnez ensuite le premier qui crée un exemple de projet B6 et appuyez à nouveau sur Entrée, puis à nouveau, Entrée, puis Entrée. C'est ça. Maintenant, peu de dossiers et de fichiers sont créés. L'exemple de projet vous demandera d' installer la tête dure par un truc plus dur, les terroristes et peu d'autres dépendances qui rendent la tête dure compatible avec le test échoueront et il a la célébrité à copier simplement cette ligne et collez-la et appuyez sur Entrée. Il téléchargera toutes les dépendances requises pour le projet. D'accord. Laissez les dépendances que j'ai installées avec succès. Il suffit maintenant d'ajouter VS Code Editor et d'y ajouter le dossier de votre projet. Ce sont les fiches factices que la tête dure nous fournit. Dans la vidéo suivante, nous inclurons les touches d'alchimie et de masque Meta dans le déploiement de la configuration Hardhead. Merci. 3. Les touches de l'alchemy et du Metamask: Bonjour. Un casque de sécurité nous donne donc peu de dossiers et de fichiers. Nous comprendrons tous ces éléments étape par étape. Mais d'abord, passons au fichier de conflit dur Dot js. Et assurez-vous que nous dirigeons notre réseau pour qu'il soit corrélé le réseau de test de l'itanium. Et pour que cela fonctionne, nous avons besoin d'une URL de nœud itanium précoce et d'une adresse de portefeuille. Vr utilisant bouclé et non voler Stone ou tout autre car dans Alchemy, ces réseaux sont dépréciés. Donc, le meilleur choix ne serait pas d'utiliser le réseau caudally. Comme j'ai déjà un compte dans Alchemy, je ne vais pas créer de nouveau compte, mais je vais simplement aller sur alchemy.com. Et je clique sur Connexion. Vous devez vous inscrire vous-même. C'est très simple. Il suffit de connecter votre compte Google et tout. Rien de fantaisiste. Et ensuite, après avoir créé un nouveau compte dans Alchimie, vous serez redirigé vers cet écran de tableau de bord. Ici, cliquez simplement sur le bouton Créer une application. Et maintenant, remplissons ces informations. Le nom de mon application sera Library Management, onglet. Alors la chaîne sera ennuyeuse, mais le réseau sera pieux. Et comme je l'ai dit, c'est déprécié, déprécié. Il est donc préférable d'utiliser simplement froidement le réseau , puis de cliquer sur Créer une application. Vous avez donc créé avec succès une application dans Alchemy. Maintenant, l'étape suivante consiste à obtenir la clé privée de MetaMask. Vous pouvez installer Meta mask en vous rendant sur la mascotte Madame sur votre site Web et en installant l' extension pour votre navigateur. Comme je l'ai déjà fait, vous pouvez simplement mettre en pause la vidéo et regarder la configuration d' un nouveau portefeuille et comment obtenir des mangeurs de test sur votre compte. Parce que pour que ça marche, faut faire un test. Un test comme celui-ci. C'est mon portefeuille. Et il suffit de vous connecter. Alors, vous pouvez voir que j'ai tout ce qu'il y a à faire. Mangez-vous et assurez-vous que vous êtes idiot. Vous sélectionnez le réseau oralement à partir des options. Ensuite, pour obtenir la clé privée, vous devez cliquer sur les détails du compte, exporter la clé privée et saisir votre mot de passe. C'est ça. Ensuite, vous obtiendrez votre clé privée. Et ceci, ce 0 x a d, c'est votre clé publique, ce qui n'est pas nécessaire pour le moment, mais au moins vous devriez savoir. Maintenant, vous devez installer quelques dépendances pour écrire ces clés. Parce que nous allons écrire l'URL d'alchimie et la clé privée MetaMask dans notre configuration de tête rigide. Et pour cela, nous allons installer et utiliser la dépendance appelée dot ENV car il n'est pas recommandé de transmettre ces informations sensibles directement dans notre code. Il suffit donc d'ajouter votre terminal et d'écrire npm install dot ENV. Mais aussi je suis en train d'installer Penn Zeplin ajoute un avion est dit bibliothèque de contrats modulaires, réutilisables et intelligents retournant solides. Il s'agit donc simplement d'un code pré-écrit que vous pouvez utiliser directement. Rien d'autre. Je vais juste écrire npm installer un accord direct Zeplin slash contrats, puis espace D, O, D E et V dot ENV. Il s'agit d'une autre dépendance. Cela signifie qu'il existe deux dépendances. Ensuite, nous allons simplement appuyer sur Entrée. C'est donc fait. Maintenant. Utilisez d'abord ce point ENV. Je vais créer un nouveau fichier dans le répertoire racine sous le nom point ENV. C'est comme ça. Vous pouvez voir qu'il se trouve dans le répertoire racine. Et puis, ici, je vais créer un très bien. Ou vous pouvez dire quelque chose qui va stocker la valeur. Alchemy URL est égal à ceci, et let g est égal à cela. N'oubliez pas qu'il n'y a rien qui soit directement une mine de charbon. Je suis en train de l'écrire. Maintenant, pour obtenir l'URL de l'alchimie, accédez simplement à votre application et cliquez sur la touche Afficher. Ensuite, vous verrez ce cookie HTTP simplement copié et collé dans votre URL d' alchimie comme celle-ci. Et puis pour obtenir la clé privée du portefeuille , ajoutez le masque de méthode. Ensuite, ici les détails du compte, exportez la clé privée et le mot de passe valide Dario et confirmez. Copiez cette clé et collez-la ici dans la clé privée violette. C'est ça. Enregistrez-le et fermez-le. Maintenant, nous voulons ces clés dans notre configuration de tête rigide. Pour cela, j'ai ouvert un fichier de configuration à tête dure. Et à l'intérieur des modules ou de l'exportation, n'est-ce pas ? Des réseaux, puis des accolades bouclées. Puis à l'intérieur, comme le nom du réseau, j'utilise girly. Puis encore des accolades bouclées. Ensuite, une propriété est URL, que nous utilisons ces données de fichier ENV point. Nous devons écrire l'URL d'alchimie ENV de processus. Et pour que cela fonctionne tout en haut, nous avons le premier besoin du paquet dot ENV. C'est la configuration point ENV comme celle-ci. De cette façon, nous pouvons accéder au fichier dot ENV. Ensuite, l'URL est fournie. Et le deuxième paramètre, nous devons envoyer ces comptes. C'est dans la NA, nous devons simplement écrire un point ENV, portefeuille à points, une clé privée. C'est ça. C'est tout pour la fertigation de la boîte à tête dure. Maintenant, notre projet pointe vers le réseau de bureaux de corrélation d'alchimie. Dans la prochaine vidéo, nous travaillerons à la création du contrat. Merci. 4. Créer un contrat de bibliothèque: Il est donc temps de travailler sur notre contrat intelligent. Créez un nouveau fichier dans le dossier Contracts et nommez-le Library dot soul. Ensuite, la première chose que nous devons faire n'importe quel contrat est la licence Delta et le détournement d' DVR solide et solide en utilisant le bon contrat et le nom du contrat. Nous allons donner le contrat nommé bibliothèque. Maintenant, je suis Wesley Library , j'ai des livres. La première chose que nous allons faire est donc de créer une structure de livre. C'est-à-dire qu'un livre aura quelques idées, nom comme ça. Il suffit d'écrire un livre. Ensuite. Il aura une pièce d'identité. Ensuite, le nom du livre. Alors oui, publiez. Alors, qui est l'Arthur ? Et enfin, que nous ayons fini de lire ce livre ou non, comme ça, parce que le concept sera que nous aurons notre propre bibliothèque où nous pourrons écrire. Ce livre est laissé à lire. J'ai déjà lu ce livre comme celui-ci. La structure est donc prête. Maintenant, je vais créer une variable de listes de livres, qui sera de type liste de livres. C'est-à-dire qu'il conservera la structure du livre. Ce sera privé et je vais juste le nommer chanteur. Ensuite, nous allons mapper cet ID de livre à l'adresse du portefeuille de l'utilisateur qui ajoute ce livre. Pour que plus tard, nous puissions directement récupérer ce que les utilisateurs réservent sans aucun problème. Je vais donc simplement écrire un mappage. Ensuite, vous terminez à 56 sera mappé à l'adresse, et il sera simplement réservé au propriétaire. Encore une fois, je dis qu' il s'agit d'un mappage de ID du livre avec l' adresse du portefeuille du propriétaire. C'est ça. Ensuite, la première fonction que nous allons créer est d'ajouter un livre. Il suffit donc d'ajouter du volume. Cette fonction sera alors une fonction externe. Il se souviendra de l'extérieur. Et il acceptera peu de valeurs comme le nom mammaire de chaîne vous dans 16 ans. Puis l'artère mammaire de corde. Puis un booléen de fini. Ces choses qu'il acceptera. Maintenant, pour ajouter un livre, nous devons avoir un numéro d'identification et il doit être unique. Le service n'utilisera tout simplement aucune dépendance externe pour le moment. Je vais juste donner à la pièce d'identité la longueur de nos livrets. C'est celui-là. Comme évidemment, après avoir ajouté un livre, il va continuer à s'incrémenter. Donc, ce sera toujours unique. Il suppose que la première chose, nous commencerons à 0, alors c'est que l'ID du livre sera 0, puis un, puis deux comme ça. Ensuite, dans la liste des livres, nous allons pousser la valeur de la structure. C'est-à-dire que le livre de structure va le pousser. Et la première chose qu'il faudra, c'est la carte d'identité. Alors nommez-le ici. Puis j'ai fini comme ça. Nous allons donc le pousser dedans. Ainsi, automatiquement la longueur passera de 0 à un. Ensuite, dans la cartographie aussi, je vais faire la cartographie du livre. identifiant appartient à l' expéditeur du message comme celui-ci. Ce livre appartient donc à celui qui appelle cette fonction. Et à la fin, j'aimerais émettre un événement. L'événement sera ajouté à un livre. Tout simplement. Il demandera le destinataire, le destinataire et le numéro de livre. Cela sera donc simplement connecté à cette blockchain. Tout ce que nous pouvons lire à l'extérieur est de l'information. Il suffit de le voir comme une fonction de connexion. Ajouter un événement de livre. Le destinataire sera expéditeur du message et le numéro de livre sera le numéro d'identification du livre. J'espère donc que vous avez compris qu'il s'agit d'un code très basique. Si vous venez d'un autre langage de programmation, vous comprendrez le concept. De toute évidence, ces choses sont nouvelles. Si vous avez encore des doutes, vous pouvez en savoir plus sur la cartographie et les événements. Et dans la vidéo suivante, nous allons travailler sur d'autres fonctionnalités de notre contrat intelligent. Merci. 5. Fonctionnalité pour récupérer les livres: Travaillons maintenant sur la fonctionnalité pour obtenir tous les livres de cet utilisateur particulier. Donc je le nommerais, il suffit d'obtenir une liste de livres. Il s'agira d'une réception privée. Je vais vous dire pourquoi. Il ne vous donnera les informations que j' utilise le mot-clé view et il retournera ce livre de trucs qui est comme celui-ci. Vous pensez peut-être pourquoi ce privé, parce que je veux juste passer des arguments comme Boolean terminé. Cela signifie que c'est si nous demandons les livres finis ou que nous n'avons pas lus. Ainsi, avec cette seule fonction, nous pouvons appeler ou implémenter deux fonctionnalités. Commençons à travailler. Vous comprendrez tout. D'accord ? La fonction l'orthographe est mal. D'accord ? Maintenant, la première chose que je ferais est de créer une variable, de la nommer. Il s'agira alors d'une nouvelle liste de livres. Et cette terre serait chanteuse, terre sombre comme celle-ci. Bon, donc maintenant, au début, nous allons compter le nombre de livres de cet utilisateur. Parce que dans cette liste de livres, il y aura beaucoup de livres d' utilisateurs différents. La première chose que nous devons parcourir ou parcourir cette liste pour trouver le propriétaire. C'est-à-dire définir les livres qui appartiennent à cet utilisateur. C'est pour ça. Il suffit de créer une boucle for. Ce sera quand je serai égal à 0. J'ai moins que la liste de livres, la liste de livres, le terrain I plus, comme ça. Ensuite, la première chose à vérifier est de savoir si le propriétaire du livre, c' est-à-dire que cet ID de livre appartient ou non à cet expéditeur de points de message. C'est le cas. Puisque nous savons que l'ID du livre commence à 0. C'est pourquoi nous avons commencé à partir de 0. Et nous avons demandé que le mappage soit là avec cette adresse, nous pouvons donc simplement vérifier s' il appartient à cet expéditeur. Et une autre condition que nous allons vérifier est la liste des livres. I. Fini égal à, égal à fini. Comme ça. Cela signifie simplement, ce qui signifie que ce point de liste de livres est terminé. C'est cette propriété. Qu'elle soit égale à la variable que nous envoyons, c'est ce booléen, qu'il soit égal ou non. Si c'est le cas, dans cette variable temporaire, simplement à cet emplacement du compteur, insérez cette valeur qui est une valeur comptable. Ensuite, incrémentez ce compteur comme ceci. D'accord ? Donc maintenant, il ne fait aucun doute que nous avons tous les livres appartenant à l'utilisateur dans cette variable, mais cette longueur est définie d'une plus grande taille, c' est-à-dire toute la liste des livres. C'est peut-être 100. Et il n'y aura que cinq livres. Pour économiser de la mémoire et de l'espace. Il va créer une autre variable. Autrement dit, il s'agit variables temporaires qui sont le résultat final. Et ce sera le cas, encore une fois. Une nouvelle zone de livres, mais cette fois-ci, la longueur de ce pays compte. Et j'utiliserai la boucle for pour simplement récupérer toutes les données de ces deux points distincts. Maintenant encore utilisé new int I est égal à 0. Je suis moins que le comptoir, je plus. Ici, simplement, dans le tableau de résultats. Copiez tout à partir de cette baie temporaire. C'est ça. C'est juste une simple copie. Et c'est finalement revenu. C'est comme ça. Encore une fois, je voudrais tout d'abord expliquer qu'il s'agit d'une fonction privée qui ne regarde que. Il ne fait rien dans la blockchain. Dans cette fonction, nous envoyons un paramètre appelé terminé, c'est-à-dire vrai ou faux. Nous allons donc envoyer. Ensuite. Tout d'abord, nous avons créé une variable du nom temporaire. Il s'agit d'un tableau vide. Avec cela, la taille de la matrice est égale à la taille du livret stable. Il pourrait s'agir, supposons, de 500. Ensuite, nous avons créé ce compteur qui commence à 0. Et il suffit de penser à cela. Combien de livres appartient-ils à l'utilisateur ? S'il est possédé et qu'il sera mis en œuvre. Et comme je le sais, ça commence à 0, c'est pourquoi, dans le cas temporaire, je l'envoie à la position 0. Ou bien comment nous allons envoyer une valeur à l'intérieur. Ensuite, si vous le souhaitez, vous pouvez également renvoyer le temporaire, mais la longueur est très élevée. Pour le supprimer, je viens de créer un nouveau tableau avec cette longueur de compteur, c' est-à-dire dix heures, par exemple. Et il suffit de copier tout à partir de deux jours temporaires, résultat, variable et renvoyer le résultat. Maintenant, le but de la rendre privée était d'utiliser ces deux-là parce que nous sommes en train de créer pour fonctionner. Tout d'abord, le nom de la fonction est terminé. livres. externe vue externe renvoie la mémoire du livre. Et il retournera simplement cette fonction qui est obtenir liste de livres avec la valeur finie à true. Et une autre fonction que nous allons créer et nommer, finir. livres. vue externe renvoie une structure de tableaux de livres. Et il retournera la même chose qui est, obtenir une liste de livres, mais définitivement la valeur avec faux. Donc, avec cette fonction, nous sommes capables d'écrire deux autres fonctions, sinon nous devons écrire un souhait, nous devrons peut-être écrire séparément, séparément. Ce sera, encore une fois, le code sera répété et tout. C'est donc très simple. Vous le comprendrez pas à pas ou, sinon suspendez la vidéo et essayez de comprendre la logique qui la sous-tend. Maintenant, la dernière fonctionnalité dont nous avons besoin est de définir cette valeur finale sur false. C'est-à-dire, du vrai au faux et tout. Parce que, de toute évidence, s'ils utilisent le livre lu, il pourrait vouloir le mettre à jour. Il suffit donc d'écrire la fonction. Puni. Ensuite, il s' agira d'une fonction externe. Maintenant, cette fonction demandera cet ID de livre et une valeur booléenne. Fini. Tout d'abord, nous allons vérifier si l'utilisateur est propriétaire de ce livre ou non, car il ne peut lire ou voir que ses propres livres. Ce numéro de livre appartient-il à l'expéditeur du point de message ? Ce truc sera ici comme ça. Ensuite, il suffit de réserver la liste. L'ID du livre, le point fini sera cette valeur. Et après cela, j'aimerais, encore une fois, faire un événement. Ainsi, tout comme le jeu d'événements terminé, il demandera un numéro de livre. Et la valeur booléenne. Ici. Émettons le set terminé. Et nous envoyons ce numéro de livre et la valeur finie. Donc, c'est tout. Pour notre bibliothèque, contrat intelligent. Nous avons tout écrit. Dans la vidéo suivante, nous allons écrire un test unitaire pour nous assurer que tout fonctionne correctement. Merci. 6. Créez un nouveau fichier de test: Bonjour, bon retour. Étant donné que la Blockchain est immuable, avant de déployer notre contrat intelligent, nous devons rédiger des tests unitaires pour nous assurer que toutes nos fonctions et variables de nos contrats fonctionnent correctement. Et renvoyer les valeurs correctes. Nous utiliserons le Mocha Chai à cette fin. Donc, à l'intérieur de ce dossier de test, créez un nouveau fichier et nommez-le Library dot test, désolé, library dot js. Maintenant, c'est vrai, le nécessaire qui importe et toute cette bibliothèque que nous utiliserons est Chai, c'est comme ça, nous devons écrire. Et ensuite, la prochaine chose que nous aurons besoin, c'est les mangeurs sont égaux à avoir besoin d'etos. Nous avons ces dépendances lorsque nous avons créé un nouveau projet dur. Créons donc notre bureau. Et nous allons rédiger un contrat de bibliothèque. Puis à l'intérieur. J'espère que vous savez comment écrire un test avec un casque de sécurité. Donc, avant d'exécuter les fonctionnalités et toutes les fonctionnalités, nous devons écrire des données ou des variables. Tout d'abord, certainement, nous devrions avoir notre contrat de bibliothèque et ainsi de suite. Écrivons ces variables. Ensuite, le propriétaire qui déploie le contrat. Cette deuxième bibliothèque de petites lettres sera comme un objet et une vérification de notre contrat. Et ce sera une usine, vous pouvez dire. Ensuite, nous devons d'abord ajouter des données fictives à notre bibliothèque. Nous allons donc juste écrire le nombre de livres finis est égal à cinq. Juste des données factices. Et secondaire, nous avons const num, livre fini, erreur d'orthographe. Lorsque le livre de niche est égal à trois. Ensuite, nous avons terminé la liste des livres inachevés et une autre liste de livres finis. Mark II utilise donc des crochets pour organiser la structure. Ce mot-clé est utilisé pour regrouper tous nos tests et nous pouvons passer en tant que Nest MLL. Nous pouvons l'imbriquer. Encore une fois, nous pouvons écrire ce graphique. Encore une fois, nous pouvons faire comme ça pour que nous puissions tout imbriquer. Ensuite, il y a un cuisinier informatique, ce sont les cas de test et tout ce que nous utiliserons plus tard. Ensuite, nous avons avant h, c'est un crochet. C'est-à-dire que nous avons cela. Nous avons cela avant chaque crochet également. C'est donc un crochet qui va courir avant tout le scribe et il fonctionne. Donc, en mots simples, tout ce que vous écrivez à l'intérieur de ce document BeforeEach sera exécuté lorsque nos cas de test sont construits sur quatre bureaux séparés. Bon, allons maintenant de l'avant. Commençons par avant chaque crochet. À l'intérieur, ils gagneront une fonction sinc. Maintenant, nous allons utiliser ce mot-clé de bibliothèque, c' est-à-dire la variable de bibliothèque. Et nous allons simplement écrire attendre des ethers, dot get, contrat usine. Et le nom de notre contrat est le suivant. Élaboration. Bon, alors nous aurons celui-là. Laissez la bibliothèque, qui vous attend, déployer le point de la bibliothèque. Encore une fois, attendez ça. Nous n'avons pas à écrire directement. Nous pouvons maintenant obtenir le signataire comme ça. Le propriétaire est égal à attendre. Commencez. Obtenez des signataires comme ça. OK. C'est juste, je suis juste en train de vérifier. J'ai tout. Tout est là. Maintenant. C'est la structure. Autrement dit, il y aura une liste de valeurs. La première valeur va entrer dans cette variable. C'est là le sens de cette déclaration. Initialisons maintenant ce chanteur non meublé à cette liste vide et à l' endroit le plus convivial de cette liste vide. Maintenant, ce que nous allons faire, c'est que nous ajouterons cinq données fictives dans cette liste de livres inachevée et trois données fictives dans cette liste de livres finie. Maintenant, pour cela, je vais utiliser une boucle for qui est loin plomb je suis égal à 0. J'ai moins que le nombre de livres inachevés, en plus. Comme ça, je vais simplement créer un objet livre. Object ou vous pouvez dire comme ça. Ensuite, il aura un nom. Il y aura un an. Il aura, aura une valeur de fini. Ce sera faux. Maintenant, obtenez des valeurs aléatoires de nom ici dans Arthur, car il va le parcourir en boucle. Je vais créer ici une fonction aléatoire de base. Comme ça. Fonction. Obtenez un entier aléatoire. Maintenant, je vais juste définir les chiffres minimum et maximum et tout et simplement renvoyer le plancher de points mathématiques. Ce n'est pas aléatoire. Multipliez par le maximum moins le minimum. Comme ça. Il s'agit d'une fonction engourdie très basique. Si vous utilisez des numéros plus complexes, si vous voulez des nombres plus complexes, vous devriez utiliser d' autres bibliothèques. Mais pour l'instant, cela va faire ce travail. Ce n'est qu'un objectif de test. Je vais simplement obtenir un entier aléatoire. J'ai besoin, est-ce de un à 10 mille ? Et je vais juste réussir à filer comme ça. Encore une fois, pour l'année. Il s'agira de n'importe quoi entre 1800 et 2022. Alors notre troisième serait juste ce nombre aléatoire. N'oubliez pas que c' est juste pour tester. Je veux que quelques données soient dedans de ce côté-ci. Maintenant, après cet objet de livre, je vais simplement écrire l'attente, la bibliothèque, le point, ajouter un livre et un livre. Livre, nom du point, livre, oreille à pois, crochet. Notre troisième livre est terminé. Ensuite, je vais pousser cette information en détail, cette liste inachevée. C'est cette valeur comptable comme celle-ci. Donc simplement, encore une fois, avant que h ne s' exécute avant chaque test défini, nous allons définir ici le total pour le test unitaire. Et avant chaque test, ce morceau de code sera exécuté. Nous sommes d'abord en train de déployer notre contrat, puis d'en obtenir l'exemple, puis d'ajouter une boîte factice. Maintenant, encore une fois, de la même manière, nous devons également ajouter des données pour ce livre fini. Après ce livre inachevé, encore une fois, nous écrirons un peu la même chose. Ce que je vais faire, c'est que je vais le copier, le coller ici. Ensuite, la première chose que je ferai c'est d'obtenir ce nombre de livres finis. Ici. Je suis égal à 0 de moins que le nombre de livres finis. Là encore, ce seront les livres et ici, la valeur de définition sera vraie. Ensuite, j'écrirai le point d' attente de la bibliothèque, ajouter le livre, le nom du point du livre. Ensuite, je vais envoyer cette information à cette liste de livres finis. C'est ça. Enfin, nous en avons fini avec ça avant chaque crochet. Dans la vidéo suivante, nous allons écrire le test unitaire pour ajouter un livre et obtenir tous les livres. Merci. 7. Test d'unité pour ajouter et récupérer des livres: Nous allons maintenant écrire notre premier test pour ajouter un livre. Après cela, avant chaque clause. Réécrivons pour décrire le groupe et ajouter un livre. Ce sera une fonction. Ensuite, à l'intérieur, utilisez-le. C'est ce qui vient également de la bibliothèque. Il s'agit des cas de test. Le premier cas de test sera, nous devrions nous rencontrer et réserver un événement. Il suffit de l'écrire. Si vous ne comprenez pas, alors à la fin du test, vous comprendrez ce que signifie cette ligne. Encore une fois, créons un livre aléatoire. Pour cela. Copier, cet objet livre. Ici. Tout va bien. Après cela, il suffit d'écrire attendez x dans, nouveau à l'intérieur tout de suite. Bibliothèque point, ajout, livre. Alors écrivez ces choses à l'intérieur. Il suffit de copier-coller si vous le souhaitez. Ensuite, cela émettra une valeur à émettre. Ensuite, notre instance de bibliothèque, c'est-à-dire l'instance de contrat. Cela émettra alors un événement appelé Ajouter un livre avec des arguments ou une adresse NOR. Ensuite, le nombre de livres finis et le nombre de livres finis comme celui-ci. Ce que j'entends par ce code, car à la fin de notre fonction de livre publicitaire dans ce contrat de bibliothèque, c'est ça, nous émettons ceci, n'est-ce pas ? est donc cet événement, qui est le destinataire, c' est-à-dire qui est le propriétaire du livre. Et cette pièce d'identité. Et puisque l'ID du livre correspond à la longueur de la liste des livres. Et dans notre, avant chaque livre, nous avons déjà inséré ce nombre de livres qui compte 53 dans la liste. Ce citron commence à 0. En termes simples, ce que je veux dire, c'est que nous avons déjà une tâche factice dans cette liste. Et ce sera la tâche de neuf que nous sommes, c'est-à-dire neuf livres, nous ajoutons, qui aura un numéro huit. Il y aura un index huit car dans la liste des e-mails, l'index commence à 0. Ce livre aura donc une carte d'identité huit. C'est ça. Comme ça. Ce livre aura une carte d'identité huit. Nous allons simplement vérifier si l'événement émettra ces informations ou non. C'est ça. Et pour vérifier l'égalité ou comparer les résultats attendus au résultat réel, nous pouvons utiliser Chai, ce qui nous donne trois affirmations, c'est-à-dire qu' il y en a un troisième et qu'il y en a un troisième. devrait aussi, mais nous n'utiliserons que s'attendre. Maintenant. Cela ajoute qu'un test de livre est effectué. Après cela, nous écrirons un autre test unitaire, qui consistera à obtenir des livres. Nous allons l'écrire. Ce sera encore une fonction. Le premier cas de test, en fait, nous devrions renvoyer le bon nombre de cas est correct. livres inachevés. Il y aura une fonction sinc. Maintenant, récupérons les livres de notre contrat. Ce sont des livres de chained. Cette blockchain sera un point d'instance de bibliothèque. Obtenez un livre inachevé qui est ici. Obtenez des livres inachevés comme celui-ci. Ensuite, ce que nous attendons, c' est livres de longueur de chaîne doivent être égaux au nombre de livres inachevés. Et ce que nous ferons , c'est que nous vérifierons également que les livres à l'intérieur de ce tableau sont égaux aux livres contenus dans cette liste de livres de leur contrat. Pour cela, nous devons créer une fonction qui vérifiera les livres et donc simplement les écrire. Le code que je vais écrire. La première fonction sera de vérifier un seul livre, d'accord ? Il faudra une chaîne de livres et un livre. Nous nous attendrons donc à ce que le nom du point de livre soit égal au nom du point blockchain. Ensuite, nous aurons une autre attente. livre. Dot ir dot two string sera égal à point blockchain, point à chaîne. Ensuite, nous nous attendrons à un livre. Notre troisième devrait être identique au point Blockchain Arthur. Et maintenant, nous aurons une autre fonction, vérifier la liste des livres. Il s'agira donc de livres de la chaîne et de la liste des livres. Attendons d'abord les livres de la chaîne. La longueur ne doit pas être égale à elle, elle n'est pas égale. Il n'est pas égal à 0. Ensuite, la longueur de la chaîne des livres est cette longueur est cette point de liste de livres. Ensuite, comme nous avons beaucoup de livres, c'est aussi dans ce domaine et nous aurons aussi beaucoup de livres. Nous devons donc parcourir chaque livre, puis vérifier. Donc, nous aurons une boucle de bar. Ensuite. Il commencera à partir de I égal à 0, je suis inférieur à la longueur de point de la liste des livres I plus. Il suffit donc d'écrire const. Book chain est incroyablement similaire à books from chain. Je suppose que 0 index premier indice comme celui-ci. Alors le livre sera une liste de livres, qui est ici qui n'est pas un test. Et ensuite, nous utiliserons ce vérifiable, qui vérifie un seul livre. Ceci, pour ce livre particulier, nous allons vérifier ce nom ou si le nom et l'auteur, Eric Color, ne sont pas comme ça sur la blockchain et le livre. Nous ne faisons donc que comparer les livres stockés dans ce contrat et les livres stockés dans la variable locale de ce test. C'est ça. Encore une fois, allez ici. Ce que je vais écrire cette liste de livres de vérification. Ensuite, j' enverrai simplement des livres de la chaîne. Et puis une liste de livres inachevée. Donc, il devrait nous donner une liste de livres inachevée de cette chaîne. Et puis des listes de livres inachevées d'ici qui sont dans ce test. De même, nous aurons une autre condition pour obtenir le bon nombre de livres finis. Ici. Ça va finir le livre, les livres. Ensuite, les livres de Jane sont égaux au nombre de finis. Ce sera des livres finis égaux. Et puis vérifiez les livrets, c'est des livres de Jane. Et ce livre fini liste, qu'il soit égal ou non. C'est donc ça. Nous avons créé avec succès un test unitaire pour ajouter un livre et même récupérer nos livres. Il s'agit d'aller chercher des livres inachevés et de récupérer les livres qui sont finis. C'est tout pour cette vidéo. voit lors de la prochaine session. Merci. 8. Faites les tests: Dans cette vidéo, nous allons simplement écrire notre cas de test final, puis exécuter tous nos tests et voir si c'est le cas, s'il fonctionne correctement ou non. Enfin, le test consistera à terminer un livre, c' est-à-dire un livre inachevé. Changeons ça pour qu'il soit fini. Revenons comme ça, ce gris. Ensuite, définissez la fonction finie. Ce cas de test, nous devrions vraiment définir l'événement terminé. Ensuite, écrivez notre fonction. Supposons que l'ID de livre soit égal à 0. C'est le premier livre. Puis j'ai jeté un coup d'œil. livre. Finish est égal à vrai. Ensuite, écrivez simplement attendez, attendez-vous. Ensuite, la fonction de jeu de points de bibliothèque terminée. Nous vous enverrons la pièce d'identité du livre. Et c'est la décimale que les gènes sont vrais. Ensuite, il va émettre. Il émet une fonction ou un événement appelé set. jeu de majuscules est terminé avec des arguments, des arguments, un ID de livre et une valeur vraie. Ainsi, lorsque nous appelons ce jeu terminé ici, vous pouvez voir qu'il émet un événement l'ID du livre et un booléen fini. C'est ça. C'est ce dont nous parlons ici. Nous allons vérifier s' il s'agit d'une réunion ou non. Maintenant, c'est l'heure. Nous effectuons notre test. Assurez-vous de sauvegarder tous vos fichiers. Ensuite, dans le répertoire de votre projet, ouvrez simplement votre terminal et à droite et px, hardhat, test et appuyez sur Entrée. N'oubliez pas que si vous obtenez une erreur ici après avoir terminé l'ajout ou après avoir corrigé cette erreur, utilisez NP x Hardhead Clean, puis lancez à nouveau le test. C'est de nouveau exécuter ce test. Notre contrat de bibliothèque hache certains problèmes. Vous pouvez le voir. D'accord. Allons vérifier. Nous avons quelques problèmes. Je reviendrai vers vous avec une solution. J'ai donc eu la solution. Les erreurs que j'ai commises étaient d' abord, c' est-à-dire qu'à la quatrième ligne, je devrais avoir ce casque, pas une bibliothèque de tests. Ces lettres devraient provenir de la bibliothèque Howard Head. Et une deuxième erreur était, Cette attente devrait venir de la bibliothèque des enfants, mais elle ne devrait pas être majuscule, elle devrait être une petite lettre qui est CHA, petite. Nous allons le sauver. Et encore une fois, je vais me procurer un nouveau terminal. Je vais lire et px. J'avais été propre. Ensuite, j'ajouterai que NP x avait eu un test. Voyons voir. Maintenant, tout fonctionne correctement ou non. Enfin, vous pouvez voir tous les cas de test qui s'affichent, accord, cela signifie que nous sommes prêts à partir. Dans le prochain module, nous téléchargerons notre contrat intelligent sur la blockchain. Merci. 9. Écrire le script de déploiement: Bonjour, bon retour. Dans cette vidéo, nous allons écrire ces scripts de déploiement pour notre contrat intelligent. Il suffit d'aller dans le dossier scripts et de créer un nouveau fichier du nom déploiement dot js. Commençons maintenant à y travailler. Demandons le paquet ethers à partir de la dépendance de la tête dure. Il suffit maintenant d'écrire ce morceau de code requis pour le déploiement. Tout d'abord, nous allons créer une usine à contrat. Et j'attends que les mangeurs obtiennent une usine contractuelle. Le nom est bibliothèque. Créez ensuite une instance qui est un contrat pour trade dot. Déploiement. Un contrat de poids est déployé. Nous allons juste attendre de assurer que le contrat est en cours de déploiement. Et après jour. Après cela, nous consolerons l'adresse du contrat de connexion, ce qui est très important. Nous utiliserons cette adresse de contrat plus tard dans le front end. Il suffit d'écrire l'adresse du contrat. Ensuite, nous allons écrire une autre fonction. Pour exécuter la fonction ci-dessus comme celle-ci. Ayez un bloc de capture d'essai. Nous voulons dire ensuite traiter cette sortie 0 si tout va bien. Et si nous avons un ajout, alors vous lisez le journal de points de la console, peut-être une erreur enregistrée. Et nous allons écrire la sortie du processus. Un. Nous pouvons modifier est l'ajout de bouton de sortie. Et enfin, nous allons écrire et courir ici, disons. Il s'agit donc du script de déploiement. Il suffit de tout sauver. Ensuite, il suffit de déployer un terminal ajouté dans le dossier racine. Et tapez simplement NP x. Heart avait exécuté des scripts. Déployez le point us. Le réseau est pieux et appuyez sur Entrée. Voyons si tout va bien, alors nous obtiendrons notre adresse de contrat. Comment notre contrat a été déployé avec succès. Il suffit de copier cette adresse et d'obtenir simplement une virgule, c'est-à-dire Command. Il suffit de l'enregistrer pour ne pas perdre cette information. Maintenant, si vous le souhaitez, vous pouvez également vérifier le contrat. Informations dans. Pieux. Les Ethers peuvent simplement accéder à ce site Web et simplement coller votre adresse de contrat et effectuer une recherche. Voyez-vous, nous avons ce contrat qui est en cours de téléchargement est déployé il y a 52 secondes. Vous pouvez simplement vérifier que oui, notre contrat a été déployé des jours réussis, aucun problème. C'est tout pour cette vidéo. Dans le prochain module, nous travaillerons sur le front end, puis interagirons avec notre contrat diploïde. Merci. 10. Travaillez sur le prochain front js: Bonjour. Dans ce module, nous travaillerons sur le front-end de notre application et nous utiliserons le prochain JS, qui est un framework de zone encore. Maintenant, dans le dossier du projet, il suffit d'écrire la commande npm. Créez la prochaine application. Ensuite, nous utiliserons également les vivants là-bas. Il suffit d'écrire tailwind css et je vais le nommer client et appuyer sur Entrée. Il créera une prochaine application JS de base. Ok, donc notre prochaine application de chaises a été créée avec succès. Pour interagir avec notre contrat intelligent déployé, nous aurons besoin de deux choses. Adresse du contrat et cette ABI. Pour obtenir l'ABI, il suffit de copier le fichier json point de bibliothèque, qui se trouve dans le dossier artefacts et Contracts, puis dans la bibliothèque. Ensuite, nous avons aussi ce fichier json point de bibliothèque. Ce client. Et ce client crée un nouveau dossier appelé ABI. Nouveau dossier ici, ABI. Et puis à l'intérieur de ce dossier, il suffit de coller ce fichier json point de bibliothèque. C'est-à-dire qu'il s'agit de l'ABI nécessaire pour la tâche, c'est-à-dire pour cette adresse de contrat. Il suffit de créer un nouveau fichier appelé config dot js dans le répertoire client. Directement, c'est à l'intérieur de cela créer un nouveau fichier appelé config dot js. Et à l'intérieur, il suffit d'écrire export, const tâche. Ou vous pouvez simplement dire non contractuel, vous pouvez simplement écrire un contrat. L'adresse est égale à, puis copiez directement cette adresse ici et enregistrez-la. Nous utiliserons cela plus tard. Maintenant, si vous le souhaitez, vous pouvez simplement l'enlever. L'adresse ici. C'est ça. Maintenant, nous aurons également besoin d'installer peu de dépendances pour notre prochain projet JS. Il suffit donc d'aller ce répertoire client dans le terminal, il s'agit d'un client CD. Il suffit d'écrire npm, installer des mangeurs, taper des composants de style et d'appuyer sur Entrée. Les mangeurs sont donc une interaction avec le contrat intelligent. Les types vérifieront les accessoires et voyons ce que j'ai fait. Je ne me suis pas quelque peu répandu. Combo. Les types de Nance vérifieront que les accessoires passent à vos composants, correspondront à vos conditions. Assurez-vous également que les données que vous recevez sont valides. Peut-être des types, c'est-à-dire juste pour s'assurer que les données envoyées au composant sont valides, puis ces composants de style nous permettent de créer des composants et d'y attacher des styles à l'aide de balise ES6, modèle littéraux, les styles qui renvoient des CSS. En termes simples, il s'agit d'un package tiers à l'aide duquel nous pouvons créer un composant sous la forme d'une variable JavaScript déjà coiffée de code CSS. Vous le comprendrez plus tard. Alors maintenant, il suffit de lancer, notre application est npm run dev. Bon, maintenant, passons simplement à ça. Il s'agit d'un hôte local et voyez notre prochaine application JS est écrite avec succès. C'est donc ça. Encore une fois, je vais faire quoi ? Je vais juste faire ça petit. C'est comme ça. L'adresse du contrat, juste les lettres de CamelCase que j'aime bien, j'aime bien ça. La prochaine chose que nous allons faire est de travailler sur le fichier d'index, qui se trouve à l'intérieur des pages. Ici. Nous avons ce fichier TypeScript de point d'index. Et je retirerai tout ici et je commencerai tout simplement à écrire à partir de zéro. La première chose que je vais vous faire rester et utiliser les gens de React. Ensuite, j'aurai une adresse contractuelle. Adresse de contrat du fichier de configuration, qui se trouve en dehors de celui-ci, c'est-à-dire ce fichier de configuration. Ensuite, j'importerai des paquets d' éthers, d'éthers. Ensuite, j'importerai notre ABA que cette bibliothèque de la bibliothèque oblique ABA dote json. Ensuite, j'importerai la page suivante à partir de la page suivante. Ensuite, je vais simplement déclarer la fenêtre principale. Pour que plus tard , il ne donne aucune erreur. C'est génial. Notre composant qui est à la maison exploré pour le retard. Maintenant que notre composant est rayonné, notre prochaine application est prête. Dans la vidéo suivante, nous allons travailler sur la façon de les connecter au portefeuille MetaMask dans notre application. Merci. 11. Fonctionnalité pour connecter MetaMask: Bonjour. Dans cette vidéo, nous allons travailler sur cette fonctionnalité pour connecter notre Liam valide c'est la masse molaire à notre application. Alors commençons par travailler sur la fonction et appelons-la connecter. Ou laissez-le. Enveloppons tout ça dedans. Essayez d'attraper. Block va simplement écrire console.log adder se connectant à mon thermostat. Et nous allons simplement écrire cela ajouté. Maintenant, nous allons d'abord obtenir l'objet du stade, qui est injecté dans notre navigateur. Ensuite, nous verrons si nous avons un TDM ou non. Si nous n'avons pas de TDM, nous écrirons simplement console.log. Vous pouvez masquer non détecté et revenir. Et si nous l'avons fait, alors nous vérifierons s'il est connecté au réseau approprié, est-à-dire le réseau Garlin ou non, recevra simplement la demande pour eux à mon tour, ce qui est connu comme aide à la chaîne. Et puis nous savons que nous savons que ID girly est 0, X5, c'est le cartilage et l'identification. Nous allons donc le comparer si Shane AD n'est pas égal à la chaîne AD corrélée. Dans ce cas, il suffit d'alerter que vous n'êtes pas connecté à un réseau et que vous revenez simplement d'ici. Et si c'est aussi bon, alors il suffit de faire en sorte que cela compte. Ceci est une demande. Cette demande et nous entendrons demander que mon troisième, appelé demande des comptes, comme ceci. Ensuite, nous devrions avoir un état variable ici. Je vais le nommer compte courant. Pour le modifier, je vais simplement définir le compte courant. J'espère que vous savez que vous indiquez Hook dans React. Cela signifie simplement qu'il s'agit d'une variable et que sa valeur initiale sera vide. Il s'agit d'une fonction qui sera utilisée pour attribuer une valeur à cette variable. C'est ça. Donc, comme ça, je copie cette fonction, puis je la mets ici et j' écris simplement des comptes. Le premier. Juste, comme ça, nous aurons plusieurs comptes dans MetaMask, il suffit d'obtenir le premier. C'est la fonction qui permet de connecter le portefeuille. Nous allons maintenant travailler sur la partie HTML. Il suffit de renvoyer une div. Donnons-lui quelques noms de classe de CSS. Flex, flex appelés objets. Si vous le souhaitez, vous pouvez simplement copier ce que cela signifie. Parce qu'il s'agit d'un code CSS à vent arrière, F3, F6 pour. Ensuite. C'est juste un style basique. C'est ça. Rien d'autre. 68508. Principalement maman sera à l'intérieur ce fond de rembourrage 20. Ensuite, prenez un autre cours. Il m'a donné le nom de la classe. Transition au-delà de la date. Quand il a donné. Puis sur l'échelle, quand 05, transition, durée 500. Facilité d'entrée, de sortie. Alors, pas à l'intérieur. En dehors de ça. Compte tenu de H2. Est-ce que les platines C x sont en gras, et B est le bas de la marge. Pour ajouter une marge, top 12. Et nommez-le. Gérez votre bibliothèque personnelle. Comme ça. Ensuite, vient notre portion, c'est-à-dire que nous allons vérifier si le compte courant est égal à vide, puis nous aurons un bouton sinon nous aurons autre chose. D'accord ? Voyons voir. S'il est vide, nous aurons un bouton. Le nom du bouton sera connecté. Laissez. Donnons maintenant un peu de style. Nom de classe. Texte, police supportée. En ajoutant mes trois. Paris x 12. Contexte. Un, C, 232, grande marge, bas. Puis à l'échelle 105, transition. Et dans l'événement OnClick, nous allons simplement écrire connect, bien la fonction IT. Nous allons lui attribuer ce n. s'ils sont déjà connectés. Ensuite, nous aurons une balise div, qui aura un avantage pour cela. Ensuite, portefeuille, portefeuille connecté et leur portefeuille adresse que ce compte courant. Et donnons-lui aussi un peu de style. Ensuite, excellez. Le jour 12, gérer le point. Nous allons le sauver. Je veux ajouter un C. Nous avons ce magnifique portefeuille plein bouton à col. Si je clique dessus, mon MetaMask apparaîtra. Et ma tâche est déjà connectée au réseau Golgi. Je vais simplement écrire ensuite, connecter et dire, bien c'est connecté, c'est mon adresse publique. Nous avons donc réussi à créer des stables. Nous avons travaillé avec succès sur la fonctionnalité permettant de connecter notre portefeuille My Thomas à l'application. Dans les prochaines vidéos, nous travaillerons sur le front-end et sur la fonctionnalité permettant d'ajouter et de supprimer des livres et tout. C'est donc ça. On se voit dans la vidéo suivante. 12. Fonctionnalité pour ajouter un livre: Bonjour. Dans cette vidéo, nous travaillerons sur une ferme qui permettra à l'utilisateur de soumettre un livre. Et je dirai que nous devons écrire une fonction qui va insérer ces informations dans cette blockchain. Si fort, commençons par la fonction. Pour que la fonction fonctionne. Tout d'abord, nous devrions avoir des états. Il s'agit de quelques variables. Vous pouvez dire const, nom du livre. Donc, lire définitivement le livre aura un nom. Et pour mettre à jour cette variable, nous avons ce nom de livre. Vous êtes resté au tout début. Il sera vide. Ensuite, nous aurons un auteur de livre. Et puis il aura pris fin. Le livre est en fonction de l'état d'utilisation. Encore une fois, ce sera le cas et ce livre aura un an. C'est une oreille riche, ce livre a été publié. Réservez ici. Vous indiquez MD. Et enfin, nous aurons terminé le livre. C'est très bien que ce livre est fini ou non. Ce livre est terminé. Donc, au tout début, ce sera non. Évidemment, lorsque nous ajoutons un livre, la valeur par défaut doit être connue. Alors travaillons sur leur fonction et nommons cela. Soumettez un livre. Ce sera une fonction sinc. Créons ensuite l'objet Book. Simulez. La clé sera nommée BlockName. Ensuite, votre patron. N'avons-nous pas besoin de le changer en entier, cette chaîne. C'est le plus encombrant. Ensuite, nous avons le troisième livre. Ensuite, nous avons fini la valeur. Si la valeur terminée du livre est oui, elle sera vraie ou fausse. Vous comprendrez cela de quoi je parle, car il s'agit d'une bibliothèque personnelle. Vous voudrez peut-être insérer un livre qui est déjà rouge, mais vous souhaitez l'ajouter dans la blockchain. C'est bon. Ensuite, faisons le bloc d'essayage. Essayez le bloc de capture. Nous avons console.log et nous soumettons un nouveau livre. Et puis écrivez à l' éditeur, apportez de la diarrhée. Et ce que nous allons faire, c'est d'abord que nous obtiendrons le stade de cette fenêtre. Ensuite, si nous avons l'objet KTM, écrivons const. Provider est égal à nouveaux fournisseurs de mangeurs. Fournisseur Web trois. Et nous allons passer cet objet Itanium. Ensuite, nous obtiendrons le signataire. Le signataire sera le point fournisseur, obtenir le signataire comme ceci. Ensuite, nous aurons une instance de contrat. bibliothèque. Le contrat est égal à un nouveau contrat, cette adresse de contrat, alors nous devrions avoir l'ABA, ABA, puis nous devons donner au signataire. Et maintenant, nous devons appeler la fonction ajouter un livre à partir d'eux. Hum, blockchain. Maintenant, laisser la transaction de bibliothèque est égale à attendre un contrat de laboratoire. Contrat de bibliothèque dot ajouter un livre. C'est le retour du contrat intelligent. Nous enverrons un livre, un nom de point, un livre, cet auriculaire. Notre livre. est fini comme ça. Ensuite, nous allons simplement consoler consigner cette transaction, c' est-à-dire la transaction de bibliothèque. Et si l'objet Tanium n' est pas disponible, ce qui ne sera pas le cas. Mais comme nous ne prendrons aucun risque, il écrira, nous l'écrirons. La vérification n'existe pas. C'est donc ça. Que c' est la fonction de soumission d'un livre. Nous allons simplement nommer cette fonction soumettre un livre. Nous allons maintenant travailler sur la partie HTML. Allons-y en dessous. Ici. C'est-à-dire, dans ce portefeuille connecté. Vous voulez que le formulaire s'affiche, car au début, l' utilisateur doit les connecter à un porte-monnaie de mosquée. Donc, en dessous de cela, nous aurons tout d' abord ce que je ferai, est envelopper cette chose dans une div. Dave, attends, je pense juste à ce qui peut être fait ? Oui. Donnez-lui juste une div. Fermez cette div. D'accord. Maintenant, après que ce portefeuille soit connecté, Dave, écrivons ce formulaire qui est rapide. Nouvelle div. Je vais lui donner quelques vents arrière, CSS. Ces choses seront du texte, de la police, caractères semi-gras, et seront Duan De marge, les quatre premiers. Voyons ensuite nos champs de saisie. La première entrée sera du texte de type entrée, puis le nom du livre sera le nom du livre. Et cette valeur sera la variable que nous avons mentionnée plus haut. Et OnChange. Ce que nous aurons. Quand on obtient la valeur. C'est tout ce qu'il y a là, nous allons définir le nom du livre. Nous allons simplement définir le nom du livre et passer une valeur de point, de point, de point. Comme ça. Donnons-lui aussi un peu de style. Je vais donc donner un nom de classe. Il ne va pas envoyer de texte à Excel à bord. Marge, marge inférieure, première. Comme ça. Ensuite, je lui donnerai un BR, tag. Saut de ligne. Et encore une fois, j' aurai un autre champ de saisie. Il suffit donc de le copier et de le coller ici. Est-ce que le style sera le même ? Seul l'espace réservé sera un livre. La valeur sera comptable et inchangée. Ce sera un livre. Comme ça. Encore une fois, j'aurai le même champ de saisie. Donc je ne fais que copier le BR, c'est aussi un saut de ligne. Ce troisième sera la valeur comptable sera l'oreille du livre. Inchangé, dit livre ici, comme ça. D'accord ? Il suffit ensuite d'avoir une étiquette BR, puis une étiquette. C'est tout simplement exact ? fini de lire ce livre ? Alors ? Nous en aurons, nous aurons la possibilité de sélectionner cette balise HTML sélectionnée. La valeur sera terminée. Ensuite, on change sera de la même façon. Comme tout ce que nous obtenons, nous le changerons pour finir le livre. Point E, point, point, point. À l'intérieur de cette balise de sélection, nous devrions avoir des options. La première option aura de la valeur. Oui, c'est ce que j' ai lu ce livre. Et la deuxième option, le saurons-nous ? C'est-à-dire que ce livre n'est évidemment pas juste pour lui. Obtenez. Maintenant, après cette étiquette, nous devrions avoir un bouton. Je ne fais que coller ce code parce que dans la dernière fois j'ai enregistré ce cours et j'ai eu une petite erreur. Vous pouvez donc voir qu'il s'agit d'un bouton avec un nom de classe de texte, Excel, police, gras BY trois, remplissage à x2. Puis arrière-plan, couleur désactivée, hachage F1, C, 232 , arrondi, grande marge, dix bas, marge gauche cinq. Puis survolez, redimensionnez. 105, puis transition. Durée 500, facilité d'entrée, de sortie. Et sur Click. J'attribue simplement la fonction de bouton d' envoi et je lui donne un nom du livre. C'est ça. Donc, si vous courez, vous pouvez simplement mettre en pause la vidéo et la noter. Ce n'est qu'une ligne de code. Enregistrez-le maintenant et accédez à votre application. Il suffit de cliquer sur le porte-monnaie Connect. Voir le formulaire est ici. Vous pouvez le nommer n'importe quoi. J'ai déjà un livre parce que, comme je vous l'ai dit, je l'ai fait que j'ai fait les tests. Alors apprenez le livre dur ou elle C'est vrai. Bill Gates. Je ne sais pas qu'il s' intéresse à ça ou non et l'a donné en 2019. Ajoutez ensuite un livre. Thomas va demander l'approbation. Il suffit de le confirmer. Voyons si dans la console nous recevons notre transaction ou non. Je suis juste en train de vérifier, c'est toujours en attente. C'est fini. Cliquez maintenant sur Inspecter. Et dans cette console, nous avons cet objet, qui est la transaction complète C. C'est donc tout pour cette vidéo. La fonctionnalité d'ajout d'un livre fonctionne parfaitement. Dans la vidéo suivante, nous allons travailler sur la façon de récupérer ces livres de la blockchain. Merci. 13. Fonctionnalité pour récupérer les livres: Nous allons maintenant travailler sur la fonctionnalité pour récupérer des livres de la blockchain. Tout d'abord, nous aurons besoin de certains États. Il suffit d'écrire des livres const. Fini et dit boîte. Terminé est égal à l'état d'utilisation. Il s'agira d'un tableau. De même, nous aurons une autre boîte. Et les livres finis et les produits finis. Ils utilisent la date. Encore une fois, il s'agit d'un tableau vide. Maintenant, travaillons avec la fonction située sous cette fonction de soumission du livre. Je vais écrire const, obtenir des livres est égal à un évier. Ensuite, je reçois un, de même, nous aurons un bloc d'essai de capture. S'il y a une erreur, je vais simplement consoler console.log. Dans cette section d'essai. Encore une fois, nous aurons cette ligne de code. Il suffit de copier ça en congé. Je vais juste copier à l'intérieur. Je vais retirer, ce qui n' est pas nécessaire. Je vais simplement supprimer ces deux lignes car nous aurons besoin du contrat de bibliothèque Itanium. L'instance de contrat à utiliser pour récupérer la fonction à partir de la blockchain. Maintenant, simplement, prenons des livres. Meublé est égal à attendre. Contrat de bibliothèque dot get. Allons vérifier maintenant. Obtenir des travaux finis. Obtiens des livres finis. Et de même, nous aurons laissé les livres non meublés, points contractuels ne seront pas achevés. Ensuite, nous allons simplement définir la valeur de l'État. C'est des livres finis. Le livre est terminé. Et les livres inachevés seront égaux à la liste provenant des livres inachevés. Donc, comme ça, nous avons également notre fonction de réservation. Maintenant, pour l'afficher en frontal, nous allons créer un composant séparé. Dans ce dossier Pages appelé Come on Nance, Gumbo, Nance. Et à l'intérieur, créez un fichier appelé Book JS. C'est ça. Il sera donc juste d'imaginer un livre séparé et séparé. Nous allons simplement donner une boucle for et elle retournera ce composant. Donc, ici, j'utiliserai un peu de style si vous le souhaitez. Encore une fois, je dis que vous pouvez faire vous-même ces propriétés que nous avons installées au début, ces dépendances, types de prop, puis importer images clés stylisées à partir de composants de style. Maintenant, voyons bien, peu de cadres clés de style. Et ça. Ensuite, à l'intérieur, nous aurons, vous pouvez simplement écrire ce code de la même manière parce que comme je le dis encore et encore, je ne me soucie pas du style. Juste pour fuir, juste pour avoir l'air décent. Au moins, je transforme ces styles. Échelle 0,5. Ensuite, lisez le pourcentage. Encore une fois, je vais simplement copier ces deux lignes. Collé. À l'échelle 1. Et ensuite, nous faisons une échelle. D'accord ? Ensuite, avec des composants de style poussière, j'aurai un conteneur. C'est donc juste que nous donnons directement un style à un composant. C'est ce qui concerne les dépendances de composants de style . Rester ça. Dave, notons ça. Animation un par un. Glisser 0,82 cube Bézier à l'intérieur. C'est vrai ? W 0,390.5750,5651. Affichez ensuite la grille. Ensuite, les colonnes du modèle de grille seront de 38 %, 20 %, cinq ans, pourcentage, 37 %. Ensuite, nous ajoutons deux REM, 0,181.625168, date REM, bordure, solide, un pixel. Bordure, rayon. Pour grosses cellules. Ligne, hauteur. Normal. Transition arrière du sol, 0,40 comme linéaire. Marge. Lumineux. Premièrement, je suis à 50 pixels. Afficher le bloc en ligne. C'est ça. C'est donc tout pour la partie coiffante. Si vous le souhaitez, vous pouvez simplement mettre en pause cette vidéo et la réécrire. Si je suis allé un peu vite. Dans la vidéo suivante, nous allons donc travailler sur le composant livre. Merci. 14. Créer un composant de livre: Créons maintenant ce composant de livre. En dessous de ce code. Disons que const book est égal à cela. Et dans ce composant, nous accepterons certains accessoires comme id, name. Ici sont punis, et une fonction qui sera Click book. est fini comme ça. Revenons. Revenons, alors ce conteneur, qui est déjà coiffé comme ça. C'est pourquoi nous utilisons ces composants de style de sorte que lorsque nous l'avons utilisé, déjà prédéfinis et fonctionnent comme s'il fonctionnait comme un composant. Vous pouvez voir, supposons une sorte de composant conteneur. Vous le nommez, vous le nommez conteneur et nous pouvons l'utiliser comme ceci. Maintenant, allons-y. C'est Dave, nom. Ensuite. Ensuite, nous avons ici. Ensuite, cette balise de span, nous dirons simplement si elle est terminée égale à, égale à pause. Si le livre n' est pas terminé, nous aurons quelque chose ou autre chose, sinon, nous aurons simplement un tag p. Ensuite, nous aurons un bouton. Ensuite, cette balise p plus tard. Donc ici, si nous avons cela, ils auront un bouton. Et donnons un peu de style au bouton. Police, gras, mariage à x, y, panne. Ash, F, F, 77, F. Ensuite, nous aurons Dexter White. Puis arrondi. Grande marge, cinq premiers. Notre échelle 105. Transition. Durée. 500 sont dans ce fardeau. Ensuite, dans ce bouton, ce que nous aurons, c'est que nous aurons également la méthode on click. C'est là, il est là. Allons faire un clic. Lorsque l'utilisateur clique sur un clic , cette fonction amusante sera exécutée, qui est fourni par Glick Book. Et nous devons envoyer la pièce d'identité. C'est un livre riche. Nous devons le supprimer et simplement le nommer. livre de niche comme celui-ci. Ce sera donc quand la propriété est fausse et si elle est vraie, alors nous pourrons simplement donner un paragraphe et lui donner un style. Police. Ball, gras, texte, hauteur 0 d, 71 E. Et il sera écrit livre terminé. Disons. Donc. Maintenant, après ce composant, nous aurons quelques types d'accessoires qui veilleront vraiment à ce que ces propriétés s' élèvent dans cet ordre. C'est le cas, nous avons certaines conditions qui devraient être remplies au début. est-à-dire que c'est la chose où c'est comme si on l' avait acquis comme ça. Type d'accessoire numéro de point, qui doit être numéroté et requis. C'est un nom. Types d'accessoires. Chaîne, point est requis. La chaîne de majuscules de type B chaîne de majuscules est nécessaire que ce que nous avons. Nous avons terminé notre talent. Nous venons donc de copier. Nous avons fini. Comme ça. C'est un chiffre. Enfin, nous allons simplement exporter le livre par défaut, comme celui-ci. Le composant livre est prêt. Maintenant, affichons ce livre dans la page d'index, ce qui ne signifie pas que les pages d'accueil l'affichent. Après ça. Nous avons ce bouton Ajouter. Ensuite, nous avons ce Dave. Nous avons ce débat à 132 heures après jour, après jour, Dave. Nous aurons une autre div qui contiendra la liste des livres. Donnons également un peu de style à cela. Flex, flex, colonne, justifier, centrer, les éléments se centrent comme ça. Encore une fois, nous aurons un nom de classe Dave. Ne sont pas du texte semi-gras, du texte volumineux, du centre, qui gère les quatre derniers. Et je vais nommer la liste des livres. OK ? Ensuite, nous aurons un bouton, puis nous aurons un bouton. Ensuite, nous aurons un bouton et il appellera obtenir des livres. Et ce bouton aura à nouveau des classes telles que Excel à bord, comme ceci. Et si vous êtes bon avec Tailwind CSS, vous pouvez également le modifier. Ce ne sont que des styles basiques. Puis arrondi, arrondi, en bas de la marge. Ensuite, notre échelle lorsque 05, durée de transition, 500 est en entrée, sortie. C'est donc le bouton. Et sous ce bouton, nous ferons notre logique. Tout simplement. Ce que nous allons faire, ce sont des livres inachevés. Ce pays. Si elle est supérieure à 0, nous aurons une div. Si la longueur est 0, alors nous l'aurons div, qui, au moment où je me dirige, il écrira simplement un livre inachevé. Et à l'intérieur, il y aura un certain nombre de livres. C'est-à-dire que des livres sont inachevés, pas des terres comme celle-ci. Et donnons un style de base à cela. Police. Texte semi-gras, centre, marge, bas. Pour la marge, les cinq premiers. Et si ce n'est pas le cas, nous aurons simplement une div vide. Comme ça. Je n'y montrerai aucun cap parce que ce sera le cas, ça n'a pas l'air bien. Ensuite, en dessous de cela, laissez-moi voir. En dessous de cela, nous allons avoir un autre div nom de classe qui sera flex. ligne flexible justifie le centre, les éléments au centre. Et ici, nous aurons comme ces livres, inachevés, une carte, comme celle-ci. Et ici, nous obtiendrons des livres simples. Et dans ce livre unique, nous appellerons la composante livre. Nous allons importer le double composant ici. Importez le livre Components comme celui-ci. Maintenant, cela va accepter certaines propriétés. Carnet de clés cet ID, ID, analyse int. On va juste dire livre. Nous nous assurons qu'il s'agit d'une pièce d'identité. C'est-à-dire qu'il s'agit d'un taux de nombre n. Supposons que l'éditeur parvienne plus tard. nom du point de livre Le nom du point de livre est égal à barres. Livre, l'oreille. cordes, comme ça, ça sont terribles. livre. Non. Puis c'est fini. livre. Dot, fini, point deux. ficelle. Cliquez ensuite sur livre. Terminé sera le clic de fonction , cliquez sur Livre meublé. Nous devons créer cette fonction. Supposons que que nous ayons cette composante livre. Ok, ici. Ce sera ça. Voyons voir. Y a-t-il un éditeur ? Nous allons simplement appeler ce composant Ce livre de clics est terminé. Ici. Cliquez sur OK, l'orthographe, je suppose, a fini C. Ok. Maintenant, ils fonctionnent correctement. Vous pouvez voir que nous devons également créer une fonction Flip Book terminée. Et pour ces lignes rouges et tout, si vous le souhaitez, vous pouvez simplement aller dans le fichier ts config dot JS, c'est ici. Et puis ici, changez la valeur stricte en false. Le quartier est faux, c'est tout. Si vous faites cela, ces lignes rouges et ces choses seront résolues. C, Ceux-ci sont maintenant résolus. C'est tout pour cette vidéo. Dans la vidéo suivante, nous travaillerons sous fonctionnalité pour changer la librairie à la fin. Merci. 15. Fonctionnalité à changer l'état du livre: Bon retour. Travaillons sur notre application. V4. Bien, pour attribuer cette fonction, c'est-à-dire obtenir des livres. Ce bouton. Le bouton ici, c'est qui est ça. Il suffit donc d'écrire sur clic et c'est un bon livre. De même, cela montrera tous les livres qui sont terminés. De même, nous devrons montrer des livres qui sont, qui sont , qui sont finis de cette façon. Ce sont des livres qui ne sont pas finis et nous devons montrer des livres qui sont finis. Donc, ce que je vais faire, c'est simplement copier ce bout de lignes. Supposons tout d'abord que je copierai ça et que je le collerai ici. Il s'agira d'écrire des livres. Des livres, c'est fini. Des livres, c'est fini. La longueur du point plutôt que la même chose et c' est vraiment fini, c'est tout. Et puis je ferai à nouveau la cartographie comme celle-ci. Il suffit donc de le copier et de le coller ci-dessous ici. Je vais faire cette cartographie avec des livres, finis, une carte à points. Et les livres seront terminés ces jours-ci. Et maintenant, nous allons travailler sur la fonction ici et nous allons la nommer. Livre, fini, copié et collé ici également. Ce sera la fonction que nous allons créer maintenant. Le livre du lac est terminé. Va là-haut. Fonction créative. Const comme ça. Un évier. Il acceptera les pièces d'identité, comme ça. D'accord ? Donc, encore une fois, nous aurons le try-catch et tout. De même, comme toujours, comme nous devons nous connecter au contrat intelligent, qui est déjà déployé, il suffit d'écrire console.log et de modifier état du livre. Il suffit d'imprimer également l'en-tête. Ensuite, dans ce bloc d'essai, nous aurons simplement, nous copierons à partir d'ici. Il suffit de copier ces lignes. Collez-le ici. Bon, nous avons le fournisseur. Ensuite, la transition de la bibliothèque sera, elle sera simplement réglée. ai fini comme ça, disons le journal des points de console. C'est donc la fonction. Et la plupart des fonctions sont quelque peu similaires. Rien d'aussi chic que ça. Nous appelons juste celui qui est prêt à finir ça ici. Celui-ci, il faut un ID de livre et un booléen fini. Nous allons donc simplement envoyer l'ID et le booléen, c'est tout. Enfin, nous avons écrit tous ces codes pour l'application. Je suis content que vous ayez regardé quelque chose maintenant, dans le prochain module, nous allons tester notre application si tout fonctionne correctement ou non. Et si nous obtenons une erreur, nous le résoudrons dès que possible. Merci. 16. Testez l'application complète: Bonjour. Dans cette vidéo, nous avons vraiment testé le fonctionnement de notre application. Nous avons cité les dernières vidéos, mais pour le moment, il est temps de vérifier si toutes les fonctionnalités fonctionnent ou non. Donc, la première chose que je ferai, c'est des gènes que du réseau de mes tomates de Gormley. Et puis je cliquerai sur Connect Wallet. Voyez-vous, vous n'êtes pas connecté pour l'appeler réseau, ce qui nous incite à changer de réseau. Cela fonctionne très bien. Allons à la choline. Ensuite, lorsque je clique sur Connect violet, MetaMask ajoute, puis ensuite et connecte. D'accord. Maintenant, nous avons ces livres. Si vous vous en souvenez, nous avons déjà ajouté un livre bleu plus tôt. Donc, si je clique sur Obtenir des livres , nous avons deux livres inachevés. Voyez, c'est l'un, apprenez l'arbre Web et l' autre est apprendre le chapeau dur. C'est donc très joli. Et aussi si j'écris apprendre, il y a une date d'échange qui est la prochaine. Js. Mark Zuckerberg et 2018. Supposons que si j'écris simplement dessus, si je le change par oui, voyons ce qui se passe. Des alertes peuvent se former. Voyons si la transaction est toujours en attente. Cela va prendre un certain temps. C'est fini. Maintenant, si je clique sur Obtenir des livres, voir que j'ai terminé mes livres. Mais je vais bien. Cette erreur. J'ai compris pourquoi il y en a deux parce que nous avons oublié de changer. Les livres finis seront donc de cette longueur. Disons que c'est une très petite erreur. C'est vrai, c'est corrigé. Les livres en ont fini un. Et si je clique sur ce livre fini, apprenez le casque dur. Une fois encore. En montrant ceci, puis je clique sur Confirmer. Le principal motif de ce cours était de comprendre les bases de la blockchain. La technologie n'est pas cette interface utilisateur. Si vous le souhaitez, vous pouvez utiliser n'importe quel outil d'interface utilisateur frontale et le rendre très beau. Parce que vous pensez peut-être que c'est très simple, mais l'essentiel est cette fonctionnalité. Maintenant, c'est la fonction de réglage de la dépense terminée. Ces dépenses. Maintenant, c'est fini. Si je clique sur Obtenir des livres. Vous voyez, c'est aussi dans la section finie et maintenant nous avons un livre inachevé et un livre fini. Donc, cette application complète fonctionne très bien. Et je pense que nous sommes fiers de nous-mêmes avoir créé une application décentralisée à partir de zéro. J'espère donc que vous avez apprécié le cours. Assurez-vous de regarder d'autres cours à moi aussi. Merci. Passez une belle journée.