Membangun Aplikasi Web Pertama Anda yang Didukung Database dengan Google AI Studio dan Cloud SQL

1. Sebelum memulai

Jika Anda pernah mencoba mengatur lari akhir pekan dengan teman atau tetangga, Anda akan tahu betapa sulitnya: lokasi pertemuan hilang dalam percakapan grup yang tak ada habisnya, orang-orang terus-menerus bertanya berapa kecepatan lari setiap orang, dan pendatang baru tidak pernah yakin siapa yang akan datang.

Dalam codelab ini, Anda akan memecahkan masalah sehari-hari ini dengan membangun Running Club—aplikasi web yang ramah tempat pelari lokal dapat menjelajahi rute favorit, menjadwalkan pertemuan akhir pekan, mengonfirmasi kehadiran dengan sekali klik, dan melakukan chat dengan sesama pelari.

Mengapa aplikasi ini memerlukan database?

Aplikasi komunitas memerlukan memori yang andal—yang dikenal sebagai database. Saat pelari menambahkan rute indah baru, mengonfirmasi kehadiran untuk lari pagi pada hari Sabtu, atau memposting komentar yang menanyakan tempat parkir, informasi tersebut tidak boleh hilang saat mereka menutup ponsel atau mematikan komputer. Database menyimpan semua rute, daftar peserta, dan pesan anggota dengan aman dan teratur sehingga semua orang di klub melihat informasi terbaru setiap kali mereka membuka aplikasi.

Anda akan membangun aplikasi ini menggunakan mode Build Google AI Studio. Anda tidak perlu menulis kode yang rumit atau menyiapkan infrastruktur teknis sendiri—cukup deskripsikan apa yang Anda inginkan dalam bahasa sederhana. Google AI Studio membuat aplikasi, menghubungkan database Cloud SQL untuk PostgreSQL yang sebenarnya untuk mengingat data Anda, dan memublikasikan aplikasi secara langsung di Cloud Run sehingga komunitas Anda dapat langsung menggunakannya.

Yang akan Anda build

Anda akan membangun dan meluncurkan Running Club, aplikasi web komunitas yang mencakup:

• Login dengan Google: Login cepat dan aman menggunakan Akun Google yang sudah ada.
• Profil pelari: Profil anggota yang menampilkan preferensi lari dan kecepatan target.
• Koleksi rute: Kumpulan rute favorit di sekitar lingkungan dengan jarak, tingkat kesulitan tanjakan, dan titik pertemuan.
• Jadwal lari mendatang: Papan acara untuk mengatur lari kelompok mendatang dan menautkannya ke rute.
• RSVP sederhana: Tombol sekali klik bagi anggota untuk mengatakan "Saya akan datang" dan melihat siapa saja yang akan datang.
• Menjalankan diskusi: Ruang komentar di setiap proses untuk mengoordinasikan detail, mengajukan pertanyaan, dan membagikan info terbaru.

Yang akan Anda pelajari

• Cara membuat aplikasi web yang berfungsi di Google AI Studio menggunakan satu perintah dalam bahasa yang sederhana.
• Cara Google AI Studio menyiapkan Login dengan Google secara otomatis.
• Cara Google AI Studio membuat dan menghubungkan database Cloud SQL untuk PostgreSQL yang sebenarnya untuk mengingat data Anda.
• Cara menambahkan fitur baru dan memperluas database Anda hanya dengan memulai percakapan dengan AI.
• Cara memverifikasi bahwa data klub Anda tetap tersimpan dengan aman di setiap kunjungan.
• Cara memublikasikan aplikasi Anda secara live ke internet dengan Cloud Run.
• Cara melihat aplikasi dan database aktif Anda di Konsol Google Cloud.

Yang Anda butuhkan

• Browser web modern seperti Google Chrome.
• Akun Google standar untuk login ke Google AI Studio.

Kelayakan dan batas Edisi Starter Cloud SQL

