1. Ringkasan
Di mana pembangunan dengan AI dimulai saat ini? Bagi sebagian besar dari kita, pembangunan dimulai dengan pertanyaan sederhana: Dapatkah saya membuat prototipe solusi dengan cepat untuk masalah yang telah saya pikirkan? Di sinilah Google AI Studio berperan. Platform ini digunakan untuk pembuatan prototipe yang cepat. Dalam codelab ini, Anda akan membuat aplikasi web sederhana menggunakan vibe coding dan men-deploy-nya ke Cloud Run.
Prasyarat
- Pemahaman dasar tentang aplikasi web.
Yang akan Anda pelajari
Dalam codelab ini, Anda akan mempelajari cara:
- Membuat aplikasi web sederhana di Google AI Studio menggunakan vibe coding.
- Menguji apakah aplikasi berfungsi seperti yang diharapkan.
- Men-deploy aplikasi ke Cloud Run.
Persyaratan
2. Sebelum memulai
- Jika belum memiliki Akun Google, Anda harus membuat Akun Google.
- Gunakan akun pribadi, bukan akun kantor atau sekolah. Akun kantor dan sekolah mungkin memiliki batasan yang mencegah Anda mengaktifkan API yang diperlukan untuk lab ini.
- Buka Google AI Studio, dan tinjau persyaratan layanan.
- Perhatikan bahwa jika menggunakan Paket Pemula Google Cloud, Anda dapat men-deploy hingga dua aplikasi full-stack di satu region Cloud Run tanpa menyiapkan lingkungan Google Cloud atau akun penagihan lengkap.

3. Prototipe
Di Google AI Studio, luangkan waktu untuk meninjau panel Setelan di pojok kanan atas. Di sini, Anda dapat memilih model dan framework default, serta memberikan petunjuk sistem:

Setelah puas dengan setelan, jelaskan aplikasi yang ingin Anda buat dan klik Build:
Create a formal looking frontend application that has two buttons: "Snowflakes" and "Balloons".
If the user clicks on the "Snowflakes" button, snowflakes of medium size should start falling on the screen from top to bottom for 5 seconds.
If the user clicks on the "Balloons" button, balloons of medium size should start floating from the bottom of the screen and float to the top for 5 seconds.

Berdasarkan deskripsi ini, AI Studio akan membuat aplikasi web. Proses pembuatan membutuhkan waktu 2-3 menit, dan Anda mungkin diminta untuk memilih opsi desain selama proses tersebut:

Jika mengalami masalah dengan aplikasi, Anda dapat memasukkan perintah tambahan untuk menyempurnakan perilaku aplikasi (misalnya, Increase the size of the snowflakes to twice their current size).
Gambar berikut menampilkan snapshot aplikasi yang dibuat:

4. Men-deploy ke Cloud Run
Setelah aplikasi siap, deploy ke Cloud Run:
- Di pojok kanan atas halaman, klik Publish.

- Tindakan ini akan membuka dialog Deploy app on Google Cloud.

- Klik dropdown Select a Cloud Project untuk memilih project Anda, atau lanjutkan dengan Default Gemini Project.
- Pilih project dari dropdown. Jika tidak dapat menemukan project Anda, klik Import project, lalu pilih project dari panel Import project.
- Jika diminta, pilih Individual sebagai jenis organisasi Anda dan masukkan alamat jalan Anda:

- Klik Publish your app dan tunggu hingga aplikasi di-deploy ke Cloud Run. Perhatikan bahwa AI Studio otomatis membuat nama layanan Cloud Run.

- Deployment memerlukan waktu beberapa menit. Setelah selesai, klik URL aplikasi untuk membuka aplikasi web yang di-deploy.

5. Pembersihan
Agar tidak menimbulkan tagihan ke akun Google Cloud Anda untuk resource yang digunakan dalam codelab ini, klik Unpublish app:

6. Selamat
Selamat! Anda telah berhasil melakukan vibe coding aplikasi web di Google AI Studio dan men-deploy-nya ke Cloud Run.
Integrasi AI Studio dengan Cloud Run memudahkan deployment aplikasi langsung ke Google Cloud. Dengan menggunakan Cloud Run, Anda mendapatkan semua manfaat lingkungan serverless, yang menyederhanakan kompleksitas pengelolaan infrastruktur.
Langkah Berikutnya
Selamat, Anda telah menyelesaikan lab ini. Setelah framework aplikasi Anda siap, pelajari panduan resmi ini untuk memperluas kemampuan project Anda:
Dokumentasi &Panduan yang Direkomendasikan
- Strategi Desain Perintah: Pelajari prinsip inti dalam menyusun perintah, menggunakan petunjuk sistem, menerapkan contoh beberapa kali, dan mengontrol format output.
- Pemanggilan Fungsi dengan Gemini API: Hubungkan deployment Anda ke alat dan API eksternal, sehingga model Gemini dapat menampilkan data terstruktur dan memicu logika aplikasi dunia nyata.
- Pembuatan Text-to-Speech: Pelajari cara membuat audio yang diucapkan menggunakan Gemini API, mengontrol gaya ucapan, dan menguji suara menggunakan Voice Library di Google AI Studio.