IBM Bluemix ハンズオン・セミナー

IBM Bluemix

ハンズオンの内容

0. 事前準備

1. Bluemixの基本操作

データベース・サービスを使用したアプリケーション実行環境の構築

2. クラウド上でのアプリケーション開発

IBM DevOps Servicesを使用した開発とデプロイ

3. Buildpack を使用した言語環境の拡張

オープン・コミュニティのBuildpackの活用

4. Internet of Thingsアプリケーションを作成する

センサーからのデータをプログラミングレスで利用

5. Node.js アプリケーションからSQL Database を利用する

サンプル･プログラムのデプロイと実行

IBM Bluemix

ハンズオン・セミナー事前準備

1. Bluemix利用登録

2. DevOps Service連携

1. IBM Bluemix 利用登録

 http://ibm.biz/bluemixfree にアクセス します。  ガイドに従ってサインアップします。 登録したアドレスに IBM Bluemixよりメールが 届きます。 メール本文内のリンクをクリックすることでア カウントの有効化が行われます。 必ずこのステップを実施し、Bluemixに ログ イン できることを事前に確認ください。

2. DevOps Servicesへの登録 (1)

 https://hub.jazz.net にアクセスします。 表示された画面で「Sign up for free」 をクリックします。

 「Log in to start using DevOps Services.」をクリックします。

2. DevOps Servicesへの登録 (2)

 Bluemixのサインアップ時に使用した IBM IDとパスワードを入力し、「サイン イン」をクリックします。  IBM IDの別名(エイリアス)を作成します。 任意の文字列を入力し、「Finish」を クリックします。  「Success!」が表示されれば完了です。

3. Cloud Foundry CLI 導入 (1)

 https://github.com/cloudfo undry/cli にアクセスします。  下にスクロールし、「Downloads」セク ションの「Stable Installers」から、環境 に合ったモジュールをダウンロードし、 導入します。 コマンドベースでBluemixを操作するために、Cloud FoundryのCLI （コマンドライン･インターフェース）を導入します。

3. Cloud Foundry CLI 導入 (2)

 cf コマンドが実行可能であることを確認します。

[ハンズオン1]

Bluemixの基本操作

データベース・サービスを

使用したアプリケーション

実行環境の構築

ハンズオン手順

 Bluemix へログイン

 アプリケーション実行環境の構築

 サービスの追加

Bluemix へログイン

まず初めに、Bluemix にログインします。 Webブラウザを起動し、Bluemix にアクセスします。下記URLを入力します。 http://bluemix.net/ 表示された画面右上の「ログイン」 をクリックします。 IBM ID、パスワードを入力して「サインイン」ボタンをクリックします。 ログインが成功すると Bluemix の Dashboardが表示されます

作業する地域を確認する

Bluemixは、「米国南部」と「英国」の2つの地域で稼動しています。 上部メニューの 「地域」 をクリックすることで、稼動する環境を選択することができます。  今回は「米国南部」を利用します。地域が「米国南部」になっていることを確認してくだ さい。  「英国」になっている場合は、「地域」をクリックして、「米国南部」を選択してください

[補足] 「米国南部」選択時のポップアップへの対応方法

米国南部を選択した際に、スペースを作成するように指示するポップアップ・ウィンドウが表 示された場合は、任意の名前を入力し、作成をクリックしてください。 本資料では スペース名として 「dev」を使用します

アプリケーション実行環境の構築 (1/3)

１．上部メニューの”カタログ”にて、作成するアプリケーションの実行環境を選択します。 ランタイム カテゴリから、Node.js による JavaScriptの実行環境を選択します。 2．アプリケーション名とホスト名を指定して“作成”ボタンをクリックします。 任意の名前を指定します。 重複しているとエラーに なるのでユニークな名称を 指定してください

アプリケーション実行環境の構築 (2/3)

3．上部メニューの”ダッシュボード”をクリックし、作成中のアプリケーションを選択します。 30秒ほどでインスタンスの作成および起動が完了します。 画面右端の “アプリの正常性” のステータスが赤色から緑色に変わり、 「アプリは稼動しています。」のメッセージが表示されたことを確認してください。 これだけの手順で Node.js の実行環境が構築できました。 “アプリの正常性” のステータスが変わらない場合は、 Web ブラウザのリロード (F5キー)をお試しください。

アプリケーション実行環境の構築 (3/3)

4．それではサンプルとして用意されたスターター・アプリケーションを実行してみましょう。 アプリケーションの “経路： “のリンクをクリックすると、作成された Node.js 上で JavaScript のスターター・アプリケーションが動いていることが確認できます。

サービスの追加 (1/2)

2．サービスを追加するアプリケーションを指定し、”作成”ボタンをクリックします。 (“アプリケーション”の選択” で先ほど作成したアプリ名を指定します。) SQL Database のサービス名や プランはデフォルトのままでOKです 1．上部メニューの “カタログ” をクリックし、カタログからアプリケーションと連携させたい サービスを選択します。 ここでは、先ほど作成した Node.js の実行環境に SQL Database(DB2) のサービスを追加してみましょう。

