ibm bluemix ハンズオン・セミナー · 2015-04-09 · ハンズオンの概要...
TRANSCRIPT
© 2015 IBM Corporation1
IBM Bluemix
ハンズオン・セミナー
© 2015 IBM Corporation2
ハンズオンの内容
0. 事前準備
1. Bluemixの基本操作データベース・サービスを使用したアプリケーション実行環境の構築
2. クラウド上でのアプリケーション開発IBM DevOps Servicesを使用した開発とデプロイ
3. Buildpack を使用した言語環境の拡張オープン・コミュニティのBuildpackの活用
4. Internet of Thingsアプリケーションを作成するセンサーからのデータをプログラミングレスで利用
5. Node.js アプリケーションからSQL Database を利用するサンプル・プログラムのデプロイと実行
© 2015 IBM Corporation3
IBM Bluemixハンズオン・セミナー事前準備
1. Bluemix利用登録
2. DevOps Service連携
3. Cloud Foundry CLI 導入
© 2015 IBM Corporation4
1. IBM Bluemix 利用登録
http://ibm.biz/bluemixfree にアクセスします。
ガイドに従ってサインアップします。
登録したアドレスに IBM Bluemixよりメールが届きます。
メール本文内のリンクをクリックすることでアカウントの有効化が行われます。
必ずこのステップを実施し、Bluemixに ログイン できることを事前に確認ください。
© 2015 IBM Corporation5
2. DevOps Servicesへの登録 (1)
https://hub.jazz.net にアクセスします。表示された画面で「Sign up for free」をクリックします。
「Log in to start using DevOps
Services.」をクリックします。
© 2015 IBM Corporation6
2. DevOps Servicesへの登録 (2)
Bluemixのサインアップ時に使用したIBM IDとパスワードを入力し、「サインイン」をクリックします。
IBM IDの別名(エイリアス)を作成します。任意の文字列を入力し、「Finish」をクリックします。
「Success!」が表示されれば完了です。
© 2015 IBM Corporation7
3. Cloud Foundry CLI 導入 (1)
https://github.com/cloudfo
undry/cli
にアクセスします。
下にスクロールし、「Downloads」セクションの「Stable Installers」から、環境に合ったモジュールをダウンロードし、導入します。
コマンドベースでBluemixを操作するために、Cloud FoundryのCLI(コマンドライン・インターフェース)を導入します。
© 2015 IBM Corporation8
3. Cloud Foundry CLI 導入 (2)
cf コマンドが実行可能であることを確認します。コマンドプロンプトで “cf “と実行するとコマンドのヘルプが表示されます。
cf コマンドが認識されない場合は、導入ディレクトリーにパスが通っているかどうかを確認してください。
© 2015 IBM Corporation9
[ハンズオン1]
Bluemixの基本操作データベース・サービスを使用したアプリケーション
実行環境の構築
© 2015 IBM Corporation10
ハンズオン手順
Bluemix へログイン
アプリケーション実行環境の構築
サービスの追加
アプリケーション実行環境の詳細
© 2015 IBM Corporation11
Bluemix へログイン
まず初めに、Bluemix にログインします。
Webブラウザを起動し、Bluemix にアクセスします。下記URLを入力します。http://bluemix.net/
表示された画面右上の「ログイン」 をクリックします。
IBM ID、パスワードを入力して「サインイン」ボタンをクリックします。
ログインが成功すると Bluemix のDashboardが表示されます
© 2015 IBM Corporation12
作業する地域を確認する
Bluemixは、「米国南部」と「英国」の2つの地域で稼動しています。上部メニューの 「地域」 をクリックすることで、稼動する環境を選択することができます。
今回は「米国南部」を利用します。地域が「米国南部」になっていることを確認してください。
「英国」になっている場合は、「地域」をクリックして、「米国南部」を選択してください
© 2015 IBM Corporation13
[補足] 「米国南部」選択時のポップアップへの対応方法
米国南部を選択した際に、スペースを作成するように指示するポップアップ・ウィンドウが表示された場合は、任意の名前を入力し、作成をクリックしてください。
本資料ではスペース名として
「dev」を使用します
© 2015 IBM Corporation14
アプリケーション実行環境の構築 (1/3)
1.上部メニューの”カタログ”にて、作成するアプリケーションの実行環境を選択します。ランタイム カテゴリから、Node.js による JavaScriptの実行環境を選択します。
2.アプリケーション名とホスト名を指定して“作成”ボタンをクリックします。
任意の名前を指定します。重複しているとエラーに
なるのでユニークな名称を指定してください
© 2015 IBM Corporation15
アプリケーション実行環境の構築 (2/3)
3.上部メニューの”ダッシュボード”をクリックし、作成中のアプリケーションを選択します。30秒ほどでインスタンスの作成および起動が完了します。画面右端の “アプリの正常性” のステータスが赤色から緑色に変わり、「アプリは稼動しています。」のメッセージが表示されたことを確認してください。
これだけの手順で Node.js の実行環境が構築できました。
“アプリの正常性” のステータスが変わらない場合は、Web ブラウザのリロード (F5キー)をお試しください。
© 2015 IBM Corporation16
アプリケーション実行環境の構築 (3/3)
4.それではサンプルとして用意されたスターター・アプリケーションを実行してみましょう。アプリケーションの “経路: “のリンクをクリックすると、作成された Node.js 上でJavaScript のスターター・アプリケーションが動いていることが確認できます。
この例では、http://WebApp001.mybluemix.net/にアクセスしています
© 2015 IBM Corporation17
サービスの追加 (1/2)
2.サービスを追加するアプリケーションを指定し、”作成”ボタンをクリックします。(“アプリケーション”の選択” で先ほど作成したアプリ名を指定します。)
SQL Database のサービス名やプランはデフォルトのままでOKです
1.上部メニューの “カタログ” をクリックし、カタログからアプリケーションと連携させたいサービスを選択します。 ここでは、先ほど作成した Node.js の実行環境にSQL Database(DB2) のサービスを追加してみましょう。
© 2015 IBM Corporation18
サービスの追加 (2/2)
3.アプリケーションの再起動(再ステージ)の確認があります。OKボタンをクリックします。
4.約20秒ほどでサービスの追加が完了します。アプリケーションの “概要” 画面の下部に、SQL Database サービスが表示されることを確認してください。 たったこれだけの手順で、アプリケーションからデータベースが使用できるようになりました。
“アプリの正常性” のステータスが変わらない場合は、Web ブラウザのリロード (F5キー)をお試しください。
© 2015 IBM Corporation19
アプリケーション実行環境の詳細 (1/4)~リソースの動的追加
アプリケーションの “概要” の画面には、実行環境が使用するリソース情報が表示されています。
ここで実行環境のリソース変更が可能です。インスタンス : 3、メモリー : 384MB と指定して「保存」をクリックします。再起動後、リソースが拡張されていることを確認してください。
© 2015 IBM Corporation20
アプリケーション実行環境の詳細 (2/4)~リソースの動的追加
左端のメニューから ”SDK for Node.js” を選択します。ページ上部で CPU やメモリーの使用率など、インスタンスの詳細情報が確認できます。
先程インスタンスを増やしたので、リストには3行が表示されています。
今度はリソースの縮退を行ってみましょう。インスタンス : 1、メモリー : 64MB と指定して「保存」をクリックします。リソースは増やすだけでなく、減らすこともできることを確認してください。
※画面の切り替えがうまくいかない場合は、Web ブラウザのリロード (F5キー)をお試しください。
© 2015 IBM Corporation21
左端のメニューから ”ファイルとログ” を選択します。実行環境のファイルシステム上にあるアプリケーション・ファイルやログ・ファイルを参照したりダウンロードしたりすることができます。
※画面の切り替えがうまくいかない場合は、Web ブラウザのリロード (F5キー)をお試しください。
アプリケーション実行環境の詳細 (3/4)~ファイル/ログの参照
© 2015 IBM Corporation22
アプリケーション実行環境の詳細 (4/4)~環境変数の参照
”SDK for Node.js” ページの下部にて、実行環境に設定されている環境変数の情報が確認できます。(環境変数を新しく追加することも可能です)連携に必要となる情報は、自動的に環境変数にセットされるので、アプリケーションはこれらの環境変数の値を取得して、サービスにアクセスします。
SQLDatabase 接続の場合IPアドレス, ポート番号, DB名,username, password などが環境変数としてセットされます。
Bluemix では、Web ブラウザからアプリケーション実行環境の構築やサービスのバインド、様々な運用管理作業ができることを確認いただきました。 お疲れ様でした!
© 2015 IBM Corporation23
[ハンズオン2]
DevOps Services を使ったクラウド上でのアプリケーション開発
© 2015 IBM Corporation24
IBM Bluemix DevOps Services概要
IBM Bluemix DevOps Services (以下、IDS )は、パブリック・プロジェクトまたはプライベート・プロジェクトにおいて、他のメンバーとコラボレーションを取りながらソフトウェアの開発が可能なクラウドベースのプラットフォームです。
IDSには、アプリケーション開発に必要な以下の機能があります。
• アジャイルな計画立案と追跡 (TRACK & PLAN)
• Web IDE (Webブラウザ上でのソースコードの修正と管理)
• Git, Jazz SCM, GitHubを使用したソースコード管理 (SCM)
• Bluemixへの自動デプロイ (BUILD & DEPLOY)
© 2015 IBM Corporation25
ハンズオンの概要
このハンズオンでは、WebIDE(*)を使用し、IBM Bluemix DevOps Servicesに公開されているアプリケーションに独自の編集を加え、Bluemix に push して実行環境を自動作成する手順を体験していただきます。
※ WebIDE以外の機能をご紹介したdW記事について、参考資料1に記載しておりますので、ご参照ください。
公開プロジェクト
プロジェクトの取り込み
プロジェクトの保管
プロジェクトのデプロイ
アプリケーションの実行
修正モジュールの再デプロイ
アプリケーションの再実行
Node.js 実行環境の作成 / モジュールの配置 / URL 生成
アプリケーション修正
© 2015 IBM Corporation26
ハンズオン手順
IDSに登録する
IDS で公開されているプロジェクトを開く
IBM Bluemix DevOps Services にログインする
プロジェクトを保管する
プロジェクトをデプロイする
ソースコードを編集する
編集結果を確認する
© 2015 IBM Corporation27
IDSに登録する (1)
https://hub.jazz.net にアクセスします。表示された画面で「Sign up for free」をクリックします。
「ログインして DevOps
Services の使用を開始してください。 」をクリックします。
© 2015 IBM Corporation28
IDSに登録する (2)
Bluemixのサインアップ時に使用したIBM IDとパスワードを入力し、「サインイン」をクリックします。
IBM IDの別名(エイリアス)を作成します。任意の文字列を入力し、「Finish」をクリックします。
「正常に終了しました。」が表示されれば完了です。
© 2015 IBM Corporation29
IDS で公開されているプロジェクトを開く
IBM Bluemix DevOps Services 上の MemoApp1-Nodejs プロジェクトを開きます。Webブラウザで http://ibm.biz/MemoApp にアクセスします。
xxxxxxxxxxxxxxxxx
IDS 上のNode.jsアプリケーション(*)のサンプル・プロジェクトが表示されます。このコードを使って、IDS と Bluemix との連携を体験していただきます。※ Node.jsについては、補足資料2をご参照ください
© 2015 IBM Corporation30
画面上部の 「LOG IN」 をクリックします。
IBM ID、パスワードを入力して「Sign in」ボタンをクリックします。
IBM Bluemix DevOps Services にログインする
ログイン済み(LOGINボタンが右上に表示されない)場合、このページはスキップください。
© 2015 IBM Corporation31
画面右上の「EDIT CODE」をクリックします。
プロジェクトをコピー(フォーク)します。左上の「FORK」 ボタンをクリックします。
プロジェクトを保管する (1)
© 2015 IBM Corporation32
プロジェクトを保管する (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にチェックを入れます。
© 2015 IBM Corporation33
プロジェクトを保管する (3)
フォーク処理が完了し、自分のプロジェクトとして保管されました。
© 2015 IBM Corporation34
プロジェクトをデプロイする (1) manifest.yml作成
Bluemixにデプロイするために、manifest.ymlファイル(*)が必要となります。
このプロジェクトには、manifest.ymlファイルが含まれていないため、新規作成します。
ファイル名は、「manifest.yml」と入力してください。
※ manifest.ymlには、作成するアプリケーション・インスタンスの数、アプリケーションに割り振るメモリー量とディスク割り当て量、アプリケーションのその他の環境変数などのオプションが指定されます。詳細は以下をご参照ください。https://www.ng.bluemix.net/docs/#manageapps/index-gentopic2.html#appmanifest
© 2015 IBM Corporation35
プロジェクトをデプロイする (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
© 2015 IBM Corporation36
プロジェクトをデプロイする (3)
Bluemixにデプロイしてみましょう。「 」ボタンをクリックします。
デプロイが完了すると、「実動の実行中」と表示されます。
アプリケーションを実行してみましょう。「 」ボタンをクリックします。
© 2015 IBM Corporation37
プロジェクトをデプロイする (3)
ブラウザにアプリケーションの画面が表示されます。
次に、ソースコードを編集し、Versionの「1.0.0」という表示を「1.0.1」に変更してみましょう。
© 2015 IBM Corporation38
ソースコードを編集する (1)
Versionは、「package.json」ファイルの「version」の値を表示しています。
• routes > index.js
• package.json
© 2015 IBM Corporation39
ソースコードを編集する (1)
「package.json」ファイルの「version」の値を、「1.0.0」から「1.0.1」に修正し、保存します。(デフォルトでは、自動保存の設定が有効になっています)
• package.json
© 2015 IBM Corporation40
ソースコードを編集する (2)
編集済みのソースコードで、アプリケーションをデプロイしてみましょう。「 」ボタンをクリックします。
以下のメッセージが表示されます。「OK」ボタンをクリックします。
しばらくすると、アプリケーションが稼動します。
© 2015 IBM Corporation41
編集結果を確認する
アプリケーションを実行してみましょう。「 」ボタンをクリックします。
以下の通り、Versionが「1.0.1」と表示され、修正したコードが反映されていることを確認してください。
Bluemix と IBM Bluemix DevOps Services との連携により、クラウドを活用したクイックなアプリケーション開発/実行ができることを確認しました。
お疲れ様でした!
© 2015 IBM Corporation42
(参考) IDSのプロジェクトを削除する
1)画面右上の「 」ボタンをクリックします。
2)左ペインの 「DELETE」をクリックすると、右ペインが切り替わるので、“DELETE”と入力し、「CONFIRM」をクリックします。これで完了です。
今回のハンズオンでは不要です
© 2015 IBM Corporation43
参考資料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/
© 2015 IBM Corporation44
参考資料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/
© 2015 IBM Corporation45
[ハンズオン3]
Buildpack を使用した
言語環境の拡張
© 2015 IBM Corporation46
Bluemix で提供されていない言語を使用するには
現在の Bluemix のカタログには、Java や Node.js、Ruby といった言語の実行環境が載っています。場合によっては、カタログに載っていない言語を使用する場面もあるかもしれません。
BluemixはオープンなPaaSである「Cloud Foundry(クラウド ファウンドリー)」をベースとしています。Cloud Foundryでは「ビルドパック」という仕組みで、任意の言語の実行環境を構築することが可能です。この仕組みを利用し、カタログに載っていない言語をBluemix上で使用できます。
© 2015 IBM Corporation47
ビルドパック ~ ランタイム追加の仕組み ~
任意のランライムに対するフレームワーク(実行基盤)を準備する仕組み
• 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
© 2015 IBM Corporation48
ハンズオン概要
このハンズオンでは、このような Bluemixでは標準で用意されていない言語を使用する方法について学びます。単純なHTMLファイルを表示するために、ビルドパックを使って、軽量なWebサーバーであるnginxをBluemix上で動かしてみます。
要件に応じて任意の言語を扱えるBluemixの柔軟性を体感してください!
なお、これまでのハンズオンでは、Webインターフェースを使ってBluemixを操作してきました。今回のハンズオンでは、コマンドラインインターフェース(CLI)を使用します。
nginx ビルドパック
Cloud Foundry CLI HTMLファイル
HTMLファイルデプロイ指示
プロジェクトのデプロイ
アプリケーションの実行
nginx 環境+アプリ
© 2015 IBM Corporation49
ハンズオン手順
ビルドパックによる言語環境の拡張を理解する
コマンドライン・インターフェース (CLI) を導入する
コマンドラインでBluemixにHTMLファイルをデプロイする
デプロイしたHTMLファイルを確認する
© 2015 IBM Corporation50
ビルドパックによる言語環境の拡張を理解する(1)
Bluemix上にnginxの環境を作るには、 nginxのビルドパックを使います。
ビルドパックはどこにあるのでしょうか?
Cloud Foundry のコミュニティが作成した、たくさんのビルドパックが GitHub というサイトで公開されています。 これを利用しましょう。
なお、GitHub とはソフトウェア開発プロジェクトのための共有サービスです。ソースコードや仕様情報などプロジェクトの様々な成果物が保管され、管理されています。 それでは実際にnginxのビルドパックを探してみましょう。
© 2015 IBM Corporation51
ビルドパックによる言語環境の拡張を理解する(2)
GitHub の Cloud Foundry コミュニティにアクセスしてみましょう。Bluemix のカタログのランタイムから、「ビルドパックの持込み」を選択します。
「ビルドパックの持込み」のダイアログボックスが表示されます。「既知の Cloud Foundry 互換ビルドパックの表示」のリンクをクリックします。
© 2015 IBM Corporation52
ビルドパックによる言語環境の拡張を理解する(3)
GitHub の Cloud Foundry コミュニティにアクセスしました。GitHubには様々なビルドパックが公開されていることを確認してください。
© 2015 IBM Corporation53
ビルドパックによる言語環境の拡張を理解する(4)
GitHubで公開されているnginxのビルドパックを探します。 ブラウザで「staticfile」を検索し、https://github.com/cloudfoundry-community/staticfile-buildpack
のリンクをクリックします。
• nginxというビルドパックも存在しますが、廃止予定のためstaticfileを使用します
staticfileのビルドパックのプロジェクトが表示されます。後程この URL を使用するので、Web ブラウザはそのままにしておいてください。
© 2015 IBM Corporation54
コマンドライン・インターフェース (CLI) を導入する (1)
https://github.com/cloudfo
undry/cli
にアクセスします。
下にスクロールし、「Downloads」セクションの「Stable Installers」から、環境に合ったモジュールをダウンロードし、導入します。
コマンドベースでBluemixを操作するために、Cloud FoundryのCLI(コマンドライン・インターフェース)を導入します。
© 2015 IBM Corporation55
cf コマンドが実行可能であることを確認します。コマンドプロンプトで “cf “と実行するとコマンドのヘルプが表示されます。
cf コマンドが認識されない場合は、導入ディレクトリーにパスが通っているかどうかを確認してください。
コマンドライン・インターフェース (CLI) を導入する (2)
© 2015 IBM Corporation56
コマンドラインでHTMLファイルをデプロイする(1)
Windows のコマンド・プロンプトを起動します。Windows のスタートメニュー、もしくはデスクトップのショートカットから起動します。
作業用に新しく空のディレクトリを作成します。(C:¥Bluemix)
作成したディレクトリに移動し、HTMLのサンプルファイル(index.html)をエディターで作成します。コマンドプロンプトから、以下のようにコマンドを実行してください。
エディター(メモ帳)が起動します。“Hello! Bluemix World!!”と表示される簡単なHTMLファイルです。
これを Bluemix にデプロイしてみます。
C:¥Bluemix>notepad index.html 作業用ディレクトリには他のファイルを置かない
ようにします
<h1>Hello Bluemix World!</h1>
© 2015 IBM Corporation57
コマンドラインで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
© 2015 IBM Corporation58
デプロイしたHTMLファイルを確認する(2)
Bluemix のダッシュボード画面に、今デプロイしたアプリケーション「nginxXXX」が表示されています。 シグナルが赤から緑に変わればデプロイは完了です。
「nginxXXX」のURLリンクをクリックして、サンプルのHTMLファイルが表示されることを確認してください。
© 2015 IBM Corporation59
参考資料1. ビルドパックを利用したその他のサンプル
統計処理用の言語であるRを使用して、Twitterのセンチメント分析のサンプルアプリケーションに関する記事がdeveloperWorksに公開されています。
ご興味がありましたら、以下のURLのリンク先をご参照いただき、サンプルアプリケーションを動かしてみてください。
• http://www.ibm.com/developerworks/jp/analytics/library/ba-rtwitter-app/
© 2015 IBM Corporation60
不要なアプリケーションとサービスを次の手順ですべて削除します。(質問のためなどで、とっておきたい場合は削除しなくても構いません。)
Bluemix のダッシュボード画面に、デプロイしたアプリケーションとサービスが表示されています。 緑色の歯車のアイコンをクリックし、”アプリの削除”を選択します。
アプリケーションと同時に、関連するサービスを削除するか聞かれる場合は、チェックを入れ、同時に削除します。
(参考)デプロイしたアプリケーションとサービスを削除する
ハンズオン5を行われる方は、ハンズオン1の環境を消さないでく
ださい。
© 2015 IBM Corporation61
[ハンズオン4]
Internet of Things
アプリケーションを作成する
© 2015 IBM Corporation62
ハンズオン手順
ボイラープレートでアプリケーションを作成する
Node-RED で IoT アプリを作成する
デプロイされたアプリケーションを確認する
© 2015 IBM Corporation63
ハンズオンの概要
Internet of Thingsのボイラープレート(後述)を使用して、クラウド上のセンサー・シミュレーターのデータを活用します。
ボイラープレートに含まれるNode-REDというツールを用いて、センサー・データ(温度、湿度など)を活用する IoT アプリをノンプログラミングで作成します。
センサー・シミュレーター
© 2015 IBM Corporation64
ボイラープレートでアプリケーションを作成する (1) Bluemix には予めランタイムやサービスを組み合わせたボイラープレート という
テンプレートが用意されています。これを利用することで、簡単に Bluemix アプリケーションを開発することができます。
Bluemix の カタログメニューにボイラープレートを確認してください。各ボイラープレートをクリックすると、それがどのランタイム、サービスを組み合わせたものか説明されています。
© 2015 IBM Corporation65
ボイラープレートでアプリケーションを作成する (2) Internet of Things Foundationをクリックします。このボイラー
プレートは、以下のコンポーネントから構成されていることが分かります。- SDK for Node.js
- Cloudant NoSQL DB
次のように入力し、 「作成」ボタンをクリックします。名前: iotsample+末尾に任意の文字列ホスト: 上記の名前がコピーされる
© 2015 IBM Corporation66
ボイラープレートでアプリケーションを作成する (3) 左上の、「ダッシュボードに戻る」をクリックします。
ダッシュボードに iotsample アプリケーションと Cloudant NoSQL DB のサービスが追加されることを確認します。
iotsample アプリケーションの状態が青信号になるのを待ち、右下のリンク・アイコンをクリックします。
© 2015 IBM Corporation67
Node-RED で IoT アプリを作成する (1)
Node-RED のページが表示されます。「Go to your Node-RED flow editor」ボタンをクリックし、Node-RED フロー・エディターを起動します。
IoT (Internet of Things) は家電、自動車、ウェラブル・デバイスなどあらゆる「モノ」をインターネットに接続し、お互いに情報をやりとりすることで新しい価値を生み出す概念です。Node-RED は、IoT のフローを構築するためのビジュアル・ツールで、開発したシステムを簡単に Bluemix にデプロイすることが可能になっています。ここでは、温度センサーにより取得したデータによって処理を変えるような IoT システムを作成していきます。
クリック
© 2015 IBM Corporation68
Node-RED で IoT アプリを作成する (2)
ここでは、Node-REDで接続するセンサーの情報を取得します。
Webブラウザーの新しいタブを開き、 ibm.biz/IoTsensor に接続します。IoT Sensorは、IoT Cloud に接続するデバイスをエミュレートし、気温、湿度、物体温度の情報を発信 (publish) することができます。
右上に当デバイスの MAC アドレスが表示されるので、メモしておきます。
タブは開いたままにしておいてください。後ほど
使用します。
© 2015 IBM Corporation69
Node-RED で IoT アプリを作成する (3)
Node-REDフロー・エディターによって、IoT アプリの処理フローを定義します。
サンプルのフローが以下のようにあらかじめ定義されているため、それらを削除してからハンズオンをすすめます。フローの削除は、マウスでシフトキーを押しながら全ノードを選択し、キーボードの Delete ボタンを押します。
© 2015 IBM Corporation70
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
「Ok」ボタンをクリックします。
© 2015 IBM Corporation71
Node-RED で IoT アプリを作成する (5) 次に、IoT Sensor のデータから温度データを取り出す function ノードを定義します。
パレットの functions:function をキャンバスにドラッグドロップし、ダブルクリックします。
Edit function node のダイアログ・ボックスで以下のように入力します。Name: temp
Function: return {payload:msg.payload.d.temp};
「Ok」ボタンをクリックします。
IoT Sensor と temp をマウスでつないでリンクします。
© 2015 IBM Corporation72
Node-RED で IoT アプリを作成する (6)
次に、温度データの条件分岐を指定する switch ノードを定義します。ここでは、温度40度以下と40度超で分岐するよう設定します。
パレットの functions:switch を中央のキャンバスにドラッグドロップし、ダブルクリックします。
Edit switch node のダイアログ・ボックスで以下のように入力します。Name: temp thresh
分岐条件に以下のようになるように追加( +rule ボタンをクリックして追加):if msg.payload
<= 40
> 40
「Ok」ボタンをクリックします。
temp と temp thresh をリンクします。
© 2015 IBM Corporation73
Node-RED で IoT アプリを作成する (7) 次に、条件ごとの処理を指定する template ノードを定義します。ここではメッセージ出
力をそれぞれ設定します。
パレットの functions:template を2つ、キャンバスにドラッグドロップします。
1つ目のEdit template node のダイアログ・ボックスをダブルクリックし以下のように入力します。Name: safe
Template:
Temperature ({{payload}}) within safe
limits
「Ok」ボタンをクリックします。
2つ目のEdit template node のダイアログ・ボックスには以下のように入力します。Name: danger
Template: Temperature ({{payload}}) critical
「Ok」ボタンをクリックします。
右図のようにリンクします。
© 2015 IBM Corporation74
Node-RED で IoT アプリを作成する (8) 最後に、処理結果をモニター出力するための debug ノードを定義します。
パレットの outputs:debug をキャンバスにドラッグドロップし、ダブルクリックします。
Edit debug node のダイアログ・ボックスで以下のように入力します。Output: message property を選択to: debug tab
Name: cpu status
「Ok」ボタンをクリックします。
template と cpu status を右図のようにリンクします。
© 2015 IBM Corporation75
Node-RED で IoT アプリを作成する (9)
これまでのステップで下図のようなフローができあがります。右上の「Deploy」ボタンをクリックし、アプリケーションをデプロイします。上部に “Successfully deployed” と表示されれば、Bluemix へのデプロイは成功です。
右側のサイドバーを debug タブに切り替えます。(必要に応じ、右側にウィンドウが表示されるよう操作します)
© 2015 IBM Corporation76
デプロイしたアプリケーションを確認する
別タブで開いておいたIoT Sensor の矢印ボタンをクリックし、温度を変更します。
IoT Sensor の温度が debug タブに出力され、40度以下のときは、”Temperature
(xx) within safe limits” と出力されることを確認します。
IoT Sensor の温度を上げて、40度を超えると “Temperature (xx) critical” と出力されることを確認します。
Node-RED を使いビジュアルにインターネット上のデバイスをワイヤリングし、Bluemix のnode.js 上にデプロイする手順を確認しました。お疲れ様でした!
© 2015 IBM Corporation77
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
© 2015 IBM Corporation78
[ハンズオン5]
Node.js アプリケーションからSQL Database を利用する
© 2015 IBM Corporation79
ハンズオン手順
ハンズオンの概要
SQL Databaseサービスを作成する
サンプルデータをロードする
IDSのプロジェクトを取り込み、保管する
設定ファイルを修正する
プロジェクトをデプロイする
デプロイしたアプリケーションを確認する
© 2015 IBM Corporation80
ハンズオンの概要
本ハンズオンでは、データベースにサンプルデータを投入し、Node.jsアプリケーションから参照する手順を確認します。
サンプルアプリケーションをIDSから取得し、Bluemixにデプロイします。
公開プロジェクト
プロジェクトの取り込み
プロジェクトの保管
モジュールのデプロイ
アプリケーションの実行
IBM DevOps Services
設定ファイル修正
SQLDatabase
の作成
サンプルデータの投入
© 2015 IBM Corporation81
サンプルアプリケーションの紹介
横浜市金沢区が公開しているAED設置場所データをGoogle Mapに表示
• http://www.city.yokohama.lg.jp/kanazawa/kz-opendata/kz-opendata.html
© 2015 IBM Corporation82
ハンズオン手順
ハンズオンの概要
SQL Databaseサービスを作成する
サンプルデータをロードする
IDSのプロジェクトを取り込み、保管する
設定ファイルを修正する
プロジェクトをデプロイする
デプロイしたアプリケーションを確認する
© 2015 IBM Corporation83
SQLデータベースサービスを作成する
「ハンズオン1」で作成したNode.js と SQL Database の環境を利用します。
© 2015 IBM Corporation84
ハンズオン手順
ハンズオンの概要
SQL Databaseサービスを作成する
サンプルデータをロードする
IDSのプロジェクトを取り込み、保管する
設定ファイルを修正する
プロジェクトをデプロイする
デプロイしたアプリケーションを確認する
© 2015 IBM Corporation85
サンプルデータをロードする (1/8)
1.サンプルデータをWebから取得します。Webブラウザを起動し、「金沢区データポータル」にアクセスします。https://ibm.biz/BdEApk
2.「AED設置場所」をクリックしてCSVファイルを保存します。ファイル名はデフォルトの ”3-kz-somu.csv” のままで結構です。
© 2015 IBM Corporation86
サンプルデータをロードする (2/8)3.Bluemixのダッシュボードより、ハンズオン1で作成したSQL Databaseサービスをクリックします。
4. Launch をクリックしてSQL Database のコンソールを起動します。
© 2015 IBM Corporation87
サンプルデータをロードする (3/8)
5.Load Dataをクリックします。
© 2015 IBM Corporation88
サンプルデータをロードする (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ファイルを指定
© 2015 IBM Corporation89
サンプルデータをロードする (5/8)
7.サンプルデータのCSVファイルの内容が表示されていることを確認し、”Next” をクリックします。
© 2015 IBM Corporation90
サンプルデータをロードする (6/8)
8.”Create a new table and load” にチェックを入れ、”Next” をクリックします。
© 2015 IBM Corporation91
サンプルデータをロードする (7/8)
9.”Table name” を 「AEDKANAZAWA」に変更します。
10.Columnを以下のとおり変更し、”Finish” をクリックします。名称 ⇒ NAME 住所 ⇒ ADDRESS緯度 ⇒ LATITUDE 経度 ⇒ LONGITUDEAEDの数 ⇒ AED 更新日 ⇒ UPDATE
© 2015 IBM Corporation92
サンプルデータをロードする (8/8)
11.ロードしたテーブルを確認します。左上の「Manage」から「Work with Table」を選択します。
12.左側に表示されている「AEDKANAZAWA」をクリックすると、右側にテーブルの情報が表示されます
© 2015 IBM Corporation93
ハンズオン手順
ハンズオンの概要
SQL Databaseサービスを作成する
サンプルデータをロードする
IDSのプロジェクトを取り込み、保管する
設定ファイルを修正する
プロジェクトをデプロイする
デプロイしたアプリケーションを確認する
© 2015 IBM Corporation94
IDSのサンプルプロジェクトを取り込み、保管する (1/4)
ハンズオン1で作成したアプリと経路を削除します。(SQLDBはそのまま使用)その後、公開プロジェクトからコードを取り込みます。
Bluemixのダッシュボード画面で、ハンズオン1で作成した、Node.jsアプリのアイコン右上のマークをクリックし、アプリの削除をクリックします。
下図のように、サービスのチェックをはずし、経路のチェックを入れて、削除をクリックします。
??????
?????????
???????????????????????
© 2015 IBM Corporation95
IDSのサンプルプロジェクトを取り込み、保管する (2/4)
1.IDS上に公開されているサンプルアプリケーションにアクセスします。YokohamaAEDMap:https://ibm.biz/BdEA8b
2.画面上部の 「SIGN IN」 をクリックします。
3.IBM ID、パスワードを入力して「Sign in」ボタンをクリックします。
4.プロジェクトをフォークします。「FORK PROJECT」をクリックしてください。
© 2015 IBM Corporation96
IDSのサンプルプロジェクトを取り込み、保管する (3/4)
5.任意のプロジェクト名を指定して「CREATE」ボタンをクリックします。
この例では YokohamaAEDMap という
プロジェクト名を指定しています
デプロイ先として、Region に US South、Organization に正しい IBM ID が指定されていることを確認し、「CREATE」をクリックします。
© 2015 IBM Corporation97
IDSのサンプルプロジェクトを取り込み、保管する (4/4)
6.フォーク処理が完了し、自分のプロジェクトとして保管されたことを確認します。
© 2015 IBM Corporation98
ハンズオン手順
ハンズオンの概要
SQL Databaseサービスを作成する
サンプルデータをロードする
IDSのプロジェクトを取り込み、保管する
設定ファイルを修正する
プロジェクトをデプロイする
デプロイしたアプリケーションを確認する
© 2015 IBM Corporation99
設定ファイルを修正する (1/2)
1.Bluemixにデプロイする際の情報を記述する設定ファイルである manifest.yml を編集します。前のページで取り込んだプロジェクトの”EDIT CODE”をクリックします。
2.manifest.yml クリックします。
© 2015 IBM Corporation100
設定ファイルを修正する (2/2)
3.以下の箇所を修正します。■ <Your SQL Database Name>:使用するSQL Databaseの名称です。
ハンズオン1で作成した「SQL Database」サービスの名称を入力してください。■ <Your Host Name>:アプリケーションのホスト名です。
他のユーザーとも重ならない任意の名前を入力してください。■ <Your Application Name>:アプリケーションの名称です。
他のアプリケーションと重複しない任意の名前を入力してください。
以下は編集後の manifest.yml の例です。
© 2015 IBM Corporation101
ハンズオン手順
ハンズオンの概要
SQL Databaseサービスを作成する
サンプルデータをロードする
IDSのプロジェクトを取り込み、保管する
設定ファイルを修正する
プロジェクトをデプロイする
デプロイしたアプリケーションを確認する
© 2015 IBM Corporation102
プロジェクトをデプロイする(1/2)
1.「 」 ボタンをクリックします。
2.Bluemix の上部メニューから「ダッシュボード」をクリックします。
© 2015 IBM Corporation103
プロジェクトをデプロイする(2/2)
3.ダッシュボードにIDSからデプロイしたアプリケーションが表示されます。
デプロイ操作の直後は環境作成中のため、ステータスが赤(実行不可)の状態ですが、しばらく待って画面を更新するとステータスが緑(実行可能)に変わります。
それではアプリケーションを実行してみましょう。
シグナルが緑になっているのを確認し、
アプリケーションのリンクをクリックします。
© 2015 IBM Corporation104
ハンズオン手順
ハンズオンの概要
SQL Databaseサービスを作成する
サンプルデータをロードする
IDSのプロジェクトを取り込み、保管する
設定ファイルを修正する
プロジェクトをデプロイする
デプロイしたアプリケーションを確認する
© 2015 IBM Corporation105
デプロイしたアプリケーションを確認する
1.表示された画面の”AED位置情報取得”をクリックします。
地図上にAEDの位置が表示されます。マーカーをクリックすると、AED設置場所の情報が表示されます。
© 2015 IBM Corporation106
[補足資料]
サンプルプログラムのポイント説明
© 2015 IBM Corporation107
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/
© 2015 IBM Corporation108
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にデプロイするための情報を記述
© 2015 IBM Corporation109
クライアントからのリクエストを処理する
ブラウザからのリクエスト処理は、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)とまとめることも可能
© 2015 IBM Corporation110
(参考)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 など
© 2015 IBM Corporation111
SQL Databaseに接続する(1/2)
データベースへの接続情報は、VCAP_SERVICESという環境変数に格納されている
• Bluemixのダッシュボードより、アプリケーションを選択し、左側メニューの「環境変数」をクリックする
今回のサンプルアプリでは、この環境変数を取得してDBに接続するように設定されているため個別に指定しなくてもアプリからDBが使用できるようになっています(次ページ参照)
© 2015 IBM Corporation112
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(){});
};});