Webアプリからブロックチェーンの内容を読み込む（ブロックチェーン入門２）

概要

ブロックチェーン（Ethereum testnet (Ropsten)）に、textを書き込むコントラクトから
Webアプリ（Node.js + TypeScript + vue.js）で、書き込んだ内容を表示するまでを
書きます。

なお、私もブロックチェーン初学者なので、内容に誤り等ありましたらご指摘いただけると幸いです。

コントラクトの実装は下記を参照ください。
https://qiita.com/wadanobuya/items/e4ac53ba78a6bf4d38d6

webアプリのgithub　クローンしてお試しください。
https://github.com/wadanobuya/set-message-dapps

1．デプロイしたコントラクトの接続情報を取得

1-1．デプロイしたコントラクトの接続情報(ABI)を取得

ABIとは、、、
Contractの取り扱い説明書のようなもの

タブをcompileにもどしてABIを取得
(コピーしたABIを適当なテキストに貼り付けておいてください。あとで使います)

1-2．デプロイしたコントラクトのアドレスをコピー

デプロイ時のログからropstenのTransactionからアドレスを取得します。

RopstenのTransactionを参照する。

RopstenのTransaction

下記、コントラクトのアドレスをコピー
(コピーしたアドレスを適当なテキストに貼り付けておいてください。あとで使います)

２．Webアプリケーションとの接続設定

2-1.ABIを設定

※SetMessageのコントラクトを使用する場合このままでもOK

web_app/src/contractInfo.tsを編集して
ABIを設定します。

コピーしたABIをabi: に貼りつけ
すでに書き込んである[]に

export default {
  Token: {
    // Every time you deploy a contract, you have to update address.
    address: '0xa4ac37f7c15d12d9c57768bad57781ee974d4cbf',
    // Every time you change the contract interface, you have to update abi.
    abi: 
〜省略〜
  },
};

2-2.ABIを設定

address:にコピーしたコントラクトのアドレスを設定
ここがデプロイしたコントラクトのアドレスになるのでここは
自身で実装したコントラクトを設定ください。

※変更しないと、私がデプロイしたコントラクトのアドレスになっています。

export default {
  Token: {
    // Every time you deploy a contract, you have to update address.
    address: '0xa4ac37f7c15d12d9c57768bad57781ee974d4cbf',

3．Webアプリケーションの接続確認

3-1． npm インストール

下記の位置でnpm インストールを実行
web_app/

npm install

3-2． web アプリケーションを実行

npm run serve

※　エラーが出ますが気にせずに、、、
ゆくゆく修正いたします、、、

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.54.118:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

3-3 chromeブラウザからアクセス

http://localhost:8080/

web画面が表示され「getMessage」のしたに、コントラクトでsetしたteｘｔが表示されていれば
接続完了です。

コントラクトのsetMessageで違うtextを書き込み表示が変わるのを確認してもらえたらと思います。

※画面デザインはなんとかしたいです。

まとめ

これで
コントラクトを実装しwebアプリでのアクセスまで
できました！

今後はwebアプリからのsetMessageを実行を
できたらと思います、、、