Location FB Messenger Bot using Microsoft Bot Framework

Introduction

There are many ways to create a chatbot application for Facebook Messenger. We will look into creating a chatbot application for Facebook using Microsoft Bot Framework. The bot we create here will be able to get the current location of a device on Facebook messenger. I would like to provide this chatbot application as working sample with the explanation. It would be helpful for others who have a similar requirement.

Background

This sample is developed in Node JS. It will fetch the user’s location by asking the user to share his location from Facebook Messenger Bot. As a prerequisite, the following steps need to be done before the development of Bot.

• Register a bot in Microsoft bot framework portal. Note down the Microsoft App ID and Password generated while registering the bot. The password is shown only once during the bot registration. App Id and Password will be used later in the Node JS location bot sample.
• During bot registration, messaging endpoint server URL needs to be given where the bot sample is deployed. The bot can be deployed to any cloud server or enterprise server.
• Add the Facebook channel using add channel options in the newly created bot and follow the steps given by Microsoft for Facebook integration. You can see the step by step instruction for Fb channel registration in the link. Please check the Facebook Developer link to know how to integrate the Facebook Messenger channel with the Bot created using Microsoft.

Using the Code

Now you have the bot registered in Microsoft Bot portal. Let us see Node JS sample code to get the current location of a device. The root directory of LocationBot Node JS code consists of a package.json, server.js and core directory.

Core Directory is the Bot Builder SDK of Microsoft to build the Chat Bot application. The Bot Builder SDK for Node.js can be downloaded from the following link of Microsoft GitHub repository. The core directory of Node downloaded must be placed inside the LocationBot sample root folder.

Package.json file contains the list of required supporting libraries. The below-mentioned reference libraries can be downloaded by executing the command, "npm install" from the root directory of the LocationBot.

{
  "name": "Location Bot",
  "version": "1.0.0",
  "description": "Example to find out current location",
  "dependencies": {
    "async": "^1.5.2",
    "base64url": "^1.0.6",
    "chrono-node": "^1.2.5",
    "jsonwebtoken": "^7.1.9",
    "node-uuid": "^1.4.7",
    "request": "^2.78.0",
    "restify": "^4.2.0",
    "rsa-pem-from-mod-exp": "^0.8.4",
    "sprintf-js": "^1.0.3"
  },
  "devDependencies": {
    "mocha": "^2.4.5"
  }
}

Server.js is the main JS code which contains the logic running behind the bot. In our sample, the bot will fetch the current location from the user on Facebook Messenger.

Below code of server.js defines the required library instances and creates a server running on the port defined in the Env file or 3978.

var builder = require('./core/');
var restify = require('restify');

var server = restify.createServer();
server.listen(process.env.port || process.env.PORT || 3978, function () {
   console.log('%s listening to %s', server.name, server.url); 
});

Create the ChatConnector instance which accepts the Microsoft App ID and password as the environment parameters. Developer needs to assign the App ID and password in the below ChatConnector instance with the values created during bot registration in Microsoft portal.

Server Instance exposes the endpoint URL in the post method. Endpoint URL would be the server where the bot is deployed and appended with the string “/api/messages” mentioned in post method. This endpoint URL should be updated in the bot registered in the Microsoft portal. It actually connects the Chat Bot application with the Bot Connector. Bot Connector, in turn, connects the Bot with the different channels like Facebook, Skype, etc. The list of channels supported by Microsoft Bot is provided in the Bot portal.

// Create chat bot
var connector = new builder.ChatConnector({
    appId: process.env.MICROSOFT_APP_ID,
    appPassword: process.env.MICROSOFT_APP_PASSWORD
});

var bot = new builder.UniversalBot(connector);

server.post('/api/messages', connector.listen());

The actual call to get the latitude and longitude values are coded in a dialog method of bot instance. In our sample, we have created a dialog with the path “/fbmessenger_getlocation”. This dialog will set the content_type as location and pass it to the Facebook object. This shows the button in Messenger to get the location details from the user. On tap of the button, the user navigates to a screen where the map and current location details are shown based on location provider. Messenger gets the location details back from the screen on the entities array of the session object. Complete dialog method of getting latitude and longitude is given below:

bot.dialog('/', [
    function (session) {
        session.send("Hi. I can show you how to 
        fetch user's location on Facebook Messenger.");
        session.beginDialog('/fbmessenger_getlocation');
    }
]);

bot.dialog('/fbmessenger_getlocation', new builder.SimpleDialog((session, args) => {
    
    var initialRetryFlag = 3;
    var retryFlag = session.dialogData.hasOwnProperty('maxRetryFlag') 
    ? session.dialogData.maxRetryFlag : initialRetryFlag;
    var entityList = session.message.entities;

    if (session.dialogData.hasOwnProperty('maxRetryFlag') 
    && Array.isArray(entityList) && entityList.length 
    && entityList[0].geo) {

        var latit = roundNumber(entityList[0].geo.latitude, 3);
        var longit = roundNumber(entityList[0].geo.longitude, 3);

        // you got the latitude and longitude values. 
        // You can do the processing as per your requirement
        session.send("Latitude : "+latit);
        session.endDialog("Longitude : "+longit);
    }
    else if (retryFlag == 0) {
        // max retryFlag, quit
        session.endDialogWithResult({});
    }
    else {

        var replyMsg = new builder.Message(session).text
        ("Please share your location.");
        replyMsg.sourceEvent({
            facebook: {
                quick_replies:
                [{
                    content_type: "location"
                }]
            }
        });
        session.send(replyMsg);

        retryFlag -= 1;
        session.dialogData.maxRetryFlag = retryFlag;
    }
}));

The bot will start running in the port number 3978 when we execute the command, “node server”. We can go with Ngrok to test the bot locally. Ngrok exposes the local server port with open URL which can be used in public network.

The user can search the Bot in Facebook Messenger by using the Facebook page created for accessing the Bot. The user can text the messages like, “Hi” or “Hello” to the Bot searched in messenger which in turn replies for further interaction to get the location details. Before submitting it to Facebook for approval, the bot will be available for the Facebook user names added in the Facebook application in roles section as a tester. The bot will be open to public search once it is submitted and gets approved by Facebook.