# TOC-Project-2019 Intro. Slides ---- ## Goal - Build a FB messenger chatbot with FSM ([Template](https://github.com/winonecheng/TOC-Project-2019))  ---- ### Chatbot Overview  from: http://subodhjena.com/a-chatbot-architecture/ ---- ## Outline - Prerequisite - Get Started - FSM - transitions - Deploy to the Cloud (next week) --- ## Prerequisite 1. FB Page and App 2. Python Environment and Web Framework 3. Server with a valid SSL certificate ---- ### 1. FB Page and App  ---- ### 2. Python Environment and Web Framework - Python3 - [Bottle](https://bottlepy.org/docs/dev/tutorial.html) - other frameworks: [Flask](http://flask.pocoo.org/), [Django](https://www.djangoproject.com/)... ---- #### Installation - [Template Code](https://github.com/winonecheng/TOC-Project-2019) - ```pip3 install -r requirements.txt``` ---- #### Usage - Bottle simple example: `/demo_example/hello.py` - run: `python3 hello.py` ```python= from bottle import route, run @route('/message') def hello(): return "Hello World!" run(host='localhost', port=8080, debug=True) ``` ---- ### 3. Server with a valid SSL certificate - HTTPS Server - run locally: [ngrok](https://ngrok.com/)  --- ## Get Started 1. Webhook Setup 2. Generate a Page Access Token 3. Build the Bot --- ### 1. Webhook Setup - Webhook - GET/POST request from Messenger Platform - MUST: HTTPS support - User msg -> Webhook -> ngrok -> your Server ---- #### Webhook Verification - Messenger Platform sends the GET request to your webhook ```shell= curl -X GET "https://<YOUR_WEBHOOK_URL>/webhook? hub.verify_token=<YOUR_VERIFY_TOKEN>& hub.challenge=CHALLENGE_ACCEPTED& hub.mode=subscribe" ``` ---- - simple example: `/demo_example/setup_webhook.py` ```python= VERIFY_TOKEN = "Your Webhook Verify Token" @route("/webhook", method="GET") def setup_webhook(): mode = request.GET.get("hub.mode") token = request.GET.get("hub.verify_token") challenge = request.GET.get("hub.challenge") if mode == "subscribe" and token == VERIFY_TOKEN: print("WEBHOOK_VERIFIED") return challenge ``` ---- 1. Create a **verify token**(random string) 2. **Provide your verify token to the Messenger Platform** when you subscribe your webhook 3. Messenger Platform **sends a GET request to your webhook** with the token in `hub.verify` 4. Verify the token sent matches your verify token, and **respond with `hub.challenge` parameter** from the request 5. Messenger Platform **subscribes your webhook** to the app --- ### 2. Generate a Page Access Token - It's secret data - Save it as an environment variable - `ACCESS_TOKEN = os.environ.get("ACCESS_TOKEN")`  --- ### 3. Build the Bot ---- #### 3_1. Handle the incoming webhook event - simple example: `/demo_example/webhook_handler.py` ```python= @route("/webhook", method="POST") def webhook_handler(): body = request.json print('REQUEST BODY: ') print(json.dumps(body, indent=2)) ``` ---- - Text Message ```json= { "sender":{ "id":"<PSID>" }, "recipient":{ "id":"<PAGE_ID>" }, "timestamp":1458692752478, "message":{ "mid":"mid.1457764197618:41d102a3e1ae206a38", "text":"hello, world!", "quick_reply": { "payload": "<DEVELOPER_DEFINED_PAYLOAD>" } } } ``` ---- #### 3_2. Send a message with the Send API - simple example: `/demo_example/send_msg.py` ```python= import os import requests def send_text_message(id, text): url = "{0}/me/messages?access_token={1}".format( GRAPH_URL, ACCESS_TOKEN) payload = { "recipient": {"id": id}, "message": {"text": text} } response = requests.post(url, json=payload) ``` --- ## FSM - transitions - [pytransitions/transitions](https://github.com/pytransitions/transitions) - simple example: `/demo_example/fsm.py` --- ## Reference - [Messenger Platform Quick Start Tutorial](https://developers.facebook.com/docs/messenger-platform/getting-started/quick-start) - [Sending Messages API](https://developers.facebook.com/docs/messenger-platform/send-messages) - [用Python開發Facebook Bot](https://medium.com/dualcores-studio/%E7%94%A8python%E9%96%8B%E7%99%BCfacebook-bot-26594f13f9f7) - [twtrubiks/facebook-messenger-bot-tutorial](https://github.com/twtrubiks/facebook-messenger-bot-tutorial) - Non-official Python Wrapper Package (not supported now) - [enginebai/PyMessager](https://github.com/enginebai/PyMessager) - [davidchua/pymessenger](https://github.com/davidchua/pymessenger)