Wdrażanie w Firebase App Hosting za pomocą aplikacji Next.js

1. Zanim zaczniesz

Z tego laboratorium dowiesz się, jak wdrożyć aplikację w Hostingu aplikacji Firebase, korzystając z aplikacji internetowej Next.js o nazwie Friendly Eats, która jest witryną z recenzjami restauracji.

Aplikacja internetowa Friendly Eats

Gotowa aplikacja internetowa oferuje przydatne funkcje, które pokazują, jak Firebase może pomóc w tworzeniu aplikacji Next.js.

  • Automatyczne kompilowanie i wdrażanie: w tym laboratorium dowiesz się, jak używać Hostingu aplikacji Firebase do automatycznego kompilowania i wdrażania kodu Next.js za każdym razem, gdy przenosisz zmiany do skonfigurowanej gałęzi.
  • Logowanie i wylogowywanie: ukończona aplikacja internetowa umożliwia użytkownikom logowanie się i wylogowywanie za pomocą Google. Logowanie użytkowników i utrzymywanie sesji jest w całości zarządzane przez Uwierzytelnianie Firebase.
  • Obrazy: ukończona aplikacja internetowa umożliwia zalogowanym użytkownikom przesyłanie zdjęć restauracji. Pliki z obrazami są przechowywane w Cloud Storage dla Firebase. Pakiet Firebase JavaScript SDK udostępnia publiczny adres URL przesłanych obrazów. Ten publiczny adres URL jest następnie przechowywany w odpowiednim dokumencie restauracji w Cloud Firestore.
  • Filtry: ukończona aplikacja internetowa umożliwia zalogowanym użytkownikom filtrowanie listy restauracji na podstawie kategorii, lokalizacji i ceny. Możesz też dostosować używaną metodę sortowania. Dostęp do danych jest uzyskiwany z Cloud Firestore, a zapytania Firestore są stosowane na podstawie użytych filtrów.
  • Opinie: ukończona aplikacja internetowa umożliwia zalogowanym użytkownikom publikowanie opinii o restauracjach, które składają się z oceny w postaci gwiazdek i wiadomości tekstowej. Informacje o opiniach są przechowywane w Cloud Firestore.
  • Podsumowania opinii: gotowa aplikacja internetowa automatycznie podsumowuje opinie za pomocą modelu Gemini. Podsumowania wygenerowane przez AI są przechowywane w Cloud Firestore.

Wymagania wstępne

  • Znajomość Next.js i JavaScriptu

Czego się nauczysz

  • Jak używać Firebase z routerem aplikacji Next.js i renderowaniem po stronie serwera
  • Jak autoryzować wywołania interfejsu Gemini API za pomocą kluczy tajnych tylko po stronie serwera

Czego potrzebujesz

  • wybraną przeglądarkę, np. Google Chrome;
  • Dostęp do IDX.dev (obszaru roboczego w internecie)
  • konto Google do tworzenia projektów Firebase i zarządzania nimi
  • Konto GitHub (nie musi to być ten sam adres e-mail co powyżej)

2. Konfigurowanie środowiska programistycznego i repozytorium GitHub

W tym Codelabie znajdziesz początkowy kod aplikacji. Korzysta on z wiersza poleceń Firebase i IDX.dev.

Utwórz nowe repozytorium GitHub i zaimportuj je do IDX.

Firebase App Hosting umożliwia skonfigurowanie repozytorium GitHub w taki sposób, aby kompilowało i wdrażało kod Next.js za każdym razem, gdy przenosisz go do skonfigurowanej gałęzi.

  1. Utwórz nowe repozytorium GitHub na potrzeby tego modułu: https://github.com/new. Nadaj mu dowolną nazwę, np. MyFriendlyEatsCodelab.
  2. Skopiuj nowy adres URL repozytorium. Będzie wyglądać tak:
    https://github.com/USER_NAME/REPOSITORY_NAME.git
  3. Otwórz stronę https://idx.google.com i zaloguj się.
  4. Kliknij Importuj repozytorium i wklej skopiowany adres URL GitHub.
    IDX poprosi Cię o połączenie z GitHubem, a następnie sklonuje Twoje (puste) repozytorium.

Wyświetlanie repozytorium kodu źródłowego codelabu

Kod źródłowy ćwiczeń z programowania znajdziesz na stronie https://github.com/firebase/friendlyeats-web. W repozytorium friendlyeats-web znajdują się przykładowe projekty dla wielu platform.

