Lab 4: create a Facebook Messenger bot and connect it to the Watson Conversation service

Size: px

Start display at page:

Download "Lab 4: create a Facebook Messenger bot and connect it to the Watson Conversation service"

Edward Benson
6 years ago
Views:

1 Lab 4: create a Facebook Messenger bot and connect it to the Watson Conversation service

2 Overview 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. 2 Copyright IBM Corporation All rights reserved.

3 Step 1. Obtain Facebook Messenger credentials 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 1. 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. 2. Open the web page 3. 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. 4. Click the Facebook App. 5. Log in to Facebook. 6. If you are not registered, register as a Facebook Developer. 3 Copyright IBM Corporation All rights reserved.

4 7. 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. 8. On the Create a New App ID form, enter a display name for your application and select a category. Then, click Create App ID. 9. Enter the obfuscated text as part of the security check. 10. 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. 4 Copyright IBM Corporation All rights reserved.

6 13. Enter some text for the About section for the page. Then, click Save Info. 14. Optional: Add a profile picture. If you don't want to add a picture or other information for your, click Skip in each tab. On the last tab, click Save. You should now have a new page. Note the Message link. This is where you will see your bot conversation, which you will be coding soon. 15. Go back to the Token Generation section on the Developers page. 6 Copyright IBM Corporation All rights reserved.

7 16. Click Select a Page. You might need to refresh the page to see your new page in the list. 17. Click Continue As <your_user_name>. 18. Click OK to grant access permissions to your page. 7 Copyright IBM Corporation All rights reserved.

8 19. Copy the Page Access Token so that you can enter it later. 20. Be sure you have a copy both the Page Access Token and the Verify Token that you created previously. 8 Copyright IBM Corporation All rights reserved.

10 Step 2. Create Node-RED webhooks You are now ready to create the webhooks that will allow your Node-RED applications to listen into the chats on Facebook Messenger. 1. Find the Webhooks section on the Facebook Developer page. 2. Click Setup Webhooks. 3. 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. 10 Copyright IBM Corporation All rights reserved.

11 You will see a callback verification error. This is because you haven t yet created your /mybot callback. 4. Go to your node-red instance in the flow editor. 5. Create a new tab and name it something like Messenger Webhooks. 11 Copyright IBM Corporation All rights reserved.

6. Drag and drop the following nodes onto the canvas: Input http node Output http response node Function node Output debug node 7. Wire the nodes together: wire the debug node (msg.

12 6. Drag and drop the following nodes onto the canvas: Input http node Output http response node Function node Output debug node 7. 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 node. 8. 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. 12 Copyright IBM Corporation All rights reserved.

13 9. Double-click the function node. 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; 10. Click Done and deploy your flow. 11. Go back to the Facebook developers page and click Verify and Save. 13 Copyright IBM Corporation All rights reserved.

14 The webhook should now be registered. 12. Click Select a Page. Then, click Subscribe. Your application should now be subscribed to the Messenger events on your new page. 14 Copyright IBM Corporation All rights reserved.

Step 3. Create the Node-RED Messenger listener You've created the Node-RED webhooks for Facebook Messenger. Next, you'll create the flow that will listen to message texts. 1.

15 Step 3. Create the Node-RED Messenger listener You've created the Node-RED webhooks for Facebook Messenger. Next, you'll create the flow that will listen to message texts. 1. 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 2. Double-click the function node and set Outputs to 2. Name it Look for Messages. Then, click Done. 3. 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 function node to both the debug node (msg.payload) and the output http response node. 15 Copyright IBM Corporation All rights reserved.

16 4. 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. 5. 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]); } } } 16 Copyright IBM Corporation All rights reserved.

17 } } return [null,msg]; 6. Click Done. 7. Double-click the second debug node (msg.payload). In the Output field, enter msg.messagingevent, name it something like MessengingEvent from Messenger and then click Done. 8. Deploy your application. Your flow should now look like this: 17 Copyright IBM Corporation All rights reserved.

9. Go back to your Facebook page. 10. Click Message and enter some text to test the application.

Go to the Node-RED Library page at http://flows.nodered.org. Search for Messenger. 2.

21 Step 4. Create a Node-RED Messenger writer 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. 1. Go to the Node-RED Library page at Search for Messenger. 2. Select the node named node-red-contrib-facebook-messenger-writer. You will add this node to your Bluemix palette. 3. Open your Bluemix dashboard. 4. Select your application. 21 Copyright IBM Corporation All rights reserved.

Save your changes and deploy your application. Wait for your application to start. 10. Go to the Node-RED flow editor.

22 5. Find the Continuous Delivery section and click Edit Code. 6. Stop your application. 7. Edit the package.json file. 8. 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", 9. Save your changes and deploy your application. Wait for your application to start. 10. 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 22 Copyright IBM Corporation All rights reserved.

and then to the debug (msg.payload) node. 12.

