前回は書籍を読んでコンソール上で実装した処理を実行することができました。
次はやはりブラウザから操作したい。ということでサンプルアプリ作りました。で、いきなりゼロから作るのは難しいので Truffle Boxesを利用することに。
Truffle BoxesにはReactやVue.js等のモダンなJavascriptフレームワークを使ったDAppsのサンプルアプリまで色々あるのでとても参考になります。
その中でも今回はtutorialtokenにしました。
このサンプルアプリではブラウザ上から指定のアドレスに独自トークンの発行/送信を行う所までできます。
では動作確認するまでの流れをまとめたので見ていきましょう。
Contents
開発の流れ
開発の流れとしては以下の通りで、コードを書く以外にもいくつか手順があります。
前提としてはnpmとnodeはすでにインストールされているものとします。
・Truffle Boxesからサンプルコードをダウンロード。
・ドキュメントに記載のコードを写経
・コードのコンパイル
・Ganacheの起動
・コードのデプロイ・アプリ起動
・Metamask連携
・ブラウザで動作確認
動作させた環境は以下になります。
動作環境
- macOS High Sierra v10.13.1
- Node.js v8.5.0
- npm v5.8.0
- solidity v0.4.17
- OpenZeppelin v1.8.0
- truffle v4.1.3
- Ganache v1.1.0
Truffle Boxesからサンプルコードをダウンロードしてコーディング
まずはTruffleフレームワークをインストールして、Truffle Boxesからサンプルコードをダウンロード。
|
1 2 3 |
$ npm install -g truffle $ mkdir tutorialtoken & cd tutorialtoken $ truffle unbox tutorialtoken |
ダウンロードしたら次はOpenZeppelinのインストール。
OpenZeppelinとはSolidityでセキュアなスマートコントラクトを作成する目的で作られた、基本的なスマートコントラクトのフォーマットを提供するライブラリ群となっています。
今回ではERC20準拠の独自トークンを作成するために使います。
|
1 |
$ npm install zeppelin-solidity |
ドキュメントに記載のコードを写経
次にダウンロードしたサンプルコードそのままでは動作しないのでドキュメントに書いてある通りにコーディングします。
コーディングするのは2ファイルのみです。
まずは、 contractsフォルダ以下にTutorialToken.solファイルを作成してコーディングします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
pragma solidity ^0.4.17; import "zeppelin-solidity/contracts/token/ERC20/StandardToken.sol"; contract TutorialToken is StandardToken { string public name = 'TutorialToken'; string public symbol = 'TT'; uint8 public decimals = 2; uint public INITIAL_SUPPLY = 12000; function TutorialToken() public { totalSupply_ = INITIAL_SUPPLY; balances[msg.sender] = INITIAL_SUPPLY; } } |
ERC20に準拠するトークンの定義を書いています。StandardTokenを継承してトークンの省略名等の必要な定義を少しするだけ。
これだけで独自トークンの送金ができちゃうのか・・簡単。
イーサリアム上のトークンを標準化する仕様のこと
次に、 migrationsフォルダ以下に2_deploy_tutorial_token.jsファイルを作成してコーディングします。
|
1 2 3 4 5 |
var TutorialToken = artifacts.require("./TutorialToken.sol"); module.exports = function(deployer) { deployer.deploy(TutorialToken); }; |
デプロイする際の動作が記述されています。処理としてはデプロイするだけの処理となっています。
webとの連携に関してはsrc/js/app.jsに最初から記述されています。
このファイルをじっくり読み込むと基本的なSolidity側との連携の理解ができるかと思います。
ただ、一部サンプルコードだと最新のGanacheに対応していないらしくコードを修正しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
initWeb3: function() { // Initialize web3 and set the provider to the testRPC. if (typeof web3 !== 'undefined') { // App.web3Provider = web3.currentProvider; // web3 = new Web3(web3.currentProvider); App.web3Provider = new Web3.providers.HttpProvider('http://127.0.0.1:7545'); web3 = new Web3(App.web3Provider); } else { // set the provider you want from Web3.providers //App.web3Provider = new Web3.providers.HttpProvider('http://127.0.0.1:9545'); App.web3Provider = new Web3.providers.HttpProvider('http://127.0.0.1:7545'); web3 = new Web3(App.web3Provider); } return App.initContract(); }, |
ここのコード変更しないといけないの、かなりハマった。。変更しないとGanacheと連携して動作しない。
コードのコンパイル
実装ができましたので、コンパイルを行います。
|
1 |
$ truffle compile |
Ganacheの起動
アプリと連携させるためにGanacheを起動させる。まだインストールしていない場合はここからダウンロードして、インストールを。
Ganacheはイーサリアム開発用のパーソナルブロックチェーンです。
起動するだけでアカウント・残高・契約作成、ガスコスト等をGUIで確認できるのでとても便利です。
コードのデプロイ・アプリ起動
イーサリアムネットワークにコントラクトをデプロイします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$ truffle migrate Using network 'development'. Running migration: 1_initial_migration.js Replacing Migrations... ... 0x7b8ff207206400045df34b685677eab90da4d82a137767555a8b110ecad38b44 Migrations: 0x81e3c8993b8e7c1acc6e2f3178697c4e3daeb11e Saving successful migration to network... ... 0xe755c11f0c20908efabfe8fea94ae6f5f13815679ea9276e7b7a928dc8cf2355 Saving artifacts... Running migration: 2_deploy_tutorial_token.js Replacing TutorialToken... ... 0x56b6f67de8b1b508a9db7561e8cb9b98b8c818de1a44a96ef7865a4b5512931d TutorialToken: 0x631367f5e33a4086771cf1ba94695352f8128918 Saving successful migration to network... ... 0x22bca449aec68a3b865ab18a6f11e28fd2faa4dc40ace4f0dd42ae2c4b92ef91 Saving artifacts... |
Ganacheが起動していればデプロイ時にトランザクションが確認できます。
次にDAppsアプリを起動！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$ npm run dev > tutorialtoken@1.0.0 dev /Users/matsushin/solidity/tutorialtoken > lite-server ** browser-sync config ** { injectChanges: false, files: [ './**/*.{html,htm,css,js}' ], watchOptions: { ignored: 'node_modules' }, server: { baseDir: [ './src', './build/contracts' ], middleware: [ [Function], [Function] ] } } [Browsersync] Access URLs: ------------------------------------- Local: http://localhost:3000 External: http://192.168.11.5:3000 ------------------------------------- UI: http://localhost:3001 UI External: http://192.168.11.5:3001 ------------------------------------- [Browsersync] Serving files from: ./src [Browsersync] Serving files from: ./build/contracts [Browsersync] Watching files... |
起動すると自動でブラウザのタブが開かれます。
独自トークンを送信するアドレスと送金量が入力できるだけの画面が表示されればOKです。
MetaMask連携
アプリが起動できたので、Metamaskからローカルで起動しているブロックチェーンにアクセスできるようにしましょう。
MetaMaskがまだインストールできていない場合はこちらからChromeにインストールして設定を完了させてください。
まずは接続先を「Custom RPC」を選択してNew RPC URLに「http://127.0.0.1:7545」を入力してSAVE。
次にGanacheアカウントのインポートを行います。
Ganacheのアカウント一覧で上から2番目のアドレスの横にある鍵マークをクリック。
秘密鍵が表示されるので選択してコピーしておく。
MetaMask側で「Import Accout」を選択。
コピーした秘密鍵をペースとしてIMPORTして完了。
これで全ての動作確認の準備ができました！
ブラウザで動作確認
画面に作成したアカウントのアドレスと送金量を入力してTransferボタンをクリック。
アラートメッセージが表示され、画面上のBalanceの数字が減っていたら送金完了！
GanacheのTRANSACTIONSにもデータが追加されています。
最後にMetaMaskでもトークンが送金されたことを確認します。
まずはコントラクトアドレスをコピーしたいので、追加されたトランザクションのTO CONTRACTADDRESSをコピーします。
MetaMaskの追加したアカウントのTOKENSタブを選択して、ADD TOKENボタンをクリック。
コピーしたコントラクトアドレスを貼り付けてAddボタンをクリック。
すると、保有トークン数が見えます！
以上で、終わりです！
まとめ
まずはweb3.jsを利用したwebとの連携の基本がわかったかなと。
最初は確認手順が多くMetaMaskの利用方法やGanacheの連携に手間取ったりもしたけれけどOpenZeppelinが便利なため、
楽にセキュアなコントラクトを作成できた。
ちなみに今回はプログラムを用いて独自トークンを作ったが、NEMだとプログラムを書かなくてもNanoWalletを使えばさくっと作れます。
だいぶ前にブログに書いてた。
次は何しようかな。まだまだ修行が必要そう。
独自トークンをすぐ作れるのはXEMの特権かと思ってたけどプログラマなら簡単にイーサリアムでも作れそうだな〜。