ทำ Facebook Chatbot - Part 1

Chatbot กำลังเป็นที่นิยมในยุคที่ผู้คน Chat ระหว่างเดินมากกว่าการคุยโทรศัพท์กัน เพราะการใช้งานที่สะดวก เราใช้ Chat กับทุกสิ่งอย่าง ถ้าเลือกได้ ก็ไม่อยากสลับออกไปใช้ App อื่น และ Social Network Platform ต่าง ๆ ก็ออกเครื่องมือสำำหรับการทำเรื่องนี้ออกมา LINE ที่คนไทยนิยมก็มี LINE Bot API และ Facebook Messenger Platform ซึ่งใน Blog นี้จะขอนำเสนอ Facebook Messenger Platform เบื้องต้น

Facebook Messenger Platform

เป็น platform ที่ทำให้การสื่อสารกับลูกเพจได้หลากหลาย Bot สามารถสื่อสารได้ทั้งข้อความ Integrate platform ที่รวมถึง media ต่างๆ รูป เสียง URL ฯลฯ ซึ่งเราอาจนำมาใช้สำหรับการขายของผ่าน Bot ตั้งแต่ต้นยันจบการขาย การสั่งจองสินค้าบริการกันเลย แล้วแต่จะสร้างสรรค์ แต่แน่นอนว่าต้องมีงานส่วนอื่น ๆ มาประกอบด้วย เช่น การให้ Bot อ่าน/เขียน ฐานข้อมูล วิเคราะห์ recommendation ฯลน ก็อีก แล้วแต่สร้างสรรค์เลยครับ platform มีแล้ว

Getting Started

เนื่องจาก Tutorial ของ Facebook ทำมาได้ดีอยู่แล้ว ท่านอาจอ่านจาก Tutorial โดยตรงแล้วทำตามเลยก็ได้ แต่เพราะตอนที่ผมทำเอง เจอจุดที่เราท่านอาจพลาดกันง่าย ๆ จึงขอนำประสบการณ์มาเขียนเป็นวิทยาทาน
ภาพรวมของระบบคือ เรามีหน้าที่เขียน Bot ซึ่งก็คือ Web App บน Web Server ที่ Listen ที่ Port หนึ่ง ๆ ในโค้ดตัวอย่างที่ Facebook ให้ใช้ Node แล้ว Listen ที่ Port 5000 โดยเมื่อมีข้อความส่งมาทาง Messenger ทาง Facebook จะเรียก Web App ของเราที่ Webhook URL ที่ลงทะเบียนไว้กับ Facebook

สิ่งที่ต้องมี

1. node.js - สำหรับรัน Chatbot code ในที่นี่ ใช้ JavaScript (แต่ท่านจะใช้เครื่องมืออะไรก็ได้ ขอให้สื่อสารกันตาม API ที่ Facebook กำหนด)
2. Webhook - เมื่อมีข้อความจาก messenger ส่งมาให้ Bot ทาง Facebook จะเรียก URL ที่เราลงทะเบียนไว้ พร้อมส่งข้อมูลต่างๆมาให้ ตัว URL นี้คือ Web Hook ถ้าท่านมี Web Host สักตัวก็สะดวกแต่จะลำบากตอน Code เพราะต้องคอย On-line ตลอด หรือ ท่านสามารถทำให้เครื่องที่ท่านทำงานมี Web Server ที่สามารถเปิดให้โลกภายนอกเข้ามาได้ แต่ผมมีปัญหานี้คือ ไม่มีเครื่อง On-line (เช่นบน Cloud) และ อยาก Code ที่เครื่องที่ทำงาน เพราะเครื่องมือครบ ก็ Tunnel เอาได้เลย วิธีการผมเขียนเอาไว้ที่ Blog นี้
3. Code ตัวอย่าง จาก Github
4. Facebook Page สำหรับให้ Bot นี้ไว้สื่อสาร เพราะ ณ วันนี้ยังผูก Bot กับ Profile ส่วนตัวไม่ได้

