So erstellen Sie Schritt für Schritt skalierbare dApps und intelligente Verträge in Ethereum mit State Channels. Teil 1

Es gibt viele verschiedene Lösungen für die Erstellung von dezentralen Anwendungen, die sich auf Tausende oder sogar Millionen von Echtzeitbenutzern wie Plasma und staatliche Kanäle skalieren lassen. In diesem Handbuch erfahren Sie Schritt für Schritt, wie Status-Channels funktionieren und wie Sie jetzt skalierbare Anwendungen in Ethereum erstellen.

Sie müssen nicht auf zukünftige Verbesserungen in der Blockchain warten. Die Technologie bleibt erhalten und Sie können damit alle Arten von dApps erstellen. Derzeit werden staatliche Kanäle hauptsächlich für Blockchain-basierte Spiele in Ethereum verwendet.

Denken Sie mit Kryptowährungen zu spielen. Es gibt Möglichkeiten, die Informationen zu verschlüsseln, um sie später wiederzugeben. Dies ist ein zentraler Punkt dieses Systems.

Was sind staatliche Kanäle?

Es handelt sich um eine Skalierungslösung zur Erstellung dezentraler Anwendungen und intelligenter Verträge, die von Millionen von Benutzern nahezu in Echtzeit verwendet werden können. Sie initiieren einen Kanal zwischen zwei oder mehr Benutzern, in dem sie verschlüsselte, signierte Nachrichten mit den Informationen der Transaktion austauschen, die sie ausführen möchten.

Sie werden als "Status" bezeichnet, da jede Interaktion einen Status haben muss, der aktualisiert werden kann. Denken Sie an eine Partitur eines Spiels oder einen Kontostand.

Warum gibt es sie?

Staatliche Kanäle wurden geschaffen, weil Ethereum-Anwendungen schnell an Popularität gewannen und die Blockchain unbrauchbar wurden, da sie mit mäßiger Nutzung entwickelt wurde. Sie ermöglichen kontinuierliche Transaktionen, ohne für Benzin zu bezahlen oder darauf zu warten, dass Bergleute die Transaktionen abwickeln.

Das bedeutet kostenlose und schnelle Transaktionen.

Was brauchen wir, um einen staatlichen Kanal einzurichten?

  1. Mindestens 2 Benutzer, die miteinander interagieren. Ein Kanal muss zwischen 2 oder mehr Benutzern geöffnet werden. Ähnlich wie bei einer Chat-Anwendung.
  2. Ein kluger Vertrag mit der State-Channel-Logik, die ihn öffnet und schließt.
  3. Wenn der staatliche Kanal in einem Spiel verwendet wird, ist für beide Benutzer eine Übertragungsurkunde erforderlich. Diese Übertragungsurkunde in Äther wird beim Öffnen des Kanals im Smart-Vertrag gespeichert.
  4. Eine Javascript-Anwendung, die signierte Nachrichten generiert, die außerhalb der Kette zwischen den Benutzern ausgetauscht werden.
  5. Metamask oder ein ähnliches Tool zum Signieren von Nachrichten. Das Signieren von Nachrichten kostet kein Benzin und wird sofort ausgeführt. Beide Benutzer müssen die Nachrichten signieren, um sicherzustellen, dass sie solche Transaktionen generieren.
  6. E-Mail oder eine externe Anwendung zum Austauschen dieser signierten Nachrichten, um diese Anwendung zu ermöglichen.

Wie arbeiten Sie?

