レッスン６：未知なる領域を開拓せよ⑦

スマートコントラクト上のデータの変更をするための処理のやり方について、Metamaskを使ってWeb3.jsで関数を呼び出すやり方について、を学ぶチャプターとなります。
ちんぷんかんぷんなりにもやってみると少し理解できると思います。多少の理解でもいずれ紐つく日がきますので頑張っていきましょう！！

CryptoZombies | イーサリアムでのゲーム開発を学ぶ

それでは開演します！！！

チャプター７：トランザクションの表示


ほうほう、、このトランザクションがブロックに含まれるのを待つ時間がかかるため、非同期性を処理するためのロジックが必要となるという事ですな。たしかに平均１５秒ということであれば、人間が待つ感覚を覚える長さなので、待たせるよりも別の待たない方法をとれた方が良いですからね、、
前回のチャプターではpromiseという言葉が非同期性という意味をもった処理でしたね。

Metamaskを使ってWeb3.jsでこの関数を呼び出す例を見てみると、、

先の例でも伝えた通り、ブロックチェーンに新しいゾンビを作成するには時間がかかるため、トランザクションがちゃんと送信されている事を知らせる文章を表示させる、以下

“Creating new zombie on the blockchain. This may take a while…”

returnから始まるコードがトランザクションをコントラクトに送信する、、という事なので、ここでは

“Successfully created ” + name + “!”というテキストを表示させているので、nameを作成しました！という意味ですね。ここでのnameはゾンビにつけた名前ですな。

その後の処理は、getZombiesByOwnerにuserAccountを渡してdisplayZombiesを更新させると。

トランザクションが失敗した場合は、”error”を表示させる、、という事ですな。

receiptとerrorの説明は上記でしてくれていますね。
ガスプライスに関しては、値を指定しない限りはMetamaskがユーザーに数値を選ばせる、という形になるのですな。

それではテストだ！！

この上記の<div id=”txStatus”></div>部分が冒頭で説明のある、ゾンビちゃんが追加してくれた部分ですね。ここの部分さらってやってますが、この表記をしないと、下記のコードを書いたところでしっかりと反映されない事になると思うので、忘れてはいけない記述になります。。

１では、上記のcreateRandomZombieからコードをコピペせよ、との事なので、Metamaskを使ってWeb3.jsで関数を呼び出す方法の方なので、

function createRandomZombie(name) {
// しばらく時間がかかるので、UIを更新してユーザーに
// トランザクションが送信されたことを知らせる
$(“#txStatus”).text(“Creating new zombie on the blockchain. This may take a while…”);
// トランザクションをコントラクトに送信する:
return CryptoZombies.methods.createRandomZombie(name)
.send({ from: userAccount })
.on(“receipt”, function(receipt) {
$(“#txStatus”).text(“Successfully created “ + name + “!”);
// トランザクションがブロックチェーンに取り込まれた。UIをアップデートしよう
getZombiesByOwner(userAccount).then(displayZombies);
})
.on(“error”, function(error) {
// トランザクションが失敗したことをユーザーに通知するために何かを行う
$(“#txStatus”).text(error);
});
}

コピーするとこのようになります。緑の枠はコメントなので省略可です。

２では、feedOnKitty関数を実装しようとの事で、形式は１とほぼ同じなのでここもコピペしてから、、変更点を教えてくれるので変更していきましょう。

a)では、関数呼び出しの際にzombieIdとkittyIdの二つの引数を受け取るとあるので、

function feedOnKitty(zombieId, kittyId) {}

となります。

b)では、#txStatusを変更しなくてはならないので、、

$(“#txStatus”).text(“Eating a kitty. This may take a while…“);

となります。

c)では、feedOnKittyを呼び出し同じ引数を渡せとのことなので、

return CryptoZombies.methods.feedOnKitty(zombieId, kittyId)
.send({ from: userAccount })
.on(“receipt”, function(receipt) {

となりますね。

d)では、#txStatusの成功メッセージを変更するので、、

$(“#txStatus”).text(“Ate a kitty and spawned a new Zombie!“);

変更点はこの四箇所になるので、その後のUIアップデートのコードを書くのも忘れないように！

まとめると、、、

function createRandomZombie(name) {
$(“#txStatus”).text(“Creating new zombie on the blockchain. This may take a while…”);
return CryptoZombies.methods.createRandomZombie(name)
.send({ from: userAccount })
.on(“receipt”, function(receipt) {
$(“#txStatus”).text(“Successfully created “ + name + “!”);
getZombiesByOwner(userAccount).then(displayZombies);
})
.on(“error”, function(error) {
$(“#txStatus”).text(error);
});
}

function feedOnKitty(zombieId,kittyId) {
$(“#txStatus”).text(“Eating a kitty. This may take a while…”);
return CryptoZombies.methods.feedOnKitty(zombieId, kittyId)
.send({ from: userAccount })
.on(“receipt”, function(receipt) {
$(“#txStatus”).text(“Ate a kitty and spawned a new Zombie!“);
getZombiesByOwner(userAccount).then(displayZombies);
})
.on(“error”, function(error) {
$(“#txStatus”).text(error);
});
}