[Dialogflow x LINE] สร้าง Chatbot LINE แบบง่ายๆ ด้วย Dialogflow และ LINE Bot Designer กันเถอะ

Kajornsak P.

Follow

Published in

LINE Developers Thailand

7 min readMay 28, 2018

--

หลังจากที่ลองได้เล่น LINE Messaging API มาซักพัก เพื่อลองทำ Chatbot ไว้เล่นเอง ซึ่งก็เจอปัญหาที่ต้องมา setup bot server ขึ้นมาเองโดยใช้ตัว chatbot sdk ซึ่งก็ง่ายอยู่พอสมควร แต่ปัญหาที่เจอก็คือ การ interpret ข้อความที่ User ส่งมานั่นเอง แล้วค่อย handle ไปตามเคสนั่นเอง

จะดีกว่าไหมถ้าไม่ต้องมาจัดการเรื่อง NLP เอาเอง โดยใช้ Google Dialogflow (api.ai เจ้าเก่า) เข้ามาช่วยนั่นเอง (ซึ่งมัน integrate เข้ากับ Chatbot ได้ง่ายมากๆ แค่ไม่กี่คลิก)

ป.ล.บทความนี้ดองไว้นานมากก ตั้งแต่ก่อนไป I/O จนกลับมาพึ่งจะมีเวลาเขียนต่อ 555

เริ่ม!

สิ่งแรกเลยที่ขาดไม่ได้ คือเจ้า Dialogflow นั่นเอง ใครที่ยังเคยใช้หรือยังไม่ได้สร้าง ก็เข้าไปสร้างได้เลยที่ https://dialogflow.com กดสร้างง่ายยิ่งกว่า Firebase ซะอีก

ซึ่งเจ้าตัวที่จะช่วยเรา handle chat ที่เข้ามา เรียกว่า Agent นั่นเอง ซึ่งสามารถช่วยเรื่อง NLP ได้เยอะมาก ทั้งการหา Intent,Entity จากแชทของผู้ใช้ หรือการ Extract parameter ออกมาจากประโยค เพื่อดึงค่าบางอย่างมาใช้

แถมยังรองรับการ Integrate เข้ากับ ระบบ Chatbot ของแต่ละ platform ด้วย

ซึ่งวิธีที่จะทดสอบ Dialogflow นั้นก็ไม่ยาก เนื่องจากตัวมันเองก็ support Google Assistant อยู่แล้ว ในหน้า console เลยมีแผงทดสอบและปุ่มให้ลิ้งค์ไป Google Assistant ด้วยนั่นเอง

ลองสร้าง intent กันดีกว่า

แต่ละอันเป็น dropdown ให้ปรับแต่ง intent ได้

เมื่อทำการกดสร้าง Intent ใหม่ขึ้นมา ตัวหน้า console ก็จะให้เรา config intent ใหม่อันนี้ได้ ตามในรูป ซึ่งประกอบไปด้วย

Context : สิ่งที่ช่วยให้เรา pass ค่าต่างๆข้าม intent ได้ก็คือ context นี่เอง คล้ายๆกับการใช้ memcached เวลาทำ chatbot server เพื่อเก็บค่าของ user คนนั้นๆ ณ ช่วง session นั้น
Event : เป็นตัวที่ใช้แยกได้ว่า intent นี้ถูก triggered มาจากอะไร เช่น welcome message ทั้งหลาย สามารถดักที่ event ได้แล้วส่งข้อความกลับไปให้ user นั่นเอง
Training phrase : พระเอกหลักของการสร้าง intent นี่เอก โดยเราสามารถใส่ประโยคตัวอย่างของ intent นี้เข้าไปได้ (มากกว่า 1 ประโยค) โดยที่ประโยคนั้นไม่จำเป็นต้องเหมือนกับ user input ก็ได้ แค่มี keyword ที่ตรง เจ้า Dialogflow ก็จะ learn จากที่เรากรอก แล้ว map user input เข้ากับ intent นี้ให้นั่นเอง (ไม่ต้องทำ nlp เองเลย)
Action and parameter : เจ้า Dialogflow สามารถ extract entity ออกมาจาก user input ได้เช่นกัน ถ้าเรากำหนดตัว parameter ไว้ พร้อมระบุชนิดของ entity เช่น เวลา,ชื่อภาษา,ชื่อประเทศ,ชื่อหน่วยเงิน เพื่อที่เอาไปใช้ต่อที่อื่นได้ง่ายๆ โดยไม่ต้องมาดักจับเอง

