Buat kode game anak-anak dengan Gemini dan publikasikan dengan Firebase.

Buat kode game anak-anak dengan Gemini dan publikasikan dengan Firebase.

Tentang codelab ini

Terakhir diperbarui Mei 13, 2025

Ditulis oleh Riccardo Carlesso

1. Pengantar

Pada 25 Maret 2025, Google meluncurkan Gemini 2.5. Salah satu aspek yang paling berkesan dari peluncuran ini adalah semua orang dapat mencoba fitur "Advanced Coding" [ video]:

Gemini 2.5: Buat game dinosaurus Anda sendiri dari perintah satu baris

Dalam codelab ini, Anda akan mempelajari "coding vibe" aplikasi anak-anak sederhana, mulai dari perintah umum, lalu menyesuaikannya sesuai keinginan Anda. Kita akan menguji aplikasi di p5.js. Terakhir, kita akan menerapkan perubahan ini ke Firebase Hosting. Hal yang paling spektakuler tentang hal ini adalah seluruh stack saat ini gratis.

Yang akan Anda pelajari

• Gunakan Gemini 2.5 untuk membuat kode vibe aplikasi game.
• Uji kode di p5js.org
• Cara melakukan iterasi dan meningkatkan kualitas perintah / aplikasi Anda.
• Cara menghosting aplikasi statis di Firebase

Perhatikan bahwa codelab ini menggunakan kode buatan AI; kode ini bersifat non-deterministik sehingga codelab ini berisi panduan karena output Anda tidak diketahui oleh penulis. Selain itu, JANGAN gunakan kode ini dalam produksi.

Jika Anda menyukai codelab ini, pastikan untuk melihat 🔥 Firebase Studio yang menawarkan pengalaman coding vibe yang rapi dan terintegrasi.

2. Prasyarat

Codelab ini terdiri dari dua fase:

1. Pengembangan khusus web. Di sini Anda akan mendapatkan pengalaman paling menyenangkan dan tidak memerlukan kemampuan coding. Untuk itu, kita akan menggunakan UI Gemini ( gemini.google.com) dan p5.js.
2. Lingkungan coding lokal. Di sinilah sedikit keterampilan coding / pembuatan skrip diperlukan, ditambah penginstalan dan penggunaan npm / npx dan editor lokal, seperti vscode atau IntelliJ atau apa pun. Bagian kedua ini bersifat opsional dan hanya diperlukan jika Anda ingin mempertahankan aplikasi agar teman dan keluarga dapat bermain dengannya dari perangkat seluler atau komputer mereka.

Satu-satunya prasyarat untuk fase 1 adalah Browser dan komputer (layar besar akan membantu). Untuk tahap 2, lanjutkan membaca.

UI Gemini

gemini.google.com adalah platform yang bagus untuk mencoba semua model Gemini terbaru, dan Anda juga dapat membuat gambar dan video Anda sendiri. Aplikasi ini dilengkapi dengan integrasi Google yang canggih, seperti Google Maps dan Hotel/Penerbangan/Ulasan, sehingga menjadi pendamping yang ideal untuk merencanakan liburan Anda berikutnya.

Tips: Jika Anda menyukai coding, pertimbangkan juga untuk menggunakan AI Studio, antarmuka serupa tempat Anda dapat membuat prototipe interaksi LLM (misalnya, membuat gambar), dan langsung mendapatkan kode python dari halaman.

p5.js

p5.js adalah library JavaScript open source gratis yang membuat coding kreatif dapat diakses dan inklusif bagi seniman, desainer, pendidik, dan siapa saja. Library ini didasarkan pada bahasa Processing dan menyederhanakan proses pembuatan konten visual dan interaktif menggunakan kode di browser web.

Kode lokal [opsional]

Jika Anda ingin mempertahankan aplikasi, penyiapan lainnya diperlukan:

• Editor kode lokal ( Visual Studio Code, IntelliJ, ..)
• Akun git ( github / gitlab / bitbucket) tempat menyimpan kode Anda.
• npm yang diinstal secara lokal, lebih baik jika di ruang pengguna (melalui npx atau teknologi yang setara).

Selain itu, kita akan menyiapkan akun Firebase nanti.

Kita juga memerlukan beberapa keterampilan coding, seperti:

• Kemampuan untuk menginstal paket npm
• Kemampuan untuk berinteraksi dengan sistem file (membuat folder dan file)
• Kemampuan untuk berinteraksi dengan git (git add, git commit, git push).

Jika ada hal yang menakutkan, ingatlah: LLM sangat membantu Anda di sini. Anda dapat menggunakan "Gemini 2.0 flash" atau model yang setara, misalnya, untuk mendapatkan saran. Jika masih terlalu sulit, Anda dapat melewati fase 2 sepenuhnya. Fase 1 seharusnya cukup memuaskan.

3. Mari kita buat game pertama.

Buka gemini.google.com dan pilih model yang kompatibel dengan kode, misalnya 2.5. Pilihan ini dapat bervariasi menurut ketersediaan, biaya, dan tanggal. Pada saat penulisan, pilihan terbaiknya adalah:

• Gemini 2.5 Flash (iterasi lebih cepat)
• Gemini 2.5 Pro (output yang lebih baik).

Informasi selengkapnya tentang model Gemini kami tersedia di sini.

Perintah game pertama kami

Seperti yang dapat Anda amati dari video ini, perintah awal bisa sesederhana ini:

Make me a captivating endless runner game. Key instructions on the screen.
p5js scene, no HTML. I like pixelated dinosaurs and interesting backgrounds.

Jangan ragu untuk menyesuaikannya sedikit:

• Setelan abad pertengahan / futuristik / cyberpunk
• Penuh dengan emoji, atau satu emoji tertentu?
• Anda menyukai warna kuning atau berbagai nuansa ungu.
• Mungkin anak Anda menyukai unicorn, dinosaurus, atau pokemon.

Setelah menempelkan perintah ke browser, Anda harus mengamati pemikiran Gemini.Benar, Gemini 2.5 adalah model pemikiran, sehingga akan memulai sejumlah tugas yang dapat Anda amati perubahannya dari waktu ke waktu. Anda dapat mengklik dropdown yang berubah untuk melihat apa yang terjadi, atau Anda dapat menunggu hasilnya:

Pada akhirnya, Anda akan memiliki JavaScript yang berfungsi.

Sekarang Anda dapat mengklik tombol salin di bagian atas:

Menguji game di p5.js

Sekarang saatnya menguji game.

• Buka editor p5.js di sini: https://editor.p5js.org/
• Pilih dan hapus kode sketch.js yang ada.
• Tempelkan kode Anda

Halaman Anda akan terlihat seperti ini:

Terakhir, Anda dapat menekan tombol PLAY.

Sekarang ada dua hal yang dapat terjadi: kode Anda berfungsi atau gagal. Mari kita ikuti petunjuknya sesuai dengan kedua kasus tersebut:

1. Kode Anda gagal
2. Kode Anda berfungsi pada percobaan pertama.

Mari kita lihat dalam dua paragraf berikutnya cara mengelola kedua kondisi tersebut.

(kasus 1) Kode saya gagal!

Jika Anda mendapatkan error seperti ini, Anda cukup menyalinnya dan menempelkannya ke Gemini. Biarkan dia memperbaiki kode untuk Anda.

(kasus 2) Kode saya berfungsi!

Jika kode berfungsi, Anda akan melihat game visual di ujung kanan halaman.

👏 Selamat, Anda telah menjalankan game AI pertama Anda!

Catatan: Meskipun Anda memiliki kode, aplikasi hanya berfungsi di browser. Jika ingin menampilkan aplikasi kepada keluarga dan teman, Anda memerlukan solusi hosting. Untungnya, kami memiliki opsi yang bagus untuk Anda. Teruslah membaca.

