สรุป How to Chatbot Facebook ที่ไปอบรมมา

Sathit Seethaphon

Published in

Sathit Seethaphon

4 min readAug 28, 2017

สรุปการสร้าง Chatbot Facebook กับ FBMQ (Facebook Messenger Platform Python Library) เป็น python library ไว้นิดหน่อย

มีโอกาสได้ไปอบรมคอร์ส How to Line & Facebook Chatbot ที่ JUMP Space Khon Kaen สอนโดยพี่บอย CEO & Founder AIYA

ขั้นตอนคร่าวๆ ดังนี้

สมัครเข้าใช้งาน Facebook developer
สร้างเพจ
สร้าง Facebook App
ติดตั้ง FBMQ
ติดตั้ง ngrok เพื่อให้มี url จริงสำหรับใช้ตอน dev กรณีมีเซร์ฟเวอร์อยู่แล้วข้ามครับ (ดูวิธีติดตั้งได้ที่นี่)

ขั้นตอนที่ 1–3 คิดว่าน่าจะทำกันได้ เมื่อเสร็จแล้วให้ทำการติดตั้ง python ต่อใครมีแล้วก็ข้ามไปได้เลยครับ

ติดตั้ง Python

ตอนเรียนหลังบ้านที่ทำ webhook เราใช้ python จึงจำเป็นจะต้องติดตั้ง library ต่างๆ ดังนี้ (ผมใช้ python 2.7)

เปิดใช้งาน Messenger ใน Facebook App

เมื่อเราสร้าง facebook page และสร้าง facebook app เรียบร้อยแล้วให้เราเข้าไปที่ app ของเราจะเจอหน้าประมาณนี้ แล้วเลือก add products

จากนั้นไปที่ add product แล้วเลือก Messenger กดปุ่ม Setup

เลื่อนลงไปที่ Token Generation แล้วเลือกชื่อเพจที่เราสร้างไว้ จากนั้นมันจะโชว์ Page Access Token ให้เรา copy ไว้เพื่อเอาไปใช้ในการตั้งค่าต่อไป

ให้เลือกชื่อ Page ที่เราได้สร้างไว้แล้วมันจะโชว์ค่า page access token

ติดตั้ง FBMQ (Facebook Messenger Platform Python Library) สำหรับทำ webhook

แนะนำให้ใช้ git clone source ลงมาเลยเพราะมันจะมีตัวอย่างการใช้งานด้วย จะได้เริ่มต้นได้ง่ายๆ

git clone https://github.com/conbus/fbmq
cd fbmq/example
virtualenv env source env/bin/activate
pip install -r requirements.txt

จากนั้นให้เราเปิด editor ขึ้นมาแล้วตั้งค่า config ใน example/config.py จะมี FACEBOOK_TOKEN เอามาจาก Page Access Token ในหน้าตั้งค่าใน facebook app ที่เราสร้าง

CONFIG = {'FACEBOOK_TOKEN': 'facebook-token','VERIFY_TOKEN': 'verify_token','SERVER_URL': 'https://yourdomain'}

ส่วน VERIFY_TOKEN ให้กำหนดเองให้เรียบร้อย

สั่งรัน server

หลังจากตั้งค่าเสร็จเรียบร้อยให้รัน server ขึ้นมาด้วยคำสั่ง

python server.py

จะพบข้อความดังนี้

 * Running on http://0.0.0.0:8080/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 534-634-108

จากนั้นลองเข้าใช้งานที่ http://127.0.0.1:8080/webhook ดูจะพบหน้าตาประมาณนี้

แสดงว่า api ใน localhost เราพร้อมแล้ว แต่ api นี้ยังไม่สามารถเอาไปใช้ทดสอบจริงได้เพราะ facebook chatbot จำเป็นต้องใช้ ip จริงและเป็น https เท่านั้น วันนี้เราจะใช้ ngrok มาแก้ปัญหานี้กันเพื่อให้เราสามารถทดสอบระหว่างพัฒนาได้

ติดตั้งและใช้งาน ngrok เพื่อให้เราสามารถ online ได้

ให้เราโหลด ngrok มาแล้วทำการรันคำสั่งตามด้านล่าง (วิธีการติดตั้งดูที่นี่) คำสั่งนี้หมายถึงให้ ngrok ไปจับที่พอร์ต 8080 ของ locahost ในเครื่องของเราและทำการสร้าง url ที่เป็น ip จริงให้สามารถวิ่งเข้ามาที่ localhost 8080 ของเราได้

