at&t hack dallas node-red tutorial

© 2015 IBM Corporation

Stefania KaczmarczykDeveloper 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/




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-defined 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/cli/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.

https://github.com/cloudfoundry/cli/releases




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/interactive/docs/gallery


Add the Package to package.json1. 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 Flow1. 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 Data1. 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 ChartRequest


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

Technology