Implementa en Firebase App Hosting con una app de Next.js

1. Antes de comenzar

En este codelab, aprenderás a realizar implementaciones en Firebase App Hosting con una app web de Next.js llamada Friendly Eats, que es un sitio web para opiniones sobre restaurantes.

La app web completa ofrece funciones útiles que demuestran cómo Firebase puede ayudarte a compilar apps de Next.js.

• Compilación e implementación automáticas: En este codelab, se muestra cómo usar Firebase App Hosting para compilar e implementar automáticamente tu código de Next.js cada vez que envíes código a una rama configurada.
• Acceso y cierre de sesión: La app web completa permite que los usuarios accedan o cierren la sesión con Google. El acceso y la persistencia de los usuarios se administran completamente a través de Firebase Authentication.
• Imágenes: La app web completada permite que los usuarios que accedieron suban imágenes de restaurantes. Los recursos de imagen se almacenan en Cloud Storage para Firebase. El SDK de Firebase JavaScript proporciona una URL pública para las imágenes subidas. Luego, esta URL pública se almacena en el documento relevante del restaurante en Cloud Firestore.
• Filtros: La app web completada permite que los usuarios que accedieron a su cuenta filtren la lista de restaurantes según la categoría, la ubicación y el precio. También puedes personalizar el método de ordenamiento que se usa. Se accede a los datos desde Cloud Firestore, y las consultas de Firestore se aplican según los filtros que se usen.
• Opiniones: La app web completa permite que los usuarios que accedieron a su cuenta publiquen opiniones sobre restaurantes que consisten en una calificación por estrellas y un mensaje basado en texto. La información de las opiniones se almacena en Cloud Firestore.
• Resúmenes de opiniones: La app web completa resume automáticamente las opiniones con un modelo de Gemini. Los resúmenes generados por IA se almacenan en Cloud Firestore.

Requisitos previos

• Conocimientos de Next.js y JavaScript

Qué aprenderás

• Cómo usar Firebase con el router de app de Next.js y la renderización del servidor
• Cómo autorizar llamadas a la API de Gemini con Secrets solo del servidor

Requisitos

• Un navegador de tu elección, como Google Chrome
• Acceso a IDX.dev (un espacio de trabajo basado en la Web)
• Una Cuenta de Google para la creación y administración de tu proyecto de Firebase
• Una cuenta de GitHub (no es necesario que sea la misma cuenta de correo electrónico que la anterior)

2. Configura tu entorno de desarrollo y tu repositorio de GitHub

En este codelab, se proporciona la base de código de partida de la app y se basa en Firebase CLI y IDX.dev.

Crea un repositorio de GitHub nuevo y, luego, impórtalo a IDX

Firebase App Hosting te permite configurar un repositorio de GitHub para que compile y, luego, implemente tu código de Next.js cada vez que envíes código a una rama configurada.

1. Crea un repositorio de GitHub nuevo para este codelab: https://github.com/new. Asigna el nombre que quieras, por ejemplo, MyFriendlyEatsCodelab.
2. Copia la URL de tu nuevo repositorio. Se verá de la siguiente manera:
   https://github.com/USER_NAME/REPOSITORY_NAME.git
3. Ve a https://idx.google.com y accede a tu cuenta.
4. Haz clic en Importar un repo y pega la URL de GitHub que copiaste.
   IDX te pedirá que vincules tu cuenta a GitHub y, luego, clonará tu repositorio (vacío).

Visualiza el repositorio de código fuente del codelab

Consulta el código fuente del codelab en https://github.com/firebase/friendlyeats-web. El repositorio friendlyeats-web contiene proyectos de muestra para varias plataformas.

Este codelab en el que estás trabajando se enfoca solo en Firebase App Hosting y la API de Gemini, y es una versión abreviada del codelab completo "Integra Firebase en una app de Next.js". Este codelab abreviado requiere que solo trabajes con el código fuente en la rama #io-connect del repositorio friendlyeats-web, específicamente el directorio nextjs-step10.

Ten en cuenta los siguientes directorios adicionales del repositorio friendlyeats-web. Aunque no necesitas estos directorios para este codelab, es útil saber qué son.

• nextjs-start: Contiene el código de inicio para el codelab completo "Integra Firebase en una app de Next.js".
• nextjs-end: Contiene el código de solución para la app web finalizada.

