Node-RED: basics to bots

Node-RED: basics to bots

Course Features

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

FREE
Bind Watson services
4 of 6
In this section, you’ll bind the following Watson services to your Node-RED instance: Language Translator and Conversation. In this lab, you’ll use only the Language Translator service. However, you add the other services in preparation for Lab 3. If you already have instances of these Watson services, you can connect them to your Node-RED application. Click Connections. 2.Click Connect New. 3.Under Services, select Watson. 4.Click Language Translator. (Do not click Language Translation, which is a deprecated service.) 5.Make sure that it is connecting to your Node-RED instance. You should see the name of your application in the Connect to field. 6.If you want to be able to create custom translations, select the Advanced pricing plan. You will not need the Advanced plan for the labs in this course. 7.Click Create to create the Service. This action creates new credentials that allow you to use the service. By connecting to your Node-RED instance, these credentials are available for the application to use. 8.When you’re prompted to restage, click Cancel because you want to connect to one more service before you restage. 9.Click Connect New again and repeat the previous steps to add the Conversation service. Do not restage the application until you’ve connected all three services. 10.After you add all services, click Restage. 11.Wait for the application to restart. When your application has restarted, you will see the status reported as “Your app is running.” 12.Click View App to open your running Node-RED application to see the landing page of your Node-RED instance. 13.Click Go to your Node-RED flow editor to open the editor.  
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

Lab 2: build a web page and a REST API

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> &nbsp; <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

Lab 3: add community nodes and Watson services

