Erstellen eines Web3-Twitter-Klons mit Solidität und Polygon

1. KURSEINFÜHRUNG: Aber das war eine der beliebtesten Social-Media-Plattformen weltweit. Krypto-Nutzer erkennen jedoch, dass eine dezentrale Version von Twitter von großem Vorteil wäre , da sie die negativen Aspekte einer zentralisierten Plattform eliminieren würde . In diesem Kurs lernen Sie, einen dezentralen Twitter-Klon mithilfe von Löslichkeit und Polygon-Blockchain zu erstellen einen dezentralen Twitter-Klon mithilfe von Löslichkeit und Polygon-Blockchain . Benutzer können sich mithilfe von MetaMask Wallet authentifizieren und dann teilen ihre Gedanken mit allen auf dieser Plattform. Jeder Benutzer erhält zufällig ein Tag generiert wird, wenn er sich zum ersten Mal anmeldet. Sie können sogar ihr Anzeigebild und ihr Banner in Ihrem Profilbereich ändern . Später werden wir damit beginnen, diesen intelligenten Vertrag mithilfe von Solidarität und Remix zu schreiben und zu testen. Dann werden wir den Vertrag einsetzen, das Mumbai-Testnetzwerk mit Herz. Danach werden wir React js verwenden , um unser Frontend zu erstellen und schließlich Itos JS verwenden , um mit dem diploiden Vertrag zu interagieren. Zum Hochladen von Bildern verwenden wir einen Web-Two-Punkte-Speicher-IPFS-Dienstanbieter. Am Ende des Kurses lernen Sie alles, was Sie benötigen, um ein Full-Stack-Webentwickler zu werden , ohne weitere Zeit zu verschwenden. Melden Sie sich jetzt an und los geht's. 2. Erstellen eines hardhat: Hallo, willkommen zum allerersten Video in dem wir die Entwicklungsumgebung einrichten werden. Bevor wir fortfahren, besprechen wir die Roadmap des Kurses. Das erste, was wir tun werden, ist das Hardhead-Projekt einzurichten. Dann erstellen wir einen intelligenten Vertrag , der Tweet-Daten verfolgt und speichert. Danach. Wir werden unseren Smart-Vertrag testen. Wir schreiben vielleicht keinen Unit-Test, aber wir werden ihn mit Remix testen. Nachdem alle Methoden ordnungsgemäß funktionieren, werden wir einen intelligenten Vertrag für das Polygon-Ziel bereitstellen. Danach werden wir ein React js-Frontend erstellen und eine Prosis und MetaMask verwenden eine Prosis und MetaMask um mit dem diploiden Vertrag zu interagieren. In der letzten Sitzung werden wir die gesamte Anwendung testen und sicherstellen, dass sie keine Fehler enthält. Ich stelle außerdem sicher, dass Sie MetaMask installiert haben und einige Testmetriken in Ihrem Konto haben. Du kannst es einfach googeln, wenn du willst. Ich richte mich nicht wieder ein. Sie können sich jedes Tutorial ansehen. Es sind nur ein paar Klicks entfernt und fahren Sie mit diesem Kurs fort. Wieder einmal können Sie den gesamten Tech-Stack unserer dezentralen Anwendung sehen . Diese Blockchain wird Polygonfestigkeit sein, Hardhat. Wir werden meinen Damast benutzen. Der Knotenanbieter wird Alchemy sein. Es hat nur die Vorderseite. Dann werden wir HTML, CSS und JS verwenden. Also fangen wir an, dieses Projekt zu erstellen. Beginnen wir nun damit, einen Ordner zu erstellen. Ich nenne es. Hochtöner dab. Hier werden wir ein Hardhat-Projekt erstellen. Ich hoffe du weißt übrigens, was schwer, schwer ist. Hard Hat ist eine Umgebung Entwickler verwenden, um dezentrale Anwendungen auf Basis von Titan-Blockchain zu testen, zu kompilieren, bereitzustellen und zu debuggen , die Programmierern hilft , viele der von mir erworbenen Aufgaben zu verwalten Entwicklung und Schreiben von Smart Contracts und vereinfachen Sie diesen Prozess. also in diesem Ordner Bringen Sie also in diesem Ordner das Terminal heraus. Und bevor wir Hardhead erstellen oder installieren, müssen wir ein leeres und PM-Projekt mit diesem Befehl npm erstellen. Warum? Und danach einfach mit Stil. Hardhead mit diesem Befehl npm install, save dev. Hatte ich gehabt. Lesen Sie also mehr über Hardhat. Du kannst einfach zu Hardhead gehen , sagen wir hier. Und Sie können auch die Dokumentation lesen. Denn egal welchen Code wir verwenden, es wird hier Schritt für Schritt geschrieben, so npm init y, und Zahlungen Teilhard hatte Dev so. Um eine Logik zu erstellen, müssen wir nun n px Hard Hat verwenden. Wählen Sie dann die erste ein JavaScript-Projekt erstellt hat. Drücken Sie und tippen Sie auf Enter. Jetzt sagt es uns, dass wir auch diese Abhängigkeit installieren sollen. Es ist eine Toolbox einfach verschwendet und drücken Sie die Eingabetaste. Diese Toolbox-Bundles sind weniger häufig verwendete Pakete und wie diese Anmeldungen empfohlen werden, um mit der Entwicklung zu beginnen, z. B. Ma Cao Dai, ich hatte Chai-Matcher, Hardhat, es wird gescannt usw. Jetzt sind die Abhängigkeiten installiert, hängen Sie einfach unser Projekt in VS Code an. Ich schreibe einfach Code. Es wird es in VS-Code öffnen. auch im VS-Code sicher, dass Sie Erweiterungen wie Solidität, Rückenwind, Hardhead und diese Art von Erweiterungen haben , die Sie bereits installiert haben. Aber das war's für dieses Video. Im nächsten Video werden wir die Alchemy- und MetaMask-Schlüssel in unserem Projekt erhalten. Danke. 3. Alchemie und metamask: Hi, Hardhead gibt uns nur wenige Ordner und Dateien. Wir werden all diese Schritte Schritt für Schritt besprechen. Aber zuerst gehen wir zu Hardhead Config Dot Chairs und stellen sicher, dass wir unser Netzwerk auf das Polygon-Testnetzwerk verweisen. Und damit das funktioniert, benötigen wir eine Polygonknoten-URL, eine beliebige gültige Adresse. Da ich bereits Konten habe, würde ich kein neues Konto bei alchemy erstellen. Du kannst einfach hier gehen, dann kannst du dich anmelden und ein neues Konto eröffnen. Falls du noch keins hast. Nach der Anmeldung bei Alchemy. Sie nach der Anmeldung bei alchemy Erstellen Sie nach der Anmeldung bei alchemy einfach eine neue App. Ich nenne es. Drittens wird die Tab-Kette ein Polygon sein. Und es wird ein Polygon sein, das heißt , diese Testschlange. Klicken Sie dann auf App erstellen. Hier brauchen wir den Schlüssel. jedoch zuvor sicher, dass Sie auch MetaMask installiert haben. Sie können my Tomas installieren, indem Sie auf meine Thomas.io-Website gehen und die Erweiterung für Ihren Browser installieren . Stellen Sie sicher, dass Sie das Video pausieren und sich das Setup einer neuen Brieftasche ansehen. Jeder auf YouTube oder Google. Und wissen auch, wie man rät, Testpolygon bekommt. Das geht automatisch in Ihrer Brieftasche. Sie können es per Polygon für Set erhalten. Ein Weg wie dieser. Ja, füge einfach die Adresse ein und hol dir Test-Token. Sagen wir das. Meine Maske. Wir benötigen diesen privaten Schlüssel. Und wir werden diese Schlüssel, das ist der Alchemie-Schlüssel und dann meinen Dmowski, in unserem Projekt speichern das ist der Alchemie-Schlüssel und dann . Und zu diesem Zweck werden wir eine Abhängigkeit namens dot ENV verwenden. Weil es nicht empfohlen wird, diese sensiblen Informationen direkt in unsere Dateien einzufügen . Das ist wie hier direkt. Ich möchte nicht, dass es eingefügt wird. Bringen Sie einfach Ihr Terminal heraus und richtig. Und PM und style dot ENV. jetzt sicher, dass es installiert ist Ja. Im Stammordner. Erstellen Sie einfach eine Datei namens dot ENV und erstellen Sie Variablen wie Polygon. Mumbai ist so gleich. Und lass E gleich so sein. Aber der Polygonmodus geht einfach hierher, klickt auf View key, diesen Schlüssel, und fügt ihn hier ein. Für die private Adresse der Brieftasche. Öffne einfach deine Meta-Maske. Klicke hier. Oder in diesen Punkten. Kontodetails. Exportieren Sie den privaten Schlüssel. Geben Sie einfach Ihren privaten Schlüssel ein. Geben Sie nur Ihr Passwort ein. Dann zeigt es Ihnen einen privaten Schlüssel und stellt sicher, dass Sie Ihre Schlüssel keiner anderen Person zugänglich machen. Kopiere den Schlüssel. Gehen Sie zur Punkt-ENV-Datei und fügen Sie sie ein. Das war's. Speichere es. Danach. Gehen Sie zur Hardware-Punkt-Konfigurationsdatei und importieren Sie diese Schlüssel. Wenn dieser Befehl aktiviert ist, benötigen unsere helle Punkt-ENV. Ich werde ausrasten. Danach schreiben Sie im module.exports einfach Netzwerknetzwerke. Dann nenne ich es Mom Bye. Dann müssen Sie in die URL den ENV-Variablennamen des Prozesses schreiben, das Polygon Mumbai ist. Und in einer Konstante, die ein Array ist, müssen Sie einfach process dot ENV, wallet, vibrieren, so schreiben . Also das war's. Ihre Schutzhelm-Konfiguration ist abgeschlossen. Im nächsten Video werden wir den Smart Contract schreiben. Danke. 4. Erstellen eines Twitter: Hi, willkommen zurück. Jetzt fangen wir an, unseren intelligenten Vertrag zu schreiben. Entfernen Sie alle Schutzhelm-Dateien, Vertragsskripte und Testordner. Es ist so, ich werde es auch einfach in den Skripten entfernen. Ich werde es aus dem Vertrag streichen. Einfach kopieren oder nicht, Sie müssen nicht kopieren. Sie können diese Punkte einfach als Seele umbenennen. Und bewege einfach alles andere. Flag muss nur Soliditätscode kennzeichnen. Jetzt fangen wir an, einen neuen Vertrag abzuschließen und ihn zu benennen. Zuerst. Wir werden einige Zustandsvariablen haben. Der erste wird Besitzer sein. Der zweite wird ein Konter sein. Das ist, es wird einen Ausweis präsentieren, ein Spielzeug wie dieses. Dann im Konstruktor. Lassen Sie uns initialisieren , dass dies die Eigentümervariable Breite ist , Nachrichtenabsender. Das ist wer auch immer den Vertrag einsetzt und mit 0 kontert. Das ist die erste Idee. Wir beginnen bei 0, so. Jetzt, da wir einen Vertrag schreiben , der aus Änderungen bestehen wird. Also lass uns eine Struktur mit einem Namen haben einem Namen Tweet-Namen, wir machen es so. Okay, ich bin Destruktor , der zugeschlagen hat. Okay. Jetzt besteht es aus einer Absenderadresse, dieser Adresse und dem Namen Twitter. Dann wird es AD haben, dann hat es das Gewicht x. Dann kann die Person ein Bild hochladen oder nicht. Es wird fakultativ sein. Ob diese Person dann löschen möchte, es ist ein Tweet oder nicht. Und schließlich haben wir diesen Zeitstempel, damit wir das Datum des Spielzeugs anzeigen können. Dies ist die Struktur eines Tweets. Als nächstes werden wir eine Struktur eines Benutzers haben. Es wird darin bestehen, dass der Name das Profiling ist, das heißt, der Benutzer wird ein Bio-India-Profil schreiben . Nachmittag. Dieser Benutzer kann ein Profilbild haben. Danach kann der Benutzer ein Profil-Banner haben . So wie das. Denn wenn Sie ein Machbares gesehen haben , haben es nur sehr wenige gesehen. Twitter. Die Person kann eine Biografie mit ihrem Benutzernamen , ihrem Profilbild und dem Profil-Banner hochladen. Danach werde ich etwas Mapping haben, was wir zuerst machen, es wird jetzt ID zu einer Tweet-Struktur zuordnen , die ID ist zu warten. Und ich nenne es. Die Gewichte. Und die zweite Zuordnung wird Adresse sein. Und es wird auf einen Benutzer verweisen. Das heißt, Benutzer. Einfach an einen Benutzer adressieren. Also haben wir nur die Adresse. Wir können das Knie-Bio-Profilbild dieses bestimmten Benutzers herausfinden . Sagen wir mal. Ebenfalls. Wir werden einige Veranstaltungen haben. Die erste Veranstaltung wird fällig sein, sie wurde erstellt. Es wird eine Adresse haben. Das Gleiche. Es wird einen Ausweis haben. Es wird einen Gewichtstext, eine Zeichenfolge haben. Es wird das Gewichtsbild haben. Dieser Boolean ist verzögert tot und dieser Zeitstempel. Das wird also ein Ereignis sein, das in der Anzeigen-Tweet-Funktion ausgegeben wird, die wir im nächsten Video erstellen werden. Das zweite Ereignis werden wir also löschen? Es wird einfach diese Tweet-ID haben. Tweet ID und Boolean werden gelöscht. So wie das. Das war's. Das war's für dieses Video. Im nächsten Video werden wir an der Funktionalität arbeiten, um sie hinzuzufügen. Danke. 5. Funktionalität zum Hinzufügen eines Tweets: Schreiben wir weiter den Smart Contract. Jetzt schreiben wir die Funktion zum Hinzufügen eines Churn-Tweets. Es akzeptiert das Gewicht und das Gewichtsbild. Es wird sowohl eine öffentliche als auch eine kostenpflichtige Funktion sein. Warum? Nun, da wir von dieser Person verlangen würden, uns 0,01 zu senden uns , um sicherzustellen, dass wir historische Daten hochladen können, reichen Sie bitte 0.01 magic ein. Hier müssen wir Äther schreiben, aber wir werden einen metrischen Wert einsenden. Wenn das in Ordnung ist, das heißt, diese Anforderung ist erfüllt, dann haben wir einen Zeiger auf sie. Es ist Mapping. Das Recht wusste, dass du die Gewichte bei 0 machen wirst. Es ist hier die Idee, dass 0 ID, wir werden anfangen, die Daten neu hinzuzufügen. Dunkler Text ist hier gleich Text, dann Neu. Und das sollte Tweet sein. Twittern. Großartig. Das Bild ist gleich dem. Dann machst du es. Punkt ist gleichbedeutend mit Nachricht. Absender. Id ist gleich counter. Dann wird der neue Tweet gelöscht, ist offensichtlich gleich falsch. Dann schließlich ist Punkt Timestamp gleich Block Dot Timestamp. Danach werden wir einfach unseren Tweet veröffentlichen. Ereignis wurde erstellt. Sendet diese Werte so. Twitter ist Nachrichtensender, dann AD-Zähler, dann Tweet-Text. Die Art und Weise, wie Sie als verwalten , wird gelöscht falsch und der Zeitstempel. Zeitstempel. So wie das. Am Nachmittag werde ich einfach den Zähler erhöhen da die nächste Tweet-ID eine sein sollte. Und zum Schluss bezahle ich den Besitzer. Das heißt, ich werde einfach übertragen. Jetzt Wert auf Knoten, wie dieser. Mit dem Besitzer überweise ich diesen Wert. Ich hoffe du hast diese Codezeile verstanden. Es war sehr einfach. Als erstes benötigen wir 0,01 demotischen Äther. Dann habe ich hier nur auf unsere Zustandsvariable hingewiesen , die Tweets sind. Dieser Datentyp ist struct. Deshalb habe ich keinen Tweet gehört und einfach alle Daten hinzugefügt. Und wir haben gemacht, dass Sie den Zähler nicht inkrementieren und einfach den Wert transportieren, der 0,01 Ito ist. Das war's. Das war's für dieses Video. Danke. 6. Funktionalität für alle Tweets: Hi, willkommen zurück. Arbeiten wir nun an der Funktionalität zum Abrufen aller Tweets. Das heißt, wie Tweets auf der Timeline des Benutzers angezeigt werden. Schreiben Sie einfach wichtig, welche Gewichte und Chen sind, auf denen es eine öffentliche Veranstaltung sein wird. Es werden einfach Renditen eine Struktur wie diese angezeigt. Jetzt. Jetzt erstellen wir als Erstes eine temporäre leere Variable. Das heißt, ich werde nur temporär gleich nu sein. Twittern. Es wird leer sein und das Land wird kontern. Das ist unsere seitliche Anzahl an Tweets. Dann werde ich das Gewicht auf 0 reduzieren. Dadurch wird nur die Gesamtzahl der Tweets gezählt , an die Sie vielleicht denken, was ich gerade mache. Ich habe nur eine For-Schleife, um sicherzustellen, dass wir nur die Tweets anzeigen , die nicht gelöscht werden. Du int I ist gleich 0, I kleiner als Zähler I plus plus. Und dann werde ich eine solche if-Anweisung haben. Wenn I dot gelöscht wird , ist das gleich false, dann füge das nur hinzu. In diesem temporären. Eddie, in dieser Position ist die Zählung bis acht gleich den Gewichten. Mir gefällt das. Und erhöhen Sie einfach die Anzahl der Tweets. Danach. Ich werde Alda-Platten haben , die nicht gelöscht werden. Danach habe ich einfach eine leere Variable, deren Ergebnis gleich mu 28 ist. Jetzt wird das Land richtig sein, das heißt, zählen Sie zu seinem. Wenn wir dieses direkt senden, wird die Länge des Edit E viel größer sein. Deshalb habe ich gerade eines leeren Arrays erstellt und gerade eine weitere Variable erstellt. Und wieder machst du die for-Schleife. Und dieses Mal werde ich weniger als zählen Tweets sein. Und hier kopieren Sie einfach alles von der temporären Variablen in diese Ergebnisvariable. Und schließlich werde ich dieses Ergebnis so zurückgeben. N hier. Was habe ich diesen Fehler gemacht, was? Es sollten neue Tweets klein sein. Das war's. Ich hoffe du hast verstanden. Zuerst haben wir ein leeres Array Zählerlänge, die 50 sein könnte. Dann hätten wir for-loop - und Alda-Tweets, die nicht gelöscht wurden, was vermutlich verspätet ist. Da die Länge 50 beträgt und darin nur die Gegenstände 30 sind. Also habe ich einen weiteren Bereich mit nur einem winzigen Land erstellt , sodass die Länge des Arrays den darin enthaltenen Elementen entspricht. Das war's. Das ist die Funktion. Holt alle Tweets. Das nächste was ich schreiben werde. Die Methode zum Abrufen von Tweets. Aber, aber der coolere Benutzer. Denn wenn der Benutzer seine Profilseite aufruft, sollten nur die Tweets gesehen werden, die er hochgeladen hat. Da. Wir schreiben einfach die Funktion, holen meine Tweets. Es wird eine externe, gleiche Sache sein , extern oder öffentlich, was auch immer Sie wollen. Ein paar Rückgaben. Es wird eine Reihe von Tweets-Strukturen zurückgegeben. Auch hier werde ich dasselbe tun. Sie sagten, ich mache es. Brustkorb. Stem ready ist gleichbedeutend mit einer neuen Art von Land. Dann werde ich zählen, meine Gewichte sind variabel. In der for-Schleife werde ich dasselbe tun wie Sie. Int I ist gleich 0. Ich zähle weniger als ich plus plus. Dann werde ich diese if-Anweisung machen, wenn die Gewichte I Partition gleich dem Absender der Nachricht ist und sicherstellen, dass sie nicht gelöscht wird. I dot ist gleich, gleich falsch, dann fügen wir das nur in dieser temporären Variablen hinzu. Zählen Sie in dieser Partition meine Tweets, die ich positioniere. Und dann werde ich den Wert meiner Tweets erhöhen. Nach der for-Schleife, bei jedem Login. Klicken Sie dann auf Neues leeres Array erstellen . Nennen Sie es Ergebnis. Du machst es. Mein neues int, ich bin gleich 0. Ich zähle meine Tweets weniger als. Ich plus plus. Ja, wir tauschen einfach alles aus, von der temporären Variablen bis zur Ergebnisvariablen, das war's, sonst nichts. Und zum Schluss werde ich das Ergebnis zurückgeben , wo alle, das war's. Dies war die Funktion, um Tweets von allen Benutzern und Tweets eines bestimmten Benutzers abzurufen. Danke. 7. Funktionalität zum Löschen eines Tweets: Arbeiten wir weiter mit den Funktionen. Die nächste Funktion, die wir schreiben werden , besteht darin, einen bestimmten Tweet zu erhalten. Also sage ich einfach meine dritte Farbe. Ich mag einfach Spaß an der Abwanderung. Komm dazu. Wir müssen eine Tweet-ID senden. Nun, die düstere Sicht kehrt zurück. Es wird die Zeichenfolge mammary, mammary und dann address zurückgegeben . Das erste, was erforderlich ist, ist sicherzustellen, dass die ID kleiner ist als dieser Zähler. Das ist die maximale Anzahl an Tweets. Nein, so zu acht. Dann haben wir nur das wie sehr gut auf diesen Tweet hinweisen, das ist die Tweet-ID ist die Tweet-ID hier so, dann stellen Sie sicher, dass das Gewicht nicht gelöscht wird. Der Tag sollte es falsch sein, wird gelöscht. Und danach, wenn alles in Ordnung ist, sage ich einfach, gib den Punkt, den Text, den Punkt, das Bild, den Punkt zurück. Diese drei Werte werde ich senden. Dies ist nur eine Methode, wenn Sie, wenn überhaupt, wenn überhaupt, aus welchem Grund auch immer, diesen Tweet erhalten müssen. Danach erstellen wir Medizintechnik, um es zu löschen, tun Sie es. Bei der Abwanderung. Verzögertes Gewicht. Wir haben die ID senden und Boolean wird gelöscht. Extern. Wir verlangen einfach, dass die Person der Besitzer dieser Tweet-ID ist. Wenn nicht, kannst du deinen eigenen Tweet ehrlich so löschen. Danach einfach zu seiner ID. Wird gelöscht, ist gleich, wird so gelöscht. Und ich gebe zu, dass das Ereignis hier gelöscht wurde. Als wir darauf emittierten, wurde es auf die gleiche Weise erstellt. Im Live-Modus senden wir einfach diese Tweet-ID und ID und werden gelöscht. So wie das. Das heißt, das war ein Schlag, um es zu löschen, es zu tun, Es war sehr einfach. Wir ändern nur den Wert von E wird auf true ausgewertet , sodass der Benutzer, wenn er es haben möchte, nicht diejenigen abrufen kann, die als bezeichnet werden, den Wert nicht direkt aus einer Blockchain löschen können. Wir werden nur diesen bestimmten Wert ändern. Das war's. Wisse, dass wir diese Blockchain ändern können, wenn wir wollen . Wir können ein neues Array haben und dann diesen Bereich so in diesen Bereich legen. Wenn du willst, kannst du es schaffen. Aber ich werde einfach die Daten für immer in der Warteschlange speichern. 8. Funktionalität zum Aktualisieren des Benutzers: Hi, willkommen zurück. Dies ist das letzte Video des Vertragsmoduls. Wir werden einfach meinen Zug aufschreiben , um die Benutzerdetails zu aktualisieren. Ich nenne es einfach funtion. Der Benutzer erinnert sich nur an einen neuen Namen. String-Mammary, neue Biografie, Speicher teilen, neues Dateibild. Und schließlich String-Speicher, neue Datei, Banner. Lass das. Es wird eine öffentliche Veranstaltung sein. Jetzt müssen Sie einfach diesen Benutzer abrufen oder Sie können sagen, dass Sie diesen Benutzer in die Zuordnung des Absenders der Nachricht wie folgt einfügen . Dann schreibe ich einfach Benutzerdaten. Punktname entspricht neuem Namen. Benutzerdaten. Bio ist gleich neuer Bio. Benutzerdaten-Punkt-Dateibild. Mädchen zwei neues Profilbild. Benutzerdaten. Dieses Profilbanner entspricht einem neuen Dateiklavier wie diesem. Auf diese Weise aktualisieren Sie jedoch ein Benutzerdetail. Diese letzte Funktion wird wichtig sein , um Benutzerdetails zu erhalten. Sie ist für einen bestimmten Benutzer bestimmt. Einfach Spaß Chen, Benutzer bekommen. Wir schicken dem Benutzer ein Kleid. Es wird eine öffentliche View-Funktion sein, die einen solchen Benutzer zurückgibt . Und ich werde einfach die Adresse des Benutzers zurückgeben da diese Benutzerzuordnung die Adresse ausnimmt, und es wird der Benutzerstruktur gesendet, dass dies beispielsweise die Funktion ist, um einen Benutzer zu erhalten. Es sind alle Benutzerdetails. Und das ist die zu aktualisierende Funktion. Der Benutzer behält. Das war's. Das war's für dieses Modul. Im nächsten Modul werden wir einen intelligenten Vertrag abschließen. Danke. 9. Testen mit Remix: Unser Twitter-Vertrag ist also fertig. Es ist an der Zeit, alle Methoden zu testen und sicherzustellen, dass kein Fehler darin enthalten ist. Ich werde zu diesem Zweck eine Remix-Online-ID verwenden. Wenn Sie möchten, können Sie auch Unit-Tests mit Mocha und Child-Bibliothek schreiben auch Unit-Tests mit . Es liegt an dir. Aber nur um Zeit zu sparen und es schneller zu machen, werde ich Remix verwenden. Also geh einfach zu remix dot m dot o, r g. Dann hier im Ordner Verträge, erstelle einfach eine neue Datei und nenne sie twitter dot soul. Danach kopiere ich einfach diese Lizenz. Und Pragma-Solidität. Danach kopiere ich einfach den Vertrag und füge ihn hier ein. Siehst du, es ist erledigt. Okay. Wenn wir es also in der Remix-IDE testen, können wir nicht bis zu 0,01 ewig testen, denn wenn wir die Transaktion durchführen, müssen wir Zahlen ohne Dezimalzahl senden. Also werde ich hier nur einen Esser nur zu Testzwecken schreiben , aber im Hauptcode wird es 0,01 in 30 sein . Gestern. Erinnerst du dich? Okay, also hier werde ich zu inter dot soul kompilieren gehen. Wir haben dieses grüne Häkchen hier. Das bedeutet, dass alles in Ordnung ist. ist kein Erwachsener da. Jetzt. Okay. Gehen Sie zu diesem Abschnitt zum Bereitstellen und Ausführen von Transaktionen. Klicken Sie einfach auf Apply. Okay. Wir haben diese Antwort. Das heißt, unsere Adresse wurde bereitgestellt. Siehe Alda Methoden und Funktionen sind da. Wenn wir auf Besitzer klicken, können wir sehen, dass wir die Eigentümeradresse haben, das ist diese Adresse C4. C4. Sie können sehen, dass dies die richtige Adresse ist. Was ich jetzt tun werde, ist einfach das Konto zu wechseln. Und jetzt versuchen wir einen neuen Tweet hinzuzufügen. Ich gebe einfach den Wert eins an, da es um einen bittet. Und jetzt müssen wir einen Tweet-Text schicken. Es wird es zuerst tun und es ein Bild wie www dot, Dummy-URL, so etwas machen. Okay? Und ich klicke einfach auf Hinzufügen. Ich denke es ging wieder auf 0. Wenn ich erneut auf klicke, füge hinzu. Okay, hier sollte es nicht so sein, es sollte Esser sein. Nun, wenn ich versucht habe zu klicken, sehen Sie, wir haben dieses grüne Signal hier. Das heißt, wir wurden hinzugefügt. Und wenn Sie das erste Konto überprüfen, sind es jetzt 100. Weil diese zahlbare Funktion diesen Betrag von diesem an den Eigentümer dieses Kontos überträgt . Deshalb wurde das inkrementiert. Wenn ich jetzt auf „Alle Tweets abrufen“ klicke. Sehen Sie, wir haben diese Adresse, diesen Text zuerst Tweet und Dummy-URL oder Angebote, die wir haben. Und wenn ich schreibe, wenn ich einen Benutzer aktualisiere, ist das dieser Benutzer, wenn ich Arapaho schreibe, was fragt das dann. Wie Sie hier sehen können, haben wir Bio Web Dev. Dann haben wir wieder ein Profilbild, www dot dummy image. Und dann haben wir das Profil. Inzwischen schreibe ich einfach www.banner.com und aktualisiere es. Und jetzt, wenn ich Recht habe, erhalte Benutzer, das ist die Benutzeradresse. Wenn ich eine Benutzeradresse senden muss und wir einfach mit der rechten Maustaste auf Copy klicken, getUser und getUser developer, dummy image und banner.com zugeordnet , sodass der Benutzer aktualisiert wurde. So würde ich nur weiter meinen Tweet bekommen , auf den ich die Dosis für seine Idee brauche, die mir gehören. Wenn ich jetzt das Konto in Konto Nummer drei ändere und jetzt, wenn ich schreibe, erhalte ich meinen Tweet, dann sehe ich, dass er leer ist weil dieser Benutzer keine hinzugefügt hat. Aber wenn wir alle Tweets bekommen, dann sind offensichtlich alle Tweets da, die dort in dieser App so gepostet werden. Nun, wenn diese Person diesen Tweet entfernen möchte, wenn sie klickt, wird zurückgesetzt angezeigt, Sie können nur Ihren eigenen löschen. Aber wenn ich zum zweiten gehe und jetzt versuche, das zu löschen, wird es gelöscht, weil er der Besitzer davon ist. Und jetzt, wenn ich mit der rechten Maustaste klicke, erhalte alle Tweets. Warte einfach, lass uns sehen , was los ist. Ich denke, es wurden noch einige hinzugefügt. Wenn es sich um eine ID handelt, haben wir diese Adresse. Tun Sie es zuerst. Okay. Wenn wir den Tweet löschen, müssen wir mehr Werte senden, die hier sind, ID als auch den booleschen Wert. Es war der Herausgeber. Wenn Sie möchten, können Sie das überprüfen und auch umleiten. Ich lese es einfach durch und lösche es. Wenn ich Ketone schreibe, die sehen, dass sie gelöscht wurden. Das kommt dazu. Mal sehen was passiert. Transaktion wurde rückgängig gemacht, indem angegeben wurde, dass sie gelöscht wurde, weil der Tweet bereits gelöscht wurde. Ich hoffe also, dass Sie diese Remix-ID verstanden haben , da dies eine bessere und schnellere Methode war , diesen intelligenten Vertrag zu testen. Wenn Sie möchten, können Sie mehrere Eigenschaften und einen STR-Vertrag für jedes andere Feld eingeben mehrere Eigenschaften und einen STR-Vertrag , das ich möglicherweise verpasst habe. Aber im Moment funktioniert alles einwandfrei. Im nächsten Video werden wir diesen Vertrag in ihnen einsetzen. Testnetzwerk Polygon Mumbai. Danke. 10. Bereitstellen im Mumbai Testnetzwerk: Hi, willkommen zurück. In diesem Video werden wir unseren intelligenten Vertrag im Polygon-Testnetzwerk bereitstellen . Lassen Sie uns dafür ein Bereitstellungsskript mögen. zunächst im Ordner scripts Erstellen Sie zunächst im Ordner scripts eine neue Datei und nennen Sie sie deployed dot js. Jetzt schreibt es Code. Das erste, was benötigt wird, ist das Hardhat-Labor. Dann haben wir eine sinc-Funktion namens main. Dann werden wir bekommen, Vertrag bekommen, Fabrik wird Vertrag bekommen. Zum Beispiel. Dies ist der Name unseres Vertrags. Es ist hier in sagen wir Twitter. Dann müssen wir diesen Befehl schreiben. Es ist klein d und dann bereitstellen. Es dot, dot, deploy so. Dann müssen wir wiegen. Es wird so eingesetzt, wie es ist. Es dauert ein bisschen winzig. Und sie sind ganz am Ende. Wir werden die Punktprotokoll-Vertragsadresse trösten, Vertrag bereitgestellt um dann so zu adressieren. Und jetzt müssen wir diese Hauptfunktion aufrufen und einfach jeden Fehler abfangen , der ausgelöst wird. Console.log sagt Exit-Code gleich einem wie diesem. Das ist also der einzige Code, der für die Bereitstellung erforderlich ist. Jetzt müssen wir unser Terminal in das Hauptverzeichnis bringen , das sich in diesem Ordnerverzeichnis befindet. Und schreibe diesen Befehl und px. Ich hatte Drehbücher ausgeführt. Dann ist der ly Punkt js. Und wir müssen als Netzwerk erwähnen, das von bewegt wird und die Eingabetaste drücken. Es kann ein paar Minuten dauern. Jetzt haben wir einen Ordner mit direkten Effekten erstellt und sehen, wie ihr Vertrag an diese Adresse bereitgestellt wird. Stellt sicher, dass Sie diese Adresse kopiert haben da sie im nächsten Video benötigt wird. Um sicherzugehen, dass alles in Ordnung ist, können wir einfach überprüfen, ob Mumbai-Polygone auf diese Website gehen können, diese Vertragsadresse kopieren, Basisstaat hier kopieren und einfach suchen. Sehen Sie, vor fünf Sekunden wurde dieser Block erstellt und diese Vertragserstellung und sie hat 0 könnte einen Wert annehmen. Dies symbolisiert , dass unser Vertrag erfolgreich umgesetzt wurde. Das war's für dieses Video. In der nächsten Sitzung werden wir am Frontend arbeiten, nämlich React JS. Danke. 11. Einrichten eines react: Unser Vertrag wurde erfolgreich umgesetzt. Jetzt ist es an der Zeit, dass wir am React JS-Frontend arbeiten. Dafür. Lassen Sie uns dafür unser ADF JS-Setupprojekt erstellen, schreiben Sie einfach np x so in den acht React-App-Client und drücken Sie die Eingabetaste. Ich hoffe du hast React js in deinem System installiert. Wenn ja, habe ich das Gefühl, dass ich welche bekomme und ich installiere die Altersdiskriminierung einfach global. Also ist das React-Projekt jetzt eingerichtet. Um nun mit unserem bereitgestellten Smart-Vertrag interagieren zu können , benötigen wir zwei Dinge Vertragsadresse und die ABA. Um die ABA zu erhalten, kopieren Sie einfach diese twitter.json-Datei aus den Artefakt-Verträgen. Hier. Diese Datei kopieren Sie einfach und gehen Sie in den Kundenordner. Dann Quelle hier, erstelle einen neuen Ordner und nenne ihn ABI, und füge einfach die Twitter JSON-Datei hier ein, die sich in diesem Zeilenquellordner befindet. Ja. Okay. Dann müssen wir eine neue Datei namens config dot js im Quellordner erstellen , wie die waffenfreie ab.js. Und hier fügen wir unsere Vertragsadresse ein. Die Vertragsadresse entspricht dieser. Kopieren Sie einfach Ihre Adresse. Füge es hier ein, so. voranzukommen, müssen wir jetzt einige Abhängigkeiten installieren. Ändern Sie einfach dieses Verzeichnis in den Kundenordner. Hier, schreibe npm mit Stil. Ether reagieren dann. Und die äußere Kuppel. Dann das Web-UI-Kit, Kern. Dann füge die acht Wiederholungen hinzu, drei UI-Kits. Ich kann mir dann ein Baummodell schnappen und schließlich Cartoon Dash. Also wenn du hier siehst. Wir haben 123456 Abhängigkeiten und drücken Sie Enter diese acht test.js. Das heißt, Ethos ist erforderlich, um mit dem bereitgestellten Smart-Vertrag zu interagieren. React Router dom ermöglicht die Navigation zwischen verschiedenen Komponenten in der React-Anwendung. Web drei, UIKit bietet uns schöne und leichtgewichtige UI-Komponenten weit von zwei Entwicklern entfernt. Diese Bibliothek wird unsere Dab-Entwicklung beschleunigen. Dann. Dann haben wir drei Modelle, mit denen wir unsere App zu vielen gültigen Anbietern wie Coinbase Wallet, MetaMask, Wallet Connect verbinden können. Und schließlich generiert dieser Cartoon-Avatar zufällige Avatare für uns. Wir werden dies später als Dummy-Profilbild verwenden. Nun, wenn Sie hier zu package.json gehen, und wir werden nur überprüfen, ob das Web Three-Modell jetzt da draußen ist . Äther-Cartoon, Avatar. Alles ist tot. Jetzt. Ich gehe wirklich einfach und schreibe npm. Starten Sie unser React JS-Handy. Okay? Die React-App läuft also erfolgreich. Jetzt ist es an der Zeit, an der Datei index.js zu arbeiten. Lass uns hier hingehen. Wir importieren React, dann die CSS-App für den Teigindex. Dann importiere ich Browser und äußere Reaktion. Und die äußere Kuppel. Und ich werde Defäkation importieren. Defäkationsanbieter. Web drei, Sie schreiben Code, Benachrichtigung , geben dem nur einen Impuls. Diese App. Es befindet sich in der Root-Datei. Dadurch können alle Dateien Benachrichtigungen anzeigen. Also müssen wir einfach diesen strengen Drei-Akt-Modus hier entfernen diesen strengen Drei-Akt-Modus , um den Defäkationsanbieter zu verwenden, eine App, die innerhalb der App und Defäkationsanbieter ist. Verwenden Sie dann den Browser-Router und wickeln Sie die App in den Browser-Router. So wie das. Das ist alles was wir sagen werden. Okay, es läuft. Jetzt. Ich werde neue Dateien und Verzeichnisse erstellen. Im Quellordner. Ich werde Ordner erstellen und ihnen einen Namen geben. Komm schon Nance, Komponenten, Bilder und Seiten. Diese drei Ordner und Insight-Seiten. Ich werde mehrere Dateien erstellen. Home Punkt js, bilden Punkt CSS. Schon wieder. Eine Datei dot js, datei dot CSS, dann settings.js, Einstellungen Punkt CSS. Okay? Diese, diese vielen Dateien haben $9 home dot js erstellt. Ich schreibe den Code. Als erstes werde ich React importieren. Dann werde ich den Link vom React-Router-Dome importieren. Dann werde ich hier in diesem home dot js importieren, ich werde home dot CSS Datei Form dot CSS auf diese Weise importieren, okay? Dann habe ich einfach eine Home-Komponente und exportiere standardmäßig bis zum Ende. Dann werde ich innerhalb der Home-Komponente zurückkehren und einige Link-Tags wie diese zurückgeben. Und ich werde es kopieren. Ich werde zweimal bezahlt nachschauen. Der erste einzelne Schrägstrich. Und an diesem Tag wird es zu Hause sein. Dann wird das nächste Profil sein. Es wird ein Profil sein. Die nächste wird Einstellungen sein und schwer wie Tränen, Einstellungen wie diese. Kopieren Sie jetzt einfach den gesamten Code hier. Gehe zum Profil dot js. Füge es hier ein. Richtig. Jetzt Datei dot CSS-Datei und exportiere das Profil ganz am Ende. Gehen Sie in ähnlicher Weise zu settings.js und fügen Sie sie hier ein. Ist es. Derselbe Code hier. Ich werde Einstellungen importieren. Dann lautet der Komponentenname settings. Ich werde die Einstellungen ganz am Ende exportieren. Das war's also für dieses Video. Wir haben hier viel getan. Jetzt ist unser React JS-Projekt gestartet. Und in den nächsten Videos arbeiten wir einfach an der grundlegenden Benutzeroberfläche unserer Anwendung. Danke. 12. Arbeiten an der App: Hallo, in diesem Video werden wir an dieser App-Komponente arbeiten. Gehen Sie also zur Datei app.js. Hier. Ich werde dieses Logo entfernen und Abhängigkeiten importieren. Der erste wird von React reagieren. Der zweite wird out als auch out sein. Dann werde ich die Home-Komponente von Dark Pages Home importieren. Dann importiere ich die Dateikomponente. Dann werde ich die Einstellungskomponente importieren. Und dann werde ich diese App-Punkt-CSS-Datei importieren. In dieser Funktion entferne ich jetzt alles und fange an. Wir leeren Klammern. Dann Dave, Klassenname, nenne ich es Seite. Ich werde das CSS später machen. Dann haben wir den Namen der Live-Klasse, Seitenleiste, sagen wir Bar. Dann habe ich Dave, ClassName Hauptfenster. Dann werde ich ein paar Routen haben. Die Routen, die ich herausgegriffen haben werde, die auf Lee Schrägstrich sein werden, und das Element, das die Home-Komponente anzeigen wird. In ähnlicher Weise werde ich verfeinern müssen. Es wird die Phi-Komponente angezeigt, und dann habe ich Einstellungen. Und es wird die Einstellungskomponente angezeigt. Nach diesem Hauptfenster wird der Nachname haben, richtig? Bar. Und hätte ich eine Schreibleiste so gelesen. Und am Ende exportiert es die App. Jetzt habe ich diese Tage, aber auf jeden Fall wird es einige Stylings brauchen. Gehen Sie einfach zur app-Punkt-CSS-Datei. Ja. Ich werde alles entfernen. Und fange mit Seite an. Ich werde dieses CSS schnell schreiben. Ich hoffe, Sie haben Kenntnisse in CSS, denn in diesem Tutorial geht es um Web Three und nicht um HTML und CSS. Klebrige Pixelwoche. Und lesen Sie das Blau minus 800 Excel in 0,45. Dann Grenze, rechts. Ich werde ein Pixel sein, solide, RGB. Dreiundsechzig. Dreiundsechzig, dreiundsechzig. Und färbte sie weiß und rot VH. Dann werde ich die Klasse der Lichtleiste haben. Ich kopiere es einfach und füge es hier ein. Volition klebrig, oben 0, Gewicht. Ja, es wird einfach eine Grenze sein, links, nicht rechts. Solide Tage mit einem Pixel. Und gleich vorbei. Dann haben wir das Hauptfenster, beabsichtigte Pixel. Dann ankern, Rep, holen Sie sich einen Link. Jeder Link-Cursor wird ein Zeiger sein. Dann soll die Textdekoration keine sein. Und es wird wichtig sein. Dann ist die Höhe 0 Pixel. Es ist wichtig. Dann habe ich die Login-Seite, die ich später erstellen werde. Aber wir sollten das CSS hier schreiben. Denn wie ich immer sage, liegt der Fokus nicht auf dem CSS-Teil. Der Schwerpunkt liegt auf dem Aufbau einer vollständigen dezentralen Anwendung. Flex anzeigen , Inhaltscenter ausrichten. Flexrichtung, Spalte, Kappe, das Pixel. Und das wird für das Index Dot CSS gemacht. Aber die einzige Änderung, die wir vornehmen müssen, tut mir leid, das waren Entführungen, das ist die nächste Änderung. Wir müssen es hier in Index Dot CSS machen. Nach dem oberen Rand füge ich dem Hash einfach eine Hintergrundfarbe hinzu, eine für eins bis sechs. Das war's. Speichern Sie jetzt die Datei. Und schauen wir uns die Ausgabe an. C. Wir haben die Seitenleiste und dann die Home-Profileinstellungen hier. Und wir haben es geschafft und ich teile es hier auf, also haben wir verschiedene Abschnitte in unserer App. In den späteren Videos werden wir an einem bestimmten Abschnitt separat arbeiten. Danke. 13. Erstellen einer Sidebar Komponente: Hi, willkommen zurück. In diesem Video werden wir an der Sidebar-Komponente arbeiten. Gehen Sie einfach in den Ordner 02 components. Erstellen Sie hier zwei neue Dateien. Vorname wir sidebar dot js und eine andere Sidebar dot CSS. In der Seitenleiste JS werde ich einfach alles schließen. Und nur Einsicht außer Punkt js. Ja, als erstes: Import, React, React, React. Und als nächstes müssen wir die CSS-Datei importieren, die Sidebar Dot CSS ist. Okay? Dann dreht die Seitenleiste vorerst einfach gegen Steuern. Und exportiere die Standard-Sidebar. Okay, in goto app.js, hier, in der Seitenleiste von der Komponenten-Seitenleiste. Hier in diesem, Dave hat dieses Sidebar-Div gemacht, einfach wie die Sidebar-Komponente wie diese. Jetzt werden wir an diesen Seitenleistenkomponenten arbeiten. Die ersten paar Importe, die benötigt werden. Zuerst werden einige Icons sein. Ich mag Twitter, Cube, User und COG sehr, cog von web kids icon hier. Und die zweite Sache, die benötigt wird , ist die Linkbank von einem Create React-Router. Nein, ja, haben wir nicht. Return-Anweisung gibt ein div zurück und gibt ihm einen Klassennamen für Daten, Site-Inhalt. Dann werde ich ein anderes div haben und es menu nennen. Nun, dann werde ich ein anderes Div haben und es Details nennen. In diesen Details werde ich einfach das Twitter-Logo oder das Twitter-Symbol haben, das eine Schriftgröße von 50 Pixeln haben wird. Dann, nach den Details, werde ich einfach ein Link-Tag haben, das auch simuliert. Die Homepage und der Klassenname werden ein Link sein. Dann werde ich darunter einen anderen Namen für Menüpunkte haben . In den Menüpunkten. Jetzt. Und dieses Div ist hier noch nicht fertig. Ich werde dieses Link-Tag haben. Und innerhalb des Link-Tags wird fertig sein. Außerhalb der Menüpunkte. Und darin befindet sich ein Würfellogo oder Symbol mit einer Schriftgröße von 50 Pixel. Und hier beziehe ich mich auf Zuhause. So, das heißt, Abschnitt Details. Dann Menü. Auf die gleiche Weise kopiere ich diesen Link füge ihn zweimal ein. Diese Sekunde ist der Name der Profilklasse innerhalb der Menüelemente. Und hier schreibe nur ich Phi. Das dritte sind Einstellungen, LastName, Link. Und hier schreibe ich Einstellungen wie diese. Okay, das ist die Sidebar-Komponente ist fertig. Jetzt müssen wir an Sidebar Dot CSS arbeiten, weil es offensichtlich ein gewisses Styling geben wird sonst wird es sehr schlecht aussehen. Das erste Styling wird cidaler Inhalt sein. polsterung Die Spitze wird 20 Pixel sein. Knospen, richtig? 90 Pixel Inhalt begründen. Abstand zwischen Display, Flex, Flexrichtung, Säule, Höhe. Fünftens ätzen wir Align-Artikel. Und dann hat die Detail-Klasse display, flex. Lesen als Pixel, Lücke. Pixel. Inhalt begründen, starten. Elemente zentrieren. Text, Dekoration, keine, und es wird wichtig sein. Dann richten die Menüpunkte Glas Display Flex Inhalt dieser Lücke aus. Aber in Pixel, Rand, oben, zwischen Spitze Excel. Dann Elaine. Artikel werden in der Mitte sein. Dann schriftart. Das Gewicht wird 600 sein. Schriftgröße. Zwischen typischen Zellen, Padding, zehn Pixel. Der Grenzradius wird tausend Pixel betragen. Die Farbe wird weiß sein. Und es wird wichtig sein. Decks Deklaration wird keine sein. Und es ist wieder wichtig. Dann. Ich werde Menüpunkte haben. Und was passiert, wenn Sie den Mauszeiger darüber bewegen, dann wird der Cursor ein Zeiger sein. Die Hintergrundfarbe wird 2828 bis acht sein. Dann haben wir die Profilklasse. Es wird Anzeige, Flex, Flex-Richtung, Spalte haben und Lücke wird fünf Pixel betragen. Speichere jetzt alles. Und mal sehen, wie die Benutzeroberfläche mit dieser Seitenleiste aussieht. Siehst du, und was für einen Fehler ich gemacht habe, war hier dieser Würfel. Dies wird ein Benutzer sein und der letzte wird Kg sein. Sehen Sie, wir haben hier verschiedene, unterschiedliche Icons. Profil-Einstellungen. Jetzt ist diese Seitenleiste fertig. Im nächsten Video werden wir an der rechten Leiste arbeiten. Danke. 14. Erstellen von Rightbar: Also haben wir uns im letzten Video in der linken Seitenleiste gebildet. Es ist Zeit. Wir arbeiten hier in der rechten Leiste, das ist dieser Abschnitt. Gehen wir also zu den Komponenten. Hier. Erstellen Sie zwei Dateien. Vorname es, rechter Taktpunkt js. Und die zweite Datei wird rechts bar dot CSS sein, rechts Pod dot js. Einfach importieren ist React aus der Bibliothek. Und zweitens werden wir das CSS importieren. Das ist richtig, Bar Dot CSS wie dieses. Dann eine Funktion. Im Moment wir nur leere Klammern zurück. Und schließlich werde ich export default schreiben. Rechte Leiste. Verlasse. Ist die CSS-Datei vorerst leer? Gehe zu app dot JS. Ja, Import, rechte Balkenkomponente. Und in diesem Seitenleistenbereich rufen Sie einfach an. Und ich habe diese früher so gekauft , hier haben wir die sogenannte Sidebar-Komponente. In diesem Abschnitt nennen wir es richtig, aber speichern Sie es. Das nächste, was wir wollen, ist im Quellordner dort, wo wir den Ordner images haben. Fügen Sie irgendwelche Dummy-Bilder hier ein. Sie können jedes beliebige Bild aus dem Internet herunterladen und es einfach hier einfügen. Dies wird Dummy-Werbung oder Nachrichten sein oder was auch immer Sie auf der rechten Seite sehen. Ich habe diese Bilder verwendet. Sie können das Video pausieren, wenn Sie möchten. Danach, nachdem wir Bilder ganz oben haben , importieren Sie diese Bilder. Das ist wichtig. Ich nenne nur den ersten, Schutzhelm. Aus Bildern, oder hat Punkt JPEG. Kopiere es dreimal. Zweitens schreibe ich Solidität. Der Image-Name ist ausschließlich das D, und der nächste ist Meta-Maske. Und hier schreibe ich mein Dallas. Im Moment importieren wir nur drei Majors. Okay, ich habe auch diesen CD-Act. Lassen Sie uns das reaktive Bild importieren, auf das sie reagieren. Das Bild ist eine PNG-Datei und eine GIF-Datei wie diese. Jetzt, da ich hier Dummy-Daten haben werde, werde ich eine Variable erstellen , die ein Array sein wird. Es wird aus Objekten bestehen. Das Bild, das ich hatte. Erfahren Sie, wie Sie Hardware Dev verwenden. Und wenn Sie möchten, können Sie auch Link verwenden. Wenn Sie möchten, dass der Benutzer wirklich irgendwohin umgeleitet wird. Aber im Moment ist das nur ein leerer Link und füge ihn dreimal mehr ein. Zweitens werden wir solide sein. Ich werde einfach Master Smart Contract schreiben. Die 30er Jahre reagieren auf Meisterschaftsakt erst 2022 oder 20, Maske. Dennoch werde ich sehr gerne Webentwickler. Das sind nur Scheindaten. Denk dran, danach werde ich ein Dummy-Suchfeld haben. So wichtig. Eingabe aus UI-Code, Web-Drei-UI-Code und ich werde die Suche importieren und diese Eingabe werde ich hier groß N sein. Suchsymbol aus dem Web drei UI-Symbole wie dieses. Lassen Sie uns jetzt einen div-Inhalt haben einen div-Inhalt . Ich nenne es. Dann habe ich einen Input. So wie das. Das Level wird Suchen sein. Name, suche. Am Ende haben wir ein Präfix. Ich werde dieses Icon haben, das ist das Suchsymbol. So wie das. Und die Hintergrundfarbe wird Hashtag sein. Eins für eins, kleines D bis sechs. So wie das. Dann werde ich noch einen Div haben. Dieser Nachname werden Trends sein , die ich mir nur eine Überschrift geben werde Kreditvergabe. Und jetzt schleife ich einfach so durch den Wirbel den Wirbel. Und ich werde hierher zurückkehren . Dave. Klassenname, Trend. Auf Klick. Ich werde einfach window dot open schreiben, E dot link so. Und in diesem Div wird es Bild E einfach Bild E Punkt geben. Es wird ein Punktbild sein. Klassenname, Trendbild. Wir werden es gleich nach einiger Zeit stylen. Und dann noch ein div mit diesem Text, der Trend ist. Weiter. Hier wird ein E-Punkt-Text wie folgt ausgegeben. Das war's. Jetzt wird es schrecklich aussehen, wenn wir diesen Styling-Teil nicht machen. Gehen wir also zum Schreiben von Balken-Stylings , die von Punkt-CSS gelesen werden. Als erstes werde ich bei acht Takten Inhalt bleiben , indem ich unify Fix-Zelle mit 80 Prozent hinzufüge. Dann dunkle Trends. Hintergrundfarbe, Azteken sollen 34 sein. Dann Randradius von fünf Pixeln. Dann ist die Mindesthöhe, schätze ich h minus 200 Pixel? Maximum, bewertet 90 Pixel. Rand, obere Spitze, Achselhöhle. Durch Hinzufügen der Pixel. Schriftstärke, fett, Schriftgröße, 18 Pixel, Überlauf. Und dann werde ich Trend stylen. Dieser Trend. Zeigen Sie einfach Flex an. Inhalt begründen. Starte. Richten Sie Elemente aus. zentrieren. Lücke zwischen dem Pixelrand, obere 15 Pixel. Padding, zehn Pixel. Danach werde ich einen gewissen Schwebeeffekt haben. Zeiger- und Hintergrundfarbe. Wenn wir schweben, sollten wir aztekisch sein? Siehe 353 e. Dann Markenimage. Du hast es rot gemacht. Und rote Pixel, Rand, Radius, große Zelle. Und schließlich, als nächstes, eine Größe von 15 Pixeln. Schriftgewicht, normal. Speichern Sie jetzt den gesamten Code. Lass es kompiliert werden. Und sieh zu, dass du einfach siehst, dass es gut aussieht. Ich denke, der Bonsai sieht nicht gut aus. Mal sehen. Wir haben hier einen Rechtschreibfehler. Trend. Sehen. Jetzt ist die Schriftgröße auch absteigend. Wir haben diese und alle hier. Also werde ich überprüfen und auffüllen. Also hier haben wir den richtigen Inhalt. Mal sehen. Es ist okay. Was ist, wenn ich 90 Prozent mache? Okay? Durch Hinzufügen von d haben wir diese tiefere Ausstrahlung. Okay? Dann Trends, Hintergrundfarbe, Grenzradius, Mindesthöhe, maximale Rate. Wenn ich die maximale Breite erhöhe, ändert sich nichts. Rand, oben auf Größe. Dies, dann haben wir Trend, rechtfertigen Inhalt, Center Marge, Top 15%, indem wir 10% hinzufügen. Mal sehen, wie es aussieht. Nur ein paar Probleme mit dieser Seite. Ich denke einfach, sollten wir es nicht schaffen, sollte es in einer Zeile wie dieser und allen sein. Das Bild in der App dot css. Warum hier? Okay, im Moment sieht es gut aus. Wenn ich etwas ändern will, mache ich das im nächsten Video. Danke. 15. Lass auf der Startseite arbeiten: Hi, willkommen zurück. In diesem Video werden wir an der Homepage arbeiten. Aber bevor ich weitermache, möchte ich nur ein bisschen ändern hier in der App dot CSS da drin, rechts Busabschnitt, ich werde einfach die Breite von 45 hier ändern , die 55, das war's. Jetzt sieht unsere App wettbewerbsfähig aus, bevor sie die richtige Entfernung und alles hat. Und wir brauchen auch ein paar Dummy-Images. Ich habe diese Bilder hier. Wenn Sie möchten, können Sie einfach einen Google-Avatar oder ein beliebiges Hintergrundbild verwenden. Wenn du willst. Verwenden Sie es nur zum Erstellen der Benutzeroberfläche. Wie auch immer, es wird später geändert. Erstellen Sie also eine neue Datei im Quellverzeichnis und benennen Sie sie. Standardbilder Punkt js. Dann schreibe einfach export. Konst. Standard. Bilder sind hier gleich n. Fügen Sie einfach diese beiden Bilder ein. Dies ist ein beliebiges zufälliges Avatar-Bild. Und dieses wird verwendet, um als Banner für den Profilbereich verwendet zu werden . So wie das. Und rette es. Okay. Gehen Sie jetzt zu Seiten und in der Home-Punkt-JS-Datei. Jetzt fangen wir an, etwas Code zu schreiben. Eingabe aus dem Internet. Drei UI-Kit-Symbole sind der Kern, nicht der diagonale Schrittcode. Wenn Sie möchten, können Sie sich das Web Three UI Kit ansehen und sich das Web Three UI Kit ansehen und welche UI-Elemente bieten sie? Und zweitens werde ich ein Bild mit drei UI-Symbolen importieren . Und schließlich werde ich Standardbilder importieren. Standardbilder hier. Da ich keines davon benötige, handelt es sich nur um Scheindaten. Ich werde auch das Link-Ei entfernen. Und fange an, ich denke von Grund auf neu, ich werde eine Entwicklung haben. Und wir geben ihr einen Klassennamen, Hauptinhalt. Dann nehme ich noch einen Dave. Ich werde niemals fünf bis acht wachsen. Dann werde ich noch einen Abschnitt wie diesen haben. Und hier werde ich das Avatar-Element aus dem Web Three UI Kit verwenden . Und ich werde einfach tot sein, dann wird das Bild sein, Moment wird es Standard sein. Dieses Standardbild, Bilder an der Position 0 in der Bildgröße 60, wie folgt. Dann habe ich einen Textbereich. Etikett. Dass ich gerade nichts plane. Ja. Typenschild Als nächstes Fläche, Leasinginhaber, gleich dem, was vor sich geht. Und Glasname wird Text sein, Bereich wie dieser. Dann nehme ich diesen Dave. Und danach wird div eine Adresse haben. Dave. Und ich gebe ihm den gleichen Klassennamen wie der Tweet-Bereich. Darin. Ich werde Dave haben, dieser hat ClassName image div. Dann werde ich das Image-Bildelement verwenden, um von den Icons auf Größe 25 zu kommen . So wie das. Danach hast du Steve gemacht, ich werde einfach noch einen div haben. Ich werde das Gewicht schreiben und der Klassenname wird essen sein. Nach dem Styling werden Sie wissen, dass Sie alle weniger Abschnitte zum richtigen Zeitpunkt verstehen werden nur die SDM-Abtreibung bekommen. Nach diesem Div. Hier. Ich werde haben Ich werde haben einfach Net-Abschnitt haben, den Feed-Bereich. Und wir werden hier die Obstabteilung haben. Ich werde den Frucht-Bereich haben, in dem steht, okay, jetzt lass uns zum Home Dot CSS gehen. Lass uns ein bisschen stylen. Beginne mit einem Textbereich. Das fünfprozentige farbige Kapital, dann Hintergrund, transparent. Rand, zwei Pixel. Dann Grenzradius. Behalten Sie Excel. Dann Mindesthöhe. Und rote Pixel durch Hinzufügen von 15 großen Zellen. Überlauf es. Und dann werde ich Gewicht haben. Unten ein Pixel, solides RGB, 63363. Und Polsterung. Wir sind im Pixel. Dann habe ich diesen Tweet-Bereich. Anzeige. Flex. Begründen Sie den Inhaltsabstand zwischen Wartezeiten, 95 Prozent. Richten Sie Elemente aus, zentrieren Sie, Rand, obere zehn Pixel. Dann bleibe ich dazu geführt. Klasse. Hintergrundfarbe. Für sieben, E5. Wählen Sie dann eine Zelle und 20 Pixel, Randradius, tausend Pixel weiß. Dann haben wir gehämmert. Also Bild, sie haben einen Grenzradius von 50 Prozent. Dann Pixel hinzufügen. Rand links, es zeigt den Verkäufer. Und dann füge ich Bild hinzu div hover, Curtis, Binder, Hintergrund, Farbe. Mach es, mach es so. Ich rette einfach alles. Und mal sehen. In der app.js haben wir den Home-Bereich. Okay. Es ist nicht in den Einstellungen. Deshalb. Gehen wir nach Hause und sehen es uns an. Es sieht gut aus. Jetzt ist nur noch der Textbereich. Mal sehen. Mal sehen was mit dem Textbereich los ist. Sie werden einfach CSS überprüfen. Wir haben Seitenrand, starb ADS, Mindesthöhenmessung ist der Überlauf versteckt. Dann schaue ich mir das wirklich an. Jetzt funktioniert es. Ich habe nichts getan. Ich entferne einfach diesen Code und schreibe einfach dasselbe. Schon wieder. Es ist wie Textarea Klassenname, Nachname, dieser und Platzhalter oben, was ist los? Das war's. Jetzt können wir hier schreiben, es funktioniert. Das nächste, woran ich gerne arbeiten würde , ist dieser Bildausschnitt. So wählen Sie ein Bild aus dem Benutzerverzeichnis aus. Ich werde einfach von React importieren. Sie geben an, verwenden, ref. Diese beiden. Dann nach einigen Variablen hier, das heißt, ist die Eingabedatei gleich RAF night. Dann const ausgewähltes Bild, Set, ausgewähltes Bild. Sie verwenden Daten. Dann würde ich einen weiteren const-Text benötigen. diesem Text werden Datum und leere Zeichenfolge verwendet. Dann erstelle ich eine Funktion, benenne sie auf Bild, klicke, Eingabedatei, Punkt, Aktuell, Punkt, Klick. Und dann werde ich Wechselgeld haben. Hundeführer. Ereignis. Konst. Die Bilddatei entspricht den Ereignis-Punktpunktdateien 0. Dann setze ich das ausgewählte Bild-URL-Objekt , URL-Bilddatei wie folgt. Danach einfach. Wir werden in den Textbereich gehen. Ja. Und ich werde ihre eigene onChange-Methode schreiben, die einfach Text auf das setzt , was auch immer hier geschrieben wird. E Punkt, Punkt, Punktwert, so. Okay? Und dann habe ich dieses Bild, das ich den onclick geben werde und einfach auf Bild schreiben, klicken. Deaktivieren Sie. Danach. Hier drinnen werde ich ein Eingabe-Tag haben, das die Datei war. Typ wird fünf sein. Freunde, wird Eingabedatei sein. Und Veränderung, wird Veränderung sein. Und lerne und style. Das muss man gesehen haben. Ich werde einfach keine anzeigen. Ich möchte nicht, dass dieses Eingabe-Tag angezeigt wird, sondern das Eingabeelement angezeigt wird. Ich möchte nur, dass die Benutzer in dieses Bild klicken können. Und ich werde nur eine if-else-Anweisung haben. Wenn das ausgewählte Bild wahr ist, zeige ich einfach das Bild-Ei, welche Quelle. gewählte Bildbreite beträgt 150. Und wenn nicht, dann zeige ich dieses Tag. Das ist das Bildsymbol. Das war's. Rette das ganze Fleisch. Wählen Sie die Datei aus und sehen Sie. Jetzt kann ich ein Bild auswählen. Und wenn der Benutzer möchte, kann er es erneut ändern, indem er hier reinklickt. Das war's. Dieser Bildausschnitt ist abgeschlossen. Im nächsten Video werden wir hier an der Fußsektion arbeiten. Danke. 16. Erstellen der Feed: Hi, willkommen zurück. In diesem Video werden wir an diesem Feed-Bereich arbeiten. Dazu müssen wir eine neue Komponente erstellen, zum Ordner Komponenten gehen und eine neue Datei in feed dot js erstellen . Und habe auch eine CSS-Datei dafür. Das Gewicht in ID Dot CSS. In intuitiver Feed Stühle Datei. Importiere den Akt und importiere auch das Gewicht in das Punkt-CSS. Lass uns heute Abend. Wir können neu entdeckte Halstage erkunden. Geh nach Hause dot js. Und hier plus die Datei Import Weizen in Futtermittelkomponente. Und nenne die Komponente hier einfach so. Und hier sende ich eine Requisite rho phi ist gleich falsch. Das bedeutet, dass Sie nicht alle Feeds hier haben möchten, nicht für ein bestimmtes Profil. Dann. Gute IGS-Datei. Lass uns ein paar Importe machen. Board, Standard, Bilder, dann. Kern importieren. Und in Fettdruck, Nachricht, Kreis, Stern und magischen Symbolen wie diesem. In der return -Anweisung schreiben wir den Klassennamen Dave, um ihn zu füttern. Lassen Sie uns unsere Daten hier haben. Ist abgerundet. Das Bild entspricht den Standardbildern. Das sind momentan nur ein paar Bilder. Teambild, sagen wir 60. Dann nehmen wir noch einen Dave. Nachname, kompletter Gouache. Zuerst ist Dave der Meinung, dass sie dazu neigten zu essen und schreiben jetzt nur eine Landmaske. Und dann. Einfach eine Zählung wie diese. Und hier habe ich einen Dummy-Account wie diesen. Dann Dave, className, content. Nett. Sie lernen von Grund auf neu. Und ich werde dieses Bild zeigen. Es gab eine Lichtquelle. Sie fallen Standardbilder. Und ein LastName-Bild. Dann. Nach Tagen, Dave, werde ich den Klassennamen haben. Der Klassenname ist der. Generell in ihren Interaktionen. Interaktionen werden ein div haben. Mit LastName. Interaction taub. Numbs habe ich hier Nachrichtenkreis, Icon, Schriftgröße 20. Leg diese Kopie wiegt zweimal. Dann wird es hier sein, ich werde einfach gestorben schreiben. Und ich werde zaubern. Jetzt. Ich habe diese beiden Komponenten fertig, jetzt ist es Zeit, dass wir diesen Styling-Teil machen. Lass uns gehen und Tweet lesen. Höchstrate und rote Prozent. Rand unten. Das RGB eines Pixels. Dreiundsechzig. Dreiundsechzig. Sechzig Baum. So wie das. Durch Hinzufügen von Grün, Pixel, weiß gefärbt. Inhalt ausrichten, Abstand zwischen Anzeige, Flex, Cursor, Zeiger. Dann twittern wir unsere Hintergrundfarbe. Ich ändere es einfach in diesen Hex-Code eins. C, tu es. Vorher. Dann werde ich das komplett aushalten. Twittern. Diese Flaggen. Rechtfertigen-Inhalt, fang an. Entspannen Sie sich im Netz. Spalte, Lücke. Wählen Sie dann Zelle D9 Prozent aus. Okay. Dann habe ich wirklich bei den Wahlen, den Wahlen mitogen. Dann Pixel. Dieses Stück. Lax. Ja, D5-Inhalt, Mitte, Lücke, 150 Pixel. Dann werde ich diese Wechselwirkung ändern nums ash, T F T, F, T F. Display, flex. Richten Sie den Inhalt aus, dunkel, Lücke, dann Pixel. Durch Hinzufügen von Pixeln, Rahmen, Radius. Tausend Pixel. Danach. Ich weiß, dass es viel Styling gibt. Wenn ich wollte, kann ich dir einfach die Datei geben, aber ich schreibe auch über all das Zeug im CSS-Code. Weil ihr auch das Zeug baut, ist es besser. Wir machen es am 28600 von Grund auf neu. Und richten Sie Gegenstände aus. zentrieren Pixel zentrieren. Dann sind wir zufrieden und flexibel. Inhalt begründen. Starte. Biegerichtung, Säule, Lücke, dünner Zylinder. Max. Höhe auf Pixel. Dann warte. Bild, Wartezeit, 98 Prozent, Radius und Pixelhöhe 90% Dann werde ich hier eine weitere Klasse haben , die wir später verwenden werden. Ich mag statische, Spalte, Lücke, mache den Pixelvorsprung, oder? Ich weiß, dass es jetzt viel Code gab, außer. Wir schauen uns unsere Homepage an. Hier liegt ein Fehler vor. Mal sehen, was ein dummer Fehler ist. Dieser Klassenname. Ich habe es falsch geschrieben. Ich werde hier nur ein kleines f geben. Speichern und sehen. Es ist nicht alles perfekt. Wir haben das Konto hier, das Bild hier, den Text. Wenn der Benutzer ein Bild hochlädt, wird es hier korrekt angezeigt. Es sieht sehr gut aus. Das sind nur Dummy-Symbole. Dies zeigt, dass es sich im Polygonnetz befindet. So nett. Unsere Homepage ist fertig. Das heißt, die Benutzeroberfläche ist abgeschlossen. Im nächsten Video werden wir an dieser Profilseite arbeiten. Danke. 17. Lass auf der Profilseite arbeiten: Hi In diesem Video werden wir an dieser Profilseite arbeiten. Gehe zum Profil dot js. Und hier ganz oben. Lass uns etwas importieren. Lassen Sie uns zunächst Standardbilder aus Standardbildern wie diesem importieren Standardbilder aus Standardbildern . Dann werde ich das Gewicht in einer Komponente wie folgt importieren in einer . Okay, lass uns diese Links entfernen und mit active beginnen, nicht mit Dave, ich werde mit einem Bild beginnen, Nachnamendatei von einer anderen Quelle. Bilder eins. Dann haben wir noch einen div, F, B Containernamen. Dieses Profil hätte uns gefallen. Und so ist wieder ein Bild. Und jetzt wird dieses Bild angezeigt. Schreib einfach Dateibilder und z, du weißt schon, hier. Danach in HD, habe dieses Bild nicht nur steif selbstschließend gemacht. Habe noch ein div, das wird Profilname sein, hallo. Und Raphael Wallet. Hab einfach einen zufälligen Eintritt hier. Dann habe ich einen Link, der den Benutzer zur Einstellungsseite weiterleitet. Der Klassenname. Raphael. Fein. Nach diesem Link, Lass uns noch einen Tag mit Bio plus drei haben Bio plus , das bin ich. Dann lass uns haben und ich werde ein Profil haben, Web-Apps. Und darin habe ich nur eine Lasche meinen Gewichten. Dann, ganz am Ende, muss ich im Fade warten. Komponente. Breite. Profil ist gleich true. So wie das. Jetzt wird es offensichtlich aussehen, es wird nicht gut aussehen. Ich muss das Styling machen, um hier zu profile dot CSS zu gehen, und lass uns das Styling machen. Alles. Hier geht es um das Styling. Also Gewicht in Prozent, maximales Gewicht in Prozent. Höhe, um typische Zelle zu tun, überprüfen, abdecken. Und b, f, b, Container. Höchstsatz und Blei in Prozent. Anzeige. Flex. D5-Inhalt, starten. Flex-Richtung. Säule. Unten. Ein Pixel. Solide, RGB, 63. So wie das. Datei, VFB. Mit Excel. Radius. Tiefer, pixelweise , solide. Eins für einen Tag bis sechs. Relativ minus 65 Pixel. Links. Stellt dar. Dann mache das Styling der Datei. Nennen. weiß Relative Läsion minus 55 Pixel. Links. Das Pixel, Größe. Tipp Excel. Finde das Gewicht. Danach. Ich weiß, dass viel Styling gemacht werden muss. Grobe Aktenmappe. Ich weiß nicht, ob wir die Profitabilität haben, oder? Ja. Dieser. Farbe RGB. Wann, wann? Wann, wann ist für wann, wann? Wann, wann für dich Shen Verwandter. Dann minus 50 Pixel. Linkes Pixel. Schriftgröße 14 Pixel. Dann Jane-Sachen, eine Art Biografie. Lerne Licht. Nun, Sie sollten kein relatives Minus für das Pixel verwenden. Links, was ist die Pixelgröße, 16 Pixel. Schriftgewicht, 500 Dollar, oder nur gelten, wenn das Licht stimmt. Dann bin ich gescheitert. Und sein Abschnitt, wie zum Löschen, relativ minus 1 16. Pixel, links, 50 Pixel. Größe, 16 Pixel. Schriftstärke 0,5 Pixel. Einfarbiges Weiß. Wartet. Und rote Pixel, rechtfertigen-Inhaltscenter. Das hinterlässt Fahnen. Dann rohe Datei drin . Geh zu Cern. Pointer. Verfeinern. Apps. Flex anzeigen, Inhalt zentriert ausrichten, weiß, fett. Und schließlich, Profile. Registerkarte. Unten. Dann Pixel, Rand. Unten zwei Pixel. Solide Eins, großes A, großes F. Do. Ich weiß, dass in dieser Datei viel CSS enthalten war. Jetzt spar es dir. Und mal sehen, wie unser Profilbildschirm aussieht. Jetzt. Ich glaube, ich habe hier einen Fehler gemacht, weil ich lerne, dass es nicht da war. Mal sehen. Verfeinern. Das war der Fehler. Speichere es. Sieh zu, dass die Profilseite so gut aussieht. Ich weiß hier, dass das Binärbild und dieses Bild identisch sind, weil wir nur die Mediatoren verwenden. Später. Die Bilder werden anders sein, aber ich denke, es sieht sehr schön aus. Unsere Homepage und Profilseite ist fertig. Das einzige, was übrig bleibt, ist die Einstellungsseite, die wir im nächsten Video machen werden. Danke. 18. Lass die Arbeit auf der Seite Einstellungen: Hi. In diesem Video werden wir an unserer Einstellungsseite arbeiten. Gehe zu settings.js. Fangen wir hier mit unserer Arbeit an. Zuallererst werde ich all diese Längen entfernen. Dann werde ich sowohl Eingaben importieren als auch hochladen. Was ich da bin, waren drei UI-Codes. Und ich werde use state von React verwenden. Da dies Dateien und alles beinhaltet. Also werde ich einige Variablen erstellen, die Zustände sind. Zuerst werden wir file, file set, file file file aufgerufen, um ein Datum wie dieses zu verwenden. Dann gebouncte Datei, Set, Banner-Datei. Sie benutzen Staat. Dann const name. Setname ist eine gute Sache. Datum verwenden. Dann const bio. Biografie festlegen. Um einen Zustand wie diesen zu verwenden. Dann habe ich zwei Funktionen. Ausgewogen. Banner ist die Veranstaltung. Wenn event ungleich null ist. Gleicher Ort, der jetzt festgelegt ist. Dieses Ereignis. Und der zweite wird const File Handler sein. Wird es eine Veranstaltung geben? Das Gleiche. Wenn das Ereignis ungleich null ist? Dann diese Rohdatei. Sollen wir so eine Veranstaltung machen? Dann lass uns hier arbeiten. Das ist die return, eine return Anweisung wo Dave, LastName, Einstellungsseite. Zuerst werden Eingabe, Bezeichnung, Name, Name, Namensänderung, Rate und gelesene Prozent nach Grundfarbe beschriftet. Hashtag eins. Zum einen. Der 26. Ein Onchange wird einfach Name, Zielwert festgelegt. So wie das. Das zweite Eingabefeld heißt Bio. Name, Bioänderung. Und die Führung wird bio festgelegt. Dann habe ich den Nachnamen PFP, mit dem ich mein Image ändere. Ich werde diese glühende Komponente verwenden oder Sie können sagen, dies wird uns von ihnen bei drei UI-Kit gegeben. Und ich werde den Profilhandler hier verwenden. Und in ähnlicher Weise hätte ich mich verändert. Binäres Bild. Und hier wird dieser Handler verboten. Und schließlich habe ich den Speichern-Button, den ich im CSS bearbeiten werde. Gehe zu Einstellungen dot CSS-Datei. Sagen wir die Einstellungsseite. Durch Hinzufügen von 1880 Pixeln. Flex anzeigen. Flex-Richtung ist die Spaltenlücke. Das Pixel. Dann nehme ich diesen. Velar und Stapel 6878. Die Polsterung ist links. Und ich werde das CSS verwenden, um die Hintergrundfarbe zu speichern. Ein D, A1, F als das Lesen ist dann Pixel und Flügelspitze, Achselhöhle, Grenzradius. Dann weiß. Gewicht sechs und rot. Rote und rote Prozent. Flex anzeigen. Richten Sie die Inhaltsmitte aus Dann werde ich jedoch nur sagen, dass Kalkutta karzeral ist, sollte darauf hingewiesen werden. Lass uns sparen und mal sehen. Schau auf unsere Seite. Es sieht anständig aus. Seite mit den Profileinstellungen ist ebenfalls fertig. Wir haben alle unsere Seiten bereit. Bevor ich dieses Video beende, möchte ich zum Schluss einen einfachen Anmeldebildschirm für den Benutzer erstellen , da sich der Benutzer natürlich authentifizieren muss bevor er zu diesem Startbildschirm wechselt. Soweit gehe das zur Datei app.js. Hier. Ganz oben. Ich werde die Schaltfläche importieren. Drei UI-Codes sind ebenfalls eine wichtige Woche und haben das Maskensymbol von drei UI-Symbolen getroffen . Jetzt hier hätte ich gerne etwas Staat und ich hoffe, wir haben ihn benutzt. Nein, du bist nicht hier geblieben. Also muss nur eine Konstante benutzen. Ist unser zehn Zerfall Dead Set ist zehn Gated. Sie verwenden die Dateien mit dem ersten Wert, den ich gerne hätte, dass es falsch ist. Kehrt zurück. Ich werde nur eine If-Else-Anweisung haben. Iv, die Authentifizierung ist wahr. Dann werde ich dieses Div von uns zeigen. Wenn die Authentifizierung zutrifft, ist jede Sendung hier der Fluss von Stunden. Und wenn nicht, dann zeige ich diesen Bildschirm , der Dave LastName sein wird. Jetzt Login-Seite. So wie das. Dann muss ich das Logo auf sagen D sagen und ich werde einen Knopf haben. Ich werde jetzt einen Button hier haben, der sich aufhebt. Es wird einfach nichts bewirken. Größe X L, X zwei. Wenn wir uns mit MetaMask, Team, anmelden, das primäre Symbol diese Maske. Das kann mir gefallen. N im App-Punkt-CSS haben wir diese Anmeldeseite. Css, wie du siehst. Wie ich nur sagen werde, nun, wenn ich auf meine Website gehe und wenn ich sie aktualisiere, sie kompiliert, mal sehen, ob sie im Editor vorhanden ist. Okay, sehen Sie, unser Login-Bildschirm sieht auch sehr gut aus. Es ist sehr einfach, aber es macht unseren Job. Das ist alles für dieses Video. Ich hoffe du hast viel gelernt. Im nächsten Video werden wir an diesen Funktionen wie dem Login mit meiner Maske arbeiten . Dann werden wir irgendwann mit einer test.js Daten aus unserer Blockchain holen. Also bleib einfach dran und lerne weiter. Danke. 19. Benutzer mit Metamask authentifizieren: Hi, willkommen zurück. In diesem Video werden wir die MetaMask Benutzerwoche authentifizieren. Zuvor hatten wir diesen Anmeldebildschirm. Jetzt ist es an der Zeit, die Funktionalität zu schreiben. Gehen wir also zur App Dot JS-Datei. Hier werde ich sicherstellen, wie wichtig alle Abhängigkeiten sind. Als erstes bräuchte ich den gebrauchten Effekt. Dann habe ich von einem Kern aus getan , der sowohl eine Benachrichtigung als auch das Laden von Starr erfordert . Dann habe ich das, ich kann es einfach drehen. Und danach werde ich Ether und Utils von Essern importieren Ether und . Das benötigen wir. Dann benötige ich ein Web-Tree-Modell. Aus dem Web-Tree-Modell. Danach benötigen wir Schriftart, Ziehen, Adresse. Rom. Kann Phi Prime hier freak. Danach benötigen wir den ABA, ABA-Ordner und klicken dann auf diesen Punkt Jason. Und schließlich benötigen wir unsere Abhängigkeit. Ich setze mich einfach so hin, wie du es willst und dann unseren Todd tunen. Dies sind die Abhängigkeiten. Und ich glaube, wir haben den Cartoon. Ist dein Tag schon installiert. Mal sehen, alles ist in Ordnung, jetzt ist ein Fehler da, kompiliert. Ich schätze alles ist in Ordnung, okay. Jetzt brauchen wir einige Zustandsvariablen. Wie wir es tun werden, werden wir diesen Datensatz benötigen. Der Anbieter ist ein cooler zu verwendender Zustand und wir werden es beim ersten Date langweilig haben. Danach benötigen wir Benachrichtigungsbibliothek aus dem Web Three UI Kit. Und dann haben wir einen Zustand, nur um zu zeigen, ob das Laden des Getting nicht gesetzt ist. Ladezustand ist bereit, es zu verwenden. Und als erstes lesen wir Akten. mehr über Benachrichtigungen zu erfahren, können Sie auf die drei UI Kit-Website, offizielle Website, gehen und sehen wie Sie diese Benachrichtigungen und alles andere verwenden. Ich werde nur eine Warnmeldungsfunktion haben. Urlaub ist gleich so. Es heißt einfach keine Defäkation. Das ist dieser. Es wird einfach das haben. Und darin müssen wir einige Parameter wie Typ, Warnung, Nachricht, Änderung, Netzwerk senden . Wer Polygon, um diese Seite zu besuchen? Danach werde ich es einfach zum Polygonnetz wechseln lassen. Und danach habe ich einfach die Position der Benachrichtigung oben rechts. So wie das. Das war's. So zeigen wir eine Benachrichtigung an. Okay. Ebenso benötigen wir eine weitere Benachrichtigung, die als Info-Benachrichtigung bekannt ist. Typ wird vollständig sein. Es wird eine Kontonummer akzeptiert. In dieser Nachricht wird einfach die Kontonummer angezeigt. Und hier werden wir schreiben, dass ich erzähle verbunden mit Polygonkonto. Das heißt, wenn der Benutzer das Polygon-Konto wechselt , wird auch eine Benachrichtigung angezeigt, da dieser Benutzer kein anderes Netzwerk wie vierteljährlich oder Rob Stone und alle verwenden kann . Aber er kann definitiv Konten im Polygon Wallach wechseln. Das war's. Jetzt fangen wir an, diese Funktion zu schreiben. Ich nenne es, connect, wallet, sink, so. Jetzt benötigen wir dafür das Web-Drei-Modell. Ich werde einfach Web drei in 70 schreiben, entkomme es. kleine Baummodell entspricht dem neuen Modell. Dann brauchen wir Verbindung gleich auf model.fit connect zu warten. Danach haben wir den Cloud-Anbieter gleich neuen Essern, dass Anbieter, Dodd Web drei Anbieter. Und wir werden diese Verbindung so hierher schicken. Danach erhalte ich das Netzwerk, dem das Netzwerk verbunden ist. Weil die Site nur im Polygonnetz geöffnet wird. Warten Sie auf Anbieter dot get Netzwerk wie dieses. Und wir wissen, dass für eine IgA1-Polygonkette die ID 80001 entspricht. Dies ist eine Kettenidee eines Polygonnetzwerks. Ich werde jetzt eine If-Else-Klausel haben. Wenn Sie die Netzwerk-Punkt-Jane-ID erhalten, nicht gleich der Polygonketten-Idee, wenn sie nicht gleichgesetzt wird. Dann zeige ich zunächst eine Warnmeldung. Nachmittag. Ich werde unseren Switch hinzufügen. Dann netzwerken. Was ich damit meine, ich werde einfach extrem. Wählen wir es nach unten aus. Also einfach das andere. Es wird ausgeführt, wenn Polygonkette verbunden ist. Okay? Und jetzt werden wir an diesem Versuch arbeiten. Ich werde einfach auf Anbieter warten, Anbieter schreiben , dass die Anfrage. Was ich also verlangen werde, ich werde meinen Ted bitten, es dauert eine mittlere Kette. Das ist, ob es mit etwas anderem verbunden ist, das göttlich ist, oder mit einem Netzwerk zwischen Switch das Netzwerk. Und Paradigmen. Paradigmen, wir werden Chain Chain ID schreiben. Utils, Punkt-Hex-Wert. Sendet einfach die Polygon-ID. Und hier, wenn es erfolgreich ist, werden wir einfach Sie neu laden, das heißt Fensterposition, nicht so neu laden. Und dieser Zusatzcode zeigt an , dass diese Kette nicht zu meinem Schaden hinzugefügt wurde. Das heißt, der Benutzer hat diese Kette nicht. Okay? Aber auf jeden Fall müssen wir diese Kette hinzufügen. Das ist das Polygon-Testnetzwerk für Benutzer Themenmaske. Wir versuchen nur, ihre Website voller Funktionen zu gestalten . Okay? Nun, das heißt, wir werden und Polygon-Netzwerk. Du. Dad, meine Papa-Maske. Okay. Lassen Sie uns nun prüfen, ob Switch-Punkt-Code 4902 entspricht. In diesem Fall einfach abtrocknen. Ja, ich würde einfach hinzufügen , dass edit ist, während wir dort hinzufügen, es wurde geworfen. Okay. Und hier werde ich einfach versuchen, den Account hinzuzufügen. Entschuldigung, dass im Blockchain-Anbieter diese Anforderungsmethode Wallet heißt. Hinzufügen. Es ist Langeweile. Eingehende Muster. Wir werden alles haben. Das ist. Jane ID wird utils sein, dieser x-Wert. Wir müssen eine Polygonketten-Idee als Polygonnetz mit dem Namen der leichten Kette der Fluggesellschaft schreiben . Dann RPC-URLs. Habe einfach einen RPC. Oder wenn Sie den PC wechseln können, googeln Sie ihn einfach. Wenn, wenn diese URL nicht funktioniert, Mumbai dot chain, stack, labs.com, block x low URLs, HTTP und HTTPS. Mumbai-Polygon-Scan. Es ist wirklich Mumbai, Mumbai Punkt Polygon scan.com. Und dann werde ich einen einheimischen Garten haben. Sehen. Ich werde die Landeswährung haben. Hier. Wir müssen schicken. Symbol, Magie und Dezimalzahlen 180 k. Und hier werde ich es einfach haben. Dann ist das ein Gewicht. Und nachdem dies erledigt ist, einfach die Punktposition des Ladefensters, Punkt neu laden, so. Hier fügen wir also die Stadionkette hinzu, das ist die Polygonkette, falls der Benutzer sie noch nicht hat. Und in der früheren Version fügen wir einfach hinzu und wechseln diese Kette. Das heißt, wenn der Benutzer eine andere Kette verwendet, wird er diese hier einfach ändern. Ich hoffe es liegt kein Fehler vor. Alles wird funktionieren. Okay. Und jetzt müssen wir an dieser L-Sektion arbeiten. Sie wird ausgeführt, wenn Polygonkette mit der MetaMask verbunden ist. Was wir hier tun werden, ist überprüfen, ob es keine Benutzer gibt. In unserer Blockchain. Wir werden die Benutzerdetails in unserem Vertrag sowie den lokalen Speicher aktualisieren . Damit meine ich, dass wir auch hier lokalen Speicher verwenden werden. Zuallererst, was ich tun werde, ist, dass ich mich vom Schreibtisch abmelden lasse, vorausgesetzt , dass der Unterzeichner so wird. Dann bekomme ich dieses Zeichen, dass ich mich kleide, signier dot bekomme und mich so kleide. Dann kriege ich den Vertrag. Instanz des Vertrags, dieser neue Vertrag, dieser Vertrag C wird so kapital. N hier, was ich seiner Twitter-Vertragsadresse schicken werde. Dann Twitter ABI Punkt aba. Und schließlich der Unterzeichner, so. Und hier werde ich den Get User Detail Fonds Chen nennen , das ist GetUser await. Auf Kurs. Benutzer holen. Wenn Sie zu dem intelligenten Vertrag gehen, der diese Solidität verwendet, sehen Sie diese Methode getUser, wo sie die Adresse akzeptiert. Was wir jetzt tun, ist überprüfen, ob dieser Benutzer ein neuer Benutzer ist oder bereits zuvor authentifiziert wurde. Das war's. Das fügen wir hinzu? Schulden. Was wir also hier validieren , erhalten wir einfach Benutzerdetails. Wenn der Wert für das Profilbild vorhanden ist. Das heißt, wenn Benutzer hier sind, werden wir einfach ein erstmaliger Benutzer erhalten und, ähm, und im Vertrag aktualisieren. Okay? Das müssen wir tun. Und danach haben wir das gemacht, da das hier ist, müssen wir einfach den Set-Anbieter mit seinem Providerwert lesen . Und Set ist unser 10. Ticket für wahr. Und diese Funktion oder diese if-else-Anweisung werden wir im nächsten Video schreiben. Ich weiß, dass es in diesem Video viel zu tun gab, dieses Video so lange. Aber wie Sie sehen, war dieses Video unser wichtigstes Video in unserer Sektion. Danke. Fahren wir im nächsten Video fort. 20. Überprüfe ob der Benutzer bereits existiert: Willkommen zurück. Fahren wir hier mit unserer Funktion connect vallate fort. Nehmen Sie zunächst einfach dieses kleine Änderungs-IG vor, bei dem es sich um ein Profilbild handelt. Und wenn der Benutzer bereits existiert, dann werde ich einfach festlegen, dass ich in diesem lokalen Speicher mit dem Namen abgelegt habe, als erstes werde ich ein aktives Konto wie dieses schreiben. Und ich habe Jason Dot Stringify weitergeleitet. Und hier wird es ihre Adresse kündigen, aber ich werde das einfach noch einmal kopieren. Und hier wird es sein, das wird bei einem Kleid wie diesem eine Selbstverständlichkeit sein . Also speichere ich es einfach im Browser des Benutzers. Es ist sein Kontoname. Dann werde ich schreiben, Benutzername, wird hier sein, getUser Detail, und es wird in einem JSON-Format kommen und ich werde einfach den Namen schreiben. Und in ähnlicher Weise werde ich Paste kopieren. Zweitens wird die Benutzer-Biografie sein. Es wird Bio sein, dann wird es ein Benutzerbild sein. Und das nächste wird ein Benutzer-Banner sein. Und hier ändere es in Profilbild. Und das zweite wird ein Profil sein, wie dieses. Okay? Das passiert also, wenn der Benutzer existiert, und danach wird er das setzen, das bereitstellen und diese authentifizierten auf true setzen. Andernfalls, wenn der Benutzer ein Erstbenutzer ist. Jetzt schreiben wir zuerst set loading state is equal to true. Dann werde ich einfach LED schreiben , um unseren Teerpunkt abzustimmen, unseren Reifen so zu erzeugen. Also werde ich hier ein Standardbanner haben. Ich werde jetzt den Standard von Standardbildern verwenden. Dann habe ich diesen. Ich werde es als Standardbanner verwenden. Okay? Dann werde ich in ähnlicher Weise hier dasselbe tun. Als lokaler Speicher festlegen. Der Benutzername ist also leer, da es sich um einen neuen Benutzer handelt. Der Benutzername ist also leer. Benutzerbiografie ist leer. Da wird der Benutzer die Biografie später aktualisieren. Das Benutzerbild wird unser Todd sein. Dieser. Nur ein zufälliger Avatar. Und Benutzer-Binärdatei wird dieses sein, Standardbanner wie dieses. Also hier hoffe ich, du hast es bis hier verstanden. Danach werde ich einfach versuchen, diesen Catch-Block so zu haben . In diesem trockenen Fall werde ich einfach schreiben, dass Const-Transaktion einem Rate-Contract-Dot-Update-Benutzer entspricht . Jetzt müssen wir ein paar Dinge senden, Benutzername, Benutzerbiografie, Profil, Bild und Banner wie dieses. Dann werde ich sofort eine Transaktion durchführen, Transaktionsdaten wie diese gewichten. Okay. Und wenn es einen Fehler gibt, werde ich zuerst console.log Adder schreiben. Nur für Debugging-Zwecke. Und der Benutzer hat keine Magie in seinem Konto. Nur zu diesem Zweck zeige ich eine Warnmeldung vom Benachrichtigungstyp. Holen Sie sich das beste magnetische RAM-Polygon oder ein Set. Für diese Transaktion , bei der es sich um eine Update-Benutzer-Transaktion handelt, benötigen wir offensichtlich , bei der es sich um eine Update-Benutzer-Transaktion handelt, eine Art somatischer Token, da es Gas gibt und all dies hier involviert ist. Erfordert mindestens 0,1 medizinische Technik. So viel ist erforderlich , um auf unserer Website angezeigt zu werden. Und partitionieren. Oben rechts. So wie das. Setzen Sie nach dieser Multiplikationsregel den Ladestatus auf false. Und von hier komme ich einfach zurück. Das war also der Else-Block. Das heißt, wenn der Benutzer zum ersten Mal Benutzer ist, haben wir den Standard-Avatar , der zufällig generiert wird. Offensichtlich wird jeder Benutzer seinen eigenen Avatar haben. Und weiter Standard-Banner. Ich habe mir keine andere Bibliothek ausgesucht. Ich habe einfach nur ein Dummy-Image. Jetzt ist es an der Zeit, den HTML-Teil wirklich zu erledigen. Also hier haben wir authentifiziert side divide ist ihr Hauptfenster, o k. Jetzt auf der Anmeldeseite haben wir dieses. Dann Twitter Bild. Jetzt hier werde ich das Laden haben. Wenn und sonst wird es geladen. Dann werde ich eine Ladestarre zeigen. Gleiche Platzgröße, 50, Spinner-Farbe grün. Und wie ich das zeigen werde , aber fertig. Okay. In diesem, aber dann wird es einfach Wallet verbinden. Und ansonsten haben wir XL. Hier ist alles in Ordnung. Speichere es. Sehen wir uns unsere Website an. Ich hoffe hier ist alles in Ordnung. Was ich jetzt tun werde, ist diese Wallet-Funktion mit dem US-Effekt-Hook auszulösen. Hier. Ich werde einen Effekt wie diesen verwenden. Es sollte ausgelöst werden , wenn die Seite geladen wird. Jetzt FASTA-Datei, was ich tun werde, ist einfach zu schreiben, wenn dieser Anbieter nicht da ist, das heißt. Es ist kein My Thomas installiert. Ich werde einfach window dot alert schreiben. Nein. Meine Maske wurde so installiert. Und ich werde window.location dot ersetzen HTTPS assimilieren. Mask.io wird auf die offizielle Website gehen. Und wenn nicht, dann rufe ich einfach die Connect-Wallet-Funktion auf. Und auch ich werde diese Methoden zur Verfügung stellen , dass dieser Anbieter Punkt auf. Als erstes werden die Konten geändert. Es wird ein Funktionsaufruf-Handle geben, wenn Kleider geändert werden. Dann habe ich mich verändert. Wir werden also eine Funktion namens handle gene geändert haben. Dann schreibe ich einfach diesen Connect. Und es wird einfach eine schwerere Funktion namens Handle this connect handhaben. Lassen Sie uns diese Funktionen erstellen und geänderte Konten löschen. Es wird uns Rechenschaft geben . Hier. Ich mache einen Scheck. Wenn die Anbieter-Punkt-Chain-ID der demotischen Ketten-ID entspricht , ist dies die mitotische Ketten-ID. Dann werde ich zur Benachrichtigung erscheinen und einfach Konten 0 senden, das ist das Konto Zahl. Auf der Website wird also angezeigt , welches Konto ausgewählt wurde. Der zweite. Danach möchte ich, dass es offensichtlich neu geladen wird. Aber es gab einige Probleme. Um zu verhindern, dass zum ersten Mal zweimal neu geladen wird, verwende ich diese if-Anweisung. Sonst wurde es nicht benötigt. Sie können es aber auch ohne diese if-Anweisung versuchen. Und Sie werden sehen, dass die Website zweimal geladen wurde und nach dem gefragt wurde, was Sie sagen. Diese Transaktion mehrmals für dieselbe Transaktion. Also möchte ich erst heute ein aktives Artikelkonto hier bekommen. Wenn es nicht gleich Null ist. Wir setzen ein Timeout. Einfach. Ich werde den Fensterstandort dot reload schreiben . Und es sollte innerhalb von Bäumen nachgeladen werden. Das kann. Ich sage es nur noch einmal. Sie können es ohne diese Anweisung versuchen, aber es wird zweimal neu geladen. Dann. Jetzt werde ich eine andere Funktion namens chain geändert haben. Wir haben also die Ketten-ID hier. Wenn Shane also nicht unserer magischen ID entspricht, erhalten wir eine Warnmeldung. Und wir werden einfach window dot, location, dot neu laden. Und schließlich, wie jetzt, mache ich nichts. In dieser Aussage. Hier. Wenn du willst, kannst du es tun, tun was du willst. Also hier haben wir alles bereit. Jetzt ist es an der Zeit, es zu testen und zu machen, denken Sie daran, dass ich das bereits getestet habe. Also habe ich vielleicht irgendeine Art von Sitzungen oder Einheimischen in unserem vorherigen lokalen Speicher. Also versuche ich zunächst sicherzustellen, versuche ich zunächst sicherzustellen kein Konto damit verknüpft ist. Ich glaube, es gibt kein Konto. Okay. Weil es diese Funktion auslöst. Okay, zum Testen. Gehen wir zu einer anderen Ketten-ID und wir zeigen es Ihnen einfach. Ich gehe früh ins Testnetzwerk, okay? Wenn ich jetzt alles rette, sieh dir das als Erstes an. Es fragt, okay, verbinde dich mit meinem Thomas. Ich sage als nächstes. „Verbinden“. Dann werden wir gebeten, sie in Ihr Polygon-Testnetz einzufügen. Ich gehe und wechsle es einfach. Jetzt wird es geladen und jetzt werden wir aufgefordert, und jetzt werden wir aufgefordert diese Transaktion durchzuführen, um den Benutzer zu aktualisieren. Ich bestätige es. Jetzt schauen wir mal, was passiert. Tun Sie hier. Habe irgendeinen Redakteur oder alles ist in Ordnung. Es könnte einige Zeit dauern. Siehst du, wir werden jetzt zum Bildschirm geschickt. Und wenn ich es aktualisiere, schauen wir mal, was passiert. Es werden neun direkt an den Startbildschirm gesendet , da dieses Konto bereits verbunden ist. Sehen Sie hier, dieses Konto ist hier verbunden. Und wenn ich zur Vertragsadresse gehe und sie neu lade, sehe ich, dass ich diese Transaktion vor 31 Sekunden habe , um den Benutzer zu aktualisieren. Es wurde jetzt erfolgreich aktualisiert. Unser Authentifizierungsteil ist erfolgreich. Im nächsten Video werden wir die Funktionalität zum Hinzufügen eines Spielzeugs durch diesen Benutzer schreiben . Danke. 21. IPFS für den Web3-Speicher einrichten: Hi In diesem Video werden wir an Tao Te Speicherbereich arbeiten. Das heißt, wir müssen eine Art IPFS aktivieren, um sicherzustellen, dass der Benutzer neben Text auch Bilder hochladen kann . Es gibt also mehrere IPFS-Speicheranbieter. Eine ist Pinata, die zweite, die ich verwenden werde, sind drei Speicher. Wenn Sie einfach auch auf die Website gehen. Sehen Sie, das ist die offizielle Website, Web Three Dots Storage. Wir sind hier, um Dateien zu speichern. Wenn Sie LFTs speichern möchten, gibt es auch NFT-Punktspeicher. Wenn Sie möchten, können Sie die Dokumentation lesen. Ich melde mich einfach an. Also melde ich mich jetzt bei meinem Konto an. Siehst du, das ist das Armaturenbrett. Hier. Ich brauche einen neuen Token-Schlüssel. Offensichtlich befinden sich bereits viele Dateien in meinem Speicher, aber Sie sollten zu API-Token gehen und ein neues Token erstellen. Ich nenne es Twitter API. Und einfach geschaffen. Stellen Sie danach, einfach kopiert, sicher, dass Sie diesen Token-Schlüssel nicht mit anderen teilen. Ich werde es auf jeden Fall später löschen. Einfach in dieser Konfig-Punkt-JS-Datei hier, richtig? Exportieren. Const drei Speicher. Api ist gleich und füge den Schlüssel hier ein. Dann geh zur home dot js-Datei hier. Und jetzt importiert nur noch wenige Dinge. Im Web drei UI-Code. Ich möchte das Laden auferlegen und die Benachrichtigung verwenden. Danach. müssen wir im Feed warten. Dann werde ich Ether importieren. Ether, aber aus der Ethernet-Bibliothek, kein Hardhead. Importieren Sie dann das Baummodell vom Web in das Modell. Dann werde ich diese beiden Dateien importieren, das ist eine Vertragsadresse. Und das hier, unsere Web-Tier-Speicher-API. Aus der Konfiguration. Dann werde ich ABA importieren, ABA Slash Return JSON. Und schließlich werde ich die Labor-Leckereien aus dem Alter von 18 importieren . Ähm, wir haben Web-Tree-Speicher installiert oder nicht. Mal sehen. Ich kann mich nicht erinnern. Dots Tür altern, schätze ich. Wir haben keinen Web Two Dots Storage installiert. Lass uns drei Punkte sehen. Um npm zu wüten. Wir müssen das installieren. Einfach. Geh. Und PM mit Stil. Der T-Punkt-Speicher. Nach erfolgreicher Installation startet npm erneut. Und hier haben wir diesen Web-T-Punkt-Speicher installiert. Okay? Jetzt haben wir diese Eingabedatei, das Laktatbild. Danach werde ich ein paar Dinge haben. Fangen wir mit const an. Benutze das Bild. Ist es gut, JSON-Punktparsen, lokalen Speicher, Punkt zu erhalten. Also erhalte ich einfach das Benutzerbild aus dem lokalen Speicher, als wir bei der Authentifizierung Laufe der Zeit einen Zufallswert hatten. Richtig? Also benutzen wir das. Wir holen es aus dem lokalen Lager. Dann haben wir die ausgewählte Datei, die ausgewählte Datei, um den Status zu verwenden, gegangen . Dann haben wir den Ladezustand. Wird geladen, eingestellt. Upload, tut mir leid nicht geladen, es wird hochgeladen. Um die Pause zu nutzen. Dann haben wir eine von BFS geladene URL leer. Und schließlich haben wir die Benachrichtigung erledigt, um die Benachrichtigung zu verwenden. Das sind alles was, das sind alles Dinge , die benötigt werden. Dann haben wir eine sinc-Funktion, um die Datei in unserem IPFS zu speichern. Schreiben wir es auf. Sie können diese Methoden auch in der Dokumentation sowie im Web-Tree-Speicher abrufen , wenn Sie Sie Verwirrung stiften hier Verwirrung stiften. Einfach dieser const client ist gleichbedeutend mit neuem Web-Taste-Storage. Dann. Das kann auch die Baumspeicher-API. Dann ist const root CAD gleich await. Blind. Abstimmen. Gut, so. Und schließlich werde ich die IPFS-URL haben, die dieser entspricht. Dies befindet sich oberhalb des Tabs. Tab-Schaltfläche. Wie https Schrägstrich Dollarzeichen, Wurzeln CAD Punkt b, fs de Web Dot Link als Schrägstrich Dollar. Ausgewählte Datei. Nennen. So wie das. Dies war eine Funktion, um die Datei nur so viel zu speichern. Dann haben wir Bild klicken, Okay, und dann haben wir Change Handler. Kosten. Die Bilddatei wird zur Zieldatei und legt dann das ausgewählte Bild fest. Wir haben das. Und dann legen Sie die ausgewählte Datei fest. Ereignis-Punktziel, findet. Das war's. Sparen Sie bei. Ich hoffe es gibt kein Problem. In diesem Video haben wir also gerade an den IPFS-Funktionen und allem gearbeitet . Im nächsten Video werden wir die komplette Funktionalität schreiben, um sie hinzuzufügen. Danke. 22. Funktion zum Hinzufügen eines Tweet: Hi. In diesem Video werden wir Panchen aufschreiben, um es hinzuzufügen. Also lassen Sie uns einfach eine neue Funktion erstellen , wenn Chen und ich sie benennen und ergänzen. Zuallererst werde ich also eine if else-Anweisung haben. Wenn tweet text dot dream kleiner als fünf ist, erhalten wir eine Benachrichtigung, die eine Delegation der Warnung anzeigt. Diese Nachricht wird mindestens fünf sein. Eine Dosis wird benötigt. Jüdisch und aufrecht. Und hier komme ich einfach zurück. Das heißt, ich möchte nicht, dass die anderen Funktionen ausgeführt werden. Wenn das nicht der Fall ist, schreibe ich einfach setuploading. Stimmt. Wenn ein Bild ausgewählt ist, ist dieses Bild, das Sie ausgewählt haben, vorhanden. Dann rufe ich die Store-File-Funktion auf. Von hier aus. Mit dieser Funktion erhalten wir die vom IPFS hochgeladene URL. Danach werde ich einfach unsere Verbindung haben, das ist Web drei Modell ist gleich neuem Modell. Dann ist dasselbe, const, Verbindung gleich, um auf die drei Punkte zu warten. Die Nachteile der Höhe sind gleich neu. Testen Sie, dass Anbieter Dodd Web drei Anbieter. Und ich werde die Verbindung hier schicken. Dann ist const sine gleich dem Anbieter, der Signer erhält. Dann kriege ich den Vertrag. Ito ist der Vertrag. Es wird die Vertragsadresse EVA und Cyanid haben. Dann werde ich den Tweet-Wert gleich 0,01 haben. Cons Preis ist gleich E Punkt Punkt plus E-Wert. Denn wenn du dich daran erinnerst , dass du es hinzugefügt hast, müssen wir diese Magie senden. Versuch es. Fang, blocke, bumse weiter. Lassen Sie uns unsere Transaktion gleich warten, kontrahieren und twittern. Wir haben diese an einen Text, eine BFS-URL und unseren Wert der Preistransaktion auf diese Weise gesendet eine BFS-URL und unseren Wert . Und nachdem ich eine Benachrichtigung erhalten habe , sind sie erfolgreich. Dazu. Und dann erfolgreich Shen Dao aufrecht. Dann setze ich das ausgewählte Bild. Mach noch einen Satz. Zweitens, es werden zwei leere Sätze ausgewählt. Und schließlich verschmutzend falsch einrichten. Und wenn wir einen Adder haben , zeige ich wieder eine Benachrichtigung. Sie fügten hinzu. Hier schreibe ich eine Transaktionstransaktionsfehlermeldung , eine Fehlermeldung. Und danach stellen Sie das Hochladen auf false ein, damit der Benutzer weiß, was los ist. Okay? Dann müssen wir die HTML-Datei hier zurückgeben. Lassen Sie uns überprüfen jede Zeile ein Benutzerbild sein wird . Mal sehen, wo wir das Benutzerbild haben. Und ich mache es einfach zu einem kleinen Brief. Benutze das Bild. Dann haben wir einen Textbereich. Dann haben wir Deck Sadia hier. Wert wird Text und auf Farbtönen sein. Okay. Dann haben wir Tweets-Bereich von Liz, deren Freunde onchange kein ausgewähltes Bild anzeigen. Warte mal, Tag, alles ist okay. Dann haben wir diesen Abschnitt hier. Auf Klick. Füge acht lustige Chen hinzu. Und darin wird es eine if-Anweisung geben, wie wenn das Hochladen wahr ist, dann zeige ich den Ladeindikator als echtes Recht, so. Und hier werde ich auch Upload-Requisiten senden, damit später, wenn der Benutzer neue hinzufügt, dieser Tweet in flüssigen Komponente auch das aktualisiert. Entschuldigung. Sonst nichts. Mal sehen. Mal sehen, ob es einen Fehler gibt. Das glaube ich nicht. Siehst du, wir haben unseren Zufall, unsere Zeit hier. Das bedeutet also, dass es funktioniert. Also schreiben wir einfach, das sind meine ersten 28. Ich werde dieses Bild verwenden. Ich werde es einfach schreiben und sagen, das ist die Ladeanzeige. Jetzt wird es mit dem Hochladen beginnen. Nach dem Hochladen werden sie Meta-Maske genannt. Um das hinzuzufügen. Wir müssen 0,01 Metrik angeben. Ich bestätige es. Offensichtlich wird es einige Zeit dauern. Du musst warten. Siehe Tweet wurde erfolgreich hinzugefügt. Wir haben hier eine Benachrichtigung. Und wenn wir zum Vertrag gehen und uns aktualisieren, schauen wir mal. Siehst du, wir haben dieses Add dazu. Drei Sekunden, also schätze ich, und der Wert ist 0 und so funktioniert alles richtig. Im nächsten Video werden wir die Funktionalität schreiben, werden wir die Funktionalität schreiben um diese Tweets aus der Blockchain zu zeigen. Danke. 23. Funktion zum Anzeigen von Tweets: Hi, willkommen zurück. In diesem Video werden wir an der Funktion arbeiten, um Tweets sowohl auf unserem Heim- als auch auf dem Profilbildschirm anzuzeigen . Also geh warten. In Feed-Punkt-JS-Datei. Wir müssen ein paar Sachen besorgen. Wir müssen Früchte importieren. Also werde ich einfach Gebrauch sehen. Ich kopiere das einfach und füge es hier ein. Es wird Gebrauch erfordern, beeinflussen, Datum verwenden, diese Dinge. Danach werden wir verlangen, dass verlangen sie SCSS vom Kern aus optimiert haben , wir müssen Avatar laden. Verwenden Sie die Benachrichtigung. Dann benötigen wir in den Symbolen, abgesehen von Magie, auch das Bin-Icon. Dann benötigen wir ein knappes Baummodell und eine Twitter-Vertragsadresse. Wir benötigen die Webtree-Speicher-API nicht. Und schließlich verlangen wir, dass wir den Vertrag mitteilen. Du kannst es benennen, wie du willst. Es ist nicht so, dass du in allen Dateien den gleichen Namen nennen musst. Punkt Jason. Okay. Wir werden einige Staaten benötigen. Also sollten wir zuerst ein paar Requisiten schicken. Ist zuallererst, jeden Tag, an dem ich sagte, dass const auf dem Benutzer Requisiten dot Profil machen wird. Und lassen Sie die Ladekomponente gleich props dot reload. So wie das. Dann muss ich, es ist gleich eingestellt, um den Status EMTALA zu verwenden. Dann werde ich const Daten laden müssen. Stellen Sie ein. Ladestatus ist gleich State Zeug und ich werde nicht geladen. Und schließlich habe ich die Benachrichtigung erledigt, ob Sie die Benachrichtigung verwenden werden . Okay? Jetzt werde ich diese Funktion schreiben, um nur Benutzer abzurufen, um eine Sinc-Funktion in Beziehung zu setzen, meine Tweets zu laden. Also hier werde ich ein paar Dinge kopieren und einfügen. Das ist Web Three Model, Verbindung und dieser Vertrag hier. Hier haben wir also das Web-Tree-Modell, dann die Verbindung, dann den Anbieter, dann den Unterzeichner und den Vertrag hier. Es wird einfach kein EBI-Punkte-Unterzeichner hier sein. Und dann werde ich Nachteile hinzufügen, Daten werden auf den Vertrag warten. Hol meine Tweets aus der Blockchain. Dann füge ich const hinzu. Benutzername ist gleich JSON.Parse, lokaler Speicher Punkt get item username. Und in ähnlicher Weise werde ich verwenden, dass das Bild der JSON-Punktparse entspricht. Hier wird dieses Bild verwendet. Und dann beziehe ich mich, dass das Ergebnis gleich zu erwarten ist. Was ich vermisse, Punktdaten, Punktkarten. Hier, ein Waschbecken. Zuerst holen wir uns das. Zeit. Uniques ist ein guter Weg, dies zu tun. Punkt-Zeitstempel. Dann Waffen, sie werden New machen. Und nur den Zeitstempel in das lokale Datum konvertieren. Unix-Zeit multipliziert mit Tausend. Das habe ich von Google bekommen. Sie können es auch googeln. Wie man Einheiten konvertiert, vereinigt einen Unix-Zeitstempel in das JavaScript-Datum. bisherige Guthaben ist das Fälligkeitsdatum lokalen Datumszeichenfolge f, RC. Okay? Dann füge ich einen Lead-Artikel hinzu. Ich wandle es in ein Objekt um, das dem Gewicht entspricht. Twitter. Und das wird nicht gleich sein. Dies ist die Spalten-ID, die Tweet-Punkt-ID, Textpunkt txt. Gouache-Bild. Dieses Bild wurde gelöscht. Rate ist Nutzername. Nutzername. Benutze das Bild. Benutze das Bild. Datum, Datum. Dies ist das Item-Objekt, und hier gebe ich diesen Artikel einfach zurück und erstelle eine Anzeige in diesem Ergebnisradio. Aber dann werde ich einfach das Ergebnis dot reverse sagen , weil ich gerade den Edit umkehre und Ladezustand so auf Loaded setze. Danach werde ich eine ähnliche Funktion zum Abrufen erstellen. Alle Tweets. Das ist für den Startbildschirm. Ich nenne es, lade unsere Tweets. Also dieses Web zum Modellieren, diese Dinge sind üblich. Hier. Jetzt werden sich ein paar Dinge ändern, aber nicht alles ist auf dem richtigen Weg. Dann bekommen wir hier alle Tweets, alle Tweets. Dann benötigen wir hier nicht diesen Benutzernamen und dieses Bild da dies für alle Benutzer zufällig ist. Offensichtlich bekommen wir ältere Tweets. Deshalb. Dann verspricht das Ergebnis Punkt-Unix-Zeit bis zu einem Punkt-Zeitstempeldatum. Alles ist in Ordnung. Dann benötigen wir get user detail ist gleich wait. Vertrag. Dot Benutzer abrufen. Hier werden wir wait dot senden, Twitter. Wir werden die Benutzerdetails erhalten. Wir haben diese Funktion in unserem Solidity-Smart-Vertrag. Dann müssen wir ihre ID zu einem Text zurückgeben . Bild, ist der Benutzername wird Benutzerdetails erhalten, und hier wird es benannt und verwendet, dass das Bild rho phi i m g image sein wird . So wie das zurückkommt, dann ist alles gleich. Jetzt müssen wir HTML entsprechend zurückgeben . Ich werde hier sein, richtig? Wenn der Ladezustand gleich „Nicht geladen“ ist , dann hier. Und gib den Klassennamen zurück. Wird geladen. Hier, wie das Laden von Widget 60 und dem Drucker-Farb-Hashtag a 2475. In ähnlicher Weise werden wir haben, wenn Ladezustand gleich dem Laden in ist und eine Punktlänge nicht vorhanden ist. Dann kehren wir zu einem Tag-Klassennamen zurück. Ich werde es einfach geladen haben. Und hier wird es kein Gewicht hinzufügen. Wenn der Benutzer nichts gepostet hat, ist dies der Fall. Und wenn nicht, dann haben wir hier alles. Hier. Hey les Punktkarte. Dann haben wir das Gewicht und den Index. Ich schneide alles aus und füge es hier ein. Dann müssen wir einige Änderungen vornehmen. Offensichtlich. Das Bild wird gewichtet sein. Benutze das Bild. Dann schreibe ich hier anstelle einer Landmasse einen Benutzernamen. In diesem Konto. Ich werde darauf schreiben. Dann werde ich in diesem Tweet-Inhalt hier Text twittern. Und in diesem Bild muss ich überprüfen, ob das Irisbild verfügbar ist oder nicht. Also werde ich einfach tweet schreiben, tweet-Bild nicht gleich leer. Dann zeig nur das. Dann müssen wir hier nur ein dunkles Bild wie dieses zeigen hier nur ein dunkles . Okay? Dann ist der Massenkreis in den Wechselwirkungen in Ordnung. Numb ich sagte Kreis, ich würde einfach 0 schreiben. Hier in fängt nicht an. Anstelle dieses Stils schreibe ich einen Kalender und füge einfach das Tweet-Datum ein. Und dann werde ich endlich einen Scheck machen. Falls, sofern der Benutzer nicht wahr ist. Dann zeige ich einen bin-Ordner mit Dave, Klassenname, Interaktionen num. Und ich werde zeigen, dass ich gefaltet wurde. Gewicht, Farbe F, F 0000. Und jetzt wird das auf onClick von null sein. Null. Okay? Und im Else-Teil werde ich das schreiben, könnte einen nehmen. Es ist hier in der anderen, und wir fügen sie einfach arktisch ein. Das ist es, was diese Logik gibt. Wenn es sich um einen Profilabschnitt handelt, den der Benutzer mithilfe dieser Ablage löschen können muss. Ich kann seine eigenen Tweets machen. Jetzt ist alles erledigt. Das einzige, was ich tun muss, ist ein riesiger Effekt. Denn offensichtlich müssen wir diese Funktion aufrufen , also lade meine Tweets und alles. Ich mag es wirklich, wenn das ein Benutzerprofil ist, dann rufe ich Lord, meine Tweets an. Wie ich anrufen werde lade alle Tweets. Und diese Seite wird aktualisiert. Wenn wir hier einen Essenssee schicken, die Ladekomponente und alles. Wenn dies geändert wird, wird diese Seite aktualisiert. Speichern Sie jetzt und sehen wir, ob ein Fehler vorliegt oder nicht. erfrischend. Siehst du, wir haben unsere beiden. Aber ich keine. Und ich wollte gerade sagen, dass das Bild nicht da ist, aber das Bild wird auch gezeigt. Das bedeutet, dass alles einwandfrei funktioniert. In unserem Profilbereich haben wir auch dies, das sind unsere Tweets und all diese Daten sind auch korrekt. Sehen Sie hier, wir haben diesen Bin-Ordner. Aber hier haben wir dieses metrische Zeichen, was einfach bedeutet, dass wir diese Tweets aus unserem Profilbereich löschen können . Ich hoffe du hast viel Spaß gemacht und viel gelernt. Im nächsten Video werden wir daran arbeiten, die richtigen Informationen in diesem Profilabschnitt zu zeigen . Danke. 24. Benutzerdaten auf der Profilseite anzeigen: Hi, willkommen zurück. In diesem Video werden wir an diesem Profilbereich arbeiten. Gehe zur Profil-Punkt-JS-Datei. Zuallererst müssen wir ein paar Dinge importieren. Diese Kopie, dieses CDX-Ding, das verwendet wird, verwendet Statin-Effekt. Dann brauchen wir fette Buchstaben von Essern. Importieren Sie Webbaum, Modell drei Modelle, und importieren Sie dann aus Symbolen. Jetzt werden wir hier viele Staaten brauchen. Lassen Sie uns zunächst die aktiven Kontoinformationen aus diesem lokalen Speicher abrufen. Jason. Barren. Lokaler Speicher, Punkt Artikel abrufen, aktives Konto. Ebenso werde ich einfach ein paar Mal kopieren und einfügen. Der zweite ist der Benutzername. Hier wird es der Benutzername sein, dann ist es die Benutzerbiografie. Es wird eine Benutzer-Biografie sein. Dann ist es ein Benutzerbild. Wir haben das Benutzerbild, dann heißt es Benutze das Banner. Dann lautet der Schlüsselname Benutzerbanner. Dann habe ich einen Staat namens Kontostand. Der Kontostand entspricht Ihrem Bundesstaat. Der erste Zustand wird 0 sein. Ich werde diesen Kontostand auch aus der Brieftasche holen und auf unserer Website zeigen. Schreiben Sie einfach eine Sinc-Funktion, ermitteln Sie die Anzahl, balancieren Sie aus. So wie das. Ich werde das Verb Baummodell, Modell, neues Web-Tree-Modell haben. Dann ist diese Verbindung, wie immer, Waffenverbindung, wir werden Web Three Modul 18 erwarten . Es muss diese Verbindung modellieren. Dann werde ich lassen, lass. Vida ist wegen neuer Esser, Anbieter, Web an Anbieter. Wir müssen diese Verbindung senden. Dann führe. Valence ist gleich erwarten. Entweder hol dir das Gleichgewicht. Wir müssen die Kontonummer senden, die sich im aktiven Konto befindet. Lokaler Speicher. Dann werde ich einfach durch Objektive einen guten Esser umgewandelt. Tails machen. Punktformatieren Sie eine Tabelle. Toll, wir waren eine sehr lange Nummer. Ich werde Gene anpassen, die sich auf Teilstring ausgleichen. Zeigt nur vier Ziffern 0 bis vier an. Das war's. Und ich werde den Kontostand festlegen lassen, wird ausgeglichen. Im US-Effekt nenne ich dann diese Funktion Kontostand abrufen. Und ich werde diese Informationen hier zeigen, die nach Knoten eingereicht werden, werden Benutzer-Banner sein. Dann wird Profil, Bild verwendet Image-Name. Wenn es einen Namen gibt, benutzername. Hier wird es ein aktives Konto sein. Dann zeige ich die Magie. Ich kann den Kontostand so schreiben. Dann haben Sie Benutzer-Bluff-Biografie. Ich werde hier einfach eine Benutzerbiografie schreiben. Benutzername ist ihr Bio-Bild von nicht alles ist da. Sagen wir: Nun, sehen Sie, ich habe 4.7. Dramatisch, das ist mein Profilbild. Kontonummer, Benutzername und Benutzerbiografie sind derzeit nicht da , da es sich um ein neues Konto handelt. Wir werden es später aktualisieren. Dieser Profilabschnitt funktioniert jedoch einwandfrei. Danke. 25. Funktion zum Löschen eines Tweet: Hi, willkommen zurück. In diesem Video arbeiten wir an der Funktion zum Löschen eines Tweets. In diesem Profilbereich haben wir also offensichtlich, dass der Knopf der Schulden acht Wochen gelöscht werden soll. Gehen wir zu diesem Profil, dass js und C nicht in Profilpunktstühlen sind. Wir müssen codieren, um es in Flüssigkeit zu machen. Hier. Und hier wirst du das sehen. Wir waren das. Geh einfach hier hin. Dann nennt die Funktion es, verzögertes Gewicht. diesem Zweck benötigen wir dafür diese Tweet-ID. Dann werde ich den Download-Status der FASTA-Datei auf nicht geladen setzen . Dann brauche ich Tage ein paar Dinge zum Modellieren. Verbindung von beiden. Ebi-Daten entsprechen hier, wo sie auf acht gelöscht werden. Dann id, und wir müssen senden, dass dies gelöscht wird. Warten Sie dann auf Punktdaten Punktgewicht. Dann werde ich in Benachrichtigung zeigen, Erfolg. Erfolgreich. Vorsprechen. Dunkel, hell. Jetzt können wir auch einen Standard angeben. Wir können das Icon ändern. Ich ändere das Symbol in diese Ablage. Und danach rufe ich meine Tweets laden auf, nur um sie zu aktualisieren. Okay? Dann müssen wir hier in diesem onclick schreiben, löschen, um zu warten und es zu tun. Punkt-ID. Das war's. Das ist der erforderliche unbeleuchtete Wechsel. Speichern Sie jetzt alle n. Nur der Einfachheit halber habe ich bereits einen weiteren Tweet hinzugefügt , den ich jetzt löschen werde. Siehst du, das ist ein Tweet. Ohne Bild. Ich werde auf dieses Symbol klicken und sehen wo es Verspätungen gibt, um zu bestätigen, dass die Nacht wie immer einige Zeit dauern wird. Sehen Sie, dass der Tweet erfolgreich gelöscht wurde, dass Twitter jetzt sowohl von unserem Profilbildschirm als auch vom Startbildschirm verschwunden ist. Das bedeutet, dass die Löschfunktion auch einwandfrei funktioniert. Das ist alles für dieses Video in der nächsten Sitzung. Danke. 26. Funktion zum Aktualisieren von Profildetails: Willkommen zum letzten Video, in dem wir auf der Seite Einstellungen arbeiten , um die Details eines Benutzers zu aktualisieren. Gehen Sie zur Datei settings.js. Und lass uns anfangen zu arbeiten. Aus dem Kern. Ich benötige das Laden und verwende eine Benachrichtigung. Dann benötige ich von React use date und use effect. Dann werde ich Dinge importieren. Ich denke, wenn ich zum Profil gehe, sind die Stühle zu Hause. Ich werde all diese Dinge hier finden. Und wir fügen einfach das Esser-Web ein, um mit einer Vertragsadresse und einem Speicher zu modellieren. Dann um ABI und Webspeicher zu sagen. Jetzt, auf der Einstellungsseite, brauche ich, werde ich die erste Benachrichtigung zulassen. Ist es gut, die Benachrichtigung zu verwenden? Dann const username? Geht es zu Jason, Bars, lokalem Speicher, Punkt Artikel abrufen, Benutzername. In ähnlicher Weise benötige ich eine Benutzerbiografie. Verwenden Sie Bild- und User-Bandout wie folgt. Dann habe ich eine Prof-Profildatei, dann den binären Dateinamen. Das erste, was es haben wird, ist der Benutzername Bio, der erste Zustand, in dem es Benutzer-Biografie haben wird. Dann bin ich abgeprallt. Lade- und Ladezustand. Benutz die Riegel. Dann lass Phi. Herr, Sie werden gleich zu Beginn ein Bild verwenden, bei dem die Ben-Upload-URL dem Benutzerpanel entspricht. Ich erkläre dir alles. Aber hier, was ich mache, ist hier Name, der allererste, ganz am Anfang, wird es einen vordefinierten Benutzernamen haben , der sich im lokalen Speicher befindet, das zeigte. Also hier werde ich schreiben, ich schreibe zwei oder es hilft als Platzhalter, was auch immer der vorherige Name war. Nur aus diesem Grund. Jetzt werde ich Funktionen haben. Dafür. Ich werde einfach wieder zu home dot js gehen, hier Staubtürdatei Funktion bekommen, einfügen. Hier. Es wird eine Datei ausgewählt haben. Es wird die Datei ausgewählt haben und alles ist jetzt k. Und ich werde diese IPFS-Upload-URL zurückgeben. Diese Upload-URL werde ich zurückgeben. Jede andere Sache. Das wird Blei sein. Weil das nicht vordefiniert war. Wir erklären es hier. Okay? Dann haben wir in ihrem Banner-Handler das, was bedeutet, dass wir nichts an ihrem Profil-Handler ändern müssen . Ereignis. Besagtes Profil. Okay. Und wir werden nur diesen riesigen Effekt haben mit MDF-Kram gemacht wird. Und es wird sich entsprechend ändern, wenn sich dieser Ladezustand ändert, wird die Seite aktualisiert. Dann müssen wir die Funktion schreiben. Wir müssen die Funktion schreiben , um das Profil zu aktualisieren. Was ich jetzt tun werde, setze das Laden auf true. Dann, wenn das Profil Phi nicht gleich null ist, dann müssen wir eine neue Lead-, neue Datei tun. Die URL entspricht der await-Speicherdatei. Und wir müssen eine Datei zum Hinzufügen eines Profils wie diese einsenden. Und dann schreiben wir das Laden des Profils. Es ist hier. Das ist es. Phy Nutzlast, dass du ausgeführt wirst. Von. Laden Sie jetzt diese URL hoch. Okay. Ich werde einfach gehen und hier einfügen. Dieses neue Profil wurde hier hochgeladen. Es wird eine neue URL für die Raw-Datei hochgeladen, wenn der Benutzer etwas geändert hat. In ähnlicher Weise werde ich, wenn sich die Banner-Datei ändert, wirklich wie eine neue hochgeladene Banner-URL hören . Und doch werde ich eine Banner-Datei mögen. Und dann wieder, hier werde ich mich ändern, indem ich nicht hochgeladen habe. Und hier wird es sich ändern , weil es die Bedingungen weil der Benutzer das Profilbild ändern kann oder nicht. Er will nur ihren Nutzernamen ändern. Es liegt an ihm. Deshalb führe ich so viele IF-Checks durch. Okay. Dann werde ich danach verlangen, ich werde wieder weniger Dinge benötigen. Gewicht Hatte viel Code. Also jetzt überlege ich nur wo hier, diesen Code immer wieder müssen wir hier zu den Einstellungen gehen Ich habe dieses Basisdatum. Wir müssen modellieren, wir haben die Verbindung, wir werden zentriert. Dann haben wir die Twitter Aba hier. Wir aba dot aba. Dann haben wir diese Transaktion in der Lage, einen Vertrag abzuschließen. Dot Update Benutzer. Der Benutzername, die hochgeladene URL der Biodatei, Banner, die hochgeladene URL wie diese. Dann werde ich die await-Transaktion hinzufügen , die das Gewicht geändert hat, und aktualisiere Jetzt müssen wir sicherstellen , dass wir auch den lokalen Speicher aktualisieren. Benutzername, json.Parse, stringify, Name. Dann benutze Bio. Jingle fi, bio. Du bist Bild, Profil hochgeladene URL, Banner. Durch nicht hochgeladene URL. Dann schicke ich einfach eine Benachrichtigung. Erfolg. Fein. Erfolgreich aufrecht vorsprechen. Und schließlich werden wir set loading false hinzufügen. Dieser hat also die Funktion, die URL hochzuladen. Schließlich müssen wir auch HTML zurückgeben. Hier. Der Name ist tot. Bei Änderungen. Das S, das wir einfach hinzufügen müssen, entspricht dem Benutzernamen. In ähnlicher Weise müssen wir hier den Wert schreiben, der gleich ist, um Bio zu verwenden. Dann haben wir das Profilbild, was okay ist. Wir haben auch diese Banner-Bilder. Kay? Dann werde ich nur ein Laden zeigen, dass, wenn es geladen wird, dann ein div LastName Save anzeigen div . Und ich werde hier einfach den Lade-Button zeigen. Und wenn es kein onclick, onclick lädt , rufe ich einfach das Update auf. Das ist diese Funktion. Ich schneide es aus und füge es hier ein. Lasst uns jetzt alles retten. Mal sehen, ich hoffe alles ist in Ordnung. Nenn es einfach. Waren drei. Profilbild des Entwicklers. Ich werde zu Ben wechseln. Und hier werde ich schreiben. Das werde ich ändern. Ich habe versucht, die Binärdatei auf diese zu ändern. Offensichtlich wird es einige Zeit dauern da es sich um zwei Bilder handelt die auf IPFS hochgeladen wurden und alle einfach gespeichert werden. Warte eine Weile. Es wird also um ein Update gebeten. Aus diesem Grund wird die Transaktion lauter bestätigt. Lass uns warten. Also das Profil der Toten erfolgreich diese Show. Gehen wir jetzt zu unserem Profil. Siehst du, es sieht so gut aus. Alle unsere Informationen sind jetzt aktualisiert. Wir haben dieses Profilbild, wir haben diesen neuen Bannerlauf. Wenn ich auf den Startbildschirm gehe, sehen Sie hier, und auch mein Profilbild ist jetzt geändert. Damit alle Funktionen und jetzt perfekt funktionieren, ist unsere App abgeschlossen. Ich hoffe du hast viel Spaß gemacht und viel gelernt. Im nächsten finalen Video werden wir die vollständige Anwendung erneut testen und prüfen, ob es einen Fehler gibt oder nicht. Danke. 27. Teste die vollständige Anwendung: Hallo, willkommen zurück zum letzten Video dieses Kurses. In diesem Video werden wir die vollständige Anwendung testen. Also lass uns anfangen. Zunächst kopiere ich einfach den lokalen Host und erstelle ein neues Inkognito-Fenster. Hier habe ich keine Materie Masse installiert. Mal sehen was passiert. Sehen Sie sich eine normale, dümmste Installation an. Wenn ich auf Okay klicke, geht es direkt zur MetaMask-Website. Der Benutzer muss es also installieren , um unsere Anwendung dazu zu besuchen. Das macht es also fehlerfrei. Und jetzt wechseln wir ein Konto. Ursprünglich hatte ich dieses Konto bereits verbunden, und ich habe auch einen neuen Tweet hinzugefügt. Jetzt verwenden wir diesen Kontenbaum und klicken auf Metallmaske verbinden. Oft wird auf unbestimmte Zeit gefragt, ob das Tiefenprofil aktualisiert wird. Mal sehen, welche Daten ich erhalte. Also sieh mal, das ist die Stunde die ich kriege und das ist die Startseite. Und dieser Tweet wurde von meinem anderen Account gemacht. Wenn ich hier zum Profilbereich gehe, wird kein Tweet verfügbar angezeigt. Und wenn Sie möchten, können Sie auch einfach die Farbe dieses Schwarz in Weiß ändern . Es sieht nicht gut aus. Und jetzt sage ich das auch. Es ist von der zweiten Zählung. Und ich sage nur zwicken. Bestätigen Sie diesen Tweet an uns, bearbeiten Sie ihn erfolgreich. Offensichtlich hat es einige Zeit gedauert, aber es wird jetzt mit diesem zufälligen r-Punkt hinzugefügt. Und Sie können sehen, dass wir dies auch bewiesen haben Gehen Sie zu und gehen Sie zu den Einstellungen und wechseln Sie einfach zu. Ich schreibe einfach hier. Mark Zuckerberg, Gründer von Social Media. Und spar es einfach. Das Speicherprofil wurde erfolgreich aktualisiert. Wenn ich zum Profil gehe, heißt ich Mark Zuckerberg. Und hier wird wirklich nur Mark Zuckerberg gezeigt. Alle diese Bereiche funktionieren einwandfrei. Auf der rechten Seite. Sie können einfach machen was Sie wollen. Angenommen, Schulungen, Trendnachrichten, Trend-Blogs, was auch immer Sie möchten, Sie können es einfach fest auf Ihrer Website codieren. Jetzt möchte ich Ihnen die Funktionen zeigen , die wir hinzugefügt haben. Nehmen wir an, wenn wir das Konto von einem Betrug ändern, möchten wir auch ein Konto erstellen. Schau, ob ich es verbinde. Schon wieder. Er hat tatsächlich das Polygonsymbol verbunden, dieses hier. Und jetzt bin ich wieder da, wechsle zurück zu meinem ersten Konto. sind also alle hier drin erledigt. Ist es. In der app.js. Wir haben einen Kontowechsel und ändern Gene und alles. Was passiert also, wenn ich das Polygonnetz ändere , um schlaff zu werden. Siehst du, es ist also ein Zwei-Polygonnetz. Und wenn ich jetzt hier klicke, wir aufgefordert, das Netzwerk zu wechseln. Und wenn ich das Netzwerk wechsle, werde ich wieder auf die Website zurückgeschickt , sonst kann ich sie nicht besuchen. Diese Website hat also alle Funktionen. Alles funktioniert. Sie können es einfach live machen und irgendwann in Ihrem Portfolio, es liegt an Ihnen. Ich hoffe es hat dir gefallen. Schau dir auch meine anderen Kurse an. Danke. Hab einen schönen Tag und übe weiter.