dApp Petshop

目次

はじめに

この実験はEthereum（ブロックチェーン）を使ったシンプルな分散アプリdAppを作成する経験からブロックチェーンとスマートコントラクトに習熟することを目的にする。
参考文献：

• Dapp University https://www.dappuniversity.com/articles/the-ultimate-ethereum-dapp-tutorial
• Ethereum Pet Shop https://www.trufflesuite.com/tutorials/pet-shop

実験に入る前に、簡単にブロックチェーンとEthereumの概要を述べる。

この実験はWindowsのGit Bash、Chrome、Sublime（エディタ）を使って実施する。以下の手順に従えば必ず最後まで実施できる（手順通り実施しないと失敗する可能性がある）。

この実験は幾つかのツールをインストールする。スマートコントラクト言語Solidityや実行環境の更新が現在非常に速いため必ずしもこのページと同様に表示されるとは限らない。以下がこれからダウンロードするツールである：

• Git-2.23.0-64-bit.exe
• Sublime Text Build 3207 x64 Setup.exe
• node-v10.16.3-x64.msi
• Ganache-2.1.1-win-x64.appx

dApp環境作成

1. node-v10.16.3-x64.msiをインストールする（デフォルトの設定でOK）。
2. Git-2.23.0-64-bit.exeをインストール（デフォルトの設定でOK）。但し、「Configuring the terminal emulator to use with Git Bash」画面で、「Use Windows' default console window」を選ぶ。
3. Chromeをインストールし、「規定のアプリ」＞「Webブラウザ」にChromeを設定し、再起動する。
4. Git Bashを実行する。
   • node -v <-- Node.jsのバージョン確認
   • npm install -g truffle@5.0.37 <-- truffleのバージョンを指定してインストール
   • truffle version <-- truffleのバージョンの確認
5. Sublime Text Build 3207 x64 Setup.exeをインストールする（デフォルトの設定でOK）。
6. Sublimeを立上げ、Ethereum packageを以下の手順で設定する。
   • Ctrl+Shift+pを押す。
   • package controlを入力しpackage control: install packageを選択する。
   • Ethereumを入力し選択する。Sublimeを終了し、再度立上げる。
