Truffle SuiteでDAppを制作してみた

メディアチーム

Truffle SuiteでDAppを制作してみた

メディアチーム

2020.03.17

IT技術

DApp ブロックチェーン

Truffle SuiteでDAppを制作してみる

「DApp（Decentralized application）」とは、分散コンピューティングシステム上で実行されるコンピューターアプリケーションです。

今、仮想通貨界で注目のワードです。

今回は、そんな DApp を「Truffle Suite（トリュフスイート）」で制作していこうと思います！

Truffle Suiteとは？

Truffle Suite とは、Ethereum 用 Blockchain の Smart Contract 開発用フレームワークです。

開発方法には2種類あり、「ローカルで、自分のコンピューターで開発する方法」と、「Visual Studio Codeを使用し、AZURE のクラウド上で開発する方法」があります。

今回は、ローカルでの環境設定も含めて説明したいと思います！

環境構築の準備

さっそくMacにて環境構築をしていきましょう！

イーサリアムクライアント：「Go-Ethereum(Geth)」を使用
テストネット：「Metamask」を使用

Geth、Truffle、Metamaskのインストール準備

まず、ターミナルを立ち上げます。

再起動時は、常にルートディレクトリー上で npm のコードを打ち、作業フォルダー（TrufflePRJ）へ移動して下さい。

1$cd TrufflePRJ
2$TrufflePRJ　＊＊＊＊＊＊＊（ルートディレクトリ名）npm

Homebrewをインストール

「Homebrew」は、macOSオペレーティングシステム上の、パッケージ管理の為のシステムです。

Homebrew を、以下のURLからインストールします。

【Homebrewインストールサイト】
https://brew.sh/index_ja.html

インストールコマンド

1$brew update
2$brew upgrade
3$brew tap ethereum/ethereum
4$brew install ethereum --devel
5//*develop branchのインストールの時には、-devel
6$brew install solidity
7$brew linkapps solidity

Solidityをインストール

Solidity を動作させるためには、Node.js の環境が必要になります。

まず、npm/Node.js を、以下のURLからインストールします。

【Node.jsインストールサイト】
https://nodejs.org/en/download/

インストールコマンド

1$brew install npm
2$npm install solc

Gethをインストール

gmpとgoをインストールします。

インストールコマンド

1$git clone https://github.com/ethereum/go-ethereum
2$brew install gmp go

Geth コマンドラインクライアントをビルド。

geth フォルダーを作ります。

1$cd go-ethereum
2$make geth
3$build/bin/geth
4//*Pathのチェックをして下さい。

※Geth の起動とアカウントのインデックスは、後の「Gethの起動」で説明します。

Truffle Suiteのインストール

Truffle Suite を、以下の URL からインストールします。

【Truffle Suite公式サイト】
https://www.trufflesuite.com/

インストールコマンド

1$npm install -g truffle
2//*バージョンチェックして下さい。
3$truffle version

Metamaskのテスト環境設定

Metamask のインストールは、Chrome のアプリ機能拡張ウェブストアで検索してインストールします。

Metamaskネットワークの種類と準備

イーサリアムは、ネットワークが複数あり、用途によってネットワークを使い分けます。

Metamask には、「メインネット」「テストネット」「localhost」「カスタムRPC」が有ります。

開発用に使用されるプライベートネットでは、カスタムRPCを使用します。

今回は、テストネットを使用し、パブリックネットワークに接続します。

以上で開発環境は、完了しました。

次は、作業プロジェクトを作成します。

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

Truffle でプロジェクトを作成します。

1//*TrufflePRJフォルダーをホームディレクトリ下に作成し、作成したフォルダー内にインストールします。
2$npm
3$mkdir TrufflePRJ
4$cd TrufflePRJ
5$truffle init
6  
7//*以下のようなファイル構成になっています。
8||-TrufflePRJ
9    |-contract
10       |-Migrations.sol
11    |-migrations
12       |-1_initial_migration.js
13    |-test
14    |-truffle-config.js

Ganacheに連携する為のTruffleの設定

接続設定の為に、「truffle-config.js」を編集します。

「truffle-config.js」を修正後、「truffle.js」にリネームする場合は、「truffle-config.js」を削除します。

1module.exports = {
2    networks: {
3        development: {
4            host:"http://127.0.0.1",
5            port: 8545,
6            network_id: "*"
7        }
8    }
9}

コンソール設定

1$truffle console
2//コンソール設定します。

ERC20トークンを作成する

Solidity で、「ERC20トークンを作成する時に使用するテキストエディタ」か、「IDE」を準備します。

OpenZeppelinライブラリをインストール

1$npm init -f
2$npm install openzeppelin-solidity --save