Die Einrichtung des staatlichen Kanals ist etwas kompliziert, da Sie sicherstellen müssen, dass beide Spieler geschützt sind, falls etwas schief geht. Deshalb brauchen wir einen intelligenten Vertrag. Dies sind die Schritte:

  1. In einem Statuskanal zwischen zwei Benutzern setzt der erste den Smart-Vertrag ein, der den Kanal „öffnet“.
  2. Der zweite führt eine Funktion dieses intelligenten Vertrags aus, um diesem staatlichen Kanal beizutreten.
  3. Anschließend können sie signierte Nachrichten für die Anwendung austauschen. Beide Benutzer haben Zugriff auf eine benutzerdefinierte Javascript-Anwendung, um Nachrichten mit den Informationen zu generieren, die sie in einem intelligenten Vertrag, jedoch außerhalb der Kette, tun würden.
  4. Die Geschwindigkeit der Transaktionen hängt davon ab, wie schnell jeder Benutzer diese Nachrichten erstellen und signieren kann. Sie tauschen weiterhin Nachrichten aus und spielen so lange außerhalb der Kette, bis sie feststellen, dass das Spiel vorbei ist.
  5. Wenn sie das Spiel beendet haben, kann jeder von ihnen zum Smart-Vertrag gehen und eine Funktion ausführen, um es zu beenden, die die Phase der „Verhandlung“ startet.
  6. In dieser Phase haben beide Benutzer ein Zeitlimit von 1 Tag, um die letzten 2 Nachrichten, die sie haben, in den Smart-Vertrag hochzuladen. Der Smart-Vertrag prüft die neuesten Nachrichten und gibt die Mittel frei, um das Spiel basierend auf diesen Informationen zu beenden. Jede Nachricht enthält die Ergebnisse der vorherigen Interaktionen, sodass Sie sicher sein können, nur die neuesten zu überprüfen.

Wie können Sie dies in einer realen Situation anwenden?

In diesem Handbuch zeige ich Ihnen, wie Sie einen Statuskanal zwischen zwei Benutzern für ein Ethereum-Spiel erstellen. Denken Sie daran, dass Statuskanäle für jede Art von Anwendung verwendet werden können, die über einen Status oder einen Zähler verfügt. Deshalb sind Spiele ideal. Da Sie verfolgen können, wer jedes Spiel gewinnt, gibt es für jedes Spiel einen Status, der aktualisiert werden kann.

Wir werden ein Würfelspiel erstellen, in dem Spieler 1 die Nummer des Würfels auswählt, der fallen soll, und Spieler 2 muss diese Nummer erraten, um zu gewinnen. Sie können so viele Spiele spielen, wie sie möchten, ohne Transaktionen in der Blockchain ausführen zu müssen. Wir werden auch eine Web-App haben, um die Benutzeroberfläche zu zeigen.

Dies ist der Index, nach dem wir eine solche dezentrale Anwendung erstellen:

  1. Erstellen der visuellen Webanwendung Dies ist die Oberfläche, wie das Spiel für externe Benutzer aussehen wird. Es wird als Medium zum Austausch signierter Nachrichten für staatliche Kanäle verwendet.
  2. Erstellen der zum Signieren und Verschlüsseln von Nachrichten erforderlichen Funktionen.
  3. Smart Contract erstellen.

1. Erstellen Sie die visuelle Web-App

Bevor ich überhaupt mit dem Code beginne, möchte ich sicherstellen, dass wir die vollständigen Details der Web-App klären. Wie es aussehen wird, worauf kommt es an?

In diesem Fall möchten wir für beide Spieler ähnliche Dinge anzeigen. Spieler 1 sieht die 6 Gesichter der Würfel als Bilder und muss auswählen, welches herauskommt. Dann muss der zweite Spieler ebenfalls zwischen diesen Gesichtern wählen und er kann das Ergebnis sehen.

Das Framework sieht also so aus:

  1. Spieler 1 wechselt zur Web-App, klickt auf eine Schaltfläche mit der Aufschrift „Neues Spiel starten“ und führt dann eine Metamaskentransaktion aus, um den Smart-Vertrag bereitzustellen und einzurichten. Er erhält eine intelligente Vertragsadresse, die er an den anderen Spieler senden kann, um das Spiel zu starten.
  2. Spieler 2 wechselt zur Web-App, klickt auf eine Schaltfläche mit der Aufschrift „Bestehendem Spiel beitreten“ und der von Spieler 1 erhaltenen Vertragsadresse. Anschließend führt er eine Metamaskentransaktion durch, um das bereits vorhandene Spiel einzurichten, und sendet eine Übertragungsurkunde.

