Chat Extensions (Tasks)

This is the folder for Tasks, a bot that demonstrates Chat Extensions on the Messenger Platform.

Everything we used to make this Bot

Technologies used

ECMAScript 7 (“ES7” / JavaScript)

ECMAScript™ is the standard behind JavaScript. It has had a number of very useful additions over the past several years, modernizing the syntax and providing new capabilities.

Learn More

Babel

Not all browsers are able to run ES7. We use Babel to generate earlier versions of JavaScript from ES7, so that it will run on browsers that haven’t yet implemented the newer standard.

Learn More

Webpack

Webpack is the de facto module bundler for JavaScript development. It is highly configurable and extensible, and can even compile your other assets like images and stylesheets. This repository keeps things pretty simple as a jumping off point for your projects.

Learn More

Node.js

Node enables us to use JavaScript outside of a browser and directly on our machines to perform the logic necessary to determine what messages to send to the end user and when.

Learn More

Express.js

Express is a helpful framework built around Node.js for performing actions as a web server. e.g, Taking web page requests, responding and serving images to users.

Learn More

Embedded JavaScript Templates (EJS)

EJS is a very simple templating language. This helps us create HTML for the pages we show in a programmatic way, and inject values into a web page. Here we use it to decide whether to show the Preferences view, the Product view or the Error page, and to point the WebView at the correct list for the viewer.

Learn More

React.js

An amazing framework that allows us to create highly interactive user interfaces. Used heavily in this example to create the Preferences view.

Learn More

Socket.IO

Simplifies real-time interactions between users and the server.

Learn More

Knex.js

Knex.js is a SQL query builder for Node.js that is compatible with Postgres, MSSQL, MySQL, MariaDB, SQLite3, and Oracle.

Learn More

WeUI

You can get started quickly with mobile-friendly web UI by using a library of components like the one from WeUI.

Setup

This demo bot is immediately runnable on Heroku!

Note: It is not recommended to run this bot locally on your machine. It will require extra configuration to make your local machine accessible by external Internet services. Without the extra configuration, Facebook Messenger will not be able to reach your bot.

Prerequisites

• Node v7.4 or later (https://nodejs.org/en/download/)
• Yarn (https://yarnpkg.com/en/)
• Heroku CLI (https://devcenter.heroku.com/articles/heroku-cli)
• Facebook developers account (https://developers.facebook.com )
• Postgres (https://www.postgresql.org)

Run this as your very own Messenger bot on heroku

(Ensure the above prerequisites are installed on your machine)

1. Setup your Bot on Heroku

Run the following

$ cd /path/to/fb-chatbots

$ heroku create

# HEROKU_APPID is given to you from the above command. Run `heroku apps` to list them all.
$ heroku addons:create heroku-postgresql --app {HEROKU_APPID}

# URL_TO_HEROKU_APP is the URL given to you from the above command
$ heroku config:set APP_URL='https://{URL_TO_HEROKU_APP}'

# Note the token can be any word chosen by you and is used to by Facebook to check that they have the correct server for your Messenger Bot
$ heroku config:set WEBHOOK_TOKEN='random_demo_token_123'

# This pushes just the chat-extensions folder to Heroku
$ git subtree push --prefix chat-extensions heroku master

It should look like this in your terminal

Other useful commands for pushing the code to Heroku

To force push to Heroku, useful for moving your changes from your machine to Heroku, use this command:

• git push --force heroku 'git subtree split --prefix chat-extensions HEAD':master

2. Setup your Bot on Facebook

I. Create a Facebook App

1. Navigate here https://developers.facebook.com/apps
2. Add a new app with the category Apps for Messenger

II. Setup Webhooks

These are the actions we want to sign up to receive from users talking to us in Messenger.

1. Go to the Messenger settings for your app and select Setup Webhook
2. Insert https://{your_heroku_app_url}/webhook into the Callback URL field
3. Insert the value you used for WEBHOOK_TOKEN into the Verify Token field
4. Select the Subscription Fields
   1. messages
   2. messaging_postbacks
5. Select Verify and Save
6. Select the Facebook Page that should subscribe to the Webhooks in the Webhooks section of Messenger Settings

III. Get a Page Access Token

1. Select or Create a page and get the page access token
2. Go back to your terminal and inside the repository set the PAGE_ACCESS_TOKEN config on Heroku.

$ heroku config:set PAGE_ACCESS_TOKEN='your_page_access_token'

3. Now you should be able to go to your page and message your bot!

Note: you will need to add testers in the development panel or have the app approved by Facebook for others to see it.

Pushing changes to Heroku

Because all the building is done locally, make sure to run:

$ yarn build

before you commit and push your changes.

Running locally

You may want to run this bot on a platform outside of Heroku or simply have it available locally for testing purposes.

$ cd path/to/repo/chat-extensions
$ createdb list_bot_dev
$ createdb list_bot_test
$ yarn install
$ knex migrate:latest
$ knex seed:run
$ yarn build:watch

# In another tab

$ export DEMO=true
$ export LOCAL=true
$ yarn start

Running tests & linters

$ cd path/to/repo/chat-extensions
$ yarn quality