学習テキスト講義Vol3

Size: px

Start display at page:

Download "学習テキスト講義Vol3"

ときしげい
4 years ago
Views:

1 イノベートハブ九州 Bluemix 勉強会 #1 Startup with IBM 本 IBM 株式会社クラウド事業統括 1

2 本の流れ 1. IBM Bluemix とは 2. Node-RED ハンズオン 3. Node-RED で IoT アプリを作ってみよう

3 新しい顧客体験をもたらす IBM Bluemix 迅速なアプリケーション開発管理と実を実現するクラウド豊富な API サービスをご提供 120 を超える品質のサービスでクイックにアプリ開発 1 年で API, サービス数は約 2 倍に! 強なパートナーシップ提携も!! 実環境 Watson データベース IoT モバイルインテグレーションビッグデータセキュリティアナリティクス開発援ツール Web & アプリケーション

監視 etc ) ミドルウェア (AP サーバー /DB/ 監視 etc ) クラウドでご提供 OS OS 仮想化基盤仮想化基盤

4 オープンな PasS IBM Bluemix IBM SoftLayer IBM Bluemix ビジネスプロセスアプリケーションビジネスプロセスアプリケーション開発者はアプリ開発に専念アプリの迅速かつ継続的な提供ミドルウェア (AP サーバー /DB/ 監視 etc ) ミドルウェア (AP サーバー /DB/ 監視 etc ) クラウドでご提供 OS OS 仮想化基盤仮想化基盤ハードウェア (Server,Storage, Network) IaaS ハードウェア (Server,Storage, Network) PaaS

IBM クラウド概要図 IBM クラウド API エコノミーコンポーザブルな開発環境エコシステム

間少なくアプリやシステム構築が可能にオープンスソースの Cloud Foundry ベースの Java

30 秒で実環境をセットアップが可能オープンソースで構築されたインフラレガシーに相性のいい

5 IBM クラウド概要図 IBM クラウド API エコノミーコンポーザブルな開発環境エコシステム開発者は構成済みのサービスランタイムなどを使ってブロックを組みてるように間少なくアプリやシステム構築が可能にオープンスソースの Cloud Foundry ベースの Java Node.js や Ruby を対応する PaaS Docker 対応や DevOps サービスも約 30 秒で実環境をセットアップが可能オープンソースで構築されたインフラレガシーに相性のいい性能なベアメタルも Fusion IO や 3TB メモリーのマシン等々グローバルサービスで本 DC も SaaS PaaS IaaS

6 API エコノミープラットフォーム SSO アジャイル JMeter 脆弱性分析監視オートスケールセキュリティモバイル SDK モバイルセキュリティ Twilio モバイルアクセス品質管理プッシュ通知性格解析モバイル画像解析翻訳トレードオフ音声認識 Watson ビジネウプロセスウェブアプリ MQ Light Ustream IoT RabbitMQ ワークフローキャッシュセッションキャッシュスケジューラ IoT Sendgrid Redis DB+ 分析エンタープライズ固定 IP Twitter PostgreSQL MongoDB Geo Cloudant NoSQL DWH ElasticSearch Hadoop Spark オンプレ連携 New Relic DevOps 連携 API 管理 6

7 ハンズオンの流れ 1.Node-RED で Hello World(Step1) 2.Node-RED で REST の基本を学ぶ (Step2-3) 3.Node-RED で IoT アプリを作成する

8 Node-RED について n IBM 英国 Hursley 研究所の Emerging Technology Team で開発されたソフトウェア 2013 年社内ハッカソンで堂々位 GitHub に登録 2014 年 Qcon で発表 n オープンソースプロジェクトとして提供 8

9 Node-RED の特徴ハードウェアデバイス,API, オンラインサービスが画期的な法で結合された " 仮想環境をブラウザ上で実現 n ブラウザベース UI n node.js で動作軽量 n 機能をカプセル化して Node として利 n 独 Node を作成追加可能 n Bluemix の様々なサービスを簡単に利可能 9

10 Node-RED シート画実装 UI 表情報の切り替えデプロイ実ノード処理フローノードパレット Node Infomation またはデバッグコンソール 10

11 Node-RED 実装法 Node-RED 画 4Deploy を選択 1 ノードを選択しドラッグ & ドロップ 2 ノード間を接続 3 ノードプロパティ設定 11

12 Node-RED 搭載ノードの紹介 ( 代表的なもの ) Node 分類 Input Output Function Social Storage Analysis Advanced 機能イベントの起動条件の設定外部アプリへの送信イベント分岐受信データの変換時停等 Twitter/Mail/ircの送受信 DBへの保存 DB 検索分析 RSS/atomの更新受信時にイベント起動コネクタが右側に存在 1 イベントの起動イベント起動条件を満たしたときその情報を送信するコネクタが左右に存在 2 データ変換 / 分岐左からデータ受信それを変換 / 分岐させ右側に結果を返すコネクタが左側に存在 3 外部アプリ起動 /DB 保存左からデータを受信しそれを送信 / 保存 12

