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

1. Pengantar

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

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

Dalam codelab ini, Anda akan mempelajari cara "pengodean nuansa" aplikasi anak-anak sederhana, dimulai dari perintah umum, lalu menyesuaikannya sesuai keinginan Anda. Kita akan menguji aplikasi di p5.js. Terakhir, kita akan mengirimkan perubahan ini ke Firebase Hosting. Hal yang paling spektakuler tentang ini, seluruh stack saat ini gratis.

Yang akan Anda pelajari

• Menggunakan Gemini 2.5 untuk mengodekan suasana aplikasi game.
• Uji kode di p5js.org
• Cara melakukan iterasi dan menyempurnakan perintah / aplikasi Anda.
• Cara menghosting aplikasi statis di Firebase

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

2. Prasyarat

Codelab ini terdiri dari dua tahap:

1. Pengembangan khusus web. Di sini Anda akan bersenang-senang 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 memainkannya dari perangkat seluler atau komputer mereka.

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

UI Gemini

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

Tips: Jika Anda tertarik dengan coding, pertimbangkan juga untuk mencoba AI Studio, antarmuka serupa tempat Anda dapat membuat prototipe interaksi LLM (misalnya, membuat gambar), dan langsung mendapatkan kode Python dari halaman tersebut.

p5.js

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

Pengodean lokal [opsional]

Jika Anda ingin mempertahankan aplikasi, penyiapan lebih lanjut diperlukan:

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

Selain itu, kita akan menyiapkan akun Firebase nanti.

Kami 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 sulit di sini, ingatlah: LLM sangat berguna untuk membantu Anda. Anda dapat menggunakan model "Gemini 2.0 flash" atau yang setara, misalnya, untuk mendapatkan saran. Jika masih terlalu sulit, Anda dapat melewati fase 2 sepenuhnya. Fase 1 seharusnya cukup bermanfaat.

3. Mari kita buat game pertama kita.

Buka gemini.google.com dan pilih model yang dapat memproses kode, misalnya 2.5. Pilihan ini dapat bervariasi berdasarkan 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 lihat 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:

• Latar 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 akan melihat Gemini sedang berpikir.Ya, Gemini 2.5 adalah model yang berpikir, sehingga akan memulai sejumlah tugas yang perubahannya dapat Anda amati 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 PUTAR.

Sekarang ada dua kemungkinan: kode Anda berfungsi atau gagal. Mari ikuti petunjuknya berdasarkan kedua kasus tersebut:

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

Mari kita lihat di 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 Anda berfungsi, Anda akan melihat game visual di ujung kanan halaman.

👏 Selamat, Anda menjalankan game AI pertama Anda.

Catatan: Meskipun Anda memiliki kode, aplikasi hanya berfungsi di browser Anda. Jika Anda ingin menampilkan aplikasi kepada keluarga dan teman, Anda memerlukan solusi hosting. Untungnya, kami punya opsi yang bagus untuk Anda. Lanjutkan 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 mengubah apa pun yang Anda inginkan, tidak ada batasan! Mungkin Anda ingin menyimpan nama karakter untuk skor yang lebih tinggi, atau meningkatkan kecepatan seiring waktu untuk membuatnya lebih sulit, dan sebagainya. Bahasa Inggris adalah batasan perintah Anda.

Tips: Gemini cenderung hanya memberikan perubahan yang perlu Anda terapkan (misalnya, ini adalah perubahan untuk fungsi XYZ). Anda mungkin ingin menyetel perintah agar memberikan seluruh kode yang diperbarui, dengan sesuatu seperti

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

. Hal ini akan mempermudah pengalaman potong-tempel 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 diberikan Gemini, dan tidak ingin kehilangan iterasi ke-*n*, lanjutkan ke langkah berikutnya (git adalah teman Anda).

Anda dapat menandai percakapan Gemini Anda. Mungkin Anda ingin mengganti namanya menjadi "p5js game pertama saya", atau menulis 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 sudah:

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

Ini adalah bagian tersulit dari codelab. Diperlukan beberapa pengalaman coding dasar.

Menginstal dependensi

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

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

Menyiapkan lingkungan lokal