23 A function facebook messenger node An output debug node 11. Wire the nodes together by wiring the new function node to the facebook messenger node and then to the debug (msg.payload) node. 12. Double-click the new function node, name it Set up response, and add the following code. Then, click Done. 23 Copyright IBM Corporation All rights reserved.

24 msg.facebookevent = msg.messagingevent; msg.payload = 'Hello, this is all I say for now.'; return msg; 13. Double-click the facebook messenger node, name it Messenger Writer, and enter the Access Token that you previously copied. Then, click Done and deploy your flow. 14. Go back to Facebook Messenger and try out your bot. Your Facebook application can now listen to messages and respond. 24 Copyright IBM Corporation All rights reserved.

working components to connect the Watson Conversation service to Facebook Messenger.

25 Step 5. Connect the Watson Conversation service to the Messenger bot You now have all the working components to connect the Watson Conversation service to Facebook Messenger. 1. 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. 2. Drag and drop a new function node and an output link node onto the canvas. 3. Wire the nodes together. 25 Copyright IBM Corporation All rights reserved.

26 4. 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; 5. Click Done. 6. 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. 7. Click Done. 8. Click the OK Watson tab. Drag and drop a function node and an output link node onto the canvas. 9. Double-click the new function node. Set the Outputs to 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) { } else { } 11. Click Done. return [msg,msg]; return [msg, null]; 26 Copyright IBM Corporation All rights reserved.

27 12. Double-click the new link out node and name it Conversation Out for Messenger. Then, click Done. 13. Wire your nodes together, breaking the previous link to the left of the text to speech node. 14. Go to the Messenger tab and drag and drop an input link node onto the canvas. 15. 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. 27 Copyright IBM Corporation All rights reserved.

17. Double-click the Set up response function node. Remove the line that was hardcoding the response: msg.facebookevent = msg.messagagingevent; 18. Click Done and deploy your flow. 19.

29 17. Double-click the Set up response function node. Remove the line that was hardcoding the response: msg.facebookevent = msg.messagagingevent; 18. Click Done and deploy your flow. 19. Go to Facebook Messenger and try out your bot. You are now using the Watson Conversation service to drive your Facebook Messenger bot. 29 Copyright IBM Corporation All rights reserved.

30 Step 6. Build a Node-RED application that can reuse CSS and browser-side JavaScript 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. 1. Open the following web page: This is a web page (HTML,CSS, and JavaScript) repository (repo). 2. Click tv.html. 3. Click Raw and copy the URL in the browser address bar. 4. Go to your Node-RED flow editor. Create a new tab and name the new tab something like Watson TV. 30 Copyright IBM Corporation All rights reserved.

31 5. Drag and drop the following nodes onto the canvas: Input http node Function http request node Function node Output http response node 15. Wire the nodes together. 16. Double-click the input http node. Configure it as a GET method on the URL /tele. Then, click Done. 31 Copyright IBM Corporation All rights reserved.

32 17. 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. 18. Double-click the function node and set the content-type in the header to 'text/html'. 19. Click Done and then deploy your application. 20. Open a browser tab on your new page. 32 Copyright IBM Corporation All rights reserved.

Step 7. Build a video captioning application The HTML that you reused is from a video captioning application. In this section, you will import the full application. 1.

34 Step 7. Build a video captioning application The HTML that you reused is from a video captioning application. In this section, you will import the full application. 1. Open a web page to the video captioning starter-kit: 2. Scroll down and click the link to the Translation JSON. 3. Click Raw. Then, select all of the code and copy the JSON content to your clipboard. The JSON content describes the flow. 4. In Node-RED, click Import > Clipboard. 34 Copyright IBM Corporation All rights reserved.

The first flow looks similar to your /tele

The third flow takes in a URL for the video

splices the audio, and passes each splice in turn

35 5. 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. 35 Copyright IBM Corporation All rights reserved.

The flow uses the old language translation service, but you have bound in the new

Drag and drop an IBM_Watson language translator node onto the canvas. 7.

Double-click the language translator node.

36 The flow uses the old language translation service, but you have bound in the new translator service. 6. Drag and drop an IBM_Watson language translator node onto the canvas. 7. Replace the old translation node with the new language translator node. 8. 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 36 Copyright IBM Corporation All rights reserved.

37 9. Deploy your application. 10. Try out your application. Both the /tele and /tv should work. 11. Click Translation. Then, click Load for the video stream URL. 12. Wait for the video stream and translation to start. 37 Copyright IBM Corporation All rights reserved.

38 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 Githosted repositories to hold your HTML, CSS, and browser-side JavaScript. 38 Copyright IBM Corporation All rights reserved.

Using Dropbox with Node-RED

Using Dropbox with Node-RED Overview Often when using Platform services, you need to work with files for example reading in a dialog xml file for Watson Dialog or feeding training images to Watson Visual Recognition. While you can