Membangun aplikasi di Google AI Studio

Halaman ini menjelaskan cara menggunakan Google AI Studio untuk membuat (atau "mengodekan suasana") dan men-deploy aplikasi dengan cepat yang menguji kemampuan terbaru Gemini seperti Nano Banana dan Live API. Google AI Studio kini mendukung runtime full-stack, sehingga Anda dapat membangun aplikasi yang tangguh dengan logika sisi server, pengelolaan rahasia yang aman, dan dukungan paket npm, semuanya melalui perintah bahasa alami.

Mulai

Mulai lakukan vibe coding di Mode build Google AI Studio. Anda dapat mulai membangun dengan beberapa cara:

  • Mulai dengan perintah: Dalam mode Buat, gunakan kotak input untuk memasukkan deskripsi tentang apa yang ingin Anda buat. Pilih Chip AI untuk menambahkan fitur tertentu seperti pembuatan gambar atau data Google Maps ke perintah Anda. Anda bahkan dapat mengucapkan apa yang Anda inginkan menggunakan tombol speech-to-text.
  • Tombol "Saya Lagi Beruntung": Jika Anda membutuhkan ide kreatif, gunakan tombol "Saya Lagi Beruntung", dan Gemini akan membuat perintah dengan ide project untuk membantu Anda memulai.
  • Me-remix project dari galeri: Buka project dari Galeri Aplikasi, lalu pilih Salin Aplikasi.

Setelah Anda menjalankan perintahnya, Anda akan melihat kode dan file yang diperlukan dibuat, dengan pratinjau live aplikasi Anda yang muncul di sisi kanan.

Apa yang dibuat?

Saat Anda menjalankan perintah, AI Studio akan membuat aplikasi lengkap. Secara default, tindakan ini akan membuat lingkungan full-stack yang dapat mencakup:

  • Sisi klien: frontend web (React adalah default).
  • Sisi server: runtime Node.js yang memungkinkan panggilan API yang aman, koneksi database, dan penggunaan paket npm.

Anda dapat melihat kode yang dibuat dengan memilih tab Kode di panel pratinjau sebelah kanan. Antigravity Agent secara cerdas mengelola beberapa file di seluruh stack Anda, memastikan perubahan disebarkan dengan benar.

The Antigravity Agent

Antigravity Agent adalah fungsi AI utama dalam Google Antigravity dan kini komponen inti dari harness agen mendukung pengalaman mode Build di Google AI Studio. Fitur ini tidak hanya menghasilkan kode sederhana, tetapi juga mempertahankan konteks seluruh project Anda, mengelola beberapa file, dan memahami petunjuk yang kompleks untuk membangun aplikasi full-stack yang andal.

Kemampuan utama meliputi:

  • Pemahaman konteks: mempertahankan konteks perintah dan status file sebelumnya.
  • Pengelolaan multi-file: menangani dependensi di beberapa file.
  • Eksekusi terverifikasi: memverifikasi update kode untuk mengurangi halusinasi.

Kemampuan full-stack

Google AI Studio membuka potensi ekosistem web modern, sehingga Anda dapat membangun lebih dari sekadar prototipe sisi klien.

  • Runtime sisi server & npm: gunakan library paket npm yang luas. Agen akan otomatis mengidentifikasi dan menginstal paket sesuai kebutuhan aplikasi Anda (misalnya, library tertentu untuk visualisasi data atau klien API). Anda juga dapat meminta paket tertentu jika diinginkan.
  • Pengelolaan secret: menyimpan kunci API dan secret dengan aman di menu Setelan. Nilai ini dapat diakses dalam kode sisi server Anda, sehingga aman dari eksposur sisi klien.
  • Multiplayer: bangun pengalaman kolaboratif real-time langsung di dalam AI Studio. Runtime sisi server mengelola status dan koneksi yang diperlukan agar pengguna dapat berinteraksi bersama.
  • Integrasi Firebase: menyediakan dan menyiapkan Firebase secara otomatis, termasuk database Firestore (penyimpanan data persisten) dan Firebase Authentication (alur login, khususnya "Login dengan Google"). Agen menangani seluruh proses penyiapan dan bahkan menulis kode di aplikasi Anda untuk layanan ini.

Pelajari lebih lanjut pengembangan aplikasi full-stack

