โปรเจกต์ส่วนตัว·2025
HRCL 2025 Seminar Booking
ระบบลงทะเบียนและจองที่นั่งงานสัมมนาแบบเรียลไทม์
- บทบาท
- Full Stack Developer
- ทีม
- Solo Project
- ปี
- 2025
ตัวเลขสำคัญ
- 190
- ผู้ลงทะเบียนจริง
- 3
- ผู้ดูแลระบบ
- เรียลไทม์
- สถานะที่นั่ง
- ม.เกษตรศาสตร์ กำแพงแสน
- ใช้งานจริงที่
เว็บแอปพลิเคชันสำหรับลงทะเบียนเข้าร่วมและจองที่นั่งงานสัมมนาแบบเรียลไทม์ พร้อมหน้าจอสำหรับผู้จัดงานเพื่อตรวจสอบผังที่นั่ง รายชื่อผู้เข้าร่วม และผู้ที่นั่งในแต่ละตำแหน่งได้ทันที ระบบถูกนำไปใช้งานจริงในงานสัมมนาคณะอุตสาหกรรมบริการ สาขาการโรงแรมและภัตตาคาร มหาวิทยาลัยเกษตรศาสตร์ กำแพงแสน (วันพุธที่ 1 ตุลาคม 2568 เวลา 08:00–12:00 น.) โดยมีผู้ลงทะเบียน 190 คน และผู้ดูแลระบบ 3 คน ระบบรองรับการใช้งานพร้อมกันได้อย่างราบรื่น (มีข้อขัดข้องเล็กน้อยในช่วงเริ่มต้น และแก้ไขได้ทันที).
โจทย์และปัญหา
- 01ผู้จัดงานประเมินจำนวนที่นั่งและสถานะการลงทะเบียนได้ไม่แม่นยำ ทำให้การวางแผนและการยืนยันสิทธิ์หน้างานมีความเสี่ยง
- 02ต้องการการยืนยันผลการจองแบบทันทีเพื่อให้ผู้เข้าร่วมมั่นใจว่าได้รับการลงทะเบียนและมีที่นั่งแน่นอน
- 03ผู้จัดงานต้องการข้อมูลผู้เข้าร่วม (เช่น รหัสนักศึกษา) เพื่อบันทึกและนำไปใช้งานต่อ แต่กระบวนการเดิมตรวจสอบยากและอัปเดตไม่ทันสถานการณ์
วิธีแก้
- 01พัฒนาระบบอัปเดตสถานะที่นั่งแบบเรียลไทม์ด้วย Pusher (WebSocket) เพื่อให้ทั้งฝั่งผู้ลงทะเบียนและผู้จัดงานเห็นสถานะเดียวกันทันที
- 02เมื่อผู้ใช้กดยืนยันการจอง ระบบจะบันทึกข้อมูลและปรับสถานะที่นั่งเป็น “ถูกจองแล้ว” ทันที เพื่อลดความสับสนและป้องกันการจองซ้ำซ้อนในช่วงที่มีการใช้งานหนาแน่น
- 03จัดทำหน้าจอสำหรับผู้จัดงาน (Admin) เพื่อดูผังที่นั่งแบบเรียลไทม์ ตรวจสอบว่า “ที่นั่งใดเป็นของใคร” พร้อมรายการผู้เข้าร่วมสำหรับการจัดการข้อมูลและการบันทึกภายหลัง
ผลลัพธ์
- 01ผู้เข้าร่วมได้รับการยืนยันที่นั่งอย่างชัดเจนและทันที ลดความกังวลเรื่องการลงทะเบียนไม่สมบูรณ์หรือไม่มีที่นั่ง
- 02ผู้จัดงานสามารถติดตามการจองและรายชื่อผู้เข้าร่วมได้แบบเรียลไทม์ ช่วยให้การดำเนินงานหน้างานเป็นระบบและราบรื่น
- 03ระบบรองรับการจองพร้อมกันจำนวนมากได้อย่างมีเสถียรภาพ และถูกใช้งานจริงกับผู้ลงทะเบียน 190 คน และผู้ดูแลระบบ 3 คน
แกลเลอรี
Main
16:9 / MD
หน้าแรกของระบบลงทะเบียน
หน้าแจ้งว่าปิดการลงทะเบียนแล้ว
หน้ากรอกข้อมูลลงทะเบียนเข้าร่วมงาน
หน้าเลือกที่นั่งและยืนยันการจอง
หน้าแสดงผลลัพธ์การจอง
หน้าฝั่งแอดมินดูผังที่นั่งแบบเรียลไทม์และข้อมูลสถิติ (ที่ได้ใช้งานจริง)
หน้าฝั่งแอดมินดูผังที่นั่งแบบเรียลไทม์และข้อมูลสถิติ (demo)
หน้าฝั่งแอดมินดูรายชื่อผู้เข้าร่วมทั้งหมด
หน้าฝั่งแอดมินดูรายละเอียดผู้เข้าร่วมแต่ละคน
ทบทวนโปรเจกต์
ความท้าทาย
- การจัดการ Concurrency ในฐานข้อมูลเพื่อหลีกเลี่ยงการจองซ้ำซ้อนภายใต้การใช้งานพร้อมกัน
- การทำ Real-time State Management ให้ข้อมูลสอดคล้องกันระหว่างหลายหน้าจอและหลายบทบาท (ผู้ใช้/แอดมิน)
- ระยะเวลาพัฒนาค่อนข้างจำกัด จึงต้องออกแบบให้ส่งมอบได้ทันกำหนดพร้อมความเสถียร
สิ่งที่เรียนรู้
- การออกแบบสถาปัตยกรรม Real-time (WebSockets) และการผสาน Pusher กับ Next.js อย่างเหมาะสม
- แนวคิดด้าน Concurrency Control และการทำธุรกรรม (Transactions) เพื่อป้องกันข้อมูลไม่สอดคล้อง
- การออกแบบ UX สำหรับสถานการณ์ที่มีผู้ใช้งานพร้อมกันจำนวนมาก ให้ผู้ใช้เข้าใจสถานะและผลการจองได้ทันที
- การติดตามและแก้ปัญหาในช่วง Go-live: แยกสาเหตุ ตรวจสอบ Log และปรับแก้ได้รวดเร็วเมื่อพบข้อผิดพลาดช่วงเริ่มใช้งานจริง
สนใจงานแนวนี้?
เล่าโจทย์ของคุณให้ผมฟัง ตอบกลับภายใน 24 ชั่วโมง