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>        </ins><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></body></html>