Membuat game butuh 3 bulan tanpa LLM, 3 hari jika bersama LLM

• Seorang insinyur perangkat lunak dengan 15 tahun pengalaman membagikan pengalaman mengembangkan game kartu masa kecilnya dengan bahasa Go
• Saat mengembangkan “Truco” tanpa LLM (model bahasa besar), ia menyelesaikan semua masalah secara manual, termasuk desain UI dan deployment serverless, dan menghabiskan 3 bulan
• Saat membuat “Escoba”, ia memanfaatkan LLM untuk sangat memangkas konversi kode backend dan kecepatan implementasi, dan sebagian besar berhasil berjalan hanya dengan 1 prompt
• Di bagian akhir tulisan, ia memberikan panduan bertahap agar siapa pun bisa membuat game, lengkap dengan contoh Tic-Tac-Toe, backend Go, konversi WASM, dan integrasi React
• Namun, frontend React dan pengelolaan status game berbasis WASM tetap perlu di-debug dan diimplementasikan sendiri

---

Pengantar

• Seorang insinyur perangkat lunak berpengalaman 15 tahun menyadari bahwa ia belum pernah benar-benar membuat dan merilis game sendiri
• Ia memutuskan untuk mengembangkan salah satu game kartu yang dulu ia mainkan bersama teman-temannya di Argentina saat kecil dengan bahasa Go

Truco: 3 bulan tanpa LLM

• Pada 18 Juni 2024, ia mulai mengembangkan game kartu bernama Truco dengan backend Go. Untuk frontend, ia menulisnya dengan pengetahuan React yang sangat minim
• Implementasi UI menjadi tantangan terbesar, dan agar tidak perlu menyediakan server, ia menggunakan TinyGo untuk mentranspilasi ke WASM (WebAssembly) lalu mendistribusikan file statis ke GitHub Pages
• Karena saat itu belum ada LLM yang digunakan, ia harus mencari sendiri semua detail dan melalui banyak trial and error, hingga selesai dalam sekitar 3 bulan
• Tujuannya murni untuk menyelesaikan game, bukan untuk iklan atau monetisasi, dan bahkan setelah 1 tahun sejak rilis, game itu masih terus dimainkan
  • Mainkan Truco: https://marianogappa.github.io/truco-argentino
  • Backend (Golang): https://github.com/marianogappa/truco
  • Frontend (React): https://github.com/marianogappa/truco-argentino

Escoba: 3 hari bersama LLM

• Setahun kemudian, saat mengunjungi Argentina untuk menemui keluarga, ia mengajarkan keponakannya game kartu terpopuler kedua bernama Escoba
• Kali ini ia memanfaatkan LLM (Claude), menyalin backend Truco, lalu menjelaskan aturan Escoba lewat prompt dan meminta refaktorisasi kode
• Hasilnya hampir sempurna hanya dengan prompt pertama, dan ia hanya perlu memperbaiki sedikit bug kecil serta menambahkan beberapa fitur secara manual
• Frontend tetap perlu diimplementasikan dan di-debug sendiri selama beberapa hari. Keterbatasan LLM, skill React, dan lingkungan yang tidak biasa karena status game dikelola di WASM semuanya menjadi tantangan
  • Mainkan Escoba: https://marianogappa.github.io/escoba-de-15
  • Backend (Golang): https://github.com/marianogappa/escoba
  • Frontend (React): https://github.com/marianogappa/escoba-de-15

Bertahap: cara membuat game sendiri

• Ia memperkenalkan panduan praktik minimal dan contoh kode agar orang lain juga bisa mencoba mengembangkan game sendiri
• Ia menyediakan repositori contoh Tic-Tac-Toe, yang bisa di-fork untuk memulai
  • Backend: https://github.com/marianogappa/tictactoe-backend
  • Frontend: https://github.com/marianogappa/tictactoe-frontend
  • Demo: https://marianogappa.github.io/tictactoe-frontend/

Pengembangan backend

• Backend berbasis giliran memungkinkan fungsi-fungsinya dirancang dengan jelas
• Untuk mempertahankan arsitektur serverless, struktur permainan antar-manusia sebaiknya dihindari jika tidak ada server komersial, karena itu adalah pilihan yang lebih realistis

Pengembangan frontend

• Frontend perlu melakukan tugas-tugas berikut
  • Meminta pembuatan GameState baru ke backend
  • Menampilkan status di UI
  • Menyediakan antarmuka untuk memilih aksi yang valid
  • Mengirim command ke backend saat aksi diterapkan
  • Jika giliran bot, mengirim permintaan ke backend

Konversi backend ke WASM

• Untuk membangun kode Go menjadi WASM, gunakan GOARCH=wasm GOOS=js go build
• Karena ukuran biner bisa menjadi masalah, ia menggunakan TinyGo untuk menguranginya
• Untuk mengekspor fungsi-fungsi yang akan dihubungkan ke frontend, ia menulis entry point terpisah di Go (misalnya main_wasm.go) dan memisahkan proses saat build
• Di fungsi utama, perlu memblokir dengan select {} agar program tidak langsung berhenti

Integrasi data backend-frontend

• Struct bebas Go seperti GameState tidak bisa langsung di-serialize/deserialize di WASM
• Karena itu, semua data perlu dipertukarkan dalam format JSON
• Dengan merujuk pada dokumentasi TinyGo, baik input maupun output dikirim melalui serialisasi JSON

Antarmuka frontend-backend

• Di frontend, fungsi-fungsi backend dipanggil secara langsung
• GameState hanya dikelola di dalam WASM dan frontend tidak bisa memutasinya; backend selalu menjadi source of truth
• Setelah WASM dikompilasi ulang, file perlu diganti, dan ia juga memberikan contoh otomatisasi melalui Makefile

Lingkungan eksekusi WASM

• Untuk menjalankannya, wasm_exec.js harus disertakan di head, lalu instance dibuat dan dijalankan menggunakan skrip tersebut

Kesimpulan

• Membuat game adalah pengalaman yang menyenangkan, dan kombinasi Go, WASM, dan React adalah pendekatan yang bisa dicoba siapa saja
• Bantuan LLM sangat meningkatkan produktivitas, tetapi kemampuan frontend dan pengalaman debugging tetap penting
• Siapa pun bisa mencoba mengembangkan game sendiri dengan struktur seperti ini, jadi patut dicoba