Men-deploy ke Firebase App Hosting dengan aplikasi Next.js

1. Sebelum memulai

Dalam codelab ini, Anda akan mempelajari cara men-deploy ke Firebase App Hosting menggunakan aplikasi web Next.js yang disebut Friendly Eats, yaitu situs yang menyediakan ulasan restoran.

Aplikasi web Friendly Eats

Aplikasi web yang sudah selesai menawarkan fitur berguna yang menunjukkan bagaimana Firebase dapat membantu Anda membangun aplikasi Next.js.

  • Build dan deployment otomatis: Codelab ini menunjukkan cara menggunakan Firebase App Hosting untuk otomatis membangun dan men-deploy kode Next.js Anda setiap kali Anda melakukan push ke cabang yang dikonfigurasi.
  • Login dan logout: Aplikasi web yang sudah selesai memungkinkan pengguna login/logout dengan Google. Login dan persistensi pengguna dikelola sepenuhnya melalui Firebase Authentication.
  • Gambar: Aplikasi web yang sudah selesai memungkinkan pengguna yang login mengupload gambar restoran. Aset gambar disimpan di Cloud Storage for Firebase. Firebase JavaScript SDK menyediakan URL publik untuk gambar yang diupload. URL publik ini kemudian disimpan di dokumen restoran yang relevan di Cloud Firestore.
  • Filter: Dengan aplikasi web yang sudah selesai, pengguna yang login dapat memfilter daftar restoran berdasarkan kategori, lokasi, dan harga. Anda juga dapat menyesuaikan metode pengurutan yang digunakan. Data diakses dari Cloud Firestore, dan kueri Firestore diterapkan berdasarkan filter yang digunakan.
  • Ulasan: Dengan aplikasi web yang sudah selesai, pengguna yang login dapat memposting ulasan tentang restoran yang terdiri dari rating bintang dan pesan berbasis teks. Informasi ulasan disimpan di Cloud Firestore.
  • Ringkasan ulasan: Aplikasi web yang telah selesai secara otomatis meringkas ulasan menggunakan model Gemini. Ringkasan buatan AI disimpan di Cloud Firestore.

Prasyarat

  • Pengetahuan tentang Next.js dan JavaScript

Yang akan Anda pelajari

  • Cara menggunakan Firebase dengan Router Aplikasi Next.js dan rendering sisi server
  • Cara mengizinkan panggilan ke Gemini API menggunakan Secret khusus sisi server

Yang Anda butuhkan

  • Browser pilihan Anda, seperti Google Chrome
  • Akses ke IDX.dev (ruang kerja berbasis web)
  • Akun Google untuk pembuatan dan pengelolaan project Firebase Anda
  • Akun GitHub (tidak harus akun email yang sama dengan di atas)

2. Menyiapkan lingkungan pengembangan dan repositori GitHub Anda

Codelab ini menyediakan codebase awal aplikasi dan mengandalkan Firebase CLI dan IDX.dev.

Buat repositori GitHub baru dan impor ke IDX

Firebase App Hosting memungkinkan Anda menyiapkan repositori GitHub sehingga repositori tersebut membangun dan men-deploy kode Next.js Anda setiap kali Anda mengirim ke cabang yang dikonfigurasi.

  1. Buat repositori GitHub baru untuk codelab ini: https://github.com/new. Beri nama apa pun yang Anda inginkan, misalnya MyFriendlyEatsCodelab.
  2. Salin URL repositori baru Anda. Tampilannya akan seperti ini:
    https://github.com/USER_NAME/REPOSITORY_NAME.git
  3. Buka https://idx.google.com dan login.
  4. Klik Import a repo dan tempel URL GitHub yang Anda salin.
    IDX akan meminta Anda untuk menautkan ke GitHub, lalu akan meng-clone repositori (kosong) Anda.

Melihat repositori kode sumber codelab

Lihat sumber codelab di https://github.com/firebase/friendlyeats-web. Repositori friendlyeats-web berisi project contoh untuk beberapa platform.

Codelab yang sedang Anda kerjakan ini hanya berfokus pada Firebase App Hosting dan Gemini API, serta merupakan versi singkat dari codelab lengkap "Integrate Firebase with a Next.js App". Codelab yang disingkat ini mengharuskan Anda hanya menggunakan kode sumber di cabang #io-connect dari repositori friendlyeats-web, khususnya direktori nextjs-step10.

