Day 13: AI ChatBot for Messenger

#100DaysOfCode

Project: It’s Friday so lets make something fun! Create a ChatBot for messenger with a simple AI logic to respond to messages. The messenger bot will be created using Node then deployed and hosted on Heroku.

All the code for this project can be found on my github

You can message the bot I created here, do drop by and say hello :)

Step 1: Install Node and create an app

Install Node that comes packaged with npm. Then create a directory for your app and configure it as follows:

$ mkdir Chatbot 
$ cd Chatbot/
$ npm init -> Config the app using the wizard that shows up

Then install the node packages needed for this project using the following command:

$ npm install express body-parser request — save

Step 2: Configure the app

Above setup cretaes a package.json file which you need to configure by adding “start” field in scripts section which tells how to run your app.

{
“name”: “chatbot”,
“version”: “1.0.0”,
“description”: “Facebook AI ChatBot”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1",
“start”: “node index.js”
},
“author”: “Harini Janakiraman”,
“license”: “ISC”,
“dependencies”: {
“body-parser”: “^1.15.1”,
“express”: “^4.13.4”,
“request”: “^2.72.0”
}
}

Then in your project’s root directory create an “index.js” file as follows:

Note: In the code above update “fb_ai_chatbox” with any verify token of your choice, which will be later used in setup.

Step 3: Create git repo for the app

We dont want “nodes_module” in our git repo so create a “.gitignore” file in your root directory with this single line.

nodes_module/

Then initiatize your repo and commit files (assuming you already have git installed).

$ git init 
$ git add .
$ git commit -m ‘Chatbot for Messenger’

Step 4: Setup Heroku for deploying the app

Create an account in Heroku if you dont have one and install Heroku Toolbelt from their site. Then login to the tool and publish the app to server as follows:

$ heroku login 
$ heroku create
$ git push heroku master

This creates our web app, deploys it to server and gives out an URL for example: https://enigmatic-reaches-XXXXX.herokuapp.com/. If you visit the URL you will see “This is TestBot Server” to confirm it works.

Step 5: Create Facebook Page, App and Configure it

Create a facebook page of your choice and a facebook app from the developers portal. These steps are straight forward and self explanatory so I am going to skip that. Once you are done follow these steps to configure it.

a. Go to your app dashboard and click “+Add Product” then click “Get Started” on the Messenger option that shows.

b. Then select your page from the drop down in “Token Generation” section to generate a Page Access Token.

c. Next, select “Setup Webhooks” and past the callback URL generated by heroku with “webhook” appended to it, for example:

https://enigmatic-reaches-XXXXX.herokuapp.com/webhook

Step 6: Start the subscription

Go to terminal and start the subscription to page events with your custom webhook using curl. Replace “PAGE_ACCESS_TOKEN” with the generated one from Step 5.b

$ curl -X POST “https://graph.facebook.com/v2.6/me/subscribed_apps?access_token=PAGE_ACCESS_TOKEN"

Then access your app’s setting in Heroku and add a config variable for “PAGE_ACCESS_TOKEN” mapped to the same token generated in 5.b

Step 7: Create the Bot’s AI logic

Finally to the fun part, create the AI logic that you need for your bot. For this project, we are going to create a simple logic which has a GET handler for receiving messages and simply echoes the message back to the sender using sendMessage function. This should be added to your index.js

Push these changes to heroku using git commands.

$ git add . 
$ git commit -m ‘ChatBot that Echoes back’
$ git push heroku master

You are now all set, if you go to your facebook page and message something, the ChatBot should echo it back.

Note only admin of the page will receive the bot response now as the app is in dev phase, but they need to be officially verified in order to be publicly accessible. You can do this in App Review section of app dashboard.

Go and try it out my ChatBot test page and drop in to say “Hello” if you made it all the way here :)

Day 13 of #100DaysOfCode DONE

If you enjoyed this, please click 👏 so that others can enjoy it as well. Follow me on Twitter @HariniLabs to get the latest updates or just to say Hi :)

PS: I curate a bi-weekly #WomenInTech newsletter for a dose of inspiration from the world of tech and yes men can signup too! Get it here :)