Node-RED: basics to bots

Course Features
Language: English
Course Details
Get hands-on experience and learn how to convert speech to text, analyze tone, translate text into different languages, send tweets through Twitter, add audio and video capabilities, and set up a chat bot using the IBM Watson Conversation service and Facebook Messenger. And you don’t even need any programming experience!
Node-RED, which is built on Node.js, is a browser-based flow editor that makes it easy to wire together devices, APIs, and online services by simply dragging and dropping nodes on a palette. You then connect, or wire, the nodes to create flows that can be then deployed to the lightweight Node.js runtime with a single click.
For a quick introduction to Node-RED, see the video Node-RED in 5 minutes below.
Get started
Lab 1: create a Node-RED boilerplate app
Lab 2: build a web page and a REST API
Lab 3: add community nodes and Watson services
Lab 4: create cognitive web pages and a Messenger bot
Summary
FREE
Create your first flows
5 of 6
In this section, you’ll create your first flows in the Node-RED flow editor. An application in Node-RED is called a flow. The palette in the left column shows you all the available nodes. The nodes are grouped by category. The main categories of nodes are input, output, and function. Use input nodes to input data into a Node-RED application, or flow. Use output nodes to send data outside of a Node-RED flow. Use function nodes to process data. You can use the function node to pass messages though a JavaScript function. Select an input inject node and drag it onto the canvas. Select an output debug node and drag it onto the canvas. Link, or wire, the two nodes together by clicking and dragging your cursor from one node to the other. Note that the debug and inject nodes change their display names when you drag them onto the canvas. This name change is expected and shows additional context for the node. Double-click the timestamp node. For the Payload field, select string. Enter a string, such as Hello, this is my first Node-RED application. In the Name field, enter a name for this node, such as Hello World inject. Click Done. The blue circles indicate that your flow has unsaved changes, which means that the application needs to be deployed. Click Deploy to deploy and save your changes. The debug node writes to the debug tab, which helps you monitor the flow through your application. To initiate the flow, click the tab linked to the inject node. You now see the output on the debug tab. In the filter nodes search field, enter translator to find the language translator node. Drag the node onto the canvas so that it lies in between the inject and debug nodes. You can move the nodes to make more space. To remove an unwanted line, select the line and press Delete on your keyboard. Double-click the language translator node. Select to translate from the inject...
Continue Reading
Continue Reading
Create a REST API
5 of 7
In this section, you’ll modify your “Hello World” web page to invoke a REST API that you will create. This will show you how to do two important tasks: How to consume a REST API. This could be any REST API from any source, which allows you to add extra capability into your application. How to create a REST API in Node-RED. This will allow you to create reusable chunks of functionality that can be consumed by other flows that you create in Node-RED, and also be consumed by other applications, even if they are not Node-RED applications and even if they are not running in Bluemix. Open the flow editor to your instance of Node-RED. Double-click the template node and add the following HTML: <html> <head> <title>Hello World</title> </head> <body> <div>Hello to Watson on Node-RED</div> <div id="id_hello"><span>I think you are typing text in:</span> <span id="id_textlang"></span></div> <form id="id_form"> <div> <span> Enter your text to be processed: </span> <span> <input type="text" name="name" id="id_text"/> </span> </div> <div> <input type="submit" value="Enter" id="id_enter"/> </div> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ setupPage(); }); var LANGUAGES = { 'ar' : 'Arabic', 'en': 'English' , 'es': 'Spanish', 'fr': 'French', 'it': 'Italian', 'de': 'German', 'pt': 'Portuguese', 'ko': 'Korean', 'zh': 'Chinese' }; function setupPage(){ $('#id_hello').hide(); $('#id_form').submit(onSubmitClicked); enterbutton(); } function langLookup(isocode) { return (LANGUAGES[isocode] ? LANGUAGES[isocode] : isocode); } function processOK(response) { console.log(response); if (response.identifyresponse){ $('#id_textlang').text(langLookup(response.identifyresponse)); } else { $('#id_textlang').text('No response received from service'); } } function processNotOK() { console.log('Error Processing'); $('#id_textlang').text('Oops something went wrong'); } function invokeAjax(message) { console.log('AJAX about to be invoked.'); console.log(message); var ajaxData = {}; ajaxData.msgdata = message; $.ajax({ type: 'POST', url: 'langidentify', data: ajaxData, success: processOK, error: processNotOK }); } function onSubmitClicked(event){ $('#id_hello').show(); event.preventDefault(); var txt = $('#id_text').val(); invokeAjax(txt); } function enterbutton(){ $(function() { $("form input").keypress(function (e) { if ((e.which && e.which ==...
Continue Reading
Continue Reading
FREE
Add the community nodes to the package.json file
3 of 12
To make these nodes available to your instance of Node-RED, you need to add them to your package.json file. From your Bluemix page, find your application and stop it. After your application is stopped, click the application name (not the route). Find the section with the heading Continuous Delivery and click Add Git Repo And Pipeline. Click Continue to create the Git repository for your application. Wait for the Git repository to be created. After it’s created, click Close. Click Edit Code. In the list of application files, select the file json. Add the following four lines anywhere in the file. If you add the lines at the end of the file, be sure to remove the final comma. "node-red-contrib-browser-utils":"0.x", "node-red-contrib-media-utils":"0.x", "node-red-contrib-play-audio": "2.0.x", "node-red-dashboard": "2.0.x", Save your changes by clicking File > Save. While you are here, make one more change. The microphone node creates temporary files in memory, which means you need to raise the memory allocation for your instance of Node-RED. Select the file manifest.yml. Raise the memory allocation to at least 1024M. Save your changes and redeploy your instance of Node-RED. Wait for the application to redeploy and restart. Navigate to the Bluemix dashboard or to your application: To go to the Bluemix dashboard, click the Open the App Overview To open your application, click the Open the Deployed App Go to your instance of Node-RED in the flow editor. Because this is a browser application, refresh the page. Search for the microphone The microphone node uses the browser capabilities that are available only on Chrome and new versions of Firefox. If you are not using Chrome, switch to Chrome or Firefox. The microphone node will need access to your computer microphone, which is possible only on HTTPS. If your instance of Node-RED is running on a platform such as Bluemix, make sure you are using HTTPS. Create a new tab and...
Continue Reading
Continue Reading
FREE
Re-create the Interpreter application
5 of 12
In this section, you will re-create the Interpreter application on GitHub, which is a Node-RED flow that translates audio recorded by a microphone into a variety of languages. Go to your Node-RED flow editor. Select and delete the wires. Drag and drop the speech to text node onto the canvas. Select the speech to text node and click the info tab. Scroll down and note that the input is expected to be an audio buffer on msg.payload. Scroll further down and note that the output will be placed on msg.transcription. Double-click the speech to text node to edit the configuration. Set the language to US English and select the Continuous check box. Then, click Done. Wire the microphone node to the speech to text node. Drag and drop a language translator node onto the canvas. Select the language translator node. Go to the info tab and note that the input is expected on msg.payload and the output is on msg.translation. The speech to text node sends output to msg.transcription, but the language translator node expects input on msg.payload. This means that the nodes cannot be connected directly. Drag and drop a function node onto the canvas. Then, double-click the function node to edit it. Add the following name and code that allows the output from the speech to text node to be passed to the language translation node: Name: Prepare for Translation Function: msg.payload = msg.transcription; return msg; Click Done. Wire the speech to text, function, and language translator nodes. Double-click the language translator node to configure it. Select your source and target language. For example, select English and Spanish. Then, click Done. Drag and drop the text to speech node onto the canvas. Then, select the node and look at the info tab. Scroll down and note that the input is expected on msg.payload and that the output will be placed on msg.speech. This means that the language translator node, which outputs the simple translation on msg.payload, can be connected directly to the text to speech node. However, the text to speech node cannot be connected directly to...
Continue Reading
Continue Reading
FREE
Import the OK Watson flow
8 of 12
In this section, you will re-create the OK Watson application. This is a more complex flow, and you will be taking a short-cut to create it. Create a new tab and set the name of the tab to something like OK Watson. Click Done. The flow should still be in your clipboard. If not, repeat steps 1-4 under Step 6a. You are now ready to import the flow into the flow editor. Click the flow editor Menu. Click Import > Clipboard. Paste your flow into the text box. Then, click Import. You can use the Zoom buttons to show the whole flow. You now have the OK Watson flow in your flow editor. Focus on the nodes in the test txt in grouping. These nodes provide sample input strings. Click the link node. Note that the text is passed directly to the tone analyzer node. Focus on the speech in group of nodes. This groups uses the microphone and speech to text nodes. Double-click the speech to text node to set a spoken language. Then, click Done. Select the link node. Note that the speech to text input node also goes to the tone analyzer node. In the tone analyzer group of nodes, double-click the tone analyzer node. Note that the tone is configured to detect emotion on the input text. Click Cancel. Double-click the function node named add emotion to context. The script in this function node determines the highest tone score and sets it to msg fields that the conversation node will look for. Click Cancel. Click the link node. Note that the output from the tone analyzer links to the conversation node. Focus on the conversation group of nodes. To configure the conversation node, find your conversation workspace ID that you created in Step 5. Prepare for the OK Watson application, steps 6 – 11. Then, go to Bluemix. Find your instance of the Conversation service. Click the service and launch the tooling. Find your workspace. Click View details to see your workspace ID. Copy the...
Continue Reading
Continue Reading
FREE
Obtain Facebook Messenger credentials
3 of 13
Before you can connect to Facebook Messenger, you need the following tokens: Page Access Token: a token generated by Facebook for you to use to prove your identity when posting to Messenger. Verify Token: a token generated by you for Facebook to use to verify your application endpoint Create a Verify Token. (You can simply create and save a Verify Token in a text editor.)This token should only be known by you. You use it to verify that incoming requests are valid. This can be any text and should be difficult for anybody else to guess, for example: ThisIsMyPersonalVerificationTokenThatOnlyIKnowAbout The next steps show you how to generate a Page Access Token from Facebook. Open the web page https://developers.facebook.com/docs/messenger-platform Under Implementation, click Getting Started. You will follow the steps on the Quick Start Guide to register a new app and create a new page. Those step are described in this lab. Click Facebook App. Then, log in to Facebook. If you are not registered, register as a Facebook Developer. If you are already registered as a Facebook developer, click Add a New App. If you have newly registered as part of this lab, you will not see this button. Instead, go to the next step. On the Create a New App ID form, enter a display name for your application and select a category. Then, click Create App ID. Enter the obfuscated text as part of the security check. On the Messenger page, find the Token Generation section. If you already have a page that you want to integrate, select that page. If not, click Create a new Page. Select a page option, for example, Cause or Community. Enter a name for your new page. Then, click Get Started. Enter some text for the About section for the page. Then, click Save Info. Optional: Add a profile picture. If you don’t want to add a picture or other...
Continue Reading
Continue Reading
FREE
Create Node-RED webhooks
4 of 13
You are now ready to create the webhooks that will allow your Node-RED applications to listen into the chats on Facebook Messenger. Find the Webhooks section on the Facebook Developer page. Click Setup Webhooks. Complete the new page subscription: Enter a Callback URL, which will be the URL for your Node-RED instance with any entry point that you want. For example, enter: <your_Node-RED_instance_URL>/mybot Enter your Verify Token. Select the messages check box under Subscription fields. Click Verify and Save. You will see a callback verification error. This is because you haven’t yet created your /mybot callback. Go to your node-RED instance in the flow editor. Create a new tab and name it something like Messenger Webhooks. Drag and drop the following nodes onto the canvas: Input http node Output http response node Function node Output debug node Wire the nodes together: wire the debug node (msg.payload) to the input http node and to the function node and then to the http response Double-click the http input node. Set the method to GET and set the URL to the URL that you registered as the webhook for Facebook Messenger, such as /mybot. Name it Messenger Verification Webhook. Then, click Done. Double-click the function Name it GET Subscribe and then enter the following JavaScript. Remember to substitute the token‘ThisIsMyPersonalVerificationTokenThatOnlyIKnowAbout’ (shown in green) with your Verify Token. This script verifies that the request coming is a Verify Token request. The script checks that the token sent is what it is expecting. The script then sets msg.payload to the challenge sent by Facebook Messenger to verify that the subscription was accepted. var mode = ''; var vtoken = ''; var challenge = ''; if (msg.payload['hub.mode']) { mode = msg.payload['hub.mode']; } if (msg.payload['hub.verify_token']) { vtoken = msg.payload['hub.verify_token']; } if (msg.payload['hub.challenge']) { challenge = msg.payload['hub.challenge']; } if ('subscribe' == mode && 'ThisIsMyPersonalVerificationTokenThatOnlyIKnowAbout' == vtoken) { msg.payload = challenge; } return msg; Click Done and deploy your flow. Go back to the Facebook developers page...
Continue Reading
Continue Reading
FREE
Create the Node-RED Messenger listener
5 of 13
You’ve created the Node-RED webhooks for Facebook Messenger. Next, you’ll create the flow that will listen to message texts. In your Node-RED flow editor, drag and drop the following nodes onto the canvas: Input http input node Output http response node Function node Two output debug nodes Double-click the function node and set Outputs to 2. Name it Look for Messages. Then, click Done. Wire the nodes together: Wire the input http node to the first debug node (msg.payload). Also, wire the input http node to the function node. Then, wire the functionnode to both the debug node (msg.payload) and the output http response node. Double-click the input http node and specify the method as POST and the URL as /mybot or the URL that you registered as your webhook. Name it Messenger Chat Listener. Then, click Done. Double-click the function node, name it Look for messages, and enter the following code. This function loops though the submitted entries and for each message that is detected, sends a message signal to the first output. It ends by sending a message (msg) object to the second output. The first output is used to process each message event that comes in, and the events can be bundled into one HTTP POST. The second output is the signal that comes as an HTTP response back to Facebook Messenger that the POST has been received. If this is not sent, Facebook Messenger will keep resending the same message. if (msg.payload.object && ‘page’ == msg.payload.object) { if (msg.payload.entry){ var entry = msg.payload.entry; for (var i = 0; i < entry.length; i++) { var pageID = entry[i].id; var timeOfEvent = entry[i].time; var messaging = entry[i].messaging for (var j =0; j < messaging.length; j++) { if (messaging[j].message) { msg.messagingEvent = messaging[j]; node.send([msg,null]); } } } } } Click Done. Double-click the second debug node (msg.payload). In the Output field, enter msg.messagingEvent, name it something like MessengingEventfrom Messenger and then click Done. Deploy your application. Your flow should now look like this: Go back to your Facebook page. Click Message and...
Continue Reading
Continue Reading
FREE
Connect the Watson Conversation service to the Messenger bot
7 of 13
You now have all the working components to connect the Watson Conversation service to Facebook Messenger. In the Node-RED flow editor, delete the connections between the listener and writer components. You will redirect the connections to the conversation node in between. Drag and drop a new function node and an output link node onto the canvas. Wire the nodes together. Edit the new function node with the following code, which will set the text for the conversation service and also signal that the text came from Messenger. msg.fromMessenger = true; msg.payload = msg.messagingEvent.message.text; return msg; Click Done. Double-click the link out node. Name it Text from Messenger and connect it to the unnamed link input node on the OK Watson page by selecting it from the list. It might be named something like 31523e2d.2777a2. Click Done. Click the OK Watson tab. Drag and drop a function node and an output link node onto the canvas. Double-click the new function node. Set the Outputs to 2. Add the following code, which sends a message to both outputs if the input came from Messenger. This allows you to continue to hear the Conversation service responses in Node-RED and see them on Messenger.if (msg.fromMessenger) { return [msg,msg]; } else { return [msg, null]; } Click Done. Double-click the new link out node and name it Conversation Out for Messenger. Then, click Done. Wire your nodes together, breaking the previous link to the left of the text to speech node. Go to the Messenger tab and drag and drop an input link node onto the canvas. Double-click the new link node. Name it Writer Output and link it to the Conversation Out for Messenger from the OK Watson flow. Then, click Done. Wire the nodes together. Double-click the Set up response function node. Remove the following hardcoded line:msg.payload = 'Hello, this is all I say for now.'; The function code should now look like this: Click Done and deploy your flow. Go to Facebook Messenger and try out your bot....
Continue Reading
Continue Reading