Sorotan Paket Pemula: Anda dapat membuat dan men-deploy hingga dua aplikasi full-stack dengan Cloud SQL tanpa biaya tanpa mengonfigurasi akun penagihan.

Google AI Studio menawarkan Google Cloud Starter Tier untuk membantu developer bereksperimen dengan aplikasi generatif dan database terkelola:

• Kelayakan:
  • Tersedia untuk individu yang menggunakan Akun Google standar.
  • Akun yang tidak memenuhi syarat mencakup pengguna dengan akun penagihan Google Cloud yang ada atau sebelumnya, serta akun yang terkait dengan Google Workspace, Google Workspace for Education, atau Google untuk Nonprofit.
  • Jika akun Anda tidak memenuhi syarat untuk Tingkat Pemula, Anda tetap dapat menyelesaikan codelab ini dengan memilih project Google Cloud yang ada dengan penagihan diaktifkan di AI Studio.
• Spesifikasi resource:
  • Menyediakan instance Cloud SQL untuk PostgreSQL Developer Edition yang menjalankan PostgreSQL 18.
  • Mencakup 0,5 vCPU, RAM 2 GB, dan penyimpanan 1 GB. Jumlah tersebut sudah cukup untuk menjalankan ratusan kunjungan harian selama beberapa bulan atau lebih, bergantung pada aktivitas.
  • Mendukung skala ke nol, yang otomatis menjeda komputasi saat tidak ada koneksi database aktif untuk menghemat kuota.
• Quota:
  • Mencakup kuota bulanan gratis sebesar 50 unit komputasi dan penyimpanan 10 GB.

2. Membuka Google AI Studio dan Memulai Aplikasi Baru

Untuk memulai, buka Google AI Studio di browser Anda. Ini adalah ruang kerja kreasi tempat Anda dapat membuat dan menguji aplikasi hanya dengan mendeskripsikan apa yang Anda butuhkan.

Langkah 1: Login ke Google AI Studio

1. Buka browser web Anda (seperti Google Chrome), lalu buka aistudio.google.com.
2. Klik Mulai dan login dengan Akun Google standar Anda (seperti akun Gmail Anda).

3. Jika Anda diminta untuk menyetujui persyaratan layanan pada kunjungan pertama, tinjau dan setujui persyaratan tersebut untuk melanjutkan.

Langkah 2: Mulai aplikasi baru

1. Di panel tengah bawah, klik Mulai membangun (atau klik +Aplikasi Baru di panel kanan).

3. Mulai dengan Perintah Sederhana dan Firebase Authentication

Anda tidak memerlukan diagram arsitektur yang rumit untuk memulai. Anda dapat meluncurkan aplikasi awal, mengonfigurasi Login dengan Google, dan menghubungkan database dengan satu kalimat.

Masukkan perintah awal

Di kotak perintah mode Build AI Studio, masukkan perintah berikut, lalu tekan Enter:

Build a running club web app with a Cloud SQL database
where members can post upcoming runs.

Link ini akan otomatis mengisi kotak perintah untuk Anda.

Memahami ruang kerja Anda

Setelah Anda mengirimkan perintah, Google AI Studio akan membuka ruang kerja aplikasi lengkap. Luangkan waktu sejenak untuk melihat tiga area utama di layar Anda:

• Kotak Chat / Perintah (Bawah): Di sinilah Anda melanjutkan percakapan dengan AI dalam bahasa yang sederhana untuk menambahkan fitur, menyesuaikan desain, atau mengajukan pertanyaan.
• Area File & Kode (Sisi kiri): Area ini menampilkan file yang dibuat AI di balik layar. Anda tidak perlu menulis atau mengedit kode sendiri, tetapi panel ini memungkinkan Anda menonton AI membuat bagian-bagian aplikasi Anda.
• Jendela Pratinjau Langsung (Sisi kanan): Jendela ini menampilkan aplikasi yang sedang Anda kerjakan secara real time. Anda dapat mengklik tombol, mengetik di kolom teks, dan menguji aplikasi langsung di jendela ini segera setelah dibuat.
• Editor kode (Sisi kanan): Bagian ini menampilkan kode sebenarnya yang dibuat AI. Anda dapat mengeditnya jika ingin, tetapi tidak wajib.
• Deployment dan berbagi (Kanan atas): Di sini Anda dapat men-deploy aplikasi ke internet dan membagikannya kepada orang lain.

