(Microsoft PowerPoint - Bluemix HandsOn 2nd \222}\224g\221\345\212w\227l.pptx)

Transcription

1 アプリ作成の新しい形を体験する IBM Bluemix 体験ハンズオン 日本アイ ビー エム株式会社クラウド ソフトウェア事業部エコシステム デベロップメント 1

2 Agenda IBM Bluemix 基本操作 IDS と連携したアプリケーション開発 Node-RED で IoT アプリの作成 Node-RED で Web API を活用したアプリを動かす まとめ : API 活用によるアプリ開発と IBM Bluemix 2

3 IBM Bluemix へのログイン Web ブラウザを起動し 下記 URL より Bluemix にログインします 使用するブラウザは Google Chrome 推奨です 右上部の ログイン をクリック IBM ID( メールアドレス ) とパスワードを し サインイン ボタンをクリック 3

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

5 [ 補足 ] 米国南部 選択時のポップアップへの対応方法 米国南部を選択した際に スペースを作成するように指示するポップアップ ウィンドウが表 された場合は 任意の名前を し 作成をクリックしてください 本資料ではスペース名として dev を使用します 5

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

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

8 アプリケーション実 環境の構築 (3/3) 4. それではサンプルとして 意されたスターター アプリケーションを実 してみましょう アプリケーションの 経路 : のリンクをクリックすると 作成された Node.js 上で JavaScript のスターター アプリケーションが動いていることが確認できます 8 この例では にアクセスしています

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

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

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

12 アプリケーション実 環境の詳細 (2/4) リソースの動的追加 左端のメニューから SDK for Node.js を選択します ページ上部で CPU やメモリーの使 率など インスタンスの詳細情報が確認できます 先程インスタンスを増やしたので リストには 3 が表 されています 今度はリソースの縮退を ってみましょう インスタンス : 1 メモリー : 64MB と指定して 保存 をクリックします リソースは増やすだけでなく 減らすこともできることを確認してください 画 の切り替えがうまくいかない場合は Web ブラウザのリロード (F5 キー ) をお試しください 12

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

14 アプリケーション実 環境の詳細 (4/4) 環境変数の参照 SDK for Node.js ページの下部にて 実 環境に設定されている環境変数の情報が確認できます ( 環境変数を新しく追加することも可能です ) 連携に必要となる情報は 自動的に環境変数にセットされるので アプリケーションはこれらの環境変数の値を取得して サービスにアクセスします SQLDatabase 接続の場合 IP アドレス, ポート番号, DB 名, username, password などが環境変数としてセットされます Bluemix では Web ブラウザからアプリケーション実 環境の構築やサービスのバインド 様々な運 管理作業ができることを確認いただきました お疲れ様でした! 14

15 IBM Bluemix 基本操作 IDS と連携したアプリケーション開発 Node-RED で IoT アプリの作成 Node-RED で Web API を活用したアプリを動かす まとめ : API 活用によるアプリ開発と IBM Bluemix 15

16 作成したインスタンスのアプリケーション コードをリポジトリに追加し コードを編集してアプリケーションを変更する流れを体験していただきます 1. ダッシュボード左側のメニューの 概要 を選択 右端の GIT の追加 をクリック 2. Git リポジトリーの作成 のウィンドウが表示される チェックボックスが選択されていることを確認して 続 をクリック 完了を待って クローズ をクリック 16

17 3. リポジトリに追加されたコードをエディターで開きます コードの編集 をクリック 4. ブラウザの新規タブ ( ウィンドウ ) にて クラウドベースの統合開発環境 IBM Bluemix DevOps Services が開きます 17

18 5. スターター コードを編集してみましょう 右側のツリー表示から Public ディレクトリを展開し index.html を選択します 6. 表示内容を変えてみましょう <h1> タグの中の Hi there! を他の 字列に置き換えます 18

19 7. デプロイボタンをクリックします 変更したコードが Bluemix にデプロイされます 8. デプロイが完了するとシグナルが緑に戻ります アプリケーションを開いて変更を確認します なお Bluemix のダッシュボード画面で操作することも可能です 9. コードの修正が反映されていることをご確認ください 19

20 今デプロイしていただたアプリケーションは ワークスペース ( エディター ) から直接デプロイされたものです リポジトリの内容は変更されていません PUSH リモートリポジトリ DEPLOY アプリコード ランタイム ローカルリポジトリ COMMIT ワークスペース アプリコード DEPLOY IDS Bluemix 20

21 コードの変更をリポジトリに反映した上で Bluemix にデプロイしてみます 変更が反映されることを確認できるように 再度 index.html を編集しておきましょう 10. エディター画面左端の Git リポジトリー アイコンをクリックします アイコンが表示されていない場合は メニューから 表示 関連項目を開く Git リポジトリー を選択します 21

22 11. リポジトリの管理画 が表示されます 変更内容のリストに 先程編集した public/index.html があることを確認してください public/html を展開すると修正前 / 修正後のコードを確認できます 22

23 12. ここでは すべての変更内容をリポジトリに記録させましょう すべて選択 をチェックし コミットメッセージを した上で コミット をクリックします 23

24 13. 発信リストにコミットした内容が追加されています プッシュ をクリックすると コミット内容が反映され そのまま Bluemix にデプロイされます 24

25 13. デプロイの状況は BUILD & DEPLOY で確認できます お疲れ様でした! Bluemix と IDS(IBM Bluemix DevOps Services) を連携させることで ソースコードの編集からバージョン管理といった開発作業から環境構築 実 まですべて Web ブラウザから うことができることを体験していただきました 25

26 IBM Bluemix 基本操作 IDS と連携したアプリケーション開発 Node-RED で IoT アプリの作成 Node-RED で Web API を活用したアプリを動かす まとめ : API 活用によるアプリ開発と IBM Bluemix 26

27 Node-RED で IoT アプリを作成 全体像 サービス アプリケーション IoT Foundation サービスはセンサーデータを仲介する IBM IoT Foundation デバイス IBM Bluemix スマホのセンサーで計測したデータをクラウドサービスに送信 アプリはサービスからセンサーデータを取得して処理する 27

28 IoT Foundation 環境の作成 Bluemix の米国のデータセンターを使用します 右上部の 地域 をクリックし 米国南部 を選択 もし スペースの作成 というウィンドウが表示された場合は 任意の名前 (dev 等 ) を指定してスペースを作成してください 上部メニューから カタログ をクリック 最上段の ボイラープレート カテゴリの中から Internet of Things Foundation Starter を選択 28

29 IoT Foundation 環境の作成 アプリ名とホスト名を します 実際にはアプリ名を フィールドに れると ホスト名も同じ名前が指定されます 既に同じ名前のホストが存在する場合エラーとなりますので 他の人と重複しなそうな名前を指定してください 例 : IoTserver2015xx など 29 作成 ボタンをクリックすると IoT Foundation の環境作成が始まります 完了までしばらくお待ちください

30 Node-RED で IoT アプリを作成 スマートフォンをお持ちの方は スマホのブラウザで下記 URL にアクセスしてください PhoneSensor が起動します スマホに内蔵された各種センサーの情報を取得し Bluemix の IoT Foundation サービスに送信しています このセンサー情報を受け取って処理するアプリを Bluemix 上の Node-RED で作ってみましょう Bluemix のダッシュボードから 先程作成したボイラープレートのアプリの URL を開き Node-RED を起動します 直接 Web ブラウザで URL を指定して開いても OK です 右の例の場合はこちらの URL です 30

31 Node-RED で IoT アプリを作成 Node-RED が起動します Sheet 1 にサンプルのフローが用意されていますが これは使用しないので別シートを追加します 上部の + ( プラス ) ボタンをクリックします Sheet 2 が開きますので ここで処理フローを作成してみましょう 31

32 Node-RED で IoT アプリを作成 スマホのセンサー情報を クラウド上の IoT Foundation サービスから受け取ってみましょう 左側のパレットから ibmiot ノードを中央のキャンバスにドラッグ & ドロップします ドラッグ & ドロップ キャンバスにドロップした IBM IoT App In ノードをダブルクリックして設定画面を開きます Authentication は Quickstart を選択 Device Id に先程の PhoneSensor に表示されている 字列の末尾 12 桁の数字を 32

33 Node-RED で IoT アプリを作成 受け取ったデータを表示するノードを用意します 左側のパレットから debug ノードを中央のキャンバスにドラッグ & ドロップします ドラッグ & ドロップ ノードの横にあるコネクタをクリック & ホールドし ibmiot ノードと debug ノードを線で繋ぎます この部分を掴んで引っ張る 33