Copia el código fuente del codelab en tu repositorio nuevo

Sigue estos pasos para copiar el directorio nextjs-step10 en tu propio repositorio:

1. En IDX, abre la terminal con Menú > Terminal > Nueva terminal.
2. Usa el paquete npm giget para recuperar solo el directorio nextjs-step10 de la rama io-connect:

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

3. Haz un seguimiento de los cambios de forma local con Git:

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

Ahora deberías ver el código de partida en tu repositorio de GitHub.

3. Revisa la base de código de inicio

En esta sección, revisarás algunas áreas de la base de código inicial de la app a las que agregarás funcionalidad en este codelab.

Estructura de carpetas y archivos

En la siguiente tabla, se incluye una descripción general de la estructura de carpetas y archivos de la app:

Componentes del servidor y el cliente

La app es una app web de Next.js que usa el App Router. El procesamiento del servidor se usa en toda la app. Por ejemplo, el archivo src/app/page.js es un componente del servidor responsable de la página principal. El archivo src/components/RestaurantListings.jsx es un componente del cliente que se indica con la directiva "use client" al comienzo del archivo.

Declaraciones de importación

En algunos archivos, es posible que veas instrucciones de importación como las siguientes:

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

La app usa el símbolo @ para evitar rutas de importación relativas torpes, y los alias de ruta lo hacen posible.

APIs específicas de Firebase

Todo el código de la API de Firebase se incluye en el directorio src/lib/firebase. Luego, los componentes individuales de React importan las funciones encapsuladas desde el directorio src/lib/firebase, en lugar de importar las funciones de Firebase directamente.

Datos simulados

Los datos simulados de restaurantes y opiniones se encuentran en el archivo src/lib/randomData.js. Los datos de ese archivo se ensamblan en el código del archivo src/lib/fakeRestaurants.js.

4. Configura el proyecto de Firebase

En esta sección, configurarás un proyecto de Firebase y le asociarás una app web de Firebase. También configurarás los servicios de Firebase que usa la app web de muestra.

Crea un proyecto de Firebase

1. Accede a la consola de Firebase con la misma Cuenta de Google que usaste en el paso anterior.
2. Haz clic en el botón para crear un proyecto nuevo y, luego, ingresa un nombre (por ejemplo, FriendlyEats Codelab).
   
3. Haz clic en Continuar.
4. Si se te solicita, revisa y acepta las Condiciones de Firebase y, luego, haz clic en Continuar.
5. (Opcional) Habilita la asistencia de IA en Firebase console (llamada "Gemini en Firebase").
6. Para este codelab, no necesitas Google Analytics, por lo que debes desactivar la opción de Google Analytics.
7. Haz clic en Crear proyecto, espera a que se aprovisione y, luego, haz clic en Continuar.

Actualiza tu plan de precios de Firebase

Para usar Firebase App Hosting y Cloud Storage para Firebase, tu proyecto de Firebase debe tener el plan de precios de pago por uso (Blaze), lo que significa que está vinculado a una cuenta de Facturación de Cloud.

• Una cuenta de facturación de Cloud requiere una forma de pago, como una tarjeta de crédito.
• Si es la primera vez que usas Firebase y Google Cloud, verifica si cumples con los requisitos para obtener un crédito de USD 300 y una cuenta de Facturación de Cloud de prueba gratuita.
• Si realizas este codelab como parte de un evento, pregúntale al organizador si hay créditos de Cloud disponibles.

Para actualizar tu proyecto al plan Blaze, sigue estos pasos:

1. En Firebase console, selecciona la opción para actualizar tu plan.
2. Selecciona el plan Blaze. Sigue las instrucciones en pantalla para vincular una cuenta de Facturación de Cloud a tu proyecto.
   Si necesitas crear una cuenta de Facturación de Cloud como parte de esta actualización, es posible que debas volver al flujo de actualización en Firebase console para completar la actualización.

5. Crea un backend de App Hosting

En esta sección, configurarás un backend de App Hosting para supervisar una rama en tu repositorio de Git. También configurarás todos los servicios con los que se comunicará el backend.

Al final de esta sección, tendrás un backend de App Hosting conectado a tu repositorio en GitHub que volverá a compilar y lanzará automáticamente una nueva versión de tu app cada vez que envíes una confirmación nueva a tu rama main.

Crear un backend

