Truffle Suite を使用してイーサリアム DApp を構築する

Truffle Suite は、イーサリアム DApps を構築するための開発フレームワークです。これには、開発者がスマートコントラクトを簡単に作成、テスト、展開するのに役立つ Truffle、Ganache、Drizzle などのツールが含まれています。

この記事では、Truffle Suite を使用してシンプルな DApp を構築する方法を紹介し、Metamask ブラウザプラグインを使用して DApp と対話する方法を示します。ここでは、読者がすでに Solidity 言語と Truffle 開発フレームワークに精通していることを前提としています。

1. スマートコントラクトを作成する

まず、スマートコントラクトを作成する必要があります。ここでは、ユーザーが整数値を設定および取得できるようにする SimpleStorage というコントラクトを作成します。

コマンドラインウィンドウを開き、プロジェクトを作成するディレクトリを入力して、次のコマンドを実行します。

truffle init

次に、SimpleStorage.sol というファイルを作成し、次のコードをコピーします。

pragma solidity ^0.8.0;

contract SimpleStorage {
    uint256 private _value;

    function setValue(uint256 value) public {
        _value = value;
    }

    function getValue() public view returns (uint256) {
        return _value;
    }
}

このコントラクトは、SimpleStorage という名前のコントラクトを定義します。これには、プライベート変数 _value と 2 つのパブリック関数 setValue および getValue が含まれます。setValue 関数は、uint256 型の値を受け取り、それを _value 変数に格納します。getValue 関数は、_value 変数の現在の値を返します。

2. スマートコントラクトを導入する

次に、スマートコントラクトをデプロイする必要があります。コマンドラインウィンドウで、次のコマンドを実行します。

truffle migrate

これにより、デフォルトのローカルイーサリアムノードを使用してスマートコントラクトがデプロイされます。

3. フロントエンドアプリケーションを作成する

これで、フロントエンドアプリケーションを作成できます。コマンドラインウィンドウで、次のコマンドを実行します。

npm init -y
npm install --save [email protected]

次に、index.html というファイルを作成し、次のコードをコピーします。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>SimpleStorage DApp</title>
  </head>
  <body>
    <h1>SimpleStorage DApp</h1>
    <form id="setForm">
      <label for="value">Value:</label>
      <input type="number" id="value" name="value" />
      <button type="submit">Set Value</button>
    </form>
    <p id="getValue"></p>

    <script src="./index.js"></script>
  </body>
</html>

このコードは、フォームと段落要素を含む単純な HTML ページを定義します。フォームは新しい値を設定するために使用され、段落要素は現在の値を表示するために使用されます。

4.JavaScriptファイルを作成する

次に、index.js という JavaScript ファイルを作成し、次のコードをコピーする必要があります。

const Web3 = require('web3');

window.addEventListener('load', async () => {
  if (typeof web3 !== 'undefined') {
    window.web3 = new Web3(web3.currentProvider);
  } else {
    window.web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));
  }

  const contractAddress = '0x...'; // 这里填写部署后的智能合约地址
  const abi = [
    {
      constant: false,
      inputs: [{ name: 'value', type: 'uint256' }],
      name: 'setValue',
      outputs: [],
      payable: false,
      stateMutability: 'nonpayable',
      type: 'function',
    },
    {
      constant: true,
      inputs: [],
      name: 'getValue',
      outputs: [{ name: '', type: 'uint256' }],
      payable: false,
      stateMutability: 'view',
      type: 'function',
    },
  ];

  const simpleStorage = new web3.eth.Contract(abi, contractAddress);

  const setForm = document.getElementById('setForm');
  setForm.addEventListener('submit', async (event) => {
    event.preventDefault();
    const value = document.getElementById('value').value;
    await simpleStorage.methods.setValue(value).send({ from: web3.eth.defaultAccount });
    alert('Value set successfully!');
  });

  const getValueElement = document.getElementById('getValue');
  setInterval(async () => {
    const value = await simpleStorage.methods.getValue().call();
    getValueElement.textContent = `Current value: ${value}`;
  }, 1000);
});

このコードは、Web3 ライブラリを使用して Ethereum ネットワークに接続し、デプロイされたスマートコントラクトのインスタンスを取得します。また、新しい値を設定し、成功時に警告メッセージを表示するフォームイベントリスナーも定義します。最後に、現在の値も定期的に取得し、段落要素に表示します。

5. ブラウザで DApp を実行する

これで、ブラウザーで DApp を実行できるようになりました。コマンドラインウィンドウで、次のコマンドを実行します。

npm install -g http-server
http-server

これにより、ローカル HTTP サーバーが起動し、ブラウザで http://localhost:8080/ が開きます。現在の値を設定および表示するための単純なフォームと段落要素が表示されるはずです。

6. Metamask ブラウザプラグインを使用して DApp と対話します

最後に、Metamask ブラウザプラグインを使用して DApp と対話できます。Metamask がインストールされており、Rinkeby テストネットワークアカウントが作成されていることを確認してください。

———————————————————本初子午線———————————————————

以下では、Truffle Suite を使用して簡単な投票アプリケーションを構築する方法を説明します。このアプリを使用すると、ユーザーは新しい投票を作成し、各投票にオプションを追加できます。他のユーザーは投票したり、現在の投票結果を表示したりできます。

1. Truffle Suiteをインストールする

まず、Truffle Suiteをインストールする必要があります。コマンドラインウィンドウを開き、次のコマンドを実行します。

