#作るもの
https://nem-mosaic.firebaseapp.com/
NEMのネームスペース名からモザイクを検索する簡単なアプリを作り、無料のホスティングサービスを使って、デプロイするまでの手順を示します。
- 言語：TypeScript (JavaScript)
- フレームワーク:Angluar
- ライブラリー: NEM Library
NEMとは
NEMはブロックチェーンプラットフォームの一種です。オリジナルトークンを発行する機能があります。それがネームスペースとモザイクです。NEMの通貨はXEM(ゼム)として流通していますが、これもその関係にあってnemがネームスペース、そのモザイクがxemです。
##Angular & TypeScript
Angularは、JavaScriptで記述され、インターネットブラウザーで動作するアプリケーションフレームワークの1種です。なのでもちろんJavaScriptで開発できるのですが、
- AngularもNEM LibraryもTypeScriptによって作られていること。
- ほとんど全てのドキュメントがTypeScriptの使用を前提にしていること。
といった理由からTypeScriptというJavaScriptを拡張した言語を使用するのが一般的です。
##NEM Library
公式サイトによれば、
"NEM Library is an abstraction for NEM Blockchain using a Reactive approach for creating Blockchain applications."
とあり
Nem Libraryは、ブロックチェーンアプリケーション用の、Reactiveのアプローチを用いたNEMブロックチェーンを簡単に使えるようにしたものらしいです。
つい先日 [安定バージョンの1.0.0] (https://nemlibrary.com/#stable-version-100) が発表されました。
NEM Libraryのページ下に表示されるロゴマークのうち、まるで囲んだのものが登場します!!
#インストール
Angularでアプリを開発する際には、アプリの雛形を自動生成してくれる、Angular CLIというツールを利用すると便利です。早速、Angular CLIを導入して、NEMアプリ開発の準備を整えましょう!
##Node.jsをインストールする
Node.js(https://nodejs.org/ja/) はAngularアプリの開発に必要なJavaScript実行環境です。公式サイトの指示にしたがってインストールしてください。
##Angular CLI
次に、Angular CLIを導入します。ターミナルを開きnpmコマンドによって、グローバルにAngular CLIをインストールします。
npm install -g @angular/cli
アプリの雛形を作ります。名前はなんでもいいのですが、ここではnem-app
にします。
ng new nem-app
少し待つと、以下のようなフォルダが生成されているはずです。
##NEM Libarayの追加
node_modulesににNEM Libraryを追加します。先ほど生成したアプリルートの直下に移動し、Nem Libraryをインストールします。
cd nem-app
npm install nem-library rxjs --save
node_modules内に新しくnem-libraryが追加されているはずです。NEM LibraryはJavaScriptの拡張言語のTypeScriptで書かれており、TypeScriptの最新版がインストールされている必要があります。-g をつけてグローバルにTypeScriptをインストールしましょう。
npm install -g typescript
ここまでで、一旦実行してみましょう。
ng serve --open
ブラウザーが自動的に開かれ、このような画面が表示されるはずです。
これをスタート地点にして、どんどん開発を進めて行きましょう。
開発編へ続く~~~~~~~~~
#参考
山田 祥寛 著 「Angular アプリケーションプログラミング」
https://dev.classmethod.jp/ria/angular-js/angular-cli-list/