AT&T Hack Dallas Node-RED Tutorial

© 2015 IBM Corporation
Stefania Kaczmarczyk
Developer Advocate
Prototyping in Node-RED

2Page© 2015 IBM Corporation
Resources
– Getting started with Watson IoT and Node-RED:
https://developer.ibm.com/recipes/tutorials/getting-started-with-
watson-iot-platform-using-node-red/
– More Node-RED Tutorials: https://github.com/watson-developer-
cloud/node-red-labs
– Connect a Pi to Watson IoT and Node-RED:
https://www.sitepoint.com/connecting-a-raspberry-pi-to-ibm-watson-
and-bluemix/

Wire Framing and
Visual Programming
Introduction to Node-RED

Node-RED – A visual tool for wiring the
Internet of Things (IoT).
– While most programming in
Node-RED is done visually
using pre-deﬁned
function/nodes, any additional
functionality can be added in
JavaScript
– Added to the JavaScript
Foundation in October 2016

The Nodes

© 2015 IBM Corporation
Deploy the Boilerplate

Starters – Boilerplates: Pre-built
applications that use select
services and run times. Good
starting points for
development.
– Runtimes: Various
programming languages
support by Bluemix. Come
with Hello World application.

Boilerplates 1. Log in to Bluemix.
2. Go to the Catalog.
3. Scroll to the Boilerplates section.
4. Select the Node-Red Starter
boilerplate.
5. Give the application a unique
name.
6. Select Create.

Edit Code Locally
New Nodes

Save the Sample
Code to Desktop
1. From the Getting Started tab
in the left navigation scroll to
the Customizing your Node-
RED instance section.
2. Select the DOWNLOAD THE
STARTER CODE button.
3. Unzip the folder on your
Desktop or somewhere else
easy to navigate to.

Install Cloud
Foundry CLI
1. Find the right version for your
operating system:
https://github.com/cloudfoundry/cl
i/releases
2. Open a terminal/command
window and enter the command:
cf login https://api.ng.bluemix.net
3. Login with your Bluemix
username and password. Select
your Org and the Telus space.

Google Chart – Google has some fantastic basic
charting for displaying data.
– The functions have been package
as a Node, but the Node is not
currently in our palette.
– Next step is to add: node-red-
contrib-googlechart
– https://google-
developers.appspot.com/chart/int
eractive/docs/gallery

Add the Package to package.json
1. Open the folder for your app that you downloaded.
2. Open the package.json file in a text editor.
3. Add a command at the end of the line "node-red-nodes-cf-sqldb-
dashdb":"0.x” and then hit Enter to go to the next line.
4. Enter the following with the quotes:
"node-red-contrib-googlechart”:”0.x”
5. Make sure the line is indented like the rest. Save and close the file

Upload and
Deploy
1. Back in your terminal/console window
do a change directory to get to the
folder for your application.
2. Type the following command to push
the newly edited application to
Bluemix: cf push

View Your New Nodes

More Nodes… http://flows.nodered.org/

Debug
First Flow

Node Basics
– Drag and drop to place nodes on the white workspace.
– Double-click a node to open the edit pane.
– Select a node and look at the Info tab on the right to see information
about implementing.
– Switch to the debug tab to see live logs like you would see in the
console.
– Red button at the top indicates there are new updates. Click Deploy
to push the changes live.

Simple Start – Inject Node: Acts like a
trigger and inserts text,
numeric, or other data into a
flow.
– Debug Node: Exports all
output data from that flow to
the Debug tab. Critical for
testing and troubleshooting.

Call an API
Expand Flow with
Weather Company

Weather
Company
Data
1. Go the Catalog in Bluemix.
2. Navigation to the Data & Analytics
section.
3. Add an instance of the Weather
Company Data service.
4. Switch to the Service Credentials tab and
copy the JSON for Credentials-1.

Expand the Flow
1. Drag an http request node between the Trigger and Debug nodes.
2. Edit the node and use the URL for the Weather Company:
URLFROMCREDENTIALS/api/weather/v1/geocode/49.1110933/-
122.9411227/observations.json
3. Test trigger.

Debug Data

Parse to JSON 1. Drag an orange json node onto
the workspace.
2. Connect the node between the
http request and debug nodes.
3. Change the debug node to
output
msg.payload.observation.
4. Test your trigger again to see
the narrowed results.

Trim to Data 1. Drag a function node onto
the workspace.
2. Open the function node for
editing.
3. Type in msg.payload =
msg.payload.observation;
4. On the next line enter:
msg.payload.date = new
Date();
5. Select the Done button to
save and exit.

Store Data
1. Drag a Cloudant out node onto the workspace.
2. Enter ‘weathersurrey’ for the Database.
3. Check the box for only store msg.payload object.

Update Trigger
and Deploy
1. Change the trigger to have
a Repeat interval of every 3
seconds.
2. Deploy the application and
fire the trigger again.

Cloudant and Google Chart
Data Recall

Grab from
Cloudant
1. Drag a red Chart Request node onto
the workspace.
2. Drag a Cloudant in node onto the
workspace below your connected
flow.
3. Drag a red Chart Response node
onto the workspace.
4. Connect the three nodes.

Configure Chart
Request

Configure Cloudant In

Configure Chart
Reponse
1. Connect a function node
between Cloudant In and Chart
Response nodes.
2. Create a loop to format the
payload for the chart display.
Date must be first.

Debug and
Deploy
1. Add a debug node and
connect it to the function
node.
2. Deploy the updated flow.
3. Navigation to your web URL
and append /chart to the
end
4. You should now see your
annotation chart.

AT&T Hack Dallas Node-RED Tutorial

More Related Content

What's hot

Viewers also liked

Similar to AT&T Hack Dallas Node-RED Tutorial

Recently uploaded

AT&T Hack Dallas Node-RED Tutorial