Fangen wir also gleich dort an. Erstellen wir eine Box in der Mitte der Web-App mit 2 Schaltflächen. Erstellen Sie einen Ordner namens Würfel und eine Datei namens index.html. Hier ist der Code:

So sehen standardmäßig 2 Schaltflächen aus


    
        
         Würfel-Astraleum-Spiel </ title>
    </ head>
    <body>
        <div class = "main-content">
            <button> Neues Spiel starten </ button>
            <button> Bestehendem Spiel beitreten </ button>
        </ div>
    </ body>
</ html></pre><p>In diesem Code habe ich gerade die grundlegende HTML-Struktur mit einem Div erstellt, der die Schaltflächen und einen Titel enthält. Beachten Sie, dass das div eine Klasse namens main-content hat, die wir gleich verwenden werden.</p><p>Machen wir das mit ein paar CSS schöner. Erstellen Sie eine Datei namens index.css mit dem folgenden Code (Sie können diesen kopieren und einfügen):</p><img alt="So wird es aussehen" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1576416098899.png" /><pre>Karosserie {
    Schriftfamilie: serifenlos;
}</pre><pre>.Hauptinhalt {
    Rand: Auto;
    maximale Breite: 500px;
    Hintergrundfarbe: Whitesmoke;
    Polsterung: 50px;
    Randradius: 10px;
    Anzeige: Gitter;
    Raster-Template-Zeilen: 1fr 1fr;
    Raster-Template-Spalten: 1fr 1fr;
    Rasterspaltenlücke: 10px;
}</pre><pre>.Hauptinhalt h1 {
    Rasterspalte: 1 / Spanne 2;
}</pre><pre>.main-content button {
    Grenze: keine;
    Farbe weiß;
    Hintergrundfarbe: # 007dff;
    Polsterung: 20px;
    Randradius: 5px;
    Cursor: Zeiger;
}</pre><pre>.main-content button: hover {
    Opazität: 0,8;
}</pre><pre>.main-content button: aktiv {
    Opazität: 0,6;
}</pre><p>Ich habe dem HTML-Code einen H1-Titel hinzugefügt, damit er besser aussieht. Achten Sie darauf, dass Sie Ihren HTML-Code aktualisieren, indem Sie den folgenden Link zum CSS hinzufügen:</p><pre><! DOCTYPE html>
<html lang = "en" dir = "ltr">
    <head>
        <meta charset = "utf-8">
        <link rel = "stylesheet" href = "index.css">
        <title> Würfel-Astraleum-Spiel </ title>
    </ head>
    <body>
        <div class = "main-content">
            <h1> Würfel des Astraleums </ h1>
            <button> Neues Spiel starten </ button>
            <button> Bestehendem Spiel beitreten </ button>
        </ div>
    </ body>
