Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Speaker @taiponrock #nodered #noderedjp

Slide 3

Slide 3 text

萩野 たいじ 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.

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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 配下となる。

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Technical Overview @taiponrock #nodered #noderedjp

Slide 11

Slide 11 text

アーキテクチャ 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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

メッセージ 13 フローを通るメッセージ (messages) はJavaScript Objectsです。 これには、柔軟に情報を含むことができるPayloadプロパ ティがあります。ほとんどのノードにおいてデフォルトで 動作するプロパティです。 topic: “weather/uk” payload: “sunny!” … … https://ibm.biz/NRWorkshop @taiponrock #nodered #noderedjp

Slide 14

Slide 14 text

ノード 14 ノードは、フローの基本的な構成要素です。 フローの開始位置にあるノードは、着信のHTTPリクエスト、 タイマーイベント、ハードウェアIOイベントなどの外部イ ベントの発⽣を待機します。 次に、接続されているノードにメッセージを渡します。 ノードはこれらのメッセージを受信し、いくつかの作業・処 理を⾏ってから、それらをフローに渡します。 payload: “Jedi are totally amazing!” payload: “Jedi are totally amazing!” sentiment: { score: 4 } この例では、センチメント分析ノードがメッセージの 「payload」プロパティを調べ、センチメントを評価 し、その結果（スコア）をメッセージの新しいプロパ ティとして追加しています。 https://ibm.biz/NRWorkshop @taiponrock #nodered #noderedjp

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Hands-on Workshop @taiponrock #nodered #noderedjp

Slide 17

Slide 17 text

17 https://ibm.biz/NRWorkshop

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Part 1 Getting Started with Node-RED 20 Get a Node-RED application running locally against a CouchDB database https://ibm.biz/NRWorkshop

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

22 https://ibm.biz/NRWorkshop Backbone、Ember、AngularJSなどに代 わり、 JavaScript Webアプリを構造化し て整理するためのMV*フレームワーク 現在⼈気のある多くのJavaScript MV*フ レームワークにおいて、MV*コンセプトを 使⽤して実装されたのと同じTodoアプリ ケーションを提供するプロジェクト。 todoリストを管理するためのシンプルな Web API仕様を定義。 Todo-BackendプロジェクトはTodoMVCプ ロジェクトに触発され、⼀部のコード（具 体的にはtodoクライアントアプリ）が TodoMVCから直接借⽤された。

Slide 23

Slide 23 text

23 https://ibm.biz/NRWorkshop

Slide 24

Slide 24 text

24 https://ibm.biz/NRWorkshop

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

27 flow.json : the flow configuration flow_cred.json : credentials file package.json https://ibm.biz/NRWorkshop

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

https://ibm.biz/NRWorkshop

Slide 30

Slide 30 text

Part 2 Setting up your Cloud environment 30 Create an IBM Cloud account and install the ibmcloud command-line tool https://ibm.biz/NRWorkshop

Slide 31

Slide 31 text

Part 3 Deploy you application to the IBM Cloud 31 Get your application running in the IBM Cloud https://ibm.biz/NRWorkshop

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

34 Runtime https://ibm.biz/NRWorkshop

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Thanks 39 github.com/taijihagino Taiji HAGINO Sr. Developer Advocate IBM Champion Program Regional Director IBM facebook.com/taiponrock linkedin.com/taiponrock @taiponrock 🥑 🥑

Slide 40

Slide 40 text

ワークショップ、セッション、および資料は、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をご覧ください。