Sekarang Anda siap untuk melanjutkan ke bab berikutnya.

Iterasi lebih lanjut

Sekarang saatnya menyimpan kode Anda di suatu tempat, jika Anda merusaknya. Jika mau, Anda dapat melakukan iterasi satu kali. Misalnya, penulis sangat menyukai lompatan ganda Super Mario, jadi Anda dapat menambahkan sesuatu seperti ini:

The game is great, thanks! Please allow for my character to double jump.

Anda dapat menyesuaikan apa pun yang Anda inginkan, tidak ada batasan. Mungkin Anda ingin menyimpan nama karakter untuk skor yang lebih tinggi, atau meningkatkan kecepatan dari waktu ke waktu untuk mempersulitnya, dan sebagainya. Bahasa Inggris adalah batas perintah Anda.

Tips: Gemini cenderung hanya memberi Anda perubahan yang perlu diterapkan (misalnya, ini adalah perubahan untuk fungsi XYZ). Sebaiknya tetapkan perintah agar memberikan seluruh kode yang diperbarui, dengan sesuatu seperti

"Please give me the entire updated code, not just the changed function"

. Tindakan ini akan mempermudah pengalaman pemotongan dan penempelan bagi Anda.

Peringatan

Peringatan: game mungkin berfungsi dengan baik di layar, tetapi Anda mungkin gagal memainkannya di perangkat tanpa keyboard, seperti ponsel. Kita akan melihatnya nanti.

Peringatan: https://editor.p5js.org/ memiliki kemampuan terbatas untuk menyimpan beberapa iterasi kode Anda. Jika Anda menyukai hasil yang dibuat Gemini, dan tidak ingin kehilangan iterasi *n-*Anda, lanjutkan ke langkah berikutnya (git adalah teman Anda).

Anda dapat mem-bookmark percakapan Gemini Anda. Mungkin Anda ingin mengganti namanya menjadi "p5js my first game", atau menuliskan permalink ke Gemini, seperti " https://gemini.google.com/app/abcdef123456789" untuk nanti.

4. Mari kita jalankan kode ini secara lokal

Pada tahap ini, Anda harus memiliki:

• Jendela browser Gemini yang terbuka dengan beberapa kode yang berfungsi.
• Jendela browser p5.js terbuka dengan game yang berfungsi
• Lingkungan coding lokal dengan npm diinstal.

Ini adalah bagian yang lebih sulit dari codelab. Anda harus memiliki pengalaman coding dasar.

Menginstal dependensi

Jika Anda tidak memiliki npm dan node, sebaiknya instal npm melalui beberapa pengelola versi, seperti nvm . Ikuti petunjuk Penginstalan untuk sistem operasi Anda.

Kami juga mengasumsikan bahwa Anda menggunakan IDE coding. Kita akan menggunakan kode Visual Studio dalam screenshot dan contoh, tetapi kode apa pun dapat digunakan.

Menyiapkan lingkungan lokal

Ini adalah saatnya Anda dapat membuat struktur file Anda sendiri.

Skrip penyiapan diberikan untuk tujuan ilustrasi. Anda dapat melakukannya secara manual dengan membuat folder dan file:

# This works for Mac and Linux. For Windows, please use other tools.
mkdir my-first-vibecoding-project/
cd my-first-vibecoding-project/
git init 
touch README.md PROMPT.md 
mkdir public/
cd public/ 
touch index.html sketch.js style.css
git add .
# Skipping quotes which can be tricky
git commit -a -m committing_empty_skeleton

Struktur folder akhir akan terlihat seperti ini:

my-first-vibecoding-project/
├── PROMPT.md
├── README.md
└── public
    ├── index.html
    ├── sketch.js
    └── style.css

Anda juga dapat menemukannya di sini.

