ทำ chatbot สุ่มอาหาร บน LINE ผ่าน Dialogflow

เรียกง่ายๆ คือบล็อกส่งการบ้านพี่ตี๋นั่นเอง 555

ก่อนที่ผู้อ่านจะมาอ่านบล็อกนี้ เราได้เขียนบล็อกแยกไว้ เนื่องจากเราลองทำเองแล้วรู้สึกว่าควรจะรู้จัก DialogFlow มากกว่านี้นิดนึง

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

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

MikkiPastel StudioMinseo Chayabanjonglerd

เนื่องจากเราได้ไปงาน Firebase Dev Day แล้วได้เห็นพี่ตี๋ Jirawatee โชว์การทำ chatbot บน Dialogflow อย่างง่ายดาย เลยคิดว่ามาลองทำเองดีกว่า ก่อนหน้านี้อ่านบล็อกมาเยอะแล้วไม่เข้าใจ ไม่เข้าใจอะไรรู้ไหม ไม่เข้าใจเจ้า Dialogflow ว่าอันนี้คืออะไร อันนั้นคืออะไรงี้ไง 555 พอดูอันนี้เนี่ย เก็ทเลย (จริงๆเก็ทตั้งแต่อ่านบล็อกแล้ว)

อย่ามัวชักช้า มาเริ่มกันเลยดีกว่า

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

ของ google เขามี design checklist ด้วย ดูตามนี้เลยยยยย

เมื่อทะเลาะตบตีกับตัวเองได้แล้ว เรามาเตรียมของสำหรับสร้างบอทกันเถอะ

เปิด DialogFlow

ตัวโปรเจกเราแอบเชื่อมกับพี่หมีมาแล้วววว

ด้วยความที่มันใช้ v1 เราต้องไปใช้ v2 นะ ซึ่งเรายังไม่ได้สร้างอะไรเลยนะเอาจริงๆ

เจอปัญหา default language เป็นภาษาอังกฤษ เพราะเราชอบ set default เป็นภาษาอังกฤษ 555 ทำได้แต่เพิ่มภาษาไทย ฮืออออ เปลี่ยนไม่ได้ง่ะ

สรุป ต้องสร้างภาษาไทยแต่แรกเลย แล้วค่อยเพิ่มภาษาอังกฤษ เพราะมันจะเข้าใจภาษา default ก่อน

มาเริ่มสร้าง Intent กันเถอะ

อ่ะ งั้นมาสร้างเพิ่มกันเลยดีกว่าเนาะ มันจะมี default 2 ตัว คือ

Default Fallback Intent ถ้าพูดแล้วน้องหมีไม่เข้าใจ ก็จะตอบแบบนี้ random กันไป (ซึ่งน้องหมีเราวางคาแรคเตอร์เป็นผู้ชาย เลยไล่แก้เป็นครับ 555)

Default Welcome Intent อันนี้แหละของจริง เป็นคำพูดปลุกน้องหมีให้เรามาคุยกับเรา เป็นคำทักทายน้องหมี

แต่ไม่จบแค่นี้หล่ะ แค่ทักทายจะสุ่มอาหารได้ไง ดู flowchart สิ

จากนั้นกดสร้าง Intent ใหม่ซะ โดยกด Create Intent ปุ่มฟ้าๆด้านบน

สิ่งที่เราต้องทำ คือ เพิ่มเจ้า Training Phases เพื่อให้น้องหมีเรียนรู้ว่า user เขาอยากสุ่มข้าวแกแล้วนะเจ้าหมี

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

ทำ Quick Reply กันเถอะ

นึกถึงคลิปที่พี่ตี๋โพสลง Facebook เอ๊ะ ใช้ smart reply ได้ไหมนะ

ของ Facebook มันเรียกว่า Quick Reply เนาะ ที่มันจะมีให้เลือกด้านล่าง เพิ่มโล้ดด

ข้อควรระวัง ตอนกดมันจะมีสองแถวเนอะ แถวแรกให้ใส่เป็น text ที่ต้องการให้ขึ้น และตามด้วยตัวเลือกจ้า

แล้วของ LINE หล่ะ จงดูวิธีการเพิ่มจ้า

แล้วเพิ่ม Quick Replies ได้เลย เย้ๆ แล้ว response ก็สามารถใส่ได้มากกว่า 1 อันนะ

เมื่อทดลองทั้งสอง platform พบว่าของ LINE ไม่ขึ้น พอไปจิ้มเจ้า ? บอกไม่ support เฮ้ย ตกใจดิรอไร

สำหรับของไลน์ดันไม่ขึ้น สิ่งที่ต้องทำคือ ลบ message ทุกอย่างในแท็บของไลน์ แล้วไปทำ custom playload ที่ tab default โครงสร้างหน้าตาเป็นแบบนี้

{
  "line": {
    "type": "text",
    "text": "อยากกินกับอะไร"
  }
}

จากนั้นใส่ไปตาม template นี้

Using quick replies | 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

สุดท้ายได้มาแบบนี้

สรุปก็ได้ Quick Reply มาเหนื่อยๆ เห้ออออ

