Transcription
1. INTRODUCTION DU COURS: blockchain est la
force motrice de la prochaine génération, qui est également appelée «
jamais traiter ». La blockchain réinvente la façon dont les
données sont stockées et gérées. Web trois embrasse une religion
décente et
est construit et
détenu par ses utilisateurs. Par conséquent, de nombreuses nouvelles opportunités pour des développeurs
comme nous dans ce domaine. Dans ce cours, nous allons
apprendre comment créer une décentralisation
complète pour
effectuer une réplication à partir de zéro. Nous utiliserons la solidité pour le développement de contrats intelligents pour
les tests
et le déploiement. Soif, c'est de communiquer
avec le contrat. Mcnemar doit signer
la transaction, React JS pour le Fontan, et finalement comme la
blockchain les fournirait. À la fin du cours, vous comprendrez que tous
les concepts nécessaires pour
postuler à un poste de développeur ne sont
même pas créer votre
propre application sur la blockchain araméen
sans perdre plus de temps. Inscrivez-vous maintenant et
commençons.
2. Discuter du curriculum de cours: Bonjour, bienvenue dans la toute
première vidéo de ce cours, où nous allons apprendre à créer une
application décentralisée dans le monde réel. À l'heure actuelle, tout le monde
parle de l'arborescence Web. Et même si vous connaissez
les bases de l'arborescence Web, jusqu'à ce que vous développiez une application complète
utilisant toutes les technologies, vous n'êtes pas considéré
comme un développeur. Évidemment, vous devriez
connaître la solidité, réagir, la tête dure, un E test.js. Au moins, vous devriez avoir
une certaine connaissance de ce que ces technologies font pour
poursuivre ce cours. Car ici, notre objectif principal sera de créer l'application
complète. Avant d'aller de l'avant, discutons du cours. Les programmes d'études sont, quelles sont les étapes que nous allons
prendre dans ce cours. La première étape consistera à configurer l'
environnement de développement à l'aide d' Hardhead et d'autres nœuds KTM. Nous utiliserons le service d'alchimie. Ensuite, nous écrirons logique
du contrat intelligent en utilisant solidité de cette
application à faire. C'est-à-dire comment ajouter notre
écran ou supprimer ces tâches de la blockchain
à notre application. Ensuite, nous écrirons le test
unitaire afin de tester le fonctionnement de la logique du contrat
intelligent. Ensuite, nous déploierons un contrat
intelligent sur le réseau qui
est ce réseau de test. Ensuite, après avoir créé
le front-end de l'application l'aide du framework React, nous développerons
une application très basique. Ensuite, en utilisant un js
de soif et MetaMask, nous interagirons avec
le contrat intelligent, qui est déjà
déployé sur le réseau de test. Et à la fin, nous allons vérifier toutes
les fonctionnalités et le fonctionnement de l'application
décentralisée. C'est donc ça. Et assurez-vous également que
vous avez installé MetaMask et que vous avez des détails de test froidement dans votre compte. Je ne vais pas m'installer à
nouveau comme je l'ai déjà fait, décilitres et
tout ce qui se trouve dans mon portefeuille. Alors, veuillez regarder n'importe quel didacticiel et continuer
avec ce cours. C'est très simple. C'est donc tout pour cette vidéo. voit lors de la prochaine
session. Merci.
3. Configurer le projet de hardhat: Dans cette vidéo, nous
allons apprendre comment définir l'environnement de développement de notre application avec une tête rigide. La question se pose donc :
ce qui est chaud chez Hardhat, c'est un environnement utilisé par
les développeurs pour tester, compiler, déployer et déboguer applications
décentralisées basées sur la blockchain Itanium. Son concurrent est
connu sous le nom de truffe. Dans ce cours, nous utiliserons
la tête dure, mais plus tard, si vous souhaitez explorer la truffe, allez-y
car vous ne savez jamais lequel sera utilisé dans le projet de
votre entreprise. Commençons maintenant par créer un dossier nommé application à faire. Commencez par créer un dossier. Puis à l'intérieur
de ce dossier du terminal Penn huit. Et initialisez un paquet NPM
vide à l'aide de cette commande
et BM dans son tiret. Pourquoi ? Maintenant, nous avons ce fichier
package.json. Ensuite, installer la tête dure. Rappelez-vous simplement
cette commande, npm, install, dash, dash,
save, dev, hard hat. Cela prendra très
peu de temps. Cela dépend de votre connexion
Internet. Mais le casque dur a gagné beaucoup de
traction chez ce
spectateur auparavant, il n'
était que de la truffe. Également. C'est fini. Vous pouvez simplement voir qu'il
y en a et que l'IMC le fera toujours, ce n'est pas si important. Ensuite, il suffit d'
écrire np x hardhat. Il nous aidera à créer
un projet de casque rigide. les options, sélectionnez
le premier à créer
un exemple de projet de base. Appuyez ensuite sur Entrée, puis
sur Entrée. Voir. Ces dossiers ont été créés
automatiquement. Et Hardhead nous
dit également d'installer
ces dépendances. Cela nous aidera à tester, bien avec la bibliothèque prudente
et ethers pour interagir avec
le contrat intelligent. Il suffit donc de copier ceci, de
coller et d'appuyer sur Entrée. N'oubliez pas que
ces dépendances sont importantes lorsque
vous utilisez le chapeau. De plus, si vous voulez en savoir
plus sur Hardhead, vous pouvez vous rendre sur leur site
officiel, hard hat dot ORG et
lire tout simplement à ce sujet. ce moment, je suppose que
vous connaissez les bases de Hardhead. Quel que soit le code que j'ai écrit, vous le trouverez dans la section documentation
de leur site Web. Voir npm install save-dev entendu avait un NP x qui nous
donne cette option. Ensuite, il nous dira d'
installer ces dépendances. C'est ça. Maintenant, voyons voir. Il est toujours en train d'installer ça. Cela prendra également un certain temps. D'ici là. Vous pouvez simplement consulter la documentation
officielle. OK, c'est fini. Maintenant. Nous allons également installer quelques
autres dépendances, qui ne sont pas liées
à la tête dure. Il suffit d'écrire npm install, puis. Ben Zeplin réduit
les contrats et dote ENV. C'est-à-dire que ce sont deux dépendances différentes
de stylos up plane est, a des méthodes prédéfinies
qui sont déjà essayées et testées pour être
utilisées dans n'importe quel projet. Si nous en aurons besoin plus tard, nous ne l'utiliserons que. Et dot ENV fournit une
fonctionnalité permettant d'écrire des données
sensibles dans un fichier
séparé importé. Maintenant, nous avons notre projet, le projet
Hardhead prêt. Il suffit d'ajouter notre projet dans le fichier de code VS, ouvrir le projet que trois. Et pour ce faire, K. Et nous nous assurons que ces extensions
sont installées. C'est surtout solide. Le d cette extension de solidité est cours d'installation dans votre code VS. Oui, c'est la seule
dépendance requise. n'y a pas d'extension
de dépendance. C'est ça. Le projet Hardhead est maintenant configuré avec succès. Dans la vidéo suivante, nous allons inclure notre configuration, comment Alchemy et MetaMask. Merci.
4. Touches d'alchimie et de Metamask: Dans la dernière vidéo, nous avons réussi à
mettre en place ce projet. Maintenant c'est l'heure. Nous incluons l'alchimie. Alchemy est une
plateforme de développement qui nous
permet de créer des applications
décentralisées
évolutives, fiables et décentralisées
sans avoir gérer nous-mêmes
l'infrastructure blockchain. Il vous suffit donc de vous rendre sur alchemy.com
et de créer un nouveau compte. J'ai déjà un compte, je vais
donc m'y connecter. Nous allons vous rediriger vers notre tableau de bord. Ici. La première chose à
faire est créer une nouvelle application
en cliquant sur cette icône. Il suffit de cliquer ici,
puis de lui donner un nom. Je vais le donner. Pour faire ça. Il s'agira d'une chaîne moyenne et le
réseau sera cohérent. Et maintenant, il suffit de cliquer
sur Créer une application. Ensuite, sous cette clé API, cliquez sur View key et
copiez ce lien HTTP. Nous utiliserons cette clé
HTTP ultérieurement. Maintenant, la prochaine chose que nous devons
faire est d'obtenir la
clé privée de notre MetaMask. Vous pouvez installer les
mathématiques en
allant sur le site Web matter mass point au, puis installer l'
extension pour le navigateur. Si vous êtes ici, c'est
que j'utilise Chrome. Vous utilisez peut-être
un autre navigateur. Je ne vais pas configurer
le portefeuille à partir de zéro parce que j'ai déjà
soif et tout ce qu'il contient. Assurez-vous de mettre
cette vidéo en pause et regarder la configuration du
nouveau portefeuille MetaMask. Et aussi
comment tester un test dans ce compte depuis
YouTube ou via Google. Il vous suffit donc de cliquer sur cette icône puis de
saisir votre mot de passe. Et assurez-vous de changer
le réseau pour froidement. Ici, j'ai une tête dure polygonale, sont des réseaux personnalisés, mais assurez-vous que vous avez un réseau
coli et que vous avez
des éthers de test dedans. Pour obtenir cette clé privée, cliquez sur les détails du compte ici, puis sur Exporter la
clé privée et entrez votre mot de passe. Assurez-vous de ne jamais divulguer
ces clés à quelqu'un d'autre. L'adresse de votre compte, c'est-à-dire que cette adresse est votre clé publique. Si nécessaire ultérieurement. Maintenant, nous allons utiliser l'URL d'alchemy et clé privée
Matt Thomas dans
notre configuration hardhat. Pour cela, rendez-vous dans votre projet. Et nous avons déjà installé
la dépendance requise, qui est ce point ENV. Comme je l'ai déjà dit, il n'est pas recommandé de coller ces informations sensibles
directement dans le code. Maintenant, dans ce dossier de projet, créez un nouveau fichier
appelé point ENV. Supposons que c'est dans le répertoire
racine. Et puis collez le collage
ici, toutes les clés, c'
est-à-dire en créant des variables, alchimie, de l'URL et du portefeuille. Clé privée et privée. Copiez et collez ensuite. Encore une fois, il suffit d'
aller voir mon Tamas. Ensuite, je compte qu'il s'agit
d'exporter la clé privée et de la copier et de la coller ici. C'est ça. Nous avons maintenant les clés. Nous devons configurer notre fichier
hard hat dot config dot json pour ces
clés tout en haut. Ce code nécessite notre package dot ENV dot config. Et puis dans ce module
qui exporte le fichier, il suffit d'écrire des réseaux,
puis de passer en réseau linéaire. Et ici dans l'URL, nous allons écrire process point
ENV, point alchemy URL. Et dans les comptes, qui est une liste, nous allons écrire process point ENV, vallate, clé privée. C'est ça. C'est ainsi que nous configurons
alchemy et MetaMask avec nos projets hardhead afin pouvoir
ensuite les
déployer sur le réseau de dettes. Merci, c'est
tout pour cette vidéo. Dans le module suivant, nous allons créer le contrat
intelligent pour notre application Todo.
5. Créer un contrat de tâche: Bienvenue de retour. Il est maintenant temps de créer notre contrat intelligent
solidité. Il suffit d'aller
dans le dossier des contrats ici, vous verrez un contrat fictif qui est plus grand que l'âme,
nous n'en avons pas besoin. Nous n'y ferons rien. Il suffit de créer un
nouveau fichier et de
le nommer tâche, contrat, âme. Et maintenant, créons un
nouveau contrat avant cela. en haut, assurez-vous
simplement inclure cette licence et
donc la version solidité. Ensuite, nous créerons un contrat et ils ont
conclu le contrat de tâche. Commençons maintenant par la
nouvelle structure, qui est une tâche. Notre tâche aura une pièce d'identité. String, fait ce texte, c'
est-à-dire le titre de la tâche, et un booléen est supprimé. Ensuite, ce camion, avons un tableau qui contiendra
toutes ces structures de tâches, qui sera un tableau privé, et nous allons le nommer tâche. Alors quelqu'un
va certainement ajouter une tâche. Nous allons donc mapper ID de la
tâche à l'adresse
du propriétaire du décès. Nous allons donc écrire la
tâche au propriétaire. Et nous
aurons également quelques événements. C'est-à-dire que notre premier
événement aura lieu au crépuscule. Il aura une identité
du destinataire. Et notre deuxième événement
sera retardé au crépuscule. Il aura un
identifiant de crépuscule et un booléen. Comprenons donc ce code. Une fois encore. Les événements sont utilisés pour consigner des informations
dans cette blockchain. Nous créons une structure de tâches. Solidity permet à
l'utilisateur de créer son propre type de données
sous forme de structure. La structure contient
un groupe d'éléments avec un
type de données différent : entier,
chaîne, booléen,
comme nous le voulons. Ensuite, nous avons cette
tâche qui
assurera toutes les tâches présentes dans notre contrat
intelligent. Ensuite, nous faisons simplement
correspondre cet ID de tâche à l'adresse de la
tâche ou non pour
que nous puissions l'obtenir ou que nous
puissions rechercher très facilement. La prochaine chose que nous allons faire
est de créer des fonctions. La première fonction sera
fonction pour ajouter une nouvelle tâche. Il suffit d'écrire la fonction au crépuscule. Il accepte le texte de la tâche. C'est simplement le
booléen mort et le rend externe. Certainement, il sera appelé
depuis le front-end externe. Ensuite, la première chose que nous devons
obtenir est l'identifiant de la tâche. Et tout simplement ce
que nous
allons faire est de faire cette longueur de ce
tableau comme ID de tâche. Donc le premier sera 0, puis il en sera un. Et définitivement
après l'incrémentation, ce sera différent. Ensuite, nous allons simplement
pousser à cette tâche, Eddie, notre nouvelle tâche. Nous allons créer cette tâche. Et comme il nous demande l'identifiant, nous allons donner l'identifiant de la tâche ici, puis le texte et est retardé. J'ai vu
tout cela que nous avons à envoyer. Ensuite, nous allons cartographier
ces informations dans notre tâche pour honorer la cartographie, écrivant
simplement les États-Unis au propriétaire, puis l'identifiant du crépuscule. Et cela appartient à ceci, un expéditeur de message qui demande ou qui
appelle cette fonction, celui de cette personne au
repos sera stocké. Et tout simplement, à la toute fin. Nous allons écrire cela. Nous appellerons l'événement. Et le nom de l'événement est ajouté. Tâche. Le destinataire
sera l'expéditeur du message. Et l'ID de tâche est cet ID de tâche. Ces informations seront donc
stockées dans cette blockchain. C'est donc ça. J'espère que vous avez
compris cette fonction. agit simplement d'une fonction
appelée Ajouter une tâche. Il accepte, fait bureau
et est supprimé de la valeur. La visibilité est externe, car nous n'appelons pas cette
fonction dans ce contrat. Nous venons donc d'
écrire simplement en externe. Ensuite, pour l'ID de tâche, qui consiste simplement à faire
la longueur qui est au tout
début, il sera 0. Ensuite, une fois le crépuscule ajouté, la longueur sera égale à une. Et ce sera aléatoire, toujours S, car nous poussons
cette tâche à l'intérieur. Il sera donc
automatiquement incrémenté. Ensuite, nous sommes
en correspondance avec la tâche deux, propriétaire. Et puis, enfin,
nous diffusons cet événement. Mais c'est tout pour cette vidéo. Dans la vidéo suivante, nous allons écrire les
deux autres fonctionnalités. C'est cela Supprimer
la tâche et récupérer ma tâche. Merci.
6. Supprimer et réparer les fonctionnalités de la tâche: Dans cette vidéo, nous allons écrire la fonctionnalité
permettant de supprimer une tâche. Il suffit d'écrire
le nom de la fonction, nous supprimons la tâche. Ensuite, ce sera un extérieur. Également. Pour supprimer la tâche, nous demanderons cet ID de tâche. Et Boolean est supprimé, ce qui sera vrai. Maintenant, tout d'abord, nous allons vérifier
le mappage, c'est-à-dire
si cet expéditeur
est propriétaire ou non de cette tâche, suggérons que nous écrivons deux propriétaires cet identifiant de crépuscule
égal, expéditeur de message égal. Si c'est vrai, nous allons simplement passer
à la structure des tâches. Il s'agit de cet ID de tâche. Ensuite, le point est supprimé, égal à est supprimé. Ensuite, je rencontre cet événement de suppression du
crépuscule et donne Eddie
et est supprimé des paramètres. Donc simplement, nous avons écrit
cette fonction de suppression. Il demande l'
ID de tâche et est supprimé. Il s'agit d'une fonction externe. Ensuite, avant de supprimer, nous avons juste une petite
vérification si cette tâche appartient ou non à l'adresse de cette
Cendrillon. Si nous allons faire
cette tâche, Eddie. Et simplement dans cet ID de tâche, c'est la position de la tâche dans ce tableau,
comme voir cet ID de tâche. L'ID est également la position. Donc, nous allons simplement écrire, est-ce que id dot est supprimé
égal à ce supprimé ? Quoi que nous envoyons, ce qui
sera certainement vrai. Et puis simplement, nous
émettons ces retards,
supprimons la tâche, même. Ensuite, la fonctionnalité finale sera de récupérer ou
d'obtenir notre propre tâche. Donc, il suffit d'écrire
la fonction, d'obtenir ma tâche. Il s'agira d'une fonction externe. Il verra simplement qu'
il ne changera rien et qu'il renverra la tâche. C'est vraiment une demande de
fardeau de tâche. À l'intérieur de ça. abord, créons
une tâche
temporaire les nommer jolies. Et nous renouvelons. La longueur sera de la longueur du point
crépuscule. Alors ce que nous devons faire, c'est certainement dans cette tâche,
les tâches sont bonnes pour cet utilisateur ou autre,
1015 utilisateurs, quels que soient les
utilisateurs qu'ils sont, toute la tâche
sera dans ce tableau. Maintenant, ce que nous devons faire, nous devons
parcourir ce tableau en boucle et découvrir quelles sont
les tâches qui appartiennent à cet expéditeur, puis les
stocker dans
ce tableau temporaire. Puisque nous allons faire une boucle, allons d'abord avoir ceci. C'est-à-dire qu'
il s'agira
du nombre de tâches
appartenant à cet utilisateur. Ensuite, nous aurons une boucle for. Toi et moi sommes égaux à 0. Je suis moins que le crépuscule, la longueur sombre. Et tout simplement, j'ai plus. Ensuite, nous
cartographions, nous ferons quoi ? Nous utiliserons la cartographie. Alors est-ce que id commence à 0 ? S'il est égal à l'expéditeur du message. Et si la propriété de tâche qui est
supprimée est fausse, elle n'est pas encore supprimée. Ensuite, dans ce tableau temporaire
avec cette position de compteur, simplement dans cette structure de tâches, définitivement dans cette tâche,
éditez les structures de données. Il sera donc stocké dans ce tableau temporaire à
cette position qui est 0. Et ensuite, nous augmenterons
le compteur qui est maintenant, il y aura une tâche à accomplir. Et encore une fois, il va boucler. S'il constate que le
propriétaire est le même. Encore une fois, à une position de ce tableau, il stockera cette
prochaine tâche NesC et remplacera
le compteur à deux. C'est ainsi que cela fonctionne. Maintenant. Nous avons la variable
temporaire, tâche
qui appartient à l'utilisateur, mais
cette durée est plus grande et
les éléments seront inférieurs. Il va donc prendre de la
place inutile. Nous allons donc créer
une nouvelle variable appelée résultat. Et il s'agira d'un compteur de longueur qui n'est
que de la dette. Et tout simplement, nous allons parcourir
cette variable temporaire, U int I est égal à 0 I
inférieur au compteur I plus plus. Et c'est simplement copier et coller tout ce qui est là dans
cette période temporaire. Et à la fin, renvoyez cette variable de résultat. C'est donc la
logique qui sous-tend cela. Obtenez toutes les fonctionnalités de ma tâche. Ce que nous avons fait, c'est d'abord que nous allons créer, d'abord nous
avons créé cette fonction. La visibilité est externe. Cela ne change
rien, donc c'est une vision. Donc, définitivement, il ne
prend aucune phase gazeuse. Ensuite, nous devons préciser
ce qu'il retourne. Il s'agit d'un ensemble
de structures de tâches. Tout simplement, au tout début, nous avons cette variable temporaire, qui ne fait que
stocker la mémoire. Et c'est un tableau de longueur, de longueur de point de
tâche, qui
peut être supposé 100. Ensuite, nous avons ce compteur à 0. C'est-à-dire, quel est l'ordre ? Vous pouvez dire, combien de
tâches cet utilisateur a-t-il ? Ensuite, dans cette boucle for, nous parcourons simplement
toutes les tâches présentes ici et vérifions si
le propriétaire de cet ID, puisque l'idée
commence également à 0,
cet ID de tâche, voir ici. ID de tâche appartient donc à
l'expéditeur du point de message et à la position de la tâche I
qui est égale à 0 position. Supposons qu'il démarre et
soit supprimé. Est supprimé. Vous pouvez dire que la propriété est
fausse car nous le voulons, nous ne voulons pas afficher les tâches qui sont supprimées ou celles qui seront supprimées par cette
fonction. Et nous trouverons, nous allons stocker ici tous ceux
de cette variable temporaire. Et maintenant que la
longueur est plus grande, ou que la tâche peut être de dix, mais la longueur est de 100. Nous ne faisons donc que créer une autre
variable appelée result. Et copiez et collez tous
les éléments présents dans cette variable temporaire cette variable de résultat et elle
sera inférieure au compteur. Et enfin, nous sommes en train de
rendre la valeur. Vous comprendrez le
concept une fois que vous l'aurez utilisé. Ou si vous le souhaitez, vous pouvez
simplement mettre en pause la vidéo et essayer de la comprendre
encore et encore. Parce que ces concepts
sont très importants. C'est ça. Nous avons
créé avec succès notre contrat intelligent. Dans la vidéo suivante, nous allons tester ce contrat
intelligent. Merci.
7. Test d'écriture pour notre contrat: Bonjour. Puisque notre contrat
est prêt dans cette vidéo, nous allons tester toutes les
fonctionnalités. Nous savons déjà que la
blockchain est immuable. Avant de déployer
notre contrat, nous rédigeons des tests unitaires pour nous assurer que toutes nos fonctions et variables de nos
contrats intelligents fonctionnent. Et en rentrant ces valeurs
correctes. Nous utilisons le Mocha
Chai à cette fin. N'oubliez pas que nous avons installé ces
dépendances pendant que nous
portons Installer et
configurer l'installation de
la tête dure dans notre projet. Il suffit donc d'aller
dans le dossier dest et à l'intérieur, créer un nouveau fichier
sous le nom dusk, contrat, test dot js. Et le tout premier, importez nos bibliothèques
que nous devrons attendre de la bibliothèque enfant. Ensuite, nous avons besoin moi de l'interbibliothèque, Arabie Saoudite de la bibliothèque Hardhat. Maintenant, écrivons notre code de test. Décrivez, nous allons
le nommer contrat de crépuscule. Nous aurons alors cette fonction. Il suffit de retirer la fonction
flèche. Si vous le souhaitez, vous pouvez
avoir la fonction flèche. Et avant de rédiger le test, nous aurons quelques variables
à ce contrat. Ensuite, nous aurons cela
dans cette petite lettre, nous aurons un contrat. Il s'agira de l'objet ou de l'
instance de notre contrat. Vous comprendrez
cela plus tard. Ensuite, nous aurons le propriétaire. Et maintenant, comme c'est un test, nous devrions avoir des données factices. Le numéro de
l' hôtel ou de la
tâche factice sera donc cinq. Et nous aurons également une
variable appelée « ask ». Plus de voitures utilisent des crochets pour
organiser sa structure. Ce mot G pleuré de bureau est
utilisé pour regrouper notre test, que vous pouvez imbriquer
aussi longtemps que vous le souhaitez. C'est, encore une fois, vous
pouvez écrire une description. Encore une fois, vous pouvez
écrire ceci comme ça. Ensuite, il y a aussi d'autres crochets. C'est moi, c'est aussi un crochet. Il s'agit d'un cas de test que nous
utiliserons dans les prochaines vidéos. Ensuite, nous avons avant crochet ici dans la bibliothèque plus calme. Ceci avant le crochet est lancé
avant le premier repas. Notre scribe de bureau. Autrement dit, si nous écrivons juste avant, il s'exécutera avant
que le premier ne soit le bloc de description, puis nous avons avant chacun, que nous utiliserons
pour exécuter avant chacun. Autrement dit, il s'
exécutera avant chaque clause
ou l'instruction, ou mangera ou décrira les impressions. Ensuite, nous l'avons après. C'est un crochet pour courir après ça. Est-ce qu'il s'est vraiment enfui ? Huit sont décrits. Au tout début. Je vous ai parlé de ça. ID. crochet. Ces cas de test. Nous avons des cas comme celui-ci. Les crochets et le plus important
sont avant chaque guide de bureau. Et disons maintenant que nous allons l'utiliser avant chacun. Avant chacun. Désolé, ce sera comme ça. Et à l'intérieur de cela, nous
aurons une fonction sinc. Ici, nous déploierons
notre contrat de tâche. Avec cette variable. Nous utilisons cette
variable en premier et écrivons simplement attendre, mangeurs, dot get,
contrat usine. Notre nom de contrat
est « contrat ». Ensuite, nous avons le propriétaire, qui viendra d'un poids, les mangeurs ont des signataires. Ensuite, dans le cadre de ce contrat de
petites tâches, nous aurons cette instance
de ce contrat de déploiement. ne s'agit que d'une simulation. Cette tâche
sera alors vide. Et nous allons insérer une
tâche factice dans cette tâche totale. C'est I est égal à 0. Je serai inférieur au
nombre de tâches
totales, soit cinq. Moi, en plus. Allons-y. C'est le cas. Vérifiez que le texte
sera simplement que tout ce que vous voulez ajouter, le nombre
semble le rendre aléatoire. De plus, je suis ensuite
supprimé, est faux. Ensuite, nous aurons un
poids qui contracte le DOD. À la fonction pass, nous utilisons. Crépuscule, sombre, le texte est supprimé. Cette fonctionnalité est
celle qui est à
fait qu' elle demande des tâches
dont le texte et la valeur booléenne. Ensuite, nous allons simplement pousser, puis Bush fait le crépuscule. Par conséquent, dans cette variable, nous poussons cette valeur. Donc, avant que h ne s'exécute, avant chaque test défini. Plus tard, nous
définirons le test de 23 unités. Et avant chaque test, ce
morceau de code sera exécuté. Oui, nous sommes en train de déployer
notre contrat, puis
d'obtenir une instance, puis d'y ajouter
cinq tâches factices. Maintenant, après cela,
créons simplement un nouveau bureau qui est un
test unitaire pour ajouter une tâche. Nous allons décrire, comme je l'ai
dit, que nous pouvons l'imbriquer. Il s'agit de la fonctionnalité Ajouter une
tâche. Fonction. Ensuite, nous allons maintenant utiliser
la clause IT, it. Et ce n'est que la suggestion
automatique. Donc, l'état
du bureau doit être respecté lors de l'événement de tâche. Ce sera une fonction sinc. en haut, nous allons simplement écrire, créer une nouvelle tâche factice. Tâche. Texte est égal à, new. Tâche, est retardée
alors sera fausse. Ensuite, nous attendrons et utiliserons le mot-clé attendu de
cette bibliothèque enfant. Nous nous attendons d'
abord à ce que la tâche soit contractuelle. Au moment de la tâche, nous
ajouterons cette nouvelle tâche, le crépuscule, le texte et le crépuscule sont supprimés. Il va émettre. Il va me le faire. Nous devons d'abord
envoyer l'instance. Et ce qu'il va émettre, c'est celui-là. Au crépuscule, il
émet des arguments, des
arguments, du propriétaire, l'adresse et
du nombre total de tâches. Donc, vous êtes peut-être
confus. C'est donc parce qu'à la
fin de la fonction de tâche, nous émettons l'événement
Ajouter une tâche. Avec les arguments, vous pouvez voir expéditeur de points de
message et l'ID de tâche. Et comme cela
avant chaque clause, nous avons déjà cinq tâches. C'est-à-dire que nous
ajoutons ici cinq tâches. Donc, cette sixième tâche que
nous ajoutons ici, nous aurons l'ID cinq
comme index à partir de 0. C'est pourquoi c'est juste. L'ID sera de cinq, car il y a
cinq tâches. Et l'index est que nous commencerons
toujours par 0 dans cette tâche, cet ID de tâche. Si vous le souhaitez, vous
pouvez juste attendre et essayer de le comprendre
encore et encore. Parce que c'est très important. Et vous effectuez des contrôles
de qualité ou pour comparer les résultats
attendus à un résultat. Nous pouvons utiliser la bibliothèque Chai, ce qui nous donne trois affirmations. C'est d'abord celui que
nous utilisons attendre, puis il y a une affirmation
et il y a du devoir. Dans ce tutoriel, nous allons simplement utiliser cela en s'attendant à ce
que ce plat émette la
valeur attendue ou qu'il
affiche une erreur et que la tâche
ne réussira pas. Vous pouvez dire exécuté. C'est donc tout pour cette vidéo. Dans la vidéo suivante,
nous terminerons les deux autres tâches
et effectuerons notre test. Merci.
8. Effectuer le test unitaire: Bonjour. Il est maintenant temps d'écrire
ce test unitaire final. Nous avons déjà écrit le
test d'ajout d'une tâche. Maintenant, écrivons un test pour
obtenir tout ce qui fait, c'est-à-dire obtenir la fonction de tâche. Ensuite, dans la clause, laissez-la renvoyer le nombre correct
de tâches totales. évier. Déjeuner. Alors, allons-y. Ma tâche est égale à attendre. Contract dot obtient-il ma tâche ? C'est-à-dire que ça comprend ma
tâche, c'est celui-là. Obtiens ma tâche. Ensuite, nous vérifierons
ce que nous allons vérifier. Mon point de crépuscule. La longueur doit être égale. Celui-là, c'est le nombre
total de crépuscule. Donc, ce que nous vérifions, c'est l'
ajouter avant chaque clause. Nous ajoutons cinq tâches à
cela, en utilisant cela, n'est-ce pas ? En utilisant cela, nous
ajoutons cinq tâches. Donc, lorsque cette condition
se déclenchera déjà, il y aura cinq tâches
dans notre contrat intelligent. Nous allons donc simplement vérifier
s'il est correctement saisi ou vous pouvez dire qu'
il est là ou non, nous allons simplement vérifier cela. Maintenant. Le prochain test consistera simplement à éliminer la poussière
qui est retardée par le crépuscule. Fonction. Alors cette condition devrait être elle devrait émettre un crépuscule retardé. Il devrait émettre.
Supprimez même la tâche. Il s'agit alors d'une fonction sinc. Alors const dusk
id est égal à 0. Alors const est égal à vrai. Maintenant, attendez simplement. Attendez-vous. Est-ce que la tâche de suppression de points est contractuelle lorsque nous l'appelons en
envoyant cet
ID de tâche et en demandant la suppression,
elle devrait émettre. Il devrait s'agir de cet événement de
tâche de suppression avec les arguments id et dusk supprimés. Tout simplement, ce que
nous faisons, c'est que nous appelons cette fonctionnalité Supprimer la
tâche. Et comme il émet ici
cet événement de tâche de suppression, nous vérifions s'
il s'agit d'une réunion ou non avec cet
ID de tâche et ce booléen. Et nous nous souvenons simplement
que
nous mettons simplement à jour la valeur supprimée car nous ne pouvons pas supprimer
de données d'une blockchain. C'est ça. Maintenant, sauvez tout. Et puisque toutes ces conditions de
test sont prêtes, il est temps d'effectuer notre test. Il suffit d'ajouter un terminal dans votre répertoire racine et d'écrire la commande et le test
px hard hat. Voyons si tout va bien. Ou il peut y avoir des
erreurs. Nous ne savons pas. Voyons voir, Voyons si cela fonctionne ou ne se compile pas correctement. Cette valeur est plus grande que celle par défaut. Nous n'avons rien
à voir là-dedans. Voir toute la tâche, tous les tests unitaires ont
réussi, c'
est-à-dire, au crépuscule, obtenir tout est supprimé, fait tout, fonctionne. Rappelez-vous simplement si vous
obtenez une erreur, puis après avoir corrigé cette erreur, utilisez la commande et
px hard hat clean, puis lancez ce test à nouveau
car il peut
y avoir argent et vous ne
voulez pas obtenir coincé là. Mais dans notre cas, il n'y a rien de mal. Tout fonctionne. Félicitations. C'est donc tout pour la partie test
unitaire. Dans le prochain module, nous déploierons notre
contrat sur le VLR, sur le réseau de test. Merci.
9. Écrire le script de déploiement: Comme notre logique contractuelle
fonctionne, dans cette vidéo, nous allons écrire les déploiements, créer et déployer notre contrat sur ce réseau
de test. À l'intérieur du dossier de scripts, il suffit de développer et d'aller créer un nouveau fichier et de
le nommer déployé dot js. Nous allons maintenant écrire
le code requis. Tout d'abord, nous aurons
besoin de la bibliothèque d'Ito. Créons ensuite une
fonction appelée main. Ce sera une fonction sinc. De même, nous aurons une piste sans aucun fait contractuel. Trois, les mangeurs ont un contrat. Factory, le nom est crépuscule. contrat de ce contrat est le
nom de notre contrat. Ensuite, nous aurons une
instance avec ce code, contrat pour le déploiement de points commerciaux. Ensuite, nous attendrons et
veillerons à ce que le contrat soit déployé avec succès. Et après cela, nous
écrirons console.log et nous afficherons l'adresse
déployée. C'est très important. Rappelez-vous ce contrat, nous
l'utiliserons simplement dit adresse de point de
contrat. Maintenant, nous devons appeler
cette fonction principale. Et simplement pour cela, nous devons créer une autre
fonction appelée évier. Puisque c'est la procédure et n'oubliez pas de le
faire comme nous devons appeler
la fonction principale. Et si c'est le cas,
tout va bien, alors nous quitterons le processus. Et si ce n'est pas le cas, nous allons
détecter l'erreur. Nous consoles consignerons l'erreur et
écrirons simplement le processus qui
quitte et un éditeur. Et à la toute fin, il suffit d'appeler la fonction principale. C'est ça. C'est ainsi que vous pouvez
déployer un script. Il faut juste se
rappeler que c'est tout. Maintenant, c'est le script qui est écrit. Déployez-le. Nous devons utiliser une commande. Une fois encore. Soulevez votre terminal
et écrivez le casque np x. Ensuite, exécutez des scripts dans ce dossier, allez à déployer dot js. Ensuite, le réseau que nous utiliserons est
appelé tôt comme ce nom, ce G, E, LI, nous l'avons mentionné dans le fichier de configuration de points
durs. Après cela, il suffit d'appuyer sur Entrée. Cela va prendre un certain temps. Il suffit donc d'attendre. Parce que maintenant, cela va être
téléchargé ou cela va déployer ce contrat intelligent sur le réseau de test réel. D'accord ? Maintenant, c'est fini. C'est ce
contrat à habiller. Assurez-vous de le
copier et de le coller
quelque part, comme ici. Parce que nous en aurons besoin
plus tard et nous ne
voulons pas simplement l'oublier. Maintenant, pour vérifier
si ce contrat
existe avec succès, nous devrions aller sur le site Web de balayage
éther courtois. Il suffit de cliquer dessus,
le premier. Ensuite, collez cette adresse de contrat
et cliquez sur Rechercher. Cela donnera toutes les informations sur ce
bloc. Vous voyez, il y a 50 secondes, ce bloc a été créé. Et avec cela, nous nous
assurons que
tout s'est bien passé. Si vous le souhaitez, vous pouvez
simplement cliquer dessus et voir à partir de quelle adresse
il a été poussé, prix de l'
essence et tout. C'est tout pour cette vidéo. Tout est maintenant fait
à partir de la partie backend. Dans le prochain module, nous allons configurer le frontal l'aide du
framework React. Merci.
10. Travailler sur le front React: Bonjour, bon retour. Dans cette vidéo, nous allons travailler sur la section frontale à
l'aide du framework React. React JS est une
bibliothèque JavaScript très populaire. Et j'espère juste
que vous en connaissez les bases parce que ce n'est
certainement pas
le tutoriel React. Notre objectif principal
sera de créer une interface utilisateur de base et de tester
notre contrat intelligent. Maintenant, pour configurer
un projet React, il suffit d'ouvrir le
terminal et d'y aller. Vous devez faire le répertoire DHAP
et exécuter cette commande et px, Create, React, app,
nommez le client. Maintenant, peu de dossiers, structures et de fichiers
seront téléchargés. Pour l'application React. Cela prendra un certain temps. Ensuite, vous pouvez simplement consulter votre code et voir
ce que vous avez fait. C'est le
contrat de travail de bureau du crépuscule. Et parce que ces concepts
sont très importants, car une fois que vous aurez créé un projet, vous pourrez
créer plusieurs projets
en utilisant les mêmes concepts. OK ? Cela a pris un peu de temps, mais maintenant tout
est en cours d'installation. Accédez à ce client et
vous pouvez voir que nous avons source oblique et
tous les dossiers sont créés. Maintenant, pour interagir avec notre contrat intelligent
déployé, nous aurons besoin de deux choses. abord, le contrat est traité et le
second est l'ABI. Pour obtenir l'ABA, il suffit de copier ce fichier json point de
contrat de tâche, qui se trouve à l'intérieur des artefacts, c'
est-à-dire ces artefacts. Ensuite, nous avons des contrats. Ensuite, nous avons
vendu des points de contrat de travail . Et nous avons ce dossier. Il suffit de copier ce fichier et d'
aller dans le dossier client. Et créez ici, juste
à l'intérieur du dossier source, créez un nouveau dossier appelé
EBI et collez-le. C'est ça. C'est dans le dossier
source du client. Nous créons un nouveau dossier appelé ABI et collons ce fichier JSON, qui contient le contrat ABI. La première chose que j'ai dit,
c'est l'adresse du contrat. Nous avons déjà cette adresse de
contrat lorsque nous l'avons déployée dans
notre vidéo précédente. Il suffit de créer un nouveau
fichier et de le nommer, config dot js dans le dossier
source client directement
ici. Et nommez-le, config dot js. Et écrivez simplement la commande
export, const, tâche, contrat, adresse et collez notre adresse, c'
est-à-dire celle-ci. Ici. Ces deux-là étaient nécessaires. Maintenant, nous devons également installer
peu de dépendances. Il suffit d'aller à l'aveugle
plié, n'aime pas ce client CD. Assurez-vous que vous êtes dans
le dossier client et installez des ethers. C'est npm install ethers. Ceci est nécessaire pour interagir avec le contrat intelligent
depuis le front end. Et puis la prochaine dépendance, qui est requise est npm
install emotion slash edX. Ensuite, coiffez. Chez MU I. je peux faire de l'ADL. Ensuite, MU une divinité. C'est-à-dire npm, installez la barre oblique d'
émotion réagit moins que MU I, le matériau des icônes que le matériau de barre oblique
MUS. s'agit simplement de fichiers liés à l'
interface utilisateur de
style et de matériel que
nous utiliserons ultérieurement. OK. Toutes les dépendances
sont maintenant installées. Je voulais juste
voir Jason de Becky. Oui. Tout est là. Maintenant,
travaillons sur ce front. La première chose que nous allons faire
est dans le dossier source , nous avons app.js. Nous supprimerons tout ici et commencerons à
écrire à partir de zéro. La première chose que nous allons
faire est d'importer, de réagir, d'utiliser la date, de l'accrocher, l'utiliser, de l'effet de React. Ensuite, nous importerons le prochain champ Martin à partir de matériel MU. Ensuite, nous allons importer tâche, le fichier de tâches. Et rappelez-vous, ce fichier
que nous n'avons pas créé. Nous devons créer et malades. Ensuite, nous allons importer. Nous allons simplement importer des points CSS, notes
douces, sss comme celui-ci. Ensuite, la prochaine chose à importer
est l'adresse du contrat. Nous allons juste dire l'
adresse du contrat de crépuscule à partir de ce fichier de configuration. Fichier de configuration. Ensuite, nous l'
importerons depuis la bibliothèque. Enfin, nous allons
importer cette tâche ABI à partir du dossier EBI, puis le contrat adjacent. Il s'agissait donc
de toutes les entrées nécessaires. Ensuite, nous devons
écrire et créer un composant d'application et
exporter un composant. Et encore une fois, j'espère que
vous connaissez tous ces concepts de
réaction. Créons quelques états. Tâche. Et nous allons mettre le crépuscule. Utiliser l'état. Il s'agit d'un tableau vide. Il va nous occuper de notre tâche. Ensuite, la prochaine sera saisie. Entrée. Vous indiquez qu'
il s'agit du texte entré
à partir de ce champ de texte. Ensuite, nous avons un compte courant. Compte courant. Utilisez le pour vérifier si mon damassé est connecté et
ensuite son adresse de compte. Et le dernier que nous aurons
ici est le réseau correct. Et il sera réglé. Correct. Network est
égal à l'état d'utilisation. La valeur par défaut sera false. Il veillera à ce que le
réseau de test à l'ail soit sélectionné. Sinon, il demandera à l'utilisateur de
modifier son réseau. Maintenant. Commençons par créer deux nouveaux fichiers dans
le répertoire source. La première sera la tâche point js. Comme je l'ai déjà
mentionné, nous devons créer ici, simplement ici, n'est-ce pas ? Import fait des points CSS, que nous allons créer tout de suite. Et ce composant, c'est la tâche et exportation par défaut. Crépuscule. Plus tard, nous enverrons également
quelques accessoires. Et dans cette source, encore une fois, créez un fichier appelé dot CSS. C'est tout pour cette vidéo. Nous avons écrit beaucoup de code. Dans la vidéo suivante, nous allons travailler sur la configuration notre masque Meta et sur la façon de s'y
connecter. Merci.
11. Connecter un portefeuille en métallisé: Bonjour, bon retour. Maintenant, la première chose que nous allons faire est de connecter notre portefeuille
MetaMask. Bien sûr, nous devons écrire
une fonction pour cela. Nous allons l'écrire à partir de zéro. Je vais le nommer, connectez le portefeuille. Ce sera une fonction sinc. Maintenant, dans le bloc
try catch écrivez toute la logique
requise. Et dans les outils de CAO
dans le journal de console AD Connect chose pour créer un masque, l'en-tête. Et dans ce bloc d'essai, abord, nous aurons de l'ennui. Tedium, musical à
objet Window, objet fenêtre. Ensuite, nous vérifierons si nous avons ou non l'objet
bactérien. Si nous n'avons pas d'objet italien, nous allons simplement
consoler le journal avec damassé. Damas non détecté. En d'autres termes, l'utilisateur n'a pas
installé extinction
massive
dans son navigateur. Et si tout va bien, alors nous vérifierons quel
réseau est alors un Dharma, mon damassé, connecté rose, qui est buccal soit
pieux, peu importe. Nous obtiendrons donc l'identifiant de la chaîne. Jane id est égal à attendre
l'ennui, cette demande. Ensuite, à dix ans, nous lui donnerons un identifiant de chaîne. Et ensuite, nous allons simplement consoler la chaîne
AD aussi bien que pour nous, car
pour les tests et
je le connecterai à la
chaîne, à la chaîne AD. OK ? Nous allons maintenant écrire l'idée
de chaîne du réseau central, qui est 0, petit x cinq. Rappelez-vous simplement que c'est l'idée de
chaîne du réseau courtois. Si vous utilisez la ride B
, elle sera 0 X4. Vous pouvez également
obtenir ces informations sur Internet.
Vous pouvez simplement le Google. Donc, la première chose que nous
allons faire est de vérifier si j n'est pas égal à j dans ID, alors nous allons simplement
alerter, n'est-ce pas ? Vous ne devez pas
aller tôt en réseau et
simplement revenir d'ici. Et si tout va bien, c'est
que le réseau est correct, alors nous changerons
l'état qui alors nous changerons
l'état qui
est défini sur vrai. Nous savons au moins que le
réseau est connecté. C'est-à-dire que le bon
réseau est connecté. Ensuite, nous obtiendrons les comptes avec ce morceau de code à la demande de point
Tanium. Ensuite, ici, la méthode que nous utiliserons
est de demander des comptes et la console consigner ces
informations également. Donc, le compte de la blessure du journal, puis le premier compte. Comptabilise l'indice 0
et les gènes sont définis. C'est cette valeur
du compte courant
de mon compte damassé. OK. J'espère que vous avez
compris ce code. C'est exactement comme ça que nous
relions mon Damas. Il suffit de
comprendre ce que c'est. Tout d'abord, nous vérifions s'il est connecté
pour aller avec vous ou non. Deuxièmement, nous
demandons que cela compte. C'est ça. Rien de fantaisiste. C'est juste qu'avec la pratique, vous vous souviendrez de ces codes. C'est ça. Maintenant, la fonction ou la partie
méthode est terminée. Il est temps d'écrire également la partie
HTML. Donc au sein de la fonction, ce troisième, il est en dehors de
cette fonction de connexion valide. Nous allons simplement retourner
cette composante. C'est un retour. Et Dave, tout d'
abord, nous allons vérifier si ce compte courant est vide sur l'utilisateur connecté,
c'est un masque de matière ou non. Donc, compte courant. S'il est vide, alors nous ferons quelque chose. Sinon, nous ferons autre
chose. S'il est vide, nous écrirons simplement en
gagnant le tag central, nous donnerons un bouton. Bouton. Le nom de la classe
sera simplement un bouton. Et dans le clic, événement attribuera la fonction
Connect valide. OK ? Et nous allons nommer
ce lien comme une guerre. OK. Maintenant, dans l'autre partie, encore une fois, nous allons vérifier si le réseau est
correct. Ensuite, nous ferons quelque chose. Ou comme nous allons faire autre chose. Et si le bon
réseau est là, nous pouvons simplement le sortir Dave. Il suffit de sortir un Dave,
je vais le nommer. Appli. Ensuite. Il suffit d'écrire la gestion des balises H2
et des tâches, notre application à faire, quelle que soit l'application de gestion des
tâches. Ensuite, je vais aimer la balise de formulaire. Je vais utiliser une étiquette de formulaire. Ensuite, je vais
lui donner un champ de texte. Cadre de texte. N'importe quel bouton. Le bouton sera majuscule. Maintenant, écrivez simplement
ce code HTML avec moi. Nous nous concentrons davantage sur
la partie blockchain. Ils sont très basiques. Celles-ci sur Blake au
premier événement onclick. Je vais juste en donner
un autre maintenant. Je ne veux rien faire. Ce bouton sera écrit dessus
au crépuscule. Et dans ce champ de texte, je vais simplement écrire ID,
ID, contour, basique, puis libellé, faire à faire. Puis variante. Décrite. Ensuite, coiffez. J'aurai simplement une marge 0 pixels et chaque pixel est petit. Valeur. La valeur sera saisie. C'est-à-dire cette contribution. Et inchangé. Onchange
écrira simplement que ceci, peu importe ce que nous obtenons ces
textes dans le e, définira l'entrée e
point, point get value. OK ? Ce sont tous les textes remplis d'huile provenant de l'
emballage MUN. Donc, si vous le souhaitez, vous pouvez effectuer une
recherche à ce sujet dans Google. C'est à vous de choisir. Ensuite,
dans la partie S, nous allons simplement écrire une div. Il suffit de l'écrire, Dave. Et à l'intérieur, nous allons écrire. Veuillez vous rendre sur l'écran
ESNet principal et recharger. Je veux dire, ils ne donneront que
des noms de classe si vous voulez. Ces drapeaux. Appelez juste le visage centré, centré, mon jeu. Planche. Les deux prochains Excel. Pourquoi ? Plus tard, si vous le souhaitez, vous pouvez
utiliser CSS comme le CSS tailwind, et c'est à vous de décider. C'est donc ça. Pour la fonction Connect
vallate. Et la partie HTML. Autrement dit, si ce
violet actuel est vide, nous afficherons le bouton. Si ce n'est pas
le cas, si le réseau est présent et que le
compte courant est correct
, nous aurons
le bouton Ajouter. J'aurai simplement le bouton Ajouter,
sinon nous allons simplement lire. Veuillez vous connecter au
réseau comme ceci. C'est donc tout pour aujourd'hui. Dans la vidéo suivante, nous allons également écrire d'autres
fonctionnalités. Merci.
12. Ajouter une fonctionnalité de tâche: Bonjour, bon retour. Dans cette vidéo, nous allons travailler sur la fonctionnalité Ajouter une tâche. Mais avant cela,
lançons notre application. Il suffit d'aller dans le dossier, ouvrir le terminal
et npm. Commencez. Voyons comment ça marche. Désolé, nous devons d'abord accéder
au dossier client
, puis écrire npm start. Parce que le client fait
partie de React. Cela peut prendre un certain temps. Nous devons tester la fonctionnalité Connect
Wallet, qu'elle fonctionne
correctement ou non. Voyons voir. J'espère que nous n'avons
pas fait d'erreur depuis que c'est pour la première fois. C'est pourquoi
cela prend autant de temps. Mais voir le serveur de développement. Ça a commencé. Ça en prend un peu
trop. Je sais. Oui. C'est fini. Mais l'homme. D'accord. Je sais qu' il n'y a rien de tel que
le CSS et maintenant nous le
ferons, nous allons le coiffer plus tard. Mais pour l'instant, je
clique simplement sur le portefeuille Connect. D'accord. C'est arrivé. Vous pensez peut-être
comment cela s'est passé, mais comme j'avais déjà ce compte
connecté en ce moment, si je me rafraîchis et que je clique
sur Connect ou voyons, la notification est arrivée. Et si je lis ensuite
et que je les connecte, alors l'application de gestion des tâches. Cela fonctionne correctement. Nous allons maintenant travailler sur la fonctionnalité
Ajouter une tâche. Tout simplement. Et le crépuscule est
égal à un évier. Le point E empêche la valeur par défaut. Ceci est utilisé pour ne pas
soumettre le formulaire. C'est ça. Pour empêcher le comportement
par défaut de ce formulaire. Ensuite, je vais créer
un objet tâche. Crépuscule. Le texte sera saisi est retardé, ils seront faux. Alors travaillons sur
ce bloc d'essai de capture. Ici. Je vais simplement soumettre cette tâche. Ensuite, dans cet essai, encore une fois, nous aurons
un TDM ou vérifié. Alors vérifiez simplement s' il est là ou sinon, si ce n'est pas le cas, alors je
vérifie tout. Je sais déjà que le compte
a été connecté, mais pour être en sécurité. La vérification n'existe pas. Alors, s'il est présent. Maintenant, travaillons. Const provider est égal à nouveaux ethers que fournisseurs, Dodd, Web three, Heider. C'est Hadean. Ensuite, nous aurons le signataire. C'est const disant que c'est égal à fournisseur,
pas obtenir Signer. Ensuite, nous allons nous mettre sur la bonne voie. Instance, est-ce que le contrat est égal à mes mangeurs qui contractent. Ensuite, nous devons
envoyer trois choses. Premièrement, le contrat
traite-t-il cette tâche, ABI et fait du cyanure. Et enfin, avec
ce contrat de tâche, nous appellerons la
fonction « add », qui se trouve dans le contrat intelligent. Nous allons envoyer le crépuscule. Texte au crépuscule. La tâche est supprimée. Et comme il s'agit d'une tâche de synchronisation
, nous obtiendrons la réponse. Et cette réponse. Ici, nous allons simplement l'
écrire dans cet ensemble de données. Est-ce que c'est cette tâche de
tableau ? Et nous ajouterons toutes les tâches qui
sont déjà là avec cette nouvelle tâche que j'utilise
l' opérateur spread ici
avec cette nouvelle tâche, d'accord ? Et puis s'il y a une
erreur et nous l'attraperons. Si nous obtenons également une erreur
, nous allons simplement l'attraper. Et le journal de console qui a été ajouté. Cela a été ajouté. Pourquoi ajouter une nouvelle tâche ? C'est ça. Et à la
toute fin de la fonction le champ
InputField
sera à nouveau vide. Définissez l'entrée vide. C'est ça. C'est ainsi que nous écrivons la fonctionnalité
Ajouter une tâche. Nous venons d'envoyer le Web au fournisseur à
partir de la bibliothèque Keras. Et nous envoyons mon Damas,
Les contes, et nous recevons ce Signer. Ensuite, nous créons l'objet
contrat et appelons simplement la tâche Ajouter. Ensuite, ce que j'ai fait, c'est
dans la réponse, je mets simplement à jour ce qui fait ces choses afin que dans
l'interface utilisateur, les choses soient modifiées également. Dans cette tâche. J'ajoute aussi ce crépuscule. C'est donc ça. Pour cette vidéo. Dans les prochaines vidéos, nous allons compléter les
principales fonctionnalités. Merci.
13. Supprimer et réparer la fonctionnalité de la tâche: Bonjour, bon retour. Travaillons maintenant sur la fonctionnalité de tâche
tardive de ce jour-là. Il suffit de créer une
fonction IF, de supprimer la tâche. Nous devons également envoyer une clé. C'est la clé de l'ID de l'article. Les premiers trucs. Enveloppons tout dans le bloc
d'essai comme d'habitude. Ensuite, V, nous allons consigner le journal. Ensuite, dans cet essai, les femmes font simplement la même chose, ce que nous avons avant. Il s'agit d'un objet fenêtre. Ensuite, si ADM est là, cette chose en tant que vérification du journal de points de la
console n'existe pas. Si nous prenons l'idiome est là, alors ce que nous devons
faire est pareil. Ceci, ces lignes,
copient simplement les trois premières lignes. Remarquez le nouveau fournisseur KTM, puis le
signataire du contrat et tout. Et enfin, il suffit d'
écrire la suppression. La transaction est-elle égale à attendre, contrat de
crépuscule Dot Delete Task. Et cette clé et est
supprimée sera vraie. Ensuite. Ensuite, ce que nous allons faire c'est obtenir toute cette tâche à partir des fonctionnalités que nous avons déjà dans
le contrat intelligent. C'est ma tâche. Vraiment appeler ça le point de
contrat de tâche, prends mon crépuscule. Et puis dit cette valeur de
tâche ici, en utilisant le crépuscule défini et le biais
qui sont un objet crépuscule, c'est le résultat. Donc c'était simplement que la tâche seule cette
ligne de code était nouvelle. Et de même, nous aurons une fonctionnalité d'ajout
appelée tâche chat all. Il en sera également de même. Donc ce que je vais faire,
c'est tout d'abord, cette const d'écriture, obtenir la
tâche va couler. Et puis la même chose. Essayez le bloc de capture. Ici. Nous allons annuler cet ajout de loi. Et dans cet essai, bloquez, copiez
simplement ceci, collez-le ici et supprimez cette tâche de suppression. Ok, donc nous avons le fournisseur, nous avons le signataire, nous avons le contrat de tâche. Ensuite, nous avons du plomb. Toutes les tâches sont égales à attendre le contrat
de tâche et obtenir ma tâche. Et nous allons simplement dire
cette tâche ici, c'est tout. C'est donc la fonctionnalité
permettant d'obtenir toutes les tâches. Ces codes sont
vraiment très similaires. Si vous avez une autre
façon de
l'écrire pour que la
répétition ne soit pas là, ce sera très bien. Mais pour un débutant,
c'est suffisant. C'est donc tout pour cette vidéo. voit lors de la prochaine session. Merci.
14. Créer le composant de la tâche: Bonjour, bon retour. Dans cette vidéo, nous allons
créer ce composant de tâche. Donc, si vous vous en souvenez, nous avons créé ce point
qui est le fichier test.js. Ici. Travaillons là-dessus. Nous importerons peu d'éléments
de l'interface utilisateur des matériaux. Cette liste, liste,
article, liste, article,
liste, article, élément, texte provenant du matériel
MU I. Et la deuxième chose que nous
allons importer la suppression que je peux de mon téléviseur c'est les icônes de l'interface utilisateur que le
matériel supprimera ensuite. Le composant de tâche. Nous accepterons deux propriétés, à savoir le crépuscule, le crépuscule
et la fonction sur le lac. Ensuite, il retournera la liste. Il renvoie une liste Nom de classe à faire. Puis lister, élément. Et au moins un texte DEM. Mais je pourrais
manger est
égal manger est au crépuscule. Texte au crépuscule. Ensuite, nous aurons une icône Supprimer. La taille de police sera grande. B, C, D, 0,7. Et la fonctionnalité sur clic
sera sur le clic, que nous transmettons
en tant que propriété. Maintenant, nous devons travailler
sur le fichier app.js. Tout d'abord, nous utiliserons l'effet américain Hooke. Et au tout début, ces fonctions devraient
être appelées une fois, mettez-vous en tâche et
connectez-vous à tout cela. Dès que l'application est rendue, ces deux fonctions
doivent être appelées. Ensuite, ce que nous allons faire, c'est dans
ce bouton qui est au crépuscule, nous devons supprimer
la valeur nulle et droite et lui attribuer la
fonctionnalité Ajouter une tâche. Et après suffisamment de fin de ferme, nous en aurons, vous devrez taxer. Il s'agit d'une liste non ordonnée. Et en cela, nous
aurons une carte de points du crépuscule. Ensuite, je suis DM. Chaque élément sera nous aurons ce composant de tâche. Et dans le composant tâche
que nous vous enverrons, il s'agit
peut-être d'un identifiant item.name. Ensuite, l'élément suivant, pas le texte du crépuscule. Ensuite, sur Blake, nous enverrons simplement des fonctionnalités différées
avec l'ID de l'article. La carte d'identité est la clé ou vous
pouvez dire que c'est ma journée, ce que vous voulez. Donc, ça fait des dettes. Maintenant, tout est là. Que notre application est terminée. Dans la vidéo suivante, je vais juste lui donner un peu
de CSS de base. Et enfin, nous allons
tester notre application. Merci.
15. Styles CSS de base: Bonjour, bon retour. Dans cette courte vidéo, nous allons simplement implémenter un style CSS de base
pour notre composant tâche. Il suffit donc d'aller dans ce fichier
CSS de tâches que nous avons
créé précédemment, puis d'écrire simplement la liste de tâches de nom de
classe. Donnons un peu de style. affichage. Manque. Justifiez, centré sur
le contenu. Aligner, éléments. Centre. Ensuite, il
sera de 800 pixels. Bordure d'un pixel. Donc, gris clair. Et puis la marge, en bas. Ensuite, choisissez la cellule. Et faisons en sorte que cela soit
important. Ensuite. La prochaine chose que je
voudrais dire,
c'est qu'à dix ans, c'est 18 connect wallet. Mais ensuite, nous avons ce cours. La couleur de fond sera pour C, E, F, 50, c'est le vert. Alors la frontière ne sera pas. Puis coloré. blanc. Ensachage. Pixel à pixel. Puis textez, alignez, centrez. Decks, décoration, aucun. affichage. En ligne. Bloc. La taille sera de 16 pixels. Marge. Ils vont
donner de faire un pourcent. Et enfin, alignez les éléments
au centre et enregistrez-les simplement. C'est un style très basique. Et nous avons également importé le fichier
style.css. Je vais juste m'assurer que c'
est important à cette fin. Je l'aime bien comme ça. C'est donc tout pour cette vidéo. L'ensemble de la demande
est maintenant terminé. Dans le dernier module, nous commencerons simplement à
travailler sur cette obligation. Et j'ajouterai aussi ce
code quelque part à la fin. Vous pouvez simplement
le trouver pour pouvoir, si vous rencontrez un problème, vous pouvez le comparer
à votre code. Merci.
16. Tester la demande complète: Bonjour, bon retour. Nous avons donc
complété la demande avec succès. Dans cette vidéo, nous allons
simplement passer en revue le fonctionnement de l'application et vérifier si tout
fonctionne bien ou non. Maintenant, je vais aller
dans le dossier, le dossier racine, puis le cd au client et écrire npm. Commencez. J'espère que tout
ira bien. Et de toute façon, si K
est dans n'importe quel éditeur, nous essaierons de le résoudre. Voyons voir s'il a
déjà été connecté. Disons que je vais
tout d'abord supprimer la connexion. Supprimez simplement C. Si je rafraîchis, alors automatiquement cette fonction de
connexion valide est exécutée via
cet effet d'utilisation. Si je le fais annuler et si je change de réseau
pour apporter QB. Cliquez ensuite sur
Connect wallets,
vérifiez que vous n'êtes pas connecté
au réseau. Cette alerte fonctionne correctement. Encore une fois, je vais simplement
changer de réseau trop girly. Puis cliquez sur
Connect violet. Maintenant, le portefeuille affiche
la notification. Je vais simplement
cliquer sur Next connect. D'accord ? Je vais donc essayer de
vérifier qu'au crépuscule, apprendre uniquement la langue et au crépuscule ne fonctionne pas. Pourquoi ne fonctionne pas ? Voyons voir. Apprenez uniquement un peu D. Et au crépuscule, ils doivent vérifier. J'ai ça au crépuscule. Nous allons maintenant vérifier la console
Inspect. Soumettre cela
fait l' objet un contrat. Jason a soumis cette tâche. Quelque chose ne va pas bien. Parfois lié au vague. Est-ce que le contrat ou le fromage dans un EPA
démocratique aussi. 07 tâche Demandez un cyanure VI. D'accord. Troisièmement, je vérifie quelques blocs. Ce que j'ai fait, c'est que j'ai
simplement changé cela. C'est const, un BA
va exiger. Et puis cet ABA, j'écrirai partout
qui se trouve ici, ainsi que supprimer, et obtenir toutes les tâches. Voyons s'il
fonctionne correctement ou non. Maintenant, voyons voir. Si je pars et que j'apprends la solidité. Ajouter une robe, une taille. En ce moment. Enfin, au moins,
mon masque est maintenant montré. Je vais simplement aller
écrire, confirmer. Et maintenant, il fonctionne correctement. Dans mon Thomas, vous pouvez également voir que
l'interaction contractuelle existe. Il ne fera
que réussir parce que celui-ci
venait du site local, c'
est-à-dire de la variable locale. Mais maintenant, les
instructions contractuelles sont terminées. Et si je me rafraîchis, cela vient maintenant
du contrat intelligent. Maintenant, cette erreur, j'
espère que vous avez compris, supprimez
simplement cette ligne de code et écrivez const ABI
va exiger cela. J'apprendrai encore une fois le
casque dur et je nous ajouterai simplement. Et je vais maintenant cliquer sur Confirmer. Encore une fois, assurez-vous
que ce soit si je me rafraîchis maintenant et qu'un seul viendra parce que
l'autre n'était pas correctement stocké dans
cette blockchain. Vous voyez, c'est des dépenses. Il faut donc attendre. Cette transaction est terminée. Pour l'afficher dans votre interface utilisateur. Attendons. Maintenant, d'accord, instantané. Maintenant, si je me rafraîchis maintenant
, ils sont à deux heures. Et essayons de travailler sur la fonctionnalité de suppression.
Je clique sur le bouton Supprimer. Metamask nous montre. Maintenant. Si je clique simplement sur
le bouton Supprimer et confirmer, voyons ce qui se passe. Assurez-vous de laisser la
transaction se terminer. D'accord ? Aucune transition n'est maintenant terminée. Maintenant, si je me
rafraîchis, je peux le voir supprimé
avec succès. n'y a qu'une tâche à accomplir. Et si je vais avec mon identifiant de contrat, si j'y vais, il y a une
sorte de réseautage. Cliquez sur Rechercher, puis
voyez ce qui se passe. Bien sûr, tout
fonctionne correctement. L'ensemble de notre application est terminée. J'espère que le cours vous
a plu. Vous avez compris comment une application basique et très basique
est développée. Et grâce à ces connaissances, vous pouvez développer n'importe quelle application de
votre choix. C'est tout. Merci. Passez une belle journée.
Rahul Agarwal, Flutter Developer & Trainer
