Mengembangkan, memublikasikan, dan memantau aplikasi web full stack dengan App Prototyping agent

Panduan ini menunjukkan cara menggunakan App Prototyping agent untuk mengembangkan dan memublikasikan aplikasi full stack dengan cepat dengan bantuan Gemini di Firebase. Anda akan menggunakan perintah bahasa alami untuk membuat aplikasi Next.js. Aplikasi ini akan mengidentifikasi item makanan dari gambar atau kamera di browser yang disediakan oleh pengguna yang login serta menghasilkan resep yang berisi bahan makanan yang diidentifikasi. Kemudian, pengguna dapat memilih untuk menyimpan resep tersebut dalam database yang dapat ditelusuri.

Setelah itu, Anda akan menyempurnakan dan meningkatkan kualitas aplikasi sebelum memublikasikannya ke Firebase App Hosting.

Teknologi lain yang akan Anda gunakan saat melanjutkan panduan ini meliputi:

Langkah 1: Buat aplikasi Anda

Login ke Akun Google Anda dan buka Firebase Studio.
Di kolom Prototype an app with AI, masukkan perintah berikut, yang akan membuat aplikasi resep berbasis gambar yang menggunakan kamera browser dan AI generatif.

Misalnya, Anda dapat memasukkan perintah seperti berikut untuk membuat aplikasi pembuatan resep:
```
Use secure coding practices to create an error-free web app that lets
users upload a photo or take a picture with their browser
camera. The app identifies the food in the picture and generates a
recipe and accompanying image that includes that food.

If no food product is identified, generate a random dessert recipe.
```
Tips: Untuk mendapatkan hasil terbaik, berikan perintah yang sespesifik mungkin. Sertakan fitur yang Anda inginkan, alur kerja pengguna, dan persyaratan data. Jika perlu, klik Improve prompt untuk meminta Gemini menyempurnakan perintah awal Anda. Pahami juga bahwa proses pengembangan yang paling efektif dengan AI itu bersifat iteratif dan Anda dapat terus meningkatkan kualitas dan menambahkan fitur secara kolaboratif dengan Gemini. Pelajari lebih lanjut cara menulis perintah yang efektif.
Jika perlu, upload gambar untuk menyertai perintah Anda. Misalnya, Anda dapat mengupload gambar yang berisi skema warna yang akan digunakan aplikasi dan memberi tahu Firebase Studio untuk menggunakannya. Gambar harus berukuran kurang dari 3 MiB.
Klik Prototype with AI.

Agen Pembuatan Prototipe Aplikasi membuat blueprint aplikasi berdasarkan perintah Anda, yang menampilkan nama aplikasi yang diusulkan, fitur yang diperlukan, dan panduan gaya.
Tinjau blueprint. Jika perlu, buat beberapa perubahan. Misalnya, Anda dapat mengubah nama aplikasi atau skema warna yang diusulkan menggunakan salah satu opsi berikut:
- 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.
Klik Prototype this app.

Penting: Gemini dapat menghasilkan output yang seolah masuk akal, tetapi mengandung fakta yang salah. Teknologi ini mungkin merespons dengan informasi yang tidak akurat yang tidak merepresentasikan pandangan Google. Validasi semua output dari Gemini sebelum Anda menggunakannya dan jangan menggunakan kode yang dihasilkan dan belum diuji dalam lingkungan produksi. Jangan masukkan informasi identitas pribadi (PII) atau data pengguna ke dalam percakapan.
Agen Pembuatan Prototipe Aplikasi akan mulai membuat kode aplikasi Anda.
- Karena aplikasi Anda menggunakan AI, Anda akan diminta untuk menambahkan atau membuat kunci Gemini API. Jika Anda mengklik Auto-generate, App Prototyping agent akan menyediakan project Firebase dan kunci Gemini API untuk Anda.
Penting: Jika Anda memilih Auto-generate, App Prototyping agent akan membuat project Firebase untuk Anda dengan awalan yang cocok dengan nama ruang kerja Firebase Studio dan membuat kunci Gemini API baru dalam project. Agen ini juga menyimpan kunci dalam ruang kerja Firebase Studio Anda dalam file .env. Untuk mengakses project baru kapan saja, klik nama project di bagian atas halaman. Untuk mengakses kunci Gemini API guna menyalin atau menghapusnya di masa mendatang, gunakan Google Cloud console.

