DialogFlow 101 กับการ Integrate กับ platform ต่างๆ

ลองทำ chatbot กับ DialogFlow พบว่ามีอะไรบางอย่างที่ควรจะรู้พื้นฐานก่อนนะถึงจะเก็ท

ก่อนอื่นขอเกริ่นนิดนึง เราเคยอ่านบล็อก DialogFlow แล้วงงๆการใช้งานของมันอยู่ ว่าอันไหนคืออะไร แล้วต้องทำอย่างไรบ้าง หลังจากที่ลองทำตามของพี่ตี๋นั้น แต่เราควรจะต้องทำความเข้าใจถึงแต่ละส่วนด้วยตัวเองว่าที่ฟังพี่ตี๋แล้วเอามาทำเองนั้น เอ็งเข้าใจไหมเนี่ยย เลยได้เข้าใจว่าอะไร คืออะไร

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

ถ้าขี้เกียจอ่าน ก็นั่งฟังไป และมี demo แบบย่อๆแปปเดียวจบ

https://youtu.be/xovgKbEZ62A

ปล. มาสแกนเพื่อคุยกับเจ้าพ่ออุ๋งชัยได้ที่

ก่อนอื่นรู้จัก Chatbot ได้อย่างไร รู้จักจากป้ายุพินตอนเข้าร่วมงาน Bangkok Urban Hack Day เห็นว่าก็กำลังมาสู่ยุค AI และตอบโจทย์อะไรได้หลายๆอย่างด้วย โดยที่ Solution ไม่ได้มีแค่แอปอย่างเดียวงี้

การสร้างโปรเจก DialogFlow

อันนี้ขอข้ามการจิ้มสร้างแล้วกัน โปรเจกมันจะถูกเรียกว่า Agent เนอะ ตอนสร้างสามารถเชื่อมกัยโปรเจก Firebase ที่มีอยู่ได้

เราเลือก default เป็นภาษาไทย เพราะคุยกับคนไทยเนอะ และใช้ API V2 ซึ่งสาเหตุการใช้คือ มันล่าสุด และ 1 มันล้าสมัยไปแล้ว พอสร้างเสร็จจะมี Intent พื้นฐานมาให้ 2 ตัว คือ

• Default Fallback Intent : ถ้าคำใดที่เราไม่ได้สอนบอท มันก็จะไม่รู้
• Default Welcome Intent : คำทักทาย

DialogFlow มีอะไรบ้างอ่ะ

เริ่มทีละส่วนก่อนเลยแล้วกัน อันหลักๆที่เราใช้มี 3 อัน

• Intent เราจะสร้างส่วนการพูดคุยกับ bot ตาม flowchart แล้วใน Intent มีอะไรบ้างนะ เดี๋ยวบอกเน้อ ใจเย็นๆ

• Integrations เราจะเอาบอทเราไปใช้ที่ไหน มีหลายที่เลย รวมเป็น 17 platform โดยประมาณ ในที่นี้เราสนใจ Google Assistant, Facebook Messenger และ LINE นะ

• Fulfillment ชื่อมันก็บอกว่าส่วนเติมเต็ม บางทีบอทเราก็ต้องการการประมวลผล หรือดึงอะไรบางอย่างจาก backend จึงมีส่วนนี้เข้ามาเติมเต็มให้บอทของเราสมบูรณ์ยิ่งขึ้น สามารถใส่ได้ 2 แบบ คือ ใส่ webhook ลงไป กับ พิมพ์ลงไปใน Inline Editor ซึ่ง มันเชื่อมกันกับ Cloud Function for Firebase

ส่วนอื่นๆที่แว่บเข้าไปดูบ้างก็ดี

• Training อันนี้จะบอกว่า บอทของเราเจอคำนั้นๆมากี่รอบแล้ว และเกิดอะไรขึ้น

• History อันนี้จะบอกว่า user คุยคำว่าอะไรกับบอทบ้าง แล้วเกิดอะไรขึ้นบ้าง

• Analytics ก็ตรงตัวเนอะ ว่ามีคนเข้ามาคุยกับบอทเรากี่คน ทำอะไรกันบ้าง

ส่วนต่างๆของ Intent มีอะไรบ้างหล่ะ?