FREE
Find community nodes
2 of 12
The Node-RED instance that you are running in IBM Bluemix comes with a sample set of nodes, but you can also use community nodes, which are created and published by a community of developers. You’ll import node libraries from the community to create nodes for a microphone, audio, and a dashboard. In this section, you will create the Interpreter and a conversation bot (OK Watson) flows from this website: https://github.com/watson-developer-cloud/node-red-labs/tree/master/starter-kits. Open the web page that contains the two starter applications that you will be re-creating: https://github.com/watson-developer-cloud/node-red-labs/tree/master/starter-kits Scroll down to the set up Instructions. You will now learn how to find nodes like these for yourself. Open a new browser page and navigate to the Node-RED libraries at http://flows.nodered.org/. Search for a microphone node that you will add to your application. Select the nodes check box. Do not select flows.   The node-red-contrib-browser-utils library provides nodes for a microphone, camera, file inject, and unzip. Search for audio. You should see two libraries: the node-red-contrib-play-audio and the node-red-contrib-media-utils library. The node-red-contrib-play-audio library provides a speaker node. The node-red-contrib-media-utils library provides media nodes for video and audio streams. You will use the speaker node in this lab and the media nodes in Lab 4. Search for a dashboard. The node-red-dashboard library provides a set of nodes that you can use to build a dashboard. You won’t be using these nodes in this lab, but the Breaking News and Dashboard Translation starter kits will use the dashboard.
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
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
FREE
Prepare for the OK Watson application
6 of 12
In this section, you will be re-creating a bot application named OK Watson by using the Watson Conversation service. For more information on the Watson chat bot, see the Conversation Service Tutorial. You will import a prebuilt conversation from the OK Watson starter kit. Open the OK Watson starter kit page on GitHub. Click the link on this page to the OK Watson Starter Conversation JSON . Right-click Raw and select Save Link As. Save the file with a .json file extension. Find the file on your machine and open it to verify that the file has been download properly and that is has JSON content. You are now ready to import the file into the Conversation service. Open your Bluemix page and select the Conversation service. Find the section for the Conversation tooling and click Launch tool. Click the Import icon. Select your file. Under Import, select Everything (Intents, Entities, and Dialog. Then, click Import. This action will create your workspace. Click the Menu icon (3 dots) and then click View details. This view shows a summary of the workspace and the workspace ID. You need this ID for your Node-RED flow to be able to use the Conversation service. To see the intents, entities, and dialog nodes that were loaded, click the Return button. Click Get Started.   You should see your workspace. The service will take some time to train on your conversation. To check that the training is done, click the Ask Watson icon. If you see the message “Watson is training on your recent changes,” your conversation isn’t ready to use. If you don’t see a message, your conversation is ready to use.  
FREE
Add link nodes to more easily view the logic of the application flow
7 of 12
Open the home page for the OK Watson Starter Kit. Click the link to the JSON flow. Click Raw to view all the JSON code. Select all of the code and copy it to the clipboard. The flow that you will import uses link nodes to make it easier to view the logic of the application flow. Open your Node-RED instance in the flow editor. To see how these link nodes work, click the Flow 1 tab. Provide a name for this tab, such as Hello World. Then, click Done. Drag and drop an inject node onto the canvas. Drag and drop two output link nodes onto the canvas. Drag and drop an input link node onto the canvas. Select and delete the link between the Hello World Inject node and the language translator node. Double-click the second inject node and name it something like Goodbye Inject. Set the Payload field to a suitable string, such as It's time for me to go now. Then, click Done. Wire the nodes together so that the Hello World Inject node, the language translator node, and the Goodbye Inject node are wired to separate link nodes. Double-click the link that is connected to the Hello World Inject node. Name the link out node to something like Hello String. Then, click Done. Repeat the previous step for the link node that’s connected from the Goodbye Inject node. Name the link node to something like Goodbye String. Then, click Done. Double-click the link node that’s wired to the language translator node. Name the link something like Translation Input and select the options (blue check boxes) to link to both output links. Then, click Done. To see what a link node is connected to, select that node. For example, select the input link node connected to the language translator node. Click Deploy to save your changes. Click the Debug tab. To flush the list, click the Trash icon. Click each inject node in turn. You should see the output in the Debug tab. You are now ready to import the OK Watson flow.
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

Lab 4: create cognitive web pages and a Messenger bot

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
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
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
FREE
Create a Node-RED Messenger writer
6 of 13
Your Node-RED application can see chats on Facebook Messenger. It now needs to write back. You’ll need to install a new node from the community Node-RED library. Go to the Node-RED Library page at http://flows.nodered.org. Search for Messenger. Select the node named node-red-contrib-facebook-messenger-writer. You will add this node to your Bluemix palette. Open your Bluemix dashboard. Select your application. Find the Continuous Delivery section and click Edit Code. Stop your application. Edit the package.json file. Add the following line. You can insert it anywhere. If you add it to the end, be sure to remove the final comma. "node-red-contrib-facebook-messenger-writer": "0.x", Save your changes and deploy your application. Wait for your application to start. Go to the Node-RED flow editor. Drag and drop the following nodes onto the canvas. You’ll wire them to the Messenger Chat Listener group. A common function node A function facebook messenger node An output debug node Wire the nodes together by wiring the new function node to the facebook messenger node and then to the debug (msg.payload) node. Double-click the new function node, name it Set up response, and add the following code. Then, click Done. msg.facebookevent = msg.messagingEvent; msg.payload = 'Hello, this is all I say for now.'; return msg; Double-click the facebook messenger node, name it Messenger Writer, and enter the Access Token that you previously copied. Then, click Doneand deploy your flow. Go back to Facebook Messenger and try out your bot. Your Facebook application can now listen to messages and respond
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
FREE
Build a video captioning application
9 of 13
>The HTML that you reused is from a video captioning application. In this section, you will import the full application. Open a web page to the video captioning starter-kit: https://github.com/watson-developer-cloud/node-red-labs/tree/master/starter-kits/video_captioning.   Scroll down and click the link to the Translation JSON.   Click Raw. Then, select all of the code and copy the JSON content to your clipboard. The JSON content describes the flow.   In Node-RED, click Import > Clipboard.   Paste in your flow and click Import. The starter kit has three flows. The first flow looks similar to your /tele application. The second flow sets the context. The third flow takes in a URL for the video stream, converts the video into an audio stream, splices the audio, and passes each splice in turn to the Watson Speech to Text service. The flow uses the old language translation service, but you have bound in the new translator service.   Drag and drop an IBM_Watson language translator node onto the canvas.   Replace the old translation node with the new language translator node.   Double-click the language translator node. Configure the node for your translation by selecting the following information. Then, click Done. Mode: Translate Domains: News Target: Select a language   Deploy your application. Try out your application. Both the /tele and /tv should work.   Click Translation. Then, click Load for the video stream URL.   Wait for the video stream and translation to start.  

Summary

More Courses by this Instructor