Drizzleを使ってdAppのインタフェースを作ってみました

Truffle Suiteが提供しているDrizzleでdAppのフロントエンドを作ってみました。UdacityのBlockchain Developer Nanodegreeコースのプロジェクト課題だったのですが、課題を超えていろいろとやってみたので紹介したいと思います。

コードはGitHub上で公開しています。このソースファイルは、ブロクの記事執筆時点であまり整理されておらず、とっちらかっています。ボタンだとか入力フィールドには、material UIを使用してみました。

DrizzleでdAppのフロントを作成すると、Truffleで立ち上げたローカルのチェーンにデプロイしたSmart Contractに対し、web3.jsを使ってWebSocket接続(例 ws://localhost:8545)してくれます。HTTPではなく、WebSocket接続にすることでSmart Contractの発行するEventをListenできるようになります。

WebSocket接続にすること自体は難しくないのですが、Smart ContractがEmitするイベントに対応するロジックも組み込むことができます。私のアプリの場合は、Smart ContractのFunctionを実行するとMeta Maskのポップアップに邪魔されてしまい、Eventの応答は一瞬しか見えませんでした。

上記のスクリーンショットのコードでは、Drizzle以外にもOracle使っていたり、Smart ContractのUpgradability(更新可能性)考慮のためにいろいろと複雑になっているので、以下ではもう少し簡単にDrizzleを使ったdAppの作り方手順を説明したいと思います。

この手順を進めるにあたり、Node, npm, truffle, Solidityなどはインストールされている前提でいます。ちなみに私の環境は以下の通りです。

$ truffle version
Truffle v5.0.40 (core: 5.0.40)
Solidity v0.5.8 (solc-js)
Node v10.16.2
Web3.js v1.2.1`

となっています。

まず、一番簡単なはじめ方として、Truffleのboxesというテンプレート集を使います。別にこのテンプレートを使わなくても単体でDrizzleアプリを簡単に作ることはできるます。適当にプロジェクトフォルダをmkdirで作り、そのフォルダ配下で以下のコマンドを実行してください。

$ npx truffle unbox drizzle

✔ Preparing to download
✔ Downloading
✔ Cleaning up temporary files
⠋ Setting up boxnpm WARN drizzle-box@1.0.0 No description
(途中略 警告がいっぱい)
✔ Setting up box

Unbox successful. Sweet!

Commands:

  Compile:              truffle compile
  Migrate:              truffle migrate
  Test contracts:       truffle test
  Test dapp:            cd app && npm test
  Run dev server:       cd app && npm run start
  Build for production: cd app && npm run build

セットアップ後のコマンドまで表示してくれて親切ですね(笑)。
ちなみにフォルダ構成は以下のようになっています。このあたりはバージョンアップで多少変更になることもあるかもしれません。

プロジェクトフォルダで端末を起動させておき、

$ truffle develop --log

としてテスト用の環境を起動しておきます。こちらはポート番号とか適切に設定しておけばGanacheを使用するのもよいかと思います。

さらに別端末からスマートコントラクトのデプロイ用に、コンソールをもう一つ立ち上げておきます。

$truffle develop
Connected to existing Truffle Develop session at http://127.0.0.1:8545/

truffle(develop)> migrate

Compiling your contracts...
===========================
> Compiling ./contracts/ComplexStorage.sol
> Compiling ./contracts/Migrations.sol
> Compiling ./contracts/SimpleStorage.sol
> Compiling ./contracts/TutorialToken.sol
> Compiling openzeppelin-solidity/contracts/math/SafeMath.sol
> Compiling openzeppelin-solidity/contracts/token/ERC20/ERC20.sol
> Compiling openzeppelin-solidity/contracts/token/ERC20/IERC20.sol
> Artifacts written to /home/hajime/git/BlockchainDevND/lessons/dizzleEvent/app/src/contracts
> Compiled successfully using:
   - solc: 0.5.8+commit.23d335f2.Emscripten.clang

さらに端末を一つ立ち上げ、

$ cd app
$ npm run start

とすると、デフォルトブラウザが立ち上がり、以下の画面が表示されれば成功です。

Drizzleではフォームも提供してくれるので、まあ便利ともいえるのですが、 サンプル用であまりかっこよくないデザインなので、私はmaterial UIを使用しています。

DrizzleはReactだけでなくVueにも対応しているようなので、どちらを使うかはプロジェクト都合で決めればよいと思いますが、動くフレームワークが一つあることで安心して開発できるかなと思います。

一点注意ですが、2019年9月10日にDrizzle 1.5.0のリリースされたので、バージョンの依存関係などは多少調整する必要があるかもしれません。新たにtruffle ubox...するとdrizzle 1.5.0でプロジェクトが作られました。

コメント

タイトルとURLをコピーしました