ขั้นตอนการทำ

1. เตรียม Node.js Code

เมื่อได้ Code ตัวอย่างมาแล้ว ให้เก็บไว้ที่ directory อะไรก็ได้ เช่น C:\codes\facebook-bot

1.1 App Secret

ไปที่หน้า Facebook App แล้วเลือกที่ Settings / Basic แล้วมองหา App Secret เลือก Show (เพราะเดิมจะเป็น ******) เราต้องใช้ App Secret นี้ในการ config bot เรา สมมติ xxxxxxx

1.2 Page Access Token

ที่หน้า Facebook App แล้วเลือกที่ Messenger ที่ส่วน Token Generation ให้เลือก Page ที่เราต้องการผูก Bot ไว้ เราจะได้ Page Access Token มา สมมติ yyyyyyy

1.3  Validation Token

ข้อความอะไรอะไรก็ได้ครับ ตัวอย่างตาม Facebook ใช้ my_voice_is_my_password_verify_me เอาตามนี้ละกัน

1.4 Server URL

สั่งคำสั่งที่ Command Line เรียก Ngrok ให้ tunnel port 5000

 ngrok http -bind-tls=true site.dev:5000

แล้วเราจะได้ Forwarding address มา เช่น

 https://e77d10c7.ngrok.io -> site.dev:5000

1.5 เตรียม Config

ใน directory config จะมี default.json ให้ปรับข้อมูลตามที่เราได้มา

  "appSecret": "xxxxxxx"

  "pageAccessToken": "yyyyyyy"

  "validationToken": "my_voice_is_my_password_verify_me",

  "serverURL": "https://e77d10c7.ngrok.io"

1.6 แล้วใช้ Command Prompt เพื่อรัน app.js

 c:\codes\facebook-bot\node app.js

จะเห็นข้อความว่า

 Node app is running on port 5000

2. สร้าง Facebook App และ Facebook Page

สร้าง Facebook App และ Page หรือใช้ของเดิมที่เคยทำไว้แล้ว ไปที่หน้า Dashboard และเลือก Product Settings แล้วเลือก "Add Product" และ "Messenger"

3.ตั้งค่า Webhook

ในส่วน Webhooks เลือก "Setup Webhooks"

ใส่ URL สำหรับ webhook ในกรณีที่ใช้ Ngrok แบบผม URL จะเป็น https://e77d10c7.ngrok.io ซึ่งทุกครั้งที่รัน ngrok URL จะเปลี่ยนไปเรื่อย ๆ (ถ้าจ่ายค่าบริการ จะ lock URL ไว้ได้)

จากนั้น ก็ใส่ Verify Token (คล้าย password แบบฉาบฉวย ใส่อะไรก็ได้ครับ) และ เลือก messages และ messaging_postbacks ในส่วน Subscription Fields.

แล้วกด Verify and Save (ขั้นตอนนี้จะผ่านได้ก็ต่อเมื่อมี webhook และรัน node แล้ว)

ถึงขั้นนี้ ต้อง Verify and Save ผ่านนะครับ!!

4. ทดลองใช้งาน

ลองเปิด Chat แต่ Bot จะใช้งานได้กับ Admin page เท่านั้น คนทั่วไปยังใช้ไม่ได้จนกว่าจะส่งงานให้ Facebook ตรวจสอบก่อน ข้อความที่พิมพ์เข้าไป ถ้าไม่ตรงกับ keyword ที่ Code ตัวอย่างจับได้ Bot จะ Echo กลับมา เช่น Hello สวัสดี แต่ถ้าตรงกับ Keyword ได้แก่ image, gif, audio, video, file, button, generic, receipt, quick reply, read receipt, typing on, typing off, account linking จะมีการตอบเฉพาะตาม Code ที่แสดงให้เห็นว่า Bot ทำอะไรได้บ้าง

ใน Part 2 จะมาดูใน Code นี้กัน