ก่อนจะทำการเชื่อมต่อ Facebook Messaging กับ Dialogflow เราต้องรู้จักกับพระเอกของเราก่อน นั้นก็คือ Dialogflow นั้นเอง ถ้ายังไม่รู้จักแนะนำให้อ่านบทความนี้ก่อน
เมื่อเรารู้จักพระเอกของเราแล้ว จากนี้เราก็ลุยกันเลยยยย++++
โดยมีขั้นตอนการทำ 4 ขั้นตอนดังนี้
- Create Facebook App
- Dialogflow Facebook integration
- Setup Webhooks on Facebook App
- Test
Step 1: Create Facebook App
ขั้นตอนนี้ คือการสร้าง Facebook App ใน Facebook Developer Console
- เข้าหน้าเว็บของ Facebook Developer console และ Log in เข้าสู่ระบบ
- เลือก My Apps ที่อยู่บริเวณมุมขวาบน แล้วคลิ๊ก Add New App
3. จากนั้นระบุชื่อ App ที่ต้องการ และอีเมล์ของคุณ (ในที่นี้ตั้งชื่อ App ว่า AdminBot)
หลังจากสร้างเสร็จแล้วจะเข้าสู่หน้า Scenario ดังรูปด้านล่าง
4. จากนั้นให้เราไปที่เมนู Add Products แล้วคลิ๊ก Set up ที่ Product Messager
ต่อมาให้ไปที่ Section Access Tokens แล้วเลือก Facebook Page ที่เราต้องการจะติดตั้งแชทบอทลงไป จากนั้น Facebook ก็จะขอ Permission ในการเข้าถึงข้อมูลต่างๆ ให้เรากด Accept ทั้งหมดไป หลังจากนั้นก็จะได้ Page Access Token มา ซึ่งค่านี้เดี๋ยวเราต้องนำไปใช้ตอนตั้งค่าที่ Dialogflow ในขั้นตอนถัดไป
Step 2: Dialogflow Facebook integration
ในขั้นตอนนี้เราจะทำการตั้งค่าให้ Agent เชื่อมต่อกับ Facebook Messaging
- ให้เปิดหน้าเว็บของ Dialogflow และเข้าเมนู Integrations จากนั้นเปิด Checkbox Facebook Messenger จะขึ้น Popup ให้กรอกข้อมูลดังต่อไปนี้
- Verify Token : ส่วนนี้สามารถใส่ค่าอะไรก็ได้ ตั้งได้ตามที่ต้องการ
- Page Access Token: คือ Token ที่เราได้จาก Facebook Developer Consoleโดยเราต้องเอา Page Access Token มาใส่ (ถ้ายังไม่มี ย้อนกลับไปทำข้อก่อนหน้านะ)
และเมื่อกรอกข้อมูลทั้งหมดเสร็จแล้ว ก็กดปุ่ม Start โล๊ดดดด++
Step 3: Setup Webhooks on Facebook App
- ไปที่ Section Webhooks ที่ Facebook Developer Console และกด Subscription To Event เพื่อเริ่มต้นการตั้งค่า
หลังจากนั้นเราจะพบกับ Popup New Page Subscription ดังรูป ซึ่งเราต้องระบุข้อมูลดังต่อไปนี้
- Callback URL: ส่วนนี้เอามาจากหน้า Integrations Dialogflow จากขั้นตอนก่อนหน้า
- Verify Token: กรอกข้อความที่ระบุไปที่หน้า Integrations จากขั้นตอนก่อนหน้า
- เลือก Subscriptions Fields เป็น messages และ messaging_postbacks
จากนั้นกด Verify and Save เป็นอันเสร็จเรียบร้อยครับ ^^
Step 4: Test
เมื่อทุกอย่างพร้อมแล้ว ก็ลองทักไปที่ Facebook page ได้เลย เมื่อเราคุยกับมันก็จะพบว่า แชทบอทของเราสามารถตอบกลับมาได้ตามที่ตั้งค่าไว้แล้ว เย้++ Mission Complete!!!!!
References:
(ข้อมูลอาจมีข้อผิดพลาด ถ้าจะเอาบทความนี้ไปอ้างอิงที่อื่นให้ตรวจสอบให้ดีก่อนนะครับ ขอบคุณครับ)
สำหรับวันนี้ ต้องขอลาไปก่อน สวัสดีครับ NottDev :)
