katonobo’s blog

仮想通貨✖プログラミング

【Ethereum】truffleのチュートリアルで、ペットショップのアプリ(Dapp)を作ってみた

仮想通貨賑わってますね。自分も何か作りたい!と言うことで、イーサリアムを使ったアプリを作ってみました。今回は、truffleと言うフレームワークを使い、そこのチュートリルの一つである「Pete's Pet Shop」を作っていきます。

ちなみに、自分はMacを使っています。

 

f:id:katonobo:20171230020228p:plain

 

1.truffleをダウンロードしましょう。

イーサリアムのアプリを開発するために便利なフレームワークが「truffle」です。「トリュフ」と読みます。

 

truffleframework.com

 

 

まずはターミナルで、このコマンドを入力

 

$ npm install -g truffle

(Node.jsをインストールしてる必要があります。)

 

 

次に、「pet-shop-tutorial」ファイルを作成します

mkdir pet-shop-tutorial

 

 

作成したら、そのファイルに移動します。

cd pet-shop-tutorial

 

 

truffleがすでに用意してくれているプロジェクトを入れます。

truffle unbox pet-shop

 

これで下準備はできました。

 

2.チュートリアルに沿って作っていきます。

さて、ここから本格的に作っていきますが、実はここからはtruffleのサイトのチュートリアルのコードをみた方が良いと思います。

なんだよそれwって感じですが、イーサリアムの開発に使う言語のSolidityは、開発が非常に活発で、すぐにバージョンやコードが変化します。私が参考にさせてもらったブログもかなり最新なのに、truffleのチュートリアルと若干変わっていました。truffleの本家をのぞいてもらいながら、こちらのブログではやっていく中で少し自分が詰まったところを書いていくって感じで書いていきます。

↓ここを参考に

truffleframework.com

 

 

・詰まったところ

①Solidityのバージョンはあっているか?

現在、チュートリアルのSolidityのバージョンは0.4.17です。もしあなたがBrowser-Solidityを使っている場合、バージョンはあっていますか?

 

②Compileはdevelopをコマンドしてから。

コントラクトを入力した後、コンパイルを行います。

チュートリアルでは、

truffle compile

と入力するとなっていますが、その前に

 

$ truffle develop

 

を打ちましょう。

 

truffle(develop)>

 

となりますので、ここから入力する

これでOK。

 

③ローカル環境のアドレスを変える

web3をインスタンス化するコードを書くところで、ローカルホストのアドレスを入れるんですが、チュートリアルのままだとメタマスクが永遠に繋がりません。

 

// Is there an injected web3 instance? if (typeof web3 !== 'undefined') { App.web3Provider = web3.currentProvider; } else { // If no injected web3 instance is detected, fall back to Ganache App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545'); } web3 = new Web3(App.web3Provider);

 

このコードの

'http://localhost:7545'

部分を

'http://localhost:9545'

に変えたらうまくいきました。

 

自分が引っかかったのは、この辺でした。

 

基本はチュートリアルに沿っていけばおっけいです。

今回は下記のブログを大変参考にさせていただきました。

zoom-blc.com

 

truffleframework.com

 

 

それでは。