Te warsztaty skupiają się tylko na Firebase App Hosting i Gemini API. Są skróconą wersją pełnych warsztatów „Integracja Firebase z aplikacją Next.js”. Ten skrócony przewodnik wymaga pracy tylko z kodem źródłowym w #io-connect gałęzi repozytorium friendlyeats-web, a konkretnie w katalogu nextjs-step10.

Zwróć uwagę na te dodatkowe katalogi w repozytorium friendlyeats-web. Chociaż w tym ćwiczeniu nie będziesz potrzebować tych katalogów, warto wiedzieć, czym one są.

Kopiowanie kodu źródłowego codelabu do nowego repozytorium

Aby skopiować katalog nextjs-step10 do własnego repozytorium:

  1. W IDX otwórz terminal, klikając Menu > Terminal > New Terminal (Menu > Terminal > Nowy terminal).
  2. Użyj pakietu npm giget, aby pobrać tylko katalog nextjs-step10 z gałęzi io-connect:
    npx giget@latest gh:firebase/friendlyeats-web/nextjs-step10#io-connect . --force
  3. Śledź zmiany lokalnie za pomocą Gita:
    git add -A
git commit -m "codelab starting point"
git branch -M main
git push -u origin main

W repozytorium GitHub powinien pojawić się kod początkowy.

3. Sprawdź początkową bazę kodu

W tej sekcji zapoznasz się z kilkoma obszarami początkowej bazy kodu aplikacji, do których dodasz funkcje w tym laboratorium.

Struktura folderów i plików

Poniższa tabela zawiera omówienie struktury folderów i plików aplikacji:

Foldery i pliki

Opis

src/components

Komponenty React do filtrów, nagłówków, szczegółów restauracji i opinii

src/lib

funkcje narzędziowe, które nie są koniecznie powiązane z Reactem ani Next.js;

src/lib/firebase

Kod specyficzny dla Firebase i konfiguracja Firebase

public

statyczne zasoby w aplikacji internetowej, takie jak ikony;

src/app

Routing za pomocą routera aplikacji Next.js

src/app/restaurant

Obsługa trasy interfejsu API

package.json i package-lock.json

Zależności projektu w npm

next.config.js

Konfiguracja specyficzna dla Next.js (działania serwera są włączone)

jsconfig.json

Konfiguracja usługi językowej JavaScript

Komponenty serwera i klienta

Aplikacja to aplikacja internetowa Next.js, która korzysta z routera aplikacji. Renderowanie po stronie serwera jest używane w całej aplikacji. Na przykład plik src/app/page.js to komponent serwera odpowiedzialny za stronę główną. Plik src/components/RestaurantListings.jsx to komponent klienta oznaczony dyrektywą "use client" na początku pliku.

Importowanie wyciągów

W niektórych plikach możesz zauważyć instrukcje importu podobne do tych:

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

Aplikacja używa symbolu @, aby uniknąć nieporęcznych względnych ścieżek importu. Jest to możliwe dzięki aliasom ścieżek.

Interfejsy API Firebase

Cały kod interfejsu Firebase API jest zawarty w katalogu src/lib/firebase. Poszczególne komponenty Reacta importują następnie opakowane funkcje z katalogu src/lib/firebase zamiast importować funkcje Firebase bezpośrednio.

Dane testowe

Przykładowe dane restauracji i opinii znajdują się w pliku src/lib/randomData.js. Dane z tego pliku są zbierane w kodzie w pliku src/lib/fakeRestaurants.js.

4. Konfigurowanie projektu Firebase

W tej sekcji skonfigurujesz projekt Firebase i powiążesz z nim aplikację internetową Firebase. Skonfigurujesz też usługi Firebase używane przez przykładową aplikację internetową.

Tworzenie projektu Firebase

  1. Zaloguj się w konsoli Firebase za pomocą tego samego konta Google, którego używasz w poprzednim kroku.
  2. Kliknij przycisk, aby utworzyć nowy projekt, a potem wpisz jego nazwę (np. FriendlyEats Codelab).
  3. Kliknij Dalej.
  4. Po wyświetleniu monitu przeczytaj i zaakceptuj warunki usługi Firebase, a potem kliknij Dalej.
  5. (Opcjonalnie) Włącz w konsoli Firebase pomoc AI (nazywaną „Gemini w Firebase”).
  6. W tym samouczku nie potrzebujesz Google Analytics, więc wyłącz opcję Google Analytics.
  7. Kliknij Utwórz projekt, poczekaj, aż projekt zostanie udostępniony, a następnie kliknij Dalej.

