DappsでHello world

# 1.はじめに

## 1.1記事の目的
イーサリアム上のブロックチェーンで動作するHello worldレベルのDapps（フロントエンド上で入力したデータをブロックチェーンに書き込みを行う機能と、ブロックチェーンに記録されたデータの読み出しを行う機能を持った)作成の一連の手順を紹介します。

## 1.2 背景
イーサリアム上でDappsを作成し一通りの流れを体験する記事はたくさんありますが、バックエンドやフロントエンドで動く複数のアプリが絡み合っており、それらのアプリも頻繁にversionアップされているので、記事通りに構築してみてもエラーが発生し、動かないことが多々ありました。また、HelloレベルのDappsとはいえ、例えば[試して学ぶ　スマートコントラクト開発](https://book.mynavi.jp/ec/products/detail/id=101628)で紹介されている方法はSolidity,GO言語,REACT,truffle・・など必要な知識が幅広くDapps初心者がHello worldを体験するには敷居が高く感じます。よって、もっと単純にDappsのHello Worldレベルを体験できる方法を記事にしようと思いました。

# 2.製作物
<b>Hello Dapps アプリ</b>
所望のデータをブロックチェーンに登録し、登録されたデータをブロックチェーンより読み出しWebページに表示を行う機能をもっています。

具体的には....

+ 1 フロントエンド(Webページ)から、ブロックチェーンに書き込みを行いたいデータを入力します。
![3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/b42b3798-b9b7-c22d-4de1-9dda4126da96.jpeg)

+ 2「Update」をクリックするとブロックチェーンへのデータの書き込みが実施されます。
![4.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/16908ff3-6b81-91e5-64ca-f605528557f5.jpeg)

+ 3 ブロックチェーンへのデータ書き込み完了後、書き込みされたデータをブロックチェーンより読み出し、フロントエンド(Webページ)に表示されます。
![5.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/20aea5fa-22b6-2c74-ec28-e8c24d493674.jpeg)


# 3.システムの構成

Hello Dappsを実現するのに使用する登場パーツの説明をします。
バックエンドは[Hello, World Ethereum] (https://github.com/rantan/meti-hackathon#step6)の内容と同じですが、フロントエンド部分は異なっておりVue.jsで構成していています。

## 3.1 登場パーツの整理

下記の図で、各登場パーツの関連性を記載しました。

![2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/6b6aa9a2-33ce-3030-782d-623be9cbc41f.jpeg)


| 名前      |  内容        |
|:----------------------------|:-------------------------|
| METAMASK              |  秘密鍵と公開鍵の管理を行う。 |    
| truffle     |    スマートコントラクトのコンパイル、テストやdeployをサポートするビルドフレームワーク |  
| Vue-cli     |    フロントエンドのユーザーインターフェースを効率的に構築する |  
| Vuex + Vuerouter  |    Vue.js アプリケーションのための状態管理パターンライブラリ |   
| Solidity  | スマートコントラクトの実装を行う言語  |   
| Web3.js  | Ethereumのノードと通信するJavascript APIライブラリ |   
| INFURA  |  Ethereumのメインネットやテストネットのノードをホスティングし、deployに必要なend pointやAPIを提供するサービス  |   
| Ropsten  |  テストネットの1つ |   



# 1.環境のセットアップ

### 1.1 truffleのインストール

(1)作業ディレクトリを作ります。

```console:/metit
mkdir metit 
```

(2)truffle version5.0.20をインストールします。古いversionをインストールすると同時にインストールされるweb3.jsのversionが1.0.0以下になり不都合が生じます。

```console:/metit
npm install -g truffle@5.0.20   //metitディレクトリで実施
```

(3)イニシャル処理を行います。

```console:/metit
truffle init    //metitディレクトリで実施
```

### 1.2 vue cliのインストール

(1)vue cliのインストール & version確認

```console:/metit
npm install -g @vue/cli@3.9.3 //metitディレクトリで実施
vue --version        // 3.9.3
```
(2)プロジェクトのセッティング

```console:/metit
npm install -g @vue/cli-init    //metitディレクトリで実施
vue init webpack .             //metitディレクトリで実施
```

作業終了後ディレクトリ構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/4302512a-7a78-3a5d-7251-49bc9facb36b.png)


### 1.3 vuexとtruffle-contractインストール

```console:/metit
npm install vuex truffle-contract  
```

・**Vuex**

Vuexとは、Vue.jsアプリケーション用の状態(アプリケーションが保持するデータ)管理ライブラリです。Vuexを使うことでそれらのデータを一元管理することができます。

・**truffle-contract**
Better Ethereum contract abstraction, for Node and the browser. 


# 2. metamaskのインストールを行う


###2.1 metamaskのインストールを行う

[こちらのサイト](https://medium.com/@cryptoplanet.io/metamask%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9-76568ab4efd3)を参照してください。「MetaMaskへ入金」以降の内容は不要です。


###2.2 ETHを手に入れる

Ropstenテストネットワークに接続し、テストETHを入手する。

Metamaskを立ち上げ、Ropstenテストネットワークを選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/8a4822cd-368d-42b5-3e41-f852c69489ba.png)

[こちらのサイト](https://faucet.metamask.io/)からmetamask上の自分のアドレスに1ETHを送ってもらいます。なお、一度1ETHを送ってもらうと24時間は再送金を行ってもらえません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/175df528-79de-1fd7-2c48-d1dd9839a9e6.png)



#3.スマートコントラクトの作成/デプロイ

###3.1 スマートコントラクトの作成

contract/Hello.solにスマートコントラクトを記述する。


```solidity:contract/Hello.sol
pragma solidity ^0.5.0;

contract Hello {
  string public message;
  constructor(string memory initMessage) public {
    message = initMessage;
  }
  function update(string memory newMessage)     public {
    message = newMessage;
  }
}
```

スマートコントラクトのコンパイルを実施する。

```console:/metit/build/contract/
truffle compile
```

コンパイルが終わると、buildディレクトリと複数のjsonファイルが生成されます。
jsonファイルの中にはabiという要素があります。簡単にいうとスマートコントラクトのインターフェース説明書です。truffle compileにより自動生成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/435f809f-6569-00c5-1187-b13d95f4fe7c.png)



### 3.2 スマートコントラクトをローカルブロックチェーンにデプロイする

まずは、truffleを立ち上げます。

```console:/metit
truffle develop
```

web3のversionを確認する。1.0.0以上を使う。0.x.xと1.x.xは使い方が全く違ってくるので注意してください。

```console:/metit
truffle(develop)> web3.version     //'1.0.0-beta.37'
```

動作させるためにはコントラクトをまずはローカルチェーンにデプロイして確認します。

```console:/metit
truffle create migration DeployHello
```

/mitit/migrationsディレクトリに1568469596_deploy_hello.jsが自動生成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/65bd1728-f4b2-17e1-6432-20a97c67cf24.png)