Tindakan yang dilakukan Google AI Studio secara otomatis

Saat AI memproses permintaan Anda, Anda dapat melihatnya membangun aplikasi Anda langkah demi langkah:

1. Menyiapkan Login dengan Google: AI secara otomatis mengintegrasikan Login dengan Google sehingga pelari Anda dapat login dengan aman menggunakan Akun Google mereka—tidak perlu mengelola sandi pengguna atau setelan keamanan.
2. Menghubungkan database yang sebenarnya: AI menyiapkan database Cloud SQL terkelola untuk menyimpan data komunitas Anda. Jika diminta, klik untuk mengaktifkan database untuk project Anda.

3. Mengatur tabel data Anda (schema.ts): Anggap skema database sebagai kumpulan spreadsheet yang teratur. AI akan otomatis membuat struktur penyimpanan untuk aplikasi Anda:
   • Tabel users: Menyimpan profil anggota, nama, avatar, dan kecepatan lari.
   • runsTabel : Menyimpan acara terjadwal dengan judul, jarak, kecepatan target, lokasi, dan tanggalnya.
   • comments Tabel: Menyimpan pesan dan pertanyaan yang ditinggalkan oleh pelari di setiap lari.
   Semua perubahan tersebut dilakukan secara otomatis di area kode, dan Anda dapat melihat cara kategori ini disusun jika beralih dari Pratinjau ke tab Kode. Namun, Anda tidak perlu menulis kode sendiri karena semuanya dilakukan secara otomatis.(Catatan: Anda tidak perlu menulis atau mengedit kode ini secara manual—AI akan memperbaruinya untuk Anda setiap kali Anda meminta fitur baru.)
4. Membangun antarmuka visual: AI membuat halaman web yang Anda lihat di layar, termasuk header, daftar lari mendatang, formulir pembuatan acara, dan bagian komentar.

Memverifikasi autentikasi dan menjalankan postingan

Setelah pembuatan selesai, uji aplikasi baru Anda di panel Preview:

1. Di jendela pratinjau, klik Login Anggota (atau klik tombol Posting Lomba Mendatang, yang akan memicu autentikasi).
2. Lakukan autentikasi dengan akun Google Anda menggunakan dialog Firebase Auth.
3. Setelah login, nama dan avatar profil Google Anda akan muncul di menu navigasi, dan preferensi kecepatan Anda akan dikelola secara otomatis.
4. Di formulir "Post Upcoming Run", masukkan judul (seperti Morning 5K Shakeout).
5. Pilih tanggal dan waktu, lalu masukkan lokasi rapat (seperti Central Park West Entrance).
6. Klik PublishRun.
7. Pastikan lari baru segera muncul di feed lari mendatang, menampilkan nama profil terautentikasi dan badge kecepatan Anda sebagai penyelenggara.
8. Posting pesan singkat di bagian diskusi rute (seperti Bringing extra water bottles!) dan verifikasi bahwa pesan tersebut muncul di rangkaian komentar.

4. Membangun Library Rute

Klub lari sering menggunakan kembali rute lokal yang populer. Daripada mengetik informasi rute yang sama berulang kali, Anda dapat mengizinkan anggota menyimpan rute favorit dalam katalog dan melampirkannya setiap kali mereka menjadwalkan lari.

Minta AI untuk menambahkan Route Library

Di kotak perintah chat, ketik permintaan berikut, lalu tekan Enter:

Add a route library where members can save favorite
running routes with atitle, distance in km, difficulty,
and start location. When scheduling a run, allow the
organizer to select a route from this library.