1. En Firebase console, navega a la página App Hosting:
2. Haz clic en Comenzar para iniciar el flujo de creación del backend.
3. Sigue las indicaciones para importar y conectar el repositorio de GitHub que creaste antes.
4. Establece la configuración de implementación:
   • Conserva el directorio raíz como /.
   • Establece la rama activa en main
   • Habilitar los lanzamientos automáticos
5. Asigna el nombre friendlyeats-codelab a tu backend (o el nombre que prefieras). Esto se convierte en parte del dominio que se usa para acceder al backend.
   Este flujo de trabajo también crea automáticamente una app web de Firebase en tu proyecto de Firebase. Más adelante en este codelab, usarás los valores de configuración de esta app web para conectar tu base de código a tu proyecto de Firebase.
6. Haz clic en Finalizar y, luego, en Implementar. Después de un momento, se te dirigirá a una nueva página en la que podrás ver el estado de tu nuevo backend de App Hosting.
7. En el panel de App Hosting, copia tu nuevo dominio.
   Tendrá un patrón como BACKEND_ID--PROJECT_ID.REGION.hosted.app. Necesitarás este dominio para configurar Firebase Authentication más adelante.

Es posible que el dominio tarde unos minutos en comenzar a funcionar debido a la propagación del DNS y la creación del certificado SSL. Mientras se crea tu backend, continúa con la configuración del resto del proyecto de Firebase y configura tu backend (próximos pasos de este codelab).

Cada vez que envíes una confirmación nueva a la rama main de tu repositorio de GitHub, verás que comienza una nueva compilación y un nuevo lanzamiento en Firebase console, y tu sitio se actualizará automáticamente cuando se complete el lanzamiento.

6. Configura otros servicios de Firebase

Aunque este codelab se enfoca solo en Firebase App Hosting y la API de Gemini, la app web en funcionamiento requiere otros servicios de Firebase para funcionar. El código para que todos estos servicios funcionen en tu app forma parte de la base de código que copiaste en tu propio repositorio de GitHub, pero aún debes configurar estos servicios en tu proyecto de Firebase.

Configura la autenticación

1. En Firebase console, navega a Autenticación.
2. Haz clic en Comenzar.
3. En la columna Proveedores adicionales, haz clic en Google > Habilitar.
   1. En el cuadro de texto Nombre público del proyecto, ingresa un nombre, como My FriendlyEatsCodelab app.
   2. En el menú desplegable Correo electrónico de asistencia para el proyecto, selecciona tu dirección de correo electrónico.
   3. Haz clic en Guardar.
4. Haz clic en la pestaña Configuración en la página Autenticación.
   1. Haz clic en Dominios autorizados en el menú lateral de la izquierda de la pantalla.
   2. Haz clic en Add Domain y, luego, agrega el dominio de App Hosting que acabas de crear (termina en .hosted.app).
   3. Haz clic en Agregar para guardar.

Configura Cloud Firestore

1. En el panel izquierdo de Firebase console, expande Compilación y, luego, selecciona Base de datos de Firestore.
2. Haz clic en Crear base de datos.
3. Deja el ID de la base de datos establecido en (default).
4. Selecciona una ubicación para tu base de datos y, luego, haz clic en Siguiente.
   Para una app real, debes elegir una ubicación cercana a tus usuarios.
5. Haz clic en Comenzar en modo de prueba. Lee la renuncia de responsabilidad sobre las reglas de seguridad.
   Más adelante en este codelab, agregarás reglas de seguridad para proteger tus datos. No distribuyas ni expongas una app de forma pública sin agregar reglas de seguridad para tu base de datos.
6. Haz clic en Crear.

Configura Cloud Storage para Firebase

1. En el panel izquierdo de Firebase console, expande Compilación y, luego, selecciona Storage.
2. Haz clic en Comenzar.
3. Selecciona una ubicación para tu bucket de Storage predeterminado.
   Los buckets en US-WEST1, US-CENTRAL1 y US-EAST1 pueden aprovechar el nivel “Siempre gratuito” para Google Cloud Storage. Los buckets de todas las demás ubicaciones siguen los precios y el uso de Google Cloud Storage.
4. Haz clic en Comenzar en modo de prueba. Lee la renuncia de responsabilidad sobre las reglas de seguridad.
   Más adelante en este codelab, agregarás reglas de seguridad para proteger tus datos. No distribuyas ni expongas una app de forma pública sin agregar reglas de seguridad para tu bucket de Storage.
