Meluncurkan game video berbasis web dengan AI

1. Pengantar

Ringkasan

Di mana pembuatan aplikasi dengan AI dimulai saat ini? Bagi sebagian besar dari kita, pembuatan aplikasi dimulai dengan kueri atau prototipe sederhana. Google AI Studio menawarkan Mode Build yang canggih (sering disebut sebagai "vibe coding") yang memungkinkan Anda mendesain, menguji, dan membuat aplikasi web full-stack menggunakan pembuatan kode yang didukung oleh model Gemini.

Dalam codelab ini, Anda akan membuat video game berbasis web dan berbasis giliran menggunakan database Firestore dengan Event Sourcing (untuk mempertahankan tindakan game sebagai urutan peristiwa sehingga pemain dapat melihat histori pertandingan dan kembali ke giliran sebelumnya) dan Firebase Authentication untuk login pengguna. Agen AI Studio akan mengonfigurasi semua layanan backend dan menulis kode frontend, logika sumber peristiwa, dan interaksi database. Setelah aplikasi disempurnakan, Anda akan men-deploy-nya langsung ke Cloud Run dengan satu klik.

versi akhir situs portofolio

Yang akan Anda lakukan

  • Memberikan perintah kepada Google AI Studio untuk membuat prototipe aplikasi web video game multiplayer berbasis giliran.
  • Mengimplementasikan dukungan untuk kode game pendek yang dapat dibagikan atau link gabung untuk memungkinkan teman terhubung ke pertandingan yang sama.
  • Mengimplementasikan penyimpanan database Firestore dengan pola sumber peristiwa untuk melacak histori pertandingan dan mengizinkan perjalanan waktu gameplay (membatalkan atau memutar ulang giliran).
  • Mengonfigurasi dan mengaktifkan integrasi Firebase untuk menyediakan database Firestore dan menyiapkan autentikasi Login dengan Google.
  • Menguji aplikasi di sandbox pratinjau interaktif.
  • Men-deploy aplikasi ke Cloud Run langsung dari UI Google AI Studio.

Yang akan Anda pelajari

  • Cara menggunakan mode Build Google AI Studio untuk membuat prototipe layanan game full-stack dengan cepat menggunakan bahasa alami.
  • Cara mengimplementasikan pola arsitektur sumber peristiwa menggunakan Cloud Firestore untuk menyimpan histori game.
  • Cara Google AI Studio mengonfigurasi integrasi Firebase Firestore dan Authentication secara otomatis.
  • Cara men-deploy aplikasi AI Studio sebagai container serverless di Cloud Run.
  • Cara memeriksa catatan database dan status keamanan di dalam Firebase Console.

2. Penyiapan Project

Sebelum meluncurkan AI Studio, verifikasi status akun dan prasyarat Anda.

Informasi Akun Google &Tingkat

  1. Jika belum memiliki Akun Google, buat Akun Google.
    • Tips: Gunakan Akun Google pribadi untuk lab ini jika memungkinkan. Akun grup, perusahaan, atau sekolah dapat menerapkan kebijakan Workspace yang menonaktifkan fitur eksperimental atau integrasi cloud.
  2. Tinjau detail penagihan untuk deployment:
    • Google Cloud Tingkat Pemula: Memungkinkan Anda memublikasikan hingga dua aplikasi full-stack di wilayah tertentu tanpa biaya, tanpa membuat akun penagihan Google Cloud lengkap.
    • Deployment Standar: Terhubung ke project Google Cloud berbayar yang ada dan memperluas batas penyimpanan, resource CPU, dan API.

3. Membuat Video Game Berbasis Giliran di Mode Build AI Studio

Mari kita buat shell aplikasi dan berikan perintah kepada asisten kode AI untuk membuat lapisan keamanan, logika gameplay, dan persistensi sumber peristiwa.

  1. Buka panel Aplikasi Google AI Studio, lalu klik Aplikasi Baru.
  2. Di kotak perintah chat, masukkan deskripsi untuk aplikasi video game berbasis giliran Anda: 
    Build a web-based, turn-based Tic-Tac-Toe game using
Firebase as a backend. Users must be able to securely sign in
using Google Sign-In, start a new game match, make moves, and play
against an AI player or another user. Any algorithm used for the
game opponent AI should use simple algorithms like min/max and the
app should not make any calls to an LLM like the Gemini API. To
support multiplayer matches, the application must generate a short
game code or share link that players can easily copy and send to a
friend to join the match. Use Firestore and an event sourcing
pattern to save a history of every move (turn) as a separate event
document in a subcollection under the game document. The
application must reconstruct the current game state by replaying
these events, and must allow users to view previous turns and opt
to restore/roll back the game to a prior turn's state.
    Link ini akan otomatis mengisi kotak perintah untuk Anda.
  3. Klik Build untuk memulai proses pembuatan aplikasi.

Saat agen AI Studio mengenali kebutuhan penyimpanan database dan login pengguna yang aman, agen akan memicu alur konfigurasi Firebase otomatis.

  1. Setelah sekitar satu menit, kartu integrasi untuk Mengaktifkan Firebase akan muncul di ruang kerja.
  2. Klik tombol Aktifkan Firebase untuk mengonfirmasi dan menyetujui persyaratan layanan.
  3. Agen akan menjalankan penyiapan latar belakang. Di balik layar:
    • Instance Database Firestore disediakan.
    • Firebase Authentication diaktifkan dengan Login dengan Google diaktifkan.
    • Konfigurasi akun layanan dibuat (misalnya, membuat src/lib/firebase.ts yang berisi kredensial API).
    • firestore.rules yang berisi batas keamanan default (aturan isolasi pengguna) ditambahkan.