Perhatikan direktori tambahan berikut dari repositori friendlyeats-web. Meskipun Anda tidak memerlukan direktori ini untuk codelab ini, sebaiknya ketahui apa saja direktori tersebut.

Salin sumber codelab ke repositori baru Anda

Berikut cara menyalin direktori nextjs-step10 ke repositori Anda sendiri:

  1. Di IDX, buka terminal menggunakan Menu > Terminal > New Terminal.
  2. Gunakan paket npm giget untuk mengambil hanya direktori nextjs-step10 dari cabang io-connect:
    npx giget@latest gh:firebase/friendlyeats-web/nextjs-step10#io-connect . --force
  3. Melacak perubahan secara lokal dengan git:
    git add -A
git commit -m "codelab starting point"
git branch -M main
git push -u origin main

Sekarang Anda akan melihat kode awal di repositori GitHub Anda.

3. Meninjau codebase awal

Di bagian ini, Anda akan meninjau beberapa area codebase awal aplikasi yang akan ditambahi fungsi dalam codelab ini.

Struktur folder dan file

Tabel berikut berisi ringkasan struktur folder dan file aplikasi:

Folder dan file

Deskripsi

src/components

Komponen React untuk filter, header, detail restoran, dan ulasan

src/lib

Fungsi utilitas yang tidak harus terikat dengan React atau Next.js

src/lib/firebase

Kode khusus Firebase dan konfigurasi Firebase

public

Aset statis di aplikasi web, seperti ikon

src/app

Memilih rute dengan Router Aplikasi Next.js

src/app/restaurant

Pengendali rute API

package.json dan package-lock.json

Dependensi project dengan npm

next.config.js

Konfigurasi khusus Next.js (tindakan server diaktifkan)

jsconfig.json

Konfigurasi layanan bahasa JavaScript

Komponen server dan klien

Aplikasi ini adalah aplikasi web Next.js yang menggunakan Router Aplikasi. Rendering server digunakan di seluruh aplikasi. Misalnya, file src/app/page.js adalah komponen server yang bertanggung jawab atas halaman utama. File src/components/RestaurantListings.jsx adalah komponen klien yang ditunjukkan oleh perintah "use client" di awal file.

Pernyataan impor

Di beberapa file, Anda mungkin melihat pernyataan impor seperti berikut:

import RatingPicker from "@/src/components/RatingPicker.jsx";

Aplikasi menggunakan simbol @ untuk menghindari jalur impor relatif yang kaku dan dimungkinkan oleh alias jalur.

API khusus Firebase

Semua kode Firebase API digabungkan dalam direktori src/lib/firebase. Setiap komponen React kemudian mengimpor fungsi yang digabungkan dari direktori src/lib/firebase, bukan mengimpor fungsi Firebase secara langsung.

Data tiruan

Data restoran dan ulasan tiruan terdapat dalam file src/lib/randomData.js. Data dari file tersebut disusun dalam kode di file src/lib/fakeRestaurants.js.

4. Menyiapkan project Firebase

Di bagian ini, Anda akan menyiapkan project Firebase dan mengaitkan aplikasi web Firebase dengan project tersebut. Anda juga akan menyiapkan layanan Firebase yang digunakan oleh aplikasi web contoh.

Membuat project Firebase

  1. Login ke konsol Firebase menggunakan Akun Google yang sama dengan yang Anda gunakan pada langkah sebelumnya.
  2. Klik tombol untuk membuat project baru, lalu masukkan nama project (misalnya, FriendlyEats Codelab).
  3. Klik Lanjutkan.
  4. Jika diminta, tinjau dan setujui persyaratan Firebase, lalu klik Continue.
  5. (Opsional) Aktifkan bantuan AI di Firebase console (disebut "Gemini di Firebase").
  6. Untuk codelab ini, Anda tidak memerlukan Google Analytics, jadi nonaktifkan opsi Google Analytics.
  7. Klik Buat project, tunggu hingga project Anda disediakan, lalu klik Lanjutkan.

Mengupgrade paket harga Firebase Anda

Untuk menggunakan Firebase App Hosting dan Cloud Storage for Firebase, project Firebase Anda harus menggunakan paket harga bayar sesuai penggunaan (Blaze), yang berarti project tersebut ditautkan ke akun Penagihan Cloud.

  • Akun Penagihan Cloud memerlukan metode pembayaran, seperti kartu kredit.
  • Jika Anda baru menggunakan Firebase dan Google Cloud, periksa apakah Anda memenuhi syarat untuk mendapatkan kredit sebesar$300 dan akun Penagihan Cloud Uji Coba Gratis.
  • Jika Anda melakukan codelab ini sebagai bagian dari acara, tanyakan kepada penyelenggara apakah ada kredit Cloud yang tersedia.