5. Haz clic en Crear.

7. Configura tu aplicación web

Ahora que creaste un proyecto de Firebase y habilitaste todos los servicios de Firebase que se usan en tu app, puedes comenzar a trabajar en IDX para configurar tu app web para que use esos servicios.

Accede a Firebase CLI en IDX

IDX ya tiene instalados Node.js y Firebase CLI, por lo que puedes omitir su instalación y comenzar a configurar la CLI.

1. En la terminal de IDX, ejecuta estos comandos para configurar la CLI de modo que use el proyecto de Firebase que creaste antes:

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

   Cuando se te solicite un alias, ingresa codelab.
2. Según si deseas que Firebase recopile datos, ingresa Y o N. Cualquiera de las opciones funciona para este codelab.
3. En tu navegador, selecciona tu Cuenta de Google y, luego, haz clic en Permitir.

Implementa reglas de seguridad e índices

El código que copiaste en tu repo de GitHub ya tiene conjuntos de reglas de seguridad para Firestore (en firestore.rules) y para Cloud Storage para Firebase (en storage.rules). Después de implementar las reglas de seguridad, los datos de tu base de datos y tu bucket estarán mejor protegidos contra el uso inadecuado.

También puedes usar la CLI para implementar un conjunto de índices para Firestore (en firestore.indexes.json) y habilitar consultas avanzadas.

1. En la terminal de IDX, ejecuta este comando para implementar estos índices y reglas de seguridad:

   firebase deploy --only firestore,storage
   

2. Si se te pregunta: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?", presiona Enter para seleccionar Sí.

Agrega tu configuración de Firebase al código de tu app web

1. En Firebase console, haz lo siguiente:
   1. Navega a la Configuración del proyecto.
   2. Desplázate hacia abajo hasta la sección Tus apps y, luego, selecciona la app con el mismo nombre que tu backend de App Hosting.
   3. En Configuración del SDK, elige la opción Config y, luego, copia las propiedades de la variable firebaseConfig y sus valores.
2. En IDX, haz lo siguiente:
   1. Abre el archivo apphosting.yaml. Aquí configurarás tus variables de entorno en App Hosting, así como los secretos y la configuración del tiempo de ejecución.
   2. Completa los valores de las variables de entorno proporcionadas con los valores de configuración que copiaste de Firebase console.Por ejemplo (reemplaza con tus propios valores):

      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. Guarda el archivo. Luego, en la terminal de IDX, ejecuta estos comandos para enviar los cambios a GitHub:

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

3. Regresa a Firebase console, navega a la página App Hosting y, luego, haz lo siguiente:
   1. Haz clic en Ver panel para tu backend.
   2. Observa que se activó una compilación nueva desde tu git push. La compilación y el lanzamiento en Cloud Run deberían tardar alrededor de 3 minutos. Para supervisar su progreso, haz clic en el chip build-ID.
   3. Actualiza la página de la consola para verificar si finalizó el lanzamiento. Cuando se complete, haz clic en el vínculo de tu dominio (que termina en .hosted.app) en domains para abrirlo y ver la app recién implementada.

¡Felicitaciones! Implementaste la app web inicial. Profundicemos un poco más.

8. Prueba la app web en un navegador

Verifica que puedes acceder con Firebase Authentication

1. En tu navegador, actualiza la página que muestra tu app web.
2. Haz clic en Acceder con Google.
3. Sal y vuelve a acceder. La página se actualiza en tiempo real sin necesidad de actualizarla. Puedes repetir este paso con diferentes usuarios.
4. Opcional: En tu navegador, actualiza la app web. Haz clic con el botón derecho en la app web, selecciona Ver código fuente de la página y busca el nombre visible. Aparecerá en la fuente HTML sin procesar que muestra el servidor.

Visualiza información del restaurante

La app web incluye datos simulados para restaurantes y opiniones.

Para insertar datos de restaurantes ficticios en tu base de datos de Cloud Firestore, selecciona > Add sample restaurants.

Verifica que las fichas de restaurantes se carguen durante el tiempo de ejecución del servidor

Con el framework de Next.js, es posible que no sea obvio cuándo se cargan los datos en el tiempo de ejecución del servidor o en el tiempo de ejecución del cliente.

Para verificar que las fichas de restaurantes se carguen durante el tiempo de ejecución del servidor, sigue estos pasos:

