IBM Extra Dojo #4 IBM Cloudでビジュアルプログラミング IoT/Node-RED

107436e46b14d6db482c42afba216ecf?s=47 norikokt
June 22, 2020

IBM Extra Dojo #4 IBM Cloudでビジュアルプログラミング IoT/Node-RED

Watson IoT Platform とNode-REDを始める方を対象に作成した資料になります。

107436e46b14d6db482c42afba216ecf?s=128

norikokt

June 22, 2020
Tweet

Transcript

  1. アカウントの登録 アカウントの登録 登録にはe-Mail アドレスが必要です。 使⽤するアカウントはライトアカウントです。 ハンズオンで次のサービスを利⽤します。 Cloud Foundry アプリSDK for

    Node.js™ Continuous Delivery, Toolchain 既に作成ずみのアプリがあり削除できない⽅は 新しいアカウントを取得してください。 次のサービスも利⽤します。作成済みの⽅は再利⽤ができます。 Speech to Text,Language Translator,Text to Speech 1 こちらのURLからアクセスをお願いします。 https://ibm.biz/BdqvrH
  2. このセッションではSli.doによるライブ投票を⾏います。 2

  3. IBM Extra Dojo #4 ビジュアルプログラミング・IoT/Node-RED ⼊⾨ Noriko Kato Developer Advocate

    Tokyo City Team 2020/06/22 #StaySafe #IBMOnlineDojo #NodeRED #IBMだ
  4. Group Name / DOC ID / Month XX, 2018 /

    © 2018 IBM Corporation 4
  5. クラウドを選ぶメリット 5 いつでも どこにいても インターネットがあれば }ü 開発できる ü リリースできる ü

    試せる
  6. 新しい取り組み“バッジ取得プログラム”のご案内 6 IBM Cloud & AI develop Basic Online Developer

    Dojo ” IBM Cloud & AI develop Basic Online Developer badge“について - 2020年6⽉1⽇より開始のIBM Developer Dojo 12回シリーズと同様の内容のIBM Developer Dojoのクラスが対象 https://www.ibm.com/jp-ja/partnerworld/events/developer-dojo - スキルアップのため全クラスの受講をお奨めします。 - 12回のクラスのうちPAYGアカウントまたはサブスクリプションが必要としない8つのクラスの課題を実施 - 8クラスのうち5クラスの課題について指定された結果を⾃分のアカウントが⾒えるようにスクリーンショットを撮影 - 5クラス分の課題のスクリーンショットをPDFにして以下の宛先に送付 - 提出した課題が承認されるとAcclaimからバッジが発⾏されます。 ※バッジ発⾏のためにこれ以外の処理が発⽣する場合、別途ご連絡させていただきます 2020年6⽉1⽇ お問い合わせは、Online Developer Dojo バッジ事務局 (ビジネス・パートナープログラム ヘルプデスク pprogram@jp.ibm.com )
  7. 学習の⽬的とゴール ⽬的 IBM Cloudでビジュアルプログラミングを実践する ゴール IBM CloudでNode-REDアプリケーションを構築できる クラウドAIサービスを組み込むことができる このコースを学ぶ⽅の想定スキル PCの基本操作が可能な⽅

    IoTに関⼼がある⽅ 7
  8. ⽬次 1.IBM Cloudで実現するIoT IoTビジネスの今と未来 2.Internet of Things Platform デバイスの設定⽅法 管理メニューの紹介

    3.Node-REDでビジュアルプログラミング アプリケーションの起動 Watson APIの接続 ノードの追加 4.ハンズオン 8
  9. 1.IBM Cloud で実現するIoT 9

  10. ウェアラブル端末が ヒトの自己管理をサポートして もっと健康的な日常生活 自動運転がより安全に 進化して誰もが自由に活動できる 農業や配送も便利で効率的に メンテナンスをサポートして 便利で安全な社会 スマートシティが 進んでロスのない安全な街

    1.IBM Cloud で実現するIoT IoTを活⽤することで安全で住みやすくなる未来 10
  11. 1.IBM Cloud で実現するIoT 11 Node-RED ノードをつないで動作を制御する ビジュアルプログラミングツール Internet of Things

    Platform デバイスのデータ収集、利⽤状況簡易 分析、異常の検出を視覚化
  12. 2.Internet of Things Platform IoT活⽤に⽋かせないデバイスの管理プラットフォームです。 12 ü 使⽤状況が確認できる ü デバイスの登録、管理ができる

    ü アクセス許可メンバーとロールの管理ができる ü アプリケーション接続キーの管理ができる ü セキュリティー定義や設定の確認ができる
  13. 2.Internet of Things Platform IoT活⽤に⽋かせないデバイスの管理プラットフォームです。 13 IBM Watson™ IoT Platform

    は、IoTデバイスから 簡単に価値を引き出せるようにするフルマネージドの クラウド・ホスティング・サービス、MQTTプロトコル を使⽤してデータ送信することができます。
  14. 2.Internet of Things Platform IoTデータの収集、視覚化 IBM Cloud資料 / ソリューションチュートリアルより 14

    プラットフォームへの登録 と接続動作確認までをStep by Stepでご紹介
  15. 2.Internet of Things Platform リソースの確認 ハンズオンの対象ではありませんが、この⼿順を実施される場合、Internet of Things Platform サービスとCloud

    Foundry アプリケーションが作成されます。ライトアカウントで試す場合は、 作成済みのアプリケーションを削除するなど事前に必要な環境を整えてください。 15
  16. 2.Internet of Things Platform Internet of Things Platformの作成 16 ③Internet

    of Things Platform をクリックする ②検索窓でIoTのキーワードで 検索 ①メニューのカタログを開く
  17. 2.Internet of Things Platform Internet of Things Platformの作成 17 ②リソース名を適宜変更する

    (Uniqueである必要がある) ①プランを確認する ③作成ボタンをクリックする
  18. 2.Internet of Things Platform Watson Iot Platformを起動 18 ①起動をクリックする

  19. 2.Internet of Things Platform セキュリティーポリシーの設定 19 ①セキュリティーメニューより セキュリティー接続を編集 ②デフォルトの規制よりセキュ リティーレベルをTLSとトーク

    ン認証を選択し保存する
  20. 2.Internet of Things Platform デバイスタイプの登録 20 ⑤次へをクリック ②デバイスタイプのタブを選択 ③デバイスを選択 ④登録するデバイス種類の総称

    となる名前を⼊⼒ ①デバイスメニューより
  21. 2.Internet of Things Platform デバイスタイプの登録 21 ①終了をクリック Option デバイスタイプの詳細を⼊⼒

  22. 2.Internet of Things Platform デバイスタイプの登録 22 ①終了をクリック Option デバイスタイプの詳細を⼊⼒

  23. 2.Internet of Things Platform デバイスの登録 23 ①デバイスメニューより ②デバイスを作成します。 をクリックする

  24. 2.Internet of Things Platform デバイスの追加 24 ①デバイスタイプに登録した デバイスタイプを選択 ②デバイスIDを⼊⼒ ③次へをクリック

  25. 2.Internet of Things Platform デバイスの追加 25 ①認証トークンを⼊⼒ ②次へをクリック

  26. 2.Internet of Things Platform デバイスのドリルダウン 26 ①登録情報の確認

  27. 2.Internet of Things Platform IBM Cloud Shellを起動 27 ①IBM Cloud画⾯に戻り

    IBM Cloud Shell (ベータ版)を起動
  28. 2.Internet of Things Platform Gitリポジトリを複製してアプリケーションを作成する 28 ① git リポジトリをクローンする git

    clone https://github.com/IBM-Cloud/iot- device-phone-simulator cd iot-device-phone-simulator ② IBM Cloudにログインする ibmcloud login >e-Mailアドレスの⼊⼒ >Passwordの⼊⼒
  29. 2.Internet of Things Platform アプリケーション作成 29 ① 以下のコマンドを実⾏する ibmcloud target

    --cf ibmcloud cf push ② 追加のインストールが必要なら適宜対応 ③ IoT Solution Tutorial の Status が Startedになっていたら作成完了
  30. 2.Internet of Things Platform アプリケーションを起動 30 ① IBM Cloud リソースリストに戻り

    Cloud Foundryアプリに 「iot-solution-tutorial」が作成されていること を確認 アプリケーションを開く ②iot-solution-tutorial より アプリケーションURL を開く
  31. 2.Internet of Things Platform デバイス情報を登録 31 ②スマホで4項⽬を⼊⼒ 情報はデバイスのWatson Iot Platform

    デバイスメニューのドリルダウン画⾯に表⽰ ①スマホからアプリケーションのURLにアクセス (QRコードに変更すると便利)
  32. 2.Internet of Things Platform スマートフォンの傾きを計測 32

  33. 2.Internet of Things Platform Watson Iot Platformで状況の確認 33 ①Watson Iot

    Platform よりデバイスメニュー デバイスの参照、登録したスマートフォンが接 続⾓になっていることを確認 ②アプリから送信された情報を確認 接続済みデバイス情報をクリック 最近のイベント情報が確認でいる イベントを展開すると、スマートフォンアプリ で測定した傾きの値が記録されている
  34. 2.Internet of Things Platform Watson Iot Platformのデータを確認 34

  35. 2.Internet of Things Platform 今回のチュートリアルデータご紹介 IoT データの収集、視覚化、分析、および異常の検出 35

  36. アカウントの登録 アカウントの登録 登録にはe-Mail アドレスが必要です。 使⽤するアカウントはライトアカウントです。 ハンズオンで次のサービスを利⽤します。 Cloud Foundry アプリSDK for

    Node.js™ Continuous Delivery, Toolchain 既に作成ずみのアプリがあり削除できない⽅は 新しいアカウントを取得してください。 次のサービスも利⽤します。作成済みの⽅は再利⽤ができます。 Speech to Text,Language Translator,Text to Speech 36 こちらのURLからアクセスをお願いします。 https://ibm.biz/BdqvrH
  37. 3. Node-REDでビジュアルプログラミング アプリの実⾏環境がすぐに作れる 37 ビジュアル・プログラミングツールとして⼈気のNode-REDも 使えます。 • フローをつないでサーバー サイドアプリが作れる •

    WebのUIも作れる • 各種APIも呼び出せる IBM Cloud
  38. 3.Node-REDでビジュアルプログラミング ノードの追加とコードの読み込み 38 ① フローエディタ右「ハン バーガーメニュー」より パレットの管理をクリック ②ノードを追加タブを選択 検索キーワードを⼊⼒し該当 ノードで「ノードを追加」

    ③ノードの情報を参照、確認 して追加をクリック
  39. 3. Node-REDでビジュアルプログラミング アプリケーションの起動 39 ①IBM Cloud資料より 開発タブを選択 ①IBM Cloud資料より 開発タブを選択

  40. 3. Node-REDでビジュアルプログラミング アプリケーションの起動 40 ①NodeーREDスターター きっとが起動、始めにをク リック ②アプリ名を適宜修正 (Uniqueである必要がある) ③作成ボタンをクリック

    ロケーションは任意で変更
  41. 3. Node-REDでビジュアルプログラミング アプリケーションの起動 41 ①アプリのデプロイを クリック

  42. 3. Node-REDでビジュアルプログラミング アプリケーションの起動 42 ①IBM Cloud API鍵の 新規をクリック ②ポップアップが表⽰され たらOKをクリック

    ②インスタンスの数、メモ リは初期値のまま、リー ジョンを確認、ホスト名の チェックが完了したら次へ をクリック
  43. 3. Node-REDでビジュアルプログラミング アプリケーションの起動 43 ①Delivery Pipeline が表⽰ されたらクリック ②Statusがグリーンになる まで待つ(15分くらい)

    デプロイされたら、コン ソールを表⽰をクリック
  44. 3. Node-REDでビジュアルプログラミング Node-REDの起動 44 ①NodeーREDのアプリURL をクリック ②パスワードの設定をする、 他のパネルは次へをクリック ②NodeーREDのフローエ ディタをクリック

  45. 3.Node-REDでビジュアルプログラミング ノードの追加とコードの読み込み 45 ① フローエディタ右「ハン バーガーメニュー」より パレットの管理をクリック ②ノードを追加タブを選択 検索キーワードを⼊⼒し該当 ノードで「ノードを追加」

    ③ノードの情報を参照、確認 して追加をクリック
  46. 3.Node-REDでビジュアルプログラミング Node-REDを実⾏してみよう 46 ①デバックタブに切り替える ②左側のボタンをクリック ③実⾏結果の確認

  47. 3.Node-REDでビジュアルプログラミング Watson APIの接続 47 ①カタログ / サービス AIから3サービスを⽴ち上げ Speech to

    Text Language Translator, Text to Speech
  48. 3.Node-REDでビジュアルプログラミング Watson APIの接続 48 ①リソースからNode-REDア プリケーション/接続より 接続の作成をクリック ②サービスをひとつづつ選択、 Nextをクリック、毎回「再ス テージの確認」が出るが、途

    中はキャンセル、最後の1回 のみ再ステージする
  49. 3.Node-REDでビジュアルプログラミング ノードの追加とコードの読み込み 49 ① フローエディタ右「ハン バーガーメニュー」より パレットの管理をクリック ②ノードを追加タブを選択 検索キーワードを⼊⼒し該当 ノードで「ノードを追加」

    ③ノードの情報を参照、確認 して追加をクリック
  50. DEMO

  51. 作成したアプリケーションの削除⽅法 リソースリスト 現在利⽤しているサービスが確認できます。 各サービス右側の(・・・)から削除ができます。 51 クリックすると、以下の メニューが表⽰され編集 や削除ができます サービスの状況が確認で きます

  52. 4.ハンズオン 1) 多⾔語会議や1on1にNodeーRED翻訳機能をこっそり仕込もう https://qiita.com/norikokt/items/ae46b26ba4d57d89e27a 2) IoT データの収集、視覚化、分析、および異常の検出 https://cloud.ibm.com/docs/solution- tutorials?topic=solution-tutorials-gather-visualize- analyze-iot-data&locale=ja

    (解説のデバイス登録まで) 52
  53. 免責事項 53 IBM Developer Dojoは開発者の⽅を対象に、IBM Cloudを主とした技術情報をお伝えする⽬的で開催しています。 講師や運営スタッフにより、開催毎に最適と判断した内容でお届けしています。 現在、ハンズオンを伴う講義はお客様の費⽤負担がない環境と⼿順でご案内しています。講義終了後、不要に なりました制作物はお客様ご⾃⾝で削除をお願いいたします。クレジットカードの登録が伴わない場合、費⽤は ⼀切発⽣致しませんが、ご登録いただいたお客様はご注意ください。

    講師陣はみなさまの利⽤状況を個別に確認することはできません。 ご理解とご協⼒をお願いいたします。 利⽤したサービスの削除⽅法については講義の中でご案内します。 ご不明な点がございましたら、当⽇確認をお願いいたします。 講義終了後、 IBM Developer Dojoに関するお問い合わせは「Slack」にお願いします。それ以外のIBM Cloudの お問い合わせにつきましては、弊社サポートセンターまで、次のいづれかの⽅法でお問い合わせください。 IBM Cloudダッシュボードの「サポート」メニューから「Case」を作成し、英語でご記⼊ください IBM Cloudサポートセンター「相談する」ボタンからチャットまたは電話でご連絡ください https://www.ibm.com/jp-ja/cloud/support ご参加ありがとうございました。
  54. 新しい取り組み“バッジ取得プログラム”のご案内 54 IBM Cloud & AI develop Basic Online Developer

    Dojo ” IBM Cloud & AI develop Basic Online Developer badge“について - 2020年6⽉1⽇より開始のIBM Developer Dojo 12回シリーズと同様の内容のIBM Developer Dojoのクラスが対象 https://www.ibm.com/jp-ja/partnerworld/events/developer-dojo - スキルアップのため全クラスの受講をお奨めします。 - 12回のクラスのうちPAYGアカウントまたはサブスクリプションが必要としない8つのクラスの課題を実施 - 8クラスのうち5クラスの課題について指定された結果を⾃分のアカウントが⾒えるようにスクリーンショットを撮影 - 5クラス分の課題のスクリーンショットをPDFにして以下の宛先に送付 - 提出した課題が承認されるとAcclaimからバッジが発⾏されます。 ※バッジ発⾏のためにこれ以外の処理が発⽣する場合、別途ご連絡させていただきます 2020年6⽉1⽇ お問い合わせは、Online Developer Dojo バッジ事務局 (ビジネス・パートナープログラム ヘルプデスク pprogram@jp.ibm.com )
  55. バッジプログラム申請 課題のご案内 55 URLが表示されている状態で 画面を記録してください。 ビジュアルプログラミングの参加課題はNode-REDのフローエディタの画⾯ (URL表⽰あり)です。*フローがカスタマイズされていても問題ありません。

  56. おすすめ情報 –開発者向けサイトIBM Developer 56 ibm.biz/IBMDevJP 最新情報やスキルアップに役⽴つ6,000を超える技術記事を提供

  57. おすすめ情報 –IBM CODE Patterns 57 https://ibm.biz/ibmcodejp 解説 + デモ動画 +

    ソースコードが揃ったアプリ開発パターン集
  58. おすすめ情報 –IBM CODE Patterns 58 https://ibm.biz/ibmcodejp 解説 + デモ動画 +

    ソースコードが揃ったアプリ開発パターン集
  59. おすすめ情報 –IBM Cloud と接続する紙型ロボット https://www.ibm.com/developerworks/jp/code/open/pro jects/tjbot/index.html 59 TJBot zero

  60. おすすめ情報 –300ドルで完成する3DプリントLEGO顕微鏡 https://idarts.co.jp/3dp/open-source-3d-print-lego- microscope/ https://github.com/IBM/MicroscoPy 60 IBMの科学者が僅か300ドルで完成するオープンソースの3Dプリントレゴ顕微鏡を開発 IBMの科学者Yuksek Temiz氏は、レゴブロック、Raspberry Pi、8メガピクセルのRaspberry

    Pi カメラモジュール、そして3Dプリントされたコンポーネントをベースに、僅か300ドルで完成 する高精度なDIY顕微鏡を完成させ、オープンソースとして資料を公開した。 (こちらのページは3DPid.arts サイト記事の紹介です)
  61. おすすめ情報 –ExtraDojo 61 開催日 タイトル アカウント 事前準備 #1 6月1日(月) はじめてのクラウド

    ~20分でWebサイトを作成しよう~ ライト★ #2 6月8日(月) スケーラブルなWebアプリケーションをKubernetesで構築する PAYG IBM Cloud CLIのインストール Developer Toolsのインストール Firefoxのインストール IBM Cloud Kubernetes Service(IKS)の クラスタの作成 #3 6月15日(月) OpenShift 入門 ~Watson を使ったWebアプリを試そう~ ライト - #4 6月22日(月) IBM Cloudでビジュアルプログラミング IoT/Node-RED入門 ライト★ - #5 6月29日(月) AI (Watson API) アプリ開発 on OpenShift ライト★ - #6 7月6日(月) Auto AI を使ったらくらく機械学習 ライト★ ChromeまたはFirefoxのインストール #7 7月13日(月) QuarkusでJava モダナイゼーション PAYG - #8 7月 20日(月) Hyperledger Fabricでかんたんにブロックチェーンをはじめよう PAYG - #9 7月 27日(月) Kabaneroを使ったクラウド・ネイティブなアプリ開発を体験 ライト★ - #10 8月3日(月) Watson Discovery を使ったAI検索体験 ライト★ - #11 8月17日(月) IBM Cloud Functionsでサーバレスを始めよう ライト★ - #12 8月24日(月) AI Advance: 公平で説明可能なAI ライト★ コース内容は予定であり、開催までに変更になる可能性があります。アカウント欄︓ライト★がバッジプログラム対象です。
  62. おすすめ情報 –初夏のIBM Developer Dojo 2020 62 開催日 タイトル アカウント 事前準備

    #1 5月13日(水) はじめてのクラウド ~20分でWebサイトを作成しよう~ ライト★ #2 5月20日(水) スケーラブルなWebアプリケーションをKubernetesで構築する PAYG IBM Cloud CLIのインストール Developer Toolsのインストール Firefoxのインストール IBM Cloud Kubernetes Service(IKS)の クラスタの作成 #3 5月27日(水) OpenShift 入門 ~Watson を使ったWebアプリを試そう~ ライト - #4 6月 3日(水) IBM Cloudでビジュアルプログラミング IoT/Node-RED入門 ライト★ - #5 6月10日(水) AI (Watson API) アプリ開発 on OpenShift ライト★ - #6 6月17日(水) Auto AI を使ったらくらく機械学習 ライト★ ChromeまたはFirefoxのインストール #7 6月24日(水) QuarkusでJava モダナイゼーション PAYG - #8 7月 1日(水) Hyperledger Fabricでかんたんにブロックチェーンをはじめよう PAYG - #9 7月 8日(水) Kabaneroを使ったクラウド・ネイティブなアプリ開発を体験 ライト★ - #10 7月15日(水) Watson Discovery を使ったAI検索体験 ライト★ - #11 7月22日(水) IBM Cloud Functionsでサーバレスを始めよう ライト★ - #12 7月29日(水) AI Advance: 公平で説明可能なAI ライト★ コース内容は予定であり、開催までに変更になる可能性があります。アカウント欄︓ライト★がバッジプログラム対象です。
  63. このセッションではSli.doによるライブ投票を⾏います。 63

  64. #CallforCode

  65. 2020 Call for Code グローバル・チャレンジ 今回のテーマは「気候変動」と「COVID-19」 • IBM Cloudを活⽤したアプリ開発コンテスト •

    「⼀般向け*」と「IBMer向け」に開催 4/27 (⽉) ⼀般 COVID19 早期締切 3/22 (⽇) 応募受付 開始 審査期間 8〜9⽉ 10⽉ 最優秀賞 チーム発表 6/30 (⽕) IBMer 応募受付 最終締切 7/31 (⾦) ⼀般 応募受付 最終締切 * IBM Corporationとその法⼈、それらが所有する⼦会社の51%以上および、 Red Hat Inc.とそのすべての⼦会社は「⼀般向け」Call for Code 2020には 参加できませんのでご注意ください。IBM社員は詳しくは社内w3サイトで。 #CallforCode
  66. callforcode.org ⽇本語情報 https://ibm.biz/c4cjapan ⽇本語 English #CallforCode