</ html></pre><p>Möglicherweise haben Sie bemerkt, dass ich das neue CSS-Raster verwende. Dies liegt daran, dass es hauptsächlich für große Browser verfügbar ist. Daher ist es an dieser Stelle recht sicher, es zu verwenden, da die meisten Benutzer das CSS ordnungsgemäß sehen.</p><p>Ich entschied, dass die beste Möglichkeit, die nächste vom Benutzer angeforderte Aktion anzuzeigen, darin besteht, ein Div in Javascript mit den erforderlichen Informationen anzuzeigen. Wenn er auf "Neues Spiel starten" klickt, wird ein Feld angezeigt, in dem er gefragt wird, wie viel Treuhandkonto er für das Spiel einrichten möchte.</p><p>Wenn er auf "An vorhandenem Spiel teilnehmen" klickt, wird er nach der Treuhand- und Vertragsadresse des vorhandenen Spiels gefragt.</p><p>So reagieren die Tastenaktionen:</p><img alt="Wie die App mit einfachem Javascript aussieht" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1576416159998.gif" /><p>Um dies zu ermöglichen, habe ich eine index.js-Datei mit Javascript-Logik erstellt. Hier ist das Javascript. Geben Sie es unbedingt mit den Händen ein, wenn Sie dies besser lernen möchten:</p><p>Lassen Sie mich erklären, was ich dort gemacht habe:</p><ul><li>Zuerst habe ich eine Funktion namens start () erstellt, die sofort ausgeführt wird, um den Inhalt so zusammenzufassen, dass er schön und in einer großen Funktion enthalten ist.</li><li>Dann habe ich 2 Ereignis-Listener erstellt, die immer dann aktiviert werden, wenn ich in der HTML-Datei auf die Schaltflächen Start oder Join klicke. Eine für die Schaltfläche "# new-game" und eine für die Schaltfläche "# join-game". Ich verwende document.querySelector (), eine der leistungsstärksten Methoden, um etwas in Ihrem js-Code auszuwählen.</li><li>In diesen Listenern zeige oder verstecke ich die Div-Box jedes entsprechenden Elements. Grundsätzlich das mit querySelector markierte Feld auswählen und die versteckte Klasse entfernen oder hinzufügen, die in css eingerichtet ist, um Folgendes anzuzeigen: none; .</li></ul><p>Dann können wir die js-Datei mit unserer modifie index.html verbinden:</p><pre><! DOCTYPE html>
<html lang = "en" dir = "ltr">
    <head>
        <meta charset = "utf-8">
        <link rel = "stylesheet" href = "index.css">
        <title> Würfel-Astraleum-Spiel </ title>
    </ head>
    <body>
        <div class = "main-content">
            <h1> Würfel des Astraleums </ h1>
            <button id = "new-game"> Neues Spiel starten </ button>
            <button id = "join-game"> Bestehendem Spiel beitreten </ button></pre><pre>            <div class = "verstecktes neues Spiel-Setup">
                <h3> Wie viel Treuhandkonto verwenden Sie an der ETH? </ h3>
                <input type = "number" placeholder = "2 ...">
            </ div></pre><pre>            <div class = "hidden join game setup">
                <h3> Wie lautet die Smart Contract-Adresse des vorhandenen Spiels? </ h3>
                <input type = "text" placeholder = "0x38dfj39 ...">
            </ div></pre><pre>            <button id = "button-continue" class = "hidden"> Weiter </ button>
        </ div></pre><pre>        <script src = "index.js"> </ script>
    </ body>
