Start Node-RED with Web App

Transcript

1. Webアプリケーション構築で Node-REDをはじめてみよう︕ Taiji Hagino IBM Customer Success Manager | Developer

   Advocate IBM Champion Program Japan Regional Director Node-RED Japan User Group Lead @taiponrock #nodered #noderedjp

2. Speaker @taiponrock #nodered #noderedjp

3. 萩野 たいじ Customer Success Manager | Developer Advocate IBM Champion

   Program Japan Director IBM ⾮常勤講師 筑波⼤学 @taiponrock Please follow me! Practical Node-RED Programming By Packt Publishing Ex-hairdresser and Ex-musician. After becoming a software engineer, he started an Accurate Systems Ltd. with his various experience. After working as a system integrator of a subsidiary of a general trading company, he joined IBM as a developer advocate in the IBM Global team, developing DevRel (Developer Relations), a marketing approach to engineers. Now he works IBM as Customer Success Manager. My books “Developer Marketing DevRel Q&A” (Impress R&D), “Hajimete-no Node-RED”, “Node-RED using manual” (Kogakusha), etc.

4. What’s Node-RED @taiponrock #nodered #noderedjp

5. Node-REDって何? 5 IoTへとインテグレーションしている多くのアプリケーションでは、多くの場合 において、さまざまなAPI、オンラインサービス、ハードウェアデバイスなどを 最適な⽅法でまとめる必要があります。 例えば、シリアルポートへのアクセス⽅法の把握や、Twitterに対するOAuthフ ローの実装などに時間をかけていては、ソリューションの真の価値を⽣み出す 時間を失う可能性があります。 我々は、どのレベルの開発者でもアプリケーションを作成し、重要な部分に集 中できるようにするツールが必要であると認識しています。

   https://ibm.biz/NRWorkshop @taiponrock #nodered #noderedjp

6. 6 Node-REDエディターはブラウザーで実⾏され、イベントの フローを描画することでアプリケーションを作成できます。 フローの各ノードは、値の更新、データベースクエリの作成、 ツイートの送信など、明確に定義された機能を持ちます。 開発者は、必要に応じて各ノードを設定できます。ノードが 「どのように動くか︖」ではなく「何をするか︖」という観 点で使います。 フローがNode-REDランタイムにデプロイされると、各ノー ドは実⾏中のコードになり、メッセージはフローを通過し始

   めます。 “イベント駆動型アプリケーション向けのフローベース・プログラミングツール” https://ibm.biz/NRWorkshop Node-REDって何? @taiponrock #nodered #noderedjp

7. 2013年、IBMのNick O’Leary、Dave CJを始めと するIBM Emerging Technologyチームによって オープンソースとして発明されました。 Node-REDの⽣い⽴ち 2013年︓ 2015年︓

   2016年︓ 2018年︓ Nick O’Leary、Dave CJを 始めとする、IBM Emerging Technology Servicesチー ムにより作られ、同年オープ ンソースとなる。 Raspberry Piのデフォルト イメージに追加される。 JS Foundationのfounding projectになる。 1,000,000インストールを記 録。 2019年︓ Node.js FoundationとJS Foundationが合併して設⽴ されたOpenJS Foundation 配下となる。
8. None

9. ノード ⼀つ⼀つの箱には既に決 まった処理が実装されて いる フロー 使いたい処理のノードを並べ るだけ。 線でつないだ順番に処理が実 ⾏される。 ⾔ってみればワークフロー。

   公開ノード 主要なAPIの呼び出しなど、よく使われ る処理は、誰かが作って公開している事 が多い。 Watson API呼び出しのノードはIBMが開 発し公開している。 設定パネル 処理のパラメーターな ど、ノードに対する設 定を⾏う。 デプロイボタン ノードを配置、フロー作成、パラメーター変 更など、何か作成したり更新した場合に、こ のボタンを押すと反映される。 メニュー フローの削除やイン ポート・エクスポー トなどはこちらから。

10. Technical Overview @taiponrock #nodered #noderedjp

11. アーキテクチャ 11 Node-REDには2つの論理パーツがあります。 ランタイムはNode.jsアプリケーションです。デプロイ されたフローの実⾏を担当します。 エディターは、ユーザーがフローを編集できるWebアプ リケーションです。 メインのインストール可能なパッケージには、エディ ターを提供するWebサーバーとランタイムを管理するた めのREST管理APIの両⽅のコンポーネントが含まれてい

    ます。 内部的に、これらのコンポーネントは個別にインス トールし、既存のNode.jsアプリケーションに埋め込む ことができます。 node-red runtime editor HTTP Admin API @node-red/editor-api Client-side Editor @node-red/editor-client Flow Runtime @node-red/runtime Core Nodes @node-red/nodes Node Registry @node-red/registry Common Utils @node-red/util https://ibm.biz/NRWorkshop @taiponrock #nodered #noderedjp

