ブロックチェーン DAPP 学習に関する簡単な説明

序文

最近メタバースが流行っていて、友達とメタバース（VR仮想現実、現実世界のデジタルツイン）とは何かについて話していたのですが、その後Web3.0の話になり、メタバースとWeb3についてリアルに話しました。 .0 はまだ漠然とした考えですが、それらはすべて実用的な技術的解決策を持っています。今日はメタバースについては話しません (実際、インターネット自体がユビキタスメタバースです。

VR技術についてはあまり詳しくないので話しませんが、中国にはすでにthingjsなどのフールプルーフツールがたくさんありますし、Youplait Technologyも良い製品を持っています。今日は web3.0 について話したいと思います。すべての人のための未来です。あなたが所有できるインターネット。簡単に言えば、web1.0 は読み取り専用ネットワーク (NetEase を表す)、web2.0 は読み取り専用ネットワークです。書き込みネットワーク (Weibo と WeChat を表す)。

最初の 2 世代のネットワークは中央集権的なネットワークであり、ネットワークユーザーの情報の権利を保証すること、つまりコンテンツの権利を確認することが困難でしたが、Web3.0 では所有権を保証できます。では、どうやって所有権を確保するのでしょうか? 実際、それはブロックチェーンです。メタバースではこの問題を避けることはできません。将来のすべてのネットワークにはブロックチェーンが必要になるようです。ただし、現段階では、メインチェーンとサイドチェーンの両方のブロックチェーンが遅くて必要な作業現段階のテクノロジーでは、非常に多くのブロックを書き込み、権利を確認するにはまだ時間がかかるのが現実です。

Web3.0を学ぶ理由

会社（公：数人の財産、会社：運営の意味）。現代社会の発展に伴い、企業と人々の間の経済生産協力、特にインターネット下でのさまざまな種類の協力はますます複雑になっています。 ? 複数の経済生産活動における価値は、インターネットが解決する必要がある問題です。感染症の流行により、在宅勤務、フリーランサー、そして新たな社会的生産関係のニーズにより、Web3.0 とメタバースの改善が常に促進されています。

Web3.0を学ぶために習得する必要があるテクノロジーは何ですか

Solidity スマートコントラクト記述言語

Solidity 言語は、イーサリアムブロックチェーンネットワーク上でスマートコントラクトを実装するために使用される高レベルのコントラクト指向プログラミング言語です。開発ツール Remix については、オンラインエディター [https://remix.ethereum.org] の使用を推奨します。オンラインエディターは、matemask とシームレスに接続できます。ブロックチェーンスマートコントラクトは、スマートウォレットと統合する必要があります。

トリュフ

これは、ローカライズされたスマートコントラクト開発環境、テストフレームワーク、およびイーサリアム仮想マシン (EVM) に基づくオンチェーンツールです。

ゲス

geth は完全なイーサリアムノードを構築できますが、開発にはローカルメモリの仮想ガナッシュを使用するだけで十分なので、ここではあまり詳しく説明しません。

ガナッシュ

Ganache はパーソナル Ethereum ブロックチェーンを迅速に起動でき、テストの実行、コマンドの実行、ステータスの確認、チェーンの動作方法の制御に使用できます。

ノードjs

私が紹介した web3.0 技術ソリューションは、truffle や Ganache も含め、すべて npm ベースでインストールされています。次の記事は、誰もが Node JS の知識を知っていることを前提としています。

コーディングを開始する

ポータブルな Solidity 投票コード

投票に関する簡単な規約はこちら

pragma solidity ^0.4.0;
 contract Voting{
    //投票列表
    bytes32[] public candidateList;
    //对应的票数
    mapping(bytes32=>uint8) public votesReceived;
    //构造投票列表
    constructor(bytes32[] memory  candidateListName) public{
        candidateList = candidateListName;
    }
    //判断投票信息是否在待投票列表
    function valiCandidate(bytes32 candidateName) internal view returns(bool)
    {
        for(uint8 i=0;i〈candidateList.length;i++)
        {
            if (candidateName==candidateList[i])
            {
                return true;
            }
        }
        return false;
    }
   //对投票人增加投票
    function voteForCandidate(bytes32 candidateName) public{
        require(valiCandidate(candidateName));
        votesReceived[candidateName] = votesReceived[candidateName] + 1;
    }                                  
    function totalVotesFor(bytes32 candidateName) view public returns(uint8){
        require(valiCandidate(candidateName));
        //返回票数
        return votesReceived[candidateName];
    }
}

ガナッシュをインストールする

グローバルにインストールするには、必ず -g を追加してください

npm install ganache-cli -g# 6.12
    npm install ganache -g# 7.0
    ganache-cli -d #启动它ganache

トリュフをインストールする

グローバルにインストールするには、必ず -g を追加してください

npm install truffle -g

truffle dapp フレームワーク (web3.0) を初期化する

mkdir voting
    cd voting
    truffle unbox webpack

初期化されたプロジェクトのディレクトリ構造は次のとおりです。

APP ディレクトリは、node js web3.0 プロジェクトです。build ディレクトリは、呼び出し用にコンパイルされたコントラクトディレクトリです。contracts は、リミックスで書かれたコントラクトで、migrations はコントラクトデプロイメントファイルです。test ディレクトリはテストファイルです。truffle-config .js は設定ファイルです。

truffle-config.js 構成

ローカル Ganache へのリンクを示すコメント 127.0.0.1 port 8545 のチェックを外します。

Voting.sol をプロジェクト契約ディレクトリにデプロイします。

truffle compile

プロジェクトのデフォルトのコントラクトはこのディレクトリに配置されます: コマンド (truffle COMPILE) を実行してコンパイルします。コンパイルが完了すると、build/contracts の下に追加の Voting.json ファイルが作成されます。

移行ディレクトリに新しい 3_deploy_contracts.js ファイルを作成します。

const Voting = artifacts.require("Voting");
   
    //0x4100000000000000000000000000000000000000000000000000000000000000 代表 A
    //0x4200000000000000000000000000000000000000000000000000000000000000 代表 B
    module.exports = function(deployer) {
      //初始化合约 第二是投标列表参数
      deployer.deploy(Voting, ["0x4100000000000000000000000000000000000000000000000000000000000000","0x4200000000000000000000000000000000000000000000000000000000000000"]);
};

コマンドを実行: truffle merge //コントラクトをデプロイ

truffle migrate

契約アドレスは契約のアドレスであり、アカウントは展開アカウントのアドレスです。

アプリディレクトリ内のコードの実装と操作

app/src/ には、voting.js と Voting.html の 2 つのファイルがあります。

vote.js コード:

import Web3 from "web3";
import votingArtifact from "../../build/contracts/Voting.json";
const aInBytes32 ="0x4100000000000000000000000000000000000000000000000000000000000000";
const bInBytes32 ="0x4200000000000000000000000000000000000000000000000000000000000000";
const App = {
  web3: null,
  account: null,
  meta: null,
  start: async function() {
    const { web3 } = this;
    try {
      const networkId = await web3.eth.net.getId();
      const deployedNetwork = votingArtifact.networks[networkId];
      this.voting = new web3.eth.Contract(
        votingArtifact.abi,
        deployedNetwork.address,
      );
      const accounts = await web3.eth.getAccounts();
      this.account = accounts[0];
      this.ready();
      this.refreshBalance();
    } catch (error) {
      console.error("Could not connect to contract or chain.");
    }
  },
  ready:async function(){
     try{
        this.refresh("Alice",aInBytes32);
        this.refresh("Bob",bInBytes32);
     }catch(err){
        console.log(err)
     }
  },
  refresh:async function(id,nameBytes32){
      const {totalVotesFor} = this.voting.methods;
      const tickets = await totalVotesFor(nameBytes32).call();
      const el = document.getElementById(id);
      el.innerHTML = tickets.toString();
  },
   voteForCandidate:async function(){
       try{
          const {voteForCandidate} = this.voting.methods;
          const condidateName = document.getElementById("candidate").value;
          console.log(condidateName)
          if (condidateName == "Alice")
          {
            await voteForCandidate(aInBytes32).send({from:this.account});
            this.refresh("Alice",aInBytes32);
          }
          else{
            await voteForCandidate(bInBytes32).send({from:this.account});
            this.refresh("Bob",bInBytes32);
          }
       }catch(err){
           console.log(err)
       }
   }
};
window.App = App;
window.addEventListener("load", function() {
  if (window.ethereum) {
    // use MetaMask's provider
    App.web3 = new Web3(window.ethereum);
    window.ethereum.enable(); // get permission to access accounts
  } else {
    console.warn(
      "No web3 detected. Falling back to http://127.0.0.1:8545. You should remove this fallback when you deploy live",
    );
    // fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)
    App.web3 = new Web3(
      new Web3.providers.HttpProvider("http://127.0.0.1:8545"),
    );
  }
  App.start();
});

1 行目は web3 をインポートし、2 行目は投票契約をインポートし、3 行目と 4 行目は 2 つの投票項目です。

import Web3 from "web3";
import votingArtifact from "../../build/contracts/Voting.json";
const aInBytes32 ="0x4100000000000000000000000000000000000000000000000000000000000000";
const bInBytes32 ="0x4200000000000000000000000000000000000000000000000000000000000000";

このコードは、ブロックチェーンネットワークとウォレットアカウントを取得し、投票コントラクトを初期化します。

start: async function() {
    const { web3 } = this;
       try {
      // get contract instance
      const networkId = await web3.eth.net.getId();
      const deployedNetwork = votingArtifact.networks[networkId];
      this.voting = new web3.eth.Contract(
        votingArtifact.abi,
        deployedNetwork.address,
      );
      // get accounts
      const accounts = await web3.eth.getAccounts();
      this.account = accounts[0];
      this.ready();
      this.refreshBalance();
    } catch (error) {
      console.error("Could not connect to contract or chain.");
    }
  },
});

