Mengubah Penataan Tempat Duduk Kelas Jadi Seperti Game Online - Seat Stealer

Latar belakang

• Saat masih SMA, ini adalah side project yang dimulai dari keinginan untuk mengubah penataan tempat duduk yang merepotkan dan membosankan menjadi sesuatu yang lebih seru
• Konsepnya adalah para siswa ikut langsung lewat perangkat masing-masing dan memperebutkan tempat duduk yang mereka inginkan
• Saat itu daftar siswa juga di-hardcode, dan kodenya benar-benar menjadi spaghetti code, tetapi hasil akhirnya cukup meyakinkan
• Saya tidak bisa melupakan hari pertama saat mendemokannya setelah mendapat izin dari wali kelas. Responsnya sangat antusias, dan proyek ini akhirnya digunakan sepanjang tahun

Membangun ulang

• Setelah lulus, saya dihubungi oleh sekolah. Mereka meminta program ini disesuaikan untuk kelas yang sedang berjalan.
• Namun, kodenya terlalu berantakan, dan karena daftar siswa serta tata letak tempat duduk di-hardcode, saya memutuskan untuk membangunnya ulang demi proyek yang lebih mudah dipelihara
• Struktur
  • Backend: agar seluruh data siswa diproses di klien, backend hanya berperan sebagai semacam 'game server' yang mengirimkan data.
    • Node.JS
    • Socket.IO
  • Frontend - admin: mengelola seluruh data siswa dan mengatur jalannya game secara keseluruhan. Layar ini dirancang dengan asumsi akan ditayangkan ke TV.
    • SvelteKit
    • Socket.IO
  • Frontend - siswa: terhubung ke admin melalui backend untuk bertukar data.
    • SvelteKit
    • Socket.IO
• Untuk memudahkan pengubahan tata letak tempat duduk dan daftar siswa, ditambahkan editor dengan UI yang ramah pengguna.

Skenario

1. Di halaman admin, mulai "penataan tempat duduk online" dan unggah file data siswa, maka sebuah 'ruang' baru akan dibuat dan QR code yang bisa diakses siswa akan ditampilkan.
2. Siswa memindai QR code dengan perangkat masing-masing untuk masuk ke game. Di halaman admin, status koneksi siswa bisa dipantau dan dikelola.
3. Saat admin memulai game, layar 'pilih tempat duduk' akan muncul di halaman siswa. Ketika mereka memberikan suara untuk tempat duduk yang diinginkan, hasilnya akan tercatat di halaman admin.
4. Setelah semua siswa selesai memilih, halaman admin menampilkan hasilnya.
5. Siswa yang memilih tempat duduk yang sama kemudian memainkan game sederhana di lokasi
   • suit, dadu, minigame, dan sebagainya, sesuai kebijakan guru
6. Siswa yang menang dalam game akan mendapatkan tempat duduk tersebut.
7. Proses ini diulang sampai semua siswa mendapatkan tempat duduk

Catatan akhir

• Untuk secara transparan menunjukkan bahwa data siswa tidak dikumpulkan atau dimanfaatkan, proyek ini dibuat menjadi open source.
• Karena proyek ini diasumsikan dijalankan di sekolah, bagian tersulit adalah merancangnya agar bisa menangani berbagai situasi pengecualian.
  • Jika koneksi siswa terputus di tengah game, sistem akan mencoba menyambung ulang, dan jika gagal, siswa bisa melanjutkan dari titik sebelumnya saat masuk kembali.
  • Jika ada siswa yang absen, game tetap bisa berjalan tanpa kehadirannya.
  • Jika ada siswa yang terlambat, mereka tetap bisa ikut di tengah jalannya game.
  • Jika ada yang menyamar memakai identitas siswa lain, mereka bisa dikeluarkan.
• Agar bisa digunakan di berbagai kelas, saya membuat panduan penggunaan yang ramah dan mengunggahnya ke YouTube.
  • https://youtu.be/C4ezwIrIfjc
• Karena masih musim liburan, saya belum bisa melihat hasil proyek ini, jadi ini menjadi alasan pertama yang membuat saya menantikan semester musim semi.
• Jika ada guru di sekitar Anda, mohon bantu bagikan. Terima kasih.

[2147483647]

Menulis semua nama bisa terasa merepotkan, jadi akan bagus jika bisa diubah hanya dengan nomor

[joon14]

Lucu ya wkwk
Memang terlihat ada beberapa poin kecil yang perlu diperbaiki, tapi saya akan coba membagikannya ke guru-guru di sekitar saya.

[geeksk553]

Idenya seru juga!