【Part2】着金を通知するポップアップを作る

プログラミングチャレンジ
2022.01.02
この記事は約6分で読めます。

NEMTUSハッカソンに向けて

プログラム超初心者達が

Symbolを取り入れた簡単なゲームを開発するお話。

『～Challenge SymbolEnjoneer～』

一緒に見ていきましょう！Let’s Enjoy！

part.2

こんにちは！サカショウです🐶

前回パートでは、～ウォレット新規作成、XYM送金、内容確認(入金確認)～までを、Googleのコンソール画面で実行する事が出来ました。
今回も、📚nem_takanobuさんの記事を参考に進めていきます。

Symbol from NEM のテストネットで着金を検知する（2021年4月時点） - Qiita
前回、Symbol from NEM のテストネットで送金を体験する（2021年3月時点）にて、Symbol from NEM ブロックチェーンを使ってブラウザコンソールだけで送金を体験してみました…
qiita.com

📚nem_takanobuさんの記事は、どれも大変参考になる記事ばかりなので、必見ですよ！！

@nem_takanobuのマイページ - Qiita
Symbolはいいぞ did:symbol:NCESRRSDSXQW7LTYWMHZOCXAESNNBNNVXHPB6WY
qiita.com

このような着金を通知するポップアップを作ります。
ちょっとカッコイイですね！！🐶

それでは、僕と一緒に進めていきましょう！

※本連載記事に記載の内容は、テストネットのみの利用にとどめてください。
そのままメインネットに使用する事は、できません。
秘密鍵が公開されてしまいますので、絶対にメインネットで使用しないと約束してください。

【今回パートに必要なもの】

  • PC(サカショウの環境は、Windows10)
  • インターネット環境
  • Symbol Desktop Wallet V1.0.9(テストネット)
  • テストネットアカウント×１
  • ブラウザ(Google chrome)(サカショウは、BraveのGoogleブラウザ)

（）内は、サカショウの環境です。異なる環境の場合、異なる挙動を取る可能性があります。

【使用するツールとライブラリ】

【サカショウが実行したコードは、以下になります】

※21年11月現在、Googleトップページでコンソールの使用ができませんので、下記URLのNode_infoを開いてF12キーを押し、１グループごとにGoogleコンソールへコピーして貼り付けて、実行してください。

🐶サカショウは、Opening Lineさんのnode/infoを使用しました
https://sym-test-07.opening-line.jp:3001/node/info

↓ここからConsoleへコピペ＆実行

NODE = window.origin;
GENERATION_HASH = '7FCCD304802016BEBBCD342A332F91FF1F3BB5E902988B352697BE245F48E836';
EPOCH_ADJUSTMENT = 1637848847;

(script = document.createElement('script')).src = 'https://xembook.github.io/nem2-browserify/symbol-sdk-1.0.0.js';document.getElementsByTagName('head')[0].appendChild(script);
nem = require("/node_modules/symbol-sdk");

(※1) 00000000……の羅列 を送金元アカウントの秘密鍵に変更してください。

// アカウント呼び出し
// (※1)00000000...をウォレットの秘密鍵に変更する。
alice = nem.Account.createFromPrivateKey(
'0000000000000000000000000000000000000000000000000000000000000000',
nem.NetworkType.TEST_NET
);
// Websocket接続
nsHttp = new nem.NamespaceHttp(NODE);
wsEndpoint = NODE.replace('http', 'ws') + "/ws";
listener = new nem.Listener(wsEndpoint,nsHttp,WebSocket);
listener.open().then(() => {
listener.newBlock();
});

(※2)　”トランザクション承認を受信しました” を変更すると通知画面のテキストが変更できます。
(※3)入金先ウォレットのアドレスに変換してください。

// 受信トリガー作成
// (※2)"トランザクション承認を受信しました"を変更すると通知画面のテキスト変更。
listener.confirmed(alice.address)
.subscribe(tx => {
alert("トランザクション承認を受信しました")
// (※3)aaaaa...を、先ほど入力した秘密鍵を持つウォレットのアドレスに変換
console.log("https://testnet.symbol.fyi/accounts/" +
alice.address.plain('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'));
console.log("https://testnet.symbol.fyi/transactions/" +
tx.transactionInfo.hash);
});

フォーセットを使って上記に記載したウォレット宛にCLAIM!してみましょう！(alice.address.plain() で指定しているので特に変更しなくて大丈夫です。)
コンソールから返答されたURLにアクセスしてCLIMしてください。

// フォーセット（テスト入金　Alice１XYM）
"https://testnet.symbol.tools/?recipient=" + alice.address.plain() +"&amount=1"

コンソール画面に戻って着金を待ちましょう☆（20秒くらい？）
着金を通知するポップアップは、表示できましたか？？
本当に着金しているのか、Symbolexplorerで確認してみましょう！

// アカウント情報をSymbolexplorerで確認。URLアクセス
"https://testnet.symbol.fyi/accounts/" + alice.address.plain()

終わりに…

うまくいきましたか？？
一度失敗しても自分なりに問題を探して、解決する事もとてもいい勉強になります。
それでもダメなときは、GropNEMber Slack内のSymbol Enjoneerチャンネルでご相談ください！✨

入会のご案内
NPO法人NEM技術普及推進会NEMTUSでは、ともにNEM普及・発展のために活動する仲間を随時募集しています。また、皆様からの賛助や寄付によって、力強く活動を継続していくことができます。NEMTUSの活動にご賛同いただける皆様のご入会を心
nemtus.com

次週からは、いよいよ！！ブラウザで実行できるゲームを作っていきたいと思います！
このようにアクションごとに、Symbolを実装して動かしたいと思います。
お楽しみに☺
おっと、その前に環境構築もしなくちゃですね！

最後までお読み頂きありがとうございました！🐶✨
それでは、また次週！！！

タイトルとURLをコピーしました