7. Ganache-2.1.1-win-x64.appx をインストール（デフォルトの設定でOK）。
   • （アプリのサイドローディングをONに設定する。）
   • continueを押す。
   • 「Qick Start」を選ぶ。
   • GanacheはEthereum開発のためのパーソナルブロックチェーン。実行するとポート番号7545のブロックチェーンをローカルに生成する。Ganacheは100Ether(内部通貨）を持つ10アカウントを予め用意している。各アカウントはアドレスと秘密鍵を持つ。

Truffleプロジェクト作成

TruffleはスマートコントラクトをEthereum仮想マシン（EVM）上で実行するためのコンパイル、テスト、デバッグ、展開（デプロイ）をサポートするスマートコントラクト開発ツール。

1. Git Bash上で以下のコマンドを実行する。
   • cd
   • mkdir pet-shop-tutorial
   • cd pet-shop-tutorial
   • truffle unbox pet-shop
   • ls <-- いくつかのディレクトリとファイルが作成されている。
2. 作成されたディレクトリとファイルは以下の通り：
   • contractsフォルダ <--スマートコントラクトのためのSolidityソースファイル。
   • migrationsフォルダ <--スマートコントラクトを展開するためのマイグレーション用ファイル。
   • testフォルダ <--作成したJavaScriptとSolidityプログラムの試験プログラム。
   • truffle-config.js <--Truffleコンフィグファイル。

スマートコントラクト作成

1. Git Bash上でcontractsフォルダに空ファイルのAdoption.solを作成する。
   • touch contracts/Adoption.sol
2. Sublimeを立上げ、File > Open Folder...を選択し、pet-shop-tutorial（C:\Users\User\pet-shop-tutorial）を選択すると、FOLDERSが表示された新しいエディタが立ち上がる。今後、立ち上がったエディタを使う。
3. contractsフォルダのAdoption.solをクリックするとファイルの中身が表示される（空である）。
4. このファイルの中身をコピーしてSublimeのAdoption.solに貼り付けて保存（File > Save）する。
5. Git Bash上でスマートコントラクトをコンパイルする。
   • truffle compile

スマートコントラクトAdoption.solの解説。
Solidity言語は静的型付け言語(変数は定義される)。address型はEthereumアドレスを表し、Ethereumブロックチェーン上の全てのアカウントとスマートコントラクトはこのアドレスを持つ。文の終わりはセミコロン；で終わる。

pragma solidity ^0.5.0; <--Solidity ver0.5.0以上が必要

contract Adoption { <-- contractはクラスに相当
	address[16] public adopters; <--変数adoptersはアドレス型の配列。publicよりgetterメッソドを持つ。
	// ペットを引取る（里親になる）
	function adopt(uint petId) public returns (uint) { <--関数functionの型と引数の型を指定
	  require(petId >= 0 && petId <= 15); <-- petIdが0から15であることを確認
	  adopters[petId] = msg.sender; <--この関数をコールした人のアドレスはmsg.sender。
	  return petId;
	}
	// 里親全員を取出す
	function getAdopters() public view returns (address[16] memory) { <-- memoryはaddress[16]の場所。viewはこのコントラクトの状態を変えない
	  return adopters; <--配列全体を返す	}	
}

マイグレーション

作成したコントラクトAdoption.solをGanacheが作成したローカルブロックチェーン（Ethereum）へマイグレート（移動）する。
作成したコントラクト毎にマイグレート用のJavaScriptファイルを作る。

1. Git Bash上でmigrationsフォルダに空ファイルの2_deploy_contracts.jsを作成する。
   • touch migrations/2_deploy_contracts.js
2. Sublimeからmigrationsフォルダの2_deploy_contracts.jsをクリックする（空である）。
3. このファイルの中身をコピーしてSublimeの2_deploy_contracts.jsに貼り付けて保存する。
4. インストールしたGanacheが立上っていなければ立ち上げる。
5. コントラクトをマイグレートするためにGit Bash上で次のコマンドを実行する。
   • truffle migrate
6. マイグレート実行後のGanacheの変化は以下の通り。
   • アカウント１（一番上のアカウント）のBALANCE（残高）が（ガス使用料分だけ）減少している。
   • ブロック数(CURRENT BLOCK)とTX COUNTが0から4に増加している。

スマートコントラクト試験

スマートコントラクトが正しく動作するかを確認するための試験用プログラムをSolidityで作成する。

1. Git Bash上でtestフォルダに空ファイルのTestAdoption.solを作成する。
   • touch test/TestAdoption.sol
2. SublimeからtestフォルダのTestAdoption.solをクリックする（空である）。
3. このファイルの中身をコピーしてSublimeのTestAdoption.solに貼り付けて保存する。
4. コントラクトを試験するためにGit Bash上で次のコマンドを実行する。
   • truffle test

以下は、Adoption.solを検査するためのスマートコントラクトTestAdoption.solの解説。

pragma solidity ^0.5.0;

import "truffle/Assert.sol"; <-- assertion check関数をインポート
import "truffle/DeployedAddresses.sol"; <-- 検査対象のインスタンスのアドレスを取出すコントラクトをインポート
import "../contracts/Adoption.sol"; <-- 検査対象をインポート

contract TestAdoption {
 // 検査対象のインスタンスのアドレスを取出す
 Adoption adoption = Adoption(DeployedAddresses.Adoption());

// 関数adopt()の検査。入力と出力が一致しなければならない。
function testUserCanAdoptPet() public {
  uint returnedId = adoption.adopt(expectedPetId);
  Assert.equal(returnedId, expectedPetId, "Adoption of the expected pet should match what is returned.");
}
// 配列adoptersの検査。
function testGetAdopterAddressByPetId() public {
  address adopter = adoption.adopters(expectedPetId);
  Assert.equal(adopter, expectedAdopter, "Owner of the expected pet should be this contract");

// 関数getAdopters()の検査。
function testGetAdopterAddressByPetIdInArray() public {
  // Store adopters in memory rather than contract's storage
  address[16] memory adopters = adoption.getAdopters();
  Assert.equal(adopters[expectedPetId], expectedAdopter, "Owner of the expected pet should be this contract");
}
 // 検査で使われるペットのid
 uint expectedPetId = 8;

 //選ばれたペットの所有者はこのTestAdoptionコントラクト
 address expectedAdopter = address(this);

ユーザインターフェース設定

スマートコントラクトとユーザ間のインターフェースを設定する。

1. Sublimeから/src/js/app.jsをクリックする。
2. Sublimeのapp.jsの中身を全て削除後（Ctrl-aを押して全てを選択し、Back spaceキーを押す）、このファイルの中身をapp.jsにコピーして保存する。
3. ChromeにMetaMask（ブラウザ拡張）をインストールする。
   • MetaMaskをクリック。「Download now」をクリック。「Install MetaMask for Chrome」をクリック。「Chromeを追加」をクリック。
   • 「GET STARTED」をクリックする。
   • New to MetaMask?の表示で「Import Wallet」を選択する。
   • Help Us Improve MetaMaskの表示で「I agree」を選ぶ。
   • 「ウォレットのパスフレーズ」にGnacheに表示されているmnemonic12単語をコピーしてペーストする。パスワードは各自適当に選択し、チェックを入れ、「追加」をクリックする。
   • 「全て完了」を押す。
4. MetaMaskとブロックチェーンを接続する。
   • 右上の丸いボタンをクリックし、マイアカウントの「設定」を選択する。
   • 「ネットワーク」を選択する。
   • 「ネットワーク追加」をクリックする。
   • ネットワーク名とRPC URLに「http://127.0.0.1:7545」を入れる。
   • チェーンIDに「1337」を入れる。
   • 通貨記号に「ETH」を入れ「保存」を押す。
   • 右上のXをクリックし設定を終了する。
   • Ganacheのアカウント１の残高が反映されたことを確認する。

dAppを使う

1. Git Bash上で次のコマンドを実行し、webサーバーを立ち上げる。
   • npm run dev
2. （もしもブラウザの選択メニューが表示されたらChromeを選択。）
3. ブラウザの右上のMetaMaskが表示されていない場合、MetaMaskをブラウザの右上にピン止めする（下の図参照）。
4. MetaMaskをクリックするとConnect Requestがあるので、「Connect」をクリックする。
5. ペットを選択し、「Adopt」ボタンを押す。
6. MetaMaskから確認（トランザクション発行の許可）があり、「確認」ボタンを押す。
7. 選択したペットの「Adopt」ボタンが「Success」に変わる。
8. MetaMaskに新たなトランザクションが表示されていることを確認する。
9. GnacheのTransactionsのリストにも同じトランザクションが表示されていることを確認する。

課題．
ぺットを「Adopt」し、MetaMaskで「確認」した時点での以下のアプリの状態をsniffing toolでスクリーンコピーしレポートに貼り付ける（１００点）

1. MetaMaskのHistoryの「Adopt」をクリックし、Transactionとアクティビティログをスクリーンコピーする。
2. Ganacheの「TRANSACTIONS」をクリックし、Adoptに対応するtransactionを表示し、SENDER ADDRESS, CONTRACT ADDRESS, VALUE, GAS USED, GAS PRICE GAS LIMIT, MINED IN BLOCKをスクリーンコピーする。
3. ChromeのPete's Pet ShopのペットをAdoptしたため、「Adopt」ボタンが「Success」に変わっている箇所をスクリーンコピーしレポートに貼り付ける。

レポート

課題の内容と実施結果と考察を書く。

レポート提出期限：

２回の実験を１つのレポートとして提出する。2 回目の実験が終了してから1 週間後（つまり、次のテーマの情報工学実験Ⅲが行われる日）の17:00までに、WingNet(学生用ポータルサイトBeNeFITの中の業務支援を選択) を使って提出して下さい。また、レポートはWord を使って作成して下さい。
WingNet の選択画面（1 班の例）は以下の通り。

• 提出先の教員名: 種田和正（oida）
• 提出先フォルダ: 情報工学実験Ⅲ　サイバー攻撃・Ethereumアプリ　1班

注意事項：

• 何班に属しているか確認して提出先ファルダを選択して下さい。
• WingNet に他人のアカウントでlogin して提出すると、そのアカウントの人のレポートになります。
• 確認のため、（レポートの表紙と同様に）ファイル名にも学籍番号と氏名を入れて下さい。
• 同じファイル名であれば上書きされるので、提出後何度でも訂正することが出来ます。

表紙：

————————–（表紙）—————————
情報工学実験Ⅲ
テーマ名： サイバー攻撃・Ethereumアプリ
情報工学科　3 年 　組 　班
xxAxxxx 氏名＿＿＿＿＿
実施日令和 年 月 日、 月 日
提出日令和 年 月 日
—————————————————————

本文：

• 課題内容
• 課題の実施結果
• 実験結果に対する考察

実験終了後の作業：

1. シャットダウンする。