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

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 yang mengidentifikasi item makanan dari gambar atau kamera dalam browser, dan memberikan resep yang berisi bahan-bahan yang diidentifikasi. Kemudian, Anda akan meningkatkan kualitas dan meningkatkan aplikasi, yang pada akhirnya memublikasikan ke Firebase App Hosting.

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

Langkah 1: Buat aplikasi

Login ke Akun Google Anda dan buka Firebase Studio.
Di kolom Membuat prototipe aplikasi dengan AI, masukkan deskripsi aplikasi yang ingin Anda build. Untuk solusi ini, saat membuat aplikasi resep berbasis gambar, Anda dapat menggunakan perintah seperti berikut untuk membuat prototipe aplikasi yang menggunakan kamera, AI generatif:
```
Build a web app that can identify food products from an uploaded picture or
in-browser camera. The app should provide a recipe that contains the
identified ingredients.
```
Tips: Anda juga dapat mengupload gambar untuk menyertai perintah Anda. Misalnya, Anda dapat mengupload gambar yang berisi skema warna yang ingin digunakan aplikasi dan memberi tahu Firebase Studio untuk menggunakannya. Gambar harus berukuran kurang dari 3 MiB.
Klik Buat prototipe dengan AI.

Gemini membuat blueprint aplikasi berdasarkan perintah Anda, yang menampilkan nama aplikasi yang diusulkan, fitur yang diperlukan, dan panduan gaya.
Tinjau blueprint dan buat beberapa perubahan. Misalnya, Anda dapat mengubah nama aplikasi atau skema warna yang diusulkan menggunakan salah satu opsi berikut:
- 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.
Klik Buat prototipe aplikasi ini. Gemini akan mulai membuat kode aplikasi Anda. Karena deskripsi aplikasi menjelaskan fitur yang memerlukan AI generatif, Gemini akan meminta kunci Gemini API.
Tambahkan kunci Gemini API Anda sendiri atau klik Buat otomatis untuk membuat kunci Gemini API.

Penting: Jika Anda memilih Buat otomatis, 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. File 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: Uji, tingkatkan, debug, dan ulangi

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

Tinjau dan berinteraksi dengan aplikasi Anda: Setelah pembuatan kode selesai, pratinjau aplikasi Anda akan muncul. Anda dapat berinteraksi dengan pratinjau secara langsung untuk mengujinya.
Lakukan iterasi pada aplikasi Anda: Lanjutkan menggunakan antarmuka chat untuk meminta Gemini menambahkan fitur dan meningkatkan kualitas aplikasi. Atau, klik Beralih ke Kode untuk membuka tampilan Code, tempat Anda dapat mengedit kode langsung di ruang kerja Firebase Studio.
Uji aplikasi: Di panel pratinjau aplikasi, upload gambar yang menampilkan makanan yang berbeda untuk menguji kemampuan aplikasi Anda dalam mengidentifikasi bahan dan memberikan resep. Secara opsional, Anda dapat menggunakan tampilan Code untuk membagikan aplikasi secara publik dan secara sementara menggunakan pratinjau publik Firebase Studio.
Men-debug aplikasi: Buka Code dengan mengklik Beralih ke Kode untuk membuka tampilan Code, tempat Anda dapat menggunakan fitur pelaporan dan proses debug bawaan Firebase Studio untuk memeriksa, men-debug, dan mengaudit aplikasi. Beralih kembali ke App Prototyping agent kapan saja.

Tips: Dalam tampilan Code, Anda dapat menggunakan Gemini dalam mode percakapan interaktif dan inline. Chat interaktif dapat mendiagnosis masalah, memberikan solusi, dan menjalankan alat untuk membantu memperbaiki aplikasi Anda dengan lebih cepat. Untuk mengaktifkan chat interaktif, klik spark di menu ruang kerja bawah. Untuk mengaktifkan bantuan inline, klik spark di bagian atas menu ruang kerja. Pelajari lebih lanjut di Bantuan AI di Firebase Studio.
Lakukan iterasi: Jika aplikasi tidak berfungsi seperti yang diharapkan, pertajam perintah Anda, gunakan panel chat untuk meminta Gemini meningkatkan kualitas aplikasi, atau edit kode secara langsung Code.

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

Setelah menguji aplikasi dan merasa puas, Anda dapat memublikasikannya ke web dengan Firebase App Hosting.

Saat Anda menyiapkan App Hosting, Firebase Studio akan membuat project Firebase untuk Anda dan memandu Anda menautkan akun Cloud Billing.

Untuk memublikasikan aplikasi ke Firebase App Hosting:

Klik Publish untuk membuat project Firebase baru dan memulai penyiapan App Hosting. Panel Publikasikan aplikasi Anda akan muncul.