13 1 イベントの起動 Node 名称イベント開始条件後続フローに送信する内容 Inject 定期起動 orノードのクリック指定字列 or 現在時刻 or 情報なし ( 起動のみ ) デバック向けの機能 http Mail Twitter コネクタが右側に存在するもの x.net/[ ノードの URL] リクエスト送信時メール受信時または未読メール存在時定期起動指定メッセージの Tweet 時に動起動 Feedparse RSS/atom の更新受信時 - リクエスト情報メール本 (text/plain) Tweet 情報 ( 本発場所国 ) 13

14 2 データ変換 / 分岐 Node 名称機能後続フローに送信する内容 Function 受領データの更新更新済データ Switch 条件に応じてフローを分岐させる受信データ Delay フローを待機受信データ http request 指定サイトに接続接続サイトのソース Cloudant DB 検索 DB の検索結果 Sentiment Html コネクタが左右に存在するもの受信データをセンチメント分析 HTML ソースのうち指定タグをすべて取得評価情報を追加した受信データ指定したタグの情報 14

15 3 外部アプリ起動 /DB 保存コネクタが左側に存在するもの Node 名称 Debug http response Cloudant Mail 機能フロー上に流れている情報を画表 http requestを返す DBへのデータ保存メール送信 15

16 プログラミング JavaScript で記述します簡易エディターが付属同期処理も可能より複雑な処理は node の作成をお勧めします function は最後に return msg; をいれると次の node に送信してくれます詳細ドキュメント : 16

17 覚えておく Node-RED 固有変数 context.global context msg msg オブジェクト : node 間を流れるメッセージを表す JSON オブジェクト msg.payload はかならず存在する msg.<string> で新しい属性を追加できる context オブジェクト : node 内部で保存される任意の JSON オブジェクト context.global オブジェクト : node 間で共有されるグローバルオブジェクト 17

18 Node-RED ノード操作法 18

19 Node-RED 環境の作成 19

20 Node-RED 環境の作成 n アプリケーション名をします 20

21 Node-RED 環境の作成 21

22 Node-RED で Hello World Step1 n キャンバスにドロップした inject ノードをダブルクリックして設定画を開きます番上の Payload を string に設定しますイベントの起動をうだけで次のノードには何も送信されません OK をクリックします 22

23 Node-RED で Hello World Step1 23

24 Node-RED で Hello World Step1 24

25 Node-RED で Hello World Step1 25

26 REST の基礎 n REST(Representational State Transfer) Web サービスをの設計モデルのつであり以下のような設計原則に従う ü 明的にHTTPメソッドを使う ü ステートレスにする ü ディレクトリ構造に似たURIを公開する ü XML JSON(Javascript Object Notation) のいずれかまたはその両を転送する 26

27 REST の基礎 n 明的に HTTP メソッドを使う CRUD と HTTP メソッドが 1 対 1 対応になっている Create Read Update Delete POST GET PUT DELETE Client GET Web Service { "status": "OK", "usage": "By accessing AlchemyAPI or using information generated by AlchemyAPI, "result": { 27

28 REST の基礎 n ステートレスにするサーバーサイドのコンポーネントがレスポンスを成するために必要とするすべてのパラメーターやコンテキストデータをリクエストの HTTP ヘッダーとボディーの中に含める Client 完全かつ独立したリクエスト GET /resources/getnextpage? HTTP/1.1 Web Service { "status": "OK", "usage": "By accessing AlchemyAPI or using information generated by AlchemyAPI, "result": { previouspage++; nextpage = prviouspage; rerurn nextpage; 28

29 REST の基礎 n ディレクトリー構造に似た URI を公開する URI の構造は単純かつ予測可能で容易に理解可能なもの 29

30 REST の基礎 n XML または JSON またはその両を転送する JSON, XML 30

31 Node-RED で Hello World Step2 31

32 Node-RED で Hello World Step2 32

33 Node-RED で Hello World Step2 33

34 Node-RED で Hello World Step2 n 左端の http ノードの設定画を開き URL として /hello2 とします 34

35 Node-RED で Hello World Step2 35

36 Node-RED で Hello World Step2 36

37 Node-RED で Hello World Step2 37

38 Node-RED で Hello World Step3 38

39 Node-RED で Hello World Step3 n 各属性を修正して OK ボタンをクリックします Method: GET URL: /hello3 39

40 Node-RED で Hello World Step3 40

41 Node-RED で Hello World Step3 n Template ノードの記述例 : 画 <html> <head> <title>web Application on Node-RED</title> </head> <body> <h1>hello World on Node-RED</h1> <h2>input your name!</h2> <form action="/hello3" method="post"> <input type="text" name="name"> <input type="submit"> </form> </body> </html> 41

42 Node-RED で Hello World Step3 42

43 Node-RED で Hello World Step3 43

44 Node-RED で Hello World Step3 URL: /hello3 /hello3 44

45 Node-RED で Hello World Step3 45

46 Node-RED で Hello World Step3 n Template ノードの記述例 : 出結果 <html> <head> <title>web Application on Node-RED</title> </head> </html> <body> <h1>hello World on Node-RED</h1> <h2>your name is {{payload.name}} </h2> </body> 46

47 Node-RED で Hello World Step3 47

48 Node-RED で Hello World Step3 48

49 Node-RED で Hello World Step3 n /hello3 に HTTP リクエストか送信され以下の画か表されます 49

50 Node-RED で IoT アプリを作ってみよう 50

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

52 IoT Foundation 環境の作成 Bluemix の上部メニューからダッシュボードをクリックアプリのランタイムの下に表されるサービスはAPIを追加をクリックモノのインターネットのカテゴリから Internet of Things Platform を選択 52

53 アプリケーションの再ステージング IoT Platform の説明画右下にある作成をクリックアプリケーションの再ステージングのポップ画が表されるので再ステージをクリック 53

Node-RED で IoT アプリを作成スマートフォンをお持ちのはスマホのブラウザで下記 URL

net PhoneSensor が起動しますスマホに内蔵された各種センサーの情報を取得し Bluemix の IoT

Node-RED で作ってみましょう Bluemix のダッシュボードから先程作成したボイラープレートのアプリの URL

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

55 Node-RED で IoT アプリを作成 Node-RED が起動したら別シートを追加します上部の + ( プラス ) ボタンをクリックします Sheet 2 が開きますのでここで処理フローを作成してみましょう 55

& ドロップキャンバスにドロップした IBM IoT App In ノードをダブルクリックして設定画を開きます

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

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

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

Register をタップしてしまうとステータスが Disconnected になります ibmiot ノードの Device Id が正しく設定されているかどうかをご確認ください例えばスマホの

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

メッセージを変えてみましょうセンサー情報から tiltlr の値だけを抽出します左側のパレットから function ノードを中央のキャンバスにドラッグ &

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

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

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

Node-RED で IoT アプリを作成条件分岐された後の処理を作成します左側のパレットから template ノードを中央のキャンバスにドラッグ & ドロップしますダブルクリックで設定画を開き表するメッセージを定義しますご由にメッセージの内容をしてください {{payload}}

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

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

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

66 ありがとうございました Ready to Learn More? Visit: 66

67 豊富なチュートリアルや技術情報やイベント情報チュートリアルやお得な情報イベント情報を発信中! フォローください!

68 開発者の々への特典プログラム 53,542 円 ( 税抜 ) で 20 万円以上 ($1700 相当 ) の特典 1 年間のメンバーシップクラウドサービスへのアクセスやトレーニングチュートリアルなどのスキルアップのための特典が提供されます Learn Develop Connect 500 の技術書籍とビデオ (Safari Online) - $300 相当 IBM Cloud Application Developer Certification バウチャー - $200 相当トレーニングコースとチュートリアル 12 ヶ月の Bluemix subscription ($240 分のクレジット ) SoftLayer VM への 12 ヶ月のアクセス ( 毎月最大 $45 分のクレジット ) IBM MobileFirst Platform Developer Edition GitHub プライベートリポジトリー ( Micro プラン 1 ヶ月分 ) IBM, O Reilly, Box などのイベントの最大 50% 割引コミュニティーによるサポートサインアップはこちらから ibm.biz/dwpremium 詳細は

69 Bluemix ユーザー会現在の会員数 1,700 名以上ビーザグと読みます 2015 年 5 に正式発世界初の Bluemix ユーザー会 Bluemix って何? というでも歓迎! ゆるくカジュアルに情報交換 meetup 参加法 facebook でグループに参加をクリック! Doorkeeper でコミュニティに参加をクリック! BMXUG Meetup Vol.1 (XCITE) BMXUG Meetup Vol.4 SoftLayer Bluemix Summit Bluemix 会 Vol.3 69

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション IBM Bluemix の Node-RED を使って簡単アプリ作成を体験する 2015 年 8 月 20 日 1 Node-RED について IBM 英国 Hursley 研究所の Emerging Technology Team で開発されたソフトウェア 2013 年社内ハッカソンで堂々一位 GitHub に登録 2014 年 Qcon で発表オープンソースプロジェクトとして提供 2 Node-RED