34 Node-RED で IoT アプリを作成 これでデータの と出 の定義ができました それでは実際に動かしてみましょう 右上の Deploy ボタンをクリックします 画面上部に Successfully Deployed の文字が表示されれば OK です ( この文字はすぐに消えます ) 実 結果を確認してみましょう 右上の debug タブを選択します debug ノードに流れてきたデータはここに表示されます 先程の PhoneSensor を動かします スマホのセンサー情報が debug 画面に表示されれば成功です 取得できる情報はスマホの機種によって異なる場合があります 34

35 Node-RED で IoT アプリを作成 debug 画面にセンサーデータがうまく表示されない場合のチェックポイント -PhoneSensor が正しく稼動しているかどうかを確認してください スリープ状態でアプリが停止していないでしょうか -PhoneSensor の接続ステータスが Connected になっていることを確認してください 例えば 誤って PhoneSensor 画面下部の Register をタップしてしまうと ステータスが Disconnected になります - ibmiot ノードの Device Id が正しく設定されているかどうかをご確認ください 例えば スマホの Web ブラウザで PhoneSensor を再読み込みすると Device Id が変わってしまいます その場合は再度 ibmiot ノードの定義情報を PhoneSensor 側と同じになるよう変更してください 35

36 Node-RED で IoT アプリを作成 正しくセンサー情報が取得できたので この情報に応じて何らかの処理を うフローを作ってみましょう tiltlr というデータ項目に着目します これはスマホ端末の左右の傾きを測定しているようです 実際に端末を動かして 値の変化を確認してください この傾き度合いによって表 メッセージを変えてみましょう センサー情報から tiltlr の値だけを抽出します 左側のパレットから function ノードを中央のキャンバスにドラッグ & ドロップします ダブルクリックで設定画面を開き Function の内容を以下のように書き換えて OK をクリックします return {payload:msg.payload.d.tiltlr}; 36

37 Node-RED で IoT アプリを作成 正しく動くかどうか確認してみましょう ibmiot と debug との間に 今作成した function ノードを挟むように線を繋ぎ変えます 線はクリックで選択した状態で Delete キーで削除できます 右上の Deploy ボタンをクリックします 不要な情報が削除されて tiltlr の値だけが表示されれば OK です 37

38 Node-RED で IoT アプリを作成 tiltlr の値によって処理を分岐させます 左側のパレットから switch ノードを中央のキャンバスにドラッグ & ドロップします ダブルクリックで設定画面を開き 分岐条件を指定します 左に 5 度以上傾いた場合 = 左に傾いてます 右に 5 度以上傾いた場合 = 右に傾いてます 傾きが 5 度未満の場合 = ほぼフラットです 上記のような条件設定をするには右図のように指定して OK をクリックします 条件を追加するには +rule ボタンをクリックします 傾きが -5 度以上 ( 左 ) なら 1 番へ 傾きが 5 度以上 ( 右 ) なら 2 番へ どちらでもない ( フラット ) なら 3 番へ 38

39 Node-RED で IoT アプリを作成 条件分岐された後の処理を作成します 左側のパレットから template ノードを中央のキャンバスにドラッグ & ドロップします ダブルクリックで設定画面を開き 表示するメッセージを定義します ご自由にメッセージの内容を してください {{payload}} と指定すると 先程 debug 画面で確認した傾きデータの値が表示されます 1 番 ( 左 ) 2 番 ( 右 ) 3 番 ( フラット ) 39 同様に 2 番 3 番のノードも作成し それぞれメッセージを定義します 最後に switch ノードのコネクタと 1 番 2 番 3 番のノードを線で繋げます

40 Node-RED で IoT アプリを作成 キャンバスの中を整理して 各ノードを以下の図のように接続してください 正しく線が繋がっていれば ノード自体はキャンバス内のどこに置かれていても動作に影響はありません 処理フローが完成しました! それでは実際に動かしてみましょう 右上の Deploy ボタンをクリックします 40

41 Node-RED で IoT アプリを作成 Successfully Deployed のメッセージが表示されれば成功です PhoneSensor を稼動させたスマホを左右に傾けて指定したメッセージが表示されることを確認してください お疲れ様でした! IBM Bluemix と Node-RED によって ほぼノンプログラミングで IoT デバイスから収集したデータを処理するアプリが作れました 41

42 IBM Bluemix 基本操作 IDS と連携したアプリケーション開発 Node-RED で IoT アプリの作成 Node-RED で Web API を活用したアプリを動かす まとめ : API 活用によるアプリ開発と IBM Bluemix 42

