Luncurkan aplikasi web rencana Anda dengan AI

1. Pengantar

Ringkasan

Di mana titik awal membangun dengan AI saat ini? Bagi sebagian besar dari kita, semuanya dimulai dengan kueri atau prototipe sederhana. Google AI Studio menawarkan Mode Build yang canggih (sering disebut "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 membuat 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 sekali klik.

Yang akan Anda lakukan

  • Minta Google AI Studio membuat prototipe aplikasi web daftar tugas kolaboratif.
  • Konfigurasi dan aktifkan integrasi Firebase untuk menyediakan database Firestore dan menyiapkan autentikasi Login dengan Google.
  • Uji aplikasi di sandbox pratinjau interaktif.
  • 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 status keamanan dan catatan database 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: Jika memungkinkan, gunakan Akun Google pribadi untuk lab ini. Akun grup, perusahaan, atau sekolah dapat menerapkan kebijakan Workspace yang menonaktifkan fitur eksperimental atau integrasi cloud.
  2. Tinjau detail penagihan untuk deployment:
    • Paket Starter Google Cloud: Memungkinkan penerbitan 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 sudah 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 minta asisten kode AI untuk membangun lapisan keamanan dan persistensi.

  1. Buka panel Aplikasi Google AI Studio, lalu 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 akan memicu alur konfigurasi Firebase otomatis.

  1. Setelah sekitar satu menit, kartu integrasi untuk Aktifkan 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 telah ditetapkan (misalnya, membuat src/lib/firebase.ts yang berisi kredensial API).
    • firestore.rules yang berisi batas keamanan default (aturan isolasi pengguna) ditambahkan.

4. Uji dan Lakukan Iterasi

Sebelum meluncurkan layanan secara live, 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 terkadang menghadapi masalah runtime, error kompilasi, atau kegagalan izin Firestore karena ketidakselarasan 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.
    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 pembaruan status database dan pengendali sisi klien berfungsi dengan benar.
  5. Jika Anda ingin mengubah gaya atau perilaku, beri petunjuk kepada agen melalui jendela chat. Contoh:
    • "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 hingga agen memperbarui codebase dan periksa browser pratinjau untuk melihat pembaruan.

5. Men-deploy ke Cloud Run

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

  1. Di pojok kanan atas Google AI Studio, klik tombol Publish 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 Anda.
    • 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 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 waktu 2–4 menit.
  6. Setelah deployment selesai, salin URL Aplikasi yang dihasilkan dan buka link aplikasi aktif di tab browser.
  7. Uji aplikasi web aktif di browser Anda.

6. Memeriksa di Firebase Console

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

  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:
    • Melihat 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 direktif keamanan yang dibuat secara otomatis yang membatasi izin baca dan tulis untuk pemilik dokumen 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 dalam 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 kolaboratif langsung dari Google AI Studio.

Untuk mengumpulkan badge setelah menyelesaikan lab builder dan menemukan lab lain untuk melanjutkan perjalanan Anda, buka goo.gle/builders.

Pelajari Lebih Lanjut