NEMTUSハッカソンに向けて
プログラム超初心者達が
Symbolを取り入れた簡単なゲームを開発するお話。
『～Challenge SymbolEnjoneer～』
一緒に見ていきましょう！Let’s Enjoy！
part.5
こんにちわ！サカショウです🐶
前回パートでは、VScodeを使って、XYM送金ボタンを作成しました！
今回は、HTMLのテキストボックスを設置して、そこに入力されたSymbolアドレスの値を取得し、さらに、nem.Address.createFromRawAddress()に代入します。
テキストボックスにSymbolアドレスを入力してEnterを押すと、前回作成したポップアップが表示され、プログラムで指定している秘密鍵に紐付いたアドレスから、XYMが送金されます。
それでは、僕と一緒に進めていきましょう。
※本連載記事に記載の内容は、テストネットのみの利用にとどめてください。 そのままメインネットに使用する事は、できません。 秘密鍵が公開されてしまいますので、絶対にメインネットで使用しないと約束してください。
【今回パートに必要なもの】
- PC(サカショウの環境は、Windows10)
- インターネット環境
- Symbol Desktop Wallet V1.0.9(テストネット)
- テストネットアカウント×２
- ブラウザ(Google chrome)(サカショウは、BraveのGoogleブラウザ）
- VSCode
- Part４のコード群
（）内は、サカショウの環境です。異なる環境の場合、異なる挙動を取る可能性があります。
【使用するツールとライブラリ】
- xembook / nem2-browserify / symbol-sdk-1.0.1.js
- FAUCET
- エクスプローラー
【VSCodeを開いて複製しよう！】
VSCodeで新規フォルダーを作成し、 前回作成のXYM送金ボタン設置のコードを全てコピペして、複製してください。
サカショウも頻繁にやってしまうのですが、あーだこーだとコードをいじっていると、訳わからん事になってしまいがちです…
なので、必ず複製して作業をするように意識しています！
今回追加するコード達をご紹介いたします！
ここだけを見て、自分なりに組み込んでいけるようになれば、格段に出来る事が増えると思います。前回パートで作成したファイルを開き、コード群に当てはめてみましょう✨
必ず一度は、挑戦してコードを解読してみましょう！
// 1
<label>Input your SymbolAddress：<input type="text" id="nameText"></label>
</p>
<p>
<input type="button"value="button" id="btn">
</p>
// 2
function buttonClick(event){
nem.Address.createFromRawAddress(nameText.value),
// 3
let nameText = document.getElementById('nameText');
nameText.addEventListener('change', butotnClick);
以上のコードです🐶
ヒントとして、そのままコピペしていますので、キーワードを探して実装して行くのも、ありだと思います。
個人的な感覚としてプログラミングは、トライ＆エラーの繰り返しです。何回もイライラします…www
やりたくねーって思う事もあるかも知れないです…
しかし、それを乗り越えられた時には、かなりの達成感を得られますし、その知識と経験が、自分の財産になり得ます！
偉そうな事を言っていますが、私自身まだまだ初心者中の初心者です😂笑
手に職をつけるという事は、どんな仕事でも、労力や精神力、そして学びの時間等が不可欠であり、 一朝一夕には、どうにもならないという事ですね😂
【今回パートの全コード（答え）】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="NEMTUS Hackathon 送金ボタン.css"><br />
<title>NEMTUS Hackathon XYM送金ボタン</title>
</head>
<body>
<p>ボタンをクリックすると、トランザクションが実行されます！</p>
<p>
<label>Input your SymbolAddress：<input type="text" id="nameText"></label>
</p>
<p>
<input type="button"value="button" id="btn">
</p>
<script src="https://xembook.github.io/nem2-browserify/symbol-sdk-1.0.1.js"></script>
<script>
NODE = 'https://sym-test-07.opening-line.jp:3001';
GENERATION_HASH = '7FCCD304802016BEBBCD342A332F91FF1F3BB5E902988B352697BE245F48E836';
EPOCH_ADJUSTMENT = 1637848847;
nem = require("/node_modules/symbol-sdk");
nsHttp = new nem.NamespaceHttp(NODE);
wsEndpoint = NODE.replace('http', 'ws') + "/ws";
listener = new nem.Listener(wsEndpoint,nsHttp,WebSocket);
listener.open().then(() => {
listener.newBlock();
});
function butotnClick(event){
alert('発射ああああああああ！');
alice = nem.Account.createFromPrivateKey('000000000000000000000000000000000000000000000000000000000000000',
nem.NetworkType.TEST_NET);
console.log(alice);
tx = nem.TransferTransaction.create(
nem.Deadline.create(EPOCH_ADJUSTMENT),
nem.Address.createFromRawAddress(nameText.value),
[new nem.Mosaic(new nem.MosaicId('3A8416DB2D53B6C8'), nem.UInt64.fromUint(10000000))],
nem.PlainMessage.create('XYM送金ボタン作成 Gongrats!'),
152,
nem.UInt64.fromUint(100000)
);
console.log(tx);
signedTx = alice.sign(tx, GENERATION_HASH);
console.log(signedTx);
new nem.TransactionHttp(NODE)
.announce(signedTx)
.subscribe((x) => console.log(x), (err) => console.error(err));
}
let nameText = document.getElementById('nameText');
nameText.addEventListener('change', butotnClick);
let button = document.getElementById('btn');
button.addEventListener('click', butotnClick);
</script>
</body>
</html>
うまく動作しましたか？？
次回は、いよいよ スロットゲームとブロック崩しゲームをコピペで作ってみましょう✨
それでは、また来週！！🐶