Langkah 2: Lakukan pengujian, peningkatan kualitas, proses debug, dan iterasi

Setelah aplikasi awal dibuat, Anda dapat menguji, meningkatkan kualitas, men-debug, dan melakukan iterasi.

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.
Menambahkan Cloud Firestore dan Firebase Authentication: Selama fase iterasi, Anda dapat meminta App Prototyping agent untuk menambahkan autentikasi pengguna dan database menggunakan Cloud Firestore dan Firebase Authentication. Misalnya, beri pengguna kemampuan untuk menyimpan dan mendownload resep dengan perintah seperti berikut:
```
Add user authentication to the app. Authenticated users can:

  - Download the recipe and its generated image as a PDF (Print).

  - Save the recipe as public or private and make accessible to a search
    feature. For now, just save the text, not the image, to the database.

Important: Only authenticated users can download the PDF.
```
Tips: App Prototyping agent dapat menambahkan Cloud Firestore dan Firebase Authentication ke aplikasi Anda selama fase iterasi, bukan dalam blueprint aplikasi awal.
Perbaiki error saat terjadi: Pada umumnya, App Prototyping agent akan meminta Anda untuk memperbaiki error yang muncul. Klik Fix Error untuk mengizinkan perangkat mencoba memperbaikinya.

Jika Anda menerima error yang tidak diminta untuk diperbaiki secara otomatis, salin error dan konteks yang relevan (misalnya, "Can you fix this error in my Firebase initialization code?") ke jendela chat dan kirim ke Gemini.

Tips: Gemini menjelaskan penalarannya, tetapi Anda juga dapat memintanya untuk menjelaskan rencananya sebelum menjalankannya.
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 view, you can also use the following features:
- Klik 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 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.
Secara opsional, Anda dapat mengklik Share preview link untuk membagikan aplikasi secara publik dan sementara waktu menggunakan pratinjau publik Firebase Studio.
Buat project Firebase: Agen Pembuatan Prototipe Aplikasi menyediakan project Firebase atas nama Anda saat Anda:
- Membuat kunci Gemini API secara otomatis
- Meminta untuk menghubungkan aplikasi Anda ke project Firebase
- Meminta bantuan untuk menghubungkan aplikasi Anda ke layanan Firebase, seperti Cloud Firestore atau Firebase Authentication
- Klik tombol Publish dan siapkan Firebase App Hosting
Untuk mengubah project Firebase yang terhubung ke ruang kerja Anda, berikan perintah pada App Prototyping agent dengan menyertakan project ID yang ingin Anda gunakan. Misalnya, "Beralih ke project Firebase dengan ID <your-project-id>."
Menguji aplikasi dan memverifikasi aturan database Cloud Firestore: Di panel pratinjau aplikasi, upload gambar yang menampilkan berbagai macam makanan untuk menguji kemampuan aplikasi Anda dalam mengidentifikasi bahan makanan dan membuat serta menyimpan resep.

Login sebagai pengguna yang berbeda dan buat resep: pastikan pengguna terautentikasi dapat melihat resep pribadi dan resep mereka, serta semua pengguna dapat melihat resep publik.

