RSKスマートコントラクトのフロントエンドを作成する方法

このチュートリアルでは、RSK testnetで展開されているスマートコントラクトを使うための最初のフロントエンドを作成する方法をステップバイステップで紹介します。
RSKは、BitcoinネットワークをベースにしたEthereum互換のスマートコントラクトのオープンソースのプラットフォームです。

概要
必要条件
スマートコントラクトの導入
スマートコントラクトとの相互作用

概要

以下は、フロントエンドを構築するための手順をまとめたものです。
1.RSK testnetに接続するためにMetamaskを設定します。
2.faucetでテストネットのR-BTCを入手する。
3.RemixをRSK Testnetに接続します。
4.Remixを使ってRSK Testnet上でスマートコントラクトを作成、コンパイル、デプロイします。
5.プロジェクトを初期化します。
6.web3.jsをインストールします。
7.javascriptファイルの作成
8.htmlファイルの作成
9.スマートコントラクトとの作成

ステップ1から4までの詳細は、以下のチュートリアルリンクで説明しています。
RSK Testnetでリミックスとメタマスクを使用する

必要条件

・Metamask
・Remix – ウェブツール, オンライン環境
・Node.js と NPM (Node Package Manager)
・Visual Studio Code (VSCode) またはお好みの他のエディタ
・HTTP サーバ: express
・web3.js

前述の通り、MetamaskをインストールしてRSK testnetに接続する方法と、RemixをRSK Testnetに接続する方法については、以下のリンク先のチュートリアルで詳しく説明しています。

・RSK TestnetでRemixとMetamaaskを使う

Node.jsとNPM
Node.jsとNPMが必要ですが、通常は両方を一度にインストールします。
注意：Node.jsとNPMが既にインストールされているかどうかを確認するには、ターミナルで以下のコマンドを入力します。

node –version
npm –version

インストールする必要がある場合はNode.jsに移動します。

Visual Studio Code (VSCode)

このチュートリアルでは、VSCodeを使ってプロジェクトを作成し、デプロイします。
VSCode を使用するには、ここからダウンロードしてください。
ターミナルに次のコマンドを入力して、VScodeのインストールが成功したかどうかを確認してください。

code -v

Registerプロジェクトを作成する

Registerという名前のフォルダを作成し、Registerフォルダ内のnpmプロジェクトをターミナルに以下のコマンドを入力して起動します。
例えば、この場所にフォルダを作成します。C:\RSK\
プロジェクトは、「C:\RSKRegister」のフォルダにあります。
mkdir Register
cd Register
npm init -y

Express

Expressは、Webアプリケーションの開発を支援するNode.jsのWebアプリケーションフレームワークです。これは最小化されたHTTPサーバーです。
Expressをインストールするには、ターミナルに以下のコマンドを入力し、projectの場所で enter を押します。
npm install express –save

詳細はこちら
http://expressjs.com/

https://www.npmjs.com/package/express

Web3.js

Web3.jsは、ブロックチェーンを利用するWebサイトやクライアントの開発を支援してくれます – ブロックチェーンからスマートコントラクトでデータを読み書きするコードを書きます。
web3.jsライブラリは、一般的なJSON-RPC仕様を使用して接続するEthereum Javascript APIです。RSKの仮想マシン実装はEthereum Virtual Machine（EVM）と互換性があるため、フロントエンドとRSKのテストネット間の通信をweb3.jsで行うことが可能です。
web3.jsをインストールするには、ターミナルに以下のコマンドを入力し、projectの場所でEnterキーを押します。
npm install web3 –save

詳細はこちら
https://web3js.readthedocs.io/

package.jsonをチェック

package.jsonは、npm init -yコマンドを使う前にインストールしたパッケージを含めて、いくつかの設定をしてnpmで作成されたファイルです。
インストールが終わったら、VSCodeのRegisterというプロジェクトフォルダを開いて、package.jsonというファイルを確認してみます。ファイル内の依存関係を見てみましょう。

インストールしたパッケージがあります。
“dependencies”: {
“express”: “^4.17.1”,
“web3”: “^1.2.6”
}

スマートコントラクトの導入

これについてはチュートリアルで詳しく説明しています。
・RSK TestnetでRemixとMetamaskを使用しここで再開します。

