ข้ามไปยังเนื้อหาหลัก
ผลงานทั้งหมด

โปรเจกต์ส่วนตัว·2026

Snooker Score

เว็บแอปพลิเคชันบันทึกคะแนนและวิเคราะห์สถิติการเล่นสนุกเกอร์

Snooker Score
บทบาท
Full Stack Developer
ทีม
Solo Project
ปี
2026

ตัวเลขสำคัญ

Session → Frame
โครงสร้างการเล่น
2+ คน
ผู้เล่นต่อเกม
Optimistic UI
เทคนิคกันค้างเมื่อเน็ตหลุด
มือถือ
ออกแบบมาสำหรับ

เว็บแอปพลิเคชันสำหรับบันทึกคะแนนสนุกเกอร์ที่ออกแบบมาเพื่อใช้งานจริงเวลาไปตีสนุกเกอร์กับเพื่อนหรือครอบครัว มีระบบสมาชิก (Register/Login) เพื่อจัดการบัญชีส่วนตัว ภายในระบบสามารถจัดการรายชื่อผู้เล่นและมีระบบวิเคราะห์ข้อมูลสถิติเชิงลึกของผู้เล่นแต่ละคน โครงสร้างการแข่งขันถูกแบ่งออกเป็น Session (รอบการเล่น) และย่อยเป็น Frame (เกม) รองรับผู้เล่นตั้งแต่สองคนขึ้นไป สามารถบันทึกได้ทั้งคะแนนปกติและคะแนนเสีย (Foul) พร้อมระบบจัดเก็บ Timeline อย่างละเอียดทั้งในระดับเฟรมและเซสชัน นอกจากนี้ยังมีระบบ Archived Sessions สำหรับเก็บประวัติการเล่นเก่า จุดเด่นสำคัญคือหน้าบันทึกคะแนนที่ออกแบบ UX/UI ให้สวยงาม ชัดเจน ใช้งานง่าย และรองรับการทำงานแบบ Optimistic UI ที่พักคิวข้อมูลไว้ในเครื่อง ทำให้สามารถบันทึกคะแนนได้อย่างต่อเนื่องและลื่นไหล แม้ในบางช่วงที่สัญญาณอินเทอร์เน็ตไม่เสถียร

โจทย์และปัญหา

  1. 01การจดบันทึกคะแนนสนุกเกอร์รวมถึงคะแนนเสีย (Foul) ด้วยวิธีปกติหรือในกระดาษทำได้ยาก เสียเวลา และมักจะลืมเมื่อเล่นหลายเฟรม
  2. 02ขาดเครื่องมือในการเก็บสถิติระยะยาวเพื่อดูพัฒนาการ หรือเปรียบเทียบข้อมูลการเล่น (เช่น ใครชนะบ่อยกว่า สถิติการทำคะแนน) ระหว่างกลุ่มเพื่อนหรือคนในครอบครัว
  3. 03สัญญาณอินเทอร์เน็ตที่ไม่แน่นอน ทำให้แอปพลิเคชันทั่วไปที่ต้องรอการตอบกลับจากเซิร์ฟเวอร์ทุกครั้งที่กดคะแนน มีอาการค้างหรือใช้งานได้สะดุด

วิธีแก้

  1. 01พัฒนาระบบจัดการผู้เล่นและการแข่งขัน โดยจัดโครงสร้างข้อมูลแบบ Session และ Frame ให้เป็นระเบียบ พร้อมระบบ Archived สำหรับซ่อนเซสชันที่จบไปแล้วแต่ยังคงสถิติไว้
  2. 02สร้างระบบบันทึกคะแนนที่รองรับผู้เล่นหลายคน พร้อมเก็บข้อมูลแบบ Timeline เพื่อให้สามารถย้อนดูเหตุการณ์ในแต่ละเฟรมได้อย่างแม่นยำ และนำข้อมูลไปประมวลผลเป็นกราฟวิเคราะห์สถิติ
  3. 03ประยุกต์ใช้เทคนิค Optimistic UI ในหน้าบันทึกคะแนน โดยอัปเดตหน้าจอให้ผู้ใช้เห็นทันทีที่กด และพักคิวข้อมูล (Local Queue) ไว้ก่อน เพื่อรอจังหวะส่งเข้าฐานข้อมูล วิธีนี้ช่วยแก้ปัญหาเน็ตหลุดชั่วคราว ทำให้รักษาความสอดคล้องของข้อมูล (Data Consistency) ได้โดยที่การจดคะแนนไม่หยุดชะงัก

ผลลัพธ์

  1. 01ได้แอปพลิเคชันบันทึกคะแนนสนุกเกอร์ที่ใช้งานได้จริง UX/UI ออกแบบมาให้กดง่าย สบายตา เหมาะกับการใช้งานผ่านมือถือระหว่างเล่น
  2. 02ผู้ใช้สามารถย้อนดูประวัติการเล่น สถิติการแพ้ชนะ และ Timeline การทำคะแนนของตัวเองและเพื่อน ๆ ได้อย่างครบถ้วนและเป็นระบบ
  3. 03ประสบการณ์การใช้งาน (UX) ไร้รอยต่อ หมดปัญหาเรื่องแอปค้างตอนกดบันทึกคะแนนเมื่อเน็ตหลุด ทำให้ผู้เล่นโฟกัสกับเกมบนโต๊ะสนุกเกอร์ได้เต็มที่

ทบทวนโปรเจกต์

ความท้าทาย

  • การจัดการ State ที่ซับซ้อนในหน้าบันทึกคะแนน เช่น ลำดับคิวผู้เล่น การฟาวล์ การสลับเฟรม และการทำให้ข้อมูลทุกอย่างแสดงผลถูกต้องแบบเรียลไทม์ (ฝั่ง Client)
  • การออกแบบสถาปัตยกรรมการจัดการคิวข้อมูล (Offline/Local Queueing) เพื่อรองรับจังหวะที่สัญญาณเน็ตขาดหาย โดยที่เมื่อเน็ตกลับมา ข้อมูลต้องซิงค์เข้าฐานข้อมูลได้อย่างถูกต้องตามลำดับและไม่เกิดความผิดเพี้ยน
  • การออกแบบโครงสร้างฐานข้อมูลเพื่อจัดเก็บข้อมูล Timeline และสถิติยิบย่อย ให้สามารถนำมา Query เพื่อทำหน้าสรุปผลวิเคราะห์ได้อย่างมีประสิทธิภาพ

สิ่งที่เรียนรู้

  • ได้เรียนรู้และลงมือทำ Optimistic UI อย่างลึกซึ้ง ซึ่งเป็นหัวใจสำคัญที่ทำให้แอปพลิเคชันที่ต้องมีการตอบสนองไว (Action-heavy) น่าใช้งานมากขึ้น
  • เทคนิคการจัดการ Local State และ Data Synchronization เพื่อจัดการกับปัญหา Network Latency และ Offline State
  • การวิเคราะห์และการออกแบบ UX/UI ให้ตอบโจทย์ผู้ใช้งานเฉพาะกลุ่ม (Niche) โดยเน้นไปที่ความรวดเร็วในการรับรู้ข้อมูลและการลดขั้นตอนการกดปุ่มให้เหลือน้อยที่สุดระหว่างการแข่งขัน

สนใจงานแนวนี้?

เล่าโจทย์ของคุณให้ผมฟัง ตอบกลับภายใน 24 ชั่วโมง

คุยเรื่องงาน