Truffle Boxesを利用してブラウザから動作するDAppsサンプルアプリを作る

前回は書籍を読んでコンソール上で実装した処理を実行することができました。

次はやはりブラウザから操作したい。ということでサンプルアプリ作りました。で、いきなりゼロから作るのは難しいので Truffle Boxesを利用することに。

Truffle BoxesにはReactやVue.js等のモダンなJavascriptフレームワークを使ったDAppsのサンプルアプリまで色々あるのでとても参考になります。

その中でも今回はtutorialtokenにしました。

このサンプルアプリではブラウザ上から指定のアドレスに独自トークンの発行/送信を行う所までできます。

では動作確認するまでの流れをまとめたので見ていきましょう。

開発の流れ

開発の流れとしては以下の通りで、コードを書く以外にもいくつか手順があります。

前提としては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からサンプルコードをダウンロード。

ダウンロードしたら次はOpenZeppelinのインストール。

OpenZeppelinとはSolidityでセキュアなスマートコントラクトを作成する目的で作られた、基本的なスマートコントラクトのフォーマットを提供するライブラリ群となっています。

今回ではERC20準拠の独自トークンを作成するために使います。

 

ドキュメントに記載のコードを写経 

次にダウンロードしたサンプルコードそのままでは動作しないのでドキュメントに書いてある通りにコーディングします。

コーディングするのは2ファイルのみです。

まずは、 contractsフォルダ以下にTutorialToken.solファイルを作成してコーディングします。

 

ERC20に準拠するトークンの定義を書いています。StandardTokenを継承してトークンの省略名等の必要な定義を少しするだけ。

これだけで独自トークンの送金ができちゃうのか・・簡単。

ERC20とは

イーサリアム上のトークンを標準化する仕様のこと

まつしん

独自トークンをすぐ作れるのはXEMの特権かと思ってたけどプログラマなら簡単にイーサリアムでも作れそうだな〜。

次に、 migrationsフォルダ以下に2_deploy_tutorial_token.jsファイルを作成してコーディングします。

デプロイする際の動作が記述されています。処理としてはデプロイするだけの処理となっています。

webとの連携に関してはsrc/js/app.jsに最初から記述されています。

このファイルをじっくり読み込むと基本的なSolidity側との連携の理解ができるかと思います。

ただ、一部サンプルコードだと最新のGanacheに対応していないらしくコードを修正しました。

まつしん

ここのコード変更しないといけないの、かなりハマった。。変更しないとGanacheと連携して動作しない。

コードのコンパイル

実装ができましたので、コンパイルを行います。

Ganacheの起動

アプリと連携させるためにGanacheを起動させる。まだインストールしていない場合はここからダウンロードして、インストールを。

Ganacheはイーサリアム開発用のパーソナルブロックチェーンです。

起動するだけでアカウント・残高・契約作成、ガスコスト等をGUIで確認できるのでとても便利です。

コードのデプロイ・アプリ起動 

イーサリアムネットワークにコントラクトをデプロイします。

Ganacheが起動していればデプロイ時にトランザクションが確認できます。

Ganache

次にDAppsアプリを起動!

起動すると自動でブラウザのタブが開かれます。

独自トークンを送信するアドレスと送金量が入力できるだけの画面が表示されればOKです。

TutorialToken Wallet 🔊

MetaMask連携

アプリが起動できたので、Metamaskからローカルで起動しているブロックチェーンにアクセスできるようにしましょう。

MetaMaskがまだインストールできていない場合はこちらからChromeにインストールして設定を完了させてください。

まずは接続先を「Custom RPC」を選択してNew RPC URLに「http://127.0.0.1:7545」を入力してSAVE。 

スクリーンショット 2018 04 15 14 36 43 スクリーンショット 2018 04 15 14 39 40

 

次にGanacheアカウントのインポートを行います。

Ganacheのアカウント一覧で上から2番目のアドレスの横にある鍵マークをクリック。

Ganache

秘密鍵が表示されるので選択してコピーしておく。

Ganache

 

MetaMask側で「Import Accout」を選択。

スクリーンショット 2018 04 15 14 57 46

 

コピーした秘密鍵をペースとしてIMPORTして完了。

スクリーンショット 2018 04 15 14 58 01

 

 これで全ての動作確認の準備ができました!

ブラウザで動作確認

画面に作成したアカウントのアドレスと送金量を入力してTransferボタンをクリック。

アラートメッセージが表示され、画面上のBalanceの数字が減っていたら送金完了!

TutorialToken Wallet

GanacheのTRANSACTIONSにもデータが追加されています。

最後にMetaMaskでもトークンが送金されたことを確認します。

まずはコントラクトアドレスをコピーしたいので、追加されたトランザクションのTO CONTRACTADDRESSをコピーします。

Ganache

 

MetaMaskの追加したアカウントのTOKENSタブを選択して、ADD TOKENボタンをクリック。

スクリーンショット 2018 04 15 16 55 26

 

コピーしたコントラクトアドレスを貼り付けてAddボタンをクリック。

スクリーンショット 2018 04 15 16 55 38

 

すると、保有トークン数が見えます!

スクリーンショット 2018 04 15 16 56 00

 

以上で、終わりです! 

まとめ

まずはweb3.jsを利用したwebとの連携の基本がわかったかなと。

最初は確認手順が多くMetaMaskの利用方法やGanacheの連携に手間取ったりもしたけれけどOpenZeppelinが便利なため、

楽にセキュアなコントラクトを作成できた。

ちなみに今回はプログラムを用いて独自トークンを作ったが、NEMだとプログラムを書かなくてもNanoWalletを使えばさくっと作れます。

だいぶ前にブログに書いてた。

【解説】NEMのモザイクを使って独自通貨をTIpNEMで投げ銭するまで

2017.11.03
まつしん

次は何しようかな。まだまだ修行が必要そう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です