Dapps開発の基本

概要

Dappsの本格的な開発に入る前に、まず開発の流れを把握する意味でブラウザに「Hello World!」と表示する、簡単なDappsを開発してみたいと思います。

開発環境

  • Solidity
  • Truffle
  • Ganache
  • Metamask

※開発環境の構築についてはこちらの記事を参考にして下さい

開発の流れ

  1. プロジェクトの構築
  2. コントラクトの作成
  3. コントラクトのコンパイル
  4. コントラクトのデプロイ
  5. コントラクトのテスト
  6. フロントエンドの構築

プロジェクトの構築

hello-worldフォルダを作成し、truffle initで初期化します。

$ mkdir hello-world
$ cd hello-world
$ truffle init

hello-worldディレクトリは以下の様な構造になります。

├── contracts
├── migrations
├── test
└── truffle-config.js

コントラクトの作成

コントラクトを作成します。

$ truffle create contract HelloWorld

コントラクトの内容はget()メソッドで「HelloWorld!」を返す簡単なコントラクトです。

pragma solidity ^0.5.0;

contract HelloWorld {
  // string型の変数wordを定義
  string word;

  // 起動時にword変数に「Hello World!」を入れる
  constructor() public {
    word = 'Hello World!';
  }

  // get()関数はword変数を返す
  function get() public view returns (string memory) {
    return word;
  }
}

コントラクトのコンパイル

テストに通ったので、作成したHelloWorld.solをコンパイルします。 コンパイルするとbuildディレクトリ下にHelloWorld.jsonが作成されます。

$ truffle compile

コントラクトのデプロイ

コントラクトをネットワークにデプロイする為に、マイグレーションファイルを作成します。

$ truffle create migration HelloWorld

すると1××××_deploy_contract.jsと言うファイルがmigrationsディレクトリ下に作成されます。 マイグレーションファイルの内容は以下の通りにします。

// artifacts.require()でどのコントラクトとやり取りしたいかをTruffleに伝える
let HelloWorld = artifacts.require("HelloWorld")
// deployer.deploy()でデプロイするコイントラクトを指定
module.exports = function(deployer) {
  deployer.deploy(HelloWorld);
};

作成したマイグレーションファイルを使ってブロックチェーンにデプロイする為にローカルでプライベートチェーンを生成するGanacheを起動します。

f:id:adrenaline2017:20190707084302p:plain

Ganacheの設定に合わせる為にtruffle-config.jsを編集します。

module.exports = {
    networks: {
         development: {
         host: "127.0.0.1",     // ホスト
         port: 7545,            // ポート番号
         network_id: "*", 
        },
},

デプロイは以下の通りです。

$ truffle migrate

コントラクトのテスト

下記のコマンドでtestフォルダ下にhello_world.jsが作成されます。

$ truffle create test HelloWorld

テストの内容は以下の通りです。

// artifacts.require()で指定のコントラクトを呼び出す
const HelloWorld = artifacts.require("HelloWorld");

contract("HelloWorld", function() {
  // 変数を定義
  describe('word method', function(){
    let obj;
    const str = 'Hello World!';
    // テスト毎にHelloWorldコントラクトを作成
    before(async function() {
      obj = await HelloWorld.new();
    });
    // HelloWorldコントラクトのgetメソッドをテスト
    it("should get word", async function () {
      const result = await obj.get();
      assert.equal(result, str);
    });
  });
});

以下のコマンドでテストを走らせます。

$ truffle test test/hello_world.js

テストの実行結果が以下の通りになると成功です。

Compiling your contracts...
===========================
> Everything is up to date, there is nothing to compile.



  Contract: HelloWorld
    word method
      ✓ should get word (68ms)


  1 passing (293ms)

フロントエンドの構築

htmlとjsファイルの作成します。ファイルを作成するディレクトリの構成は以下の通りになります。

├── build
├── contracts
├── hello_world.js
├── index.html
├── migrations
├── test
└── truffle-config.js

index.htmlを以下の通りにします。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Ðapps - Hello World</title>
    <script type="text/javascript" src="hello_world.js"></script>
  </head>
  <body>
    <div id="contract_result">loading...</div>
  </body>
</html>

hello_world.jsファイルを作成し、フロントのロジックを実装します。hello_world.jsにあるabiはweb3jsとコントラクトの相互関係をとり持つ役割があります。abiとaddressはHelloWorld.jsonにある内容を使うのでコピペして下さい。

var abi = [
  {
    "constant": true,
    "inputs": [],
    "name": "get",
    "outputs": [
      {
        "name": "",
        "type": "string"
      }
    ],
    "payable": false,
    "stateMutability": "pure",
    "type": "function",
    "signature": "0x6d4ce63c"
  }
];
var address = "0xd6856EEB9f6B3934E5925414e2c9D911a567e4c3";
   
  window.onload = function() {
    var contract = web3.eth.contract(abi).at(address);
    contract.get((error, result) => {
      document.getElementById("contract_result").textContent = result;
    });
  };

Metamaskを起動します。Metamaskを使うことで、ブラウザでブロックチェーンとやりとりすることができるようになります。Ganacheと接続する為に、Metamaskの設定はGanacheの設定に合わせる必要があります。 f:id:adrenaline2017:20190707230902p:plain

しかし、Metamaskはweb3オブジェクトを生成しないので、このままでは画面に表示することが出来ません。そこで今回は簡易サバーとしてlive-serverを使用します。live-serverはブラウザの自動更新をしてくれる、簡易ローカルサーバーを起動できるツールです。

$ npm i -g live-server
$live-server

ブラウザが起動して画面に「Hello World!」と表示されれば成功です。

これでdappsを開発する流れが一通り掴めたかと思います。 次回は本格的なdappsの開発のチュートリアルに挑戦してみたいと思います。