Project 1: Chatbot — CoffeMek วิธีการสร้าง Chatbot และเทคนิคการใส่ Rich Menu

“Chatbot-CoffeMek”

สโลแกน : ถ้าคุณไม่โอเค มาดื่มลาเต้กับเราไหม  Concept : ผมเป็นคนชอบดื่มกาแฟ ก็เลยเอาความชอบของตัวเองมาทำเป็นชิ้นงานของบอทตัวนี้ แต่ที่ก่อนเราจะสร้างชิ้นงานขึ้นมา เราต้องทราบว่าเราสร้างมาเพื่ออะไร จุดประสงค์เราคืออะไร กลุ่มเป้าหมายเราคือใคร ? เช่น แชทบอทขายของออนไลน์ บทสนทนาก็จะต้องมีความเป็นมิตร ดูเชิญชวนให้ซื้อของ คุยเล่นบ้าง ทำให้ผู้ใช้งานอยากซื้อสินค้ามากขึ้น นี่เลยเป็นแรงบันดาลใจที่ทำให้ผมอยากสร้างบอทร้านกาแฟขึ้นมา

“Diagram”

3) How to Creat Chatbot by Dialogflow

(1) รูปนี้ก็จะเป็นเกี่ยวกับ Intents เกี่ยวกับการทักทาย เมื่อลูกค้าค้าทักมา

2) รูปนี้ก็จะเป็นเกี่ยวกับประโยค Responses ของบอท เพื่อต้อนรับลูกค้า และส่งสติ๊กเกอร์แบบเฟรนลี่

ในส่วนนี้ก็จะเป็น Intents  เกี่ยวกับรายชื่อกาแฟ เมื่อลูกค้าพิมพ์รายชื่อกาแฟมา

ประโยค Responses ของบอท ก็จะตอบลูกค้าเมื่อพิมพ์สั่งกาแฟมา

ต่อไปจะเป็นการแนบรูป

ขั้นตอนแรกเราจะมีรูปสินค้าของเรา หรือ ผลิตภัณฑ์ของเรา ให้เรานำรูปเหล่านั้นไปฝากไว้บนเว็บที่สามารถฝากรูปได้ และเราก็นำ URL. ของรูปมาแปะไว้ที่ Responses ของเรา ก็จะปรากฎดังที่บอทส่งมา

 

ต่อไปจะเป็นขั้นตอนการใส่สติ๊กเกอร์ให้บอทของเรา

ขั้นตอนแรก ให้เราเข้าไปที่ Responses ที่จะให้บอทของเราตอบ จากนั้นกดเลือก

ADD Responses –> Custom payload แล้วก็จะได้หน้าต่างเหมือนดังรูป จากนั้นให้เราไปที่ https://developers.line.biz/media/messaging-api/messages/sticker_list.pdf ให้เลือกสติ๊กเกอร์ที่เราต้องการมาใส่ จำ STKID และ STKPKGID สติ๊กเกอร์ของเราไว้ จากนั้นให้ใส่รหัสสติ๊กเกอร์ของเราลงในโปรแกรม และก็อปปี้ไปใส่ใน Custom payload จากนั้นกด Save แล้วลอง Train ดูครับ

{
“line”: {
“type”: “sticker”,
“packageId”: “4”,
“stickerId”: “298”
}
}

ต่อไปจะเป็นเทคนิคการใส่ Rich Menu ในการเพิ่มลูกเล่นให้แชทบอทของเราทำให้น่าสนใจและน่าเล่นมากขึ้น

Rich Menu คืออะไร

Rich Menu คือ เมนูที่เป็นแถบรูปภาพที่สามารถปรับแต่งได้ด้านล่างที่อยู่ในห้อง Chat เพื่อเพิ่มช่องทางการ Interact ระหว่าง Bot กับ User ให้มีความหลากหลายมากขึ้น นอกเหนือจากการพิมพ์เพียงอย่างเดียว เราสามารถกำหนด Action ของพื้นที่ในรูปภาพได้ต่างกัน ดังเช่นรูปประกอบด้านล่างนี้ครับ

ขั้นตอนแรกของการเริ่มทำคือเราต้องมี Rich Menu หน้าแรกที่เป็น Default ก่อน ซึ่งเราต้อง Upload เองผ่าน Admin Console วิธีการก็คือ ให้เข้าไปในหน้า https://admin-official.line.me และเลือก Create rich content > Rich menu และตั้งค่าต่างๆ ตามที่ต้องการครับ

จากนั้นให้เลือกเมนู สร้าง Rich Menu ใหม่

จากนั้นเลือกขนาดเทมเพลตที่เราต้องการ และเตรียมรูปภาพ Rich Menu

  • รูปแบบของรูปภาพ: JPEG หรือ PNG
  • ขนาดของรูป: 2500×1688 หรือ 2500×843 pixel
  • ขนาดของไฟล์สูงสุด: 1 MB

อัพโหลดรูปภาพที่เราแต่งไว้

จากนั้นเราก็ระบุตำแหน่งของรูปภาพ และใส่ข้อความที่เราเซ็ตไว้ใน Dialogflow เสร็จแล้วกด “ดูตัวอย่าง” หรือ “บันทึก” แล้วเราก็จะได้ Rich Menu ตามที่เราต้องการ

การเชื่อมต่อ LINE Bot เข้ากับ Dialogflow

1 เริ่มต้นจากการคลิกเมนู Integration ทางด้านซ้ายใน Dialogflow

ในหน้า Integration นี้เราจะเจอผู้ให้บริการมากมายที่รองรับการเชื่อมต่อกับ Dialogflow   กด toggle ที่ LINE

ในหน้านี้เราจะต้องแลกเปลี่ยนข้อมูลกันระหว่าง LINE กับ Dialogflow ละ โดย 3 ช่องแรก Channel ID, Channel Secret และ Channel Access Token ได้มาจาก Channel ในขั้นตอนที่ 1 https://developers.line.me/console/

ถัดมาช่องที่ 4 ช่องนี้ทาง Dialogflow จะสร้างตัว Webhook URL มาให้เรา ดังนั้น copy มันซะ แล้วไปเติมในช่อง Webhook URL ใน Channel ของขั้นตอนที่ 1 กรอกเสร็จก็ให้เรากด START ได้เลย จากนั้นเรามาลองดูผลลัพธ์กับการใช้งานผ่าน LINE Bot กัน

คลิป VDO สาธิตการใช้งาน Chatbot

——————————————————————THANK YOU————————————————————————

นายพุฒินาท นุ่มสกุล 1610900670

  •  
  •  
  •  
  •  
  •  
  •  
PHUTHINAT NUMSAKUN
at GlurGeek.Com
กำลังศึกษาอยู่ มหาวิทยาลัยกรุงเทพ คณะวิศวกรรมศาสตร์ สาขาคอมพิวเตอร์และหุ่นยนต์

Leave a Reply