【Part4】XYM送金ボタン設置

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

NEMTUSハッカソンに向けて

プログラム超初心者達が

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

『～Challenge SymbolEnjoneer～』

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

part.4

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

前回パートでは、VScodeをダウンロードしていよいよ開発を行う環境が整ってきました！
今回は、ボタンを設置して、そのボタンを押すとXYM送金ポップアップが現れ、 さらにクリックすると指定ウォレットに送金されるページを作ります。

こんな感じです！

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

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

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

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

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

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

【サカモトが参考にしたところ】

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

【テストネットウォレット作成 ～XYM送金をしてみよう！】

まずは、デスクトップにフォルダー作成！
デスクトップで右クリック～新規作成～フォルダーで作成してください。
フォルダー名は、【XYM送金ボタン開発】とします。

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

  • 0000000…の羅列記載箇を、送金するアカウントの秘密錠に変更する。
  • aaaaaaa…の羅列記載の箇所を、XYMを受け取るアカウントのアドレスに変更する。

↓ここからVSCodeのエディター画面へコピペ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

<title>NEMTUS Hackathon XYM送金ボタン</title>
</head>
<body>
<p>ボタンをクリックすると、トランザクションが実行されます！</p>
<script src="https://xembook.github.io/nem2-browserify/symbol-sdk-1.0.1.js"></script>
<input type="button"value="button" id="btn">

<script>
 NODE = 'https://sym-test-07.opening-line.jp:3001';
 GENERATION_HASH = "7FCCD304802016BEBBCD342A332F91FF1F3BB5E902988B352697BE245F48E836";
 EPOCH_ADJUSTMENT = 1637848847;

 nem = require("/node_modules/symbol-sdk");
//払い出し設定
//XYMを送金するアカウントの秘密錠に変更する。（0000000...の羅列記載箇）
function butotnClick(){
    alert('発射ああああああああ！');
      alice = nem.Account.createFromPrivateKey(
                 '000000000000000000000000000000000000000000000000000000',
      nem.NetworkType.TEST_NET);
      console.log(alice);
     //XYMを受け取るアカウントのアドレスに変更する。（aaaaaaa...の羅列記載の箇所）
      tx = nem.TransferTransaction.create(
          nem.Deadline.create(EPOCH_ADJUSTMENT),
          nem.Address.createFromRawAddress("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
          [new nem.Mosaic(new nem.MosaicId('3A8416DB2D53B6C8'), nem.UInt64.fromUint(10000000))],
          nem.PlainMessage.create('XYM送金ボタン作成　Congratulation!'),
          nem.NetworkType.TEST_NET,
          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 button = document.getElementById('btn');
button.addEventListener('click', butotnClick);
</script>

</body>
</html>

(１)左端のファイルアイコンをクリック。（黄色枠）
(２)開いているエディターの上で右クリック、保存。
ファイル名を【NEMTUS Hackathon 送金ボタン.html】として Djanghtmlファイルを【XYM送金ボタン開発】に保存する。（赤枠）

【CSSファイル作成】

(１)左上のファイル(F)をクリックして、新規ファイルを開いてください。

(２)このファイルにcssを書いていきます。WEBページのデザイン的なファイルになります。

ｐ要素のフォントサイズを変更してみましょう。

p {
font-size:200%; 
}

(３)htmlファイルを保存した時のように今回は、【NEMTUS Hackathon 送金ボタン.css】として【XYM送金ボタン開発】に保存します。

【htmlファイルとcssファイルを組み合わせる！】

(１)NEMTUS Hackathon 送金ボタン.htmlのエディター画面で、以下のコードを、<head></head>の間にコピペで挿入する。
これが、htmlとcssのリンクコードになります。

<link rel="stylesheet" href="NEMTUS Hackathon 送金ボタン.css"><br />

【エクスプローラーで表示してみましょう！】

(１)左端の開いているエディターか、フォルダーの中にある、htmlファイルの上で右クリックをして、エクスプローラーで表示するをクリック。新しいウィンドウを開いて実行します。

(２)ブラウザに表示されましたか？こちらが入力したコードを表現した結果です。
ブラウザ画面でF12を押して中を見てみましょう！

(３)bottonをクリックしてポップアップが表示されますか？
ポップアップのOKボタンをクリックして、トランザクションを送信しみましょう！

(４)Symbolテストネットウォレットを開いておくと、チャキーン！！音も聞けるので、Tx確認するついでにもう一度やってみてください🐶

【終わりに…】

いかがでしたか？問題なく実行できましたか？
cssを自分なりにアレンジを加えていく事から始めてみましょう！！css書き方などで検索！
ここまで来れば、立派なSymbolエンジョニア💻✨ですね！☆知らんけど…（笑）
大きな第一歩を踏み出しましたよ～！それは、間違いありません！！

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

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

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