คุยผ่าน Sticker ก็รู้เรื่อง! ทดลองสร้าง Chatbot แบบ Sticker-Driven Conversations

Warit Wanwithu
Jan 8 · 3 min read

สวัสดีปีใหม่ครับทุกคน เผลอแว๊บเดียวปี 2021 แล้วหวังว่าปีนี้จะเป็นปีที่ดีของทุกคนนะครับ :) วันนี้มีบทความสนุกๆมาฝากชาว LINE DEV กันครับ เมื่อต้นเดือนที่แล้วทางไลน์ได้ทำการอัพเดท Messaging API โดยเมื่อผู้ใช้ทำการส่ง Sticker มายัง Chatbot จะมีการเพิ่ม keywords พร๊อพเพอร์ตี้ในข้อความประเภท Sticker จาก Webhook payload มาให้ด้วย

มี Keywords แล้วดียังไง?

ก่อนหน้านี้เวลาที่ผู้ใช้ส่ง Sticker มาให้ เราก็จะได้แค่ stickerId กับ packageId ซึ่งแอบเอาไปใช้ต่อได้ยาก เพราะเราไม่สามารถเข้าใจบริบทของสติกเกอร์ได้เลย แต่วันนี้ด้วยkeywords จะเป็นตัวช่วยให้เราเข้าใจความหมาย เข้าใจ Intent หรือความรู้สึกของผู้ใช้ผ่านทาง Sticker มากขึ้น (Wow!)

keywordsที่ได้จะเป็น Array ของคำต่างๆที่มีได้สูงสุด 15 ตัว และตำแหน่งของ Array จะถูก Random ออกมาเสมอ

คุยกับ BMI Chatbot (Dialogflow) ผ่าน Sticker

สิ่งที่ผมจะทำในบทความนี้ก็คือพัฒนาต่อยอดจากตัว BMI Chatbot ของพี่ตี๋ Jirawatee โดยผมต้องการให้ Chatbot เข้าใจ Intent ความต้องการของผมผ่าน Sticker ได้ครับ แต่อย่างที่ทุกคนทราบนะครับตัว Dialogflow สามารถรองรับได้เพียงแค่ข้อความประเภท Text เท่านั้น ดังนั้นวันนี้เราจะต้องสร้าง Server ขึ้นมาเป็นตัว Proxy ก่อนแล้วค่อยส่งต่อข้อมูลต่อไปให้ Dialogflow นั่นเองฮะ

เนื่องจากในบทความนี้เป็นการพัฒนากึ่งๆการทดลอง ผมขอใช้ ngrok รันเป็น Local server และใช้ Node.js ในการพัฒนาครับ ขั้นตอนหลักๆจะมีดังนี้

  1. สร้าง LINE Official Account (Chatbot)
  2. สร้าง BMI Chatbot ด้วย ​Dialogflow
  3. สร้าง Proxy Server
  4. เปิดใช้งาน ngrok
  5. เทรนคำศัพท์ให้ Chatbot เพิ่มใน Dialogflow

1. สร้าง LINE Official Account (Chatbot)

ข้อนี้ใครยังไม่เคยสร้าง LINE Chatbot มาก่อน ให้ทำตามบทความนี้ของพี่ตี๋ได้นะครับ ส่วนใครเคยทำแล้วให้ข้ามไปข้อถัดไปได้เลย

2. สร้าง BMI Chatbot ด้วย Dialogflow

อย่างที่เกริ่นไว้นะครับ ใครยังไม่มี BMI Chatbot ลุยตามบทความด้านล่างนี้ได้เลย

3. สร้าง Proxy Server

ขั้นตอนนี้จะเป็นการเขียนเว็บแอปด้วย Node.js เพื่อรับ Webhook ที่ถูกส่งจากไลน์เมื่อผู้ใช้ส่งข้อความเข้ามาให้ Chatbot ของเรา จากนั้นเราจะมาแกะเอา keywords เพื่อทำการปั้นข้อความขึ้นมาใหม่ และทำการส่งต่อไปยัง Dialogflow ครับ