Remix
Remixxへ
・スマートコントラクトを作成する
・新規ファイルの作成
・ファイル名：Register.sol
・スマートコントラクトは以下のgistからコピペするか、コードをコピペしてください。
pragma solidity 0.5.4;
contract Register {
string private info;
function setInfo(string memory _info) public {
info = _info;
}
function getInfo() public view returns (string memory) {
return info;
}
}

文字列を格納するための変数情報

変数 info に格納された文字列を返す関数 getInfo()

変数 info に格納されている文字列を変更する関数 setInfo()

スマートコントラクトをコンパイルする

左側の3つ目のボタンでSolidity compilerを選択し、Compile Register.solのボタンをクリックします。

スマートコントラクトをデプロイする

左側のパネルで、Deploy and run transactionsボタンをクリックします。
これはMetaMaskやNiftyのようなブラウザプラグインによって注入されたWeb3プロバイダを使用するようにRemixに指示するものです。

次に、「Deploy」ボタンをクリックします。

スマートコントラクトを展開する際にガス料金を支払うために必要となるため、お財布にtR-BTCを入れていることを確認してください。そのためには、このガイドに従ってください。RSK TestnetでRemixとMetamaskを使用する

スマートコントラクトがRemixでデプロイされると、左パネルのデプロイとトランザクションの実行の下に表示されます。スマートコントラクトの右側にあるコピーボタンをクリックして、スマートコントラクトのアドレスをコピーします。フロントエンドで使用するために必要になります。

この例では、コントラクトアドレスは0xc864D0fef177A69aFa8E302A1b90e450910A4c3Eです。

クライアントサイドアプリケーション – フロントエンド
では、スマートコントラクトと連動するフロントエンドの構築を始めましょう。フロントエンドには2つのファイルしかありません。
1.index.html
2.index.js

Index.html

ndex.html
Registerフォルダにindex.htmlというファイルを作成します。
スマートコントラクトは以下のリンクよりコードをコピペしてください。
_!DOCTYPE html_ _html _ _head_ _title_Register information at Blockchain__title_ _link href=’https___maxcdn.bootstrapcdn.com_bootstrap_3.3.7_css_bootstrap.min.css’ rel=’stylesheet’ type=’text_css’_ _script

Index.js

Registerフォルダ内にindex.jsというファイルを作成します。
以下の要旨からスマートコントラクトをコピペするか、以下のリンクよりコードをコピペしてください。
_!DOCTYPE html_ _html _ _head_ _title_Register information at Blockchain__title_ _link href=’https___maxcdn.bootstrapcdn.com_bootstrap_3.3.7_css_bootstrap.min.css’ rel=’stylesheet’ type=’text_css’_ _script (1)

この部分は、設定されたウォレットを使用してRSKのテストネットに接続されています、今回の場合はメタマスクです。

_!DOCTYPE html_ _html _ _head_ _title_Register information at Blockchain__title_ _link href=’https___maxcdn.bootstrapcdn.com_bootstrap_3.3.7_css_bootstrap.min.css’ rel=’stylesheet’ type=’text_css’_ _script (2)

index.jsを更新する

デプロイ後にコピーしたスマートコントラクトのアドレスは覚えていますか？
ここで更新します。
var contractAddress = ‘0xc864D0fef177A69aFa8E302A1b90e450910A4c3E’;

HTMLサーバー

Registerフォルダ内にserver.jsというファイルを作成します。
var express = require(‘express’);
var app = express();
app.use(express.static(__dirname));
app.listen(‘3300’);
console.log(‘Running at\nhttp://localhost:3300’)

このファイルは、express HTML サーバーを設定します

サーバーの実行

最後にExpressサーバーを実行します。ターミナルに以下のコマンドを入力します。
node server.js

ブラウザで、次の場所に移動します。
http://localhost:3300
Metamask Walletがポップアップ表示されたら、「Connect」ボタンをクリックします。

スマートコントラクトとの相互作用

Get

Getボタンをクリックします。
web3インスタンスは、registerスマートコントラクトインスタンス上のsetInfo()関数を呼び出し、テキストフィールドに入力した情報を表示します。

スマートコントラクトで初期値を指定していなかったため、情報が保存されていません。

Set

infoテキストフィールドに任意の値を入力し、Setボタンをクリックします。
web3 インスタンスは、スマートコントラクトインスタンスのレジスタで setInfo() 関数を呼び出し、定義した情報を使用します。
今回は「RSK」という値を入力します。

トランザクションがブロックに含まれるまで数秒待ちます…