Untuk mengupgrade project Anda ke paket Blaze, ikuti langkah-langkah berikut:

  1. Di Firebase console, pilih upgrade your plan.
  2. Pilih paket Blaze. Ikuti petunjuk di layar untuk menautkan akun Penagihan Cloud ke project Anda.
    Jika perlu membuat akun Penagihan Cloud sebagai bagian dari upgrade ini, Anda mungkin perlu kembali ke alur upgrade di Firebase console untuk menyelesaikan upgrade.

5. Membuat backend App Hosting

Di bagian ini, Anda akan menyiapkan backend App Hosting untuk memantau cabang di repositori git Anda. Anda juga akan mengonfigurasi semua layanan yang akan berkomunikasi dengan backend.

Di akhir bagian ini, Anda akan memiliki backend App Hosting yang terhubung ke repositori Anda di GitHub yang akan otomatis membangun ulang dan meluncurkan versi baru aplikasi Anda setiap kali Anda mengirim commit baru ke cabang main.

Membuat backend

  1. Di Firebase console, buka halaman App Hosting:Status nol konsol App Hosting, dengan tombol 'Mulai'
  2. Klik Mulai untuk memulai alur pembuatan backend.
  3. Ikuti perintah untuk mengimpor dan menghubungkan repositori GitHub yang Anda buat sebelumnya.
  4. Tetapkan setelan deployment:
    • Pertahankan direktori root sebagai /
    • Tetapkan cabang aktif ke main
    • Mengaktifkan peluncuran otomatis
  5. Beri nama backend Anda friendlyeats-codelab (atau nama backend pilihan Anda). Hal ini menjadi bagian dari domain yang digunakan untuk mengakses backend.
    Alur kerja ini juga otomatis membuat Aplikasi Web Firebase di project Firebase Anda. Di bagian selanjutnya dalam codelab ini, Anda akan menggunakan nilai konfigurasi Aplikasi Web ini untuk menghubungkan codebase ke project Firebase Anda.
  6. Klik Selesaikan dan deploy. Setelah beberapa saat, Anda akan diarahkan ke halaman baru tempat Anda dapat melihat status backend App Hosting baru.
  7. Dari dasbor App Hosting, salin domain baru Anda.
    Domain ini akan memiliki pola seperti BACKEND_ID--PROJECT_ID.REGION.hosted.app. Anda akan memerlukan domain ini untuk menyiapkan Firebase Authentication nanti.

Mungkin perlu waktu beberapa menit agar domain mulai berfungsi karena propagasi DNS dan pembuatan sertifikat SSL. Saat backend Anda sedang dibuat, lanjutkan penyiapan project Firebase lainnya dan konfigurasi backend Anda (langkah berikutnya dalam codelab ini).

Setiap kali Anda mengirim commit baru ke cabang main repositori GitHub, Anda akan melihat build dan peluncuran baru dimulai di Firebase console, dan situs Anda akan otomatis diupdate setelah peluncuran selesai.

6. Menyiapkan layanan Firebase lainnya

Meskipun codelab ini hanya berfokus pada Firebase App Hosting dan Gemini API, aplikasi web yang berfungsi memerlukan layanan Firebase lain agar dapat berfungsi. Kode untuk membuat semua layanan ini berfungsi di aplikasi Anda adalah bagian dari codebase yang Anda salin ke repositori GitHub Anda sendiri, tetapi Anda tetap perlu menyiapkan layanan ini di project Firebase Anda.

Menyiapkan Authentication

  1. Di Firebase console, buka Authentication.
  2. Klik Get started.
  3. Di kolom Additional providers, klik Google > Enable.
    1. Di kotak teks Public-facing name for project, masukkan nama, seperti My FriendlyEatsCodelab app.
    2. Dari drop-down Support email for project, pilih alamat email Anda.
    3. Klik Save.
  4. Klik tab Settings di halaman Authentication.
    1. Klik Authorized Domains dari menu sebelah kiri di layar.
    2. Klik Tambahkan Domain, lalu tambahkan domain App Hosting yang baru dibuat (berakhir dengan .hosted.app).
    3. Klik Tambahkan untuk menyimpan.

