สวัสดีค่ะวันนี้จะมาสอนวิธีการสร้าง Chatbot ด้วย Dialogflow กันนะคะ

โดยแชทบอทของเราจะมีสโลแกนว่า “Cake sweet like your smile”

และChatbotของเราจะมีชื่อว่า “Cake Cafe’ ”

Chatbot ของเรานะคะจะทำเกี่ยวกับร้านเค้กที่สามารถสั่งได้ใน Line ลูกค้าอาจจะรอรับเค้กเองหรือจัดส่งถึงบ้านตามที่ลูกค้าสะดวกได้เลย

ส่วน Concept ของ Chatbot Cake Cafe’ ก็คือ

สั่งเค้กออนไลน์ได้
จัดส่งเค้กได้
ดูแลลูกค้าเหมือนครอบครัว
ถามปุ๊บตอบปั๊บ

ก่อนอื่นนะคะเรามาดูโครงสร้างของ Chatbot เราก่อนว่า Chatbot ที่เราทำขึ้นมาเนี่ย มีจุดประสงค์อะไร และนี้คือโครงสร้าง Chatbot ของเรานะคะ งั้นถ้าทุกคนพร้อมแล้วเรามาเริ่มสร้าง Chatbot กันเล๊ยยยยยยยยยยยยยยย!!!

ขั้นตอนแรก ให้เข้าเว็บไซต์ https://dialogflow.com/ กันก่อนนะคะ ไปที่ Go to console และ Login ให้เรียบร้อย

มาดูกันที่หัวข้อ Intent กันนะคะ เราได้สร้าง Intent ขึ้นมา โดยการกด Create Intent แล้วสร้าง Intent ตามที่เราต้องการได้เลย เช่น Chatbot ของเราจะมี Intent แยกย่อยออกเป็นหมวดหมู่ที่เราต้องการ ก็จะมี

ทักทาย
Orderเค้ก
การชำระเงิน
ขอบคุณ

ส่วนใน Intent ก็จะมีรายละเอียดหัวข้อย่อยแบ่งออกมาอีก ถ้างั้นเราไปดูหัวข้อย่อยใน Intent กันเลยว่าจะมีหัวข้อย่อยอะไรอยู่อีกบ้าง

นี้นะคะคือหัวข้อ Welcom จะมี

Training phases : เป็นตัวอย่างข้อความที่ผู้ซื้อหรือผู้ที่จะใช้บอทของเราจะพิมพ์เข้ามา ซึ่ง Dialogflow จะเอาข้อความเหล่านี้ไปทำ Natural Language Understanding (NLU) เพื่อหารูปแบบข้อความอื่นๆที่ผู้ใช้อาจจะพิมพ์มาด้วย

Responses แน่นอนค่ะ เมื่อมีการถาม บอทของเราก็ต้องมีการตอบกลับสิ่งที่ลูกค้าถามเรา และ Responses ก็คือประโยคที่เราใช้ตอบกลับลูกค้าค่ะ ถ้าเรากรอกรอกหลายๆแบบ บอทจะสุ่มเลือกมา 1 ข้อความเพื่อตอบผู้ใช้ ทำให้คำตอบของบอทเปลี่ยนไปเรื่อยๆ ตามคำตอบที่เราใส่เอาไว้ในบอทนั้นเองงงงงงงง พอกรอกข้อมูลครบทั้ง 3 ส่วนแล้วก็กดปุ่ม “SAVE” ตรงมุมขวาบนกันด้วยน๊า….

เนื่องจากบอท Cake Cafe’ เป็นบอทเค้ก การจะรับ Orderแต่ละอย่างจะต้องมีการกำหนดคำหรือประเภทของเค้กและจำนวนชิ้น เพื่อให้บอทตอบได้ตรงคำถาม เรามาดูกันที่ภาพข้างล่างนี้เลยค่ะ

และนี้ก็คือ…. หัวข้อ Entities ของเราเองงงง จะเห็นได้ว่า ในหัวข้อ Entities จะมีอีก 2 หัวข้อย่อยในนั้น เราไปดูกันดีกว่าว่า 2 หัวข้อย่อยนั้น คืออะไรกัน ไปกันเล๊ยยยยย

นี้เป็นหัวข้อย่อยอันแรก คือ Number เป็นหัวข้อที่เราได้ใส่จำนวนชิ้นที่ลูกค้าจะสั่งเอาไว้

ส่วนนี้เป็นอีกหัวข้อย่อย คือ Order เป็นเมนูเค้กที่ร้านเราขาย

เมื่อทำเสร็จทุกครั้งอย่าลืมกด “SAVE” ด้านขวามือบนสุดด้วยเด้ออออดอออ

