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.

App Prototyping agent adalah alur pengembangan tanpa coding 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 ini akan membuat blueprint, kode, serta 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 flow 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, membatalkan perubahan, memublikasikan aplikasi, dan memantau performanya—semuanya dari Firebase Studio.

Memulai

Untuk mulai menggunakan App Prototyping agent, ikuti langkah-langkah berikut:

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

  2. Di kolom Prototype an app with AI, jelaskan ide aplikasi Anda dalam bahasa sehari-hari.

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

  3. Klik Prototype with AI.

    App Prototyping agent menampilkan blueprint aplikasi, yang menyediakan nama aplikasi yang diusulkan, fitur inti, dan pedoman gaya.

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

    • Klik Customize dan edit blueprint secara langsung. Buat perubahan, lalu klik Save.

    • Di kolom Describe... di panel chat, tambahkan pertanyaan dan konteks sebagai klarifikasi. Anda juga dapat mengupload gambar tambahan.

  5. Saat Anda menyetujui blueprint, klik Prototype this App.

    Gemini akan 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 Auto-generate, Firebase Studio akan menyediakan project Firebase dan kunci Gemini API untuk Anda.

Setelah aplikasi awal dibuat, Anda dapat:

  • Meninjau 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 Melihat pratinjau aplikasi Anda.

  • Menguji dan melakukan iterasi menggunakan bahasa alami: Uji aplikasi Anda secara menyeluruh dan gunakan App Prototyping agent untuk melakukan iterasi pada kode dan blueprint hingga Anda puas.

    Saat berada dalam Prototyper mode, you can also use the following helpful features:

    • Klik Ikon Annotate Annotate untuk menggambar langsung di jendela Pratinjau. Gunakan alat bentuk, gambar, dan teks yang tersedia, beserta perintah teks opsional, untuk menjelaskan secara visual apa yang ingin Anda ubah pada App Prototyping agent.

    • Klik Pilih ikon Select untuk memilih elemen tertentu dan memasukkan petunjuk untuk App Prototyping agent. Hal ini memungkinkan Anda dengan cepat menargetkan ikon, tombol, bagian teks, atau elemen lainnya. Saat mengklik gambar, Anda juga memiliki opsi untuk menelusuri dan memilih gambar stok dari Unsplash.

  • Men-debug dan melakukan iterasi langsung dalam kode: Klik Ikon tombol kode Switch to Code 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 ikon kilauan Gemini di bagian bawah ruang kerja.

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

  • Memantau dan mengoptimalkan aplikasi dan fitur AI Anda: Pantau performa dan penggunaan aplikasi web Anda dengan kemampuan observasi di App Hosting dan flow AI generatif Anda dengan Firebase Telemetry di Genkit. Pelajari lebih lanjut di Memantau aplikasi web.

Langkah berikutnya