Beginner Chatbot Development

A guide to creating chatbots and conversational interfaces

Prerequisites

node.js
ngrok

ngrok creates a secure public URL to a local webserver on your machine. Iterate quickly with immediate feedback without interrupting flow.
```
npm install -g ngrok
```
If your package manager of choice is Homebrew, install via brew install ngrok

If it's your first time globally downloading a package using Node OR you're getting EACCES/permission denied you will need to update your permissions:

https://docs.npmjs.com/getting-started/fixing-npm-permissions

Installation

Clone this repo and install dependencies

git clone https://github.com/devcfacebook/oakbot-intro
cd oakbot-intro
npm install

Getting started

Set up your environment variables

Create a .env file within the directory
Copy the contents from the .env.example into the .env file

These variables are necessary to have a functioning server. We will update the values later

Install npm modules to local file

npm install

Start up your app server

npm start

In the browser, navigate to the webhook route on your localhost

At this point, your browser should show a 'Forbidden' status and your server should output an error message stating: 'Failed validation. Validation token mismatch'

Start up the ngrok server within another terminal

ngrok http 5000

In the browser, navigate to your webhook route on the public url provided to you by ngrok, e.g. https://99fca400.ngrok.io/webhook

Confirm that you recieve the same status and log message as earlier

Now let's deploy our bot so we can start interacting with it!

Messenger Platform for Bots

To build a bot on the Messenger platform, the following items are necessary:

Facebook Page: A Facebook Page will be used as the identity of your bot. When people chat with your app, they will see the Page name and the Page profile picture

Facebook Developer Account: Your developer account is required to create new apps, which are the core of any Facebook integration

Facebook App: The Facebook app contains the settings for your Messenger bot, including access tokens

Webhook URL: Actions that take place in conversations with your bot, such as new messages are sent as events to your webhook

Create a FB page

https://www.facebook.com/pages/create

Create a FB developer account and a FB app

https://developers.facebook.com/apps/

Add messenger capabilities to FB app

Go to the App Dashboard and under Product Settings on the bottom left corner, click "Add Product" and select "Messenger"

Connect FB app with bot server

Within your file directory, update the VALIDATION_TOKEN in the .env file to any value you desire
On the Messenger page, browse to the Webhooks section, and select "Setup Webhooks"

Enter your ngrok url with the webhook route (e.g. https://99fca400.ngrok.io/webhook) into the callback url field
Enter the value of your VALIDATION_TOKEN into the verify token field
Within the subscription fields section, select the messages and messaging_postbacks option

Collect app secret

At the top of the dashboard, browse to the App Secret section and click on show
Copy the app secret and use it to set the APP_SECRET variable within your .env file

Collect page access token

Scroll to the Token Generation section and select your page
Copy the generated page access token and use as the value for the PAGE_ACCESS_TOKEN variable in your .env file

Link messenger app to page

Browse to the Webhooks section and select your page to forward the messaging and postback events to your the webhook route

Wrapping it up

Restart your bot server to begin receiving content from your FB messenger app

Send a message as a visitor to your FB page and watch the message be echoed back to you.

Follow these steps to quickly access your bot through Facebook:

Navigate to your Facebook Page and click the 'add a username' under the profile picture.
Add a username, preferrably the same name of your Bot
You should now be given a link to your Bot. Navigate to that link, and send a message to your bot.

Deploying Your Bot

Navigate to the following tutorial to deploy your Bot Server to Heroku.
Once you go through those steps, make sure to do the following APP_SECRET, PAGE_TOKEN, AND VALIDATION_TOKEN to your config variables.
You stopped running your instance of ngrok so that heroku can use the port
Navigate to the Messenger Platform in your Browser and scroll down to WebHooks. Click on 'edit subscription' and update your WebHook link to point to your Heroku link + /webhook

amyrlam / oakbot-intro Goto Github PK

oakbot-intro's Introduction