43 Node-RED で Web API を活用したアプリを動かす Node-RED は作成したフローを JSON 形式の 字列として export/import することができます あらかじめ作成済みの処理フローを de-red に取り込んでみましょう サンプルアプリのテキストファイルをメモ帳で開き 字列をすべて選択 コピーします テキストファイルの配布については講師よりガイドいたします [{"id":"13257eec ","type":"websocket-listener","path":"/ws/stations","wholemsg":"false"},{"id":"28a6990b.d75966","type":"websocket out","name":"","server":"13257eec ","x":677,"y":274,"z":"60aa0f7b.9f55f","wires":[]},{"id":"f5ecfe3e.0a13","type":"xml","name":"","attr":"$","chr":"_","x":498.5,"y" :275,"z":"60aa0f7b.9f55f","wires":[["28a6990b.d75966","3e967dc2.c16982"]]},{"id":"3e967dc2.c16982","type":"debug","name":"","active":true,"console":"false","compl ete":"false","x":626.5,"y":340,"z":"60aa0f7b.9f55f","wires":[]},{"id":"2c1c43fd.d3e3bc","type":"http request","name":" リクナビ API 呼び出し ","method":"get","url":" ["f5ecfe3e.0a13"]]},{"id":"ad4079b6.52bf88","type":"websocket in","name":"","server":"13257eec ","x":126,"y":275,"z":"60aa0f7b.9f55f","wires":[["2c1c43fd.d3e3bc"]]},{"id":"fda d9","type":"http response","name":"","x":492,"y":181,"z":"60aa0f7b.9f55f","wires":[]},{"id":"774506a8.88baf8","type":"template","name":" 表示内容の定義 ","field":"payload","template":"<!doctype html> n<html> n <head> n <meta name= "viewport " content= "initial-scale=1.0, user-scalable=no "> n <meta charset= "utf-8 "> n <title> 筑波大学はココ!</title> n <style> n html, body, #map-canvas { n height: 94%; n margin: 5px; n padding: 0px n } n </style> n <script src= " "></script> n <script> n t tfunction initialize() { n t t var mylatlng = new google.maps.latlng(36.095, ); n t t var mapoptions = { n t t zoom: 11, n t t center: mylatlng, n t t }; n t t var map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); n t t n t t var loc = window.location; n if (loc.protocol === "https: ") { n newuri = "wss: "; n } else { n newuri = "ws: "; n } n newuri += "// " + loc.host + "/ws/stations "; n t t n t t n t t var sock = new WebSocket(newUri); n t t sock.onopen = function(){ n t t console.log( "Connected websocket "); n t t console.log( "Sending ping.. "); n t t tsock.send( "Ping! "); n t t console.log( "Ping sent.. "); n t t }; n t t sock.onerror = function(){ console.log( "Websocket error "); }; n t t sock.onmessage = function(evt){ n t t var schooldata = JSON.parse(evt.data); n t t var stations = schooldata.results.school[0].campus; n t t tfor(var i = 0; i < stations.length; i++) { n t t t var camp = stations[i]; n var marker = new google.maps.marker({ n t t t position: new google.maps.latlng(camp.latitude[0],camp.longitude[0]), n t t t map: map, n t t t animation: google.maps.animation.bounce, n t t t title: camp.address[0] n t t t }); n t t t n t t t} n t t }; n t t}; n t t n t tgoogle.maps.event.adddomlistener(window, 'load', initialize); n n </script> n </head> n <body> n <div id= "map-canvas "></div> n <font size= "6 "> 筑波大学はココ!</font> n <br>powered by IBM Bluemix and Node-RED n <div align= "right "> n <a href= " "><img src= " " alt= " リクナビ進学 Web サービス " width= "88 " height= "35 " border= "0 " title= " リクナビ進学 Web サービス "></a> n </div> n </body> n</html>","x":330,"y":181,"z":"60aa0f7b.9f55f","wires":[["fda d9"]]},{"id":"636d7b37.9c9284","type":"http in","name":"","url":"/schoolmap","method":"get","x":143,"y":181,"z":"60aa0f7b.9f55f","wires":[["774506a8.88baf8"]]}] 43

44 Node-RED で Web API を活用したアプリを動かす Node-RED でシートを追加します 上部の + ( プラス ) ボタンをクリックして Sheet 3 を開きます Sheet 3 に先程コピーした処理フローを取り込みます 上部右端の三本線のアイコンをクリックし 表示されたメニューから import Clipboard を選択します 44

45 Node-RED で Web API を活用したアプリを動かす Import nodes ウィンドウが表示されるので 先程クリップボードにコピーしたテキストをペーストして OK ボタンをクリックします 処理フローが取り込まれますので キャンバスの適当な場所をクリックして配置します 45

46 Node-RED で Web API を活用したアプリを動かす このアプリを動かしてみましょう 右上の Deploy ボタンをクリックします 画面上部に Successfully Deployed の文字が表示されれば OK です 実 結果を確認してみましょう Web ブラウザの新しいタブを開いて Node-RED のホスト名の末尾に /schoolmap というパスを付加した URL にアクセスします Node-RED を開いている Web ブラウザの URL の末尾の /red/# を削除し /schoolmap を追加します ( 例 ) で Node-RED を開いている場合 にアクセスします 46

47 Node-RED で Web API を活用したアプリを動かす Node-RED で作ったサンプルアプリ 筑波大学はココ! が表示されれば OK です 地図上の筑波大学のキャンパスにマーカーが表示され マウスポインタを合わせると大学の住所が表示されます 47

48 Node-RED で Web API を活用したアプリを動かす debug 画面に リクナビ進学 API を呼び出した結果が表示されていることを確認してください 緯度経度や住所以外にも様々な情報が取得できています このようにクラウドで公開されている外部の API を呼び出すことで アプリの機能を拡張できます 48

49 Node-RED で Web API を活用したアプリを動かす 試してみましょうリクナビ進学 API に対してリクエストする内容を変えてみましょう リクナビ API 呼び出し ノードをダブルクリックして構成画面を開きます URL 欄の code=sc の部分を code=sc と変更して OK をクリック SC は茨城大学の学校コードです 時間のある方は SC : 関 学 SC : 日本大学なども試して結果を確認してみましょう 49 デプロイして結果を てみましょう 右上の Deploy ボタンをクリックします 筑波大学はココ! をWebブラウザで再読み込みすると 実 結果はどう変わるでしょうか?

50 IBM Bluemix 基本操作 IDS と連携したアプリケーション開発 Introduction to Cloud Foundry Node-RED で Web API を活用したアプリを動かす まとめ : API 活用によるアプリ開発と IBM Bluemix 50

51 API 活用によるアプリ開発と IBM Bluemix 筑波大学はココ! アプリは Bluemix 環境の Node-RED 上で稼動しています 地図は Google Maps API を 学の住所および緯度経度の情報はリクナビ進学 API を呼び出して統合し Web ブラウザ上に表示しています IBM Bluemix Google Maps API 筑波大学はココ! アプリ リクナビ進学 API 51

52 IBM Bluemix 活用 - 必要なときに必要なコンピュータをインターネット経由で利 - イチからすべて自分で作らなくていい 所有しなくていい - すぐに利 できてアプリの機能を拡張できる API が揃っている Bluemix は API を活用した クラウド時代のアプリ開発に最適なプラットフォーム 52

53 THANK YOU! 53

54 Empowering the IBM ecosystem Bluemix User Group - BMXUG( ビーザグ ) Bluemix のユーザー会が発足しました! ぜひご参加ください! BMXUG はユーザー様主体 有志によって運営される 情報交換 ネットワーキングの場です

55 Empowering the IBM ecosystem BMXUG への参加方法 で グループに参加 で コミュニティに参加

56 IBM Bluemix Challenge 2015 IBM Bluemix を使用したアプリ開発コンテスト 米国 IBM Watson 研究所ご招待 Oculus Rift など多数の副賞参加者特典として 参加者のフリートライアル期間を延 コンテストの詳細はこちら ibm.biz/bmcontest ぜひご参加ください!! 一般部門 : 応募締切 7 月 24 日 ( ) 特典 :Bluemix 無償利 90 日提供 副賞 :Watson 研究所ご招待 Oculus Rift 他 新しい未来を予感できる アプリやサービス ( 学生の参加も可能 ) 学生部門 : 応募締切 8 月 20 日 ( 木 ) 特典 :Bluemix 無償利 120 日提供 Watson 研究所ご招待 コネクテッド ビークルまたはモビリティ / トランスポーテーションを支えるアプリ ( 応募資格 : 大学生 / 大学院生限定 )