LLM olmadan oyun yapmak 3 ay, LLM ile 3 gün

• 15 yıllık deneyime sahip bir yazılım mühendisi, çocukluğundan kalan bir kart oyununu Go diliyle geliştirme deneyimini paylaşıyor
• LLM (büyük dil modeli) olmadan “Truco” geliştirirken UI tasarımı ve sunucusuz dağıtım gibi tüm sorunları elle çözerek 3 ay harcadı
• “Escoba”yı yaparken LLM’den yararlanarak backend kod dönüşümü ve uygulama hızını büyük ölçüde kısalttı; tek bir promptla çoğu şeyin çalışması sağlandı
• Yazının ikinci yarısında Tic-Tac-Toe örneğiyle Go backend, WASM dönüşümü ve React entegrasyonu üzerinden herkesin oyun yapabilmesi için adım adım bir rehber sunuluyor
• Ancak React frontend’i ve WASM tabanlı oyun durumu yönetimi hâlâ doğrudan debug edilip elde uygulanmayı gerektiriyor

---

Giriş

• 15 yıllık deneyime sahip bir yazılım mühendisi, aslında hiç gerçekten bir oyun yapıp dağıtmadığını fark ediyor
• Çocukluğunda Arjantin’de arkadaşlarıyla oynadığı kart oyunlarından birini Go diliyle geliştirmeye karar veriyor

Truco: LLM olmadan 3 ay

• 18 Haziran 2024’te Truco adlı kart oyununu Go backend ile geliştirmeye başlıyor. React konusunda yalnızca asgari bilgiyle frontend’i yazıyor
• En büyük zorluk UI geliştirme oldu; sunucu barındırmamak için TinyGo kullanarak WASM (WebAssembly) olarak transpile edip statik dosyaları GitHub Pages üzerinde yayımladı
• LLM’in olmadığı bu süreçte, tüm ayrıntıları kendisi araştırıp deneme-yanılmayla ilerleyerek yaklaşık 3 ayda tamamladı
• Amaç reklam ya da gelir değil, yalnızca oyunu tamamlamaktı; çıkışının üzerinden 1 yıl geçmesine rağmen hâlâ düzenli olarak oynanıyor
  • Truco oyna: https://marianogappa.github.io/truco-argentino
  • Backend (Golang): https://github.com/marianogappa/truco
  • Frontend (React): https://github.com/marianogappa/truco-argentino

Escoba: LLM ile 3 gün

• 1 yıl sonra, ailesini görmek için Arjantin’i ziyaret ederken yeğenine en popüler ikinci kart oyunu olan Escobayı öğretiyor
• Bu kez LLM (Claude) kullanarak Truco’nun backend’ini kopyalıyor, ardından promptta Escoba’nın kurallarını açıklayıp kodun refactor edilmesini istiyor
• İlk promptta neredeyse kusursuz bir uygulama ortaya çıkıyor; yalnızca küçük bug’lar ve birkaç ek özellik elle tamamlanıyor
• Frontend içinse birkaç gün boyunca doğrudan geliştirme ve debug gerekti. LLM’in sınırları, React becerisi ve oyun durumunun WASM içinde yönetildiği alışılmadık ortamın tümü birer zorluktu
  • Escoba oyna: https://marianogappa.github.io/escoba-de-15
  • Backend (Golang): https://github.com/marianogappa/escoba
  • Frontend (React): https://github.com/marianogappa/escoba-de-15

Adım adım: Kendi oyununuzu nasıl yaparsınız

• Birinin doğrudan oyun geliştirmeyi deneyebilmesi için asgari düzeyde uygulamalı rehber ve örnek kod sunuluyor
• Başlangıç için fork edilebilecek bir Tic-Tac-Toe örnek deposu veriliyor
  • Backend: https://github.com/marianogappa/tictactoe-backend
  • Frontend: https://github.com/marianogappa/tictactoe-frontend
  • Demo: https://marianogappa.github.io/tictactoe-frontend/

Backend geliştirme

• Sıra tabanlı bir backend’de işlevler net biçimde tasarlanabiliyor
• Sunucusuz yapıyı korumak için, ticari bir sunucu yoksa insanların birbirine karşı oynadığı bir yapıyı tercih etmemek daha gerçekçi bir seçim

Frontend geliştirme

• Frontend’de şu işler gerekiyor
  • Backend’den yeni bir GameState oluşturmasını istemek
  • Durumu UI’da göstermek
  • Geçerli hamlelerin seçilebileceği bir arayüz sağlamak
  • Bir hamle uygulandığında backend’e komut göndermek
  • Sıra bottaysa backend’den işlem yapmasını istemek

Backend’i WASM’e dönüştürme

• Go kodunu WASM olarak derlemek için GOARCH=wasm GOOS=js go build kullanılıyor
• İkili dosya boyutu büyük olabileceğinden, boyutu azaltmak için TinyGo kullanılıyor
• Frontend’le bağlanacak fonksiyonları dışa aktarmak için Go tarafında ayrı bir entry point (ör. main_wasm.go) yazılıp build sırasında dallanma yapılıyor
• Programın hemen kapanmaması için main fonksiyonunda select {} ile bloklama yapmak gerekiyor

Backend-frontend veri entegrasyonu

• Go’daki serbest biçimli struct yapıları, örneğin GameState, WASM içinde doğrudan serialize/deserialize edilemiyor
• Bu nedenle tüm verilerin JSON formatında değiştokuş edilmesi gerekiyor
• TinyGo dokümantasyonuna başvurularak hem giriş hem çıkışta JSON serileştirme kullanılıyor

Frontend-backend arayüzü

• Frontend, backend fonksiyonlarını doğrudan çağırıyor
• GameState yalnızca WASM içinde yönetiliyor ve frontend bunu mutate edemiyor; her zaman doğruluğun tek kaynağı backend
• WASM yeniden derlendikten sonra dosyanın değiştirilmesi gerekiyor; bunun için bir Makefile otomasyon örneği veriliyor

WASM çalışma ortamı

• Çalıştırmak için wasm_exec.js dosyasının head içine eklenmesi gerekiyor; ardından bu script kullanılarak instance oluşturulup çalıştırılıyor

Sonuç

• Oyun yapmak keyifli bir deneyimdi ve Go + WASM + React kombinasyonu herkesin deneyebileceği bir yaklaşım sunuyor
• LLM desteği üretkenliği ciddi biçimde artırsa da frontend yetkinliği ve debug deneyimi hâlâ büyük önem taşıyor
• Bu yapıyla herkes kendi oyununu geliştirmeyi deneyebilir; denemeye değer