1. Pengantar
Dalam codelab ini, Anda akan membangun CloudCrush, game arcade match 3, menggunakan Gemini 3 dan Gemini CLI, agen coding command line kami. Game akan ditulis dalam Go dan di-deploy ke Google Cloud menggunakan Cloud Run.
Tujuan utama codelab ini adalah mengembangkan keterampilan untuk mengatur agen dalam membangun aplikasi untuk Anda, bukan menulis kode secara manual. Anda akan mendelegasikan semua tugas pengembangan ke Gemini CLI, meskipun Anda belum pernah menggunakan teknologi ini sebelumnya.
Codelab ini ditujukan untuk developer tingkat menengah yang ingin mempelajari alur kerja coding agentic. Estimasi total durasi untuk lab ini adalah 60 menit. Resource yang dibuat dalam codelab ini menggunakan harga berbasis pemakaian.
Yang akan Anda lakukan
- Bangun logika game Match-3 inti menggunakan Go dan framework Ebitengine.
- Menyesuaikan game agar dapat berjalan di browser web menggunakan WebAssembly (WASM)
- Deploy game dan API skor tingginya ke Cloud Run.
- Mengatur sub-agen dan ekstensi khusus untuk pengujian dan peninjauan kode
Prasyarat
- Pengetahuan dasar tentang bahasa pemrograman
- Pengetahuan dasar tentang infrastruktur cloud
- Pengetahuan dasar tentang konsol Google Cloud
Yang akan Anda pelajari
- Cara bekerja dengan agen coding untuk membangun aplikasi yang kompleks
- Cara berinteraksi dengan Gemini dalam konteks multi-modal
- Cara men-deploy aplikasi ke cloud menggunakan Cloud Run
Yang Anda butuhkan
Workshop ini dapat dilakukan sepenuhnya di cloud menggunakan Cloud Shell, tetapi jika Anda lebih suka menggunakan mesin lokal, Anda memerlukan hal berikut:
- Gemini CLI. Download dan instal dengan mengikuti petunjuk di geminicli.com
- Rangkaian alat Go (versi 1.26 atau yang lebih tinggi). Download dan instal menggunakan petunjuk di go.dev
- gcloud CLI untuk berinteraksi dengan Google Cloud. Download dan instal menggunakan petunjuk dalam dokumentasi Google Cloud
- Akun penagihan Google Cloud (untuk men-deploy game ke cloud)
Teknologi Utama
Di sini Anda dapat menemukan informasi selengkapnya tentang teknologi yang akan kami gunakan:
- Gemini CLI: agen pengembangan
- Gemini 3: versi terbaru model bahasa besar canggih kami
2. Penyiapan Lingkungan
Penyiapan project
Buat Project Google Cloud
- Di Konsol Google Cloud, di halaman pemilih project, pilih atau buat project Google Cloud.
- Pastikan penagihan diaktifkan untuk project Cloud Anda. Pelajari cara memeriksa apakah penagihan telah diaktifkan pada suatu project.
Mulai Cloud Shell
Cloud Shell adalah lingkungan command line yang berjalan di Google Cloud yang telah dilengkapi dengan alat yang diperlukan.
- Klik Activate Cloud Shell di bagian atas konsol Google Cloud.
- Setelah terhubung ke Cloud Shell, verifikasi autentikasi Anda:
gcloud auth list - Pastikan project Anda dikonfigurasi:
gcloud config get project - Jika project Anda tidak ditetapkan seperti yang diharapkan, tetapkan project:
export PROJECT_ID=<YOUR_PROJECT_ID> gcloud config set project $PROJECT_ID
3. Penyiapan Project
Buat direktori project
Pertama, kita perlu membuat direktori baru untuk project Anda. Di terminal, jalankan perintah berikut:
mkdir -p codelab-match3 && cd codelab-match3
Membuka Gemini CLI
Pertama, mari kita periksa apakah Gemini CLI telah diinstal dengan benar. Jalankan di terminal Anda:
gemini --version
Anda akan melihat yang seperti ini:
$ gemini --version 0.37.1
Sekarang luncurkan Gemini CLI dengan perintah gemini:
gemini
Anda akan melihat perintah Gemini CLI:
Jika Anda melihat perintah Gemini CLI, Anda sudah siap. Jika tidak, periksa kembali apakah Anda melewatkan salah satu langkah penyiapan sebelumnya.
Mengaktifkan Pengarahan Model
Pengarahan model adalah fitur yang memungkinkan Anda menambahkan konteks tambahan ke agen saat agen masih mengerjakan tugas tertentu. Anda dapat menggunakannya untuk mengoreksi arah agen saat Anda melihatnya bergerak ke arah yang salah, menambahkan informasi klarifikasi untuk meningkatkan kualitas respons agen, atau menyertakan fitur kecil yang terlewat dalam perintah asli.
Untuk mengaktifkan pengarahan model, buka menu setelan menggunakan perintah /settings, lalu ketik "steering" di kotak penelusuran. Kemudian, tetapkan opsi Aktifkan Pengarahan Model ke benar (true).
Anda mungkin perlu memulai ulang CLI agar perubahan diterapkan (menekan tombol "r").
Mendownload aset
Kita perlu mendownload gambar yang akan digunakan dalam game. File disimpan di GitHub di repositori di sini. Anda dapat mendownloadnya secara manual atau meminta Gemini melakukannya untuk Anda menggunakan perintah berikut:
Create a folder named "assets" and download the images
background.png, gcp_sprites.png, gemini.png and logo.png,
from this GitHub repository to the "assets" folder:
https://github.com/GoogleCloudPlatform/devrel-demos/tree/main/codelabs/gemini-cli/gemini-cli-match3-golang
4. Membuat game dengan mode rencana dan pengarahan model
Mulailah dengan membangun logika game Match-3 inti. Karena ini adalah tugas yang kompleks, sebaiknya gunakan Gemini CLI dalam mode rencana untuk mengatur pengembangan.
Aktifkan/nonaktifkan mode rencana dengan perintah garis miring /plan di perintah Gemini CLI:
/plan
Dengan mode rencana diaktifkan, salin dan tempel perintah berikut ke Gemini CLI:
Build a Match-3 game called 'Cloud Crush' in Go using Ebitengine v2.
The entire game screen should have background.png as background.
The play area should be an 8x8 grid with white background.
On the right side of the play area include a side panel with UI elements
like player score and how to play instructions.
The side panel should have a solid background colour to help with readability of the UI.
Use standard GCP product logos (e.g. Compute Engine, Cloud Storage, BigQuery, etc.)
as icons. These icons are provided in the gcp_sprites.png file.
The icons are saved as 64x64 sprites but scale them as necessary
based on the screen resolution. Implement swapping, clearing 3+ gems, and gravity.
Use ebitengine native font rendering (size 48 for titles and size
24 for normal text) for all text and not the debug print.
The font should be monospaced (golang.org/x/image/font/gofont/gomono).
Keep the UI tidy and harmonic, e.g. centered text should always be
adjusted based on text length, not just guess based on estimates.
Gemini CLI mungkin akan mengajukan beberapa pertanyaan klarifikasi sebelum membuat rencana.
Misalnya, di sini ditanyakan apakah Anda lebih memilih aplikasi satu file atau multi-file:
Berikut adalah permintaan tentang preferensi kita untuk animasi:
Pertanyaan terakhir adalah tentang menyematkan aset ke dalam biner itu sendiri dengan go:embed:
Setelah menjawab semua pertanyaan, Anda dapat meninjaunya untuk terakhir kalinya sebelum menekan enter untuk mengirimkan.
Setelah rencana selesai, Anda akan diminta untuk meninjaunya:
Di bagian bawah kotak ulasan, Anda memiliki opsi untuk menyetujui rencana apa adanya atau menambahkan masukan kami.
Gunakan kesempatan ini untuk menambahkan persyaratan baru yang terlewat dalam perintah asli:
Add a 60-seconds countdown timer and an in-memory high-score tracker
to enhance the arcade game experience.
Combos should give a score bonus of 10% per combo number.
Anda akan diminta untuk mengonfirmasi rencana penerapan untuk terakhir kalinya:
Tekan enter agar agen memulai tugas. Agen akan keluar dari mode rencana dan mulai menulis kode.
Pada tahap ini, biasanya kita harus menunggu hingga selesai atau menghentikannya dengan tombol ESC jika ingin melakukan perubahan pada penerapan, tetapi karena kita telah mengaktifkan pengarahan model, kita dapat mengantrekan petunjuk untuk mengoreksi model.
Saat agen sedang bekerja, tempelkan kode berikut di jendela chat agen untuk mendemonstrasikan kemampuan "pengarahan model", yang menunjukkan cara mengantrekan perintah untuk memutar implementasi:
Update the implementation to include: 'Q' to quit, 'F' for full-screen
and 'A' for Accessibility Mode: swap GCP logos for high-contrast coloured blocks.
Also enable Arrow Keys to move the selection cursor and Space to select the gem to
swap (space is pressed once to select, then arrow key immediately makes
the move - no need to press space again).
Use a golden square (4 px border, transparent fill) with a simple animation
to highlight where the cursor is at the moment.
Anda akan melihat perintah ini diantrekan sebagai "petunjuk pengarahan":
Terima rencana dan saksikan agen menerapkan semua persyaratan Anda.
Setelah agen selesai melakukan penerapan, jalankan go run main.go di folder project untuk mendemonstrasikan versi desktop. Anda tidak perlu keluar dari Gemini CLI untuk menjalankan perintah ini. Ketik ! (tanda seru) untuk masuk ke mode shell dan menjalankan perintah dari sana:
Manfaat menjalankan dari mode shell adalah bahwa setiap masalah yang mungkin terjadi akan langsung terekam dalam konteks agen. Misalnya, dalam kasus ini, agen lupa mendownload beberapa dependensi:
Anda dapat keluar dari mode shell dengan menekan tombol escape, lalu meminta agen untuk memeriksa dan memperbaiki error:
Hasil yang berhasil akan terlihat seperti ini:
Coba mainkan game dan sesuaikan parameter game hingga Anda puas dengan pengalaman tersebut (misalnya, membuat animasi lebih cepat atau lebih lambat, menyesuaikan cara game merespons perintah, dll.)
5. Menyesuaikan game agar dapat berjalan di browser web
Game Ebitengine yang baru saja Anda buat adalah aplikasi desktop. Agar dapat berjalan di web, kita dapat mengonversinya ke WebAssembly.
Gunakan perintah berikut untuk memandu agen:
We need to enable this game to run on a web browser. Compile the game to WASM
and create a Go web server to serve the compiled WASM and the assets.
Setelah agen menyelesaikan tugas, Anda dapat menginstruksikan agen untuk menjalankan server game di latar belakang.
Anda dapat mengelola proses latar belakang menggunakan kombinasi tombol Ctrl+B:
Tekan Ctrl+B lagi untuk menutup jendela ini.
Sekarang buka http://localhost:8080 di browser Anda untuk melihat game berjalan di web:
Setelah Anda menjalankannya di web, sekarang saatnya untuk memolesnya sebelum men-deploy-nya ke cloud.
6. Membuat layar judul dan papan peringkat
Game ini berfungsi, tetapi tidak memiliki beberapa fitur utama untuk pengalaman arcade yang tepat. Pertama, mari kita tambahkan layar judul, lalu tambahkan papan peringkat agar Anda dapat bersaing dengan teman-teman Anda.
Perbaiki kedua masalah dengan perintah berikut:
Create a title screen that displays the game logo (logo.png) over the cloud background.
The logo should be centered and occupy no more than 75% of the screen area.
The title screen should display "Press ENTER to play" (black/bold) right below the logo,
with every letter animated in a slow wavy (cosine) pattern.
Once the player presses ENTER, it should be prompted to add their name, which
will then be recorded to populate the leaderboard at the end of the round.
Once the game is over, play the animated leaderboard with the top 10 highest scores.
The animated leaderboard should render entries one by one up to 10 entries,
using a fade in effect just like old school arcade games. The leaderboard
should fade out to the title screen after 15 seconds.
Please note that name entry should be processed independently of the play state
key handlers (e.g. pressing A during name entry should not toggle accessibility mode).
Berikut adalah contoh layar judul:
Sekarang terlihat sedikit lebih profesional. 🙂
7. Men-deploy game ke Cloud Run
Akhirnya tiba waktunya untuk membagikan kreasi kami kepada dunia. Deploy game ke Google Cloud Run agar dapat mengaksesnya dari mana saja.
Use the gcloud CLI to provision and deploy the Go web server and its assets to
Google Cloud Run. Provide the live URL when complete.
Karena game kini tersedia di cloud, akan sangat disayangkan jika game tersebut tidak dapat dijalankan di perangkat seluler. Anda dapat melakukannya dengan perintah berikut:
Now enable this game to run on mobile devices. You need to update the input
system to handle "taps" as well as key presses and clicks. Since mobile devices
most likely won't have a keyboard, add a button to generate a random name and
a confirmation button to the name entry.
Also generate a QR code for the CloudRun link and display it on the screen so
that people can scan it to access the mobile version and compete against their
friends for the high score.
Jalankan game lagi di browser Anda. Coba akses game dari perangkat seluler juga menggunakan kode QR.
8. Menggunakan agen browser untuk menguji game
Di Gemini CLI, sub-agen adalah persona terisolasi dengan konteks baru, yang sempurna untuk tugas yang berjalan lama dan/atau presisi tinggi yang tidak ingin Anda dipengaruhi oleh konteks saat ini.
Game secara alami sulit diuji dengan alat pengujian konvensional (misalnya, pengujian unit dan integrasi), tetapi kita dapat menggunakan agen browser untuk melakukan beberapa pengujian untuk kita. Agen browser dapat meluncurkan browser Chrome-nya sendiri dan akan menavigasi layar game dengan mengeluarkan perintah DOM. Alat ini juga memiliki kemampuan untuk mengambil screenshot, yang dapat kita gunakan untuk mendokumentasikan pengujian dan juga memberikannya kembali kepada agen untuk melakukan penyesuaian kecil pada UI nanti.
Agen browser saat ini bersifat eksperimental, jadi kita harus mengaktifkannya terlebih dahulu. Berikan perintah ini ke Gemini CLI untuk mengaktifkan agen di tingkat project.
Create a .gemini/settings.json file with the following content to
configure the browser sub agent:
{
"agents": {
"overrides": {
"browser_agent": {
"enabled": true
}
}
}
}
Anda harus memulai ulang agen agar perubahan ini diterapkan. Simpan percakapan saat ini dengan perintah /chat save:
Keluar dari Gemini CLI dengan menekan Ctrl+D dua kali, lalu mulai lagi. Pulihkan percakapan dengan /chat resume cloud-crush.
Sekarang Anda seharusnya memiliki akses ke agen browser. Setiap kali Anda ingin mendelegasikan tugas ke agen browser, Anda dapat menyebutkannya dengan @browser_agent:
Sekarang gunakan agen browser untuk melakukan penilaian terhadap game yang di-deploy:
@browser_agent perform an end-to-end test of the Cloud Run deployment URL.
Navigate the homepage, start a game, submit a score, and verify the new score
appears correctly on the leaderboard. Take screenshots to show each step of the
investigation and save to ./screenshots.
Anda akan melihat layar konfirmasi:
Setelah Anda memberikan izin kepada agen dan alat yang diperlukan, jendela browser Chrome baru akan terbuka. Ini adalah browser yang dikontrol oleh agen. Petunjuk visualnya adalah bingkai biru di layar dan pesan di bagian bawah yang bertuliskan "Gemini CLI mengontrol browser ini":
Setelah selesai, pesan seperti ini akan ditampilkan:
Berikut beberapa screenshot yang diambil oleh agen browser:
title_screen.png:
game_board.png:
Sekarang adalah saat yang tepat untuk menggunakan salah satu gambar yang diambil oleh agen untuk mengoptimalkan UI game. Misalnya, Anda dapat mengucapkan:
Analyse the screenshot @screenshots/game_board.png and adjust the side panel to
have better contrast and be more harmonic with the rest of UI elements. Focus
on readability and color theory to achieve the best possible visuals.
9. Membuat agen kustom untuk mengamankan game
Salah satu masalah umum terkait aplikasi "berkode suasana" adalah cara mempertahankan kualitas tinggi dan praktik terbaik dari perspektif coding dan keamanan. Meskipun Anda dapat mencoba meningkatkan kualitas perintah agar sangat ketat dalam kedua aspek ini, semakin banyak yang Anda tambahkan ke perintah, semakin kurang fokus agen tersebut, yang sering kali menghasilkan hasil yang kurang optimal. Untuk jenis skenario ini, penggunaan sub-agen sangat ideal karena mereka beroperasi dalam konteks yang terpisah dari agen utama, dan dapat berfokus pada tugas yang Anda berikan kepada mereka. Mari kita buat agen kustom untuk melakukan audit keamanan pada kode ini dan memastikan kita tidak membocorkan kredensial apa pun atau mengekspos diri kita pada risiko yang tidak perlu saat men-deploy game ini ke Cloud Run.
Create a new custom agent in .gemini/agents/security_auditor.md using the following content:
---
name: security_auditor
description: Specialized in finding security vulnerabilities in code.
kind: local
tools:
- read_file
- grep_search
model: gemini-3-flash-preview
temperature: 0.2
max_turns: 10
---
You are a ruthless Security Auditor. Your job is to analyze code for potential
vulnerabilities.
Focus on:
1. SQL Injection
2. XSS (Cross-Site Scripting)
3. Hardcoded credentials
4. Unsafe file operations
When you find a vulnerability, explain it clearly and suggest a fix. Do not fix
it yourself; just report it.
Anda harus memulai ulang CLI agar perubahan diterapkan. Simpan sesi percakapan dengan /chat save dan lanjutkan dengan /chat resume seperti yang telah kita lakukan sebelumnya.
Saat CLI dilanjutkan, CLI akan otomatis mendeteksi agen baru saat startup:
Klik Acknowledge and Enable, lalu minta agen untuk melakukan pemeriksaan keamanan pada kode game dengan perintah berikut:
@security-auditor please run a security audit on this code and cloud run
deployment to make sure it is safe against common attack patterns and that it is
not leaking any credentials
Anda akan melihat yang seperti ini:
Setelah menyelesaikan audit, alat ini akan memberikan rekomendasi. Dalam contoh ini, sebenarnya ditemukan beberapa hal penting yang perlu diperbaiki:
Jika Anda menemukan masalah, cukup minta Gemini CLI untuk memperbaikinya. 🙂
10. Kesimpulan
Selamat! Anda telah berhasil menggunakan Gemini CLI untuk membangun, men-deploy, menguji, dan mengaudit game arkade, yang menunjukkan alur kerja agentic tingkat lanjut dari penyiapan awal hingga deployment.
Pembersihan
Jika Anda tidak berencana untuk kembali ke codelab ini nanti, sebaiknya hapus resource yang dibuat selama codelab ini.
- Hapus Layanan Cloud Run:
Minta Gemini CLI untuk menghapusnya:
I'm finished with this project. Delete the cloud run deployment.
- Hapus direktori project:
cd .. && rm -rf codelab-match3
Atau, Anda dapat menghapus seluruh project Google Cloud jika project tersebut dibuat hanya untuk codelab ini.
Langkah berikutnya
Anda dapat melanjutkan perjalanan belajar dengan menjelajahi codelab lain di platform ini, atau dengan meningkatkan kemampuan Cloud Crush Anda sendiri.
Beberapa saran untuk meningkatkan kualitas game:
- Tambahkan gem "Gemini" khusus (menggunakan gemini.png) yang muncul saat mencocokkan 4+ gem. Mencocokkan 3+ permata Gemini akan memberikan bonus waktu kepada pemain.
- Tambahkan musik. Anda dapat membuat musik menggunakan Lyria 3 di halaman beranda Gemini.
- Menambahkan efek suara
- Menambahkan mode permainan lainnya
Selamat membuat kode!