Przejście na wyższy abonament Firebase

Aby korzystać z Hostingu aplikacji Firebase i Cloud Storage for Firebase, Twój projekt Firebase musi być objęty abonamentem Blaze (płatność według wykorzystania), co oznacza, że jest połączony z kontem rozliczeniowym Cloud.

  • Konto rozliczeniowe Cloud wymaga formy płatności, np. karty kredytowej.
  • Jeśli dopiero zaczynasz korzystać z Firebase i Google Cloud, sprawdź, czy możesz otrzymać środki w wysokości 300 USD i bezpłatne konto rozliczeniowe Cloud.
  • Jeśli wykonujesz te ćwiczenia w ramach wydarzenia, zapytaj organizatora, czy są dostępne środki w Google Cloud.

Aby przenieść projekt na abonament Blaze:

  1. W konsoli Firebase wybierz przejście na wyższy abonament.
  2. Wybierz pakiet Blaze. Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby połączyć konto rozliczeniowe Cloud z projektem.
    Jeśli w ramach tego przejścia na wyższy abonament konieczne było utworzenie konta rozliczeniowego Cloud, może być konieczne powrócenie do procesu przejścia na wyższy abonament w konsoli Firebase, aby go dokończyć.

5. Tworzenie backendu hostingu aplikacji

W tej sekcji skonfigurujesz backend usługi App Hosting, aby obserwować gałąź w repozytorium Git. Skonfigurujesz też wszystkie usługi, z którymi będzie się komunikować backend.

Po przeczytaniu tej sekcji będziesz mieć backend App Hosting połączony z repozytorium w GitHubie, który będzie automatycznie ponownie kompilować i wdrażać nową wersję aplikacji za każdym razem, gdy przeniesiesz nowe zatwierdzenie do gałęzi main.

Utworzenie backendu

  1. W konsoli Firebase otwórz stronę Hostingu aplikacji:Stan zerowy konsoli App Hosting z przyciskiem „Rozpocznij”
  2. Aby rozpocząć proces tworzenia backendu, kliknij Rozpocznij.
  3. Postępuj zgodnie z instrukcjami, aby zaimportować i połączyć utworzone wcześniej repozytorium GitHub.
  4. Ustawienia wdrażania:
    • Pozostaw katalog główny jako /
    • Ustaw gałąź na żywo na main
    • Włącz automatyczne wdrażanie
  5. Nazwij backend friendlyeats-codelab (lub użyj wybranej nazwy). Stanie się ona częścią domeny używanej do uzyskiwania dostępu do backendu.
    Ten proces automatycznie tworzy też w projekcie Firebase aplikację internetową Firebase. W dalszej części tego samouczka użyjesz wartości konfiguracji tej aplikacji internetowej, aby połączyć bazę kodu z projektem Firebase.
  6. Kliknij Zakończ i wdroż. Po chwili przejdziesz na nową stronę, na której zobaczysz stan nowego backendu usługi App Hosting.
  7. W panelu hostingu aplikacji skopiuj nową domenę.
    Będzie ona miała postać BACKEND_ID--PROJECT_ID.REGION.hosted.app. Ta domena będzie potrzebna później do skonfigurowania uwierzytelniania Firebase.

Zanim domena zacznie działać, może minąć kilka minut ze względu na propagację DNS i tworzenie certyfikatu SSL. Podczas tworzenia backendu kontynuuj konfigurowanie pozostałych elementów projektu Firebase i backendu (kolejne kroki tego laboratorium).

Za każdym razem, gdy przeniesiesz nowe zatwierdzenie do gałęzi main w repozytorium GitHub, w konsoli Firebase zobaczysz nową kompilację i rozpocznie się wdrażanie. Po zakończeniu wdrażania Twoja witryna zostanie automatycznie zaktualizowana.

6. Konfigurowanie innych usług Firebase

Chociaż ten przewodnik skupia się tylko na Hostingu aplikacji Firebase i interfejsie Gemini API, działająca aplikacja internetowa wymaga do działania innych usług Firebase. Kod umożliwiający działanie tych wszystkich usług w aplikacji jest częścią bazy kodu skopiowanej do własnego repozytorium GitHub, ale nadal musisz skonfigurować te usługi w projekcie Firebase.

