Erstellen einer dezentralen Bike auf der Binance Smart Chain

1. Willkommen und Projektübersicht: Hallo an alle und willkommen zu meinem Kurs. In diesem Kurs werden wir eine dezentrale Fahrradverleih-Anwendung im Finance Smart Chain Testnetz erstellen eine dezentrale Fahrradverleih-Anwendung . Wir werden damit beginnen, einen intelligenten Vertrag zu codieren und all diese Logik zu setzen zusammen. Dann werden wir es für die Finance Smart Chain einsetzen , um es zu testen. Als Nächstes bauen wir unsere Benutzeroberfläche aus. Also werden wir React benutzen. Wir werden eine Homepage auf einer Dashboard-Seite erstellen. Und schließlich werden wir dieses Front-End mit dem bereitgestellten Smart Contract verbinden , damit wir mit der Blockchain interagieren können um Transaktionen zu tätigen und Daten in all diesen guten Sachen zu ziehen . Und manchmal ist es einfach besser, es in Aktion zu sehen. Hier ist ein Blick auf die endgültige Bewerbung in einer Erklärung, wie sie funktioniert. Okay, also hier ist die Bewerbung. Stellen Sie sich vor, Sie haben viele Radwege in der Innenstadt, kaufen ein wenig Büroräume und stellen ein paar Fahrräder hinein und gründen einen Fahrradverleih. Aber anstatt Bargeld oder Debitkarten oder was auch immer anzunehmen, akzeptieren Sie B & B. Wenn ich also reinkommen und ein Fahrrad mieten wollte, würde ich zu dieser App kommen. Wenn dies mein erstes Mal wäre, würde ich zuerst mein Wallet verbinden. Klicken Sie also auf Wallet verbinden und verbinden Sie Ihr Wallet. Und dann klicke ich auf „Mein Fahrrad auswählen“. Und hier haben wir ein Formular. Es heißt: Willkommen, Bitte geben Sie Ihren Vor- und Nachnamen ein, um sich zu registrieren. Sie müssen sich als Mieter für den Smart-Vertrag registrieren , um sich Fahrräder anzusehen. Also werde ich einfach Travis testen und auf „Senden“ klicken. Dann bestätige ich die Transaktion in MetaMask. Und übrigens sehe ich mir diese niedrigen Gasgebühren an, das sind etwa 0,20 Dollar. Bestätigen Sie also. Sobald dies erledigt ist, wird mein Dashboard angezeigt da ich dann Mieter im Smart Contract bin. Also heißt es willkommen, Travis oder was auch immer dein FirstName ist. Hier sind Ihre Statistiken. Es gibt also B & B Guthaben. Also kann ich meinem Konto Guthaben hinzufügen. Mein fälliger Betrag, meine Anzahl an Fahrminuten, wenn ich ein Fahrrad auschecke und meinen Fahrradstatus derzeit ist es rot, was bedeutet, dass ich kein Fahrrad ausgecheckt habe. Jetzt haben wir zwei Formen. Eine für die Gutschrift Ihres Kontos, eines, um Ihre Beiträge zu bezahlen, und wir haben drei Fahrräder zur Auswahl. Und ich kann hier runter kommen und ein Fahrrad anschauen und ein Antibiotikum überprüfen . Lassen Sie uns also unser Konto gutschreiben. Ich füge 0.2 B&B hinzu, um mein Konto gutzuschreiben. Meine Gesamtzahl beträgt also 0,2 mit einigen minimalen Gasgebühren. Also klicke auf Bestätigen. Und wenn diese Transaktion abgeschlossen ist, bekomme ich 0 bis B und B Guthaben. Jetzt bin ich bereit, mir mein Fahrrad anzuschauen. Ich habe ein bisschen Kredit hier drin. Und ich möchte nachsehen, sagen wir mal, ich möchte mir dieses Middle Bike anschauen. Klicken Sie also auf „Kasse“ und bestätigen Sie das. Und was hier passieren wird , ist mein Bike-Status grün wird, was bedeutet, dass ich gerade ein Fahrrad ausgecheckt habe. In meiner Fahrt beginnen sich die Minuten zu summen und ich kann mein Fahrrad für eine Fahrt mitnehmen. Und wir stehen immer noch aus. Da sind wir los. Mein Bike-Status ist grün. Das Fahrrad kann kostenlos spazieren gehen. Ich komme in ungefähr sieben oder acht Minuten zurück und wir checken das Fahrrad wieder und ich zeige dir den Rest der App. Okay, also sind es ungefähr acht Minuten her, also lasst uns das Fahrrad wieder einchecken. Also komme ich hier runter und klicke auf „ Einchecken“ und bestätige die Transaktion. Was jetzt passieren wird, ist, dass mein Bike-Status wieder rot wird, was bedeutet, dass er nicht ausgecheckt ist. Mein B & B wird in meinen Fahrminuten summiert werden. Mein Bike-Status ist also rot. Mein B & B habe ich 0,005 B & B in meinen Fahrminuten oder um acht Minuten. Jetzt kann ich mein B & B bezahlen, 0,005 BNB machen. Und klicken Sie auf Absenden. Bestätige das. Sobald ich mein Guthaben bezahlt habe, geht dies auf 0. Meine Fahrminuten gehen auf 0 und mein Bike-Status wird wieder angezeigt. Ich kann mir tatsächlich noch mal ein Fahrrad anschauen. Denn wenn Sie ein Guthaben haben, können Sie kein Fahrrad auschecken , weil Sie Ihr Guthaben bezahlen müssen , damit der Besitzer keine Leute jagen muss. Auf diese Weise muss der Eigentümer nicht sehr mit seinen Kunden verbunden sein. Er muss nur das Fahrrad zur Verfügung stellen. Denn wenn Sie Ihr Guthaben nicht bezahlen, können Sie sich ein anderes Fahrrad ansehen. Jetzt, in unserem Smart Contract, haben wir auch viele Schecks eingerichtet, um sicherzustellen, dass Mieter keine Dinge tun , die sie nicht gerne versuchen sollten, mein Do zu bezahlen, wenn ich keinen angemessenen Betrag habe. Wenn ich also auf Absenden klicke, sollte ein Fehler ausgelöst werden. Ich sollte einen Fehler hier oben haben und mir eine Art Fehlermeldung geben. Ja, die Hinrichtung wurde zurückgekehrt. Du hast zu diesem Zeitpunkt nichts fällig? Wenn ich versuche, etwas anderes wie ein Antibiotikum zu überprüfen, das ich nie ausgecheckt habe, sollte ich auch eine Nachricht erhalten. Bitte schau dir zuerst ein Fahrrad an. Und das ist im Grunde der Kern der Anwendung. Darüber hinaus am Ende des Kurses eine Bonusstunde, gibt es am Ende des Kurses eine Bonusstunde, in der wir Dashboard eines Besitzers erstellen. Dieses Dashboard zeigt den Gesamtbetrag des Vertrags, den Betrag, den die Eigentümer sind, und die Schaltfläche, die dem Eigentümer die Möglichkeit gibt , seinen Betrag abzuheben. Jetzt fragen Sie sich vielleicht, wie verdient ein Besitzer damit Geld? Wenn also jemand hierher kommt und seinem Konto 10 US-Dollar gutschreibt, schreibt er dem Smart Contract tatsächlich 10 US-Dollar zu, aber diese 10 Dollar werden ihnen zugeteilt. Wenn sie also ihr tun, kommt es tatsächlich aus ihrem Guthaben in Betrag , den sie zahlen, tatsächlich zu den Eigentümern wird. Jedes Mal, wenn jemand seinen Mountain Dew bezahlt, übergeht das an den Besitzer. So erstellen wir am Ende als Bonus- und Eigentümer-Dashboard , in dem sie diesen Betrag tatsächlich anzeigen und diesen Betrag auszahlen können . Ich hatte also viel Spaß beim Bauen und ich weiß, dass du es auch tun wirst. Wer sollte diesen Kurs belegen? Wir werden sehen, ob eines dieser Szenarien Sie anspricht. Nummer eins, vielleicht suchen Sie einem soliden Web Three Projekt, das Sie Ihrem Portfolio hinzufügen können. Vielleicht lernen Sie die Blockchain-Entwicklung und möchten diesen Job landen und in diese Branche einsteigen, aber Sie benötigen einige solide Projekte Ihrem Portfolio hinzufügen können. Dann ist dieser Kurs genau das Richtige für dich. Vielleicht haben Sie die Blockchain-Entwicklung mit einem Thorium oder auf der Ethereum Virtual Machine durchgeführt . Und Sie fragen sich, wie es mit B&B funktioniert oder wie Sie BNB und Remix verwenden können oder wie Sie es im BSC-Testnetz bereitstellen, dann werden Sie diesen Kurs vorteilhaft finden. Oder vielleicht willst du einfach nur das ganze Paket. Sie möchten lernen, wie Sie einen intelligenten Vertrag erstellen, ihn bereitstellen und aus einer Bibliothek wie React mit ihm interagieren können. Oder vielleicht sind Sie daran interessiert zu sehen, wie wir Soliditätsfehler im Frontend anzeigen können Soliditätsfehler im Frontend um unseren Benutzer mitzuteilen, wann er einen Fehler gemacht hat. Oder vielleicht interessieren Sie sich nur dafür wie eine Anwendung wie diese dem Eigentümer nachhaltiges Einkommen bieten würde. Wenn einer dieser an Sie appelliert, dann denke ich, dass Sie am richtigen Ort sind. Jetzt gibt es ein paar Voraussetzungen. Nummer eins: Sie sollten über Basiswissen zur Webentwicklung verfügen . Sie hätten also wahrscheinlich HTML und CSS lernen und ein paar einfache Webseiten erstellen sollen. Nummer zwei, Sie sollten ein Basisverständnis von JavaScript haben und reagieren. Also werden wir diesen Kurs einen Reaktanten benutzen und das wird erwartet. Es wird nicht verrückt sein, als würden wir Redux nicht benutzen und all diese aufwendigen Sachen haben. Wir werden versuchen, es einfach zu halten, aber Sie sollten immer noch über dieses Basiswissen verfügen. Und dann solltest du endlich ein Verständnis für die Blockchain haben und wie sie funktioniert, was ich annehme, dass du es tust oder du wärst nicht hier. Und was die Solidität angeht, müssen Sie die Solidität nicht kennen, um diesem Kurs teilzunehmen, da ich eine optionale Lektion mit einem Soliditätsprimer habe eine optionale Lektion mit , um Sie auf den neuesten Stand zu bringen, wenn Sie es nicht wissen. Ich denke, du wirst genauso viel Spaß haben wie ich es getan habe, diese App zu erstellen . Also lasst uns anfangen. 2. Unseren Smart Contract erstellen: Okay, wenn du also zu remix.ethereum.org gehst, werden wir die Remix-IDE so verwenden, wie wir sollten. Ändere meinen Workspace in den Standardarbeitsbereich. Klicken Sie auf Verträge und erstellen Sie einen neuen. Rechtsklicken Sie einfach auf neue Datei Und nennen wir es Fahrradkette weil ich nicht sehr gut darin bin, Namen zu erfinden, aber Fahrradkette, Blockchain, irgendwie eingängig. Dann wie immer mit Solidität werden Sie es in Ihre Lizenzkennung geben. Dies ist also auskommentiert SPD-Lizenzkennung MIT, was Open-Source-Abendessen, Pragma-Aussage, Pragma-Solidität bedeutet . Dann machen wir einfach 0 Punkt 0 , weil das eine gute Zahl ist. Und wir sagen Vertrag und wir nennen diese Fahrradkette. Und los geht's. Ist es nicht aufregend, einen neuen Bildschirm zum Codon zu haben? Wie auch immer, ich hatte ein paar Beschwerden und ein vorheriges Video , dass es nicht groß genug war. Ich kann diesen Teil des Codes größer machen, aber das hier drüben nicht wirklich. Also ertrage mit mir. Wie wir es normalerweise tun, beginnen wir das mit etwas Pseudocode und es wird so etwas laufen. Fügen Sie sich als Mieter , weil Sie sich als jemanden hinzufügen müssen , der ein Fahrrad mieten kann, ein Fahrrad ausleihen kann. Du gehst und überprüfst das Fahrrad. Check ein Fahrrad ein. Also schaust du dir das Fahrrad an, fährst es herum und checkt es dann wieder ein. Erhalten Sie die Gesamtdauer der Fahrradnutzung. Wie lange warst du auf dem Fahrrad? Und dann wollen wir Dinge wie ein Vertragsguthaben bekommen , nur weil es gut ist, diese Informationen zu haben und gezielt das Guthaben der Mieter zu erhalten. Und dann müssen wir mit dieser Gesamtdauer in der Lage sein, den fälligen Betrag festzulegen, z. B. wie hoch die Miete oder die O sind. Legen Sie also den fälligen Betrag fest. Und ich denke, das ist ein guter Anfang. Fangen wir damit an, das geht von hier aus. Und ich habe diesen Fehler hier unten. Es liegt daran, dass ich kein Semikolon dahinter gesteckt habe. Ich war die letzten Tage in JavaScript, also ertrage mich, wenn ich das Semikolon vergesse. Okay, füge dich als Mieter hinzu. Und bevor wir das tun, mache ich gerne einen Besitzer zu setzen. Wenn also wer auch immer den Smart Contract einsetzt , ist dies der Eigentümer, falls er die Dinge auf sich selbst beschränken möchte . Um das zu tun, setzen wir einfach eine Variable hier oben, eine Speichervariable des Eigentümers des Typs Adresse. Wir erstellen einen Konstruktor. Und wir setzen den Besitzer auf Message Dot Sender. Und was das tut, ist dass dieser Konstruktor bei seiner ersten Bereitstellung ausgeführt wird. Wenn dieser Vertrag zum ersten Mal bereitgestellt wird, wird der Absender, der die Person sein wird, die ihn bereitstellt, als Eigentümer festgelegt. Jetzt sind intelligente Verträge unveränderlich. Sie sind in der Blockchain, sie können nicht geändert werden. Dieser Konstruktor wird also einmal ausgeführt und der Besitzer wird festgelegt. Also werden wir das vor Pseudocode stellen. Also hier ist der erste. Füge dich als Mieter hinzu. Also erstellen wir eine Struktur namens Mieter und legen einige Eigenschaften fest. Also zuerst Adresse, zahlbare Wallet-Adresse. Da jeder Mieter eine Wallet-Adresse hat, ist alles in Web Three eine Wallet-Adresse. Wir können die Person identifizieren, die wir der Person bezahlen können, die Person kann andere Personen bezahlen. Und das ist eine Art von Adresse und wir legen sie als zahlbar fest. Übrigens, wenn du so bist, habe ich keine Ahnung, was das Zeug ist, dieses Pragma in dieser Zahlung. Ich habe vor nicht allzu langer Zeit ein YouTube-Video erstellt. Es ist ungefähr eine Stunde lang. Es heißt Learn Solidität in einer Stunde. Wenn Sie sich das zuerst ansehen möchten, erkläre ich Ihnen, dass alle Datentypen nicht adressieren würden, was eine Zahlung ist. Und wir werden Dinge wie Funktionen und Loops durchgehen und tatsächlich einen ziemlich einfachen intelligenten Vertrag erstellen , damit ich Ihnen beibringen kann , wie Solidität funktioniert. Wenn du also keine Ahnung hast, was ich mache, schau dir das an, dann komm wieder darauf zurück. Ich denke, es wird sehr vorteilhaft für Sie sein. Darauf lege ich unten einen Link. Und wieder ist es ein kostenloses YouTube-Video. Sie haben also eine Wallet-Adresse. Als Nächstes machen wir String FirstName. Und natürlich String LastName. Denn obwohl es sich um eine Wallet-Adresse handelt, wollen wir eine Art Persönlichkeit dahinter. Dann setzen wir ein paar Booleans damit Bool mieten kann, können sie mieten, dürfen sie mieten? Darf nicht gemietet werden. Sie werden in einer Minute sehen, wie das funktioniert. Bool aktiv, sind sie aktiv? Sind sie gerade auf dem Fahrrad, wenn sie es sich ansehen? Es wird aktiv sein , wenn sie es wieder einchecken , sie sind nicht aktiv. Balance. Sie können Geld auf ihr Guthaben senden , um die Gebühren zu decken. Und dann noch ein paar UNs. Der fällige Betrag ist also der Betrag, den sie zahlen müssen. Also nehmen sie das Fahrrad raus und es kostet so viele Minuten in einem Summe bis zu diesem Betrag. Das ist was fällig ist. Und dann hast du ein Ende begonnen, damit wir die Start- und Endzeit verfolgen können , damit wir diese Zeitspanne erreichen können. Du bist zu Ende gegangen. Und das war's. Das ist alles, was ich mit meinem Mieter will. Und das haben wir in einer Struktur geschaffen , die wie ein Objekt ist. Wenn Sie meine Learn Solidität in einem einstündigen Video gesehen haben, haben wir dort eine Reihe von Mietern erstellt, und dann haben wir nur eine Schleife gemacht, um den Index zu finden, den wir wollten. Wann immer wir einen bestimmten Mieter wollten, suchen wir die Wallet-Adresse nach und holen diesen Index. Wir wüssten, dass der Mieter es ist. In diesem Video machen wir etwas anderes. Wir werden kein Array verwenden. Wir werden eine Map verwenden, was es meiner Meinung nach viel einfacher macht. Und Sie müssen sich nicht mit Schleifen auseinandersetzen, was manchmal, wenn es zu viele von ihnen gibt oder wenn es eine unbekannte Anzahl von Schleifen gibt, dies zu hohen Gasgebühren führen kann. Also machen wir eine Sache namens Mapping. Es ist wie ein Wörterbuch, es ist ein Schlüssel-Wert-Paar. Mache Mapping, und der Schlüssel wird die Adresse sein. Der Wert wird der Mieter sein. Werde es öffentlich machen und wir nennen es Mieter. So können wir einen Mieter nach seiner Wallet-Adresse suchen. Wir müssen nichts durchlaufen. Wir können einfach sagen, hier ist die Wallet-Adresse, gib mir den Mieter. Und schließlich können wir diesen Anzeigenmieter für Luftparameter funktionieren lassen. Es werden die Mieter Parameter sein. Also sagen wir Adresse. Eigentlich ist es wahrscheinlich einfacher, dies einfach zu kopieren, einzufügen, weil wir genau das Gleiche wie die Parameter angeben werden. Nimm diese Semikolons raus und lege Kommas ein. Und übrigens, das ist Command D. Wenn Sie etwas auswählen und Command D auf einem Mac ausführen, können Sie einfach die nächste Instanz davon auswählen und dann alle gleichzeitig ändern. Und das habe ich nicht geändert. Und dann kann ich wie das Leerzeichen nehmen und die Rücktaste drücken. Und los geht's, legen ein Leerzeichen zwischen ihnen und sie sind alle in einer Linie. All dies entspricht also nur den Immobilien und dem Mieter. Das ist alles was es ist. Dann nimm dieses nachfolgende Komma ab und lege meine geschweiften Klammern ein . Und dann möchten wir von hier aus diesen Mieter zu unserem Mapping hinzufügen . Und um ein Mapping hinzuzufügen, machst du einfach Mieter, oder? Weil sie Mapping machen, heißt Mieter. Und in Klammern legst du die Wallet-Adresse ein, weil das unser Schlüssel ist. Adressen sind entscheidend. In diesem ist übrigens der Typ, der Typ ist Adresse. In unserer Brieftasche wird die Adresse der Schlüssel sein. Der Wert wird der Mieter sein. Um einer Karte etwas hinzuzufügen, verwenden Sie einfach, wie Mieter Wallet-Adresse gleich einer oder etwas darin ist, fügt einen Schlüssel der Wallet-Adresse im Wert von eins hinzu. Aber statt einer wollen wir einen Mieter. Wir werden einen Mieter mit den gleichen Werten oben hinzufügen. Wallet-Adresse, FirstName. Nachname kann mieten. Aktiv, Balance. Und lass mich anschalten. Haben sie einen Zeilenumbruch und Editor scheint es nicht zu sein. Oh, da sind wir los. Ich musste es abschneiden und zurückschneiden. Aber es ist hier unten in diesen Optionen. Balance, beginne ein Ende. Dies sind unsere Parameter. Also werden wir diese Option Miete oder Funktion hinzufügen nutzen. Wir werden alle gewünschten Parameter eingeben und es wird uns einen neuen Mieter schaffen. In dieser Karte. Es geht einfach so, es ist wie ein Schub. In JavaScript. Wir drängen nur einen Mieter in dieses Mapping oder Wörterbuch oder wie auch immer Sie es nennen möchten. Jetzt habe ich einen Fehler. Was ist hier los? Keine Sichtbarkeit angegeben. Und ja, wir wollen das öffentlich machen. Wir haben einen anderen Fehler und Datenspeicherort muss Speicher heißen Daten. Strings müssen also Speicher sein, werden Daten genannt, die wir verwenden werden Speicher. Und das sollte den Fehler klären. Großartig. Das ist also unsere Anzeigenmiete oder Funktion. Wenn ich die Registerkarte „ Deploy“ hier öffne, wähle ich einfach die JavaScript-VM aus. Klicken Sie auf Bereitstellen. Wir können das testen. Also füge Mieter hinzu. Lassen Sie mich also meine Werte hierher legen. Also wähle ich hier oben nur eine Adresse und eine Kontoadresse aus der du eine Menge zur Auswahl hast. Sie können einen als Eigentümer verwenden und die anderen sind der Nichtbesitzer, aber im Moment spielt es keine Rolle. Also kopiere ich den ersten, füge ihn hier ein. Jetzt FirstName, ich setze Travis ein. Nachname. Lasst uns testen. Und dann kann ich mieten. Es stimmt also, jeder kann im Voraus aktiv mieten, falsch. Und dann werden die nächsten vier 0 sein, also 0000. Versuchen wir also, einen Mieter hinzuzufügen. Hier unten. Es sieht aus, als wäre es erfolgreich gewesen. Und wenn ich Mieter auswähle und meine Wallet-Adresse eingebe, was unser Schlüssel ist, können wir sie nachschlagen, indem wir auf Mieter klicken. Und da bin ich. Hier sind alle Werte des Mieters, die ich gerade hinzugefügt habe, also sieht alles gut aus. Schließen Sie das jetzt ab und fahren Sie fort. Okay, also als nächstes ist der Pseudocode ein Fahrrad zu checken. Lassen Sie uns also eine Funktion namens Checkout machen. Und wir geben eine Adresse ein. Wie ich schon sagte, du wirst das oft sehen, weil ich mir ein Fahrrad anschaue und wenn ich meine Brieftaschenadresse übergebe , damit sie sich identifizieren kann, schaue ich mir das Fahrrad an. Und ich möchte es öffentlich machen. Und darin möchte ich ein paar meiner Mieter-Immobilien umdrehen , zwei verschiedene Werte. Wenn ich mir etwas anschaue, möchte ich aktiv auf true setzen, oder? Also. Adresse der Mieter Wallet, Punkt aktiv. Dies ist also die Mieterbreite, diese Wallet-Adresse im Mapping, Punkt aktiv ist gleich true. Also das ist, hey, ich habe mir gerade ein Fahrrad angesehen. Ich bin derzeit aktiv. Das nächste, was ich tun werde, ist, dass ich diesen Zeitstempel aufnehme. Also Vermieter Dot Wallet Adresse Punkt Start gleich Block, Punkt-Zeitstempel. Jetzt wurde das früher verwendet, um jetzt einfach zu tippen. Aber jetzt verwenden Sie in Solidität einen Blockpunkt-Zeitstempel. Das wird uns also einen Zeitstempel geben und das ist zum Teil Konverter. Es ist also ein Unix-Zeitstempel ist nicht wie ein Monat, Jahr. Es ist ein einzigartiger Unix-Zeitstempel , der ein uint8 ist , der alle in Solidity RUN datiert. Also legen wir die Startzeit fest. Und wir wollen auch, wenn Sie darüber nachdenken, wenn sie sich ein Fahrrad ansehen, die Dosenmiete auf falsch setzen müssen. Es fängt an, hey, ich kann mieten. Es gibt keine Einschränkungen für mich, aber sobald ich ein Fahrrad ausgecheckt habe, muss ich das auf false einstellen, da ich bereits ein Fahrrad draußen habe. Lassen Sie mich das auswählen, fügen Sie es ein und können Sie falsch mieten, diese Person kann kein Fahrrad mieten , weil sie bereits eines hat. Und ich denke, das ist gut. Jetzt können wir uns ein Fahrrad anschauen. Jetzt checken wir eine Fahrradfunktion ein, Check-in, Adresse, Geldbörse, Adresse, Öffentlichkeit. Und wir werden hier etwas Ähnliches machen. Wir müssen aktiv wieder auf falsch umkehren , weil sie nicht mehr auf dem Fahrrad sind. Wir müssen die Endzeit einstellen. Jetzt legen wir die Startzeit fest, wir müssen die Endzeit einstellen. Das Ende ist also blockierter Zeitstempel, dies gibt uns den Zeitstempel für den Check-in. Schließlich möchten wir den fälligen Betrag festlegen. Denken Sie also daran, dass sie diese gebührende Eigenschaft haben. Dies ist, wie viel sie schulden je nachdem, wie lange sie das Fahrrad draußen hatten. Das machen wir in ein paar Minuten. Also werde ich es einfach hier aufstellen, um den fälligen Betrag festzulegen. Und das ist das Einchecken eines Fahrrads, damit wir einen Mieter hinzufügen können, wir können das Fahrrad überprüfen und das Bike-Backend überprüfen. Als Nächstes erhalten Sie die Gesamtdauer der Fahrradnutzung. Und lasst uns dafür eine Funktion erstellen. Wir rufen die Funktion erhalten Gesamtdauer und Adresse, Wallet-Adresse auf. Wir geben die Wallet-Adresse für eine Kennung weiter. Public gibt dabei ein U zurück, und daher wird es zu uns eine Summe zurückgeben, die Gesamtdauer als Ganzzahl, ein U und eine Ganzzahl ohne Vorzeichen. Das erste, was wir tun können, ist, dass wir die Endzeit von der Startzeit abziehen können . Denken Sie daran, dass es in einem Unix-Zeitstempel ist, also können wir die beiden einfach subtrahieren. Aber ich werde eine andere Funktion erstellen, um das zu tun. Also muss ich hier nicht viele Parameter eintragen. Ich nenne diesen Mieter Zeitspanne. Du fängst an, du bist zu Ende gegangen. Und ich werde das im Vertrag intern behalten. Und es tut nichts davon, ändert den Vertrag nicht, berühren wirklich irgendwelche Variablen außerhalb dieser Funktion. Also kann ich es als rein bezeichnen. Wenn es mit einigen anderen Variablen interagiert hat, könnte ich es als Ansicht machen, aber rein bedeutet, dass ich keine Variablen berühre. Ich mache meine ganze Arbeit genau hier in der Funktion, weil ich diese beiden Werte übergebe. Und das gibt ein uint8 zurück. Und es ist so einfach wie Return, end minus start zu sagen. Also zurück zu meiner Funktion hier. Ich kann sagen, du und Timespan ist gleich Mieter, Zeitspanne, Adresse der Mieter Wallet, Punktstart. Und wir werden andere Parameter sehen. Ich lege meine Startzeit in mein Enzym ein. Es wird also das Gleiche sein. Aber der Endzeitstempel, der ND, der den Unterschied zwischen den beiden ausmachen sollte. Und das ist in Sekunden. Also möchte ich das in Minuten bringen. Also kann ich uint8 Zeitspan und Minuten machen, die gleich Zeitspan geteilt durch 60 sind. 60 Sekunden in einer Minute. Das sollte es tun. Und dann gib Zeitspanne und Minuten zurück. Und ich habe hier einen Fehler, der besagt, dass Veränderlichkeit des Funktionszustands auf die Anzeige beschränkt werden kann. Also kann ich hier eine Aussicht geben. Es ist also nicht ganz so niedrig wie rein. Pure liest nicht einmal andere Variablen. Es befasst sich nur mit dieser Funktionsansicht, die andere Variablen liest , aber die Blockchain in keiner Weise verändert. Wenn ich dann einen Wert oder so ändern müsste, würde es mir sagen, dass ich die Ansicht entfernen muss. Das ist alles was ist. Wenn Sie noch einmal einen tiefen Eintauchen in dieses Zeug wünschen, schauen Sie sich diese Solidität an und 60 Minuten, in denen ich all diese Dinge im Detail durchmache. Lasst uns gut. Wir haben also die Gesamtdauer von warum Warteschlangen. Wir haben also die Zeit, die Gesamtdauer in Minuten, und wir können zum nächsten Pseudocode wechseln. Dies sind also nur einfache Methoden , die wir nutzen können. So wie das Vertragssaldo zu erhalten, können wir die Funktion Balance of View Public Retouren durchführen, ein uint8. Alles was wir tun ist zurück, Adresse. Diese Punktbalance. Jetzt sieht das hässlich aus und du sagst wahrscheinlich, wofür ist das? Nun, das bezieht sich auf den zurückgegebenen Vertrag, den Vertragsaldo und das ist eine Art Konvention. Du wirst es in Solidität sehen. Akzeptiere es einfach, merke es dir, und wenn du es jemals brauchst, benutze es. So kann ich das Guthaben jederzeit erhalten, wenn Sie den Adresspunktsaldo zurückgeben , es ist der Vertrag. Und dann, um das Guthaben der Mieter zu bekommen, machen wir diese eine Funktion, das Gleichgewicht des Mieters. Und wir wollen wissen, welcher Renner. Also lasst uns Wallet adressieren, Adresse. öffentliche Ansicht kehrt zurück. Du endest. Und wir wollen nur das Guthaben dieses bestimmten Mieters zurückgeben . Also Mieter Wallet adressieren Punktguthaben, Semikolon. Wir haben also Mieter ausgeglichen, wir haben den Vertragssaldo, Gesamtdauer der Fahrradnutzung. Das nächste, was wir tun wollen, ist festzulegen, den fälligen Betrag festzulegen. Dafür gibt es eine Reihe von Möglichkeiten, das zu tun. Was ich mache ist, dass ich alle fünf Minuten sagen werde , dass sie das Fahrrad haben. Ich werde 0,005 B & B berechnen. Also B & B Preis USD. Okay, also 0,05 sind 2 Dollar. Also zahlen Sie alle fünf Minuten 2 Dollar. Also werde ich das 0,005 BNB benutzen. Und eine Sache, die Sie vielleicht fragen, wenn Sie noch nicht gefragt haben, ist, hey, das ist remix.ethereum.org. Was machen wir mit B und B? Nun, die binäre Smart Chain verwendet die gleiche Menge an Dezimalzahlen wie ein Satz. Das Theorem hat dieses 18-Dezimalsystem , so dass es kleine Bruchteile eines Äthers haben kann. Und es ist das Gleiche in der ByteDance Smart Chain. Es sind 18 Dezimalzahlen. An der Bajonettkette ist es, glaube ich acht, aber die Biomasse-Smart-Kette ist 18. Also können wir hier in Ether technisch alles tun. Und es wird auf die Finanzkette übertragen , wenn wir dies einsetzen. Wir sind tatsächlich, wenn wir es testen , werden Sie es in einer Minute sehen. Das bedeutet also, dass ich dies 0,005 nehmen und diese Dezimalstelle 18 verschieben kann und davon ausgehen kann, dass das so ist. Welcher Weg ist wie zehn bis zum 19. Jahrhundert eines Äthers? Es ist eine kleinere Zahl, was bedeutet, dass es mehr Nullen hat. Es ist eine Möglichkeit, Ihren Äther in Bruchmengen aufzuteilen . Wir können davon ausgehen, dass das bei BNB das Gleiche ist und ich zeige es. Das wird alles für dich hier in einer Minute Sinn machen. Schreiben wir also einen Funktionssatz. Tun Sie dies, wir legen den fälligen Betrag einer bestimmten Adresse fest. Das wird intern sein. Wir setzen das intern ein. Wir wollen nicht, dass sich jemand anderes damit anlegt. Lassen Sie uns die Zeitspanne setzen, Minuten gleich erhalten die Gesamtdauer. Also rufen wir diese Funktion auf, um die gesamte Zeitspanne und Minuten zu erhalten . Lasst uns das kriegen. Dann werden wir das in Fünf-Minuten-Schritten aufteilen. Wenn es also 20 Minuten auf dem Fahrrad gibt, zählt es nur vier Minuten da wir nur Fünf-Minuten-Intervalle zählen. Also fünf Minuten Dir werden 0,005 B & B berechnet. Die zweiten fünf Minuten, 0,005 B & B. Also teile ich das durch 555 Minuten-Inkremente gleich Zeitspanne geteilt durch fünf. Das heißt, wenn du zehn Minuten wieder da draußen bist, wird es zehn geteilt durch fünf sein, was zwei sind. Ihnen wird Punkt O eins, O, B und B berechnet O, B und B Jetzt wollen wir diese Eigenschaft festlegen. Also Mieter Wallet Adresse dot du entspricht Fünf-Minuten-Schritten mal. Hier ist, was wir die Dezimalzahl von 0,05 B & B pro Fünf-Minuten-Inkremente verschieben werden. Ich werde nur sagen, beginne hier mit meiner Dezimalzahl und sage 12345678910111213141516171818 Dezimalzeichen. Das sind also fünf. Mal sehen. Lassen Sie mich Kommas setzen , nur um es klarzustellen. Komma da, Komma da, Komma da. Komma da, Komma da. Also haben wir 3691215 Nullen, 515 Nullen. Wenn wir das wieder bewegen, haben wir 123456789101112131415161718 bekommen. Und dann setzen wir r dot Und wir haben 0,005. Das ist alles was ist. Wir codieren das nur bei 0,05 fest. Vielleicht möchten Sie den neuesten Preis ziehen und eine Art Mathematik machen. Die Sache mit Solidität ist, dass sie nicht fest auf die Box hinweisen. Man muss eine Art verrückte Mathematik machen, um eine Dezimalzahl zu erhalten. Also werde ich einfach die Dezimalzahlen raushalten und nicht versuchen, 0,005 geteilt durch den US-Dollar oder so etwas Verrücktes zu sein 0,005 geteilt durch den US-Dollar . Wir werden nur alle fünf Minuten auf 0,05 setzen. Einige haben ein Semikolon gesetzt. Und wir haben ein Problem. Es liegt daran, dass ich Einheit anstelle von dir platziere und was ich ständig mache. Und falsche Argumentanzahl für Funktion namens get totale Dauer. Wir müssen die Wallet-Adresse weitergeben , weil wir wissen müssen, wessen Dauer. Und das ist ein fälliger Betrag. Jetzt können wir das besuchen, um wir hier oben haben. Wenn sie also das Fahrrad wieder einchecken, möchten wir diesen Betrag festlegen. So können wir einfach auf die Wallet-Adresse fällig eingestellt anrufen. Und das wird eingestellt, dass es variabel ist, sobald sie das Fahrrad einchecken. Und lasst uns das aufheben. Ich denke, wir sind kurz davor, es testen zu können. Wir müssen hier einige erforderliche Aussagen eintragen, aber lassen Sie es uns testen. Bevor wir es tun, gibt es noch eine Sache, die ich hinzufügen möchte, und das ist nur, um etwas zu überprüfen, das wir benutzen können, denke ich im Frontend. Und es ist nur eine Funktion namens kann ein Fahrrad mieten. Das ist nur eine Möglichkeit zu sagen: Hey, können sie ein Fahrrad mieten, ohne sich die Eigenschaften der Struktur ansehen zu müssen. Wir können es einfach hier nennen und einen wahren oder falschen zurück bekommen. Also Adresse, während an der Adresse. Public View gibt bool zurück, Dreh Mieter, Wallet-Adresse, Dot kann mieten. Es sagt uns also nur wahr oder falsch. Was setzt das S? Das ist alles. Testen wir das mal. Das wird sehr viel Spaß machen. Ich denke, während wir dies tun, werden Sie all diese Bedingungen der Dinge sehen , die wir schützen wollen. Sie sollten das nicht tun können. Das sollten sie nicht können. Und es wird uns veranlassen, Forward-Statements zu erstellen. Testen wir es also. Testen wir es zuerst lokal, bevor wir etwas in der ByteDance-Kette machen. Also kommst du hierher und wir werden uns für JavaScript-VM entscheiden. Wieder, wie zuvor, wähle ich einfach die erste Adresse aus und mache sie zum Besitzer, weil wir sie bereitstellen und auf „ Bereitstellen“ klicken und diese öffnen. Als erstes fügen wir einen Mieter hinzu. Und lass es uns nicht zum Besitzer machen. Wählen wir die zweite Person aus und kopieren. Also gebe ich die Adresse ein. Hier sind alle meine Parameter hier. Und Sie können sie auch hier oben beim Mieter finden. Aber ich gebe meine Wallet-Adresse ein. Was Travis Truhe mieten kann. Stimmt? Weil ich schimpfen kann. Ich hab kein Fahrrad draußen. Aktiv falsch und dann kein Gleichgewicht, nichts ist fällig, keine Start- und keine Endzeiten. Um Mieter hinzuzufügen. Und komm her, wähle meine Wallet-Adresse. Komm her und sieh mal , dass ich hier einen Mieter habe. Großartig. Kann ich ein Fahrrad mieten? Stimmt? Ich kann ein Fahrrad mieten. Erhalte die Gesamtdauer 0. Und um ehrlich zu sein, sollten wir das nicht überprüfen können, wenn die Fahrräder auschecken, also werden wir in einer Minute eine Bedingung dafür setzen. Aber lasst uns weitermachen und uns das Bike ansehen. Ich überprüfe es mir. Und wenn ich dann hier auf Mieter klicke, sollte man sagen, kann falsch mieten, weil wir nicht mieten können, solange wir nicht ausgecheckt haben. Es sollte aktiv sagen, wahr. Und es sollte eine Startzeit geben. Also werde ich das nochmal ausführen. Dort kannst du es falsch mieten, aktiv ist wahr und hier ist meine Startzeit. Jetzt haben wir das in Fünf-Minuten-Schritten eingerichtet und ich könnte das ändern, aber ich werde nur die fünf Minuten warten und wiederkommen. Ich werde das pausieren, nach fünf Minuten wiederkommen und wir werden das Fahrrad wieder einchecken und sehen, wie das funktioniert. Okay, es sind ungefähr fünf Minuten her. Also werde ich das Fahrrad wieder einchecken. Und deshalb wähle ich den Check-in und klicke auf „Einchecken“. Und wenn ich jetzt nachschaue, überprüfe meinen Mieter hier, er sollte eine n Zeit haben. Aktiv sollte zu falsch gehen und kann die Miete falsch bleiben da sie nicht bezahlt haben und wir einen fälligen Betrag haben sollten. Also klicken wir auf Mieter und los geht's. Also haben wir eine Startzeit, wir haben eine n Zeit. Wir sind nicht mehr aktiv und können nicht mieten. Großartig. Wir haben auch einen Mountain Dew, und es wird fünf mit all den Nullen sein, was ein Äther sein wird. Aber auch hier wird es ins B & B übergehen , wenn wir dort ankommen. Lassen Sie uns also einige dieser anderen Dinge überprüfen. Ich kann ein Fahrrad mieten, das falsch ist. Oder das Gleichgewicht des Mieters, wie ausgeglichen habe ich da drin. Ich habe nichts reingesteckt. Sag also 0. Saldo des Vertrages beträgt 0 und meine Gesamtdauer sollte jetzt sechs Minuten betragen. Ja, es ist eine Sechs. Das wurde also richtig berechnet. Wir hatten das Fahrrad sechs Minuten lang. Das nächste, was wir tun möchten, ist, unseren Restbetrag bezahlen zu können, denn kann ich jetzt ein Fahrrad auschecken? Nein, ich kann nicht. Weil ich eine ausgewogene Fälligkeit habe und mir gerade klar wurde, dass wir keine Möglichkeit gefunden haben, eine Zahlung zu leisten. Wir müssen also in der Lage sein, Geld auf unser Guthaben zu schicken , um das auszuzahlen. Also lasst uns den Vertrag schließen und das zusammenstellen. Das ist also eine andere, die ich total vergessen habe. Lassen Sie uns einen weiteren Pseudocode-Kommentar hier abgeben und sagen Sie einfach eine Zahlung tätigen. Und bevor wir diese Funktion machen, wurde mir klar, dass wir auch keine Möglichkeit hatten, Geld einzahlen zu können. Der Flow ist also so. Der Mieter wird Geld auf sein Guthaben einzahlen. Eine der Eigenschaften hier ist also ausgewogen. Sie werden Geld in das Guthaben einzahlen , damit bereits Geld drin ist. Es ist irgendwie wie im Voraus zu bezahlen. Aber das Geld, wenn Sie es einzahlen, wird es auf den gesamten Vertrag fließen und dann wird der Betrag, den Sie eingegeben haben, an Sie gehen. Wenn also zehn Personen 10 Dollar einbringen, sind es 100 Dollar im Vertrag, aber jeder Person werden 10 Dollar gutgeschrieben. Und wenn diese Leute Zahlungen leisten, wird Geld von ihrem Guthaben abgezogen, damit das Geld und der Gesamtvertrag die Eigentümer werden. Hoffe das ergibt Sinn. Ich denke, das wird es, sobald wir das schreiben. Also lass uns das machen. Zahlen Sie schnell ein. Zusammengesetzte Funktion, Einzahlung, Adresse, Geldbörse , Adresse, zahlbar, öffentlich, dann Mieter. Und um dir das zu zeigen, kann ich das tatsächlich schließen und einfach drin lassen. Dies wird Geld auf den Vertrag einzahlen , da es zahlbar ist. Ich kann diese Einzahlungsfunktion aufrufen und Geld senden. Und es wird es auf den Vertrag einzahlen. Das wird es sowieso tun. Aber wir möchten es auch zum Guthaben der Mieter hinzufügen. Wir möchten also den Geldbeutel-Adresssaldo der Mieter plus gleichem Nachrichtenpunktwert machen. Die Nachricht ist eine dieser globalen Variablen, wie wir es hier oben hatten, was ich nicht erwähnt habe. Ich sollte wahrscheinlich Message Dot Sender haben , der diesen Nachrichtenpunkt-Absender sendet. Wir haben auch einen Message-Punktwert. Welchen Wert schicke ich? Wenn ich diese Einzahlungsfunktion aufrufe, sende ich einen Wert an sie und er kann in seiner globalen Nachricht, Variable, Nachrichtenpunktwert aufgenommen werden . Das ist alles was ist. Wir zahlen also Geld in den Vertrag ein, aber es wird auch speziell an diese Person gutgeschrieben . Wir zahlen also Geld auf den Vertrag ein, aber wir werden auch diese Wallet-Adresse oder diese Person gutschreiben . Um die Zahlung zu tätigen, erstellen wir eine Funktion namens Zahlung tätigen. Adresse, Wallet-Adresse. Dies ist öffentlich zahlbar. Und was wir hier tun werden, ist, dass wir Mieter, Wallet-Adresse, Punktguthaben machen und Geld aus dem Guthaben nehmen. Minus entspricht also dem Message-Punktwert. Nehmen wir an, Sie sind der einzige Mieter, Sie geben 10 Dollar für Ihr Guthaben ein. Es gibt also 10 Dollar im Vertrag, aber die 10 Dollar sind auf Ihrem Guthaben. Was Sie also tun, wenn Sie eine Zahlung leisten, ziehen Sie diesen Betrag nur aus Ihrem Guthaben. Es gibt also 10 Dollar im Vertrag und alles ist mir zugeteilt. Und ich fahre mit dem Fahrrad für 10 Dollar. Wenn es die 10 Dollar aus meinem Guthaben nimmt, diese 10$ nicht mehr mir. Ich habe kein Gleichgewicht mehr. Diese 10 Dollar gehören dem Besitzer. Und so läuft die Eigentumssache ab, wie ihr Besitzer bezahlt wird. Also schicken wir kein Geld an den Vertrag, wir entfernen tatsächlich Geld aus unserem Guthaben. Und es gibt auch ein paar andere Dinge, die wir überprüfen möchten, wie wir sehen, dass ich das einfach kopiere. Und es gibt auch ein paar andere Dinge, die wir tun wollen. Als ob wir uns setzen wollen, können wir zurück an true vermieten. Weil sie jetzt wieder laufen können. Hey, es gibt Guthaben, sie können wieder gemietet werden. Und ich kopiere das nur noch ein paar Mal. Der fällige Betrag wird 0 sein, da sie den fälligen Betrag bezahlt haben. Startzeit wird 0 sein. Am Ende wird die Zeit wieder bei 0 sein. Also ist alles irgendwie wieder frisch gemacht. Sie haben Dinge ausgezahlt, Sie können mieten. Du hast keine Zeit auf der Uhr. Schnapp dir einen Bissen und ich glaube, das war's. Ich glaube, das ist alles was wir brauchen. Lassen Sie uns jetzt weitermachen, bevor wir es bereitstellen und in einige Force-Anweisungen einfügen, einige Überprüfungen, um sicherzustellen, dass wir keine Dinge zulassen, die wir nicht sollten. Und so wie du das tun solltest, habe ich es schon getan, also füge ich sie hinzu und erkläre sie. Aber die Art, wie Sie dies normalerweise tun, ist, dass Sie dies hierher nehmen und bereitstellen. Und dann klickst du auf Schaltflächen und testest Dinge und du gehst, Hey, warte eine Minute, sie haben ein Gleichgewicht. Sie sollten nicht auschecken können oder hey, sie sollten keine Zahlung leisten können weil sie nichts haben. Musst du solche Schecks haben? Sie also Schaltflächen testen und anklicken, werden Sie die Require-Anweisungen erstellen, aber ich werde diese einlegen und erklären. Kommen wir also zuerst zur Checkout-Funktion, es gibt zwei Dinge, auf die wir achten möchten. Erstens wollen wir sicherstellen, dass sie kein Guthaben haben. Wenn sie ein Guthaben haben, wenn sie nicht erneut auschecken können sollten, die Leute ihre Rechnungen bezahlen. Ansonsten checken sie das Fahrrad einfach weiter aus und leisten keine Zahlungen, weil wir es nicht durchsetzen werden. Wir versuchen hier dezentral zu sein. Was es ist, ist, dass sie einfach nicht auschecken können, wenn sie ihr Guthaben nicht bezahlen . Also müssen wir das überprüfen. Und wir müssen auch überprüfen , ob sie mieten können, dass sie Immobilien mieten können, ist auf „true“ festgelegt. Also machen wir das mit „ Requid-Statements“. Und was an Requid-Aussagen ordentlich ist , ist, dass sie die Transaktion rückgängig machen werden , bevor Gase überspannen, was ziemlich ordentlich ist. Du blasen das Gas nicht und lässt es dann versagen und dann verlierst du dein Geld. Um dies zu tun, setzen Sie require ein und dann Ihre Bedingung fest , dass Sie die Dot Wallet Address Dot Dot Dot Do der Mieter benötigen Dot Wallet Address Dot Dot Dot Do der Mieter und wir möchten gleich 0 sein. Wir wollen keinen Betrag, wollen wir, dass sie ihre Rechnung bezahlen? Wenn das nicht stimmt, können wir ein Komma und dann eine Art Botschaft schreiben. Sie haben ein ausstehendes Saldo Semikolon und wir werden das andere setzen. Machen wir eine Kopie und anstatt es zu tun, werden wir sie überprüfen. Kann Miete Miete gleich stimmen? Das ist es, was wir benötigen. Wir verlangen, dass sie mieten können. Wenn nicht, werden wir eine Nachricht abgeben. Sie können derzeit nicht mieten. Das ist alles zum Auschecken. Zum Einchecken möchten wir überprüfen, ob sie aktiv sind , denn wenn Sie nicht aktiv sind, haben Sie kein Fahrrad, oder? Wenn Sie also einfach auf Einchecken klicken und kein Fahrrad ausgecheckt haben , sollte es einen Fehler auslösen. Also kopiere ich diese Anforderungserklärung. Ich stelle das hier hin und mache aktiv. So aktiv sollte wahr sein, was bedeutet, dass das Bike aktiv ausgecheckt wird. Ansonsten die Nachrichten, bitte schau dir zuerst ein Fahrrad an. Jetzt gehen wir runter, um die Gesamtdauer zu erhalten , und wir möchten hier einen Scheck stellen. Wir möchten überprüfen, ob aktiv falsch ist, was bedeutet, dass sie ihr Fahrrad eingecheckt haben. Sie können die Dauer nur abrufen , wenn sie das Fahrrad eingecheckt haben. Und wenn das nicht stimmt, werden wir sagen, dass Bike gerade ausgecheckt ist. Dann endlich, bei dieser Make Payment Funktion, gibt es jetzt wahrscheinlich mehr , was Sie hier platzieren könnten. Wie jemand in den YouTube-Kommentaren sagte: Hey, du hast diesen Scheck vergessen. Nun, es gibt viele Schecks und Dinge, die du stellen könntest. Dieser wird in Produktion gehen. Wir möchten sicherstellen, dass viele Schecks vorhanden sind. Aber das Letzte, was ich tun möchte, ist die Zahlung zu leisten. Ich möchte sicherstellen, dass ich einen Mountain Dew habe , der vielleicht mehr als 0 ist. Wenn ich eine Zahlung tätige, habe ich nichts zu bezahlen. Was ist der Sinn? Ich möchte auch überprüfen, ob mein Guthaben größer ist als der Betrag ich zahle, wenn ich versuche, zehn Dollar zu zahlen und nur acht zu haben, das wird nicht funktionieren. Also muss ich diesen Scheck auch machen. Um hier Aussagen zu verlangen. Der erste wird prüfen, ob du größer als 0 ist. Das stimmt nicht. Ich sage, du hast zu diesem Zeitpunkt nichts fällig. Beim nächsten möchten wir überprüfen, ob der Saldo größer ist als der Nachrichtenpunktwert. Denken Sie also daran, dass dies zahlbar ist, die Leute senden Geld. Wir möchten, dass unser Guthaben größer der gesendete Geldbetrag. Hier drin stellen wir fest, Sie nicht genug Geld haben, um die Zahlung zu decken. Bitte tätigen Sie eine Einzahlung. Sie können nicht direkt bezahlen, Sie müssen Geld einzahlen und dann das Geld als Zahlungen überweisen und das sparen. Und ich denke, wir sind fertig und wir sind bereit, ein paar Tests durchzuführen. Also werden wir es zuerst auf dieser JavaScript-VM testen. Dann werden wir es in der Finance Smart Chain einsetzen. Eine letzte Sache, die wir tun sollten um dies zu testen, erhalten Sie hier die Gesamtdauer. Wir haben nicht in Fünf-Minuten-Schritten festgelegt. Denken Sie also daran, dass wir das letzte Mal, als wir getestet haben, fünf Minuten warten mussten damit wir eine Nummer zum Befüllen bekommen konnten. Nun, lassen Sie uns das einfach in etwas hart codiertes ändern, wie etwa sechs Minuten zurückgeben, damit wir nicht noch einmal warten müssen. Gibt sechs zurück und wir müssen diese herausnehmen , weil sie nicht verwendete Variablen nicht mögen. Also spar dir das auf. Diesmal kriegen wir also nur sechs Minuten. Wir müssen nicht warten. Wir können auschecken, sofort wieder einchecken und testen können. Lassen Sie uns das also bereitstellen. Jemand, der die erste Adresse auswählt, ist mein Besitzer. Kopieren Sie die Adresse und stellen Sie sie bereit. In der zweiten Adresse wird einer meiner Mieter sein. Fügen Sie also die Adresse hinzu. Vorname ist Travis, Nachname ist Test, was übrigens nicht mein Nachname ist, ich kann schimpfen ist wahr. Und was ist der andere? Aktiv ist falsch. 0 balancieren 0, tun 00, Start- und Endzeiten. Ich füge hinzu, dass der Mieter Lage sein sollte, hierher zu kommen, in der Lage sein sollte, hierher zu kommen, die Adresse einzugeben und den Mieter zu sehen. Großartig. Jetzt schauen wir uns jemanden an, der sich ein Fahrrad anschaut. Klicken Sie auf Kasse. Und meine Werte hier unten sollten sich entsprechend ändern. Klickmieter haben eine Startzeit. Jetzt aktiv und ich kann nicht mieten , weil ich ein Fahrrad draußen habe. Großartig. Machen wir noch ein paar andere Schecks. Also kann ein Fahrrad mieten ist falsch, die Gesamtdauer sollte mir einen Fehler geben. Wenn ich also darauf klicke, es zurückgekehrt und sagt, dass Bike gerade ausgecheckt ist. Das ist also diese Ford-Aussage hier. Bike ist derzeit ausgecheckt, weil 3. Fertigstellung unseres Smart Contracts: Okay, bevor wir zum nächsten Abschnitt übergehen, müssen wir hier ein paar andere Funktionen im Smart Contract hinzufügen . Und ich weiß das, weil ich das Frontend gebaut habe und mir klar wurde, dass wir ein paar andere Dinge brauchten, um uns zu helfen. Fügen wir hier also drei Funktionen hinzu. Der erste heißt Get do in allem, was tut, ist das Dual-Mount für eine Mieteradresse, eine Wallet-Adresse, eine öffentliche Funktion, es ist eine Ansicht und es gibt Sie zurück und wir werden einfach zurückkehren die Adresse der Mieter Wallet, Dot do. Also der Betrag, den der Mieter leisten muss. Als Nächstes holen wir den eigentlichen Mieter. Also holen wir den Mieter und er wird uns vier Informationen über diese Mieter zurückgeben . Es ist also im Grunde so, als würde man die Miete oder das Objekt zurückgeben, aber ohne den Uinta-Teil, Teile davon. Also geht es so. Funktion, erhalte Mieter. Wir geben die Wallet-Adresse erneut weiter. Es ist öffentlich zu sehen, und es kehrt für Dinge zurück. Also String-Speicher, FirstName, String-Speicher, LastName. Bull kann mieten. Im Bullen aktiv. Das ist alles, was wir in diesem Fall wissen wollen. Also hier werden wir sagen , dass FirstName gleich Mieter Wallet Adresse Punkt Vorname ist. Whoops. Dann kopiere ich das noch dreimal auf einem Mac, das ist Umschalt-Option. Und dann runter, um die Zeile zu kopieren, in der Sie sich befinden. Und ich verwende Command D, um beide Instanzen von FirstName und LastName auszuwählen . Und dann werde ich das auch ändern, kann in diesem zu aktiv mieten. Und alles, was wir tun, ist nur diese Eigenschaften dieses Mieters zurückzugeben. Und schließlich erstellen wir eine Funktion namens renter existiert. Und es wird einen Bool zurückgeben, ob diese Miete existiert oder nicht. Wir müssen also wissen , ob der Mieter sich dem Smart Contract hinzufügen muss sich dem Smart Contract hinzufügen oder ob er bereits hinzugefügt wurde. Wir können also sagen, dass Funktion Renter Adresse existiert, während sie sich an Adresse, öffentlichen Ansicht befindet, und es gibt einen Bool zurück. Hier müssen wir prüfen, ob diese Wallet-Adresse existiert oder nicht. Wir können also sagen, ob Mieter während der adressierten Unterkunft am Adresspunkt sind, wenn diese Wallet-Adresse nicht gleich der Adresse 0 ist. Jetzt könntest du wie die Adresse 0 sein? Was soll das sein? Nun, hier ist eine gute Erklärung. Bei Mappings in Solidität gibt es also keine Möglichkeit, direkt zu überprüfen, ob etwas existiert. Alles ist auf seinen Standardwert festgelegt bis es geändert wird. Das bedeutet, dass jede ganze Zahl mit 0 beginnt, jede Zeichenfolge beginnt mit einem Anführungszeichen. Jedes Array beginnt damit und Solidität hat kein Konzept von Null wie andere Sprachen. Was sie also sagen, ist, wenn du dich an den Remix erinnerst, lass uns das hochziehen. Kommentiere das einfach aus, da wir noch nicht fertig sind. Kommen wir also her und setzen unseren Vertrag ein. Ich klicke auf Deploy und öffne das. Was ist, wenn ich zu Mietern gehe und einfach eine Adresse eingebe und auf den Button klicke. Nun, Sie werden sehen, dass sich alles im Standardzustand befindet. Es gibt nichts Nein, wie die Post sagt, dass es nichts Null und Solidität gibt. Es wird diese haben, es wird der Wert dessen sein, was es im Grunde sein würde, also ist das Guthaben 0, do ist 0. All das wird 0 sein. Die Bullen werden falsch sein. Ich meine, es ist nur der Standardwert, es ist kein Null. Und du wirst hier sehen die Wallet-Adresse die Nullen, Nullen, Nullen ist. Es gibt, die sind den ganzen Weg rüber. Und das entspricht der Adresse 0. Ich denke, wir könnten auch 000 oder so etwas ansprechen. Aber Adresse 0 sagt: hey, wenn diese Person in den Mietern ist, hat dies nicht, dann müssen sie existieren. Das ist alles was ist. Ich will nicht zu tief drauf eingehen. Hoffentlich ist das sinnvoll, aber es ist eine gute Möglichkeit zu überprüfen, ob sich ein Schlüssel in einem Mapping befindet. Also lass mich das schließen und wieder darauf zurückkommen. Wenn die Adresse der Mieter Wallet Adresse nicht gleich einer leeren Adresse ist, was bedeutet, dass sie existieren. Dann werden wir wahr zurückkehren. Sonst gib falsch zurück. Dann gibt es ein paar Optimierungen, die ich vornehmen möchte. Wenn wir also nach oben gehen, um die Gesamtdauer zu erhalten, möchte ich diese require -Anweisung entfernen da sie einfach unnötig ist. Also entfernen wir diese Anforderung Aussage. Jetzt möchte ich eine Bedingung setzen. Wenn die Startzeit der Mieter also 0 ist oder wenn ihre Startzeit 0 ist, haben sie das Fahrrad ausgecheckt , es aber nicht wieder eingecheckt. Oder wenn sie aus irgendeinem Grund nur ein Enzym haben , das wahrscheinlich nie passieren wird, möchte ich 0 zurückgeben, weil sie sind, sie werden ausgecheckt, die Zeit nicht vollständig ist. Wenn sie also ihre Gesamtdauer erhalten wollen, bevor sie das Fahrrad überprüfen, können sie das nicht tun. Du musst das Fahrrad überprüfen und zuerst diese Berechnung machen. Also komme ich einfach hier hoch und tue, wenn der Mieter Wallet Address Dot Start gleich 0 ist. Oder wenn ich das kopiere und einfüge, nur weil es für mich schneller ist. Wenn die Endzeit gleich 0 ist , möchte ich einfach 0 zurückgeben. Sie haben 0 Zeitspanne in Minuten. Sonst. Du wirst all das Zeug machen. Wir hatten bereits eine Kopie und fügen es ein. Das war's. Ihr Vertrag ist startklar. Wir haben unseren Vertrag und remix, und von hier aus können wir ihn kompilieren, wir können ihn bereitstellen, wir können das ABI und all diese wichtigen Dinge bekommen. Aber niemand möchte das wirklich aus dem Remix machen, da dies browserbasiert ist. Ich denke, es speichert es im Browser, aber es könnte verloren gehen. Und Sie möchten Ihren gesamten Code normal zusammen und Sie möchten ihn in GitHub und solchen Dingen versionsteuern . Also werden wir das in ein neues Projekt umwandeln. Und ich zeige Ihnen, wie wir etwas, das als Hardhat bezeichnet wird, um dieses ganze Ökosystem zu booten , um diesen intelligenten Vertrag zu verwalten . Das wirst du lieben. Öffnen Sie also Ihr Terminal und wir erstellen einen Ordner für unsere Anwendung. Also gehe ich auf meinen Desktop und erstelle ein Verzeichnis MKDIR. Ich nenne es Fahrradverleih Bewerbung. Drücken Sie Enter. Und dann gehe ich drauf. Und Code-Punkt, um es im VS-Code zu öffnen. Oder Sie können den Ordner hineinziehen oder mit der rechten Maustaste klicken oder tun, was immer Sie wollen Öffnen Sie ihn einfach in VS-Code. Nun, was ich tun werde, ist, dass ich auf Hard Hat.org gehe. Also geh zu hardhead.org. Und was das wieder ist, ist es in der Theorem-Entwicklungsumgebung. Es ermöglicht Ihnen, Solidität lokal auszuführen, zu debuggen und zu testen. Es gibt dir Flexibilität und all diese anderen guten Sachen. Aber was Sie in einer Minute sehen werden, all die großartigen Dinge , die es tut. Also geh hier ganz oben und klicke auf Erste Schritte. Und wir werden diese Schritte befolgen , weil sie wirklich gut geschrieben sind. Also Installation, wir müssen einen NPM-Installations-Hardhat machen. Stellen Sie also sicher, dass Sie kein JS installiert haben. Wenn nicht, gehen Sie einfach zu NodeJS und Google und klicken Sie auf NodeJS und laden Sie einfach die LTS-Version herunter. Sobald das erledigt ist, haben Sie NPM, Sie haben in Bx, Sie haben einen Knoten, alles, was Sie brauchen. Also werden wir diesen Befehl benutzen. Und wir beginnen damit, ein Verzeichnis namens Contract zu erstellen. Ich gehe auf CD in das Vertragsverzeichnis. Dann werde ich npm darin machen, y dash y. Also npm init dash y. Was das macht, ist das erstellt ein Paket JSON, so dass wir npm Pakete im Dash installieren können und nur die Standardinstallation macht. Klicken Sie also auf Enter und es sollte alles für Sie einrichten und Sie sollten in Ihrem Vertragsordner eine paket.json-Datei haben. Jetzt können wir unseren Befehl ausführen, nämlich npm install save-dev hardhat. Klicken Sie also auf Enter, um Hardhead zu installieren. Nachdem das erledigt ist, machen wir diesen Quickstart. Dieser Schnellstart wird tun, ist ein Beispielprojekt zu booten , das wir verwenden werden. Um das zu tun. Du rennst einfach mit px-Schutzhelm. Also kopiere das. Okay, also füge ich das in NP x Hardhat ein, drücke Enter. Und es wird uns ein paar Optionen geben. Also entscheiden wir uns für Erstellen eines grundlegenden Beispielprojekts. Also der erste hier, Hardhat-Projekt-Root wird der Vertragsordner sein, also sind wir gut dort. Ja, ich möchte ignoriert werden. Und es heißt, möchten Sie diese Beispielprojekte Abhängigkeiten mit NPM installieren diese Beispielprojekte Abhängigkeiten mit , die Sie installieren müssen. Also klick, vergewissere dich, dass es ein Y gibt und drücke Enter. Es wird ein paar Pakete installieren , die uns beim Testen und Sprechen des Vertrags und all dieser Dinge während Installation helfen. Mal sehen, was als nächstes kommt. Es wird uns also einige Beispiele geben , wie man Aufgaben ausführt. Sie können also in px Hardhat ausführen, um Aufgaben auszuführen. So können Sie überprüfen, ob Sie die Liste der Konten ausdrucken können. Sie können Ihren Vertrag zusammenstellen. Du kannst einen Knoten ausführen, du kannst Tests machen, viele gute Sachen. Es gibt eine Hardhat-Konfiguration js , mit der Sie Ihre Bereitstellungen konfigurieren können. Wir werden uns in einer Minute darauf einlassen. Sie können in px-Hardhat-Konten ausführen, um alle Konten anzuzeigen, mit denen Sie arbeiten können. Es erstellt so ziemlich 20 Konten, die Sie verwenden können. Sie können Ihre Verträge kompilieren indem Sie npm hardhead compile ausführen. Sie können testen, indem Sie NPS Hall beim Test ausführen. Und jede Menge tolles Zeug. Wir werden das durchmachen. Alles klar, das ist erledigt. Wenn Sie also jetzt in unseren Ordner schauen, haben wir einen Vertrags-Ordner , den sie uns eine Demo namens Greeter dot Soul geben. Wir haben natürlich unsere Knotenmodul-Skripte. Dies wird unser Bereitstellungsskript sein. Wir werden uns in einer Minute darauf einlassen. Sie können Tests durchführen. Wir werden nicht viel testen, weil wir diesen super langen Kurs einfach nicht machen wollen, also werden wir wahrscheinlich die Tests überspringen. Und hier ist unsere Konfiguration. Und natürlich sind sie JSON verpackt. Lassen Sie uns zuerst hier kopieren oder einen Vertrag abschließen. wir also mit der rechten Maustaste auf den Vertragsordner. Erstellen Sie eine Datei namens Bike Rental dot Soul. Eigentlich denke ich, dass wir das Bike Chain Dot Soul nennen. Und ich nehme meinen Vertrag aus Solidität, markiere alles und füge ihn einfach hier ein und speichere es. Sie möchten wahrscheinlich das installieren, obwohl ich nicht weiß, ob Sie müssen, aber vielleicht möchten Sie die Soliditätserweiterung installieren. Ich glaube, das habe ich installiert. Ja, ich habe die Soliditätserweiterung. Es schreit mich also an, weil es die Version nicht mag. Unsere aktuellen Compiler 0 dot phi dot 0. Also kann ich meinen Befehlspilot öffnen und Workspace-Compiler-Version ändern wählen. Ich werde es auf 080 ändern, was ich hier auswählen kann, und es dauert normalerweise fünf Sekunden oder Soda, um zu löschen. Ja, da sind wir los. Aufgeräumt. Mein Vertrag ist also hier drin. Und tatsächlich können wir uns ansehen, wie das funktioniert. Wenn wir also zur Begrüßung gehen oder nicht, sehen Sie, dass wir einen Vertrag namens Greeter haben. Wir haben unseren Konstruktor und wir haben zwei Funktionen. Wir haben eine Greet-Funktion, die eine Begrüßung zurückgibt, und dann haben wir eine festgelegte Greet-Funktion , mit der Sie die Begrüßung ändern können. Also hier ist der Vertrag. Und wenn Sie dann zu Skripten und Beispielskript gehen, ist es eingerichtet, diese Verträge bereitzustellen. Sie sehen hier also all die tollen Kommentare die wir vom Vertrag bereitstellen müssen. Also bekomme die Vertragsfabrik namens Greeter, was der Vertrag ist. Und dann stellt es diese Objekte bereit. Dies ist also das Greeter-Objekt, das den Vertrag darstellt. Und dann setzt es dieses Objekt mit Hallo Hard-Hat als Parameter bereit. Wenn Sie also zu Greeter zurückkehren, sehen Sie im Konstruktor dass Sie eine Begrüßung übergeben, was auch immer Sie möchten, dass Ihre Standardbegrüßung sein soll. Das Beispielskript wird dies bereitstellen und warten dann auf den bereitgestellten Greeter. Dann druckt es Greeter aus, der an jeder Vertragsadresse bereitgestellt wird, an der es bereitgestellt wird. Es gibt also den Gradervertrag, so wird der Greeter eingesetzt. Proben-Tests. Der einzige Test, den sie geben, ist dass der Begrüßer die neue Begrüßung zurückgeben sollte , sobald er geändert wurde. Darin geschieht das Gleiche, erstellt ein Greeter-Objekt, Kontraktobjekt. Es verspottet es mit dem Parameter HelloWorld und dann erwartet es, es erwartet keine Aussage, um sicherzustellen, dass dieser Vertrag HelloWorld hat , während er begrüßt, dann legt es die Begrüßung an etwas anderes, und dann erwartet es, dass das etwas anderes ist. Das ist also der Test und es sollte die ursprüngliche Begrüßung und den Änderungsgruß bestehen. Dann müssen Sie in der Hardhat-Konfiguration nichts für die lokale Bereitstellung einrichten , und das werden wir in einer Minute sehen. So funktioniert es also irgendwie. Und jetzt, da wir wissen, wie es funktioniert, lassen Sie uns diesen Begrüßer löschen, nicht die Seele, um all das für unseren Vertrag zu reproduzieren. Also lösche Greeter Dots Seele. Dann gehen wir zum Beispielskript und wir werden dies in eine Fahrradkette umwandeln Fahrradkette und einen Begrüßer der Vertragskette und den Greeter bekommen . Wir werden Kleinbuchstaben Fahrradkette herstellen. Und dann wollen wir dieses Objekt einsetzen , das jetzt Bike-Chain nicht grösser ist. Ändern Sie das in eine Fahrradkette, setzen Sie es ein und wir senden nichts mit ihrem Einsatz. Also lasst uns das herausnehmen. Ändern Sie dies in Kleinbuchstaben Fahrradkette. In der Konsole wird Log Bike Chain auf die Punktadresse der Fahrradkette eingesetzt. Hoffentlich ergab das Sinn. Wir ändern nur diese Variablen , um unseren Vertrag bereitzustellen und nicht den Greeter. Das sollte also gut sein. Gehe zu Probentests. Wir werden das einfach auskommentieren. Und das war's. Jetzt können wir in px Hardhat kompilieren, unseren Vertrag kompilieren. Und wenn wir das machen, besorgen wir uns einen neuen Ordner mit ihren Luftkompilierten Artefakten. Sie werden also sehen, dass wir einen Artefaktordner haben. Wenn du das öffnest, gibt es einige Build-Informationen. Darum müssen wir uns nicht kümmern. Und wenn Sie den Ordner „Contracts“ öffnen, gibt es einen anderen Ordner namens Bike Chain Dots Soul mit zwei Dateien. In der Akte, an der wir interessiert sind, ist Bike Chain Dot Json. Und hier haben wir einige wichtige Informationen wir verwenden müssen, um unser Frontend zu verknüpfen. Einer davon ist der ABI. Jetzt beschreibt der ABI alle Funktionen. Diese stehen in unserem Vertrag zur Verfügung, damit wir anrufen können. Unser Vertrag befindet sich in der Blockchain und der ABI teilt unserer Anwendung mit, welche Funktionen er aufrufen kann. So sehen Sie hier den Konstruktor, und Sie sehen Balance der Funktion, Add, Add, Add of Mieter, Mietsaldo oder alle von uns erstellten Funktionen. Das ist der ABI. Wir müssen das in einer Minute in unser Projekt einbringen. Dann unten haben wir diesen schön aussehenden Code, und das ist der Bytecode. Dies ist die ausführbare Datei, die auf der virtuellen Maschine von Ethereum lebt. Wenn wir also bereitstellen, wird das hier einige wichtige Informationen geben. Aber wir müssen das nicht im Auge behalten. In jedem Fall, wenn Sie Ihren Vertrag ändern, müssen Sie diese NPM-Hardhat-Kompilierung ausführen. Und alles, was es tun wird, ist, dass es neu kompiliert und die Artefakte aktualisiert. Wir haben darüber gesprochen, unsere Verträge zusammenzustellen und die Verträge zu testen. Nun schauen wir uns das Deployment an. Was wir also in diesem Kurs tun werden , ist, dass wir es in der Finance Smart Chain einsetzen werden. Aber sagen wir, du wolltest nicht in ein Testnetz gehen, aber du willst nur, dass es alles lokal macht. Nun, so würdest du das machen. So können wir dieses Beispielskript verwenden, um sie bereitzustellen. Also genau hier siehst du in px Hardhat im R-Skript laufen. Es wird heißen, einen Begrüßer mit Begrüßung bereitzustellen, Begrüßung, die an dieser Vertragsanschrift bereitgestellt wird. Aber Sie sehen hier, dass ein Schutzhelm standardmäßig immer eine In-Memory-Instanz aufdreht . Das wird also eine In-Memory-Instanz sein. Es ist aber auch möglich, Hardhead eigenständig zu betreiben , damit externe Kunden wie MetaMask sich damit verbinden können. Dies kann MetaMask, Ihr dapp-Frontend oder ein Skript sein. Sie können dies also im px-Hardhat-Knoten tun. Und was das bewirkt, ist, dass ein eigenständiger Knoten erstellt wird, der auf Ihrem Computer ausgeführt wird. Wenn ich also px Hardhat-Knoten eintippe, drücke Enter, es wird ein paar coole Dinge tun. Also eins, es wird mir diese 20 Adressen geben, aber es wird mir die privaten Schlüssel zu diesen Adressen geben , was wirklich cool ist und es wird mir 10 Tausend geben. In. Was ich jetzt tun kann, ist, dass ich eine MetaMask eröffnen kann. Und lasst uns das erste Mal berücksichtigen. Also schnappte es sich den privaten Schlüssel dieses ersten Kontos und ging zu MetaMask. Und bevor Sie das tun, müssen Sie den lokalen Host-8545-Endpunkt zu Ihrem MetaMask hinzufügen . Wenn Sie also ins Werbenetzwerk gehen und ein neues Netzwerk hinzufügen, habe ich es tatsächlich bereits. Aber ich habe hier Localhost 8545. Der Netzwerkname wird also localhost 8545 lauten. neue RPC-URL wird HTTP-Doppelpunkt-Schrägstrich des lokalen Hosts 854 oder fünf sein. Ketten-ID ist 1337. Und übrigens, wenn der Knoten nicht läuft, wird dies einen Fehler geben. Aber jedenfalls ist es 1337. Währungssymbol wird IV sein. Und dann kannst du das leer lassen. Und dann klicke auf „Speichern“. Und das wird dieses lokale Hostnetzwerk tatsächlich speichern , mit dem Sie herumspielen können. Ich kann jetzt diesen privaten Schlüssel kopieren und dann zu Konto importieren gehen und den privaten Schlüssel festlegen, auf Importieren klicken. Und dann habe ich jetzt 10 Tausend, um mit einem Konto zwei zu spielen. Und ich kann tatsächlich Kontodaten machen. Ich kann dies in einen lokalen Hardhat-Test oder so etwas ändern . Was auch immer. Dann möchten Sie diesen Knoten laufen lassen. Ich muss das laufen lassen. Wenn du aufgehört hast, wird das nicht mehr funktionieren. Du willst also zu einem anderen Terminal gehen. Und wir führen diesen nächsten Befehl aus, NPS Hardhat run. Also werden wir dieses Skript bereitstellen, aber wir werden den lokalen Netzwerkhost verwenden. So können Sie den IT-Netzwerklaufplatz OB oder was auch immer Sie verwenden möchten, mitteilen . Du musst es nur in deiner Konfiguration konfigurieren. Aber wir werden das lokale Hostnetzwerk verwenden. Und ich weiß es nicht. Ich denke, das kommt einfach in den Standardwert. Ich sehe es hier nicht. Aber wie auch immer, schnappen wir uns das und setzen es ein. In einem anderen Begriff, an den wir uns erinnern werden, lassen Sie dies in einem anderen Terminal laufen, führen Sie das aus. Oh, das ist nicht gut. Stellen Sie sicher, dass Sie sich in Ihrem Vertrags-Ordner befinden. Stellen Sie sicher, dass Sie sich in Ihrem Vertragsordner befinden denn wenn Sie die Terminals wechseln, Sie zurück in den Stammverzeichnis. Also lass das nochmal laufen. Und da ist es. Fahrradkette, die an diese Vertragsanschrift eingesetzt wird. Dieser intelligente Vertrag wurde auf Ihrem Knoten bereitgestellt , der hier läuft. Wenn Sie also Ihre Front-End-Anwendung erstellen, können Sie dieses Konto einfach verwenden. Ich meine, du musst deinen Vertrag abschließen, um dich zu kleiden und solche Sachen, aber du wirst dieses Konto benutzen und dann kannst du alles vor Ort testen. Du hast viel Eve. Es macht sehr viel Spaß. Aber wir wollen tatsächlich noch einen Schritt weiter gehen und das Finance Smart Chain-Testnetz nutzen. Das wird also live im Testnetz sein. Und wenn Sie es aus irgendeinem Grund live und produzieren wollten oder wissen möchten, wie Sie zur Produktion kommen. Von dort aus ist es ganz einfach. Also lasst uns das jetzt machen. Also schließe ich diesen Browser. Das brauche ich nicht mehr. Ich brauche diesen Knoten nicht laufen. Und ich werde dieses Terminal einfach schließen und das klären. Okay, das war also das Szenario der Entwicklung in Ihrer lokalen Host-Umgebung. Es dreht also einen eigenständigen Knoten, mit dem Sie arbeiten können. Sie können es auf diesem Knoten bereitstellen und dann mit externen Clients wie MetaMask damit sprechen . Tolle Option. Aber wieder wollen wir in ein Testnetz gehen. Wir wollen dieses Ding legitim machen und ein echtes Gefühl dafür haben, kein lokaler Gastgeber. Die Dinge passieren nicht wirklich. Situation. Jetzt gibt es eine Reihe von Möglichkeiten, wie Sie sich mit der ByteDance Smart Chain verbinden können. Viele Entwickler verwenden dafür jedoch einen Drittanbieterdienst, da Sie damit einen schnellen Zugriff ermöglichen und Sie skalieren können, wenn Sie Ihre App jemals in die Produktion bringen wollten. Es gibt also Dienste wie Interferer, das ist beliebt. Alchemie ist sehr beliebt, aber beide konzentrieren sich mehr auf ein Theorem, nicht auf Finanzen. Wir werden heute einen Dienst namens Morales nutzen. Morales wird es uns ermöglichen, direkt mit dem Biodefense Smart Chain-Testnetz zu sprechen . Es gibt viele, viele andere Dinge, die Sie auch untersuchen können, aber es gibt Ihnen schnellen Zugriff. Es ermöglicht Ihnen, zu skalieren. Es hat nur eine Plattform für diese Art von Dingen gebaut. Wenn Sie also zu Morales.io gehen und kostenlos auf Registrieren klicken , ist es völlig kostenlos. Geben Sie einfach Ihre E-Mail-Adresse ein und erstellen ein Passwort. Ich denke, es wird dir eine E-Mail zur Bestätigung schicken und du bist bereit. Also gehe ich zum Login und gebe einfach mein Passwort ein. Sobald Sie hier sind, möchten Sie zu schnellen Nodes gehen und auf das BSC-Netzwerk in Punkte klicken. Hier haben Sie eine Reihe von Endpunkten. Sie haben das Hauptnetz, das Hauptnetzarchiv, das Testset und das Testnetzarchiv. Was wir wollen, ist das Testnetz. Also kopiere das. Und lasst uns zu unserem Projekt zurückkehren und dazu beitragen. Also lege ein Komma hier. Und hier können wir unsere verschiedenen Netzwerke definieren. Also können wir im Hauptnetz testen, lokalen Host, wie wir gerade gemacht haben. Wir können einige Informationen dort platzieren, welche Netzwerke wir verwenden möchten. Also werden wir dieses Testnetz nennen. Und es gibt zwei Eigenschaften, die wir benötigen, URL und Konten. Für die URL fügen wir genau das ein, was wir von Morales kopiert haben. Für Konten holen wir uns dann unser Konto von MetaMask. Wenn Sie also MetaMask öffnen und zum BSC-Testnetz gehen. Wenn Sie dies nicht haben, klicken Sie erneut auf Netzwerke und Werbenetzwerk . Und Sie möchten ein neues Netzwerk für das BSC-Testnetz hinzufügen . Und diese Information ist genau hier. Der Netzwerkname lautet also BSC-Testnetz. Die neue RPC-URL sind Schrägstrichdaten für den HTTPS-Doppelpunkt. Eigentlich einfach, geh einfach und tippe einfach nach Nance Smart Chain zu MetaMask oder ähnlichem ein. Und es wird heißen, MetaMask zu verbinden, um Smart Chain zu finanzieren. Genau hier bekommst du die Werte hier, test net. Also hier ist die RPC-URL. Hier ist die Ketten-ID, die 97 ist, Symbol ist B & B in der Block Explorer-URL ist dies. Vergewissern Sie sich also, dass Sie diese N kopieren. Gehen Sie also erneut zu Einstellungsnetzwerke in einem Netzwerk, kopieren Sie diese Werte und klicken Sie auf Speichern. Und dann sollten Sie eine Option namens BSC Testnetz haben. Und was möchten Sie wahrscheinlich ein neues Konto erstellen. Sie möchten keines Ihrer normalen Konten verwenden. Ich habe einen namens BSC-Test. Um ein neues Konto zu erstellen, klicken Sie einfach auf diesen Kreis und erstellen Konto und geben ihm dann einen Namen und klicken Sie auf Erstellen und es erstellt einen für Sie. Aber was Sie jetzt tun möchten, ist sicherzustellen, dass dies ein Konto ist , das Sie natürlich nicht für irgendetwas anderes verwenden werden. Aber was Sie jetzt tun möchten, ist zu den Kontodaten zu gehen. Und dann möchten Sie einen privaten Schlüssel exportieren. Klicken Sie also auf Private Key exportieren. Und ich habe, du musst dein MetaMask-Passwort eintragen. Also lass mich das schnappen. Geben Sie also Ihr MetaMask-Passwort ein und klicken Sie auf Bestätigen, und es zeigt Ihnen Ihren privaten Schlüssel an. Also kopiere das. Kopiere das. Dann geh zurück zum VS-Code und das werden deine Konten sein. Aber sehen Sie, dass es Plural ist. Die Tatsache, dass es sich um Plural handelt, bedeutet, dass Sie es in ein Array einfügen müssen. Also setze ich deine Zitate ein und füge sie dann so ein. Natürlich wollen wir das nicht in unserer Konfigurationsdatei. Wir wollen es in eine ENV-Datei legen. Gehen wir also zum Vertrag und erstellen eine neue Datei. Es wird dot ENV heißen. Und wir werden einen Wert namens URL haben. Und wir holen uns diese URL. Und tatsächlich ist es gleich und füge das ein. Und dann willst du, dann ist ein weiterer Aufruf zu zählen gleich. Und dann möchten Sie hier Ihren privaten Schlüssel einfügen. Fügen Sie also Ihren privaten Schlüssel hier ein und speichern Sie ihn. Gehen wir nun zurück zur Konfigurationsdatei und wir möchten ein Paket namens dot ENV verwenden. Also installiere npm dot ENV. Und ich vergesse immer, wie das funktioniert. Punkt ENV, ES6. Ja, also importieren wir dot ENV. Und sobald wir das getan haben, können wir es verwenden, da NodeJS diese Umgebungsvariablen verwendet , die als Punkt-ENV-Umgebungsname verarbeitet werden. Oben werden wir die Punkt-ENV-Konfiguration importieren, und dann sollten wir in der Lage sein, die Prozesspunkt-ENV-Punkt-URL zu sagen . Dann sagen wir hier im Array, Punkt ENV verarbeiten, Konten punkten und speichern. Und jetzt sollten wir in der Lage sein zu implementieren. Wir haben alles was wir brauchen. Probieren wir es aus. In bx dot Schutzhelm. Eigentlich habe ich Auto Suggeste an. NPS Hardhat führt also Skripte Slash Beispiel script.js, Dash, Dash-Netzwerk aus. Jetzt wollen wir keinen lokalen Host, wir wollen, was wir hier haben, nämlich Testnetz. Wir sollten also in der Lage sein, das in dem Netzwerk zu löschen, das wir verwenden möchten, Testnetz ist. Wenn wir wollten, wenn wir etwas anderes definieren wollten, setzen wir einfach das gesamte Hauptnetz und das Gleiche. Dann können wir das Hauptnetz bereitstellen, wenn wir wollten, aber wir werden es bereitstellen, um das Netz zu testen und Enter zu drücken. Und es heißt, dass die Importanweisung nicht außerhalb eines Moduls verwendet werden kann. Das ist in Ordnung. Gehen wir zurück und schnappen uns das andere, was die erforderliche Aussage ist. Um require dort zu setzen und es nochmal zu versuchen. Da sind wir los. Fahrradkette, die an diese Vertragsanschrift eingesetzt wird. Und wenn wir zu BSC-Scan-Tests gehen , bestätigen Sie dies, lassen Sie uns unsere Adresse oder Vertragsanschrift eintragen. Da ist es, Alter als fünfunddreißig Sekunden oder Kontrakt. Hier ist unser Bytecode. Gehe zu Events. Ich glaube nicht, dass wir irgendwelche Ereignisse haben. Transaktionen, keine Transaktionen. Großartig. Wir haben unseren Vertrag im Finance Smart Chain-Testnetz bereitgestellt . Also sind wir fertig mit dem Vertragsteil davon. Wenn wir noch einmal Änderungen vornehmen müssen, kompilieren wir sie einfach neu und stellen sie erneut bereit. Es gibt uns eine neue Vertragsadresse und wir werden diese einfach im Frontend aktualisieren. Herzlichen Glückwunsch, Sie sind mit Ihrem Vertrag fertig. Jetzt ist es an der Zeit, am Frontend anzufangen. 4. Projekt-Setup und Aufbau des FrontEnd: Okay, jetzt konzentrieren wir uns auf das Frontend. Und was wir normalerweise mit der React-App machen würden, ist, dass wir die Create React App verwenden würden , um ein Projekt zu booten, aber wir werden etwas anderes verwenden, das als vite bezeichnet wird. Jetzt ist Vite genau wie die Create React App, aber sie ist schneller und hat einige andere Anpassungen, aber darüber werden wir uns keine Sorgen machen. Also sollte es wie eins für eins gleich sein. Wir sollten dies nutzen können und all die Dinge tun, die wir in der Create React App tun würden. Wenn du also zu vite gehst, ist es ein Byte, js dot dev. Und klicke auf Erste Schritte. Und dann geh runter, lass uns Garn machen, um Vite zu schaffen. Fühlen Sie sich frei, npm zu machen, wenn Sie möchten. Ich bevorzuge einfach Garn. Und fügen Sie ihn in Ihrem Wurzelordner einfach ein und drücken Sie Garn eingeben, einen Biss erzeugen. Und es wird ein React-Projekt booten. Also Projektname, nennen wir es Client. Weil dies das Frontend unserer Anwendung sein wird . Und dann wähle ein Framework aus. Natürlich werden wir uns für React entscheiden. Dann möchte ich TypeScript nicht verwenden. Also wähle einfach reagiere. Und da sind wir los. Fertig. Wenn Sie also Ihren Vertrag schließen, sehen Sie, dass Sie jetzt einen Kundenordner haben. Und wenn man es sich anschaut, ist es fast genau dasselbe wie die Create React App. Also nehmen wir die App CSS und löschen sie. Und das Favicon und das Logo, lösche diese. Dann werden wir in der App JSX einfach all dieses Eingabe-Div löschen. Hallo nur um zu sehen, dass es funktioniert. Und um dies auszuführen, wenn wir uns das Paket JSON ansehen, ist das Skript taub. Also können wir einen Garn Run Dev oder npm run dev machen. Entweder einer. Natürlich muss ich im richtigen Ordner sein. Stellen Sie also sicher, dass Sie das Ende Ihres Client-Ordners sehen . Führe das nochmal aus. Und natürlich müssen wir Yarn installieren oder NPM installieren, um R-Pakete zu installieren. Alles klar, versuchen wir es noch einmal. Du bist nicht Yarn install Yarn run dev und gehe zu localhost. 3 Tausend konnten nicht eingegeben werden. Okay, also haben wir ein paar Dateien gelöscht. Wir müssen die Importe löschen, gehen Sie auch zur App JSX, löschen Sie diese wichtige Logo-Erklärung. Wir haben kein App CSS, du kannst das löschen, speichern. Und ich glaube, das war's. Haupt-JS. Ja, das ist gut. Wenn wir unsere App öffnen. Da sind wir los. Ja, es sagt hallo, also laufen unsere Apps gut. Das erste, was ich tun werde, wir tatsächlich einen Gedanken darüber verwenden welches CSS-Framework wir damit verwenden sollten. Wir werden tatsächlich die Chakra-Benutzeroberfläche verwenden, weil ich denke, dass wir das wirklich schnell aufdrehen können. Jetzt habe ich es nicht oft benutzt. Wenn Sie es also auch nicht benutzt haben, sitzen wir im selben Boot, aber es ist wirklich einfach. Besuchen wir also zuerst die Website. Chakra-Benutzeroberfläche. Und ich bin in Brave, ich will nicht in Brave sein. Lass mich das schließen. Chakra Ui.com. Chakra-UI.com, und klicken Sie dann auf Erste Schritte. Ich würde in Betracht ziehen, Tailwind zu verwenden, aber ich habe in der Vergangenheit einmal ein Tutorial für zwei Rückenwind gemacht und es war einfach so, so viele Klassen, mit denen ich Schritt halten musste. Ich denke, es wird damit viel einfacher. Also gehen wir los und kommen zu dieser ersten Schritte-Seite. Wir scrollen nach unten zur Seite React App erstellen. Klicken Sie darauf. Und wir sehen hier, dass wir, wenn wir Create React App verwenden, tatsächlich den Befehl ausführen können, dieses CSS-Framework damit bootet. Wir verwenden keine Create React App, obwohl sie sehr ähnlich ist. Also müssen wir es manuell machen. Also komm hier runter zur manuellen Installation. Klicken Sie entweder auf Garn oder in VM und lassen Sie es uns installieren. Stoppen Sie also Ihren Server und fügen Sie diesen Befehl ein und installieren Sie die Chakra-Benutzeroberfläche. Es gibt noch ein paar andere Pakete, Emotionen und Frame oder Bewegung. Dann möchten wir dieses Anbieter-Setup durchführen. Deshalb müssen wir diesen Anbieter hinzufügen, der unsere App-Komponente umschließt. Also verwende ich zuerst diese Importanweisung. Ich kopiere es und gehe zu Haupt-JS. Fügen wir das einfach hier oberhalb Ihres Index-CSS ein. Dann wollen wir die App umwickeln. Und ich nehme einfach die ganze Sache und ersetze es einfach. Wir werden auch Icons verwenden. Wenn Sie also zu Komponenten gehen und irgendwo gibt es Icons. Lass uns einfach danach suchen. Medien und Icons suchen nach diesem Abschnitt und klicken auf das Symbol, um dieses Icons-Paket zu installieren , um es zu kopieren und zu installieren. Fügen Sie das hier ein und installieren Sie Ihr Icons-Paket. Und während das installiert wird, was wir aller Zeit tun wollen, da dies kein CSS-Kurs ist, hat die Chakra-Benutzeroberfläche viele Komponenten, die Sie im Grunde kopieren und einfügen können. Sie können es kopieren und dann so anpassen, wie Sie es möchten. Wir wollen hier keine Dinge von Grund auf neu machen. Wir wollen das Rad nicht neu erfinden. Wenn Sie also zur Chakra UI Navbar gehen , gelangen Sie zu einer Seite, die viele Komponenten enthält , die vorgefertigt sind. Es gibt also die Seitenabschnitte, Navigationsformulare, Komponenten, viele Dinge, die bereits zusammengestellt sind. Jetzt wird diese Seite manchmal aus irgendeinem Grund nicht geladen, so dass dieser Inhalt nicht geladen wird. Also will ich diese erste Navigationsleiste , weil sie am einfachsten ist. Klicken Sie also einfach auf diesen Pfeil, um ihn auf einer neuen Seite zu öffnen , um eine Vorschau davon zu erhalten, wie es aussieht. Also ja, so sieht es aus. Hier ist dein Logo, hier sind ein paar Navigationsgegenstände. Sie haben Untermenüs und dann ein Anmelden und Melden Sie sich an. Wir werden damit rennen. Gehen wir also zurück zu dieser Seite und klicken auf Code. Wir werden die Breiten-Unternavigation und den CTA verwenden. Klicken Sie auf Code und klicken Sie auf Kopieren. Und dann erstellen wir eine neue Komponente. Gehen wir also zur Quelle, erstellen Sie einen neuen Ordner namens components und erstellen Sie eine neue Datei namens nav bar dot js X. Und ich füge das in diese ganze Sache ein. Und ich werde damit die Hauptfunktion finden, nämlich bei der Unternavigation. Ich ändere es nur in Navbar. Es wurde bereits als Standard exportiert, daher müssen wir das unten nicht hinzufügen. Und wir haben ein paar Fehler. Was ist los? Oh, das sieht aus, als wäre es TypeScript, also müssen wir uns nur darauf einstellen. Gehen wir also nach unten und entfernen Sie einfach alle diese Typen. Entfernen Sie das also aus dem NAB-Element-Array. Und wir müssen keine Schnittstelle erstellen, da dies nicht TypeScript ist. Finde den nächsten Fehler. Entfernen Sie diesen Typ unter dem mobilen Navigationsgerät. Gehen Sie weiter unter dem Desktop-Subnetz nach oben. Entferne das. Und ich glaube, wir sind im Klaren. Also sollten wir in der Lage sein, das zu speichern und Air-Servergarn zu betreiben, dev. Und wir sollten sehen, dass diese Navbar so einfach sein sollte. Natürlich tun wir das nicht, weil wir es nicht zu unserer App-Komponente hinzugefügt haben. Das ist also Nav Bar. Gehen wir also zurück zur App. Also APA, JSX, und dann oben , Lassen Sie es uns importieren, importieren Sie die Navbar aus Punkt-Schrägstrich-Komponenten. Und dann können wir hier einfach dieses Hallo ändern und durch Navbar ersetzen und speichern. Und wir sollten eine Navbar haben. Da sind wir los. Es sieht gut aus. Jetzt brauchen wir nicht all das Zeug, alles, was wir als Logobereich behalten werden. Wir werden angeben, wie auch immer der Name unserer App lautet. Und wir brauchen uns nicht anzumelden und uns anzumelden, wir brauchen nur Connect Wallet. Nehmen wir also einige Anpassungen vor, damit wir es loswerden können. Mal sehen, Arbeit suchen. Also hier sind die Navbar Items. Lassen Sie uns also Mietdesigner loswerden. Lassen Sie uns Learn Design und diese Unternavigationen loswerden . Lasst uns die gute Arbeit loswerden. Lasst uns das Inspirationslabel loswerden. Und am Ende haben wir ein leeres Array. Speichern Sie es und sehen Sie, ob das in Ordnung ist. Ja, wir haben unsere Navigationsgegenstände losgeworden. In Ordnung, mobiles Navigationsgerät. Lassen Sie uns das komplett loswerden , weil wir keine Navigationsgegenstände haben. Es wird so oder so gut aussehen. Also lösche ich das aus. Ich lösche das Mobilfunkgerät. Werde das los. Und ich bin mir sicher, dass das irgendwo referenziert wird. Also lasst es uns finden. Mobilnav Da ist es. Also werde ich den ganzen Abschnitt dort los. Und ich denke, das deckt es ab. Speichern wir es und stellen sicher, dass es in Ordnung ist. Immer noch okay. Lass uns das Schild finden, das es ist. Melde dich an und melde dich an. Werden Sie einfach das Schild M los und ändern Sie einfach die Anmeldung, um die Brieftasche zu verbinden. Wir wollen dieses Rosa nicht wirklich. Wir wollen es bis 500. Und beim Schweben werden wir auch blaugrün machen, aber ein bisschen leichter, also ja, lass es uns bis 300 machen. Und statt Logo, legen wir eine Fahrradkette an. Ich denke, das nennen wir die App Bike-Kette. Und lasst uns das Recht vor diesem schließenden Tag machen. Fügen wir ein Schriftgewicht von 900 hinzu. Lass es uns groß machen. Und Schriftgröße. Wird X groß sein. Speichern Sie das also und sehen Sie , wie es aussieht. Bike-Kette Dann wollen wir diesen Hintergrund etwas dunkler machen. Hier oben, wo der Farbmodus-Wert verwendet wird, ist er auf Weiß eingestellt. Lasst uns graue 200 setzen. Spar dir das auf und sieh dir an. Und das sieht gut aus. Und wenn wir es auf Handy verkleinern, haben wir dieses kleine Hamburger-Symbol, das ich nicht wirklich will. Mal sehen, ob wir herausfinden können, wo das ist. Icon-Button, wahrscheinlich das. Lass uns das komplett loswerden. Und sparen Sie. Es. Sieht aus, als würden unsere Knöpfe verschwinden, also läuft immer noch etwas Handy. Ähm, es hat wahrscheinlich etwas mit den Desktops unter NAB zu tun . Lass uns das Unternav loswerden. Und dann lasst uns das Desktop-Navi loswerden , weil wir keines dieser Navigationsgeräte benötigen. Also lasst uns das auch loswerden. Und das würde genau hier fallen Desktop. Lasst uns das loswerden und es speichern und sehen, was wir haben. Okay, und Button verschwindet immer noch. Und es sieht so aus, als würde man diesen Button genau hier mit dieser Displaybasis MD sehen. Dies reagiert wie Medienabfragen. In der Basis, von der ich denke, dass es das kleinste ist, heißt es keine. Lass uns das herausnehmen und einfach das Medium verlassen. Habe es immer inline flex und das sollte es reparieren. Ja, da sind wir los. Und das geht vorbei, aber geht mir nicht wirklich darum. Wir können es später reparieren, wenn nötig. Das sieht gut aus. Also Fahrradkette und wir haben unsere Connect Wallet. Ich sehe, wie einfach das einzurichten war, fügen Sie einfach das Beispiel ein und optimieren Sie es nach Belieben. Als nächstes werden wir einen großen Helden genau hier platzieren uns auf die Dashboard-Seite verweist. Wenn wir also zu unseren Chakra-Vorlagen zurückkehren, gibt es irgendwo Hero Page Sections Held hier drin. Das wollen wir. Ich wähle das erste hier aus. Es gibt noch einige andere Optionen, wenn Sie mit diesen gehen möchten Ich werde diese erste auswählen und es tut mir leid, gehe zu Code, kopiere. Und wir werden dafür eine Komponente namens Hero Dot JSX erstellen . Ich füge es genau wie zuvor und wir werden den Namen der Hauptfunktion, den Helden, ändern . Wir werden eine weitere Komponente namens Home erstellen. Also home dot js X. Und das wird unsere Homepage sein. Wir werden nur zwei Seiten in dieser App haben, also werden wir es so machen. Und für zu Hause, sagen wir, dass const home gleich eins nach Hause zurückbringt. Lass uns einfach nach Hause gehen, um etwas zurückzugeben. Eigentlich. Lasst es uns haben. Natürlich gib unseren Helden zurück. Held. Stellen Sie sicher, dass Sie Ihre Importausweisung oben ausführen. Und hier unten werde ich die Standardzuhause exportieren. Und lasst uns zu unserem Helden zurückkehren und das optimieren, damit es funktioniert. Und eigentlich werden wir vorerst einfach nach Hause kommen. Ich will es nicht hier, aber stellen wir es hier hin, damit wir sehen können , wie es aussieht, wenn wir es bauen. Stellen Sie sicher, dass Sie oben importiert haben. Und es gefällt nicht , dass wir kein übergeordnetes Element haben , das diese umwickelt. Also werde ich es mit diesen leeren Elementen umwickeln. Großartig, und wir haben einige Fehler, weil wir einige Dinge und Helden anpassen müssen. Das erste ist also, dass Import sich vor dem nächsten Kopf versteckt hat, was wie neben JS aussieht. Diese Vorlagen verwenden also verschiedene Technologien. Wir verwenden nicht neben js. Das werde ich entfernen. Und ich werde eigentlich nur den Kopfteil entfernen. Wir brauchen es nicht. Und alles andere sieht gut aus. Lass es uns speichern und sehen, wie es aussieht. Es ist, es ist wie schon bereit, hierher zu gehen, aber wir müssen diesen Text ändern. Also lasst uns hier oben unseren Text finden und es heißt, Geld verdienen und wir werden sagen, leihen Sie Ihr nächstes Fahrrad. Und dann werden wir diesen Text hier mit Krypto sagen. Geben Sie dann für diesen Text die Brieftasche anschließen ein, wählen Sie Ihr Fahrrad aus und Sie sind auf dem Weg zu den Rennen. Wenn du es zurückgibst. Sie können Ihren Tarif ganz einfach mit B & B bezahlen und lassen Sie uns den Zeilenumbruch einschalten. Und wir alle mögen diese B&B-Gasgebühren , weil wir das wirklich sparen und einen Blick darauf werfen. Ihr nächstes Leerzeichen mit Krypto, und hier ist unsere Aussage. Und lasst uns dieses Spiel tatsächlich mit unserem Button dort oben machen . Lasst uns all dieses grüne Spiel machen und es gibt einen Get Started und beginnend bei 15, Lassen Sie uns das auch ansprechen. Also das erste, was ich tun werde, deine nächste Leertaste zu mieten. Sagen wir das als Blaugrün. Wir wollen Blaugrün benutzen, nicht grün. Dann hier unten, lass uns anfangen, lass uns mein Fahrrad wählen. Und nochmal, setze das auf Blaugrün. Und diese hier oben, der Hintergrund bis zum Farbschema Lasst uns TOO auch sehen, wie das aussieht. Dann erfahren Sie mehr. Wir brauchen es nicht wirklich. Also werde einfach den ganzen Knopf los. Dann beginnt es bei 15 Dollar pro Monat. Lassen Sie uns die Miete kostenlos im Voraus platzieren. Und damit sollten wir fertig sein. Wähle mein Fahrrad, das gemietet weiß Kosten im Voraus, also sollten wir darauf klicken können. Und das sollte uns zum Dashboard bringen. Und das lief kostenlos. Das ist ein bisschen nah dran. Lass uns zurückgehen und sehen, ob wir das verschieben können. Also lasst uns die Spitze setzen. Wir wollen es wie 25 statt 15 sagen. Ich denke, das ist gut. Ja, das ist in Ordnung. Lief kostenlos im Voraus. Du kannst das Fahrrad rausnehmen, du kannst es schreiben und du musst nur bezahlen, wenn es zurückkommt. Jetzt möchten wir auf diese Schaltfläche klicken und zur Dashboard-Seite gehen können . Dafür brauchen wir React Router. Also gehe ich so schnell zu Google. Reagieren Sie Router. Lesen Sie die Docs-Installation und wir brauchen nur das Garn oder NPM Yarn add React Router Dom um sechs Uhr. Also lasst uns das hinzufügen. Stoppt meinen Server, führe das aus, starte mein Server-Backup. Und wir gehen zur App JSX und fügen das alles hier hinzu. Also müssen wir einen Import machen. Eigentlich kann ich es wahrscheinlich von der Seite bekommen. Importieren Sie den Browserrouter Lass uns weitermachen und das schnappen, erspart ein paar Eintippen. Lass uns das als Router machen. Ich glaube, das ist Konvention. Importieren wir Route, Route und Routen vom React Router, dom. In dieser Return-Anweisung werden wir eine Router-Komponente einfügen, Kapital R. Wir werden alles in diese Router-Komponente einschließen. Ich behalte meine Navbar dort. Ich entferne nach Hause. Und innerhalb dieses Routers möchte ich meine Routen festlegen. Also Routen. Und dann werden wir zwei Routen platzieren, werden wir zwei Routen platzieren eine für eine Homepage, eine für unsere Dashboard-Seite. Die erste ist also die Route. Dann mache genau Pfad gleich Schrägstrich, was ihre Homepage ist. Dünneres Element ist die Home-Komponente und ihre Selbstschließung. Und dann kopiere das einfach. Und der zweite Pfad wird Dashboard sein. Element wird Dashboard sein, das wir noch nicht erstellt haben. Wir werden in einer Minute, es wird wahrscheinlich einen Fehler ausfallen, aber es ist okay. Lassen Sie mich das einfach formatieren. Jap. Ich glaube, das war's. Das ist gut und das brauchen wir nicht. Dies ist übrig vom ersten Bootstrap. Wir haben also einen Router darin, wir haben Routen und wir haben zwei Routen definiert. Jetzt können wir zu unserem Helden zurückkehren , wo sich ein Knopf hier befindet. Und da dies ein Button ist, kann man nicht wirklich einen Link machen. Also lasst uns einfach einen Onclick machen. Wir werden ein paar Klammern haben und wir werden Handle Click anrufen. Und als Argument werden wir das Dashboard weitergeben. Dann lass uns das definieren. Kommen wir also zu unserer Heldenfunktion. Und vorher müssen wir navigieren, müssen wir navigieren, was ein Feature von React Router Dom ist, das es uns ermöglicht, zu verschiedenen Pfaden zu navigieren. Also importieren wir, verwenden navigieren von React Router, dom. Jetzt müssen wir diesen Hook definieren. Lassen Sie also navigieren gleich navigieren verwenden. Und jetzt erstellen wir unsere Funktion Const, Handle click gleich. Wir werden jeden Pfad als Parameter übergeben. Und wir rufen navigieren an. Dies ist übrigens eine React Router Sechs-Konvention, benutze den Hook navigiert und wir definieren ihn nur als navigieren und wir werden sie einfach hier verwenden. Also navigiere den Pfad im Pfad und sei das, was ich vorbeigehe. Und wenn du hier unten schaust, gebe ich Dashboards ein. Das sollte uns also navigieren und uns zur Dashboard-Route leiten. Speichern Sie das also und wir haben keine Dashboard-Routen. Gehen wir also zu einer neuen Datei und erstellen eine neue Komponente. Dashboard-Punkt JSX. Und ich kopiere einfach nach Hause und füge es hier ein und wechsle zu Dashboard. Und ich brauche diesen Hero-Import nicht. Wir müssen die Schreibweise beheben, und ich brauche diese Komponente auch hier nicht. Ich werde nur ein H einsetzen, auf dem Dashboard steht. Schauen wir uns also unsere Home-Komponente an. Wir haben unseren Helden. Das wird also deinen Helden zeigen. In dieser Home-Komponente wird immer dann aufgerufen, wenn wir basierend auf unseren Routen auf die Homepage gehen, erinnern Sie sich an die Routen, die wir erstellt haben. Also sollten wir jetzt in der Lage sein, zu unserer App zu gehen und auf die Homepage zu gehen. Also localhost 3 tausend aktualisieren und es funktioniert nicht. Was vergessen wir zu tun? Dashboard ist nicht definiert. Natürlich ist es nicht definiert. Wir haben es nicht oben importiert. Sehen Sie, wir verwenden die Komponente , aber wir haben sie nicht importiert. Wir müssen also nur eine Importanweisung unter diesem Dashboard zum Importieren von Komponenten aus dem Komponenten-Dashboard hinzufügen . Speichern Sie es und unsere Homepage sollte das sein. Da sind wir los. Also haben wir unsere Navbar, wir haben einen Connect Wallet Button, mit dem wir uns später beschäftigen werden. Wir haben einen netten Helden und wenn wir auf „Mein Fahrrad auswählen“ klicken, sollte es uns zur Dashboard-Seite bringen. Genial, unsere Homepage ist fertig. Um es zu wiederholen, haben wir unseren Haupt-JSX , der mit dieser Chakra-Benutzeroberfläche verpackt ist, sodass wir es überall von diesem Chakra-Anbieter verwenden können. Ihre App JSX, wir haben die Route läuft. unserer Homepage, Homepage-Route wird also die Home-Komponente angezeigt. Unsere Dashboard-Route zeigt die Dashboard-Komponente an. Und dann haben wir eine Navbar, die unsere Navbar ist, die hier oben in der App aufgerufen wird. Weil wir wollen, dass das auch in einem Router ist. Wir haben unsere Home-Komponente, die unseren Helden zeigt. Weil es das ist, was auf der Homepage ist. Wir haben unseren Helden, den wir uns gerade angeschaut haben. Und dann haben wir ein Dashboard , zu dem wir als nächstes springen werden. Auf dem Dashboard können wir alle Statistiken anzeigen. Wir werden in der Lage sein, ihr Fahrrad zu wählen und mit ihrem Geldbeutel zu interagieren. Hier wird die ganze Magie passieren. Also lasst uns weitermachen und das bauen. 5. Aufbau des Dashboards: Okay, das nächste, was wir tun wollen, ist unsere Dashboard-Seite aufzubauen . Jetzt ist, wie es aussehen soll. Also werden wir diese Willkommenserklärung haben und wir werden hier einige Statistiken haben. Das wird unser Dashboard sein, wird ein Formular haben, mit dem Sie bezahlen können Was haben ein Formular, um Ihr Konto gutzuschreiben, wird hier eine Auswahl an Fahrrädern haben. Wir haben also drei verschiedene Arten von Fahrrädern. Eine Beschreibung über jedes Fahrrad und die Möglichkeit, in Scheck und ein Fahrrad auszuchecken, das werden wir bauen. uns zuerst Lassen Sie uns zuerst das Statistik-Panel erstellen. Also gehe ich zurück zu diesen Chakra-Vorlagen und ich habe diesen Seitenabschnitt namens Statistik. Und wir werden es einfach direkt von dort abziehen. Also verwenden wir den Namen Statistiken mit Icon. Es wird so aussehen. Klicken Sie also auf Code und kopieren Sie ihn einfach. Dann erstelle ich dafür eine neue Komponente. Ich nenne es aktuelle Summen Punkt JSX und füge einfach diesen Code ein. Und ich denke, das ist auch TypeScript, also müssen wir Typen entfernen. Also werden wir das entfernen, werden die Schnittstelle entfernen. Und ich denke, das ist alles, was wir tun müssen. Importieren wir das nun in unsere Dashboard-Komponente, die die übergeordnete Komponente für diese untergeordneten Komponenten sein wird . Importieren Sie also die aktuelle Summe. Und meine Intelligenz kommt nicht sagt mir, dass wir sie nicht exportiert haben. Also lasst uns das noch einmal überprüfen. Funktionsstatistik-Karte. Eigentlich haben wir es nicht mal genannt. Exportieren Sie die Standardfunktion, wir werden diese aktuellen Summen aufrufen. Und versuchen wir es noch einmal. Gehe zurück zum Dashboard. Importiert aktuelle Summen aus aktuellen Summen. Es ist im selben Ordner. Und statt dieses H1, zeigen wir die aktuellen Summen und sehen, wie das aussieht. Und wir haben einen Fehlerfilter behoben Reagieren Icons, BS aus aktuellen Summen, JSX existiert die Datei? Und es sieht so aus, als würden sie das NPM-Paket React Icons verwenden . wir sicher , dass das ein Paket ist. Reagiere Icons. Und ja, damit wir darauf klicken und installieren können. Also genau hier, npm install, React, Dash Icons. Ich werde Garn benutzen, wie ich es getan habe. Garn installieren, Reagieren Icons. Ups, Garn hinzufügen, reagieren Icons. Und lassen Sie uns installieren, und danach sollten wir gut sein. Jetzt führe ich meinen Server wieder aus und aktualisiere mich. Und da sind wir los. Wir haben unsere drei Statistiken, aber wir wollen vier und wir möchten sie ein wenig optimieren. Wir möchten also, dass der erste ein Wallet-Symbol hat. Die zweite, eine Geld-Ikone. Lasst uns daran arbeiten. Scrollen wir also nach unten zur Statistikkarte, Bestandteilen von Schokolade oder der Benutzeroberfläche. Und Sie werden sehen, dass es wie Icon BS Person, F-Phi-Server, Standort gehen. Was bedeutet das alles? Nun, wir können zurückgehen, um Icons zu reagieren und das nachschlagen. Also will ich ein Portemonnaie. Welchen haben wir hier benutzt? Es sieht so aus. Es sieht so aus, als würden wir dieses MD-Gliederungskonto verwenden. Jetzt können Sie anhand der ersten zwei Buchstaben oder drei Buchstaben erkennen, aus welcher Bibliothek diese stammen . Wenn Sie also wie IO sehen, solange es scharf ist, es wahrscheinlich diese Ionensymbole. Wenn Sie MD sehen, ist es wahrscheinlich Material Design in unserem Auge wie ein Symbol für ein Wiedermix. Wenn Sie also tatsächlich darauf klicken, kopiert es diesen Namen in Ihre Zwischenablage. Du willst hier rauf gehen und sehen, wo es heißt slash BS slash FI. Dies sind die verschiedenen Bibliotheken hier. Wir werden also nicht MD, weil dies Md Gliederungskonto in MD ist Material Design. Ich kopiere das einfach und importiere meinen kopierten Symbolnamen aus dem React Icon Slash MD. Und wir sollten dort gut sein. Also gehe ich runter und ändere das zuerst. Ich ändere das Symbol in die MD-Gliederungskontoguthaben. Und wir nennen das B- und B-Kredit, B & B Credit. Und sagen wir 0,05. Genial, sieht gut aus. Als nächstes haben wir dieses Geldsymbol. Also gehe ich zu meinen Reakt-Icons und tippe Geld ein. Vielleicht. Ja, hier ist es, RI, Geld, Dollarkreis und es sind RIs, also ist es remixed icon. Klicken Sie also darauf und scrollen Sie zurück nach oben. Und ich kann wahrscheinlich anfangen diese zu ersetzen, weil ich sie nicht benutzen werde. Also werde ich das hier einfügen und es ist RI, und ich komme hier runter und füge es in den nächsten ein. Also füge das ein. Und dann ändere ich es in B und B. Das tut B & B auch. Und ich werde nur 0,001 nur für den Füllstoff setzen. Dann ist unser nächstes Icon diese Uhr. Und es werden Fahrminuten sein. Also gehe ich zurück zu meinem Reakt-Icon und tippe die Uhr ein. Wir werden mit diesem gehen, ich skizziere den Uhrkreis. Es ist KI. Also müssen wir sicherstellen, dass wir das sagen. Aber das ist mein drittes. Und ändere das in Fahrminuten. Ich überlasse diese sieben. Das ist gut mit mir. Dann müssen wir noch einen hinzufügen. Wenn Sie also hier aufschauen, wird das einfache Raster für eine dreisäulige Basis und dann auf kleinen Bildschirmen eingerichtet . Aber wir müssen dies auf vier ändern. Wir haben also vier Spalten weil wir nach Symbolen suchen würden. Und dann kopiere ich das einfach und speichere es, um sicherzustellen, dass das stimmt. Es ist nicht der KI-Umriss-Uhrkreis ist natürlich nicht definiert. Also lasst uns hier rauf gehen und das einfügen. Und das ist ein Dy. Dann können wir diesen loswerden und speichern und es sollte funktionieren. Jetzt gehen wir los. Wir lassen also unser B & B Guthaben oder B & B Minuten fahren. Und dann sagt der letzte Bike-Status und ist eigentlich eine Farbe. Was wir also tun können, ist, dass wir zuerst den gleichen Bike-Status erreichen können . Und dann brauchen wir diese beiden nicht, also werde ich diese auskommentieren. Wir müssen eine Hintergrundfarbe hinzufügen, damit wir einen Blick auf die tatsächliche übergeordnete Statistik werfen können . Und dann werden wir hier sehen, dass tatsächlich Eingabeaufforderungen weitergegeben werden. Titelstatistik und Symbol korrelieren also zu jeder Statistikkarte, die einen Titelstatus und ein Symbol hat. Und dann geben wir diese Informationen tatsächlich hier oben weiter. Alles, was wir wirklich tun müssen, ist hier eine weitere Requisite namens BG-Farbe für die Hintergrundfarbe hinzuzufügen . Also werden wir das weitergeben. Und diese sind destrukturiert, also müssen wir keine Requisiten dot BG Farbe gehen. Wir können die Variable eigentlich einfach verwenden. Wir können hier ein weiteres Attribut hinzufügen, das besagt, dass Hintergrundfarbe gleich BG-Farbe ist. Was auch immer wir als Requisite weitergeben, es wird es in diese Hintergrundfarbe ändern. Großartig. Jetzt lass uns runter gehen. Und diese letzte, wir werden sagen, dass bg color gleich ist. Und lasst uns vorerst einfach rot machen. Speichern Sie es und sehen Sie, ob das funktioniert hat. Ja, genau hier haben wir es jetzt. Der Hintergrund färbt Rot. Keiner der anderen erhält also eine Hintergrundfarbe , weil diese nicht weitergegeben wird. Es wird nur weitergegeben . Und das letzte. Was wir tun können, ist, dass wir dies bedingt machen können, Beispiel wenn der Mieter ein Fahrrad ausgecheckt hat und wir möchten, dass es grün ist. Also werden wir das noch einmal besprechen, wenn wir anfangen, die ganze Logik zusammenzustellen. Also denke ich, dass wir dort mit ihrem kleinen Dashboard fertig sind. Oh, eigentlich müssen wir diesen Text ändern. Also lass es uns ändern, um deinen Namen zu begrüßen. Hier sind Ihre Statistiken und werden Ihren Namen später dynamisch machen. Wenn du herkommst, genau hier. Willkommen. Travis. Hier sind Ihre Statistiken. Großartig. Also wieder bauen wir nur die Benutzeroberfläche aus. Wir haben nichts Dynamisches vor sich. Wir lassen es nur gut aussehen. Als nächstes auf unserer Liste haben wir diese beiden Formulare, zahlen Ihre Fälligkeit und schreiben Sie Ihr Konto zu. Gehen wir also zurück zu diesen Chakra-Vorlagen und schauen, ob wir etwas finden können. Hier sind Formulare. Und ich möchte diese nicht wirklich benutzen. Ich will etwas Einfaches. Und wenn ich Foren mache und reagiere, verwende ich gerne React Hook Form, eine Bibliothek, die meiner Meinung nach wirklich einfach ist, ich denke, dass sie einfacher ist als einige der anderen da draußen. Wenn Sie React Hook Form und Chakra-Benutzeroberfläche verwenden, sollten Sie ein schönes Beispiel bekommen , mit dem wir arbeiten können. Das ist also eigentlich von der Chakra-Website. Also ging ich wieder zu Google, ich habe React Hook Form und Chakra-Benutzeroberfläche eingegeben. Und du bekommst diese URL, Chakra-UI. Plus React Haken für sie. Also klick darauf. Und lass uns einfach schnappen, lass uns das einfach hier kopieren und sehen, wie es aussieht. Erstellen wir also eine neue Komponente. Nennen wir es Zahlungsformular. Dies ist die Formel pe mit Punkt JSX. Und füge das ein und finde dann unsere Hauptfunktion namens Hook Form und ändere sie einfach, um sie zu bezahlen. Und dann in unserem Dashboard, und tatsächlich denke ich , dass ich dies in die aktuellen Summen aufnehmen werde, um diese zusammen zu halten , weil wir diese Werte zu diesem Dashboard hinzufügen werden . Also lege ich sie hier unten hin. Und was ich tun werde, ist, dass ich eine Flex-Komponente erstelle. Und ich werde Inhalte im Zentrum rechtfertigen. Und ich werde Gegenstände auch an der Mitte ausrichten. Dazwischen lege ich das Gehaltsformular ein. Ein Formular. Wenn ich Enter drücke, denke ich, dass es es automatisch für mich importiert. Wenn nicht, stellen Sie sicher, dass Sie an die Spitze kommen und das Zahlungsformular aus einem Formular importieren. In meiner Formatierung ist alles ausgeschaltet. Lass mich das formatieren. Da sind wir los. Und mal sehen , wie das aussieht. Also speichere ich es und ich habe ein Problem. Scheitern Sie es nicht zu lösen, React Hook für ihn. Okay. Ja. Also müssen wir tun, wir müssen diese Bibliothek installieren. Also lass mich meinen Server töten und Garn machen. Hinzufügen, Reagieren, Hakenform. Ich glaube, das sagen wir. Oder Sie können npm install, React Hook Form durchführen. Installieren wir das zuerst. Okay, führe deinen Server erneut aus. Schauen wir es uns mal an. Okay, gut. Also haben wir hier eine kleine Form , die nur FirstName sagt. Es hat eine Texteingabe für Ihren Namen und dann eine Schaltfläche zum Senden. Das ist also in Ordnung. Lassen Sie es uns ein wenig anpassen, um zu sagen, dass Sie Ihre Fälligkeit bezahlen und dann eine Zahlung annehmen. Wenn wir also nach unten scrollen, sehen wir hier, dass dies unser Formular ist. Wir haben ein Formularlabel mit der Aufschrift FirstName. Wir haben eine Eingabe, die einige Attribute hat. Id-Name, Platzhaltername, dieses Register, wie Register, dieser Wert mit dem Hook-Formular. Sie werden in einer Minute sehen, wie das funktioniert, und stellen dann einige Anforderungen dafür fest. Dies ist also ein Pflichtfeld, Mindestlänge muss vier betragen. Und dann gibt es diese Fehlermeldung, die angezeigt werden kann, wenn diese Anforderungen nicht erfüllt werden. Lassen Sie uns das also optimieren, bevor wir zur Kontrolle kommen. Ähm, ich mache einfach direkt über dem Formularsteuerelement hier. Und lassen Sie mich das formatieren , weil mir das Format auch nicht gefällt, direkt über diesem Formularsteuerelement in der Return-Anweisung. Machen wir eine Textkomponente. Dies ist von der Chakra-UI-Text-Komponente. Und darin werden wir eine Schrift anlegen. Schriftfamilie entspricht Überschrift und Schriftgröße. Da wir wollen, dass dies größer wird, werden wir extra groß und Schriftgewicht machen. Wir werden 600 machen. Und dann legen wir etwas Spielraum auf den Boden. Nb ist also gleich vier. Und lass mich das wieder ansprechen. Und dazwischen werden wir zahlen Ihr Do. Wir werden dies also oberhalb des Formulars oder über der Eingabe haben . Alles, was wir hier tun müssen, ist, all diese Vorkommen des Namens in etwas wie Zahlung zu ändern . Also werden wir ändern, dass dies ungültig zwei Fehler ist , Punktzahlung. Wir nehmen das Etikett komplett heraus , weil wir es nicht brauchen, da wir hier den Text über dem Formularsteuerelement haben. Für die Eingabe machen wir ID-Zahlung, Platzhalter, Zahlung, Kapital-P-Zahlung. Wir werden diesen Wert registrieren, egal was wir eingeben, wir werden ihn als Zahlung registrieren . Und das ist echt cool. Wenn Sie hier eine ganze Reihe von Eingaben gemacht haben, wird eine Reihe von Schlüsselwertpaaren von allem erstellt , was Sie in Ihrem Formular übermitteln. Es wird also Payment Doppelpunkt sagen, was auch immer wir im Forum betreten, es erledigt die ganze Arbeit für uns. Erforderlich. Ja, es ist erforderlich. Ich werde keine Mindestlänge haben . Also nehme ich das raus. Dann hier unten Pfeile Punktname, ich werde Zahlung und Fehler Punktname, Punktnachricht eingeben, die Zahlung ändern. Das könntest du übrigens als Namen belassen. Es wird nur auf der Ausgabe gesagt, es den Schlüssel des Namens anstelle der Zahlung haben wird. Das ist irgendwie verwirrend. Also leisten wir stattdessen die Zahlung. Großartig. Und es hat einen eingebauten Haken, wird eingereicht, ich denke, es erstellt einen Spinner oder so. Aber hier ist dein Absenden Button. Also lasst uns mal sehen, wie das aussieht. Bevor wir das tun, gehen wir hier hoch und schauen uns die onsubmit-Funktion an. Also enthalten sie sogar dieses Formular onSubmit Handle senden, beim Absenden. Dies ist eine React-Haken-Form. Konvention hier, aber Sie werden hier oben nachsehen, wir haben ein neues Versprechen. Jetzt will ich dieses setTimeout nicht. Es ist nur wie ein Füller für uns, dass es nach drei Sekunden alle Werte zeigt, die wir tun, um es real aussehen zu lassen. Das will ich nicht wirklich. nehme ich raus. Ich werde diesen JSON stringify behalten. Aber ich nehme das raus. Und ich mache das in einer ES6-Pfeilfunktion. Also const onsubmit entspricht Werten. Dann mache ich es zu einem Waschbecken. Und ich werde nur die Werte an der Konsole protokollieren , console.log. Und mal sehen, ob das funktioniert. Ups, ich brauche sie. Also stringifiziert JSON diese Werte , speichere das und wirbele es uns. Aber natürlich haben wir einen Fehler , weil wir immer einen Fehler haben. Text konnte nicht erstellt werden, bitte verwenden Sie den neuen Operator. Also denke ich, es liegt daran, dass wir diese Textkomponente nicht importiert haben. Fügen wir also Text zu unserem Import, Chakra-UI-Import hinzu. Und was haben wir sonst noch benutzt? Ich glaube nicht, dass wir etwas anderes benutzt haben, also sollte das funktionieren. Sparen Sie es auf. Und los geht's. Zahle dein Do. Lassen Sie mich die Konsole klären und wir sollten sehen, dass unser Wert steigt. Also werde ich hallo setzen und einreichen. Da ist es, Zahlung. Hallo, Schlüsselwert. Das ist also gut zu gehen, aber wir wollen nicht, dass die Leute hier Fäden setzen. Wir möchten, dass sie nur Zahlen setzen und nicht nur Zahlen, sondern auch Dezimalzahlen, weil es sich um B & B handelt. Um das zu tun, kommen wir tatsächlich hierher und setzen den Typ auf Zahl. Und weil wir in der Lage sein wollen, Dezimalzahlen zu verwenden, können wir das Step-Attribut hinzufügen und einfach speichern. Und jetzt können wir wie ein 0,001 machen, auf Absenden klicken und es wird richtig gesendet. Und wenn wir versuchen, uns ohne irgendetwas einzureichen, heißt es, dass dies erforderlich ist. Dies ist erforderlich. Ich lasse es uns nicht tun. Das ist es, was an React-Hakenformen ordentlich ist. Es mag all das Zeug für dich. Und wenn Sie sich daran gewöhnt haben, es zu benutzen, ist es eine großartige Bibliothek. Und nur für den Fall, dass Sie sich fragen, was dieser Schritt ist, wenn ich ihn entferne und versuche, diese Zahl einzugeben, kann ich 0,01 eingeben, aber wenn ich auf Senden klicke, heißt es, bitte geben Sie einen gültigen Wert ein. Die nächstgelegenen Werte sind 01, Sie können also nur ganze Zahlen verwenden. Sie können diese Dezimalzahl nicht verwenden. Wir müssen also diese Schrittfunktionalität zulassen. Also ist Schritt gleich NE. Jetzt, da das funktioniert, fügen wir das andere hinzu, nämlich das Guthaben Ihres Kontos, bei dem Sie Ihrem Guthaben Guthaben hinzufügen können. Also werden wir genau das Gleiche machen. Ich kann dieses Seitenformular tatsächlich einfach kopieren. Ich werde eine neue Komponente erstellen und sie zwei ausgewogene Formen hinzufügen , die JSX in unsere andere Form einfügt und nur ein paar Optimierungen vornehmen. Anstatt also dein Do zu bezahlen, werden wir dein Konto gutschreiben. Anstatt zu bezahlen, machen wir einfach Guthaben. Also werde ich all diese tatsächlich auswählen und Guthaben machen. Dann für den Platzhalter möchte ich sehen und ich denke das war's. wir sicher, dass das funktioniert. Wir haben den Typ und den Schritt dort, den wir brauchen werden. Speichern wir das und aktualisieren wir diese Seite. Und natürlich müssen wir das Formular zu unserer Seite hinzufügen. Sie gehen zu aktuellen Summen und schreiben Unterzahlungsformular, fügen hinzu, fügen zum Guthaben hinzu. Und wir müssen diese Funktionsnamen tatsächlich ändern, die bezahlt sind. Zu ausgeglichener Form hinzufügen. Dann müssen wir es zu unseren aktuellen Gesamtwerten hinzufügen, oder? Unterzahlungsformular. Wir müssen die Komponente hinzufügen. Stellen Sie sicher, dass Sie es an der Spitze importieren, um es automatisch zu tun und die Form auszugleichen. Also gibt es meine Komponente und sie wird hier oben importiert. Jetzt schauen wir es uns an. Großartig. Ich habe den Zahler fällig und gucke dein Konto zu. Jetzt sehen diese beiden zusammen , sehen Sie, wie nah sie sind. Lassen Sie uns ihnen eine gewisse Trennung untereinander und mit dem darüber liegenden Inhalt geben. Ich gehe zum PE-Formular. Und dann direkt über diesem Formular füge ich flex justify content gleich Center hinzu. Und das ist nur Flexbox Gegenstände in Chakren auf eigene Weise zentriert ausrichten . Dann legen wir etwas Polsterung, also ist P gleich fünf. Und dann werde ich etwas Marge Top gleich zehn setzen. Und ich muss das Gleiche bei den anderen machen. Also kopiere ich einfach das erste Stück. Stellen Sie sicher, dass Sie nach unten kommen und schließen Sie das. Und ich muss auch mein schließendes Tag dort platzieren mein schließendes Tag dort und sicherstellen, dass du oben importiert hast. Stellen Sie also sicher, dass Sie Flex verwenden, um dies aus der Chakra-Bibliothek zu importieren. Und dann wollen wir das Gleiche in der Anzeige in ausgewogener Form machen . also direkt über der Form Fügen Sie also direkt über der Form mit dem schließenden Tag in den Flex ein und kommen Sie nach unten, um das einzufügen. Und dann hier oben, zum Import hinzugefügt. Werfen wir einen Blick auf das. Da sind wir los. Sie haben also etwas Abstand zwischen ihnen und sie haben etwas Platz oben und unten. Und genau darunter werden wir drei Fahrräder aufstellen. Also erstellen wir tatsächlich das, was Chakra einen Stapel nennt. Darüber hinaus stapeln wir das darüber hinaus. Also möchte ich einen Stapel in die Dashboard-Komponente legen. Und hier oben schreibe ich Stack als Box, Boxen und andere Chakra-Konvention. Text ausrichten Mitte. Alles ist zentriert. Und dann machen wir hier ein paar reaktionsschnelle Sachen. Und ich glaube, ich habe das von einem anderen Ort im Projekt kopiert . Wie gesagt, ich möchte nicht viel Zeit mit CSS verbringen , denn deshalb sind wir wirklich nicht hier. Wir versuchen, das schnell zu bauen , damit wir zum lustigen Blockchain-Zeug kommen können . Also Abstand Basis Acht. Und das sind nur Sprüche auf kleinen Bildschirmen, wobei acht auf Medium 14 ist. Also MD 14. Und dann PY Polsterung y, das ist die obere und untere Polsterung. Wir setzen Basis 20 und MD 36. Und wir machen ein schließendes Tag. Sie unten Fügen Sie unten unter aktuellen Summen das schließende Tag ein. Und dann musst du den Stack importieren. Importiert Stack aus Chakra-Dash UI-Schrägstrich reagieren. Benutze also einfach diese Importanweisung und speichere sie. Und jetzt haben wir einen Fehler. Box ist nicht definiert, daher müssen wir auch Box importieren. Spar dir das auf. Da sind wir los. Jetzt sehen Sie, dass unsere Beschriftungen, Textfelder und Schaltflächen alle entsprechend zentriert sind , weil wir diesen Stapel gemacht haben und alles in diesem Stapel zentriert werden muss. Das sieht also gut aus. Darunter stellen wir diese Reihe von Fahrrädern ein. Also eine Beschreibung und dann diese beiden Knöpfe, und wir werden alle fertig sein, um zu den lustigen Sachen zu kommen. Hier unter den aktuellen Summen werde ich also Flex setzen, Inhalt gleich Center rechtfertigen und Elemente gleich zentrieren. Und mein schließendes Tag werde ich unten in mein schließendes Tag setzen , ich werde direkt darunter legen. Dazwischen. Ich füge diese Bike-Komponenten hinzu. Also setze ich vorerst einfach Fahrrad ein. Und wir werden drei Fahrräder haben. Gehen Sie also hier zu Komponenten, klicken Sie mit der rechten Maustaste auf eine neue Datei erstellen, und nennen wir es Bike Dot JSX. Const Bike entspricht Rückfahrrad ein H1 Fahrrad. Exportieren wir das Standard-Bike exportieren. Und dann fügen wir in unserem Armaturenbrett drei dieser Fahrräder und importieren Sie es oben. Importieren Sie Fahrrad vom Fahrrad. Fügen wir drei davon hinzu und stellen sicher, dass es funktioniert. Sieh dir das an. Und Box ist im Dashboard nicht definiert. Es ist definiert. Lasst uns das nochmal aufheben. Vielleicht muss ich mich nur auffrischen. Okay, Flex ist nicht definiert, also achten Sie darauf, auch hier Flex hinzuzufügen. Los geht's, Fahrrad, Fahrrad, Fahrrad. Wir müssen diese also durch Bilder ersetzen. Ich habe drei Bilder, die du benutzen kannst. Es befindet sich unter diesem Video oder irgendwo, wo auch immer der Kursinhalt ist. Und was ich tun kann ist, dass ich mich öffnen kann, nun, ich erstelle einen Ordner namens Assets. Lass mich das im Finder öffnen und einen anderen öffnen. Und lass mich meins finden. Also füge ich diese drei Elemente ein. Fahrrad eins, fahre zu und fahre drei. Okay, also machen wir für unser Bike eine Schachtel. Denken Sie daran, diese sind alle gebeugt. Jeder wird also diese Box-Komponente haben. Und dann entspricht die Boxgröße einem großen Rand x, der links oder rechts ist. Wir werden zwei machen. Es gibt also etwas Platz dazwischen. Schließ das aus. Und zwischen der Box machen wir ein Bild, das unsere Bildquelle sein wird , entspricht Bike, Marge, unten gleich zehn. In diesem Bike wird eigentlich eine Requisite sein. Statt Requisiten werden wir es einfach destrukturieren und Fahrrad einsetzen. Das werden wir als Requisite weitergeben. Schließen wir dieses Bild. Es schließt sich selbst. Dann machen wir eine Textkomponente. Und hier kannst du einfach ein bisschen Lorem Ipsum setzen. Sie können einige Bike-Details finden, wenn Sie möchten. Ich mache vorerst nur den Lorem Ipsum Generator. Und ich kopiere das einfach. Schon wieder. Sie können dort platzieren, was Sie wollen, und fügen Sie es ein. Und ich ziehe einen Zeilenumbruch an. Wenn Sie also zu VS-Code gehen, bis zu Ansicht und klicken Sie auf Zeilenumbruch. Es gibt also ein paar Texte, die unter dem Bild sein werden. Dann staple ich ein paar Knöpfe. Also mache ich einen Stapel. Abstand ist gleich 0, Richtung ist gleich Rho, ausrichten, zentrieren, zentrieren , zentrieren. Und dann ist Margin Top gleich fünf. Innerhalb des Stapels möchten wir einen Knopf einsetzen. Denken Sie daran, dass wir einen Knopf im Helden benutzt haben. Also kopiere ich das einfach. Geh hier rüber und kopiere diesen Button. Es wird das Leben einfacher machen, als wir das alles austippen. Geh zurück zum Fahrrad und füge das ein. Also da ist mein Button, der diesen Text ändert , um Checkout zu sagen. Und wir legen noch einen darunter. Kopieren Sie das erneut und ändern Sie es, um einzuchecken und den onclick zu entfernen. Darum wollen wir uns noch nicht befassen. Ich formatiere mein Dokument und speichere es. Und lasst uns das tun, bevor wir die Schaltfläche Importieren aus der Tracker-Benutzeroberfläche, dem Importfeld, dem Bild, dem Textstapel aktivieren . Und ich glaube, das war's. Wir wollen auch, nun, wir werden unsere Bilder noch nicht sehen können, weil wir es an den Bikes weitergeben. Lassen Sie uns damit umgehen, bevor wir unsere Seite überprüfen. Unser Fahrrad ist also ein Kind zum Armaturenbrett. Hier müssen wir also unser Bike-Image definieren. Also hier oben kann ich Fahrrad importieren. Einer von Ich denke, es ist Punkt, Punkt Slash Assets slash Bike ein Punkt JPEG, weil ich denke, dass der Name des Bildes das zweimal kopiert wird. Und wechseln Sie Fahrrad eins in Fahrrad , um das Fahrrad 12 mal drei zu wechseln. Jetzt können wir diese nehmen und sie als Requisiten weitergeben. Wir können also sagen, dass Bike eins ist. Bike ist gleich Bike to Bike gleich Fahrrad drei. Und so fahren wir in jedem einzelnen Bike vorbei und wir erhalten es als Requisite in der Bike-Komponente. Genial, schauen wir uns das an und schauen ob es funktioniert. Großartig. Unsere Bilder sind also da. Sie sollten reagieren. Wir benutzen Flex. Ja, sie reagieren. Und wir haben einen Text, den wir zurückgehen und anpassen können , wie Sie möchten. Und wir haben eine Checkout - und Check-in-Schaltflächen. Jetzt sind diese kreisförmig und sie haben keinen Abstand zwischen ihnen, also lasst uns das beheben. Also unter dem Button brauchen wir dieses Farbschema nicht, Blaugrün, Lass uns m gleich zwei setzen, um dort etwas Spielraum zu setzen. Die Schriftgröße ist gleich klein. Das Schriftgewicht beträgt 600. Und dann sollte dieser Hintergrund insgesamt 500 betragen. Entfernen Sie das abgerundete und entfernen Sie diese Polsterung x. Und dann für den Schwebeweg, machen wir es eine 300. Es ist also etwas leichter, wenn man den Mauszeiger darüber bewegt. Also nehme ich das alles und füge es hier unten ein. Ich füge das hier ein und speichere es. Und jetzt sollte es viel besser aussehen, außer dass der Text schwarz ist. Lass uns den Text weiß machen. Die Farbe ist gleich Weiß. Um alles andere zu erreichen. Stellen Sie sicher, dass Sie es auf der anderen Schaltfläche tun, um es zu speichern und zu boomen, es sieht gut aus. Jetzt sollten wir diese Fahrradkette machen, dieses Logo hier oben, auf die Homepage gehen, wenn Sie darauf klicken. Also lass uns zur Header-Navigationsleiste gehen, tut mir leid. Lasst uns herausfinden, wo das ist, Fahrradkette, und machen wir das zu einem Glied. Also lasst uns Link setzen. Denn denken Sie daran, dass wir React Router einen Link zum Schrägstrich eingerichtet haben , der unsere Homepage ist. Und dann setzen wir die Fahrradkette dazwischen. Und das wird auf die Homepage verlinken. Also rette es. Und jetzt aktualisiere. Und jetzt, wenn wir den Mauszeiger darüber bewegen, werden wir sehen, dass es ein Link ist. Wir können darauf klicken. Und es bringt uns nicht zur Homepage. Etwas ist schief gelaufen. Oh, ich verstehe, was los ist. Es importiert Link von der Chakra-Benutzeroberfläche. Und wir müssen es tatsächlich aus dem React Router dom importieren, Link aus dem React Router dom importieren. Das ist es, was los ist. Also brauchen wir diesen Link hier nicht. Lassen Sie uns das herausnehmen und wie es funktionieren sollte . Ja, los geht's. Fahrradkette und du siehst unten localhost 3 tausend hier unten. Wenn wir darauf klicken, gehen wir zur Homepage. So genial. Ich denke, wir sind fertig mit der Benutzeroberfläche und können jetzt und mit der Logik anfangen. Wenn ich also auf meiner Homepage bin, kann ich die Brieftasche anschließen, den Button dort, ich kann mein Fahrrad auswählen , um zum Dashboard zu gehen, das wir hier eingerichtet haben. Das Dashboard gibt meinem B & B Guthaben. B&b fahre Minuten in meinem Bike-Status. Ich darf meine du Payment, Guthaben, mein Konto bezahlen. Ich kann hier unten ein Fahrrad wählen, auschecken, einchecken. Und ich glaube, es geht mir gut. Das einzige, was wirklich übrig ist, ist, wenn ein neuer Benutzer auf diese Seite kommt, Dashboard nicht sehen möchte weil er sich noch nicht als Mieter in den Smart Contract eingetragen hat. Wenn ich also zu dieser App komme und sie noch nie benutzt habe, muss ich mich als Mieter registrieren. Denken Sie daran, dass wir diese zusätzliche Miete oder Funktion haben. Wenn sie also zum ersten Mal hierher kommen, muss es eine Form geben, in der sie sich als Mieter hinzufügen können, aber wir haben noch keine Logik niedergelegt , um dies zu bestimmen. Also werden wir uns aufhalten. Und wenn wir die Logik in Gang bringen, wann wir tatsächlich feststellen können, ob dies der Fall ist oder nicht. Wir fügen dieses Formular hinzu. So toller Job, diese Benutzeroberfläche zu durchqueren. Ich weiß, dass Sie aufgeregter sind mit dem intelligenten Vertrag zu interagieren und diese Logik aufzubauen und sich mit dem Wallet zu verbinden und Transaktionen zu tätigen, all das lustige Zeug. Aber wir mussten das aus dem Weg schaffen und es ist jetzt aus dem Weg. Und wir werden im nächsten Abschnitt noch mehr Spaß haben . 6. Verbinden von MetaMaske und Sprechen mit unserem Vertrag: Okay, jetzt zum lustigen Teil, lasst uns unsere Anwendung mit dem intelligenten Vertrag verbinden und anfangen, mit der Blockchain zu sprechen. Bevor wir also ins Frontend kommen, müssen wir hier zum Vertragsordner zurückkehren. Und denken Sie daran, als wir diesen Vertrag kompilieren, wurde dieser Artefaktordner und einen Contracts-Ordner erstellt, einen Soul-Ordner für Fahrradketten in dieser JSON-Datei mit einer Reihe von Daten. Und denken Sie daran, dass wir über den Bytecode und den ABI gesprochen haben. Das ABI ist wiederum eine Möglichkeit, Ihrer Anwendung mitzuteilen , welche Funktionen oder Methoden sie aufrufen kann, welche Funktionen sie aufrufen können und Sie sind Smart Contract und einige andere Informationen damit zu tun haben. Wir müssen dies in unser Projekt aufnehmen, diesen ABI. Schnappen Sie sich also das gesamte Array und scrollen Sie einfach bis zum Ende und fügen Sie die Klammern ein und kopieren Sie es. Und jetzt erstellen wir in unserem Client-Ordner eine Datei im Quellordner namens config dot json. Und wir werden nur ein paar reguläre JSON erstellen. Also geschweifte Klammern hier drin, wir werden ABI als Schlüssel setzen und haben einen Wert. Wir werden dieses Array einfügen . Und ich formatiere es. Und das wird unser ABI sein. Darüber hinaus müssen wir in der Lage sein , zusätzlich dazu eine Luftvertragsanschrift zu benötigen, Luftvertragsanschrift zu benötigen wie auch an der Stelle, an der wir unseren Vertrag eingesetzt haben. Danach füge ich hier unten einen weiteren Schlüssel hinzu. Geben Sie also ein Komma ein und geben Sie die Vertragsadresse ein. Und der Wert wird die Adresse sein , an die wir uns eingesetzt haben. Und ich weiß nicht , was das war, als ich das gemacht habe. Also werde ich es wieder bereitstellen. Ich gehe zurück zum Stammordner, CD in meinen Vertragsordner und führe NP x Hardhat aus, führe Skripte slash Beispiel script.js aus. Wir setzen dieses Netzwerk-Flag für Testnetz. Denken Sie daran, dass wir in unserer Hardhat-Konfiguration dieses Netzwerks, dieses Objekt von Netzwerken, tatsächlich Hardhat konfiguriert und eines namens Testnetz neu erstellt haben. Das machen wir also. Wir implementieren dieses Beispielskript oder dieses Bereitstellungsskript im Testnetz. Also drücke ich Enter und lasse das bereitstellen, und dann erhalte ich die Vertragsadresse , die dort bereitgestellt wurde . Die Fahrradkette ist an dieser Adresse eingesetzt. Ich kopiere es, gehe zurück zu meiner Konfiguration JSON und füge das als Wert in die Vertragsadresse ein und speichere es in unserem Vertrag, wir können es vorerst weglegen. Öffnen Sie also den Client-Ordner sichern. Und wir gehen und wir werden wieder darauf zurückkommen. Was wir als Nächstes tun werden, ist wir eine Möglichkeit brauchen, den Staat zu speichern. Und ich möchte mich nicht wirklich mit Redox beschäftigen , weil dies ein kleines Projekt ist und Redux etwas kompliziert ist. Also werden wir etwas verwenden, das viel einfacher ist, als Context-API bezeichnet wird. Und das ist Teil von Reactant kommt mit React und ermöglicht es uns , den Staat zu verwalten. Wenn Sie also schon einmal mit reagiert haben, wissen Sie, dass wir Requisiten an Kinder weitergeben und manchmal kann dies außer Kontrolle geraten und wir geben Ereignissicherungen an Eltern und es weiter ist einfach verrückt. Was diese Kontext-API macht, ist wie Redux, da sie den Status verwaltet. Aber was das tut, was uns davon profitiert ist, dass wir unser gesamtes Projekt in diesen Anbieter einschließen können und dann jede Komponente innerhalb dieses Anbieters auf den Bundesstaat zugreifen kann. Der Staat wird also global sein und Sie können überall darauf zugreifen. Du bringst diesen Kontext einfach rein und greife darauf zu. Also werden wir das einrichten und das wird tatsächlich steuern wie alle unsere Funktionen, mit denen wir mit diesem intelligenten Vertrag gesprochen haben . Wenn Sie also zur Quelle gehen und mit der rechten Maustaste klicken und einen neuen Ordner erstellen, nennen wir ihn Kontext. Whoops, erstellen Sie ein. Wir klicken mit der rechten Maustaste auf den Quellordner erstellen einen neuen Ordner namens Context. Aus irgendeinem Grund wird es einfach nicht. Lass mich das machen. Hier ist es, Kontext. wir also mit der rechten Maustaste auf den Quellordner und erstellen einen neuen Ordner namens Kontexte. Und in diesem Ordner wird eine Datei namens Blockchain Context dot js X erstellt. Und von hier aus werden wir ein paar Dinge importieren. Importieren Sie also, reagieren Sie und verwenden Sie Status, weil wir diesen von React verwenden werden. Als nächstes werden wir das importieren. Konfiguration JSON. Also werden wir das ABI und die Vertragsanschrift importieren, und wir werden es so strukturieren, dass wir auf beide einzeln zugreifen können. Importieren Sie also ABI, Vertragsanschrift von. Und dann denke ich, es ist Dot, Dot Slash Config JSON. Gut. Dann werden wir das nächste sein, dann werden wir als nächstes ein Paket namens Ethers js verwenden . Jetzt benutzen viele Leute Web Three js. Dieses Paket ermöglicht es uns, mit der Blockchain zu sprechen, aber ich bin der Nächste, dass wir ein Paket namens Ethers JS verwenden. Jetzt benutzen viele Leute, die ich kenne, Web Three JS. Ich mag Ether, JS ist immer mehr damit vertraut. Also werde ich das in diesem Paket verwenden, ermöglicht es uns, mit unserem intelligenten Vertrag in die Blockchain zu sprechen. Es ist also sehr einfach zu installieren. Komm her. Lass mich wieder in meinen Client-Ordner gehen. Fügen Sie im Run Yarn Ether hinzu, ETA GRS. Und während das installiert wird, importiere ich Ether. Ether. Ziemlich einfach. Großartig. Als Nächstes erstellen wir einen Kontext und exportieren ihn als Blockchain-Kontexte. Also werden wir Export setzen. Als Nächstes. Wir werden diesen Kontext tatsächlich schaffen. Wir sprechen über die Kontext-API. Wir werden das jetzt erstellen und wir werden es als Variable festlegen und exportieren. So können wir exportieren, const, blockchain-Kontext gleich setzen React dot erstellen Kontext. Und das war's. Als Nächstes erstellen wir unsere Komponente. Exportieren. Als Nächstes erstellen wir unsere Anbieterkomponente. Und wenn Sie nicht wissen, wie Sie das benutzen sollen, googeln Sie es einfach. Und es ist ziemlich einfach. Sie können darüber nachlesen und innerhalb weniger Minuten aufgeholt werden . Und denken Sie daran, dass es die Hooks-Variante verwenden würde, was meiner Meinung nach viel einfacher ist. Lassen Sie uns exportieren, const Blockchain-Anbieter gleich. Und wir werden unsere Kinder statt Requisiten destrukturieren. Und das sieht gut aus. Was wir also hierher zurückgeben werden , der Schlüssel zu dieser ganzen Sache ist, diesen Blockchain-Kontext-Punkt-Anbieter zurückzugeben . Lassen Sie uns also Blockchain-Kontexte machen und Sie werden sehen, dass sie einen Verbraucheranbieter haben. Wir brauchen keinen Verbraucher. Wir benutzen Hooks, aber es gibt viele Dinge, die du hier gebrauchen könntest. Wir werden den Anbieter verwenden. Und es ist zwingend erforderlich, dass Sie dort einen Wert angeben , den wir derzeit nicht haben . Also lasse ich das leer. Lassen Sie mich das in die nächste Zeile setzen. Wir werden hier die Schlüsselkomponente dieses Anbieters zurückgeben . Also werden wir zurückkehren, Blockchain-Kontextpunkt, und Sie sehen, dass es einen Verbraucher und einen Anbieter gibt. Wenn Sie die Kontext-API lesen, lesen Sie, dass beide Hooks verwendet haben. Also werden wir den Anbieter benutzen. Und wir werden liefern, lassen Sie mich das einfach schließen. Wir werden hier einen Wert liefern , den wir bieten müssen. Aber wir haben noch nichts . Ich lasse das leer. Und dann werden diese Kinder dazwischen bringen , denn das ist es, was wir vorbeigehen . Also spar dir das auf. Und dann haben wir diesen Anbieter hier. Aber wir müssen zu unserem Haupt-JSX gehen und die gesamte App in diesen Anbieter einwickeln. Also importiere ich es zuerst. Importieren Sie den Blockchain-Anbieter aus Punkt-Schrägstrich-Kontexten slash Blockchain-Kontext. Und dann werden wir das ganze Ding einpacken. Also hier unten kann ich Blockchain-Anbieter sagen und ihn einfach außerhalb des Chakra- oder UI-Providers und der gesamten App stellen. Und heb dir das auf. Nun, diese Werte, die wir übergeben, alle Werte, die wir hier übergeben , für alle Komponenten verfügbar sein , die in diesen Kontext einführen. Ich hoffe, das ergibt Sinn. Okay, also lasst uns als nächstes zur Ethers, JS-Dokumentation gehen. Ether. Geben wir einfach Ethers JS in die Google-Suche und klicken Sie dann einfach auf Erste Schritte. Wir werden diesen Anweisungen folgen. Wie installiert man es? haben wir schon gemacht. Wir haben es bereits importiert. Wir verwenden keine Skript-Tags, also mach weiter. Also hier ist der Schlüssel zu diesem ganzen Paket. Meiner Meinung nach sind es drei Dinge. Sie müssen einen Unterzeichner und einen Vertrag bereitstellen. Also danke der Anbieter, schreibgeschützt. Ein Anbieter ist also eine Klasse , die ich in Ether anbiete. Verwechseln wir das nicht mit ihrem Blockchain-Anbieter oder der Kontext-API. Das ist getrennt. Ein Anbieter von Ethers ist eine Klasse, die eine Abstraktion für eine Verbindung zum Ethereum-Netzwerk bietet . Es bietet schreibgeschützten Zugriff auf die Blockchain und ihren Status. Denken Sie daran, dass Anbieter schreibgeschützten Zugriff auf die Blockchain denkt. Jetzt ist ein Unterzeichner eine Klasse , die in irgendeiner Weise direkt oder indirekt Zugriff auf einen privaten Schlüssel hat. Denken Sie daran, dass wir ihren privaten Schlüssel in einen privaten Schlüssel legen , der Nachrichten und Transaktionen signieren kann , um das Netzwerk zu autorisieren, Ihr Konto zu belasten oder Operationen durchzuführen. Wenn Sie also an Provider denken, denken Sie schreibgeschützt, wenn Sie denken, dass Unterzeichner an private Schlüssel denken und Nachrichten signieren , Transaktionen erstellen Änderungen direkt an der Blockchain vornehmen. Dafür brauchst du also den Unterzeichner. Sie haben den schreibgeschützten Provider-Unterzeichner kann handeln und Dinge tun. Sie haben also den schreibgeschützten Anbieter und den Unterzeichner , der Transaktionen abwickeln und tätigen kann. Und dann hast du diesen Vertrag. Und wir werden als Nächstes darüber sprechen. Verträge und Abstraktion, die eine Verbindung zu einem bestimmten Vertrag im Ethereum-Netzwerk darstellen eine Verbindung zu einem bestimmten Vertrag . Intelligenter Vertrag, den wir bereitgestellt haben, damit Anwendungen ihn wie ein normales JavaScript-Objekt verwenden können. Also werden wir dieses Vertragsobjekt erstellen und wir werden alle unsere Funktionen daraus aufrufen . Die erste Aufgabe besteht also darin, unsere Wallet mit unserer Anwendung zu verbinden , und das tun wir über MetaMask. also sicher, dass Sie MetaMask herunterladen, wenn Sie es nicht haben, gehen Sie einfach zu MetaMask. Ich weiß nicht warum es Dot Zendesk ist. Wenn Sie es nicht heruntergeladen haben und es einrichten lassen, gibt es eine Million Artikel darüber, wie das geht. Aber ich nehme an, da Sie diesen Kurs belegen , haben Sie bereits MetaMask, aber nur Google MetaMask und gehen Sie zu Download und es ist ein Browser. also sicher, dass Sie MetaMask heruntergeladen und eingerichtet haben. Hier ist ein Ethers-Beispiel für das Sprechen. Also hier nehmen Ether die Interaktion mit MetaMask auf. Denken Sie also daran, dass es einen Anbieter gibt, es gibt einen Unterzeichner. Der Anbieter ist die Verbindung zum Ethereum-Netzwerk. Der Anbieter wird also tatsächlich MetaMask sein. Und dann hält der Unterzeichner Ihren privaten Schlüssel und überträgt Dinge. Denken Sie daran, dass wir unseren privaten Schlüssel bei der Bereitstellung eingegeben haben. Und denken Sie daran, dass sich unser privater Schlüssel in dieser ENV-Datei befindet. Und das verwenden wir, wenn wir den Vertrag bereitstellen , und dann passen unsere Geldbörsen mit diesem privaten Schlüssel überein. Sie verwenden dasselbe Konto , das Sie für Ihren Vertrag verwenden. Okay, also schauen wir uns das an. Lass uns weitermachen und es kopieren , weil wir es benutzen werden. Stimmt's? Wenn Sie also hier unten schauen, sind die Kommentare sehr hilfreich. Diese Dokumentation ist meiner Meinung nach wirklich gut. Aber zuerst haben Sie diesen Anbieter und sie haben einen Wraps bereitgestellt, einen Standard-Web Three Provider, was MetaMask als Fensterpunkt auf jeder Seite ein Theorem injiziert . Auf dieser Browserseite injiziert MetaMask eine sogenannte Window Dot a Theorem in jede Seite. Wenn wir diesen Anbieter einrichten, verwenden wir, instanziieren wir einen neuen Web Three Provider , der von Ether bereitgestellt wird. So übernehmen wir einen neuen Ether Anbieter Dot Width Three Provider und wir geben im Grunde das MetaMask-Fensterdatensatz das MetaMask-Objekt ein. Das wird also ein Anbieter sein. Das sagen wir unter der Anbietervariablen. Dann können wir tatsächlich den Provider verwenden, um dies zu senden. Und dann können wir die Sendemethode verwenden, um die Berechtigung zum Verbinden von Benutzerkonten anzufordern. Schließlich können wir diesen Anbieter annehmen und anrufen, Unterzeichner abrufen und ihn als unseren Unterzeichner speichern. Wir werden dies tatsächlich kopieren und in unsere Anwendungen einfügen. Also kopiere das. Und hier oben, füge es einfach ein. Und ich werde all diese Kommentare entfernen. Eine Sache, die ich tun werde, ist, diese Wartungsanbieter auszuschalten. Und wir werden das in einer tatsächlichen Funktion hinzufügen, weil wir nur möchten, dass einer tatsächlichen Funktion hinzufügen, weil wir nur möchten dies geschieht, wenn wir auf die Schaltflächen „Wallet verbinden“ klicken . Also nimm das raus. Wir haben einen Anbieter, wir haben unseren Unterzeichner. Jetzt brauchen wir den Vertrag. Jetzt wird es dich den Sinn ergeben. Wenn Sie also weiterhin zu Verträgen gehen, heißt es, dass das Vertragsobjekt es einfacher macht, einen Onchange-Vertrag als normale JavaScript-Objekte mit der Matte zu verwenden einen Onchange-Vertrag als , wobei die Methoden zugeordnet kodieren und dekodieren von Daten für Sie. Das ist großartig. Dieses Vertragsobjekt macht es einfach, dieses Vertragsobjekt macht es so, dass wir all diese Smart Contract-Funktionen nur JavaScript-Objekte behandeln können diese Smart Contract-Funktionen . Wenn Sie also weiter scrollen, geben sie Ihnen hier das beste Beispiel. Kopieren Sie also das Ganze und fügen Sie es in Ihre Anwendung ein. Also komme ich hier runter, kopiere das rein, und wir werden das nacheinander durcharbeiten und es wird für dich Sinn machen. Statt der Adresse haben wir es nicht mit Di zu tun, wir haben es nur mit B & B zu tun. Also ändere das einfach in Adresse und wir setzen einfach ein, was denkst du? Nun, wenn Sie nach oben gehen, denken Sie daran, dass wir das ABI und die Vertragsanschrift importieren. So kann unsere Adresse tatsächlich kontrahiert werden Kleid. Jetzt stirb ABI, wo wir wieder nicht sterben benutzen, also ändere das einfach in ABI. Und was denkst du das sein könnte? Nun, ABI. Aber das Problem ist, dass wir JavaScript irgendwie verwirrt haben. Abi ist ausgegraut, was bedeutet, dass es nicht funktionieren wird. Lasst uns das also ändern, um ABI zu kontrahieren. Vertrag ABI. Also stellen wir hier Vertrag ABI ein. Wir haben also unsere Adresse definiert. Wir haben das ABI. Auch dies ist ein guter Kommentar. Der ERC-20-Vertrag ABI, der eine gemeinsame Vertragsschnittstelle für ist, setzen Sie das nicht. Also lasst uns diesen Kommentar loswerden. Und dann haben wir endlich das eigentliche Objekt. Ändern Sie dies erneut in Vertrag. Dann instanziiert es einen neuen Vertrag. Also statt dy Adresse wird Adresse anstelle von dy ABI setzen, Vertrag ABI. Und dann geben wir unseren Anbieter ein. Aber ich werde tatsächlich meinen Unterzeichner weitergeben , weil ich viele Transaktionen machen werde. Großartig. Also spar dir das auf. Wir haben alle unsere Informationen hier, um mit ihr zu sprechen . Intelligenter Vertrag. Lassen Sie uns nun die Air-Anwendung ausführen. Also Garn, führe dev aus. Und lasst uns localhost 3 Tausend machen. Und hier ist unsere Bewerbung. Lassen Sie uns also Yarn run dev machen, um unseren Server zu betreiben und localhost 3 tausend zu öffnen. Und wir haben ein paar Fehler, gut. Okay, also lasst uns Garn machen, dev zum Start oder zu einem Server ausführen. Das wird auf dem lokalen Gastgeber sein, 3 Tausend. Also lasst uns das öffnen. Ups, die Saudi Open Refresh. Und wir haben einen Fehler oder das angeforderte Modul bietet keinen Export mit dem Namen Vertrag ABI. Damit stimmt also etwas nicht. Ihr nennt es wahrscheinlich so, aber es importiert ABI, weil es in unserer Konfiguration JSON unter dem Schlüssel von ABI steht, also müssen wir es so behalten. Also lass uns das machen. Lassen Sie uns die Mehrwertsteuer ändern, die Variable, um ABI zu kontrahieren und lassen Sie das, was wir als ABI importieren. Und dann ändern wir uns hier unten. Jetzt ist das Problem, dass wir den Vertrag ABI importieren, was falsch ist, weil es in ihrer Config JSON ein Schlüssel von ABI ist. Also müssen wir ABI importieren. Und dann nennen wir diesen konstanten Vertrag ABI gleich ABI, was wir importieren. Und dann haben wir es hier unten richtig gemacht, also hatten wir alle möglichen Fehler dort. Du hast es wahrscheinlich erwischt. Aber stellen Sie sicher, dass Sie diese Änderungen vornehmen. Importieren Sie ABI, speichern Sie es als Variable namens Kontrakt ABI und geben Sie diese dann in Ihren Vertrag weiter. Lasst es uns speichern und sehen, ob es das behebt . Ja, los geht's. Was wir jetzt tun wollen, ist wenn wir auf dieses Connect-Wallet klicken, möchten wir, dass es MetaMask öffnet und um ihre Erlaubnis bittet das Wallet mit unserem Konto zu verbinden. Fordert die Erlaubnis an , sich mit einem der Konten zu verbinden. Lassen Sie uns also eine Funktion dafür erstellen, richtig, unter diesem werde ich sagen, dass const, connect Wallet Equals asynchron sein wird. Wir werden eine Try-Catch-Aussage machen. Versuch-Fang. Hier werden wir sagen, ob der Fensterdatensatz, also wenn dies, dieses MetaMask-Objekt nicht existiert, geben wir nur eine Warnung und Warnung zurück. Bitte installieren Sie MetaMask. Dann machen wir als Nächstes Const Accounts. Wir möchten die Konten von MetaMask erhalten, also warten Sie auf den Provider Dot Send. Denk dran in Ethers JS, wenn ich es noch habe. Das war unser Beispiel, ein Punkt der Gewichtsdienstleister gesündigt hat. Und was wir wollen, sind YF-Anforderungskonten. So nennen wir sie nur für Tritte. Lassen Sie uns Punkt-Log-Konten konsolen. Und der erste, denn das wird derjenige sein, den wir gerade verwenden, das Girokonto. Und lasst es uns einfach da lassen und sehen, dass wir das trösten oder das richtig protokollieren. Und dann hier unten im Catch machen wir console.log Fehler. Und ich werde hier tatsächlich einen neuen Fehler werfen. Und sagen wir einfach nein, ein Theorem-Objekt. Und ich kann das Wort Wurf nicht buchstabieren. Da sind wir los. Wir möchten dies also anrufen, wenn die Schaltfläche „Connect Wallet“ gedrückt wird. Wie wir also mit diesem Anbieter arbeiten ist, dass wir diesen Funktionsnamen nehmen, wir kommen hierher und geben das als Wert an , Connect Wallet. Und wo ist dann der Knopf das? Nun, der Button wenn wir gehen und Komponenten, der Button ist eine Navigationsleiste. Oben in der Navbar werden wir den Anbieter importieren. Importieren Sie also Blockchain-Kontexte aus Kontext-Slash-Blockchain-Kontexten . Stellen Sie also sicher, dass Sie es importieren. Dann weil wir Hooks benutzen. Wir können hier runter kommen und const tippen. Und welche Funktion bieten wir und der Anbieter wird Wallet verbinden , entspricht dem Verwenden von Kontext, Blockchain-Kontext. Jetzt können Sie mehrere Kontexte in Ihrer Anwendung erstellen. Sie können einen Benutzerkontext in einem Transaktionskontext haben und solche Dinge. Also alles, was wir hier dafür tun. Komponente ist, dass wir diesen Blockchain-Kontext nur zur Verfügung stellen . Und wir bringen Connect Wallet mit. Und dann hier unten, wo wir unseren Button mit der Aufschrift Connect Wallet haben, fügen wir einen onclick hinzu. Onclick ist gleich Connect Wallet , um diese Funktion aufzurufen. Und so einfach ist es. Also lasst es uns speichern und prüfen, ob es funktioniert. Öffnen Sie die Anwendung und es liegt ein Fehler vor. Der Fehler wird also verwendet, Kontext ist nicht definiert. Also müssen wir herkommen. Und wo wir nicht einmal sind. Und mach einfach einen Import. Verwenden Sie den Kontext von React in, denken Sie daran, wenn Sie jetzt eine JSX-Datei in React haben, denken Sie daran, wann Sie dies getan haben. Importieren Sie diese also unbedingt. Speichern wir es und versuchen es noch einmal. Wenn wir also auf diese Schaltfläche „Mit Wallet verbinden“ klicken, sollte MetaMask einfach so geöffnet werden. Und ich möchte mein BSC-Testkonto verbinden . Also klicke ich auf Weiter. Wenn ich nun mehrere ausgewählt habe, werden alle vier darin enthalten. Deshalb wählen wir den ersten aus. Aber ich klicke einfach auf einen, denn das ist alles, was ich wirklich mache. Hit Weiter. Wenn ich also auf „Wallet verbinden“ klicke, wird MetaMask so angezeigt, wie es sollte. Und ich wähle das Konto ich verbinden möchte. Jetzt. Ich könnte connect sammeln. Jetzt könnte es mehrere verbinden. Und deshalb haben wir die Konten 0, weil es sich um eine Reihe von Konten im ersten handelt, wird Ihr Girokonto sein. Aber ich wähle einfach eine aus und klicke auf Weiter und verbinde dich. Und es wird mein MetaMask Wallet mit meiner Anwendung verbinden . Großartig, also sind wir verbunden. Wenn wir MetaMask öffnen, sehen wir, dass dieses kleine verbundene Licht grün ist. Aber das Problem ist, dass wir es in unserer App nicht wissen. Es sagt nur solange es noch ist. Also werde ich die Verbindung trennen und das werden wir beheben. Trennen Sie also dieses Konto und gehen wir dann zurück und machen Sie etwas Besseres damit. Also zurück zum Blockchain-Kontext. Wir werden einen Staat erstellen, in dem dieses Girokonto gespeichert werden kann. Also komme ich ganz nach oben und mache ein konst Girokonto. Stellen Sie ein. Leistungsbilanz entspricht dem Nutzungsstatus. Und das ist nur React Hooks. Sie benutzen Staatlichkeit. Und alles was es sagt ist, dass die Leistungsbilanz die Variable sein wird , die meinen Status im Set hält. Girokonto verwende ich, um diesen Status hier unten festzulegen , in dem ich das Konto getröstet habe. Ich speichere das auch im Leistungsbilanzstatus auf. Und das tun Sie, indem Sie Girokonto festlegen, Konten 0 sagen . Das wird es also speichern, damit es da drin gespeichert wird. Das wird es also als Girokonto speichern. Aber das hilft uns nicht wirklich, weil wir dieses Girokonto über den Luftfahrtanbieter weitergeben müssen . Also komm hierher und lege ein Komma ein und lege Girokonto ein, damit wir es an unseren Anbieter und dann zurück an die Navbar weitergeben können . Und das wollen wir auch in die Leistungsbilanz bringen, dies unserer Komponente zur Verfügung stellen. Dann können wir hier unten etwas Logik machen. Wir sagen also, wenn es kein Girokonto gibt, notieren Sie sich das Ausrufezeichen, dann sagen wir einfach connect Wallet. Dies bedeutet, dass nichts verbunden ist , da es noch kein Girokonto , das noch nicht festgelegt wurde. Dann werden wir sonst unsere Wallet-Adresse anzeigen, aber wir werden sie so aufteilen, dass es wie die ersten fünf Zeichen Punkt, Punkt, Punkt und dann die letzten vier Zeichen ist. Die meisten Apps machen das. Also machen wir das auch. Und wir können sagen, dass wir ein Vorlagenliteral verwenden werden. So unterzeichnen die beiden Backticks, Dollar geschweifte Klammern. Und wir legen Girokonto Dot Slice ein. Dann 0 bis fünf, also die ersten fünf Zeichen. Und dann setzen wir Punkt, Punkt, Punkt. Und deshalb verwenden wir diese Vorlagenliterale weil wir Variablen mit Zeichenfolgenwerten wie Punkt, Punkt, Punkt mischen können . Und gleich danach machen wir das Dollarzeichen. Geschweifte Klammern beim Typ Girokonto, im Typ Girokonto, Punktscheibe. Und dieses Mal gehen wir bis zum Ende und zählen alle Charaktere und holen uns dann einfach die letzten vier. können wir also tun, indem wir die Punktlänge der Leistungsbilanz angeben. Dies wird die Länge davon erhalten, während sie an Adresse minus vier liegt. Und genau das werden wir schneiden. Also lasst uns das speichern und probieren es aus. Aktualisieren. Und jetzt lasst uns das Wallet verbinden. Stellen Sie sicher, dass Sie die Verbindung trennen , damit Sie sich erneut verbinden können. Wähle dein Konto aus und klicke auf Weiter. Und sobald ich auf Connect klicke, sollte es sagen, dass du das im Status speichere und dann meine Komponente aktualisiere, um meine Wallet-Adresse anzuzeigen. Also klicke auf Verbinden. Sieh dir das schon an. Es gibt meine Wallet-Adresse, 0 x sechs bis 73 Punkt Punkt, Punkt B F6. Aber wir haben immer noch ein Problem. Wenn ich mich erfrische, ist es weg. Jetzt heißt es Connect Wallet, obwohl ich immer noch verbunden bin. Trennen wir die Verbindung und reparieren das. Um das zu beheben, benötigen wir eine weitere Funktion im Blockchain-Kontext, um zu überprüfen, ob das WLAN verbunden ist. So verbinden wir uns. Aber wenn die App zum ersten Mal geladen wird, müssen wir prüfen, ob sie verbunden ist oder nicht. Wenn ja, müssen wir den Staat speichern. Lassen Sie uns eine andere Funktion erstellen. Und eigentlich kopiere ich das einfach. Und wir nennen das hier. Prüfen Sie, ob Wallet verbunden ist. Und das machen wir immer noch. Wir prüfen, ob das MetaMask-Objekt da ist. Wir machen Konten. Aber in dieser Zeit werden wir anstelle von unterstrichenen Anforderungskonten unterstrichenen Anforderungskonten tatsächlich nur Unterstrich-Konten erstellen. Dies wird also die Konten anfordern, nicht die Erlaubnis zur Verwendung der Konten, sondern nur die Konten im Allgemeinen. Wenn also irgendetwas verbunden ist, wird es hier auftauchen. Und dann machen wir hier etwas wie wenn Accounts Punktlänge wahr ist. Wenn also auf den Konten verknüpft ist, legen wir Girokonten 0 fest. Sonst console.log. Nein, keine Konten gefunden. Und werde diese beiden los. Dieses Mal werde ich keinen Fehler auslösen. Aber nochmal, alles, was wir tun ist die verbundenen Konten zu bekommen. Und wenn es welche gibt, wird der Staat festlegen. Wenn nicht, trösten wir es einfach aus. Also werden wir es wissen. Diesen möchten wir also nicht an den Anbieter weitergeben , weil wir ihn nirgendwo anders brauchen. Wir brauchen es tatsächlich, wenn die Seite zum ersten Mal geladen wird. Also komme ich hier runter und füge einen User-Effekt hinzu Hooke. Und verwenden Sie Effekthaken, damit Sie laufen können. Und mit Effekt-Hooks können Sie Funktionen ausführen, sobald etwas geladen wird oder sich etwas ändert. Ganz am Ende können Sie also Komma machen, was auch immer. Wenn Sie eine Variable sehen , wenn sich diese Variable ändert, wird dieses Ding erneut ausgeführt. Aber wir setzen leere Klammern hier sind leer. Leere Klammern hier, was bedeutet, dass sie ausgeführt werden wenn die Komponente zum ersten Mal geladen wird, wird geladen. Wir werden diese Untersuchung tatsächlich durchführen solange das dort verbunden ist. Das läuft, wenn die Seite zum ersten Mal geladen wird. Wenn die Seite zum ersten Mal geladen wird, wird erneut überprüft, ob eine Wallet verbunden ist. Wenn ja, wird es den Status festlegen. Also lasst uns das speichern und es nochmal ausprobieren. Und übrigens jedes Mal, wenn Sie einladen, jedes Mal, wenn Sie sparen. Übrigens, jedes Mal, wenn ich spare, wirft es einfach diese verrückten Fehler auf. Ich zeige dir in einer Minute , wie du das beheben kannst. Aber lasst uns das einfach auffrischen und testen. Klicken Sie also auf Wallet verbinden. Ich verbinde es wieder, verbinde mich und es legt meine Adresse fest. Und wenn ich jetzt aktualisiere, bleibt es. Es ist gut zu gehen. Wenn ich zur nächsten Seite gehe, ist sie immer noch da. Ich gehe zur ersten Seite ist immer noch da. Das hat sich also darum gekümmert. Nun, genau wie ich schon sagte, wenn ich das nochmal speichere und zurückkomme, ist meine Seite völlig zerstört. Und um ehrlich zu sein, weiß ich nicht, was los ist. Aus irgendeinem Grund lädt vite JS eine Seite durch, führt ein Neuladen der Seite statt des heißen Reloads durch. Ich weiß nicht, ob es ein Bug ist oder vielleicht etwas, das ich übersehen habe. Aber andere Leute beschweren sich online. Ich glaube, das ist etwas Neues. Und wenn ich das gewusst hätte, hätte ich die Create React App verwendet, aber es ist eigentlich eine ziemlich einfache Lösung. Dieser Typ hat es gerade hier aufgelistet. Und was wir tun müssen, ist zu unserer vite Config zu gehen und einfach diese Serverkonfiguration hinzuzufügen. Wenn du also gehst, wenn deins das nicht tut, mach dir darüber keine Sorgen. Aber wenn es zu vite geht, config js und füge es einfach hinzu, setze danach ein Komma und mache Server h EMR true, das ist heißes Modul reload, was passieren soll in irgendeiner Weise dachte ich. Und dann schau zu. Verwenden Sie die Umfragen. Stimmt? Und das war's. Jetzt rette es. Und ich möchte meinen Server wahrscheinlich neu starten , nur weil es eine Konfiguration ist. Oft müssen wir es neu starten und das sollte sich um das Problem kümmern. Lassen Sie mich jetzt aktualisieren, lass mich speichern und sehen, ob es diesen Fehler auslöst. Ich komme hierher und klicke ein paar Mal auf Speichern. Und es gibt immer noch einen Fehler. Was ist los? Server ASMR true, Watch, Polling verwenden, true. Okay, der Server wurde neu gestartet. Also lass es mich retten. Es ist in Ordnung. Spar es nochmal auf. Spar es hier auf. Speichern Sie es nochmal hier. Es sieht tatsächlich so aus, als würde es gerade in meiner Provider-Datei passieren . Wenn ich also zum Haupt-JSX komme und auf Speichern klicke, dann ist alles in Ordnung. Aber wenn ich zu meinem Provider gehe und das mache, speichere es, es vermasselt es. Nun, ich werde versuchen die Antwort darauf in Zukunft herauszufinden. Ich. Wir kommen zurück und sagen dir, wie du es reparieren kannst. Aber es spielt wirklich keine Rolle. Nur in der Entwicklung, wie wenn du hierher kommst und herumklickst, passiert es nie. Es passiert nur mit diesem White-Hot-Modul neu zu laden. Also werde ich das rausfinden und werde es ein bisschen hier posten. Okay, das Letzte, was wir in diesem Video machen wollen , ist, dass wir versuchen wollen , mit unserem Vertrag zu sprechen , um sicherzustellen, dass wir das festgelegt haben. Und sobald wir das nächste Video haben , werden wir einfach mit voller Geschwindigkeit vorankommen und alles einrichten. Gehen wir also zurück zu unseren Blockchain-Kontexten. Und lassen Sie uns eine Funktion erstellen, die das Gleichgewicht ihres intelligenten Vertrags erhält . Wenn Sie sich also daran erinnern, dass wir in unserem Vertragsordner und unserem Vertrag haben , denken Sie daran, dass wir eine Funktion namens Saldo haben , die den Vertragssaldo zurückgibt. Versuchen wir das zu nennen und zu sehen, ob es funktioniert. Also gehe ich in meinen Blockchain-Kontext und mache einfach const, bekomme Balance gleich, entspricht einer Senke. Und wir werden einen Try-Fang machen. Punktprotokollfehler der Konsole. Hier oben unter Versuch werden wir „ const balance“ sagen. Und denken Sie daran, dass wir dieses Vertragsobjekt haben mit dem wir mit unserem intelligenten Vertrag sprechen können. Wir sagen Vertrag. Wir werden warten, weil wir eine asynchrone Funktion haben. Und dann Kontraktpunktguthaben Kontraktpunktguthaben Kontraktpunktguthaben von, denn das ist der Name der Smart-Contract-Funktion. Dann gleich danach werden wir das in unserem Staat retten. Also. Eigentlich trösten wir es einfach mit Ashley aus. Loggen wir uns einfach in die Konsole ein. Also console.log balancieren und sehen Sie einfach, ob das auftaucht. Gehe zurück zum Projekt und lade die Seite neu, und sie sollte in unserer Konsole auftauchen. Es dauert eine Minute, um es eigentlich nein zu nennen, das wird nicht funktionieren. Dann werden wir gleich danach den Staat festlegen, wir werden ihn in den Staat bringen. Dann können wir das in die Konsole legen, um zu sehen, ob es funktioniert. Gehen wir hier hoch und erstellen eine neue Statusvariable, Konstante, Balance, SET-Bilanz. Und du siehst das Muster hier. Es gibt das Wort und dann set word gleich use state. Und so werden wir hier unten das Gleichgewicht bringen. Dann werde ich console.log ausgleichen. Und das wird nirgends benutzt, also wird es nicht heißen. Es gibt nichts davon wird funktionieren. Aber um es zu testen, kommen wir hier runter und rufen Sie an, um ausgewogen zu werden. Wenn die Seite geladen wird. Speichern wir es und aktualisieren unsere Seite. Und sieh dir das an. Wir werden zurückgegeben, was eine große Zahl genannt wird. Eine große Zahl ist Fehlermenge oder die Luftmenge mit 18 Nullen. Deshalb heißt es eine große Zahl. C genau hier bei 0 x 00 ist die große Zahl wahr. Die große Zahl ist also großartig. Es ist großartig, die Arbeit am Vertrag zu erledigen, aber er ist nicht lesbar. Als ob wir nicht aussehen und sein wollen, als hätte ich Billion etwas von Äther bekommen. Wir möchten sagen, dass ich 0,001 oder 0,01, B & B oder was auch immer habe. Es gibt also eine Hilfsfunktion. Wenn Sie zu Ether, JS gehen und Utils eingeben und Utils eingeben. Und das war nicht hilfreich. Geben Sie Ether, Dot JS-Dienstprogramme und klicken Sie auf Dienstprogramme. Und dann solltest du sehen und dann eine große Zahl eingeben. Da ist es. Und du solltest hier unten sehen, ich glaube, es heißt Parseether. Ja, los geht's. Es gibt also diese, es gibt diese Conversions. Äther-Punkt-Utils, Punktformat-Einheiten, Ethers verwendet das Formatieren von Äther-Parse-Einheiten. Und das alles ist, dass es diesen Wert nur für uns konvertiert, als ob der, den wir verwenden werden, Formatether ist. Und das ist einfach keine gute Seite. Lassen Sie mich das kopieren und einfügen. Ethers dot js. Los geht's. Äthersaiten und wiegen. Der, den wir verwenden werden, heißt Formatether. Und das ist, wenn Sie einen Weg haben und es als reguläres Äther oder normales B & B oder was auch immer Sie gewohnt sind, wie die von Menschen lesbare Menge zu sehen, zeigen reguläres Äther oder normales B & B oder was auch immer Sie gewohnt sind, wie die von Menschen lesbare Menge zu sehen möchten. So formatierte Menge des Weges in eine Dezimalzeichenfolge, die den Ätherbetrag darstellt. Das werden wir benutzen. Um das zu tun, tippen wir ein. Um das zu tun, müssen wir das Gleichgewicht schaffen. Um das zu tun, müssen wir statt Balance setzen, müssen wir Ether, Dot util, Utils Punktformat Ether setzen . Und dann gehen wir die Bilanz ein. Und das wird es auf dieses gut lesbare Format in Ether oder B & B setzen , nicht auf die Formatierung von 180. Also lasst es uns speichern und jetzt sollte es 0 zeigen. Aktualisieren wir die Seite. Es sagt immer noch große Zahl. Lasst es uns nochmal speichern. Ich weiß nicht, vielleicht mein Staat Es zeigt immer noch große Zahlen und das liegt wahrscheinlich daran, dass ich Balance rufe, was das ist. Oh, ja, das ist es immer noch eine große Zahl. Ich denke, mein Problem ist, dass ich dieses Gleichgewicht genannt habe und dann auch festgelegt habe, mein Zustand ausgeglichen ist, was ich hier verwende. Es wird also wahrscheinlich diese ursprüngliche Nummer verwendet. Lassen Sie uns dies in ein Gleichgewicht ändern, das gerade ausgeglichen wird. Und dann sind wir uns sicher, dass dies unsere Zustandsvariable hier oben ist und nicht das. Das ist also mein schlimm. Nennen wir also die variable Balance des Formats so und greifen wir dann die Statusvariablen. Also speichere es und jetzt sollte es gut sein. Aktualisieren Sie also die Seite. Im Versuch Teil davon wir const sagen, Balance of Equals. Und wir werden unser Vertragsobjekt verwenden. Denken Sie daran, dass wir so aufrufen werden, dass alle diese intelligenten Vertragsfunktionen einen Kontraktpunktsaldo diese intelligenten Vertragsfunktionen einen Kontraktpunktsaldo ausführen, denn Sie erinnern sich daran, dass wir eine Funktion haben, die Balance of genannt wird, wenn Sie zu unserem Vertrag zurückkehren wir könnten anrufen, Gesamtdauer abrufen oder tun und wir werden das alles tun. Aber im Moment werden wir das einfach testen. Also nennen wir es. Wir sagen also Kontraktpunktsaldo von. Dann legen wir direkt darunter eine andere Statusvariable fest, um diesen Wert beizubehalten. Kommen wir wieder hierher und tippen ein, direkt unter diesem Put-const, Balance, SET-Guthaben ist gleich use state. Jetzt siehst du das Muster hier. erste ist die Variable und die zweite beginnt mit set, da dies die Variable ist, die Sie verwenden. Das ist es, was Sie verwenden, um diese erste Variable festzulegen. So könne 7. Aufbau des Mieters: Jetzt beginnen wir hier mit unserem Dashboard, wo wir diese dynamisch füllen können. Derzeit haben wir nur statische Werte, aber wir müssen diese füllen können . Wir müssen in der Lage sein, eine Zahlung zu leisten und unser Konto gutzuschreiben. Und übrigens, hier oben haben wir Guthaben und dann ist die Zahlung hier drin, es ist rückwärts. Lasst uns diese schnell tauschen. Wenn wir zu den aktuellen Summen unten gehen, tauschen Sie einfach diese beiden Komponenten aus, fügen Sie das ausgeglichene Formular hinzu, bevor Sie sie bezahlen. Das wird das beheben. Aber bevor wir all das tun, müssen wir ein Formular wie dieses erstellen, so wie dieses Dashboard derzeit ist, es geht davon aus, dass der Mieter sich bereits als Mieter hinzugefügt hat , aber wir haben es noch nicht getan . Das ist wieder nur statischer Text. Wir müssen also hier ein Formular anlegen, um anzuzeigen, ob sich die Miete oder nicht als Mieter hinzugefügt hat. Und wenn sie es schon getan haben, zeigen wir das Dashboard und ihre aktuellen Werte an. Wenn wir versuchen, den Mieter zu kredit zu machen und seine Fahrminuten und all das zu überprüfen, wird es nicht funktionieren, denn denken Sie daran, dass wir diese Funktion in unserem Vertrag hier oben haben diese Funktion in unserem Vertrag , auf dem Mieter hinzufügen steht. Wir müssen den Mieter zu unserer Mapping der Mieter hinzufügen. Das müssen sie also tun. Im Wesentlichen müssen sie das Formular ausfüllen , um sich als Mieter hinzuzufügen, wodurch sie dann ein Fahrrad auschecken können. Kurz bevor wir das tun, müssen wir uns mit einer Sache befassen. Im vorherigen Video haben Sie vielleicht eine Sache bemerkt , haben Sie vielleicht eine Sache bemerkt wann immer ich in seiner Blockchain-Kontextdatei gearbeitet habe seiner Blockchain-Kontextdatei und eine Änderung vorgenommen habe oder was auch immer ich tat. Und ich habe Command S gedrückt, um es zu speichern, es würde tatsächlich meine Seite zum Absturz bringen. Also lass mich Command S drücken, zurück und du wirst sehen, wie meine Seiten abgestürzt sind. Wenn ich die Konsole öffne, sehen Sie eine ganze Reihe von Fehlern, die sich auf den verwendeten Kontext-Hook beziehen. Der Grund dafür ist , dass wir im Air-Blockchain-Kontext oben , wo wir die Kontexte erstellen, das Argument null oder den Parameter belassen haben. Nein, wir sollten hier etwas reinlegen und wir werden einfach eine leere Zeichenfolge setzen. Und das werde ich speichern. Und jetzt testen wir es noch einmal. Lassen Sie mich das also auffrischen. Und ich komme her und hebe es ein paar Mal auf. Und du solltest sehen , dass meine Seite in Ordnung ist. Das ist also ein Fehler meinerseits. Gehen Sie zum React-Punkt erstellen Kontext und stellen Sie sicher, dass Sie einen Wert In diesem Fall setzen wir eine leere Zeichenfolge ein. In Ordnung? Erstellen wir also ein neues Formular. Wir nennen es Miete oder bilden Punkt JSX. Und wieder werden wir einfach die eine dieser anderen Formen annehmen . Versuchen wir die Anzeige in ausgewogener Form. Und wir werden das einfach kopieren und einfügen. Und dann kommen wir auf den Funktionsnamen zu und nennen ihn Miete oder Formular. Okay, und dann scrollen wir nach unten, du siehst dieses Guthaben auf deinem Konto. Wir wollen das in etwas anderes ändern und ich werde tatsächlich über dem Flex heraufkommen. Und ich setze einfach ein Textfeld ein. Und im TextField werde ich als Attribute setzen , font-family gleich Überschrift. Die Schriftgröße ist gleich 600 oder tatsächlich x groß. Und dann entspricht das Schriftgewicht 600. Okay, und stellen Sie sicher, dass Sie das schließende Tag setzen. Und dann werden wir darin ein paar SMS schreiben. Wir werden Willkommen sagen. Und dann mache ich einen Zeilenumbruch. Und bitte geben Sie Ihren Vor - und Nachnamen ein, um sich zu registrieren. Sie könnten so sein, ist das nicht eine dezentrale App? Warum wollen wir den Nachnamen oder sogar FirstName von jemandem? Aber es ist nur ein Konzept, das ich mir ausgedacht habe, als ich die App erstellt habe. Wenn Sie es ändern möchten, können Sie es gerne ändern. Und Sie werden sehen, dass wir diesen Fehler haben, weil wir, weil wir nicht mehrere Tags und eine Rückkehr haben können, weil wir, weil wir nicht mehrere Tags und eine Rückkehr haben können, dies beheben, indem wir leere Tags öffnen und schließen. Also lege das ganz oben und ein schließendes unten auch. Also haben wir unsere Texte hier. Wir haben einen Flex und dann haben wir unsere Form. In der Form wollen wir eigentlich nur den FirstName und LastName, da can rent merke auf true gesetzt wird , weil sie gerade ihr Konto erstellen. Natürlich können sie mieten. Active wird auf false gesetzt , da sie noch kein Fahrrad haben. Dann werden Startzeit, Endzeit, Saldo und fälliger Betrag alle 0 sein. Das wird also im Backend oder außerhalb des Forums oder außerhalb der Möglichkeit der Benutzer festgelegt Forums oder außerhalb der Möglichkeit der , dies zu ändern. Wir brauchen also nur einen Vor- und Nachnamen. Wir haben also schon einen Input. Also habe ich die Kontrolle gebildet. Lass es uns machen. Lasst uns hier eigentlich ein Label machen. Formularbezeichnung in HTML vier ist also gleich FirstName. Und wir werden FirstName hierher bringen. Das ist nur ein Label. Und dann haben wir unsere Eingabe, unsere Fehlermeldung. Und dann werden wir noch eine davon kopieren und einfügen. Also eine andere Formularbeschriftungseingabe und Fehlermeldung. Fügen Sie also direkt unter der Fehlermeldung eine andere ein. Und wir werden diese beiden einrichten. Also HTML für FirstName. Also werden wir erneut FirstName eingeben diese Typnummer in Schritt herausnehmen weil wir Zeichen wollen. Platzhalter, FirstName. Und dann überall gibt es ein Guthaben, mach einfach FirstName. Und dann im zweiten wollen wir den Nachnamen genau hier, ändern Sie diesen in LastName, LastName, nehmen Sie die Nummer in Schritt heraus. Platzhalter wird LastName lauten. Registrieren ist LastName. Und denken Sie daran, dass ich Ihnen gesagt habe, dass dieses Register ist, und ich werde diese nicht in diesen Kamelfall bringen. Ich möchte alles in Kleinbuchstaben mit den anderen übereinstimmen. Aber denken Sie daran, dass ich Ihnen von diesem Register erzählt habe. Es registriert tatsächlich die Eingabe , die Sie in die Felder einfügen, und legt sie in dieses Objekt ein, das dann dorthin gesendet wird , wo Sie das Formular senden , es ist ziemlich cool. Das ist alles, was ich tun muss. Also LastName, ändere diese beiden in LastName. Und dann hier oben, wo Formularsteuerelement steht, gibt es eine Überprüfung nach ist ungültig. Ich möchte prüfen, ob es Fehler gibt. Vorname und Whoops und Fehler Nachname. Genau hier haben wir eine Fehlermeldung. Wenn es also einen Fehler in diesem oder diesem gibt, und wir haben ihn tatsächlich festgelegt, und deshalb müssen beide fehlerfrei sein, um zu bestehen. Du darfst also kein Feld setzen. Sie können also keine Werte in das eine und nicht in das andere setzen. Und dafür wollen wir eine Mindestlänge. Also lasst uns Männer Länge Wert vier machen. Und die Botschaft wird die Mindestlänge sein sollte vier sein. Das werden wir in den nächsten setzen. Lasst es uns retten. Und hier oben, wo Ihr Konto gutgeschrieben wird , nehmen Sie den ganzen Text heraus nehmen Sie den ganzen Text heraus, weil ihre Texte darüber liegen werden. In dann in Luft aufsenden. Wir werden die Werte konsolenprotokollieren. Also lasst uns, ich denke, es geht uns gut. Mal sehen, wie das aussieht. Also haben wir hier keine Bedingungen gesetzt, wenn ich aktualisiere, und tatsächlich haben wir sie nicht einmal zur Seite hinzugefügt. Das wird also tatsächlich in die aktuellen Summen gehen, glaube ich. Nein, es wird ins Armaturenbrett gehen. Also genau hier, wo es aktuelle Summen gibt. Kommentieren wir das einfach vorerst. Nur um zu sehen, wie das aussieht. Wir ziehen ein Mieter-Formular ein und stellen sicher, dass Sie es importieren, speichern das und schauen wir uns an, wie das aussieht. Ja, also hier ist FirstName, LastName. Also füge ich ein wenig Platz unter dem ersten hinzu, damit es etwas besser aussieht. Wenn ich also zum Dashboard gehe, wird es tatsächlich Miete oder Formular sein. Also dieses zweite Formularlabel, ich werde nur Marge Top machen gleich vier. Lass uns drei machen. Sieh mal, wie das aussieht. Drei reicht nicht ganz aus. Versuchen wir es mit fünf. Okay, also willkommen, bitte iss Äther. Ich hab Äther gelegt. Bitte geben Sie Ihren Vor - und Nachnamen ein, um sich zu registrieren. Also lasst uns Travis ausprobieren und dann testen. Und wenn ich auf Absenden klicke, sollte es sich bei der Konsole anmelden. Da ist es, FirstName Travis, Nachname, Test. So einfach ist es mit React Hakenform. Großartig. Jetzt brauchen wir eine Möglichkeit zu wissen, ob ein Mieter existiert oder nicht. Und wenn Sie sich erinnern, dass in unserem Vertrag, wenn wir zur Fahrradkette Punktseele gehen, haben wir geschaffen, dass dieser Mieter existiert in allem, was er tut, ist die Rückgabe wahr, wenn es eine Wallet-Adresse für diesen Mieter gibt und falsch, wenn nicht, wir werden dies verwenden, um festzustellen, und das wird uns helfen zwischen Luftform in unserem Armaturenbrett zu wechseln. So gut ein Blockchain-Kontexte. Und genau dort, wo wir aufgehört haben, werden Sie ausgeglichen. Und eigentlich müssen Sie das Get Balanced nicht anrufen, weil niemand wirklich den Restbetrag des Vertrags bekommen muss , außer dem Eigentümer. Wir wollen diese Farbe also nicht, aber Sie können sie hier unter Balanciert lassen , wir werden eine neue Funktion namens get renter existiert erstellen . Also werden wir prüfen, ob der Mieter existiert. Ein Waschbecken. Und wir werden es versuchen zu fangen. Und der Haken, wir werden ihn einfach trösten. Dann werden wir hier oben zwei Dinge tun. Wir werden prüfen, ob es sie gibt. Und wenn es sie gibt, holen wir ihre Informationen. Denken Sie also daran, dass in unserem Vertrag hier eine Funktion namens Mieter existiert. Und was das tut, ist, dass es wahr wenn sie eine Wallet-Adresse und unser Mapping haben. Es gibt also true zurück, wenn sie falsch existieren , wenn sie dies nicht tun. Wenn dies wahr ist, rufen wir diese Funktion zum Vermieter auf, damit wir die Mieterinformationen in unserem Bundesstaat speichern und alles tun können die Mieterinformationen in , was wir dazu benötigen. Also werden wir hier tatsächlich zwei Funktionen haben. Wir fangen damit an , dass Mieter existiert. Und eigentlich weiß ich nicht, warum ich es genannt habe, dass der Check Mieter existiert, sinnvoller ist. Also hier werden wir sagen , dass const mieter gleich wartet Contract Dot, und wir nennen diese Funktion Mieter existiert. Sehen Sie hier zum Smart Contract. Vertragspunkt-Mieter existiert. Und wir müssen Air Wallet Adresse übergeben. Und wenn Sie sich hier erinnern, speichern wir das im Status unter einer Variablen namens Girokonto. Also kopiere das, komm her und gib das rein. Und dann wollen wir diesen Zustand festlegen. Wir wollen also den Staat festlegen , ob sie existieren oder nicht. Ich behalte die Dinge gerne im Staat, falls ich es brauche. Ich denke, auf anderen Seiten müssen wir wissen können, ob das stimmt oder falsch ist. Erstellen wir also eine Statusvariable. So gibt es Canst Mieter, Setmieter existiert gleich US-Bundesstaat. Und lasst uns hier setzen Setmieter existiert. Mieter wird das weitergeben. Großartig. Und wie gesagt, wenn es sie gibt, wollen wir weitermachen und ihre Informationen erhalten. Darunter werde ich sagen, ob Mieter, also wenn der Mieter existiert, wenn das stimmt, dann rufen wir eine Funktion namens get renter auf. Und lasst uns das belasten. Also direkt darunter werde ich const setzen, Mieter holen. Lassen Sie uns erstellen, dass diese Funktion einer Senke entspricht, wirft, entspricht einem Senkpfeil. Dann machen wir diesen Try-Fang, aber ich kopiere das einfach, um Zeit zu sparen. Und kontrahierter Punkt. Wie heißt ihre Funktion dafür? Es heißt „Mieter bekommen“ und wir geben eine Wallet-Adresse ein. Also hier, den Mieter holen, wir geben eine Wallet-Adresse und dann setzen wir den Status ein. Wir speichern diese Mieter Werte in ihrem Bundesstaat. Also lasst uns hierher kommen und ein neues erstellen. Const, Mieter, set Mieter gleich U state. Und hier unten setzen wir einfach den Mieter, Mieter, um es in unserem Bundesstaat zu retten. Dann können wir das entfernen. Wenn diese Komponente geladen wird, dieser Kontext geladen wird, wollten wir den Check Renter existiert aufrufen , weil wir das im Voraus wissen wollen. Wir müssen dies also nehmen und in unseren Benutzereffekt aufnehmen. Damit es heißt, wenn das geladen wird. Und dann existiert dieses Check render, speichert, speichert diese true oder false in der Statusvariable des Mieters existiert. So können wir hierher kommen und an unseren Anbieter weitergeben , der Mieter existiert. Das wird uns also wahr oder falsch sagen. Und dann lasst uns das speichern und wir werden wieder die Informationen des Mieters abrufen. Aber wir wollen jetzt nur wissen ob sie existieren. Wir senden dies an unseren Anbieter. Und dann können Sie in unserem Dashboard testen , ob wir das Formular oder das Dashboard anzeigen sollen. Also hier oben werden wir sagen const, Mieter existiert gleich Kontexte, Blockchain-Kontext verwenden und sicher sein, dass Sie das mitbringen. Sie importieren Nutzungskontexte aus React und importieren auch die Blockchain-Kontexte. Jetzt können wir hier runter kommen und sagen, also müssen wir hier ein paar Dinge überprüfen. Wir möchten prüfen, ob der Mieter existiert. Wir möchten einen Spinner anzeigen. Andernfalls stimmt, wenn der Mieter existiert. Wir möchten das Dashboard anzeigen. Sonst zeige ihr Formular an. Wenn wir also den Standardwert des Mieters existieren festlegen, wenn wir dies auf false oder so setzen, wäre das nicht gut, denn das würde uns sagen, dass das Formular immer anzeigen sollen, weil ihre Miete oder nicht existieren. Zeigen Sie also das Formular an. Aber wir wollen tatsächlich, dass es sich dreht, bevor es irgendetwas setzt. Also wollen wir spinner, bevor es bestimmt, Hey, es ist falsch oder hey, es ist wahr. Also können wir das tatsächlich mit dem ternären Operator machen. Und vielen Leuten gefällt das nicht. Es macht mir nichts aus , weil ich es oft sehe und daran gewöhnt bin. Aber wir können wie ein wenn sonst tun, sonst mit ternären oder wenn auch sonst. Und wir können es so machen. Ein Mieter existiert also gleich null. Dann showSpinner. Ich werde das vorerst nur in Zitate setzen . Wenn der Mieter existiert, ist true, dann zeigen Sie die aktuellen Summen an. Sonst zeigen Sie die Miete oder das Formular an. Ich weiß also, dass das für dich irgendwie komisch aussehen könnte. Wenn der Mieter existiert, ist gleich null, dann zeigen Sie das Zahlenauswahlfeld an. Und normalerweise ist es wie etwas anderes. Aber Sie können sonst sagen, wenn der Mieter existiert, wahr ist, wenn Sie dieses Fragezeichen hier setzen, dann zeigen Sie aktuelle Summen an, sonst Miete oder Formular anzeigen. Dies prüft also drei Bedingungen null, false und true. Anstelle des ShowSpinner wird das also nichts bewirken. Installieren wir eine Art Spinner-Paket. Ich gehe her und reagiere einfach auf Spinner. Spinner. Lass uns damit gehen. Also Garn hinzufügen, auf Spinner reagieren. Starte meinen Server. Installiere das. Großartig. Also hier zeigen wir einen Spinner an. Und wie machen wir das? Also werden wir einfach diesen Clip-Loader benutzen. Also kopiere das. Dies ist ein kurzer Clip Loder von diesen React Spinnern. Ich füge es oben ein. Was sonst noch? Sieht aus wie. Wir müssen eine Statusvariable festlegen, die geladen wird und das Laden einstellen. Und das wird standardmäßig stimmen. Das wird also geladen, wenn wir die Seite starten. Dann wird das wahrscheinlich irgendwie mit unserem Spinner korrelieren. Also hier ist unser Cliploader. Es gibt eine Farbeigenschaft , mit der wir uns nicht anlegen möchten, oder CSS oder Größe, vielleicht möchten wir uns mit der Größe anlegen, aber hier ist das Laden gleich geladen. Kopieren wir das also und legen es in den Fehlerclip-Zahlenauswahlfeld. Und eigentlich kopiere ich einfach die ganze Sache. Und wir nehmen einfach heraus, was wir nicht kopieren müssen , und fügen es hier ein. Und lass uns Farbe herausnehmen. Und lassen Sie uns CSS gleich Override herausnehmen. Und ich denke, dass 150 groß werden. Also lasst uns 75 machen. Und dann nimm diesen Pseudocode heraus und speichere ihn und sieh, wie das aussieht. Lasst uns also mit unserer Bewerbung beginnen. Yarn run dev. Und lasst uns auffrischen. Wir haben einen großen Fehler. Use State ist nicht definiert, ja, also müssen wir den US-Bundesstaat einbringen. Es gibt gebrauchte Kontexte. Fügen Sie einfach den Status verwenden hinzu, speichern Sie ihn. Großartig. Es sieht also so aus, als hätten wir einen Spinner und es löst sich zu nichts. Und dann sieht es so aus, als würden wir das Formular immer noch zeigen. Wir wollen dieses Formular loswerden , weil es nicht angezeigt werden soll. Und dann wollen wir diesen Spinner zentrieren. ist also sehr einfach, den Spinner zu zentrieren. Wir nehmen einfach diesen Clip-Loader und wickeln ihn einfach in diese Chakra UI Center-Komponente ein. Setze also einfach Center und setze das am Anfang und dann das schließende Tag am Ende des Clip-Loaders. Und dann haben wir vergessen, die Miete oder das Formular hier unten zu entfernen und dann diese kommentierten aktuellen Summen zu entfernen. Jetzt speichern wir es und sehen, was passiert. Es hat also die Seite aktualisiert und es dreht sich einfach nicht mehr. Das sagt uns also , dass etwas nicht stimmt , weil es sich lösen sollte wie Miete oder existiert, sollte sich in diesem Zustand ändern. Sie sollte diesen Cliploader nicht mehr zeigen. Es sollte tatsächlich aktuelle Summen oder Miete oder Formular anzeigen , sobald es gelöst ist. Es gibt also ein anderes Problem. Und das sehen Sie genau hier, wir haben einen Fehler. Dieser Fehler besagt, dass der Resolver oder Adresse nicht für den DNS-Namen konfiguriert ist. Dies ist wie einer der vagen Fehler von Ethers JS. Es kann eine Million Dinge bedeuten, aber ich weiß in unserem Kontext wahrscheinlich, dass dies in unserem Blockchain-Kontext, wenn wir dieses Girokonto verwenden, wahrscheinlich bedeutet dies, dass diese Leistungsbilanz noch nicht festgelegt, wenn wir das nennen. Und das können wir feststellen , indem hier ein Konsolenprotokoll setzen, Girokonto. Und eigentlich werde ich Backticks setzen und Girokonto sagen. Und dann Girokonto nur damit wir wissen was das ist. Speichern wir es und sehen was uns das Girokonto gibt. Also sieh dir das an. Girokonto ist leer. Genau das ist also los. Und um ehrlich zu sein, kenne ich die Lösung im Moment nicht. Ich muss mich damit beschäftigen , um zu sehen warum, aber ich werde es herausfinden und ich werde es dich hier im nächsten Video wissen lassen . Aber eine schnelle Lösung für uns ist es jetzt, hier zum US-Effekt zu kommen und hier die Leistungsbilanz hinzuzufügen. Jetzt würde Effect verwenden wird use Effect aufgerufen, wenn die Komponente geladen wird. Es kann auch erneut aufgerufen werden, wenn diese Werte etwas in diesem Array ändern. Also kann ich Girokonto haben, ich kann Mieter und all das andere Zeug haben. Wenn sich diese Werte ändern. Oder auf irgendeine Weise aktualisiert, wird der Aufruf, den sie verwenden, erneut wirksam. Wenn wir hier Girokonto einlegen, wenn diese Funktion aufgerufen wird, gibt es kein Girokonto und es gibt einen Fehler aus. Nun, wenn das Girokonto gelöst ist, wird es zurückkommen und dies erneut aufrufen, was beide Funktionen aufrufen wird. Schon wieder. Obwohl es einen Fehler macht, wird es zurückgehen und es erneut anrufen , sobald es gelöst ist. Also machen wir das vorerst , damit wir weitermachen können. Ich gebe dir hier ein bisschen die Lösung, aber wenn du das jetzt speicherst, sollte es gut funktionieren. Aktualisieren Sie also. Und da sind wir los. Und dann sehen Sie, dass das Girokonto hier leer ist, aber dann wird es wieder mit der Adresse angezeigt. Das ist also das Problem, das vor sich geht. Das werden wir ein bisschen ansprechen. Aber genau hier heißt es: Willkommen, Bitte geben Sie Ihren Vor- und Nachnamen damit es zeigt, dass die Dinge funktionieren. Wenn wir erneut aktualisieren, es Spins und dann zeigt es, Hey, der Mieter existiert nicht. Es macht also einen Anruf, es kehrt falsch zurück und zeigt unser Formular an. Also lasst es uns jetzt so einstellen, dass wir uns tatsächlich als Mieter registrieren können . also direkt unter Mieter einen Anruf tätigen, Wir müssen also direkt unter Mieter einen Anruf tätigen, um uns als Mieter anzumelden. Gehen wir also zu unserem Vertrag zurück und stellen fest , dass wir es hier Add Mieter genannt haben , fügt Mieter hinzu. Das müssen wir anrufen. Gehen wir also zurück und lassen Sie uns eine neue Funktion erstellen. Ich kopiere es und füge es ein. Ich nenne es Add Mieter. Und Mieter. Und dann werden wir den Vertragspunkt-Mieter hinzufügen, weil das eine intelligente Vertragsfunktion ist. dann in dieser Anzeigenmiete oder Funktion Wenn Sie dann in dieser Anzeigenmiete oder Funktion zum Smart Contract zurückkehren, geben wir alles weiter, während unter Adresse, Vorname, Nachname aktiv mieten können, im Zeitsaldo beginnen und tun. Also. Das geben wir einfach direkt an unsere Funktion hier oben weiter. Also setzen Sie Wallet-Adresse, FirstName, LastName kann mieten, aktiv, balancieren, beginnen und enden. Also werden wir all das weitergeben, wenn es heißt. Und genau hier im Anzeigenmieter werden wir diese Informationen weitergeben . Also kann ich das tatsächlich nehmen, kopieren und hier einfügen. Wenn wir dann den Vertrag anrufen, können wir diese nette Methode verwenden, die als Gewicht bezeichnet wird. So können Sie ein Gewicht sehen, fügen Sie das Gewicht des Mieters hinzu. Und was das tut, ist, dass es dort stoppt, bis die Transaktion abgeschlossen ist. Also bleibt es hier und wartet. Und wenn die Transaktion abgeschlossen ist , führt sie weiterhin Code aus. Also werden wir das einfach per Konsolenprotokoll testen , vermieten oder hinzugefügt. Wir können tatsächlich ein paar lustige Sachen machen. Wir können FirstName hinzugefügt. Und genau darunter werden wir diese Mieter Informationen erhalten wollen. Wir haben also diese Funktion namens Get Renter, die die Statusvariable der Mieter mit den Mieterinformationen festlegt Statusvariable der Mieter mit den Mieterinformationen , dass der Mieter von dieser Scheckmiete aufgerufen wird oder existiert. Alles, was wir hier unten tun müssen, ist einfach Check Rent anzurufen oder existiert. Und das wird überprüfen , ob sie existieren um unseren Staat mit diesen Mieterinformationen zu bevölkern. Also lasst uns das aufheben. Wir wollen nicht, dass dies beim Laden der Seite aufgerufen wird. Also übernehmen wir die gesamte Funktion und geben sie an unseren Anbieter weiter. Speichern Sie das, und dann gehen wir zu einem Mieterformular. Und wir möchten diese Anbieterinformationen, die Informationen angeben, in eine Mieter-Formularkomponente einbringen . Und du hast das schon einen Haufen gemacht, du weißt, wie es geht. Es ist so einfach wie const. Fügen Sie Mieter gleich hinzu, verwenden Sie Kontext, Blockchain-Kontexte. Importieren Sie Use-Kontexte aus React und importieren Sie den Blockchain-Kontext. Und wenn wir dann zu onsubmit gehen, rufen wir diesen Add-Mieter an. Denken Sie daran, dass wir nur den FirstName und LastName aus dem Formular erhalten . Und das liegt daran, dass die Miete wahr ist, wenn ein Mieter eine Miete geschaffen hat ist, wenn ein Mieter eine Miete geschaffen , weil er offensichtlich mieten kann. Aktiv wird falsch sein , weil sie noch kein Fahrrad haben. Sie melden sich gerade an. Das Guthaben wird 0 betragen. Der fällige Betrag ist 0, und die Start- und Endzeit werden wir Nullen sein. Sie können also immer von hier aus so eingestellt werden, dass die Person, die das Formular ausfüllt , keine nutzlosen Informationen eingeben muss. In unserem OnSubmit werden wir das machen. Wir geben die Werte weiter. Wir werden Werte sagen. Kann mieten ist gleich wahr. Und was wir hier tun, ist, mehr Werte in einem Objekt festzulegen . Lassen Sie mich das einfach ein paar Mal kopieren und einfügen. Werte, aktiv ist gleich 0, Werte, Saldo gleich 0. Werte beginnen und enden. Alles ist gleich 0. Oh tut mir leid, aktiv ist falsch. Dann Nullen, Nullen, Nullen. Also füllen wir diese aus, weil sie immer Standard sein werden. Dann müssen wir auch die Wallet-Adresse übergeben . Und wir möchten nicht, dass der Benutzer diese Adresse eine Weile weitergeben muss, und wir haben dass der Benutzer diese Adresse eine Weile weitergeben sie nicht ins Forum aufgenommen, also müssen wir diese auch einbeziehen. So können wir das Girokonto hier aus den Blockchain-Kontexten einbringen . Und wir können diesen Spread-Operator tun , um ein neues Werte-Objekt zu erstellen. Also konst neues Werte-Objekt. Was wir tun werden, ist, dass wir Wallet-Adresse haben. Whoops. Was wir tun werden, ist, dass wir ein Objekt erstellen. Der erste Schlüsselwert im Objekt ist die Wallet-Adresse, die dem Girokonto entspricht. Dann können wir die Werte einfach verteilen. In diesem Objekt. Dies ist der Spread-Operator. Und was das tut, ist, dass alle diese Werte hinzugefügt werden, die sie eingereicht haben, einschließlich dieser beiden, dieses Objekt. Es ist echt cool. Wenn wir konsolen loggen neues Werte-Objekt ab. Mal sehen, wie das aussieht. Ein frisches, lasst uns Travis testen, einreichen und schauen uns das an. Wir haben ein Objekt, das Wallet-Adresse hat, FirstName, LastName kann mieten, aktiv in all diesen anderen Sachen. Wir haben also unsere Schlüsselwerte und sind bereit, sie einzusetzen. Aber wir wollen nicht wie neue Werte sein müssen Objekt Dot Wallet Adresse neue Werte Objekt Dot mieten kann. Lassen Sie uns nun die D-Strukturierung verwenden , um diese herauszuziehen. Also const Wallet Adresse, FirstName, LastName, kann mieten. Aktiver Saldo. Fangen Sie an und entspricht dann dem neuen Werte-Objekt. Dies ist nur die Strukturierung. Es zieht all diese Werte heraus, sodass wir diese Punktnotation nicht verwenden müssen. Und schließlich ist der letzte Schritt, dass wir Air Wait anrufen, Add Mieter wird all das weitergeben. Auch hier, wenn wir diese Umstrukturierung nicht durchführen würden, müssten wir einfach so machen. Neue Werte Object Dot Wallet adressieren neue Werte oder Objekte. Das ist also nur eine Abkürzung. Das kannst du machen. Aber ich denke, das sieht viel sauberer aus. Also geben wir wieder unsere Werte weiter. Wir fügen diese Standardwerte hinzu. Wir fügen unsere Wallet-Adresse hinzu, um ein neues Objekt zu erstellen , bei dem D die Werte daraus strukturiert. Und dann geben wir sie in unsere Add-Renter-Funktion weiter. Genial, probieren wir das aus und sehen, ob es einen Mieter hinzufügt. Also sage ich Travis Test und klicke auf Absenden. Und es sollte MetaMask aufrufen. Wir haben einen Fehler. Die Eigenschaft kann nicht gelesen werden, hat eine undefinierte Leselänge. Also füge Mieter hinzu. Ja, hier gibt es ein Problem. Lasst uns also statt wieder hierher gehen. Aber warte, füge Miete hinzu oder lass uns eine console.log machen. Speichern Sie das und sehen Sie, was es sagt. Travis-Test. Wir haben ein paar undefinierte True-False-Nullen. Okay, also der Nachname ist undefiniert. Es sieht so aus, als wäre das Problem jemals Wallet-Adresse, FirstName. Nachname ist undefiniert. Mal sehen, was los ist. Wenn wir also hier unten zu unserem Render-Formular gehen. Ja, ich wusste, dass ich das aus Gefühl gemacht habe. Nachname. Es ist wie letztes Kapital N. Hier ist FirstName ohne Kapital N. Ich werde diese Kapitalenden zurücksetzen nur um konsistent zu sein. Lasst uns das alles hervorheben. Und mach FirstName. Und markieren Sie dann alle Nachnamen. Und mach es genauso, Kapital N. Und dann hier oben müssen wir sicherstellen, dass wir die richtigen Dinge haben. Und diese ändern beide Vornamen, Nachnamen und speichern das. Und jetzt sollten wir gut sein. Versuchen wir es noch einmal zu trösten . Travis testen, einreichen und wir haben Wallet Adresse Travis Tests true-false 0000. Okay, uns geht's gut. Lassen Sie uns dies wieder ändern, um zu warten, Mieter hinzuzufügen und es erneut zu versuchen. Aktualisieren Sie nur, um sicherzustellen, dass ich alles klar habe. Travis testet und klicke auf Absenden. Dies sollte MetaMask aufrufen. Und los geht's. Schau dir diese niedrige Gasgebühr an. Das ist großartig. Mir gefällt es. Jetzt. Ich klicke auf „Bestätigen“. Und mal sehen. Es steht wahrscheinlich noch aus. Es steht jetzt noch aus und sehen Sie, wie sich das noch dreht. Das ist React Hook Form. Der sendet Hook , den sie dem Formular hinzugefügt haben , das diesen dreht, bis er vollständig ist. Sieh dir das an. Nachdem wir hinzugefügt wurden, hat es die Änderung erkannt und jetzt wird unser Dashboard angezeigt. Ist das nicht großartig? Das ist großartig. Wenn ich jetzt aktualisiere, sollte ich stattdessen mein Dashboard sehen. Also habe ich das Spinnrad und da ist mein Armaturenbrett. Großartig. Also nochmal, um das noch einmal zusammenzufassen, war dieses Problem, dass wir diesen Kamelfall, Kleinbuchstaben, erstes Wort und dann Kapital, alle anderen Wörter hätten verwenden sollen Kleinbuchstaben, erstes Wort und dann Kapital, . Das hat unseren Nachnamen durcheinander gebracht. Also sind wir einfach zurückgegangen und haben all diese CamelCase geändert. Ändere die Vornamen in CamelCase. Dann hier oben und stelle sicher, dass wir die CamelCase-Version weitergeben. So toller Job. Es sieht so aus, als würde ein Dashboard funktionieren. Es kann erkennen, ob wir Mieter sind oder nicht ein Render. Im nächsten Video werden wir also anfangen, diese Felder dynamisch zu füllen. Wir können unser Konto gutschreiben, unsere Guthaben bezahlen und Fahrräder auschecken. Also werden wir im nächsten Video einen großen Schub machen. Und das bringt uns näher an das Ende unserer Bewerbung. 8. Populäre dashboard: Okay, also setze ich meinen Vertrag neu ein, damit ich testen kann, dass alles wieder funktioniert. Also werde ich Travis testen und füge mich als Mieter hinzu. Also klicke ich auf Absenden. Metamask wird auftauchen und ich bestätige es. Und sobald das erledigt ist, sollte es mein Dashboard anzeigen. Es steht also derzeit noch aus. Da sind wir los. Dashboards hoch. Bevor wir also all diese Werte durchdrücken, das nicht so lange dauern, wie Sie denken weil es sich um intelligente Verträge handelt, die die ganze Arbeit erledigt haben. Bevor wir das tatsächlich tun, möchte ich zwei Dinge ansprechen. Erstens haben wir einen kleinen Fehler. Wenn ich also meine Entwickler-Tools öffne, also wenn ich hier zu MetaMask komme, trenne meine Wallet. Trennen Sie also die Verbindung und aktualisieren Sie es dann. Sie werden sehen, dass der Spinner einfach weiter dreht und dreht und dreht und dreht. Und nichts wird geladen. müssen wir beheben. Und die Art und Weise, wie wir das beheben, ist, dass wir zum Dashboard kommen und uns daran erinnern, dass wir dies hier platzieren , wenn auch wenn sonst ternär. Nun, wir müssen noch eine Bedingung hinzufügen. Wenn das Problem also darin besteht, dass der Mieter Null ist, dreht sich der Spinner. Aber wenn wir kein Konto verbunden haben, dann existiert der Mieter, wird nein sein. Der Spinner dreht sich also immer, bis wir eine Wallet anschließen. Um das zu beheben, haben wir hier einfach eine andere Bedingung gesetzt. Wir legen ein Endgirokonto. Was das tut, ist, dass es so macht, dass, wenn der Render vorhanden ist, null ist und ein Girokonto vorhanden ist, dann das Zahlenauswahlfeld anzeigen. Wenn es also kein Girokonto gibt, wird der Spinner nicht angezeigt da beide nicht übereinstimmen. Und dann wird es weiter prüfen, ob der Mieter existiert, was nicht der Fall ist, und es wird das Mieterformular angezeigt. Fügen Sie also einfach das Girokonto und speichern Sie es. Versuchen wir es noch einmal. Also lass mich auffrischen. Und das muss ich eigentlich mitbringen. Also hier oben in meinem Kontext muss Girokonto angegeben werden, damit ich darauf zugreifen kann. Also speichere ich es. Und wir sollten jetzt gut sein. Ja, los geht's. Mein Wallet ist nicht verbunden und es zeigt mein Formular an. Jetzt wird das nichts bewirken. Wenn ich es ausfülle, wird ein Fehler ausgelöst. Wenn ich so etwas setze, wird ein Fehler ausgelöst, weil wir offensichtlich kein Wallet verbunden haben. Wir können nicht mit der Blockchain oder dem Smart Contract sprechen. Also lasst uns weitermachen und ihre Brieftasche verbinden. Verbinden. Und jetzt wird mein Dashboard angezeigt. Das zweite, was wir ansprechen möchten , ist das Problem, das wir im letzten Video hatten. Denken Sie daran, wenn wir das Girokonto in diesen Funktionen aufrufen, der Wert noch nicht im Status ausgefüllt worden, so dass es einen Fehler auslösen würde. Und das haben wir bekämpft, indem wir unseren Benutzereffekt Leistungsbilanz hinzugefügt haben. Wenn sich das änderte, würde es wieder Hughes Effect nennen. Dann würden wir unseren Wert bekommen. Denken Sie also daran, dass das Girokonto leer ist und wir dann einen Fehler erhalten weil wir einen Wert aufrufen, der noch nicht in ihnen existiert und der sich ausfüllt, dann funktioniert er. Also haben wir in unserem letzten Video darüber gesprochen und das werden wir jetzt beheben. Wir möchten nicht jedes Mal einen Fehler auslösen, bevor er tatsächlich läuft. Die Art und Weise, wie ich es in dieser Anwendung ansprechen werde , besteht darin, es einfach in eine if-Anweisung einzuwickeln. Überall wo wir das Girokonto abrufen möchten, wie hier, werde ich dieses Konsolenprotokoll überall los , wo wir dieses Girokonto erhalten möchten. Ich werde ein If-Girokonto einschließen. Wenn das also existiert, führe das nur aus. Ich gehe zu meiner nächsten Funktion , die Girokonto verwendet. Und das werde ich auch einpacken. Wenn Girokonto dann nur dies tun, mach diese Dinge. Ich denke, das sind die einzigen beiden im Moment. Was das tut ist, wenn das geladen und es hierher kommt und es versucht, den Mieter zu bekommen oder tatsächlich zu überprüfen, ob der Mieter existiert und Render im Girokonto vorhanden noch nicht in den Würfen gesetzt dieser Fehler. Dieses Mal wird überprüft, ob das Girokonto zuerst festgelegt wurde. Das wird es nicht sein, also wird es das überspringen. Und dann hier unten im US-Effekt, wenn es angerufen wird, denken Sie daran, dass wir es hier weitergegeben haben. Wann immer sich das ändert, wird es erneut Hughes Effect aufrufen. Wann immer das passiert, wird es diese Funktion erneut aufrufen. Und dieses Mal wird es funktionieren. Wenn wir es jetzt speichern und zurückgehen und aktualisieren, erhalten wir diesen Fehler nicht, wir bekommen das einfach. Etwas wird nicht mehr unterstützt. Und reagiere 18, was keine große Sache ist , ich muss mir das anschauen. Aber wir haben auch diesen Favicon-Fehler , den wir beheben können, indem wir zu index.html gehen und einfach das Favicon herausnehmen. Ich denke, ich muss meinen Server anhalten oder neu starten , damit das wirksam wird. Lassen Sie mich also aktualisieren und dieser Fehler ist weg. Also denke ich, dass wir hier anfangen können. Das erste, was wir tun werden ist diesen BNB-Guthaben zu bevölkern. Das ist also Luftbilanz, das Gleichgewicht der Mieter. Wenn wir also zu unserem Vertrag zurückkehren und nach unten scrollen, haben wir diese Funktion, die Balance of Mieter genannt wird. Das nennen wir, was wir nennen, um die Luftbilanz oder das Air BnB-Guthaben zu überprüfen , das wir auf den ERA-Kontostand von Renner gelegt haben . Gehen wir zurück zu Blockchain-Kontexten. Und lass uns const machen, hol. Ein Guthaben des Mieters entspricht einer Senke. Wir werden einen Try-Catch im Punkt-Log-Fehler der Fehlerkonsole machen. Dann werden wir hier nur sagen, dass const balance gleich wartet. Nutzen Sie unser Vertragsobjekt und rufen Sie den Restbetrag der Miete oder Funktion an. Wir werden das Girokonto abgeben . Und lasst uns das noch einmal in eine if-Anweisung umwickeln. Wenn Girokonto, dann mach nur diese Dinge. Und dann werden wir den Staat festlegen. Also werden wir hierher kommen und dafür einen Staat schaffen. Also sagen wir const rent, miete oder balance. Stellen Sie ein. Mieter Saldo entspricht dem Nutzungsstatus. Hier stellen wir das Guthaben des Mieters fest. Stellen Sie das Guthaben des Mieters auf Balance Eigentlich müssen wir das formatieren , weil es zurückkehrt. Wir müssen dies also so formatieren, wie wir es mit ihrem anderen Gleichgewicht getan haben, das wir am Anfang gemacht haben. das zu tun, setzen Sie Ethers Dot Utils, Punktformat Ether. Und wir werden in Balance gehen. Dies muss aufgerufen werden, wenn der Kontext geladen wird. Also werden wir es zu unserem Benutzereffekt hinzufügen. Wir werden das nennen und es wird die Staaten setzen. Wir müssen diese Statusvariable also an unseren Anbieter übergeben. Also stellen wir das Guthaben der Mieter ein. Und das sollte uns nun anderswo zur Verfügung stehen. Dann müssen wir also zu unserem Dashboard gehen. Eigentlich ist die aktuellen Summen da, wo wir hingehen müssen. Aktuelle Gesamtsummen. Wir müssen Luftkontexte einbringen . Also lasst uns const machen. Guthaben des Mieters ist gleich. Verwenden Sie Kontext, Blockchain, Kontext. Großartig. Stellen Sie nun sicher, dass Sie das oben importieren. Wir hätten also einen Blockchain-Kontext haben und wir hätten wichtige Kontexte verwenden sollen. Das ist hier unten verfügbar. Jetzt können wir in unserer Statistikkarte diese statische Nummer in Miete oder Guthaben ändern. Also lasst uns das speichern. Und lasst uns die Seite aktualisieren. Und wir haben 0, was stimmen muss , weil wir keinen Standardwert festgelegt haben. Um dies zu überprüfen, lassen Sie uns dieses Guthaben für Ihr Kontoformular funktionieren , damit wir unser Konto gutschreiben und sicherstellen können , dass es diesen Wert hier oben ändert wie viel wir im Smart Contract haben. Springen wir also zur Form Zu ausgewogenen hinzufügen. Eigentlich müssen wir in den Blockchain-Kontexten beginnen . Kommen wir auf den Grund. Und wir werden anrufen, wenn wir in unserem Smart Contract schauen, rufen wir die Einzahlungsfunktion auf. Mal sehen, ob wir diese Einzahlung finden können. Hier ist es. Wir werden diese Einzahlungsfunktion aufrufen. Wir geben unsere Wallet-Adresse in ihrer Zahlungspflichtigkeit weiter. Die Tatsache, dass es zahlbar ist, bedeutet, dass wir ihm auch eine Menge Äther oder B & B senden können ihm auch eine Menge Äther oder B & B senden Menge Äther oder B & B oder was auch immer wir senden, das in einem Objekt gesendet wird, das ich Ihnen in einer Minute zeigen werde. Wir haben also eine Einzahlung, sie ist auch zahlbar und es wird dies dem Smart Contract hinzufügen, aber das Mieterkonto, das sich an dieser Wallet-Adresse befindet, gutschreiben . Nennen wir diese Einzahlungsfunktion. Kommen wir zurück zum Blockchain-Kontext. Und ich kopiere diese Funktion einfach. Und ich nenne es Kaution. Und ich kann das entfernen, wenn wir das einfach entfernen. Denk also darüber nach. Jetzt geben wir eine Dezimalzahl ein und möchten sie in ein Wiegen oder zehn bis zum 19. Jahrhundert umwandeln. Denn in unserem Smart Contract wollen wir uns mit nicht Dezimalzahlen befassen , da Solidität noch keine Dezimalzahlen unterstützt. Also müssen wir das in die andere Richtung umwandeln. Wir haben also Formatether verwendet , um es von Weg zu Dezimalzahlen zu konvertieren. Jetzt müssen wir eine Dienstprogrammfunktion verwenden , um von Dezimalstellen in Wiegen umzuwandeln. Diese Funktion heißt Parseether. Also hier werden wir es bekommen, wenn ich const B & B Wert sage. Also der Betrag, den wir übergeben werden. Und lassen Sie uns das eigentlich als Parameter setzen . Wert. Der Wert von B & B entspricht also Ether-Punkt-Utils. Wir werden diesen Wert auf zwei Arten formatieren. Also müssen wir Parse Ether nennen. Und wir geben den Wert weiter. Sobald wir das haben, können wir unsere Einzahlungsfunktion Const aufrufen , Einzahlungsgleich erwarten. innere Funktion des Kontraktpunkts wird als Einzahlung bezeichnet. Und wir geben unsere Wallet-Adresse ein, bei der es sich um ein Girokonto handelt. Und wir müssen dies nicht in ein wenn umwickeln da dies beim Laden der Seite nicht geladen wird, es wird nur danach gesucht, wenn wir auf die Schaltfläche klicken. An diesem Punkt wird es also gut geladen sein. Und dann nach dem Girokonto können wir hier den Wert geben , wie viel wir an den Vertrag senden. Und ich habe dir gesagt, dass das ein Objekt ist. Erstellen wir also eine geschweifte Klammer. Und denn der Schlüssel wird Wert einsetzen. Für den Wert geben wir den b- und b-Wert ein, weil wir diesen Betrag hier übergeben. Und dann gibt es diese schöne Methode namens Gewicht, bei der wir, wenn wir diese Transaktion durchführen, die Transaktion starten und warten wollen , bis diese Transaktion abgeschlossen ist bevor wir mit das nächste Ding. Um das zu tun, haben wir nur die Kaution abgelegt, was wir oben definiert haben Punktgewicht. Und das wird warten, bis die Transaktion abgeschlossen ist. Dann wollen wir das Guthaben aktualisieren, das Guthaben der Mieter. Sobald wir das Konto gutgeschrieben haben, möchten wir diese Nummer auf der Seite aktualisieren. Und um das zu tun, ist es ziemlich einfach. Wir rufen einfach das Guthaben des Mieters holen an. Schon wieder. Diese Einzahlung wird beim Laden der Seite nicht aufgerufen. Es wird nur aufgerufen, wenn wir dieses Formular einreichen. Lassen Sie uns also hier runter gehen und diese Funktion an die Lagerstätte des Luftfahrtdienstes schicken . Und dann lasst uns zu unserer „Zu ausgewogenen“ Form hinzufügen gehen. Hier drin gehen wir zum onsubmit und Werte sind das, was wir bekommen. Schauen wir uns noch einmal an, was das einreicht. Also klicke auf Speichern. Mal sehen, wie dieses Protokoll an der Konsole aussieht, der Test und es ist etwas langsam. Da sind wir los. Wenn ich also 0.1 eingebe und einreiche, wird es ein Objekt mit einem Kreditsaldo und einem Wert von 0,1 einreichen , wir brauchen dieses Guthaben nicht, wir wollen nur die Nummer. Also werden wir die D strukturieren, indem wir konst kredit gehen, Kreditsaldo entspricht Werten. Dann können wir Warps für Warps aufrufen. Was war das? Warten Sie auf Einzahlung, Guthaben. Und das sollte alles sein, was wir tun müssen. Also lasst uns das speichern und es versuchen. Ich aktualisiere meine Seite immer gerne nur um sicherzustellen, dass ich neu anfange. Bevor Sie dies tun, stellen Sie sicher, dass Sie einige Tests B & B in Ihrem Konto haben. Wenn ich meins öffne, habe ich 1,96. Wenn Sie keine haben, gehen Sie einfach zu B und B Testhahn in Google. Klicken Sie auf den Test net.finance.org schicken Sie sich dann ein B & B. Sie können sich ein B & B pro Tag schicken. Hier drin gibst du einfach deine Wallet-Adresse ein. Klicke auf gib mir BNB und klicke auf das BNB und es schickt es dir in etwa fünf Minuten. Es ist echt cool. Aber ich habe mein Ende für heute schon bekommen also kann ich nicht mehr schicken. Also werde ich meinem Konto 0.1 B & B gutschreiben. Wenn ich also auf Senden klicke, haben wir einen Fehler. Die Einzahlung ist nicht definiert. Das ist in unserer Anzeigenausgleichsform wahrscheinlich daran, dass wir es nicht eingebracht haben. Ja, wir können die Einzahlung nicht anrufen , weil wir uns nicht in unseren Kontext gebracht haben. Also komm wieder nach oben. Einzahlung entspricht Kontexten verwenden. Und ich werde den Blockchain-Kontext weitergeben und sicherstellen, dass Sie diese beiden importieren. Meins macht es automatisch? Das habe ich dir eine Million Mal gesagt, aber ich versuche dich nur daran zu erinnern. Also lasst es uns nochmal versuchen. Aktualisieren Sie die Seite. Und ich werde mein Guthaben mit 0.1 B & B gutschreiben. Klicken Sie auf Absenden, und ich warte auf MetaMask. Okay, also meine Summe, also ist es ein sehr kleines Gas v, deshalb mag ich BNB. Es ist 0,0043 B & B. Und nimm das auf mein 0,01. Es ist sehr wenig Gas. Also lasst es uns bestätigen. Wenn wir das machen, wird es warten. Denken Sie daran, dass wir diese Gewichtsmethode nennen, sie wird warten. Und wenn das erledigt ist, sollte es Airbnb-Guthaben aktualisieren. Klicken Sie also auf Bestätigen, um es hier zu sehen. Es ist derzeit gewürtelt. Jetzt steht es noch aus. In unserem Spinner dreht sich aufgrund dieses React-Haken-Formulars, des eingebauten Hakens, ich denke, es heißt „Senden“, aber Sie werden jetzt sehen, dass unser B&B-Guthaben 0,01 oder 0,1 B & B & B beträgt . Mal sehen, wie viel das ist. 0.1. B&b beträgt 38 Dollar. Großartig. Das Gleichgewicht hat mir gefallen. Das funktioniert. Gehen wir jetzt zu B und B, um das zu bevölkern. Gehen wir also zurück zum Blockchain-Kontext. Und ich kopiere es und füge es in den nächsten ein. Wenn wir in unseren Vertrag schauen, haben wir eine Funktion namens get du. Das nennen wir also „Get do“. Wir geben nichts weiter. Und dann werde ich das schnell in einem Girokonto entfernen . Dann machen wir das kannst du gleich erwarten Kontraktpunkt bekommen, Girokonto machen. Und dann werden wir den Staat festlegen. Dies wird eine Art wiederkehrendes Muster für die nächsten Funktionen sein. Also komme ich hierher und erstelle eine Statusvariable namens do und setze dann du gleich U state. Also kann ich hierher kommen und einstellen, tun, und ich setze es auf den fälligen Betrag ein, den wir direkt darüber definiert haben. Also verwechseln Sie dies nicht mit der Statusvariablen tun. Und wir wollen das Get do nennen, wenn die Kontexte geladen werden. Also hol du. Und dann werden die Fälligkeitsstatusvariablen festgelegt . Wir möchten das also an unsere Anbieter weitergeben, damit wir es in unserem Dashboard verwenden können. Übergeben Sie es einfach und speichern Sie es, gehen Sie zu Ihrem Dashboard, nicht zu den aktuellen Summen des Dashboards. Und dann geh rein, mach es hier. Wir werden also aufgrund unseres Kontextes eingehen . Und dann bei der zweiten , bei der es 0,01 ist, wir einfach fällig weitergeben und speichern und sehen , ob uns das einen Betrag gibt, der durch uns einen großen Fehler gibt. Und es besagt, dass Objekte nicht als React-Kind gültig sind, was bedeutet, dass es eine große Zahl zurückgibt , die ein Objekt ist. Also müssen wir es tatsächlich analysieren, haben das vergessen. Anstatt also müssen wir Ether, Punkt-Utils, Punkt-Format-Ether setzen . Tu, und das sollte es reparieren. Das gibt uns unseren Dezimalbetrag. Und es ist schon da. Habe auf 0 geschaut, erneut auffrischen, 0, cool. Und das testen wir in einer Minute. Lass uns weitermachen und eine Fahrminuten-Setup machen. Was ist mit Fahrminutenfahrten? Wo ist das in unserem Vertrag? Wenn wir also zu unserem Vertrag zurückkehren, haben wir diese Funktion namens „Gesamtdauer erhalten“. Also rufen wir das an, es gibt 0 zurück, wenn sie ihr Fahrrad noch nicht eingecheckt haben oder es nicht ausgecheckt haben. Ich sagte, gibt die Zeit zurück, in der sie auf dem Fahrrad waren. Wenn sie also eine Start- und Endzeit haben, wird sie sie hier berechnen. Also müssen wir das nennen „Gesamtdauer bekommen“. Also nochmal kopiere ich das und füge es ein. Ich werde das eigentlich „Gesamtdauer bekommen“ nennen . Und wir werden diese wenn Aussage hinterlassen. Und wir werden hier genau das Gleiche machen. Wir werden sagen, dass const Gesamtdauer gleich erwartet Kontraktpunkt erhalten Gesamtdauer, was eine Funktion in unserem Vertrag ist, wie wir es gerade gesehen haben. Und dann geben Sie das Girokonto ein. Und dann werden wir den Staat festlegen. Also lass uns herkommen. Und genau darunter setzen Sie einfach const, duration, set die Dauer gleich use state. Und komm zurück und lass es uns einstellen. Stellen Sie die Dauer auf Gesamtdauer ein. Und das wird eigentlich eine Schnur sein. Wir wollen es auf eine Zahl werfen. Also lasst uns das aufheben. Und das möchten wir auch erhalten, wenn die Seite geladen wird, weil sie sich in einem Dashboard befindet. Also kommen wir dazu, Effect zu verwenden, um die Gesamtdauer in dieser Einstellung der Dauer zu erhalten. Lassen Sie uns also den Wert des Dauerstatus an ihren Anbieter übergeben. Und dann, genau wie wir es zuvor getan haben, lassen Sie uns auf die aktuellen Summen springen und sie hier hinzufügen, Dauer, um es einzubringen. Und dann hier unten unter Fahrminuten statt sieben werden wir die Dauer festlegen. Sparen Sie es. Aktualisieren Sie meine Seite und wir haben Ryan Minuten von 0. Stellen wir nun diesen Bike-Status ein. So wie ich es eingerichtet habe, war, dass es rot bleibt, bis du das Fahrrad aussiehst. Wenn das Bike aktiv ausgecheckt wird, wird es zu grün wechseln. Wie Hey, du bist bereit zu gehen, genieße dein Fahrrad. Sobald dein Fahrrad eingecheckt ist, ist dein Rücken rot. Rot bedeutet, wenn Ihr Fahrrad wieder eingecheckt ist, können Sie erst dann ein anderes überprüfen , wenn Sie Ihr Guthaben bezahlt haben. Jetzt möchten Sie vielleicht unterscheiden, wann sie das Guthaben bezahlen, wenn sie das Fahrrad erneut auschecken. Du kannst das machen, wenn du willst. Ich lasse es nur der Einfachheit halber rot. Um das zu tun, müssen wir hierher kommen und sehen, ja, wir setzen diese Hintergrundfarbe auf Rot. Was wir tun wollen, ist herauszufinden, ob sie aktiv sind oder nicht. Wenn sie aktiv sind, wollen wir es auf grün setzen, sonst lesen Sie. Also lass uns zurückgehen. Ich glaube, das haben wir schon in Luft. Wir haben Fehler. Mieter hinzufügen. Nein, wir haben nicht irgendwo hier. Holen Sie sich den Mieter hier ist es. Wir prüfen, ob der Mieter existiert, wenn dies der Fall ist, rufen wir den Mieter in bevölkern an , dass die Mieter die Variable C angeben, wo Mieter festlegen steht. Also sollten wir in der Lage sein, hierher zu kommen und einfach den Mieterbetrag zu übergeben. Also Mieter und das sollte uns daran erinnern, wenn wir einen Mieter hinzufügen, es gibt uns die Wallet-Adresse, FirstName, LastName kann aktives Guthaben mieten, all das gute Zeug. sollten wir also zur Verfügung haben . Es sollte also genauso einfach sein wie Informationen des Mieters zu übergeben, unsere aktuellen Summen zu erreichen und Mieter zu unseren Kontexten hinzuzufügen. Und dann statt Rot hier sagen wir Mieter dot active. Wenn das stimmt, wollen wir dies in grün ändern. Ansonsten rot. Sparen Sie es. Testen wir es aus. Wir haben also einen großen Fehler hier. Es besagt, dass Eigenschaften von undefined nicht gelesen werden können. Und was das normalerweise bedeutet, ist , dass es noch nicht besiedelt war. überprüft es also diese Statusvariable, bevor sie ausgefüllt wird. Was wir also tun können, ist auch einen Check-in für den Mieter durchzuführen, um sicherzustellen, dass Mieter ebenfalls verfügbar ist. Mieter und Mieter sind also aktiv in dann nur grün sonst gelesen. Wenn wir das also sparen, sollten wir gut sein. Der Aktualisierungs-Bike-Status ist rot. Wenn wir es uns jetzt ansehen, sollte dies grün werden. Als nächstes müssen wir dieses Formular zum Laufen bringen , damit wir den fälligen Betrag bezahlen können. Sobald wir das gemacht haben und unsere Fahrräder hinzufügen , testen wir, dass das alles funktioniert. Also lasst uns das eine nächste machen. Also zurück zu Blockchain-Kontexten. Und ich kopiere das noch einmal und füge es darunter ein. Und ich nenne das als Zahlung tätigen. Und wir geben einen Wert ein. Weil denken Sie daran, dass dies zahlbar ist. Wir werden damit einen Betrag schicken. Und werfen wir einen Blick auf die Funktion in unserem Vertrag. Irgendwo sollte es sein, wo wir unsere Zahlung leisten. Hier, leisten Sie die Zahlung. Also hier ist unsere Zahlungsfunktion. Denken Sie daran, dass es von unserem Guthaben abgezogen wird, also leistet es eine Zahlung an den Vertrag und subtrahiert diesen Betrag von unseren ausgeglichenen Sets, die er mieten kann, wieder auf true, da Sie jetzt wieder ein Fahrrad mieten können. Es wird aufgrund von 0 und Start und Ende wieder auf Nullen gesetzt. Es macht also irgendwie Ihre Zahlung und es erfrischt Sie wie am Anfang. Also kommen wir hierher und rufen einfach die Funktion „Zahlung vornehmen“ auf. Und in diesem Girokonto. Und wir brauchen das Girokonto nicht, weil es wieder nur läuft, wenn wir den Knopf drücken. Also werde ich irgendwie so machen, wie ich es hier oben getan habe. Ich kopiere so viel. Eigentlich kopiere ich einfach alles. Füge es ein. Und so B&B-Wert, das ist der Wert , den ich sende. Und dann rufe ich die Einzahlung an , weil wir Geld einzahlen , wir leisten eine Zahlung. Aber anstatt die Einzahlungsfunktion aufzurufen, rufen wir die Funktion „ Zahlung vornehmen“ auf. Wir geben unsere Wallet-Adresse und den Betrag, den wir senden, ein, wir warten, bis das erledigt ist. Dann müssen wir hier mehrere Dinge tun. Denken Sie also daran, dass wir in unserer Vertragsfunktion eine Reihe von Dingen tun. Wir subtrahieren von unserem Guthaben. Wir wechseln in all diesen beiden Nullen die Miete zurück auf „ true“. Also müssen wir ein paar Dinge auffrischen. Richtig, unter diesem werden wir einen Mieter von Weight Get nennen. Weil wir unseren Mieter auffrischen müssen. Sie haben jetzt neue Werte, die den Saldo mieten können. All das ist aufgefrischt. Also müssen wir den Mieter auffrischen. Wir müssen die Miete oder das Guthaben auffrischen. muss aktualisiert werden, da sich unser Guthaben ändern wird. Wir müssen die Dauer auffrischen da wir einen Aufstand von zehn Minuten hatten. Wir brauchen das, um auf 0 zurückzukehren, also müssen wir das aktualisieren. Warten Sie also, holen Sie sich die Gesamtdauer. Und dann müssen wir endlich den fälligen Betrag auffrischen. Warten Sie also, machen Sie es, denn das wird auch 0 sein. Und das läuft nur, wenn wir einen Knopf drücken. Also werden wir die Funktion an den Anbieter übergeben. Und dann gehen wir zum Gehaltsformular. Und bringen Sie unseren Kontext ein. Canst, Zahlung tätigen gleich verwenden Kontext. In unserem Kontext befinden sich die Blockchain-Kontexte. also erneut sicher , dass Sie beide dann auf unserem Gipfel in Luft importieren . Versuchen wir also zuerst unser Submit, um zu sehen, ob es funktioniert. Also zahle deine Beiträge 0.1 einreichen, und da ist es. Also wollen wir dies nochmal strukturieren, um nur die 0.1 zu erhalten. Um das zu tun, sagen wir const payment. Ich glaube, das benutzen wir hier unten. Ja, Zahlung D entspricht Werten und dann können wir anrufen, warten, bezahlen. Zahlung, Zahlung. Lass es mich retten und wir könnten es ausprobieren, aber wir haben keinen Mountain Dew. Lasst uns also auch auf unsere Fahrräder springen und diese Knöpfe funktionieren lassen. also im Blockchain-Kontext Lassen Sie uns also im Blockchain-Kontext zwei Funktionen hinzufügen. Man wird Checkout genannt, const, auschecken ist gleich einem Waschbecken. Und der andere wird als Check-in bezeichnet. Also schauen wir uns das Bike an. Wir werden wieder im Fahrrad einchecken. Und wir versuchen es zu fangen. Console.log der Fehler. Hier drin. Wir sagen, wenn das Girokonto diese Überprüfung durchführt, dann führen Sie diese Überprüfung durch. Wenn das stimmt, führe das nur aus. Also beginnen wir mit const Checkout gleich erwarten Kontraktpunkt. Und mal sehen, was wir haben. Also haben wir eine Kasse und wir haben einen Check-in. Und Sie werden an der Kasse feststellen, wir den Mieter wahrscheinlich aktualisieren möchten , da er neue Werte haben wird. Und beim Einchecken ist viel los. Wir ändern einige Mieterwerte, legen aber auch den fälligen Betrag fest. Wir berechnen also, wie viel fällig ist , und das werden wir festlegen. Wir müssen diese Werte aktualisieren. Also Verträge, Punkt, Check Out, Girokonto. Wir werden warten, bis die Transaktion abgeschlossen ist und das Punktgewicht auschecken. Und dann rufen wir den Mieter an, um das zu aktualisieren. Hier unten drin. Ich kopiere das tatsächlich und füge es ein. Hier. Wir sagen Einchecken, Vertragspunkt-Check in. Dann warten wir auf den Check-in. Dann rufen wir den Mieter an. Wir werden get aufrufen, um diesen Wert zu aktualisieren und die Gesamtdauer zu erhalten , da wir das auf 0 zurücksetzen müssen. In diesen sind wie die anderen Tasten, die Sie drücken. Also werden wir die eigentlichen Funktionen an unseren Anbieter weitergeben . Und ich brauche dieses Girokonto eigentlich nicht , weil es ein Knopfdruck ist, es wird beim Laden der Seite nicht passieren. Also lasst uns diese zurückbringen und speichern. Und ich gebe den Checkout weiter und checke bei meinem Anbieter ein. Und dann gehen wir zum Armaturenbrett Bike. Jetzt wird es Bike sein. Da sind wir los. Lasst uns also den Kontext in unsere Bike-Komponente bringen. Also konst, schau dir an, überprüfe n gleich, benutze Kontexte, Blockchain-Kontexte und bring deine Importe. Und ich werde es retten. Jetzt gibt es eine Sache, über die wir reden sollten. Eine Sache, die Sie mit Ihrem Vertrag machen können , ist, wenn Sie dieses Fahrrad auschecken, können Sie es den Namen in Ihrem Vertrag oder in Ihrem Bundesstaat oder ähnlichem speichern lassen. So könntest du hier oben auch den Fahrradtyp anzeigen , den du ausgecheckt hast. Ich wollte das nicht zu kompliziert machen und ich wollte dir ein paar Dinge überlassen , damit du kreativ sein und deine eigene App daraus machen kannst. Aber all diese Check-Ins und Check-Ins werden dasselbe tun. Wenn ich mir dieses Bike anschaue, ist es genauso wie das Fahrrad anzuschauen. Wir müssen nicht unterscheiden , welches Bike wir uns ansehen. Es wird also dasselbe sein und jede dieser Bike-Komponenten. Für den Checkout füge ich einen Klick hinzu. Gleich zum Auschecken. Und für diesen Button, die Schaltfläche „Einchecken“, füge ich einen Einchecken hinzu und rufe meine Check-in-Funktion auf . Und dann speichern wir das. Und ich denke, wir sind gut dafür. Wir können es tatsächlich ausprobieren. Aktualisieren Sie also meine Seite. Und ich werde versuchen, ein Fahrrad auszuchecken. Jetzt gibt es eine Menge Dinge, die hier passieren werden , die wir testen können. Also schaue ich mir zuerst dieses Bike an. In Ordnung. Und es wird mir eine sehr winzige Gasgebühr berechnet. B&b Preis. Mal sehen, wie viel das eigentlich ist. Es ist wie 27, Gas v ist 0,20 Dollar. Ich bin froh, dass wir BnB benutzen, obwohl es Zeugnis ist. Also lass mich zurück zu MetaMask. Lassen Sie es mich bestätigen. Was also hier passieren wird, ist, wenn ich es bestätige, sollte dieser Status grün werden. Und es sollte eine Reihe von Dingen festlegen , die wir in unserem Vertrag gesagt haben, wie, kann Miete falsch sein, Air Startzeit sollte dokumentiert werden, es sollte einen Zeitstempel dafür und alles geben dass, weißt du, der Vertrag genauso gut wie ich, weißt du, was passieren wird. Also kann ich auf Bestätigen klicken. Jetzt steht es noch aus. Sobald das Ausstehende erledigt ist, sollte dies grün werden, also pass darauf auf. Das ist erledigt. Und wir sind grün. Sieh dir das an. Oder Fahrrad ist ausgecheckt. Und was wir jetzt tun wollen, ist ungefähr sechs Minuten zu warten, etwas mehr als fünf Minuten, und dann checken wir es wieder ein und sehen, dass alles richtig passiert. Es ist also 1157 hier. Also komme ich um 1203 zurück und wir werden zu diesem Zeitpunkt wieder einchecken. Wir sollten Ride-Minuten von etwa sechs Minuten haben. Wir sollten eine Menge B & B haben. Denken Sie an 0,05 alle fünf Minuten. Und von dort aus sollten wir in der Lage sein zu bezahlen oder zu bezahlen, und dass 0 zu bezahlen oder zu bezahlen, und dass unser B&B-Guthaben die Differenz widerspiegelt. Wir sehen uns also in etwa fünf Minuten wieder. Okay, also ist es fast Zeit , mein Bike Backend zu überprüfen. Bevor ich das mache, überprüfe ich meine Statusvariablen, nur um zu sehen, dass sich die Dinge richtig geändert haben. Also geh zu Komponenten. Sie werden sehen, dass die Miete jetzt tatsächlich falsch ist , weil sie ausgecheckt ist, also hat das gut funktioniert. Und dann stimmt, aktiv ist wahr. Die haben großartig geklappt. Und alles funktioniert einwandfrei. Okay, also sind es ungefähr 78 Minuten her. Also was wir tun werden, ist das Fahrrad wieder einzuchecken. Wenn wir dies tun und diese Transaktion beendet ist, sollte ich meinen Fahrradstatus lesen lassen, um zu lesen , wie lange ich in meinem B & B auf dem Fahrrad war . auch besiedelt. Also lasst uns das versuchen. Also klicke ich auf „Einchecken“ und bestätige es in MetaMask. Und lasst uns diesen Status überprüfen. Das steht also noch aus. Wenn dies geschehen ist, sollten wir Werte auffüllen lassen. Okay, großartig. Der Bike-Status ging also wieder auf Rot. Ich war sieben Minuten draußen in meinem B & B ist 0,005, was stimmt. Wenn ich 12 Minuten wäre, hätte ich 0,01. Denken Sie daran, dass es alle fünf Minuten 0,005 ist. So großartig. Der letzte Test hier ist also, dass ich den fälligen Betrag bezahlen und ihn zurücksetzen und von meinem B&B-Guthaben abziehen lasse. Unser Staat ist momentan kann mieten ist immer noch falsch, weil ich meine Beiträge nicht bezahlt habe. Und aktiv ist falsch , weil ich nicht mehr auf dem Bike aktiv bin. Also lasst uns Mount machen 0,005 und versuchen wir es zu bezahlen. Also reichen Sie ein und wir leisten eine Zahlung von 0,005 und dann Gasgebühren. Also klicke auf Bestätigen und das wird ausstehen, aber sobald das erledigt ist, meine Reitmänner, sollte es bei 0 sein. Mein B & B sollte eine 0 sein und mein Guthaben sollte mit dem von mir gezahlten Betrag abgezogen werden. Es ist gerade durch Reimann gegangen, es ist 0. B&b tun ist nichts. Und B&B-Kredit ist so viel. 0,01 minus 0,05 ist also 0,095. Also habe ich immer noch etwas Kredit. Ich kann mir immer noch ein anderes Bike in unserer App anschauen , das wunderbar funktioniert. Im nächsten Video werden wir also ein wenig aufräumen und ein paar Sicherheitsfunktionen hinzufügen ein paar Sicherheitsfunktionen , die wir von Anfang an nicht hinzugefügt haben. Sobald das erledigt ist oder Apple fertig ist. Sie können Ihre gesamte Arbeit zeigen . Wir sehen uns im nächsten Video. 9. Optimierung von UI- und Sicherheitstests: In diesem Video werden wir unserer Anwendung den letzten Schliff geben . wir die Dinge abschließen, werden wir damit beginnen diese erforderlichen Nachrichten auf unserem Frontend anzuzeigen. Wenn Sie sich also daran erinnern, wir in unserem Smart Contract diese Aussagen erfordern, dass wir diese Nachricht ausspucken , wenn sie nicht wahr sind . Wir müssen sie im Frontend anzeigen. Daran werden wir also arbeiten. Danach werden wir einige Sicherheitsfunktionen implementieren, damit Mieter die Informationen anderer Mieter und auch einige Dinge der Eigentümer nicht stören können Informationen anderer Mieter und auch einige Dinge der Eigentümer nicht stören , die wirklich wichtig sind. Also zieh diese Lektion durch denn es wird eine Menge Spaß machen. Und wie immer, bevor wir damit anfangen, müssen wir ein paar Bugs beheben. Wir werden eine einfache im Voraus und eine weitere später im Video reparieren . Im ersten geht es so. Wenn Sie also Ihren Blockchain-Kontext öffnen, haben Sie dies möglicherweise bereits bemerkt. Wenn Sie Ihren Blockchain-Kontext öffnen und speichern, ändert sich dieses Dashboard in das Formular für Anzeigenmieter, was bedeutet, dass wir unseren Status irgendwie verlieren. Wenn Sie also in den Blockchain-Kontext gehen und ihn speichern, werden Sie sehen, hey, jetzt haben wir das Formular „Mieter hinzufügen“. Wenn Sie zu Ihrem Dashboard gehen und einfach eine console.log ausführen, Mieter vorhanden, das Problem wird angezeigt. Also spar dir das auf. Und ich werde die Seite aktualisieren. Und ich speichere meinen Blockchain-Kontext. Sobald Sie das tun, sehen Sie hier in der Konsole, dass Hot aktualisiert wird, was bedeutet, dass Vijay S Hot Reload passiert ist und dieser Wert nicht definiert ist. Du siehst direkt oben, dass es wahr ist. Aber sobald dieses Nachladen stattfindet, ist es undefiniert. Jetzt habe ich versucht, eine gute Lösung dafür zu finden, und ich bin überzeugt, dass es nur ein Byte-JS-Bug oder ein Problem mit Vijay S sein ein Byte-JS-Bug oder muss, von dem ich einfach nichts weiß, aber ich habe eine einfache Lösung für uns, eine, die uns überhaupt nicht sehr beeinflussen wird. Es hat mit einem Plugin zu tun, das Vijay S verwendet. Wenn Sie also in den Stammordner gehen und zu vite dot config dot js gehen. Es gibt dieses Plugin React Plugin. Also importieren wir es hier oben und verwenden es hier mit React. Jetzt müssen wir nur noch die schnellere Aktualisierung deaktivieren. Und Sie tun es, indem Sie dies ein Objekt des Schlüssels, schnelle Aktualisierung, Wert false schreiben . Also deaktivieren wir die schnelle Aktualisierung. Wenn wir das speichern und jetzt diese Seite aktualisieren, wird sie sowieso aktualisiert. Du solltest dieses Problem nicht mehr haben. Also gehe ich zum Blockchain-Kontext, zum Kontext und speichere ihn hier. Und ich speichere es auf meiner Seite, wird einfach aktualisiert, ohne den Status zu verlieren. Das ist also eine einfache Lösung. Fügen Sie das in Ihre Konfigurationsdatei hinzu und wir können weitermachen. Nun, nur ein Wort der Vorsicht, wenn Sie Änderungen an der Benutzeroberfläche vornehmen und sie sofort sehen möchten, müssen Sie das erneut aktivieren, aber wir sind derzeit mit Änderungen an der Benutzeroberfläche fertig. Sie müssen sich also keine Sorgen machen, sondern wollten es nur notieren. Schon wieder. Wenn Sie eine Lösung finden, lassen Sie es mich bitte wissen. Oder wenn ich in der Zwischenzeit einen finde, füge ich ihn unter dieses Video ein. Okay, also möchten wir zuerst, wie gesagt, diese Fehlermeldungen hinzufügen, wenn wir Fehler haben. Wenn wir also zu unserem Vertrag zurückkehren, erinnern Sie sich daran, dass wir diese Forderungsaussagen haben, die Dinge sagen, wie Sie dieses Mal nichts dazu haben, Sie haben nicht genug Geld, um zu decken Zahlung, solche Dinge. Wenn der Benutzer also versucht, etwas zu tun, was er nicht tun darf, sollte eine Fehlermeldung angezeigt werden. Wenn ich zum Beispiel versuche zu zahlen, könnte es tun, wenn ich nichts fällig habe. Also 0.1 und reiche es ein, ich bekomme diesen Fehler hier in der Konsole. Hier ist es dieses Objekt. Es heißt also Codenachricht, Datenstapel. All das gute Zeug. Wenn wir das also öffnen, werden Sie sehen, dass wir dieses Datenobjekt haben. Und wenn wir das öffnen, gibt es eine Nachricht, die besagt, dass die Ausführung rückgängig gemacht wurde. Sie haben derzeit nichts fällig. Das wollen wir in der Anzeige auf der Seite herausziehen. Um das zu tun, müssen wir nur diese spezifischen Werte ergreifen. Wenn ich also in meinen Blockchain-Kontexten eine Zahlung tätige , die wir gerade nennen , die wir gerade nennen. Anstelle des Fehlers console.log werden wir Fehlerpunktdaten sagen. Denken Sie daran, dass dies die Objekt-Punkt-Nachricht war. Also speichere dir das auf und lass es uns nochmal versuchen. Lassen Sie mich 0.1 aktualisieren und absenden, und ich sollte einfach die Nachricht hier sehen. Die Ausführung wurde zurückgesetzt. Sie haben derzeit nichts fällig. Jetzt müssen wir es nur noch auf der Seite anzeigen. Nun, eines meiner Lieblingspakete und React ist Toast Defy. Testify wird verwendet, um den Benutzer bei bestimmten Aktionen zu warnen. Und es gibt eine Million Möglichkeiten, wie es angezeigt werden kann. Es kann auf der Seite hineinrutschen. Es kann all das machen, aber wir werden es einfach halten. Wenn Sie also aussagen, reagieren Sie darauf, dass es ein NPM-Paket geben sollte , um auszusagen. Es ist sehr einfach einzurichten. Sie können hier alle verschiedenen Nachrichten sehen, die Sie verwenden können. Du kannst Spinner machen. Sie können Icons darauf setzen. Sie haben verschiedene Farben, viele Optionen. Um es zu installieren, hat man einfach ein Garn bekommen und reagiert auf Rechtfertigung oder NPM Installation. Stoppen Sie also Ihren Server, installieren Sie ihn und starten Sie dann Ihr Server-Backup. In dem, was wir tun werden, ist, dass wir es hier im selben Kontext anzeigen , die Blockchain-Kontexte. Normalerweise möchten Sie dafür einen neuen Kontext erstellen. Wie ein Toaster Phi Kontext. Richten Sie das ein und verwenden Sie dies nur, um bei Nachrichten und Fehlern zu warnen. Aber wenn ich damit anfange, werden wir eine weitere Stunde Video bekommen nur Fehlermeldungen einrichten. Also werden wir es hier ganz einfach machen. Aber wenn Sie in einem größeren Projekt waren und mehr Zeit in das Projekt investieren möchten, möchten Sie natürlich einen separaten Kontext verwenden. Wenn wir uns also unsere Dokumentation für React aussagen ansehen, klicke ich auf die Demo und die Dokumentation. Und du wirst hier sehen, wir schauen uns einfach den Positioniertoast an. Eigentlich gehen wir zum nächsten , denn das ist nicht sehr hilfreich. Aber was Sie hier tun müssen, ist, dass Sie diesen Toastcontainer auf der Seite platzieren müssen , auf der Sie ihn anzeigen möchten. Und dann kannst du die Toastfunktion aufrufen. kannst du hier also besser sehen. Also Toast Dot Erfolg, und dann hast du deine Benachrichtigung, was auch immer du sagen willst, und dann wählst du deine Position auf der Seite aus, um sie anzuzeigen. Sie können einen Toast anstoßen, um auf einen Fehler, einen Haftbefehl und Informationen oder eine Art benutzerdefinierten Toast zuzugreifen einen Haftbefehl und Informationen . Also fangen wir damit an, diesen Toastcontainer zu platzieren. Eigentlich ist das importiert. Wir werden dies auf die aktuelle Gesamtsummenseite setzen da wir die beiden Formulare dort haben. Derjenige, auf dem wir unser Konto gutschreiben, das, auf dem wir eine Zahlung leisten. Gehe also zu den aktuellen Summen. Dann möchten Sie oben einfach diese Importanweisung platzieren und den Toastcontainer importieren. Dann hole ich mir dieses Beispiel. Und ich scrolle nach unten und dann ganz unten. Hier ist also meine aktuelle Summenfunktion unten unter der Box, so dass ich keine Art von Styling dabei habe. Ich werde einfach setzen, dass der Zehen Container Auto Close auf acht Sekunden eingestellt ist. Ich ändere es zu, lass uns drei Sekunden lang 3 Tausend machen. Und dann haben wir mehrere Eltern hier. Also müssen wir ein leeres Tag setzen. Eine oben, eine unten. Mein Toastcontainer ist auf dieser Seite. Wenn es also aufgerufen wird, sollte es auf dieser Seite angezeigt werden. Jetzt gehe ich zurück zu den Blockchain-Kontexten und rufe es hier mit diesem Toast-Punktfehleraufruf auf. Also gehe ich zurück zum Positionierungs - und Toast-Punktfehler. Also nehme ich diese Konsolenpunkt-Log-Nachricht heraus und ersetze sie einfach durch diesen Toast-Punktfehler, Sie wieder auf dem Positionier-Toast-Teil dieser Seite finden . Dann füge ich für meine Fehlermeldung Fehlerpunktdaten, Punktmeldung ein. Und ich wollte oben rechts reinkommen . Also lasst uns das aufheben. Jetzt gibt es noch eine Sache, die du tun musst. Sie müssen das CSS importieren, sonst sieht es nicht richtig aus oder funktioniert sogar richtig. Also geh einfach mit der Installation zu beginnen. Und sie erwähnen es hier nicht bei der Installation, aber Sie werden sehen, dass es hier importiert wird. Also kopiere das. Und wir möchten das auf der Seite „Aktuelle Gesamtwerte“ importieren , da wir dort diesen Toastcontainer anzeigen. Also oben, bring das rein, rette es auf. Und lass uns das ausprobieren. Also werde ich die Seite aktualisieren nur weil ich das gerne mache. Jetzt gebe ich nur die Nummer eins ein und sende mich. Und mal sehen, ob wir eine Toastnachricht bekommen. Das tun wir nicht, weil Toast nicht definiert ist. Gehen wir also zu unserem Beispiel zurück und stellen sicher, dass wir Importtoast von Reaktoren zum Feuer nehmen. Zurück im Air-Blockchain-Kontext, setze das an die Spitze. Toast importieren. Wir können Toastbehälter entfernen, weil wir das hier nicht verwenden. Wir benutzen nur Zehen, weil wir Toastfehler nennen. Also speichere dir das auf und lass es uns nochmal versuchen. Aktualisieren Sie also. Okay, und ich werde die Nummer eins setzen und einreichen, und du solltest oben rechts etwas sehen. Da ist es. Die Ausführung wurde zurückgesetzt. Sie haben derzeit nichts fällig. Es sieht aus, als ob ich für eine Sekunde dort aufgehängt bin, aber es soll in drei Sekunden verschwinden. Aber das ist großartig. Also kommt jemand herein und gibt es ein, wird ihn wissen lassen , dass du mit dieser Zeit nichts zu tun hast. Fügen wir eins zu unserem Kreditformular hinzu. Also hol du wirst das Gleiche dort hinlegen. Sie können diese nach Belieben anpassen. Es gibt eine Million Möglichkeiten, dies zu tun. Geh dazu. Wo ist es bei Reaktoren trotzen Demo. Es gibt wie alle möglichen Dinge, die Sie sich mit dem Fehler der Info zum Erfolg ansehen können. Aber ja, du kannst auswählen , welches du sehen möchtest. Und dann klicke auf Toast anzeigen und es wird dir zeigen, wie es aussieht. Verschiedene Themen. Hier ist das dunkle Thema und das Farbthema. Ziemlich cool, wenn Sie es verwenden, wenn Sie Versprechen verwenden, können Sie sagen, dass Versprechen ausstehend sind und dann Versprechen gelöst werden. Jede Menge tolles Zeug. Also hole ich mir das und füge es dem Gutschriftenformular hinzu. Also die Anzahlung. Und das werde ich speichern und das wird eigentlich nicht fehlschlagen. Ich weiß nicht, ob wir etwas für den Kuchen haben . Wir haben nichts für die Einzahlung. Aber lasst uns etwas anderes finden. Machen Sie die Zahlung, holen Sie sich den Mieter, checken Sie ein, lassen Sie uns ein- und auschecken, da beide Kontoauszüge benötigen. Lass uns zurückgehen. Also werde ich das von der Einzahlung entfernen. Es geht zum Ein- und Auschecken und fügt es dort hinzu. Großartig. Wenn ich also versuche, ein Fahrrad einzuchecken, das ich nicht habe, bekomme ich einen Fehler. Lassen Sie mich das bestätigen. Checken Sie ein. Bitte schau dir zuerst ein Fahrrad an. Ja, mal sehen, ob wir da was kriegen. Also werde ich mich entscheiden , dass ich mich auf meine Gewohnheit erfrischen und einchecken gehe. Und da ist es. Bitte schau dir zuerst ein Fahrrad an. Großartig. Wir haben also Nachrichten und können das gerne optimieren , egal wie Sie es auf eine andere Seite stellen möchten, verschiedene Farben hinzufügen, verschiedene Farben hinzufügen ein dunkles Thema machen, was auch immer. Also denke ich, dass Abdeckungen Luft Aussagen erfordern. Wir haben Kasse, wir müssen einchecken erwerben verlangen, wir müssen die Zahlung leisten. Und das war's. Das ist also reagieren, um zu rechtfertigen, hinzugefügt haben. Als Nächstes möchten wir Air Smart Contract einige Sicherheitsfunktionen hinzufügen . Theoretisch, wenn ich öffentliche Wallet-Adresse eines anderen und diese in einige dieser Funktionen einfügen kann. Dann kann ich mir ein Fahrrad nach einer anderen Person ansehen, Geld auf das Konto eines anderen. Ich kann Dinge mit dem Konto anderer Leute machen. Es gibt keinen Scheck zu sagen, hey, du kannst nur mit deiner Adresse interagieren. Und ich glaube im Allgemeinen nichts im Frontend, das Sie tun können, als ob ich nicht glaube, dass ich hierher kommen und auf Kasse klicken und die Wallet-Adresse eines anderen hinzufügen kann . Aber trotzdem willst du diese Schecks dort stellen. Und ich denke, es ist gut, es durchzugehen, nur damit du siehst , dass wenn du zum Fahrradkettenvertrag gehst, lass mich dir ein Beispiel geben. Wenn ich zur Kasse gehe und die Wallet-Adresse eines anderen kenne, kann ich seine Adresse eintragen und ein Fahrrad auschecken und dann kann ich es für eine Woche laufen lassen und es dann wieder einchecken. Und dann hatten sie diese riesige Ausgewogenheit, hatten sie keine Rolle beim Auflaufen? Wir möchten also nur einen Scheck stellen, der besagt, dass Sie diese Aktionen nur für Ihr spezielles Konto ausführen können . Und es ist wirklich einfach zu machen. Wir fügen einfach einen Modifikator ein. Direkt unter Mieter hinzufügen sage ich den Modifikator. Whoops. Ich sage, dass Modifier Mieter ist. Und dann gebe ich eine Adresse an der Adresse ein. Und dann setzen Sie diese Klammern ein und Sie sagen Message Dot Sender gleich Wallet-Adresse darin ist. Das stimmt nicht. Sie werden sagen, dass Sie Ihr Konto nur verwalten können. Dann haben Sie genau darunter diesen Unterstrich Semikolon. Und was das bedeutet, ist mit dem Rest der Funktion fortzufahren. Wie das funktioniert, ist hier unten. Für diese Checkout-Funktion würden Sie gleich hier den Mieter hinzufügen. Dies ist ein Modifikator und Sie würden die Wire an Adresse übergeben. Dies ist eine Möglichkeit , eine saubere Möglichkeit eine wiederholbare require statement zwei Funktionen hinzuzufügen. Wenn diese Funktion ausgeführt wird, wird zuerst überprüft, ob dies Mieter ist, sie wird diese Wallet-Adresse übergeben und es wird sagen, der Nachrichtenabsender, der Person, die diesen Anruf tätigt, stimmt mit der Wallet-Adresse überein, was bedeutet, dass sie nur ihr eigenes Konto ändern können. Wenn Sie also einen Modifikator erstellen, befestigen Sie ihn einfach an die Funktion. Und ich zeige dir in einer Minute, wie das funktioniert , wenn wir es in Remix werfen. Aber wir müssen das zu allem hinzufügen , was wir auch eine Wallet-Adresse hinzufügen. Also stelle ich es beim Einchecken hier hin. Du kannst nur ein Fahrrad mit deiner Adresse einchecken. Miete oder die Zeitspanne von niemand anderem ist intern. müssen wir uns keine Sorgen machen. Holen Sie sich die Gesamtdauer. Sie möchten nur Ihre eigene Dauer erhalten. Und da dieser etwas zurückgibt, werden wir das direkt hinter die Öffentlichkeit stellen. Und dann gibt dieser auch etwas zurück und es ist öffentlich. Aber das ist der Auftragssaldo. Wir wollen nur, dass der Besitzer dies tut und wir werden uns als nächstes damit befassen. Aber holen Sie sich das Guthaben der Mieter, Sie können nur Ihr eigenes Guthaben erhalten. Stellen Sie das nach dem öffentlichen gesetzten fälligen Betrag ein. Das ist intern, kein Problem. Rufen Sie es außerhalb des Vertrags an, können Sie ein Fahrrad mieten, dort ablegen, hinterlegen. Sie können nur über Ihre eigene Adresse einzahlen, obwohl die Leute möchten, dass Sie auf ihre einzahlen. Zahlung leisten. Tack das am Ende. Leg es da hin. Holen Sie sich den Mieter. Sie können nur Ihre eigenen Informationen erhalten. Und der Mieter existiert, lege es auch dort hin. All dies tut also wieder, anstatt wiederholt eine require -Anweisung in jede einzelne von diesen einzufügen , setzen wir diesen Modifikator nur hier in diese Funktionsanweisung ein vor den geschweiften Klammern wir nur diesen Modifikator hinzu. Sie ändern die Funktion so , dass sie diesen Anforderungen entspricht. Okay, das ist also der Mieter Modifikator. Jetzt haben wir noch zwei Dinge und wir sind alle fertig. Zuerst müssen wir einen Bug beheben. Zweitens müssen wir über den Besitzer sprechen. Der Besitzer sollte sehen können, wie viel Geld tatsächlich ihm oder ihr ist. Und sie sollten in der Lage sein, Gewinne zurückzuziehen, die sie aus diesen Transaktionen erzielt haben. Also lasst uns zuerst den Bug beheben. Jetzt erinnern Sie sich, dass wir über die Logistik hinter dem Smart Contract gesprochen haben . Wenn jemand Geld einzahlt, geht es an den Smart Contract, aber er schreibt seinem Konto gutgeschrieben. Wenn also jemand 10 Dollar reinlegt, die einzige Person, die Geld investiert, hat er 10 Dollar eingebracht. Der Smart Contract enthält 10 US-Dollar, aber alle zehn davon werden ihrem Konto gutgeschrieben. Jetzt geben sie 5 Dollar für ein Fahrrad aus und leisten eine Zahlung, dann gibt es immer noch 10 Dollar für den Vertrag, aber nur fünf davon werden ihnen gutgeschrieben. Nun, wir haben einen Fehler bei der Zahlung gemacht. Wenn wir eine Zahlung leisten, subtrahieren wir diesen Betrag nur vom Guthaben. Wir schicken eigentlich kein Geld für den Vertrag. Wir subtrahieren es nur vom Guthaben in dem Geld , das übrig bleibt, ist das Geld des Besitzers. Wir können also hier nicht zahlbar sein und wir können den Message-Punktwert nicht verwenden. Tatsächlich senden wir tatsächlich in den Blockchain-Kontexten, wenn wir eine Zahlung leisten, Geld, diesen BNB-Wert. Das ist also ein Fehler. Das sollten wir nicht tun. Wir sollten einfach vom Kredit subtrahieren. Im Smart Contract müssen wir ein paar Optimierungen vornehmen. Nehmen Sie zunächst die Zahlung ab, da es keine zahlbare Funktion mehr gibt. Zweitens, Lass uns eine Sekunde setzen, Lass uns ein U und einen Betrag setzen. Also senden wir einen Betrag. Wenn wir eine Zahlung leisten, müssen wir einen Betrag senden , der tatsächlich von unserem Guthaben abgezogen wird. Wir haben also einen Betrag hier. Und dann ändern wir diesen Nachrichtenpunktwert Betrag, weil wir kein Geld senden, sondern nur von unserem Guthaben abziehen. Und das sollte alles sein. Wenn wir also Zahlung leisten, werden wir dies in einer Minute testen. Wir senden einen Betrag und dieser Betrag wird von unserem Guthaben abgezogen. Da wir dann den zahlbaren Faktor entfernt haben, indem einen uint8-Betragsparameter hinzugefügt haben, müssen wir unsere Blockchain-Kontextfunktion hier aktualisieren und Zahlungen leisten. Wir geben dieses Wertobjekt weiter , so gehen Sie mit einer zahlbaren Funktion um. So geben wir einen Betrag an eine zahlbare Funktion weiter. Der einzige Unterschied, weil wir den Betrag jetzt als uint8 und nicht als den zu zahlenden Betrag einbringen , müssen wir dieses Objekt nur durch den B&B-Wert als zweiten Parameter oder das zweite Argument ersetzen . Stellen Sie also sicher, dass Sie dies im Blockchain-Kontext aktualisieren und dann wieder zu Ihrem Vertrag wechseln. Jetzt steht das Segue perfekt in den Besitzer. Der Besitzer, wenn jemand 10 Dollar hat und 5 Dollar auf seinem Konto zahlt , hat er 5 Dollar übrig, die in den anderen fünf tatsächlich dem Eigentümer gehören. Wir müssen also dem Vertragsinhaber, der im Grunde das Fahrradgeschäft betreiben wird, erlauben , sein Guthaben zu überprüfen. Wie hoch sind ihre Gewinne? Wie viel von dem ganzen Geld im Smart Contract, wie viel davon wagt es, basierend auf Leuten, die Rechnungen betreiben und Zahlungen leisten und ihr Konto neu erstellen und all das. Es gibt also ein paar Möglichkeiten, das zu tun. Ich habe darüber nachgedacht. Also verwenden wir Mappings. Sie können ein Mapping nicht durchlaufen. Ich habe vielleicht darüber nachgedacht , wenn wir einen Mieter hinzufügen, um ein Array zu erstellen und nur ein Array von Adressen zu haben , die wir durchlaufen können. Aber wir wollen wirklich keine Sachen durchlaufen weil wir am Ende Hunderte, vielleicht Tausende von Mietern haben , und das werden monströse Gasgebühren sein. Wenn wir 11000 Mieter durchlaufen müssen, denke ich, dass der beste Weg, dies zu beheben darin besteht, eine neue Variable namens uint8, Eigentümersaldo, zu erstellen . Also haben wir das Eignerguthaben. Und wenn Sie darüber nachdenken, wird das einzige Zeitgeld in das Guthaben des Eigentümers fließen , wenn Menschen Zahlungen leisten. Auch wenn ich 10 Dollar für den Smart Contract habe und alle zehn davon mir gehören und ich eine Zahlung von 5 US-Dollar tätige, sinkt mein Guthaben auf fünf und die anderen fünf gehören dem Eigentümer. Das ist also wirklich das einzige Mal, dass wir das Besitzer-Guthaben erweitern müssen. Hier unten, wo wir Zahlungen leisten, werden wir nur noch eine Sache hinzufügen . Das wird es sein. Eignersaldo plus entspricht dem Betrag. Das wird also diesem Besitzerguthaben gutgeschrieben . Und dann Backup hier, wo wir das Gleichgewicht haben, wollen wir, dass dies nur vom Eigentümer angerufen wird. Erstellen wir also einen anderen Modifikator, Modifikator, nur Eigentümer. Und wir haben dort keine Parameter. Und wir können verlangen, dass Message Dot Sender gleich Eigentümer ist. Weil das eine Wallet-Adresse ist. Und Sie haben keinen Zugriff darauf. Und dann machen wir unseren Unterstrich Semikolon , um den Rest der Funktion auszuführen. Und wir verwenden nur Besitzer auf Luftbilanz von hier beim Eigentümer. Wenn wir zwei weitere besitzerbezogene Funktionen hinzufügen möchten, eine, um seine ausgeglichene oder ihre Balance-Funktion zu erhalten, erhalten Sie das Besitzerguthaben. Und wir werden die Öffentlichkeit sehen und es uns nur zum Eigentümer machen und einen uint8 zurückgeben. Und hier werden wir nur das Guthaben des Besitzers zurückgeben. Und dann wollen wir noch eine Funktion für den Eigentümer ausführen, um das Geld abzuheben. Jetzt könnten Sie so sein, Mann, das ist riskant, denn der Besitzer kann einfach jedermanns Geld rausreißen und damit rennen. Aber das stimmt nicht, denn das Guthaben des Eigentümers ist nur das Geld auf dem Konto, das den Personen nicht gutgeschrieben wird. Also lasst uns funktionieren. Auszahlung, Kontostand des Besitzers. Das wird zahlbar und öffentlich sein. Und wir werden sagen, Eigentümer Dot Transfer, Besitzerguthaben. Jetzt sehen Sie, dass wir diesen Fehler hier haben. Und es heißt, Senden und Überweisen sind nur für Objekte des Typs Adresse verfügbar , die nicht für Adresse zu zahlen sind. Jetzt können wir das beheben, indem wir einfach diesen Eigentümer S zahlbar machen. Schließlich müssen wir das Besitzerguthaben wieder auf 0 setzen , da wir das Besitzerguthaben übertragen, das oben eingerichtet ist. Du bist Besitzer-Guthaben gegangen. Wir überweisen diesen Betrag auf unsere Wallet. Jetzt müssen wir das auf 0 zurücksetzen. Der Kontostand des Besitzers ist also gleich 0. Und damit denke ich, dass wir fertig sind. Wählen Sie also das Ganze aus und kopieren Sie es und wir fügen es in Remix ein, damit wir es testen können. Ich füge es hier ein und kompiliere es. Und dann mach das größer. Okay, also lasst uns den Vertrag bereitstellen. Und ich werde es tun, ich werde es mit dem ersten Konto bereitstellen , das der Besitzer sein wird. Klicken Sie also auf Deploy. Dann fügen wir einen Mieter hinzu. Also wähle ich die zweite Person aus. Kopieren Sie es und legen Sie es in diese Wallet-Adresse. Willst du den Travis Test machen? Kann mieten ist wahr. Aktivisten falsch. Nullen, Nullen, Nullen 0. Also klicken wir auf Mieter hinzufügen. Und ich schaue mir ein Fahrrad für den Mieter an. Bike ist ausgecheckt. Und jetzt gehe ich zum dritten Konto. Es wird also der zweite Mieter sein, der das kopiert. Füge es hier ein. Und ich lege etwas wie Tracy ein. Und ich schaue mir ein Fahrrad an. Nun, ich muss sie zuerst hinzufügen. Stellen Sie also sicher, dass Sie die richtige Adresse für diese dritte Person haben , und fügen Sie den Mieter hinzu. Und dann schaue ich mir ein Fahrrad für den Mieter an. Großartig. Also haben wir Zeitstempel, die es hier in einer Minute überprüfen können. Aber lass uns weitermachen, solange wir hier sind und etwas Geld einzahlen. Also wähle ich einen Äther und wähle den zweiten Mieter. Und sie werden einen Äther auf den Smart Contract einzahlen . also genau hier, wo Einzahlung steht, sicher, dass dies ein Äther ist, und klicken Sie dann auf Einzahlen. Großartig. Also haben sie einen Äther deponiert. Wenn ich den Mieter hier überprüfe, wirst du sehen, dass er eine Startzeit hat, also haben die Fahrräder ausgecheckt und sie haben ein Guthaben. Was passiert, wenn ich versuche, hier zum dritten Mieter zu wechseln . Und zahlen Sie mit der Adresse des ersten Mieters ein, ich sollte einen Fehler bekommen. Klicken Sie also auf Einzahlen. Los geht's. Sie können Ihr Konto nur verwalten. Das ist also der Mieter Modifikator funktioniert. Das ist großartig. Und das ist der Anwendungsfall. Wenn ich also Geld einzahle, mache ich es aber aus einer anderen Geldbörse als meinem eigenen auf das Konto eines anderen. Das sollte nicht erlaubt sein. Das funktioniert. Wechseln wir also tatsächlich zur richtigen Person. Lasst uns also tatsächlich die Adresse dieser Person greifen und auch einen Äther einzahlen. Also klicke ich auf „Einzahlen“. Und ich habe die Adresse nicht geändert, also stellen Sie sicher, dass Sie die Adresse ändern. Klicken Sie also auf Einzahlen. Okay. Also müssen wir Mieter mit jeweils zwei Fahrrädern ausgecheckt haben. Mieter hat Geld eingezahlt. In ein paar Minuten komme ich zurück und wir checken das Fahrrad wieder ein und wir werden die Dinge erledigen. Okay, bevor wir dieses Backend überprüfen, wechseln wir tatsächlich zum Besitzer. Und eigentlich jetzt, bevor wir wieder einchecken, checken Sie die Bytes wieder ein, versuchen wir, den Restbetrag des Vertrags mit einem der Mieter zu bekommen . Klicken Sie also auf Saldo von und Sie erhalten einen Fehler. Sie dürfen nicht darauf zugreifen. Erhalte das Guthaben des Besitzers Sie dürfen nicht darauf zugreifen. Wechseln wir nun zum Besitzer und sehen, was das ist. Wenn wir das Guthaben bekommen, haben wir einen Äther, von dem ich dachte, ich hätte einen anderen hinterlegt. Schauen wir uns unsere Mieter an und schauen uns an. Der erste Mieter hat gewonnen. Der zweite Mieter hat keine, daher darf ich keine Einzahlung für den anderen Enter geklickt haben. Lassen Sie mich das also ganz schnell machen. Oder vielleicht habe ich nichts hinterlegt und vielleicht habe ich das 1 Achtel nicht ausgewählt. Lassen Sie es uns also in den anderen Mieter legen, der in dB endet. Stellen Sie sicher, dass ich diesen Mieter wähle. Und dann setze diesen Äther auf eins und klicke auf „Einzahlen“. Ein Alpha-Wechsel zurück zum Besitzer. Ich kann überprüfen, ob das Guthaben von Eve ist. Lassen Sie mich das also tatsächlich hier rüber stellen, um den Überblick zu behalten. Der Vertrag muss abreisen. Das Guthaben des Besitzers ist 0. Der Besitzer hat 0. Miete oder einer hat, hat, hat einen Äther in Orange sind zwei, hat auch einen Äther. Okay, da sind wir also und wir werden das testen. Lasst uns diese Fahrräder wieder einchecken. Also wähle ich diesen ersten Render aus. Ich werde sie wieder einchecken. Checken Sie ein. Und dieser Mieter hat jetzt einen Mountain Dew. Dann überprüfe ich das andere Rendern ein. Check sie ein. Und dann sollten sie den gleichen Betrag haben. Tun Sie großartig. In einem GAN oder einem Gleichgewicht. Lassen Sie mich wieder zum Besitzer zurückkehren. Das Guthaben sollte gleich sein und das Guthaben des Eigentümers sollte immer noch 0 betragen. Mal sehen, was passiert , wenn wir eine Zahlung leisten. Wir leisten eine Zahlung, der Smart Contract Saldo sollte sich nicht ändern. Es sollte einfach die Hände auf das Guthaben des Besitzers tauschen. Also dieser Mieter hier, Miete oder zwei Os, so viel fünf bis so viele Nullen. Also lassen Sie uns das kopieren und diese Zahlung leisten. Also hole ich mir diesen Betrag. Sie haben fünf was auch immer, tun Sie wie viele Nullen das auch ist, wir müssen nicht hierher kommen und diesen Betrag hier oben hinzufügen . Denn jetzt haben wir in der Funktion „Zahlung machen “ als zweites Argument akzeptiert. Also werde ich das angeben und dann war das erste Argument ihre Wallet-Adresse. Also lasst uns weitermachen und die Zahlung leisten. Machen Sie also die Zahlung und ich kann nur mein Konto verwalten. Lassen Sie mich also zum richtigen Konto wechseln. Los geht's. Ich mache die Zahlung weiter . Und du siehst jetzt als wenn ich auf Mieter klicke, haben sie nichts zu tun. Aber sie hatten diese fünf bis so viele Nullen von ihrem Guthaben abgezogen. Nun dieser Betrag, dass fünf, wie viele aber jetzt Teil des Guthabens des Eigentümers sein sollten. Also lass mich zurück zum Besitzer wechseln. Lassen Sie mich diese Änderungen hier vornehmen. Also ist das Guthaben jetzt zu vermieten oder eins so viel 995. Sie hatten fünf, was auch immer davon abgezogen wurde. Und wenn ich jetzt zum Besitzer wechsle, sollte ich diesen Betrag in meinem Besitz haben. Also wechselte ich zum Besitzer. Ich klicke auf Balance von und es ist dasselbe, nichts hat sich geändert. Das haben wir behoben, denn bevor wir das Guthaben erhöht und von Eric Count abgezogen haben, was falsch ist. Das Gleichgewicht von ist also immer noch gleich. Holen Sie sich das Guthaben des Besitzers , Klicken wir darauf und es gibt diesen Betrag. Jetzt hat der Besitzer so viel. Und wenn Sie so viel mit Miete oder eins hinzufügen, kommen wir zu dieser zu vielen Nullen zurück, also wissen wir, dass es funktioniert, alles funktioniert gut. Und ich glaube, das war's. Wir testen, dass es Mieter ist. Wir haben nur Eigentümer und EHR Verträge getestet, die einwandfrei funktionieren. Jetzt müssen wir nur noch tun, da es sich um einen intelligenten Vertrag handelt, wir ihn tatsächlich neu bereitstellen müssen. Also lasst uns das tun, um einen neuen Vertrag zu bekommen. Das ist ganz einfach. Gehen Sie einfach zu Ihrer Anwendung zurück, stoppen Sie Ihren Server gehen Sie aus Ihrem Client-Ordner in Ihren Vertragsordner. Bevor wir erneut bereitstellen, müssen wir diesen neuen Vertrag tatsächlich zusammenstellen. Und tatsächlich, lassen Sie es mich von hier kopieren , nur um sicherzustellen, dass ich die neuesten Änderungen habe. Kopieren Sie das also in meinen Vertrag, speichern Sie es und wir müssen es neu kompilieren, diesen Artefaktordner mit neuen Bytecode ABIs aktualisieren , all das gute Zeug. Also mach einfach NP x, Hardhat, kompilieren. Awesome hat eine Soliditätsdatei erfolgreich kompiliert. Gehe nun zu deinem Artefakt-Ordner, verträge von Chain Dots Soul und wähle Bike Chain Dot Json. Das erste, was wir tun wollen, ist, diesen gesamten ABI erneut zu holen . Aus Klammer zwei Klammer kopieren Sie diese und fügen Sie es in unseren Config Dot Json in unseren Client-Ordner ein. Schnapp dir das alles und füge das ein. Dann müssen wir die Vertragsadresse aktualisieren. Also müssen wir es zuerst bereitstellen. Das ist also NP x Hardhat Run und dann Slash Slash Sample script.js. Sie dann für Ihr Netzwerk das Testnetz aus, Wählen Sie dann für Ihr Netzwerk das Testnetz aus, das erneut bereitgestellt werden soll. Klicken Sie also auf Enter. Wenn wir das tun, haben wir einen brandneuen Vertrag. In einer brandneuen Anwendung. Grundsätzlich. Dort ist es eine Fahrradkette, die an diese Adresse eingesetzt wird. Kopieren Sie das also und fügen Sie es in Ihre Vertragsanschrift ein. Spar es auf und du gehst gut. Also cd dot dot cd client und dann Yarn führen dev aus und wir sollten eine neue Anwendung haben. Ich gehe zu localhost 3 tausend und ich werde meine Wallet tatsächlich davon trennen, um einen Neuanfang zu bekommen, dieses Konto zu trennen und die Seite zu aktualisieren. Wähle mein Fahrrad und es heißt: Willkommen, bitte gib deinen Vor- und Nachnamen ein. Also lass mich zuerst mein Wallet verbinden. Verbinde dich. In Ordnung. Geben Sie meinen Namen ein, um sich als Mieter anzumelden. Travis-Test. Absenden. Stellen Sie das bereit. Großartig. Lassen Sie uns dem Konto das 0.1 B & B . 0,1 nur für Kicks. Versuchen wir, ein Fahrrad einzuchecken, das wir nie ausgecheckt haben, und wir bekommen diese Warnung hier oben. Bitte schau dir zuerst ein Fahrrad an. Das funktioniert immer noch. Jetzt schauen wir uns ein Fahrrad an und bestätigen es. Und sobald das erledigt ist, sollten wir hier grün werden weil ihre Fahrräder ausgecheckt sind. Immer noch ausstehend. Da ist es. Wir sind grün. Es sieht also so aus, als würde unsere App gut funktionieren. Wir haben unser Dashboard in Ordnung. Wir haben jetzt Schecks, damit Menschen nur ihre eigenen Konten ändern können . Und wir haben Nachrichten, die Fehler anzeigen , die wir von Requid-Anweisungen erhalten. Und das ist alles, was ich für dich habe. Ich hoffe, Ihnen hat dieser Kurs sehr gut gefallen. Wenn Sie nach weiteren Dingen suchen, die Sie hier tun können, ist es eine Sache, die Spaß macht, hier einen Navigationselement zu platzieren, wie einen Menüpunkt mit der Aufschrift admin , der erscheint, wenn sich der Besitzer anmeldet. Als ob ich darüber nachgedacht habe, aber ich möchte den Kurs nicht am Laufen halten und laufen lassen. Du hast schon einen langen Weg zurückgelegt. Aber wenn wir sagen, seit ich der Eigentümer bin, setze ich diese Vertragsadresse ein, ich bin der Eigentümer. Und wir haben bereits die Funktionen einen intelligenten Vertrag. Sie können also eine Funktion namens is owner hinzufügen oder hinzufügen möchten. Und dann kannst du prüfen, ob diese Person der Besitzer ist. Wenn ja, legen Sie hier einen Admin-Menüpunkt ein und wenn Sie darauf klicken, gibt es zwei Formulare. Eine, in der Sie Ihr Guthaben anklicken und einchecken können, in dem Sie das Guthaben abheben können und Sie sollten zu 100 Prozent wissen , wie das geht, weil wir es hier gemacht haben und es hier gemacht haben. Und in dem Smart Contract , der bereits vorhanden ist, haben wir die Funktion bereits aufgebaut. Wir aktualisieren den Vertrag einfach und ihn erneut bereitgestellt, also ist er da. Das ist also meine Herausforderung für dich. Es wird sehr viel Spaß machen, weiterzuverfolgen. Aber an dieser Stelle haben wir eine voll funktionsfähige App. Wir haben viel Arbeit geleistet. Du solltest dir selbst gratulieren. Zögern Sie nicht, dies zu optimieren , um es sauberer zu machen. Fügen Sie ein paar weitere Funktionen hinzu, ein besseres CSS, was auch immer Sie möchten, schieben Sie es an GitHub und zeigen Sie es der Welt. Schon wieder. Danke, dass du diesen Kurs abgeholt hast und mit mir mitverfolgt hast, als ich dieses Ding zusammengestellt habe. Wenn es Ihnen gefallen hat, sollten Sie erwägen, eine Bewertung zu hinterlassen oder mir eine Nachricht mir mitzuteilen, ob es Ihnen gefallen hat oder wenn Sie etwas haben, Sie möchten, dass es in Zukunft besser gemacht wird. Ich würde es gerne hören. Also nochmal, danke, dass du diesen Kurs mit mir durchgemacht hast. Jetzt rede später mit dir. 10. Owner: Also hier ist ein Bonusprojekt für dich. Was wir tun werden, ist ein Dashboard für den Besitzer zu erstellen. Der Eigentümer könnte den Vertragssaldo, seinen Saldo und den Eignersaldo einsehen seinen Saldo und den Eignersaldo und könnte das Eignerguthaben abheben. Es sieht also so aus. Ich bin eingeloggt als nicht der Besitzer. Und wenn ich zum Dash Admin gehe, bekomme ich eine Seite , auf der der Zugriff verweigert steht. Was Sie also tun möchten, ist, dass Sie eine Route namens slash admin erstellen möchten. Und wenn Sie nicht der Eigentümer sind, sehen Sie nur den Zugriff verweigert. Wenn Sie nun der Besitzer sind, lassen Sie mich das trennen. Und ich verbinde das Besitzerkonto. Jetzt sollten Sie ein Dashboard sehen. Diese Seite ist also genau wie das Dashboard, das wir hier haben. Es gibt einen Titel, es gibt ein paar Statistikkarten, und dann gibt es ein Formular. Also ist es das Gleiche hier. Wenn ich also zurück zum Admin gehe, habe ich einen Titel, er hat einige Statistikkarten und dann habe ich ein Formular ohne Textfelder ist nur eine Schaltfläche. Und was wir hier tun werden, ist, dass wir das Eignerguthaben haben und den vollen Vertragssaldo haben. Und wenn wir uns abheben, ziehen Sie dieses Besitzerguthaben in unsere Brieftasche ab. Und da der Eignersaldo Teil des gesamten Vertragssaldos ist , sollten wir diese Änderung auf 0,18 sehen. Probieren wir das also mal aus. Es wird also verarbeitet. Okay, also habe ich mein 0,01 B & B zurückgezogen , in meinem Vertragssaldo beträgt jetzt 0,18. Das ist also deine Herausforderung. Wenn Sie ein bisschen von dem Projekt ausgebrannt sind, haben Sie hart daran gearbeitet und Sie sind fertig und möchten sich nicht einmal damit befassen, machen Sie sich darüber keine Sorgen. Es ist Bonus. Aber ich denke, es ist wichtig, wenn du kannst, um es zu tun, weil einer, ein Eigentümer bezahlt werden muss, oder? Er baut Einnahmen aus diesen Fahrradverleih auf. Er muss dafür bezahlt werden können. Zweitens ist dies eine großartige Gelegenheit für Sie, alles, was Sie in diesem Kurs gelernt haben, zu nutzen und etwas ohne Hilfe zu tun . Nehmen Sie also all diese Fähigkeiten, die Sie gelernt haben , und versuchen Sie es selbst zu tun. Jetzt, unter diesem Video, habe ich ein paar Schritte unternommen, um Ihnen zu helfen. Wie ein paar Schritte sollten Sie unternehmen, um dies zu erledigen. Und schließlich habe ich einen Link zum Zweig auf GitHub mit diesen Codeänderungen gepostet Zweig auf GitHub , die Sie auschecken können, aber schauen Sie sich das erst an, wenn Sie fertig sind. Versuchen Sie es zu versuchen. Jedenfalls. Ich denke, es wird dir sehr viel Spaß machen. Also mach es schon.