12. フロー 12 フローは、相互に接続されたノードのコレクションです。 ノードには複数の出⼒ポートがあり、単⼀のポートには複 数のワイヤを接続できます。 フローはJSONオブジェクトとして、すべてのノードの構成 とそれらがどのように接続されているかの情報として保存 されます。 フローJSONはNode-REDインスタンス間でインポートおよ びエクスポートできるため、フローを簡単に共有できます。

    https://ibm.biz/NRWorkshop @taiponrock #nodered #noderedjp

13. メッセージ 13 フローを通るメッセージ (messages) はJavaScript Objectsです。 これには、柔軟に情報を含むことができるPayloadプロパ ティがあります。ほとんどのノードにおいてデフォルトで 動作するプロパティです。 topic:

    “weather/uk” payload: “sunny!” … … https://ibm.biz/NRWorkshop @taiponrock #nodered #noderedjp

14. ノード 14 ノードは、フローの基本的な構成要素です。 フローの開始位置にあるノードは、着信のHTTPリクエスト、 タイマーイベント、ハードウェアIOイベントなどの外部イ ベントの発⽣を待機します。 次に、接続されているノードにメッセージを渡します。 ノードはこれらのメッセージを受信し、いくつかの作業・処 理を⾏ってから、それらをフローに渡します。 payload:

    “Jedi are totally amazing!” payload: “Jedi are totally amazing!” sentiment: { score: 4 } この例では、センチメント分析ノードがメッセージの 「payload」プロパティを調べ、センチメントを評価 し、その結果（スコア）をメッセージの新しいプロパ ティとして追加しています。 https://ibm.biz/NRWorkshop @taiponrock #nodered #noderedjp

15. 15 ノードは、コミュニティとしてNode-REDを拡張していくこと が可能な主な⽅法でもあります。 それらは2つのパーツで構成されています︓ -ノードの実⾏時の動作を定義するNode.jsモジュール -エディターの外観、編集ダイアログ、およびヘルプテキストを 提供するHTMLファイル これらはNode.jsモジュールとしてパッケージ化され、 NPM package

    repositoryを介して配布されます。 プロジェクトは https://flows.nodered.org をホストし、npm で利⽤可能なNode-REDモジュールのインデックスを⾃動的に 作成します https://ibm.biz/NRWorkshop ノード @taiponrock #nodered #noderedjp

16. Hands-on Workshop @taiponrock #nodered #noderedjp

17. 17 https://ibm.biz/NRWorkshop

18. Part 1 18 https://ibm.biz/NRWorkshop Part 2 Part 3 Part 4

    Part 5 Getting Started with Node-RED Setting up your Cloud environment Deploy your application to the Cloud Connect your app to a cloud-hosted db Setup a deployment pipeline to Cloud

19. Part 1 19 https://ibm.biz/NRWorkshop Part 2 Part 3 Part 4

    Part 5 Getting Started with Node-RED Setting up your Cloud environment Deploy your application to the Cloud Connect your app to a cloud-hosted db Setup a deployment pipeline to Cloud

20. Part 1 Getting Started with Node-RED 20 Get a Node-RED

    application running locally against a CouchDB database https://ibm.biz/NRWorkshop

21. 21 https://ibm.biz/NRWorkshop ToDoアプリ作成

22. 22 https://ibm.biz/NRWorkshop Backbone、Ember、AngularJSなどに代 わり、 JavaScript Webアプリを構造化し て整理するためのMV*フレームワーク 現在⼈気のある多くのJavaScript MV*フ レームワークにおいて、MV*コンセプトを

    使⽤して実装されたのと同じTodoアプリ ケーションを提供するプロジェクト。 todoリストを管理するためのシンプルな Web API仕様を定義。 Todo-BackendプロジェクトはTodoMVCプ ロジェクトに触発され、⼀部のコード（具 体的にはtodoクライアントアプリ）が TodoMVCから直接借⽤された。

23. 23 https://ibm.biz/NRWorkshop

24. 24 https://ibm.biz/NRWorkshop

25. 25 Node-RED Editor Runtime https://ibm.biz/NRWorkshop

26. 26 Node-RED Editor Runtime https://ibm.biz/NRWorkshop

