1. Pengantar
Dalam codelab ini, Anda akan membangun CloudCrush, game arkade match 3, menggunakan Gemini 3 dan agen coding Antigravity. Game akan ditulis dalam Go dan di-deploy ke Google Cloud menggunakan Cloud Run.
Perhatikan bahwa meskipun pengetahuan bahasa Go direkomendasikan, Anda tidak harus memilikinya untuk mengikuti workshop ini karena agen akan melakukan semua coding. Tujuan utama codelab ini adalah mengembangkan keterampilan untuk mengatur agen dalam membangun aplikasi untuk Anda, bukan menulis kode secara manual.
Codelab ini ditujukan untuk developer tingkat menengah yang ingin mempelajari alur kerja agentik lanjutan. 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:
- Antigravity 2.0 dan Antigravity CLI. Download dan instal dengan mengikuti petunjuk di antigravity.google
- 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:
- Antigravity CLI: agen pengembangan
- Gemini 3: versi terbaru model bahasa besar canggih kami
2. Penyiapan Lingkungan
Pilih salah satu opsi berikut: Penyiapan lingkungan mandiri jika Anda ingin menjalankan codelab ini di komputer Anda sendiri, atau Mulai Cloud Shell jika Anda ingin menjalankan codelab ini sepenuhnya di cloud.
Penyiapan lingkungan mandiri
- Login ke Google Cloud Console dan buat project baru atau gunakan kembali project yang sudah ada. Jika belum memiliki akun Gmail atau Google Workspace, Anda harus membuatnya.
- Project name adalah nama tampilan untuk peserta project ini. String ini adalah string karakter yang tidak digunakan oleh Google API. Anda dapat memperbaruinya kapan saja.
- Project ID bersifat unik di semua project Google Cloud dan tidak dapat diubah (tidak dapat diubah setelah ditetapkan). Cloud Console otomatis membuat string unik; biasanya Anda tidak mementingkan kata-katanya. Di sebagian besar codelab, Anda harus merujuk Project ID-nya (umumnya diidentifikasi sebagai
PROJECT_ID). Jika tidak suka dengan ID yang dibuat, Anda dapat membuat ID acak lainnya. Atau, Anda dapat mencobanya sendiri, dan lihat apakah ID tersebut tersedia. ID tidak dapat diubah setelah langkah ini dan tersedia selama durasi project. - Sebagai informasi, ada nilai ketiga, Project Number, yang digunakan oleh beberapa API. Pelajari lebih lanjut ketiga nilai ini di dokumentasi.
- Selanjutnya, Anda harus mengaktifkan penagihan di Konsol Cloud untuk menggunakan resource/API Cloud. Menjalankan operasi dalam codelab ini tidak akan memakan banyak biaya, bahkan mungkin tidak sama sekali. Guna mematikan resource agar tidak menimbulkan penagihan di luar tutorial ini, Anda dapat menghapus resource yang dibuat atau menghapus project-nya. Pengguna baru Google Cloud memenuhi syarat untuk mengikuti program Uji Coba Gratis senilai $300 USD.
Mulai Cloud Shell
Meskipun Google Cloud dapat dioperasikan dari jarak jauh menggunakan laptop Anda, dalam codelab ini, Anda akan menggunakan Google Cloud Shell, lingkungan command line yang berjalan di Cloud.
Dari Google Cloud Console, klik ikon Cloud Shell di toolbar kanan atas:
Hanya perlu waktu beberapa saat untuk penyediaan dan terhubung ke lingkungan. Jika sudah selesai, Anda akan melihat tampilan seperti ini:
Mesin virtual ini berisi semua alat pengembangan yang Anda perlukan. Layanan ini menawarkan direktori beranda tetap sebesar 5 GB dan beroperasi di Google Cloud, sehingga sangat meningkatkan performa dan autentikasi jaringan. Semua pekerjaan Anda dalam codelab ini dapat dilakukan di browser. Anda tidak perlu menginstal apa pun.
3. Penyiapan Project
Buat direktori project
Pertama, kita perlu membuat direktori baru untuk project Anda. Di terminal Anda, jalankan perintah berikut:
mkdir -p codelab-match3 && cd codelab-match3
Luncurkan Antigravity CLI
Pertama, mari kita periksa apakah Antigravity CLI telah diinstal dengan benar. Jalankan di terminal Anda:
agy --version
Anda akan melihat yang seperti ini:
$ agy --version 1.0.2
Sekarang luncurkan Antigravity CLI dengan perintah agy:
agy
Antigravity akan menanyakan apakah Anda memercayai project ini. Karena kita baru saja membuat folder kosong, folder tersebut aman untuk dipercaya. Jadi, konfirmasi akses dan Anda akan diarahkan ke perintah CLI:
Jika Anda melihat perintah Antigravity CLI, Anda siap menggunakannya. Jika tidak, periksa kembali apakah Anda melewatkan salah satu langkah penyiapan sebelumnya.
4. Membuat game dasar dalam mode perencanaan
Mari kita mulai dengan membangun logika game Match-3 inti. Antigravitasi dimulai secara default dalam mode perencanaan, jadi Anda tidak perlu mengeluarkan perintah khusus apa pun untuk beralih ke perencanaan.
Namun, Anda dapat mengaktifkan mode perencanaan kapan saja dengan perintah garis miring /planning di perintah Antigravity CLI:
/planning
Jika Anda mencoba menjalankan perintah ini sekarang, Antigravity akan mengingatkan Anda bahwa perintah tersebut sudah dalam perencanaan.
Kebalikan dari mode perencanaan adalah mode cepat, yang dapat Anda aktifkan dengan /fast:
/fast
Dalam mode cepat, Antigravity akan langsung mengerjakan tugas, dan mode ini ditujukan untuk tugas mandiri yang lebih sederhana. Mode perencanaan dirancang untuk tugas kompleks, di mana agen akan terlebih dahulu menguraikan rencana yang dapat Anda tinjau dan ulangi sebelum eksekusi.
Mendownload aset
Kita perlu mendownload gambar yang akan digunakan dalam game. Karena ini adalah tugas kecil yang mandiri, tidak perlu menjalankannya dalam mode perencanaan, jadi mari manfaatkan mode cepat untuk melakukannya segera:
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
Antigravity akan meminta izin untuk menjalankan beberapa perintah shell guna mendownload file. Setelah selesai, Anda akan melihat tampilan seperti ini:
Membuat game dasar
Setelah aset siap, sekarang saatnya membangun game dasar. Karena membangun game adalah tugas yang cukup rumit, mari kembali ke mode perencanaan sebelum kita memberikan perintah:
/planning
Dalam mode perencanaan, salin dan tempel perintah berikut ke Antigravity 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.
Mungkin perlu melakukan beberapa eksplorasi sebelum menyusun rencana, misalnya, memeriksa file PNG untuk melihat dimensinya. Setelah rencana selesai, Anda akan diminta untuk meninjaunya:
Perhatikan pojok kanan bawah tempat Anda menulis 1 artefak dan petunjuk untuk menggunakan /artifact untuk meninjau. Di Antigravity, file pendukung seperti rencana, daftar tugas, dan panduan disebut "artefak" untuk membedakannya dari file biasa yang merupakan bagian dari solusi (misalnya, kode sumber).
Dengan memasukkan perintah /artifact di perintah, Anda dapat melihat rencana dan memberikan komentar di dalamnya jika perlu melakukan penyesuaian.
/artifact
Anda akan melihat yang seperti ini:
Perhatikan bahwa ada file bernama implementation_plan.md dengan opsi untuk membuka, menyetujui, atau menolak. Tekan Enter untuk membukanya. Berikut adalah contoh tampilan rencana di sistem saya:
Anda dapat men-scroll ke atas dan ke bawah dengan tombol panah, dan di baris mana pun, Anda dapat menambahkan komentar dengan menekan tombol C. Dalam hal ini, saya tidak suka karena menggunakan Go versi lama, jadi saya akan menambahkan komentar untuk menggunakan Go 1.26 (versi terbaru pada saat penulisan ini) di baris 16:
Setelah Anda memasukkan komentar, komentar tersebut akan muncul secara inline:
Bagian penting yang perlu diperiksa adalah "Rencana Verifikasi". Game terkenal sulit diuji secara otomatis, tetapi go adalah bahasa yang dikompilasi sehingga setidaknya kita harus memastikan model menyerahkan kode yang dikompilasi kepada kita. Jika langkah otomatis untuk membuat biner tidak disertakan, tambahkan sebagai komentar:
Bagian penting yang perlu diperiksa adalah "Rencana Verifikasi". Game sangat sulit diuji secara otomatis, tetapi go adalah bahasa yang dikompilasi sehingga setidaknya kita harus memastikan model menyerahkan kode yang dikompilasi kepada kita. Jika langkah otomatis untuk membangun biner tidak disertakan, tambahkan sebagai komentar:
Ulangi proses ini hingga Anda puas dengan rencana tersebut, lalu tekan ESC untuk kembali. Kemudian, tekan Y untuk mengonfirmasi pengiriman komentar ke agen:
Setelah Anda menekan Y, agen akan segera mulai bekerja. Anda harus menekan ESC sekali lagi untuk keluar dari menu "Artefak". Tindakan ini akan mengembalikan Anda ke mode perintah. Sementara itu, agen mungkin meminta lebih banyak konfirmasi pemanggilan alat karena perlu menjalankan perintah shell.
Sambil menunggu, kita juga dapat terus mengerjakan desain dengan mengantrekan perintah. Misalnya, kita dapat menggunakan 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.
Perintah yang dalam antrean akan muncul di histori pesan dengan kepala panah kecil di depannya:
Anda mungkin juga melihat bahwa jumlah artefak meningkat. Selain rencana, Antigravity juga akan membuat daftar tugas (task.md) untuk melacak setiap item yang perlu diterapkan atau tindakan yang perlu dilakukan. Setelah selesai, Antigravity akan membuat file panduan (walkthrough.md) dengan penjelasan tentang tujuan yang telah dicapai. Anda dapat memeriksa semuanya dengan menggunakan perintah /artifact lagi.
Berikut adalah contoh file task.md setelah menyelesaikan penerapan game dasar:
Kapan saja Anda dapat membuka file ini dan menambahkan komentar ke dalamnya, yang setelah dikirim ke agen akan diantrekan untuk dieksekusi seperti perintah yang diantrekan. Sebaiknya berikan komentar pada file ini untuk memberikan konteks tambahan kepada agen tentang permintaan Anda.
Setelah biner berhasil dibangun, Anda akan melihat tampilan seperti ini:
Coba jalankan game dan lihat apakah game berfungsi seperti yang diharapkan. Sebaiknya jalankan dari dalam perintah agen. Anda dapat mengalihkan perintah ke "shell mode" dengan mengetikkan tanda seru "!":
Anda akan melihat pesan "activated bash mode" di bawah perintah. Tekan Enter untuk menjalankan perintah. Menjalankan biner dalam mode ini memberi Anda manfaat bahwa agen "mengawasi" output apa pun ke terminal, jadi jika game gagal berjalan, atau tiba-tiba error, Anda tidak perlu menjelaskan masalah yang terjadi kepada agen. Segera setelah itu, fungsi ini akan memiliki semua informasi yang diperlukan dari konteks shell.
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.)
Misalnya, perintah ini akan meningkatkan kualitas pengalaman, menambahkan mode aksesibilitas dan perintah keyboard baru:
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.
Setelah Anda selesai melakukan pemolesan, lanjutkan ke bagian berikutnya untuk mengonversinya menjadi aplikasi web.
5. Menyesuaikan game agar dapat berjalan di browser web
Game Ebitengine saat ini merupakan aplikasi desktop. Mari kita minta Antigravity CLI untuk menyesuaikannya agar dapat berjalan di browser web menggunakan WebAssembly (WASM). Hal ini akan melibatkan kompilasi kode Go untuk target browser dan penyiapan server web dasar.
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.
Perhatikan bahwa agen akan mencoba mencari file bernama wasm_exec.js di sistem file Anda. Hal ini wajar dan Anda perlu mengizinkannya, karena file ini adalah wrapper yang memungkinkan untuk menjalankan biner Go melalui JS. Contoh:
Setelah agen menyelesaikan tugas, Anda dapat menginstruksikan agen untuk menjalankan server game di latar belakang.
Sekarang buka http://localhost:8080 di browser Anda untuk melihat game yang berjalan di web:
Setelah Anda menjalankannya di web, mari kita sempurnakan sebelum men-deploy-nya di 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. Gunakan 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).
Leaderboard scores should be saved in-memory, server-side.
Sekarang terlihat sedikit lebih profesional. 🙂
7. Men-deploy game ke Cloud Run
Akhirnya tiba saatnya untuk membagikan kreasi kami kepada dunia. Kita akan men-deploy seluruh aplikasi 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 virtual keyboard to the name entry screen and a confirmation button to the name entry.
Finally, 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 URL dari perangkat seluler juga (Anda dapat membuat kode QR untuk menyederhanakan pengalaman ini).
8. Menggunakan agen browser untuk menguji game
Meskipun game sering kali sulit diuji secara otomatis karena bergantung pada masukan visual, kita tetap dapat memanfaatkan beberapa otomatisasi untuk setidaknya memastikan deployment berfungsi dengan benar dan kita memiliki elemen dasar.
Untuk melakukannya, kita akan menggunakan subagen browser. Di Antigravity, sub-agen adalah persona terisolasi dengan konteks baru, yang sempurna untuk tugas yang tidak ingin Anda pengaruhi oleh konteks saat ini, atau saat Anda ingin mencegah tugas "mencemari" jendela konteks utama Anda.
Agen browser adalah agen bawaan khusus untuk tugas terkait browser. Perhatikan bahwa hanya untuk langkah ini, kita perlu menggunakan aplikasi desktop Antigravity karena agen browser saat ini tidak tersedia di command line.
Buka aplikasi desktop Antigravity Anda dan mulai percakapan baru di project Cloud Crush:
Anda dapat memicu sub-agen browser dengan mengetik /browser, diikuti dengan perintah ini:
Go to http://localhost:8080 and capture screenshots of the following game screens:
1. Title Screen (initial state: "PRESS ENTER TO PLAY")
2. Name Entry Screen (press Enter to reach this screen)
3. Main Gameplay Screen (type a name like "PLAYER" and press Enter to start)
4. Leaderboard Screen (let the game timer run out to view the high scores)
Pendekatan ini memungkinkan kita menggunakan screenshot untuk memperbaiki elemen UI yang sulit dijelaskan hanya dalam teks.
Anda dapat mereferensikan file menggunakan simbol "@" yang diikuti dengan nama file. Misalnya, di sini saya meminta agen untuk memperbesar ukuran logo di layar judul:
Meskipun contoh ini agak dibuat-buat karena model tidak perlu "melihat" gambar untuk menerapkan koreksi ukuran 50%, ini adalah teknik yang berguna untuk melakukan penyesuaian UI yang mungkin lebih sulit dijelaskan dalam bentuk teks. Agen juga dapat memvalidasi pekerjaannya sendiri dengan mengambil screenshot sebelum dan sesudah, jadi simpan trik ini di kotak alat Anda.
9. Membuat agen kustom untuk mengamankan game
Salah satu masalah umum terkait aplikasi yang "dikodekan 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 subagen sangat ideal karena mereka dapat berfokus pada tugas yang Anda berikan. Mari kita buat agen kustom untuk melakukan audit keamanan pada kode ini dan memastikan kita tidak membocorkan kredensial apa pun atau membuat diri kita terpapar risiko yang tidak perlu saat men-deploy game ini.
Perintah ini memberikan dasar yang baik untuk agen:
create a new subagent called "security_auditor" using the following instructions:
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.
Perhatikan bahwa Antigravity akan menggunakan alat "DefineSubagent" untuk membuat agen baru:
Minta agen untuk melakukan pemeriksaan keamanan pada kode game dengan perintah berikut:
Run the security auditor agent in this code
Anda akan melihat yang seperti ini:
Setelah agen menyelesaikan tugasnya, Anda akan melihat laporan seperti ini:
Mari kita minta Antigravity untuk memperbaikinya 🙂:
Fix these findings for me please!
Dan inilah:
Perhatikan bahwa agen yang dibuat dengan cara ini hanya ada selama durasi percakapan. Jika ingin memiliki agen yang "dapat digunakan kembali" di antara sesi, Anda dapat membuatnya menggunakan file konfigurasi. Untuk informasi tambahan, lihat perintah /agents.
10. Kesimpulan
Selamat! Anda telah berhasil menggunakan Antigravity CLI untuk membangun, men-deploy, menguji, dan mengaudit game arkade, yang menunjukkan alur kerja agentik tingkat lanjut dari penyiapan awal hingga deployment.
Pembersihan
Untuk menghindari biaya berkelanjutan pada akun Google Cloud Anda, hapus resource yang dibuat selama codelab ini.
- Hapus Layanan Cloud Run:
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 kualitas Cloud Crush sendiri, tetapi jangan lupa untuk membersihkan resource setelah selesai menggunakannya.
Selamat membuat kode!