หลักการในการปั้นข้อความประเภท Text ขึ้นมาใหม่ก็คือ

  • เราจะต้องทำการแปลงจากข้อความประเภท Sticker ไปเป็นข้อความประเภท Text เพื่อให้ Dialogflow เข้าใจได้นั่นเอง ซึ่งจริงๆเราจะเอา keywords ทั้งหมดแล้วส่งไปก็ได้ แต่ถ้าสังเกตดูดีๆความหมายใน keywords มันกว้างมาก (เช่น cony, sally, line,.. มาด้วย) อาจจะทำให้ Dialogflow ทำการตีความ Intent ยากขึ้น ผมเลยลอง Random keywords มาแค่ 3 ตัวเพื่อส่งไปให้ Dialogflow ครับ
 keywords = event.message.keywords;
stickerIntent = "";
(var i = 0; i <= 2; i++) {
stickerIntent += randomItem(keywords) + " ";
}
...
randomItem(items) {
items[.floor(.random() * items.length)];
}
  • ตัวนี้มีความ Tricky มากกก คือในบทความก่อนหน้านี้เราสามารถโมแค่ ‘x-line-signature’ กับ ‘hosts’ ก่อนที่จะส่งต่อไปยัง Dialogflow แต่ๆๆๆๆด้วยความที่เราทำการปั้นตัว Body ขึ้นมาใหม่ ทำให้เราต้องไปแก้ไขค่าที่ชื่อว่า ด้วย!!!
req.headers["x-line-signature"] = crypto.createHmac('SHA256', LINE_CHANNEL_SECRET).update(body).digest('base64').toString();req.headers.host = "dialogflow.cloud.google.com";

คือตอนแรกผมลองส่งต่อยังไง Dialogflow (เธอ)ก็ไม่มีเยื่อใย ปัดผมทิ้งตลอด 🥺 หลังจากนั้นผมมาปรึกษาพี่ตี๋ ซึ่งเราก็นั่งงมกันหลายชั่วโมงเลย พอสุดท้ายช๊อตที่เราหาเจอว่าต้องแก้ content-length ด้วยเท่านั้นแระ…

ดีใจกันแบบเฮลั่นห้อง!! 5555+ (เชื่อว่าหลายคนน่าจะเคยเป็นแบบเรา)

โค้ดทั้งหมดของ index.js

4. เปิดใช้งาน ngrok

สำหรับมือใหม่ที่ยังไม่เคยใช้ ngrok มาก่อน แนะนำให้ทำตามบทความนี้ได้นะครับ มือเก๋าก็ให้เปิดใช้งาน ngrok ที่ port 3000 โล้ด!

ngrok http 3000

จากนั้นก็เหมือนเดิมให้เอา URL ที่ได้จาก ngrok และเติม /webhook ไปใส่ใน Channel ของ Chatbot เราด้วยนะครับ

5. เทรนคำศัพท์ให้ Chatbot เพิ่มใน Dialogflow

ฟีเจอร์พระเอกของ Dialogflow เลยที่เราสามารถใส่ประโยคตัวอย่างของแต่ละ Intent เข้าไปได้ เนื่องจาก BMI Chatbot เราเลือกเป็นภาษาไทย ส่วนตัว keywords ทั้งหมดจะเป็นภาษาอังกฤษเราเลยต้องมาเทรนคำศัพท์เพิ่มเติมด้วยครับ

5.1 Default Welcome Intent

5.2 BMI Intent

5.3 BMI — custom — yes Intent

Demo

สรุป

บทความนี้ก็ประมาณนี้ครับ เป็น Tips เล็กๆหน่อยๆที่เพิ่มลูกเล่นทำให้ Chatbot เข้าใจ Intent ของผู้ใช้งานผ่านข้อความประเภท Sticker ลองเอาไปประยุกต์ใช้กันดูนะครับผม :)

Keywords experimental phase —ขณะนี้ตัว keywords ยังอยู่ในขั้นทดลอง ซึ่งในอนาคตอาจจะหยุดใช้งานหรือมีการเปลี่ยนแปลงได้นะครับ

Reference

LINE Developers Thailand

Closing the distance.

LINE Developers Thailand

Closing the distance. Our mission is to bring people, information and services closer together

Warit Wanwithu

Written by

Gym geek, Japan Otaku and Life long learner.

LINE Developers Thailand

Closing the distance. Our mission is to bring people, information and services closer together

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store