PHATPHUM.ME
Personal2025

HRCL 2025 Seminar Booking

ระบบลงทะเบียนและจองที่นั่งงานสัมมนาแบบเรียลไทม์

HRCL 2025 Seminar Booking

บทบาท

Full Stack Developer

ระยะเวลา

2025

ทีม

Solo Project

Tech Stack

Next.js, MySQL, Prisma, Pusher

เว็บแอปพลิเคชันสำหรับลงทะเบียนเข้าร่วมและจองที่นั่งงานสัมมนาแบบเรียลไทม์ พร้อมหน้าจอสำหรับผู้จัดงานเพื่อตรวจสอบผังที่นั่ง รายชื่อผู้เข้าร่วม และผู้ที่นั่งในแต่ละตำแหน่งได้ทันที ระบบถูกนำไปใช้งานจริงในงานสัมมนาคณะอุตสาหกรรมบริการ สาขาการโรงแรมและภัตตาคาร มหาวิทยาลัยเกษตรศาสตร์ กำแพงแสน (วันพุธที่ 1 ตุลาคม 2568 เวลา 08:00–12:00 น.) โดยมีผู้ใช้งานลงทะเบียน 190 คน และผู้ดูแลระบบ 3 คน สามารถรองรับการใช้งานพร้อมกันได้อย่างราบรื่น (มีข้อขัดข้องเล็กน้อยในช่วงเริ่มต้นและได้แก้ไขได้ทันที).

01 ปัญหา

  • ผู้จัดงานประเมินจำนวนที่นั่งและสถานะการลงทะเบียนได้ไม่แม่นยำ ทำให้การวางแผนและการยืนยันสิทธิ์หน้างานมีความเสี่ยง
  • ต้องการการยืนยันผลการจองแบบทันทีเพื่อให้ผู้เข้าร่วมมั่นใจว่าได้รับการลงทะเบียนและมีที่นั่งแน่นอน
  • ผู้จัดงานต้องการข้อมูลผู้เข้าร่วม (เช่น รหัสนักศึกษา) เพื่อบันทึกและนำไปใช้งานต่อ แต่กระบวนการเดิมตรวจสอบยากและอัปเดตไม่ทันสถานการณ์

02 แนวทางแก้ไข

  • พัฒนาระบบอัปเดตสถานะที่นั่งแบบเรียลไทม์ด้วย Pusher (WebSocket) เพื่อให้ทั้งฝั่งผู้ลงทะเบียนและผู้จัดงานเห็นสถานะเดียวกันทันที
  • เมื่อผู้ใช้กดยืนยันการจอง ระบบจะบันทึกข้อมูลและปรับสถานะที่นั่งเป็น “ถูกจองแล้ว” ทันที เพื่อลดความสับสนและป้องกันการจองซ้ำซ้อนในช่วงที่มีการใช้งานหนาแน่น
  • จัดทำหน้าจอสำหรับผู้จัดงาน (Admin) เพื่อดูผังที่นั่งแบบเรียลไทม์ ตรวจสอบว่า “ที่นั่งใดเป็นของใคร” พร้อมรายการผู้เข้าร่วมสำหรับการจัดการข้อมูลและการบันทึกภายหลัง

03 ผลลัพธ์

  • ผู้เข้าร่วมได้รับการยืนยันที่นั่งอย่างชัดเจนและทันที ลดความกังวลเรื่องการลงทะเบียนไม่สมบูรณ์หรือไม่มีที่นั่ง
  • ผู้จัดงานสามารถติดตามการจองและรายชื่อผู้เข้าร่วมได้แบบเรียลไทม์ ช่วยให้การดำเนินงานหน้างานเป็นระบบและราบรื่น
  • ระบบรองรับการจองพร้อมกันจำนวนมากได้อย่างมีเสถียรภาพ และถูกใช้งานจริงกับผู้ลงทะเบียน 190 คน และผู้ดูแลระบบ 3 คน

Project Gallery

Gallery image 1

หน้าแรกของระบบลงทะเบียน

Gallery image 2

หน้าแจ้งว่าปิดการลงทะเบียนแล้ว

Gallery image 3

หน้ากรอกข้อมูลลงทะเบียนเข้าร่วมงาน

Gallery image 4

หน้าเลือกที่นั่งและยืนยันการจอง

Gallery image 5

หน้าแสดงผลลัพธ์การจอง

Gallery image 6

หน้าฝั่งแอดมินดูผังที่นั่งแบบเรียลไทม์และข้อมูลสถิติ (ที่ได้ใช้งานจริง)

Gallery image 7

หน้าฝั่งแอดมินดูผังที่นั่งแบบเรียลไทม์และข้อมูลสถิติ (demo)

Gallery image 8

หน้าฝั่งแอดมินดูรายชื่อผู้เข้าร่วมทั้งหมด

Gallery image 9

หน้าฝั่งแอดมินดูรายละเอียดผู้เข้าร่วมแต่ละคน