サービスの追加 (2/2)

3．アプリケーションの再起動(再ステージ)の確認があります。OKボタンをクリックします。 4．約20秒ほどでサービスの追加が完了します。 アプリケーションの “概要” 画面の下部に、SQL Database サービスが表示される ことを確認してください。 たったこれだけの手順で、アプリケーションからデータベースが 使用できるようになりました。 “アプリの正常性” のステータスが変わらない場合は、 Web ブラウザのリロード (F5キー)をお試しください。

アプリケーション実行環境の詳細 (1/4)

～リソースの動的追加 アプリケーションの “概要” の画面には、実行環境が使用するリソース情報が 表示されています。 ここで実行環境のリソース変更が可能です。 インスタンス : 3、メモリー : 384MB と指定して「保存」をクリックします。 再起動後、リソースが拡張されていることを確認してください。

アプリケーション実行環境の詳細 (2/4)

～リソースの動的追加 左端のメニューから ”SDK for Node.js” を選択します。 ページ上部で CPU やメモリーの使用率など、インスタンスの詳細情報が確認できます。 先程インスタンスを増やしたので、リストには3行が表示されています。 今度はリソースの縮退を行ってみましょう。 インスタンス : 1、メモリー : 64MB と指定して「保存」をクリックします。

左端のメニューから ”ファイルとログ” を選択します。 実行環境のファイルシステム上にあるアプリケーション・ファイルやログ・ファイルを 参照したりダウンロードしたりすることができます。 ※画面の切り替えがうまくいかない場合は、Web ブラウザのリロード (F5キー)をお試しください。

アプリケーション実行環境の詳細 (3/4)

～ファイル/ログの参照

アプリケーション実行環境の詳細 (4/4)

～環境変数の参照 ”SDK for Node.js” ページの下部にて、実行環境に設定されている環境変数の 情報が確認できます。（環境変数を新しく追加することも可能です） 連携に必要となる情報は、自動的に環境変数にセットされるので、アプリケーションは これらの環境変数の値を取得して、サービスにアクセスします。 SQLDatabase 接続の場合 IPアドレス, ポート番号, DB名, username, password などが 環境変数としてセットされます。

[ハンズオン2]

DevOps Services を

使ったクラウド上での

アプリケーション開発

IBM Bluemix DevOps Services概要

 IBM Bluemix DevOps Services (以下、IDS )は、パブリック・プロジェクトまたは プライベート・プロジェクトにおいて、他のメンバーとコラボレーションを取りながらソフト ウェアの開発が可能なクラウドベースのプラットフォームです。

 IDSには、アプリケーション開発に必要な以下の機能があります。 • アジャイルな計画立案と追跡 (TRACK & PLAN)

• Web IDE (Webブラウザ上でのソースコードの修正と管理) • Git, Jazz SCM, GitHubを使用したソースコード管理 (SCM) • Bluemixへの自動デプロイ (BUILD & DEPLOY)

ハンズオンの概要

 このハンズオンでは、WebIDE(*)を使用し、IBM Bluemix DevOps Servicesに 公開されているアプリケーションに独自の編集を加え、Bluemix に push して実行 環境を自動作成する手順を体験していただきます。 ※ WebIDE以外の機能をご紹介したdW記事について、参考資料1に記載しておりますので、ご参照ください。 公開 プロジェクト プロジェクトの_取り込み プロジェクトの 保管 プロジェクトのデプロイ アプリケーションの実行 修正 モジュールの 再デプロイ アプリケーション の再実行 Node.js 実行環境の 作成 / モジュールの 配置 / URL 生成 アプリケーション 修正

ハンズオン手順

 IDSに登録する

 IDS で公開されているプロジェクトを開く

 IBM Bluemix DevOps Services にログインする

 プロジェクトを保管する

 プロジェクトをデプロイする

 ソースコードを編集する

 編集結果を確認する

IDSに登録する (1)

 https://hub.jazz.net にアクセスします。 表示された画面で「Sign up for free」 をクリックします。

 「ログインして DevOps Services の使用を開始 してください。 」をクリック します。

IDSに登録する (2)

 Bluemixのサインアップ時に使用した IBM IDとパスワードを入力し、「サイン イン」をクリックします。  IBM IDの別名(エイリアス)を作成します。 任意の文字列を入力し、「Finish」を クリックします。  「正常に終了しました。」が表示されれば 完了です。

IDS で公開されているプロジェクトを開く

 IBM Bluemix DevOps Services 上の MemoApp1-Nodejs プロジェクトを開きます。 Webブラウザで http://ibm.biz/MemoApp にアクセスします。

xxxxxxxxxxxxxxxxx

IDS 上のNode.jsアプリケーション(*)のサンプル・プロジェクトが表示されます。 このコードを使って、IDS と Bluemix との連携を体験していただきます。

 画面上部の 「LOG IN」 をクリックします。

 IBM ID、パスワードを入力して「Sign in」ボタンをクリックします。

IBM Bluemix DevOps Services にログインする

