Skip to content
This repository has been archived by the owner on Mar 1, 2021. It is now read-only.

Latest commit

 

History

History

gui-webview

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
bin
bin
 
 
client
client
 
 
messenger-api-helpers
messenger-api-helpers
 
 
models
models
 
 
public
public
 
 
routes
routes
 
 
stores
stores
 
 
test
test
 
 
utils
utils
 
 
views
views
 
 
.babelrc
.babelrc
 
 
.eslintignore
.eslintignore
 
 
.eslintrc
.eslintrc
 
 
README.md
README.md
 
 
app.js
app.js
 
 
circle.yml
circle.yml
 
 
package.json
package.json
 
 
webpack.config.js
webpack.config.js
 
 
yarn.lock
yarn.lock
 
 

README.md

GUI in the Webview (Victoria Belle)

This is the folder for Victoria Belle, a bot that demonstrates best practices for creating GUI in the Messenger Platform's webview.

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 c 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. Here we use it to decide whether to show the Preferences view, the Product view or the Error page.

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

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

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

# URL_TO_HEROKU_APP is the url given to you from the above command
$ heroku config:set SERVER_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 gui-webview folder to Heroku
$ git subtree push --prefix gui-webview 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 gui-webview 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

Image of Webhook Messenger Settings, where pages can subscribe to listen to your Webhooks

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/gui-webview
$ yarn install
$ yarn build
$ export DEMO=true
$ yarn start

Running tests

$ cd path/to/repo/gui-webview
$ yarn quality