【NEM開発入門】nem2-sdkを利用してウォレットを作成する

nem-libraryの利用方法はだいたい分かった!でももうすぐNEMってカタパルトと呼ばれる大型アップデートが実装されるのでは・・。

まつしん

その通り!!特別にカタパルトに対応されたnem2-sdkライブラリを使ったコードも見せてあげよう!

 

前回はnem-libraryを用いて着金を監視するサンプルコードを書きました。
 
ですが、まだ正確な時期は未定なようですがNEMに対してCatapult(カタパルト)と呼ばれる大型アップデートが控えています。

 

 

そうするとnem-libraryやNEM-SDK等の既存のNEMを操作するライブラリが使えなくなる可能性が高いです。

そこで今回Catapultが実装後にも利用できるライブラリ(nem2-sdk) でコードを書いてみました!

 今回も前回同様Vue.jsTypeScriptを用いて実装しています。

nem2-sdkとは

Rome 2353383 640

 

NEMの次期バージョンであるNEM2(Catapult)の機能をJavaScriptで利用するためのライブラリになります。

 

NEMをJavascriptで操作するライブラリとしては「nem-library」や「nem-sdk」「nem-api」などいくつかありますが、名前的には「nem2-sdk」は「nem-sdk」の次期バージョンのようですが実際はnem-library」の後継のような感じです。

実際今回コードを書くと、扱い方が似ていることが良くわかりました。 

Catapultについて

NEMの次期バージョンになります。nem2とも呼ばれたりします。

主な機能追加としては「処理速度の向上」「アグリゲートトランザクション」「マルチレベル・マルチシグ」ですが、他にも色々あります。

詳しく知りたい方はこちらの記事を読むととても勉強になるでしょう。

 

nem2-sdk利用の実装ポイント

サンプルコードの機能としてはウォレット作成アカウント情報の取得XEMの送金の3つになります。

今回実装したコードはこちら

それぞれサンプルコードの該当の箇所の一部を抜粋して見ました。全てVuexStoreファイルのメソッドにしているためcommitメソッドが書かれていたりします。

補足

NEMの次期バージョンのNEM2は前述にある通りまだリリースされていません。

なので、サンプルアプリではNEM2を操作するAPIで有志でテスト用に用意されたノードにアクセスしています。 

また今回はplanet★箒星さんのノードにアクセスして使わせて頂いています。

ウォレット作成

ウォレット作成のコードです。

ここではウォレットを作成した後にウォレット情報(アドレス・秘密鍵)を localForageを用いてローカル(ブラウザのIndexedDB)に保管しています。

なのでウォレットの作成の実質のコードは「SimpleWallet.create」メソッドのみになります。

XEMの残高取得

XEMの残高取得のコードです。

ポイントは「mosaicsAmountViewFromAddress」メソッドを使っている箇所でしょうか。

このメソッドを使うと全てのモザイクを取得できるのですが「filter」を行うことでXEMのみデータを取得するように絞っています。


XEMを送金する

送金のコードです。

nem-libraryと比較すると少し処理が増えています。送金トランザクションを作成、署名してから送金の実行をしています。

その後トランザクションの結果がどうなったか再度APIを呼ぶことで確認しています。サンプルコードでは、送金後すぐトランザクションの結果が取得できなかったため1秒後に取得するようにしてみました。

【NEM開発入門】NEM Libraryを利用して送金する

2018.07.26

 

サンプルコードを動作させてみる

開発環境 

  • Mac OS High Sierra v10.13.6
  • node v10.11.0
  • yarn v1.9.4
  • vue v2.5.16
  • typescript v3.0.1
  • nem2-sdk v0.10.1

github.ioで動作確認

github.ioにて動かせるようにしているので、まずはこちらにアクセス。

アドレスが表示されればOK。初回アクセス時にウォレットを作成し、新しくアドレス、秘密鍵が発行してローカルにウォレット情報を保管しています。2回目のアクセスなら保管された情報を取得してアドレスを表示。

NEM2 SDK Wallet Vue Sample

 

URLの右端をクリックして、「安全でないスクリプトを読み込む」をクリック。

※セキュリティ的に安全ではないことをするので、今回は特別にします。

NEM2 SDK Wallet Vue Sample

 

テスト用のXEMを入手するためNEM2 faucetにアクセス。

Address」、「Message(任意)」、「Amount」を入力して送金を実行!

NEM2 Faucet

 

しばらく時間が経った後、ウォレット側をリロードして残高が確認できればOK!

NEM2 SDK Wallet Vue Sample

 

送金フォームに「送信先アドレス」、「送金量」、「メッセージ(任意)」を入力。

NEM2 SDK Wallet Vue Sample

 

送金結果に成功と表示されればOK!

NEM2 SDK Wallet Vue Sample

 

しばらくしてリロードすると残高が減っているのが確認できるはずです。

NEM2 SDK Wallet Vue Sample 

 

動作としては以上になります。

まとめ

Martin reisch 1093379 unsplash

今回初めてnem2-sdkライブラリを使って実装してみました。nem-libraryで実装するのと多少差異はありますがやはりあまり変わらないように感じました。

次はアグリゲートトランザクションのようなCatapultならではの実装にも挑戦してみたい。

 

参考記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です