ログイン済み（LOGIN ボタンが右上に表示さ れない）場合、このペ ージはスキップください。

 画面右上の「EDIT CODE」をクリックします。

 プロジェクトをコピー(フォーク)します。左上の「FORK」 ボタンをクリックします。

プロジェクトを保管する (2)

 任意のプロジェクト名を指定して「CREATE」ボタンをクリックします。 この例では MemoApp1-Nodejs という プロジェクト名を指定しています デプロイ先として -Region が US South、

-Organization に正しい IBM ID、 -Space に 作成したスペース名(dev) が指定されていることを確認し、 「CREATE」をクリックします。

Make it privateにチェックを入れ、 Add features for Scrum developmentのチェックを外し、

Make this a Bluemix Projectにチェック を入れます。

プロジェクトを保管する (3)

プロジェクトをデプロイする (1) manifest.yml作成

 Bluemixにデプロイするために、manifest.ymlファイル(*)が必要となります。  このプロジェクトには、manifest.ymlファイルが含まれていないため、新規作成しま す。  ファイル名は、「manifest.yml」と入力してください。 ※ manifest.ymlには、作成するアプリケーション・インスタンスの数、アプリケーションに割り振るメモリー 量とディスク割り当て量、アプリケーションのその他の環境変数などのオプションが指定されます。詳細

プロジェクトをデプロイする (2) manifest.yml作成

 manifest.ymlに以下のように記載し、保存します。

オプション 説明

name Bluemix 内のアプリケーション名。 この値は Bluemix 環境で固有でなければなりません。 disk_quota アプリケーションに割り振るディスク割り当て量。 デフォルト値は1G です。

memory アプリケーションに割り振るメモリー量。デフォルト値は 1G です。

host Bluemix 内のアプリケーションのホスト名。 Bluemix 環境で固有でなければなりません。 domain Bluemix 内のアプリケーションのドメイン・ネーム。 command アプリケーションのカスタム開始コマンド path アプリケーションのロケーション。この値は相対パスまたは絶対パスとすることができます。 host, nameが固有になるよう “MemoApp1-Nodejs”に、 ご自身のユーザーIDなどを 付加してください applications: - name: MemoApp1-Nodejs-shimac00 disk_quota: 1024M memory: 128M host: MemoApp1-Nodejs-shimac00 domain: mybluemix.net

command: node app.js

path: .

プロジェクトをデプロイする (3)

 Bluemixにデプロイしてみましょう。「 」ボタンをクリックします。

 デプロイが完了すると、「実動の実行中」と表示されます。

プロジェクトをデプロイする (3)

 ブラウザにアプリケーションの画面が表示されます。

 次に、ソースコードを編集し、Versionの「1.0.0」という表示を「1.0.1」に変更して みましょう。

ソースコードを編集する (1)

 Versionは、「package.json」ファイルの「version」の値を表示しています。 • routes > index.js

ソースコードを編集する (1)

 「package.json」ファイルの「version」の値を、「1.0.0」から「1.0.1」に修正し、保 存します。（デフォルトでは、自動保存の設定が有効になっています）

ソースコードを編集する (2)

 編集済みのソースコードで、アプリケーションをデプロイしてみましょう。「 」ボタンを クリックします。

 以下のメッセージが表示されます。「OK」ボタンをクリックします。

編集結果を確認する

 アプリケーションを実行してみましょう。「 」ボタンをクリックします。

 以下の通り、Versionが「1.0.1」と表示され、修正したコードが反映されていること を確認してください。

Bluemix と IBM Bluemix DevOps Services との連携により、 クラウドを活用したクイックなアプリケーション開発/実行ができる ことを確認しました。

(参考) IDSのプロジェクトを削除する

1）画面右上の「 」ボタンをクリックします。

2）左ペインの 「DELETE」をクリックすると、右ペインが切り替わるので、 “DELETE”と入力し、「CONFIRM」をクリックします。これで完了です。

参考資料1. IBM Bluemix DevOps Services

 以下のdW記事では、ハンズオンで体験いただいたWebIDEのほか、チーム開発で 必要となる作業をステップバイステップでご紹介していますので、ご参照ください。 • ソースコードのGitリポジトリー登録 • BUILD&DEPLOY • TRACK&PLAN

Bluemix アプリケーションを IBM DevOps Services を利用してチーム開発する http://www.ibm.com/developerworks/jp/cloud/library/j_cl-teamdev-bluemix-app/

参考資料2. Node.js

 Node.jsは、スタンドアローンおよびサーバー・サイドで動作する JavaScript 言語 の実行環境です。イベント駆動、ノンブロッキング I/O モデルを採用しているという 特徴があり、大規模な同時接続が生じるようなネットワーク・アプリケーションにおい て、優れたスケーラビリティーを発揮します。  ハンズオンで使用したアプリケーションの開発方法をdW記事でご紹介しています • 2 章 「アプリケーションの開発」 が該当します。3 章 「アプリケーションの拡張」 では、データ管理サービスのひとつである Cloudant NoSQL DB サービスを使 用するようにアプリケーションを拡張していますので、ぜひご参照ください

Bluemix 上で稼動する Web アプリケーション開発方法 - Node.js 編

