Node-RED Flow Editor

Node-RED provides a browser-based flow editor that makes it easy to wire together flows using the wide range of nodes in the palette.

Node-RED Flow Editor

In the following video, we will guide you through the process of creating a Node system.

If you cannot view the video, the same information is delivered to you in the element below the video. After you have completed the tasks, please go through the knowledge checks.

Follow the instructions in the video, or in the element below

Using the Flow Editor

Here's the same information that is shown in the video step by step.

Go with the flow (editor)

Step 1.

** Open the Flow Editor**

• From this page, you can click the "Go to your Node-RED flow editor" button

Step 2.

The Pandorica Opens

• You should have the following view now
• On the left, you have a selection of different nodes

Step 3.

Placing the Nodes

• Drag and drop the nodes from the list in the same order as you see in the image
• Take note of the icon and color of the nodes and make sure they match with the image
• If you need to delete a node, you can do so by selecting one and pressing the delete key on the keyboard
• In order to get the bright blue nodes, they must be installed
• Go to the next step for instructions on how to do that

Step 4.

Something Old, Something New, Something Blue

• To begin the installation process, go to the top right corner next to the log-in icon.
• From that drop-down menu go to "Manage palette"
• This opens up a window, where you can see two tabs labeled "Nodes" and "Install". Go to the "Install" tab
• In the search bar, search for "node-red-contrib-scx-ibmiotapp"
• After you have found it, press the "install" button
• This opens a new notification, press "Install" here as well
• Now those blue nodes should be on the left side of the editor among the other nodes
• Go back to the previous step to see where the blue nodes are placed

Step 5.

Setting up the Nodes 1

• Double clicking a node will open the properties window
• Open the properties window of the "Hello Node-RED!" node
• Change the nodes name from "Hello Node-RED!" to "SendData"
• (No quotations marks)
• Next to the msg. payload, open the drop down menu
• From here, select the boolean
• Click "Done" when ready

Step 6.

Setting up the Nodes 2

• Open the properties window of the upper function node
• Rename it to "Device Payload String"
• Add the line of code from the image to the function tab
• Use your own name in the place of "Kiia"
• Rename the lower function node as "Device Payload JSON Object"
• Place the same line of code from the image to the function tab

Step 7.

Setting up the Blues

• To set up the blue IBM nodes go to the Watson - IoT platform
• On the left side menu, go to the Apps
• Here we can create an API Key by clicking the - "Generate API Key" button in the top right - corner
• Write a description for the key: "Connection Flow" and then click "Next"
• Change the role from the dropdown menu to - "Standard Application"
• After this click the "Generate Key" button
• Copy down the API Key and the Authentication Token for future use

Step 8.

Setting up the Blues 2

• Again from the left side menu, go to Devices
• Choose one of the devices you have previously created
• You will need the Device ID and Device Type in the next steps

Step 9.

Setting up the Blues 3

• Go back to the Flow Editor
• Open the properties window for one of the blue nodes
• Change the Authentication from "Quickstart" to "API Key"
• On the next row below choose "Add new ibmiot…" from the dropdown menu
• Next, click the pen icon beside it
• Name it "Connection Flow"
• Copy the API Key you previously got onto the API Key slot
• Also, copy the Authentication Token to the API Token slot
• Back to the properties window
• Type your chosen devices Device Type and Device Id to their corresponding slots
• Type to the Event Type slot: Update String
• Repeat this process for the other blue node as well
• Some info may already be copied there

Step 10.

We Are Always Connected

• Connect the nodes to each other as seen on the image
• To connect the nodes together, click and drag on the grey blobs on either side of the nodes to the other nodes grey blob
• Press the red Deploy button in the upper right corner
• You can test the nodes by pressing the big square next to the SendData node
• You can view the data from the right side by pressing the ladybug icon on the top right below the sign-in icon

Step 11.

Observe the Fruits of Your Labour

• Go to the IoT platform and to the Devices tab
• Here you can see your devices
• Open up the one you chose for this exercise and inspect its recent events
• You may have to press the grey square next to the SendData node in the Flow Editor again for the events to update

Summary

Well done! Now all that is left from this lesson is the knowledge check and your good to go to the next topic!

TEHTÄVIÄ