LINE Bot Designer เป็นโปรแกรมที่ทำให้เราสามารถออกแบบการสนทนาของ Chat Bot ได้ง่าย พร้อมกับมี emulator ทดสอบการใช้งานแบบเห็นภาพชัดสุดๆ ก่อนที่จะนำไปพัฒนาเพื่อใช้งานจริง
** สิ่งที่ได้จากโปรแกรมนี้คือ prototype ของ LINE Bot เท่านั้น เหมาะสำหรับ designer หรือ content creator ที่ต้องการออกแบบการสนทนาพร้อมกับผ่านการ approve ก่อนนำส่งให้ programmer ไปพัฒนาโต้ตอบสำหรับการใช้งาน
รู้จักกับ LINE Bot Designer
LINE Bot Designer คือโปรแกรมของ LINE สำหรับออกแบบ prototype LINE Bot อย่างง่ายเพียงแค่จับส่วนต่างๆ มาวางรวมกันคล้ายกับต่อจิ๊กซอว์ จากนั้นโปรแกรมจะสร้างโค้ด JSON ให้โดยอัตโนมัติ โดยที่ผู้ใช้ไม่จำเป็นต้องไปยุ่งเกี่ยวกับการเขียนโปรแกรมเลย ทำให้ใครๆ ก็สามารถออกแบบ LINE Bot มาใช้งานเองกันได้
เจ้าตัวนี้เป็นโปรแกรมที่ออกมาให้ใช้กันสักพักใหญ่แล้ว แต่อันนี้ผู้เขียนไปรู้จักในเวทีงาน Creative Talk 2019 เห็นว่าน่าสนใจดี เลยลองไปเล่นแล้วนำมาเล่าให้ฟังกันครับ
เตรียมโปรแกรมให้พร้อม
LINE Bot Designer เป็นโปรแกรมที่ใช้งานบนคอมพิวเตอร์ มีทั้ง macOS และ Windows ทาง LINE Developer เปิดให้ดาวน์โหลดโปรแกรม LINE Bot Designer ได้ฟรี สามารถโหลดได้เลยที่ >> https://developers.line.biz/en/bot-designer/download/
หลังจากดาวน์โหลดและติดตั้งเรียบร้อย ให้ login ด้วย LINE Account จากนั้นกด Start a New Project โปรแกรมจะให้ใส่ชื่อและหมวดหมู่ของโปรเจคเราเล็กน้อย
จากนั้นจะเข้ามาที่หน้าต่างโปรแกรมสำหรับพร้อมทำงานครับ ฝั่งซ้ายมือจะเป็น item หรือข้อความในรูปแบบต่างๆ ที่สามารถสร้างบน LINE Bot ได้ (นึกภาพประมาณตอน LINE Bot เจ้าอื่นๆ ส่งข้อความมาหาเรา)
ฝั่งขวามือจะเป็นในส่วนของ Preview ข้อความที่เราสร้าง และด้านขวาล่างเป็นโค้ด JSON ที่โปรแกรม generate ขึ้นมาให้หลังจากเราเลือกใช้ item ต่างๆ ในส่วนนี้เอง programmer ก็สามารถ copy จาก prototype ไปเขียนต่อได้เลย
เดี๋ยวเราลองมาเล่นกันดูครับ
Bot Items รูปแบบข้อความทั้งหมดบน LINE
บน LINE Bot Designer เองก็ยกเครื่องรูปแบบข้อความมาให้ใช้แบบครบมาก ซึ่งทางผู้เขียนจะแนะนำเป็นหมวดหมู่ที่เค้าจัดเอาไว้ โดยในบทความนี้ไม่ได้ถึงกับยกตัวอย่างรูปแบบข้อความครบทุกตัวเพราะมันค่อนข้างเยอะ และเชื่อว่ามีหลายตัวที่ทุกท่านอาจจะเคยเห็นหรือคุ้นเคยกันอยู่แล้ว ลองเล่นดูได้ครับ ไม่ยากๆ
1. Message
รูปแบบข้อความทั่วไปที่เราจะได้ใช้กันบ่อยที่สุด มีข้อความทั้งหมด 12 รูปแบบ เมื่อเราเลือกมาวางบน list ของ item ระบบจะให้เราใส่ข้อมูลต่างๆ ลงในฟิลด์ จากนั้นจะขึ้น preview ให้เราดูทางด้านขวา
ด้านบนคือตัวอย่างของ Carousel Template Message ที่สามารถใส่ข้อมูลหัวข้อที่เป็นข้อความ รูปภาพ และปุ่มสำหรับ action สามารถทดลองใส่ URL จริง เพื่อทดสอบการกดใน emulator ได้ด้วย
ในส่วนของ properties คือรูปแบบที่ LINE Chat สามารถทำได้ทั้งหมด เรียกว่าโปรแกรมตัวนี้จัดมาให้ครบเครื่องดีเลยนะครับ
2. Rich Menu
เมนูที่เหมาะสำหรับการทำ Call to Action มีความยืดหยุ่นในการออกแบบเมนู นำไปประยุกต์ใช้ได้หลากหลาย บนโปรแกรมนี้ทำได้เพียงวางภาพเพื่อให้เห็นหน้าตาของเมนูเท่านั้น ไม่ได้ถึงกับสร้าง Rich Menu แบบทดลองใช้งานจริงได้ เพราะเป็นรูปแบบข้อความที่ค่อนข้างซับซ้อน ต้องเขียนโปรแกรมจริงเพื่อระบุตำแหน่งของปุ่มต่างๆ
3. Web App
เป็นรูปแบบการแสดงผลหน้าเว็บในข้อความแชทของ LINE ประมาณว่ามี web browser อยู่ในกล่องแชทนั่นเอง สามารถใช้งานได้เหมือนอยู่หน้าเว็บ แต่ไม่ต้องสลับแอปไปเปิดบน browser ในโปรแกรมเพียงเราวาง URL ลงใน property เท่านี้ก็เรียบร้อย
Flex Messages
Flex Message รูปแบบการแสดงข้อความบน LINE ที่สามารถออกแบบได้ยืดหยุ่น สามารถนำ element ต่างๆ มาประกอบร่างเป็นหนึ่ง item คล้ายกับการสร้างรูปแบบ message ได้เอง โดยคำว่า Flex ก็มาจากคำว่า Flexible นั่นเอง เป็นฟีเจอร์ใหม่ที่เพิ่งเพิ่มเข้ามาในโปรแกรมเมื่อไม่นานมานี้ (ปลายปี 2018)
โดยบน LINE Bot Designer เองก็ออกแบบมาให้สร้างได้ค่อนข้างยืดหยุ่น สามารถเลือกแบบ Blank Page เพื่อออกแบบเองทั้งหมดตั้งแต่แรก หรือสามารถเลือก template ที่โปรแกรมเตรียมไว้ให้นำมาพัฒนาต่อก็ได้
ในส่วนนี้เป็นประโยชน์มากๆ ทั้งคนออกแบบและนักพัฒนา เพราะในความยืดหยุ่นของเจ้า Flex Message นั้นทำให้ยากถ้าจะนำ element มาลองวางเองโดยไม่มีโปรแกรมช่วย รวมถึงโค้ด JSON ที่ต้องเขียนก็โคตรจะยาว แต่บนโปรแกรมนี้สามารถ copy ไปใช้ต่อได้เลย
Chat Emulator
หลังจากที่เราได้ลองสร้าง bot ง่ายๆ ขึ้นมาสักตัวแล้ว เราสามารถทดสอบการใช้งานผ่านโปรแกรมนี้ก่อนนำไปใช้จริงได้เลย โดยในโปรแกรมจะมีหน้าจอ iPhone สามารถพิมพ์ข้อความได้จริงเพื่อให้เราลองสนทนาโต้ตอบกับ bot ที่สร้างขึ้นมา พร้อมกับทดสอบ item ต่างๆ ที่เราได้ออกแบบไว้
ทิ้งท้ายด้วยบทความน่าสนใจที่ไปเจอมาครับ เป็นการคอมโบระหว่างการออกแบบบน LINE Chat bot และนำไปสร้างจริงบน Dialogflow เผื่อท่านที่สนใจครับ : [Dialogflow x LINE] สร้าง Chatbot LINE แบบง่ายๆ ด้วย Dialogflow และ LINE Bot Designer กันเถอะ
