A framework designed to ease the development effort of chatbots. An effort to give a platform to new developers to build their own chatbot with easy steps.
2. Agenda
Introduction
Bots
Facebook bots
Prerequisite
Demo
CNN
Installations
Facebook page
Ngrok (Secure tunnels to
localhost)
Node server
Facebook presentation layer
(Structured Messages)
Facebook templates
Do we need a framework
Framework design
Framework application
flow
File structure
WIT API
Firebase database
Future of bots
Framework source code
3. Introduction to chat bots
Bots are simple artificial intelligence systems that you interact with via
text. Those interactions can be straight forward, like asking a bot to give
you a weather report, or more complex, like having one troubleshoot a
problem with your internet service.
Short for chat robot, a computer program that simulates human
conversation, or chat, through artificial intelligence.
Chat bots are used in applications such as ecommerce customer service,
call centers and Internet gaming. Chat bots used for these purposes are
typically limited to conversations regarding a specialized purpose and not
for the entire range of human communication.
4. Introduction to FB Bots
The Messenger Platform gives you the ability to have conversations with people on
Messenger. We've added new tools for you to build and promote your bot so you can
create a custom experience for your unique audience.
Why Facebook bot?
Web plugins - Using plugins, codes and links people can discover your bot and start
conversations.
Customer Matching - Customer matching allows you to reach people in Messenger if
you have their phone number and their consent to be contacted by you.
Structured Templates - You can format your messages in a variety of ways. Send
simple text and images, or use our structured templates to customize your message
bubbles.
User Controls - Provides people with even more ways to control the conversation and
make sure they can reach the businesses they care about.
5. Prerequisite
Good JavaScript knowledge
Ngrok installed(Secure tunnels to localhost)
Facebook page
Node server running
WIT account (NLP)
Firebase account (Google database)
Browser
6. Demo (CNN - https://www.facebook.com/cnn/)
CNN was among the first publishers to launch a bot in April, which is available to its global
audience. CNN currently has a Facebook audience of 22 ML people, and CNN International has 12
ML. You can ask for news as per your interest by writing, for ex: “Latest on Donald Trump”
8. Installation : Facebook page
Go to your app dashboard page - https://developers.facebook.com/apps/
Create new app by clicking messenger tab
Generate your access token
Subscribe your page for webhook
Create your callback url after installing ngrok and set your token in config file
Update your webhook details as shown below under webhook tab on Facebook
page
You must need a Facebook page to start with, which provides you complete
features including a button to start your chat.
9. Installation : Ngrok
You also need to setup a secure tunnel to your localhost server. Ngrok is a tool
that allows you to easily expose your localhost server to the outside world.
Make sure your firewall won’t block this.
Download ngrok - https://ngrok.com/
Open command prompt and run “ngrok http 80”
Copy randomly generated domain name to link with Facebook
webhook, here it is “https://9d71cd26.ngrok.io”
10. Installation : Node server
You also need to setup a node server on your localhost, which is responsible to
handle and respond all the client/user requests. This server will act as a
webhook or callback handler to Facebook API.
Download nodejs - https://nodejs.org/en/
Download framework from github
Go to synced folder
Open command prompt and run “npm install”
“/webhook/” with post request is implemented to handle all the
request.
12. Facebook Presentation layer
Template types
Text message
Audio message
Video message
Option List
Carousel
Quick replies
Persistent Menu
Airlines templates
Facebook messenger platform provides presentation layer, which has all the
required templates. You don’t need to write any HTML or CSS for this.
Structured Messages :- Structured messages support multiple templates to enable
different kinds of use cases. The button and generic template can render buttons
that open a URL or make a back-end call to your webhook. And the receipt
template can be used to send the receipt.
15. Do we need a Framework?
Imagine, you need to develop couple of chatbots which will
help you to book movie tickets, order food like pizza or burger
and book your table in some restaurant.
Problem : You need to setup server, client, configuration file,
define templates, structure your code, integrate your chatbots
with NPL processors/engines and store chat history somewhere
to cloud server.
Solution : This framework provides pre-designed Facebook
templates, built-in integration of system with WIT (NPL engine)
and cloud database (Google Firebase) with your application. All
you need is to put your questions in some JSON file, and load it
in JavaScript object and run your application. You can further
map your questions with WIT API as per your application flow.
The framework will automatically save the chat history on cloud
server i.e. firebase.
16. Facebook Templates
Text message template
In this template all you need is “message” that you want to send and a 16
digit user’s Facebook id like “1100223344556677” to identify the user
Option list template
The list template is a template that allows you to present a set of items
vertically. It can be rendered in two different ways. One list comes with action
buttons, for ex:- Add to cart, Buy now etc. while the other one comes with
normal list, with or without a product image
Carousel list template
Carousel list template is generic template and follows almost the same
structure of option list, but it displays it’s data in carousel instead.
Receipt template
Receipt templates are used to send order confirmation to the API, with the
transaction summary and description for each item.
18. Framework Design
Presentation layer
Presentation layer is provided by Facebook
only, no need to create any html or style.
Application Layer
Application layer plays the role of webhook
handler, means it handles all the postback
reply and direct text messages of user.
WIT layer
WIT layer or API is used to process human
natural language
Service Layer
Service layer is responsible to send messages
to the user, process user request and apply
specified template as per requirement.
Data Layer
Data can be drive either from any static JSON
file or firebase, both methods are available
with the framework.
21. Framework files description
Configuration file
This file is created to store all the configuration of framework including Facebook access token,
WIT API token, firebase option settings, server details like port, IP address and application flow
mapping.
Chat response handler
This handler is the main handler which handles all the requests from Facebook including post-
back and direct text request. This handler also manages what could be the next question to ask.
Template manager
Template manager contains all the pure functions and return templates as per Facebook
guidelines.
Service handler
This handler is responsible to save user conversation, send messages, and map Facebook
templates.
Data origin/load
Data can be provided to system either from static JSON file or any database like firebase. This
framework has an option to ingrate anyone of the these option.
User class handler
User class is created to store user information and his/her activities after he/she start the chat
session.
22. Utterance (WIT.AI)
Wit.ai makes it easy for developers to build applications and devices that you can talk or text to.
Wit.ai learns human language from every interaction. They have recently extends their previous
intent-oriented approach to story oriented approach.
In Wit.ai we can use Entities, Intents, Context and Actions concepts that together form the model
based on Machine Learning, and statistics can be used for understanding the language.
23. Database(Google Firebase)
Firebase is a mobile platform that helps you quickly develop high-quality apps, grow your user
base, and earn more money. Firebase is made up of complementary features that you can mix-
and-match to fit your needs. The company was acquired by Google in October 2014, and added a
significant number of new features in by May 2016. Firebase can be the fastest and one of the
recommended option for chatbot applications, whenever you want to save your chat history.
24. Framework Source Code
For more information or quick documentation and source code, you can
check out the below link on GitHub.
https://github.com/rammurat/facebook-bot-framework