ステートチャネルを使用してEthereumでスケーラブルなdAppとスマートコントラクトを段階的に作成する方法。パート1

プラズマや状態チャネルなど、数千または数百万のリアルタイムユーザーに対応する分散アプリケーションを作成するためのさまざまなソリューションが多数あります。このガイドでは、状態チャネルの仕組みと、イーサリアムでスケーラブルなアプリケーションを作成する方法について、順を追って説明します。

ブロックチェーンの将来の改善を待つ必要はありません。このテクノロジーは今後も変わらず、あらゆる種類のdAppの作成に使用できます。現在、状態チャネルは、主にイーサリアムのブロックチェーンベースのゲームに使用されています。

暗号通貨でギャンブルを考えてください。このシステムの重要なポイントである情報を後で公開するために情報を暗号化する方法があります。

状態チャネルとは何ですか?

数百万人のユーザーがほぼリアルタイムで使用できる分散アプリケーションとスマートコントラクトを作成するためのスケーリングソリューションです。実行するトランザクションの情報で暗号化および署名されたメッセージを交換する2人以上のユーザー間でチャネルを開始することで機能します。

各インタラクションは更新可能な状態にする必要があるため、「状態」と呼ばれます。ゲームのスコアまたは銀行残高について考えてください。

なぜ存在するのですか?

イーサリアムアプリケーションの人気が急速に高まり、適度な使用で開発されたブロックチェーンが使用できなくなったため、状態チャネルが作成されました。それらは、ガス代を支払ったり、鉱夫がトランザクションを処理するのを待つことなく、継続的なトランザクションを可能にします。

これは、無料で高速のトランザクションを意味します。

状態チャネルを設定するには何が必要ですか?

  1. 互いに対話する少なくとも2人のユーザー。 2人以上のユーザー間でチャンネルを開く必要があります。チャットアプリケーションに似ています。
  2. 開閉する状態チャネルロジックとのスマートコントラクト。
  3. 状態チャネルがゲームで使用される場合、両方のユーザーにエスクローが必要になります。エーテルのエスクローは、チャネルを開くときにスマートコントラクトに保存されます。
  4. ユーザー間でオフチェーンで交換される署名済みメッセージを生成するJavaScriptアプリケーション。
  5. メタマスクまたはメッセージに署名するための同様のツール。メッセージへの署名はガソリン代がかからず、即座に実行されます。両方のユーザーがメッセージに署名して、tehyがそのようなトランザクションを生成していることを保証する必要があります。
  6. それらの署名されたメッセージを交換して、そのアプリケーションを可能にする電子メールまたは外部アプリケーション。

彼らはどのように機能しますか?

ステートチャネルは、セットアップが少し複雑です。何か問題が発生した場合に両方のプレーヤーを保護する必要があるため、スマートコントラクトが必要な理由です。手順は次のとおりです。

  1. 2人のユーザー間の状態チャネルでは、最初のチャネルがスマートコントラクトを展開し、チャネルを「開きます」。
  2. 2つ目は、そのスマートコントラクトの機能を実行して、その状態チャネルを「結合」します
  3. その後、アプリケーション用の署名済みメッセージの交換を開始できます。両方のユーザーは、カスタムjavascriptアプリケーションにアクセスして、スマートコントラクトで行うがオフチェーンの情報を含むメッセージを生成します。
  4. トランザクションの速度は、各ユーザーがこれらのメッセージを作成して署名できる速度に依存します。彼らはメッセージを交換し続け、ゲームが終了したと判断するまでオフチェーンでプレイします。
  5. 彼らがゲームを終了すると、誰でもスマートコントラクトに行き、それを終了する機能を実行して、「交渉」の段階を開始できます。
  6. このフェーズでは、両方のユーザーが1日のタイムアウトを持ち、最新の2つのメッセージをスマートコントラクトにアップロードします。スマートコントラクトは最新のメッセージをチェックし、その情報に基づいてゲームを終了するために資金を解放します。各メッセージには以前のインタラクションの結果が含まれているため、最新のインタラクションのみをチェックしても安全です。

これを実際の状況でどのように適用できますか?

このガイドでは、イーサリアムゲーム用に2人のユーザー間に状態チャネルを作成する方法を示します。状態チャネルは、「状態」またはカウンターを持つあらゆる種類のアプリケーションに使用できることに注意してください。それがゲームが理想的な理由です。各ゲームの勝者を追跡できるため、更新可能な各ゲームの状態があります。

プレイヤー1が出てくるサイコロの数を選択し、プレイヤー2が勝つためにその数を推測しなければならないサイコロゲームを作成します。ブロックチェーンでトランザクションを実行することなく、好きなだけゲームをプレイできます。インターフェイスを表示するWebアプリも用意されます。