1568469596_deploy_hello.jsを下記の通りに書き換えます。

```console:/metit/migrations/1568469596_deploy_hello.js
const HelloContract = artifacts.require('Hello.sol');

module.exports = function(deployer) {
  deployer.deploy(HelloContract, 'Hello');
};
```
	
準備が完了しましたので実際にローカルブロックチェーンにDeployを実施します。
Deployを実施すると、contract addressが表示されますのでメモしておいてください。
> contract address:    0xe36f9228520333a425048862A3CC70072Cf99c19 
//スマートコントラクトのコントラクトアドレスが表示されている



```console:/metit
truffle(develop)> migrate

Compiling your contracts...
===========================
> Everything is up to date, there is nothing to compile.


Starting migrations...
======================
> Network name:    'develop'
> Network id:      5777
> Block gas limit: 0x6691b7


1_initial_migration.js
======================

   Deploying 'Migrations'
   ----------------------
   > transaction hash:    0x576fc6a6f844e2fd1dd50a3343449a08ebff18914235517545f9ca9d45b1306a
   > Blocks: 0            Seconds: 0
   > contract address:    0x9969206896627581fb485Ca078ec2D1B2F101Ea8
   > block number:        1
   > block timestamp:     1568470330
   > account:             0xB480CcE949949318C1d4ef1b09f96BE981521e02
   > balance:             99.99477214
   > gas used:            261393
   > gas price:           20 gwei
   > value sent:          0 ETH
   > total cost:          0.00522786 ETH


   > Saving migration to chain.
   > Saving artifacts
   -------------------------------------
   > Total cost:          0.00522786 ETH


1568469596_deploy_hello.js
==========================
truffle(develop)>
   Deploying 'Hello'
   -----------------
   > transaction hash:    0xe6d8ccfa1c700bab720c3f2bbad4e734c26a423e73b4e310dacc09cc0e29eab8
   > Blocks: 0            Seconds: 0
   > contract address:    0xe36f9228520333a425048862A3CC70072Cf99c19 
//Hello　スマートコントラクトのコントラクトアドレスが表示されている
   > block number:        3
   > block timestamp:     1568470330
   > account:             0xB480CcE949949318C1d4ef1b09f96BE981521e02
   > balance:             99.98793462
   > gas used:            299853
   > gas price:           20 gwei
   > value sent:          0 ETH
   > total cost:          0.00599706 ETH


   > Saving migration to chain.
   > Saving artifacts
   -------------------------------------
   > Total cost:          0.00599706 ETH


Summary
=======
> Total deployments:   2
> Final cost:          0.01122492 ETH
```




次記事ではVue-Cliを使ったフロントエンドの構築の流れを説明します。





#4 次記事
[Hello Dappsフロントエンドの構築] (https://qiita.com/NT1123/private/e2c36b438bb712460d68)

#5 参考文献

[Hello, World Ethereum] (https://github.com/rantan/meti-hackathon#step6)