Terus membangun

Setelah Google AI Studio membuat kode awal untuk aplikasi Anda, Anda dapat terus menyempurnakannya:

Membangun solusi di Google AI Studio

  • Melakukan iterasi dengan Gemini: Gunakan panel chat di Mode pembuatan untuk meminta Gemini melakukan modifikasi, menambahkan fitur baru, atau mengubah gaya.
  • Mengedit kode secara langsung: Buka tab Kode di panel pratinjau untuk melakukan pengeditan langsung.

Mengembangkan secara eksternal

Untuk alur kerja yang lebih canggih, Anda dapat mengekspor kode dan bekerja di lingkungan pilihan Anda:

  • Download dan kembangkan secara lokal: Ekspor kode yang dihasilkan sebagai file ZIP dan impor ke editor kode Anda.
  • Kirim ke GitHub: Integrasikan kode dengan proses pengembangan dan deployment yang ada dengan mengirimkannya ke repositori GitHub.

Fitur utama

Google AI Studio menyertakan beberapa fitur untuk membuat proses pembangunan menjadi intuitif dan visual:

  • Membuat dan melakukan iterasi pada aplikasi full stack: Buat aplikasi full stack hanya dengan perintah dan lakukan iterasi melalui chat atau mode anotasi. Mode anotasi memungkinkan Anda menandai bagian mana pun dari UI aplikasi dan menjelaskan perubahan yang Anda inginkan.
  • Membagikan dan men-deploy aplikasi: Anda dapat membagikan kreasi Anda kepada orang lain untuk berkolaborasi atau memamerkan hasil karya Anda. Kemudian, saat aplikasi Anda sudah siap, deploy ke Cloud Run.
  • Galeri aplikasi: Galeri Aplikasi menyediakan library visual ide project. Anda dapat menjelajahi berbagai kemungkinan yang dapat dilakukan Gemini, melihat pratinjau aplikasi secara instan, dan mengombinasikannya untuk menjadikannya milik Anda.

Men-deploy atau mengarsipkan aplikasi

Setelah aplikasi Anda siap, Anda dapat men-deploy-nya:

  • Google Cloud Run: men-deploy aplikasi Anda sebagai layanan yang skalabel. Harga untuk Google Cloud Run dapat berlaku berdasarkan penggunaan.
  • GitHub: mengekspor project Anda ke repositori GitHub.

Batasan

Bagian ini mencantumkan batasan mode build saat ini di Google AI Studio.

Keamanan Kunci API

  • Sisi klien: jangan pernah menggunakan kunci API asli secara langsung dalam kode sisi klien.
  • Sisi server: gunakan fitur Pengelolaan Secret untuk menangani kunci sensitif secara aman di runtime sisi server.

Deployment di luar Google AI Studio

  • Meskipun Anda dapat men-deploy aplikasi ke Cloud Run untuk URL publik, penyiapan ini akan menggunakan kunci API Anda untuk semua panggilan Gemini API pengguna.
    • Aplikasi JavaScript dijalankan di sisi klien, jadi pastikan kunci API hanya memiliki akses minimal untuk mencegah kebocoran atau penyalahgunaan data. Misalnya, Penyimpanan Penelusuran File lainnya dari project yang sama dapat diakses oleh pengguna melalui mekanisme ini.
  • Men-deploy eksternal yang aman: Untuk menjalankan aplikasi secara aman di luar AI Studio (misalnya, setelah mendownload file zip), Anda harus memindahkan logika yang menggunakan kunci API ke komponen sisi server untuk mencegah kunci terekspos ke pengguna akhir. Hal ini tidak diperlukan jika Anda men-deploy menggunakan Cloud Run.
  • Peringatan kebocoran kunci: Mengganti placeholder dengan kunci API yang sebenarnya di lingkungan sisi klien sangat tidak disarankan, karena kunci akan terlihat oleh pengguna mana pun.

Error saat berbagi aplikasi

Jika Anda membagikan aplikasi dan pengguna akhir mengalami error 403 Akses Dibatasi saat menggunakan URL yang dibagikan, hal ini mungkin disebabkan oleh salah satu hal berikut:

  • Ekstensi browser: ekstensi privasi seperti Privacy Badger dapat memblokir aplikasi. Nonaktifkan ekstensi untuk menghindari error.
  • Masalah build: mungkin ada masalah dengan kode saat ini. Minta agen untuk "memperbaiki masalah build dengan kode saat ini", lalu bagikan ulang URL.