Konfigurowanie uwierzytelniania

  1. W konsoli Firebase otwórz Uwierzytelnianie.
  2. Kliknij Rozpocznij.
  3. W kolumnie Dodatkowi dostawcy kliknij Google > Włącz.
    1. W polu tekstowym Nazwa projektu widoczna publicznie wpisz nazwę, np. My FriendlyEatsCodelab app.
    2. W menu Adres e-mail pomocy dotyczący projektu wybierz swój adres e-mail.
    3. Kliknij Zapisz.
  4. Na stronie Uwierzytelnianie kliknij kartę Ustawienia.
    1. W menu po lewej stronie kliknij Autoryzowane domeny.
    2. Kliknij Add Domain (Dodaj domenę), a następnie dodaj nowo utworzoną domenę hostingu aplikacji (kończy się ona na .hosted.app).
    3. Aby zapisać, kliknij Dodaj.

Konfigurowanie Cloud Firestore

  1. W panelu po lewej stronie konsoli Firebase rozwiń Kompilacja, a następnie wybierz Baza danych Firestore.
  2. Kliknij Utwórz bazę danych.
  3. W polu Identyfikator bazy danych pozostaw wartość (default).
  4. Wybierz lokalizację bazy danych i kliknij Dalej.
    W przypadku prawdziwej aplikacji wybierz lokalizację, która jest blisko użytkowników.
  5. Kliknij Uruchom w trybie testowym. Przeczytaj wyłączenie odpowiedzialności dotyczące reguł bezpieczeństwa.
    W dalszej części tego laboratorium dodasz reguły bezpieczeństwa, aby zabezpieczyć swoje dane. Nierozpowszechniajani nie udostępniaj publicznie aplikacji bez dodania reguł bezpieczeństwa do bazy danych.
  6. Kliknij Utwórz.

Konfigurowanie Cloud Storage dla Firebase

  1. W panelu po lewej stronie konsoli Firebase rozwiń Kompilacja, a następnie wybierz Storage.
  2. Kliknij Rozpocznij.
  3. Wybierz lokalizację domyślnego zasobnika Storage.
    Zasobniki w regionach US-WEST1, US-CENTRAL1 i US-EAST1 mogą korzystać z poziomu „Zawsze bezpłatny” w Google Cloud Storage. W przypadku zasobników w innych lokalizacjach obowiązuje cennik i wykorzystanie Google Cloud Storage.
  4. Kliknij Uruchom w trybie testowym. Przeczytaj wyłączenie odpowiedzialności dotyczące reguł bezpieczeństwa.
    W dalszej części tego laboratorium dodasz reguły bezpieczeństwa, aby zabezpieczyć swoje dane. Nieudostępniaj aplikacji publicznie bez dodania reguł bezpieczeństwa do zasobnika Storage.
  5. Kliknij Utwórz.

7. Konfigurowanie aplikacji internetowej

Po utworzeniu projektu Firebase i włączeniu wszystkich usług Firebase używanych w aplikacji możesz zacząć pracować w IDX, aby skonfigurować aplikację internetową do korzystania z tych usług.

Logowanie się w wierszu poleceń Firebase w IDX

IDX ma już zainstalowane Node.js i wiersz poleceń Firebase, więc możesz pominąć ich instalację i od razu zacząć konfigurować wiersz poleceń.

  1. W terminalu w IDX uruchom te polecenia, aby skonfigurować interfejs CLI do korzystania z utworzonego wcześniej projektu Firebase:
    firebase login --no-localhost
firebase use --add
    Gdy pojawi się prośba o podanie aliasu, wpisz codelab.
  2. Wpisz Y lub N w zależności od tego, czy chcesz, aby Firebase zbierał dane. Obie opcje są odpowiednie w przypadku tego laboratorium.
  3. W przeglądarce wybierz konto Google, a potem kliknij Zezwól.

Wdrażanie reguł zabezpieczeń i indeksów

Kod skopiowany do repozytorium GitHub zawiera już zestawy reguł zabezpieczeń dla Firestore (w firestore.rules) i Cloud Storage dla Firebase (w storage.rules). Po wdrożeniu reguł zabezpieczeń dane w bazie danych i zasobniku będą lepiej chronione przed nadużyciami.

