ProfNandaa
3/23/2017 - 10:44 AM

Introduction to Facebook Messenger Bots - @DevC-Nairobi

Introduction to Facebook Messenger Bots - @DevC-Nairobi

4-references.md
content_copyfile_download
  • Rendered
  • Source

References

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

3-app.js
content_copyfile_download
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);
2-package.json.md
content_copyfile_download
  • Rendered
  • Source

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

0-Messenger-Bot.md
content_copyfile_download
  • Rendered
  • Source

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

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 :)"