Erstellen einer dezentralen Todo mit Solidity

1. KURSEINFÜHRUNG: Blockchain ist die treibende Kraft der nächsten Generation, die auch als niemals behandelt bezeichnet wird. Blockchain erfindet die Art und Weise, wie Daten gespeichert und verwaltet werden, neu. Web Three umfasst eine anständige Religion und wird von seinen Nutzern aufgebaut und gehört. Infolgedessen gibt es viele neue Möglichkeiten für Entwickler wie uns in diesem Bereich. In diesem Kurs lernen wir, wie Sie eine vollständige dezentralisierte Replikation erstellen , um die Replikation von Grund auf neu durchzuführen. Wir werden Solidität für den Hardhead Smart Contract Development für Tests und Deployment verwenden den Hardhead Smart Contract Development . Durstig ist es, mit dem Vertrag zu kommunizieren. McNemar unterschreibt die Transaktion, React JS für den Fontan und letztendlich, wie die Blockchain sie bereitstellen würde. Am Ende des Kurses werden Sie verstehen, dass alle Konzepte, die für die Bewerbung für einen Entwicklerjob erforderlich sind, nicht einmal Ihre eigene Anwendung auf der akkadischen Blockchain erstellen , ohne mehr Zeit zu verschwenden. Melden Sie sich jetzt an und fangen wir an. 2. Discussing besprechen: Hallo, willkommen zum allerersten Video dieses Kurses, in dem wir lernen werden, wie man eine reale dezentrale Anwendung erstellt . Gegenwärtig sprechen alle über den Webbaum. Und selbst wenn Sie die Grundlagen des Web-Baums kennen, Sie nicht als Entwickler betrachtet , bis Sie keine vollwertige Anwendung unter Verwendung aller Technologien entwickeln als Entwickler betrachtet , bis Sie keine vollwertige Anwendung unter Verwendung aller Technologien werden Sie nicht als Entwickler betrachtet , bis Sie keine vollwertige Anwendung unter Verwendung aller Technologien entwickeln. Offensichtlich sollten Sie Solidität kennen, reagieren, Hardhead, eine E test.js. Zumindest sollten Sie etwas wissen, was diese Technologien tun, um mit diesem Kurs fortzufahren. Denn hier wird unser Hauptaugenmerk auf der Erstellung der vollständigen Anwendung liegen. Bevor wir also vorankommen, besprechen wir den Kurs. Curriculum sind, was sind alle Schritte, die wir in diesem Kurs unternehmen werden. Der erste Schritt besteht darin, die Entwicklungsumgebung mit Hilfe von Hardhead und weiteren KTM-Knoten einzurichten die Entwicklungsumgebung mit Hilfe von . Wir werden den Alchemie-Service nutzen. Als nächstes schreiben wir die intelligente Kontraktlogik unter Verwendung von Solidität für diese To-Do-Anwendung. Das heißt, wie Sie unsere Anzeige hinzufügen oder diese Aufgaben aus der Blockchain zu unserer Anwendung entfernen . Dann schreiben wir den Unit-Test, um das Funktionieren der Smart Contract-Logik zu testen. Dann werden wir einen intelligenten Vertrag für das Netzwerk bereitstellen , das das Testnetzwerk ist. Nachdem wir dann das Front-End der Anwendung mit dem React-Framework erstellt das Front-End der Anwendung mit dem React-Framework , werden wir eine sehr einfache App entwickeln. Dann werden wir mit einem Durst Dot js und MetaMask mit dem Smart Contract interagieren, der bereits im Testnetzwerk bereitgestellt wird. Und am Ende werden wir alle Funktionalitäten und das Funktionieren der dezentralen Anwendung überprüfen . Das war's also. Stellen Sie außerdem sicher, dass Sie MetaMask installiert haben und einige Testdetails in Ihrem Konto haben. Ich werde mich nicht wieder so einrichten, wie ich es bereits habe, Deziliter und alles in meiner Brieftasche. Also schauen Sie sich bitte ein Tutorial an und fahren Sie mit diesem Kurs fort. Es ist sehr einfach. Das ist also alles für dieses Video. Wir sehen uns in der nächsten Sitzung. Danke. 3. Hardhat einrichten: In diesem Video lernen wir, wie Sie die Entwicklungsumgebung für unsere Anwendung mit Hardhead einstellen die Entwicklungsumgebung für können. stellt sich also die Frage, was bei Hardhat heiß ist, ist eine Umgebungsentwickler, die zum Testen, Kompilieren, Bereitstellen und Debuggen dezentraler Anwendungen basierend auf der Itanium-Blockchain verwendet Kompilieren, Bereitstellen und Debuggen dezentraler Anwendungen werden. Sein Konkurrent ist als Trüffel bekannt. In diesem Kurs werden wir Hardhead verwenden, aber später, wenn Sie Trüffel erkunden möchten, fahren Sie bitte fort, weil Sie nie wissen , welche für das Projekt Ihres Unternehmens verwendet wird. Beginnen wir nun damit, indem wir einen Ordner mit dem Namen To-Do-App erstellen . Erstellen Sie zuerst einen Ordner. Dann in diesem Ordner von Penn Acht Terminal. Und initialisieren Sie ein leeres NPM-Paket mit diesem Befehl und BM darin Bindestrich. Warum? Jetzt haben wir diese Paket.json-Datei. Dann um Hardhead zu installieren. Denken Sie einfach an diesen Befehl, npm, install, dash, dash, save, dev, hard hat. Es wird einen sehr kleinen Bruchteil der Zeit dauern. Es hängt von Ihrer Internetverbindung ab. Aber der Schutzhelm hat bei diesen Zuschauern viel an Zugkraft gewonnen , es war nur Trüffel. Auch. Es ist erledigt. Man kann einfach sehen, dass es einige gibt und der BMI jemals wird, das ist nicht so wichtig. Dann schreibe danach einfach np x hardhat. Es wird uns helfen, ein Hardhat-Projekt zu erstellen. Wählen Sie aus den Optionen das erste aus, das ein grundlegendes Beispielprojekt erstellt. Drücken Sie dann die Eingabetaste und drücken Sie die Sieh. Diese Ordner wurden automatisch erstellt. Und auch Hardhead sagt uns, dass wir diese Abhängigkeiten installieren sollen. Dies wird uns beim Test helfen, gut mit Vorsicht und Ether-Bibliothek um mit dem intelligenten Vertrag zu interagieren. Kopieren Sie dies einfach und fügen Sie ein und drücken Sie die Eingabetaste. Denken Sie daran, dass diese Abhängigkeiten wichtig sind, wenn Sie hat verwenden. Wenn Sie mehr über Hardhead erfahren möchten, können Sie auch auf die offizielle Website Hard Hat Dot ORG gehen und einfach über dieses Zeug lesen. Im Moment gehe ich nur davon aus, dass du die Grundlagen von Hardhead kennst. Welchen Code ich auch geschrieben habe, Sie finden ihn im Dokumentationsbereich ihrer Website. Siehe npm install save-dev heard hatte einen NP x, der uns diese Option gibt. Dann wird es uns sagen, dass wir diese Abhängigkeiten installieren sollen. Das war's. Jetzt sehen wir mal. Es installiert das immer noch. Dies wird auch einige Zeit in Anspruch nehmen. Bis dahin. Sie können sich einfach die offizielle Dokumentation ansehen. Okay, es ist erledigt. Jetzt. Wir werden auch ein paar andere Abhängigkeiten installieren, die nicht mit Hardhead zusammenhängen . Dann schreibe einfach npm install. Ben Zeplin slash Kontrakte und dot ENV. Das heißt, dies sind zwei verschiedene Abhängigkeiten von Pens Up Plane ist, hat vordefinierte Methoden, die bereits erprobt und getestet wurden, um in jedem Projekt verwendet zu werden. Wenn wir es später brauchen, werden wir es nur benutzen. Und dot ENV bietet Funktionen zum Schreiben sensibler Daten in eine separate importierte Datei. Jetzt haben wir unser Projekt, Hardhead-Projekt bereit. Hängen Sie einfach unser Projekt in die VS-Codedatei an, öffnen Sie das Projekt als drei. Und um das zu tun, K. Und wir stellen auch sicher, dass Sie diese Erweiterungen installiert haben. Das ist hauptsächlich solide. Die d diese Soliditätserweiterung wird in Ihrem VS-Code installiert. Ja, das ist die einzige Abhängigkeit, die erforderlich ist. Es gibt keine Abhängigkeitserweiterung. Das war's. Das Hardhead-Projekt ist jetzt erfolgreich eingerichtet. Im nächsten Video werden wir unser Setup einbeziehen, wie Alchemy und MetaMask. Danke. 4. Schlüssel für Alchemie und Metamask: Im letzten Video haben wir dieses Projekt erfolgreich eingerichtet. Jetzt ist es soweit. Wir schließen die Alchemie mit ein. Alchemy ist eine Entwicklerplattform, die uns ermöglicht, skalierbare und zuverlässige, dezentrale Anwendungen zu erstellen , ohne die Blockchain-Infrastruktur selbst verwalten zu müssen. Gehen Sie einfach auf alchemy.com und erstellen Sie ein neues Konto. Ich habe bereits ein Konto, also melde ich mich dort an. Wir werden auf unser Dashboard umleiten. Hier. Das erste, was wir tun müssen, ist eine neue App zu erstellen, indem wir auf dieses Symbol klicken. Klicken Sie einfach hier und geben Sie ihm einen Namen. Ich gebe es. Um das zu tun. Es wird eine mittlere Kette sein und das Netzwerk wird kohärent sein. Und jetzt klicken Sie einfach auf App erstellen. Dann hier, unter diesem API-Schlüssel, klicken Sie auf View key und kopieren Sie diesen HTTP-Link. Wir werden diesen HTTP-Schlüssel später verwenden. Als Nächstes müssen wir uns den privaten Schlüssel von unserer MetaMask holen. Sie können Mathematik installieren, indem Sie auf die Website matter mass dot au gehen auf die Website matter mass dot au und dann die Erweiterung für den Browser installieren. Wenn du hier bist, verwende ich Chrome. Möglicherweise verwenden Sie einen anderen Browser. Ich werde die Brieftasche nicht von Grund auf neu einrichten weil ich schon Durst habe und alles drin habe. Stellen Sie sicher, dass Sie dieses Video pausieren und sich die Einrichtung der neuen MetaMask-Wallet ansehen. Und auch, wie Sie einen Test in diesem Konto von YouTube oder über Google testen können. Klicken Sie also einfach auf dieses Icon und geben Sie dann Ihr Passwort ein. Und stellen Sie sicher, dass das Netzwerk auf kalt umgestellt wird. Hier habe ich Polygon-Hardhead, sind benutzerdefinierte Netzwerke, aber stellen Sie sicher, dass Sie coli-Netzwerk haben und einige Testether darin haben. Um diesen privaten Schlüssel zu erhalten, klicken Sie hier auf Kontodetails, dann auf Privaten Schlüssel exportieren und geben Sie Ihr Passwort ein. Stellen Sie sicher, dass Sie diese Schlüssel niemals an Dritte weitergeben. Die Adresse Ihres Kontos, das heißt, diese Adresse ist Ihr öffentlicher Schlüssel. Falls später erforderlich. Jetzt werden wir die Alchemy-URL und den privaten Matt Thomas-Schlüssel in unserer Hardhat-Konfiguration verwenden . Gehen Sie dazu zu Ihrem Projekt. Und wir haben bereits die erforderliche Abhängigkeit installiert, nämlich diese Punkt-ENV. Wie ich bereits sagte, ist es nicht empfehlenswert, diese sensiblen Informationen direkt in den Code einzufügen . nun in diesem Projektordner Erstellen Sie nun in diesem Projektordner eine neue Datei namens dot ENV. Angenommen, das ist im Stammverzeichnis. Und dann fügen Sie hier die Paste ein, alle Schlüssel, das heißt, indem Sie Variablen, Alchemie, URL und Brieftasche erstellen. Privater, privater Schlüssel. Dann kopiere und füge sie ein. Nochmals, geh einfach zu meinen Tamas. Dann zähle ich es ist Export Private Key und kopiere und füge ihn hier ein. Das war's. Jetzt haben wir die Schlüssel. Wir müssen unsere Hard Hat Dot Config Dot JSON-Datei für diese Schlüssel einfach ganz oben konfigurieren . Dieser Code erfordert unser dot ENV-Paket dot config. Und dann in diesem Modul , das Dateien exportiert, schreiben Sie einfach Netzwerke und gehen Sie dann in ein lineares Netzwerk. Und hier in der URL schreiben wir process dot ENV, dot alchemy URL. Und in den Konten, die eine Liste sind, schreiben wir process dot ENV, vallate, privaten Schlüssel. Das war's. Auf diese Weise konfigurieren wir Alchemy und MetaMask mit unseren Hardhead-Projekten, damit wir sie später im Schuldennetzwerk einsetzen können. Danke, das ist alles für dieses Video. Im nächsten Modul werden wir den intelligenten Vertrag für unsere Todo-Anwendung erstellen . 5. Einen Task erstellen: Willkommen zurück. Jetzt ist es an der Zeit, unseren Soliditäts-Smart-Vertrag zu erstellen. Gehe einfach zum Vertragsordner hier, du siehst einen Dummy-Vertrag, größer ist als Seele, wir brauchen ihn nicht. Wir werden nichts dagegen tun. Erstellen Sie einfach eine neue Datei und nennen sie Aufgabe, Vertrag, Soul. Und jetzt erstellen wir vorher einen neuen Vertrag. ganz oben sicher, dass Sie diese Lizenz und damit Soliditätsversion einschließen. Dann werden wir einen Vertrag erstellen und sie haben den Aufgabenvertrag abgeschlossen. Beginnen wir nun mit der neuen Struktur, die Aufgabe ist. Unsere Aufgabe wird eine ID haben. String, macht diesen Text , also der Titel der Aufgabe, und ein boolescher Wert wird gelöscht. Dann haben wir diesen Truck ein Array, das all diese Aufgabenstruktur enthält, die ein privates Array sein wird, und wir werden es Aufgabe nennen. Dann wird definitiv jemand eine Aufgabe hinzufügen. Also werden wir die Aufgaben-ID der Adresse des Todeseigentümers zuordnen. Also schreiben wir diese Aufgabe einfach an den Eigentümer. Und wir werden auch einige Ereignisse haben. Das heißt, unsere erste Veranstaltung wird in der Abenddämmerung stattfinden. Es wird die Empfänger-Dusk-ID haben. Und unsere zweite Veranstaltung wird die Dämmerung verzögern. Es wird Dämmerungs-ID und einen booleschen Wert haben. Also lasst uns diesen Code verstehen. Schon wieder. Ereignisse werden verwendet , um Informationen in dieser Blockchain zu protokollieren. Wir erstellen eine Aufgabenstruktur. Solidität ermöglicht es dem Benutzer, seinen eigenen Datentyp in Form von Struktur zu erstellen . Die Struktur enthält eine Gruppe von Elementen mit einem anderen Datentyp: Integer, String, boolean, was immer wir wollen. Dann haben wir diese Aufgabe, die all die Aufgaben wahrnimmt, die in unserem intelligenten Vertrag vorhanden sind. Und dann ordnen wir diese Aufgaben-ID einfach der Adresse der Aufgabe zu oder nicht , damit wir sehr einfach suchen können oder können. Das nächste, was wir tun werden, ist Funktionen zu erstellen. Die erste Funktion ist die Funktion zum Hinzufügen einer neuen Aufgabe. Schreibe einfach Funktion in der Abenddämmerung. Es wird Aufgabentext akzeptieren. Dies ist einfach der tote Boolean und mach es extern. Definitiv wird es vom externen Front-End aus aufgerufen. Dann müssen wir zuerst die Aufgaben-ID bekommen. Und was wir tun werden, ist , diese Länge dieses Arrays zu der Task-ID zu machen . Der erste wird also 0 sein, dann wird es eins sein. Und auf jeden Fall wird es nach dem Inkrementieren anders sein. Dann werden wir einfach auf diese Aufgabe drängen, Eddie, unsere neue Aufgabe. Wir werden diese Aufgabe erstellen. Und da es uns um ID fragt, geben wir hier die Aufgaben-ID, dann Text und verzögert sich. Habe das alles gesehen, was wir schicken müssen. Dann werden wir diese Informationen in unserer Aufgabe abbilden , um das Mapping zu ehren, indem einfach die USA an den Eigentümer schreiben, dann die Dämmerungs-ID. Und das gehört dazu, ein Nachrichtenabsender, der anfordert oder diese Funktion aufruft, die sich in Ruhe befindet , gespeichert wird. Und einfach ganz am Ende. werden wir schreiben. Wir werden die Veranstaltung anrufen. Und der Ereignisname lautet add. Aufgabe. Der Empfänger wird der Absender der Nachricht sein. Und die Aufgaben-ID ist diese Aufgaben-ID. Diese Informationen werden also in dieser Blockchain gespeichert. Das war's also. Ich hoffe, du hast diese Funktion verstanden. Einfach eine Funktion namens Task hinzufügen. Es akzeptiert, macht Desk und ist gelöschter Wert. Die Sichtbarkeit ist extern, da wir diese Funktion innerhalb dieses Vertrags nicht aufrufen. Also haben wir einfach extern geschrieben. Für die Aufgaben-ID, die einfach die Länge angibt, die ganz am Anfang steht, wird es 0 sein. Sobald die Dämmerung hinzugefügt wurde, wird die Länge eins sein. Und es wird zufällig sein, immer S, da wir diese Aufgabe in sie treiben. Es wird also automatisch inkrementiert. Dann bilden wir Aufgabe zwei zu, Eigentümer. Und dann geben wir endlich dieses Ereignis aus. Aber das ist alles für dieses Video. Im nächsten Video werden wir die beiden anderen Funktionalitäten schreiben. Das ist das Löschen Task und hole meine Aufgabe. Danke. 6. Die Funktionalität der Aufgabe löschen und abrufen: Jetzt schreiben wir in diesem Video die Funktionalität zum Löschen einer Aufgabe. Schreiben Sie einfach den Funktionsnamen, wir löschen die Aufgabe. Dann wird es ein Externes sein. Auch. Um die Aufgabe zu löschen, fragen wir nach dieser Aufgaben-ID. Und Boolean wird gelöscht, was wahr sein wird. Nun werden wir zuerst die Zuordnung überprüfen, dh ob dieser Absender diese Aufgabe besitzt oder nicht, schlagen vor, dass wir zwei Besitzer dieser Dämmerungs-ID gleich schreiben , gleich Absender der Nachricht. Wenn es stimmt, gehen wir einfach zur Aufgabenstruktur. Es geht um diese Aufgaben-ID. Dann wird der Punkt gelöscht, gleich wird gelöscht. Dann treffe ich dieses delete dusk Ereignis und gebe Eddie und ist gelöschte Parameter. Also einfach, wir haben diese Löschfunktion geschrieben. Es fragt die Aufgaben-ID und wird gelöscht. Es ist eine externe Funktion. Vor dem Löschen lassen wir uns nur noch einmal prüfen, ob diese Aufgabe zur Adresse dieses Aschenputtels gehört oder nicht. Wenn wir zu dieser Aufgabe gehen, Eddie. Und einfach in dieser Aufgaben-ID ist das die Position der Aufgabe in diesem Array, wie diese Aufgaben-ID. Die ID ist auch die Position. Also werden wir einfach gehen und schreiben, wird der id dot gleich gelöscht? Was auch immer wir schicken, was definitiv wahr sein wird. Und dann geben wir einfach diese Verzögerungen aus, löschen sogar die Aufgabe. Dann besteht die endgültige Funktionalität darin, unsere eigene Aufgabe abzurufen oder zu bekommen. Also schreibe einfach Funktion, nimm meine Aufgabe. Es wird eine externe Funktion sein. Es wird einfach sehen, dass es nichts ändert und es wird die Aufgabe zurückgeben. Das ist eine wirklich erledigte Frage eine Aufgabe. Darin. Lassen Sie uns zunächst eine vorübergehende Aufgabe erstellen um sie hübsch zu benennen. Und wir erneuern uns. Die Länge wird Dämmerungspunktlänge sein. Was wir dann tun müssen, ist definitiv in dieser Aufgabe, die Aufgaben sind gut darin, dieser Benutzer oder was auch immer, 1015 Benutzer, egal welche Benutzer sie sind, die ganze Aufgabe wird in diesem Array sein. Was wir jetzt tun müssen, müssen wir dieses Array durchlaufen und herausfinden, welche Aufgaben zu diesem Absender gehören , und diese Aufgabe dann in diesem temporären Array speichern. Da wir also eine Schleife machen werden, lasst uns das zuerst haben. Das heißt, dies ist die Anzahl der Aufgaben, die diesem Benutzer gehören. Dann werden wir eine for-Schleife haben. Du und ich sind gleich 0. Ich bin weniger als Dämmerung, dunkle Länge. Und einfach ich plus plus. Dann kartieren wir, was machen wir? Wir werden das Mapping verwenden. Beginnt die ID dann bei 0? Wenn es dem Absender der Nachricht entspricht. Und wenn die Task-Eigenschaft , die dies ist, gelöscht wird, falsch ist , wird diese noch nicht gelöscht. Dann bearbeiten Sie in diesem temporären Array mit dieser Zählerposition, einfach zu dieser Aufgabenstruktur, einfach zu dieser Aufgabenstruktur, definitiv in dieser Aufgabe Datenstrukturen. Es wird also in diesem temporären Array an dieser Position gespeichert , die 0 ist. Und dann werden wir den Zähler erhöhen, der jetzt ist, er wird eine Aufgabe darin haben. Und dann wird es wieder eine Schleife machen. Wenn es feststellt, dass der Eigentümer derselbe ist. Andererseits, an einer Stelle in diesem Array, speichert es diese nächste NESC-Task und ändert den Zähler auf zwei. So funktioniert es also. Jetzt. Wir haben die temporäre Variable, die Aufgabe , die dem Benutzer gehört, aber diese Länge dieser Aufgabe ist größer und die Elemente werden geringer sein. Es wird also nur unnötigen Platz einnehmen. Was wir also tun werden, ist eine neue Variable namens result zu erstellen . Und es wird eine Reihe von Längenzählern sein , die nur Schulden sind. Und einfach, wir werden diese temporäre Variable durchlaufen, U int I ist gleich 0 ich weniger als der Zähler I plus plus plus. Und das ist einfach alles zu kopieren und einzufügen , was in dieser temporären Zeit vorhanden ist. Und geben Sie am Ende diese Ergebnisvariable zurück. Das ist also die Logik dahinter. Holen Sie sich alle meine Task-Funktionen. Was wir getan haben, ist zuerst, wir werden erstellen, zuerst haben wir diese Funktion erstellt. Die Sichtbarkeit ist extern. Es ändert nichts, also ist es die Ansicht. Es dauert also definitiv keine Gasphase. Dann müssen wir angeben, was es zurückkehrt. Das ist eine Reihe von Aufgabenstrukturen. Ganz am Anfang haben wir diese temporäre Variable, die nur den Speicher speichert. Und es ist ein Array von Länge, Aufgabenpunktlänge, die 100 sein kann. Dann haben wir diesen Zähler ist 0. Das heißt, wie lautet der Befehl? Man kann sagen, wie viele Aufgaben hat dieser Benutzer? Dann durchlaufen wir in dieser for-Schleife einfach die hier vorhandene Aufgabe und prüfen, ob der Besitzer dieser ID, da die Idee auch bei 0 beginnt, dieser Aufgaben-ID, siehe hier. Aufgaben-ID gehört also zum Nachrichtenpunkt-Absender und zur Aufgabe I Position , die 0 Position ist. Angenommen, es beginnt und wird gelöscht. Ist gelöscht. Sie können sagen, dass die Eigenschaft falsch ist, weil wir möchten, dass wir keine Aufgabe anzeigen möchten, gelöscht werden oder welche diese Funktion sie löschen lässt. Und wir werden feststellen, dass wir hier all diese in dieser temporären Variablen speichern werden. Und jetzt, da die Länge größer ist oder die Aufgabe zehn sein könnte, aber die Länge beträgt 100. Also erstellen wir nur eine andere Variable namens result. Und kopiere und füge alle Elemente in dieser temporären Variablen in diese Ergebnisvariable ein und es wird kleiner als der Zähler sein. Und schließlich geben wir den Wert zurück. Du wirst das Konzept verstehen, sobald du es benutzt hast. Oder wenn Sie möchten, können Sie das Video einfach anhalten und versuchen, es immer wieder zu verstehen. Weil diese Konzepte sehr wichtig sind. Das war's. Wir haben erfolgreich unseren Smart Contract erstellt. Im nächsten Video werden wir diesen intelligenten Vertrag testen. Danke. 7. Schreibtest für unseren Vertrag: Hi. Da wir unseren Vertrag in diesem Video fertig haben, werden wir alle Funktionalitäten testen. Wir wissen bereits, dass Blockchain unveränderlich ist. Bevor wir also unseren Vertrag bereitstellen, schreiben wir Komponententests, um sicherzustellen, dass alle unsere Funktionen und Variablen in unseren Smart Contracts funktionieren. Und die richtigen Werte zurückgeben. Wir benutzen Mocha Chai für diesen Zweck. Denken Sie daran, dass wir diese Abhängigkeiten installiert haben , während wir Installation tragen und die Installation von Hardhead in unserem Projekt einrichten . Gehen Sie also einfach zum dest-Ordner und erstellen Sie darin eine neue Datei mit dem Namen Dämmerung, Vertrag, Testpunkt js. zuerst Importieren Sie zuerst unsere Bibliotheken , die wir von der Kinderbibliothek erwarten müssen . Und dann brauchen wir es aus der Fernbibliothek, Saudi aus der Hardhat-Bibliothek. Jetzt schreiben wir unseren Testcode. Beschreibe, wir nennen es Abenddämmerungsvertrag. Dann werden wir diese Funktion haben. Entfernen Sie einfach die Pfeilfunktion. Wenn Sie möchten, können Sie die Pfeilfunktion haben. Und bevor wir den Test schreiben, werden wir einige Variablen für diesen Vertrag haben. Dann werden wir dies in diesem kleinen Brief haben, wir werden Vertrag haben. Es wird der Gegenstand oder die Instanz unseres Vertrags sein. Das wirst du später verstehen. Dann haben wir den Besitzer. Und jetzt, da es sich um einen Test handelt, sollten wir ein paar Dummy-Daten haben. Die Nummer des Hotels oder der Dummy-Aufgabe wird also fünf sein. Und wir werden auch eine Variable namens „ask“ haben. Mehr Auto verwendet Haken, um seine Struktur zu organisieren. Dieser Schreibtisch mit dem Wort G wird verwendet, um unseren Test zu gruppieren , den Sie so lange verschachteln können, wie Sie ihn wollen. Dies ist, wieder können Sie beschrieben schreiben. Dann kannst du das wieder so schreiben. Dann hat es auch andere Haken. Es ist ich d, das ist auch ein Haken. Es ist ein Testfall, den wir in den kommenden Videos verwenden werden . Dann haben wir vorher hier in die ruhigere Bibliothek gehakt . Dies bevor Hook vor dem ersten Essen läuft. Unser Schreibtisch-Schreiber. Das heißt, wenn wir kurz zuvor schreiben, wird es laufen, bevor der erste der Beschreibungsblock ist, dann haben wir vor jedem , den wir verwenden werden, um vor jedem zu laufen. Das heißt, es wird vor jeder Klausel oder der Aussage ausgeführt oder die Drucke essen oder beschreiben. Dann haben wir danach. Es ist ein Haken, danach zu rennen. Ist es wirklich abgehauen? Acht werden beschrieben. Ganz am Anfang. Ich hab dir davon erzählt. Id. Haken. Diese Testfälle. Fälle wie diese haben wir. Haken und das Wichtigste ist vor jedem Schreibtischführer. Und sagen wir jetzt, lasst uns das vor jedem benutzen. Vor jedem. Tut mir leid, es wird so sein. Und darin werden wir eine sinc-Funktion haben. Hier werden wir unseren Aufgabenvertrag bereitstellen. Mit dieser Variablen. Wir verwenden diese Variable zuerst und schreiben einfach Await, Esser, Dot Get, Vertragsfabrik. Unser Vertragsname lautet „Vertrag“. Dann haben wir den Besitzer, der von einem Gewicht kommen wird, Esser Punkt bekommen Unterzeichner. Dann werden wir innerhalb dieses Vertrags über kleine Aufgaben diese Instanz dieses bereitgestellten Vertrags haben. Dies ist nur eine Simulation. Dann wird diese Aufgabe ein leeres Array sein. Und wir werden eine Dummy-Aufgabe in diese Gesamtaufgabe einfügen. Es ist ich gleich 0. Ich werde weniger als die Anzahl der Gesamtaufgabe sein, die fünf sein wird. Ich plus, plus. Lasst es uns kriegen. Das tut es. Überprüfen Sie Text einfach so sein wird , dass alles, was Sie hinzufügen möchten, die Zahl zufällig zu machen scheint. Plus ich wird dann gelöscht, ist falsch. Dann werden wir ein Gewicht haben, das DOD kontrahiert. Bei Pass-Funktion verwenden wir. Dämmerung, dunkel, Text wird gelöscht. Diese Funktion ist diese Funktion, bei der sie nach Aufgaben fragt , die Text und booleschen Wert haben. Dann werden wir einfach schieben, dann ist Bush Dämmerung. In dieser Variablen setzen wir diesen Wert auf. Das wird also vor h laufen, bevor jeder Test definiert wurde. Später werden wir 23-Komponententest definieren. Und vor jedem Test wird dieser Code ausgeführt. Ja, das sind wir, wir stellen unseren Vertrag bereit und bekommen dann eine Instanz und fügen dann fünf Dummy-Aufgaben hinzu. Lassen Sie uns danach einfach einen neuen Schreibtisch erstellen, der Komponententest ist, um eine Aufgabe hinzuzufügen. Wir werden beschreiben, wie ich schon sagte, dass wir es verschachteln können. Es ist für die Funktion „ Aufgabe hinzufügen“. Funtion. Dann werden wir jetzt die IT, it-Klausel verwenden. Und das ist nur der automatische Vorschlag. Also id, die Schreibtisch-Bedingung sollte bei Aufgabenereignis erfüllt sein. Es wird eine sinc-Funktion sein. Ganz oben schreiben wir einfach erstellen eine neue Dummy-Aufgabe. Aufgabe. Text ist gleich, neu. Aufgabe, ist verzögert und wird dann falsch sein. Dann warten und verwenden wir das erwartungs-Schlüsselwort aus dieser untergeordneten Bibliothek. Wir erwarten, dass zuerst der Aufgabenvertrag. Bei Aufgabe werden wir diese neue Aufgabe hinzufügen, Dämmerung, Dämmerung, Text und Dämmerung wird gelöscht. Es wird emittieren. Es wird es sein. Zuerst müssen wir die Instanz senden. Und was es ausstrahlen wird, ist das hier. Dies wird in der Abenddämmerung Argumente, Argumente , Eigentümer, Adresse und Anzahl der Gesamtaufgabe ausgeben. Also wirst du vielleicht verwirrt. Dies liegt also daran, dass wir am Ende der Task-Funktion das Ereignis Task hinzufügen emittieren. Mit Argumenten können Sie den Absender und die Aufgaben-ID des Nachrichtenpunkts sehen . Und da dies vor jeder Klausel ist, haben wir bereits fünf Aufgaben. Das heißt, hier fügen wir fünf Aufgaben hinzu. Diese sechste Aufgabe, die wir hier hinzufügen, haben wir die ID fünf, da der Index bei 0 beginnt. Deshalb stimmt das also. Die ID wird fünf sein, da es fünf Aufgaben gibt. Und der Index ist, dass wir in dieser Task, dieser Aufgaben-ID, immer bei 0 beginnen . Wenn du willst, kannst du einfach warten und versuchen, es immer wieder zu verstehen. Weil das sehr wichtig ist. Und Sie führen Qualitätsprüfungen durch oder vergleichen die erwarteten Ergebnisse mit einem Ergebnis. Wir können die Chai-Bibliothek benutzen, die uns drei Behauptungen gibt. Das ist zuerst eine, die wir erwarten, dann gibt es Behauptung und das sollte es tun. In diesem Tutorial werden wir dies nur in der Erwartung verwenden , dass dieses Gericht den erwarteten Wert ausgeben sollte, sonst wird Fehler angezeigt und die Aufgabe wird nicht erfolgreich sein. Man kann sagen, hingerichtet. Das ist also alles für dieses Video. Im nächsten Video werden wir die beiden anderen Aufgaben abschließen und unseren Test ausführen. Danke. 8. Den Einheitstest durchführen: Hi. Jetzt ist es an der Zeit, diesen letzten Unit-Test zu schreiben. Wir haben den Test zum Hinzufügen einer Aufgabe bereits geschrieben. Lassen Sie uns nun einen Test schreiben, um alles zu bekommen, was tut, das heißt Funktion „Aufgabenstellung“. dann in der Klausel Lassen Sie es dann in der Klausel die richtige Anzahl der Gesamtaufgabe zurückgeben . Sinken. Mittagessen. Dann lasst uns weitermachen. Meine Aufgabe ist es gleich zu erwarten. Erhält Contract-Dot meine Aufgabe? Das heißt, das bekommt meine Aufgabe, ist diese. Hol mir meine Aufgabe. Dann werden wir prüfen , worauf wir schauen werden. Mein Abenddämmerungspunkt. Die Länge sollte gleich sein. Dieser ist die Gesamtzahl der Dämmerung. Was wir also prüfen, ist, dies vor jeder Klausel hinzuzufügen. Wir fügen fünf Aufgaben hinzu, indem wir dies verwenden, oder? Auf diese Weise fügen wir fünf Aufgaben hinzu. Wenn diese Bedingung bereits ausgelöst wird, wird es fünf Aufgaben in unserem Smart Contract geben. Also werden wir einfach prüfen , ob es richtig ist, was eingegeben wurde oder Sie sagen, dass es da ist oder nicht, wir werden das einfach überprüfen. Jetzt. Der nächste Test besteht einfach darin Staub zu löschen , der in der Dämmerung verzögert ist. Funtion. Dann sollte diese Bedingung sein, dass es verzögerte Dämmerung emittieren sollte. Es sollte emittieren. Löschen Sie sogar die Aufgabe. Dann ist es eine Sinc Funtion. Dann ist const dusk id gleich 0. Dann ist const gleich wahr. Jetzt warten Sie einfach. Erwarte. Löscht Kontrakt Dot Task , wenn wir ihn aufrufen, indem wir diese Aufgaben-ID senden und löschen fragen, sollte sie emittieren. Es sollte dieses Aufgabenereignis mit den Argumenten ID und Dämmerung gelöscht werden. Also einfach, was wir tun, ist, dass wir diese Funktion „ Task löschen“ nennen. Und da es hier dieses Löschaufgabenereignis ausgibt, prüfen wir, ob es sich um eine Besprechung mit dieser Task-ID und diesem booleschen Wert handelt oder nicht. Und wir erinnern uns nur daran , dass wir diesen gelöschten Wert einfach aktualisieren , da wir keine Daten aus einer Blockchain löschen können. Das war's. Jetzt rette alles. Und da wir alle Testbedingungen bereit haben, ist es an der Zeit, unseren Test durchzuführen. Hängen Sie einfach ein Terminal in Ihr Stammverzeichnis an und schreiben Sie den Befehl und den px Hard Hat Test. Mal sehen, ob alles in Ordnung ist. Oder es könnte ein paar Fehler geben. Wir wissen es nicht. Mal sehen, Mal sehen, ob die Arbeit erfolgreich kompiliert wird oder nicht. Dies größer ist der Standardwert. Wir haben nichts damit zu tun. Sehen Sie sich die gesamte Aufgabe an, alle Komponententests sind erfolgreich bestanden, dh in der Abenddämmerung alles löscht, macht alles, funktioniert. Denken Sie daran, wenn Sie jemals einen Fehler erhalten, dann verwenden Sie nach dem Beheben dieses Fehlers den Befehl und px hard hat clean und führen Sie diesen Test dann erneut aus, da es möglicherweise Geld gibt und Sie nicht bekommen möchten steckte da fest. Aber in unserem Fall ist nichts falsch. Alles funktioniert. Gratulation. Das war's also für den Teil des Komponententests. Im nächsten Modul werden wir unseren Vertrag an der VLR im Testnetzwerk bereitstellen . Danke. 9. Das deployment schreiben: Da unsere Vertragslogik funktioniert, werden wir in diesem Video die Bereitstellungen schreiben, unseren Vertrag erstellen und in diesem Testnetzwerk bereitstellen. im Script-Ordner Wachsen Sie im Script-Ordner einfach und erstellen Sie eine neue Datei und nennen Sie sie bereitgestellt dot js. Jetzt schreiben wir den erforderlichen Code. Zuerst brauchen wir Itos Bibliothek. Dann erstellen wir eine Funktion namens main. Es wird eine sinc-Funktion sein. Und dann werden wir in ähnlicher Weise einen vertragsfreien Track haben . Drei, Esser bekommen Vertrag. Factory, Name ist Abenddämmerung. Vertrag davon ist der Name unseres Vertrages. Dann haben wir eine Instanz mit diesem Code, Vertrag für Trade Dot Deploy. Dann warten wir ab und stellen sicher, dass der Vertrag erfolgreich eingesetzt wird. Und danach schreiben wir console.log und geben die bereitgestellte Adresse aus. Es ist sehr wichtig. Denken Sie an diesen Vertrag, wir verwenden ihn nur die Vertragspunkt-Adresse. Jetzt müssen wir diese Hauptfunktion aufrufen. Und einfach dafür müssen wir eine andere Funktion erstellen, die als Senke bezeichnet wird. Da dies die Prozedur ist und denken Sie daran, es so zu tun , als müssten wir die Hauptfunktion aufrufen. Und wenn ja, ist alles in Ordnung, dann werden wir den Prozess beenden. Und wenn nicht, werden wir den Fehler erkennen. Wir werden den Fehler konsolenprotokollieren und einfach Prozess schreiben, der beendet wird, und einen Editor. Und ganz am Ende rufen Sie einfach die Hauptfunktion auf. Das war's. diese Weise kann ein Skript bereitgestellt werden. Wir müssen uns nur daran erinnern, das war's. Nun, das ist Drehbuch steht geschrieben. Stellen Sie es bereit. Wir müssen einen Befehl benutzen. Schon wieder. Bringen Sie Ihr Terminal hoch und schreiben Sie np x Hard Hat. Führen Sie dann Skripte in diesem Ordner aus, gehen Sie zu Deploy dot js. Dann wird Netzwerk, das wir verwenden werden, früh aufgerufen, da dieser Name, dieses G, E, LI, wir haben es in der Hardhead-Punkt-Konfigurationsdatei erwähnt. Danach drücken Sie einfach die Eingabetaste. Es wird einige Zeit dauern. Also musst du einfach warten. Denn jetzt wird dies hochgeladen oder dieser intelligente Vertrag wird im echten Testnetzwerk bereitgestellt . Okay? Jetzt ist es fertig. Das ist der Vertrag bei angezogen. Vergewissern Sie sich, dass Sie es einfach kopieren und irgendwo einfügen, wie hier. Weil wir es später brauchen werden und wir wollen es nicht einfach vergessen. Um zu überprüfen, ob dieser Vertrag erfolgreich vorhanden ist, sollten wir auf die Website des Ether-Scans gehen. Klicken Sie einfach auf diesen, den ersten. dann hier Fügen Sie dann hier diese Vertragsadresse ein und klicken Sie auf Suchen. Dies wird all diese Blockinformationen geben. Siehst du, vor 50 Sekunden wurde dieser Block erstellt. Und damit stellen wir sicher, dass wir sicher sind, dass alles gut gelaufen ist. Wenn Sie möchten, können Sie einfach darauf klicken und sehen, von welcher Adresse es verschoben wurde, Gaspreis und alles. Das war's also für dieses Video. Alles wird jetzt vom Backend-Teil aus erledigt. Im nächsten Modul werden wir das Frontend mithilfe des React-Frameworks einrichten . Danke. 10. Arbeiten am React Frontend: Hi, willkommen zurück. In diesem Video werden wir mit dem React Framework am Front-End-Bereich arbeiten . React JS ist eine JavaScript-Bibliothek, die sehr beliebt ist. Und ich hoffe nur , dass Sie die Grundlagen kennen , denn dies ist definitiv nicht das React-Tutorial. Unser Hauptaugenmerk wird darauf liegen, einfach eine grundlegende Benutzeroberfläche aufzubauen und unseren Smart Contract zu testen. nun ein React-Projekt einzurichten, gehen Sie einfach zum Terminal und gehen Sie dazu. Sie müssen das DHAP-Verzeichnis erstellen und diesen Befehl ausführen und px, Create, React, App, Name es Client. Jetzt werden nur wenige Ordner, Strukturen und Dateien heruntergeladen. Für die React-Anwendung. Es wird einige Zeit dauern. Dann können Sie sich einfach Ihren Code ansehen und sehen, was Sie getan haben. Das ist die Aufgabe Vertrag Dämmerung Desktop. Und weil diese Konzepte sehr wichtig sind, können Sie nach dem Erstellen eines Projekts nach mehrere Projekte mit denselben Konzepten erstellen. Okay? Es hat eine Weile gedauert, aber jetzt wird alles installiert. Gehen Sie zu diesem Client und Sie können sehen, dass wir Source schräg und alle Ordner erstellt haben . Um mit unserem bereitgestellten Smart Contract interagieren zu können, benötigen wir zwei Dinge. Erstens wird der Vertrag angesprochen und der zweite ist der ABI. Um die ABA zu erhalten, kopieren Sie einfach die Aufgabenkontraktpunkt-JSON-Datei, die sich in Artefakten befindet, also diese Artefakte. Dann haben wir Verträge. Dann haben wir Aufgabenvertragspunkte verkauft. Und wir haben diese Akte. Kopieren Sie einfach diese Datei und gehen Sie zum Clientordner. Erstellen Sie hier, direkt im Quellordner, einen neuen Ordner namens EBI und fügen Sie ihn ein. Das war's. Das befindet sich im Quellordner des Clients. Wir erstellen einen neuen Ordner namens ABI und fügen diese JSON-Datei ein, die den Vertrag ABI enthält. Das erste, was ich sagte , war diese Vertragsanschrift. Wir haben diese Vertragsadresse bereits als wir sie in unserem vorherigen Video bereitgestellt haben. Erstellen Sie einfach eine neue Datei und nennen Sie sie, config dot js im Client-Quellordner direkt , der hier ist. Und nenne es, config dot js. Und schreibe einfach den Befehl export, const, task, vertrag, adresse und füge unsere Adresse ein, das ist diese. Hier. Diese beiden wurden benötigt. Jetzt müssen wir auch einige Abhängigkeiten installieren. Gehe einfach zu blind gefaltet, mag diesen CD-Client nicht. Stellen Sie sicher, dass Sie sich im Client-Ordner befinden und installieren Sie Ether. Das ist npm install ethers. Dies ist erforderlich, um vom Frontend aus mit dem Smart Contract zu interagieren . Und dann die nächste Abhängigkeit, die erforderlich ist, ist npm install emotion slash EDX. Dann stylen. Bei MU I. kann ich ADL machen. Dann MU eine Gottheit. Das ist npm, installieren Sie Emotions-Schrägstriche reagieren Emotionen weniger als MU I, Icons Material als MUS-Schrägstrich-Material. Dies sind einfach einige Dateien im Zusammenhang mit Stil und Material , die wir später verwenden werden. Okay. Alle Abhängigkeiten sind jetzt installiert. Ich wollte nur Beckys Jason sehen. Ja. Alles ist da. Lasst uns jetzt an dieser Front arbeiten. Das erste, was wir tun werden, ist im Quellordner, wir haben app.js. Wir werden hier alles entfernen und von Grund auf neu schreiben. Das erste, was wir tun werden, ist importieren, reagieren, Datum verwenden, haken, verwenden, Effekt von React. Dann importieren wir das nächste Feld Martin aus MU-Material. Dann importieren wir Task, Task-Datei. Und denken Sie daran, diese Datei haben wir nicht erstellt. Wir müssen erschaffen und krank werden. Und dann werden wir importieren. Einfach importieren wir Punkt-CSS, süße Noten, SSS so. Als Nächstes muss die Vertragsadresse importiert werden. Wir werden gerade die Adresse der Abenddämmerung aus dieser Konfigurationsdatei sagen . Konfigurationsdatei. Dann importieren wir es aus der Bibliothek. Schließlich importieren wir diese Aufgabe ABI aus dem Ordner EBI dann einen Vertrag angrenzend ab. Dies waren also alle erforderlichen Eingaben. Dann müssen wir eine App-Komponente schreiben und erstellen und eine Komponente exportieren. Und wieder hoffe ich, Sie all diese Reakt-Konzepte kennen. Lasst uns ein paar Staaten schaffen. Aufgabe. Und wir werden die Abenddämmerung einstellen. Verwende den Status. Es wird ein leeres Array sein. Es wird unsere Aufgabe aufhalten. Dann wird die nächste Eingabe sein. Eingabe. Sie geben an , dass dies die Texteingabe aus diesem Textfeld ist. Dann haben wir ein Girokonto. Leistungsbilanz. Benutzen Sie das, um zu prüfen, ob mein Damast verbunden ist und dann die Kontoadresse ist. Und das letzte, das wir hier haben werden, ist das richtige Netzwerk. Und es wird eingestellt sein. Richtig. Netzwerk ist gleich dem Nutzungsstatus. Der Standardwert ist „false“. Es wird sichergestellt, dass das Knoblauch-Testnetzwerk ausgewählt wird. Andernfalls wird der Benutzer aufgefordert, sein Netzwerk zu ändern. Jetzt. Erstellen wir zunächst zwei neue Dateien im Quellverzeichnis. Zuerst wird Task Dot js sein. Wie ich bereits erwähnt habe , müssen wir hier einfach hier kreieren , oder? Import macht Dot CSS, das wir gerade erstellen werden. Und diese Komponente, das ist der Vorgang- und Exportstandard. Abenddämmerung. Später schicken wir auch ein paar Requisiten. Und in dieser Quelle erstellen Sie erneut eine Datei namens dot CSS. Das war's also für dieses Video. Wir haben viel Code geschrieben. Im nächsten Video werden wir daran arbeiten, unsere Meta-Maske einzurichten und wie wir uns damit verbinden können. Danke. 11. Metamask verbinden: Hi, willkommen zurück. Jetzt verbinden wir das erste, was wir tun werden , unsere MetaMask Wallet. Klar, dafür müssen wir eine Funktion schreiben. Schreiben wir es von Grund auf neu. Ich nenne es, verbinde Wallet. Es wird eine sinc-Funktion sein. Jetzt wird innerhalb des Try-Catch-Blocks die gesamte erforderliche Logik geschrieben. Und in CAD-Tools im Konsolenprotokoll AD Connect Sache, um eine Maske zu erstellen, den Header. Und in diesem Versuch Block werden wir zuerst Langeweile bekommen. Langeweile, musikalisch zu Window-Objekt, Fensterobjekt. Dann prüfen wir ob wir das Bakteriumobjekt haben oder nicht. Wenn wir kein italienisches Objekt haben, dann werden wir einfach log met Damast konsolen. Damast wurde nicht erkannt. Das heißt, der Benutzer hat das Massensterben in seinem Browser nicht installiert . Und wenn alles gut ist, dann werden wir prüfen, welches Netzwerk dann ein Dharma ist, mein Damast, pink verbunden, das ist rinky sei göttlich, was auch immer. Also kriegen wir die Ketten-ID. Jane id ist gleich, um auf Langeweile zu warten, diese Bitte. Dann geben wir in ihnen um zehn Uhr eine Ketten-ID. Und dann werden wir einfach die Kette AD auch nur für uns für uns konsolenprotokollieren , denn für die Tests und ich verbinde sie mit Chain, Chain AD. Okay? Jetzt schreiben wir die Kettenidee des Kernnetzwerks, das 0, klein x fünf ist. Denken Sie daran, dass dies die Kettenidee des höflichen Netzwerks ist. Wenn Sie Wrinkle B verwenden, ist es 0 X4. Diese Informationen können Sie auch im Internet abrufen. Du kannst es einfach googeln. Also zuerst werden wir prüfen ob j in ID nicht gleich j ist , dann werden wir einfach alarmieren, oder? Du darfst nicht früh ins Netzwerk gehen und einfach von hier zurückkehren. Und wenn alles in Ordnung ist, ist das Netzwerk in Ordnung, dann ändern wir den Status, in dem das richtige Netzwerk eingestellt ist, auf true. Zumindest wissen wir, dass das Netzwerk verbunden ist. Das heißt, das richtige Netzwerk ist verbunden. Dann bekommen wir die Konten mit diesem Code, die Tanium-Punkt-Anfrage ist. Dann werden wir hier verwenden wenn wir Konten anfordern und diese Informationen auch konsolenprotokollieren. Also das Log-Wundkonto und dann das erste Konto. Kontiert den 0-Index und die Gene, die festgelegt werden. Das ist dieser Wert des Girokontos für mein Damast-Konto. Okay. Also hoffe ich, dass du diesen Code verstanden hast. So verbinden wir nur mein Damaskus. Wir müssen nur verstehen, was das ist. Zuerst prüfen wir , ob es mit Ihnen verbunden ist oder nicht. Und zweitens bitten wir direkt darum, dass es zählt. Das war's. Nichts ausgefallenes. Genau das mit der Übung wirst du dich an diese Codes erinnern. Das war's. Jetzt ist der Teil der Funktion oder der Methode fertig. Es ist an der Zeit, dass wir auch den HTML-Teil schreiben. Innerhalb der Funktion, dieser dritten, befindet es sich außerhalb dieser Connect-gültigen Funktion. Wir werden diese Komponente einfach zurückgeben. Das ist Rückkehr. Und Dave, zuerst werden wir prüfen, ob das Girokonto leer ist , wenn der Benutzer verbunden ist, es ist Mater-Maske oder nicht. Also Girokonto. Wenn es leer ist , werden wir etwas tun. Oder wir werden etwas anderes tun. Wenn es leer ist, schreiben wir einfach beim Gewinnen des Center-Tags, wir geben einen Button. Knopf. Der Klassenname wird einfach Button sein. Und im On Click weist das Ereignis die Funktion connect gültige Funktion zu. Okay? Und wir werden diese Verbindung kriegsähnlich nennen. Okay. Jetzt, im anderen Teil, werden wir erneut prüfen, ob das richtige Netzwerk vorhanden ist. Dann werden wir etwas tun. Oder da wir etwas anderes tun werden. Und wenn das richtige Netzwerk da ist, können wir es einfach ausgeben Dave. Gib einfach einen Dave aus, ich nenne ihn. App. Dann. Schreiben Sie einfach H2-Tag - und Aufgabenverwaltung, unsere To-Do-App, jede Aufgabenverwaltungs-App. Dann wird mir das Formular-Tag gefallen. Ich verwende ein Formular-Tag. Und dann gebe ich ihm ein Textfeld. Textrahmen. Jeder Knopf. Button wird Kapital sein. Jetzt schreib einfach diesen HTML-Code mit mir. Unser Fokus liegt mehr auf dem Blockchain-Teil. Diese sind sehr einfach. Diese auf Blake beim ersten Onclick-Event. Ich gebe es einfach noch einen anderen. Ich will nichts machen. Dieser Button wird in der Abenddämmerung darauf geschrieben haben. Und in diesem Textfeld schreibe ich einfach ID, ID, skizziert, Basic, dann Label, make to do. Dann Variante. Umrissen. Dann stylen. Ich habe einfach Rand 0 Pixel und jedes Pixel ist klein. Wert. Der Wert wird eingegeben. Das heißt, dieser Input. Und unverändert. Onchange wird einfach schreiben, dass dies, was auch immer wir diese Texte im e erhalten, Eingabe e Punkt, Punkt Wert setzen wird. Okay? Dies sind alle Texte, die in Öl ausgefüllt werden, stammt aus dem MUN-Materialpaket. Wenn Sie möchten, können Sie in Google danach suchen. Es liegt an dir. Dann schreiben wir im S-Teil einfach ein div. Schreib es einfach, Dave. Und drin werden wir schreiben. Bitte gehen Sie zum Core-ESNet und laden Sie den Bildschirm neu. Ich meine, sie geben einfach ein paar Klassennamen an, wenn du willst. Diese Flaggen. Ruf nur das Gesicht zentriert, zentriert, mein Spiel an. Vorstand. Die nächsten beiden Excel. Warum? Wenn Sie möchten, können Sie später CSS wie Rückenwind CSS verwenden, und es liegt an Ihnen. Das war's also. Für die Connect-Vallate-Funktion. Und der HTML-Teil. Das heißt, wenn das aktuelle Violett leer ist , zeigen wir den Button an. Wenn nicht, wenn das Netzwerk vorhanden ist und auch das Girokonto in Ordnung ist, haben wir die Schaltfläche Hinzufügen. Wir haben einfach die Schaltfläche „Hinzufügen“ oder wir lesen einfach. Bitte stellen Sie eine Verbindung mit dem Netzwerk her. Das ist also alles für heute. Im nächsten Video werden wir auch andere Funktionalitäten schreiben. Danke. 12. Task hinzufügen: Hi, willkommen zurück. In diesem Video arbeiten wir an der Funktion Aufgabe hinzufügen. Aber vorher führen wir unsere Anwendung aus. Gehe einfach in den Ordner, öffne das Terminal und npm. Beginne. Mal sehen, wie es funktioniert. Entschuldigung, wir müssen zuerst in den Client-Ordner gehen und dann npm start schreiben. Weil der Client der React js-Teil ist. Es kann einige Zeit dauern. Wir müssen die Connect-Wallet-Funktionalität testen, ob sie ordnungsgemäß funktioniert oder nicht. Mal sehen. Ich hoffe, wir haben keinen Fehler gemacht, seit es das erste Mal geschieht keinen Fehler gemacht seit es . Deshalb braucht das so viel Zeit. Aber siehe Entwicklungsserver. Es hat angefangen. Es braucht etwas zu viel sie. Ich weiß es. Ja. Es ist fertig. Aber Mann. Okay. Ich weiß, dass es nichts Besseres als das CSS gibt und jetzt werden wir es später stylen. Aber gerade jetzt klicke ich einfach auf Connect Wallet. Okay. Es ist passiert. Sie denken vielleicht darüber nach, wie es passiert ist, aber weil ich dieses Konto bereits verbunden hatte , wenn ich aktualisiere und auf Verbinden klicke oder mal sehen, ist die Benachrichtigung gekommen. Und wenn ich als Nächstes lese und sie verbinde, dann Task-Management-App. Das funktioniert einwandfrei. Arbeiten wir jetzt an der Funktion „Aufgabe hinzufügen“. Einfach. Und die Dämmerung ist gleich einem Waschbecken. E-Punkt verhindert den Standardwert. Dies wird verwendet, um das Formular nicht abzuschicken. Das war's. Um das Standardverhalten dieses Formulars zu verhindern. Dann erstelle ich ein Aufgabenobjekt. Abenddämmerung. Text wird eingegeben wird verzögert, sie werden falsch sein. Dann lasst uns an diesem Versuch fangen Block arbeiten. Hier. Ich werde diese Aufgabe einfach einreichen. Dann werden wir bei diesem Versuch nochmal ein TDM oder überprüfen lassen. Dann überprüfe einfach, ob es da ist oder wenn nicht, ob es nicht da ist, dann überprüfe ich einfach alles. Ich weiß bereits, dass das Konto angemeldet ist, aber trotzdem nur um sicher zu sein. Check existiert nicht. Dann wenn es anwesend ist. Jetzt lasst uns arbeiten. Const-Anbieter ist gleich neuen Ether, die Anbieter, Dodd, Web drei, Heider. Es Hadean. Dann kriegen wir den Unterzeichner. Es ist konst zu sagen, dass das gleich dem Anbieter ist , nicht Signer bekommen. Dann werden wir auf den richtigen Weg gehen. Instanz, ist der Vertrag gleich mu Essern, die sich kontrahieren. Dann müssen wir drei Dinge schicken. Erstens, behandelt der Vertrag diese Aufgabe, ABI und Cyanid. Und schließlich, mit diesem Aufgabenvertrag, werden wir die Funktion namens add aufrufen, die sich im Smart Contract befindet. Wir schicken die Dämmerung. Text in der Abenddämmerung. Die Aufgabe wird gelöscht. Und da dies eine Synchronisierungsaufgabe ist, erhalten wir die Antwort. Und diese Antwort. Hier schreiben wir es einfach in diesen Datensatz. Ist das dieses Array besagte Aufgabe. Und wir werden alle Aufgaben anhängen , die bereits mit dieser neuen Aufgabe vorhanden sind , dass ich den Spread-Operator hier mit dieser neuen Aufgabe verwende , okay? Und wenn es einen Fehler gibt und wir werden ihn fangen. Wenn wir auch einen Fehler bekommen, werden wir ihn einfach abfangen. Und Konsolenprotokoll das hinzugefügt wurde. Das wird hinzugefügt, ist aufgetreten. Warum fügst du eine neue Aufgabe hinzu? Das war's. Und ganz am Ende der Funktion wird das InputField wieder leer machen. Setzen Sie die Eingabe leer. Das war's. So schreiben wir die Funktion „Aufgabe hinzufügen“. Wir bringen das Web einfach zum Anbieter aus der Keras-Bibliothek. Und wir schicken meinen Damast aus, Die Geschichten und kriegen den Signer. Dann erstellen wir das Vertragsobjekt und rufen einfach die Aufgabe „Hinzufügen“ auf. Was ich dann getan habe, ist in der Antwort, ich aktualisiere einfach, dass diese Dinge so gemacht werden, dass in der Benutzeroberfläche auch die Dinge geändert werden. In dieser Aufgabe. Ich füge diese Dämmerung auch an. Das war's also. Für dieses Video. In den kommenden Videos werden wir die Hauptfunktionalitäten vervollständigen. Danke. 13. Die Funktionalität der Aufgabe löschen und abrufen: Hi, willkommen zurück. Lassen Sie uns nun an der Funktionalität der späten Aufgabe an diesem Tag arbeiten. Lassen Sie uns einfach die IF-Funktion erstellen, Aufgabe löschen. Wir müssen auch einen Schlüssel schicken. Das ist der Schlüssel ist die Item-ID. Erstes Zeug. Lassen Sie uns alles wie gewohnt in den Try Catch Block einwickeln. Dann V, wir werden es konsolenprotokollieren. Dann machen Frauen bei diesem Versuch einfach dasselbe, was wir dann vorher haben. Es ist ein Fensterobjekt. Wenn dann ADM da ist, dieses Ding als Konsolenpunkt-Log-Prüfung existiert dieses Ding als Konsolenpunkt-Log-Prüfung nicht. Wenn wir nehmen, dass Idiom da ist, dann müssen wir dasselbe tun. Dies, diese Zeilen, kopieren Sie einfach die ersten drei Zeilen. Beachten Sie den neuen Anbieter es KTM, dann den Vertragsunterzeichner und alles. Und schließlich schreibe einfach delete. Ist die Transaktion gleich „warten“, Dusk Contract Dot Delete Task“. Und dieser Schlüssel und wird gelöscht, wird wahr sein. Dann. Dann werden wir all diese Aufgabe aus der Funktionalität bekommen , die wir bereits im Smart Contract haben. Es ist meine Aufgabe zu bekommen. Nennen Sie es wirklich Task Contract Dot, holen Sie sich meine Dämmerung. Und dann sagte dieser Aufgabenwert hier, mit Set Dusk und Voreingenommenheit , die Dämmerungsobjekt sind, das Ergebnis ist. Das war also einfach , dass die Aufgabe nur diese Codezeile neu war. Und in ähnlicher Weise werden wir eine Adder-Funktionalität haben , die als Cat All Task bezeichnet wird. Es wird auch das Gleiche sein. Was ich also tun werde, ist zuallererst, dieses Schreiben Const, Get Aufgabe wird sinken. Und dann das Gleiche. Versuch, Block zu fangen. Hier. Wir werden diesen Gesetzeszusatz stornieren. Und wenn Sie versuchen, hängen Sie, kopieren Sie es einfach, fügen Sie es hier ein und entfernen Sie diese Löschaufgabe. Okay, also haben wir den Anbieter, wir haben den Unterzeichner, wir haben den Aufgabenvertrag. Dann haben wir Führung. Alle Aufgaben sind gleich Wait Task Contract Dot meine Aufgabe zu erhalten. Und wir werden diese Aufgabe einfach hier sagen, das war's. Dies ist also die Funktionalität, um alle Aufgaben zu erhalten. Diese Codes sind wirklich sehr ähnlich. Wenn Sie eine andere Art haben, es zu schreiben , damit die Wiederholung nicht vorhanden ist, wird es sehr gut sein. Aber für einen Anfänger reicht das. Das ist also alles für dieses Video. Wir sehen uns in der nächsten Sitzung. Danke. 14. Die Task erstellen: Hi, willkommen zurück. In diesem Video erstellen wir diese Aufgabenkomponente. Wenn Sie sich also erinnern, haben wir diesen Punkt erstellt, der die Datei test.js ist. Hier. Lasst uns daran arbeiten. Wir werden einige Elemente aus der Material-Benutzeroberfläche importieren. Diese Liste, Liste, Artikel, Liste, Artikel, Liste, Artikel, Text aus MU-I-Material. Und das zweite, was wir importieren werden löschen Ich kann von meinem Fernseher sind UI-Symbole, die Material dann löschen. Die Aufgabenkomponente. Wir werden zwei Immobilien akzeptieren , also Dämmerung, Dämmerung und See-Funktion. Dann wird die Liste zurückgegeben. Es wird eine Liste zurückgeben Klassenname To Do-Liste. Dann liste, item. Und zumindest ein DEM-Text. Aber ich könnte essen ist gleich ist gleich gleich der Dämmerung. Text in der Abenddämmerung. Dann haben wir ein Lösch-Symbol. Die Schriftgröße wird groß sein. B, C, D, 0,7. Und auf Klick-Funktionalität wird auf Klick angezeigt, die wir als Eigenschaft übergeben. Jetzt müssen wir an der Datei app.js arbeiten. Das heißt, zuerst werden wir den US-Effekt Hooke verwenden. Und ganz am Anfang sollten diese Funktionen einmal aufgerufen werden, also loslegen und sich mit all dem verbinden. Sobald die App gerendert wurde, sollten diese beiden Funktionen aufgerufen werden. Was wir dann tun werden, ist in dieser Schaltfläche, die in der Abenddämmerung ist, wir müssen die Null und rechts entfernen und ihm die Funktion Aufgabe hinzufügen zuweisen. Und dann, nachdem genug Farm endet, werden wir welche haben, Sie werden besteuern. Es ist eine ungeordnete Liste. Und darin werden wir Dusk Dot Map haben. Dann bin ich DM. Jedes Element wird sein wir haben diese Aufgabenkomponente. Und innerhalb der Aufgabenkomponente senden wir Ihnen, vielleicht ist es item.name ID. Dann Der nächste Punkt, kein Text in der Dämmerung. Dann senden wir bei Blake einfach verzögerte Funktionen mit der Artikelnummer. Die ID ist der Schlüssel oder du kannst sagen, dass mein Tag, was immer du willst. Also schuldet es. Jetzt ist alles da. Dass unsere App fertiggestellt ist. Im nächsten Video gebe ich einfach ein paar grundlegendes CSS dazu. Und dann werden wir endlich unsere Anwendung testen. Danke. 15. Grundlegendes CSS-Styling: Hi, willkommen zurück. In diesem kurzen Video werden wir nur ein grundlegendes CSS-Styling für unsere Aufgabenkomponente implementieren . Gehen Sie also einfach zu dieser Task-Punkt-CSS-Datei , die wir zuvor erstellt haben, und schreiben Sie dann einfach die Aufgabenliste des Klassennamens. Lass uns etwas Styling geben. Anzeige. Es fehlt. Begründen, Inhalt zentriert. Ausrichten, Elemente. der Mitte. Dann werden es 800 Pixel sein. Umgrenzt ein Pixel. Also ln, hellgrau. Und dann Rand, unten. Dann wähle die Zelle aus. Und lass es uns wichtig machen. Dann. Das nächste, was ich sagen möchte , ist, dass um zehn Uhr das 18 Connect Wallet sind. Aber dann haben wir diese Klasse. Hintergrundfarbe wird für C, E, F, 50 sein, dies ist das Grün. Dann wird Grenze keine sein. Dann farbig. Weiß. Abpacken. Pixel zu Pixel. Dann Text, ausrichten, zentrieren. Decks, Dekoration, keine. Anzeige. Inline. Blockieren. Die Größe beträgt 16 Pixel. Marge. Sie werden geben, um d Prozent zu tun. Richten Sie schließlich Elemente in der Mitte aus und speichern Sie sie einfach. Dies ist ein sehr einfaches Styling. Und wir haben auch die Datei style.css importiert. Ich werde nur sicherstellen, dass es wichtig ist, dass dieses Ende ist. Ich mag es einfach so. Das ist also alles für dieses Video. Die gesamte Bewerbung ist jetzt abgeschlossen. Im letzten Modul werden wir einfach an dieser Verpflichtung arbeiten. Und ich werde diesen Code auch irgendwo am Ende hinzufügen. Sie können es einfach finden, damit Sie es bei Problemen mit Ihrem Code vergleichen können. Danke. 16. Die komplette Anwendung testen: Hi, willkommen zurück. Also haben wir die Bewerbung erfolgreich abgeschlossen. In diesem Video gehen wir einfach die Arbeit der Anwendung durch die Arbeit der Anwendung und prüfen, ob alles gut funktioniert oder nicht. Jetzt gehe ich zum Ordner, zum Stammordner, dann CD zum Client und schreibe npm. Beginne. Ich hoffe, dass alles gut funktioniert. Und wie auch immer, wenn K in irgendeinem Editor ist, werden wir versuchen, es zu lösen. Mal sehen, mal sehen, ob es bereits verbunden ist. Sagen wir, ich werde zuerst die Verbindung entfernen. Entfernen Sie einfach C. Wenn ich aktualisiere, wird automatisch diese Funktion connect gültige Funktion durch diesen Useffekt ausgeführt. Wenn ich es storniere und wenn ich das Netzwerk ändere , um QB zu bringen. Und dann klicke auf Wallets verbinden, um zu sehen, dass du nicht mit dem Netzwerk verbunden bist. Diese Warnung funktioniert ordnungsgemäß. Andererseits werde ich einfach zu mädchenhaftes Netzwerk wechseln. Und dann klicke auf Violett verbinden. Jetzt zeigt das Wallet die Benachrichtigung an. Ich gehe einfach und klicke auf Next connect. Okay? Also werde ich versuchen, das in der Dämmerung zu überprüfen, nur Sprache zu lernen und in der Abenddämmerung nicht funktioniert. Warum funktioniert nicht? Lasst uns sehen. Lerne nur Bit D. Und in der Abenddämmerung müssen sie nachsehen. Ich habe das bei der Abenddämmerung. Sehen wir uns nun die Inspect-Konsole an. Das einreichen bedeutet Kontrakt. Jason hat diese Aufgabe eingereicht. Etwas stimmt nicht. Manchmal verwandt mit dem Vagus. Ist der Vertrag oder Käse auch in einer demokratischen EPA gut. 07 Aufgabe Fragen Sie ein VI-Zyanid. Okay. Drittens, überprüfe ein paar Blöcke. Was ich getan habe, war, dass ich das einfach ändere. Das ist const, ein BA wird es erfordern. Und dann werde ich diese ABA überall schreiben, wo es hier ist , sowie löschen und alle Aufgaben bekommen. Mal sehen, ob es richtig funktioniert oder nicht. Jetzt mal sehen. Wenn ich gehe und ich Solidität lerne. Füge das hinzu, sie. Gerade jetzt. Endlich wird zumindest meine Maske jetzt gezeigt. Ich gehe einfach und schreibe, bestätige. Und jetzt funktioniert es einwandfrei. In meinem Thomas sieht man auch , dass Vertragsinteraktion da ist. Es wird einfach Erfolg werden lassen , weil dieser von der lokalen Site stammt , also von der lokalen Variablen. Aber jetzt ist die Vertragsanweisung erledigt. Und wenn ich aktualisiere, kommt das jetzt aus dem Smart Contract. Nun, dieser Fehler, hoffe du hast verstanden, entferne einfach diese Codezeile und schreibe const ABI wird dies erfordern. Ich lerne wieder Schutzhelm und füge uns einfach hinzu. Und ich klicke jetzt auf Bestätigen. Sie erneut sicher, was auch immer gesagt wird, wenn ich jetzt aktualisiere und nur einer kommt, weil die andere nicht richtig in dieser Blockchain gespeichert war . Siehst du, es gibt Ausgaben. Du musst also warten. Diese Transaktion ist abgeschlossen. Um es in Ihrer Benutzeroberfläche zu zeigen. Lasst uns warten. Jetzt okay, sofort. Wenn ich jetzt aktualisiere, dann sind sie bei zwei. Und versuchen wir, an der Löschfunktion zu arbeiten . Ich klicke auf „Löschen“. Metamask zeigt es uns. Jetzt. Wenn ich einfach auf Löschen klicke und bestätige, schauen wir uns an, was passiert. Stellen Sie sicher, dass Sie die Transaktion abschließen lassen. Okay? Der Übergang ist jetzt nicht abgeschlossen. Wenn ich jetzt aktualisiere, kann ich sehen, dass es erfolgreich gelöscht wurde. gibt nur eine Aufgabe. Und wenn ich mit meiner Vertrags-ID gehe, wenn ich dorthin gehe, hat es eine Art Networking. Klicken Sie auf Suchen und sehen Sie dann, was passiert. Okay, offensichtlich funktioniert alles einwandfrei. Unsere gesamte App ist fertiggestellt. Ich hoffe, Ihnen hat der Kurs gefallen. Sie haben verstanden, wie eine grundlegende, sehr einfache Anwendung entwickelt wird. Und mit diesem Wissen können Sie jede gewünschte Anwendung entwickeln. Das ist alles. Danke. Hab einen schönen Tag.