Mengembangkan aplikasi lengkap di Google AI Studio

Google AI Studio kini mendukung pengembangan full-stack, sehingga Anda dapat membangun aplikasi yang lebih dari sekadar prototipe sisi klien. Dengan runtime sisi server, Anda dapat mengelola secret, terhubung ke API eksternal, dan membangun pengalaman multiplayer real-time.

Runtime sisi server

Aplikasi Google AI Studio kini dapat menyertakan komponen sisi server (Node.js). Hal ini memungkinkan Anda:

  • Menjalankan logika sisi server: Jalankan kode yang tidak boleh diekspos ke klien.
  • Mengakses paket npm: agen Antigravity dapat menginstal dan menggunakan paket dari ekosistem npm yang luas.
  • Menangani secret: Gunakan kunci API dan kredensial dengan aman.

Menggunakan paket npm

Anda tidak perlu menjalankan npm install secara manual. Cukup minta Agen untuk menambahkan fungsi yang memerlukan paket, dan Agen akan menangani penginstalan dan impor.

Contoh: > "Gunakan axios untuk mengambil data dari API eksternal."

Mengelola secret dengan aman

Dengan kode sisi server dan pengelolaan secret, Anda kini dapat membangun aplikasi yang berinteraksi dengan dunia.

Kunci Gemini API

Saat Anda membuat aplikasi baru yang menggunakan Gemini API, AI Studio akan otomatis mengonfigurasi GEMINI_API_KEY Anda sebagai rahasia sisi server — tidak perlu penyiapan manual. Anda dapat melihat kunci ini di panel Secrets di Settings. Panggilan Gemini API aplikasi Anda dilakukan dari kode sisi server menggunakan kunci ini, sehingga tidak pernah terekspos di browser.

Kunci API pihak ketiga

Untuk layanan lain, Anda dapat menambahkan kunci API secara manual:

  • API pihak ketiga: Terhubung ke layanan seperti Stripe, SendGrid, atau REST API kustom.
  • Database: Hubungkan ke database eksternal (misalnya, melalui Supabase, Firebase, atau MongoDB Atlas) untuk mempertahankan data di luar sesi.

Saat membangun aplikasi di dunia nyata, Anda sering kali perlu terhubung ke layanan pihak ketiga (seperti Twilio, Slack, atau database) yang memerlukan kunci API. Anda dapat menambahkan kunci secara manual dengan langkah-langkah berikut:

  1. Tambahkan secret: Buka menu Settings di Google AI Studio dan cari bagian Secrets.
  2. Simpan kunci Anda: Tambahkan kunci API atau token rahasia Anda di sini.
  3. Akses dalam kode: Agen dapat menulis kode sisi server yang mengakses secret ini dengan aman (biasanya melalui variabel lingkungan), sehingga memastikan secret tersebut tidak pernah terekspos ke browser sisi klien.

Jika diperlukan, agen juga akan menampilkan kartu dalam chat yang meminta Anda untuk menambahkan kunci setiap kali secret baru diperlukan atau saat kunci baru terdeteksi dalam variabel env project.

Integrasi Firebase untuk database & autentikasi

Google AI Studio kini memudahkan penambahan database atau autentikasi ke aplikasi Anda melalui integrasi Firebase. Agen Antigravity dapat menyediakan dan menyiapkan layanan berikut untuk Anda secara otomatis:

  • Database Firestore: database cloud NoSQL yang fleksibel dan skalabel untuk menyimpan dan menyinkronkan data untuk pengembangan sisi klien dan sisi server.
  • Firebase Authentication: mengizinkan pengguna Anda login dengan aman ke aplikasi Anda menggunakan alur "Login dengan Google".

Cukup minta agen untuk "menambahkan database ke aplikasi saya" atau "menyiapkan Login dengan Google", dan agen akan menangani konfigurasi dan pembuatan kode yang diperlukan untuk Anda. Saat membangun aplikasi Android, integrasi Firebase juga menyediakan Firebase AI Logic dan Firebase App Check untuk panggilan API Gemini sisi klien yang aman.

Firebase memungkinkan Anda memulai secara gratis, dan secara opsional melakukan penskalaan dengan akun berbayar kapan pun Anda siap untuk mendapatkan lebih banyak kuota atau menggunakan fitur berbayar.

Google Workspace API

Google AI Studio memungkinkan Anda membangun aplikasi yang terhubung ke API Google Workspace, sehingga pengguna Anda dapat bekerja dengan data nyata mereka: email, spreadsheet, dokumen, acara kalender, dan lainnya, semuanya dalam aplikasi Anda. Anda tidak perlu lagi menyiapkan project Google Cloud, mengonfigurasi OAuth, atau mengelola API secara manual.

Cara kerjanya

Anda dapat menambahkan integrasi Workspace dengan dua cara:

  • Deskripsikan di panel chat: Cukup beri tahu agen apa yang Anda inginkan di panel chat di bagian bawah. Misalnya, "Buat pelacak pengeluaran yang mencatat tanda terima ke Spreadsheet Google saya" atau "Buat dasbor yang meringkas pesan Gmail saya yang belum dibaca".
  • Memilih dari panel integrasi: Buka panel Integrations di sidebar sebelah kanan Mode build, lalu aktifkan aplikasi Workspace yang ingin Anda hubungkan.

Saat Anda menambahkan aplikasi Workspace, AI Studio akan otomatis:

  1. Menghubungkan Google API yang diperlukan untuk aplikasi Anda.
  2. Membuat kode sisi server untuk memanggil API.
  3. Menambahkan alur "Login dengan Google" yang aman sehingga pengguna akhir aplikasi Anda dapat mengizinkan akses ke data mereka sendiri.

Aplikasi yang didukung

Aplikasi Google Workspace berikut tersedia:

Aplikasi Yang dapat Anda bangun
Google Kalender Membaca, membuat, dan mengelola acara dan kalender
Google Chat Membaca dan berinteraksi dengan percakapan dan ruang grup
Google Dokumen Membuat, membaca, memperbarui, dan memformat dokumen
Google Drive Mengatur, menelusuri, dan mengelola file serta folder
Google Formulir Membuat survei, memperbarui pertanyaan, dan mengambil respons
Gmail Membaca, mengirim, dan mengelola konten email
Google Keep Mengelola catatan, daftar, dan lampiran
Google Meet Menjadwalkan dan mengelola panggilan video
Kontak Menyinkronkan dan mengelola kontak
Google Spreadsheet Membaca, menulis, dan memformat data spreadsheet
Google Slide Membuat dan mengubah presentasi
Google Tasks Membuat, mengelola, dan mengatur tugas

Autentikasi dan izin

Sebagai pembuat, Anda tidak perlu mengonfigurasi klien OAuth, mengelola kredensial, atau menyiapkan project Google Cloud. AI Studio menangani semua ini untuk Anda.

Aplikasi yang terintegrasi dengan Workspace API menggunakan "Login dengan Google" untuk mengautentikasi pengguna akhir. Saat pengguna membuka aplikasi Anda, mereka akan diminta untuk login dan memberikan izin khusus yang diperlukan aplikasi Anda (misalnya, akses hanya baca ke kalender mereka, atau kemampuan untuk mengedit spreadsheet). Aplikasi Anda hanya mengakses data orang yang menggunakannya. Setiap pengguna mengizinkan akses ke akunnya sendiri.

Contoh perintah

Berikut beberapa ide untuk mulai menggunakan integrasi Workspace:

  • "Buat aplikasi yang membaca Google Kalender saya dan membuat draf email persiapan di Gmail untuk setiap rapat."
  • "Buat alat yang mengambil Google Dokumen dan membuat presentasi ringkasan 5 slide di Google Slide."
  • "Buat pelacak pengeluaran tempat saya mengupload tanda terima, Gemini mengekstrak detailnya, dan mencatat baris baru di Spreadsheet Google saya."

Menyiapkan OAuth

Salah satu kasus penggunaan utama untuk pengelolaan secret adalah menyiapkan OAuth untuk terhubung ke situs atau aplikasi lain. Jika perintah Anda menyertakan petunjuk tentang cara terhubung ke aplikasi pihak ketiga yang memerlukan autentikasi OAuth, agen akan memberikan petunjuk tentang cara menyiapkan OAuth untuk aplikasi tersebut. Petunjuk ini akan menyertakan URL callback yang diperlukan untuk mengonfigurasi Aplikasi OAuth Anda. Anda juga dapat menemukan URL callback di bagian Integrations di panel Settings.

Membangun pengalaman multiplayer

Runtime full-stack memungkinkan fitur kolaborasi real-time.

  • Status real-time: Anda dapat meminta Agen membuat fitur seperti "percakapan live", "papan tulis kolaboratif", atau "game multiplayer".
  • Sesi yang disinkronkan: Server mengelola status, sehingga beberapa pengguna dapat berinteraksi dengan instance aplikasi yang sama secara real-time.

Contoh perintah: > "Jadikan ini game multiplayer tempat pemain dapat melihat kursor satu sama lain."

Tips untuk menguji aplikasi multiplayer

Anda dapat menguji mode multiplayer dengan dua cara sebelum men-deploy aplikasi.

  1. Buka aplikasi Anda dalam mode Build Google AI Studio di beberapa tab. Saat mengembangkan dalam mode Build, aplikasi Anda berada dalam container dev. Membuka aplikasi di beberapa tab akan memungkinkan Anda menyimulasikan beberapa pemain yang menggunakan aplikasi Anda.
  2. Bagikan aplikasi kepada orang lain menggunakan menu Bagikan di kanan atas. Kemudian, gunakan URL yang Dibagikan dari tab Integrasi di menu Bagikan untuk menggunakan aplikasi dengan pemain yang telah Anda bagikan aplikasi.

Praktik terbaik

  • Panggilan API Gemini: GEMINI_API_KEY Anda otomatis dikonfigurasi sebagai rahasia sisi server. Lakukan panggilan Gemini API dari kode sisi server Anda menggunakan kunci ini. Anda dapat melihatnya di panel Secrets.
  • Keamanan secret: Selalu gunakan Secret Manager untuk kunci sensitif. Jangan pernah meng-hardcode-nya dalam file Anda.
  • Pemisahan fokus: Simpan logika UI Anda di framework sisi klien (React/Angular) dan logika bisnis/penanganan data Anda di sisi server.
  • Penanganan error: Pastikan kode sisi server Anda menangani error dari panggilan API eksternal dengan baik untuk mencegah aplikasi error.

Apa Langkah Selanjutnya?