จากนั้นให้ Train บอทของเราโดยให้เรากดที่รูปเฟือง ไปที่ ML Setting กดTrain และรอสักครู่ ใจเย็นๆ รอบอทของเราเทรนสักพัก

นี่คือผลลัพธ์ที่ได้จากบอท Cake Cafe’ ของเรา เย๊ๆๆๆๆๆๆๆ

ต่อไปเรามาดูกันที่การใส่ Sticker ลงในแชทบอท ของเรากันดีกว่า

ขั้นตอนแรกนะคะให้เข้าไปที่เว็บไซต์ Line Developers แล้วไปกดที่ Documents

เมื่อกดเข้ามาแล้วก็จะเจอหน้าตาแบบนี้ จากนั้นให้คลิ๊กที่ Messaging APl

แล้วเลื่อนลงมาจะเจอหัวข้อ Concepts และเลือก Messages

เลื่อนลงมาจนเจอ Message types กดเข้าไปที่หัวข้อ Sticker message

กดเข้าไปที่ Sticker list

จะมีสติ้กเกอร์ให้เราเลือกมากมาย ให้เราเลือกตามที่เราชอบได้เลย

หลังจากนั้นกดไปที่หน้าเดิมแล้วเลือก Sticker message

ให้ Copy โค้ดแล้วกลับไปที่ Dialogflow

กด ADD RESPONSES และกด Cumtom payload จะขึ้นมาเป็นช่องว่างให้ใส่โค้ด เราก็ใส่โค้ดที่เรา Copy มาจาก Sticker message ลงไปในช่องว่างเลย แล้วอย่าลืมกด “SAVE” นะคะ นอกจากที่เราจะใส่ Sticker ลงในแชทบอทของเราแล้ว บอทขอเราก็ยังมีการใส่รูปภาพอีกด้วย

ซึ่งขั้นตอนการใส่รูปภาพก็ง่ายนิดเดียวเองงงงง ไปเริ่มกันที่

ให้เราเลือกรูปที่เราต้องการแล้วกด “SAVE” รูปเอาไว้ในไฟล์ของเรา หลังจากนั้นให้เข้าไปที่เว็บไซต์ www.bpicc.com แล้วกดไปที่ START UPLOADING แล้วทำการเลือกรูปภาพที่เราต้องการ และกด OPEN

กดไปที่ Upload

ก็จะได้หน้าตาประมาณนี้

เลื่อนลงมาแล้วกดไปที่ Embed codes จะอยู่ด้านล่างซ้ายมือ แล้วกด Copy Image URL

หลังจากนั้นให้เรากลับไปที่ Dialogflow ไปยังหัวข้อที่เราต้องการใส่รูปภาพ

เลื่อนลงมาที่ Responses กดเข้าไปที่ LINE และกด ADD RESPONSES

แล้วไปที่ Image หลังจากนั้นให้วาง Image URL ที่เรา Copy มา ลงในช่องว่างเลย แล้วอย่าลืมกด “SAVE” นะคะ

เย๊ มาถึงขั้นตอนสุดท้ายแต่ไม่ท้ายสุดสักที เห้อออออออ ให้ทายสิ๊ว่าเป็นขั้นตอนอะไร ติ๊กตอกๆๆ ใช่แย๊ววววววววว นั้นคือ วิธีการเชื่อมต่อบอทของเรากับ Line App นั้นเองงง เพื่อไม่ให้เสียเวลาไปมากกว่านี้ เราไปเริ่มกันเลยยยยยยยยยย

ไปที่ Line Developers เข้า ล็อกอินให้เรียบร้อย แล้วกดที่ Create New Provider และใส่ข้อมูลบอทของเราให้ครบ

แทแดมมมมมมม!!!! และนี้ก็คือหน้าตาบอทของเราเองงงง สวยใช่ไหมล่ะ ให้เรากดเข้าไปที่บอทของเราเอาไว้เลย แล้วให้กลับไปที่ Dialogflow

จากเมนูทางด้านซ้ายของ Dialogflow ให้เรากด “Integration” ซึ่งเป็นหน้าที่ใช้เชื่อมต่อ Dialogflow กับแอพแชทอื่นๆ ให้เราเลื่อนหาไอคอน “LINE” แล้วก็กดเล๊ยยยยยยย

พอกดแล้วจะมีหน้าต่างให้เรากรอกข้อมูล ให้เราเอาข้อมูลจาก LINE Developer ตรง Channel setting มาใส่ในหน้านี้ตามรูปด้านบนเลย แค่นี้ Agent ของเราก็เชื่อมต่อกับ LINE@ Account เรียบร้อยแล้ว