FAQ

Apa itu Build in AI Studio?

AI Studio Build adalah platform yang dirancang untuk membantu Anda mengubah perintah sederhana menjadi aplikasi berteknologi AI yang siap produksi menggunakan Gemini. Deskripsikan apa yang ingin Anda bangun dengan perintah, dan Gemini akan membuat aplikasi untuk Anda. Anda juga dapat menjelajahi galeri kami untuk melihat kemungkinan yang dapat dilakukan dengan Gemini API, dan me-remix aplikasi untuk menjadikannya milik Anda.

Mengapa Build memanggil Gemini API dari kode sisi klien?

Biasanya, praktik terbaiknya adalah memanggil Gemini API dari sisi server, agar tidak mengekspos kunci API Anda. Namun, AI Studio memiliki proxy Gemini API untuk panggilan sisi klien, yang melampirkan kunci API tanpa mengeksposnya dalam kode. Untuk saat ini, kita membuat panggilan sisi klien untuk menggunakan proxy ini, karena proxy ini menyederhanakan kode dan memungkinkan Anda membagikan aplikasi kepada orang lain tanpa harus memberikan kunci API.

Apakah kunci API saya terekspos saat membagikan aplikasi?

Jangan gunakan kunci API yang sebenarnya di aplikasi Anda. Gunakan nilai pengganti. process.env.GEMINI_API_KEY disetel ke nilai placeholder yang dapat Anda gunakan. Saat pengguna lain menggunakan aplikasi Anda, AI Studio akan mem-proxy panggilan ke Gemini API, mengganti nilai placeholder dengan kunci API pengguna (bukan milik Anda). Jangan gunakan kunci API sungguhan di aplikasi Anda, karena kode tersebut dapat dilihat oleh siapa pun yang dapat melihat aplikasi Anda.

Siapa yang dapat melihat aplikasi saya?

Secara default, aplikasi Anda bersifat pribadi. Anda dapat membagikan aplikasi Anda kepada pengguna lain agar mereka dapat menggunakannya. Pengguna yang Anda ajak berbagi aplikasi dapat melihat kodenya dan membuat fork untuk tujuan mereka sendiri. Jika Anda membagikan aplikasi dengan izin edit, pengguna lain dapat mengedit kode aplikasi Anda.

Dapatkah saya menjalankan aplikasi di luar AI Studio?

Anda dapat men-deploy aplikasi ke Cloud Run dari AI Studio, yang akan memberi aplikasi Anda URL publik. Aplikasi ini di-deploy bersama server proxy yang akan menjaga kerahasiaan kunci API Anda, tetapi aplikasi yang di-deploy akan menggunakan kunci API Anda untuk semua panggilan Gemini API pengguna. Anda juga dapat mendownload aplikasi sebagai file zip. Jika Anda mengganti nilai placeholder dengan kunci API yang sebenarnya, kode tersebut akan tetap berfungsi. Namun, Anda tidak boleh men-deploy aplikasi seperti ini, karena setiap pengguna akan dapat melihat kunci API. Agar aplikasi dapat berjalan dengan aman di luar AI Studio, Anda perlu memindahkan beberapa logika ke sisi server, sehingga kunci API tidak lagi diekspos.

Dapatkah saya mengembangkan aplikasi secara lokal dengan alat saya sendiri, lalu membagikannya di sini?

Fungsi ini belum tersedia. Kami senang dapat mendukung lebih banyak kasus penggunaan aplikasi pada masa mendatang. Berikan masukan kepada kami jika Anda memiliki sesuatu yang spesifik.

Bagaimana cara menggunakan database atau penyimpanan lain dengan aplikasi saya?

Aplikasi AI Studio adalah aplikasi standar yang berjalan dalam container Cloud Run. Anda dapat menggunakan solusi penyimpanan apa pun yang dapat Anda hubungkan melalui jaringan, selama tidak ada firewall yang mencegah akses dari rentang IP dinamis.

Kami sedang berupaya menambahkan dukungan langsung untuk penyimpanan pada masa mendatang, yang dapat Anda konfigurasi langsung dalam AI Studio.

