Introduction to Facebook Messenger Bots - @DevC-Nairobi

0-Messenger-Bot.md

Building a Basic Messenger Bot with Node.js

For this tutorial, you need just basic understanding of JavaScript. The aim of this tutorial is to show you how easy it is to build messenger bots. When you scroll down this page, you will find out the actual lines of code that we will write are just about 19 LOC.

Prerequisites

• Setup Facebook Developer Account - https://developers.facebook.com/
• Bookmark the developer reference page
• Setup Heroku Account
• Create your page on http://facebook.com
• Create your bot on https://developers.facebook.com

Rationale for Hosting on Heroku

Heroku makes it easy for you to deploy and test your bot, especially if you've connected your Heroku app with your Github repo. Read on how to do that here

The other option is using ngrok

Step by Step Setup Instructions

1. Set up your Facebook Developer Account

2. Create your Bot as an app (on Developers page)

3. Create a page for your Bot

4. Generate the page token for your page.

This will be stored in the environment variable PAGE_TOKEN

5. Create your Github repo, choose the option for README so that your repo will be initialized with a master branch. This will come in handy in steps 7 and 8.

6. On Heroku, Create your app

7. Link your Heroku app with your Github repo.

• On your app's menu, go to Deploy

• On Deploy Method, click on Github. You will be asked to authorized, do that.

• If all is okay, you should see something similar to this:

  

8. Enable automatic deployment on Heroku

Click on the button and you should have something like this:

9. Set your environment variables on Heroku.

They are referred to as Config Vars on Heroku. Click on Reveal Config Vars under Settings, and set them as follows:

• Go back to your app's dashboard on Facebook Developers page. Under the Generate Token section, choose your Bot's page and a token should be generated.

• Add PAGE_TOKEN (as generated from Facebook) and VERIFY_TOKEN (anything of your choice. Prefererrably a hashed string. For the purposes of demostration, I used a simple word "verified". But this should not be used in production for security purposes.)

10. git clone your repo and update it

• Clone your repo

  git clone <repo-url>
  

• Run npm init to generate the package.json file
• Update your package.json file to include the start script, see in 2-package.json.md file below
• Add app.js file as is below
• Stage and commit your changes, then push:

  git add --all
  git commit -m "initial setup"
  git push origin master
  

  If all is well, you should be able to see under the Activity tab on Heroku that your changes have been deployed.

11. Test that you app is running correctly When you go to <app-id>.heroku.com, you should see a message similar to the following. Don't panic, everything is okay :)

Error, wrong validation token

12. On Facebook Developer app's dashboard, setup your webhooks

• Set-up the webhook. For the callback, put your Heroku app URL, i.e. https://<app-name>.heroku.com
• For the verification token, use the VERIFY_TOKEN you set up earlier on Heroku
• The last bit that is easy to forget is subscribing your bot to your page

You can now go to your Messenger app on your phone or https://messenger.com, search for your page by name and start chatting to your bot. The bot should be able to reply back "This is me :)"

2-package.json.md

package.json will be autogenerated when you run:

npm init

However, make sure to add the start script instructions on the package.json

 "scripts": {
        "start": "node app.js",
    },

See sample file here

3-app.js

const http = require('http');
const Bot = require('messenger-bot');

let bot = new Bot({
    token: process.env.PAGE_TOKEN || '',
    verify: process.env.VERIFY_TOKEN || '',
});

bot.on('error', (err) => {
    console.log(err.message)
});

bot.on('message', (payload, reply) => {
    let text = payload.message.text;

    reply({ text: 'This is me :)' }, function(err) {
        if (err) console.log(err);
    });
});

let port = process.env.PORT || 3000;
http.createServer(bot.middleware()).listen(port);

4-references.md

References

Some tutotials around the world that you might want to check out:

• Facebot - a Messenger bot that teaches you how to build Messenger bots
• Adrian: Develop your first Facebook messenger bot in PHP
• Sum Wu: How to Create a Facebook Messenger Bot