IBM Bluemixハンズオン

Bluemixの基本のハンズオン。
まずはこれを学んでおくと基本が分かります。
3時間ほどのハンズオンです。

Transcript

1. IBM Bluemix 体験ハンズオン ⽇本アイ・ビー・エム株式会社 森住 祐介
2. © IBM Corporation 2 ⾃⼰紹介 @ymorizumi 森住 祐介（もりずみ ゆうすけ） クラウド・エバンジェリスト developerWorks⽇本語版 編集⻑ 主な仕事： クラウド・エバンジェリストとして講演や提案 スタートアップ⽀援 デベロッパー⽀援 デベロッパー向けメディアの企画・編集
3. © IBM Corporation 3 IBM Bluemix Hands-on Agenda 1. Bluemixの基本操作 2. クラウドベースの統合開発環境 IBM Bluemix DevOps Services 3. Node-REDでIoTアプリ開発 [IoT Platform編] 4. Node-REDでIoTアプリ開発 [Cloudant編] 5. Node-REDでIoTアプリ開発 [Webアプリ編]
4. © IBM Corporation 4 IBM Bluemixはハッカソンに最適なクラウド基盤 開発者 わずか30秒 で クラウド上にアプリの 実⾏環境を作成 カタログからサービス(API)を ⾃由に組み合わせて連携 環境セットアップの⼿間と時間を削減 ランタイム アプリ IoT IoT NoSQL NoSQL NoSQL NoSQL NoSQL Watson IoT 開発者が開発に専念できる基盤
5. © IBM Corporation 5 IBM Bluemix DevOps Services Bluemixと統合された開発環境クラウドサービス -Webブラウザでアクセス可能な統合開発環境 -開発環境と実⾏環境を同時にクラウドから調達 名称 説明 Web IDE Eclipse Orionをベースとしたブラウザ上で稼動する統合開発 環境。多数の⾔語に対応したエディタを備える Code Management ソースコード等の構成管理のためのリポジトリを備える。 クラウド上にホストされたGit、JazzSCMの他、GitHubとの 接続も可能 Delivery Pipeline Bluemix環境向けにアプリケーションを⾃動的にビルド・デ プロイするパイプライン機能を提供 Track and Plan チーム開発におけるアジャイルベースの計画および作業管 理を⾏うための機能を提供（Rational Team Concertと同等）
6. © IBM Corporation 6 Bluemixの基本操作
7. © IBM Corporation 7 Bluemixへのログイン ▪Webブラウザを起動し、下記URLより Bluemix にログインします。 使⽤するブラウザは「Firefox」、「Chrome」もしくは「Safari」推奨です。 http://bluemix.net ▪右上部の「ログイン」をクリック。 ▪IBM ID（メールアドレス）とパスワードを⼊⼒し、「LOG IN」ボタンをクリック。
8. © IBM Corporation 8 Bluemixへのログイン ▪「ようこそ」の画⾯が表⽰されればログイン完了です。
9. © IBM Corporation 9 アプリケーション実⾏環境の構築 ▪Bluemix上に下の図のようなWeb-DBシステムを作ってみましょう。 コードを実⾏するAppサーバーとしてNode.js、DBサーバーとしてdashDBを使⽤します。 Webアプリ サーバー データベース サーバー ルーター
10. © IBM Corporation 10 アプリケーション実⾏環境の構築 ▪トップページに表⽰されたカテゴリの中から「計算」をクリック。 読み込み中 の状態でOK Cloud Foundry アプリケーション ▪「Cloud Foundryアプリケーション」のタブが選択されていることを確認し、右上の 「+」ボタンをクリックします。
11. © IBM Corporation 11 アプリケーション実⾏環境の構築 ▪カタログページが表⽰されます。ランタイムカテゴリの中から、サーバーサイドの JavaScript実⾏環境である「SDK for Node.js」を選択します。
12. © IBM Corporation 12 アプリケーション実⾏環境の構築 ▪初めてBluemixを使⽤する場合、「組織の作成」画⾯が表⽰されます。 地域は「⽶国南部」、組織名はメールアドレスを指定し、「作成」をクリックします。 好きな名前を 付けてもOK 組織の作成は初回のみ 必要な作業です。 設定済みの⽅は、 地域が「⽶国南部」に なっていることを確認し、 P.14に進んでください。 現在の地域を確認するに は、最上段右のアイコン をクリック。
13. © IBM Corporation 13 アプリケーション実⾏環境の構築 ▪続いて「スペースの作成」画⾯が表⽰されます。 任意の名前を付けて「作成」をクリックします。本資料では「dev」とします。 ▪「準備ができました」をクリックします。 好きな名前を 付けてもOK
14. © IBM Corporation 14 アプリケーション実⾏環境の構築 ▪あらためて、Node.jsの環境を作成します。 「概要」→「計算」→「+」ボタン→「SDK for Node.js」とクリック。
15. © IBM Corporation 15 アプリケーション実⾏環境の構築 ▪アプリケーション名を指定し、右下の「作成」をクリック。 環境の作成が始まります。 アプリ名は任意の⽂字列で 構いませんが、 http://xxx.mybluemix.net というURLでインターネットに 公開されるので、重複しない 名前である必要があります。 アプリ名の欄に⼊⼒すると、 同じ名前がホスト名として 指定されます
16. © IBM Corporation 16 アプリケーション実⾏環境の構築 ▪状況欄に「アプリは実⾏中です」と表⽰されれば環境構築は完了です。 「アプリの表⽰」をクリックして、作成したNode.jsのサーバーにアクセスしてみます。 ▪サンプルアプリが実⾏され「Hi there!」 と表⽰されればOKです。 これでクラウド上にアプリの実⾏環境が 構築できました！
17. © IBM Corporation 17 サービスの追加 ▪作成したNode.jsのバックエンドにサービスを追加してみましょう。 「接続」→「新規に接続」とクリックし、アプリにサービスを追加します。
18. © IBM Corporation 18 サービスの追加 ▪サービスカタログが表⽰されます。 データベースのサービスを接続してみましょう。「dashDB」を選択します。
19. © IBM Corporation 19 サービスの追加 ▪dashDBの機能や料⾦の説明など詳細仕様が表⽰されます。 サービス名はデフォルトのままで結構です。接続対象として先ほど作成したNode.jsのアプ リ名が設定されていることを確認し、右下の「作成」をクリックします。
20. © IBM Corporation 20 サービスの追加 ▪アプリケーションの再ステージを確認するダイアログボックスが表⽰されるので、「再ス テージ」をクリック。 ▪「アプリは実⾏中です」のメッセージが表⽰されれば 完了です。 これだけの操作でクラウド 上にWeb-DBシステムが構 築できました！ Node.js dashDB dashDBが追加 されたことを確 認してください
21. © IBM Corporation 21 クラウドベースの 統合開発環境 IBM Bluemix DevOps Services
22. © IBM Corporation 22 開発環境の準備 ▪サンプルアプリをクラウド上の開発環境に取り込みます。 アプリケーションの「概要」をクリック。 ▪左下の「継続的なデリバリー」欄の「Gitリポ ジトリーおよびパイプラ…」をクリック。
23. © IBM Corporation 23 開発環境の準備 ▪初めてBluemix DevOps Servicesを使⽤する場合、IBM IDに対応する別名を設定します。 別名は英⼩⽂字と数字のみ指定可能です。 WebブラウザがCookieを受け⼊れる 設定になっている必要があります
24. © IBM Corporation 24 開発環境の準備 ▪サンプルアプリのコードをBluemix DevOps Servicesのリポジトリに取り込みます。 チェックボックスにチェックが⼊ってることを確認して「続⾏」をクリック。 ▪完了のメッセージを確認して 「閉じる」をクリック。
25. © IBM Corporation 25 開発環境へのアクセス ▪開発環境のGitリポジトリーにサンプルアプリのコードが格納されました。 それではクラウドベースの開発環境、IBM Bluemix DevOps Servicesにアクセスしてみましょう。 ▪左下の「継続的なデリバリー」欄の 「コードの編集」をクリック。
26. © IBM Corporation 26 開発環境へのアクセス ▪Webブラウザの新規ウィンドウ(タブ)にて、Bluemix DevOps Servicesが開きます。 先ほど取り込んだサンプルアプリのコードが表⽰されていることを確認してください。 サンプルアプリのコード がツリー構造で表⽰され ています
27. © IBM Corporation 27 アプリケーションの修正 ▪サンプルアプリのコードを編集してみましょう。 左側のツリー表⽰から public ディレクトリを展開し index.html を選択します。 ▪表⽰内容を変更してみましょう。 18⾏⽬、<h1>タグの中の 「Hi there!」を他の⽂字列に置き換えます。
28. © IBM Corporation 28 アプリケーションのデプロイ ▪編集したコードをBluemixにデプロイしてみましょう。 上部メニューのデプロイボタンをクリックします。 再デプロイの確認画⾯は「OK」をク リック。 ▪デプロイが完了するとシグナルが緑に戻ります。アプリケーションを開いて変更を確認します。 ▪正しくコードの修正が反映されていることを確認してください。
29. © IBM Corporation 29 Node-REDによる IoTアプリ開発 [IoT Platform編]
30. © IBM Corporation 30 Node-REDとは ▪Webブラウザベースのフローエディタ ▪様々なパーツ（ノード）を組み合わせることで処理ロジックを作成可能 ▪要件に応じて新たにノードを追加することも可能
31. © IBM Corporation 31 Node-RED : インターフェース シート キャンバス 処理フロー ノードパレット ノード デプロイボタン Node情報ウィンドウ または デバッグコンソール 表⽰情報の 切り替えタブ メニューボタン
32. © IBM Corporation 32 ハンズオンの前に ‒ サンプルフローの削除 ▪IoT Platformボイラープレートで作成したNode-REDには、デフォルトの状態でサン プルの フローが⽤意されています。 今回のハンズオンでは不要ですので削除します。 ▪ノードを選択して、Deleteキーで削除できます。ひとつずつ削除するのは⾯倒なの で、「Ctrl」+「A」キーでシート上のすべてのノードを選択し、Deleteキーで⼀括削 除します。 選択されたノードはオレンジ⾊の線で囲ま れます その他のショートカットキーは右上端のメニューか ら「Keyboard Shortcuts」で確認できます
33. © IBM Corporation 33 Node-RED : 操作の流れ ②ノード間を接続 ④Deployで実⾏ ③ノードプロパティ設定 ①ノードを選択し ドラッグ＆ドロップ
34. © IBM Corporation 34 Node-REDによるIoTアプリ開発 ‒ システムイメージ IoT Platform デバイス IBM Bluemix アプリケーション スマホのセンサーで計測した データをクラウドサービスに送信 サービス アプリはサービスからセンサー データを取得して処理する IoT Platform サービスは センサーデータを仲介する
35. © IBM Corporation 35 Node-REDによるIoTアプリ開発 – コンポーネント図 Cloudant NoSQL DB Internet of Things Platform US South MQTT HTTP
36. © IBM Corporation 36 IoT環境の作成 ▪Bluemix上にIoTアプリの開発/実⾏に必要な環境をセットアップします。 最上部のプルダウンメニューから「計算」をクリックします。
37. © IBM Corporation 37 IoT環境の作成 ▪右上の「+」ボタンをクリックすると、丸いアイコンがたくさん並んだカタログページが表 ⽰されます。 ▪Bolerplatesカテゴリの中から「Internet of Things Platform Starter」をクリックします。
38. © IBM Corporation 38 IoT環境の作成 ▪IoT Platformボイラープレートをデプロイします。 ▪任意のアプリ名を指定します。 ▪右下の「Create」をクリック。
39. © IBM Corporation 39 IoT環境の作成 ▪状況欄に「アプリは実⾏中です」と表⽰されればデプロイ完了です。 「アプリの表⽰」をクリック。 ▪Node-REDが起動すればOKです。 クリック
40. © IBM Corporation 40 IoTアプリの作成 ▪ 「tiltLR」の値によって処理を分岐させます。 左側のパレットから「switch」ノードを中央のキャンバスにドラッグ＆ドロップします。 ダブルクリックで設定画⾯を開き、分岐条件を指定します。 左に5度以上傾いた場合＝「左に傾いてます」 右に5度以上傾いた場合＝「右に傾いてます」 傾きが5度未満の場合＝「ほぼフラットです」 上記のような条件設定をするには 右図のように指定して「OK」を クリックします。 傾きが-5度以上(左)なら1番へ 傾きが5度以上(右)なら2番へ どちらでもない(フラット)なら3番へ この部分をクリックして データ型をnumberに 変更します 条件を追加するには、 「+rule」 ボタンをクリックします。
41. © IBM Corporation 41 IoTアプリの作成 ▪スマートフォンをお持ちの⽅は、 スマホのブラウザで下記URLに アクセスしてください。 http://phonesensor.mybluemix.net ▪PhoneSensorが起動します。スマホに内蔵された各種 センサーの情報を取得し、BluemixのIoT Platform サービスにデータを送信しています。 ▪このセンサー情報を受け取って処理するアプリを Bluemix上のNode-REDで作ってみましょう。
42. © IBM Corporation 42 IoTアプリの作成 ▪スマホのセンサー情報を、BluemixのIoT Platformサービス から受け取ってみましょう。 左側のパレットから「ibmiot」ノードを中央のキャンバス にドラッグ＆ドロップします。 ドラッグ＆ドロップ ▪キャンバスにドロップした「IBM IoT」ノードをダブルクリックして設定画⾯を開きます。 Device Id に先程スマホでアクセスしたPhoneSensorに 表⽰されているquickstart:phone-sensorの後に記載 されている12桁の数字を⼊⼒して「OK」をクリック。 この数字を 転記する
43. © IBM Corporation 43 IoTアプリの作成 ▪受け取ったデータを表⽰するノードを配置します。 左側のパレットから「debug」ノードをキャンバスに ドラッグ＆ドロップします。 ドラッグ＆ドロップ ▪ノードの横にあるコネクタをクリック＆ホールドし、 「IBM IoT」ノードと「debug」ノードを線で繋ぎます。 この部分を掴んで引っ張る ノード間が繋がると線が⿊くなる
44. © IBM Corporation 44 IoTアプリの作成 ▪これでデータの⼊⼒と出⼒の定義ができました。 それでは作成したフローを動かしてみましょう。 右上の「Deploy」ボタンをクリックします。 画⾯上部に「Successfully deployed」と表⽰されれば OKです。（このメッセージはすぐに消えます） ▪実⾏結果を確認してみましょう。 右上の「debug」タブを選択します。debugノードに流れて きたデータはここに表⽰されます。 先程のPhoneSensorを動かします。スマホのセンサー情報が debug画⾯に表⽰されれば成功です。
45. © IBM Corporation 45 IoTアプリの作成 ▪debug画⾯にセンサーデータがうまく表⽰されない場合のチェックポイント -PhoneSensorが正しく稼動しているかどうかを確認してください。スリープ状態で アプリが 停⽌していないでしょうか。 -PhoneSensorの接続ステータスが「Connected」になっていることを確認してくだ さい。例えば、誤ってPhoneSensor画⾯下部の「Register」をタップしてしまうと、 ステータスが 「Disconnected」になります。 -「IBM IoT」ノードのDevice Idが 正しく設定されているかどうかを ご確認ください。 スマホのWebブラウザで PhoneSensorを再読み込みすると Device Idが変わってしまいます。 その場合は再度「IBMIoT」ノードの 定義情報をPhoneSensor側と 同じになるよう変更してください。
46. © IBM Corporation 46 IoTアプリの作成 ▪正しくセンサー情報が取得できたので、この情報に応じて何らかの処理を⾏うフローを作っ てみましょう。 「tiltLR」というデータ項⽬に着⽬します。 これはスマホ端末の左右の傾きを測定しているようです。 実際に端末を動かして、値の変化を確認してください。 この傾き度合いによって表⽰メッセージを変えてみましょう。 ▪センサー情報から「tiltLR」の値だけを抽出します。 左側のパレットから「function」ノードをキャンバスに ドラッグ＆ドロップします。 ダブルクリックで設定画⾯を開き、Functionの内容を 以下のように書き換えて「OK」をクリックします。 return {payload:msg.payload.d.tiltLR};
47. © IBM Corporation 47 IoTアプリの作成 ▪正しく動くかどうか確認してみましょう。 「IBMIoT」と「debug」との間に、今作成し た 「function」ノードを挟むように線を繋ぎ変え ます。 ▪不要な情報が削除されて、「tiltLR」の値だけが 表⽰されればOKです。 スマホの傾きを変えて、tiltLRの数字が変化するこ とを 確認してください。 ▪右上の「Deploy」ボタンをクリックし ます。
48. © IBM Corporation 48 IoTアプリの作成 ▪条件分岐された後の処理を作成します。 左側のパレットから「template」ノードを中央のキャンバス にドラッグ＆ドロップします。 ダブルクリックで設定画⾯を開き、表⽰するメッセージを定 義します。 ご⾃由にメッセージの内容を⼊⼒してください。 {{payload}} と指定すると、先程 debug画⾯で確認した傾きデータ の値が表⽰されます。 1番(左) 2番(右) 3番(フラット) ▪3つのtemplateノードを作成し、 最後にswitchノードと線で繋げます。
49. © IBM Corporation 49 IoTアプリの作成 ▪キャンバスの中を整理して、各ノードを以下の図のように接続してくださ い 正しく線が繋がっていれば、ノー ド⾃体はキャンバス内のどこに置 かれていても動作に影響はありま せん。 ▪処理フローが完成しました！ それでは実際に動かしてみましょう。 右上の「Deploy」ボタンをクリックします。
50. © IBM Corporation 50 IoTアプリの作成 ▪デプロイが完了したら、PhoneSensorを稼動させた スマホを左右に傾けてメッセージが正しく表⽰されることを 確認してください。 お疲れ様でした！ IBM Bluemix と Node-RED によって、 ほぼノンプログラミングでIoTデバイスから収集し たデータを処理するロジックが作れました。
51. © IBM Corporation 51 IoTアプリの作成 ‒ 発展 ▪余裕のある⽅は、以下のようにフローを拡張する⽅法を考えてみてください。 1. スマホを振るとTwitterにアラートメッセージを投稿する 2. 左右の傾きに加えて、前後の傾きの値もチェックしてメッセージを表⽰する 3. debugコンソールへのメッセージの出⼒頻度を変更する 4. メッセージにタイムスタンプを付加して出⼒する 例えばX軸加速度(accelX)の値が8以上の場合にTweetするという実装ができます。 前後の傾き(tiltFB)の値を条件として分岐させます。 さらにtiltLRとtiltFBの両⽅の値から、「右前に傾いている」、「左後ろに傾いてい る」というメッセージを表⽰することもできそうですね。 functionノードでタイムスタンプの取得と出⼒内容の加⼯ができます。 次の演習「Cloudant編」を参照。 delayノードで頻度を調整できます。
52. © IBM Corporation 52 Node-RED環境の保護 ▪デフォルトでは、Node-REDはURLが分かれば誰でもアクセスできる状態になっています。 作成したフローを保護するため、IDとパスワードによるアクセス制限を⾏ってみましょう。 ▪Node-REDのランタイムのメニューで「ランタイム」→「環境変数」をクリック。
53. © IBM Corporation 53 ▪環境変数を⼆つ追加します。 「追加」をクリックするとフォームが表⽰されるので、「NODE_RED_USERNAME」お よび「NODE_RED_PASSWORD」の⼆つの環境変数を定義し、それぞれ値を⼊⼒します。 完了したら「保存」をクリック。 フォーム右端のペンのアイコンをクリックすると、 ⼊⼒できるようになります。 Node-RED環境の保護
54. © IBM Corporation 54 Node-RED環境の保護 ▪WebブラウザでNode-REDにアクセスすると、ユーザーIDとパスワードを要求される ようになります。
55. © IBM Corporation 55 Node-REDによる IoTアプリ開発 [Cloudant編]
56. © IBM Corporation 56 センサーデータのDBへの格納 ▪スマホのセンサー情報をデータベースに格納してみましょう。 ここではNoSQL DBの Cloudantを使⽤するものとします。 ▪パレットから「cloudant」ノードをキャンバスにドラッグ＆ドロップで配置します。 storage カテゴリ内 左側だけに コネクタあ り
57. © IBM Corporation 57 センサーデータのDBへの格納 ▪cloudantノードをダブルクリックして設定画⾯を表⽰します。 Database欄には、データを格納するDBの名前を付けます。ここでは”sensor”とします。 Operation欄は、データを追加するので”insert”のままでOKです。 「Only store msg.payload object」のチェックボックスをONにして、「OK」をクリックしま す。
58. © IBM Corporation 58 ▪IBMIoTノードとCloudantノードを接続すれば、センサーデータはDBに格納されますが、 この演習ではデータを加⼯した上で、データベースに格納してみましょう。 ▪データを加⼯する処理を追加するため、functionノードをキャンバスに配置し、ダブルク リックで設定画⾯を表⽰します。 センサーデータのDBへの格納
59. © IBM Corporation 59 ▪Function欄にデータを加⼯するコードを コピー＆ペーストで貼り付け(上書き)して 「OK」をクリック。 ここで設定している内容は下記の通り 1. タイムスタンプを付加する (ISO 8601フォーマット) 2. DBに格納するセンサーデータを前後左右 の傾き(tiltLR, tiltFB)とX軸の加速度 (accelX)のみとする コードは下記URLにあります。 function_node.js の内容を コピー＆ペーストしてください。 https://ibm.biz/PhoneSensor （PとSのみ⼤⽂字です） センサーデータのDBへの格納
60. © IBM Corporation 60 ▪IBMIoTからfunction、functionからsensorと線を繋いでフローを完成させます。 ここを繋 ぐ ここを繋 ぐ ▪それでは実⾏してみましょう。 右上の「Deploy」ボタンをクリックしてデプロイした上で、しばらくの間スマホのPhone Sensorを動かしてみてください。 センサーデータがDBに追加されているはずです。 センサーデータのDBへの格納
61. © IBM Corporation 61 Cloudant DBへのアクセス ▪DBに格納されたデータを確認してみましょう。 Bluemixの上段の「コンソール」→「データ＆分析」をクリックし、Get Startedの画⾯の下 段にある「Cloudant NoSQL DB」をクリック。
62. © IBM Corporation 62 ▪Cloudantの管理画⾯で右上の「LAUNCH」ボタンをクリック。 ▪Cloudantのコンソールが起動するので 演習で作成した”sensor”DBをクリック。 Cloudant DBへのアクセス
63. © IBM Corporation 63 ▪DB内に複数のドキュメント（データ）が格納されていることが確認できます。 しかし、肝⼼のセンサーデータが表⽰されていませんね。 ペンのアイコンをクリックして編集モードにすると、それぞれのドキュメントの中⾝を参照で きます。 戻るときは ここをクリック 加⼯されたセンサーデータ がDBに格納されています Cloudant DBへのアクセス
64. © IBM Corporation 64 ▪別の⽅法もあります。上部メニューの「Docs」にチェックを⼊れると、⼀覧表⽰のまま ドキュメントの内容（センサーデータ）を参照することができます。 加⼯されたセンサーデータ がDBに格納されています Cloudant DBへのアクセス
65. © IBM Corporation 65 Cloudant DBの索引検索 ▪tiltLRをキーにして索引を付けてみましょう。 DatabasesメニューのAll Documentsの「+」をクリックし、プルダウンメニューから 「Query Indexes」を選択します。 ▪indexの定義フォームの4⾏⽬を“tiltLR”と変 更し、「Create index」をクリックします。
66. © IBM Corporation 66 Cloudant DBの索引検索 ▪新たに索引が追加されたことを確認してください。 それでは作成した索引を使ってデータを検索してみましょう。「<」ボタンをクリック。 tiltLRをキーとした 索引が追加されました ▪Databasesメニューから「Query」を選択。
67. © IBM Corporation 67 ▪DBに投げるクエリーをjson形式で定義します。 「Cloudant Query」欄にクエリーを⼊⼒して 下部の「Run Query」ボタンで実⾏します。 { "selector":{ "tiltLR": { "$gt": 60 } }, "fields": [ "timestamp", "tiltLR", "tiltFB", "accelX" ], "sort": [ { "tiltLR": "asc" } ], "limit": 20 } クエリーは下記URLにあります。 cloudant_query.json の内容を コピー＆ペーストしてもOKです。 https://ibm.biz/PhoneSensor （PとSのみ⼤⽂字です） Cloudant DBの索引検索
68. © IBM Corporation 68 Cloudant DBの索引検索 ▪実⾏結果が表⽰されます。 検索条件の通り、tiltLRの値が60より⼤きいデータが昇順で最⼤20件リストされてい ることを確認してください。 また、項⽬として下記の4つが 取得できています。 “timestamp” “tiltLR” “tiltFB” “accelX”
69. © IBM Corporation 69 REST APIでCloudant DBアクセス ▪CloudantをREST APIを使って操作してみましょう。 ▪CloudantコンソールのURL欄から、ドメイン名までの⽂字列をコピーします。 「https://xxxxx-bluemix.cloudant.com/」の部分です。 ▪Webブラウザの別ウィンドウ（タブ）にコピーした⽂字列を貼り付けて、末尾に 「_all_dbs」を付けてアクセスします。 「https://xxxxx-bluemix.cloudant.com/_all_dbs」となります。 Cloudantに存在するDBが表⽰されました。 Cloudantでは REST APIのGETメソッドでDBの⼀覧にアクセスできます。
70. © IBM Corporation 70 REST APIでCloudant DBアクセス ▪Sensor DBに登録されたデータを確認してみましょう。 Webブラウザで 「https://xxxxx-bluemix.cloudant.com/sonsor/_all_docs」にアクセスします。 DB内に格納されているドキュメント（データ）の⼀覧が表⽰されました。 ▪取得するドキュメント数を制限することもできます。 例えば末尾にURLの末尾に「?limit=20」を付加すると、最⼤20件のデータだけが表⽰されます。 「https://xxxxx-bluemix.cloudant.com/sonsor/_all_docs?limit=20」です。 しかし、肝⼼のセンサーデータが表⽰されていませんね。
71. © IBM Corporation 71 ▪ドキュメントの内容を参照するには、https://<ホスト名>/<DB名>/<ID番号>を指定します。 表⽰されているドキュメントの⼀覧から、どれかひとつ、idの値をコピーします。 例えば「0f62e7f3b10926e5d20a5dfc3c80bce1」をコピーします。ダブルクォーテーション は不要。 ▪ID番号を末尾に付けて 「https://xxxxx.buemix.cloudant.com/sonsor/0f62e7f3b10926e5d20a5dfc3c80bce1」にアクセス します。 ドキュメントの中⾝、センサーデータが表⽰されました！ idの値を コピーする <コピーしたidの値> REST APIでCloudant DBアクセス
72. © IBM Corporation 72 ▪別の⽅法もあります。 URLのパラメーターとして、「?include_docs=true」と指定することで、ドキュメントの中 ⾝も 取り出すことができます。 ▪limitパラメータと併⽤する場合は、 「https://xxxxx-bluemix.cloudant.com/sensor/_all_docs?include_docs=true&limit=10」 のように、「&」で繋いで指定します。 このようにCloudant は REST APIによって操作することができます REST APIでCloudant DBアクセス
73. © IBM Corporation 73 REST APIでCloudant DBアクセス （応⽤） ▪先程作成した索引を使ってデータを照会してみましょう。 REST APIのPOSTメソッドでアクセスします。以下、その⼿順をご紹介します。 ▪CloudantはデータをJSONフォーマットで、⽂字コードはUTF-8で扱うため、HTTPヘッダー でContent-Type を 「application/json;charset=UTF-8」と指定します。 PostmanやAdvanced REST clientなどの アドオンやツールを導⼊済みの⽅はトライして みてください
74. © IBM Corporation 74 ▪検索を⾏うには「POST」メソッドで、 https://<ホスト名>/<DB名>/_find にアクセスしま す。 今回の例では「https://xxxxx-bluemix.cloudant.com/sensor/_find」となります。 ▪Bodyに検索条件をjson形式で指定します。 P.66と同じクエリー を指定します REST APIでCloudant DBアクセス （応⽤）
75. © IBM Corporation 75 ▪HTTPレスポンスとしてSensor DBの検索結果が返ってきます。 REST APIのPOSTメソッドで 検索条件を指定してデータを 照会できました！ REST APIでCloudant DBアクセス （応⽤）
76. © IBM Corporation 76 Cloudant No-SQLサービスの特⻑ ▪Cloudantはオープンソースとして実績のあるApache CouchDBをベースに、エンタープライ ズでの使⽤を意識して機能強化したクラウドベースのNoSQLデータベースです。 JSONデータ・ストア -モバイルやセンサーデバイスで幅広く使⽤される JSONフォーマットでデータを取り扱う -厳密なスキーマ定義を必要としない⾼い柔軟性により、クイックにアプリ実装が可能 JSON形式 : {“timestamp”:“2016-06-20T14:35:06Z”, "tiltLR":-25, "tiltFB":-11, "accelX":-0.03} REST APIによるデータアクセス -HTTPベースのREST APIを提供し、アプリから格納されたデータに容易にアクセス可能 JSON JSON http http A P I Cloudant
77. © IBM Corporation 77 Node-REDによる IoTアプリ開発 [Webアプリ編]
78. © IBM Corporation 78 Webアプリの作成 ▪先程の演習で作成したフローを拡張して、簡単なWebアプリを作ってみましょう。 スマホのセンサーデータを取得し、その値をリアルタイムに可視化するアプリを作成します。 ▪Node-REDでWebページを作成するには、httpノードを使⽤します。 パレットのinputカテゴリの「http」ノードと、outputカテゴリの「http request」ノー ドを以下のようにドラッグ＆ドロップでキャンバスに配置します。 ▪左側の「http」ノードをダブルクリックし、設定画⾯を開きます。 ▪URL欄に「/sensor」と⼊⼒ して「OK」ボタンをクリック
79. © IBM Corporation 79 ▪出⼒（表⽰）する内容を定義します。 パレットから「template」ノードを以下のようにキャンバスに配置します。 ▪「template」ノードをダブルクリックし、設定画⾯を表⽰します。 ▪Template欄にWebページに 表⽰させたい⽂字列を指定して 「OK」ボタンをクリック Webアプリの作成
80. © IBM Corporation 80 ▪templateノードがhttpノードの間に⼊るように、3つのノードを線で繋ぎます。 ▪これでWebページ作成⽤のフローは完成です。 それでは実⾏してみましょう。右上の「Deploy」ボタンをクリッ クします。 ▪Webブラウザで今作成したWebページにアクセスしてみます。 Node-REDフローエディタのURLの 末尾の「/red/#」を「/sensor」に 置き換えたURLにアクセスします。 (例) https://x.mybluemix.net/red/#の場合は、 https://x.mybluemix.net/sensor を開きます 指定した⽂字列が表⽰できました！ templateノードにはhtmlのタグも指定可能です。 Webアプリの作成
81. © IBM Corporation 81 ▪取得したセンサーデータをリアルタイムにWebページに表⽰する処理を追加します。 ここではWebSocketという、WebサーバーとWebブラウザ間で双⽅向通信を実現する技 術を使⽤します。 可視化するセンサーデータは、先程Cloudantに格納した「tiltLR」、「tiltFB」、 「accelX」とします。 ▪outputカテゴリの「websocket」ノードをドラッグ＆ドロップで配置し、前の演習で作 成したセンサーデータを加⼯する functionノードと線で繋ぎます。 線でつな ぐ Webアプリの作成
82. © IBM Corporation 82 ▪「websocket」ノードをダブルクリックし、設定画⾯を開きます。 Path欄「Add new websocket-lister」のペンのアイコンをクリックし、リスナーのPath として「/ws/sensor」と指定します。 ▪「Add」→「OK」で設定完了です。 Webアプリの作成
83. © IBM Corporation 83 ▪先程Webページの表⽰内容を定義した「template」ノードをダブルクリックし、設定画 ⾯を開きます。 ダブル クリック Webアプリの作成
84. © IBM Corporation 84 ▪設定画⾯のTemplate欄にアプリケーションの コードを⼊⼒して、「OK」をクリック。 コードは下記URLにあります。 template_node.html の内容を コピー＆ペーストしてください。 ▪これでWebアプリケーションのフローは完成です。 それでは実⾏してみましょう。 右上の「Deploy」 ボタンをクリックします。 https://ibm.biz/PhoneSensor （PとSのみ⼤⽂字です） Webアプリの作成
85. © IBM Corporation 85 ▪Webブラウザで今作成したWebページにアクセスしてみます。 Node-REDフローエディタのURLの 末尾の「/red/#」を「/sensor」に 置き換えたURLにアクセスします。 ▪スマホでPhoneSensorを稼動させた上で、Webアプリの「接続」ボタンを クリックします。 これでWebSocketのコネクションが確⽴します。 (例) https://x.mybluemix.net/red/#の場合は、 https://x.mybluemix.net/sensor を開きます Webアプリの作成
86. © IBM Corporation 86 ▪スマホを前後左右に傾けたり振ったりして、表⽰されたゲージ（メーター） の針がリアルタイムに動くことを確認してください。 お疲れ様でした！ BluemixとNode-REDを活⽤することで、クイックにアプリケー ションロジックを組み⽴てることが可能です。 スマホを傾けると 針が動く スマホを振ると 針が動く Webアプリの作成
87. © IBM Corporation 87 © IBM Corporation 87 Accelerating Digital Business
88. © IBM Corporation 88 Bluemix User Group - BMXUG（ビーザグ） Bluemixのユーザー会が発⾜しました！ ぜひご参加ください！ BMXUGはユーザー様主体、有志によって運営される 情報交換・ネットワーキングの場です