Upgrade to Pro — share decks privately, control downloads, hide ads and more …

IBM Bluemixハンズオン

IBM Bluemixハンズオン

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

Yusuke Morizumi

January 16, 2017
Tweet

More Decks by Yusuke Morizumi

Other Decks in Technology

Transcript

  1. © IBM Corporation 2 ⾃⼰紹介 @ymorizumi 森住 祐介(もりずみ ゆうすけ) クラウド・エバンジェリスト

    developerWorks⽇本語版 編集⻑ 主な仕事: クラウド・エバンジェリストとして講演や提案 スタートアップ⽀援 デベロッパー⽀援 デベロッパー向けメディアの企画・編集
  2. © 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アプリ編]
  3. © IBM Corporation 4 IBM Bluemixはハッカソンに最適なクラウド基盤 開発者 わずか30秒 で クラウド上にアプリの

    実⾏環境を作成 カタログからサービス(API)を ⾃由に組み合わせて連携 環境セットアップの⼿間と時間を削減 ランタイム アプリ IoT IoT NoSQL NoSQL NoSQL NoSQL NoSQL Watson IoT 開発者が開発に専念できる基盤
  4. © 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と同等)
  5. © IBM Corporation 10 アプリケーション実⾏環境の構築 ▪トップページに表⽰されたカテゴリの中から「計算」をクリック。 読み込み中 の状態でOK Cloud Foundry

    アプリケーション ▪「Cloud Foundryアプリケーション」のタブが選択されていることを確認し、右上の 「+」ボタンをクリックします。
  6. © IBM Corporation 12 アプリケーション実⾏環境の構築 ▪初めてBluemixを使⽤する場合、「組織の作成」画⾯が表⽰されます。 地域は「⽶国南部」、組織名はメールアドレスを指定し、「作成」をクリックします。 好きな名前を 付けてもOK 組織の作成は初回のみ

    必要な作業です。 設定済みの⽅は、 地域が「⽶国南部」に なっていることを確認し、 P.14に進んでください。 現在の地域を確認するに は、最上段右のアイコン をクリック。
  7. © IBM Corporation 15 アプリケーション実⾏環境の構築 ▪アプリケーション名を指定し、右下の「作成」をクリック。 環境の作成が始まります。 アプリ名は任意の⽂字列で 構いませんが、 http://xxx.mybluemix.net

    というURLでインターネットに 公開されるので、重複しない 名前である必要があります。 アプリ名の欄に⼊⼒すると、 同じ名前がホスト名として 指定されます
  8. © IBM Corporation 27 アプリケーションの修正 ▪サンプルアプリのコードを編集してみましょう。 左側のツリー表⽰から public ディレクトリを展開し index.html

    を選択します。 ▪表⽰内容を変更してみましょう。 18⾏⽬、<h1>タグの中の 「Hi there!」を他の⽂字列に置き換えます。
  9. © IBM Corporation 31 Node-RED : インターフェース シート キャンバス 処理フロー

    ノードパレット ノード デプロイボタン Node情報ウィンドウ または デバッグコンソール 表⽰情報の 切り替えタブ メニューボタン
  10. © IBM Corporation 32 ハンズオンの前に ‒ サンプルフローの削除 ▪IoT Platformボイラープレートで作成したNode-REDには、デフォルトの状態でサン プルの

    フローが⽤意されています。 今回のハンズオンでは不要ですので削除します。 ▪ノードを選択して、Deleteキーで削除できます。ひとつずつ削除するのは⾯倒なの で、「Ctrl」+「A」キーでシート上のすべてのノードを選択し、Deleteキーで⼀括削 除します。 選択されたノードはオレンジ⾊の線で囲ま れます その他のショートカットキーは右上端のメニューか ら「Keyboard Shortcuts」で確認できます
  11. © IBM Corporation 34 Node-REDによるIoTアプリ開発 ‒ システムイメージ IoT Platform デバイス

    IBM Bluemix アプリケーション スマホのセンサーで計測した データをクラウドサービスに送信 サービス アプリはサービスからセンサー データを取得して処理する IoT Platform サービスは センサーデータを仲介する
  12. © IBM Corporation 40 IoTアプリの作成 ▪ 「tiltLR」の値によって処理を分岐させます。 左側のパレットから「switch」ノードを中央のキャンバスにドラッグ&ドロップします。 ダブルクリックで設定画⾯を開き、分岐条件を指定します。 左に5度以上傾いた場合=「左に傾いてます」

    右に5度以上傾いた場合=「右に傾いてます」 傾きが5度未満の場合=「ほぼフラットです」 上記のような条件設定をするには 右図のように指定して「OK」を クリックします。 傾きが-5度以上(左)なら1番へ 傾きが5度以上(右)なら2番へ どちらでもない(フラット)なら3番へ この部分をクリックして データ型をnumberに 変更します 条件を追加するには、 「+rule」 ボタンをクリックします。
  13. © IBM Corporation 41 IoTアプリの作成 ▪スマートフォンをお持ちの⽅は、 スマホのブラウザで下記URLに アクセスしてください。 http://phonesensor.mybluemix.net ▪PhoneSensorが起動します。スマホに内蔵された各種

    センサーの情報を取得し、BluemixのIoT Platform サービスにデータを送信しています。 ▪このセンサー情報を受け取って処理するアプリを Bluemix上のNode-REDで作ってみましょう。
  14. © IBM Corporation 42 IoTアプリの作成 ▪スマホのセンサー情報を、BluemixのIoT Platformサービス から受け取ってみましょう。 左側のパレットから「ibmiot」ノードを中央のキャンバス にドラッグ&ドロップします。

    ドラッグ&ドロップ ▪キャンバスにドロップした「IBM IoT」ノードをダブルクリックして設定画⾯を開きます。 Device Id に先程スマホでアクセスしたPhoneSensorに 表⽰されているquickstart:phone-sensorの後に記載 されている12桁の数字を⼊⼒して「OK」をクリック。 この数字を 転記する
  15. © IBM Corporation 44 IoTアプリの作成 ▪これでデータの⼊⼒と出⼒の定義ができました。 それでは作成したフローを動かしてみましょう。 右上の「Deploy」ボタンをクリックします。 画⾯上部に「Successfully deployed」と表⽰されれば

    OKです。(このメッセージはすぐに消えます) ▪実⾏結果を確認してみましょう。 右上の「debug」タブを選択します。debugノードに流れて きたデータはここに表⽰されます。 先程のPhoneSensorを動かします。スマホのセンサー情報が debug画⾯に表⽰されれば成功です。
  16. © IBM Corporation 45 IoTアプリの作成 ▪debug画⾯にセンサーデータがうまく表⽰されない場合のチェックポイント -PhoneSensorが正しく稼動しているかどうかを確認してください。スリープ状態で アプリが 停⽌していないでしょうか。 -PhoneSensorの接続ステータスが「Connected」になっていることを確認してくだ

    さい。例えば、誤ってPhoneSensor画⾯下部の「Register」をタップしてしまうと、 ステータスが 「Disconnected」になります。 -「IBM IoT」ノードのDevice Idが 正しく設定されているかどうかを ご確認ください。 スマホのWebブラウザで PhoneSensorを再読み込みすると Device Idが変わってしまいます。 その場合は再度「IBMIoT」ノードの 定義情報をPhoneSensor側と 同じになるよう変更してください。
  17. © IBM Corporation 46 IoTアプリの作成 ▪正しくセンサー情報が取得できたので、この情報に応じて何らかの処理を⾏うフローを作っ てみましょう。 「tiltLR」というデータ項⽬に着⽬します。 これはスマホ端末の左右の傾きを測定しているようです。 実際に端末を動かして、値の変化を確認してください。

    この傾き度合いによって表⽰メッセージを変えてみましょう。 ▪センサー情報から「tiltLR」の値だけを抽出します。 左側のパレットから「function」ノードをキャンバスに ドラッグ&ドロップします。 ダブルクリックで設定画⾯を開き、Functionの内容を 以下のように書き換えて「OK」をクリックします。 return {payload:msg.payload.d.tiltLR};
  18. © IBM Corporation 47 IoTアプリの作成 ▪正しく動くかどうか確認してみましょう。 「IBMIoT」と「debug」との間に、今作成し た 「function」ノードを挟むように線を繋ぎ変え ます。

    ▪不要な情報が削除されて、「tiltLR」の値だけが 表⽰されればOKです。 スマホの傾きを変えて、tiltLRの数字が変化するこ とを 確認してください。 ▪右上の「Deploy」ボタンをクリックし ます。
  19. © IBM Corporation 48 IoTアプリの作成 ▪条件分岐された後の処理を作成します。 左側のパレットから「template」ノードを中央のキャンバス にドラッグ&ドロップします。 ダブルクリックで設定画⾯を開き、表⽰するメッセージを定 義します。

    ご⾃由にメッセージの内容を⼊⼒してください。 {{payload}} と指定すると、先程 debug画⾯で確認した傾きデータ の値が表⽰されます。 1番(左) 2番(右) 3番(フラット) ▪3つのtemplateノードを作成し、 最後にswitchノードと線で繋げます。
  20. © IBM Corporation 50 IoTアプリの作成 ▪デプロイが完了したら、PhoneSensorを稼動させた スマホを左右に傾けてメッセージが正しく表⽰されることを 確認してください。 お疲れ様でした! IBM

    Bluemix と Node-RED によって、 ほぼノンプログラミングでIoTデバイスから収集し たデータを処理するロジックが作れました。
  21. © IBM Corporation 51 IoTアプリの作成 ‒ 発展 ▪余裕のある⽅は、以下のようにフローを拡張する⽅法を考えてみてください。 1. スマホを振るとTwitterにアラートメッセージを投稿する

    2. 左右の傾きに加えて、前後の傾きの値もチェックしてメッセージを表⽰する 3. debugコンソールへのメッセージの出⼒頻度を変更する 4. メッセージにタイムスタンプを付加して出⼒する 例えばX軸加速度(accelX)の値が8以上の場合にTweetするという実装ができます。 前後の傾き(tiltFB)の値を条件として分岐させます。 さらにtiltLRとtiltFBの両⽅の値から、「右前に傾いている」、「左後ろに傾いてい る」というメッセージを表⽰することもできそうですね。 functionノードでタイムスタンプの取得と出⼒内容の加⼯ができます。 次の演習「Cloudant編」を参照。 delayノードで頻度を調整できます。
  22. © 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への格納
  23. © IBM Corporation 60 ▪IBMIoTからfunction、functionからsensorと線を繋いでフローを完成させます。 ここを繋 ぐ ここを繋 ぐ ▪それでは実⾏してみましょう。

    右上の「Deploy」ボタンをクリックしてデプロイした上で、しばらくの間スマホのPhone Sensorを動かしてみてください。 センサーデータがDBに追加されているはずです。 センサーデータのDBへの格納
  24. © IBM Corporation 65 Cloudant DBの索引検索 ▪tiltLRをキーにして索引を付けてみましょう。 DatabasesメニューのAll Documentsの「+」をクリックし、プルダウンメニューから 「Query

    Indexes」を選択します。 ▪indexの定義フォームの4⾏⽬を“tiltLR”と変 更し、「Create index」をクリックします。
  25. © 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の索引検索
  26. © 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の⼀覧にアクセスできます。
  27. © 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」です。 しかし、肝⼼のセンサーデータが表⽰されていませんね。
  28. © 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などの アドオンやツールを導⼊済みの⽅はトライして みてください
  29. © 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
  30. © 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アプリの作成
  31. © IBM Corporation 84 ▪設定画⾯のTemplate欄にアプリケーションの コードを⼊⼒して、「OK」をクリック。 コードは下記URLにあります。 template_node.html の内容を コピー&ペーストしてください。

    ▪これでWebアプリケーションのフローは完成です。 それでは実⾏してみましょう。 右上の「Deploy」 ボタンをクリックします。 https://ibm.biz/PhoneSensor (PとSのみ⼤⽂字です) Webアプリの作成
  32. © IBM Corporation 88 Bluemix User Group - BMXUG(ビーザグ) Bluemixのユーザー会が発⾜しました!

    ぜひご参加ください! BMXUGはユーザー様主体、有志によって運営される 情報交換・ネットワーキングの場です