Vibe Code dengan Gemini di Google AI Studio

1. Ringkasan

Dalam codelab ini, Anda akan membuat aplikasi web "Snake & Beats", yaitu game Snake retro dengan pemutar musik terintegrasi. Anda akan menggunakan Gemini untuk membuat aplikasi React satu file dengan estetika neon, lalu mengontrol versi dan men-deploy-nya ke Cloud Run.

Yang akan Anda lakukan

• Bangun & Perintah: Gunakan mode "Bangun" Google AI Studio untuk membuat game yang berfungsi dari satu perintah.
• Perbaiki dengan Petunjuk Sistem: "Cek Suasana" AI Anda dengan menetapkan persona persisten untuk pengeditan di masa mendatang.
• Simpan ke GitHub: Bootstrapping repositori baru langsung dari AI Studio.
• Deploy ke Cloud Run: Kirim game Anda ke Google Cloud Run dengan sekali klik.

Yang akan Anda pelajari

• Cara menggunakan Mode Build di Google AI Studio untuk membuat prototipe aplikasi secara cepat.
• Cara menggunakan Petunjuk Sistem untuk mempertahankan "nuansa coding" yang konsisten selama iterasi.
• Cara menghubungkan Google AI Studio ke GitHub dan Cloud Run.

Yang Anda butuhkan

• Browser web Chrome
• Akun Gmail
• Project Cloud dengan penagihan diaktifkan
• Kunci Gemini API
• Akun GitHub

2. Sebelum memulai

1. Di Konsol Google Cloud, di halaman pemilih project, pilih atau buat project Google Cloud.
2. Pastikan penagihan diaktifkan untuk project Cloud Anda. Pelajari cara memeriksa apakah penagihan telah diaktifkan pada suatu project .

Untuk Kredit Google Cloud: Jika Anda ingin mendapatkan kredit Google Cloud untuk membantu Anda memulai, gunakan link ini untuk menukarkan kredit yang akan membantu Anda menyelesaikan lab. Anda dapat mengikuti petunjuk di sini untuk menukarkannya.

3. Bangun & Perintah (Inti)

Kita akan mulai dengan membangun seluruh aplikasi sekaligus. Login ke Google AI Studio dan pastikan Anda berada di antarmuka Build.

1. Masukkan Perintah Pembuatan: Tempel perintah mendetail berikut ke dalam kotak chat:

Build a React web app that is a Music Player and a Snake Game combined. Use Tailwind CSS with a dark neon aesthetic. I want to be able to play Snake in the center window while the demo music plays in the background. Add 3 dummy ai generated music. Include controls for the music (play/pause/skip) and a score counter for the game. 

2. Pilih Model Anda: Di panel setelan sebelah kanan, pastikan Gemini 3.0 Pro (atau model pratinjau terbaru) dipilih untuk pembuatan kode tercepat.
3. Run: Tekan Build (atau tekan Cmd + Enter).
4. Pratinjau: Gemini akan membuat kode dan biasanya merender Pratinjau Langsung di sisi kanan (seperti yang ditunjukkan di bawah):

4. Memperbaiki dengan Anotasi, Gambar & Suara

Terkadang, sulit untuk mendeskripsikan perubahan visual dengan kata-kata. Mode Anotasi memungkinkan Anda menggambar di pratinjau aplikasi untuk menyampaikan visi Anda secara instan.

Menggunakan Mode Anotasi

1. Mengaktifkan Mode Anotasi: Di antarmuka AI Studio (periksa panel sisi kiri atau toolbar bawah jendela pratinjau), pilih alat Anotasi atau Perbaiki.

2. Menandai Aplikasi Anda:

• Gambar: Gunakan alat kotak untuk menggambar persegi panjang di sekitar Penghitung Skor.
• Komentar: Ketik perintah yang dilampirkan ke kotak tersebut: "Buat font ini lebih besar, digital, dan berglitch."
• Sketsa: Gunakan alat panah untuk menunjuk tombol Putar/Jeda.
• Komentar: Ketik: "Ubah ini menjadi ikon neon yang bersinar."

3. Ulangi: Klik "Tambahkan ke percakapan", lalu klik Kirim perintah. Gemini akan menafsirkan tanda visual dan perintah teks Anda untuk memperbarui kode.
4. Verifikasi: Tonton update pratinjau secara live. Sekarang, masukan visual Anda akan tercermin dalam kode.

Input Suara (The Spoken Vibe)

Terkadang "suasana" lebih mudah diucapkan daripada ditulis.

1. Tindakan: Klik ikon Mikrofon di kolom input (di samping tombol +).

2. Ucapkan: "Hei, animasi pada ular terlalu lambat. Percepat dan buat ekor meninggalkan jejak bercahaya."
3. Kirim: Gemini mengonversi ucapan Anda menjadi teks dan menerapkan perubahan.

5. Menetapkan Petunjuk Sistem & Membangun Ulang