これは、このような分散アプリケーションを作成するために従うインデックスです。

  1. ビジュアルWebアプリを作成します。これはインターフェースであり、ゲームが外部ユーザーにどのように見えるかです。状態チャネルの署名付きメッセージを交換するための媒体として使用されます。
  2. メッセージの署名と暗号化に必要な機能の作成。
  3. スマートコントラクトを作成します。

1.ビジュアルWebアプリの作成

コードを開始する前に、Webアプリの完全な詳細を明確にする必要があります。どのように見えるか、注意の焦点は何ですか。

この場合、両方のプレーヤーに同様のものを表示します。プレイヤー1は、サイコロの6つの面を画像として表示し、どちらが出てくるかを選択する必要があります。次に、2番目のプレイヤーもそれらの面を選択する必要があり、結果を見ることができます。

したがって、フレームワークは次のようになります。

  1. プレーヤー1はWebアプリに移動し、「新しいゲームを開始する」というボタンをクリックしてから、メタマスクトランザクションを作成してスマートコントラクトを展開および設定します。ゲームを開始するために他のプレイヤーに送信できるスマートな契約アドレスを受け取ります。
  2. プレーヤー2はWebアプリに移動し、プレーヤー1から受け取った契約アドレスで「既存のゲームに参加」というボタンをクリックし、メタマスクトランザクションを行って既存のゲームをセットアップし、エスクローを送信します。

すぐに始めましょう。 Webアプリの中央に2つのボタンを持つボックスを作成しましょう。 diceというフォルダーとindex.htmlというファイルを作成します。コードは次のとおりです。

これがデフォルトで2つのボタンがどのように見えるかです
<!DOCTYPE html>

    
        
        サイコロイーサリアムゲーム</ title>
    </ head>
    <本体>
        <div class = "main-content">
            <button>新しいゲームを開始</ button>
            <button>既存のゲームに参加</ button>
        </ div>
    </ body>
</ html></pre><p>そのコードでは、ボタンとタイトルを含むdivを持つ基本的なHTML構造を作成しました。 divにはmain-contentというクラスがあり、すぐに使用することに注意してください。</p><p>いくつかのCSSでそれをきれいにしましょう。次のコードでindex.cssというファイルを作成します(これをコピーして貼り付けることができます)。</p><img alt="これがどのように見えるかです" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1576416098899.png" /><pre>体 {
    フォントファミリー:サンセリフ;
}</pre><pre>。メインコンテンツ {
    マージン:自動;
    最大幅:500px;
    背景色:ホワイトスモーク;
    パディング:50px;
    ボーダー半径:10px;
    ディスプレイ:グリッド。
    grid-template-rows:1fr 1fr;
    grid-template-columns:1fr 1fr;
    grid-column-gap:10px;
}</pre><pre>.main-content h1 {
    グリッド列:1 /スパン2;
}</pre><pre>.main-contentボタン{
    ボーダー:なし;
    色:白;
    背景色:#007dff;
    パディング:20px;
    ボーダー半径:5px;
    カーソル:ポインター。
}</pre><pre>.main-content button:hover {
    不透明度:0.8;
}</pre><pre>.main-content button:active {
    不透明度:0.6;
}</pre><p>HTMLにh1タイトルを追加して見栄えを良くしました。CSSにリンクを追加して、HTMLを更新してください。</p><pre><!DOCTYPE html>
<html lang = "en" dir = "ltr">
    <head>
        <meta charset = "utf-8">
        <link rel = "stylesheet" href = "index.css">
        <title>サイコロイーサリアムゲーム</ title>
    </ head>
    <本体>
        <div class = "main-content">
            <h1>イーサリアムサイコロ</ h1>
            <button>新しいゲームを開始</ button>
            <button>既存のゲームに参加</ button>
        </ div>
    </ body>
