Node-RED: basics to bots

In this course, you’ll learn how to use the Node-RED flow editor to wire application components together to make a working application. This course includes four hands-on labs that show you how to: Create a simple Node-RED boilerplate application in IBM Bluemix Build a web page and create a REST API in Node-RED Translate text, analyze tone, add audio, and send tweets from a Node-RED application by using IBM Watson cognitive services Create a Facebook Messenger bot and connect it to the Watson Conversation service By completing these labs, you’ll learn to work with the following Watson services in Node-RED and Bluemix applications: Speech to Text Language Translator Tone Analyzer Conversation Text to Speech Cloudant database You’ll also learn how to connect the Watson Conversation service to Facebook Messenger, use techniques that allow CSS and browser JavaScript reuse, and use media utilities to separate audio from a video stream for translation.

No programming experience is required for this course. You will work with basic HTML and JavaScript, but the course labs will provide that code. You’ll need the following accounts: IBM Bluemix account Twitter account Facebook account A browser that supports WebRTC This course includes four labs. Each lab has a short video introduction, the lab instructions, and lastly a solution video. Watch the solution videos if you have a problem completing the lab or want to check your work. The solution video shows the steps required to complete the lab. Important: You can use only 12 free services in IBM Bluemix. In this course, you will add 6 services. If you already have a Bluemix account, be sure you are not using more than 6 services. Related links Node-RED documentation Node-RED starter application information (Bluemix docs)

This lab shows you now to launch your own instance Node-RED by using the IBM Bluemix boilerplate. You can deploy Node-RED as a stand-alone application, or flow, but using the Bluemix platform as a service means that you don’t need to worry about installing Node-RED prerequisites. Prerequisites You need an IBM Bluemix account. Important: You can use only 12 free services in IBM Bluemix. In this course, you will need 6 services. If you already have a Bluemix account, be sure you are not using more than 6 services. In these labs, you use the following services: Language Translator Tone Analyzer Conversation Speech to Text Text to Speech Cloudant database

In this step, you will create an instance of Node-RED running on IBM Bluemix Log in to Bluemix. For the US, use https://console.ng.bluemix.net/. Then, click Catalog. Click Boilerplates. 2.From the boilerplates list, click Node-RED Starter. 3.Give your Node-RED starter application a unique name and host name. The host name does not need to be the same as the app name, but it can be the same. 4. Select Create. Wait for your new application to start.

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.  

This lab shows you how to build on your first Node-RED flow. You’ll create Node-RED flows that use: HTTP and HTML web pages JavaScript AJAX to consume a REST API The Watson Language Identification service Prerequisites Complete Lab 1. You should already have a running instance of Node-RED with the Watson Language Translator service connected.

In this section, you will create a basic “Hello World” web page by using Node-RED. Open the flow editor in your instance of Node-RED. 2.Create a new flow tab by clicking +. 3.Double-click the new tab and enter a name for the new flow tab. Then click Done. 4.Drag and drop an input http node onto the canvas. Use the filter nodes search field to find the nodes. 5.Drag and drop an output http response node onto the canvas. 6.Drag and drop a template node onto the canvas between the http and http response nodes. 7.Wire the three nodes together. 8.Double-click the template node to edit it. Enter the following simple HTML code: <html>       <head>             <title>Hello World</title>       </head>       <body>             <div>Hello to Watson on Node-RED</div>       </body> </html> 9.Click Done to save your changes. 10.Double-click the input http node. Edit it to create an HTTP route to your web page by entering /<some string> in the URL field. Enter a name such as HTTP Hello World. 11.Click Done and deploy your changes. 12.Open a new browser tab and navigate to your new web page. The web address will be based on your Node-RED web address that is appended with the URL of your web page. You should see your “Hello World” web page.

In this section, you’ll modify your “Hello World” web page to include a text entry field and JavaScript. Open the flow editor to your instance of Node-RED. Double-click the template node and add the following code to the HTML: <html> <head> <title>Hello World</title> </head> <body> <div>Hello to Watson on Node-RED</div> <div id="id_hello"> <span>Hello</span> &nbsp; <span id="id_nameout"></span> </div> <form id="id_form"> <div> <span> What is your name: </span> <span> <input type="text" name="name" id="id_name"/> </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(); }); function setupPage(){ $('#id_hello').hide(); $('#id_form').submit(onSubmitClicked); enterbutton(); } function onSubmitClicked(event){ $('#id_nameout').text($('#id_name').val()); $('#id_hello').show(); $('#id_form').hide(); event.preventDefault(); } function enterbutton(){ $(function() { $("form input").keypress(function (e) { if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) { $('#id_enter').click(); return false; } else { return true; } }); }); } </script> </body> </html> Click Done and deploy your changes. Try out your JavaScript-enabled web page. Enter your name and click Enter.  

