Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
IBM Cloud 初⼼者向けハンズオンセミナー
⽇本IBM株式会社⽇本IBMシステムズ・エンジニアリング株式会社
© 2017 IBM Corporation2
ご注意
この資料は⽇本アイ・ビー・エム株式会社および⽇本アイ・ビー・エム システムズ・エンジニアリング株式会社の正式なレビューを受けておりません。資料の内容には正確を期するよう注意しておりますが、この資料の内容は2017年11⽉現在の情報であり、製品の新しいリリース、修正などによって動作/仕様が変わる可能性があります。当資料は、資料内で説明されている製品の仕様を保証するものではありません。従って、この情報の利⽤またはこれらの技法の実施はひとえに使⽤者の責任において為されるものであり、資料の内容によって受けたいかなる被害に関しても⼀切の補償をするものではありません。また、IBM、IBMロゴおよびibm.comは、世界の多くの国で登録されたInternational Business Machines Corporationの商標です。他の製品名およびサービス名等は、それぞれIBMまたは各社の商標である場合があります。現時点でのIBMの商標リストについてはhttp://www.ibm.com/legal/copytrade.shtmlをご覧ください。
© 2017 IBM Corporation3
ハンズオンに際してq 当ハンズオンの推奨ブラウザーはFirefoxです。
© 2017 IBM Corporation4
アジェンダ1. IBM Cloudとは?そして何ができるのか
¦ IBM Cloudとは¦ IBM Cloudの特徴¦ IBM Cloudでできること
2. ライト・アカウントとは¦ ライト・アカウントとは¦ ライト・アカウントの制約
3. わずか数分で完了。アプリ環境を作ってみよう¦ IBM Cloudライト・アカウント作成⼿順¦ IBM Cloudへのログイン¦ IBM Cloud画⾯概要¦ IBM Cloudでアプリ開発するための基本⽤語¦ ランタイムを⽤意する¦ サービスを⽤意する¦ 実際に接続する際は…¦ アプリの停⽌、削除
4.ノンプログラミングでアプリを作る、Node-REDを体験してみよう
¦ Node-REDとは?¦ Node-RED環境を⽤意する¦ Node-REDの画⾯説明¦ Node-REDの使い⽅を学ぶ¦ シンプルなフローの作成¦ ここまでのまとめ
5. スマホを使ったIoTアプリを作ってみよう¦ ハンズオン概要¦ Node-RED で IoT アプリを作成する¦ 実際にどのように動作しているか
6. Webアプリを作ってみよう¦ ハンズオン概要¦ ハンズオンの流れ¦ HTMLをWebページに表⽰してみよう¦ DBの構成¦ WebAPIを作ってみよう¦ 画⾯の確認¦ インポートしたフローの確認
© 2017 IBM Corporation5
アジェンダ1. IBM Cloudとは?そして何ができるのか
¦ IBM Cloudとは¦ IBM Cloudの特徴¦ IBM Cloudでできること
2. ライト・アカウントとは¦ ライト・アカウントとは¦ ライト・アカウントの制約
3. わずか数分で完了。アプリ環境を作ってみよう¦ IBM Cloudライト・アカウント作成⼿順¦ IBM Cloudへのログイン¦ IBM Cloud画⾯概要¦ IBM Cloudでアプリ開発するための基本⽤語¦ ランタイムを⽤意する¦ サービスを⽤意する¦ 実際に接続する際は…¦ アプリの停⽌、削除
4.ノンプログラミングでアプリを作る、Node-REDを体験してみよう
¦ Node-REDとは?¦ Node-RED環境を⽤意する¦ Node-REDの画⾯説明¦ Node-REDの使い⽅を学ぶ¦ シンプルなフローの作成¦ ここまでのまとめ
5. スマホを使ったIoTアプリを作ってみよう¦ ハンズオン概要¦ Node-RED で IoT アプリを作成する¦ 実際にどのように動作しているか
6. Webアプリを作ってみよう¦ ハンズオン概要¦ ハンズオンの流れ¦ HTMLをWebページに表⽰してみよう¦ DBの構成¦ WebAPIを作ってみよう¦ 画⾯の確認¦ インポートしたフローの確認
© 2017 IBM Corporation6
IBM Cloud とはq IBM Cloudは、アプリを開発・管理・実⾏するためのクラウド基盤ですq Web、モバイル、コグニティブ、IoTなど様々なアプリで活⽤できます
1 企業のイノベーションを加速させるための数多くの最先端のテクノロジーを提供
2 多彩な実⾏環境を提供することで、ビジネス要件に応じたアプリ開発を実現
3複数の提供形態と強⼒なインテグレーションサービスを提供し、ハイブリッドクラウドを実現 Networking Networking
Storage StorageServers ServersVirtualization VirtualizationO/S O/SMiddleware MiddlewareRuntime RuntimeData DataApplications Applications
Infrastructureas a Service
Platformas a Service
VendorManagesinCloud
ClientM
anages
© 2017 IBM Corporation7
IBM Cloudの特徴(1)〜130以上の最新テクノロジーのサービス
q IBM Cloudでは、サービスを⾃由に組み合わせて開発をしていきます
© 2017 IBM Corporation8
IBM Cloudの特徴(2)〜多彩な実⾏環境を⽤いた開発
q ビジネス要件にあわせたコンピューティング環境を提供しますq IBMクラウドは⽤途に合わせて様々なコンピューティング環境を⾃由に
選択し、アプリの開発が⾏えます
サーバーレス
(IBM Cloud Functions)コンテナーバーチャルサーバー
or VMware
開発スピードポータビリティパフォーマンス & コントロール
ベアメタル ランタイム
(Cloud Foundry)Ø パフォーマンスの最
⼤化とコントロール⾃由度の保持
Ø 既存の資産やツールの活⽤
Ø Dockerベースのコンテナーを提供
Ø コンポーザブルなサービス構築
Ø Kubernetesのサポートを開始
Ø オープン・テクノロジーを活⽤したPaaS基盤
Ø オープンソースでのサーバーレス環境
© 2017 IBM Corporation9
IBM Cloudの特徴(3) 〜2つの提供形態が⽤意されたクラウド
q 2つの提供形態で、お客様の要件に応じた環境を選択できます
パブリック・クラウド上
・思い⽴ったらすぐに始められる・必要なときに必要な分だけ・気になるサービスをすぐに試してアプリ開
発
・規制遵守やコンプライアンス対応・国内DCに構築可能・エンドユーザーに100%のパフォーマンス
を提供
共有 - Public 専有 - Dedicated
© 2017 IBM Corporation10
IBM Cloudでできること(1)〜スピーディーな開発
利⽤可能なプログラム実⾏環境
Liberty for Java™ SDK for Node.js™ XPagesGo PHP Python Ruby swift Tomcat コミュニティーのビルドパック
スペックの⾒積もり
マシンの購⼊
OSを導⼊
ミドルウェアを導⼊
OS、MWの構成
フィックスパック適⽤
サーバールーム設計
フィックスパック適⽤
フィックスパック適⽤
開発
開発
従来の環境構築 IBM Cloudを⽤いた環境構築
開発の⾔語 と アプリの名前その2つを決めるだけ。
アプリ開発者
アプリコード
実⾏環境実⾏環境の作成
© 2017 IBM Corporation11
IBM Cloudでできること(2)〜 Watsonを使ったAI活⽤
q Watsonサービスは4種類に分類できます
分析系
⾳声系
画像系
⾔語系
Speech to Text⾳声をテキスト⽂章に変換する
Text to Speechテキスト⽂章を⾳声に変換する
Visual Recognition画像コンテンツに含まれる意味を検出する
Discovery(⽇本語未対応)認知検索およびコンテンツ分析エンジンをアプリに追加して、優れた意思決定を⾏うのに役⽴つパターン、傾向、およびアクション可能な洞察を識別する
Conversationアプリに⾃然⾔語インターフェースを追加してエンドユーザとのやり取りを⾃動化
Document Conversion⽂書を新しい形式に変換する
Language Translator(⼀部⽇本語未対応) ※1⾃然⾔語テキストについて他⾔語へ翻訳を⾏う
Natural Language Understanding(⽇本語未対応)⾃然⾔語からキーワード抽出、エンティティー抽出、感情分析、概念タグ付け、分類法種別などを⾏う
Personality Insightsテキストから筆者の性格を推定する
Natural Language Classifierテキスト⽂章の分類を⾏う(質問の意図推定など)
Tone Analyzer(⽇本語未対応)テキストの感情、社交性、⽂体を解析する
© 2017 IBM Corporation12
IBM Cloudでできること(3)〜 Watsonを使ったAI活⽤アプリ①
q 照会応答システム¦ ⾔語系機能/⾳声系機能の利⽤により、照会応答を⽀援するシステムを提供します
・短時間の応答処理・不慣れなスタッフ
でも対応可能・いつでも照会対応
照会応答⽀援⾃然⾔語分類
検索およびランク付け
⽂書変換
対話
セルフ・アシスタンス
・⾳声でのリアルタイム認識、チャット対応
⾳声認識
⾳声合成
© 2017 IBM Corporation13
IBM Cloudでできること(4)〜 Watsonを使ったAI活⽤アプリ②
q LINEを利⽤したQAサービス¦ Watsonの⾔語系機能を活⽤¦ ⾦利などの問い合わせをLINEで対応可能に
q 飲⾷店のクチコミ投稿サイト¦ Watsonの画像認識機能を活⽤¦ サイトの利⽤者がクチコミを投稿する際に、⼀緒に投稿した写真を分類して、
キーワードから画像検索を可能に
© 2017 IBM Corporation14
アジェンダ(再掲)1. IBM Cloudとは?そして何ができるのか
¦ IBM Cloudとは¦ IBM Cloudの特徴¦ IBM Cloudでできること
2. ライト・アカウントとは¦ ライト・アカウントとは¦ ライト・アカウントの制約
3. わずか数分で完了。アプリ環境を作ってみよう¦ IBM Cloudライト・アカウント作成⼿順¦ IBM Cloudへのログイン¦ IBM Cloud画⾯概要¦ IBM Cloudでアプリ開発するための基本⽤語¦ ランタイムを⽤意する¦ サービスを⽤意する¦ 実際に接続する際は…¦ アプリの停⽌、削除
4.ノンプログラミングでアプリを作る、Node-REDを体験してみよう
¦ Node-REDとは?¦ Node-RED環境を⽤意する¦ Node-REDの画⾯説明¦ Node-REDの使い⽅を学ぶ¦ シンプルなフローの作成¦ ここまでのまとめ
5. スマホを使ったIoTアプリを作ってみよう¦ ハンズオン概要¦ Node-RED で IoT アプリを作成する¦ 実際にどのように動作しているか
6. Webアプリを作ってみよう¦ ハンズオン概要¦ ハンズオンの流れ¦ HTMLをWebページに表⽰してみよう¦ DBの構成¦ WebAPIを作ってみよう¦ 画⾯の確認¦ インポートしたフローの確認
© 2017 IBM Corporation15
ライト・アカウントとはq 2017年11⽉1⽇より従来提供されていた30⽇間フリートライアルが廃⽌とな
り、IBM Cloud ライト・アカウントの提供が開始しました
試⽤期間の制限なし
クレジットカード不要
256MBのCloud Foundryメモリ
組織1つ、地域1つ
全カタログの閲覧可能
主要サービスをライト・プランで使⽤
ライト・プラン毎にインスタンスは1つ
10⽇間開発なしでアプリ⾃動停⽌
30⽇間活動なしでサービス⾃動削除
アカウント登録
ライト・アカウント
クレジットカード不要、期限の制限なし
従量課⾦(PAYG)
アカウント
サブスクリプション
アカウント
無料有料
必要な時に有料アカウントへ
移⾏可能
© 2017 IBM Corporation16
ライト・アカウントの制約q ライト・アカウントには以下の制約があります
¦ 10⽇間開発なしでアプリの⾃動停⽌¦ 30⽇間活動なしでサービスを⾃動削除
¦ 主要サービスをライト・プランで使⽤可能n ライトプランはIBM Cloudサービスの完全無償プランn ライト・プランで使い始め、⾼機能な環境が必要な時に有料プランへ移⾏をすることも可能n 上限に近づくとメールで通知、上限に達するとサービス利⽤不可n 上限に達しても、リセット機能により再び利⽤可能となる
使⽤中
使⽤中
開発ナシ
活動ナシ30⽇間
アプリを⾃動停⽌
サービスを⾃動削除
10⽇間
サービス
アプリ
App App
© 2017 IBM Corporation17
アジェンダ(再掲)1. IBM Cloudとは?そして何ができるのか
¦ IBM Cloudとは¦ IBM Cloudの特徴¦ IBM Cloudでできること
2. ライト・アカウントとは¦ ライト・アカウントとは¦ ライト・アカウントの制約
3. わずか数分で完了。アプリ環境を作ってみよう¦ IBM Cloudライト・アカウント作成⼿順¦ IBM Cloudへのログイン¦ IBM Cloud画⾯概要¦ IBM Cloudでアプリ開発するための基本⽤語¦ ランタイムを⽤意する¦ サービスを⽤意する¦ 実際に接続する際は…¦ アプリの停⽌、削除
4.ノンプログラミングでアプリを作る、Node-REDを体験してみよう
¦ Node-REDとは?¦ Node-RED環境を⽤意する¦ Node-REDの画⾯説明¦ Node-REDの使い⽅を学ぶ¦ シンプルなフローの作成¦ ここまでのまとめ
5. スマホを使ったIoTアプリを作ってみよう¦ ハンズオン概要¦ Node-RED で IoT アプリを作成する¦ 実際にどのように動作しているか
6. Webアプリを作ってみよう¦ ハンズオン概要¦ ハンズオンの流れ¦ HTMLをWebページに表⽰してみよう¦ DBの構成¦ WebAPIを作ってみよう¦ 画⾯の確認¦ インポートしたフローの確認
© 2017 IBM Corporation18
IBM Cloudライト・アカウント作成⼿順q 以下のリンク先で「フリー・アカウントの作成」をクリックしますq https://console.bluemix.net/registration/free
© 2017 IBM Corporation19
IBM Cloudライト・アカウント作成⼿順q Eメールアドレス、名前、国または地域などの必要項⽬を⼊⼒しますq スクロールダウンして「アカウントの作成」をクリックします
�����������
��������
必要事項を記⼊してスクロールダウン
© 2017 IBM Corporation20
IBM Cloudライト・アカウント作成⼿順q 登録したEメールアドレスに以下のメールが届いているのでメールの中の「
Confirm Account」をクリックします
© 2017 IBM Corporation21
IBM Cloudへのログインq 「ログイン」をクリックし、IBM Cloudアカウント登録時に⼊⼒したEメール
アドレスを⼊⼒し「次へ」、パスワードを⼊⼒し「Log In」をクリックします
© 2017 IBM Corporation22
IBM Cloudへのログインq IBM Cloudのダッシュボードが表⽰されますq 以上でライト・アカウントの作成、ログインは完了です
����������
© 2017 IBM Corporation23
IBM Cloud画⾯概要(1)q 画⾯上部のメニューから各種情報にアクセスできます
q 資料¦ IBM Cloudに関するヘルプ⽂書を提供します
q カタログ¦ IBM Cloudが提供するランタイム、サービスの⼀覧を表⽰します
q サポート¦ サポートチケットの追加・確認やサポート記事の検索、問い合わせに関する
情報を表⽰しますq 管理
¦ アカウント情報やIBM Cloud使⽤量、アクセス権限などを表⽰します
© 2017 IBM Corporation24
IBM Cloudでアプリ開発するための基本⽤語
コンテナー
アプリバインド
プッシュ
サービス作成アプリ開発者
プッシュ作成したアプリをアップロードし、対応するランタイムを要求・⽣成する操作
バインドランタイムからサービスに接続すること。ランタイム上の環境変数(VCAP_SERVICES)に接続情報が提供されるようになる
ランタイムJava, Node.js, Ruby, PHP, Python, Go等アプリの開発⾔語に合わせた実⾏環境。「コンテナー」単位で環境を提供
サービスアプリが必要とする機能を提供する。いつでも好きなタイミングで作成・削除可能。ランタイムとの組み合わせ可否に要注意
© 2017 IBM Corporation25
Webアプリの三層アーキテクチャq IBM Cloudが提供する「ランタイム」はアプリ・サーバーに対応し、
「サービス」はデータベースなどのコンポーネントに対応します¦ これら2つをこれから⽤意します
クライアント アプリ・サーバー
データベース
© 2017 IBM Corporation26
ランタイムを⽤意する(1/5)q 画⾯右上の「カタログ」をクリックします
q 画⾯左のカテゴリーから「Cloud Foundry アプリ」を選択します
© 2017 IBM Corporation27
ランタイムを⽤意する(2/5)今回はNode.jsのアプリ・サーバーを⽤意しますq カタログ画⾯内の「SDK for Node.js」をクリックします
© 2017 IBM Corporation28
ランタイムを⽤意する(3/5)q 「アプリ名」に「hello-<⽇付YYYYMMDD>-<受講ID>」を⼊⼒します
¦ ホスト名は他のユーザーと被らないように設定する必要がありますq スクロールダウンし、「256MB」を選択して「作成」をクリックします
スクロールダウンして選択
© 2017 IBM Corporation29
ランタイムを⽤意する(4/5)q アプリのステージングが始まります
¦ 「●このアプリは稼働中ですが、開発が⾮アクティブになって10⽇後にスリープ状態になります」となれば起動完了です
開始中のまま、なかなか(3分以上)ステータスが変更されない場合は画⾯を更新
してみて下さい
© 2017 IBM Corporation30
ランタイムを⽤意する(5/5)q 「経路」をクリックして開き、アプリのURL(設定したアプリ名.mybluemix.net)
をクリックして作成したアプリを開きます
q アプリの作成が完了した段階では、サンプルアプリが動作しています
© 2017 IBM Corporation31
IBM Cloud画⾯概要(2)q アプリの詳細画⾯に戻り「概要」タブをクリックしますq この画⾯でアプリのインスタンス数、メモリ数を変更できます
¦ ライト・アカウントのメモリ上限は256MBです
© 2017 IBM Corporation32
IBM Cloud画⾯概要(3)q アプリ詳細画⾯の「ログ」タブをクリックしますq この画⾯でアプリのログ、エラーログを確認することができます
¦ エラーログを表⽰するためにはタブを「すべて」から「エラー」に切り替えます
© 2017 IBM Corporation33
Webアプリの三層アーキテクチャ(再掲)q IBM Cloudが提供する「ランタイム」はアプリ・サーバーに対応し、
「サービス」はデータベースなどのコンポーネントに対応します
q ランタイム部分が⽤意できました
クライアント アプリ・サーバー
データベース
© 2017 IBM Corporation34
サービスを⽤意する(1/8)データベースサービスを⽤意しますq IBM Cloud画⾯右上の「カタログ」をクリックしますq カタログ画⾯が表⽰されたら、画⾯左側のカテゴリーから「データ & 分析」を
選択しますq カタログ内の「Cloudant NoSQL DB」を選択します
© 2017 IBM Corporation35
サービスを⽤意する(2/8)q Cloudant NoSQL DBサービスの詳細画⾯が表⽰されます
¦ 画⾯を下にスクロールすると価格プランが確認できます
q 画⾯右下の「作成」ボタンをクリックします
© 2017 IBM Corporation36
サービスを⽤意する(3/8)q ダッシュボード画⾯に移ったら、「サービス」欄にCloudant NoSQL DBのサ
ービス・インスタンスが表⽰されることを確認します
q 注意¦ 以下のようなCloudant NoSQL DBの詳細画⾯が表⽰された⽅は、左上の「IBM
Bluemix」ロゴをクリックし、ダッシュボード画⾯を開いてください
© 2017 IBM Corporation37
サービスを⽤意する(4/8)q 「Cloud Foundry アプリ」欄 に表⽰されている、以前の⼿順で作成した
サンプルアプリ項⽬をクリックします¦ アプリ名をクリックしてください
© 2017 IBM Corporation38
サービスを⽤意する(5/8)q アプリの詳細画⾯(概要)にある「接続」欄の「既存に接続」ボタンをクリック
します
© 2017 IBM Corporation39
サービスを⽤意する(6/8)q 「既存のサービスの接続」画⾯にて、Cloudant NoSQL DBを選択しますq 選択後に画⾯右下の「接続」ボタンをクリックします
© 2017 IBM Corporation40
サービスを⽤意する(7/8)q 「アプリの再ステージ」画⾯が表⽰されたら、今回は「キャンセル」を
選択します
© 2017 IBM Corporation41
サービスを⽤意する(8/8)q 画⾯左側のメニューにて「ランタイム」を選択しますq 選択後に表⽰される画⾯にて「環境変数」をクリックします
q Cloudant NoSQL DBへの接続に必要な情報が環境変数「VCAP_SERVICES」に格納されていることを確認します¦ 実際のアプリ開発場⾯では、この環境変数からサービスの接続情報を取得したうえで
サービスを呼び出すようにコーディングします
© 2017 IBM Corporation42
Webアプリの三層アーキテクチャ(再掲)q IBM Cloudが提供する「ランタイム」はアプリ・サーバーに対応し、
「サービス」はデータベースなどのコンポーネントに対応します
q ランタイム部分に続き、サービス部分も⽤意できました
クライアント アプリ・サーバー
データベース
© 2017 IBM Corporation43
実際に接続する際は…q 環境変数(VCAP_SERVICES)にサービスの接続情報が伝搬されるの
で環境変数から必要な情報を取得するようにコーディングを⾏います
ランタイム
バインドしたいサービス
WLP.war
{:"cloudantNoSQLDB": [
{"name": "Cloudant NoSQL DB-IBM", "label": "cloudantNoSQLDB”,"plan": "Shared”,"credentials": {
"username": "XXXX","password": "XXXXYYYY","host": "XXXX-bluemix.cloudant.com”,"port": 443,"url": "https://〜”
}}
]:} VCAP_SERVICES
New
バインド
環境変数を意識して開発
(*) サービスのバインド操作後、ランタイムの再ステージが必要
コンソール等でバインド操作や環境変数の確認が可能
© 2017 IBM Corporation44
アプリの停⽌、削除(1/3)
q 左上のロゴをクリックしてダッシュボードに戻ります
q アプリ名の右側の をクリックし「アプリの停⽌」をクリックします
q 確認画⾯で「停⽌」ボタンをクリックします
© 2017 IBM Corporation45
アプリの停⽌、削除(2/3)q アプリの状態が「●停⽌」と表⽰されることを確認します
q 再度 をクリックし、「アプリの削除」をクリックしますq 削除の確認画⾯が出たらCloudant NoSQL DBにチェックを⼊れ「経路」をク
リックし、アプリ名にチェックを⼊れ「削除」をクリックします
© 2017 IBM Corporation46
アプリの停⽌、削除(3/3)q アプリ、サービスが削除され、初めと同じ何もない状態に戻ります
© 2017 IBM Corporation47
アジェンダ(再掲)1. IBM Cloudとは?そして何ができるのか
¦ IBM Cloudとは¦ IBM Cloudの特徴¦ IBM Cloudでできること
2. ライト・アカウントとは¦ ライト・アカウントとは¦ ライト・アカウントの制約
3. わずか数分で完了。アプリ環境を作ってみよう¦ IBM Cloudライト・アカウント作成⼿順¦ IBM Cloudへのログイン¦ IBM Cloud画⾯概要¦ IBM Cloudでアプリ開発するための基本⽤語¦ ランタイムを⽤意する¦ サービスを⽤意する¦ 実際に接続する際は…¦ アプリの停⽌、削除
4.ノンプログラミングでアプリを作る、Node-REDを体験してみよう
¦ Node-REDとは?¦ Node-RED環境を⽤意する¦ Node-REDの画⾯説明¦ Node-REDの使い⽅を学ぶ¦ シンプルなフローの作成¦ ここまでのまとめ
5. スマホを使ったIoTアプリを作ってみよう¦ ハンズオン概要¦ Node-RED で IoT アプリを作成する¦ 実際にどのように動作しているか
6. Webアプリを作ってみよう¦ ハンズオン概要¦ ハンズオンの流れ¦ HTMLをWebページに表⽰してみよう¦ DBの構成¦ WebAPIを作ってみよう¦ 画⾯の確認¦ インポートしたフローの確認
© 2017 IBM Corporation48
Node-REDとは?(1)q Node-REDとは、デバイス、API、オンラインサービスなどの機能を
繋げてアプリを作成していくプラットフォームです¦ IBMのEmerging Technology Teamが開発したソフトウェア¦ 元々はIoTデバイスの活⽤に特化したビジュアル・ツールだが現在は汎⽤的¦ オープンソース・ソフトウェアでありNode.jsが動く環境なら何処でも動かせる
(IBM Cloud環境ではなくても使⽤可能です)
ノード(カプセル化された機能)
© 2017 IBM Corporation49
Node-REDとは?(2)q ノードを組み合わせてつくられる処理をフローと呼びます
q フローの例
IoTデバイスからのデータが送信されたら データベースにInsertする
/helloにHttp Getリクエストが着たら Webページ(HTML)を 返信する
条件にヒットするTweetがあれば コンソールに出⼒する
© 2017 IBM Corporation50
Node-REDとは?(3)q ノード間でのデータの受け渡しは“msg” オブジェクトを⽤いて⾏います
¦ “msg”とはnode 間を流れるメッセージを表す JSON オブジェクトです¦ 主に「msg.payload」 でデータの⼊出⼒を⾏います
msg.payload
パス! 受け取ります
msg.payload
変換処理
1510039104410Tue Nov 07 2017 07:32:04 GMT+0000 (UTC)
パス! 受け取ります
© 2017 IBM Corporation51
Node-RED環境を⽤意する (1/10)q 画⾯右上の「カタログ」をクリックします
q ボイラープレートのカテゴリーから「 Internet of Things Platform Starter 」を選択します
© 2017 IBM Corporation52
Node-RED環境を⽤意する (2/10)q アプリ名を⼊⼒し、「作成」ボタンをクリックします
¦ 名前: noderedapp-<⽇付YYYYMMDD>-<受講ID>¦ アプリ名以外の項⽬はデフォルトのまま
© 2017 IBM Corporation53
Node-RED環境を⽤意する (3/10)q Node-RED環境のデプロイが完了するまでしばらく待ちます(2-3分)
© 2017 IBM Corporation54
Node-RED環境を⽤意する (4/10)q アプリが「 」に遷移した後「経路」を開いてアプリのURLをクリックします
q 以下のような画⾯が表⽰されれば、アプリの作成は成功です
© 2017 IBM Corporation55
Node-RED環境を⽤意する (5/10)q 以下の画⾯右下の「Next」をクリックします
© 2017 IBM Corporation56
Node-RED環境を⽤意する (6/10)q ログイン・ユーザーを設定し、「Next」をクリックします
¦ ユーザー名は「handson-<受講ID>」、パスワードは任意で設定します
© 2017 IBM Corporation57
Node-RED環境を⽤意する (7/10)q 問題がなければ「Finish」をクリックし、セットアップを完了します
© 2017 IBM Corporation58
Node-RED環境を⽤意する (8/10)q Node-REDのトップ・ページが表⽰されたら、「Go to your Node-RED flow
editor」をクリックします
© 2017 IBM Corporation59
Node-RED環境を⽤意する (9/10)q ユーザー名/パスワードを⼊⼒し、ログインします
¦ 指定するユーザー名: handson-<受講ID>¦ パスワード: <⾃⾝が設定した⽂字列>
先ほど設定したユーザー名と
パスワードを使⽤
© 2017 IBM Corporation60
Node-RED環境を⽤意する (10/10)q Node-REDのエディター画⾯が表⽰されます
¦ (デフォルトでサンプルのフローが作成されています)
ここまででNode-REDの環境が⽤意できました!
© 2017 IBM Corporation61
Node-REDの画⾯説明ノードパレット
ノード
シート
キャンバス
処理フロー
ノード情報
メニュー
デプロイ
© 2017 IBM Corporation62
Node-REDの使い⽅を学ぶq 簡単なフローを作成し、Node-REDの使い⽅を学習します
¦ クリックするとその時刻を取得して、デバッグ情報に時刻を出⼒するシンプルな処理を実装します
1.injectノードをクリックした時刻を取得
2.取得した時刻を⽂字列に変換
3.クリックした時刻を出⼒
© 2017 IBM Corporation63
シンプルなフローの作成 (1/8)q シート右側の「+」をクリックし、新しいシートを作成します
© 2017 IBM Corporation64
シンプルなフローの作成 (2/8)q 左側のパレットからキャンバス内に必要なノードをドラッグ&ドロップします
③ debug ノード
② functionノード
① injectノード
© 2017 IBM Corporation65
シンプルなフローの作成 (3/8)q injectノードをダブルクリックします
¦ 属性を編集する画⾯が表⽰されます
q ペイロードに「⽇時」が設定されていることを確認します¦ この設定により、ノード実⾏時にタイムスタンプがペイロードに渡されます
q 「完了」ボタンをクリックします
© 2017 IBM Corporation66
シンプルなフローの作成 (4/8)q injectノードとdebugノードをリンクします
¦ injectノードの右にあるアイコンからdebugノードの左にあるアイコンをホールドします
q 画⾯右上の「デプロイ」ボタンをクリックします¦ クリックするとフローの設定が反映され、実⾏可能になります¦ 正常にデプロイされると以下のトーストが表⽰されます
ホールドしてノード間をつなぐ
© 2017 IBM Corporation67
シンプルなフローの作成 (5/8)q debugノードの出⼒がONになっていることを確認します
¦ ノードのボタンで出⼒のON/OFFが可能です¦ 出⼒がONの状態になっていることを確認します (デフォルトはON)
出⼒OFFの状態 出⼒ONの状態
q injectノードの左側のボタンをクリックすると、フローの処理が実⾏できます¦ 実際にinjectノードの実⾏ボタンをクリックしてみましょう
¦ 正常に実⾏されると、以下のトーストが表⽰されます
© 2017 IBM Corporation68
シンプルなフローの作成 (6/8)q 画⾯右側のタブを「情報」から「デバッグ」に切り替えますq デバッグのタブにinjectノードのボタンをクリックしたタイミングのタイムス
タンプが出⼒されていることを確認します¦ この数字はUNIX時間、すなわち1970-01-01T00:00:00からの経過秒数です¦ 現在の状態では、具体的な時刻が分からないため、出⼒された時刻データを⽂字列に
変換する処理を追加します
© 2017 IBM Corporation69
シンプルなフローの作成 (7/8)q functionノードをダブルクリックします
¦ 属性を編集する画⾯が表⽰されます
q 名前を⼊⼒します¦ 「timestampを⽂字列に変換」と設定します
q コードを編集します¦ 「4_01.txt」よりコードをコピー&
ペーストして下さい(時刻変換をする処理が記述してあります)
q 「完了」ボタンをクリックします
© 2017 IBM Corporation70
functionノードのソースコードの説明
var serialDate = msg.payload;
var date = new Date();date.setTime(serialDate);
msg.payload = date.toString();
return msg;
// 前ノードからのデータ取得
// UNIX時間からDateオブジェクトへの変換
// DateオブジェクトからString値に変換
// 次ノードへのデータ連携
© 2017 IBM Corporation71
シンプルなフローの作成 (8/8)q フローを修正します
¦ injectノードとdebugノードのリンクをDeleteキーで削除します¦ injectノード -> functionノード -> debugノードの順につなげます
q 画⾯右上の「デプロイ」ボタンをクリックします
q injectノードの左側のボタンをクリックします¦ デバッグ・タブの出⼒内容が⽂字列に変わった
ことを確認します
以上のような操作を繰り返し、アプリの処理を実装するのがNode-REDでのアプリ開発です
© 2017 IBM Corporation72
ここまでのまとめq 組み合わせたノードに従って異なる動きになりますq Msg.payloadで値が渡されます
実⾏時にタイムスタンプをペイロードに渡すノード 結果はUNIX時間のまま表⽰
ミリ秒表⽰の時刻をUTC表⽰の時刻に変換するノード 結果は⽂字列で表⽰
msg.payload:UNIX時間
msg.payload:時刻(UTC表⽰)
© 2017 IBM Corporation73
アジェンダ(再掲)1. IBM Cloudとは?そして何ができるのか
¦ IBM Cloudとは¦ IBM Cloudの特徴¦ IBM Cloudでできること
2. ライト・アカウントとは¦ ライト・アカウントとは¦ ライト・アカウントの制約
3. わずか数分で完了。アプリ環境を作ってみよう¦ IBM Cloudライト・アカウント作成⼿順¦ IBM Cloudへのログイン¦ IBM Cloud画⾯概要¦ IBM Cloudでアプリ開発するための基本⽤語¦ ランタイムを⽤意する¦ サービスを⽤意する¦ 実際に接続する際は…¦ アプリの停⽌、削除
4.ノンプログラミングでアプリを作る、Node-REDを体験してみよう
¦ Node-REDとは?¦ Node-RED環境を⽤意する¦ Node-REDの画⾯説明¦ Node-REDの使い⽅を学ぶ¦ シンプルなフローの作成¦ ここまでのまとめ
5. スマホを使ったIoTアプリを作ってみよう¦ ハンズオン概要¦ Node-RED で IoT アプリを作成する¦ 実際にどのように動作しているか
6. Webアプリを作ってみよう¦ ハンズオン概要¦ ハンズオンの流れ¦ HTMLをWebページに表⽰してみよう¦ DBの構成¦ WebAPIを作ってみよう¦ 画⾯の確認¦ インポートしたフローの確認
第5章および第6章は、各⾃のペースで作業を進めてください
© 2017 IBM Corporation74
ハンズオン概要q スマートフォン/iPhoneをIoTデバイスと⾒⽴て、センサーから送られるデータ
を収集し、センサーの傾きを判別するアプリを作成します
IBM Watson IoT Platform
MQTTサーバー
IBM IBM Cloud
MQTT
センサー
Node-REDアプリ
Phone Sensorhttp://phonesensor.mybluemix.net/スマートフォンから傾きなどの情報をMQTTサーバーへ転送する
本ハンズオンでの作成対象
スマートフォンをお持ちでない⽅は補⾜資料(P127以降)のハンズオンを実施してください
© 2017 IBM Corporation75
Node-RED で IoT アプリを作成する (1/9)q シートの作成ボタンをクリックします
q 新しいシートが表⽰されます
© 2017 IBM Corporation76
Node-RED で IoT アプリを作成する (2/9)q 必要とするノードを選択します
¦ 左側のパレットから必要なノードをキャンバスにドラッグ&ドロップします
1. ⼊⼒の「ibmiot」
2. 機能の「function」
3. 機能の「switch」
4. 機能の「template」×3
5. 出⼒の「debug」
IoT Platformを介してデバイスからの情報を受け取る
受け取った情報から傾斜の値を抽出
傾斜の値で条件分岐
分岐に合わせてメッセージを作成
メッセージをdebugに出⼒
© 2017 IBM Corporation77
Node-RED で IoT アプリを作成する (3/9)q functionノードを編集します
q 設定後、IBM IoTとリンクさせます
return {payload: msg.payload.d.tiltLR};
1. functionノードをダブルクリック
2. 名前は「Get TiltLR」を指定
3. コード欄に以下のコードを⼊⼒
4. 「完了」をクリック
※PDF,もしくはtxtファイルからコピー&ペーストして下さい。txtファイルは「5_01.txt 」です
© 2017 IBM Corporation78
Node-RED で IoT アプリを作成する (4/9)q デバイスの傾きに合わせて分岐するようにswitchノードを設定します
q 設定後、Get TiltLRとリンクさせます
4. 「完了」をクリック
1. switchノードをダブルクリック
2. 2回クリックし、ルールを2つ追加
3. 「-5以下は1へ」、「5以上は2へ」、「それ以外(otherwise)は3へ」に設定
© 2017 IBM Corporation79
Node-RED で IoT アプリを作成する (5/9)q templateノードを編集します (順に3つ設定します)
1つ⽬: Left2つ⽬: Right3つ⽬: Flat
1つ⽬: 左に傾いています!(tiltLR= {{payload}} 度)!2つ⽬: 右に傾いています!(tiltLR= {{payload}} 度)!3つ⽬: ほぼフラットです。(tiltLR= {{payload}} 度)!
1. templateノードをダブルクリック
4. 「完了」をクリック
2. 名前を指定
3. テンプレートにコードを⼊⼒
※PDF,もしくはtxtファイルからコピー&ペーストして下さい。txtファイルは以下です
・ 1つ⽬:「5_02_01.txt 」・ 2つ⽬:「5_02_02.txt 」・ 3つ⽬:「5_02_03.txt 」
© 2017 IBM Corporation80
Node-RED で IoT アプリを作成する (6/9)q switchから各ノードに対しリンクします
q 同様に各ノードからdebugノードに対しリンクします
© 2017 IBM Corporation81
Node-RED で IoT アプリを作成する (7/9)q お⼿持ちのスマートフォン/iPhoneで以下のURLにアクセスします
¦ http://phonesensor.mybluemix.net/ or 右上のQRコード1.「Connected」と表⽰されることを確認します「Disconnected」と表⽰される場合は、URLがhttpsになっていないか確認してください
2. デバイスのIDをメモしておきます
© 2017 IBM Corporation82
Node-RED で IoT アプリを作成する (8/9)q ibmiotノードを編集します
3. 「完了」をクリック
1. ibmiotノードをダブルクリック
2. Device Idに前ページで控えたIDを⼊⼒
© 2017 IBM Corporation83
ここまでで・・・q 以下のフローができていることを確認します
Deviceからのデータ 傾きデータの値で場合分け
© 2017 IBM Corporation84
Node-RED で IoT アプリを作成する (9/9)q 画⾯右上の「デプロイ」ボタンをクリックします
q デバッグ・タブを開き、スマートフォン/iPhoneからデータを受信していることを確認します
実際に傾けて出⼒が変わることを確認できる
© 2017 IBM Corporation85
実際にどのように動作しているかq 以下のような順でmsg.payloadの処理が⾏われています
msg.payload(Get TiltLR)-9
msg.payload(IBM IoT){"d":{"accelX":-4.19,"accelY":0.89,"accelZ":2.27, …,"tiltLR":-9,"tiltFB":19,"direction":3}}
左右の傾きのデータのみ抽出
傾きのデータで条件分岐して処理・msg.payloadが-5以下なのでLeftへ・msg.payload=“左に傾いています!(tiltLR= {{payload}} 度)!”
左に傾いています!(tiltLR= -9 度)!
-9を代⼊
IoT Platform
データの取得デバイス
© 2017 IBM Corporation86
アジェンダ(再掲)1. IBM Cloudとは?そして何ができるのか
¦ IBM Cloudとは¦ IBM Cloudの特徴¦ IBM Cloudでできること
2. ライト・アカウントとは¦ ライト・アカウントとは¦ ライト・アカウントの制約
3. わずか数分で完了。アプリ環境を作ってみよう¦ IBM Cloudライト・アカウント作成⼿順¦ IBM Cloudへのログイン¦ IBM Cloud画⾯概要¦ IBM Cloudでアプリ開発するための基本⽤語¦ ランタイムを⽤意する¦ サービスを⽤意する¦ 実際に接続する際は…¦ アプリの停⽌、削除
4.ノンプログラミングでアプリを作る、Node-REDを体験してみよう
¦ Node-REDとは?¦ Node-RED環境を⽤意する¦ Node-REDの画⾯説明¦ Node-REDの使い⽅を学ぶ¦ シンプルなフローの作成¦ ここまでのまとめ
5. スマホを使ったIoTアプリを作ってみよう¦ ハンズオン概要¦ Node-RED で IoT アプリを作成する¦ 実際にどのように動作しているか
6. Webアプリを作ってみよう¦ ハンズオン概要¦ ハンズオンの流れ¦ HTMLをWebページに表⽰してみよう¦ DBの構成¦ WebAPIを作ってみよう¦ 画⾯の確認¦ インポートしたフローの確認
第5章および第6章は、各⾃のペースで作業を進めてください
© 2017 IBM Corporation87
ハンズオン概要q Webブラウザから記録、⼀覧表⽰が可能なメモアプリを作成します
¦ ⼊⼒したメモの保存のためにCloudant NoSQL DBを使⽤します
画⾯のイメージ
© 2017 IBM Corporation88
ハンズオンの流れq HTMLをWebページに表⽰してみよう
q DBの構成¦ データベースの作成¦ DBへのサンプルデータの挿⼊
q WebAPIを作ってみよう¦ DBデータ⼀覧表⽰⽤API ¦ データ書き込み⽤API、HTMLのインポート
q 画⾯の確認
q インポートしたフローの確認
© 2017 IBM Corporation89
HTMLをWebページに表⽰してみよう(1/7)q シート作成ボタンをクリックします
q 新しいシートが表⽰されます
© 2017 IBM Corporation90
HTMLをWebページに表⽰してみよう(2/7)q Node-REDでシンプルなHTML「Hello World」をWebページに表⽰してみま
しょうq 左側のパレットからキャンバス内に必要なノードをドラッグ&ドロップします
③ http responseノード
② functionノード
① httpノード
© 2017 IBM Corporation91
HTMLをWebページに表⽰してみよう(3/7)q httpノードを編集します
1. httpノードをダブルクリック
2. メソッドは「GET」を指定
3. URLは「/hello」を⼊⼒
4. 名前は空欄のまま
5. 「完了」をクリック
© 2017 IBM Corporation92
HTMLをWebページに表⽰してみよう(4/7)q templateノードを編集します
q 設定後、httpノードとリンクさせます
tiltLRかtiltRどっち?<html>
<body> <h1>Hello World</h1>
</body></html>
2. 名前は「Hello World」を指定
3. テンプレート欄に以下のコードを⼊⼒
4. 「完了」をクリック
1. templateノードをダブルクリック
※PDF,もしくはtxtファイルからコピー&ペーストして下さい。txtファイルは「6_01.txt 」です
© 2017 IBM Corporation93
HTMLをWebページに表⽰してみよう(5/7)q templateノードからhttp responseノードをリンクさせ、デプロイをクリック
します
© 2017 IBM Corporation94
HTMLをWebページに表⽰してみよう(6/7)q Node-REDエディターURLの「red」以降を削除し、「hello」を⼊⼒し
「Enter」を押します
https://XXX.mybluemix.net/red/#flow/XXX
⾚字部分を削除し緑に書き換えます
https://XXX.mybluemix.net/hello
削除
追加
© 2017 IBM Corporation95
HTMLをWebページに表⽰してみよう(7/7)q ブラウザ画⾯に「Hello World」が表⽰されます
© 2017 IBM Corporation96
ハンズオンの流れ(再掲)q HTMLをWebページに表⽰してみよう
q DBの構成¦ データベースの作成¦ DBへのサンプルデータの挿⼊
q WebAPIを作ってみよう¦ DBデータ⼀覧表⽰⽤API ¦ データ書き込み⽤API、HTMLのインポート
q 画⾯の確認
q インポートしたフローの確認
© 2017 IBM Corporation97
データベースの作成(1/4)q これから動かすアプリにはCloudantのデータベースが必要になります
¦ 今回はIoT Platform Starterボイラープレートに含まれるCloudant インスタンスを利⽤します
¦ Node-REDアプリの「接続」タブを開き、「Cloudant NoSQL DB」のインスタンスをクリックします
¦ 画⾯右の「LAUNCH」をクリックします
© 2017 IBM Corporation98
データベースの作成(2/4)q Cloudantのコンソール上で、左側より「 (Databaseマーク)」をクリッ
クし、「Create Database」をクリックします
© 2017 IBM Corporation99
データベースの作成(3/4)q データベース名として「memo」と⼊⼒し、「Create」をクリックします
¦ エラーなくデータベースが作成されたことを確認してくださいu 「Database created successfully」のメッセージが画⾯上部に表⽰されます
© 2017 IBM Corporation100
データベースの作成(4/4)q ドキュメント作成
¦ All Documentsの横の「+」マークをクリックして開き、「+ New Doc」をクリックします
¦ ドキュメントエディターが起動します。
© 2017 IBM Corporation101
DBへのサンプルデータの挿⼊(1/3)q サンプルデータを登録します
¦ 初めに記載されている内容(“_id”というメンバー,{})を全て削除し、txtファイル「6_DBdata_01.txt」の内容をコピー&ペーストします
¦ 「Create Document」をクリックするとドキュメントが保存されますn 「Saving document」のメッセージが画⾯上部に表⽰されます
初期状態 コピー&ペーストした状態
© 2017 IBM Corporation102
DBへのサンプルデータの挿⼊(2/3)q ドキュメントビューにドキュメントが追加されたことを確認し、他2データを
登録します¦ 右上の「Create Document」をクリックします
© 2017 IBM Corporation103
DBへのサンプルデータの挿⼊(3/3)¦ ドキュメントエディターで1つ⽬の項⽬を作成した時と同様に、2つ⽬の項⽬として
「6_DBdata_02.txt」を、3つ⽬の項⽬として「6_DBdata_03.txt」をそれぞれコピー&ペーストして「Create Document」をクリックしますn 2つ⽬:「6_DBdata_02.txt」n 3つ⽬:「6_DBdata_03.txt」
以上でDBの構成は完了です。
© 2017 IBM Corporation104
ハンズオンの流れ(再掲)q HTMLをWebページに表⽰してみよう
q DBの構成¦ データベースの作成¦ DBへのサンプルデータの挿⼊
q WebAPIを作ってみよう¦ DBデータ⼀覧表⽰⽤API ¦ データ書き込み⽤API、HTMLのインポート
q 画⾯の確認
q インポートしたフローの確認
© 2017 IBM Corporation105
DBデータ⼀覧表⽰⽤API(1/6)q DBに⼊れたデータの⼀覧を表⽰するAPIを作成してみましょうq 必要とするノードを選択します
3. 機能の「function」
データをソートする
1. ⼊⼒の「http」
httpエンドポイント
2. ストレージの「cloudant」
Cloudant DBにおいてドキュメントを検索する
4. 出⼒の「http response」
http⼊⼒ノードから受け取ったリクエストにレスポンスを返す
© 2017 IBM Corporation106
DBデータ⼀覧表⽰⽤API(2/6)q httpノードを編集します
1. httpノードをダブルクリック
2. メソッドは「GET」を指定
3. URL欄に「/api/list」を⼊⼒
4. 「完了」をクリック
© 2017 IBM Corporation107
DBデータ⼀覧表⽰⽤API(3/6)q cloudantノードを編集します
q 設定後、httpノードとリンクします
1. cloudantノードをダブルクリック
2. Database名に「memo」を⼊⼒
5. 「完了」をクリック
3. Search byに「all documents」を指定
4. 名前に「list」を⼊⼒
© 2017 IBM Corporation108
DBデータ⼀覧表⽰⽤API(4/6)q functionノードを編集します
q 設定後、cloudantノード、http responseノードとリンクします
q デプロイをクリックします
1. functionノードをダブルクリック
4. 「完了」をクリック
3. コードに「6_02.txt」の内容をコピー&ペースト
2. 名前に「sort」を⼊⼒
© 2017 IBM Corporation109
DBデータ⼀覧表⽰⽤API(5/6)q ブラウザで⼀覧表⽰をさせてみましょう
¦ フローエディターURLをコピーして新しいブラウザのページに貼り付け、URLの「red」以降を削除し「api/list」を⼊⼒してEnterを押下します
https://XXX.mybluemix.net/red/#flow/XXX
⾚字部分を削除し緑に書き換えます
https://XX.mybluemix.net/api/list
© 2017 IBM Corporation110
DBデータ⼀覧表⽰⽤API(6/6)q ブラウザにjson形式でDBの情報が表⽰されることを確認します
© 2017 IBM Corporation111
ハンズオンの流れ(再掲)q HTMLをWebページに表⽰してみよう
q DBの構成¦ データベースの作成¦ DBへのサンプルデータの挿⼊
q WebAPIを作ってみよう¦ DBデータ⼀覧表⽰⽤API ¦ データ書き込み⽤API、HTMLのインポート
q 画⾯の確認
q インポートしたフローの確認
© 2017 IBM Corporation112
データ書き込み⽤API、HTMLのインポート(1/3)q Node-REDのフロー・エディターで、事前定義済みのフローを読み込みます
¦ 右メニューから「読み込み」→「クリップボード」を選択します¦ 「6_03.txt」の中⾝をコピーし、ダイアログに貼り付けます
1.右メニューを開き、[読み込み]→[クリップボード]を選択
3.読み込みボタンをクリック
2. 「6_03.txt」ファイルの中⾝をコピーし、貼り付け
© 2017 IBM Corporation113
データ書き込み⽤API、HTMLのインポート(2/3)q 読み込みボタンをクリックすると、UI⽤のHTMLとデータ書き込み⽤(メモ追加
)APIのフローが読み込まれます¦ 以下の2つのフローが読み込まれていることを確認します
© 2017 IBM Corporation114
データ書き込み⽤API、HTMLのインポート(3/3)q ⾃⾝の環境に合わせてcloudantノードを修正します
4. チェックが⼊っていることを確認
3. DB名をsampleから「memo」に変更
5. 「完了」をクリック
1. cloudantノードをダブルクリック
2. サービスが指定されていることを確認
© 2017 IBM Corporation115
ハンズオンの流れ(再掲)q HTMLをWebページに表⽰してみよう
q DBの構成¦ データベースの作成¦ DBへのサンプルデータの挿⼊
q WebAPIを作ってみよう¦ DBデータ⼀覧表⽰⽤API ¦ データ書き込み⽤API、HTMLのインポート
q 画⾯の確認
q インポートしたフローの確認
© 2017 IBM Corporation116
画⾯の確認(1/2)q デプロイをクリックします
q フローエディターURLをコピーして新しいブラウザのページに貼り付け、URLの「red」以降を削除し「ui」を⼊⼒してEnterを押下します
https://XXX.mybluemix.net/red/#flow/XXX
⾚字部分を削除し緑に書き換えます
https://XX.mybluemix.net/ui
© 2017 IBM Corporation117
画⾯の確認(2/2)q Web画⾯にDBの⼀覧データが表⽰されました
¦ タイトル、内容に適当な⽂⾔を⼊⼒し、「⾏追加」をクリックして新規に追加できることを確認してください
© 2017 IBM Corporation118
ハンズオンの流れ(再掲)q HTMLをWebページに表⽰してみよう
q DBの構成¦ データベースの作成¦ DBへのサンプルデータの挿⼊
q WebAPIを作ってみよう¦ DBデータ⼀覧表⽰⽤API ¦ データ書き込み⽤API、HTMLのインポート
q 画⾯の確認
q インポートしたフローの確認
© 2017 IBM Corporation119
インポートしたフローの確認(1/2)q インポートしたフローについて確認します
¦ 今回は蓄積⽤のcloudantノードを利⽤しています
cloudantノードをダブルクリック
© 2017 IBM Corporation120
インポートしたフローの確認(2/2)
¦ テンプレートの中にはhtmlとjava scriptのコードが書かれています
templateノードをダブルクリック
© 2017 IBM Corporation121
アジェンダ(再掲)1. IBM Cloudとは?そして何ができるのか
¦ IBM Cloudとは¦ IBM Cloudの特徴¦ IBM Cloudでできること
2. ライト・アカウントとは¦ ライト・アカウントとは¦ ライト・アカウントの制約
3. わずか数分で完了。アプリ環境を作ってみよう¦ IBM Cloudライト・アカウント作成⼿順¦ IBM Cloudへのログイン¦ IBM Cloud画⾯概要¦ IBM Cloudでアプリ開発するための基本⽤語¦ ランタイムを⽤意する¦ サービスを⽤意する¦ 実際に接続する際は…¦ アプリの停⽌、削除
4.ノンプログラミングでアプリを作る、Node-REDを体験してみよう
¦ Node-REDとは?¦ Node-RED環境を⽤意する¦ Node-REDの画⾯説明¦ Node-REDの使い⽅を学ぶ¦ シンプルなフローの作成¦ ここまでのまとめ
5. スマホを使ったIoTアプリを作ってみよう¦ ハンズオン概要¦ Node-RED で IoT アプリを作成する¦ 実際にどのように動作しているか
6. Webアプリを作ってみよう¦ ハンズオン概要¦ ハンズオンの流れ¦ HTMLをWebページに表⽰してみよう¦ DBの構成¦ WebAPIを作ってみよう¦ 画⾯の確認¦ インポートしたフローの確認
第5章および第6章は、皆様各⾃のペースで作業を進めてください
ハンズオンは以上です。お疲れ様でした!!
© 2017 IBM Corporation122
IBM Bluemix User Group (BMXUG、ビーザグ)q IBM Cloudの利⽤促進や情報交換を⽬的としたコミュニティq ユーザー様主体、有志による運営q ぜひ奮ってご参加ください
¦ BMXUG facebookn http://ibm.biz/bmxug-facebook
¦ connpassn https://bmxug.connpass.com/
© 2017 IBM Corporation123
300を超えるIBM Cloudのチュートリアルq IBM Cloud テーマ別チュートリアル
¦ https://www.ibm.com/developerworks/jp/learn/bluemix/tutorials.html
q チュートリアル例¦ Node-REDを使⽤してリアルタイムのチャット・アプリを 5 分で作成する
n http://www.ibm.com/developerworks/jp/cloud/library/cl-rtchat-app/¦ Node-REDとIBM BluemixのPushサービスを利⽤してプッシュ通知を⾃動送信する
n http://www.ibm.com/developerworks/jp/web/library/wa-nodered-push-app/¦ IoT サービスと GPS サービスを bluemixで統合して健康のために役⽴てる
n http://www.ibm.com/developerworks/jp/cloud/library/cl-getmoarsteps-app/
© 2017 IBM Corporation124
© 2017 IBM Corporation125
補⾜資料
© 2017 IBM Corporation126
シミュレーターを使った IoT アプリを作成する (1/9)
アプリで利⽤するセンサーの情報を取得しますq ブラウザーの新しいタブを開き、 ibm.biz/iotsensor に接続します
¦ IoT Sensorシミュレーターは、インターネットに接続するデバイスをエミュレートし、気温、湿度、物体温度の情報を発信 (publish) することができます。(お⼿持ちのスマートフォンでもアクセス可能です)
q 画⾯右上にデバイス固有IDが表⽰されるので、これをメモしておきます¦ シミュレーター画⾯は閉じずに開いたままにしておきます
後の⼿順で使⽤するため、シミュレーター画⾯は閉じずに開いたままにしてください
スマートフォンをお持ちでない⽅は5章の演習の代わりにこちらを実施して下さい
© 2017 IBM Corporation127
シミュレーターを使った IoT アプリを作成する(2/9)
Node-REDの画⾯に戻り、以前に作成したフローとは別のフローを新たに作成します
q フロー作成ボタンをクリックします
q 新しいフローのタブが表⽰されます
© 2017 IBM Corporation128
シミュレーターを使った IoT アプリを作成する(3/9)
IoT Sensorノードを定義しますq 画⾯左側のパレットから、「input」カテゴリ内の「ibmiot」ノードを
キャンバスにドラッグ&ドロップします
q 「ibmiot」ノードを編集します
4. 「完了」をクリック
1. ibmiotノードをダブルクリック
2. シミュレーター画⾯でメモしたIDをDevice Idに⼊⼒
3. Name欄に「IoT Sensor」と⼊⼒
© 2017 IBM Corporation129
シミュレーターを使った IoT アプリを作成する(4/9)
functionノードを定義し、センサーデータから温度のみ取り出すよう設定しますq 画⾯左側パレットから、 「function」カテゴリ内の「function]」ノードを
キャンバスにドラッグ&ドロップしますq 「function」ノードを編集します
q 「IoT Sensor」ノードと結び付けます
1. functionノードをダブルクリック2. Name欄に「Temp」と⼊⼒3. コード欄にコードを⼊⼒return {payload:msg.payload.d.temp};
4. 「完了」をクリック
※PDF,もしくはtxtファイルからコピー&ペーストして下さい。txtファイルは「7_01.txt 」です
© 2017 IBM Corporation130
シミュレーターを使った IoT アプリを作成する(5/9)
switchノードを定義し、条件分岐を設定しますq 画⾯左側のパレットから、「function」カテゴリー内の「switch」ノードを
キャンバスにドラッグ&ドロップしますq 「switch」ノードを編集します
q 「temp」ノード と「temp thresh」ノードを結び付けます
6. 「完了」をクリック
1. switchノードをダブルクリック2. Name欄に「temp thresh」と⼊⼒
3. 1回クリックし、ルールを1つ追加
4. 「40以下は1へ」「40より⼤きければ2へ」⾏くように設定
5. 「全ての条件を適⽤」を指定
© 2017 IBM Corporation131
シミュレーターを使った IoT アプリを作成する(6/9)
template ノードを定義し、条件に応じた処理を設定しますq 画⾯左側のパレットから、「function」カテゴリー内の「template」ノードを
2つ、キャンバスにドラッグ&ドロップしますq 2つの「template」ノードを編集します
q 以下のようにノードを繋ぎます
4. 「完了」をクリック
1. templateノードをダブルクリック
2. Name欄を設定
3. Template欄を設定「安全」ノードでは「温度:{{payload}}度・・・安全範囲内です」「危険」ノードでは「温度:{{payload}}度・・・危険です」
1つ⽬のノードでは「安全」2つ⽬のノードでは「危険」
※PDF,もしくはtxtファイルからコピー&ペーストして下さい。txtファイルは以下です・安全ノード:「7_02_01.txt 」・危険ノード:「7_02_02.txt 」
© 2017 IBM Corporation132
シミュレーターを使った IoT アプリを作成する(7/9)
結果を出⼒するための「debug」ノードを定義します
q 画⾯左側のパレットから、「output」カテゴリー内の「debug」ノードをキャンバスにドラッグ&ドロップします
q 「debug」ノードを編集します
q 「安全」「危険」ノードと「cpu status」ノードを以下のように繋ぎます
5. 「完了」をクリック
2. Output欄にて「msg.」を選択し、「payload」と⼊⼒
1. debugノードをダブルクリック
3. to欄にて「debug tab」を選択
4. Name欄に「cpu status」と⼊⼒
© 2017 IBM Corporation133
シミュレーターを使った IoT アプリを作成する(8/9)
q これまでのステップで下図のようなフローが完成しますq 画⾯右上の「デプロイ」ボタンをクリックし、アプリをデプロイします。画⾯
上部にデプロイが成功した旨のメッセージが表⽰されることを確認しますq デプロイ完了後、右側のサイドバーを「debug」タブに切り替えます
© 2017 IBM Corporation134
シミュレーターを使った IoT アプリを作成する(9/9)
q IoT Sensorの画⾯上で⽮印ボタンをクリックし、温度を変更してみましょう
q IoT Sensorの温度が「debug」タブに出⼒され、40度以下のときは「温度:◯度・・・安全範囲内です」と出⼒されることを確認します
q IoT Sensorの温度を上げて、40度を超えると「温度:◯度・・・危険です」 と出⼒されることを確認します
© 2017 IBM Corporation135