投票方法

voteForCandidate:async function(){
       try{
          const {voteForCandidate} = this.voting.methods;
          const condidateName = document.getElementById("candidate").value;
          console.log(condidateName)
          if (condidateName == "Alice")
          {
            await voteForCandidate(aInBytes32).send({from:this.account});
            this.refresh("Alice",aInBytes32);
          }
          else{
            await voteForCandidate(bInBytes32).send({from:this.account});
            this.refresh("Bob",bInBytes32);
          }
       }catch(err){
           console.log(err)
       }
   }

投票.htmlコード

<!DOCTYPE html>
<html>
  <head>
    <title>My Voting Dapp</title>
  </head>
  <style>
    input {
      display: block;
      margin-bottom: 12px;
    }
  </style>
  <body>
    <h1>Voting Dapp</h1>
    <p>Alice <strong id="Alice">loading...</strong> tickets</p>
    <p>Bob <strong id="Bob">loading...</strong> tickets</p>
    <input type="text" id="candidate" />
    <button onclick="App.voteForCandidate()">Send</button>
    <script src="voting.js"></script>
  </body>
</html>

DAPP プロジェクトを初期化して開始します

npm install
  npm run dev

http://localhost:8080/voting.html にアクセスし、「Alice」と入力します。「送信」をクリックします (matemask ウォレットは、確認のために eth コインを使用する必要があることを通知します。私はそれをローカルのシミュレートされたコインとして使用するだけです)。アリスの投票が見つかります。数値は 2 になりました。これはブロックチェーン上で変更できません。

要約する

コントラクトソリディティ言語では、ストレージにはガスが必要で、ブロックに永続的に保存されます。この機能を使用して投票コントラクトを作成し、投票が長期間変更されないようにしました。また、に保存されるメモリもあります。メモリもガスもかかりません。このように、web3.0やdappでは、信用保証が必要なコンテンツをスマートコントラクトを通じてブロックチェーンに保存し、分散型の信頼の役割を果たし、所有権の保証も行っていることがわかります。このように、web3.0では、これまでの読み書きネットワークに対する権利や所有権を確認する機能を提供し、メタバースの基礎を築きました。