In this section, you will modify the REST API to invoke the Watson Language Translator service’s Language Identification method. Open the flow editor in your instance of Node-RED. Delete the connections between the last three nodes by clicking the connectors and pressing Delete on your keyboard. Drag and drop a function node onto the canvas. Drag and drop the language identify node onto the canvas. Wire the nodes together. Double-click the new function node and enter code that takes the input from the REST call and makes it available for the Language Identify service to use. Enter this information and then click Done: Name: Extract Input Function: msg.payload = msg.req.body.msgdata; return msg; Double-click the second function node and add code that will send the response from the language identification service back to the client that is invoking the service. Enter this information and then click Done: Name: Process Output Function:msg.payload = {}; msg.payload.identifyresponse = "I don’t know"; if (msg.lang && msg.lang.language){ msg.payload.identifyresponse = msg.lang.language; Deploy your changes. Test your application by entering text other than English, such as Spanish text. Try other languages. You now have a REST API that invokes the Watson Translator Language Identification method and an HTTP web application that invokes this API.

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.

The applications that you’ll be creating use the Speech to Text, Tone Analyzer, and Text to Speech Watson services. In this section, you’ll connect those services to your Node-RED Instance. Go to your Bluemix page and click Create Service. Select the Speech to Text service. Connect the service to your application. Do not restage your application. Repeat the process to create the Tone Analyzer service. Connect the service to your application. Do not restage the application. Repeat the process to create and connect the Text to Speech service. After you add all three services, restage your application. Wait for your application to restart.  

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.  

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.

Focus on the Config group of nodes. The reset context input forces the Conversation context to reset, which restarts the conversation from the beginning. Double-click the function node named add context. Edit the function to include the Twitter handle that you want the information to flow to: handle: "<your_twitter_handle>", Click Done. Select the link node. Note that it flows directly to the conversation node. In the conversation group of nodes, double-click the twitter (Tweet) node. Click the Pencil icon. Then, click Click here to authenticate. If prompted, log in to Twitter. Then, click Authorize App. Wait for the authorization to complete. Go back to your Node-RED flow editor. Click Add. Then, click Done. Click Deploy to deploy your modified flow. Your application is now ready. Trigger a reset context. Trigger a set user details. Using either the mic or the sample text in inject nodes, interact with your application so that your application sends a tweet. Check Twitter for the tweet.  

You should now have two running applications that use multiple Watson services: Speech to Text Translation Tone Analyzer Conversation Text to Speech You should also be able to send tweets to your Twitter account.

In this lab, you’ll create advanced Node-RED flows that: Connect the Watson Conversation service to Facebook Messenger Use techniques that allow CSS and browser JavaScript reuse Use media utilities to separate audio from a video stream for translation Prerequisites Complete all previous labs. You should already have a running instance of Node-RED and the Watson Language Translator, Speech to Text, Text to Speech, and Conversation services connected.

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

You will now be moving onto a new advanced topic: writing HTML web pages that use Git repositories that allow you to reuse HTML, CSS, and browser-side JavaScript across Node-RED applications. Open the following web page: https://github.com/ibm-early-programs/watson-tv. This is a web page (HTML,CSS, and JavaScript) repository (repo). Click tv.html.   Click Raw and copy the URL in the browser address bar. Go to your Node-RED flow editor. Create a new tab and name the new tab something like Watson TV.   Drag and drop the following nodes onto the canvas: Input http node Function http request node Function node Output http response node   Wire the nodes together.   Double-click the input http node. Configure it as a GET method on the URL /tele. Then, click Done.   Double-click the http request node. Enter the raw URL for the tv.html that you copied earlier. Set the Return field to a string. Then, click Done.   Double-click the function node and set the content-type in the header to ‘text/html‘.   Click Done and then deploy your application. Open a browser tab on your new page. You now know how to add intricate HTML, CSS, and JavaScript into your Node-RED web pages.

>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 You should now have your Watson Conversation service implemented as a Facebook Messenger bot. You have also learned how to create compelling web applications in Node-RED by using Git-hosted repositories to hold your HTML, CSS, and browser-side JavaScript.

You can find more information about Node-RED on IBM developerWorks Open, developerWorks recipes, Architecture center, and articles and tutorials on IBM developerWorks. Thank you for participating in this developerWorks course! You have completed the material.

You should now understand how to use IBM Watson service and the Node-RED flow editor to wire application components together to make cognitive applications. In the labs, you learned how to: Create a simple Node-RED boilerplate application in IBM Bluemix Build a web page and create a REST API in Node-RED Add community nodes and Watson services to a Node-RED application Translate text, analyze tone, add audio, and send tweets from a Node-RED application by using IBM Watson cognitive services Create a Facebook Messenger bot and connect it to the Watson Conversation service You also learned how to work with several IBM Watson services such as Speech to Text, Translation, Tone Analyzer, and Conversation. Lastly, you learned how to connect the Watson Conversation service to Facebook Messenger and create dynamic web pages by adding JavaScript and media utilities to separate audio from a video stream for translation.