4. Uji dan Lakukan Iterasi

Sebelum meluncurkan layanan secara langsung, jalankan pemeriksaan validasi di pratinjau interaktif.

  1. Buka panel pratinjau di dalam Google AI Studio.
  2. Klik tombol Login untuk memicu autentikasi Login dengan Google sandbox.
    • Catatan tentang memperbaiki error: Selama pembuatan atau pengujian, Anda mungkin sesekali menghadapi masalah runtime, error kompilasi, atau kegagalan izin Firestore karena ketidakselarasan aturan keamanan. Jika hal ini terjadi, AI Studio akan menampilkan tombol Perbaiki di chat, sehingga Anda dapat meminta agen untuk mendiagnosis dan memperbaiki masalah secara otomatis.
    Lokasi Tombol Perbaikan Google AI Studio
  3. Setelah login, mulai pertandingan game baru, salin kode game pendek atau link bagikan yang dibuat, dan pastikan kode atau link tersebut dapat digunakan untuk bergabung ke pertandingan.
  4. Lakukan beberapa gerakan, dan pastikan histori pertandingan dirender dengan benar.
  5. Coba kembali ke giliran pertandingan sebelumnya. Pastikan papan atau status diperbarui untuk mencerminkan poin sebelumnya dalam histori gameplay, dan pastikan Anda dapat memulihkan atau melakukan rollback ke status tersebut.
  6. Jika ingin mengubah gaya atau perilaku, berikan petunjuk kepada agen melalui jendela chat. Misalnya:
    • "Could you style the game board interface using Tailwind CSS and add a retro pixel-art theme?"
    • "Add a 'Turn History' sidebar matching the current state replay that shows when each move was made and by whom."
  7. Tunggu agen memperbarui codebase dan periksa browser pratinjau untuk melihat pembaruan.

5. Men-deploy ke Cloud Run

Setelah prototipe berfungsi penuh, deploy sebagai layanan publik di Cloud Run.

  1. Di pojok kanan atas Google AI Studio, klik tombol Publikasikan untuk memulai wizard deployment.Lokasi Tombol Publikasikan Google AI Studio
  2. Klik Mulai untuk mengonfigurasi project Google Cloud Anda.
    • Pastikan drop-down Project Google Cloud target cocok dengan project yang Anda kaitkan dengan ruang kerja.
    • AI Studio akan otomatis membuat ID layanan unik untuk instance Cloud Run.
    • Secara opsional, Anda dapat menentukan awalan URL kustom .ai.studio (misalnya, your-portfolio-name.ai.studio) sebagai bagian dari konfigurasi deployment.
  3. Jika ini adalah deployment pertama Anda dan Anda menggunakan parameter Google Cloud standar, Anda mungkin akan diminta untuk menentukan jenis organisasi dan memberikan detail penagihan.
  4. Klik Publikasikan Aplikasi.
  5. Langkah-langkah pembuatan container, pendaftaran container, dan deployment layanan terjadi di latar belakang. Proses ini biasanya selesai dalam waktu 2–4 menit.
  6. Setelah deployment selesai, salin URL Aplikasi yang dibuat dan buka link aplikasi langsung di tab browser.
  7. Uji aplikasi web langsung di browser Anda.

6. Memeriksa di Firebase Console

Lihat di balik layar untuk melihat cara skema data dan pengguna dilacak.

  1. Buka Firebase Console.
  2. Pilih project Anda (yang memiliki label AI Studio atau project ID yang terikat secara manual).
  3. Di panel navigasi sebelah kiri, pilih Build > Firestore Database:
    • Lihat koleksi dan dokumen database yang dibuat oleh aplikasi Anda.
    • Pastikan setiap dokumen memiliki ID pemilik yang cocok dengan kredensial autentikasi pengguna aktif.
  4. Pilih tab Keamanan di panel Firestore untuk meninjau petunjuk keamanan yang dibuat secara otomatis yang membatasi izin baca dan tulis ke pemilik dokumen yang terverifikasi.
  5. Buka Keamanan > Autentikasi untuk melihat daftar kredensial pengguna aktif yang diisi selama pengujian login Anda.

7. Pembersihan

Untuk menghindari tagihan yang tidak terduga atau membersihkan resource ruang kerja Anda:

  1. Di Google AI Studio, buka halaman Aplikasi.
  2. Temukan aplikasi Anda di petak atau daftar.
  3. Klik ikon sampah untuk menghapus status aplikasi dan membatalkan publikasi layanan dari Cloud Run.
  4. Jika Anda men-deploy menggunakan project standar dan ingin menonaktifkan semua resource sepenuhnya, buka Setelan Project Konsol Google Cloud dan hapus project yang mendasarinya.

8. Kesimpulan

Selamat! Anda telah mendesain, mengembangkan, dan men-deploy video game berbasis giliran langsung dari Google AI Studio.

Buka link ini untuk mengklaim badge Perjalanan Builder Selesai.

Untuk melanjutkan perjalanan Anda, buka goo.gle/builders untuk lab berikutnya.

Pelajari Lebih Lanjut