SolidityとReactで掲示板を作成する

前回のサンプルアプリ作成ではRailsからスマートコントラクトの連携をさせて独自トークンを発行するサンプルアプリを作成しました。

Railsでコントラクトコードを実行して、独自トークンを発行する

2018年5月7日

 

今回はサーバーサイドは利用せずReact.jsと連携させて掲示板のサンプルアプリを作成してみました。

サーバサイドを利用せずフロントエンドからのみ連携させた理由としては、React.jsのようなJacaScriptのフレームワークを使った経験が少ないのでその学習も兼ねているためです。

フレームワークは他にも有名なVue.jsにしようか少し迷ったのですが、よりReact.jsの方が一般的という印象があったのであまり深く考えずReactを選んでいます。

また最近CSSフレームワークのBulmaが人気と噂で聞いたのでおまけで使ってみました。

今回作ったコードはこちらにおいています。 

サンプルアプリのコードから得られる知識

  • ERC721の利用方法
  • React.jsの基本
  • フロントエンドからのスマートコントラクトとの連携方法
  • Bulmaの利用方法

急に「ERC721」と出てきていますが、スマートコントラクトの規格の1つになります。サンプルアプリでは掲示板への投稿の1つ1つがERC721に準拠したトークンという扱いになります。

ERC721の特徴

スマートコントラクト内で代替え不可能なトークン(Non-Fungible Token=NFT)を扱えるように規格を定められている。

ERC721の規格を用いることで、イーサリアムブロックチェーンでNFTの所有権や取引履歴を記録できます。

掲示板の仕様

匿名掲示板への投稿と一覧表示のみできるシンプルな作りとなっています。

  • 掲示板への投稿
  • 掲示板の一覧表示 

動作環境

動作させた環境は以下になります。

  • React.js  v16.3.2
  • Bulma v0.7.1
  • yarn v1.6.0
  • solidity v0.4.23
  • OpenZeppelin v1.9.0
  • truffle v4.1.7
  • Ganache v1.1.0

 

サンプルアプリの動作確認

動作方法

リポジトリをクローン

 

各ライブラリのインストール

 

コントラクトコードのコンパイルを実行

 

Ganacheを起動

Ganache

 

コントラクトコードのマイグレートを実行

 

 JavascriptとCSSファイルのビルドを行う

 

ローカルサーバを起動

 

最後にトップ画面(http://localhost:3000)にアクセス。エラーが発生しなければOK!

それでは次に動作を確認していきましょう。

動作確認

トップ画面にアクセスして投稿フォームにタイトルと本文を入力して投稿する

DApps React BBS

 

投稿後に投稿一覧に表示されればOK!

DApps React BBS

 

動作が確認できましたので次は実装のポイントを見ていきます。

実装のポイント 

ERC721準拠したコントラクトコード

前回作成した独自トークンのサンプルアプリ同様にzeppelin-solidityライブラリを使用することで簡単に実現できます。

Railsでコントラクトコードを実行して、独自トークンを発行する

2018年5月7日

メソッドとしてはmintgetPostgetAllPostsの3メソッドを追加しただけになります。処理としてもシンプルなものになりました。 

contracts/PostToken.sol

 

フロント側からSolidityの連携

フロントからの連携はReact.jsを使っていても以前書いた記事とあまり変わらない感じですね。

Truffle Boxesを利用してブラウザから動作するDAppsサンプルアプリを作る

2018年4月15日

App.js ではスマートコントラクト側のgetAllPostsメソッドで全投稿IDを取得後にgetPostメソッドを呼び出して1つの投稿情報を取得することで画面の更新を行なっています。

 

src/App.js

 

開発モード

実際の開発ではローカルサーバを起動する際は下記のようなコマンドを利用していました。 configオプションを利用しています。

 

web pack.development.config.js

 

このように明確にdevelopmentモードとすることでコード編集後の画面更新が素早く行うことができるようになります。

まとめ

今回でReact.jsの基本とフロントからスマートコントラクトの連携方法の基本がが学べました。 

次はReduxも使ってみたいですし、スマートコントラクトをReact/Reduxで扱うフレームワークのDrizzleの利用や、さらには実際のサービスを開発する場合はサーバーサイド側との連携も行うと思うので、ReactとRailsの連携も試してみたい。 

参考にした記事

2 件のコメント

  • Shingo.Ikawa へ返信する コメントをキャンセル

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です