ส่วนที่เราใช้ในการให้บอททำอะไรต่างๆตาม flowchart ที่เราวางไว้ และเป็นส่วนที่เราวุ่นวายกับมันเป็นหลักเลย และใน Intent มีอะไรบ้างหล่ะ

• Context จะมีขา input มาจากไหน และ output ไปไหนต่อ ในส่วนของ output จะมีสิ่งที่เรียกว่า Lifespan ว่าถ้า user คนนั้นตอบไม่ตรงตาม flow ก็จะให้ดีดออกไปจาก flow แล้วเริ่มใหม่ โดย default ของ lifespan คือ 2 และสามารถแก้เลขได้นะ

การใส่ context นั้น จะมีชื่อ -followup ตามหลังเสมอ ในส่วนของ input context นั้นก็คือ context ของ intent ก่อนหน้า และ output context ก็คือ intent ของตัวเอง ที่จะส่งไป intent ถัดไปนั่นเอง

• Event เจ้า intent นี้ trigger จากอะไร เช่น ตอนที่เราทักบอท จะพูด trigger ด้วย event Welcome

เท่าที่เราเข้าใจเราไม่สามารถสร้างเองได้ แล้วมันมี pattern ของมันอยู่นะ

Platform events | Dialogflow
If a user is communicating with your Action in ways other than through speech or text, these interactions are sent to…dialogflow.com

• Training phrases คำที่เราใช้สอนบอท ว่าอันไหนเข้าบริบทนี้ เช่น คำทักทาย มีอะไรบ้าง เน้นใส่ให้หลากหลาย ไม่เน้นปริมาณจ้า

• Action & Parameter รับคำที่ user พิมพ์มา แล้วเอามาใช้ต่อ

• Responses bot ของเราเจอคำใน Training Phrases แล้วตอบกลับเราว่าอะไร เน้นใส่ให้หลากหลาย จะได้เหมือนคนจริงๆ ในส่วนนี้มันจะแยกตาม platform เลย ส่วนรายละเอียดอีกแปปนึงจ้า

• Fulfillment ส่วนเติมเต็ม ซึ่งจะเติมเต็มด้วย webhook นั่นเอง ซึ่งในแท็บ Fulfillment จะเป็นส่วนของ coding เนอะ ส่วนใน intent จะเป็นการกดเปิดว่าอันนี้ใช้เจ้า fulfillment ในการ response กลับไปที่ user

ประเภทของ Intent

ถ้าให้เปรียบกับการเขียนแอปแอนดรอยด์ มันคือการส่ง intent ไปที่ Activity ที่เราต้องการ แต่ในที่นี้น่าจะเป็นการบอกว่า ต่อไป จะให้น้องบอททำอะไรต่อดี

ที่เราเห็นจะมี custom, fallback, yes, no, later, cancel, more, next, previous, repeat และ select.number

ที่เราใช้เองก็จะมี custom, yes, no เองแหะ

Follow-up intent expressions | Dialogflow
Follow-up intent expressions are the training phrases provided when you choose a follow-up intent.dialogflow.com

เราขออธิบายแบบคร่าวๆเนอะ เรามี intent ตัวนึง รับค่า yes และ no มา ถ้า yes ให้ทำงานต่อ ถ้า no ให้กลับไปกรอกข้อมูล ดังนั้นเราจะเพิ่ม intent ใหม่ โดยการกด Add Follow-up Intent จากนั้นก็ใส่ของใน intent ใหม่ที่เราเพิ่งสร้าง (ซึ่งขออนุญาต ข้ามไปบล็อกถัดไปเลยดีกว่า เดี๋ยวจะยาว)

Response และเคล็ดลับการรวมร่างไป platform อื่นๆ

ในที่นี้เราสนใจแค่ Google Assistant, Facebook Messenger และ LINE นะ

แล้วเพิ่มยังไงอ่ะ กดบวกด้านขวา แล้วเลือกแบบนี้

จากการเราลองทำบอทมาเล่น พบว่าหลักการทำงานของมันกับ platform อื่นในการพ่นข้อความต่างๆออกมา เป็นแบบนี้

default + optional (Google Assistant, Facebook Messenger, LINE)

ดังนั้น ถ้าเป็น text response ธรรมดา ใส่ใน default อย่างเดียวพอหล่ะ เดี๋ยว platform อื่นๆนางจะพ่น text ตามมาเหมือนกัน

