Embed Size (px)
Citation preview
AgendaIntroduction
BotsFacebook bots
PrerequisiteDemo
CNNInstallations
Facebook page Ngrok (Secure tunnels to
localhost)Node server
Facebook presentation layer (Structured Messages)
Facebook templatesDo we need a framework
Framework designFramework application
flowFile structure
WIT APIFirebase databaseFuture of botsFramework source code
Introduction to chat botsBots 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.
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.
PrerequisiteGood JavaScript knowledgeNgrok installed(Secure tunnels to localhost)
Facebook page Node server runningWIT account (NLP)
Firebase account (Google database)
Browser
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”
Let’s do some installations first
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.
Installation : NgrokYou 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”
Installation : Node serverYou 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.
Facebook Messenger Platform
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.
Facebook Presentation layerThese templates contains Normal text, Option list, Quick replies and share location.
Facebook Presentation layerThese templates contains Order receipt, Dialog popup and Airlines design.
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.
Facebook TemplatesText 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 templateThe 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.
Facebook TemplatesOption List Template Receipt Template
Framework Design Presentation layer
Presentation layer is provided by Facebook only, no need to create any html or style.
Application LayerApplication layer plays the role of webhook handler, means it handles all the postback reply and direct text messages of user.
WIT layerWIT layer or API is used to process human natural language
Service LayerService layer is responsible to send messages to the user, process user request and apply specified template as per requirement.
Data LayerData can be drive either from any static JSON file or firebase, both methods are available with the framework.
Framework Application Flow
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 handlerThis 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 managerTemplate manager contains all the pure functions and return templates as per Facebook guidelines.
Service handlerThis handler is responsible to save user conversation, send messages, and map Facebook templates.
Data origin/loadData 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 handlerUser class is created to store user information and his/her activities after he/she start the chat session.
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.
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.
Framework Source CodeFor more information or quick documentation and source code, you can check out the below link on GitHub. https://github.com/rammurat/facebook-bot-framework
Thank You