Untuk memastikan bahwa penonton mengetahui penggunaan webcam atau perangkat lain oleh aplikasi, kami mewajibkan pengesahan tambahan sebelum aplikasi dapat mengakses Navigator API ini. Pembuat aplikasi dapat menambahkan permintaan izin ini ke file metadata.json aplikasi mereka. Contoh:

{
  "name": "My app",
  "requestFramePermissions": [
    "microphone",
    "camera",
    "display-capture",
    "geolocation",
    "bluetooth",
    "clipboard-read",
    "serial",
    "usb"
  ]
}

Nilai yang didukung untuk requestFramePermissions adalah sebagian dari fitur yang dikontrol kebijakan standar.

Bagaimana cara menggunakan GitHub dengan aplikasi saya?

Integrasi GitHub AI Studio memungkinkan Anda membuat repositori untuk pekerjaan Anda dan meng-commit perubahan terbaru. Saat ini kami tidak mendukung penarikan perubahan jarak jauh.

Dapatkah saya memberikan akses edit ke aplikasi saya kepada pengguna lain?

Fitur ini belum didukung, tetapi akan segera tersedia.

Mengapa aplikasi saya ditandai karena pelanggaran kebijakan?

Kami memiliki sistem yang secara otomatis meninjau aplikasi untuk memastikan aplikasi tersebut mematuhi kebijakan kami. Jika kami mendapati bahwa suatu aplikasi melanggar kebijakan kami, aplikasi tersebut akan dihapus dari AI Studio. Pelanggaran kebijakan dapat mencakup, tetapi tidak terbatas pada, hal-hal berikut:

  • Aplikasi yang berisi malware, phishing, atau peniruan identitas
  • Aplikasi yang menampilkan atau mendistribusikan konten yang melanggar kebijakan gambar pelecehan seksual terhadap anak-anak
  • Aplikasi yang menampilkan atau mendistribusikan konten yang melanggar kebijakan pelecehan
  • Aplikasi yang menampilkan atau mendistribusikan konten yang melanggar kebijakan ujaran kebencian
  • Aplikasi yang menampilkan atau mendistribusikan konten yang melanggar kebijakan perdagangan manusia
  • Aplikasi yang menampilkan atau mendistribusikan konten yang melanggar kebijakan konten seksual vulgar
  • Aplikasi yang menampilkan atau mendistribusikan konten yang melanggar kebijakan kekerasan dan adegan sadis
  • Aplikasi yang menampilkan atau mendistribusikan konten yang melanggar kebijakan konten berbahaya atau berbahaya

Jika aplikasi Anda ditandai karena pelanggaran kebijakan, dan Anda yakin hal ini keliru, Anda dapat mengajukan banding. Pelanggaran berulang terhadap kebijakan kami dapat mengakibatkan penghentian akses Anda ke AI Studio.

Apa tanggung jawab saya sebagai developer aplikasi?

Sebagai pengingat, sebagai pemilik aplikasi, Anda bertanggung jawab atas perilakunya dan semua data yang ditanganinya. Hal ini mencakup:

  • Kepatuhan Hukum dan Hak Pihak Ketiga: Memastikan aplikasi Anda mematuhi semua hukum dan peraturan yang berlaku serta tidak melanggar hak orang lain, termasuk hak atas kekayaan intelektual dan hak privasi.
  • Pemantauan Konten: Kepatuhan terhadap persyaratan tambahan dapat berlaku untuk layanan lain yang digunakan oleh aplikasi Anda. Misalnya, Persyaratan Layanan Google Cloud, yang berlaku untuk Firestore, mewajibkan pelanggan yang menghosting konten pihak ketiga untuk memublikasikan kebijakan yang menentukan konten apa yang dilarang (misalnya, konten ilegal) dan memantau keberadaan konten ilegal tersebut.
  • Penerapan yang Aman: Menerapkan alat pengamanan dan moderasi yang diperlukan untuk mencegah penyalahgunaan aplikasi Anda.

Perhatikan pembatasan penggunaan dalam Persyaratan Layanan.

Persyaratan Layanan Tambahan Gemini API berlaku untuk penggunaan aplikasi yang ditampilkan di galeri aplikasi di AI Studio, kecuali dinyatakan lain.

Langkah berikutnya