Dapp作成の大まかな流れ　Truffle利用にて

この記事ではDapps作成の流れをまとめます。

中身の解説ややり方は後ほどゆっくり投稿していきたいと思います。

スマートコントラクトをどうやってWebアプリに反映、接続するのかについて概要がわかることを目標にしています。

ーーーーーーーーーーーーーーーーーーーーーーーーー

※今回はDapps開発のフレームワークである「Truffle」の公式サイトで紹介されているチュートリアル「ETHEREUM PET SHOP」を参考にしました。本家のURLは下記ですので気になる方はそちらを参照してください。

https://truffleframework.com/tutorials/pet-shop#ethereum-pet-shop

●流れ

バックエンド作成

①Truffleをダウンロードする（コンソールにて下記コマンドを実行）

　nom install -g truffle　

②サンプルのダウンロード　（コンソールにて下記コマンドを実行）

　truffle unbox pet-shop

③スマートコントラクトを作成する（お好きなEditerにて）

　contractsフォルダに任意のファイル作成

④EVM(Ethereum Virtual Machine)が実行できるようにバイトコードに変更

　（コンソールにて下記コマンドを実行）　

　truffle compile

　→完了するとbuildフォルダが作成される

⑤コントラクトをイーサリアムネットワークへデプロイするためにmigrationファイルを作成する（お好きなediterにて）

⑥プライベートネットにて試してみるために、Ganacheをダウンロード

　https://truffleframework.com/ganache

⑦Ganacheを起動した状態で（コンソールにて下記コマンドを実行）

　truffle migrate

　→するとGanacheでETHが動く

⑧testディレクトリにテストコードを作成する（お好きなEditerにて）

⑨testを行う（コンソールにて下記コマンドを実行）

　truffle test

ここまででバックエンド完了

フロントエンド作成

①フロントエンドの材料はすでにsrc/js/app.jsに入ってるのでそこを編集していく

　app.jsの中でWeb3を立ち上げたり、コントラクトのインスタンス化を行うコードを書く

②Metamaskを起動しプライベートネットに接続する

これでフロントエンドの作成とバックとフロントの接続完了

最後にターミナルにて　nom run devを実行するとブラウザに表示され動き出す。

Solidityのver upにより仕様が変わったり、公式サイト通りにコードを書いてもうまく動かなかったこともあったので、次回以降ではどこでつまづいたのか、どう解決したのかを書いていきたいと思います。