Penting: Jika Anda tidak membuat kunci Gemini API secara otomatis, Firebase Studio akan menyediakan project Firebase atas nama Anda saat Anda mengklik Publikasikan. Anda dapat mengakses project Firebase dengan mengklik nama project di bagian atas halaman.
Pada langkah Project Firebase, catat nama project Firebase yang dibuat untuk Anda, lalu klik Berikutnya.
Pada langkah Tautkan akun Cloud Billing, pilih salah satu opsi berikut:
- Pilih akun Cloud Billing yang ingin ditautkan ke project Firebase Anda.
- Jika Anda tidak memiliki akun Cloud Billing atau ingin membuat akun baru, klik Buat akun Cloud Billing. Tindakan ini akan membuka konsol Google Cloud, tempat Anda dapat membuat akun Cloud Billing mandiri baru. Setelah membuat akun, kembali ke Firebase Studio dan pilih akun dari daftar Tautkan 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 Publikasikan. Kemudian, App Hosting menyiapkan lingkungan yang dikelola sepenuhnya untuk aplikasi Anda di Google Cloud.

Penting: Menautkan akun penagihan akan mengupgrade project Anda dari paket harga Spark tanpa biaya ke paket harga Blaze bayar sesuai penggunaan. Pelajari lebih lanjut di harga Firebase Studio.
Klik Buat peluncuran pertama Anda. Firebase Studio meluncurkan peluncuran App Hosting. Proses ini dapat memerlukan waktu hingga sepuluh menit. Untuk mempelajari lebih lanjut apa yang terjadi di balik layar, lihat Proses build App Hosting.

Tips: Jika tidak ingin membuat peluncuran sekarang, Anda dapat mengklik Buat peluncuran nanti.
Setelah peluncuran selesai, Ringkasan aplikasi akan muncul dengan URL dan insight aplikasi yang didukung oleh visibilitas App Hosting. Untuk menggunakan domain kustom (seperti example.com atau app.example.com), bukan domain yang dihasilkan Firebase, Anda dapat menambahkan domain kustom di konsol Firebase.

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

(Opsional) Langkah 4: Pantau aplikasi Anda

Panel Ringkasan aplikasi App Hosting memberikan metrik dan informasi penting tentang aplikasi Anda, sehingga Anda dapat memantau performa aplikasi web menggunakan alat observabilitas bawaan App Hosting. Setelah situs diluncurkan, Anda dapat mengakses ringkasan dengan mengklik Publikasikan. Dari panel ini, Anda dapat:

Klik Create rollout untuk merilis versi baru aplikasi Anda.
Bagikan link ke aplikasi Anda atau buka aplikasi Anda langsung di Kunjungi aplikasi Anda.
Tinjau ringkasan performa aplikasi Anda selama 7 hari terakhir, termasuk jumlah total permintaan dan status peluncuran terbaru Anda. Klik Lihat detail untuk mengakses informasi selengkapnya di konsol Firebase.
Lihat grafik jumlah permintaan yang diterima aplikasi Anda selama 24 jam terakhir, yang dikelompokkan menurut kode status HTTP.

Jika menutup panel Ringkasan aplikasi, Anda dapat membukanya kembali kapan saja dengan mengklik Publikasikan.

Pelajari lebih lanjut cara mengelola dan memantau peluncuran App Hosting di Mengelola peluncuran dan rilis.

(Opsional) Langkah 5: Roll back deployment Anda

Jika telah men-deploy versi aplikasi berturut-turut ke App Hosting, Anda dapat melakukan roll back ke salah satu versi sebelumnya. Anda juga dapat menghapusnya.

Untuk melakukan rollback situs yang dipublikasikan:
1. Buka App Hosting di Firebase console.
2. Temukan backend aplikasi Anda, klik Lihat, lalu klik Peluncuran.
3. Di samping deployment yang ingin Anda rollback, klik More , lalu pilih Roll back to this build, dan konfirmasi.
Pelajari lebih lanjut di Mengelola peluncuran dan rilis.
Untuk menghapus domain App Hosting dari web:
1. Dari Firebase console, buka App Hosting, lalu klik Lihat di bagian aplikasi Firebase Studio.
2. Di bagian Informasi backend, klik Kelola. Halaman Domains akan dimuat.
3. Di samping domain Anda, klik More , lalu pilih Disable domain, dan konfirmasi.
Tindakan ini akan menghapus domain Anda dari web. Untuk menghapus backend App Hosting sepenuhnya, ikuti petunjuk di Menghapus backend.

(Opsional) Langkah 6: Gunakan Pemantauan Genkit untuk fitur yang di-deploy

