Help us understand the problem. What is going on with this article?

DappsでHello world

1.はじめに

1.1記事の目的

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

1.2 背景

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

2.製作物

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

具体的には....

  • 1 フロントエンド(Webページ)から、ブロックチェーンに書き込みを行いたいデータを入力します。
    3.JPG

  • 2「Update」をクリックするとブロックチェーンへのデータの書き込みが実施されます。
    4.JPG

  • 3 ブロックチェーンへのデータ書き込み完了後、書き込みされたデータをブロックチェーンより読み出し、フロントエンド(Webページ)に表示されます。
    5.JPG

3.システムの構成

Hello Dappsを実現するのに使用する登場パーツの説明をします。
バックエンドはHello, World Ethereumの内容と同じですが、フロントエンド部分は異なっておりVue.jsで構成していています。

3.1 登場パーツの整理

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

2.JPG

名前 内容
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)作業ディレクトリを作ります。

/metit
mkdir metit 

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

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

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

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

1.2 vue cliのインストール

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

/metit
npm install -g @vue/cli@3.9.3 //metitディレクトリで実施
vue --version        // 3.9.3

(2)プロジェクトのセッティング

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

作業終了後ディレクトリ構成
image.png

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

/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のインストールを行う

こちらのサイトを参照してください。「MetaMaskへ入金」以降の内容は不要です。

2.2 ETHを手に入れる

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

Metamaskを立ち上げ、Ropstenテストネットワークを選択する。
image.png

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

image.png

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

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

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

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;
  }
}

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

/metit/build/contract/
truffle compile

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

image.png

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

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

/metit
truffle develop

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

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

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

/metit
truffle create migration DeployHello

/mitit/migrationsディレクトリに1568469596_deploy_hello.jsが自動生成されます。
image.png

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

/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
//スマートコントラクトのコントラクトアドレスが表示されている

/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フロントエンドの構築

5 参考文献

Hello, World Ethereum

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away