Di sinilah Anda dapat membuat struktur file 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 link permanen percakapan 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 Anda ingin menjelaskan alasan Anda memberikan perintah tertentu, Anda dapat menyertakan perintah Anda dalam 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 (hanya 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. Alurnya sangat sederhana, tetapi mungkin perlu waktu 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

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

• Catatan: Jika Anda memiliki Project Cloud yang sudah ada, project tersebut mungkin bukan project Firebase. Project Firebase adalah subset project GCP. Anda memerlukan langkah tambahan untuk menjadikannya project Firebase, yang merupakan fungsi (opsi 3).
• Jika belum memutuskan, gunakan "Create a new project" dan tambahkan nama seperti "p5js-NAMAMU-APLIKASIMU" (misalnya, "p5js-riccardo-tetris").

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

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

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

• [langkah 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

• [langkah 7] ? File public/index.html already exists. Overwrite? (y/N)
• Tekan ENTER (tidak).
• PERINGATAN Hal 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 Anda yang dapat Anda tarik secara terprogram dengan kode ini: cat .firebaserc | jq .projects.default -r

Peringatan: Periksa index.html. Jika lebih panjang dari 16 baris, dan/atau berisi kata firebase, Anda salah menimpa file p5js. Tidak masalah, cukup ingat untuk mengambil kembali index.html lama dari git atau dari editor p5js.

Pengujian lokal

Untuk mempercepat latensi loop masukan, sebaiknya coba dulu secara lokal.

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

$ firebase emulators:start

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

Men-deploy ke Firebase

Sekarang saatnya 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 Konsol Firebase dan menyetujui Persyaratan Layanan. Tindakan ini hanya perlu dilakukan sekali per akun email.

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

• Buka "Alat Developer" browser Anda dan temukan errornya, lalu minta bantuan Gemini untuk 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 sudah diketahui Gemini. Artinya, Gemini memiliki semua konteks yang diperlukan untuk memperbaikinya. Pastikan Anda menggunakan chat yang sama dengan yang menghasilkan kode.

♾️ Lakukan iterasi!

Anda dapat mengulangi langkah-langkah ini sebanyak yang Anda inginkan. Anda dapat terus memberikan perintah hingga Anda puas dengan hasilnya.

Ada beberapa hal penting yang perlu diperhatikan:

1. Loop iterasi jauh lebih cepat di loop Gemini > p5.js > Gemini daripada di loop Gemini > local host > deploy to cloud run > test app on browser (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 commit git setiap sketch.js yang Anda kirim, 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 saat yang tepat untuk meningkatkan kualitas kode.

6. Tips Menulis Perintah

Beberapa tips dari pengalaman membuat beberapa game.

Membuat versi perintah Anda

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

1. Jika Anda menyukai apa yang Anda lihat dan ingin melakukan iterasi dengan Gemini menggunakan sub-perintah berikutnya, mungkin menarik untuk melacak semuanya di suatu tempat (perintah 1,2,3 - contoh 3-shot1 - example2).
2. Jika Anda tidak terlalu peduli dengan aplikasi yang dibuat oleh prompt1, Anda mungkin ingin menyempurnakan perintah, menghapus kode, dan memulai ulang dengan kode yang diubah (prompt 1 v1, prompt1 v2, prompt1, v3, ..)

Tentu saja Anda dapat menggabungkan kedua pendekatan tersebut.

Fungsi seluler

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

Memberikan masukan tentang 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 pengodean tidak pernah seseru 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 👥 membual tentangnya. Mengapa Anda tidak membagikan game terbaru Anda (your-project.web.app) di LinkedIn atau Twitter dengan hashtag #VibeCodeAGameWithGemini (dan mungkin menandai penulis di LinkedIn)? Dengan begitu, kami dapat mengetahui seberapa menarik codelab ini, dan mungkin menulis lebih banyak codelab serupa.

Saya ingin lebih banyak!

Jika Anda mencari sumber bantuan tambahan, lihat game dan perintah berikut:

• Buat lima game anak-anak dengan Gemini 2.5 dan p5.js dalam satu akhir pekan. Artikel ini akan memandu Anda melalui proses pemikiran dalam mengodekan nuansa game dengan 6 contoh.
• palladius/genai-googlecloud-scripts (repo GitHub dengan ~10 aplikasi - kode dan perintah): Tetris, Pacman, Connect 4, dan bahkan klon Rogue untuk para penggemar game klasik. Ini berisi perintah semua game tersebut. Ambil favoritmu, sesuaikan perintahnya, dan nikmati!

Beberapa contoh game yang dapat Anda buat:

Game akhir mungkin terlihat seperti ini:

• Tetris 3D
• Game bahasa
• Clone palsu
• Clone pacman.

Sekali lagi, bahasa Inggris adalah batasnya.

🎉 Selamat membuat kode!