[ハンズオン3]

Buildpack を

使用した

言語環境の拡張

Bluemix で提供されていない言語を使用するには

 現在の Bluemix のカタログには、Java や Node.js、Ruby といった言語の実行 環境が載っています。場合によっては、カタログに載っていない言語を使用する場 面もあるかもしれません。  BluemixはオープンなPaaSである「Cloud Foundry（クラウド ファウンドリー）」を ベースとしています。Cloud Foundryでは「ビルドパック」という仕組みで、任意の言 語の実行環境を構築することが可能です。この仕組みを利用し、カタログに載って いない言語をBluemix上で使用できます。

ビルドパック ～ ランタイム追加の仕組み ～

 任意のランライムに対するフレームワーク(実行基盤)を準備する仕組み • Herokuで開発されたカスタマイズの仕組みで、Cloud Foundry V2で採用 • 必要なランタイムが不足している場合は、ビルドパックを自身で作成し、追加す ることも可能 アプリ開発者 _Container 実行基盤 GitHub等で公開 アプリ cf push [-b buildpack] Java, Node.js, Ruby buildpackを指定しない場合は 内部でマッチング PHP, Python, Go, etc… 必要なランタイムがCloud Foundry上にな い場合は、Git URLを指定し、追加

ハンズオン概要

 このハンズオンでは、このような Bluemixでは標準で用意されていない言語を使用 する方法について学びます。単純なHTMLファイルを表示するために、ビルドパック を使って、軽量なWebサーバーであるnginxをBluemix上で動かしてみます。  要件に応じて任意の言語を扱えるBluemixの柔軟性を体感してください！  なお、これまでのハンズオンでは、Webインターフェースを使ってBluemixを操作して きました。今回のハンズオンでは、コマンドラインインターフェース(CLI)を使用します。 nginx ビルドパック

Cloud Foundry CLI _{HTMLファイル}

HTMLファイル _{プロジェクトの アプリケーション}

nginx 環境 +アプリ

ハンズオン手順

 ビルドパックによる言語環境の拡張を理解する  コマンドライン･インターフェース (CLI) を導入する

 コマンドラインでBluemixにHTMLファイルをデプロイする  デプロイしたHTMLファイルを確認する

ビルドパックによる言語環境の拡張を理解する（1）

 Bluemix上にnginxの環境を作るには、 nginxのビルドパックを使います。  ビルドパックはどこにあるのでしょうか？

Cloud Foundry のコミュニティが作成した、たくさんのビルドパックが GitHub という サイトで公開されています。 これを利用しましょう。

なお、GitHub とはソフトウェア開発プロジェクトのための共有サービスです。

ソースコードや仕様情報などプロジェクトの様々な成果物が保管され、管理されて います。 それでは実際にnginxのビルドパックを探してみましょう。

ビルドパックによる言語環境の拡張を理解する（2）

 GitHub の Cloud Foundry コミュニティにアクセスしてみましょう。

Bluemix のカタログのランタイムから、「ビルドパックの持込み」を選択します。

 「ビルドパックの持込み」のダイアログボックスが表示されます。

ビルドパックによる言語環境の拡張を理解する（3）

 GitHub の Cloud Foundry コミュニティにアクセスしました。

ビルドパックによる言語環境の拡張を理解する（4）

 GitHubで公開されているnginxのビルドパックを探します。 ブラウザで「staticfile」 を検索し、https://github.com/cloudfoundry-community/staticfile-buildpack のリンクをクリックします。 • nginxというビルドパックも存在しますが、廃止予定のためstaticfileを使用します  staticfileのビルドパックのプロジェクトが表示されます。後程この URL を使用する ので、Web ブラウザはそのままにしておいてください。

コマンドライン･インターフェース (CLI) を導入する (1)

 https://github.com/cloudfo undry/cli にアクセスします。  下にスクロールし、「Downloads」セク ションの「Stable Installers」から、環境 に合ったモジュールをダウンロードし、 導入します。 コマンドベースでBluemixを操作するために、Cloud FoundryのCLI （コマンドライン･インターフェース）を導入します。

 cf コマンドが実行可能であることを確認します。

コマンドプロンプトで “cf “と実行するとコマンドのヘルプが表示されます。

cf コマンドが認識されない場合は、導入ディレクトリーにパスが通っているか どうかを確認してください。

コマンドラインでHTMLファイルをデプロイする（1）

 Windows のコマンド・プロンプトを起動します。Windows のスタートメニュー、 もしくはデスクトップのショートカットから起動します。  作業用に新しく空のディレクトリを作成します。（C:¥Bluemix）  作成したディレクトリに移動し、HTMLのサンプルファイル（index.html）をエディタ ーで作成します。コマンドプロンプトから、以下のようにコマンドを実行してください。  エディター(メモ帳)が起動します。

“Hello! Bluemix World!!”と表示される 簡単なHTMLファイルです。

これを Bluemix にデプロイしてみます。

C:¥Bluemix＞notepad index.html _{作業用ディレクトリには}

他のファイルを置かない ようにします

