จัดที่นั่งห้องเรียนของเราให้เหมือนเกมออนไลน์ - Seat Stealer
(seat-admin.coupy.dev)เบื้องหลัง
- เป็นไซด์โปรเจกต์ที่เริ่มขึ้นตอนสมัยเป็นนักเรียนมัธยมปลาย เพราะอยากเปลี่ยนการจัดที่นั่งที่น่ารำคาญและน่าเบื่อให้สนุกขึ้น
- วางแผนให้นักเรียนเข้าร่วมด้วยอุปกรณ์ของตัวเองโดยตรง และแย่งชิงที่นั่งที่ต้องการกัน
- ตอนนั้นทั้งรายชื่อนักเรียนก็ฮาร์ดโค้ดไว้ และโค้ดก็กลายเป็นสปาเก็ตตีเต็มตัวแล้ว แต่ก็ยังได้ผลงานที่ออกมาดูดีพอสมควร
- ลืมวันแรกที่ขออนุญาตครูประจำชั้นและสาธิตให้ดูไม่ได้เลย กระแสตอบรับดีมาก และโปรเจกต์นี้ก็ถูกใช้งานตลอดทั้งปี
สร้างใหม่
- หลังเรียนจบ ก็มีการติดต่อมาจากโรงเรียน เป็นการขอให้แก้โปรแกรมนี้ให้เข้ากับห้องเรียนปัจจุบัน
- แต่โค้ดพันกันมากเกินไป และทั้งรายชื่อนักเรียนกับผังที่นั่งก็ถูกฮาร์ดโค้ดไว้ เลยตัดสินใจสร้างใหม่เพื่อให้เป็นโปรเจกต์ที่ดูแลต่อได้
- โครงสร้าง
- แบ็กเอนด์: เพื่อให้ข้อมูลนักเรียนทั้งหมดถูกประมวลผลที่ฝั่งไคลเอนต์ แบ็กเอนด์จึงทำหน้าที่เพียงส่งข้อมูล คล้ายกับเป็น 'เกมเซิร์ฟเวอร์'
- Node.JS
- Socket.IO
- ฟรอนต์เอนด์ - แอดมิน: ใช้จัดการข้อมูลนักเรียนทั้งหมดและควบคุมการดำเนินเกมโดยรวม ออกแบบโดยสมมติว่าเป็นหน้าจอที่ฉายขึ้น TV
- SvelteKit
- Socket.IO
- ฟรอนต์เอนด์ - นักเรียน: เชื่อมต่อกับแอดมินผ่านแบ็กเอนด์เพื่อรับส่งข้อมูล
- SvelteKit
- Socket.IO
- แบ็กเอนด์: เพื่อให้ข้อมูลนักเรียนทั้งหมดถูกประมวลผลที่ฝั่งไคลเอนต์ แบ็กเอนด์จึงทำหน้าที่เพียงส่งข้อมูล คล้ายกับเป็น 'เกมเซิร์ฟเวอร์'
- มีการเพิ่มเอดิเตอร์พร้อม UI ที่ใช้งานง่าย เพื่อให้แก้ไขผังที่นั่งและรายชื่อนักเรียนได้สะดวก
สถานการณ์การใช้งาน
- ที่หน้าแอดมิน เมื่อเริ่ม "การจัดที่นั่งออนไลน์" และอัปโหลดไฟล์ข้อมูลนักเรียน จะมีการสร้าง 'ห้อง' ใหม่ และแสดง QR โค้ดให้นักเรียนเข้าใช้งานได้
- นักเรียนสแกน QR โค้ดด้วยอุปกรณ์ของตัวเองเพื่อเข้าเกม ส่วนหน้าแอดมินสามารถตรวจสอบและจัดการสถานะการเชื่อมต่อของนักเรียนได้
- เมื่อเริ่มเกมจากหน้าแอดมิน หน้าของนักเรียนจะแสดงหน้าจอ 'เลือกที่นั่ง' เมื่อลงคะแนนเลือกที่นั่งที่ต้องการ ข้อมูลจะถูกบันทึกที่หน้าแอดมิน
- เมื่อนักเรียนทุกคนลงคะแนนเสร็จ หน้าแอดมินจะแสดงผลลัพธ์
- นักเรียนที่เลือกที่นั่งซ้ำกันจะเล่นเกมง่าย ๆ กันในสถานที่จริง
- เป่ายิ้งฉุบ, ทอยเต๋า, มินิเกม ฯลฯ ขึ้นอยู่กับดุลยพินิจของครู
- นักเรียนที่ชนะเกมจะได้ครอบครองที่นั่งนั้น
- ทำซ้ำไปเรื่อย ๆ จนกว่านักเรียนทุกคนจะได้รับการจัดที่นั่ง
ความเห็นหลังทำ
- เพื่อเปิดเผยอย่างโปร่งใสว่าไม่มีการเก็บรวบรวมหรือนำข้อมูลนักเรียนไปใช้ โปรเจกต์นี้จึงถูกทำเป็นโอเพนซอร์ส
- เนื่องจากออกแบบมาโดยตั้งสมมติฐานว่าจะใช้งานในโรงเรียน สิ่งที่ยากที่สุดคือการออกแบบให้รองรับสถานการณ์ยกเว้นได้อย่างครบถ้วน
- หากนักเรียนหลุดการเชื่อมต่อระหว่างเกม จะพยายามเชื่อมต่อใหม่ และถ้าล้มเหลวก็สามารถกลับเข้ามาเล่นต่อจากเดิมได้เมื่อเชื่อมต่ออีกครั้ง
- หากนักเรียนขาดเรียน เกมก็ยังดำเนินต่อได้แม้ไม่มีผู้เข้าร่วมคนนั้น
- หากนักเรียนมาสาย ก็ยังสามารถเข้าร่วมระหว่างเกมได้
- หากมีการแอบอ้างชื่อของนักเรียนคนอื่น ก็สามารถเตะออกได้
- มีการทำคู่มือการใช้งานที่เข้าใจง่ายและเผยแพร่บน YouTube เพื่อให้ใช้งานได้กับห้องเรียนหลากหลายแบบ
- เนื่องจากยังเป็นช่วงปิดเทอม จึงยังไม่ได้เห็นผลลัพธ์ของโปรเจกต์นี้ และมันก็กลายเป็นเหตุผลที่ทำให้ตั้งตารอภาคเรียนฤดูใบไม้ผลิ ทั้งที่ไม่เคยรอมาก่อน
- หากรอบตัวคุณมีครูอยู่ ฝากช่วยแชร์ต่อด้วย ขอบคุณครับ
4 ความคิดเห็น
บน Chrome ต่อให้เพิ่มชื่อนักเรียนเข้าไป จำนวนก็นับไม่เพิ่มครับ
การต้องพิมพ์ชื่อทุกคนอาจไม่สะดวกนัก เลยคิดว่าน่าจะดีถ้าเปลี่ยนให้ใช้แค่หมายเลขได้
น่ารักดีครับ 555
แม้จะเห็นจุดที่ต้องแก้ไขเล็กๆ น้อยๆ อยู่บ้าง แต่ผมจะลองแชร์ให้ครูรอบตัวดูครับ
ไอเดียสนุกดีนะ!