Response : อีกหนึ่งพระเอกหลักของ intent (แหงสิ ไม่งั้นจะตอบกลับได้ยังไง) เจ้าตัว response คือรูปแบบของสิ่งที่เราต้องการตอบกลับไปหา user ใน intent นั้นๆ สามารถเป็นได้ตั้งแต่ plain text ธรรมดา, custom json, หรือ template chatbot response ของแต่ละ platform ก็ได้

Template response จะแตกต่างกันไปขึ้นอยู่กับ platform นั้นๆ (ไม่มี LINE)

Fulfillment : ส่วนนี้คือการโยน intent นี้ไปให้ webhook ใน server ของเรา เพื่อทำการ customize อย่างอื่นๆ หรือ manipulate data ต่างๆก็ได้ เช่นการ hook เข้ากับ firebase cloud functions หรือ nodejs server ปกติทั่วๆไป

ซึ่งแต่ละอันจะมี Custom payload ให้เลือกด้วย เพื่อทำการ customize response ด้วย JSON (Template ที่เค้ามีให้จริงๆแล้วก็คือ JSON ที่เขียนตาม API ของแต่ละ platform นั่นเอง)

เป็น field เปล่าๆให้พิมพ์เลย ไม่มีตัวช่วยใดๆ

กลับมาที่หัวข้อหลักของบทความนี้

LINE Integration

https://developers.line.me/en/docs/messaging-api/reference/#message-objects

LINE Messaging API ได้เขียน docs ไว้ให้ สำหรับการทำ message object response ต่างๆ ซึ่งมีทั้งหมด 8 ชนิด ( ณ วันที่เขียนบทความ) ซึ่งแต่ละชนิดต่างกันยังไงก็ลองเข้าไปอ่านดูใน docs ได้ครับ

ลองสร้าง response LINE ซักอันนึง

จาก docs ถ้าต้องการสร้าง text message ปกติ ให้ใช้ JSON format นี้ ก็คือมีชนิดของ message และเนื้อหาของ message นั้น

{     
    "type": "text",     
    "text": "Hello, world" 
}

ลองสร้าง intent ใน Dialogflow ดูซักอันนึง โดยใช้ training phrases ง่ายๆสำหรับกรณีที่ user ทัก chatbot ตัวนี้

เพื่ม training phrases และ custom payload เข้าไปเลย

{
  "line": {
    "type": "text",
    "text": "Hello from Dialogflow"
  }
}

สังเกตดีๆว่า JSON response ที่เรา custom จะอยู่ข้างใน key “line” อีกที เพื่อบอกให้ Dialogflow รู้ว่าเป็น response สำหรับแอป LINE เท่านั้น

จากนั้นก็ทำการ save intent เพื่อให้ Dialogflow train ประโยคของเราซะ

อย่าลืม! ทำการเปิด Integration เข้ากับ LINE ก่อนนะ ซึ่งขั้นตอนไม่ยากมาก ทำตาม docs ของ Dialogflow และ LINE Messaging API ได้เลย (ลบ Auto-reply message ใน LINE@ ด้วยนะ ไม่งั้นมันจะใช้ของ LINE@ ตอบกลับแทน)

จากนั้นก็ลองส่งข้อความใน LINE ได้เลย

แล้วถ้าต้องการให้ตอบมากกว่า 1 แบบหล่ะ

Dialogflow ก็จะ random response ให้จาก intent นั้นๆนั่นเอง

กลับมาต่อที่เนื้อเรื่องหลักของบทความกันเถอะ

เท่าที่เห็นข้างบน จะพบว่าการทำ Chatbot ของ LINE โดยใช้ Dialogflow นั้นง่ายมาก โดยเฉพาะข้อความที่เป็น text response นั้นแทบจะไม่ต้องทำอะไรเลย ซึ่งเหมาะกับ static content อย่างมาก…แต่ถ้าเราต้องการให้มันมีลูกเล่นมากกว่านั้นหล่ะ?