Anda dapat memantau langkah, input, dan output fitur Genkit dengan mengaktifkan telemetri ke kode alur AI. Fitur telemetri Genkit memungkinkan Anda memantau performa dan penggunaan alur AI. Data ini dapat membantu Anda mengidentifikasi area yang perlu ditingkatkan, memecahkan masalah, mengoptimalkan perintah dan alur untuk performa dan efisiensi biaya yang lebih baik, serta melacak penggunaan alur dari waktu ke waktu.

Untuk menyiapkan pemantauan di Genkit, Anda menambahkan telemetri ke alur AI Genkit, lalu melihat hasilnya di Firebase console.

Langkah 1: Tambahkan telemetri ke kode alur Genkit di Firebase Studio

Untuk menyiapkan pemantauan dalam kode Anda:

Jika Anda belum berada dalam tampilan Code, klik Beralih ke Kode untuk membukanya.
Periksa package.json untuk memverifikasi versi Genkit yang diinstal.
Buka terminal (Ctrl-Shift-C, atau Cmd-Shift-C di MacOS).
Klik di dalam terminal dan instal plugin Firebase, menggunakan versi yang cocok dengan file package.json Anda. Misalnya, jika paket Genkit di package.json Anda berada di versi 1.0.4, Anda harus menjalankan perintah berikut untuk menginstal plugin:
```
npm i --save @genkit-ai/firebase@1.0.4
```
Dari Penjelajah, luaskan src > ai > flows. Satu atau beberapa file TypeScript yang berisi alur Genkit Anda akan muncul di folder flows.
Klik salah satu alur untuk membukanya.

Tips: Perhatikan bagian prompt file: Anda dapat mengeditnya secara manual untuk meningkatkan respons Gemini.
Di bagian bawah bagian impor file, tambahkan kode berikut untuk mengimpor dan mengaktifkan FirebaseTelemetry:
```
import { enableFirebaseTelemetry } from '@genkit-ai/firebase';

enableFirebaseTelemetry();
```
Tips: Untuk mempelajari lebih lanjut opsi telemetri lanjutan di Genkit, lihat Konfigurasi lanjutan.

Langkah 2: Siapkan izin

Firebase Studio mengaktifkan API yang diperlukan untuk Anda saat menyiapkan project Firebase, tetapi Anda juga perlu memberikan izin ke akun layanan App Hosting.

Untuk menyiapkan izin:

Buka konsol IAM Google Cloud, pilih project Anda, lalu berikan peran berikut ke akun layanan Hosting Aplikasi:
- Monitoring Metric Writer (roles/monitoring.metricWriter)
- Agen Cloud Trace (roles/cloudtrace.agent)
- Logs Writer (roles/logging.logWriter)
Publikasikan ulang aplikasi Anda ke App Hosting.
Setelah publikasi selesai, muat aplikasi Anda dan mulai gunakan. Setelah lima menit, aplikasi Anda akan mulai mencatat data telemetri ke dalam log.

Langkah 3: Pantau fitur AI generatif Anda di konsol Firebase

Saat telemetri dikonfigurasi, Genkit mencatat jumlah permintaan, keberhasilan, dan latensi untuk semua alur Anda, dan, untuk setiap alur tertentu, Genkit mengumpulkan metrik stabilitas, menampilkan grafik mendetail, dan mencatat pelacakan yang diambil.

Untuk memantau fitur AI yang diimplementasikan dengan Genkit:

Setelah lima menit, buka Genkit di Firebase console dan tinjau perintah dan respons Genkit.

Genkit mengompilasi Metrik stabilitas berikut:
- Total permintaan: Total jumlah permintaan yang diterima oleh alur Anda.
- Rasio keberhasilan: Persentase permintaan yang berhasil diproses.
- Latensi persentil ke-95: Latensi persentil ke-95 alur Anda, yang merupakan waktu yang diperlukan untuk memproses 95% permintaan.
- Penggunaan token:
  - Token input: Jumlah token yang dikirim ke model dalam perintah.
  - Token output: Jumlah token yang dihasilkan oleh model dalam respons.
- Penggunaan gambar:
  - Gambar input: Jumlah gambar yang dikirim ke model dalam perintah.
  - Gambar output: Jumlah gambar yang dihasilkan oleh model dalam respons.
Jika Anda meluaskan metrik stabilitas, grafik mendetail akan tersedia:
- Volume permintaan dari waktu ke waktu.
- Rasio keberhasilan dari waktu ke waktu.
- Token input dan output dari waktu ke waktu.
- Latensi (persentil ke-95 dan 50) dari waktu ke waktu.

Pelajari Genkit lebih lanjut di Genkit.

Langkah berikutnya

Pelajari cara mengembangkan aplikasi di ruang kerja Firebase Studio.
Pelajari lebih lanjut bantuan AI di Firebase Studio.