Berbeda dengan perintah normal, petunjuk sistem tetap ada di seluruh sesi. Ini adalah tempat terbaik untuk menentukan standar coding, konvensi penamaan, atau persona visual tertentu yang tidak boleh berubah.

1. Buka Setelan Lanjutan: Di antarmuka Google AI Studio (Mode Build), cari kotak Petunjuk Sistem. Jika tidak terlihat, klik Setelan (ikon roda gigi) atau Setelan lanjutan di bagian atas atau samping panel chat.

2. Tambahkan Petunjuk "Suasana": Tempel petunjuk berikut ke dalam kotak teks. Ini menentukan persona "Glitch Art" untuk game kita:

You are a Retro-Futurist UI Designer and Senior React Engineer. Visual Style: 'Glitch Art'. Use raw, pixelated fonts, jarring color contrasts (Cyan vs. Magenta), and CSS animations that simulate screen tearing or static noise. Tone: Cryptic and machine-like.

3. Memicu Perubahan: Mengubah Instruksi Sistem tidak secara otomatis menulis ulang kode. Anda harus memberi tahu Gemini untuk menerapkan aturan baru ini.

• Tutup panel setelan.
• Di input Chat/Perintah, ketik: "Bangun kembali UI aplikasi agar benar-benar mengikuti Petunjuk Sistem baru."
• Klik Run / Send.

4. Perhatikan Pembaruan: Gemini akan mengonfirmasi perubahan.

6. Menyimpan ke GitHub

Daripada mendownload file dan berinteraksi dengan command line, kita akan menggunakan integrasi GitHub bawaan untuk mem-bootstrap repositori secara instan.

1. Menemukan Integrasi: Di toolbar atas antarmuka Google AI Studio, cari ikon GitHub yang terletak di antara ikon Download dan Deploy.

2. Hubungkan Akun Anda: Klik ikon. Jika ini pertama kalinya, Anda akan diminta untuk mengizinkan Google AI Studio mengakses akun GitHub Anda.
3. Buat Repositori: Kotak dialog akan muncul dengan judul "Isi informasi di bawah untuk membuat repo Anda".

4. Nama repositori: Masukkan nama, misalnya, "Game Snake buatan AI dengan React".
5. Deskripsi Repositori: Masukkan deskripsi repositori.
6. Visibilitas: Pilih Publik (agar Anda dapat membagikannya dengan mudah) atau Pribadi.
7. Push ke GitHub: Klik tombol "Create Git repo".

Momen Ajaib: AI Studio akan menginisialisasi repo baru, melakukan commit kode yang dihasilkan, dan mengirimkannya ke GitHub di latar belakang. Anda akan mendapatkan link ke repositori baru.

7. Men-deploy ke Cloud Run

Setelah aplikasi siap dan disimpan ke GitHub, mari kita deploy ke Cloud Run.

1. Mulai Deployment: Klik tombol yang ditandai di bawah. Tombol ini terletak di pojok kanan atas halaman AI Studio.

2. Pilih Project: Klik dropdown Pilih Project Cloud, lalu Pilih project Anda dari dropdown.

3. Pemecahan masalah: Jika Anda tidak dapat menemukan project di dropdown, klik Impor project, lalu pilih project Anda dari panel Impor project.
4. Verifikasi Penagihan: Setelah Anda memilih project, project tersebut akan diverifikasi untuk memastikan penagihan diaktifkan. Verifikasi ini akan otomatis berhasil karena kita telah melampirkan akun penagihan ke project di bagian "Sebelum memulai".
5. Deploy: Klik tombol Deploy app, lalu tunggu hingga aplikasi di-deploy di Cloud Run. Catatan: Nama layanan Cloud Run akan dibuat secara otomatis.
6. Deployment akan selesai dalam beberapa menit, dan Anda akan mendapatkan URL Aplikasi. Dengan mengklik URL, Anda dapat melihat aplikasi web yang di-deploy secara live di internet.

8. Pembersihan

Agar tidak menimbulkan biaya pada akun Google Cloud Anda untuk resource yang digunakan dalam posting ini, ikuti langkah-langkah berikut:

• Di konsol Google Cloud, buka halaman Manage resources.
• Dalam daftar project, pilih project yang ingin Anda hapus, lalu klik Hapus.
• Pada dialog, ketik project ID, lalu klik Shut down untuk menghapus project.

9. Selamat

Selamat! Anda telah berhasil melakukan vibe coding pada aplikasi di AI Studio, dan men-deploy-nya ke Cloud Run.

AI Studio adalah platform pilihan yang ideal untuk mengembangkan dan menguji aplikasi, sehingga pengguna dapat langsung memvisualisasikan desain mereka saat digunakan.

Integrasi AI Studio yang lancar dengan Cloud Run memungkinkan pengguna men-deploy aplikasi mereka dengan mudah langsung ke Google Cloud. Dengan memanfaatkan Cloud Run, Anda akan mendapatkan semua manfaat inheren dari lingkungan serverless, yang mengabstraksi kompleksitas dan overhead pengelolaan infrastruktur.