เพิ่มความน่าสนใจให้ LINE Bot ด้วยการส่งข้อความรูปแบบต่างๆผ่าน Dialogflow

กระแสการพัฒนา LINE Bot ด้วย Dialogflow ช่วงนี้ถือว่ามาแรงมาก สังเกตได้จากคำถามเกี่ยวกับเรื่องนี้ใน LINE Developers Thailand ที่มีมาตลอด และหนึ่งในคำถามที่น่าสนใจก็คือ จะส่ง Message รูปแบบต่างๆของ LINE ผ่าน Dialogflow แทนที่จะเป็น Text อย่างเดียว ได้หมือไร่ เอ้ย หรือไม่

คำตอบก็คือ…“ทำได้จ้า” และง่ายด้วย วันนี้ผมเลยจะมาเฉลยข้อสอบเรื่องนี้ให้ทุกคนสามารถกลับไปพัฒนา LINE Bot ของตัวเองให้น่าสนใจมากยิ่งขึ้น

Required: ใครก็ตามที่ไม่เคยสร้าง LINE Bot ด้วย Dialogflow มาก่อน แล้วหลงมาเจอบทความนี้ คุณจำเป็นต้องอ่านบทความด้านล่างนี้ก่อน ย้ำว่า “จำเป็น”

เรียนรู้การ Integrate LINE Bot เข้ากับ Dialogflow และ Firebase ผ่าน BMI Bot

Optional: ใครที่ต้องการให้ LINE Bot เชื่อมต่อฐานข้อมูลผ่าน Dialogflow ไม่ว่าจะเป็น Cloud Firestore หรือ Firebase Realtime Database สามารถอ่านวิธีการจากบทความด้านล่างนี้ครับ

เชื่อมต่อ Realtime DB และ Firestore จาก Dialogflow เพื่อให้ LINE Bot ของคุณเจ๋งกว่าเดิม

ส่วนเนื้อหาในบทความนี้จะแยกเป็น 2 ส่วน

1. การ Custom Message ผ่าน Intents
2. การ Custom Message ผ่าน Fullfillment

ถ้าพร้อมแล้วก็ไปลุยกันเลย!

1. การ Custom Message ผ่าน Intents

การสร้าง Custom Message ใน Responses ผ่าน Intents จะมีอยู่ด้วยกัน 2 วิธี

1.1 สร้าง Custom Payload ด้วย JSON

วิธีนี้เราสามารถตอบกลับด้วย Message objects ทุกรูปแบบใน LINE ทั้ง Text, Sticker, Image, Video, Audio, Location, Imagemap, Template และ Flex Message

ตัวอย่าง Text, Sticker, Image, Video, Audio

ตัวอย่าง Location, Imagemap, Templates

เริ่มจากคลิก Add Responses แล้วเลือก Custom payload จากนั้นก็ระบุ JSON ของรูปแบบ LINE message ที่ต้องการ โดยให้ object ชื่อ line อยู่วงนอกสุด

{
    "line": {
        ...
    }
}

ตัวอย่างนี้จะเป็นการตอบกลับที่มีทั้ง Text ซึ่งเป็น response แบบปกติ และ Image message ที่เป็น custom payload

ผลลัพธ์ที่ได้ก็จะมาทั้ง Text และ Image ละ

1.2 สร้าง Message จาก Template ที่ Dialogflow เตรียมมาให้ LINE

Dialogflow เพิ่งจะออกเครื่องมือให้เราสร้าง Custom message สำหรับ LINE เมื่อไม่กี่เดือนที่ผ่านมา โดยหากต้องการใช้งานให้เราคลิก + แล้วเลือก LINE ในส่วนของ Responses ตามรูป

• A: คือ Response tab เฉพาะสำหรับ LINE
• B: Toggle ที่หากเราเปิด จะรวม Responses จาก tab แรก หรือ Default มาด้วย
• C: เพิ่ม Response โดยตอนนี้เราสามารถสร้าง Text, Image และ Buttons template(ในชื่อ Card และ Quick repiles) สำหรับ LINE ได้

มาดูตัวอย่างกัน ผมจะเลือกเพิ่ม Card ซึ่งเป็น Buttons template ใน LINE ในการ confirm น้ำหนักและส่วนสูงกับผู้ใช้ โดยเราสามารถระบุรูปภาพ ข้อความ และปุ่มลงไปได้

เสร็จแล้วก็กด Save ด้วยนะ จากนั้นมาดูตัวอย่างกัน

ง่ายไปอี๊ก!!!

2. การ Custom Message ผ่าน Fulfillment

สำหรับ Fulfillment ในบทความนี้ผมจะเลือกใช้ Inline Editor ในการเขียนโปรแกรม โดยเริ่มจากเลือกเมนู Fulfillment ทางด้านซ้าย แล้วคลิกเลือก Tab ชื่อ package.json ซึ่งอยู่ในส่วนของ Inline Editor ดังภาพ

