Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Facebook Messenger Platform Framework

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.

  • Identifiez-vous pour voir les commentaires

Facebook Messenger Platform Framework

  1. 1. Ram Murat Sharma, @rammrms rammurat.rms.sharma0@gmail.com
  2. 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. 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. 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. 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. 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”
  7. 7. Let’s do some installations first
  8. 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. 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. 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.
  11. 11. Facebook Messenger Platform
  12. 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.
  13. 13. Facebook Presentation layer These templates contains Normal text, Option list, Quick replies and share location.
  14. 14. Facebook Presentation layer These templates contains Order receipt, Dialog popup and Airlines design.
  15. 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. 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.
  17. 17. Facebook Templates Option List Template Receipt Template
  18. 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.
  19. 19. Framework Application Flow
  20. 20. 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.
  21. 21. 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.
  22. 22. 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.
  23. 23. 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
  24. 24. Thank You