1. Pengantar
Ringkasan
Dari mana pembangunan dengan AI dimulai saat ini? Bagi sebagian besar dari kita, semuanya dimulai dengan pertanyaan atau prototipe sederhana. Google AI Studio menawarkan Build Mode yang canggih (sering disebut sebagai "vibe coding") yang memungkinkan Anda mendesain, menguji, dan membangun aplikasi web full-stack menggunakan pembuatan kode yang didorong oleh model Gemini.
Dalam codelab ini, Anda akan membangun aplikasi daftar tugas kolaboratif dengan basis data Firestore untuk penyimpanan data permanen dan Firebase Authentication untuk login pengguna. Agen AI Studio akan mengkonfigurasi semua layanan backend dan menulis kode interaksi frontend dan basis data. Setelah aplikasi disempurnakan, Anda dapat langsung menyebarkannya ke Cloud Run hanya dengan sekali klik.
Yang akan Anda lakukan
- Minta Google AI Studio untuk membuat prototipe aplikasi web daftar tugas kolaboratif.
- Konfigurasi dan aktifkan integrasi Firebase untuk menyediakan basis data Firestore dan menyiapkan otentikasi Google Sign-In.
- Uji aplikasi di lingkungan pratinjau interaktif (sandbox).
- Sebarkan aplikasi ke Cloud Run langsung dari antarmuka pengguna Google AI Studio.
Yang akan Anda pelajari
- Cara menggunakan mode Build di Google AI Studio untuk membuat prototipe layanan full-stack dengan cepat menggunakan bahasa alami.
- Bagaimana Google AI Studio secara otomatis mengkonfigurasi integrasi Firebase Firestore dan Otentikasi.
- Cara menerapkan aplikasi AI Studio Anda sebagai kontainer tanpa server di Cloud Run.
- Cara memeriksa catatan basis data dan status keamanan di dalam Firebase Console.
Lebih suka panduan video?
2. Penyiapan Project
Sebelum meluncurkan AI Studio, verifikasi status akun dan persyaratan Anda.
Informasi Akun Google & Tingkat Keahlian
- Jika Anda belum memiliki Akun Google, buat Akun Google.
- Tip: Gunakan akun Google pribadi untuk lab ini jika memungkinkan. Akun grup, perusahaan, atau sekolah dapat memberlakukan kebijakan Workspace yang menonaktifkan fitur eksperimental atau integrasi cloud.
- Tinjau detail penagihan untuk penyebaran:
- Google Cloud Starter Tier: Memungkinkan penerbitan hingga dua aplikasi full-stack di wilayah tertentu tanpa biaya, tanpa perlu membuat akun penagihan Google Cloud penuh.
- Penyebaran Standar: Terhubung ke proyek Google Cloud berbayar yang sudah ada dan memperluas batas penyimpanan, sumber daya CPU, dan API.
3. Buat Aplikasi Daftar Tugas di Mode Pembuatan AI Studio
Mari kita buat kerangka aplikasi dan minta asisten kode AI untuk membangun lapisan keamanan dan persistensi.
- Navigasi kePanel Aplikasi Google AI Studio lalu klikAplikasi Baru.
- Di kotak perintah obrolan, masukkan deskripsi untuk aplikasi tugas Anda:
Build a collaborative to-do list application using Firebase as a backend. Users must be able to securely sign in using Google Sign-In, view their personal tasks, add new task items, toggle status as completed, and delete tasks. The database must isolate tasks so users can only view and modify their own records. - Klik Build untuk memulai proses pembuatan aplikasi.
Ketika agen AI Studio mengenali kebutuhan akan penyimpanan basis data dan login pengguna yang aman, ia akan memicu alur konfigurasi Firebase otomatis.
- Setelah sekitar satu menit, kartu integrasi untuk Aktifkan Firebase muncul di ruang kerja.
- Klik tombol Aktifkan Firebase untuk mengkonfirmasi dan menerima persyaratan layanan.
- Agen akan menjalankan pengaturan latar belakang. Di balik layar:
- Instans basis data Firestore telah disiapkan.
- Firebase Authentication diaktifkan dengan Google Sign-in yang diaktifkan.
- Konfigurasi akun layanan dibuat (misalnya, membuat
src/lib/firebase.tsyang berisi kredensial API). - Sebuah
firestore.rulesyang berisi batasan keamanan default (aturan isolasi pengguna) ditambahkan.
4. Uji dan Lakukan Iterasi
Sebelum meluncurkan layanan secara langsung, jalankan pemeriksaan validasi di pratinjau interaktif.
- Buka panel pratinjau di dalam Google AI Studio.
- Klik tombol Login untuk memicu autentikasi Masuk Google sandbox.
- Catatan tentang memperbaiki kesalahan: Selama pembuatan atau pengujian, Anda mungkin sesekali menghadapi masalah runtime, kesalahan kompilasi, atau kegagalan izin Firestore karena ketidaksesuaian aturan keamanan. Jika hal ini terjadi, AI Studio akan menampilkan tombol Perbaiki dalam chat, sehingga Anda dapat meminta agen untuk mendiagnosis dan memperbaiki masalah secara otomatis.
- Setelah masuk, tambahkan beberapa tugas (misalnya, "Tinjau dokumen Cloud Run", "Selesaikan Codelab").
- Alihkan beberapa tugas sebagai selesai dan hapus satu tugas untuk memastikan pembaruan status database dan pengendali sisi klien berfungsi dengan benar.
- Jika Anda ingin mengubah gaya atau perilaku, beri tahu agen melalui jendela obrolan. Misalnya:
"Could you style the interface using Tailwind CSS, and add a dark mode toggle button?""Show a count of remaining incomplete tasks at the footer of the task list."
- Tunggu hingga agen memperbarui kode sumber dan periksa browser pratinjau untuk melihat pembaruannya.
5. Men-deploy ke Cloud Run
Setelah prototipe Anda berfungsi sepenuhnya, sebarkan sebagai layanan publik di Cloud Run.
- Di pojok kanan atas Google AI Studio, klik tombol Terbitkan untuk memulai wizard penyebaran.
- Klik Mulai untuk mengkonfigurasi proyek Google Cloud Anda.
- Verifikasi bahwa target Google Cloud Project pada menu tarik-turun sesuai dengan proyek yang Anda kaitkan dengan ruang kerja Anda.
- AI Studio akan secara otomatis menghasilkan pengidentifikasi layanan unik untuk instance Cloud Run.
- Secara opsional, Anda dapat menentukan awalan URL
.ai.studiokhusus (misalnya,your-portfolio-name.ai.studio) sebagai bagian dari konfigurasi penyebaran Anda.
- Jika ini adalah kali pertama Anda melakukan deployment dan Anda menggunakan parameter standar Google Cloud, Anda mungkin akan diminta untuk menentukan jenis organisasi dan memberikan detail penagihan.
- Klik Terbitkan Aplikasi.
- Proses pembuatan kontainer, pendaftaran kontainer, dan penyebaran layanan berlangsung di latar belakang. Proses ini biasanya selesai dalam 2–4 menit.
- Setelah penyebaran selesai, salin file yang dihasilkan.URL Aplikasi dan kunjungi tautan aplikasi langsung di tab browser.
- Uji aplikasi web langsung di browser Anda!
6. Memeriksa di Firebase Console
Mari kita lihat lebih detail bagaimana skema data dan pengguna dilacak.
- Buka Konsol Firebase.
- Pilih proyek Anda (yang memiliki label
AI Studioatau ID proyek yang Anda ikat secara manual). - Di panel navigasi sebelah kiri, pilih Build > Firestore Database:
- Lihat koleksi basis data dan dokumen yang dibuat oleh aplikasi Anda.
- Pastikan setiap dokumen memiliki ID pemilik yang sesuai dengan kredensial otentikasi pengguna aktif.
- Pilih tab Keamanan di panel Firestore untuk meninjau arahan keamanan yang dibuat secara otomatis yang membatasi izin baca dan tulis hanya kepada pemilik dokumen yang terverifikasi.
- Buka Keamanan > Otentikasi untuk melihat daftar kredensial pengguna aktif yang diisi selama pengujian login Anda.
7. Pembersihan
Untuk menghindari biaya tagihan yang tidak terduga atau membersihkan sumber daya ruang kerja Anda:
- Di Google AI Studio, buka halaman Aplikasi.
- Temukan aplikasi Anda dalam petak atau daftar.
- Klik ikon sampah untuk menghapus status aplikasi dan membatalkan publikasi layanan dari Cloud Run.
- Jika Anda men-deploy menggunakan project standar dan ingin menonaktifkan semua resource sepenuhnya, buka Setelan Project Konsol Google Cloud dan hapus project yang mendasarinya.
8. Kesimpulan
Selamat! Anda telah mendesain, mengembangkan, dan men-deploy aplikasi web full stack langsung dari Google AI Studio.
Buka link ini untuk mengklaim badge Perjalanan Pembuat Selesai.
Untuk melanjutkan perjalanan Anda, buka goo.gle/builders untuk mengikuti lab berikutnya.