npm install -g トリュフ

2. Truffle プロジェクトを作成する

次に、Truffle を使用して新しいプロジェクトを作成します。コマンドラインウィンドウで、プロジェクトを作成するディレクトリに移動し、次のコマンドを実行します。

トリュフの熱

これにより、新しい Truffle プロジェクトが作成され、いくつかのデフォルトのファイルとディレクトリが生成されます。

3. スマートコントラクトを作成する

Truffle プロジェクトでは、contracts ディレクトリにスマートコントラクトを作成できます。投票アプリケーションを作成するには、Voting というコントラクトを作成します。Contract/Voting.sol ファイルを開き、次のコードをコピーします。

solidity
pragma solidity ^0.5.0;

contract Voting {
    mapping (bytes32 => uint256) public votes;

    function vote(bytes32 option) public {
        votes[option] += 1;
    }
}

このコントラクトは、voting と呼ばれるマップを含む Voting と呼ばれるコントラクトを定義します。このマップは、オプション名を投票数にマッピングします。

このコントラクトでは、option というバイト配列を受け取り、そのオプションの投票数を 1 つ増やす vote というパブリック関数も定義しています。

4. 導入スクリプトを作成する

Truffle プロジェクトでは、JavaScript スクリプトを使用してスマートコントラクトをデプロイできます。migrations/2_deploy_contracts.js ファイルを開き、次のコードをコピーします。

const Voting = artifacts.require("Voting");

module.exports = function(deployer) {
  deployer.deploy(Voting);
};

このスクリプトは Voting というコントラクトを定義し、デプロイ時にそのコントラクトのインスタンスを作成します。

5. スマートコントラクトをコンパイルしてデプロイする

これで、Truffle を使用してスマートコントラクトをコンパイルし、デプロイできるようになりました。コマンドラインウィンドウで、次のコマンドを実行します。

トリュフコンパイル

これにより、スマートコントラクトがコンパイルされ、いくつかの ABI およびバイトコードファイルが生成されます。

次に、次のコマンドを実行してスマートコントラクトをデプロイします。

トリュフの移動

これにより、スマートコントラクトがデプロイされ、イーサリアムネットワーク上にローカルに保存されます。

6. 投票用 DApp を作成する

ここで、Truffle を使用して単純な投票 DApp を作成できます。コマンドラインウィンドウで、次のコマンドを実行します。

トリュフの開封反応

これにより、React と Web3.js を使用した基本的な DApp が作成されます。

次に、src/App.js ファイルを開き、次のコードをコピーします。

import React, { Component } from 'react';
import VotingContract from './contracts/Voting.json';
import getWeb3 from './getWeb3';

class App extends Component {
  state = {
    web3: null,
    accounts: null,
    contract: null,
    options: [],
    selectedOption: null,
    voted: false,
    loading: true,
  };

  componentDidMount = async () => {
    try {
      const web3 = await getWeb3();
      const accounts = await web3.eth.getAccounts();
      const networkId = await web3.eth.net.getId();
      const deployedNetwork = VotingContract.networks[networkId];
      const contract = new web3.eth.Contract(
        VotingContract.abi,
        deployedNetwork && deployedNetwork.address,
      );

      const options = ['Option 1', 'Option 2', 'Option 3'];
      this.setState({ web3, accounts, contract, options }, this.listenToEvents);
    } catch (error) {
      console.error(error);
    } finally {
      this.setState({ loading: false });
    }
  };

  vote = async (option) => {
    const { accounts, contract } = this.state;
    await contract.methods.vote(option).send({ from: accounts[0] });
    this.setState({ voted: true });
  };

  listenToEvents = () => {
    const { contract } = this.state;
    contract.events.Vote({}, (error, event) => {
      console.log(event);
    });
  };

  render() {
    const { web3, accounts, contract, options, selectedOption, voted, loading } = this.state;

    if (loading) {
      return <div>Loading...</div>;
    }

    return (
      <div>
        <h1>Voting DApp</h1>
        <p>Connected to Ethereum network with address: {accounts[0]}</p>

        <h2>Options:</h2>
        <ul>
          {options.map((option) => (
            <li key={option}>
              {option}{' '}
              {!voted && (
                <button onClick={() => this.vote(option)}>Vote</button>
              )}
            </li>
          ))}
        </ul>

        {voted && (
          <p>You have voted for {selectedOption}.</p>
        )}
      </div>
    );
  }
}

export default App;

このコードは、オプションのリストと投票ボタンを含む Voting という DApp を作成します。ユーザーが投票ボタンをクリックすると、DApp はスマートコントラクトの投票関数を呼び出し、オプション名をパラメータとして渡します。

さらに、このコードはスマートコントラクトの Vote イベントもリッスンし、イベントデータをコンソールに出力します。

7. 投票 DApp を実行する

最後に、Truffle を使用して投票 DApp を実行できます。コマンドラインウィンドウで、次のコマンドを実行します。

npm 実行開始

これにより DApp が起動し、ブラウザで開きます。ここで、新しい投票を作成して投票してみます。

結論として、Truffle Suite は、Ethereum DApps を簡単に構築できる非常に便利な開発フレームワークです。この記事では、Truffle と React を使用して単純な投票アプリケーションを作成し、スマートコントラクトをコンパイル、デプロイ、実行する方法を示しました。Ethereum DApp 開発を行っている場合、Truffle Suite は間違いなく試してみる価値のあるツールです。