# Messenger Bottender

Assuming that you have set up a working [node](https://nodejs.org/) environment preferably with [babel](https://babeljs.io/)(well, if you are a newbie to node/babel, check [this](https://hackmd.io/R_th1P60SMqko7T_EyQPtQ?view)) and installed the proper packages such as [Bottender](https://github.com/Yoctol/bottender), in order to create a chatbot and connect it to Facebook's [Messenger](https://messenger.com), follow the steps below:

## Setting up local server

import { MessengerBot } from 'bottender'
import { createServer } from 'bottender/express'

// Basic config to use later
const PORT         = 80,
      VERIFY_TOKEN = '<<Leave this blank for now>>',
      ACCESS_TOKEN = '<<Leave this blank for now>>',
      APP_SECRET   = '<<Leave this blank for now>>'
      
// Bot initialization
const bot = new MessengerBot({
    accessToken: ACCESS_TOKEN,
    appSecret: APP_SECRET
})

// Bot intents
bot.onEvent(async context => {
  // THIS IS WHERE U ADD ALL YOUR INTENTS
  await context.sendText('Hello World')
})

// Local server
const server = createServer(bot, {
  verifyToken: VERIFY_TOKEN
})

// Start the server
server.listen(PORT, () => {
  console.log(`server is running on port ${PORT}.`)
})

After setting the server up, move on to the next steps. I will come back and finish this up later. (Don't worry about the VERIFY_TOKEN, ACCESS_TOKEN, and APP_SECRET yet, just leave them as blank strings. )

## Other Requirements

Facebook chatbots are linked directly to Facebook pages. Therefore, before getting a chatbot, you need a Facebook page.

### Create Page

Click on `Page` and follow the guides until you get a working page.


### Facebook Developer App

1. Login to [facebook for developers](https://developers.facebook.com/) with your Facebook account.
2. Once logged in, under `My Apps`, press `Add New App`.
3. Fill in a name you want (it doesn't really matter), click `Create App ID`, and skip the `Select a Scenario` thing by clicking `skip` on the bottom right corner.
4. In the App, under `Settings > Basic`, copy `App Secret` and paste it to **`APP_SECRET`** in your code.

### Linking App to Messenger

I will give a general guide below. Check out the [official docs](https://developers.facebook.com/docs/messenger-platform/getting-started/app-setup) if you're still confused.

1. Once you have your Facebook app up, on the left-hand panel, click on the `+` sign next to `PRODUCTS`, and click `Set Up` for Messenger.


2. Within `PRODUCTS > Messenger > Settings`, go to the `Access Token` section and select your page in the `Select a Page` dropdown. Facebook will then ask you to edit permission, so click on the blue `Edit Permission` button and give the app access to the page you created.
3. Once that's done, copy the `Page Access Token` and place it into **`ACCESS_TOKEN`** in the code you wrote in the first part.
4. In the [official docs](https://developers.facebook.com/docs/messenger-platform/getting-started/app-setup) the next step is to set up the `Webhooks` section. However, that requires you to have a *`public url`*, which means you'll have to port forward your localhost to the outside world which will take up a lot of work and effort...

Luckily, with the help of [ngrok](https://ngrok.com/), you can create a tunnel between your `localhost` and the outside world, saving you the time of communicating with your router.

### Ngrok Setup

1. Navigate to the offical site for [ngrok](https://ngrok.com/)
2. Sign up/login to the website (it's safe don't worry)
3. Follow the `Setup & Installation` and get ngrok ready
4. run `./ngrok http 80` so the outer world can connect to your `localhost`

### Facebook App Webhooks Setup

Go back to your Facebook App page and under `PRODUCTS > Messenger > Settings`:
1. In the `Webhooks` section, click `Subscribe To Events`
* For `Callback URL`, fill in the link ngrok provided (`https://<something>.ngrok.io`). Note: It's "https". Don't copy the "http" one.
* Fill in whatever you want for `Verify Token`, and copy that token to replace **`VERIFY_TOKEN`** in the code you wrote
* Check everything except `message_deliveries`, `message_reads` and `message_echoes` as they may cause endless self-responding texts
2. Click `Verify and Save`
3. After finish loading, select your page under `Select a page to subscribe your webhook to the page events` and click `subscribe`

If you are annoyed by the facebook GUI or constantly changing your webhook url while developing, you can also try out the bottender cli, create a config named `bottender.config.js` in your project root dir as following format:

module.exports = {
  messenger: {
    accessToken: 'YOUR_ACCESS_TOKEN',
    verifyToken: 'YOUR_VERIFY_TOKEN',
    appId: 'YOUR_APP_ID',
    appSecret: 'YOUR_APP_SECRET',
  },
};

And key in the following cli command (btd is an alias of bottender):

$npx btd messenger webhook set -w https://<something>.ngrok.io

And bottender will show your app and page info and make sure you are about to subscribe your page and the bot you are setting. If every thing seems right, input `y` and sit back, bottender will set everything up for you!

## Start Talking to Your Chatbot

Go back to your Facebook page, under `Settings` on the top right corner, `Messenger Platform > Your Messenger Link`, navigate to the link and start chatting with your chatbot that only says `Hello World`!

## Wrapping Up

Now that you have a working messenger chatbot, you can read the [bottender docs](https://bottender.js.org/) and start customizing your own bot!

## Credits

* Ian Huang ([github](https://github.com/ian13456))