Mulai menggunakan agen Pembuatan Prototipe Aplikasi

Firebase Studio menyertakan antarmuka berbasis web yang memungkinkan Anda membuat prototipe dan membuat aplikasi web yang berfokus pada AI dengan cepat menggunakan perintah multimodal, termasuk bahasa alami, gambar, dan alat gambar. Agen ini mendukung aplikasi Next.js, dengan platform dan framework lain yang direncanakan di masa mendatang.

Agen Pembuatan Prototipe Aplikasi adalah alur pengembangan tanpa kode yang disederhanakan yang menggunakan AI generatif untuk mengembangkan, menguji, melakukan iterasi, dan memublikasikan aplikasi web agentic full-stack. Anda mendeskripsikan ide aplikasi dalam bahasa alami dengan gambar opsional, dan agen akan membuat blueprint, kode, dan pratinjau web aplikasi. Untuk membantu pengembangan dan publikasi aplikasi full-stack, Firebase Studio dapat menyediakan layanan berikut secara otomatis untuk Anda:

  • Jika aplikasi Anda menggunakan AI: Firebase Studio menambahkan Gemini Developer API ke aplikasi Anda, menggunakan kecanggihan alur Genkit untuk digunakan dengan Gemini. Anda dapat menggunakan kunci Gemini API Anda sendiri atau mengizinkan Firebase Studio menyediakan project Firebase dan kunci Gemini API untuk Anda.
  • Jika Anda ingin memublikasikan aplikasi ke web: Firebase Studio membuat project dan menyediakan cara cepat untuk memublikasikan aplikasi dengan Firebase App Hosting.

Anda dapat meningkatkan kualitas aplikasi menggunakan bahasa alami, gambar, dan alat gambar, mengedit kode secara langsung, mengembalikan perubahan, memublikasikan aplikasi, dan memantau performanya—semuanya dari Firebase Studio.

Mulai

Untuk memulai App Prototyping agent, ikuti langkah-langkah berikut:

  1. Login ke Akun Google Anda dan buka Firebase Studio.

  2. Di kolom Membuat prototipe aplikasi dengan AI, deskripsikan ide aplikasi Anda dalam bahasa alam.

    Jika perlu, tambahkan gambar untuk menyertai perintah Anda. Ini dapat berupa diagram alur penggunaan aplikasi yang ideal, atau skema warna yang ingin Anda ikuti oleh Firebase Studio. Gambar dapat berukuran maksimum 3 MiB.

  3. Klik Buat prototipe dengan AI.

    Agen Prototipe Aplikasi menampilkan blueprint aplikasi, yang menyediakan nama aplikasi yang diusulkan, fitur inti, dan panduan gaya.

  4. Tinjau blueprint. Anda dapat meminta Gemini untuk melakukan peningkatan dan perubahan, serta mengedit blueprint secara langsung:

    • Klik Sesuaikan dan edit blueprint secara langsung. Lakukan perubahan, lalu klik Simpan.

    • Di kolom Jelaskan... di panel chat, tambahkan pertanyaan dan konteks yang menjelaskan. Anda juga dapat mengupload gambar tambahan.

  5. Saat Anda menyetujui blueprint, klik Buat Prototipe Aplikasi ini.

    Gemini membuat kode dari blueprint dan menampilkan pratinjau web untuk Anda tinjau.

  6. Jika aplikasi Anda menggunakan AI, Anda akan diminta untuk menambahkan atau membuat kunci Gemini API. Jika Anda mengklik Buat otomatis, Firebase Studio akan menyediakan project Firebase dan kunci Gemini API untuk Anda.

Setelah aplikasi awal dibuat, Anda dapat:

  • Tinjau dan berinteraksi dengan aplikasi Anda: Setelah pembuatan kode selesai, pratinjau aplikasi Anda akan muncul. Anda dapat berinteraksi dengan pratinjau secara langsung untuk mengujinya. Pelajari lebih lanjut di Mempratinjau aplikasi Anda.

  • Uji dan lakukan iterasi menggunakan natural language: Uji aplikasi Anda secara menyeluruh dan gunakan App Prototyping agent untuk melakukan iterasi pada kode dan blueprint hingga Anda puas.

  • Men-debug dan melakukan iterasi langsung dalam kode: Klik Ikon tombol kode Beralih ke Kode untuk membuka tampilan Code, tempat Anda dapat melihat semua file aplikasi dan mengubah kode secara langsung. Anda dapat beralih kembali ke Prototyper mode at any time.

    Saat berada dalam tampilan Code, Anda juga dapat menggunakan fitur berguna berikut:

    • Fitur proses debug dan pelaporan bawaan Firebase Studio untuk memeriksa, men-debug, dan mengaudit aplikasi Anda.

    • Bantuan AI menggunakan Gemini di Firebase baik inline dalam kode Anda maupun menggunakan chat interaktif (keduanya tersedia secara default). Chat interaktif dapat mendiagnosis masalah, memberikan solusi, dan menjalankan alat untuk membantu memperbaiki aplikasi Anda dengan lebih cepat. Untuk mengakses chat, klik sparkGemini di bagian bawah ruang kerja.

  • Memublikasikan aplikasi dengan Firebase App Hosting: Klik Publikasikan untuk memublikasikan aplikasi ke App Hosting.

  • Pantau dan optimalkan aplikasi dan fitur AI Anda: Pantau performa dan penggunaan aplikasi web Anda dengan observabilitas di App Hosting dan alur AI generatif Anda dengan Firebase Telemetry di Genkit. Pelajari lebih lanjut di Memantau aplikasi web.

Langkah berikutnya