Za pomocą interfejsu wiersza poleceń możesz też wdrożyć zestaw indeksów dla Firestore (w firestore.indexes.json), aby włączyć zaawansowane zapytania.

  1. W terminalu w IDX uruchom to polecenie, aby wdrożyć te reguły zabezpieczeń i indeksy:
    firebase deploy --only firestore,storage
  2. Jeśli pojawi się pytanie: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?", naciśnij Enter, aby wybrać Tak.

Dodawanie konfiguracji Firebase do kodu aplikacji internetowej

  1. W konsoli Firebase wykonaj te czynności:
    1. Otwórz ustawienia projektu.
    2. Przewiń w dół do sekcji Twoje aplikacje, a następnie wybierz aplikację o tej samej nazwie co backend App Hosting.
    3. W sekcji Konfiguracja pakietu SDK wybierz opcję Konfiguracja, a następnie skopiuj właściwości zmiennej firebaseConfig i ich wartości.
  2. W IDX wykonaj te czynności:
    1. Otwórz plik apphosting.yaml. W tym miejscu możesz skonfigurować zmienne środowiskowe w usłudze App Hosting, a także obiekty tajne i konfigurację środowiska wykonawczego.
    2. Wypełnij podane wartości zmiennych środowiskowych wartościami konfiguracji skopiowanymi z konsoli Firebase.Przykład (zastąp własnymi wartościami):
      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. Zapisz plik. Następnie w terminalu w IDX uruchom te polecenia, aby przesłać zmiany do GitHuba:
      git commit -a -m "Setup Firebase Config"

git push
  3. Wróć do konsoli Firebase i otwórz stronę hostingu aplikacji, a następnie wykonaj te czynności:
    1. Kliknij Wyświetl panel w przypadku backendu.
    2. Zauważ, że po wykonaniu polecenia git push rozpoczęła się nowa kompilacja. Utworzenie i wdrożenie w Cloud Run powinno potrwać około 3 minut. Postępy możesz śledzić, klikając build-ID.
    3. Odśwież stronę konsoli, aby sprawdzić, czy wdrożenie zostało zakończone. Po zakończeniu kliknij link do swojej domeny (kończący się na .hosted.app) w sekcji domeny, aby otworzyć nowo wdrożoną aplikację.

Gratulacje, udało Ci się wdrożyć początkową aplikację internetową. Przyjrzyjmy się temu bliżej.

8. Wypróbuj aplikację internetową w przeglądarce

Sprawdź, czy możesz zalogować się za pomocą uwierzytelniania Firebase

  1. Odśwież w przeglądarce stronę wyświetlającą aplikację internetową.
  2. Kliknij Zaloguj się przez Google.
  3. Wyloguj się i zaloguj jeszcze raz. Strona jest aktualizowana w czasie rzeczywistym bez odświeżania. Możesz powtórzyć ten krok w przypadku innych użytkowników.
  4. Opcjonalnie: odśwież aplikację internetową w przeglądarce. Kliknij aplikację internetową prawym przyciskiem myszy, wybierz Wyświetl źródło strony i wyszukaj wyświetlaną nazwę. Pojawia się w surowym kodzie HTML zwróconym z serwera.

Wyświetlanie informacji o restauracji

Aplikacja internetowa zawiera przykładowe dane dotyczące restauracji i opinii.

Aby wstawić przykładowe dane restauracji do bazy danych Cloud Firestore, wybierz 2cf67d488d8e6332.png > Dodaj przykładowe restauracje.

Sprawdź, czy informacje o restauracjach wczytują się w czasie działania serwera.

W przypadku korzystania z platformy Next.js może nie być oczywiste, kiedy dane są wczytywane w czasie działania serwera lub klienta.

Aby sprawdzić, czy wizytówki restauracji wczytują się w czasie działania serwera, wykonaj te czynności:

  1. W aplikacji internetowej otwórz Narzędzia deweloperskie i wyłącz JavaScript.Wyłączanie JavaScriptu w Narzędziach deweloperskich
  2. Odśwież aplikację internetową. Listy restauracji nadal się wczytują. Informacje o restauracji są zwracane w odpowiedzi serwera. Gdy JavaScript jest włączony, informacje o restauracji są wypełniane za pomocą kodu JavaScript po stronie klienta.
  3. W Narzędziach deweloperskich ponownie włącz JavaScript.
  4. W aplikacji internetowej kliknij 27ca5d1e8ed8adfe.png > Dodaj przykładowe restauracje. Jeśli funkcja migawki jest prawidłowo wdrożona, restauracje będą się pojawiać w czasie rzeczywistym bez odświeżania strony.

