Déployer sur Firebase App Hosting avec une application Next.js

1. Avant de commencer

Dans cet atelier de programmation, vous apprendrez à déployer une application Web Next.js appelée Friendly Eats sur Firebase App Hosting. Il s'agit d'un site Web d'avis sur les restaurants.

L'application Web terminée offre des fonctionnalités utiles qui montrent comment Firebase peut vous aider à créer des applications Next.js.

• Compilation et déploiement automatiques : cet atelier de programmation vous montre comment utiliser Firebase App Hosting pour compiler et déployer automatiquement votre code Next.js chaque fois que vous envoyez des modifications vers une branche configurée.
• Connexion et déconnexion : l'application Web terminée permet aux utilisateurs de se connecter et de se déconnecter avec Google. La connexion et la persistance des utilisateurs sont entièrement gérées par Firebase Authentication.
• Images : l'application Web terminée permet aux utilisateurs connectés d'importer des images de restaurants. Les composants d'image sont stockés dans Cloud Storage pour Firebase. Le SDK Firebase JavaScript fournit une URL publique pour les images importées. Cette URL publique est ensuite stockée dans le document du restaurant concerné dans Cloud Firestore.
• Filtres : l'application Web terminée permet aux utilisateurs connectés de filtrer la liste des restaurants en fonction de la catégorie, de l'emplacement et du prix. Vous pouvez également personnaliser la méthode de tri utilisée. Les données sont accessibles depuis Cloud Firestore, et les requêtes Firestore sont appliquées en fonction des filtres utilisés.
• Avis : l'application Web terminée permet aux utilisateurs connectés de publier des avis sur les restaurants. Ces avis se composent d'une note et d'un message textuel. Les informations sur les avis sont stockées dans Cloud Firestore.
• Résumés des avis : l'application Web terminée résume automatiquement les avis à l'aide d'un modèle Gemini. Les résumés générés par IA sont stockés dans Cloud Firestore.

Prérequis

• Connaissances de Next.js et JavaScript

Points abordés

• Utiliser Firebase avec le routeur d'application Next.js et le rendu côté serveur
• Autoriser les appels à l'API Gemini à l'aide de secrets côté serveur uniquement

Prérequis