コマンドラインでHTMLファイルをデプロイする（2）

 Bluemix を操作するには、cf コマンドを使用します。  IBM ID とパスワードで Bluemix にログインします。  HTMLファイルをデプロイします。 • ここで指定するアプリケーション名は、デフォルトではBluemix上に作られる仮想 サーバーのホスト名を兼ねています。 名前が重複するとデプロイに失敗しますの で、「nginx+任意の文字列」と指定してください。（下記の例参照） • ビルドパックのURLは、先程Webブラウザで開いたGitHubのstaticfileビルドパッ クの URL を指定します。 コピー＆ペーストしてください。

(例) cf push nginx20150305abc -b https://github.com/cloudfoundry-community/staticfile-buildpack -m 64M

C:¥Bluemix＞cf login –a https://api.ng.bluemix.net –u (IBM ID) –p (パスワード)

デプロイしたHTMLファイルを確認する（2）

 Bluemix のダッシュボード画面に、今デプロイしたアプリケーション「nginxXXX」が 表示されています。 シグナルが赤から緑に変わればデプロイは完了です。

 「nginxXXX」のURLリンクをクリックして、サンプルのHTMLファイルが表示されるこ とを確認してください。

参考資料1. ビルドパックを利用したその他のサンプル

 統計処理用の言語であるRを使用して、Twitterのセンチメント分析のサンプルアプ リケーションに関する記事がdeveloperWorksに公開されています。  ご興味がありましたら、以下のURLのリンク先をご参照いただき、サンプルアプリケー ションを動かしてみてください。 • http://www.ibm.com/developerworks/jp/analytics/library/ba-rtwitter-app/

 不要なアプリケーションとサービスを次の手順ですべて削除します。(質問のためなどで、 とっておきたい場合は削除しなくても構いません。)  Bluemix のダッシュボード画面に、デプロイしたアプリケーションとサービスが表示されて います。 緑色の歯車のアイコンをクリックし、”アプリの削除”を選択します。  アプリケーションと同時に、関連するサービスを削除するか聞かれる場合は、チェックを 入れ、同時に削除します。

(参考)デプロイしたアプリケーションとサービスを削除する

ハンズオン5を行われ る方は、ハンズオン１ の環境を消さないでく

[ハンズオン4]

Internet of Things

アプリケーションを

作成する

ハンズオン手順

 ボイラープレートでアプリケーションを作成する

 Node-RED で IoT アプリを作成する

ハンズオンの概要

 Internet of Thingsのボイラープレート(後述)を使用して、クラウド

上のセンサー・シミュレーターのデータを活用します。

 ボイラープレートに含まれるNode-REDというツールを用いて、セン

サー・データ(温度、湿度など)を活用する IoT アプリをノンプログラミ

ングで作成します。

センサー・ シミュレーター

ボイラープレートでアプリケーションを作成する (1)

 Bluemix には予めランタイムやサービスを組み合わせたボイラープレート という テンプレートが用意されています。 これを利用することで、簡単に Bluemix アプリケーションを開発することができます。  Bluemix の カタログメニューにボイラープレートを確認してください。 各ボイラープレートをクリックすると、それがどのランタイム、サービスを組み合わせたものか 説明されています。

ボイラープレートでアプリケーションを作成する (2)

 Internet of Things Foundationをクリックします。このボイラー

プレートは、以下のコンポーネントから構成されていることが分かります。 - SDK for Node.js - Cloudant NoSQL DB  次のように入力し、 「作成」ボタンをクリックします。 名前: iotsample+末尾に任意の文字列 ホスト: 上記の名前がコピーされる

ボイラープレートでアプリケーションを作成する (3)

 左上の、「ダッシュボードに戻る」をクリックします。

 ダッシュボードに iotsample アプリケーションと Cloudant NoSQL DB のサービスが追 加されることを確認します。

 iotsample アプリケーションの状態が青信号になるのを待ち、右下のリンク・アイコンをクリ

Node-RED で IoT アプリを作成する (1)

 Node-RED のページが表示されます。「Go to your Node-RED flow editor」ボタン をクリックし、Node-RED フロー・エディターを起動します。

 IoT (Internet of Things) は家電、自動車、ウェラブル・デバイスなどあらゆる「モノ」を インターネットに接続し、お互いに情報をやりとりすることで新しい価値を生み出す概念 です。Node-RED は、IoT のフローを構築するためのビジュアル・ツールで、開発したシ ステムを簡単に Bluemix にデプロイすることが可能になっています。ここでは、温度セン サーにより取得したデータによって処理を変えるような IoT システムを作成していきます 。 クリック

Node-RED で IoT アプリを作成する (2)

 ここでは、Node-REDで接続するセンサーの情報を取得します。

 Webブラウザーの新しいタブを開き、 ibm.biz/IoTsensor に接続します。

IoT Sensorは、IoT Cloud に接続するデバイスをエミュレートし、気温、湿度、 物体温度の情報を発信 (publish) することができます。

 右上に当デバイスの MAC アドレスが表示されるので、メモしておきます。

タブは開いたままにして おいてください。後ほど

Node-RED で IoT アプリを作成する (3)

 Node-REDフロー・エディターによって、IoT アプリの処理フローを定義します。

 サンプルのフローが以下のようにあらかじめ定義されているため、それらを削除してからハ ンズオンをすすめます。フローの削除は、マウスでシフトキーを押しながら全ノードを選択 し、キーボードの Delete ボタンを押します。

Node-RED で IoT アプリを作成する (4)

 先ず、温度データの入力元である IoT Sensor のノードを定義します。左のパレットの inputs:ibmiot を中央のキャンバスにドラッグドロップし、ダブルクリックします。

 Edit ibmiot in node のダイアログ・ボックスで以下のように入力します。 Authentication: Quickstart

Input Type: Device Event Device Id: xxxxxxxxxxx

(ここで、xxxxxxxxxxxは IoT Sensor の MAC アドレスを小文字にしてコロンを削除し た文字列）

Name: IoT Sensor

Node-RED で IoT アプリを作成する (5)

 次に、IoT Sensor のデータから温度データを取り出す function ノードを定義します。  パレットの functions:function をキャンバスにドラッグドロップし、ダブルクリックします。  Edit function node のダイアログ・ボックスで以下のように入力します。

Name: temp

Function: return {payload:msg.payload.d.temp}; 「Ok」ボタンをクリックします。

Node-RED で IoT アプリを作成する (6)

 次に、温度データの条件分岐を指定する switch ノードを定義します。 ここでは、温度40度以下と40度超で分岐するよう設定します。

 パレットの functions:switch を中央のキャンバスに ドラッグドロップし、ダブルクリックします。

 Edit switch node のダイアログ・ボックスで以下のように入力します。 Name: temp thresh

分岐条件に以下のようになるように追加 （ +rule ボタンをクリックして追加）： if msg.payload <= 40 > 40 「Ok」ボタンをクリックします。

Node-RED で IoT アプリを作成する (7)

 次に、条件ごとの処理を指定する template ノードを定義します。ここではメッセージ出 力をそれぞれ設定します。

 パレットの functions:template を２つ、キャン バスにドラッグドロップします。

 １つ目のEdit template node の ダイアログ・ボックスをダブルクリックし 以下のように入力します。

Name: safe Template:

Temperature ({{payload}}) within safe limits

「Ok」ボタンをクリックします。

 2つ目のEdit template node のダイアログ・ボックスには以下のように入力します。 Name: danger

Template: Temperature ({{payload}}) critical 「Ok」ボタンをクリックします。

Node-RED で IoT アプリを作成する (8)

 最後に、処理結果をモニター出力するための debug ノードを定義します。  パレットの outputs:debug をキャンバスにドラッグドロップし、

ダブルクリックします。

 Edit debug node のダイアログ・ボックスで以下のように入力します。 Output: message property を選択

to: debug tab

Name: cpu status

「Ok」ボタンをクリックします。

Node-RED で IoT アプリを作成する (9)

 これまでのステップで下図のようなフローができあがります。右上の「Deploy」ボタンをクリッ クし、アプリケーションをデプロイします。上部に “Successfully deployed” と表示されれ ば、Bluemix へのデプロイは成功です。  右側のサイドバーを debug タブに切り替えます。(必要に応じ、右側にウィンドウが表示 されるよう操作します)

デプロイしたアプリケーションを確認する

 別タブで開いておいたIoT Sensor の矢印ボタンをクリックし、温度を変更します。

 IoT Sensor の温度が debug タブに出力され、40度以下のときは、”Temperature (xx) within safe limits” と出力されることを確認します。

 IoT Sensor の温度を上げて、40度を超えると “Temperature (xx) critical” と出力さ れることを確認します。

IoTアプリの拡張を考える

ハンズオンではモニター用に画面出力し稼動を確認するまでにとどめていますが、 Node-RED を使用して様々に変更することが可能です。 Input/outputを組み合わせ、特定の条件を満たすデー タを受け取ったら、担当者に通知するといったものから、コ ーディングを追加してより高度なものにすることも可能で す。 詳細は以下のサイトをご覧ください。 http://nodered.org/docs/ チュートリアル

Arduino Uno と IBM IoT Foundation を利用してクラ ウド対応の温度センサーを作成する（全4回）

http://www.ibm.com/developerworks/jp/cloud/libr ary/cl-bluemix-arduino-iot1/index.html

[ハンズオン5]

Node.js アプリケーションから

SQL Database を利用する

ハンズオン手順

 ハンズオンの概要

 SQL Databaseサービスを作成する

 サンプルデータをロードする

 IDSのプロジェクトを取り込み、保管する

 設定ファイルを修正する

 プロジェクトをデプロイする

 デプロイしたアプリケーションを確認する

ハンズオンの概要

 本ハンズオンでは、データベースにサンプルデータを投入し、Node.jsアプリケーション から参照する手順を確認します。  サンプルアプリケーションをIDSから取得し、Bluemixにデプロイします。 公開 プロジェクト プロジェクトの 取り込み プロジェクトの 保管 モジュールの アプリケーション IBM DevOps Services

設定ファイル SQL Database の作成 サンプルデータの 投入

サンプルアプリケーションの紹介

 横浜市金沢区が公開しているAED設置場所データをGoogle Mapに表示

ハンズオン手順

 ハンズオンの概要

 SQL Databaseサービスを作成する

 サンプルデータをロードする

 IDSのプロジェクトを取り込み、保管する

 設定ファイルを修正する

 プロジェクトをデプロイする

 デプロイしたアプリケーションを確認する

SQLデータベースサービスを作成する

ハンズオン手順

 ハンズオンの概要

 SQL Databaseサービスを作成する

 サンプルデータをロードする

 IDSのプロジェクトを取り込み、保管する

 設定ファイルを修正する

 プロジェクトをデプロイする

 デプロイしたアプリケーションを確認する

サンプルデータをロードする (1/8)

１．サンプルデータをWebから取得します。 Webブラウザを起動し、「金沢区データポータル」にアクセスします。 https://ibm.biz/BdEApk ２．「AED設置場所」をクリックしてCSVファイルを保存します。 ファイル名はデフォルトの ”3-kz-somu.csv” のままで結構です。

サンプルデータをロードする (2/8)

3．Bluemixのダッシュボードより、ハンズオン１で作成したSQL Databaseサービスをクリックします。

サンプルデータをロードする (3/8)

サンプルデータをロードする (4/8)

6．”Brows files” をクリックし、ダウンロードした”3-kz-somu.csv” を指定します。 ダウンロードしたcsvファイルのコードページはShift_JISですので、Code pageを ”1208”から”943”に上書き変更します。

Does the file have columns that contain dates or times? を “Yes”にし、右下の”Load File” をクリックします。 コードページを 1208→943 に変更 Yes ダウンロードした csvファイルを指定

サンプルデータをロードする (5/8)

7．サンプルデータのCSVファイルの内容が表示されていることを確認し、 ”Next” をクリックします。

サンプルデータをロードする (6/8)

サンプルデータをロードする (7/8)

9．”Table name” を 「AEDKANAZAWA」に変更します。 １0．Columnを以下のとおり変更し、”Finish” をクリックします。

名称 ⇒ NAME 住所 ⇒ ADDRESS 緯度 ⇒ LATITUDE 経度 ⇒ LONGITUDE AEDの数 ⇒ AED 更新日 ⇒ UPDATE

サンプルデータをロードする (8/8)

１1．ロードしたテーブルを確認します。左上の「Manage」から「Work with Table」を選択 します。

１2．左側に表示されている「AEDKANAZAWA」をクリックすると、右側にテーブルの情報が 表示されます

ハンズオン手順

 ハンズオンの概要

 SQL Databaseサービスを作成する

 サンプルデータをロードする

 IDSのプロジェクトを取り込み、保管する

 設定ファイルを修正する

 プロジェクトをデプロイする

 デプロイしたアプリケーションを確認する

IDSのサンプルプロジェクトを取り込み、保管する (1/4)

ハンズオン１で作成したアプリと経路を削除します。(SQLDBはそのまま使用） その後、公開プロジェクトからコードを取り込みます。 Bluemixのダッシュボード画面で、ハンズオン１で作成した、 Node.jsアプリのアイコン右上のマークをクリックし、 アプリの削除をクリックします。 下図のように、サービスのチェックをはずし、経路のチェックを 入れて、削除をクリックします。 ?????? ?????????

IDSのサンプルプロジェクトを取り込み、保管する (2/4)

１．IDS上に公開されているサンプルアプリケーションにアクセスします。 YokohamaAEDMap：https://ibm.biz/BdEA8b

２．画面上部の 「SIGN IN」 をクリックします。

３．IBM ID、パスワードを入力して「Sign in」ボタンをクリックします。

IDSのサンプルプロジェクトを取り込み、保管する (3/4)

５．任意のプロジェクト名を指定して「CREATE」ボタンをクリックします。 この例では YokohamaAEDMap という プロジェクト名を指定しています デプロイ先として、Region に US South、 Organization に正しい IBM ID が 指定されていることを確認し、「CREATE」 をクリックします。

IDSのサンプルプロジェクトを取り込み、保管する (4/4)

ハンズオン手順

 ハンズオンの概要

 SQL Databaseサービスを作成する

 サンプルデータをロードする

 IDSのプロジェクトを取り込み、保管する

 設定ファイルを修正する

 プロジェクトをデプロイする

 デプロイしたアプリケーションを確認する

設定ファイルを修正する (1/2)

１．Bluemixにデプロイする際の情報を記述する設定ファイルである manifest.yml を 編集します。

前のページで取り込んだプロジェクトの”EDIT CODE”をクリックします。

設定ファイルを修正する (2/2)

３．以下の箇所を修正します。

■ <Your SQL Database Name>：使用するSQL Databaseの名称です。 ハンズオン１で作成した「SQL Database」サービスの名称を入力してください。 ■ <Your Host Name>：アプリケーションのホスト名です。

他のユーザーとも重ならない任意の名前を入力してください。 ■ <Your Application Name>：アプリケーションの名称です。

他のアプリケーションと重複しない任意の名前を入力してください。 以下は編集後の manifest.yml の例です。

ハンズオン手順

 ハンズオンの概要

 SQL Databaseサービスを作成する

 サンプルデータをロードする

 IDSのプロジェクトを取り込み、保管する

 設定ファイルを修正する

 プロジェクトをデプロイする

 デプロイしたアプリケーションを確認する

プロジェクトをデプロイする（1/2）

１．「 」 ボタンをクリックします。

プロジェクトをデプロイする（2/2）

３．ダッシュボードにIDSからデプロイしたアプリケーションが表示されます。 デプロイ操作の直後は環境作成中のため、ステータスが赤（実行不可）の 状態ですが、しばらく待って画面を更新するとステータスが緑（実行可能）に 変わります。 それではアプリケーションを実行してみましょう。 シグナルが緑になっているのを確認し、 アプリケーションのリンクをクリックします。

ハンズオン手順

 ハンズオンの概要

 SQL Databaseサービスを作成する

 サンプルデータをロードする

 IDSのプロジェクトを取り込み、保管する

 設定ファイルを修正する

 プロジェクトをデプロイする

 デプロイしたアプリケーションを確認する

デプロイしたアプリケーションを確認する

１．表示された画面の”AED位置情報取得”をクリックします。 地図上にAEDの位置が表示されます。

[補足資料]

サンプルプログラムの

ポイント説明

Node.jsとは

 サーバーサイドJavaScript環境 • Webアプリケーションのプログラム記述を想定 • ファイル操作やデータベース処理など、機能ごとにモジュール化されており、必要なもの を必要に応じて使用する  参考リンク • Node.js：http://nodejs.org/ • Node.js 日本ユーザーグループ：http://nodejs.jp/

Bluemixにデプロイする各ファイルの説明

 サンプルアプリケーションの構造は以下のとおり • 実際のファイルをみながら内容を確認しましょう app.js Node.jsアプリケーションの本体 public ここに配置したファイルは、http://URL/ファイル名でアクセスできる css CSSファイル配置用ディレクトリ img 画像ファイル配置用ディレクトリ js ブラウザ用JavaScript配置用ディレクトリ index.html routes リクエストを処理するプログラム配置用ディレクトリ index.js データベースへのアクセス処理を記述 package.json Node.jsが使用するモジュールを記述 manifest.yml Bluemixにデプロイするための情報を記述

クライアントからのリクエストを処理する

 ブラウザからのリクエスト処理は、routes/index.js に記述している

router.get('/api/aed', function(req, res) {

・・・ ・・・ ・・・

// レスポンスのHTTPヘッダーのセット

res.writeHeader(200, {'Content-type': 'application/json; charset=utf-8'});

// レスポンスの内容 res.send(data); // レスポンスの最後 res.end(); }); URLのパス reqにリクエスト内容が格納されている resにデータを書き込むことでクライアントにレスポンスを返す HTTPステータスコード レスポンスのHTTPヘッダーの内容 GETメソッド res.end(data)とまとめることも可能

（参考）HTTPのメソッドとステータスコード

 HTTPはサーバーの操作としていくつかのメソッドを定義している • GET：情報の取得 ⇒ データの取得（SELECT） • POST：データの送信 ⇒ データの新規作成（INSERT） • PUT： 指定したファイルの置き換え ⇒ データの更新（UPDATE） • DELETE：指定したファイルの削除 ⇒ データの削除（DELETE）  リクエストに対するWebサーバーの応答としてステータスコードが定義されている • 100番台：Information • 200番台：Success • 300番台：Redirect • 400番台：Client Error

 401 Unauthorized、403 Forbidden、404 Not Found など

• 500番台：Server Error

SQL Databaseに接続する（1/2）

 データベースへの接続情報は、VCAP_SERVICESという環境変数に格納されている • Bluemixのダッシュボードより、アプリケーションを選択し、左側メニューの「環境変数」 をクリックする 今回のサンプルアプリでは、この環境変数を取得してDBに接続するように設定されているため 個別に指定しなくてもアプリからDBが使用できるようになっています（次ページ参照）

SQL Databaseに接続する（2/2）

 Node.jsはibm_dbというモジュールを利用してSQL Databaseに接続できる • package.jsonにモジュールの使用を記述

• データベースへのアクセス処理は、routes/index.jsに記述している

// 使用するモジュールの読み込み var ibmdb = require('ibm_db');

// DB2への接続情報の取得

var services = JSON.parse(process.env.VCAP_SERVICES); var credentials = services['sqldb'][0].credentials; var dsnString = xxx;

// DB接続開始

ibmdb.open(dsnString, function(err, conn) { // 実行するSQL文

var sqlStatement = "SELECT NAME, LATITUDE, LONGITUDE, ADDRESS, AED FROM AEDKANAZAWA"; conn.query(sqlStatement, function (err, rows, moreResultSets) {

// DBから取得したデータをJSON配列に格納する

for (var i = 0; i < rows.length; i++) { rows[i].LONGITUDE };