Web3.0検証(4)-分散型アプリをRemixで作ってみる

##### [前回] [Web3.0検証(3)-分散型アプリをTruffleで作ってみる](https://qiita.com/mingchun_zhao/items/60239eefc86f9192fe12)

## はじめに

前回は、Truffleフレームワークを使ってローカルに開発環境を構築し、
シンプルなWeb3.0分散型アプリ(DApp)を作成・実行してみました。

今回はブラウザベースの統合開発環境Remixを使ってDAppを検証してみます。
Remixは、簡単にスマートコントラクトの記述言語Solidityを使った開発ができるだけでなく、
MetaMaskとも接続でき、DAppを直接ブロックチェーンのネットワーク上で実行できるようです。

## 検証シナリオ

Solidityドキュメントのサンプル [投票システム(Voting)](https://solidity-jp.readthedocs.io/ja/latest/solidity-by-example.html) を使って検証します。

この投票システムでは、自動かつ公正な電子投票を実現しているようです。

- 投票権を正しい人に渡す
- 投票数カウントの不正操作を防ぐ


## 検証環境

Web3.0対応ブラウザである [Brave](https://brave.com/ja/) を使って検証します。

ご興味ある方は [Web3.0検証(1)-Web3.0対応ブラウザに触れてみる](https://qiita.com/mingchun_zhao/items/f789e551ac7e8f6920df) もご参照ください。

## 検証スタート

### コントラクトの記述

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/9d1a39bf-e54c-8290-ada3-8d68b6ed9509.png)

- Braveから `Remix - Ethereum IDE` にアクセス
https://remix.ethereum.org/
- Remix IDE左上`File explorers`タブをクリック
- `Create New File`アイコンをクリック
- vote.solを作成

ソースコードは、Solidityドキュメントの投票サンプル「Voting」をそのまま使用しました。
https://solidity-jp.readthedocs.io/ja/latest/solidity-by-example.html#voting

投票システムのアイデア、

- 投票ごとにコントラクトを作り、オプションごとに短い名前をつける
- コントラクトの作成者は管理者として各アドレス(投票者)に投票権を付与
- そのアドレスを持っている人は自分で投票または委任できる

### コントラクトのコンパイルとデプロイ

- コンパイル

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/5b689ac6-e0aa-0f47-6f21-f9ed3134bbbe.png)
1. `Solidity compiler` タブをクリック
2. `Compile vote.sol` ボタンをクリック。


- デプロイ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/81e12f90-4143-dc2c-5fb2-571b23e0c84e.png)


1. `Deploy & run transactions` タブをクリック
2. `ENVIRONMENT`は"JavaScript VM"(ブラウザ上の一時的なブロックチェーン)
    - "Injected Web3"で、実際MetaMaskに接続し、ブロックチェーンにコントラクトをデプロイできます
    - が、イーサ(ETH)の購入が必要なので今回は。。。

3. 候補3人の名前をbytes32型配列に変換した結果を入力
    - `Deploy` ボタンの右側に入力
    - 名前からbytes32値への変換方法は後続

```
["0xe5a4aae9838e0000000000000000000000000000000000000000000000000000","0xe6aca1e9838e0000000000000000000000000000000000000000000000000000","0xe4b889e9838e0000000000000000000000000000000000000000000000000000"]
候補3名:
太郎: 0xe5a4aae9838e0000000000000000000000000000000000000000000000000000
次郎: 0xe6aca1e9838e0000000000000000000000000000000000000000000000000000
三郎: 0xe4b889e9838e0000000000000000000000000000000000000000000000000000
```

4\. `Deploy` ボタンをクリックしデプロイ

メタデータ発行成功とのメッセージが、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/efbe3a59-9ae1-ad6c-485d-038b095e921e.png)

Deploy結果として、画面の左下に「BALLOT AT アドレス(MEMORY)」が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/fd6777b1-e419-257a-023a-975af8688eba.png)

1. 先頭の右矢印をクリックし、展開します
2. アドレスを控えておきます、以降の操作で使用します

### 投票操作

投票システムで、以下の操作が行えます。

- 投票を委任(delegate)
    - 委任先アドレスを入力
- 投票権を付与(giveRightToVote)
    - 付与先アドレスを入力
- 投票(vote)
    - 候補番号を入力(1,2,3)
    - 管理者(生成者)は1票付与済(コントラクトを生成時)
- 管理者の確認(chairperson)
- 候補の確認(proposals)
- 現在の最高投票数を獲得している候補の確認(winnerName)
- 現在の最高投票数を獲得している候補番号の確認(winningProposal)

アドレス情報を、ここからコピーできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/b5116e61-55ca-276b-df30-5fb619c69ccb.png)

### 候補3名の名前をbytes32型配列に変換する(おまけ)

- コントラクトを作成

candidate.solを作成します。

```solidity
/// @title convert name to bytes32.
contract Candidate {
    function getBytes32ArrayForInput() pure public
            returns (bytes32[3] memory b32Arr) {
        b32Arr = [bytes32("太郎"), bytes32("次郎"), bytes32("三郎")];
    }
}
```

- Compile、Deploy

画面左下から3名候補それぞれのbytes32値を確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/de235654-29ed-533d-e550-a0c8e032519f.png)

### MetaMaskの登録(おまけ)

MetaMaskとは、ソフトウェアウォレットです。
以下の機能を持っています。

- Ethereum系ブロックチェーンの通貨やNFTを一括で補完・管理
- 秘密鍵の管理
- コントラクトへの署名
- ブラウザ拡張機能版とモバイルアプリ版がある

BraveにMetaMask拡張機能をインストールします。

https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn

- すると、開始画面が表示されるので、`開始` をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/2157a130-ff45-e80d-2b1f-b103cb8f5510.png)

- `ウォレットを作成`をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/3aa10ad2-b7f5-ebb8-5077-989fd65a8cad.png)

「MetaMaskの品質向上へのご協力のお願い」は一旦「結構です」を選びました。

- パスワード設定

シークレットリカバリーフレーズは、大事に保管する必要があります。

- これでMetaMaskに登録できました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/e8ff1c8f-ccdd-e67e-73a1-31752ccdbb22.png)

## おわりに

Remixを使って、簡単に分散型アプリ(DApp)の開発ができそうです。
今後は、DAppでブロックチェーン技術がどのように利用されているか深掘りしてみます。
お楽しみに。

##### [次回] [Web3.0検証(5)-Blockchainの基本](https://qiita.com/mingchun_zhao/items/d471490f8750602e47bc)