Sekarang buka editor kode favorit Anda (misalnya code my-first-vibecoding-project/ ) dan mulai tempelkan konten editor.p5js.org ke 3 file di bagian public/:

• README.md ← Di sini Anda dapat menempatkan permalink chat Gemini dan di sini Anda akan menempatkan halaman landing untuk aplikasi saat aplikasi tersebut tersedia.
• PROMPT.md ← Di sini, Anda dapat menambahkan semua perintah, yang dipisahkan oleh paragraf H2. Jika ingin menjelaskan alasan Anda memberikan perintah tertentu, Anda dapat mengapit perintah dengan 3 tanda petik terbalik ( contoh).
• **public/index.html** ← salin kode HTML Anda di sini
• **public/sketch.js** ← salin kode JS Anda di sini
• **public/style.css** ← salin kode CSS Anda di sini

Folder publik dapat menghosting aset tambahan, seperti PNG kustom.

5. Menyiapkan dan men-deploy ke Firebase

Menyiapkan Firebase (khusus pertama kali)

Pastikan npm telah diinstal di komputer Anda.

Di terminal, ketik salah satu perintah berikut (keduanya berfungsi):

# to install on the machine (requires privilege)
npm install -g firebase-tools
# to install locally (low privilege needed but might need to repeat a few times)
npm install firebase-tools

Sekarang Anda dapat memanggil perintah firebase. Jika Anda mengalami masalah, ikuti dokumen publik.

Catatan: Firebase CLI memerlukan Node.js v18.0.0 atau yang lebih baru. Jika Anda tidak dapat mengupdate node (misalnya, tidak memiliki hak istimewa admin), pertimbangkan untuk menggunakan nvm guna mengontrol versi node dan npm.

Inisialisasi Firebase

Di bagian ini, kita akan menyiapkan Firebase Hosting. Ini adalah alur yang sangat sederhana, tetapi mungkin perlu waktu beberapa saat untuk membiasakan diri dengan alur ini untuk pertama kalinya.

Pastikan Anda berada di direktori tepat di atas direktori public/ yang berisi file Anda. Listingan (ls -al atau dir) akan menampilkan sesuatu seperti ini:

$ ls 
PROMPT.md
README.md
public/

• [langkah 1] Di konsol, ketik: firebase init

• Arahkan kursor ke bawah ke "Hosting: ..", lalu ketik SPASI, lalu ENTER. (Mengapa? Karena ini adalah pertanyaan pilihan ganda, Anda harus memilih dan membuka halaman berikutnya)
• [langkah 2] Sekarang Anda dapat memilih project yang ada (opsi 1) atau membuat project baru (opsi 2):

• Catatan: jika Anda sudah memiliki Project Cloud, project tersebut mungkin bukan project Firebase. Project Firebase adalah subset dari project GCP. Anda memerlukan langkah tambahan untuk menjadikannya project Firebase, yang merupakan tujuan (opsi 3).
• Jika belum memutuskan, gunakan "Buat project baru" dan tambahkan beberapa nama seperti "p5js-NAMAANDA-APLIKASIANDA" (misalnya, "p5js-riccardo-tetris").

Perhatian: project ID bersifat unik di seluruh Google Cloud. Pilih dengan bijak karena Anda tidak akan dapat mengubahnya setelahnya.

• [step 3] What would you like to call your project? (defaults to your project ID) (p5js-riccardo-tetris)
• Tekan ENTER.

• [step 4] ? What do you want to use as your public directory? (public)
• Tekan ENTER (kita menyiapkan public/ dengan sengaja)

• [step 5] ? Configure as a single-page app (rewrite all urls to /index.html)? No
• tekan ENTER (tidak)

• [langkah 6] ? Set up automatic builds and deploys with GitHub? No
• Tekan ENTER - TIDAK

