Edited at

"Nemloy or Die." ~初めてのNEMアプリをデプロイしよう!~ 1.導入編

More than 1 year has passed since last update.


作るもの

https://nem-mosaic.firebaseapp.com/

NEMのネームスペース名からモザイクを検索する簡単なアプリを作り、無料のホスティングサービスを使って、デプロイするまでの手順を示します。


  • 言語:TypeScript (JavaScript)

  • フレームワーク:Angluar

  • ライブラリー: NEM Library


NEMとは

image.png

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 が発表されました。

NEM Libraryのページ下に表示されるロゴマークのうち、まるで囲んだのものが登場します!!

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3139313138312f31366539656239352d633166622d346334322d623732632d6235316333346632366562312e706e67.png


インストール

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

少し待つと、以下のようなフォルダが生成されているはずです。

スクリーンショット 2018-03-20 8.15.16.png


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

ブラウザーが自動的に開かれ、このような画面が表示されるはずです。

image.png

これをスタート地点にして、どんどん開発を進めて行きましょう。

開発編へ続く~~~~~~~~~


参考

山田 祥寛 著 「Angular アプリケーションプログラミング」

https://dev.classmethod.jp/ria/angular-js/angular-cli-list/