Game Voting Real-Time WGG 2026
Game keputusan tiga tahap yang dikendalikan operator dan dirancang untuk sesi orientasi sekitar 1.300 mahasiswa baru, dengan timer tersinkron, update state melalui Ably, voting, dan visualisasi hasil live.
Ikhtisar
Pengalaman Wawasan Kebangsaan WGG 2026 mengubah tiga skenario keputusan etika dan karier menjadi game audiens yang tersinkron. Operator mengatur perpindahan tahap dan jendela voting 30 detik; browser peserta mengikuti state yang sama, mengirim satu vote per tahap, lalu merender hasil agregat A/B.
Metrik terverifikasi
- Tahap keputusan
- 3
- Jendela voting
- 30 dtk
- Target audiens
- ≈1.300
Ditetapkan dalam konsep event dan diimplementasikan dalam flow peserta.
Timer setiap tahap yang dipicu operator.
Perkiraan target sesi orientasi, belum menjadi jumlah user live yang terverifikasi.
Masalah
Audiens orientasi berskala besar perlu mengikuti alur cerita yang sama, voting dalam waktu singkat, dan melihat hasil agregat tanpa refresh manual atau perpindahan tahap yang tidak terkendali.
Target Pengguna
Sekitar 1.300 mahasiswa baru Informatika dan operator sesi WGG 2026
Peran Saya
Developer pengalaman peserta dan integrasi real-time
Membangun game tiga tahap untuk peserta, menghubungkan service frontend dan admin Laravel, mengintegrasikan Ably Pro dengan token browser subscribe-only, mengimplementasikan vote berbasis session dan pemetaan hasil, serta membantu mendiagnosis risiko kapasitas sebelum sesi live.
Kontribusi spesifik saya
- Membangun UI mobile peserta untuk landing, tiga tahap keputusan, hasil voting, dan ending berdasarkan narasi serta aset visual yang diberikan tim event.
- Menghubungkan state game yang dikendalikan operator ke browser peserta melalui channel Ably dan memetakan state backend ke engine UI Blade/JavaScript yang sudah ada.
- Mengimplementasikan endpoint token server-side agar browser menerima akses realtime subscribe-only tanpa mengekspos API key penuh Ably.
- Menghubungkan vote ke API admin Laravel menggunakan identitas peserta yang sudah login, validasi tahap, pengecekan waktu voting, serta satu jawaban tersimpan per peserta, run, dan tahap.
Fitur Utama
- Transisi landing, tahap, hasil, dan ending yang dikendalikan operator
- Tiga skenario keputusan dengan dua pilihan voting per tahap
- Jendela voting 30 detik yang tersinkron
- Update state game real-time melalui Ably
- Autentikasi token browser subscribe-only
- Voting berbasis session dan perlindungan vote duplikat
- Persentase A/B agregat dan tampilan pilihan mayoritas
- Fallback polling ketika koneksi realtime tidak tersedia
Status fitur
Flow game peserta
Landing, tiga tahap, hasil, timer, dan ending sudah diimplementasikan serta diuji pada level source.
Sinkronisasi realtime Ably
Client peserta subscribe menggunakan token terbatas dari server dan menerima event state operator/game.
Kapasitas sekitar 1.300 audiens concurrent
Ably Pro sudah dikonfigurasi, tetapi load end-to-end juga bergantung pada polling, rate limit, contention database, delivery aset, dan kapasitas hosting. Bukti load test penuh untuk sekitar 1.300 user belum tersedia.
Tantangan & Trade-off
- Menjaga semua browser peserta sinkron terhadap transisi operator sambil mempertahankan fallback polling
- Melindungi kredensial server Ably dan membatasi client browser hanya pada capability subscribe
- Mencegah vote duplikat atau di luar waktu tanpa mempercayai identifier peserta yang dikirim browser
- Menyiapkan target sekitar 1.300 audiens tanpa menganggap kapasitas koneksi provider realtime sebagai bukti bahwa seluruh jalur Laravel dan database mampu menahan load yang sama
Hasil
Flow landing, tiga tahap voting, hasil, dan ending sudah terimplementasi end-to-end dengan source-level test dan fallback polling. Sekitar 1.300 adalah target audiens event; load skala penuh dan penggunaan live belum diklaim.
Bukti Visual