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でプロジェクトが作られました。
コメント