Objective

In this tutorial I will create a Node-RED server application that will process a request from a client web form. The server will save the request data in a NoSQL database.

Requirements

You must have:

• Access to a Bluemix account.

1. Create a Node-RED Starter Application

Start to create a Node-RED Starter server application. A client application sends a form request to the Node-RED server, the server processes the form data and sends a response back to the client.

Node-RED is a so-called visual workflow editor, which lets you create an application workflow by dragging and dropping visual nodes onto an editor.

1. To create a Node.js based application with the ‘Node-RED Starter’, find the ‘Node-RED Starter’ in the ‘Boilerplates’ section and click the icon,
   
2. You are taken to the ‘CREATE’ page of the starter application. In the configuration controls select a ‘Space’, enter a ‘Name’ e.g. ‘<username>-nodered1’ or ‘<myapp-uniquename>-nodered1’, the ‘Host’ defaults to the ‘Name’ value but you can overwrite it, and for ‘Domain’ leave the value to ‘mybluemix.net’. The ‘Host’ value will become the subdomain value, so that you will be able to access your application via the ‘Host’.mybluemix.net URL. Click the ‘CREATE’ button.
   
3. The ‘Node-RED Starter’ is being created, a process that is called ‘staging’.
   
4. Click on the ‘Overview’ link in the left menu, to go to the ‘application overview’ page.
   
5. In the application overview, you can see the configuration details of the Node-RED starter application. Our application is a Node.js runtime with an ‘SDK for Node.js’, it is 1 instance of a virtual server with 512 MB of memory assigned, and 5.575 GB of memory available. You also will see that the application is configured out-of-the-box with a Cloudant NoSQL database.
6. In the ‘APP HEALTH’ box make sure that the application finishes staging successfully and says ‘YOUR APP IS RUNNING’
7. Click the URL to view your application listed next to ‘Routes:’ under the application name. The URL should be clickable.
   
8. This should open the homepage of your Node-RED application.
   
9. Click the large red button that says ‘Go to your Node-RED flow editor’, which opens the actual Node-RED flow editor.
   

Now you have created a Node-RED Starter server application.

2. Create a Client Application

To add an HTML form for user input, go to https://jsfiddle.net/ and in the HTML window paste the following code, replace ‘myapp’ with the name of your Bluemix Node-RED application:

3. Add a Request Handler to the Server Application

Now we added an HTML form to the client application, we still need a request handler on the server application that receives the request from the form, stores the data in a database, and then sends a response back the client.

1. Go to the Node-RED flow editor: http://<your-host-name>.mybluemix.net/red/#
   
2. Let’s start with a simple exercise. In the left menu, under the ‘input’ section, drag the ‘inject’ node to the ‘Flow 1’ tab.
3. In the left menu, scroll down to the ‘output’ section and drag the ‘debug’ node to the ‘Flow 1’ tab.
4. Connect the two nodes by drawing a line between the two open dots facing the two nodes.
   
5. After making any changes to a flow in Node-RED, you must deploy the flow by pressing the red ‘Deploy’ button on the top right of the flow editor.
   
6. To test our first flow, make sure in the right column, you click the ‘debug’ tab to see any output from the ‘debug’ node.
7. Then click the little square button to the left of the ‘timestamp’ node.
8. You should see in the ‘debug’ tab, the timestamp being printed to the debugger.
9. Double-click the ‘inject’ node to open its configuration window.
   
10. From the ‘Payload’ dropdown, select ‘string’ to change the input from ‘timestamp’ and set the value to ‘World’ or enter your name,
11. Set the ‘Topic’ to ‘Saying hi’ and ‘Name’ the ‘inject’ node ‘Hello World Test’.
12. Click ‘Done’.
13. Deploy the changes to the flow.
14. Test the changes.
    
15. Next, scroll down the nodes in the left, in the ‘functions’ section, select the ‘template’ node, and drag it in between the ‘inject’ and the ‘debug’ node,
16. Double click to open the ‘template’ node and replace the Template text to ‘Hello {{payload}}!’,
    
    
17. Now ‘Deploy’ your workflow again, and test by pressing the ‘inject’ button,

Now, I will create HTTP endpoint on the server, to which the form of the client application can send the form data: ‘https://remkohdev-nodered2.mybluemix.net/say’:

