プロダクト開発日記(Astar) 3日目 [@polkadot/api-contractを使ってwasmのスマートコントラクトの関数を呼び出す]
こんばんは。久しぶりの投稿です。
前回から1週間ぐらい経過した気がしますが、その間Rustの勉強をしていました。
普段、RubyやPHPの言語に触れているsekaiにとっては未知なことが多くとても 楽しく勉強しています。現在は下記のチュートリアルを8章ぐらいまで進みました。
https://doc.rust-jp.rs/book-ja/foreword.html
読み進めている途中の息抜きにAstar周りのことを調べ、まとめているうちに前回の続きに繋がる内容ができました。
...
この記事はWeb2のエンジニアであるsekaiがAstar上でプロダクトを開発するまでにどのように学習したか変遷を綴っている記事です。
*筆者はブロックチェーンの業界3ヶ月目、mastering bitcoinを3-4回読んでいるような状況です。
*もし間違いや意見がある場合はぜひ教えてください。 勉強になります。
*筆者のスペックですがweb2エンジニアを6-7年しており、RubyやNode.jsをよく使っています。
今回の記事は3日目の記事になります。
3日目
時間が空いたので現在していることを振り返ってみます。
1日目 ローカルでAstar Networkを立ち上げるチュートリアルを見つけて行う。
2日目 Dappを作るためにはEVM、またはWASMがあると聞いたことがあるがそれぞれどのような特徴があり、今回はどちらを選ぶのか決定する
2日目 上記で決定したものを使って簡単なスマートコントラクを作成するチュートリアルを見つけて行う。
これから-> スマートコントラクトをフロント側で呼び出してみる。(これはweb3.jsのようなものになるはずです。)
今回行うことは最後のスマートコントラクトをフロント側で呼び出してみる。
の一歩手前の内容です。
今回の記事ではNode.jsを使って2日目にローカルネットワークにデプロイしたflipperのコントラクトの関数を呼び出してみます。
これができたらどのようにフロントから呼び出すのかもイメージしやすくなりますね。
まず初めに@polkadot/api-contractについて知る必要があります。
@polkadot/api-contractはSubstrateのcontractsとやりとりができるライブラリです。
詳しくはこちらを確認してください。
https://polkadot.js.org/docs/api-contract
Substrateはブロックチェーンを構築できるフレームワークです。ブロックチェーンに必要な機能を提供してくれます。
このSubstrateでブロックチェーンを作成する時にスマートコントラクトをサポートするか設定することができます。
https://docs.substrate.io/v3/runtime/smart-contracts
前回デプロイしたflipperのread関数を呼び出すコードを書いていきます。(Node.jsです。) sekaiの環境はnode -v -> v16.10.0です。
まず初めに ディレクトリを作成します。
mkdir polkadot-api
cd polkadot-api
必要なパッケージをインストールします。
npm init
npm install @polkadot/api @polkadot/api-contract
npm install path
npm install fs
前回作成したflipperのmetadata.jsonをcopyしてきます。
cp /hoge/flipper/target/ink/metadata.json metadata.json
前回の記事を参考にローカルネットワークを起動して、 デプロイしたスマートコントラクトのアドレスを確認してください。
実行ファイルを作成します。
touch sample.js
vi sample.js
以下の内容を書いてください。
import {ApiPromise, WsProvider } from '@polkadot/api';
import { Abi, ContractPromise } from '@polkadot/api-contract';
import { readFile } from 'fs/promises';
import * as path from 'path';
const wsProvider = new WsProvider('ws://localhost:9944');
const api = await ApiPromise.create({ provider: wsProvider });
const abiJson = JSON.parse(
await readFile(
new URL('./metadata.json', import.meta.url)
)
);
const abi = new Abi(abiJson, api.registry.getChainProperties());
const value = 0;
const gasLimit = -1;
const address = '確認したアドレス';
const contract = new ContractPromise(api, abi, address);
const { gasConsumed, result, output } = await contract.query.get('確認したアドレス',{ value, gasLimit });
// The actual result from RPC as `ContractExecResult`
console.log(result.toHuman());
// gas consumed
console.log(gasConsumed.toHuman());
// check if the call was successful
if (result.isOk) {
// should output 123 as per our initial set (output here is an i32)
console.log('Success', output.toHuman());
} else {
console.error('Error', result.asErr);
}
そして下記を実行するとFlipperの現在の値が取得できます。 node sample.js
以上になります。(今回はとても淡々とした内容でした。)
次は実際にフロント側に組み込んでいく予定です。 それでは。
