Halaman ini menjelaskan cara menggunakan mode Build di Google AI Studio untuk membangun (atau mengodekan) dan men-deploy aplikasi dengan cepat yang menguji kemampuan Gemini terbaru seperti nano banana dan Live API.
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 web. Secara default, AI Studio akan membuat aplikasi web React, tetapi Anda dapat memilih untuk membuat aplikasi Angular di menu Setelan. Anda dapat melihat kode yang dibuat dengan memilih tab Kode di panel pratinjau sebelah kanan.
Berikut adalah file yang perlu diperhatikan:
- geminiService.ts: File ini berisi logika utama untuk aplikasi Anda, mulai dari membuat perintah hingga memanggil Gemini API dan mengurai responsnya. Anda dapat mengedit perintah dasar dalam file ini atau mengubah fungsi komponen secara langsung atau dengan melakukan percakapan interaktif dengan Gemini dalam mode Build. Perhatikan bahwa kode dalam file ini menggunakan GenAI TS SDK untuk berinteraksi dengan Gemini API.
Terus membangun
Setelah Google AI Studio membuat kode awal untuk aplikasi web Anda, Anda memiliki dua opsi utama untuk melanjutkan project: Bangun di AI Studio atau Kembangkan Secara Eksternal.
Membangun solusi di Google AI Studio
Anda dapat terus menyempurnakan dan memperluas aplikasi langsung dalam lingkungan Google AI Studio:
- Melakukan iterasi dengan Gemini: Gunakan panel chat dalam Mode pembuatan untuk meminta Gemini melakukan modifikasi, menambahkan fitur baru, atau mengubah gaya. Misalnya, Anda dapat meminta, "Tambahkan tombol yang memberi tahu pengguna" atau "Ubah skema warna menjadi biru dan putih".
- Mengedit Kode Secara Langsung: Buka tab Kode di panel pratinjau untuk melakukan pengeditan langsung. Anda dapat menyimpan project ke GitHub untuk memanfaatkan kontrol versi selama pengembangan.
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. Hal ini memungkinkan Anda menggunakan alat, sistem build, dan praktik kontrol versi lokal yang sudah dikenal untuk terus membangun di luar prototipe awal.
- 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:
- Mode anotasi: Daripada menulis kode untuk mengubah tampilan aplikasi, Mode Anotasi memungkinkan Anda menandai bagian mana pun dari UI aplikasi dan menjelaskan perubahan yang Anda inginkan. Misalnya, Anda dapat memilih komponen dan mengetik, "Buat tombol ini berwarna biru", atau "Animasi gambar ini agar meluncur dari kiri". Saat Anda memilih Tambahkan ke percakapan, perintah akan dibuat dengan screenshot aplikasi yang dianotasi.
- Membagikan aplikasi Anda: Anda dapat membagikan kreasi Anda kepada orang lain untuk berkolaborasi atau memamerkan karya Anda.
- Galeri Aplikasi: Galeri Aplikasi menyediakan galeri visual ide project. Anda dapat menjelajahi kemungkinan yang dapat dilakukan Gemini, melihat pratinjau aplikasi secara instan, dan memadukannya untuk menjadikannya milik Anda.
Men-deploy atau mengarsipkan aplikasi
Setelah aplikasi Anda siap, Anda dapat men-deploy-nya langsung dari AI Studio. Opsi untuk deployment meliputi:
- Google Cloud Run: Deploy aplikasi Anda sebagai layanan yang skalabel. Perhatikan bahwa harga untuk Google Cloud Run dapat berlaku berdasarkan penggunaan.
- GitHub: Ekspor project Anda ke repositori GitHub untuk mengintegrasikannya ke dalam alur kerja pengembangan dan deployment yang ada.
Batasan
Bagian ini menguraikan batasan penting saat menggunakan mode Build di Google AI Studio.
Keamanan dan eksposur Kunci API
- Kode untuk aplikasi bersama dapat dilihat oleh siapa saja yang melihatnya. Jangan pernah menggunakan kunci API asli secara langsung dalam kode aplikasi Anda.
- Secara default, aplikasi menggunakan placeholder (misalnya, process.env.GEMINI_API_KEY) untuk kunci API. Saat pengguna menjalankan aplikasi bersama Anda dalam AI Studio, AI Studio akan bertindak sebagai proxy, menggantikan placeholder dengan kunci API pengguna akhir, sehingga memastikan kunci Anda tetap bersifat pribadi.
Visibilitas dan berbagi aplikasi
- Aplikasi disimpan di Google Drive dan mewarisi model izinnya, yang berarti aplikasi bersifat pribadi secara default.
- Izin Berbagi: Saat Anda membagikan aplikasi kepada pengguna lain:
- Pengguna bersama dapat melihat kode dan membuat fork aplikasi untuk digunakan sendiri.
- Jika diberi izin edit, pengguna yang diajak berbagi dapat mengubah kode aplikasi.
Deployment di luar 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.
Dukungan alat dan fitur
- Impor pengembangan lokal: Saat ini, Anda tidak dapat mengembangkan aplikasi secara lokal dengan alat eksternal dan mengimpornya ke AI Studio.
Apa Langkah Selanjutnya?
- Lihat apa yang telah dibuat orang lain dan dapatkan inspirasi dengan me-remix project yang ada di Galeri Aplikasi.
- Lihat playlist YouTube untuk kumpulan tutorial coding nuansa AI Studio yang akan membantu Anda memulai.