"TrufflePRJ.sol"というファイルを作成しcontactフォルダーに保存する

(トークンコントラクト）《TrufflePRJ.sol:ERC20トークンをSolidityで作成する》

1$truffle create contract TrufflePRJ

以下のコードに　修正します。

1pragma solidity ^0.5.0;
2import "openzeppelin-solidity/contracts/token/ERC20/ERC20.sol";
3 
4contract TrufflePRJ is ERC20{
5   string public name = "TrufflePRJ";
6   string public symbol = "TRFPJ";
7   uint256 public decimals = 18;
8 
9constructor(uint256 initialSupply) public {
10   _mint(msg.sender, initialSupply);
11   }
12}

Solidityコードをコンパイルする

以下のコードで作成したトークンコントラクトを、コンパイルします。

※コントラクトと、"truffle-config.js" 修正時には必ずコンパイルし直します。

1//TrufflePRJ上で作業
2$cd TrufflePRJ
3$truffle compile
4//".exit"かCtrl+C（２度）でコンソールから抜けます。

コンパイル後、build/contract フォルダーに、「TrufflePRJ.json」というファイルがコンパイルされました。

（※以下、要確認）

1{
2"contractName": "TrufflePRJ",
3"abi": [
4{
5"constant": true,
6"inputs": [],
7"name": "name",
8"outputs": [
9{
10"name": "",
11"type": "string"
12}
13],
14"payable": false,
15"stateMutability": "view",
16"type": "function"
17},
18{
19"constant": false,
20"inputs": [
21{

マイグレーションファイルの作成

migrationフォルダーの中に、「2_deploy_contracts.js」を作成します。

initialSupply で、TrufflePRJ のコンストラクタ引数の値を定義します。

「const」は、「var」や「let」と同じ様に定義付けに使われますが、今回は「const」で定義します。

※ファイル名は、「2_deploy_contracts.js」にします。

1const TrufflePRJ = artifacts.require("./TrufflePRJ.sol")
2module.exports = function (deployer) {
3const initialSupply = 10000e18;
4//initialSupplyは、migrate後に数値エラーが発生した場合、GanacheとMetaMaskで設定しますのでそのまま継続してください。
5deployer.deploy(TrufflePRJ);
6};

コントラクトとマイグレーションファイルのデプロイ

以下のコードでデプロイします。

ネットワーク名 (develop) に接続します。

1$truffle develop
2//ローカルホストのポート情報、アカウント情報、プライベートキー情報、Mnemonicがターミナル上に表示されるのでメモします。
3$truffle(develop) > migrate

Gethの起動

Ctrl + C を2度打つか、".exit" でプロジェクトから一度抜けて、Geth を起動します。

※Geth を以下のコードで起動し、Geth の起動時にパスワード設定してあるのでロック解除をします。

1geth --rpc --networkid 10 --nodiscover --datadir ./eth_private_net console
22>>./eth_personal.unlockAccount'('eth.accounts[0]')'
3 
4//"Welcome to the Geth JavaScript console!"が表示されて完了

Ganacheで確認

Truffle と Ganache を連携させます。

Truffle のプロジェクトと Ganashe のワークスペースを連携します。

truffle-config.js（又は、truffle.js）を Ganache に登録します。

Metamaskのテストネット設定

Truffle と Ganache を連携させます。

Ganacheのアカウントのダッシュボード

アカウント情報

Metamaskにアカウントをインポート

GanacheとMetaMaskを連携する

http://127.0.0.1:8545 の起動時に表示させる、「index.html」と「index.js」を作成します。

起動時に表示される画面が、Metamask で認証される画面です。

index.html

1<!DOCTYPE html>
2<html lang="ja">
3<head>
4        <title>Greating Dapps - Good Day</title>
5      
6    <meta charset="UTF-8">
7    <!-- ライブラリの導入 -->
8    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
9        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
10    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.js"></script>
11    <script src="https://cdn.rawgit.com/ethereum/web3.js/1.0/dist/web3.min.js"></script>
12    <script src="https://www.gstatic.com/firebasejs/5.5.8/firebase.js"></script>
13    <script src="./index.js"></script>
14</head>
15<body>
16    <!--
17        function btn_onclick() {
18            window.alert('Have a good day!');
19        }
20        //
21    </script>
22    <div id="contract_result">""</div>
23    <input type="button" value="You,too!" 　onclick="btn_onclick()"></input>
24-->
25  </body>
26</html><br>

index.js

1window.addEventListener('load', async () => {
2  if (window.ethereum) {
3    window.web3 = new Web3(ethereum);
4    try {
5      await ethereum.enable();
6      var accounts = await web3.eth.getAccounts();
7      var option = {
8        from: accounts[0]
9      };
10      var myContract = new web3.eth.Contract(abi, contractAddress);
11      myContract.methods.RegisterInstructor('8', 'yz')
12        .send(option, function (error, result) {
13          if (!error)
14            console.log(result);
15          else
16            console.log(error);
17        });
18    } catch (error) { }
19  }
20  else if (window.web3) {
21    window.web3 = new Web3(web3.currentProvider);
22    web3.eth.sendTransaction({
23      /* ... */
24    });
25  }
26  else {
27    console.log('Non-Ethereum browser detected. You should consider trying MetaMask!Metamaskブラウザーアプリが使用できるブラウザーに変更して下さい！');
28  }
29});

※web3 のバージョンチェックで、Metamask から作成されるファイルのバージョンは、0.2.x.x以降です。

1window.ethereum.enable();
2//最新バージョンのChromeとMetamaskにした場合、このコードを最初に設定します。

live-serverをnpmでインストール

1$ npm install -g live-server
2//live-serverの起動
3$ TrufflePRJ ＊＊＊＊＊＊ > live-server
4//*****プロジェクトルート

live-serverとMetamask連携

http://127.0.0.1:8545 （コンパイル設定のポート）上で、必ず Metamask にログインして下さい。

テストネットは、Ropsten にログインします。

DApp画面

ターミナルから、live server を Ctrl+C で停止できます。

まとめ

今回やったことを簡潔にまとめたいと思います！

コンパイルやデプロイが上手くいかないこともありますが、変数の設定が違ったり、ローカルホストの設定が原因の場合も上手く動作しません。

Geth の起動は、コンソールから抜けた後は再度します。

また、Metamask でアプリの起動が上手くいかない場合は、ブラウザーのバージョンと Metamask のバージョンを確認するか、キャッシュを削除してみてください。

※今回テストネットは「Ropsten」、ブラウザーは「Chrome」と「Firefox」を使用しました。

手順のまとめ

１：Metamaskを開く

２：Ganacheを開く

３：テキストエディタ又は、IDEを開く

４：Macターミナルを開く

５：ターミナルでプロジェクトフォルダへ移動

1$cd "プロジェクトフォルダー"

６：Geth起動

Geth を以下のコードで起動し、Geth の起動時にパスワード設定してあるのでロック解除をします。
（いらないかもしれません…）

1geth --rpc --networkid 10 --nodiscover --datadir ./eth_private_net console
22>>./eth_personal.unlockAccount'('eth.accounts[0]')'
3   //"exit"でコンソールから抜ける

７：コントラクトをコンパイル

1//TrufflePRJ上で作業
2$ cd TrufflePRJ
3$truffle compile

８：マイグレーションファイルの作成

以下のコードでデプロイします。
ネットワーク名 (develop) に接続します。

1$truffle develop
2//ローカルホストのポート情報、アカウント情報、プライベートキー情報、Mnemonicがターミナル上に表示されるのでメモします。
3$truffle(develop) > migrate

９：プロジェクトフォルダーへ移動

".exit" でプロジェクトフォルダーに戻ります。

１０：プロジェクトフォルダー上で再度Gethの起動

"exit" でコンソールを抜けます。

１１：Live Serverを起動

1$live-server

http://127.0.0.1:8545 が開き、Chrome のブラウザーアプリの Metamask からログインする。

１２：DAppが開く

さいごに

Mac での環境構築から、DApp の画面を開くところまで紹介しましたがいかがでしたでしょうか！

DApp は、「CryptoKitties」といったゲームにも使われています。

他にも取引所や、デジタルIDなど、様々な分野で活用されております。

今回の内容を参考に、是非チャレンジしてみてください！

こちらの記事もオススメ！

2020.08.14ブロックチェーン特集知識編ブロックチェーンとコンセンサスアルゴリズム実装編【Blockchain Data Managerを使ってみたEt...

2020.07.17ライトコード的「やってみた！」シリーズ「やってみた！」を集めました！（株）ライトコードが今まで作ってきた「やってみた！」記事を集めてみました！※作成日が新し...

ITフリーランスのエンジニア専門エージェント

技術力で世の中をもっと面白くエンジニア積極採用中！

ライトコードでは、エンジニアを積極採用中！

ライトコードでは、エンジニアを積極採用しています！社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。

採用情報へ

メディアチーム

「好きを仕事にするエンジニア集団」の（株）ライトコードです！ライトコードは、福岡、東京、大阪、名古屋の４拠点で事業展開するIT企業です。現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。システム開発依頼・お見積もり大歓迎！また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」を積極採用中です！インターンや新卒採用も行っております。以下よりご応募をお待ちしております！ https://rightcode.co.jp/recruit