Luncurkan aplikasi web rencana Anda dengan AI

1. Pengantar

Ringkasan

Di mana proses pengembangan dengan AI dimulai saat ini? Bagi sebagian besar dari kita, proses ini dimulai dengan kueri atau prototipe sederhana. Google AI Studio menawarkan Mode Build yang canggih (sering disebut sebagai "vibe coding") yang memungkinkan Anda mendesain, menguji, dan membangun aplikasi web full-stack menggunakan pembuatan kode yang didukung oleh model Gemini.

Dalam codelab ini, Anda akan membangun aplikasi daftar tugas kolaboratif dengan database Firestore untuk penyimpanan persisten dan Firebase Authentication untuk login pengguna. Agen AI Studio akan mengonfigurasi semua layanan backend dan menulis kode interaksi frontend dan database. Setelah aplikasi disempurnakan, Anda akan men-deploy-nya langsung ke Cloud Run dengan satu klik.

Yang akan Anda lakukan

  • Memberikan perintah kepada Google AI Studio untuk membuat prototipe aplikasi web daftar tugas kolaboratif.
  • Mengonfigurasi dan mengaktifkan integrasi Firebase untuk menyediakan database Firestore dan menyiapkan autentikasi Login dengan Google.
  • Menguji aplikasi di sandbox pratinjau interaktif.
  • Men-deploy aplikasi ke Cloud Run langsung dari UI Google AI Studio.

Yang akan Anda pelajari

  • Cara menggunakan mode Build Google AI Studio untuk membuat prototipe layanan full-stack dengan cepat menggunakan bahasa alami.
  • Cara Google AI Studio mengonfigurasi integrasi Firebase Firestore dan Authentication secara otomatis.
  • Cara men-deploy aplikasi AI Studio sebagai container serverless di Cloud Run.
  • Cara memeriksa catatan database dan status keamanan di dalam Firebase Console.

2. Penyiapan Project

Sebelum meluncurkan AI Studio, verifikasi status akun dan prasyarat Anda.

Informasi Akun Google &Tingkat

  1. Jika Anda belum memiliki Akun Google, buat Akun Google.
    • Tips: Gunakan Akun Google pribadi untuk lab ini jika memungkinkan. Akun grup, perusahaan, atau sekolah dapat menerapkan kebijakan Workspace yang menonaktifkan fitur eksperimental atau integrasi cloud.
  2. Tinjau detail penagihan untuk deployment:
    • Google Cloud Starter Tier: Memungkinkan Anda memublikasikan hingga dua aplikasi full-stack di wilayah tertentu tanpa biaya, tanpa membuat akun penagihan Google Cloud penuh.
    • Deployment Standar: Terhubung ke project Google Cloud berbayar yang ada dan memperluas batas penyimpanan, resource CPU, dan API.

3. Membuat Aplikasi Daftar Tugas di Mode Build AI Studio

Mari kita buat shell aplikasi dan berikan perintah kepada asisten kode AI untuk membangun lapisan keamanan dan persistensi.

  1. Buka panel Aplikasi Google AI Studio dan klik Aplikasi Baru.
  2. Di kotak perintah chat, masukkan deskripsi untuk aplikasi daftar 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.
  3. Klik Build untuk memulai proses pembuatan aplikasi.

Saat agen AI Studio mengenali kebutuhan penyimpanan database dan login pengguna yang aman, agen tersebut akan memicu alur konfigurasi Firebase otomatis.

  1. Setelah sekitar satu menit, kartu integrasi untuk Mengaktifkan Firebase akan muncul di ruang kerja.
  2. Klik tombol Aktifkan Firebase untuk mengonfirmasi dan menyetujui persyaratan layanan.
  3. Agen akan menjalankan penyiapan latar belakang. Di balik layar:
    • Instance Database Firestore disediakan.
    • Firebase Authentication diaktifkan dengan Login dengan Google diaktifkan.
    • Konfigurasi akun layanan dibuat (misalnya, membuat src/lib/firebase.ts yang berisi kredensial API).
    • firestore.rules yang berisi batas keamanan default (aturan isolasi pengguna) ditambahkan.