ใน Tab ชื่อ package.json นี้ เราจำเป็นต้องอัพเดท dependency ที่ชื่อ dialogflow-fulfillment ให้เป็นเวอร์ชัน 0.6.1 หรือสูงกว่า(default ที่ให้มาคือ 0.5.0) เพื่อที่จะสามารถ custom message ของ LINE ได้ ส่วน dependencies ตัวอื่นๆนั้นแล้วแต่ศรัทธา

เสร็จแล้วก็กลับมาเขียนโค้ดกันต่อที่ Tab ชื่อ index.js ซึ่งตามที่ทุกท่านทราบ คำสั่งที่ใช้สำหรับการพ่น Text กลับไปหาผู้ใช้คือ

agent.add(`ข้อความที่คุณต้องการ`);

คราวนี้ถ้าเราต้องการส่งข้อความประเภทอื่นๆใน LINE หละ?

ตัวอย่าง Flex Message

บอกเลยว่าง่ายกว่าที่คุณกำลังคิดแน่นอน เอาหละ บทความนี้จะยกตัวอย่างให้ดูกรณีที่ต้องการจะส่ง Text พร้อมกับ Sticker กลับไปหาผู้ใช้ โดยเอา BMI Bot ที่เชื่อมต่อ Cloud Firestore จากบทความก่อนหน้านี้มาต่อยอด

โค้ดจากบทความ https://medium.com/linedevth/cd47b89eedcd

จะเห็นว่าบทความก่อนหน้านี้ เราได้คำนวนค่า BMI และได้ size แต่ละช่วงมาแล้ว จากนั้นก็ส่ง size ไปดึงการแปลผลจาก Cloud Firestore

คราวนี้ ผมจะแทรก Sticker ชุดใหม่ล่าสัตว์ เอ้ย ล่าสุด ซึ่งเป็นชุด animation ที่ LINE เตรียมไว้ให้ LINE Bot ไปใช้ https://developers.line.biz/media/messaging-api/sticker_list.pdf ตามช่วงของ size ดังนี้

Size XS เป็น Edward

Size S เป็น Sally

Size M เป็น Cony

Size L เป็น Brown

Size XL เป็นเจ้า Pangyo

น่ารักเลยช่ายมะ เมื่อเรารู้เลขชุด และ Sticker ID แล้ว ก็มา map กับแต่ละช่วงกันเลย

let result = 'none';
let pkgId = '1';
let stkId = '1';
if (bmi < 18.5) {
  pkgId = '11538';
  stkId = '51626519';
  result = 'xs';
} else if (bmi >= 18.5 && bmi <= 22.9) {
  pkgId = '11537';
  stkId = '52002741';
  result = 's';
} else if (bmi >= 23 && bmi <= 24.9) {
  pkgId = '11537';
  stkId = '52002745';
  result = 'm';
} else if (bmi >= 25 && bmi <= 29.9) {
  pkgId = '11537';
  stkId = '52002762';
  result = 'l';
} else if (bmi > 30) {
  pkgId = '11538';
  stkId = '51626513';
  result = 'xl';
}

และแล้วก็มาถึงจุด climax นั่นคือการ custom message ด้วยโค้ด หรือในที่นี้เราจะเรียกว่าการสร้าง Payload โดยเริ่มจากการประกาศตัว Payload เพิ่มมาอีกตัวจาก dependency นั่นเอง

const { WebhookClient, Card, Suggestion, Payload } = require('dialogflow-fulfillment');

ประกาศแล้วก็ปั้น Payload ได้ โดยเราสามารถสร้าง message object ต่างๆตาม document ได้เลย ซึ่งผมแนะนำให้สร้างผ่าน LINE Bot Designer แล้ว copy ตัว JSON มาวางเลย

const payloadJson = {
  type: "sticker",
  packageId: pkgId,
  stickerId: stkId
};
let payload = new Payload('LINE', payloadJson, {sendAsMessage: true});

มาดูโค้ดฉบับสมบูรณ์หน่อย

เสร็จแล้วก็ deploy แล้วมาดูผลลัพธ์กัน

สรุป

บทความนี้เป็นภาคเสริมของหลักสูตรการสร้าง LINE Bot ด้วย Dialogflow และ Firebase ซึ่งมีผู้ถามถึงกันมามากมายว่า จะ Custom Message สำหรับ LINE ใน Dialogflow อย่างไร

ผมหวังว่าบทความนี้จะช่วยผู้อ่านปลดล๊อคการ Custom Message และสามารถนำไปต่อยอดให้ LINE Bot ของคุณน่าสนใจมากยิ่งขึ้นได้

ขอให้นักพัฒนาสนุกกับการพัฒนา LINE Bot สำหรับวันนี้ขอตัวลาไปก่อนแล้วพบกันใหม่บทความหน้า #LINEDEVTH