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

4312 ワード
仮想通貨 Angular nemlibrary NEM Blockchain Angular テキストリンク

作るもの

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

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/