4. Menguji dan Melakukan Iterasi

Sebelum meluncurkan layanan secara langsung, jalankan pemeriksaan validasi di pratinjau interaktif.

  1. Buka panel pratinjau di dalam Google AI Studio.
  2. Klik tombol Login untuk memicu autentikasi Login dengan Google sandbox.
    • Catatan tentang memperbaiki error: Selama pembuatan atau pengujian, Anda mungkin sesekali menghadapi masalah runtime, error kompilasi, atau kegagalan izin Firestore karena ketidakselarasan aturan keamanan. Jika hal ini terjadi, AI Studio akan menampilkan tombol Perbaiki di chat, yang memungkinkan Anda meminta agen untuk mendiagnosis dan memperbaiki masalah secara otomatis.
    Lokasi Tombol Perbaikan Google AI Studio
  3. Setelah login, tambahkan beberapa tugas (misalnya, "Tinjau dokumen Cloud Run", "Selesaikan Codelab").
  4. Alihkan beberapa tugas sebagai selesai dan hapus satu tugas untuk memastikan pengendali sisi klien dan status database diperbarui dengan benar.
  5. Jika Anda ingin mengubah gaya atau perilaku, berikan petunjuk kepada agen melalui jendela chat. 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."
  6. Tunggu agen memperbarui codebase dan periksa browser pratinjau untuk melihat pembaruan.

5. Men-deploy ke Cloud Run

Setelah prototipe berfungsi penuh, deploy sebagai layanan publik di Cloud Run.

  1. Di pojok kanan atas Google AI Studio, klik tombol Publikasikan untuk memulai wizard deployment.Lokasi Tombol Publikasikan Google AI Studio
  2. Klik Mulai untuk mengonfigurasi project Google Cloud Anda.
    • Pastikan drop-down Project Google Cloud target cocok dengan project yang Anda kaitkan dengan ruang kerja.
    • AI Studio akan otomatis membuat ID layanan unik untuk instance Cloud Run.
  3. Jika ini adalah pertama kalinya Anda men-deploy dan Anda menggunakan parameter Google Cloud standar, Anda mungkin akan diminta untuk menentukan jenis organisasi dan memberikan detail penagihan.
  4. Klik Publikasikan Aplikasi.
  5. Langkah-langkah pembuatan container, pendaftaran container, dan deployment layanan terjadi di latar belakang. Proses ini biasanya selesai dalam 2–4 menit.
  6. Setelah deployment selesai, salin URL Aplikasi yang dibuat dan buka link aplikasi langsung di tab browser.
  7. Uji aplikasi web langsung di browser Anda.

6. Memeriksa di Firebase Console

Lihat di balik layar untuk melihat cara skema data dan pengguna dilacak.

  1. Buka Firebase Console.
  2. Pilih project Anda (yang memiliki label AI Studio atau project ID yang terikat secara manual).
  3. Di panel navigasi sebelah kiri, pilih Build > Firestore Database:
    • Lihat koleksi dan dokumen database yang dibuat oleh aplikasi Anda.
    • Pastikan setiap dokumen memiliki ID pemilik yang cocok dengan kredensial autentikasi pengguna aktif.
  4. Pilih tab Keamanan di panel Firestore untuk meninjau perintah keamanan yang dibuat secara otomatis yang membatasi izin baca dan tulis ke pemilik dokumen yang terverifikasi.
  5. Buka Keamanan > Autentikasi untuk melihat daftar kredensial pengguna aktif yang diisi selama pengujian login Anda.

7. Pembersihan

Untuk menghindari tagihan yang tidak terduga atau membersihkan resource ruang kerja Anda:

  1. Di Google AI Studio, buka halaman Aplikasi.
  2. Temukan aplikasi Anda di petak atau daftar.
  3. Klik ikon sampah untuk menghapus status aplikasi dan membatalkan publikasi layanan dari Cloud Run.
  4. 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 Builder Selesai.

Untuk melanjutkan perjalanan Anda, buka goo.gle/builders untuk lab berikutnya.

Pelajari Lebih Lanjut