วิธีเชื่อมต่อ Chatbot เข้ากับ Facebook Messenger Platform ด้วย Microsoft Bot Framework

นี่เป็นตอนที่ 6 ในซีรี่ยส์สร้าง Chatbot ของ Facebook Messenger ง่ายๆ ด้วย Node.js และ Microsoft Bot Framework กับโค้ชพล สามารถดูขั้นตอนก่อนหน้านี้ได้ตาม link ด้านล่างเลย

1. รู้จักระบบ และโปรแกรมสำหรับพัฒนา Chatbot ให้ Facebook Messenger
2. ทดลองสร้าง Chatbot ตัวแรก ด้วย Node.js
3. วิธีสร้าง Repository และอัพโหลด Chatbot ขึ้น Github
4. วิธีติดตั้งใช้งาน Chatbot บน Microsoft Azure
5. วิธีเชื่อม Chatbot บน Microsoft Azure เข้ากับ Microsoft Bot Framework
6. วิธีเชื่อมต่อ Chatbot เข้ากับ Facebook Messenger Platform ด้วย Microsoft Bot Framework

Microsoft Bot Framework เปรียบได้กับสนามบินของประเทศ ที่สามารถเชื่อมต่อกับสถานที่อื่นๆ ที่เปิดรับการเดินทางด้วยเครื่องบินแบบเดียวกัน ในที่นี่สนามบินที่เราต้องการเชื่อมต่อเส้นทาง คือระบบ Messenger Platform ของ Facebook ครับ

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

1. เพิ่ม Channel ของ Facebook Messenger

เริ่มจาก ให้เราเข้าไปที่โปรไฟล์ของ Bot ที่สร้างไว้ในขั้นตอนที่แล้ว ด้านล่างจะเป็นรายการ Channel ต่างๆ ที่สามารถเริ่มเชื่อมต่อกับ Bot framework ได้ทันที

ให้กดปุ่ม Add ในส่วนของ Facebook

2. เริ่มขั้นตอนการเชื่อมต่อกับ Facebook Messenger Platform

ในการเชื่อมต่อ Facebook Messenger Platform ทาง Microsoft Bot Framework ได้จัดเตรียมวิธีให้ทำตามได้ง่ายๆ แล้ว ในที่นี่พล จะอธิบายเป็นขั้นตอนที่ละเอียดหน่อย ใครทำเป็นอยู่แล้วก็ลุยได้เลยจ้า

2.1 สร้าง Facebook Page เพื่อเป็นที่ให้ Bot ทำงาน

ขั้นตอนแรกคือการสร้าง Facebook Page ให้กับบอท ใครมี Facebook Page อยู่แล้วอยากใช้เป็นที่วิ่งเล่นของ Bot ก็สามารถข้ามขั้นตอนนี้ไปได้ แต่หากใช้ Page นั้นทางธุรกิจ แนะนำให้สร้าง Page ใหม่ไว้ลอง Bot ของเราดีกว่า เดี๋ยวลูกเพจทักเข้ามาจะตกใจเอา

จะมี link กดมายังส่วนการจัดการ Facebook Page ประจำบัญชี Facebook ของเรา

จากนั้นกดปุ่ม Create Page

จะมีประเภทของ Page ให้เลือกตามความเหมาะสม เช่นในที่นี้พล เลือกเป็นแบบ Art, Band, or Public Figure > Fictional Character และตั้งชื่อ

เรียบร้อยแล้วเราจะได้ Facebook Page เปล่าๆ มาใช้

2.2 สร้าง Facebook App ที่จะเชื่อมต่อกับ Bot ของเรา

ขั้นตอนนี้ยังไงก็ต้องสร้าง เพราะ Facebook App จะมีระบบที่เชื่อมต่อ รับส่งข้อมูลกับ Bot ของเรา

เริ่มแรกคลิกที่ link ที่ Bot Framework เตรียมไว้ให้

เราจะมาโผล่ในส่วนการสร้าง Facebook App สำหรับใช้กับเว็บ ให้กดปุ่ม Skip and Create App ID

ตั้งชื่อของ Facebook App และระบุอีเมลล์ที่สามารถติดต่อได้ จากนั้นกดปุ่ม Create App ID 

หลังจากสร้าง App ID แล้ว เราจะเข้ามาที่หน้าโปรไฟล์ของ Facebook App

1. กดเลือก Dashboard จากเมนู
2. คัดลอก App ID เก็บเอาไว้ เดี๋ยวต้องใช้แน่นอน
3. ในส่วนของ App Secret ให้กดปุ่ม Show และคัดลอกรหัสเก็บเอาไว้ เดี๋ยวต้องใช้แน่นอน

 2.3 ตั้งค่า Messenger Platform

ในส่วนของเมนูด้านซ้าย

1. กดปุ่ม Add Product
2. จากรายการ ในส่วน Messenger ให้กดปุ่ม Get Started

ในส่วนของ Token Generation

1. เลือก Facebook Page ที่ต้องการใช้งาน
2. คัดลอกส่วนของ Page Access Token เก็บไว้ เดี๋ยวได้ใช้แน่นอน (ตอนนี้ที่คัดลอกเก็บไว้ คือ App ID, App Secret, และ Page Access Token)

ถัดลงมา ในส่วน Webhook กดปุ่ม Setup Webhooks

ขั้นตอนนี้เราจะนำ URL จากที่ Microsoft Bot Framework เตรียมให้ มาใส่ให้กับ Facebook App ของเรา (ในขั้นตอนของ Bot Framework จะชื่อ Configure Webhook Callback url and verify token)

1. คัดลอก Callback URL
2. มาใส่ไว้ใน Callback URL ของ Facebook App
3. คัดลอก Verify Token
4. มาใส่ไว้ใน Verify Token ของ Facebook App

2.4 กำหนด Credential

ในขั้นตอนสุดท้ายของ Bot Framework เราจะต้องเอาข้อมูลทั้ง App ID, App Secret, Page Access Token, และ Facebook Page ID มากรอกให้ Bot Framework

 

โดย Facebook Page ID สามารถดูได้จากเมนู About ของ Facebook Page ที่เราจะใช้

กรอกครบแล้วกดปุ่ม Resubmit เพื่อให้ Bot Framework นำไปใช้งาน

ถ้าเรียบร้อยจะขึ้นแสดงแบบนี้

กดปุ่มด้านล่างสุดเพื่อยืนยันการเชื่อมต่อ เราจะกลับมาที่หน้าโปรไฟล์ของ Bot เราอีกครั้ง คราวนี้จะเห็นว่า Bot ของเรามี Facebook Channel เพิ่มเข้ามา ซึ่งจะมีปุ่ม Message Us เพื่อทดสอบคุยกับ Bot ผ่าน Facebook Messenger ด้วย

ถึงจุดนี้ ลองกดปุ่ม Test Link ของ Facebook Messenger เข้าไปลองคุยกับ Bot ได้ครับ

1. รู้จักระบบ และโปรแกรมสำหรับพัฒนา Chatbot ให้ Facebook Messenger
2. ทดลองสร้าง Chatbot ตัวแรก ด้วย Node.js
3. วิธีสร้าง Repository และอัพโหลด Chatbot ขึ้น Github
4. วิธีติดตั้งใช้งาน Chatbot บน Microsoft Azure
5. วิธีเชื่อม Chatbot บน Microsoft Azure เข้ากับ Microsoft Bot Framework
6. วิธีเชื่อมต่อ Chatbot เข้ากับ Facebook Messenger Platform ด้วย Microsoft Bot Framework