หรือถ้าอยากใส่พวกอื่นๆลงไป ก็แยกใส่ในแต่ละ platform ได้เลย

และบางอัน มันไม่ support กับของ DialogFlow เลย เช่น Quick Replies ใน Facebook Messenger มา แต่ใน LINE ไม่มา งงม่ะ

ย้อนกลับในส่วนของ default จะมี Response 2 อัน คือ

• Text Response : ใส่ตัวหนังสือปกติ และควรพยายามใส่ให้เกิดความหลากหลาย ให้ user คิดว่าคุยกับคนมากกว่าบอท
• Custom Payload : อันนี้ต้องใส่เป็น json ตาม template ของ platform ต่างๆ ซึ่งต้องไปดูใน document ของอันนั้นๆ เช่น การทำ Quick Reply ของ LINE

Messaging API reference | LINE Developers

The LINE Developers site is a portal site for developers. It contains documents and tools that will help you use our various developer products. Creating LINE Login and Messaging API applications and services has never been easier!

LINE Developers

โครงสร้างคร่าวๆจะเป็นแบบนี้

{
  "line": {
    "type": "text",
    "text": "Welcome to the new World!"
  }
}

การทำงานคือ ถ้าเป็นในไลน์ ก็จะพ่นคำว่า Welcome to the new World ออกมานั่นเอง

สามารถอ่านเพิ่มเติมได้ที่ document เขาได้เลยจ้า

Rich messages | Dialogflow
Text responses are available in all platforms. Your agent can send up to 10 sequential text messages in response to a…dialogflow.com

การทดสอบบอท

เราสามารถทดสอบบอทก่อนออกไปปล่อยจริงได้ที่ด้านขวาของจอนะ

เติมเต็มบอทด้วย Fulfillment

บางครั้งบอทเราจะนำ input จาก user มาคำนวณ ดังนั้นก็ต้องเขียนโค้ด แต่อย่าห่วงว่ามันจะยากไหม หน้าตามันจะเป็นแบบนี้แหละ

ความง่ายคือใช้ Cloud Function ของ Firebase นี่แหละ ขั้นตอนง่ายๆคือ เขียนโค้ดด้วย node.js ที่เราไม่ค่ยถนัด ลงไปใน Inline Editor และอย่าลืมกดตุ่มเปิดมันด้วยฮะ

และเราจะ coding อย่างไรหล่ะ มันมี pattern ของมันอยู่หล่ะสิ

จากรูปด้านบน มันจะมีส่วนของ welcome และ fallback แน่นอน ไม่ต้องไปสนใจมัน

สมมุติให้บอทเราสุ่มเลข 0–99 เอาไว้สำหรับขาหวยเนอะ ให้ชื่อ function ว่า randomLotto แล้วกัน ซึ่งเราสามารถสร้าง function ต่อหลังไปได้เลย แบบนี้

function randomLotto(agent) {
    let result = Math.floor(Math.random() * 100);
    agent.add(result.toString);
    agent.add("ขอบคุณครับ");
}

โดย function นี้จะรับเจ้า agent เข้ามา เพื่อนำผลลัพธ์ที่ได้ไปแสดงในบอทของเรานั่นเอง

เสร็จแล้ว ถ้าเลื่อนลงไปด้านล่างจะเจอโค้ดแบบนี้

let intentMap = new Map();
intentMap.set(...);
agent.handleRequest(intentMap);

เราก็แค่ใส่ function ที่เราสร้างเมื่อกี้ พร้อมด้วยชื่อ intent ที่เราสร้าง สมมุตว่าชื่อ random-lotto แล้วกัน จะเป็นแบบนี้

intentMap.set('random-lotto', randomLotto);

จากนั้นกดปุ่ม DEPLOY แล้วก็ตีมอนใน Ragnarok M แปปนึง ให้ ML มันเรียนรู้ก่อนนะ แล้วค่อยเอาไปลองใช้

เอ๊ะมันง่ายแบบนี้หรอครับพี่เจ้าของบล็อก?

เรารู้ว่ามีคนถามต่อ แน่นอนว่าเรายังไม่ได้พูดเรื่องการ link project Firebase เข้า DialogFlow เลยเนอะ ซึ่งจำวิธีไม่ได้หล่ะ เอาเป็นว่ามีโปรเจกใน Firebase มาก่อนสักตัวนึง แล้วมันสามารถ import เข้ามาใน DialogFlow ได้ เลยทำให้ขั้นตอนมีแค่เขียนโค้ดอย่างเดียว