LINE message objects

อย่างที่เคยได้บอกไว้ Line message object นั้นมีหลายประเภทมาก แต่ละอันก็จะมีจุดประสงค์ที่แตกต่างกัน ลองมาดูแต่ละอันกันดีกว่า

สังเกตตรง JSON ของแต่ละอันให้ดีๆ ทุกอันได้มาจาก line bot designer หมดเลยเน้อ

Text Message

https://developers.line.me/en/docs/messaging-api/reference/#wh-text

Sticker Message

https://developers.line.me/en/docs/messaging-api/message-types/#stickers

Image Message

https://developers.line.me/en/docs/messaging-api/message-types/#image

Video Message

ของจริง URL ต้องเป็น HTTPS เน้อ อันนี้ใช้เพื่อ preview เฉยๆ

Audio Message

https://developers.line.me/en/docs/messaging-api/message-types/#audio

Location Message

https://developers.line.me/en/docs/messaging-api/message-types/#location

Imagemap Message

Imagemap จะคล้ายๆกับ Template message ตรงที่ User สามารถกดที่รูปเพื่อมี Interaction กลับมาที่ Chat ได้นั่นเอง (ซึ่งถ้าไม่มี LINE Bot Designer มันจะลำบากนิดนึง ตรงที่มาวัด rectangle เองเนี่ยแหละ)

และอันสุดท้ายย Template message~

Template Message

ซึ่งเทียบกับ Message ที่ผ่านมา Template ถือว่าเป็น Message ที่ซับซ้อนที่สุดแล้ว เนื่องจากมันสามารถมี Interaction ได้หลายแบบ และตัวมันเองแบ่งออกเป็นอีก 4 ประเภทย่อย 5555 ทำให้มันดูยากสุด (แต่ก็ยังง่ายเมื่อมี Bot Designer) สามารถเข้าไปดูรายละเอียดได้ที่นี่

ป.ล. จริงๆแล้วใน Docs ของ LINE Messaging API นั้นเขียนอธิบายไว้ละเอียดมาก สามารถเข้าไปอ่านรายละเอียดได้ทุกอย่างที่กล่าวมาข้างต้นได้เลย

Template Message ทั้ง 4 ประเภทได้แก่

Buttons สำหรับปุ่มกดทั่วๆไป ที่มี Action ต่างๆได้
Confirm คล้ายๆกับ Buttons แต่ว่าไม่มีรูป ไม่มี Title มี Action ได้แค่สองอย่าง (ประมาณ 2 choices decision)
Carousel คล้ายๆกับ Buttons แต่มีหลายอัน เหมาะสำหรับให้ User เลือกได้หลายแบบนั่นเอง (เช่นโชว์ list ของสินค้า แล้วกดซื้อได้ ไรงี้)
Image carousel (ณ วันที่เขียน LINE Bot Designer ยังไม่รองรับ type นี้นาจา) อันนี้เหมือนกับ Carousel แต่มีแค่รูปเป็นหลักเลย เหมาะกับ Catalog สินค้ามากๆ

ซึ่งถ้าต้องมาเขียน JSON เองดิบๆ ก็คงจะลำบากน่าดูเลย ดังนั้น LINE Bot Designer จึงเข้ามาช่วยในส่วนนี้นั่นเอง (ยกเว้นจะใช้ line bot sdk เพื่อสร้าง response message, ซึ่งเราไม่ได้ใช้ เพราะใช้ Dialogflow จัดการให้ทุกอย่างไงล่ะ)

LINE Bot Designer

พระรองของงานนี้ (พระเอกยกให้ Dialogflow ละกัน)

ซึ่ง LINE Bot Designer เปิดตัวมาซักพักแล้วหล่ะ แล้วก็เป็นหนึ่งในเครื่องมือที่ดีมากๆ ในการช่วยออกแบบ Chat bot ของ LINE นั่นเอง ทำได้ทั้ง generate message แบบต่างๆ หรือ จำลอง flow การแชท ก็ได้ แถมยังมีตัวอย่าง project ให้ลองตั้งสามแบบ ทั้ง Coupon, Event และ Reservation

JSON ที่ยาวเหยียด สามารถสร้างออกมาได้เพียงแค่กรอกลง Template นั่นเอง