Cara AI menautkan rute ke lari di balik layar

Agar hal ini berfungsi, AI akan otomatis membuat tabel penyimpanan baru untuk rute dan menghubungkannya langsung ke tabel runs. Koneksi ini memungkinkan aplikasi Anda otomatis menarik detail jarak dan lokasi setiap kali penyelenggara memilih rute.

(Sekali lagi, Anda tidak perlu menyentuh kode ini—AI akan memperbarui struktur database untuk Anda!)

Menguji Pustaka Rute baru Anda di Pratinjau

Setelah AI selesai mengupdate aplikasi Anda, coba fitur rute baru di jendela pratinjau langsung:

1. Di navigasi aplikasi, klik tab Route Library. Jika tidak ada tab tersebut, periksa bagian bawah pratinjau langsung - Anda mungkin diminta untuk menekan tombol Simpan untuk memuat ulang pratinjau. Atau, jika tidak membantu, coba berinteraksi dengan AI di jendela chat dan tanyakan di mana library rute Anda berada.
2. Klik Simpan Rute Baru (atau Tambahkan Rute) dan isi beberapa detail contoh:
   • Judul Rute: Riverfront Trail Loop
   • Jarak: 8.5 km
   • Kesulitan: Moderate
   • Lokasi Awal: Waterfront Pier 4
3. Klik Simpan ke Koleksi.
4. Sekarang, jadwalkan perjalanan menggunakan rute ini dengan mengklik tombol Jadwalkan Perjalanan langsung di kartu rute baru Anda.
5. Perhatikan bagaimana detail jarak, kesulitan, dan lokasi diisi secara otomatis untuk Anda.
6. Klik Publish Run dan verifikasi bahwa lari grup baru Anda muncul di feed beranda.

5. Menerapkan RSVP dan Undangan Anggota

Aplikasi komunitas berkembang berkat partisipasi! Anda dapat mengizinkan pelari melihat siapa yang akan mengikuti lari mendatang, mendaftar dengan sekali klik, dan membagikan link undangan kepada teman.

Meminta AI untuk menambahkan RSVP dan undangan

Di kotak perintah chat, ketik permintaan berikut, lalu tekan Enter:

Allow registered members to RSVP ("Join Run") to any upcoming run.
Show the list of attending runners on each run card, display an
attendee counter, and add a copyable invite link.

Cara AI melacak peserta di balik layar

Untuk melacak pelari yang datang ke setiap lari, AI akan otomatis membuat tabel rsvps di database Anda. Anggap saja ini seperti formulir pendaftaran digital yang menautkan nama pelari ke acara tertentu.

(Anda tidak perlu menulis atau mengedit kode ini—AI mengelola lembar pendaftaran ini di database Anda secara otomatis.)

Menguji RSVP dan undangan di Pratinjau

Setelah AI selesai mengupdate aplikasi Anda, uji fitur RSVP baru di jendela pratinjau langsung:

1. Di jendela pratinjau, temukan lari mendatang di feed beranda Anda.
2. Klik tombol Gabung dalam Lari (atau RSVP).
3. Konfirmasi bahwa nama dan avatar Anda muncul di bagian Pelari yang Hadir, dan penghitung peserta bertambah 1.
4. Klik Salin Link Undangan dan pastikan link yang dapat dibagikan telah dibuat.

6. Menguji Persistensi Data dan Penskalaan hingga Nol Cloud SQL

Saat membangun aplikasi, hal terpenting adalah mengetahui bahwa informasi komunitas Anda aman. Jika Anda memuat ulang browser, menutup tab, atau mematikan komputer, Anda ingin semua rute tersimpan, konfirmasi kehadiran, dan diskusi tetap ada saat Anda kembali.

Pada langkah ini, Anda akan menguji bahwa data Anda disimpan dengan aman di database Cloud SQL dan mempelajari cara Google Cloud menghemat energi dan biaya saat aplikasi Anda tidak aktif.

Menguji pemuatan ulang aplikasi

1. Klik tombol Muat Ulang di dalam jendela pratinjau AI Studio (atau muat ulang tab browser Anda).

2. Lihat aplikasi Anda di pratinjau: perhatikan bahwa semua yang Anda buat—profil anggota, rute tersimpan, jadwal lari, RSVP, dan komentar—masih ada di tempat Anda meninggalkannya.
3. Aplikasi Anda tidak hanya menyimpan informasi sementara di layar Anda, tetapi juga menyimpannya dengan aman di database Cloud SQL Anda.

Cara Cloud SQL menghemat energi dan biaya (penskalaan hingga nol)

Apa yang terjadi jika tidak ada yang menggunakan aplikasi klub lari Anda di tengah malam?

• Tidur otomatis ("Penskalaan hingga nol"): Saat tidak ada yang mengunjungi aplikasi atau mendaftar untuk lari, database akan otomatis dijeda untuk menghemat resource.
• Pengaktifan instan: Segera setelah pelari membuka aplikasi atau mengklik link undangan, database akan langsung aktif dengan semua informasi tersimpan Anda siap digunakan.
• Biaya idle nol: Karena aplikasi ini dalam mode tidur saat tidak aktif, Anda tidak menggunakan resource komputasi saat aplikasi tidak digunakan.

Alasan pentingnya database yang sebenarnya: Karena AI mengatur informasi Anda ke dalam tabel yang terhubung, aplikasi Anda tetap rapi. Misalnya, jika proses berjalan dibatalkan dan dihapus, semua komentar yang dilampirkan pada proses berjalan tersebut akan otomatis dibersihkan sehingga tidak ada pesan sisa yang membingungkan.

7. Memublikasikan dan Men-deploy ke Cloud Run

Setelah aplikasi Running Club dibuat dan diuji dalam pratinjau, saatnya membagikannya kepada komunitas Anda. Anda tidak perlu membeli hosting web atau mengonfigurasi server—Anda dapat meluncurkan aplikasi secara live ke internet dengan sekali klik.

Memublikasikan aplikasi Anda secara langsung ke web

1. Di sudut kanan atas Google AI Studio, klik tombol Publish.
2. Jendela ringkasan akan muncul untuk mengonfirmasi detailnya:
   • Hosting: Dihosting dan di-deploy di Google Cloud Run.
   • Layanan yang terhubung: Login dengan Google dan database Cloud SQL Anda.
3. Klik Publikasikan untuk meluncurkan aplikasi Anda.

Membuka dan membagikan aplikasi live Anda

1. Setelah publikasi selesai, Google AI Studio akan memberikan alamat web aktif Anda beserta kode QR.
2. Klik link untuk membuka aplikasi web aktif Anda di tab browser baru, atau pindai kode QR dengan kamera ponsel Anda.
3. Coba di ponsel Anda: Login di ponsel Anda, konfirmasi kehadiran ke salah satu lari yang Anda jadwalkan sebelumnya di komputer, dan lihat jumlah peserta yang diperbarui secara real time—didukung oleh database Cloud SQL bersama Anda.

8. (Bonus) Memeriksa Resource Anda di Konsol Google Cloud

Eksplorasi Bonus: Langkah ini sepenuhnya bersifat opsional. Aplikasi Anda sudah aktif dan berfungsi. Jika Anda ingin mempelajari Google Cloud lebih lanjut dan melihat apa yang dibuat AI di balik layar, ikuti langkah-langkah untuk menjelajahi infrastruktur aktif Anda.

Saat membangun dan men-deploy aplikasi Anda, Google AI Studio tidak menguncinya di dalam kotak hitam pribadi—tetapi membuat layanan Google Cloud yang nyata dan siap produksi atas nama Anda. Anggap Konsol Google Cloud sebagai pusat kontrol tempat Anda dapat melihat aplikasi dan database aktif.

Langkah 1: Buka Konsol Google Cloud

1. Di tab browser baru, buka Konsol Google Cloud.
2. Di bagian atas layar, klik menu drop-down project dan pilih project yang dibuat untuk aplikasi AI Studio Anda (biasanya namanya diawali dengan continual-run-).

Langkah 2: Lihat tempat aplikasi web Anda berjalan (Cloud Run)

1. Di kotak penelusuran teratas, ketik Cloud Run, lalu pilih dari hasil penelusuran.
2. Klik nama aplikasi Anda (seperti running-club).
3. Di sini Anda dapat menjelajahi mesin yang menghosting situs Anda:
   • Metrik: Grafik bermanfaat yang menunjukkan jumlah orang yang mengunjungi situs Anda.
   • Log: Catatan aktivitas langsung yang menunjukkan apa yang terjadi saat pengunjung berinteraksi dengan aplikasi Anda.

Langkah 3: Lihat database Anda beraksi (Cloud SQL)

1. Di kotak penelusuran teratas, ketik Cloud SQL, lalu pilih dari hasil.
2. Klik instance database PostgreSQL Anda.
3. Di sini Anda dapat melihat detail database aktif, yang mengonfirmasi bahwa database Anda aktif dan siap menyimpan data klub lari Anda.

9. Membersihkan resource

Jika Anda membuat aplikasi ini sebagai project latihan, Anda dapat menghapusnya dengan mudah. Jika Anda berencana untuk terus menggunakan aplikasi Klub Lari dengan komunitas, Anda dapat membiarkannya berjalan.

1. Di Google AI Studio, klik Aplikasi Saya di sidebar kiri.
2. Temukan aplikasi Running Club Anda.
3. Klik Hapus Aplikasi (atau ikon tempat sampah). Tindakan ini akan menonaktifkan halaman web aktif Anda dan menghapus database pengujian untuk Anda dalam satu langkah.

10. Selamat

Anda telah membangun, menyesuaikan, dan memublikasikan aplikasi web pertama yang didukung database menggunakan Google AI Studio dan Cloud SQL.

Buka link ini untuk mengklaim badge Perjalanan Pembuat Selesai.

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

Yang telah Anda capai

• Membangun aplikasi dengan bahasa sederhana: Membuat aplikasi klub lari komunitas yang lengkap dengan perintah sederhana.
• Mengaktifkan Login dengan Google: Menyiapkan login yang aman dengan Akun Google secara otomatis.
• Menghubungkan database nyata: Menyimpan rute, menjalankan jadwal, RSVP, dan diskusi dengan aman di Cloud SQL.
• Menambahkan fitur secara percakapan: Membuat library rute dan pelacakan konfirmasi kehadiran hanya dengan melakukan percakapan dengan AI.
• Dipublikasikan secara live ke web: Deploy aplikasi Anda ke internet dengan sekali klik dan mengujinya di berbagai perangkat.
• Melihat cara kerja di balik layar: Mempelajari cara Google Cloud menghosting aplikasi web dan database live Anda.

Langkah berikutnya

Anda dapat terus melakukan percakapan dengan AI di Google AI Studio untuk memperluas aplikasi Anda dengan fitur baru:

• Peta Interaktif: Minta AI untuk menambahkan pratinjau peta dan rute GPS.
• Pencocokan Teman Lari: Minta AI untuk menyarankan partner lari dengan sasaran kecepatan yang serupa.
• Prakiraan Cuaca: Minta AI untuk menampilkan prakiraan cuaca akhir pekan di kartu rute mendatang.
• Berbagi Foto: Minta AI untuk mengizinkan pelari membagikan foto setelah lari berkelompok.

Bacaan lebih lanjut

• Dokumentasi Google AI Studio
• Men-deploy aplikasi dari Google AI Studio
• Ringkasan Cloud SQL untuk PostgreSQL
• Coding yang dibantu AI dan Cloud SQL
• Dokumentasi Cloud Run