ตัว function ที่เราสร้าง ใน Inline Editor ทั้งหมดนั้น อยู่ใน function ที่ชื่อว่า dialogFlowFirebase

และ log ก็จะอยู่ในนี้ ถ้าเรียกแล้วไม่มาอาจจะ error ก็ได้ มาส่องเอาเน้อ

ขบวนการรวมร่าง Integration

แน่นอน ว่าเราทุกคน สร้างบอทไปแปะไว้ใน Facebook Messenger หรือไม่ก็ LINE เนอะ

ก่อนจะไปในส่วนของการ Integrations นั้น ขอบอก Tips นิดนึง

จากประสบการณ์การสร้าง chatbot มานั้น พบว่าของ LINE เนี่ยมันสร้าง channel ขึ้นมาปุ๊ป เอาไปใช้ได้เลย แต่เจ้า Facebook Messenger นั้น เราต้อง submit Facebook App ของเรา แล้วมันต้องรอ approve ก่อน

ดังนั้นเราสร้างบอทแล้วเชื่อมต่อ app ของ Facebook ก่อน แล้วค่อยส่ง submit ระหว่างนั้นเจ้าจะมีบอทของฝั่ง submit มาเล่นกับบอทเรา เพื่อพิจารณาในการ approve bot ของเราจ้า และถ้าจะทำ chatbot งานแฮกกาธอนนั้น ใช้ LINE จะดีที่สุดทุกคนนอกจากทีมเราก็สามารถเล่นได้นะ นี่เคยเงิบตอนไม่ได้ส่ง submit ของ Facebook Messenger มาแล้ว

ในส่วนของ Facebook Messenger นั้น สิ่งที่ต้องทำนอกจากสร้างเพจและแอปใน Facebook ก็คือ

หรืออ่านตามนี้ก็ได้

Facebook Messenger | Dialogflow
The Dialogflow Facebook integration allows you to easily create a Facebook Messenger bot with natural language…dialogflow.com

ถ้าเคยใส่ webhook มาแล้วและอยากแก้ ดูตามนี้จ้า

How do I change facebook messenger bot webhook?

I have successfully implemented a facebook bot. It’s working fine. I was trying to change the webhook url now as I have to port it to a different server with a new domain. There is an option to ch...

Stack Overflowdelsanic

จากนั้นส่ง submit ของตัว Facebook Messenger ด้วยนะ ใช้เวลาประมาณ 2 วัน

และในส่วนของ LINE นั้น นอกจากสร้าง bot account แล้ว สิ่งที่ต้องทำคือ

• เอา Channel ID, Channel Secret, Channel Access Token จากใน Channel Settings ใน LINE มาใส่ใน DialogFlow
• ก็อป Webhook URL จาก DialogFlow มาใส่ใน LINE

หรืออ่านตามนี้น่าจะง่ายกว่า

LINE | Dialogflow
Dialogflow’s LINE Integration allows you to easily create LINE bots with natural language understanding based on…dialogflow.com

พี่เจ้าของบล็อกครับ มันต้องเสียเงินไหมครับ เพราะต่อ API ภายนอก Firebase

หลังจากตบตีตอนถ่ายกูโค้ด และลอง downgrade ลงแล้ว พบว่าแค่ package แบบฟรีนั้น ก็ใช้ได้แล้วจ้า

บล็อกนี้เป็นแค่พื้นฐานเพื่อเอาไปเข้าใจเจ้า DialogFlow โดยรวม และแน่นอน บล็อกของจริง ไม่ใช่อันนี้หรอกนะ 55555555555 ส่วนของจริงนั้นกำลังเขียนทั้งบอททั้งบล็อกเลยนะ ตั้งใจให้เป็นบล็อกส่งการบ้านพี่ตี๋เลยแหละ แถมปัญหายุ่บยับก็มีมากมายเชียว หนุกหนานใช้ได้เลยน้องหมีเราเนี่ย

เอาเป็นว่าติดตาม medium นี้ไว้ให้ดี หรือไม่ก็กด like เพจซะดีๆนะ คิคิ~~