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

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

Langkah 1: Buat aplikasi Anda

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

  2. Di kolom Buat prototipe aplikasi dengan AI, masukkan deskripsi aplikasi yang ingin Anda bangun. 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.

  3. Klik Prototype with AI.

    Gemini membuat blueprint aplikasi berdasarkan perintah Anda, yang menampilkan nama aplikasi yang diusulkan, fitur yang diperlukan, dan panduan gaya.

  4. Tinjau blueprint dan 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.

  5. Klik Prototype this app. Gemini akan mulai membuat kode aplikasi Anda. Karena deskripsi aplikasi menjelaskan fitur yang memerlukan AI generatif, Gemini akan meminta kunci Gemini API.

  6. Tambahkan kunci Gemini API Anda sendiri atau klik Auto-generate untuk membuat kunci Gemini API.

Langkah 2: Melakukan pengujian, peningkatan kualitas, debug, dan iterasi

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

  1. Meninjau dan berinteraksi dengan aplikasi Anda: Setelah pembuatan kode selesai, pratinjau aplikasi Anda akan muncul. Anda dapat berinteraksi dengan pratinjau secara langsung untuk mengujinya.

  2. Lakukan iterasi pada aplikasi Anda menggunakan bahasa alami: Lanjutkan menggunakan antarmuka chat untuk meminta Gemini menambahkan fitur dan meningkatkan kualitas aplikasi.

  3. Menguji aplikasi: Di panel pratinjau aplikasi, upload gambar yang menampilkan berbagai macam makanan untuk menguji kemampuan aplikasi Anda dalam mengidentifikasi bahan dan memberikan resep. Secara opsional, Anda dapat menggunakan tampilan Code untuk membagikan aplikasi secara publik sementara waktu menggunakan pratinjau publik Firebase Studio.

  4. 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.

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

Setelah menguji aplikasi dan puas dengan hasilnya, 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:

  1. Klik Publish untuk membuat project Firebase baru dan memulai penyiapan App Hosting. Panel Publish your app akan muncul.

  2. Pada langkah Firebase project, catat nama project Firebase yang dibuat untuk Anda, lalu klik Next.

  3. 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.

  4. Klik Next. 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. Kemudian, App Hosting menyiapkan lingkungan yang terkelola sepenuhnya untuk aplikasi Anda di Google Cloud.

  5. Klik Create your first rollout. 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.

  6. Setelah peluncuran selesai, App overview akan muncul dengan URL dan insight aplikasi yang didukung oleh kemampuan observasi App Hosting. Untuk menggunakan domain kustom (seperti example.com atau app.example.com), Anda dapat menambahkan domain kustom di Firebaseconsole, alih-alih domain yang dihasilkan Firebase.

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

(Opsional) Langkah 4: Pantau aplikasi Anda

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

  • Mengklik Create rollout untuk merilis versi baru aplikasi Anda.
  • Membagikan link ke aplikasi Anda atau membuka aplikasi Anda secara langsung di Visit your app.
  • Meninjau ringkasan performa aplikasi Anda selama 7 hari terakhir, termasuk jumlah total permintaan dan status peluncuran terbaru Anda. Mengklik View details untuk mengakses informasi selengkapnya di Firebase console.
  • Melihat grafik jumlah permintaan yang diterima aplikasi Anda selama 24 jam terakhir, yang dikelompokkan menurut kode status HTTP.

Jika menutup panel App overview, Anda dapat membukanya kembali kapan saja dengan mengklik Publish.

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 menghapus aplikasi tersebut.

  • Untuk melakukan rollback situs yang dipublikasikan:

    1. Buka App Hosting di Firebase console.

    2. Temukan backend aplikasi Anda, klik View, lalu klik Rollouts.

    3. Di samping deployment yang ingin Anda roll back, 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 View di bagian aplikasi Firebase Studio.

    2. Di bagian Backend information, klik Manage. 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 sepenuhnya menghapus backend App Hosting, 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 flow AI. Fitur telemetri Genkit memungkinkan Anda memantau performa dan penggunaan flow AI. Data ini dapat membantu Anda mengidentifikasi area yang perlu ditingkatkan, memecahkan masalah, mengoptimalkan perintah dan flow untuk performa dan efisiensi biaya yang lebih baik, serta melacak penggunaan flow Anda dari waktu ke waktu.

Untuk menyiapkan pemantauan di Genkit, tambahkan telemetri ke flow AI Genkit, lalu lihat hasilnya di Firebase console.

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

Untuk menyiapkan pemantauan dalam kode Anda:

  1. Jika Anda belum berada dalam tampilan Code, klik Ikon tombol kode Switch to Code untuk membukanya.

  2. Periksa package.json untuk memverifikasi versi Genkit yang diinstal.

  3. Buka terminal (Ctrl-Shift-C, atau Cmd-Shift-C di MacOS).

  4. 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 memiliki versi 1.0.4, Anda harus menjalankan perintah berikut untuk menginstal plugin:

    npm i --save @genkit-ai/[email protected]

  5. Dari Explorer, luaskan src > ai > flows. Satu atau beberapa file TypeScript yang berisi flow Genkit Anda akan muncul di folder flows.

  6. Klik salah satu flow untuk membukanya.

  7. Di bagian bawah bagian impor file, tambahkan kode berikut untuk mengimpor dan mengaktifkan FirebaseTelemetry:

    import { enableFirebaseTelemetry } from '@genkit-ai/firebase';

enableFirebaseTelemetry();

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:

  1. Buka konsol IAM Google Cloud, pilih project Anda, lalu berikan peran berikut ke App Hosting service account:

    • Monitoring Metric Writer (roles/monitoring.metricWriter)
    • Cloud Trace Agent (roles/cloudtrace.agent)
    • Logs Writer (roles/logging.logWriter)

  2. Publikasikan ulang aplikasi Anda ke App Hosting.

  3. Setelah publikasi selesai, muat dan mulai gunakan aplikasi Anda. Setelah lima menit, aplikasi Anda akan memulai logging data telemetri.

Langkah 3: Pantau fitur AI generatif Anda di Firebase console

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

Untuk memantau fitur AI yang diimplementasikan dengan Genkit:

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

    Genkit mengompilasi Stability metrics berikut:

    • Total requests: Total jumlah permintaan yang diterima oleh flow Anda.
    • Success rate: Persentase permintaan yang berhasil diproses.
    • 95th percentile latency: Latensi persentil ke-95 dari flow Anda, yang merupakan waktu yang diperlukan untuk memproses 95% permintaan.

    • Token usage:

      • Input tokens: Jumlah token yang dikirim ke model dalam perintah.
      • Output tokens: Jumlah token yang dihasilkan oleh model dalam respons.

    • Image usage:

      • Input images: Jumlah gambar yang dikirim ke model dalam perintah.
      • Output images: Jumlah gambar yang dihasilkan oleh model dalam respons.

    Jika Anda meluaskan Stability metrics, 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 lebih lanjut Genkit di Genkit.

Langkah berikutnya