• Un navigateur de votre choix, tel que Google Chrome
• Accès à IDX.dev (un espace de travail Web)
• Un compte Google pour créer et gérer votre projet Firebase
• Un compte GitHub (il n'est pas nécessaire qu'il s'agisse de la même adresse e-mail que celle ci-dessus)

2. Configurer votre environnement de développement et votre dépôt GitHub

Cet atelier de programmation fournit le code de démarrage de l'application et s'appuie sur la CLI Firebase et IDX.dev.

Créer un dépôt GitHub et l'importer dans IDX

Firebase App Hosting vous permet de configurer un dépôt GitHub pour compiler et déployer votre code Next.js chaque fois que vous envoyez des modifications à une branche configurée.

1. Créez un dépôt GitHub pour cet atelier de programmation : https://github.com/new. Donnez-lui le nom de votre choix, par exemple MyFriendlyEatsCodelab.
2. Copiez l'URL de votre nouveau dépôt. Elle se présentera comme suit :
   https://github.com/USER_NAME/REPOSITORY_NAME.git
3. Accédez à https://idx.google.com et connectez-vous.
4. Cliquez sur Import a repo (Importer un dépôt) et collez l'URL GitHub que vous avez copiée.
   IDX vous invite à associer votre compte à GitHub, puis clone votre dépôt (vide).

Afficher le dépôt de code source de l'atelier de programmation

Consultez le code source de l'atelier de programmation sur https://github.com/firebase/friendlyeats-web. Le dépôt friendlyeats-web contient des exemples de projets adaptés à différentes plates-formes.

Cet atelier de programmation sur lequel vous travaillez se concentre uniquement sur Firebase App Hosting et l'API Gemini. Il s'agit d'une version abrégée de l'atelier de programmation complet "Intégrer Firebase à une application Next.js". Cet atelier de programmation abrégé vous demande de travailler uniquement avec le code source de la branche #io-connect du dépôt friendlyeats-web, plus précisément dans le répertoire nextjs-step10.

Notez les répertoires supplémentaires suivants du dépôt friendlyeats-web. Même si vous n'avez pas besoin de ces répertoires pour cet atelier de programmation, il est utile de savoir ce qu'ils sont.

• nextjs-start : contient le code de démarrage pour l'atelier de programmation complet "Intégrer Firebase à une application Next.js".
• nextjs-end : contient le code de solution pour l'application Web terminée.

Copier la source du codelab dans votre nouveau dépôt

Voici comment copier le répertoire nextjs-step10 dans votre propre dépôt :

1. Dans IDX, ouvrez le terminal en cliquant sur Menu > Terminal > Nouveau terminal.
2. Utilisez le package npm giget pour n'extraire que le répertoire nextjs-step10 de la branche io-connect :

   npx giget@latest gh:firebase/friendlyeats-web/nextjs-step10#io-connect . --force
   

3. Suivez les modifications en local avec git :

   git add -A
   git commit -m "codelab starting point"
   git branch -M main
   git push -u origin main
   

Le code de démarrage devrait maintenant s'afficher dans votre dépôt GitHub.

3. Examiner le codebase de démarrage

Dans cette section, vous allez examiner quelques zones du code de base de l'application auxquelles vous ajouterez des fonctionnalités dans cet atelier de programmation.

Structure des dossiers et des fichiers

Le tableau suivant présente la structure des dossiers et des fichiers de l'application :

Composants serveur et client

L'application est une application Web Next.js qui utilise l'App Router. Le rendu côté serveur est utilisé dans toute l'application. Par exemple, le fichier src/app/page.js est un composant serveur responsable de la page principale. Le fichier src/components/RestaurantListings.jsx est un composant client indiqué par la directive "use client" au début du fichier.

Instructions d'importation

Dans certains fichiers, vous pouvez remarquer des instructions d'importation comme celles-ci :

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

L'application utilise le symbole @ pour éviter les chemins d'importation relatifs maladroits, ce qui est possible grâce aux alias de chemin d'accès.

API spécifiques à Firebase

Tout le code de l'API Firebase est encapsulé dans le répertoire src/lib/firebase. Les composants React individuels importent ensuite les fonctions encapsulées à partir du répertoire src/lib/firebase, au lieu d'importer directement les fonctions Firebase.

Données fictives

Les données de restaurant et d'avis fictives sont contenues dans le fichier src/lib/randomData.js. Les données de ce fichier sont assemblées dans le code du fichier src/lib/fakeRestaurants.js.

4. Configurer votre projet Firebase

Dans cette section, vous allez configurer un projet Firebase et y associer une application Web Firebase. Vous configurerez également les services Firebase utilisés par l'exemple d'application Web.

Créer un projet Firebase

1. Connectez-vous à la console Firebase avec le même compte Google que celui utilisé à l'étape précédente.
2. Cliquez sur le bouton pour créer un projet, puis saisissez un nom de projet (par exemple, FriendlyEats Codelab).
   
3. Cliquez sur Continuer.
4. Si vous y êtes invité, lisez et acceptez les Conditions d'utilisation de Firebase, puis cliquez sur Continuer.
5. (Facultatif) Activez l'assistance IA dans la console Firebase (appelée "Gemini dans Firebase").
6. Pour cet atelier de programmation, vous n'avez pas besoin de Google Analytics. Désactivez donc l'option Google Analytics.
7. Cliquez sur Créer un projet, attendez que votre projet soit provisionné, puis cliquez sur Continuer.

Passer à un forfait Firebase supérieur

Pour utiliser Firebase App Hosting et Cloud Storage pour Firebase, votre projet Firebase doit être associé à un compte de facturation Cloud et être soumis au forfait Blaze avec paiement à l'usage.

• Un compte de facturation Cloud nécessite un mode de paiement, comme une carte de crédit.
• Si vous débutez avec Firebase et Google Cloud, vérifiez si vous êtes éligible à un crédit de 300$et à un compte de facturation Cloud pour l'essai sans frais.
• Si vous effectuez cet atelier de programmation dans le cadre d'un événement, demandez à l'organisateur si des crédits Cloud sont disponibles.

Pour passer à la formule Blaze, procédez comme suit :

1. Dans la console Firebase, sélectionnez Passer à une formule supérieure.
2. Sélectionnez le forfait Blaze. Suivez les instructions à l'écran pour associer un compte de facturation Cloud à votre projet.
   Si vous avez dû créer un compte de facturation Cloud lors de cette mise à niveau, vous devrez peut-être revenir au processus de mise à niveau dans la console Firebase pour la finaliser.

5. Créer un backend App Hosting

Dans cette section, vous allez configurer un backend App Hosting pour surveiller une branche de votre dépôt Git. Vous configurerez également tous les services avec lesquels le backend communiquera.

À la fin de cette section, vous disposerez d'un backend App Hosting connecté à votre dépôt dans GitHub. Il reconstruira et déploiera automatiquement une nouvelle version de votre application chaque fois que vous enverrez un nouveau commit à votre branche main.

Créer un backend

1. Dans la console Firebase, accédez à la page App Hosting :
2. Cliquez sur Commencer pour lancer le flux de création du backend.
3. Suivez les instructions pour importer et connecter le dépôt GitHub que vous avez créé précédemment.
4. Définissez les paramètres de déploiement :
   • Conserver le répertoire racine sous le nom /
   • Définissez la branche "live" sur main.
   • Activer les déploiements automatiques
5. Nommez votre backend friendlyeats-codelab (ou le nom de backend de votre choix). Il fait partie du domaine utilisé pour accéder au backend.
   Ce workflow crée également automatiquement une application Web Firebase dans votre projet Firebase. Plus loin dans cet atelier de programmation, vous utiliserez les valeurs de configuration de cette application Web pour associer votre code à votre projet Firebase.
6. Cliquez sur Terminer et déployer. Au bout de quelques instants, vous serez redirigé vers une nouvelle page où vous pourrez consulter l'état de votre nouveau backend App Hosting.
7. Dans le tableau de bord App Hosting, copiez votre nouveau domaine.
   Il doit ressembler à BACKEND_ID--PROJECT_ID.REGION.hosted.app. Vous aurez besoin de ce domaine pour configurer l'authentification Firebase ultérieurement.

La propagation DNS et la création du certificat SSL peuvent prendre quelques minutes. Pendant la création de votre backend, passez à la configuration du reste du projet Firebase et de votre backend (étapes suivantes de cet atelier de programmation).

Chaque fois que vous envoyez un nouveau commit vers la branche main de votre dépôt GitHub, une nouvelle compilation et un nouveau déploiement démarrent dans la console Firebase. Votre site est automatiquement mis à jour une fois le déploiement terminé.

6. Configurer d'autres services Firebase

Même si cet atelier de programmation se concentre uniquement sur Firebase App Hosting et l'API Gemini, l'application Web fonctionnelle nécessite d'autres services Firebase pour fonctionner. Le code permettant à tous ces services de fonctionner dans votre application fait partie de la base de code que vous avez copiée dans votre propre dépôt GitHub. Toutefois, vous devez toujours configurer ces services dans votre projet Firebase.

Configurer l'authentification

1. Dans la console Firebase, accédez à Authentification.
2. Cliquez sur Commencer.
3. Dans la colonne Fournisseurs supplémentaires, cliquez sur Google > Activer.
   1. Dans la zone de texte Nom public du projet, saisissez un nom, par exemple My FriendlyEatsCodelab app.
   2. Dans la liste déroulante Adresse e-mail d'assistance pour le projet, sélectionnez votre adresse e-mail.
   3. Cliquez sur Enregistrer.
4. Cliquez sur l'onglet Paramètres sur la page Authentification.
   1. Cliquez sur Domaines autorisés dans le menu de gauche de l'écran.
   2. Cliquez sur Ajouter un domaine, puis ajoutez le domaine App Hosting que vous venez de créer (il se termine par .hosted.app).
   3. Cliquez sur Ajouter pour enregistrer.

Configurer Cloud Firestore

1. Dans le panneau de gauche de la console Firebase, développez Créer, puis sélectionnez Base de données Firestore.
2. Cliquez sur Créer une base de données.
3. Laissez le champ Database ID (ID de la base de données) défini sur (default).
4. Sélectionnez un emplacement pour votre base de données, puis cliquez sur Suivant.
   Pour une application réelle, choisissez un emplacement proche de vos utilisateurs.
5. Cliquez sur Démarrer en mode test. Lisez la clause de non-responsabilité concernant les règles de sécurité.
   Dans cet atelier de programmation, vous ajouterez des règles de sécurité pour protéger vos données. Ne distribuez ni n'exposez publiquement une application sans ajouter de règles de sécurité pour votre base de données.
6. Cliquez sur Créer.

Configurer Cloud Storage for Firebase

1. Dans le panneau de gauche de la console Firebase, développez Créer, puis sélectionnez Stockage.
2. Cliquez sur Commencer.
3. Sélectionnez un emplacement pour votre bucket Storage par défaut.
   Les buckets situés dans les régions US-WEST1, US-CENTRAL1 et US-EAST1 peuvent profiter du niveau"Toujours sans frais" pour Google Cloud Storage. Les buckets situés dans toutes les autres régions sont soumis aux tarifs et à l'utilisation de Google Cloud Storage.
4. Cliquez sur Démarrer en mode test. Lisez la clause de non-responsabilité concernant les règles de sécurité.
   Dans cet atelier de programmation, vous ajouterez des règles de sécurité pour protéger vos données. Ne distribuez ni n'exposez publiquement une application sans ajouter de règles de sécurité pour votre bucket Storage.
5. Cliquez sur Créer.

7. Configurer votre application Web

Maintenant que vous avez créé un projet Firebase et activé tous les services Firebase utilisés dans votre application, vous êtes prêt à commencer à travailler dans IDX pour configurer votre application Web afin qu'elle utilise ces services.

Se connecter à la CLI Firebase dans IDX

IDX a déjà installé Node.js et la CLI Firebase. Vous pouvez donc ignorer leur installation et commencer à configurer la CLI.

1. Dans le terminal d'IDX, exécutez les commandes suivantes pour configurer la CLI afin qu'elle utilise le projet Firebase que vous avez créé précédemment :

   firebase login --no-localhost
   firebase use --add
   

   Lorsque vous êtes invité à saisir un alias, saisissez codelab.
2. Saisissez Y ou N selon que vous souhaitez ou non que Firebase collecte des données. L'une ou l'autre de ces options peut être utilisée indifféremment pour cet atelier de programmation.
3. Dans votre navigateur, sélectionnez votre compte Google, puis cliquez sur Autoriser.

Déployer des règles de sécurité et des index

Le code que vous avez copié dans votre dépôt GitHub contient déjà des ensembles de règles de sécurité pour Firestore (dans firestore.rules) et pour Cloud Storage pour Firebase (dans storage.rules). Une fois les règles de sécurité déployées, les données de votre base de données et de votre bucket sont mieux protégées contre les utilisations abusives.

Vous pouvez également utiliser la CLI pour déployer un ensemble d'index pour Firestore (dans firestore.indexes.json) afin d'activer les requêtes avancées.

1. Dans le terminal d'IDX, exécutez cette commande pour déployer ces règles de sécurité et ces index :

   firebase deploy --only firestore,storage
   

2. Si le message "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" s'affiche, appuyez sur Enter pour sélectionner Oui.

Ajouter votre configuration Firebase au code de votre application Web

1. Dans la console Firebase, procédez comme suit :
   1. Accédez aux paramètres de votre projet.
   2. Faites défiler la page jusqu'à la section Vos applications, puis sélectionnez l'application portant le même nom que votre backend App Hosting.
   3. Sous Configuration du SDK, sélectionnez l'option Config, puis copiez les propriétés de la variable firebaseConfig et leurs valeurs.
2. Dans IDX, procédez comme suit :
   1. Ouvrez le fichier apphosting.yaml. C'est ici que vous configurerez vos variables d'environnement sur App Hosting, ainsi que les secrets et la configuration de l'environnement d'exécution.
   2. Renseignez les valeurs des variables d'environnement fournies avec les valeurs de configuration que vous avez copiées depuis la console Firebase.Par exemple (remplacez par vos propres valeurs) :

      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. Enregistrez le fichier. Ensuite, dans le terminal d'IDX, exécutez les commandes suivantes pour transférer les modifications vers GitHub :

      git commit -a -m "Setup Firebase Config"
      
      git push
      

3. Revenez à la console Firebase, puis accédez de nouveau à la page App Hosting, puis procédez comme suit :
   1. Cliquez sur Afficher le tableau de bord pour votre backend.
   2. Notez qu'une nouvelle compilation a été déclenchée à partir de votre envoi git. La compilation et le déploiement sur Cloud Run devraient prendre environ trois minutes. Vous pouvez suivre sa progression en cliquant sur le chip build-ID.
   3. Actualisez la page de la console pour vérifier si le déploiement est terminé. Une fois l'opération terminée, cliquez sur le lien de votre domaine (se terminant par .hosted.app) sous domains pour l'ouvrir et afficher l'application nouvellement déployée.

Félicitations, vous avez déployé l'application Web initiale ! Examinons cela de plus près.

8. Essayer l'application Web dans un navigateur

Vérifier que vous pouvez vous connecter avec Firebase Authentication

1. Dans votre navigateur, actualisez la page affichant votre application Web.
2. Cliquez sur Sign in with Google (Se connecter avec Google).
3. Déconnectez-vous, puis reconnectez-vous. La page est actualisée en temps réel, sans avoir besoin de l'actualiser. Vous pouvez répéter cette étape avec différents utilisateurs.
4. Facultatif : Dans votre navigateur, actualisez l'application Web. Effectuez un clic droit sur l'application Web, sélectionnez Afficher la source de la page, puis recherchez le nom à afficher. Il apparaît dans le code source HTML brut renvoyé par le serveur.

Afficher les informations sur un restaurant

L'application Web inclut des données fictives pour les restaurants et les avis.

Pour insérer des données de restaurant fictives dans votre base de données Cloud Firestore, sélectionnez > Add sample restaurants (Ajouter des exemples de restaurants).

Vérifier que les fiches de restaurant se chargent lors de l'exécution du serveur

Avec le framework Next.js, il n'est pas toujours évident de savoir quand les données sont chargées au moment de l'exécution du serveur ou du client.

Pour vérifier que les fiches de restaurants se chargent lors de l'exécution du serveur, procédez comme suit :

1. Dans l'application Web, ouvrez les outils pour les développeurs et désactivez JavaScript.
2. Actualisez l'application Web. Les fiches d'établissement se chargent toujours. Les informations sur le restaurant sont renvoyées dans la réponse du serveur. Lorsque JavaScript est activé, les informations sur le restaurant sont hydratées via le code JavaScript côté client.
3. Dans les outils de développement, réactivez JavaScript.
4. Dans l'application Web, sélectionnez > Ajouter des restaurants exemples. Si votre fonction d'instantané est correctement implémentée, les restaurants s'affichent en temps réel sans actualisation de la page.

Ajouter des avis sur un restaurant

Pour ajouter un avis et vérifier qu'il est inséré dans Cloud Firestore, procédez comme suit :

1. Actualisez l'application Web, puis sélectionnez un restaurant sur la page d'accueil.
2. Sur la page du restaurant, cliquez sur .
3. Sélectionnez une note.
4. Rédigez un avis.
5. Cliquez sur Envoyer. Votre avis s'affiche en haut de la liste des avis.

9. Résumer les avis sur les restaurants avec l'IA générative

Dans cette section, vous allez ajouter une fonctionnalité de résumé des avis afin qu'un utilisateur puisse rapidement comprendre ce que tout le monde pense d'un restaurant sans avoir à lire tous les avis.

Stocker une clé API Gemini dans Cloud Secret Manager

App Hosting s'intègre à Cloud Secret Manager pour vous permettre de stocker des valeurs sensibles telles que des clés API de manière sécurisée.

1. Pour utiliser l'API Gemini, vous avez besoin d'une clé API. Créez une clé dans Google AI Studio.
   Lorsque vous y êtes invité, sélectionnez le même projet que celui que vous avez utilisé pour cet atelier de programmation (en coulisses, un projet Firebase est un projet Google Cloud).
2. Dans le terminal d'IDX, exécutez cette commande pour créer un secret :

   firebase apphosting:secrets:set gemini-api-key
   

3. Lorsque vous êtes invité à saisir la valeur secrète, copiez et collez votre clé API Gemini depuis Google AI Studio.
4. Si le message "To use this secret, your backend's service account must be granted access. Would you like to grant access now?" s'affiche, appuyez sur Enter pour sélectionner Oui.
5. Lorsque vous êtes invité à ajouter le nouveau secret à apphosting.yaml, saisissez Y pour accepter, puis appuyez sur Enter pour sélectionner GEMINI_API_KEY comme nom de variable d'environnement.

Votre clé API Gemini est désormais stockée de manière sécurisée dans Cloud Secret Manager et est accessible à votre backend App Hosting. Vous pouvez également afficher la valeur dans le tableau de bord Secret Manager de la console Google Cloud.

6. Ouvrez le fichier apphosting.yaml et notez que le nom de votre secret a été enregistré, mais pas les valeurs.Il devrait se présenter comme suit :

   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
   

Implémenter le composant de résumé des avis

1. Dans IDX, ouvrez src/components/Reviews/ReviewSummary.jsx.
2. Remplacez la fonction GeminiSummary par le code suivant :

   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. Dans le terminal d'IDX, exécutez ces commandes pour créer un commit et l'envoyer à votre dépôt GitHub.

   git commit -a -m "Use AI to summarize reviews"
   
   git push
   

4. Dans la console Firebase, ouvrez la page App Hosting et attendez que votre nouveau déploiement soit terminé.
5. Dans votre navigateur, cliquez sur la fiche d'un restaurant. En haut de l'écran, vous devriez voir un résumé d'une phrase de tous les avis sur le restaurant.
6. Ajoutez un nouvel avis et actualisez la page. La modification du résumé devrait s'afficher.

10. Conclusion

Félicitations ! Vous avez appris à utiliser Firebase App Hosting pour déployer une application Next.js et à utiliser l'API Gemini pour résumer du texte. Plus précisément, vous avez utilisé les éléments suivants :

• Firebase App Hosting pour compiler et déployer automatiquement votre code Next.js chaque fois que vous envoyez des modifications vers une branche GitHub configurée.
• Cloud Secret Manager (intégré à App Hosting) pour stocker de manière sécurisée votre clé API Gemini afin de créer des fonctionnalités d'IA générative dans votre application.

En savoir plus

Consultez l'atelier de programmation complet "Intégrer Firebase à une application Next.js" pour découvrir comment nous avons ajouté Firebase Authentication, Cloud Firestore et Cloud Storage pour Firebase à cette application.

Consultez également d'autres ateliers de programmation :

• Codelab Web Cloud Firestore
• Atelier de programmation sur les frameworks Web Angular Firebase
• Atelier de programmation "Protéger vos données Firestore avec les règles de sécurité Firebase"