Menyiapkan Cloud Firestore

  1. Di panel kiri Firebase console, luaskan Build, lalu pilih Firestore database.
  2. Klik Create database.
  3. Biarkan Database ID ditetapkan ke (default).
  4. Pilih lokasi untuk database Anda, lalu klik Berikutnya.
    Untuk aplikasi yang sebenarnya, Anda harus memilih lokasi yang dekat dengan pengguna.
  5. Klik Mulai dalam mode pengujian. Baca pernyataan penyangkalan tentang aturan keamanan.
    Di codelab ini, Anda akan menambahkan Aturan Keamanan untuk mengamankan data. Jangan mendistribusikan atau mengekspos aplikasi ke publik tanpa menambahkan Aturan Keamanan untuk database Anda.
  6. Klik Buat.

Menyiapkan Cloud Storage for Firebase

  1. Di panel kiri Firebase console, luaskan Build, lalu pilih Storage.
  2. Klik Get started.
  3. Pilih lokasi untuk bucket Storage default Anda.
    Bucket di US-WEST1, US-CENTRAL1, dan US-EAST1 dapat memanfaatkan paket"Selalu Gratis" untuk Google Cloud Storage. Bucket di semua lokasi lainnya mengikuti harga dan penggunaan Google Cloud Storage.
  4. Klik Mulai dalam mode pengujian. Baca pernyataan penyangkalan tentang aturan keamanan.
    Di codelab ini, Anda akan menambahkan aturan keamanan untuk mengamankan data. Jangan mendistribusikan atau mengekspos aplikasi ke publik tanpa menambahkan Aturan Keamanan untuk bucket Storage Anda.
  5. Klik Buat.

7. Mengonfigurasi Aplikasi Web Anda

Setelah membuat project Firebase dan mengaktifkan semua layanan Firebase yang digunakan di aplikasi, Anda siap mulai bekerja di IDX untuk mengonfigurasi aplikasi web agar menggunakan layanan tersebut.

Login ke Firebase CLI dalam IDX

IDX sudah menginstal Node.js dan Firebase CLI, jadi Anda dapat melewati penginstalannya dan langsung mulai menyiapkan CLI.

  1. Di terminal dalam IDX, jalankan perintah ini untuk mengonfigurasi CLI agar menggunakan project Firebase yang Anda buat sebelumnya:
    firebase login --no-localhost
firebase use --add
    Saat diminta memasukkan alias, masukkan codelab.
  2. Bergantung pada apakah Anda ingin Firebase mengumpulkan data, masukkan Y atau N. Salah satu opsi dapat digunakan untuk codelab ini.
  3. Di browser, pilih akun Google Anda, lalu klik Allow.

Men-deploy Aturan Keamanan dan indeks

Kode yang Anda salin ke repositori GitHub sudah memiliki kumpulan aturan keamanan untuk Firestore (di firestore.rules) dan untuk Cloud Storage for Firebase (di storage.rules). Setelah Anda men-deploy Aturan Keamanan, data di database dan bucket Anda akan lebih terlindungi dari penyalahgunaan.

Anda juga dapat menggunakan CLI untuk men-deploy sekumpulan indeks untuk Firestore (di firestore.indexes.json) guna mengaktifkan kueri tingkat lanjut.

  1. Di terminal dalam IDX, jalankan perintah ini untuk men-deploy Aturan Keamanan dan indeks ini:
    firebase deploy --only firestore,storage
  2. Jika ditanya: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?", tekan Enter untuk memilih Ya.

Menambahkan konfigurasi Firebase ke kode aplikasi web

  1. Di Firebase console, lakukan hal berikut:
    1. Buka Project settings.
    2. Scroll ke bawah ke bagian Aplikasi Anda, lalu pilih aplikasi dengan nama yang sama dengan backend App Hosting Anda.
    3. Di bagian SDK setup and configuration, pilih opsi Config, lalu salin properti variabel firebaseConfig dan nilainya.
  2. Di IDX, lakukan hal berikut:
    1. Buka file apphosting.yaml. Di sinilah Anda akan menyiapkan variabel lingkungan di App Hosting, serta secret dan konfigurasi runtime.
    2. Isi nilai variabel lingkungan yang diberikan dengan nilai konfigurasi yang Anda salin dari Firebase console.Misalnya (ganti dengan nilai Anda sendiri):
      runConfig:
    minInstances: 0
    maxInstances: 2