27. 27 flow.json : the flow configuration flow_cred.json : credentials file

    package.json https://ibm.biz/NRWorkshop

28. 28 Node-RED Editor Runtime CouchDB https://ibm.biz/NRWorkshop

29. https://ibm.biz/NRWorkshop

30. Part 2 Setting up your Cloud environment 30 Create an

    IBM Cloud account and install the ibmcloud command-line tool https://ibm.biz/NRWorkshop

31. Part 3 Deploy you application to the IBM Cloud 31

    Get your application running in the IBM Cloud https://ibm.biz/NRWorkshop

32. 32 Node-RED Editor Runtime https://ibm.biz/NRWorkshop

33. 33 flow.json : the flow configuration flow_cred.json : credentials file

    package.json settings.js : runtime settings manifest.yaml : deployment manifest https://ibm.biz/NRWorkshop

34. 34 Runtime https://ibm.biz/NRWorkshop

35. Part 4 Connect your application to a cloud-hosted db 35

    Create a cloud-hosted Cloudant instance and configure the application to use it with separate development and production databases https://ibm.biz/NRWorkshop

36. 36 Runtime Cloudant https://ibm.biz/NRWorkshop

37. Part 5 Setup a deployment pipeline to IBM Cloud 37

    Create a deployment pipeline use TravisCI to automatically deploy your application when pushing updates to a GitHub repository https://ibm.biz/NRWorkshop

38. 38 Runtime Cloudant https://ibm.biz/NRWorkshop

39. Thanks 39 github.com/taijihagino Taiji HAGINO Sr. Developer Advocate IBM Champion

    Program Regional Director IBM facebook.com/taiponrock linkedin.com/taiponrock @taiponrock 🥑 🥑

40. ワークショップ、セッション、および資料は、IBMまたはセッション発表者によって準備され、それぞれ独⾃の⾒解を反映したものです。それらは情報 提供の⽬的のみで提供されており、いかなる参加者に対しても法律的またはその他の指導や助⾔を意図したものではなく、またそのような結果を⽣むも のでもありません。本講演資料に含まれている情報については、完全性と正確性を期するよう努⼒しましたが、「現状のまま」提供され、明⽰または暗 ⽰にかかわらずいかなる保証も伴わないものとします。本講演資料またはその他の資料の使⽤によって、あるいはその他の関連によって、いかなる損害 が⽣じた場合も、IBMは責任を負わないものとします。 本講演資料に含まれている内容は、IBMまたはそのサプライヤーやライセンス交付者からいかな る保証または表明を引きだすことを意図したものでも、IBMソフトウェアの使⽤を規定する適⽤ライセンス契約の条項を変更することを意図したもので もなく、またそのような結果を⽣むものでもありません。 本講演資料でIBM製品、プログラム、またはサービスに⾔及していても、IBMが営業活動を⾏っているすべての国でそれらが使⽤可能であることを暗⽰ するものではありません。本講演資料で⾔及している製品リリース⽇付や製品機能は、市場機会またはその他の要因に基づいてIBM独⾃の決定権をもっ

    ていつでも変更できるものとし、いかなる⽅法においても将来の製品または機能が使⽤可能になると確約することを意図したものではありません。本講 演資料に含まれている内容は、参加者が開始する活動によって特定の販売、売上⾼の向上、またはその他の結果が⽣じると述べる、または暗⽰すること を意図したものでも、またそのような結果を⽣むものでもありません。 パフォーマンスは、管理された環境において標準的なIBMベンチマークを使⽤し た測定と予測に基づいています。ユーザーが経験する実際のスループットやパフォーマンスは、ユーザーのジョブ・ストリームにおけるマルチプログラ ミングの量、⼊出⼒構成、ストレージ構成、および処理されるワークロードなどの考慮事項を含む、数多くの要因に応じて変化します。したがって、 個々のユーザーがここで述べられているものと同様の結果を得られると確約するものではありません。 記述されているすべてのお客様事例は、それらのお客様がどのようにIBM製品を使⽤したか、またそれらのお客様が達成した結果の実例として⽰された ものです。実際の環境コストおよびパフォーマンス特性は、お客様ごとに異なる場合があります。 IBM、IBM ロゴ、ibm.com、[以下当該情報に関連し商標リスト中に掲載されたIBMブランドやIBMの製品名称があれば追加する]は、 世界の多くの国で 登録されたInternational Business Machines Corporationの商標です。他の製品名およびサービス名等は、それぞれIBMまたは各社の商標である場合があ ります。現時点での IBM の商標リストについては、www.ibm.com/legal/copytrade.shtmlをご覧ください。