初めてのDApps

前回はDAppsを作る前準備としてGethでプライベートネットを作成しました。

DAppsとは

この記事を見ている人は既にわかっていると思うが、DAppsとはDecentrized Applicationsの略。
日本語では分散アプリケーションでしょうか。
特に現在はブロックチェーンを利用したWebアプリケーションという意味合いが強いです。
今回はイーサリアム上で動くアプリケーションを想定します。（イーサリアムでなくでもDAppsと呼びます）

既にできているDAppsがまとめられているページを発見したので参考までにリンクを貼ります。
https://qiita.com/Masaaki_Inaba/items/0a7349f8238708894f65

Dappsを作るには？

イーサリアムの場合、基本的にはweb3.jsを既存のWebアプリケーションに組み込めばDAppsの出来上がりです。
ReactだろうがAngularだろうが既存のライブラリはなんでも使えます。
ただしブロックチェーンネットワークとやりとりする場合はweb3.jsを使います。

ただし一から作るのは大変な気がするので、調べてみるとやはり色々とやり方がありそうです。

１つ目は本家のサイトをみると以下の記事を見つけました。

Meteorを利用してDappsを作成する
https://github.com/ethereum/wiki/blob/master/Dapp-using-Meteor.md

もう一つはTruffleというフレームワークを見つけました。
こちらは本家には紹介されていませんが、実はコンセンシスというイーサリアム創始者が作った会社が出しているものです。
どちらもぱっと見同じような機能を持っているようです。
Meteorの方がサーバーサイドも含めたフレームワークになっているのに対し、truffleはDApps作る上で便利なツールなども一緒に提供されています。
両方作ってみた感じですが、どちらでも慣れれば開発しやすそうです。
個人的にはtruffle派です。

まずはMeteorを試してみます。

Meteorのインストール

インストールはいたって簡単、ターミナルを立ち上げて以下の１コマンドでできます。

Meteorのインストール

$ curl https://install.meteor.com/ | sh

初めてのDapp作成

wikiの通りに進めるとmeteor create myDappでプロジェクトを作成し、meteor add ethereum:web3でweb3ライブラリを追加してアプリを一から作成しましょうとありますが、その少し下をみると以下のボイラープレートというのが紹介されています。
こちらはDappを作る際に最低限必要なライブラリなどをあらかじめ入れてくれているテンプレートです。

適当な場所で以下のコマンドを実行してボイラープレートをダウンロード（クローン）します。

ボイラープレートのダウンロード

$ mkdir myMeteorProjects
$ cd myMeteorProjects/
$ git clone https://github.com/SilentCicero/meteor-dapp-boilerplate
Cloning into 'meteor-dapp-boilerplate'...
remote: Counting objects: 735, done.
remote: Total 735 (delta 0), reused 0 (delta 0), pack-reused 735
Receiving objects: 100% (735/735), 2.84 MiB | 1.08 MiB/s, done.
Resolving deltas: 100% (259/259), done.

アプリケーションの実行と確認

アプリケーションの実行

$ cd meteor-dapp-boilerplate/app
$ meteor

ブラウザから http://localhost:3000 へアクセスすると以下のようにアプリケーションが表示されれば成功です。

Webアプリ開発用にプライベートネットに接続し直す

ターミナルを立ち上げて以下のようにプライベートネットへ接続し、サイトをリフレッシュすると以下のようにCoinbaseやBlock Numberなどが確認できます。

• --rpc: Webアプリからの接続を受け付ける(APIを解放する）
• --rpcaddr: リッスンするアドレス。今回はlocalhost。
• --rpcport: リッスンするポート。今回は8545。
• --rpccorsdomain :クロスドメイン制約を掛ける。*は掛けない。

ポートを指定してネットワークに接続

> exit //プライベートネットに接続している場合は一旦抜ける
$ geth --networkid "10" --nodiscover --datadir "~/private_net" --mine --unlock 0x5906149adae919fc15d865e34d0b755200e84e00 --rpc --rpcaddr "localhost" --rpcport "8545" --rpccorsdomain "*" console 2>> ~/private_net/geth_err.log

プロジェクトの階層

プロジェクトを開いてみると以下のような階層構造になっています。
clientというフォルダにフロントエンドのコードが入っています。
ポイントはtempleteというフォルダにあるcomponents、layout、viewsです。
部品化してソースを書いていきます。
あとはroutes.jsというJavaScriptのファイルで各ページへのルーティングを記述していくという流れです。
ざっくりですが階層構造の説明でした。

参考

公式Wiki
https://github.com/ethereum/wiki/blob/master/Dapp-using-Meteor.md

クロスドメインについては以下の記事を参照。
https://qiita.com/growsic/items/a919a7e2a665557d9cf4