./ngrok http 8080

กรณีที่ปิด terminal ไปหากรัน ngrok ใหม่ก็จะได้ url ใหม่ไปเรื่อยๆ นะครับ หากไม่อยากให้มันเปลี่ยนทุกๆ ครั้งก็ต้องจ่ายเงินครับ

จะได้ url มาแบบนี้

ngrok by @inconshreveable                                                                                      (Ctrl+C to quit)Session Status                online
Version                       2.2.8
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://8d244e4e.ngrok.io -> localhost:8080
Forwarding                    https://8d244e4e.ngrok.io -> localhost:8080Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

ให้ลองเข้าไปที่ https://8d244e4e.ngrok.io/webhook ว่าได้เหมือนกันหรือไม่ถ้าได้ก็แสดงว่าเรา online ได้แล้ว

ส่วน url http://127.0.0.1:4040 ให้เอาไว้ monitor ได้ว่ามี request อะไรมาบ้าง

ให้เรานำ url ที่เป็น https ไปใส่ในตั้งค่า webhooks ใน facebook app กดปุ่ม Setup Webhooks

กรอข้อมูล callback URL ด้วย url ที่ได้จาก ngrok ให้ใช้ที่เป็น https ส่วน verify token ให้เอาที่เราตั้งค่าใน example/config.py ในเป็น https://8d244e4e.ngrok.io/webhook ที่ได้จาก ngrok เลือก message,messaging_postbacks ก่อน

กด verify and save จากนั้นจะขึ้นสถานะ webhooks complete ดังนี้

กรณีที่อยากแก้ไข url webhook

เราสามารถแก้ไข url webhook ที่เราที่บันทึกไปแล้วได้ ให้ไปที่เมนูด้านซ้าย Webhooks แล้วกดปุ่ม Edit Subscription

จะได้หน้า edit page subscription ให้แก้ไข url ตามที่ต้องการแล้วกด verify and save

หลังจากตั้งค่าและเตรียม webhook เรียบร้อยแล้วเราก็จะสามารถใช้งาน chatbot ได้ทันที

ทดลองใช้งาน chatbot

ก่อนอื่นให้เราเข้าไปที่ Web Interfac http://127.0.0.1:4040 ของ ngrok เพื่อดูว่า chatbot สามารถเรียก webhook ที่เราสร้างได้หรือไม่ ให้ไปที่หน้า inspect จะเจอหน้าจอว่างๆ แบบนี้

จากนั้นให้เราลองเปิดไปที่ fanpage ของเราแล้วเข้าไปที่หน้า chat แนะนำว่าให้เปิดผ่าน https://www.messenger.com นะครับแล้วค้นหาชื่อ page เราจะเจอแบบนี้

ให้กด get started มันจะตอบ postback called แสดงว่า chatbot เราใช้งานได้แล้ว

จากนั้นกลับไปดูที่หน้า http://127.0.0.1:4040/inspect/http เพื่อดูว่ามี request จาก facebook chatbot เข้ามามั้ย จะเห็นว่ามี request จาก chatbot มาแล้ว

ลอง chat กับ bot ให้พิมพ์อะไรก็ได้มันจะได้ message นั้นกลับมา

ให้ลองกลับไปดูที่ http://127.0.0.1:4040/inspect/http อีกครั้งเลือกรายการ request บนสุด

จะเห็นว่ามี request มาแล้วซึ่งมันจะส่ง data ที่ request มาด้วยเช่น sender คือ id ของเรา หรือ message ที่ส่ง

ถ้ากลับไปดูที่ fbmq ให้เปิดไฟล์ message.py ขึ้นมาไฟล์นี้จะเป็นส่วนที่มันตอบกลับมาให้ รายละเอียดเพิ่มเติมแนะนำให้ไปอ่านที่ https://github.com/conbus/fbmq แล้วก็ https://developers.facebook.com/docs/graph-api/webhooks/ ว่ามีอะไรให้ใช้บ้าง

ลองเล่นกันดูครับ ส่วนตัวรู้สึกชอบ python ขึ้นมาเหมือนกันมันสั้นๆ ดี:)