Monday, March 6, 2017

How to create facebook messenger bot part 1

Facebook gives the large platform for the messenger. In this tutorial series, we are going to create our own facebook messenger bot.  Please refer facebook developer messenger platform here for the documentation. We are going to create simple messenger bot for shopping.



Step 1: The first thing is to create a facebook app and page if you don't have. so let's create facebook app and page.


Click to create the app and fill the pop up modal and create app id. This will create the page with app id number. Here click +add product to add messenger.


Now create facebook page of your own which is the identity of your bot so, include the appropriate name and image for the page. 

Step 2: Setup Webhook

In order to get the update or handle and process the messages of conversation between bot and the client, we required to setup callback Url to process messages. With the live server its fine but we have to develop on the local server, as our local server is not a live one so we have to tunnel our local server to live one. For this, we are using ngrok. Please refer my youtube video to set up ngrok.


Create bot application in your editor, run the application and tunnel it using ngrok. The tunneled url will be similar like this http://849ac456.ngrok.io/. 



1.Generate a page access token: Use the page created to generate page access token.


2.Setup Webhook(Callback URL):


Here callback ULR is where we process post and get request. we need to verify this token later. Subscription field messages is subscribed to get the update when the message has been sent to your page and messaging_postback is for postback replies. In order to verify we need to write verify code in the get request of callback URL.

class MessengerController {

   def verifyAndProcess(){
        if (request.getMethod() == 'GET'){
            if (request.getParameter('hub.mode') == 'subscribe' &&
                    request.getParameter('hub.verify_token') == "bot") {
                log.info("Validating webhook");
                response.setStatus(200)
                 render(request.getParameter('hub.challenge'))
            } else {
                log.error("Failed validation. Make sure the validation tokens match.")
                response.setStatus(403)
                render(false)
            }
        }else {
            processMessages() //for processing messages
        }

    }
}
Finally, click verify and save. Here I am using grails application if you are using servlet then you have to verify it in doGet method and process post request message in doPost method.

Now you have to subscribe your page.


Step 3: Create link to messenger
In order to chat with a bot, we have to simply provide the link to the messenger for this use following view.
<div class="jumbotron">
<div class="container">
<div class="page-header">
<h1>
Messenger Chat bot</h1>
</div>
<div class="fb-messengermessageus" color="blue" messenger_app_id="your app-id" page_id="your PAGE_ID" size="standard">
</div>
</div>
</div>
<script>

    window.fbAsyncInit = function() {
        FB.init({
            appId: "1201209609977381", //your app-id
            xfbml: true,
            version: "v2.6"
        });

    };

    (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) { return; }
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

</script>





If you type some text in messenger after clicking message us button you  can see post response in ngrok history console as bellow.





In the next tutorial, we are going to learn how to handle this JSON format and make a bot to reply.


Share:

0 comments: