Mengembangkan Aplikasi Full-Stack di Google AI Studio

Google AI Studio kini mendukung pengembangan full-stack, sehingga Anda dapat membuat aplikasi yang melampaui prototipe sisi klien. Dengan runtime sisi server, Anda dapat mengelola secret, terhubung ke API eksternal, dan membuat 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: Menjalankan kode yang tidak boleh diekspos ke klien.
  • Mengakses paket npm: Antigravity Agent dapat menginstal dan menggunakan paket dari ekosistem npm yang luas.
  • Menangani secret: Menggunakan kunci API dan kredensial dengan aman.

Menggunakan paket npm

Anda tidak perlu menjalankan npm install secara manual. Cukup minta Agent untuk menambahkan fungsi yang memerlukan paket, dan Agent 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, kini Anda dapat membuat 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 secret sisi server — tidak perlu penyiapan manual. Anda dapat melihat kunci ini di panel Secrets di Setelan. Panggilan Gemini API aplikasi Anda dilakukan dari kode sisi server menggunakan kunci ini, sehingga tidak pernah diekspos 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: Terhubung ke database eksternal (misalnya, melalui Supabase, Firebase, atau MongoDB Atlas) untuk mempertahankan data di luar sesi.

Saat membuat aplikasi 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. Menambahkan secret: Buka menu Settings di Google AI Studio dan cari bagian Secrets.
  2. Menyimpan kunci: Tambahkan kunci API atau token secret Anda di sini.
  3. Mengakses dalam kode: Agent dapat menulis kode sisi server yang mengakses secret ini dengan aman (biasanya melalui variabel lingkungan), sehingga memastikan secret tidak pernah diekspos ke browser sisi klien.

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

Integrasi Firebase untuk database &autentikasi

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

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

Cukup minta agent untuk "menambahkan database ke aplikasi saya" atau "menyiapkan Login dengan Google", dan agent akan menangani konfigurasi dan pembuatan kode yang diperlukan untuk Anda.

Firebase memungkinkan Anda memulai secara gratis, dan secara opsional melakukan penskalaan dengan akun berbayar kapan saja Anda siap untuk kuota yang lebih besar atau menggunakan fitur berbayar.

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, agent 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.

Membuat pengalaman multiplayer

Runtime full-stack memungkinkan fitur kolaborasi real-time.

  • Status real-time: Anda dapat meminta Agent untuk membuat fitur seperti "live chat", "papan tulis kolaboratif", atau "game multiplayer".
  • Sesi yang disinkronkan: Server mengelola status, sehingga memungkinkan beberapa pengguna 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 pengembangan. Membuka aplikasi di beberapa tab akan memungkinkan Anda mensimulasikan beberapa pemain yang menggunakan aplikasi Anda.
  2. Bagikan aplikasi kepada orang lain menggunakan menu Share di kanan atas. Kemudian, gunakan Shared URL dari tab Integrations di menu Share untuk menggunakan aplikasi dengan pemain yang telah Anda bagikan aplikasi Anda.

Praktik terbaik

  • Panggilan Gemini API: GEMINI_API_KEY Anda otomatis dikonfigurasi sebagai secret sisi server. Lakukan panggilan Gemini API dari kode sisi server Anda menggunakan kunci ini. Anda dapat melihatnya di panel Secrets.
  • Keamanan secret: Selalu gunakan pengelola Secret untuk kunci sensitif. Jangan pernah menyandikannya secara langsung di file Anda.
  • Pemisahan tugas: 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 kuat untuk mencegah aplikasi mengalami error.

Apa Langkah Selanjutnya?