</ html></pre><p>Ich habe die neuen Codestücke fett geschrieben. Das folgende CSS wurde aktualisiert, um die neuen Informationen zu formatieren:</p><pre>Karosserie {
    Schriftfamilie: serifenlos;
}</pre><pre>.hidden {
    Anzeige: keine;
}</pre><pre>.Hauptinhalt {
    Rand: Auto;
    maximale Breite: 500px;
    Hintergrundfarbe: Whitesmoke;
    Polsterung: 50px;
    Randradius: 10px;
    Anzeige: Gitter;
    Raster-Template-Zeilen: 1fr 80px auto;
    Raster-Template-Spalten: 1fr 1fr;
    Rasterspaltenlücke: 10px;
}</pre><pre>.Hauptinhalt h1 {
    Rasterspalte: 1 / Spanne 2;
}</pre><pre>.main-content button {
    Grenze: keine;
    Farbe weiß;
    Hintergrundfarbe: # 007dff;
    Polsterung: 20px;
    Randradius: 5px;
    Cursor: Zeiger;
}</pre><pre>.main-content button: hover {
    Opazität: 0,8;
}</pre><pre>.main-content button: aktiv {
    Opazität: 0,6;
}</pre><pre>Schaltfläche ".main-content": deaktiviert {
    Opazität: 0,5;
    Hintergrundfarbe: grau;
    Cursor: auto;
}</pre><pre>Eingabe von .main-Inhalten {
    Breite: 100%;
    Randradius: 10px;
    Polsterung: 10px;
    Rand: 1px festes hellgraues;
}</pre><pre>.main-content div.new-game-setup, .main-content div.join-game-setup {
    Rasterspalte: 1 / Spanne 2;
}</pre><pre># button-continue {
    Rasterspalte: 1 / Spanne 2;
    Rand oben: 20px;
}</pre><p>Die Schaltfläche "Fortfahren" hat im Moment keine Funktion. Erstellen Sie diese Funktion, um einen neuen Smart-Vertrag bereitzustellen und den Statuskanal zu öffnen, wenn ein Benutzer im nächsten Abschnitt ein neues Spiel erstellen möchte.</p><h3>2. Erstellen und Verbinden des anfänglichen Smart Contract</h3><p>Es ist an der Zeit, eine Basisversion des Smart-Vertrags zu erstellen und diese mit Ihrem Javascript über web3.js zu verbinden. Im Moment benötigen wir nur den Konstruktor und einige grundlegende Informationen. Schreiben Sie diesen Code mit Ihren eigenen Händen in eine neue Datei namens Dice.sol:</p><pre>Pragma Solidität 0,4,25;</pre><pre>Vertrag Würfel {
    öffentlichen Spieler ansprechen1;
    öffentlichen Spieler ansprechen2;
    uint256 public player1Escrow;
    uint256 public player2Escrow;</pre><pre>    Konstruktor () öffentlich zahlbar {
        require (msg.value> 0);
        player1 = msg.sender;
        player1Escrow = msg.value;
    }</pre><pre>    Funktion setupPlayer2 () public payable {
        require (msg.value> 0);
        player2 = msg.sender;
        player2Escrow = msg.value;
    }
}</pre><p>Es gibt 2 Funktionen, den Konstruktor zum Einrichten der Adresse und des Treuhandkontos des ersten Spielers und die Funktion setupPlayer2 () zum Einrichten der Informationen des zweiten Spielers.</p><p>Wir möchten den Vertrag implementieren und den Konstruktor mit dem angegebenen msg.value ausführen, sobald der Benutzer auf die Schaltfläche "Weiter" klickt. Dazu müssen wir web3.js in unserem Smart-Vertrag implementieren. Da dies die Hauptmethode für die Kommunikation mit der Blockchain im Browser ist.</p><p>Laden Sie web3.js hier in Ihren App-Ordner: https://github.com/ethereum/web3.js/blob/develop/dist/web3.js Dies ist der offizielle, aktualisierte Distributionscode.</p><p>Um es für Ihr Projekt herunterzuladen, gehen Sie zu diesem Link, klicken Sie auf RAW, um den vollständigen Code anzuzeigen, und kopieren Sie den Code, um ihn in eine neue Datei mit dem Namen web3.js in Ihrem Projektordner einzufügen:</p><img alt="Öffnen Sie die Seite, klicken Sie auf "raw", wählen Sie alle mit Strg + a aus, kopieren Sie den Code und fügen Sie ihn in eine neue Datei in Ihrem Projekt mit dem Namen "web3.js" ein" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1576416161338.gif" /><p>Sie müssen das nicht wirklich tun, wenn Sie Metamask verwenden, da Metamask eine Version von web3.js für Sie einfügt. Es ist jedoch nützlich, die web3-Bibliothek in Ihrem Projekt zu haben, um mit der Blockchain zu interagieren, wenn Metamask nicht verfügbar ist.</p><p>Wir verwenden Metamask, um mit der Blockchain zu sprechen. Es funktioniert jedoch nicht, wenn Sie eine index.html-Datei in Ihrem Browser öffnen, da die Erweiterung file: // für die Metamask nicht unterstützt wird.</p><p>Wir müssen dann einen lokalen Server ausführen, der die Dateien an eine http: // localhost: 8080-URL weiterleitet, da die Metamask beim direkten Öffnen der Datei index.html nicht funktioniert. Öffnen Sie dazu das Terminal und installieren Sie dieses:</p><pre>npm i -g http-server</pre><p>Führen Sie dann in Ihrem Projektordner http-server aus, um einen lokalen Server für Ihre index.html zu starten:</p><pre>http-server</pre><p>Damit werden die Dateien auf localhost: 8080 bereitgestellt, sodass Sie darauf zugreifen und das Web3 über die Metamask einspeisen können.</p><p>Konzentrieren wir uns auf die Bereitstellung des Vertrags, den wir gerade über unsere Web-App erstellt haben, und zwar genau dann, wenn der Benutzer auf "Weiter" klickt.</p><p>Um einen neuen Vertrag zu implementieren, benötigen wir das ABI, die Konstruktorparameter und den Bytecode. Das sind die Voraussetzungen für web3.js.</p><ol><li>Um das ABI zu generieren, gehen Sie zu remix.ethereum.org, fügen Sie Ihren Code in den Hauptabschnitt ein und klicken Sie auf ABI:</li></ol><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1576416162666.png" /><p>Das wird den ABI-Code kopieren. Gehen Sie in Ihren Projektordner und erstellen Sie eine Datei mit dem Namen contractData.js, um den Code dort mit einer Variablen mit dem Namen abi einzufügen:</p><p>2. Nun benötigen wir den Bytecode Ihres Smart-Vertrags. Der Bytecode ist der kompilierte Smart-Vertrag, der in der Blockchain bereitgestellt wird. Wir benötigen diese Informationen, um ihn bereitstellen zu können. Um den Bytecode zu erhalten, müssen Sie erneut einen Remix durchführen und auf diese Schaltfläche klicken:</p><img alt="Die Bytecode-Kopiertaste für Ihren Code" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1576416163478.png" /><p>Erstellen Sie in contractData.js eine weitere Variable namens bytecode mit diesen Informationen:</p><p>Sie können denselben Code kopieren, wenn Ihr Smart-Vertrag genau dem entspricht, den ich oben erstellt habe.</p><p>Importieren Sie diese Javascript-Datei in Ihr HTML-Format vor die Datei index.js, damit die Variablen abi und bytecode verfügbar sind:</p><pre><script src = "contractData.js"> </ script>
<script src = "index.js"> </ script></pre><p>Bevor wir den Vertrag mit Javascript erstellen, müssen wir einen Ereignis-Listener zum Fortfahren-Button des Abschnitts "Neues Spiel starten" hinzufügen:</p><p>Was ich dort gemacht habe ist:</p><ul><li>Ich habe den Eingaben IDs IDs hinzugefügt, in denen der Benutzer gefragt wird, wie viel Ether er in die Übertragungsurkunde und die Adresse des Vertrags einfügen möchte, wenn er einem vorhandenen Spiel beitritt.</li><li>Dann habe ich den Javascript-Import <script src = "contractData.js> </ script> über index.js hinzugefügt, weil wir wollen, dass der abi-Code und der Bytecode in index.js verfügbar sind, da er zuerst importiert werden muss.</li></ul><p>Dann fügen wir die erforderliche Logik hinzu, damit diese Schaltfläche funktioniert. Wir werden prüfen, ob die im HTML eingegebene Vertragsadresse leer ist oder nicht.</p><p>Wenn es nicht leer ist, wird davon ausgegangen, dass der Spieler ein neues Spiel startet. Interessanterweise können Sie ein Spiel über die Beitrittsschaltfläche starten, wenn Sie die Adresse leer lassen.</p><p>Bevor ich Ihnen den gesamten Code zeige, möchte ich Ihnen erklären, wie Sie einen Vertrag mit web3.js bereitstellen. Es sieht einfach aus, aber ich stecke in einigen Bereichen fest.</p><p>Wenn der Benutzer auf "Neues Spiel starten" klickt, gibt er uns den Treuhandbetrag in Äther und seine Adresse, wir können einen neuen Vertrag mit dieser Funktion bereitstellen:</p><p>Im Wesentlichen erstellen Sie die Vertragsinstanz mit dem abi und führen die Methode .new () für diesen Vertrag mit dem Bytecode aus.</p><p>Im Rückruf erhalten Sie dann eine Fehlermeldung und ein Ergebnisobjekt. Das Ergebnisobjekt enthält die .Adresse des Vertrags, der bereitgestellt wird, wenn die Transaktion von den Minern verarbeitet wird.</p><p>Dies bedeutet, dass dieser Rückruf zweimal ausgeführt wird. Eines, wenn Sie den Vertrag erstellen, und eines, wenn die Adresse dieses Vertrags verfügbar ist.</p><p>Sie können mit einer einfachen if-Anweisung überprüfen, wann die Adresse des Vertrags verfügbar ist:</p><pre>if (! result.address) {
    // Die Vertragserstellung hat begonnen
} else {
    // Der Vertrag wurde implementiert und Sie können die Adresse mit result.address verwenden
}</pre><p>So stellen Sie einen Vertrag mit web3 bereit.</p><p>Aber was ist, wenn Sie auf einen bestehenden Vertrag in der Blockchain zugreifen möchten?</p><p>Genau das brauchen wir, um an einem Würfelspiel „teilzunehmen“ und eine Vertragsinstanz zu erstellen. Zu diesem Zweck benötigen wir nur die ABI und die Adresse des Vertrages, der Bytecode ist nicht erforderlich. So geht's in web3:</p><pre>Vertrag = web3.eth.contract (abi)
contractInstance = Contract.at (addressSelected)</pre><p>Danach können Sie Funktionen dieses Vertrags wie folgt ausführen:</p><pre>contractInstance.setupPlayer2 ({
  value: web3.toWei (valueSelected),
  Gas: 4e6
}, (err, result) => {
    // Nach dem Ausführen der Funktion etwas tun
})</pre><p>Sie benötigen nur die Instanz, den Funktionsnamen, gegebenenfalls die Parameter und die Rückruffunktion.</p><p>Nachdem Sie verstanden haben, wie die Bereitstellung und Instanziierung eines intelligenten Vertrags mit JavaScript funktioniert, zeige ich Ihnen den vollständigen Code der Anwendung:</p><p>Ignorieren Sie alles, worauf Sie sich konzentrieren müssen, befindet sich im Block des Listeners "# button-continue":</p><pre>document.querySelector ('# button-continue'). addEventListener ()</pre><p>Weil Sie sich nur darum kümmern müssen, was passiert, wenn Spieler 1 oder Spieler 2 auf die Schaltfläche "Weiter" klicken. Hier ist die Aufteilung:</p><ul><li>Wenn ein Spieler auf diese Schaltfläche klickt, wird dieser Ereignis-Listener ausgeführt</li><li>Im Inneren erhalte ich die Werte der Eingaben, um die Übertragungsurkunde und die Adresse des bereitgestellten Vertrags einzurichten, wenn der Spieler einem vorhandenen Spiel beitritt. Dies sind die Variablen valueSelected und addressSelected.</li><li>Dann erstelle ich mit dem abi die Vertrags-Setup-Variable, die für beide Spieler benötigt wird.</li><li>Danach sehe ich, ob die Adresse des bereitgestellten Vertrags festgelegt ist oder nicht. Wenn die Adresse leer ist, bedeutet dies, dass der Spieler auf "Neues Spiel starten" geklickt hat, da er in diesem Fall die Adresseingabe nicht sieht.</li><li>Das bedeutet, dass ich ein neues Spiel oder einen neuen Smart-Vertrag für diesen Spieler mit der ausgewählten Übertragungsurkunde bereitstelle.</li><li>Diesem ersten Spieler wird die Adresse des implementierten Smart-Vertrags angezeigt. Er muss diese Adresse mit dem anderen Spieler teilen, um ein Würfelspiel zu starten, da Sie 2 Spieler benötigen.</li><li>Wenn er eine Adresse angegeben hat, bedeutet dies, dass er an einem vorhandenen Spiel teilnehmen möchte. Wir können das tun, indem wir eine Instanz des Smart-Vertrags mit dessen Adresse erstellen und dann die Funktion setupPlayer2 () ausführen.</li><li>Ich verwende die setInterval-Funktion, um alle 1 Sekunde zu überprüfen, ob die Einrichtung von Player 2 abgeschlossen wurde, oder um das Spiel nicht zu starten.</li></ul><p>Groß! Wenn Sie es bis jetzt geschafft haben, bedeutet dies, dass Sie engagiert sind und tatsächlich etwas lernen. Das Beste ist näher als Sie denken. Im nächsten Artikel erfahren Sie, wie Sie Statuskanäle für Ihr Spiel in Javascript erstellen, um eine skalierbare dezentrale Ethereum-Anwendung zu erstellen.</p><p>Verpassen Sie es nicht und lesen Sie es als Erster, wenn es fertig ist. Treten Sie meiner exklusiven Mailingliste von Ethereum-Entwicklern bei, um Updates und Informationen direkt von mir zu erhalten: http://eepurl.com/dDQ2yX</p><p>Teil 2 ist ab sofort hier verfügbar: https://medium.com/@merunasgrincalaitis/wie-skalierbare-apps-und-Künstlerverträge-herum-mit-Statuskanälen-Schritt für Schritt- 690f71a9bf2f</p><p>Wenn Sie sich mit solchen fortgeschrittenen Informationen überfordert fühlen oder noch nicht mit Solidity und Ethereum-Dapps vertraut sind, lesen Sie mein Buch „Ethereum Developer: Learn Solidity From Scratch“ hier. Https://merunas.io/</p></div><ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3845662922897763" data-ad-slot="2704103789"></ins><script>
        (adsbygoogle = window.adsbygoogle || []).push({});
      </script><div class="neighbor-articles"><h4 class="ui header">Siehe auch</h4><a href="/item/how-to-become-a-fierce-creative-edd930/" title="Wie man ein wilder Kreativer wird">Wie man ein wilder Kreativer wird</a><a href="/item/save-yourself-some-time-here-s-how-to-do-christmas-shopping-right-6dee66/" title="Sparen Sie sich etwas Zeit. So erledigen Sie Weihnachtseinkäufe richtig">Sparen Sie sich etwas Zeit. So erledigen Sie Weihnachtseinkäufe richtig</a><a href="/item/crossing-the-product-chasm-or-how-to-prioritise-your-product-work-to-widen-your-audience-291859/" title="Überqueren Sie die „Produktlücke“ oder bestimmen Sie, wie Sie Ihre Produktarbeit priorisieren, um Ihr Publikum zu erweitern">Überqueren Sie die „Produktlücke“ oder bestimmen Sie, wie Sie Ihre Produktarbeit priorisieren, um Ihr Publikum zu erweitern</a><a href="/item/guilt-and-the-negative-thoughts-associated-with-diabetes-and-how-to-overcome-them-09a81f/" title="Schuld und die negativen Gedanken im Zusammenhang mit Diabetes und wie man sie überwinden kann">Schuld und die negativen Gedanken im Zusammenhang mit Diabetes und wie man sie überwinden kann</a><a href="/item/how-to-start-writing-again-in-4-easy-steps-6dacdd/" title="Wie fange ich wieder an zu schreiben? In 4 einfachen Schritten">Wie fange ich wieder an zu schreiben? In 4 einfachen Schritten</a></div></main><div class="push"></div></div><footer style="height:50px">chinthaka.org<!-- --> © <!-- -->2020<!-- --> <a href="https://ar.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be" title="https://chinthaka.org">chinthaka.org</a></footer></div></div></div><script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script><script>
                  window.cookieconsent.initialise({
                    "palette": {
                      "popup": {
                        "background": "#eaf7f7",
                        "text": "#5c7291"
                      },
                      "button": {
                        "background": "#56cbdb",
                        "text": "#ffffff"
                      }
                    },
                    "showLink": false
                  });
              </script><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script>
                (adsbygoogle = window.adsbygoogle || []).push({
                  google_ad_client: "ca-pub-3845662922897763",
                  enable_page_level_ads: true
                });
              </script></body></html>