ใช้ Astro สร้างระบบสมาชิก LINE Official Account

ในฐานะคนเขียนโค้ด ประทับใจการเขียนเว็บด้วย Astro ที่โครงสร้างเรียบง่ายและรับโหลดได้สูง เมื่อ 1-2 ปีก่อนเลยเปรียบเทียบ Astro กับ WordPress ไปใน Meetup ที่ปาย ตามวีดีโอด้านล่างนี้ครับ

Astro vs WordPress

จุดเด่นของ Astro

• เหมาะกับคนเขียนโค้ด HTML ได้อยู่แล้ว มาหัด JS เพิ่ม
• โหลดเร็ว ไม่พึ่งพา Server มากนัก (Severless)
• ทำให้ไม่ต้องกังวลเวลาคนเข้าเยอะๆ
• ทำให้ค่าโฮสต์ต่ำ หรือ ฟรี
• รองรับ Markdown หรือจะดึงข้อมูลจากแหล่งอื่นๆ (เช่น Headless CMS) ก็ง่าย
• ทำเว็บแบบ Static ก็ได้ (SSG) หรือรันผ่าน Server / เชื่อมต่อฐานข้อมูลเรียลไทม์ก็ได้ (SSR)
• เชื่อมฐานข้อมูล libSQL (พัฒนาต่อจาก SQLite) ด้วยคำสั่ง JS ทำให้จัดการง่าย ใช้ผ่านบริการของ Turso ก็ฟรี หรือไม่แพงนัก
• หรือหากสเกลใหญ่ จะเชื่อมฐานข้อมูลผ่าน Supabase ก็ได้เช่นกัน

ที่ผ่านมา ใช้ทำเว็บด้านเนื้อหาที่คนเข้าเยอะแต่ไม่อยากดูแล กับทำเว็บระบบลงทะเบียนที่มีคนใช้เยอะๆ แต่ flow ไม่ซับซ้อนมาก

ซึ่งก็เหมาะกับทำระบบสมาชิกผ่าน LINE Official Account ด้วยเช่นกัน

ตัวอย่างระบบสมาชิกใน LINE Official Account

1. ระบบสวัสดิการค่ากาแฟทีมงาน

เติมเงินรายเดือนให้ทีมงานใช้ซื้อของร้านค้าหน้าออฟฟิศ ทั้งกาแฟ/ชามุก/สเต็ก ฯลฯ เลือกร้าน กรอกจำนวนเงิน ระบบก็จะส่งข้อความสรุปยอดให้ผ่านไลน์

ให้ทีมลองหัดเขียน Astro และลองใช้ Astro Studio (แต่ต่อมา Studio ปิดตัวเลยย้ายเป็น Turso ในที่สุด)

หน้าชำระเงินลองออกแบบให้ยื่นมือถือให้ร้านดูได้เลย ไม่ต้องพลิกจอ แต่เห็นน้องๆ บอกว่า ก็ไม่ได้ช่วยให้เร็วขึ้นเท่าไหร่ 😅

หน้าจอสำหรับจ่ายเงินด้วยเครดิต คลิกที่รูปเพื่อดูภาพขนาดใหญ่

---

2. ระบบลงทะเบียนฟังธรรม

อาสาทำเว็บให้ บ้านจิตสบาย เลยได้ช่วยทำ LINE OA ให้ด้วย โจทย์คือให้สมาชิกลงทะเบียนเข้าร่วมกิจกรรมไว้ก่อน แล้ววันงานให้เช็กอินเข้างาน ทำให้ทีมงานมีข้อมูลผู้เข้าร่วมครบถ้วน

สิ่งที่ต่างจากอีเวนท์ทั่วไปคือ หลายๆ ครอบครัวลูกหลานจะลงทะเบียนให้ ทำให้ต้องมีช่อง​ “ผู้ติดตาม” เพิ่มเติม กับ หน้างานจะมีแถวให้คนที่ไม่ได้ลงทะเบียนสามารถแสกนคิวอาร์โค้ดเพื่อนับยอด Walk-in ได้ด้วย

ตอนแรกทำด้วย WordPress + LINE Login แต่พอวันที่คนเยอะๆ มีคนเข้า 5,000 คนพร้อมกัน ทำให้ระบบโหลดเกินไป ไม่อยากสเกลเซิร์ฟเวอร์ (และดูแล) เลยเลือกเขียนด้วย Astro แทน

2.1 ระบบจัดการข้อมูลสำหรับแอดมิน

ให้แอดมินใช้ Google Login เพราะจะได้ไม่ต้องกังวลเรื่องความปลอดภัยหรือการโดนสุ่มรหัสผ่าน เข้ามาก็สร้างฟอร์มง่ายๆ เพื่อแก้ไขและดูข้อมูลกิจกรรม – นึกถึงสมัยหัดเขียน CMS ใหม่ๆ ก่อนยุคที่จะมี WordPress เลย

2.2 ระบบสำหรับสมาชิก LINE OA

กดเมนูเพื่อเรียก LIFF แล้วก็เช็คสถานะสมาชิก หากยังไม่ได้สมัครก็บังคับสมัครก่อน

หลังจากนั้นไปหน้าลงทะเบียนกิจกรรม แสดงรายการกิจกรรมที่เปิดให้ลงทะเบียนอยู่ ก็เลือกและเพิ่มข้อมูลผู้ติดตามได้เลย

แต่สมาชิกบางรายที่ลงทะเบียนเองไม่เป็น หรือบางกิจกรรมที่ไม่ต้องการเปิดให้คนทั่วไปเห็น ก็จะมีหน้าคิวอาร์โค้ดที่ใส่รหัสสมาชิกไว้ พอเจ้าหน้าที่แสกน ก็จะพาไปหน้าแอดมินที่สามารถลงทะเบียนกิจกรรมให้สมาชิกนั้นๆ ได้

2.3 ระบบสรุปข้อมูลคนเข้าร่วม

แสดงยอดคนเข้าร่วมกิจกรรมแบบเรียลไทม์สำหรับทีมแอดมิน กับมี QR Code ไว้ Print แปะให้คนในแถวแสกน กรณีต้องการแค่นับจำนวน (อาจเพราะคนเยอะ หรือเร่งด่วน ให้เจ้าหน้าที่แสกนแทนได้)

มีรายชื่อผู้เข้าร่วมทั้งหมดพร้อมฟอร์มค้นหา ใช้ Simple Datatables เพราะเล็กและเบา

---

สรุป: การใช้ Astro สร้างระบบสมาชิก LINE Official Account

ส่วนตัวคิดว่า Astro เป็นเฟรมเวิร์กที่เรียนรู้ได้ง่ายกว่า Frontend อื่นๆ แต่ก็สามารถใช้ร่วมกับ React, Svelte หรือระบบอื่นๆ ได้ด้วย คนที่มีพื้นฐานด้านโค้ดมาก่อน หัดไม่นานก็น่าจะใช้เป็นครับ

ส่วน LINE OA หากหัดใช้ LIFF ไว้ แล้วไปเชื่อมกับระบบล็อกอินด้วย LINE ได้ ก็เท่ากับได้ระบบสมาชิก ที่เหลือคือการกำหนดสิทธิและกำหนดฟอร์มข้อมูลต่างๆ

ใครเคยทำ LINE OA แบบไหน หรือใครเคยใช้ Astro ทำอะไร มาแชร์กันในคอมเม้นต์ได้เลยนะครับ