จำลองบนรูป device ก็ได้ โดยไม่ต้องแชทจริงๆ (สะดวกสำหรับการทำ mockup มาก)

ซึ่งเจ้าตัว JSON ที่ได้มาเนี่ยแหละ จะทำให้ชีวิตของเราง่ายขึ้นเมื่อนำไปใช้กับ Dialogflow Custom Payload…เพราะมันใช้ JSON เหมือนกันนี่เอง และสิ่งที่อยู่ใน Payload ก็คือ JSON ตาม format ของ platform นั้นๆนั่นเอง

ตัดภาพกลับมาที่ Dialogflow

ลองให้ Dialogflow ส่งอะไรที่เป็น Message object กลับมาให้ดูซักอันนึงก็ได้ โดยการสร้าง intent ใหม่ขึ้นมา train ให้มันรู้จักตอบเวลาถามว่าอยู่ที่ไหน แล้วก็จัดการใส่ response Location message ให้มันซะ

หรือจะนำไปใช้กับพวก template message ที่ซับซ้อนก็ได้ แต่ถ้าอยากเก็บข้อมูลที่ได้จาก User แนะนำว่าควร setup line bot sdk ขึ้นมาซะ เพราะตัว Dialogflow หลักๆนำมาช่วยเรื่อง NLP เท่านั้น การจัดการ business logic ยังคงอยู่ที่ฝั่ง server ของเรา (เพียงแค่เปิดใช้ fullfilment ที่เคยบอกไว้ แค่นี้ message จาก user ก็จะถูก forward ต่อไปยัง webhook ของ chatbot server ที่เราเปิดไว้นั่นเอง)

สรุป!

Q : Combo เบื้องต้นนี้ช่วยอะไรได้บ้าง หรือมันดียังไงหล่ะ?

A : เหมาะกับคนที่ต้องการทำ Chatbot แบบ static content พอสมควร โดยข้ามขั้นตอนการทำ nlp เบื้องต้นไปได้เลย แถมใช้ LINE Bot Designer ช่วยออกแบบรูปแบบ response ได้อีกด้วย

Q : ถ้าอยากทำบอทแบบ dynamic นั้นจะยากไหม?

A : เราสามารถใช้ Action and parameters ช่วยในการจัดการ input ของ user ได้ แล้วส่งต่อให้หลังบ้านเรา process ต่อไปก็ได้เช่นกัน

Q : แล้วทำ server chat bot โดยใช้ LINE bot sdk เลยตั้งแต่แรกไม่ง่ายกว่าหรอ? ไม่ต้องสร้าง JSON message เองด้วย

A : ส่วนตัวขอบอกว่าการใช้ bot sdk นั้นง่ายกว่าก็จริง แต่!! ถ้าเราอยาก integrate ระบบแชทของเราเข้ากับหลายๆ platform หล่ะ? ต้อง setup แยกเรียงตัว แยกระบบ nlpไหม ต้องมาวาง structure ระบบอีก ซึ่ง Dialogflow จัดการให้เราแล้ว แถมถ้า design ดีๆ สามารถ abstract ระบบหลังบ้านออกมาเพื่อแชร์ระหว่าง platform ได้อีกด้วย

ซึ่งบทความนี้จริงๆแล้ว แค่อยากลองเล่น Dialogflow เฉยๆ บวกกับความขี้เกียจ setup chatbot server ขึ้นมาเอง เลยอยากลอง integrate ของสองอย่างนี้เข้าด้วยกัน ซึ่งจริงๆตอนแรกก็เขียนเล่นๆแหละ แต่ดันติดลม เลยออกมาเป็นบทความซะงั้น

Updated จ้า (12/10/2018)

หลังจากที่ปล่อยบทความไป ทาง LINE Messaging API และ LINE Bot Designer เองก็มีอัพเดตเพิ่มขึ้นมาเยอะเลย

Flex message

อีกหนึ่งรูปแบบของ message LINE นั่นก็คือ Flex message นั่นเอง ซึ่งใครที่ยังไม่รู้จัก Flex message นั้นน ขอให้ pause บทความนี้ แล้วไปอ่านที่บทความนี้ก่อนเลยย