• [step 7] ? File public/index.html already exists. Overwrite? (y/N)
• Tekan ENTER (tidak).
• PERINGATAN Tindakan ini mungkin rentan terhadap error; jika Anda menimpanya, index.html baru tidak akan kompatibel dengan p5js.

Jika semuanya berfungsi dengan baik, Anda akan melihat ini:

Tindakan ini akan membuat beberapa file:

.firebaserc
.gitignore
firebase.json
public/404.html

Secara khusus, .firebaserc harus memiliki project ID yang dapat Anda ambil secara terprogram dengan ini: cat .firebaserc | jq .projects.default -r

Peringatan: Periksa index.html. Jika lebih dari 16 baris, dan/atau berisi kata firebase, Anda telah keliru menimpa file p5js. Tidak masalah, jangan lupa untuk mengambil index.html lama dari git atau dari editor p5js.

Pengujian lokal

Untuk mempersingkat latensi loop masukan, sebaiknya coba hal-hal secara lokal terlebih dahulu.

Untuk melakukannya, Anda dapat mencoba suite CLI yang canggih dari tim Firebase. Contoh:

$ firebase emulators:start

akan memulai server web di port 5000 ( http://127.0.0.1:5000/ ) sehingga Anda dapat menguji secara lokal sebelum melakukan push.

Men-deploy ke Firebase

Sekarang saatnya untuk perintah terakhir:

$ firebase deploy

Tindakan ini akan memicu sejumlah tindakan. Beberapa baris terakhir akan terlihat seperti ini:

$ firebase deploy
[...]
✔  hosting[YOUR_PROJECT]: release complete 
✔  Deploy complete! 

Project Console: https://console.firebase.google.com/project/YOUR_PROJECT/overview
Hosting URL: https://YOUR_PROJECT.web.app

Tindakan ini akan memberikan URL hosting. Cobalah!

Perhatian: Jika deployment gagal dengan beberapa jenis error autentikasi (tidak dapat membuat project"), hal ini mungkin berarti Anda belum pernah terhubung ke Firebase. Anda harus membuka Firebase Console dan menyetujui Persyaratan Layanan. Tindakan ini hanya perlu dilakukan sekali per akun email.

Jika deployment berhasil, tetapi Anda mengamati beberapa halaman kosong atau deployment yang rusak, Anda dapat melakukan beberapa hal:

• Buka "Alat Developer" browser Anda dan temukan error, lalu minta Gemini untuk membantu memperbaikinya, dengan perintah seperti ini:

I've deployed the script correctly with Firebase, but I now see a blank page with this error:

[ paste detailed JS console error ]

Catatan: error harus berisi baris JavaScript untuk sketch.js, yang diketahui Gemini dengan baik. Artinya, Gemini memiliki semua konteks yang diperlukan untuk memperbaikinya. Pastikan untuk menggunakan chat yang sama dengan yang menghasilkan kode.

♾️ Lakukan iterasi.

Anda dapat melakukan iterasi langkah-langkah ini sebanyak yang Anda inginkan. Anda dapat terus meminta hingga Anda puas dengan hasilnya.

Perlu diperhatikan beberapa hal berikut:

1. Loop iterasi jauh lebih cepat di loop Gemini > p5.js > Gemini daripada di Gemini > host lokal > deploy ke cloud run > aplikasi pengujian di browser (tekan muat ulang).
2. Gunakan git untuk membuat versi perintah dan kode. Anda mungkin ingin dapat kembali ke perintah N dan kode N. Khususnya, Anda ingin melakukan git commit pada setiap sketch.js yang Anda dorong, karena bug dapat bersembunyi di sana tanpa terdeteksi.

Perhatikan bahwa beberapa game berfungsi dengan baik dengan keyboard, tetapi tidak berfungsi dengan baik dengan mouse atau ketukan di ponsel. Ini adalah momen yang tepat untuk meningkatkan kualitas kode.

6. Tips Perintah

Beberapa tips dari pengalaman membuat beberapa game.

Membuat versi perintah

Anda mungkin akan menemukan kesalahan pada perintah asli. Memiliki versi git. Ada beberapa jalur kode di sini:

1. Jika Anda menyukai apa yang Anda lihat dan ingin melakukan iterasi dengan gemini dengan perintah sub berikutnya, sebaiknya lacak semuanya di suatu tempat (perintah 1,2,3 - 3-shot example1 - example2).
2. Jika tidak terlalu mementingkan aplikasi yang dibuat oleh prompt1, Anda dapat meningkatkan kualitas perintah, menghapus kode, dan memulai ulang dengan kode yang dimodifikasi (prompt 1 v1, prompt1 v2, prompt1, v3, ..)

Anda tentu saja dapat menggabungkan 2 pendekatan tersebut.

Fungsi seluler

Bergantung pada game yang Anda buat, Anda mungkin memerlukan beberapa interaksi dengan pengguna. Apakah interaksi ini memerlukan keyboard? Atau dapatkah digunakan hanya dengan mengetuk layar (misalnya, dengan perangkat seluler)? Pastikan untuk menjelaskannya secara eksplisit pada perintah. Anda mungkin harus membuat beberapa tombol di keyboard (lihat contoh Tetris 3D saya). Lihat juga masalah dungemoji untuk kompatibilitas seluler.

Memberikan masukan terkait error / screenshot JavaScript langsung ke Gemini

Karena Gemini tidak dapat melihat interaksi Anda dengan p5js, pastikan untuk menempelkan error JavaScript apa pun ke Gemini. Perhatikan bahwa Gemini bersifat multimodal, jadi jika Anda memiliki perubahan UI (seperti membuat judul lebih kecil, atau menurunkan skor), Anda juga dapat melampirkan screenshot game. Tampilan masukan coding tidak pernah semenyenangkan ini.

7. Selamat!

🎉 Selamat, Anda telah menyelesaikan codelab.

Kita telah melihat betapa mudahnya membuat game dengan Gemini, dan bagaimana Firebase menyediakan solusi hosting yang mudah untuk mempertahankan dan membagikan game Anda kepada orang lain.

Yang telah kita bahas

• Buat game melalui Gemini 2.5.
• Men-deploy ke Firebase

Sekarang saatnya 👥 pamer! Mengapa tidak membagikan game terbaru Anda (your-project.web.app) di LinkedIn atau Twitter dengan hashtag #VibeCodeAGameWithGemini (dan mungkin memberi tag pada penulis di LinkedIn)? Hal ini akan memungkinkan kita mengetahui seberapa menarik codelab ini, dan mungkin menulis lebih banyak codelab seperti ini.

Saya ingin lebih banyak lagi!

Jika Anda mencari referensi tambahan, lihat game dan perintah berikut:

• Buat kode lima game anak-anak dengan Gemini 2.5 dan p5.js dalam satu akhir pekan. Artikel ini akan memandu Anda melalui proses pemikiran coding nuansa game dengan 6 contoh.
• palladius/genai-googlecloud-scripts (repo github dengan ~10 aplikasi - kode dan perintah): Tetris, Pacman, Connect 4, dan bahkan Rogue clone untuk para penggemar game klasik. File ini berisi perintah dari semua game ini. Pilih lagu favorit Anda, sesuaikan perintahnya, dan nikmati musiknya.

Jika apa yang Anda lakukan hari ini terdengar seperti terlalu banyak upaya, Anda juga dapat mencoba 🔥 Firebase Studio tempat loop ide > perintah > kode > aplikasi semuanya terdapat dalam satu jendela browser.

Beberapa contoh game yang dapat Anda buat:

Game final mungkin terlihat seperti ini:

• Tetris 3D
• Game bahasa
• Clone yang tidak sah
• Clone pacman.

Sekali lagi, bahasa Inggris adalah batasnya.

🎉 Selamat melakukan coding!