Angularとnem-libraryでNEMアプリを作るとはやいですよ

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

Yu Kimuraです。

LCNEM Walletプレビュー版公開中です。

LCNEM Wallet

TypeScript未経験だったのですが、Angularとnem-libraryのおかげで、一週間で原型を作ることができました。

めちゃくちゃ便利なので、手順と注意点を解説します。

Angularはシングルページアプリケーションを作れるフレームワークで、ブラウザで開くアプリでありながらネイティブアプリのような画面遷移を実現できます。Google主導で開発されています。

nem-libraryは、TypeScriptでつくられたNEM NIS APIのライブラリです。

TypeScriptは、JavaScriptにトランスパイルすることでブラウザで動くようになります。Microsoft主導で開発されています。

手順

Node.jsのインストール

Node.js

インストールしましょう。npmコマンドを使うためです。

Angular CLIのインストール

npmが使えるようになったら、コマンドラインに以下を打ちましょう。

npm install -g @angular/cli

-gと入れることにより、ひとつのプロジェクトでなくグローバルに使えるようになるので入れてください。

プロジェクトを作成

プロジェクトを保存したいディレクトリで、コマンドラインに以下を入力してください。

ng new [プロジェクト名] --routing

–routingといれることにより、ブラウザのアドレスバーに表示されるURLの変化に従って疑似的にページ遷移を実現できます。シングルページアプリケーションの真価を発揮できるということです、入れてください。

Angular Materialをインストール

以下参考に進めてください。

Angular Materialのインストールから使い始めまで

Angular Materialを使うことによって、Angularで作るアプリケーションをAndroidのMaterialデザイン風にできます。

必須ではないですが、今風のアプリにするには最も速いと個人的に思っております。

使い方はここみてください。

Angular Material

PWAにする(任意)

PWAとは、Progressive Web Applicationのことです。PWAにすることにより、ホーム画面に追加したりできるようになります。

以下参考に進めてください。

AngularアプリをPWAにする方法

nem-libraryのインストール

コマンドラインに以下を打ちましょう。

npm install nem-library rxjs --save

nem-libraryは全機能を網羅しているだけでなく、ウォレットの管理等の機能まで提供してくれます。最強です。

手順はここまでで終わりです。あとはひたすらプログラム書くだけです。

LCNEM Walletも、Angularとnem-libraryを使って作られています。

見た目、まるでAndroidネイティブアプリでしょう?でも、ブラウザで動くので、iOSのsafariからでも使えます。わざわざkotlinでAndroid用を、swiftでiOS用を、なんてする必要がないんですね。

注意点いきます。

注意点

httpsノード

PWAにするには、https化が必須です。しかしながら、nem-libraryをhttpsで使うとき、”nis2.wnsl.biz”というノードにnem-libraryが勝手につないでくれるのですが、このノード、むちゃくちゃ応答遅いです

しかも一つのノードに依存するとこのノードが停止した時に使えなくなり、単一障害点がないというp2pのメリットが全く活かせません。対策として、ほかのhttpsノードを使いましょう。

httpsノードを建ててくださっている方がいます。

nodes.txt

ありがたく使いましょう。

ノードを指定する方法はここに書いてます。

Warning

nem-library使ってるとこの手の警告が消えません。無視しましょう。

mat-toolbarの影

mat-toolbarはそのままでは影がついておらず、のっぺりした印象になります。影をつけましょう。

Googleのマテリアルデザインのガイドラインがあります。

Material Design – Elevation & shadows

toolbarはelevationを4にするのがよさげですね。

mat-toolbarに、mat-elevation-z4をつけましょう。

おわり

LCNEM Wallet開発はhttpsノードの問題で結構苦戦しました。参考にしてください。

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

SNSでもご購読できます。