รีวิว Usecase จริง Banner Event กับ LINE Beacon + LIFF ในงาน MUICT Open House 2022
เมื่อปลายเดือนก่อน 28–29 ต.ค. ถ้าใครได้ไปงาน Open House ที่มหิดล แล้วแว๊บไปคณะ ICT คงจะเห็นอะไรแปลกใหม่ ที่เราเป็นคนเสนออาจารย์ รวมถึง Implement ได้เสร็จภายในไม่ถึง 2 สัปดาห์ นั่นคือการใช้ LINE LIFF ร่วมกับกิจกรรมที่ทางคณะจัดนั่นเอง (มี LINE Beacon แถมมาด้วยนะ)
การพัฒนาระบบกิจกรรมในครั้งนี้จะแบ่งเป็น 2 ส่วน
- LINE Messaging API เพื่อแสดงข้อความเชิญชวน ข้อความต้อนรับ ข้อความตอบกลับแอ็กชั่น
- LINE LIFF สำหรับการทำกิจกรรมภายในคณะ
LINE Beacon ก็ดี แต่…
ในงานครั้งนี้ เราได้วางแผนที่จะใช้ LINE Beacon เพื่อแสดงข้อความต้อนรับน้อง ๆ มัธยม คุณครู หรือผู้ปกครองที่เข้ามาในงาน ซึ่งฟังดูก็ไม่น่าจะมีปัญหาอะไร แต่ประเด็นมันติดอยู่ที่ Usecase ว่าเป้าหมายของเราที่ต้องการส่งไปหานั้น ยังไม่ได้เป็นเพื่อนกับ LINE OA เลย ทำให้การที่จะใช้ Beacon เป็นเรื่องค่อนข้างยากมาก
แต่ทางออกก็ไม่ได้มืดมิด เพราะสำหรับ LINE Beacon จะสามารถใช้ส่งสัญญาณแสดงแบนเนอร์กับคนที่ยังไม่ได้เป็นเพื่อนได้ (ต้องทำการยื่นเรื่องเป็น Certified Provider และยื่นเรื่องสำหรับแสดงแบนเนอร์อีกที)
การพิจารณา Certified Provider หากเอกสารครบทุกอย่าง (เตรียมมาดี!!) ก็ใช้เวลาแค่ไม่กี่วันก็อนุมัติแล้ว ปกติจะต้องมีหนังสือรับรองบริษัท แต่พอเป็นคณะก็สามารถใช้หนังสือรับรองคนดูแล Provider ได้ (Thanks to Tan Warit) ส่วนการแสดงแบนเนอร์สามารถส่งไปพร้อมกันได้เลย
เอาเข้าจริง พอผ่านการอนุมัติ Banner & Stay Event มาแล้ว ต้องระวังอย่างมาก เพราะว่าอีเวนต์เหล่านี้จะถูกเปิดใช้งานทันที ไม่สามารถเปิดปิดเองได้ TT
มีแบนเนอร์แล้วเอามาใช้อะไร!?!
LINE Beacon ของเราถูกนำไปวางใน 2 ที่ ตึกสิริวิทยา และตึกคณะ ICT จะเป็นตัวปล่อยสัญญาณเพื่อแสดงแบนเนอร์ เมื่อผู้ใช้กดเพิ่มเพื่อนผ่านตัวแบนเนอร์นั้น ข้อดีของสัญญาณนี้ก็คือเราจะสามารถรู้ได้ว่าผู้ใช้กดเพิ่มเพื่อนมาจากสถานที่ไหน เพื่อส่งข้อความต้อนรับที่แตกต่างกันไป
อย่างที่นำมาใช้ เมื่อผู้ใช้เพิ่มเพื่อนจาก ตึกสิริวิทยา จะแสดงข้อความต้อนรับเป็นการเชิญชวนให้ผู้ใช้มาเยี่ยมชมคณะ ICT พร้อมทั้งลิงก์ Google Maps เพื่อนำทางมายังคณะ
ส่วน Beacon ที่ตึก ICT นั้น จะเป็นการแสดงข้อความต้อนรับพร้อมทั้งลิงก์ LINE LIFF สำหรับการลงทะเบียน
ใช้ Beacon แล้วมีปัญหาอะไรมั้ย?
จากที่ผ่านการใช้งานมา ขอบอก ณ จุด ๆ นี้เลย ว่า LINE Beacon ยังไม่สามารถใช้เป็นตัวหลักสำหรับการแสดงข้อความต่าง ๆ รวมถึงเพื่อทำกิจกรรมต่าง ๆ ได้ 100% เพราะมีหลายปัจจัยที่ทำให้ไม่ค่อยมีประสิทธิภาพเท่าที่ควร หรือไม่ได้รับสัญญาณ Beacon
- ผู้ใช้ไม่ได้เปิดสัญญาณ Bluetooth
- ผู้ใช้ไม่ได้เปิดใช้งาน LINE Beacon ในการตั้งค่าในแอป LINE
- ผู้ใช้ไม่ได้เชื่อมต่อกันอินเทอร์เน็ต
ท้ายที่สุดที่เป็นปัญหาหลักสำหรับแบนเนอร์เลย คือบางทีผู้ใช้ไม่รู้ว่ามีแบนเนอร์ขึ้นมา ซึ่งทำให้การใช้งานแบนเนอร์ เมื่อดูจากสถิติแล้ว จะไม่ค่อยเวิร์กเท่าไร
แต่อย่างไรก็ตาม เมื่อเรามาใช้กับกิจกรรมที่เป็น LINE LIFF เราสามารถให้ผู้ใช้เพิ่ม LINE OA เป็นเพื่อนทางอ้อมได้นั่นเอง
LINE LIFF ฮีโรชูโรงกิจกรรมของงานนี้
ในส่วนของ LINE LIFF หรือพูดง่าย ๆ ว่าเป็นเว็บไซต์ที่ใช้บน Mobile เราใช้ Tech Stack ตามนี้
- NextJs — Frontend Framework
- TailwindCSS — CSS Framework
- Mongoose — MongoDB ODM
- MongoDB — NoSQL Database
การเชื่อมต่อกับ LINE LIFF ก็ไม่ยาก เราสามารถทำเป็น Wrapper คลุมทุก ๆ หน้าเอาไว้ เพื่อให้รอ Initialize ก่อนแล้วค่อยโหลดหน้านั้น ๆ ได้
เว็บไซต์จะถูกแบ่งออกเป็น 4 ส่วนหลัก ๆ
- ระบบลงทะเบียน (Desktop & Mobile)
- ระบบแบบสอบถามประเมินความพึงพอใจ (Desktop & Mobile)
- ระบบกิจกรรม ตอบคำถาม ในแต่ละฐาน (Mobile)
- ระบบสะสมแต้ม รับของรางวัล (Mobile)
โดยเราออกแบบให้เป็นการสแกน QR Code แทนในทุก ๆ ฐาน ตั้งแต่จุดลงทะเบียน (ในกรณีไม่ได้รับสัญญาณ Beacon ซึ่งก็คือส่วนใหญ่) กิจกรรม แบบสอบถาม และรับของรางวัล เพื่อป้องกันการข้ามจุดใดจุดหนึ่ง หรือทำจากที่อื่น แล้วมารับของรางวัล (เราอยากให้มาเยี่ยมชมจริง ๆ น้าาา~~)
ในขั้นตอนลงทะเบียนเมื่อทำเสร็จเรียบร้อยแล้ว เราจะมี Ticket ส่งไปให้ด้วยนะ ส่วนตอนรับของรางวัลเมื่อรับเสร็จแล้ว เราก็ใช้ User ID เพื่อส่งข้อความปิดได้ด้วย
ใช้ LINE LIFF มีอะไรดีอีก!!
จุดเด่นของการที่ใช้ LINE LIFF นั้น ก็คือหากเราต้องการที่จะเก็บข้อมูลในฐานข้อมูลเป็นของแต่ละ User เราก็สามารถทำได้เลย โดยที่นำ Access Token หรือ ID Token ที่ได้ ไป Verify ในส่วนของเซิร์ฟเวอร์นั่นเอง (ห้ามส่ง User ID ไปเพียว ๆ หรือตัว DecodedIdToken ไปที่เซิร์ฟเวอร์นะ มันจะไม่ปลอดภัยเอา!!) โดยไม่จำเป็นต้องทำระบบ Login หรือ Authentication เพราะ LIFF เค้า Login ให้แว้วววว…
สรุปสั้น ๆ
- [LINE Beacon] อยากได้ Banner / Stay Event ทำเรื่องขอได้ เอกสารไม่ยุ่งยาก
- [LINE Beacon] อยากแสดงแบนเนอร์ให้กับคนที่ยังไม่ได้เป็นเพื่อน ต้องเป็น Certified Provider เท่านั้น
- [LINE Beacon] Beacon ดีมั้ย?? มันดี!! แต่มีข้อจำกัด ใช้เป็นช่องทางหลักไม่ได้ เพราะยังมีหลายปัจจัยที่เราคุมเองไม่ได้ เช่น ไม่เปิด Bluetooth, ไม่เปิด Location Services, ไม่เปิดใช้งาน LINE Beacon, ผู้ใช้ไม่รู้ว่ามี ควรทำแผนสำรองเอาไว้
- [LINE LIFF] ทำ Authentication ได้แบบง่าย ๆ ไม่ต้อง implement เอง
- [LINE LIFF] ทำงานได้เหมือน Website (แต่อาจจะมีข้อจำกัดบางอย่าง)
หมายเหตุ: บทความนี้ เป็นบทความที่รีวิว Beacon และ Banner Event เฉพาะ usecase ที่ใช้งานตามที่อธิบายเท่านั้น สำหรับ usecase อื่น ๆ อาจจะต้องพิจารณาต่อไปว่าเหมาะสมต่อการใช้งาน และมีข้อจำกัดอื่น ๆ หรือไม่
Additional Thanks to Thanaboon Sapmontree pixels27 for elegant ux and ui designs
Photo Credit: Faculty of ICT, Mahidol University