Dodawanie opinii o restauracji

Aby dodać opinię i sprawdzić, czy została wstawiona do Cloud Firestore, wykonaj te czynności:

  1. Odśwież aplikację internetową i wybierz restaurację na stronie głównej.
  2. Na stronie restauracji kliknij 3e19beef78bb0d0e.png.
  3. Wybierz liczbę gwiazdek.
  4. Napisz opinię.
  5. Kliknij Prześlij. Twoja opinia pojawi się u góry listy opinii.

9. Podsumowywanie opinii o restauracjach za pomocą generatywnej AI

W tej sekcji dodasz funkcję podsumowania opinii, dzięki której użytkownik będzie mógł szybko sprawdzić, co myślą o restauracji inni, bez konieczności czytania każdej opinii.

Przechowywanie klucza interfejsu Gemini API w usłudze Cloud Secret Manager

Usługa App Hosting jest zintegrowana z Cloud Secret Manager, co umożliwia bezpieczne przechowywanie wartości wrażliwych, takich jak klucze interfejsu API.

  1. Aby korzystać z interfejsu Gemini API, musisz mieć klucz interfejsu API. Utwórz klucz w Google AI Studio.
    Gdy pojawi się odpowiedni komunikat, wybierz ten sam projekt, którego używasz w tym laboratorium (w tle projekt Firebase jest projektem Google Cloud).
  2. W terminalu w IDX uruchom to polecenie, aby utworzyć nowy klucz tajny:
    firebase apphosting:secrets:set gemini-api-key
  3. Gdy pojawi się prośba o podanie wartości tajnej, skopiuj i wklej klucz interfejsu Gemini API z Google AI Studio.
  4. Jeśli pojawi się pytanie: "To use this secret, your backend's service account must be granted access. Would you like to grant access now?", naciśnij Enter, aby wybrać Tak.
  5. Gdy pojawi się pytanie, czy nowy klucz tajny ma zostać dodany do apphosting.yaml, wpisz Y, aby zaakceptować, a następnie naciśnij Enter, aby wybrać GEMINI_API_KEY jako nazwę zmiennej środowiskowej.

Klucz interfejsu Gemini API jest teraz bezpiecznie przechowywany w usłudze Cloud Secret Manager i jest dostępny dla backendu App Hosting. Wartość możesz też wyświetlić w panelu Secrets Manager w konsoli Google Cloud.

  1. Otwórz plik apphosting.yaml i zwróć uwagę, że nazwa klucza tajnego została zarejestrowana, ale nie jego wartości.Plik powinien wyglądać tak:
    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

Wdrażanie komponentu podsumowania opinii

  1. W IDX otwórz src/components/Reviews/ReviewSummary.jsx.
  2. Zastąp funkcję GeminiSummary tym kodem:
    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. W terminalu w IDX uruchom te polecenia, aby utworzyć zatwierdzenie i przenieść je do repozytorium GitHub.
    git commit -a -m "Use AI to summarize reviews"

git push
  4. W konsoli Firebase otwórz stronę hostingu aplikacji i poczekaj, aż nowe wdrożenie się zakończy.
  5. W przeglądarce kliknij kartę restauracji. U góry ekranu zobaczysz podsumowanie wszystkich opinii o restauracji w jednym zdaniu.
  6. Dodaj nową opinię i odśwież stronę. Powinno pojawić się podsumowanie zmiany.

10. Podsumowanie

Gratulacje! Z tego artykułu dowiesz się, jak używać Firebase App Hosting do wdrażania aplikacji Next.js i jak używać interfejsu Gemini API do podsumowywania tekstu. W szczególności używasz tych elementów:

  • Firebase App Hosting, aby automatycznie kompilować i wdrażać kod Next.js za każdym razem, gdy wypychasz go do skonfigurowanej gałęzi GitHub.
  • Cloud Secret Manager (zintegrowana z App Hosting) do bezpiecznego przechowywania klucza interfejsu Gemini API, dzięki czemu możesz tworzyć w aplikacji funkcje oparte na generatywnej AI.

Więcej informacji

Zapoznaj się z pełnym przewodnikiem „Integracja Firebase z aplikacją Next.js”, aby dowiedzieć się, jak dodaliśmy do tej aplikacji Uwierzytelnianie Firebase, Cloud Firestore i Cloud Storage for Firebase.

Zapoznaj się też z innymi ćwiczeniami z programowania: