PWAと Vue.jsでNEMウォレットアプリを作ろう!ウォレット作成

どうも、shoheiです。

NEMウォレットアプリの完成を目指してPWAアプリの作り方を連載していきます。

前回はVue.jsにTypeScriptの導入方法を紹介しました。

今回はNEMの残高確認、送金ができる簡単なウォレットの作り方を紹介します。

完成図はこんな感じです。
Webを開くとウォレットアカウントが作成され残高、送金アドレス、QRコード、送金フォームがあり、NEMを送金できるWebアプリです。
nem wallet

開発環境

  • macOS High Sierra 10.13.4
  • Google Chrome
  • vue-pwa-boilerplate 2.1.0
  • Vue.js
  • TypeScript

ライブラリをインストール

ウォレットで使う外部ライブラリをインストールします。

各ライブラリの概要は以下の通りです。

ライブラリ名 概要 用途
nem-sdk NEM APIのライブラリ アカウント作成、残高取得、送金など
localforage Webのローカルストレージ アカウントの保存時
vuetify マテリアルデザインUI アプリ全体のUI
vue2-toast AndroidのToastのようなUI メッセージ表示
vue-qriously QRコード表示 ウォレット情報のQRコード表示
vue-qrcode-reader QRコードリーダー ウォレット情報の読み取り(※今回は使わない)
encoding-japanese 日本語のエンコーディング  QRコード用のJSON生成時

ライブラリの設定

インストールしたライブラリを使用できるよう設定していきます。

設定

Vue上でライブラリが使用できるようVue.useで設定します。

src/main.ts

index.html

モジュール宣言

TypeScriptにした場合、importするライブラリをモジュール宣言しなければ使用できないため以下のコードを追加します。

src/index.d.ts

build設定

このままビルドすると、nem-sdkが使用するfs, net, tlsのライブラリが無いよと怒られるので(実際はES6で使われているはず)、webpackを触ります。
node項目を追加し、それぞれのライブラリに’empty’を設定します。

build/webpack.base.conf

全て設定ができたら一旦ビルドしてエラーがでないことを確認しましょう。

実装

モジュール・モデル

nem-sdk

nem-sdkを使用するWrapperクラスを作成し、ウォレット機能に必要な処理を実装します。
Wrapper(ラッパー)とは代わりに呼んでくれるクラスのことを示します。

src/ts/nemWrapper.ts

※モザイクの実装が入っていますが今回は使いません。

ウォレットアカウントのモデル作成

ウォレットアカウントのモデルを作成します。
必要なデータの保持やそれらのデータに関連するビジネスロジックを持つのがモデルです。

ここでは送金アドレスや秘密鍵などの情報の保持、ローカルストレージへの保存やnemWrapperを用いた残高取得や送金などの処理をここで実装します。

src/ts/walletModel.ts

ウォレットアカウントの保存先

ウォレットアカウントの保存はlocalForageを用いてブラウザのローカルストレージ上に保存しています。

Chrome -> 右クリック -> 検証 -> Application -> Storageより、
Local Storage、Session Storage, IndexDBと3種類のストレージがあり、今回はIndexDBへ保存しています。

以下のように、実際に保存されているか確認できます。
nem wallet

ウォレット画面作成

ウォレットの画面を作成します。
ここではUIライブラリのVuetifyを使用して画面を作っていきます。

walletを作成

src/components/wallet.vue

wallet生成と同時にwalletModelクラスを生成します。
walletModelクラスにはbalance, address等を保持していますので、表示に必要な情報を {{ }} を用いてHTML上に実装します。

QRコードは qriously のタグを用いて表示し、中身のデータはv-model=”qrJson”で設定しています。
qrJsonの中身は @Component 内で設定します、なお export default class 内では設定できませんでした。。。
@Component のwatchを使ってwallet.addressの値を監視します。wallet.addressの値が変わるとqrJsonの内容を設定するようにしています。

送金時はエラーチェックをし、送金先アドレスと数量とメッセージに誤りが無いか確認します。
誤りがあるとエラー文を画面上に表示するようにしています。

エラーチェックで問題なければ送金します。
送金後、NEMサーバー(NIS)からの返答が返ってくるのでその内容をToastを用いて表示します。送金に問題なければ result.message に’SUCCESS’が書かれています。

App.vue

先ほど作成したwallet.vueをApp.vue上に表示します。

src/App.vue

これで完了です。

npm run devでlocalhost上で動作していることを確認してください。
特に問題なければ npm run build でビルドしてGithubにプッシュして完成です!

Github pagesでちゃんと動くかどうか確認してみてください。

終わりに

いかがでしたでしょうか。

今回でNEMウォレットのベースができました。
ここからモザイク送金機能や履歴情報機能を追加などカスタマイズしていけば良いと思います。

要点だけ解説していますので、具体的な内容はコメントアウトやコードを見ていただければと思います。

それでは!
Github

Cの絵本 第2版 C言語が好きになる新しい9つの扉

新品価格
¥1,490から
(2017/7/29 21:38時点)

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*

Translate »