env:
    # Get these values from the Firebase console
    - variable: NEXT_PUBLIC_FIREBASE_API_KEY
        value: xxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx
    - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
        value: project-id.firebaseapp.com
    - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
        value: project-id
    - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
        value: project-id.firebasestorage.app
    - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
        value: 111111111111
    - variable: NEXT_PUBLIC_FIREBASE_APP_ID
        value: 1:111111111111:web:aaaaaaaaaaaaaaaaaaaaaa
    3. Simpan file. Kemudian, di terminal dalam IDX, jalankan perintah berikut untuk mengirim perubahan ke GitHub:
      git commit -a -m "Setup Firebase Config"

git push
  3. Kembali ke Firebase console, lalu kembali ke halaman App Hosting, lalu lakukan hal berikut:
    1. Klik Lihat Dasbor untuk backend Anda.
    2. Perhatikan bahwa build baru telah dipicu dari git push Anda. Proses ini memerlukan waktu sekitar 3 menit untuk menyelesaikan build dan meluncurkan ke Cloud Run. Anda dapat memantau progresnya dengan mengklik chip build-ID.
    3. Muat ulang halaman konsol untuk memeriksa apakah peluncuran telah selesai. Setelah selesai, klik link untuk domain Anda (berakhiran .hosted.app) di bagian domains untuk membukanya dan melihat aplikasi yang baru di-deploy.

Selamat, Anda telah men-deploy aplikasi web awal. Mari kita bahas lebih lanjut.

8. Mencoba aplikasi web di browser

Verifikasi bahwa Anda dapat login dengan Firebase Authentication

  1. Di browser, muat ulang halaman yang menampilkan aplikasi web Anda.
  2. Klik Sign in with Google.
  3. Logout dan login lagi. Halaman diupdate secara real time tanpa memuat ulang halaman. Anda dapat mengulangi langkah ini dengan pengguna lain.
  4. Opsional: Di browser, muat ulang aplikasi web. Klik kanan aplikasi web, pilih View page source, lalu telusuri nama tampilan. Nama tampilan akan muncul di sumber HTML mentah yang ditampilkan dari server.

Melihat informasi restoran

Aplikasi web menyertakan data tiruan untuk restoran dan ulasan.

Untuk memasukkan data restoran tiruan ke database Cloud Firestore Anda, pilih 2cf67d488d8e6332.png > Tambahkan restoran contoh.

Memastikan listingan restoran dimuat pada waktu proses server

Dengan menggunakan framework Next.js, mungkin akan sulit untuk mengetahui kapan data dimuat pada waktu proses server atau waktu proses sisi klien.

Untuk memverifikasi bahwa listingan restoran dimuat pada waktu proses server, ikuti langkah-langkah berikut:

  1. Di aplikasi web, buka DevTools dan nonaktifkan JavaScript.Menonaktifkan JavaScipt di DevTools
  2. Muat ulang aplikasi web. Listingan restoran masih dimuat. Informasi restoran ditampilkan di respons server. Jika JavaScript diaktifkan, informasi restoran akan dihidrasi melalui kode JavaScript sisi klien.
  3. Di DevTools, aktifkan kembali JavaScript.
  4. Di aplikasi web, pilih 27ca5d1e8ed8adfe.png > Add sample restaurants. Jika fungsi snapshot Anda diterapkan dengan benar, restoran akan muncul secara real time tanpa memuat ulang halaman.

Menambahkan ulasan restoran

Untuk menambahkan ulasan dan memverifikasi bahwa ulasan tersebut disisipkan ke Cloud Firestore, ikuti langkah-langkah berikut:

  1. Muat ulang aplikasi web, lalu pilih restoran dari halaman beranda.
  2. Di halaman restoran, klik 3e19beef78bb0d0e.png.
  3. Pilih rating bintang.
  4. Tulis ulasan.
  5. Klik Submit. Ulasan Anda akan muncul di bagian atas daftar ulasan.

9. Meringkas ulasan restoran dengan AI generatif

Di bagian ini, Anda akan menambahkan fitur ringkasan ulasan sehingga pengguna dapat dengan cepat memahami pendapat semua orang tentang suatu restoran tanpa harus membaca setiap ulasan.

Menyimpan kunci Gemini API di Cloud Secret Manager