</ html></pre><p>あなたは私が新しいCSSグリッドを使用していることに気づいたかもしれません。これは、ほとんどの場合大きなブラウザで使用できるため、ほとんどの人がcssを適切に表示するため、この時点で使用しても非常に安全だからです。</p><p>ユーザーに要求される次のアクションを表示する最良の方法は、必要な情報を含むdivをjavascriptで表示することであると判断しました。そのため、[新しいゲームを開始]をクリックすると、ゲーム用にどの程度のエスクローを設定するかを尋ねるボックスが表示されます。</p><p>「既存のゲームに参加」をクリックすると、既存のゲームのエスクローと契約アドレスが求められます。</p><p>ボタンのアクションは次のように応答します。</p><img alt="アプリがプレーンJavaScriptでどのように見えるか" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1576416159998.gif" /><p>それを可能にするために、JavaScriptロジックを含むindex.jsファイルを作成しました。 JavaScriptは次のとおりです。これをさらに学習したい場合は、必ず手で入力してください。</p><p>そこで行ったことを説明しましょう。</p><ul><li>最初に、すぐに実行されてコンテンツをラップするstart()という関数を作成し、1つの大きな関数に含まれるようにします。</li><li>次に、htmlファイルの開始ボタンまたは参加ボタンをクリックするたびにアクティブになる2つのイベントリスナーを作成しました。 1つは#new-gameボタン用で、もう1つは#join-gameボタン用です。 document.querySelector()を使用しています。これは、jsコード内の任意のものを選択する最も強力な方法の1つです。</li><li>これらのリスナー内で、対応する各要素のdivボックスを表示または非表示にします。基本的にquerySelectorで囲まれたボックスを選択し、表示するcssで設定されている非表示のクラスを削除または追加します。 。</li></ul><p>次に、jsファイルをmodifie index.htmlに接続します。</p><pre><!DOCTYPE html>
<html lang = "en" dir = "ltr">
    <head>
        <meta charset = "utf-8">
        <link rel = "stylesheet" href = "index.css">
        <title>サイコロイーサリアムゲーム</ title>
    </ head>
    <本体>
        <div class = "main-content">
            <h1>イーサリアムサイコロ</ h1>
            <button id = "new-game">新しいゲームを開始</ button>
            <button id = "join-game">既存のゲームに参加</ button></pre><pre>            <div class = "hidden new-game-setup">
                <h3> ETHでどれくらいのエスクローを使用しますか?</ h3>
                <input type = "number" placeholder = "2 ...">
            </ div></pre><pre>            <div class = "hidden join-game-setup">
                <h3>既存のゲームのスマートコントラクトアドレスは何ですか?</ h3>
                <input type = "text" placeholder = "0x38dfj39 ...">
            </ div></pre><pre>            <button id = "button-continue" class = "hidden">続行</ button>
        </ div></pre><pre>        </ins></div><div class="article-sidebar"><div class="neighbor-articles"><h4 class="ui header">こちらもご覧ください</h4><a href="/item/planning-your-perfect-sized-kickstarter-book-project-69e71e/" title="完璧なサイズのキックスターターブックプロジェクトの計画">完璧なサイズのキックスターターブックプロジェクトの計画</a><a href="/item/how-to-play-repop-world-64c3b3/" title="REPOP WORLDのプレイ方法">REPOP WORLDのプレイ方法</a><a href="/item/how-to-make-friends-and-believe-in-yourself-without-wearing-pants-d1177b/" title="ズボンを着用せずに友達を作り、自分を信じる方法。">ズボンを着用せずに友達を作り、自分を信じる方法。</a><a href="/item/how-to-go-from-good-to-great-a039a4/" title="グッドからグレートへの行き方">グッドからグレートへの行き方</a><a href="/item/how-to-talk-to-your-family-about-cryptocurrency-on-christmas-bed246/" title="クリスマスに暗号通貨について家族と話す方法">クリスマスに暗号通貨について家族と話す方法</a><a href="/item/how-to-track-down-your-lost-sock-a-step-by-step-guide-426979/" title="紛失した靴下を追跡する方法:ステップバイステップガイド">紛失した靴下を追跡する方法:ステップバイステップガイド</a><a href="/item/how-to-host-vs-code-on-a-vps-using-coder-aka-code-server-747cf3/" title="Coder(aka:code-server)を使用してvpsでVS Codeをホストする方法">Coder(aka:code-server)を使用してvpsでVS Codeをホストする方法</a></div></div></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://vi.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="vn flag"></i></a><a href="https://uk.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="ua flag"></i></a><a href="https://tr.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="tr flag"></i></a><a href="https://th.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="th flag"></i></a><a href="https://sv.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="ch flag"></i></a><a href="https://sr.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="rs flag"></i></a><a href="https://sl.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="si flag"></i></a><a href="https://sk.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="sk flag"></i></a><a href="https://ru.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="ru flag"></i></a><a href="https://ro.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="ro flag"></i></a><a href="https://pt.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="pt flag"></i></a><a href="https://pl.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="pl flag"></i></a><a href="https://chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="de flag"></i></a><a href="https://ar.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="sa flag"></i></a><a href="https://bg.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="bg flag"></i></a><a href="https://cs.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="cz flag"></i></a><a href="https://da.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="dk flag"></i></a><a href="https://el.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="gr flag"></i></a><a href="https://es.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="es flag"></i></a><a href="https://et.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="ee flag"></i></a><a href="https://fi.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="fi flag"></i></a><a href="https://fr.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="fr flag"></i></a><a href="https://hi.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="in flag"></i></a><a href="https://hr.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="hr flag"></i></a><a href="https://hu.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="hu flag"></i></a><a href="https://id.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="id flag"></i></a><a href="https://it.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="it flag"></i></a><a href="https://ko.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="kr flag"></i></a><a href="https://lt.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="lt flag"></i></a><a href="https://lv.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="lv flag"></i></a><a href="https://ms.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="my flag"></i></a><a href="https://nl.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="nl flag"></i></a><a href="https://no.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="no flag"></i></a><a href="https://uz.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="uz flag"></i></a></div>chinthaka.org<!-- --> © <!-- -->2020<!-- --> </footer></div></div></div></body></html>