Help us understand the problem. What is going on with this article?

"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/

golang
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away