แนะนำ Dialogflow: เชื่อมต่อ Dialogflow กับ Facebook Messenger

จากบทความตอนก่อน ทั้ง แนะนำ Dialogflow สำหรับการสร้าง chatbot และ Intent, Parameters และ Fulfillment หลังจากเราสร้าง chatbot ด้วย Dialogflow แล้ว เราสามารถนำ chatbot ที่ได้มา integrate เพื่อใช้งานกับ messenger หลายๆ ตัวได้ โดยวันนี้เรามาดูวิธีการเชื่อมต่อ Dialogflow เข้ากับ Facebook Messenger กันครับ

Facebook Messenger

เริ่มต้นจากหน้า Dialogflow console ให้เราไปที่เมนู Integrations และกดที่ Facebook Messenger

เราจะได้หน้าสำหรับตั้งค่าเพื่อเชื่อมต่อ Dialogflow กับ Facebook Messenger ซึ่งมีรายละเอียดดังนี้

• Callback URL: เป็น url สำหรับนำไปใส่เป็น webhook ในหน้า facebook developer app
• Verify Token: ให้เรากำหนด string ขึ้นมาเอง และนำไปใส่เป็น secret ของ webhook ในหน้า facebook developer app
• Page Access Token: ได้จากหน้า facebook developer app

ให้เรากดที่ slide ตรงมุมขวาบน เพื่อเปิดการทำงาน (จะได้กรอกข้อมูลได้) และกำหนด Verify Token (เป็นข้อความของเราเอง) เสร็จแล้วทดไว้ในใจ เพราะเดี๋ยวเราจะต้องใช้ Callback URL คู่กับ Verify Token ที่เราตั้งไว้ในหน้านี้ครับ เปิดหน้านี้ค้างไว้ก่อน ยังไม่ต้องกดอะไรต่อ

พัก Dialogflow console ไว้ก่อน เราจะมาตั้งค่ากันต่อที่ console ของ facebook for developers โดยให้เราเลือก facebook app ที่ต้องการ (ถ้ายังไม่มีก็กดสร้าง app ขึ้นมาใหม่) ในหน้า Add a Product ของ facebook app ให้เลือก Messenger และกด Set Up

เราจะได้เมนูสำหรับตั้งค่า Messenger app เพิ่มเข้ามา ส่วนแรกที่ต้องตั้งค่าคือหน้า Page ให้เราเลือก page ที่ต้องการผูกกับ Dialogflow (ถ้ายังไม่มีก็สร้าง page ใหม่ได้) และเลือก Edit Permission กดไปตามขั้นตอน เราจะได้ Page Access Token มา ให้เอาค่านี้กลับไปใส่ใน Dialogflow console 

กลับมาที่ Dialogflow console นำ Page Access Token ที่เพิ่งได้มา ใส่ลงในช่อง Page Access Token และกดปุ่ม START จบฝั่ง Dialogflow (ต้องไปตั้งค่าต่อที่ Facebook Developer console)

กลับมาที่ facebook for developers ที่เมนู Settings ของ Messenger ในหัวข้อ Webhooks ให้กดที่ "Subscribe to Events"

จะขึ้นหน้าให้เราตั้งค่า ดังนี้

• Callback URL: ให้ใส่ Callback URL ที่ได้จาก Dialogflow console
• Verify Token: ใส่ string ที่เรากำหนดขึ้นมาเอง ให้ตรงกับที่กำหนดใน Dialogflow console ก่อนหน้านี้
• Subscription Fields: ให้เลือก messages กับ messaging_postbacks

และกด "Verify and Save"

เมื่อ verify ผ่านแล้ว ในหัวข้อ Webhooks ให้เราเลือก page ที่ต้องการ ในหัวข้อ "Select a page to subscribe your webhook to the page events" และกด "Subscribe"

หาก subscribe เรียบร้อย ในหน้า Settings ของ Facebook Page หัวข้อ Messenger Platform > Connected Apps จะขึ้นชื่อ Facebook app ที่เรากด subscribe ไว้

ตอนนี้เราต่อจิ๊กซอว์ได้ครบแล้วครับ คือ Page เชื่อมต่อกับ FB App (ขึ้น Connected Apps) และ FB App  ก็เชื่อมต่อกับ Dialogflow (ด้วย Webhook)

หากต้องการทดสอบผลการทำงาน เราสามารถลองคุยกับ page ของตัวเอง (ซึ่งจะตอบกลับมาด้วย Dialogflow) ได้ด้วย link ในหัวข้อ "Your Messenger Link" คับ

ลองคุยกับ Dialogflow ผ่าน Facebook Messenger

เชื่อมต่อได้เรียบร้อยดี สำหรับบทความนี้จะแนะนำการเชื่อมต่อเบื้องต้น เพื่อให้เห็นภาพการทำงานร่วมกันระหว่าง Dialogflow และ Facebook Messenger ครับ แต่ถ้าจะใช้งานจริง จะมีรายละเอียดอื่นๆ ที่ต้องตั้งค่าในฝั่ง Facebook app อีกพอสมควร แต่จะขอละไว้ เนื่องจากจะเป็นเนื้อหาที่ลงลึกในฝั่ง Facebook app มากเกินไปครับ

คราวหน้าเราจะมาเชื่อมต่อ Dialogflow กับ platform อื่นๆ ดูบ้าง มีใครทายได้หรือไม่ครับ ว่าจะเป็น platform ไหน :D

หากใครสนใจนำ Chatbot มาใช้งานสำหรับให้บริการผู้ใช้ ไม่ว่าจะในองค์กรหรือนอกองค์กร เข้ามาสอบถามทีมงานได้ครับที่ tangerine