Mejakita Community & Mini-Games

Masalah

Komunitas belajar daring Mejakita menyajikan berbagai materi edukasi untuk pelajar di seluruh Indonesia. Agar proses belajar tidak monoton, Mejakita merancang ekosistem gamifikasi dengan menghadirkan mini-game interaktif berbasis web (seperti Kitty Attack, game aksi 4-level di mana pemain mengendalikan karakter kucing untuk melompati rintangan dan mengeliminasi monster secara progresif). Tantangan utamanya adalah mengintegrasikan game engine sisi klien (Phaser.js) dengan aplikasi portal komunitas (Next.js) dan layanan backend berlatensi rendah: setiap perolehan skor pemain harus divalidasi, disimpan, dan diagregasi secara real-time ke dalam papan peringkat 10 besar (Top-10) tanpa membebani database utama saat ribuan siswa aktif berkompetisi.

Peran saya

Selama magang di PT Mejakita Edunusa Mandiri, saya berkontribusi dalam perancangan modul gamifikasi, pengembangan level mini-game, dan infrastruktur backend leaderboard:

• Pengembangan Mini-Game Interaktif (Phaser.js): Mengembangkan adegan multi-level pada mini-game Kitty Attack (Scene 1 hingga 4), mengatur mekanisme fisika sprite, spawning monster, collision detection, efek audio, serta kalkulasi perolehan skor permainan.
• Pipeline Pengiriman Skor Sisi Klien: Menghubungkan siklus hidup game over / tamat level dengan helper postScore() untuk mengirimkan payload skor terenkripsi ke endpoint leaderboard REST API.
• Layanan Agregasi Leaderboard & Caching (Node.js & LRU Cache): Merancang REST API penerima skor dan penyaji peringkat 10 besar per game, dipercepat dengan in-memory caching (lru-cache) untuk meminimalkan beban full-table scan pada database MySQL.
• Aturan Deterministik Peringkat (Tie-Breaking Logic): Mengimplementasikan query pengurutan adil di mana skor yang sama diurutkan berdasarkan timestamp pencapaian lebih awal (created_at ASC) atau durasi bermain tercepat.
• Integrasi Gamifikasi Akun Pelajar: Menghubungkan skor mini-game dengan sistem lencana (badges) dan poin aktivitas di platform komunitas Next.js.

Arsitektur sistem

Ekosistem menggabungkan game engine modern di peramban dengan layanan backend terdistribusi:

• Frontend & Game Client (Next.js & Phaser.js): Aplikasi web portal memuat canvas Phaser secara dinamis. Sprite sheet, audio, dan event keyboard (lompat, serang) diproses secara client-side pada 60 FPS.
• Pipeline Skor Terpusat: Saat permainan berakhir, event game memicu transmisi skor via fetch menuju backend leaderboard (/api/leaderboard).
• In-Memory LRU Cache: Menahan cache snapshot peringkat 10 besar per judul game untuk melayani request pembacaan masif dari dashboard siswa secara sub-millisecond.
• Relational Storage (MySQL): Menyimpan rekam jejak setiap sesi bermain siswa lengkap dengan metadata game ID, skor capaian, dan timestamp.

Modul & endpoint utama

Tantangan teknis

1. Sinkronisasi siklus hidup Phaser.js dalam Next.js (SSR vs CSR). Phaser membutuhkan objek global browser (window dan document) yang tidak tersedia di lingkungan Server-Side Rendering Next.js. Solusinya, instansiasi canvas game diisolasi menggunakan dynamic import dengan opsi { ssr: false }, memastikan seluruh modul game engine hanya dieksekusi setelah komponen selesai di-mount di browser klien.

2. Penanganan lonjakan kueri agregasi peringkat secara konkuren. Ribuan siswa yang menyelesaikan kuis dan mini-game secara bersamaan memicu permintaan refresh leaderboard berulang kali. Untuk mencegah degradasi performa pada database MySQL, dipasang lapisan LRU Cache di tingkat server. Query agregasi ORDER BY score DESC LIMIT 10 hanya dijalankan ketika data cache telah kedaluwarsa atau saat skor baru masuk melampaui skor batas bawah posisi ke-10.

3. Fair play & pencegahan manipulasi skor sisi klien. Game yang berjalan di browser rentan dimanipulasi menggunakan console JavaScript. Backend memvalidasi setiap payload terhadap ambang skor maksimum logis per ronde game serta memeriksa integritas token sesi bermain sebelum skor dimasukkan ke daftar peringkat.

Yang ingin saya perbaiki

• Menggunakan Redis Sorted Sets (ZADD, ZREVRANGE) untuk kalkulasi peringkat leaderboard terdistribusi secara native dan real-time.
• Menambahkan WebSockets agar perubahan pergantian posisi 10 besar dapat ter-update secara animasi langsung di layar pemain lain.
• Menyediakan filter papan peringkat berdasarkan periode waktu (Harian, Mingguan, Bulanan, dan Sepanjang Waktu).