App Hosting terintegrasi dengan Cloud Secret Manager untuk memungkinkan Anda menyimpan nilai sensitif seperti kunci API secara aman.

  1. Untuk menggunakan Gemini API, Anda memerlukan kunci API. Buat kunci di Google AI Studio.
    Saat diminta, pilih project yang sama yang telah Anda gunakan untuk codelab ini (di balik layar, project Firebase adalah project Google Cloud).
  2. Di terminal dalam IDX, jalankan perintah ini untuk membuat secret baru:
    firebase apphosting:secrets:set gemini-api-key
  3. Saat diminta memasukkan nilai rahasia, salin dan tempel kunci Gemini API Anda dari Google AI Studio.
  4. Jika ditanya: "To use this secret, your backend's service account must be granted access. Would you like to grant access now?", tekan Enter untuk memilih Ya.
  5. Saat ditanya apakah secret baru harus ditambahkan ke apphosting.yaml, masukkan Y untuk menyetujui, lalu tekan Enter untuk memilih GEMINI_API_KEY sebagai nama variabel lingkungan.

Kunci Gemini API Anda kini disimpan dengan aman di Cloud Secret Manager, dan dapat diakses oleh backend App Hosting Anda. Anda juga dapat melihat nilai di Dasbor Secrets Manager di Konsol Google Cloud.

  1. Buka file apphosting.yaml dan perhatikan bahwa nama rahasia Anda dicatat, tetapi tidak dengan nilainya.File tersebut akan terlihat seperti berikut:
    runConfig:
    minInstances: 0
    maxInstances: 2
env:
    # Get these values from the Firebase console
    - variable: NEXT_PUBLIC_FIREBASE_API_KEY
        value: xxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx
    - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
        value: project-id.firebaseapp.com
    - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
        value: project-id
    - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
        value: project-id.firebasestorage.app
    - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
        value: 111111111111
    - variable: NEXT_PUBLIC_FIREBASE_APP_ID
        value: 1:111111111111:web:aaaaaaaaaaaaaaaaaaaaaa
    - variable: GEMINI_API_KEY
        secret: gemini-api-key

Menerapkan komponen ringkasan ulasan

  1. Di IDX, buka src/components/Reviews/ReviewSummary.jsx.
  2. Ganti fungsi GeminiSummary dengan kode berikut:
    export async function GeminiSummary({ restaurantId }) {
    const { firebaseServerApp } = await getAuthenticatedAppForUser();
    const reviews = await getReviewsByRestaurantId(
        getFirestore(firebaseServerApp),
        restaurantId
    );

    const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
    const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash",
    safety_settings: [
        {
        category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT,
        threshold: HarmBlockThreshold.BLOCK_NONE,
        },
    ],
    });
    const reviewSeparator = "@";
    const prompt = `
        Based on the following restaurant reviews,
        where each review is separated by a '${reviewSeparator}' character,
        create a one-sentence summary of what people think of the restaurant.

        Here are the reviews: ${reviews.map(review => review.text).join(reviewSeparator)}
    `;

    try {
        const result = await model.generateContent(prompt);
        const response = await result.response;
        const text = response.text();

        return (
            <div className="restaurant__review_summary">
                <p>{text}</p>
                <p>✨ Summarized with Gemini</p>
            </div>
        );
    } catch (e) {
        console.error(e);
        return <p>Error contacting Gemini</p>;
    }
}
  3. Di terminal dalam IDX, jalankan perintah ini untuk membuat commit dan mengirimkannya ke repositori GitHub Anda.
    git commit -a -m "Use AI to summarize reviews"

git push
  4. Di Firebase console, buka halaman App Hosting, dan tunggu hingga peluncuran baru Anda selesai.
  5. Di browser Anda, klik kartu restoran. Di bagian atas layar, Anda akan melihat ringkasan satu kalimat dari semua ulasan untuk restoran tersebut.
  6. Tambahkan ulasan baru dan muat ulang halaman. Anda akan melihat perubahan ringkasan.

10. Kesimpulan

Selamat! Anda telah mempelajari cara menggunakan Firebase App Hosting untuk men-deploy aplikasi Next.js dan menggunakan Gemini API untuk meringkas teks. Secara khusus, Anda menggunakan hal berikut:

  • Firebase App Hosting untuk otomatis membangun dan men-deploy kode Next.js Anda setiap kali Anda mengirim ke cabang GitHub yang dikonfigurasi.
  • Cloud Secret Manager (terintegrasi dengan App Hosting) untuk menyimpan kunci Gemini API Anda dengan aman sehingga Anda dapat membuat fitur AI generatif di aplikasi Anda.

Pelajari lebih lanjut

Pelajari codelab lengkap "Mengintegrasikan Firebase dengan aplikasi Next.js" untuk mempelajari cara kami menambahkan Firebase Authentication, Cloud Firestore, dan Cloud Storage for Firebase ke aplikasi ini.

Selain itu, lihat codelab lainnya: