IBM Bluemix ハンズオン・セミナー · 2015-04-09 · ハンズオンの概要このハンズオンでは、WebIDE(*)を使用し、IBM Bluemix DevOps Servicesに公開されているアプリケーションに独自の編集を加え、Bluemix

© 2015 IBM Corporation1

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連携

3. Cloud Foundry CLI 導入


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（コマンドライン･インターフェース）を導入します。

https://github.com/cloudfoundry/cli


3. Cloud Foundry CLI 導入 (2)

cf コマンドが実行可能であることを確認します。コマンドプロンプトで “cf “と実行するとコマンドのヘルプが表示されます。

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．アプリケーション名とホスト名を指定して“作成”ボタンをクリックします。

任意の名前を指定します。重複しているとエラーに

なるのでユニークな名称を指定してください



3．上部メニューの”ダッシュボード”をクリックし、作成中のアプリケーションを選択します。30秒ほどでインスタンスの作成および起動が完了します。画面右端の “アプリの正常性” のステータスが赤色から緑色に変わり、「アプリは稼動しています。」のメッセージが表示されたことを確認してください。

これだけの手順で Node.js の実行環境が構築できました。

“アプリの正常性” のステータスが変わらない場合は、Web ブラウザのリロード (F5キー)をお試しください。



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

この例では、http://WebApp001.mybluemix.net/にアクセスしています


サービスの追加 (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キー)をお試しください。


左端のメニューから ”ファイルとログ” を選択します。実行環境のファイルシステム上にあるアプリケーション・ファイルやログ・ファイルを参照したりダウンロードしたりすることができます。

※画面の切り替えがうまくいかない場合は、Web ブラウザのリロード (F5キー)をお試しください。

アプリケーション実行環境の詳細 (3/4)～ファイル/ログの参照


アプリケーション実行環境の詳細 (4/4)～環境変数の参照

”SDK for Node.js” ページの下部にて、実行環境に設定されている環境変数の情報が確認できます。（環境変数を新しく追加することも可能です）連携に必要となる情報は、自動的に環境変数にセットされるので、アプリケーションはこれらの環境変数の値を取得して、サービスにアクセスします。

SQLDatabase 接続の場合IPアドレス, ポート番号, DB名,username, password などが環境変数としてセットされます。

Bluemix では、Web ブラウザからアプリケーション実行環境の構築やサービスのバインド、様々な運用管理作業ができることを確認いただきました。お疲れ様でした！


[ハンズオン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 との連携を体験していただきます。※ Node.jsについては、補足資料2をご参照ください


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

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

IBM Bluemix DevOps Services にログインする

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


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

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

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



任意のプロジェクト名を指定して「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にチェックを入れます。



フォーク処理が完了し、自分のプロジェクトとして保管されました。


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

Bluemixにデプロイするために、manifest.ymlファイル(*)が必要となります。

このプロジェクトには、manifest.ymlファイルが含まれていないため、新規作成します。

ファイル名は、「manifest.yml」と入力してください。

※ manifest.ymlには、作成するアプリケーション・インスタンスの数、アプリケーションに割り振るメモリー量とディスク割り当て量、アプリケーションのその他の環境変数などのオプションが指定されます。詳細は以下をご参照ください。https://www.ng.bluemix.net/docs/#manageapps/index-gentopic2.html#appmanifest


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

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

オプション説明

name Bluemix 内のアプリケーション名。この値は Bluemix 環境で固有でなければなりません。

disk_quota アプリケーションに割り振るディスク割り当て量。デフォルト値は 1G です。

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

host Bluemix 内のアプリケーションのホスト名。 Bluemix 環境で固有でなければなりません。

domain Bluemix 内のアプリケーションのドメイン・ネーム。

command アプリケーションのカスタム開始コマンド

path アプリケーションのロケーション。この値は相対パスまたは絶対パスとすることができます。

instances アプリケーション用に作成するインスタンスの数。

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: .

instances: 1


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

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

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

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


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

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

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


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

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

• routes > index.js

• package.json



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

• package.json



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

以下のメッセージが表示されます。「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 編

http://www.ibm.com/developerworks/jp/cloud/library/j_cl-bluemix-nodejs-app/

http://www.ibm.com/developerworks/jp/cloud/library/j_cl-bluemix-nodejs-app/


[ハンズオン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 / Cloud Foundry


ハンズオン概要

このハンズオンでは、このような 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のビルドパックを探してみましょう。



GitHub の Cloud Foundry コミュニティにアクセスしてみましょう。Bluemix のカタログのランタイムから、「ビルドパックの持込み」を選択します。

「ビルドパックの持込み」のダイアログボックスが表示されます。「既知の Cloud Foundry 互換ビルドパックの表示」のリンクをクリックします。



GitHub の Cloud Foundry コミュニティにアクセスしました。GitHubには様々なビルドパックが公開されていることを確認してください。



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（コマンドライン･インターフェース）を導入します。

https://github.com/cloudfoundry/cli


cf コマンドが実行可能であることを確認します。コマンドプロンプトで “cf “と実行するとコマンドのヘルプが表示されます。

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

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


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

Windows のコマンド・プロンプトを起動します。Windows のスタートメニュー、もしくはデスクトップのショートカットから起動します。

作業用に新しく空のディレクトリを作成します。（C:¥Bluemix）

作成したディレクトリに移動し、HTMLのサンプルファイル（index.html）をエディターで作成します。コマンドプロンプトから、以下のようにコマンドを実行してください。

エディター(メモ帳)が起動します。“Hello! Bluemix World!!”と表示される簡単なHTMLファイルです。

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

C:¥Bluemix＞notepad index.html 作業用ディレクトリには他のファイルを置かない

ようにします

<h1>Hello Bluemix World!</h1>


コマンドラインで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 (パスワード)

C:¥Bluemix＞cf push (アプリケーション名) –b (ビルドパックのURL) –m 64M


デプロイした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で接続するセンサーの情報を取得します。

Webブラウザーの新しいタブを開き、 ibm.biz/IoTsensor に接続します。IoT Sensorは、IoT Cloud に接続するデバイスをエミュレートし、気温、湿度、物体温度の情報を発信 (publish) することができます。

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

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

使用します。

https://ibm.biz/IoTsensor



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

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



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

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

Input Type: Device Event

Device Id: xxxxxxxxxxx

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

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


Node-RED で IoT アプリを作成する (5) 次に、IoT Sensor のデータから温度データを取り出す function ノードを定義します。

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

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

Function: return {payload:msg.payload.d.temp};


IoT Sensor と temp をマウスでつないでリンクします。



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

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

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

分岐条件に以下のようになるように追加（ +rule ボタンをクリックして追加）：if msg.payload

<= 40

> 40


temp と temp thresh をリンクします。


Node-RED で IoT アプリを作成する (7) 次に、条件ごとの処理を指定する template ノードを定義します。ここではメッセージ出

力をそれぞれ設定します。

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

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

Template:

Temperature ({{payload}}) within safe

limits


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

Template: Temperature ({{payload}}) critical


右図のようにリンクします。


Node-RED で IoT アプリを作成する (8) 最後に、処理結果をモニター出力するための debug ノードを定義します。

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

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

Name: cpu status


template と cpu status を右図のようにリンクします。



これまでのステップで下図のようなフローができあがります。右上の「Deploy」ボタンをクリックし、アプリケーションをデプロイします。上部に “Successfully deployed” と表示されれば、Bluemix へのデプロイは成功です。

右側のサイドバーを debug タブに切り替えます。(必要に応じ、右側にウィンドウが表示されるよう操作します)


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

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

IoT Sensor の温度が debug タブに出力され、40度以下のときは、”Temperature

(xx) within safe limits” と出力されることを確認します。

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

Node-RED を使いビジュアルにインターネット上のデバイスをワイヤリングし、Bluemix のnode.js 上にデプロイする手順を確認しました。お疲れ様でした！


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

http://nodered.org/docs/

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


[ハンズオン5]

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




SQL Databaseサービスを作成する

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

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

設定ファイルを修正する





本ハンズオンでは、データベースにサンプルデータを投入し、Node.jsアプリケーションから参照する手順を確認します。

サンプルアプリケーションをIDSから取得し、Bluemixにデプロイします。

公開プロジェクト

プロジェクトの取り込み

プロジェクトの保管

モジュールのデプロイ


IBM DevOps Services

設定ファイル修正

SQLDatabase

の作成

サンプルデータの投入


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

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

• http://www.city.yokohama.lg.jp/kanazawa/kz-opendata/kz-opendata.html











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

「ハンズオン１」で作成したNode.js と SQL Database の環境を利用します。











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

１．サンプルデータをWebから取得します。Webブラウザを起動し、「金沢区データポータル」にアクセスします。https://ibm.biz/BdEApk

２．「AED設置場所」をクリックしてCSVファイルを保存します。ファイル名はデフォルトの ”3-kz-somu.csv” のままで結構です。


サンプルデータをロードする (2/8)3．Bluemixのダッシュボードより、ハンズオン１で作成したSQL Databaseサービスをクリックします。

4． Launch をクリックしてSQL Database のコンソールを起動します。



5．Load Dataをクリックします。



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ファイルを指定



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



8．”Create a new table and load” にチェックを入れ、”Next” をクリックします。



9．”Table name” を「AEDKANAZAWA」に変更します。

１0．Columnを以下のとおり変更し、”Finish” をクリックします。名称 ⇒ NAME 住所 ⇒ ADDRESS緯度 ⇒ LATITUDE 経度 ⇒ LONGITUDEAEDの数 ⇒ AED 更新日 ⇒ UPDATE



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

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











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

ハンズオン１で作成したアプリと経路を削除します。(SQLDBはそのまま使用）その後、公開プロジェクトからコードを取り込みます。

Bluemixのダッシュボード画面で、ハンズオン１で作成した、Node.jsアプリのアイコン右上のマークをクリックし、アプリの削除をクリックします。

下図のように、サービスのチェックをはずし、経路のチェックを入れて、削除をクリックします。

??????

?????????

???????????????????????



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

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

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

４．プロジェクトをフォークします。「FORK PROJECT」をクリックしてください。



５．任意のプロジェクト名を指定して「CREATE」ボタンをクリックします。

この例では YokohamaAEDMap という

プロジェクト名を指定しています

デプロイ先として、Region に US South、Organization に正しい IBM ID が指定されていることを確認し、「CREATE」をクリックします。



６．フォーク処理が完了し、自分のプロジェクトとして保管されたことを確認します。











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

１．Bluemixにデプロイする際の情報を記述する設定ファイルである manifest.yml を編集します。前のページで取り込んだプロジェクトの”EDIT CODE”をクリックします。

２．manifest.yml クリックします。


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

３．以下の箇所を修正します。■ <Your SQL Database Name>：使用するSQL Databaseの名称です。

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

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

他のアプリケーションと重複しない任意の名前を入力してください。

以下は編集後の manifest.yml の例です。











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

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

２．Bluemix の上部メニューから「ダッシュボード」をクリックします。


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

３．ダッシュボードにIDSからデプロイしたアプリケーションが表示されます。

デプロイ操作の直後は環境作成中のため、ステータスが赤（実行不可）の状態ですが、しばらく待って画面を更新するとステータスが緑（実行可能）に変わります。

それではアプリケーションを実行してみましょう。

シグナルが緑になっているのを確認し、

アプリケーションのリンクをクリックします。












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

地図上にAEDの位置が表示されます。マーカーをクリックすると、AED設置場所の情報が表示されます。


[補足資料]

サンプルプログラムのポイント説明


Node.jsとは

サーバーサイドJavaScript環境

• Webアプリケーションのプログラム記述を想定

• ファイル操作やデータベース処理など、機能ごとにモジュール化されており、必要なものを必要に応じて使用する

参考リンク

• Node.js：http://nodejs.org/

• Node.js 日本ユーザーグループ：http://nodejs.jp/

• IBM SDK for Node.js：http://www.ibm.com/developerworks/web/nodesdk/


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

500 Internal Server Error、503 Service Unavailable など


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 };

// DB接続終了conn.close(function(){});

};});

Documents

IBM Bluemix ハンズオン・セミナー · 2015-04-09 · ハンズオンの概要 このハンズオンでは、WebIDE(*)を使用し、IBM Bluemix DevOps Servicesに 公開されているアプリケーションに独自の編集を加え、Bluemix

IBM Bluemix ハンズオン・セミナー · 2015-04-09 · ハンズオンの概要このハンズオンでは、WebIDE(*)を使用し、IBM Bluemix DevOps Servicesに公開されているアプリケーションに独自の編集を加え、Bluemix