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

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

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

2018年5月7日

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

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

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

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

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

Contents

1 サンプルアプリのコードから得られる知識
2 掲示板の仕様
3 動作環境
4 サンプルアプリの動作確認
- 4.1 動作方法
- 4.2 動作確認
5 実装のポイント
6 まとめ
7 参考にした記事

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

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

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

動作方法

リポジトリをクローン

$ git clone git@github.com:Matsushin/dapps-react-bbs.git

1	$ git clone git@github.com:Matsushin/dapps-react-bbs.git

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

$ yarn install

1	$ yarn install

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

$ truffle compile

1	$ truffle compile

Ganacheを起動

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

$ truffle migrate

1	$ truffle migrate

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

$ yarn run webpack

1	$ yarn run webpack

ローカルサーバを起動

$ yarn run webpack-dev-server

1	$ yarn run webpack-dev-server

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

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

動作確認

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

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

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

実装のポイント

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

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

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

2018年5月7日

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

contracts/PostToken.sol

pragma solidity ^0.4.23;

import 'zeppelin-solidity/contracts/token/ERC721/ERC721Token.sol';

contract PostToken is ERC721Token {

  struct Post {
    string title;
    string content;
    address mintedBy;
    uint64 mintedAt;
  }

  Post[] posts;

  event Mint(address owner, uint256 tokenId);

  function PostToken(string _name, string _symbol) public ERC721Token(_name, _symbol) {}

  function mint(string _title, string _content) external returns (uint256) {
    require(msg.sender != address(0));
    Post memory post = Post({
      title: _title,
      content: _content,
      mintedBy: msg.sender,
      mintedAt: uint64(now)
    });
    uint256 tokenId = posts.push(post) - 1;
    super._mint(msg.sender, tokenId);

    Mint(msg.sender, tokenId);
    return tokenId;
  }

  function getPost(uint64 _tokenId) external view returns (string title, string content, address mintedBy, uint64 mintedAt) {
    Post memory post = posts[_tokenId];

    title = post.title;
    content = post.content;
    mintedBy = post.mintedBy;
    mintedAt = post.mintedAt;
  }

  function getAllPosts() external view returns (uint256[]) {
    return allTokens;
  }
}

pragma solidity ^0.4.23;

import 'zeppelin-solidity/contracts/token/ERC721/ERC721Token.sol';

contract PostToken is ERC721Token {

struct Post {

string title;

string content;

address mintedBy;

uint64 mintedAt;

}

Post[] posts;

event Mint(address owner, uint256 tokenId);

function PostToken(string _name, string _symbol) public ERC721Token(_name, _symbol) {}

function mint(string _title, string _content) external returns (uint256) {

require(msg.sender != address(0));

Post memory post = Post({

title: _title,

content: _content,

mintedBy: msg.sender,

mintedAt: uint64(now)

});

uint256 tokenId = posts.push(post) - 1;

super._mint(msg.sender, tokenId);

Mint(msg.sender, tokenId);

return tokenId;

}

function getPost(uint64 _tokenId) external view returns (string title, string content, address mintedBy, uint64 mintedAt) {

Post memory post = posts[_tokenId];

title = post.title;

content = post.content;

mintedBy = post.mintedBy;

mintedAt = post.mintedAt;

}

function getAllPosts() external view returns (uint256[]) {

return allTokens;

}

フロント側からSolidityの連携

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

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

2018年4月15日

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

src/App.js

updatePosts() {
    const contract = require('truffle-contract')
    const postToken = contract(PostTokenContract)
    postToken.setProvider(this.state.web3.currentProvider)

    let postTokenInstance
    this.state.web3.eth.getAccounts((error, accounts) => {
      postToken.deployed().then((instance) => {
        postTokenInstance = instance
        return postTokenInstance.getAllPosts({from: accounts[0]})
	  }).then((response) => {
	  	for (let i = 0; i < response.length; i++) {
  			postTokenInstance.getPost(response[i], {from: accounts[0]})
  			.then((response) => {
  				let posts = this.state.posts
  				const post = {
		          "title": response[0].toString(),
		          "content": response[1].toString(),
		          "mintedBy": response[2].toString(),
		          "mintedAt": response[3].toString()
		        }
  				posts.unshift(post)
  				this.setState({ posts: posts })
  			}).catch((e) => {
			  console.log('Error getPost')
	          console.error(e)
		    })
		}
	  }).catch((e) => {
	  	console.log('Error getAllPosts')
        console.error(e)
	  })
  	})
  }

updatePosts() {

const contract = require('truffle-contract')

const postToken = contract(PostTokenContract)

postToken.setProvider(this.state.web3.currentProvider)

let postTokenInstance

this.state.web3.eth.getAccounts((error, accounts) => {

postToken.deployed().then((instance) => {

postTokenInstance = instance

return postTokenInstance.getAllPosts({from: accounts[0]})

}).then((response) => {

for (let i = 0; i < response.length; i++) {

postTokenInstance.getPost(response[i], {from: accounts[0]})

.then((response) => {

let posts = this.state.posts

const post = {

"title": response[0].toString(),

"content": response[1].toString(),

"mintedBy": response[2].toString(),

"mintedAt": response[3].toString()

}

posts.unshift(post)

this.setState({ posts: posts })

}).catch((e) => {

console.log('Error getPost')

console.error(e)

})

}

}).catch((e) => {

console.log('Error getAllPosts')

console.error(e)

})

}

開発モード

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

$ yarn run webpack-dev-server --config webpack.development.config.js

1	$ yarn run webpack-dev-server --config webpack.development.config.js

web pack.development.config.js

module.exports = [
  {
    mode: 'development',
	...

module.exports = [

{

mode: 'development',

...

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

まとめ

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

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

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

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

掲示板の仕様

動作環境

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

動作方法

動作確認

実装のポイント

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

フロント側からSolidityの連携

開発モード

まとめ

参考にした記事

2 件のコメント

コメントを残すコメントをキャンセル

プロフィール

最近の投稿

Twitter でフォロー

アーカイブ

カテゴリー

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

掲示板の仕様

動作環境

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

動作方法

動作確認

実装のポイント

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

フロント側からSolidityの連携

開発モード

まとめ

参考にした記事

2 件のコメント

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

DApps開発学習開始して2ヶ月経過したのでやったことまとめ

無料で学べる！！CryptoZombiesでSolidityの学習してみた

【振り返り】Go学習を始めてやったことまとめ

【NEM開発入門】NEM Libraryを利用して送金する

ecs-deployでECSにアプリをCIからデプロイする〜その③〜

【NEM開発入門】仮想通貨NEMのAPIを利用した開発の事前準備をする

DApps開発学習を開始！まずは「ブロックチェーンアプリケーション開発の…

ブロックチェーンアプリを簡単に作れる！仮想通貨NEMを利用した開発用ライ…

プロフィール

最近の投稿

Twitter でフォロー

アーカイブ

カテゴリー

コメントを残すコメントをキャンセル