Truffle SuiteでDAppを制作してみた
2021.12.20
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 2 | $cd TrufflePRJ $TrufflePRJ ＊＊＊＊＊＊＊（ルートディレクトリ名）npm |
Homebrewをインストール
「Homebrew」は、macOSオペレーティングシステム上の、パッケージ管理の為のシステムです。
Homebrew を、以下のURLからインストールします。
【Homebrewインストールサイト】
https://brew.sh/index_ja.html
インストールコマンド
1 2 3 4 5 6 7 | $brew update $brew upgrade $brew tap ethereum/ethereum $brew install ethereum --devel //*develop branchのインストールの時には、-devel $brew install solidity $brew linkapps solidity |
Solidityをインストール
Solidity を動作させるためには、Node.js の環境が必要になります。
まず、npm/Node.js を、以下のURLからインストールします。
【Node.jsインストールサイト】
https://nodejs.org/en/download/
インストールコマンド
1 2 | $brew install npm $npm install solc |
Gethをインストール
gmpとgoをインストールします。
インストールコマンド
1 2 | $git clone https://github.com/ethereum/go-ethereum $brew install gmp go |
Geth コマンドラインクライアントをビルド。
geth フォルダーを作ります。
1 2 3 4 | $cd go-ethereum $make geth $build/bin/geth //*Pathのチェックをして下さい。 |
※Geth の起動とアカウントのインデックスは、後の「Gethの起動」で説明します。
Truffle Suiteのインストール
Truffle Suite を、以下の URL からインストールします。
【Truffle Suite公式サイト】
https://www.trufflesuite.com/
インストールコマンド
1 2 3 | $npm install -g truffle //*バージョンチェックして下さい。 $truffle version |
Metamaskのテスト環境設定
Metamask のインストールは、Chrome のアプリ機能拡張ウェブストアで検索してインストールします。
Metamaskネットワークの種類と準備
イーサリアムは、ネットワークが複数あり、用途によってネットワークを使い分けます。
Metamask には、「メインネット」「テストネット」「localhost」「カスタムRPC」が有ります。
開発用に使用されるプライベートネットでは、カスタムRPCを使用します。
今回は、テストネットを使用し、パブリックネットワークに接続します。
以上で開発環境は、完了しました。
次は、作業プロジェクトを作成します。
Truffleでプロジェクトを作成する
Truffle でプロジェクトを作成します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | //*TrufflePRJフォルダーをホームディレクトリ下に作成し、作成したフォルダー内にインストールします。 $npm $mkdir TrufflePRJ $cd TrufflePRJ $truffle init //*以下のようなファイル構成になっています。 ||-TrufflePRJ |-contract |-Migrations.sol |-migrations |-1_initial_migration.js |-test |-truffle-config.js |
Ganacheに連携する為のTruffleの設定
接続設定の為に、「truffle-config.js」を編集します。
「truffle-config.js」を修正後、「truffle.js」にリネームする場合は、「truffle-config.js」を削除します。
1 2 3 4 5 6 7 8 9 | module.exports = { networks: { development: { host:"http://127.0.0.1", port: 8545, network_id: "*" } } } |
コンソール設定
1 2 | $truffle console //コンソール設定します。 |
ERC20トークンを作成する
Solidity で、「ERC20トークンを作成する時に使用するテキストエディタ」か、「IDE」を準備します。
OpenZeppelinライブラリをインストール
1 2 | $npm init -f $npm install openzeppelin-solidity --save |
"TrufflePRJ.sol"というファイルを作成しcontactフォルダーに保存する
(トークンコントラクト）《TrufflePRJ.sol:ERC20トークンをSolidityで作成する》
1 | $truffle create contract TrufflePRJ |
以下のコードに 修正します。
1 2 3 4 5 6 7 8 9 10 11 12 | pragma solidity ^0.5.0; import "openzeppelin-solidity/contracts/token/ERC20/ERC20.sol"; contract TrufflePRJ is ERC20{ string public name = "TrufflePRJ"; string public symbol = "TRFPJ"; uint256 public decimals = 18; constructor(uint256 initialSupply) public { _mint(msg.sender, initialSupply); } } |
Solidityコードをコンパイルする
以下のコードで作成したトークンコントラクトを、コンパイルします。
※コントラクトと、"truffle-config.js" 修正時には必ずコンパイルし直します。
1 2 3 4 | //TrufflePRJ上で作業 $cd TrufflePRJ $truffle compile //".exit"かCtrl+C（２度）でコンソールから抜けます。 |
コンパイル後、build/contract フォルダーに、「TrufflePRJ.json」というファイルがコンパイルされました。
（※以下、要確認）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | { "contractName": "TrufflePRJ", "abi": [ { "constant": true, "inputs": [], "name": "name", "outputs": [ { "name": "", "type": "string" } ], "payable": false, "stateMutability": "view", "type": "function" }, { "constant": false, "inputs": [ { |
マイグレーションファイルの作成
migrationフォルダーの中に、「2_deploy_contracts.js」を作成します。
initialSupply で、TrufflePRJ のコンストラクタ引数の値を定義します。
「const」は、「var」や「let」と同じ様に定義付けに使われますが、今回は「const」で定義します。
※ファイル名は、「2_deploy_contracts.js」にします。
1 2 3 4 5 6 | const TrufflePRJ = artifacts.require("./TrufflePRJ.sol") module.exports = function (deployer) { const initialSupply = 10000e18; //initialSupplyは、migrate後に数値エラーが発生した場合、GanacheとMetaMaskで設定しますのでそのまま継続してください。 deployer.deploy(TrufflePRJ); }; |
コントラクトとマイグレーションファイルのデプロイ
以下のコードでデプロイします。
ネットワーク名 (develop) に接続します。
1 2 3 | $truffle develop //ローカルホストのポート情報、アカウント情報、プライベートキー情報、Mnemonicがターミナル上に表示されるのでメモします。 $truffle(develop) > migrate |
Gethの起動
Ctrl + C を2度打つか、".exit" でプロジェクトから一度抜けて、Geth を起動します。
※Geth を以下のコードで起動し、Geth の起動時にパスワード設定してあるのでロック解除をします。
1 2 3 4 | geth --rpc --networkid 10 --nodiscover --datadir ./eth_private_net console 2>>./eth_personal.unlockAccount'('eth.accounts[0]')' //"Welcome to the Geth JavaScript console!"が表示されて完了 |
Ganacheで確認
Truffle と Ganache を連携させます。
Truffle のプロジェクトと Ganashe のワークスペースを連携します。
Metamaskのテストネット設定
Truffle と Ganache を連携させます。
Ganacheのアカウントのダッシュボード
アカウント情報
Metamaskにアカウントをインポート
GanacheとMetaMaskを連携する
http://127.0.0.1:8545 の起動時に表示させる、「index.html」と「index.js」を作成します。
起動時に表示される画面が、Metamask で認証される画面です。
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html lang="ja"> <head> <title>Greating Dapps - Good Day</title> <meta charset="UTF-8"> <!-- ライブラリの導入 --> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.js"></script> <script src="https://cdn.rawgit.com/ethereum/web3.js/1.0/dist/web3.min.js"></script> <script src="https://www.gstatic.com/firebasejs/5.5.8/firebase.js"></script> <script src="./index.js"></script> </head> <body> <!-- function btn_onclick() { window.alert('Have a good day!'); } // </script> <div id="contract_result">""</div> <input type="button" value="You,too!" onclick="btn_onclick()"></input> --> </body> </html><br> |
index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | window.addEventListener('load', async () => { if (window.ethereum) { window.web3 = new Web3(ethereum); try { await ethereum.enable(); var accounts = await web3.eth.getAccounts(); var option = { from: accounts[0] }; var myContract = new web3.eth.Contract(abi, contractAddress); myContract.methods.RegisterInstructor('8', 'yz') .send(option, function (error, result) { if (!error) console.log(result); else console.log(error); }); } catch (error) { } } else if (window.web3) { window.web3 = new Web3(web3.currentProvider); web3.eth.sendTransaction({ /* ... */ }); } else { console.log('Non-Ethereum browser detected. You should consider trying MetaMask!Metamaskブラウザーアプリが使用できるブラウザーに変更して下さい！'); } }); |
※web3 のバージョンチェックで、Metamask から作成されるファイルのバージョンは、0.2.x.x以降です。
1 2 | window.ethereum.enable(); //最新バージョンのChromeとMetamaskにした場合、このコードを最初に設定します。 |
live-serverをnpmでインストール
1 2 3 4 | $ npm install -g live-server //live-serverの起動 $ TrufflePRJ ＊＊＊＊＊＊ > live-server //******プロジェクトルート |
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 の起動時にパスワード設定してあるのでロック解除をします。
（いらないかもしれません…）
1 2 3 | geth --rpc --networkid 10 --nodiscover --datadir ./eth_private_net console 2>>./eth_personal.unlockAccount'('eth.accounts[0]')' //"exit"でコンソールから抜ける |
７：コントラクトをコンパイル
1 2 3 | //TrufflePRJ上で作業 $ cd TrufflePRJ $truffle compile |
８：マイグレーションファイルの作成
以下のコードでデプロイします。
ネットワーク名 (develop) に接続します。
1 2 3 | $truffle develop //ローカルホストのポート情報、アカウント情報、プライベートキー情報、Mnemonicがターミナル上に表示されるのでメモします。 $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など、様々な分野で活用されております。
今回の内容を参考に、是非チャレンジしてみてください！
こちらの記事もオススメ！
書いた人はこんな人
- 「好きを仕事にするエンジニア集団」の（株）ライトコードです！
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もり大歓迎！
また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です！
インターンや新卒採用も行っております。
以下よりご応募をお待ちしております！
https://rightcode.co.jp/recruit
ライトコードの日常12月 1, 2023ライトコードクエスト〜東京オフィス歴史編〜- ITエンタメ10月 13, 2023Netflixの成功はレコメンドエンジン？
- ライトコードの日常8月 30, 2023退職者の最終出社日に密着してみた！
- ITエンタメ8月 3, 2023世界初の量産型ポータブルコンピュータを開発したのに倒産!?アダム・オズボーン
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
