สืบเนื่องจากบทความแรก ที่เราได้แนะนำวิธีการสร้าง Line ChatBot ตั้งแต่การสมัคร การเชื่อมต่อกับไลน์ และการสร้างบอทที่สามารถโต้ตอบได้ด้วยบทสนทนาต่าง ๆ
วิธีสร้าง Line ChatBot แชทบอทที่สร้างได้ง่าย ๆ ไม่ต้องมีพื้นฐานโปรแกรมใด ๆ [ตอนที่ 1]
บทความนี้เราจะมาแนะนำวิธีสร้างการโต้ตอบของบอทให้มีความหลากหลายมากขึ้น เช่น สติ๊กเกอร์ รูปภาพ วิดีโอ ลิงค์ ตำแหน่ง ตัวเลือก คำถาม และอื่น ๆ อีกมาก เพื่อให้เราสามารถออกแบบบอทให้ตอบสนองการใช้งานให้ตรงกับความต้องการของเราให้มากที่สุด โดยก่อนอื่นให้เราดาวน์โหลดโปรแกรมนี้มาก่อนเลยครับ
LINE Bot Designer >> https://developers.line.biz/en/services/bot-designer/
เมื่อดาวน์โหลดเสร็จเรียบร้อย ให้เปิดโปรแกรม >> Start a New Project ได้เลยครับ หลังจากนั้นเราจะเห็นหน้าต่างโปรแกรมดังภาพ ซึ่งโปรแกรม LINE Bot Designer ชื่อนั้นบอกชัดอยู่แล้วครับว่า เป็นโปแกรมออกแบบ Line ChaBot ให้มีความสามารถที่หลากหลายมากขึ้น โดยการใช้งานจะมีมีอยู่ 4 ส่วนหลัก ๆ ได้แก่ ส่วนของไอเท็มต่าง ๆ ส่วนของการ Edit ข้อมูล ส่วนการแสดงผล และกล่อง JSON
ขั้นตอนการใช้งานเราก็เพียงมองไปที่คำว่า Message ด้านหลังจะมีเครื่องหมายบวก(+) อยู่ กดแล้วเลือกได้เลยว่าเราจะสร้างการโต้ตอบของบอทในรูปแบบใด เลือกเสร็จแล้วก็ทำการ Edit ข้อมูลต่าง ๆ ให้ครบถ้วน ตัวอย่างเช่น เมื่อลูกค้าถามหาตำแหน่งร้าน เราต้องการตอบเป็นตำแหน่งบนแผนที่เลย ไม่ใช่แค่ข้อความปกติ ก็ให้เลือกไปที่ Location Message ซึ่งจะมี 4 ช่องให้เราใส่ข้อมูล เราก็ใส่ชื่อสถานที่หลัก เช่น ชื่อร้าน ใส่ที่อยู่หรือรายละเอียด ส่วน 2 ช่องล่างจะเป็นข้อมูลละติจูด(Latitude) และลองจิจูด(Longitude)
การหาตัวเลขละติจูด ลองจิจูด จาก Google maps โดย คลิกขวาที่ตำแหน่งที่เราจะปักจุด เลือกคำว่า “ที่นี่มีอะไร” แผนที่จะแสดงตัวเลข 2 ชุด ดังภาพ ซึ่งตัวแรก ก็คือ ละติจูด เลขตัวที่สอง ก็คือ ลองจิจูด คัดลอกนำไปใส่ใน LINE Bot Designer ได้เลยครับ
หลังจากใส่ข้อมูลทั้งหมด และเห็นตัวอย่างในหน้า Preview แล้ว ก็ให้เราทำการคัดลอกข้อความรหัสในช่อง JSON เอาไว้ใช้งานต่อใน Dialogflow (ใครมาเจอบทความนี้ก่อน แล้วไม่รู้จัก Dialogflow ให้กลับไปดูตอนที่ 1 เสียก่อนนะครับ)
กลับมาที่ Dialogflow เรายังจำกันได้ไหมครับ การสร้าง Intents เพื่อสร้างการโต้ตอบของไลน์บอทของเราทำอย่างไรบ้าง? เมื่อเรากดสร้าง Intents ที่กล่อง Training phrases เราต้องใส่ข้อความที่คาดว่าลูกค้าหรือกลุ่มเป้าหมายจะสอบถามเรา อย่างในกรณีนี้ก็คือ สถานที่ตั้งของร้าน เราก็ใส่ข้อความที่เกี่ยวข้องให้ได้มากที่สุดครับ เช่น ร้านตั้งอยู่ที่ไหน ร้านอยู่ที่ไหน ทางไปร้าน เป็นต้น แต่ไม่ต้องกังวลมากนัก เพราะบอทมันเรียนรู้ได้ครับ บางประโยคที่ใกล้เคียงหรือสื่อความหมายไปในทางเดียวกันบอทมันก็ตรวจจับได้ไม่ยาก อันนี้เคยพูดไปแล้วในตอนที่ 1 มาตอนนี้เราจะไปสนใจที่การตอบกลับของบอท ที่อยากให้ตอบเป็นตำแหน่ง Location ของร้าน ให้เราเลื่อนลงไปที่กล่อง Responses แล้วคลิกปุ่ม ADD Responses แล้วเลือก Custom payload มันจะมีกล่องข้อความขึ้นมาให้เราใส่รหัสจาก JSON ที่เราคัดลอกเอามาจาก LINE Bot Designer เราก็วางในช่องนี้ได้เลย(ลบเครื่องหมาย {} ออกก่อนจะวางนะครับ) แต่เท่านี้ยังไม่เรียบร้อย
เมื่อวางรหัสจาก JSON เรียบร้อยแล้ว ให้เราแก้ไขรหัสโดยการวางข้อความ “line”: { } แทรกลงไปในลักษณะนี้
ข้อความจาก JSON:
{
“type”: “location”,
“title”: “ร้านส้มตำป้าแว่น”,
“address”: “ซ. เพชรบุรี 5 ถ. เพชรบุรี เขตราชเทวี กทม. 10400”,
“latitude”: 35.65910807942215,
“longitude”: 139.70372892916203
}
ข้อความที่แทรกใหม่:
{
“line”: {
“type”: “location”,
“title”: “ร้านส้มตำป้าแว่น”,
“address”: “ซ. เพชรบุรี 5 ถ. เพชรบุรี เขตราชเทวี กทม. 10400”,
“latitude”: 35.65910807942215,
“longitude”: 139.70372892916203
}
}
สุดท้ายก็กด SAVE เพื่อบันทึก Intents เท่านี้ก็เรียบร้อย บอทของเราจะสามารถโต้ตอบได้ตามที่เราต้องการ หากไม่แน่ใจก็ลองถามบอทของเราดูในไลน์ได้เลยครับ
รูปแบบการโต้ตอบอื่น ๆ ที่น่าสนใจ อย่างเช่น Carousel จะเหมาะสมกับการแสดงรูปสินค้าให้กลุ่มเป้าหมายเลือก และกดปุ่มเพื่อเข้าไปซื้อสินค้าหรือเยี่ยมชมเว็บไซต์ และตอบด้วยสติ๊กเกอร์ ก็จะสามารถทำให้บอทเราดูมีชีวิตชีวามากขึ้นได้ โดยรหัส JSON ก็อยู่ในรูปแบบนี้นะครับ(วางใน Custom payload ได้เลย)
{
“line”: {
“type”: “sticker”,
“packageId”: “2”,
“stickerId”: “149”
}
}
ซึ่งใน LINE Bot Designer จะมีสติ๊กเกอร์ให้เลือกไม่มากนัก เราสามารถใช้สติ๊กเกอร์ตัวอื่นๆ ได้อีกเยอะครับ เพียงหารหัส “packageId”: “ตัวเลข” และ “stickerId”: “ตัวเลข” มาใส่แทนคำว่าตัวเลข ซึ่งรหัสสามารถหาได้จากลิงค์นี้ครับ >> รหัสสติ๊กเกอร์ https://developers.line.biz/media/messaging-api/sticker_list.pdf
ส่วนการโต้ตอบแบบอื่น ๆ เช่น รูปภาพและวิดีโอ ถ้ารันไม่ผ่าน LINE Bot Designer จะแจ้งให้เราทราบ หากหาสาเหตุไม่ได้อาจเป็นเพราะไฟล์หรือรูปแบบลิงค์ไม่เป็นไปตามข้อกำหนดพื้นฐาน ดังนั้นให้ตรวจสอบข้อกำหนดได้ที่ลิงค์นี้นะครับ >> https://developers.line.biz/en/reference/messaging-api/#video-message
การโต้ตอบสุดท้ายที่อยกแนะนำ เพราะมันสวย และเหมาะกับการขายสินค้าเป็นอย่างมาก นั่นคือ Flex message วิธีการคือใน LINE Bot Designer ให้เราคลิกดังภาพ แล้วแก้ไขรูปภาพ(แนะนำอัพโหลดไว้ที่อื่น แล้วนำลิงค์มาวางแทนการอัพโหลดรูปจากเครื่อง) ข้อความ ลิงค์ และรายละเอียดต่าง ๆ ตามที่เราอยากนำเสนอได้เลยครับ
เสร็จแล้วก็ทำเหมือนเดิม คัดลองรหัสไปวางใน Dialogflow บอทของเราก็จะมีทักษะและความสามารถมากขึ้นเรื่อย ๆ และจงจำเอาไว้ว่า ยิ่งเราสอนให้บอทได้เรียนรู้คำสนทนาต่าง ๆ มากขึ้นเท่าไหร่ บอทของเราก็จะฉลาดมากขึ้นเท่านั้น ขอให้ทุกคนสนุกกับมันครับ :)