1. In the Node-RED flow editor, create a new flow under the test flow, in the same tab.
2. To create an ‘http’ endpoint, drag an ‘http’ node under the ‘input’ section to the tab.
3. Scroll to the ‘output’ section and drag an ‘http response’ node to the right of the ‘http’ node, and connect the two nodes.
4. Double click the ‘http’ node to change the configuration.
5. Leave the value for ‘Method’ to ‘GET’, change the value for ‘URL’ to ‘/say’ and change the ‘Name’ to ‘GET /say’.
   
6. Click ‘Done’ and deploy the flow.
7. Now you can test the client form, go to the client’s URL, complete the form and submit the form. You should see your input as a json response.
8. When you submit the form, the form will send an HTTP request with co-called URL parameters: the form input will be appended to the URL in the action property as follows:
   https://myapp.mybluemix.net/say?name=remko2
   You see a question mark ‘?’ followed by key-value pairs, which represent the parameters as ‘name’ and ‘value’ pairs. Our server’s HTTP node ‘/say’ will read the input and sends the input back as response:
   {"name":"remko2"}
9. See what happens when you add more parameters using the ‘&’ sign to separate the key-value pairs:
   https://myapp.mybluemix.net/say?name=remko2&city=nyc&hobby=hacking

Congratulations, you have implemented an HTML input form that sends a request to the server, and you implemented a request handler that sends a response back to the client!

Extra:

1. Add a ‘template’ node to the workflow above
   
2. Change the template text to
   This is my message:
name: {{payload.name}},
city: {{payload.city}},
hobby: {{payload.hobby}}!
3. Deploy the workflow, and resend this URL in your browser address bar:
   https://myapp.mybluemix.net/say?name=remko2&city=nyc&hobby=hacking

4. Add a Database and Save Request

I want to store what is said in a NoSQL database. A Cloudant NoSQL Database was already added to our application by default.

1. Go to the application overview page in Bluemix, and go to Connections. You see there is a ‘Cloudant NoSQL DB’ service bound to the application. Services that are connected to the application, can be accessed by the application in the Node-RED flow editor.
2. Node-RED uses this ‘Cloudant NoSQL DB’ service to store all your Node-RED flows in a database called ‘nodered’.
3. We can use the same ‘Cloudant NoSQL DB’ service to add our input data to a new database called ‘whatissaid’.
4. Click on the Cloudant icon in Connections, then click the LAUNCH button,
   
5. That should open a Cloudant Db Admin tool,
   
6. Click the ‘Databases’ link, in the top right click the ‘Create Database’ link, enter ‘whatissaid’ for ‘Name of Database’, and click ‘Create’,
7. The database is empty and should say ‘No Documents Found’,
   

Go back to the flow editor.

1. From the ‘storage’ section, drag a simple ‘cloudant’ output node, with a single open dot to the left of the node, to store our input data in a single database. Drag the node right under the HTTP response node, and connect the ‘template’ output to the ‘cloudant’ input,
2. Double-click the ‘cloudant’ output node,
3. Configure the ‘Service’ to select the cloudant database, do NOT select the option ‘External cloudant or couchdb service’,
4. For ‘Database’ enter the name ‘whatissaid’, for ‘Operation’ select the value ‘insert’, and for ‘Name’ enter the value ‘save whatissaid’,
   
5. Click ‘Done’,
6. Click ‘Deploy’ to deploy the changes.

Congratulations! You have now added a database and are storing new requests with form input data in a NoSQL database.

5. Extra!

What is an API and what is REST?

When send a request over the internet or world wide web (www), the request is send using a protocol called HTTP (Hypertext Transfer Protocol), when the request is encrypted using SSL, the protocol is HTTPS.

An API (Application Programming Interface) is an interface that defines how to remote access an application. An API defines among other the server endpoint or domain, the relative path of the resource, HTTP headers, the input parameters, the output data, authentication method, the different methods to access a resource. An API is comparable to a class method signature:
public String getPeople(String name);

When you send a request not manually via your browser but when you code an application to send an HTTP request to another online application via an API, you use what is called a REST specification, which is an extension of HTTP. REST is a specification that defines a few architecture requirements, among other: to use HTTP, a client-server design, and that applications must be stateless.

REST specifies that you must use the following HTTP methods for corresponding CRUD (Create, Read, Update and Delete) methods on the database:

• Create: POST,
• Read: GET,
• Update: PUT, and
• Delete: DELETE.

URL: https://gateway-a.watsonplatform.net
Resource or path: /api/v2/people
HTTP Header: Content-Type: application/json
Input parameters: name=John
Authentication: Basic Authentication
HTTP Method: GET