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

Building cloud-native AI-infused web apps with ...

Building cloud-native AI-infused web apps with Node-RED

Slides to accompany a workshop first delivered at NodeConfRemote 2020.

The workshop material is available here: https://ibm.biz/NRPhoto

Nick O'Leary

November 04, 2020
Tweet

More Decks by Nick O'Leary

Other Decks in Programming

Transcript

  1. @knolleary @johnwalicki https://ibm.biz/NRPhoto Building cloud-native AI-infused web apps with Node-RED

    John Walicki @johnwalicki Nick O’Leary @knolleary https://ibm.biz/NRPhoto
  2. @knolleary @johnwalicki https://ibm.biz/NRPhoto Workshop Goals In this workshop, participants will

    learn how to use Node-RED to create a photo booth web app infused with AI through the use of TensorFlow. The workshop will step through getting started with Node-RED, creating the web app and then containerising it, ready to be deployed into the cloud or onto edge devices. 2
  3. @knolleary @johnwalicki https://ibm.biz/NRPhoto Prerequisites Getting Help 3 • A laptop/computer

    with a Web Cam attached • Node.js 12.x or 14.x Had some early reports of issues with npm 7 and the Node-RED Palette Manager. Recommend avoiding that today if you can. • Git • Docker Desktop (optional) • A cup, banana, apple or other recognizable object • Node-RED Slack - https://nodered.org/slack Join #workshop • All the workshop material is available here
  4. @knolleary @johnwalicki https://ibm.biz/NRPhoto Workshop Parts 1. Introduce Node-RED - Get

    Node-RED running on your local computer - Enable the Projects feature - Learn how to install additional nodes into its palette - Create a simple application to learn how Node-RED works 2. Introduce Node-RED Dashboard - Install Dashboard and some other nodes - Build a simple dashboard application 3. TensorFlow in Node-RED - Look at the available TF nodes for Node-RED - Update the dashboard application to include TF 4. Containerization - Turn your Node-RED project into a standalone application, wrapped in a container that can be deployed wherever you want it
  5. @knolleary @johnwalicki https://ibm.biz/NRPhoto What is Node-RED? 5 Many applications we

    build today, from Integration to IoT, often require pulling together different APIs, online services and hardware devices in new and interesting ways. Time spent figuring out how to access a Serial port, or to complete an OAuth flow against Twitter is not time spent on creating the real value of a solution. We need tools that make it easier for developers at all levels to create applications and allow them to focus on what is important.
  6. @knolleary @johnwalicki https://ibm.biz/NRPhoto What is Node-RED? 6 The Node-RED editor

    runs in a browser and allows you to create applications by drawing flows of events. Each node in a flow represents a well-defined piece of functionality, such as updating a value, making a database query or sending a tweet. The developer configures each node as required, focused on what it does, not how it does it. When the flow is deployed to the Node-RED runtime, each node becomes a running piece of code and messages start passing through the flow. “Flow-based programming for event-driven applications”
  7. @knolleary @johnwalicki https://ibm.biz/NRPhoto Technical Overview flows 7 A flow is

    a collection of nodes that are wired together. A node can have multiple output ports and a single port can have multiple wires connected to it. The flow is stored as a JSON object – providing the configuration for all of its nodes and how they are connected. The flow JSON can be imported and exported between Node-RED instances, making it easy to share flows.
  8. @knolleary @johnwalicki https://ibm.biz/NRPhoto Technical Overview messages 8 The messages that

    pass through a flow are JavaScript Objects. By convention they will have a payload property that contains the ‘interesting’ information. This is the property most nodes will operate on by default. topic: “weather/uk” payload: “sunny!” … …
  9. @knolleary @johnwalicki https://ibm.biz/NRPhoto Technical Overview nodes 9 Nodes are the

    basic building blocks of a flow. Nodes that sit at the start of a flow will be waiting for some external event to occur, such as an incoming HTTP request, a timer event or a hardware IO event. They then pass messages onto the nodes they are connected to. Nodes receive those messages, do some work, and then pass them on down the flow. payload: “Jedi are totally amazing!” payload: “Jedi are totally amazing!” sentiment: { score: 4 } In this example, a Sentiment analysis node has examined the ’payload’ property of the message, assessed its sentiment and added its result as a new property of the message.
  10. @knolleary @johnwalicki https://ibm.biz/NRPhoto Technical Overview Node-RED Dashboard Node-RED Dashboard provides

    a set of nodes that can be used to create an interactive webpage. Each node maps to a widget on the dashboard, such as a Text Input, Button or Chart. The dashboard uses a grid-based layout to automatically position widgets on the page. Trades off opinionated appearance against ease of use. Hello world
  11. @knolleary @johnwalicki https://ibm.biz/NRPhoto Building cloud-native AI-infused web apps with Node-RED

    John Walicki @johnwalicki Nick O’Leary @knolleary https://ibm.biz/NRPhoto