ต่อเนื่องจากบล็อกที่แล้ว ที่ผมเคยเล่าถึงจุดเริ่มต้นของโปรเจกต์ stage idol calendar ที่ทำขึ้นมาเพื่อแก้ปัญหาความวุ่นวายในการตามตารางงานไอดอล ตอนแรกก็กะว่าทำใช้เองขำๆ ตอบโจทย์ความต้องการส่วนตัวเป็นหลัก แต่ไปๆ มาๆ เมื่อนำไปใช้งานจริงอย่างต่อเนื่อง ตัวระบบมันก็โตขึ้นเรื่อยๆ ตาม Requirement ที่เพิ่มเข้ามา จนตอนนี้ลากยาวมาถึงเวอร์ชัน v16.5.1 เรียบร้อยแล้วครับ
จากระบบ Event-timetable ธรรมดาๆ ตอนนี้มันกลายร่างเป็น “แพลตฟอร์ม” ไปแล้ว วันนี้เลยอยากมาอัปเดตฟีเจอร์ใหม่ๆ และเล่าเบื้องหลังแนวคิดการพัฒนาที่ผมสนุกไปกับมันในช่วงที่ผ่านมาให้ฟังกันครับ
- ยกระดับหน้าตาบ้านใหม่ และแถบ Live Now
– หน้าแรกของระบบถูกรื้อทำใหม่ให้ดูโปรขึ้นในสไตล์ Ticket-Marketplace มี Hero Carousel พร้อมปฏิทินขนาดย่อม และที่ผมชอบเป็นพิเศษคือการทำแถบ Live Now ที่จะโชว์ว่าตอนนี้มีเวทีไหนกำลังแสดงอยู่ หรือกำลังจะเริ่มในอีก 60 นาที โดยตัวระบบจะดึงเวลาจากเครื่องของผู้ชมมาคำนวณและรีเฟรชตัวเองทุกๆ 30 วินาที - ปรับการค้นหาใหม่ทั้งหมด
– ระบบค้นหา Full-text Search: ใช้พลังของ SQLite FTS5 ทำให้สามารถค้นหา โปรแกรม, อีเวนต์ และศิลปิน ได้อย่างรวดเร็วและแม่นยำมากยิ่งขึ้น - ระบบ Organizer
– ปลดล็อกให้ผู้จัดงานดูแลตารางตัวเองได้ ซึ่งเมื่อก่อนคนอัปเดตตารางมีแค่ Admin หลัก แต่พอสเกลงานมันใหญ่ขึ้น ผมเลยพัฒนาระบบสิทธิ์ผู้ใช้งานและเพิ่ม Role “Organizer” เข้ามา ตอนนี้ผู้จัดงานสามารถล็อกอินเข้ามาสร้างเวที จัด Line-up และอัปเดตข้อมูลศิลปินในงานของตัวเองได้อย่างอิสระ โดยระบบจะล็อกการมองเห็นและการแก้ไขไว้เฉพาะอีเวนต์ที่ตัวเองรับผิดชอบเท่านั้น - โอน Favorites ข้ามเครื่อง และ PWA Offline Cache
– จำระบบ Anonymous Favorites แบบไม่พึ่ง Database จากบล็อกที่แล้วได้ไหมครับ? ปัญหาที่เจอต่อมาคือ พอคนเอาเว็บไป Add to Home Screen เป็น PWA บน iOS ตัว Safari มันดันแยกล็อก localStorage ออกจากเบราว์เซอร์หลัก ทำให้วงที่กด Follow ไว้หายหมด!
– แทนที่จะยอมแพ้แล้วบังคับคนล็อกอิน ผมเลือกแก้ปัญหานี้ด้วย Cross-device Favorites transfer โดยการสร้าง QR Code ขึ้นมา ให้ผู้ใช้เอามือถืออีกเครื่อง (หรือแอปกล้อง) สแกนเพื่อส่งผ่าน Token Slug ไปตั้งค่าใน Environment ใหม่ได้เลย ง่ายและยังคงคอนเซปต์ Privacy ไว้ได้เหมือนเดิม
– นอกจากนี้ผมยังทำ PWA Offline Cache แบบจริงจัง เพราะเข้าใจฟีลเวลาไปงานใหญ่ๆ ที่คนเยอะๆ แล้วเน็ตมือถือชอบพัง ตัว Service Worker จะช่วยคอยดึงข้อมูลจาก Cache มาแสดง ทำให้เรายังเปิดดูตารางวงที่ชอบต่อได้แม้เน็ตจะดับไปชั่วขณะก็ตาม - การจัดการสถานที่ (Venues) และศิลปิน (Artists) ที่ดียิ่งขึ้น
– ระบบ Venue Dedup: จัดการสถานที่จัดงานให้เป็นระเบียบขึ้น มีหน้า Profile ของสถานที่นั้นๆ พร้อมระบุพิกัดแผนที่ และสามารถแยกประเภท “แพลตฟอร์มออนไลน์” เพื่อซ่อนจากหน้าค้นหาสถานที่ได้
– ข้อมูลศิลปินแน่นขึ้น: เพิ่มช่องทาง Social Media ของศิลปิน มีเครื่องมือ CLI สำหรับ Import ข้อมูลแบบ Bulk ได้, เพิ่มปุ่มกดซื้อตั๋วในแต่ละอีเวนต์ และระบบสามารถแสดงผลกลุ่มวงดนตรี (Parent group) ของศิลปินเดี่ยวได้ - Timezone ขั้นสุด และ Web Push Notification ฉบับทำเอง
– เรื่องสุดท้ายที่ท้าทายมากคือการแจ้งเตือน (Notifications) ในเวอร์ชันนี้ผมได้เพิ่ม Web Push Notifications เข้ามาเสริมทัพจากเดิมที่มีแค่ Telegram ความตึงคือผมเลือกที่จะเขียนมันขึ้นมาด้วย pure PHP ล้วนๆ ไม่พึ่งพา Composer หรือ Library ภายนอกเลย (ยังคงคอนเซปต์ “ไม่มี Dependencies ที่ไม่จำเป็น” จากตอนที่แล้ว) โดยเขียนให้รองรับ VAPID และ RFC 8291 เต็มรูปแบบ
– พร้อมกันนี้ยังได้แก้ปัญหา Timezone แบบ End-to-End ไม่ว่าผู้ใช้งานจะอยู่ที่ไหน ระบบจะปรับเวลาให้ตรงกับ Local Time เสมอ คราวนี้ไม่ว่าจะคอยตามตารางเวที หรือจะตั้งแจ้งเตือนรอตารางมีคิวจะเปิดไลฟ์สด ระบบก็จะเด้งเตือนล่วงหน้า ไม่มีพลาดแน่นอน
ส่วนอื่นๆ ที่ไม่ใช่ความสามารถของคนทั่วไป แต่เสริมให้ระบบแข็งแรงขึ้น อย่างหลังบ้านมี Audit Log บันทึกประวัติ และรองรับ 2FA (TOTP) ถือว่ามาไกลกว่าจุดเริ่มต้นที่แค่อยากทำปฏิทินดูตารางงานเองไปมากเลยครับ
สำหรับนักพัฒนาที่ติดตามอยู่
– เนื่องจากการเดินทางจากเวอร์ชัน 7 มาถึง 16 มีการเปลี่ยนแปลงโครงสร้างฐานข้อมูลไปหลายส่วน (เช่น การเพิ่มฟิลด์รูปภาพ, เพิ่มระบบสิทธิ์ผู้ใช้งาน, ระบบ FTS5 ฯลฯ)
– ตรวจสอบรายการ Files changed ได้จาก Release note ของ v16.5.1
– ในฝั่ง database แนะนำให้ backup database ของเก่าไว้ก่อน แล้ว เข้าไปที่ไฟล์ setup.php
– กดปุ่ม “Run All Migrations” ตัวสคริปต์จะจัดการปรับโครงสร้างฐานข้อมูลทุกอย่างให้โดยอัตโนมัติ
– รันคำสั่ง php sync-sw-version.php เพื่ออัปเดต Service-worker PWA cache ให้ตรงกับเวอร์ชันปัจจุบันของแอปพลิเคชัน
ใครที่สนใจเอาไปใช้งาน จัดงานอีเวนต์ งานคอนเสิร์ตที่มีหลายเวที หรืออยากเข้าไปดูซอร์สโค้ด ก็ยังสามารถเข้าไปดาวน์โหลดและ Contribute กันได้ที่ GitHub – stage-idol-calendar (v16.5.1) เหมือนเดิมครับ!
ใครอยากลองว่ามันทำอะไรได้บ้างก็ที่นี่ครับ https://idoltrack.thaicyberpoint.com/