เมื่อเลือกได้แล้วน้องหมีจะทำการสุ่มอาหาร แล้วจะสุ่มอย่างไรหล่ะเนี่ย แน่นอนว่าเราต้องเพิ่ม Intent ของ Intent และเรานำเนื้อสัตว์ที่ user เลือก เอาไปสุ่มเมนูอาหาร

จากนั้นจิ้ม fullfillment เพื่อให้หลังบ้านสุ่มเมนูให้น้องหมี จากนั้นไปที่ tab fullfillment เลยจย้าาา

แน่นอนเรากดเลือกอันนี้ เพราะใช้ Firebase Cloud Function นั่นเองงง

สุดท้ายโค้ดเป็นดังนี้

แน่นอนก่อนข้ามผ่านขั้นตอนก็ต้องกด save เนอะ เดี่ยว bot ไม่ update

ลองเพิ่ม Follow-up Intent

ในส่วนการทำงานของบอทมีแค่สุ่มแหละ แต่ด้วยความสุ่มนั้นบางทีทำให้ user รู้สึกว่า ไม่ถูกใจโว้ยยยย ของสุ่มใหม่ได้ป่ะ ดังนั้นจึงเพิ่ม Intent 2 อัน นั่นคือ yes และ no นั่นเอง กดเพิ่มเหมือนเดิม Add Follow-up Intent

ปล. มันจะใส่ training phase เป็น default ให้ด้วย

• yes : user โอเค จบ ก็ขอบคุณเขาสักหน่อยก่อนไป แล้วหยุดการทำงานของบอทจนกว่าเราจะมาพบกันใหม่ เย่ะ แน่นอนว่าใส่ Text response และติ๊ก Set This intent as end of conversation คือ เราจบกันที่นี่

• no : ไม่เอา จะสุ่มใหม่ มันจะวกไปที่สุ่มเมนูอีกครั้ง แต่เราควรถาม user ว่าจะสุ่มใหม่อ่ะเปล่า

แต่ปัญหาคือ เราจะใช้ intent ซํ้า อย่างไร เพราะเราลองใส่ไปแบบที่คิดว่าได้ แต่ไม่ได้ไง แล้วอะไรคืออันที่ถูกต้องหล่ะ

ดังนั้นจบแค่นี้แล้วกัน ถ้าอยากสุ่มให้ user บอกน้องหมีเองแล้วกัน แงงงง

จึงไปติ๊กที่ Set this intent as end of conversation เพื่อจบลูปการสุ่มอาหาร

และเมื่อไหร่เราจึงจะใช้ Entites หล่ะ

ก่อนอื่นโยน document เข้าไปอ่านเล่นๆก่อน

Create and manage entities | Dialogflow
When setting up your agent, it's best to define your entities prior to adding the training phrases to your intents…dialogflow.com

ความหมายมันก็คือ การสร้างกลุ่มของสิ่งๆนึง คล้ายๆ enum นั่นแหละ เช่น size เสื้อ จะมีแค่ ss, s, m, l, xl เท่านั้น อะไรงี้ เราสร้าง Entry 1 อันที่สามารถนำไปใช้ใน chatbot ได้ด้วย

ก่อนอื่นกดสร้าง Entites ซึ่งไม่ต่างอะไรกับ Intent แถมมีอะไรให้เราอ่านก่อนสร้างด้วย

เมื่อกดสร้างแล้ว เรามาตั้งชื่อของมัน ซึ่งเรื่อง naming จะทำให้เราจำได้ว่าอันนี้คืออะไร และค่ามีอะไรที่เกี่ยวข้องบ้าง ในที่นี้คือเนื้อสัตว์ต่างๆนั่นเอง

การนำไปใช้ ก็จะใช้ใน Intent ที่เราต้องการ มองว่ามันเป็นประเภทตัวแปรตัวนึง และนำไปใช้ตอนรับค่าจาก user ที่ Action and parameters นั่นเอง

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

ปล. ขอตัดเรื่อง integration ออก เนื่องจากเขียนไปในบล็อกก่อนหน้านี้แล้ว

ช่องทางก่อกวนน้องหมี

• Facebook Messenger

Messenger
Edit descriptionm.me

• LINE

LINE Add Friend
Open the Friends tab in your LINE app, tap the add friends icon in the top right, select "QR code," and then scan this…line.me

เสียใจด้วยที่แบ่งสองตอน ถ้าใน feature สุ่มอาหาร ถือว่าเสร็จไปแล้วสำหรับเรา ถึงแม้มันจะ reuse intent ไม่ได้ก็ตาม แต่ยังเหลือมาม่าเสี่ยงทาย และการ fulfillment บางอย่างให้น้องหมีเราน่าสนใจยิ่งขึ้น ก็กำลังปั่นตอนจบอยู่ ไม่รู้เขียนเสร็จและปล่อยบล็อกเมื่อไหร่ 555

อย่าลืมกด Like และติดตามเพจกันด้วยนะ เผื่อมีบทความที่น่าสนใจได้อ่านกัน