Saat Anda meminta App Prototyping agent untuk menambahkan Cloud Firestore, App Prototyping agent akan menulis dan men-deploy aturan database Cloud Firestore untuk Anda. Tinjau aturan di Firebase console.
Men-debug dan melakukan iterasi langsung dalam kode: Klik 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 baik sebagai bagian dari kode Anda maupun menggunakan chat interaktif Gemini (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.
  
  Catatan: Aplikasi yang dibuat dengan App Prototyping agent secara default menggunakan Prototyper chat in Code view. To use Gemini interactive chat. Untuk mengubahnya, di bagian Gemini, klik +, lalu pilih Chat Baru. Untuk kembali ke Prototyper chat, click history Recent chats, and then choose Prototyper chat.
- Akses Firebase Local Emulator Suite untuk melihat database dan data autentikasi. Untuk membuka emulator di ruang kerja Anda:
  1. Klik Switch to Code dan buka ekstensi Firebase Studio (Ctrl+',Ctrl+', atau Cmd+',Cmd+' di MacOS).
  2. Scroll ke Backend ports dan luaskan.
  3. Di kolom Actions yang sesuai dengan Port 4000, klik Open in new window.
Test and measure your generative AI feature performance: Anda dapat menggunakan UI Developer Genkit untuk menjalankan flow AI Genkit, menguji, men-debug, berinteraksi dengan berbagai model, menyempurnakan perintah, dan banyak lagi.

Untuk memuat flow Genkit di UI Developer Genkit dan mulai menguji:
1. Dari terminal di ruang kerja Firebase Studio, jalankan perintah berikut untuk mendapatkan kunci Gemini API dan memulai server Genkit:
```
 npm run genkit:watch
```
2. Klik link UI Developer Genkit. UI Developer Genkit akan terbuka di jendela baru dengan flow, perintah, penyemat, dan pilihan berbagai model yang tersedia.
Pelajari UI Developer Genkit lebih lanjut di Alat Developer Genkit.

(Opsional) Langkah 3: Publikasikan aplikasi Anda dengan App Hosting

Setelah menguji aplikasi dan puas dengan hasilnya di ruang kerja, Anda dapat memublikasikannya ke web dengan Firebase App Hosting.

Saat Anda menyiapkan App Hosting, Firebase Studio akan membuatkan project Firebase untuk Anda (jika belum dibuat dengan membuat kunci Gemini API secara otomatis atau layanan backend lain) dan memandu Anda menautkan akun Cloud Billing.

Untuk memublikasikan aplikasi:

Klik Publish untuk menyiapkan project Firebase dan memublikasikan aplikasi Anda. Panel Publish your app akan muncul.

Penting: Jika Anda tidak membuat otomatis kunci Gemini API atau meminta App Prototyping agent untuk membuat project Firebase, Firebase Studio akan menyediakan project Firebase atas nama Anda saat Anda mengklik Publish. Anda dapat mengakses project Firebase dengan mengklik nama project di bagian atas halaman.
Pada langkah project Firebase, App Prototyping agent akan menampilkan project Firebase yang terkait dengan ruang kerja. Jika project Firebase belum ada, App Prototyping agent akan membuatkan project baru untuk Anda. Klik Next untuk melanjutkan.
Pada langkah Link Cloud Billing account, pilih salah satu opsi berikut:
- Pilih akun Cloud Billing yang ingin Anda tautkan ke project Firebase Anda.
- Jika Anda tidak memiliki akun Cloud Billing atau ingin membuat akun baru, klik Create a Cloud Billing account. Tindakan ini akan membuka konsol Google Cloud, tempat Anda dapat membuat akun Cloud Billing layanan mandiri baru. Setelah membuat akun, kembali ke Firebase Studio dan pilih akun dari daftar Link Cloud Billing.
Klik Berikutnya. Firebase Studio menautkan akun penagihan ke project yang terkait dengan ruang kerja Anda, yang dibuat saat Anda membuat kunci Gemini API secara otomatis atau saat Anda mengklik Publish.

Penting: Firebase App Hosting memerlukan akun Cloud Billing. Saat Anda menautkan akun penagihan ke project Firebase, project Anda akan otomatis diupgrade ke paket harga Blaze bayar sesuai penggunaan dan penggunaan layanan Gemini API serta layanan Firebase dan Google Cloud lainnya akan diupgrade ke tingkat berbayar. Anda akan dikenai biaya untuk penggunaan layanan berbayar yang melebihi kuota tanpa biaya. Pelajari lebih lanjut di Memahami biaya App Hosting, Harga Firebase, dan Harga Gemini Developer API.
Klik Set up services. Agen Pembuatan Prototipe Aplikasi mulai menyediakan layanan Firebase.
Klik Publish now. Firebase Studio akan menyiapkan layanan Firebase, lalu meluncurkan App Hosting. Proses ini dapat memakan waktu beberapa menit. Untuk mempelajari lebih lanjut apa yang terjadi di balik layar, lihat Proses build App Hosting.

Tips: Jika tidak ingin memublikasikan sekarang, Anda dapat mengklik Publish later.
Setelah langkah publikasi selesai, Ringkasan aplikasi akan muncul dengan URL dan insight aplikasi yang didukung oleh kemampuan observasi App Hosting. Untuk menggunakan domain kustom (seperti contoh.com atau apl.contoh.com), Anda dapat menambahkan domain kustom di Firebase console, alih-alih domain yang dihasilkan Firebase.

Untuk mengetahui informasi selengkapnya tentang App Hosting, lihat Memahami App Hosting dan cara kerjanya.

(Direkomendasikan) Langkah 4: Uji aplikasi yang dipublikasikan

Setelah publikasi selesai dan aplikasi Anda di-deploy ke Firebase, Cloud Firestore dan Firebase Authentication siap diuji dalam lingkungan produksi.

Melihat data Cloud Firestore dan Firebase Authentication di Firebase console

Anda dapat melihat data live dari aplikasi di Firebase console setelah dipublikasikan.

Untuk melihat database Cloud Firestore live Anda, buka Firebase console dan pilih Build > Firestore Database dari menu navigasi.

Dari sini, Anda dapat memeriksa data tersimpan, melihat dan menguji aturan keamanan, serta membuat indeks. Pelajari lebih lanjut di Cloud Firestore.
Untuk melihat database Firebase Authentication live Anda, buka Firebase console dan pilih Build > Authentication dari menu navigasi.

Dari sini, Anda dapat memeriksa konfigurasi autentikasi dan pengguna aplikasi. Pelajari lebih lanjut di Firebase Authentication.

Menguji aturan Cloud Firestore dalam lingkungan produksi

Setelah memublikasikan aplikasi, Anda harus menguji aturan keamanan Cloud Firestore lagi terhadap lingkungan produksi. Hal ini membantu memastikan bahwa data Anda dapat diakses oleh pengguna yang diberi otorisasi dan dilindungi dari akses tidak sah.

Anda dapat menguji aturan menggunakan semua metode berikut:

Pengujian Aplikasi: Lakukan interaksi dengan aplikasi yang di-deploy dengan melakukan operasi yang memicu berbagai pola akses data (baca, tulis, hapus) untuk berbagai peran atau status pengguna. Pengujian di dunia nyata ini membantu mengonfirmasi bahwa aturan Anda diterapkan dengan benar dalam praktiknya.
Rules Playground: Untuk pemeriksaan yang ditargetkan, gunakan Rules Playground di Firebase console. Alat ini memungkinkan Anda menyimulasikan permintaan (baca, tulis, hapus) terhadap database Cloud Firestore menggunakan aturan produksi Anda. Anda dapat menentukan status autentikasi pengguna, jalur ke data, dan jenis operasi untuk melihat apakah aturan Anda mengizinkan atau menolak akses sebagaimana mestinya.

Catatan: Saat Anda men-deploy aturan keamanan selama proses publikasi atau dengan Firebase CLI, aturan yang ditetapkan di direktori project Anda akan menimpa aturan apa pun yang ada di Firebase console. Oleh karena itu, jika memilih untuk menentukan atau mengedit aturan keamanan menggunakan Firebase console, pastikan Anda juga memperbarui aturan yang ditetapkan di direktori project.
Pengujian Unit: Untuk pengujian yang lebih komprehensif, Anda dapat menulis pengujian unit untuk aturan keamanan Anda. Backend pratinjau Firebase Studio yang didukung oleh Firebase Local Emulator Suite memungkinkan Anda menjalankan pengujian ini secara lokal, dengan menyimulasikan perilaku aturan produksi Anda. Cara ini efektif untuk memverifikasi logika aturan yang kompleks dan mengonfirmasi cakupan untuk berbagai skenario. Setelah deployment, Anda harus memeriksa kembali bahwa pengujian unit Anda yang menggunakan emulator berfungsi seperti yang diharapkan dan mencakup semua skenario.