การทำ Dynamic Flex เพื่อแสดงข้อมูลที่มีการอัพเดท ใน LINE ด้วยภาษา Python พร้อม source code
สวัสดีครับ นี่ก็เป็น ตอนที่ 3 ของ serie สร้าง LINE แชทบอท ด้วยภาษา Python โดย
- ตอนที่ 1 ได้สอนการติดตั้ง สร้าง server บน Heroku ต่อกับ LINE สร้าง echo บอท -> คลิก
- ตอนที่ 2 ได้สอนการรับ Location event เขียนฟังก์ชั่นในการหาระยะทางที่ใกล้เคียง แล้วก็แสดงผลออกมา -> คลิก
สำหรับตอนนี้ เป็นอีกขั้นตอนนึงที่สำคัญมาก นั่นคือการแสดงผลออกมาด้วย Flex message คุณตี๋ Jirawatee ได้เขียนบทความแนะนำ Flex ซึ่งคิดว่าหลาย ๆ ท่านคงได้อ่าน -> คลิก แล้วก็มีบทความจาก LAE คนล่าสุด คุณ PamornT ที่ได้รวบรวม template Flex แบบต่าง ๆ ให้ -> คลิก
เราสามารถสร้าง JSON Flex ได้อย่างง่ายดาย ด้วย โปรแกรมที่ชื่อว่า LINE Bot Designer โดยไม่จำเป็นต้องโค้ดดิ้งเลย เลือกสีเลือกปุ่ม เหมือนเราใช้ word ใช้ powerpoint ง่ายมาก
หลังจากนั้น เราก็จะได้ code JSON ออกมา จากนั้นเราก็จะ copy code JSON นี้ เข้าไปที่โปรแกรม Python ที่เราเคยสร้างไว้ ในตอนก่อนหน้า
โดยเราสร้าง function อันนึงที่ส่งก้อน JSON นี้ไป เมื่อถูกเรียก
*ข้อระวัง ในก้อน JSON ที่ได้มา จาก LINE Bot designer ต้องเริ่มจาก ปีกกา ของ “contents” แล้วตัดปีกกาล่างสุดออกหนึ่งอัน ตอนใส่ใน code python
หลังจากนั้นผมก็จะเขียน function นึงชื่อว่า handle_text ที่จะถูกเรียกเมื่อมีการส่ง event ที่เป็น text เข้ามาจากแชทบอท ใน function นี้ เราก็เอาไปต่อยอดใส่พวก nlp หรือจะเรียกตัวแปลภาษา หรือจะไปเรียก api ต่าง ๆ ก็ได้ ในทีนี้ผมจะสร้างเงื่อนไขว่า ถ้าข้อความที่เข้ามา คือ ‘flex’ ก็จะเรียก function flexmessage แล้วก็จะได้ก้อน json ออกมา แต่ถ้าไม่ใช่ ก็ส่งข้อความเดิมกลับไป function FlexSendMessage ก็จะมาจาก library line-bot-sdk ซึ่ง function นี้ก็จะรับก้อน Json แล้วก็ format ให้เป็น object ของ LINE รอการส่งกลับ
กลับไปที่ function event_handle ที่รับ event เข้ามา แล้วเชคว่า ถ้าเป็น msgType ที่เข้ามาเป็น text ก็จะเรียก function handle_text แล้วตอบกลับไปหา user ผ่าน api reply_message
เสร็จแล้วเราก็ deploy แล้วก็ทดสอบผ่าน LINE Bot ของเรา ก็จะออกมาตามที่เราทำ
ที่เราทำมาถึงขั้นตอนนี้ เรียกว่า static Flex นะครับ ก็คือ ข้อมูลมันจะถูก fix ไว้เลย เราสามารถใช้เพื่อทำการประชาสัมพันธ์ การสร้างคู่มือการใช้งาน ใน Bot covidbuster (lineid: @cnineteen) ก็จะใช้ static Flex ประมาณนี้นะครับ
Dynamic Flex
มาเข้าสู่เนื้อหาหลักของบทความนี้ นั่นก็คือ Dynamic Flex คำว่า Dynamic ก็แปลว่าการเคลื่อนไหว มี movement เพราะงั้น Dynamic Flex ก็คือ Flex ที่สามารถที่จะเปลี่ยนแปลงตามข้อมูลที่ป้อนเข้าไป ซึ่งข้อมูลก็อาจจะมีการ update ตลอดเวลา เราสามารถประยุกต์ใช้เพื่อแสดง status หรือสถานะต่าง ๆ ไม่ว่าจะเป็นการจัดส่ง หรือว่าสถานะของระบบ หรือว่าข้อมูลโควิด โดยเราเขียนโครงของ Flex แค่ครั้งเดียว แต่เราก็เปลี่ยน data หรือข้อมูลข้างในด้วยฟังก์ชัน
Tip: เวลาผมคนเขียนโค้ด ผมมักจะแบ่งฟังก์ชันย่อย ๆ โดยหนึ่งฟังก์ชันก็มีจุดประสงค์เดียวจบในตัว แล้วเราก็จะมี main function ที่เรียก function ย่อย ๆ ในแต่ละส่วน มันจะทำให้อ่านโค้ดง่าย ก็แนะนำสำหรับน้อง ๆ มือใหม่ที่จะหัดเขียนโค้ดนะครับ พอเราจะทำ dynamic Flex เราก็ควรที่จะแบ่งส่วนที่เรียก data ส่วนที่เป็น query ส่วนที่เป็น Flex แต่ Flex ก็จะมีทั้งส่วนที่เป็น static และ dynamic เราก็จะเขียนฟังก์ชันแยกย่อยออกไปอีก อย่างที่เป็นบรรทัดของเคสรอบตัว ในส่วน Header ในส่วน Footer ก็เป็น ส่วน static ในส่วนที่เป็นตารางก็จะเขียนโครง flex แค่อันเดียว แล้วก็เขียนฟังก์ชันวนลูปเอา แล้วเอามาต่อกับ Flex หลัก
เรากำลังจะพัฒนา Covidbuster เพื่อให้คนสามารถที่จะประกาศสินค้ามาโฆษณา น่าจะช่วยผู้ที่ถูกผลกระทบ สามารถมีช่องทางค้าขายเพิ่มขึ้น
เราจะรับค่ารูปภาพ ชื่อสินค้า คำโฆษณา วิธีติดต่อ ผ่านแชทบอท แล้วก็เก็บไว้ให้ฐานข้อมูล แล้วก็มีระบบค้นหา ถ้ามีคนพิมพ์ว่า อยากกินแคปหมู โฆษณาของแคปหมูแม่หญิงลำปาง ก็จะ display ออกมาด้วย แต่ถ้าคนพิมพ์ว่า อยากกินส้มตำ ก็จะเป็นของเจ้าอื่นออกมา ผมจะตัดเอามาบางส่วนให้ดูกันครับ ขั้นตอนคร่าว ๆ ก็จะเป็นดังนี้
- ในส่วนของ data เราอาจจะไปต่อกับฐานข้อมูลต่าง ๆ แต่เพื่อให้ง่าย ผมจะสร้าง excel file ขึ้นมาอันนึง ที่มีลิงค์รูปภาพ ชื่อสินค้า คำโฆษณา แล้วก็วิธีติดต่อ เก็บใน Excel ที่ชื่อว่า addb.xlsx
2. เขียนฟังก์ชันที่จัดการ data ผมตัดขั้นตอน nlp ออก เหลือแต่ว่าถ้าข้อความที่เข้ามา ตรงกับ QueryWord ใน Excel ก็จะดึงชื่อสินค้า รูปภาพ คำบรรยาย แต่ถ้าไม่เจอสินค้าก็ให้ return ‘nodata’
ทดสอบว่า ฟังก์ชันนี้ทำงานได้ตามที่เราคาดหวังไว้มั้ย
3. เราจะแก้ไขในส่วนที่เป็น static Flex โดยจะรับ ข้อมูลจากฟังก์ชัน getdata ซึ่งเราก็จะไปแก้ไขฟังก์ชัน flexmessage ที่เราทำไปก่อนหน้า นิดหน่อย
a. จากเดิมที่ไม่รับค่าใด ๆ ตอนนี้รับค่า query แล้วก็เรียกฟังก์ชัน getdata เพื่อเอา ชื่อสินค้า รูปสินค้า คำบรรยาย แล้วก็วิธีติดต่อ
b. ในส่วนที่เราอยากจะให้เป็น dynamic เราก็เปลี่ยนที่เคยใส่ fix ไว้เป็นตัว string placeholder %s แล้วใส่ส่วนท้าย ก็ใส่ชื่อตัวแปรที่จะมาแทนที่ string placeholder ตามลำดับ
ทดสอบว่าฟังก์ชัน flex_message ไม่มีข้อผิดพลาด
4. แก้ไขในส่วนของฟังก์ชั่น handle_text ถ้าไม่เจอ data ก็เป็น echobot เหมือนเดิม แต่ถ้าเจอก็เรียก dynamic Flex ที่เราได้สร้างไว้
ลอง deploy แล้วทดสอบดูครับ
แถม postback event ให้ครับ ซึ่งก็คือ event เวลาเรากดปุ่ม รายละเอียดการติดต่อของคนขายก็จะโชว์ออกมาครับ
ในบทความนี้เป็น dynamic Flex แบบง่าย ๆ นะครับ ผมอยากให้ลองฝึกกันดู แยกในส่วนที่เป็น dynamic ออก สร้างบรรทัดของข้อมูลเป็น JSON แล้วก็วนลูป สร้างให้เต็มตาราง จากนั้นก็มาต่อ header footer ในส่วนที่เป็น static ประกอบร่างให้สมบูรณ์เราสามารถใช้ dynamic Flex ทำอะไรได้เยอะเลย ไม่ว่าจะเป็น ใบเสร็จ ใบจองคิว รายการสินค้า และอีกมากมาย
สามารถโหลด source code -> คลิก
หวังว่าบทความนี้จะเป็นประโยชน์กับนักพัฒนาแชทบอททั้งหลายนะครับ แล้วพบกันใหม่ในบทความถัดไป แต่ก่อนจากกันวันนี้อยากมีอะไรสนุก ๆ เล่นกัน อยากจัดประกวดการสร้าง dynamic Flex โพส video เรียก dynamic Flex ลงใน group BOTNOI Classroom -> คลิก เราจะคัดเลือก 3 อันดับเจ๋งที่สุด มาฝึกงานสร้างแชทบอท กับทีมงาน CJE และ DEV ของ BOTNOI ยังมีอะไรสนุก ๆ ให้เรียนรู้อีกเยอะ เราจะให้ฝึกงานร่วมเป็นทีมงานสร้างแชทบอทให้ลูกค้า หรือแชทบอทต่าง ๆ ของบริษัท ถ้าได้ประสบการณ์จริงกับพวกเราก็น่าจะดี
ให้เวลาส่งผลงานถึง วันที่ 1 พค. ก็แล้วกันนะครับ
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
สำหรับใครที่สนใจ AI สนใจ Data science สามารถ join group Botnoi Classroom ตอนนี้มีสมาชิกสองพันกว่าคน จะคอยอัพเดทเทรนด์ ความรู้ ทางด้าน AI และ Data science แล้วก็คอยประกาศอีเวนท์ หรือเปิดคลาสสอนด้วย
ส่วนหากใครสนใจใช้บริการ BOTNOI ในสร้างแชทบอท หรือให้คำปรึกษาเกี่ยวกับ AI & Data science ติดต่อได้ผ่านเวป -> Botnoi และ FB Page Botnoi Consulting นะครับ