1. En la app web, abre Herramientas para desarrolladores y inhabilita JavaScript.
2. Actualiza la app web. Las fichas de restaurantes se siguen cargando. La información del restaurante se devuelve en la respuesta del servidor. Cuando se habilita JavaScript, la información del restaurante se hidrata a través del código JavaScript del cliente.
3. En Herramientas para desarrolladores, vuelve a habilitar JavaScript.
4. En la app web, selecciona > Add sample restaurants. Si la función de instantánea se implementó correctamente, los restaurantes aparecerán en tiempo real sin que se actualice la página.

Agrega opiniones sobre un restaurante

Para agregar una opinión y verificar que se inserte en Cloud Firestore, sigue estos pasos:

1. Actualiza la app web y selecciona un restaurante en la página principal.
2. En la página del restaurante, haz clic en .
3. Selecciona una calificación por estrellas.
4. Escribe una opinión
5. Haz clic en Enviar. Tu opinión aparecerá en la parte superior de la lista de opiniones.

9. Resume opiniones sobre restaurantes con IA generativa

En esta sección, agregarás una función de resumen de opiniones para que los usuarios puedan comprender rápidamente lo que todos piensan de un restaurante sin tener que leer cada opinión.

Almacena una clave de la API de Gemini en Cloud Secret Manager

App Hosting se integra en Cloud Secret Manager para que puedas almacenar de forma segura valores sensibles, como las claves de API.

1. Para usar la API de Gemini, necesitarás una clave de API. Crea una clave en Google AI Studio.
   Cuando se te solicite, selecciona el mismo proyecto que has estado usando para este codelab (en segundo plano, un proyecto de Firebase es un proyecto de Google Cloud).
2. En la terminal de IDX, ejecuta este comando para crear un secreto nuevo:

   firebase apphosting:secrets:set gemini-api-key
   

3. Cuando se te solicite el valor secreto, copia y pega tu clave de API de Gemini desde Google AI Studio.
4. Si se te pregunta: "To use this secret, your backend's service account must be granted access. Would you like to grant access now?", presiona Enter para seleccionar Sí.
5. Cuando se te pregunte si se debe agregar el nuevo secreto a apphosting.yaml, ingresa Y para aceptar y, luego, presiona Enter para seleccionar GEMINI_API_KEY como el nombre de la variable de entorno.

Tu clave de la API de Gemini ahora se almacena de forma segura en Cloud Secret Manager y es accesible para tu backend de App Hosting. También puedes ver el valor en el panel de Secrets Manager en la consola de Google Cloud.

6. Abre el archivo apphosting.yaml y observa que se registró el nombre de tu secreto, pero no los valores.Debería verse de la siguiente manera:

   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
   

Implementa el componente de resumen de opiniones

1. En IDX, abre src/components/Reviews/ReviewSummary.jsx.
2. Reemplaza la función GeminiSummary por el siguiente código:

   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. En la terminal de IDX, ejecuta estos comandos para crear una confirmación y enviarla a tu repositorio de GitHub.

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

4. En Firebase console, abre la página App Hosting y espera a que se complete el nuevo lanzamiento.
5. En tu navegador, haz clic en la tarjeta de un restaurante. En la parte superior de la pantalla, deberías ver un resumen de una oración de todas las opiniones sobre el restaurante.
6. Agrega una opinión nueva y actualiza la página. Deberías ver el cambio en el resumen.

10. Conclusión

¡Felicitaciones! Aprendiste a usar Firebase App Hosting para implementar una app de Next.js y usar la API de Gemini para resumir texto. Específicamente, usaste lo siguiente:

• Firebase App Hosting para compilar e implementar automáticamente tu código de Next.js cada vez que envíes código a una rama de GitHub configurada
• Cloud Secret Manager (integrado en App Hosting) para almacenar de forma segura tu clave de la API de Gemini y que puedas crear funciones basadas en IA generativa en tu app

Más información

Consulta el codelab completo "Integra Firebase en una app de Next.js" para aprender cómo agregamos Firebase Authentication, Cloud Firestore y Cloud Storage para Firebase a esta app.

También puedes consultar más codelabs:

• Codelab web de Cloud Firestore
• Codelab de Firebase Angular Web Frameworks
• Codelab: Protege tus datos de Firestore con las reglas de seguridad de Firebase