Cree aplicaciones web basadas en IA con Firebase Extensions

1. Antes de comenzar

En este codelab, aprenderá a crear aplicaciones web con tecnología de inteligencia artificial que brinden experiencias de usuario atractivas con Firebase Extensions.

Requisitos previos

• Conocimientos de Node.js y JavaScript.

lo que aprenderás

• Cómo utilizar extensiones relacionadas con la IA para procesar la entrada de idiomas y vídeos.
• Cómo utilizar Cloud Functions para Firebase para formar una canalización entre Extensiones.
• Cómo utilizar JavaScript para acceder a los resultados producidos por Extensions.

Lo que necesitarás

• Un navegador de tu elección, como Google Chrome
• Un entorno de desarrollo con un editor de código y terminal.
• Una cuenta de Google para la creación y gestión de tu proyecto Firebase

2. Revisar las aplicaciones web y sus servicios Firebase.

Esta sección describe las aplicaciones web que crearás en este codelab y qué Firebase usarás para crearlas.

Revisar la aplicación

Una empresa de camisetas está abrumada por largas reseñas sobre una de sus camisetas y no está segura de su calificación general. La aplicación web Reviewly completa resume cada reseña, proporciona una calificación de estrellas para cada reseña y utiliza cada reseña para inferir una calificación general del producto. Los usuarios también pueden ampliar cada reseña resumida para ver la reseña original.

aplicación de chatbot

El personal docente de una escuela está abrumado por preguntas repetitivas sobre temas generales, por lo que quiere automatizar las respuestas. La aplicación Chatbot completa proporciona a los estudiantes un chatbot conversacional impulsado por un modelo de lenguaje grande (LLM) y puede responder preguntas sobre temas generales. El chatbot tiene un contexto histórico, por lo que sus respuestas pueden tener en cuenta preguntas anteriores que los estudiantes hicieron en la misma conversación.

Aplicación Sugerencia de video

Un departamento gubernamental quiere que sus videos proporcionen descripciones de audio para mejorar la accesibilidad, pero tienen cientos de videos para anotar y necesitan un enfoque simplificado. La aplicación Video Hint completa es un prototipo que el departamento revisará para evaluar su eficacia.

Estas son las extensiones utilizadas en la aplicación Video Hint :

• Etiquete videos con la extensión Cloud Video AI : extraiga etiquetas de cada video cargado en Storage.
• Tareas de lenguaje con extensión API PaLM : resuma las etiquetas en una descripción de texto.
• Extensión Convertir texto a voz : crea una versión de audio de la descripción del vídeo.

3. Configure su entorno de desarrollo

Verifique su versión de Node.js

1. En tu terminal, verifica que tienes instalado Node.js v20.0.0 o superior:

   node -v
   

2. Si no tiene Node.js v20.0.0 o superior, descárguelo e instálelo .

Descargar el repositorio

1. Si tienes git instalado, clona el repositorio GitHub del codelab:

   git clone https://github.com/FirebaseExtended/ai-extensions-codelab.git
   

2. Si no tiene git instalado, descargue el repositorio de GitHub como un archivo zip .

Revisar la estructura de carpetas

En su máquina local, busque el repositorio clonado y revise la estructura de carpetas. La siguiente tabla contiene las carpetas y sus descripciones:

Cada carpeta incluye un archivo readme.md que ofrece un inicio rápido para ejecutar la aplicación web respectiva, mediante instrucciones simplificadas. Sin embargo, si es la primera vez que aprende, debe completar este codelab porque contiene el conjunto de instrucciones más completo.

Si no está seguro de si aplicó correctamente el código como se indica en este codelab, puede encontrar el código de solución para las aplicaciones respectivas en las carpetas reviewly-end , chatbot-end y video-hint-end .

Instale la CLI de Firebase

Ejecute el siguiente comando para verificar que tenga Firebase CLI instalado y que sea v12.5.4 o superior:

firebase --version

• Si tiene Firebase CLI instalado, pero no es la versión 12.5.4 o superior, actualícela:

  npm update -g firebase-tools
  

• Si no tiene Firebase CLI instalado, instálelo:

  npm install -g firebase-tools
  

Si no puede instalar Firebase CLI debido a errores de permisos, consulte la documentación de npm o use otra opción de instalación .

Iniciar sesión en Firebase

1. En su terminal, navegue hasta la carpeta ai-extensions-codelab e inicie sesión en Firebase:

   cd ai-extensions-codelab
   firebase login
   

2. Si tu terminal dice que ya iniciaste sesión en Firebase, continúa con la sección Configura tu proyecto de Firebase de este codelab.
3. Dependiendo de si desea que Firebase recopile datos, ingrese Y o N
4. En su navegador, seleccione su cuenta de Google y luego haga clic en Permitir .

4. Configura tu proyecto de Firebase

En esta sección, configurará un proyecto de Firebase y le asociará una aplicación web de Firebase. También habilitará los servicios de Firebase utilizados por las aplicaciones web de muestra.

Crear un proyecto de Firebase

1. En Firebase console , haz clic en Crear proyecto .
2. En el cuadro de texto Ingrese el nombre de su proyecto , ingrese AI Extensions Codelab (o el nombre de un proyecto de su elección) y luego haga clic en Continuar .
3. Para este codelab, no necesita Google Analytics, así que desactive la opción Habilitar Google Analytics para este proyecto .
4. Haga clic en Crear proyecto .
5. Espere a que se aprovisione su proyecto y luego haga clic en Continuar .
6. En su proyecto de Firebase, vaya a Configuración del proyecto . Anota el ID de tu proyecto porque lo necesitarás más adelante. Este identificador único es la forma en que se identifica su proyecto (por ejemplo, en Firebase CLI).

Descargar una cuenta de servicio de Firebase

Algunas de las aplicaciones web que crearás en este codelab utilizan la representación del lado del servidor con Next.js.

El SDK de Firebase Admin para Node.js se utiliza para garantizar que las reglas de seguridad funcionen desde el código del lado del servidor. Para usar las API en Firebase Admin, debe descargar una cuenta de servicio de Firebase desde Firebase console.

1. En Firebase console, navega hasta la página Cuentas de servicio en la configuración de tu proyecto .
2. Haga clic en Generar nueva clave privada > Generar clave .
3. Una vez que el archivo se haya descargado en su sistema de archivos, obtenga la ruta completa a ese archivo.
   Por ejemplo, si descargó el archivo en su carpeta de Descargas , la ruta completa podría verse así: /Users/me/Downloads/my-project-id-firebase-adminsdk-123.json
4. En su terminal, configure la variable de entorno GOOGLE_APPLICATION_CREDENTIALS en la ruta de su clave privada descargada. En un entorno Unix, el comando podría verse así:

   export GOOGLE_APPLICATION_CREDENTIALS="/Users/me/Downloads/my-project-id-firebase-adminsdk-123.json"
   

5. Mantenga esta terminal abierta y úsela durante el resto de este codelab, ya que su variable de entorno podría perderse si inicia una nueva sesión de terminal.
   Si abre una nueva sesión de terminal, debe volver a ejecutar el comando anterior.

Actualice su plan de precios de Firebase

Para usar Cloud Functions y Firebase Extensions, su proyecto de Firebase debe estar en el plan de precios Blaze , lo que significa que está asociado con una cuenta de facturación de Cloud .

• Una cuenta de Cloud Billing requiere un método de pago, como una tarjeta de crédito.
• Si eres nuevo en Firebase y Google Cloud, verifica si eres elegible para un crédito de $300 y una cuenta de prueba gratuita de facturación en la nube .

Sin embargo, tenga en cuenta que la finalización de este codelab no debería generar ningún cargo real.

Para actualizar su proyecto al plan Blaze, siga estos pasos:

1. En Firebase console, selecciona actualizar tu plan .
2. En el cuadro de diálogo, seleccione el plan Blaze y luego siga las instrucciones en pantalla para asociar su proyecto con una cuenta de facturación de Cloud.
   Si necesitabas crear una cuenta de facturación de Cloud, es posible que tengas que volver al flujo de actualización en Firebase console para completar la actualización.

Configurar los servicios de Firebase en la consola de Firebase

En esta sección, aprovisionarás y configurarás varios servicios de Firebase utilizados por las aplicaciones web en este codelab. Tenga en cuenta que no todos estos servicios se utilizan en cada aplicación web, pero configurar todos estos servicios ahora mismo es una comodidad para trabajar en este codelab.

Configurar la autenticación

Utilizará la autenticación tanto con la aplicación Chatbot como con la aplicación Video Hint . Sin embargo, recuerda que si estuvieras creando una aplicación real, cada aplicación debería tener su propio proyecto de Firebase .

1. En Firebase console, navega hasta Autenticación .
2. Haga clic en Comenzar .
3. En la columna Proveedores adicionales , haga clic en Google > Habilitar .

4. En el cuadro de texto Nombre público para el proyecto , ingrese un nombre fácil de recordar, como My AI Extensions Codelab .
5. En el menú desplegable Correo electrónico de soporte para el proyecto , seleccione su dirección de correo electrónico.
6. Clic en Guardar .
   

Configurar Cloud Firestore

Usarás Firestore con las tres aplicaciones. Sin embargo, recuerda que si estuvieras creando una aplicación real, cada aplicación debería tener su propio proyecto de Firebase .

1. En Firebase console, navega hasta Firestore .
2. Haga clic en Crear base de datos > Iniciar en modo de prueba > Siguiente .
   Más adelante en este codelab, agregará reglas de seguridad para proteger sus datos. No distribuya ni exponga una aplicación públicamente sin agregar reglas de seguridad para su base de datos .
3. Utilice la ubicación predeterminada o seleccione una ubicación de su elección.
   Para una aplicación real, debes elegir una ubicación que esté cerca de tus usuarios. Tenga en cuenta que esta ubicación no se puede cambiar más adelante y también será automáticamente la ubicación de su depósito predeterminado de Cloud Storage (siguiente paso).
4. Haga clic en Listo.

Configurar almacenamiento en la nube para Firebase

Utilizará Cloud Storage con la aplicación Video Hint y probará la extensión Convertir texto a voz (siguiente paso del codelab).

1. En Firebase console, navega hasta Almacenamiento .
2. Haga clic en Comenzar > Iniciar en modo de prueba > Siguiente .
   Más adelante en este codelab, agregará reglas de seguridad para proteger sus datos. No distribuya ni exponga una aplicación públicamente sin agregar reglas de seguridad para su depósito de almacenamiento .
3. La ubicación de su depósito ya debería estar seleccionada (debido a la configuración de Firestore en el paso anterior).
4. Haga clic en Listo.

En las siguientes secciones de este codelab, instalará extensiones y modificará las bases de código de cada aplicación de muestra en este codelab para que funcionen tres aplicaciones web diferentes.

5. Configure la extensión "Tareas de idioma con API PaLM" para la aplicación Reviewly

Instale las tareas de lenguaje con la extensión API PaLM

1. Navegue hasta Tareas de idioma con la extensión API PaLM .
2. Haga clic en Instalar en Firebase console .
3. Selecciona tu proyecto de Firebase.
4. En la sección Revisar API habilitadas y recursos creados , haga clic en Habilitar junto a cualquier servicio que se le sugiera:

5. Haga clic en Siguiente > Siguiente.
6. En el cuadro de texto Ruta de la colección , ingrese bot .
7. En el cuadro de texto Solicitar , ingrese .
8. En el cuadro de texto Campos variables , ingrese input .
9. En el cuadro de texto del campo Respuesta , ingrese text .
10. En el menú desplegable de ubicación de Cloud Functions , seleccione Iowa (us-central1) o la ubicación que seleccionó previamente para Firestore y Cloud Storage.
11. En el menú desplegable Modelo de idioma , seleccione text-bison-001 .
12. Deje todos los demás valores como predeterminados.
13. Haga clic en Instalar extensión y espere a que se instale la extensión.

Pruebe las tareas de lenguaje con la extensión API PaLM

Si bien el objetivo de este codelab es interactuar con la extensión Language Tasks con PaLM API a través de una aplicación web, es útil comprender cómo funciona la extensión al activarla mediante Firebase console. La extensión se activa cuando se agrega un documento de Cloud Firestore a la colección bot .

Para ver cómo funciona la extensión usando Firebase console, sigue estos pasos:

1. En Firebase console, navega hasta Firestore .
2. En la colección bot , haga clic en Agregar documento .
3. En el cuadro de texto ID del documento , haga clic en ID automática .
4. En el cuadro de texto Campo , ingrese input .
5. En el cuadro de texto Valor , ingrese Tell me about the moon .
6. Haga clic en Guardar y espere unos segundos. Su documento dentro de la colección bot ahora incluye una respuesta a su consulta.

6. Configure la aplicación Reviewly para usar Firebase

Para ejecutar la aplicación Reviewly , debes configurar el código de tu aplicación y Firebase CLI para interactuar con tu proyecto de Firebase.

Agregue servicios y configuración de Firebase al código de su aplicación

Para usar Firebase, la base de código de tu aplicación necesita los SDK de Firebase para los servicios que deseas usar y la configuración de Firebase que les indica a esos SDK qué proyecto de Firebase usar.

La aplicación de muestra de este codelab ya incluye todo el código de importación e inicialización necesario para los SDK (consulte reviewly-start/js/reviews.js ), por lo que no es necesario agregarlos. Sin embargo, la aplicación de muestra solo tiene valores de marcador de posición para la configuración de Firebase (consulte reviewly-start/js/firebase-config.js ), por lo que debe registrar su aplicación con su proyecto de Firebase para obtener los valores de configuración de Firebase únicos para su aplicación.

1. En Firebase console, en tu proyecto de Firebase, navega hasta la descripción general del proyecto y luego haz clic en Web .
   
2. En el cuadro de texto Apodo de la aplicación , ingrese un apodo memorable para la aplicación, como My Reviewly app .
3. No seleccione la casilla Configurar también Firebase Hosting para esta aplicación . Realizarás estos pasos más adelante en el codelab.
4. Haga clic en Registrar aplicación .
5. La consola muestra un fragmento de código para agregar e inicializar el SDK de Firebase con un objeto de configuración de Firebase específico de la aplicación. Copie todas las propiedades en el objeto de configuración de Firebase.
6. En su editor de código, abra el archivo reviewly-start/js/firebase-config.js .
7. Reemplace los valores del marcador de posición con los valores que acaba de copiar. Está bien si tienes propiedades y valores para los servicios de Firebase que no usas en la aplicación Reviewly .
8. Guarda el archivo.
9. De vuelta en Firebase console, haz clic en Continuar a la consola .

Configure su terminal para ejecutar comandos de Firebase CLI en su proyecto de Firebase

1. En su terminal, navegue hasta la carpeta ai-extensions-codelab que descargó anteriormente.
2. Navegue hasta la carpeta de la aplicación web reviewly-start :

   cd reviewly-start
   

3. Haga que Firebase CLI ejecute comandos en un proyecto de Firebase específico:

   firebase use YOUR_PROJECT_ID
   

Ejecute y vea la aplicación web Reviewly

Para ejecutar y ver la aplicación web, siga estos pasos:

1. En su terminal, instale las dependencias y luego ejecute la aplicación web:

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   npm run dev
   

2. En su navegador, navegue hasta la URL que se muestra en su terminal. Por ejemplo: http://localhost:8080 .

La página debería cargarse, pero notarás que faltan varias funciones. Los agregaremos en los siguientes pasos de este codelab.

7. Agregue funcionalidad a la aplicación Reviewly

En el último paso de este codelab, ejecutó la aplicación Reviewly localmente, pero no tenía mucha funcionalidad y aún no usaba la extensión instalada. En este paso del codelab, agregará esta funcionalidad y usará la aplicación web para activar la extensión.

Implementar reglas de seguridad

La aplicación de muestra de este codelab contiene conjuntos de reglas de seguridad para Firestore y Cloud Storage para Firebase. Después de implementar estas reglas de seguridad en su proyecto de Firebase, los datos de su base de datos y su depósito estarán mejor protegidos contra el uso indebido.

Puede ver estas reglas en los archivos firestore.rules y storage.rules .

1. Para implementar estas reglas de seguridad, ejecute este comando en su terminal:

   firebase deploy --only firestore:rules,storage
   

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

Actualice el código de la aplicación para activar la extensión.

En la aplicación Reviewly , una nueva reseña agregada a Firestore activa la extensión para resumir la reseña.

1. En su editor de código, abra el archivo functions/add-mock-reviews.js .
2. Reemplace la variable reviewWithPrompt con el siguiente código, que solicita al modelo de lenguaje una revisión más breve.

   const reviewWithPrompt = `Here's a user supplied review. Give me a shorter summary of the review, and a rating out of 5, and a flag which indicates if there was a product defect.
   
   Product name: "Blue t-shirt with cat picture". Review: """${review}"""
   
   Craft your response as JSON with properties has_defect, summary and rating. Don't include any extra text.`;
   

3. Después de la variable reviewWithPrompt , reemplace la variable reviewDocument con el siguiente código, que crea un documento de revisión para que pueda agregarse a Firestore.

   const reviewDocument = {
           input: reviewWithPrompt,
           originalReview: review,
           timestamp: Timestamp.now(),
   };
   
   getFirestore().collection(DB_COLLECTION_NAME).add(reviewDocument);
   

4. Guarda el archivo.
5. En el archivo js/reviews.js , después del Insert code below, to import your Firebase Callable Cloud Function , importe su función invocable HTTP de Firebase con el ayudante httpsCallable :

   const addMockReviews = httpsCallable(functions, "addMockReviews");
   

6. Después del Insert code below, to invoke your Firebase Callable Cloud Function , invoque su función invocable HTTP de Firebase:

   await addMockReviews();
   

7. Guarda el archivo.

Implementar una función para agregar nuevas reseñas

La aplicación web Reviewly utiliza una función en la nube para agregar reseñas. Pero actualmente, la función de nube no está implementada.

Para implementar su función con Firebase CLI, siga estos pasos:

1. En su terminal, mientras aún se encuentra en la carpeta reviewly-start , presione Control+C para detener el servidor.
2. Implemente su función:

   firebase deploy --only functions
   

3. Si ve un Permission denied while using the Eventarc Service Agent o un error similar, espere unos minutos y luego vuelva a intentar el comando.

Acaba de implementar su primera función personalizada con Cloud Functions. La consola de Firebase ofrece un panel donde puede ver todas las funciones que implementa en su proyecto de Firebase.

Ejecute y vea la aplicación web Reviewly nuevamente (ahora con funcionalidad)

Para ejecutar y ver la aplicación web ahora funcional, siga estos pasos:

1. En tu terminal, ejecuta el servidor nuevamente:

   npm run dev
   

2. En su navegador, navegue hasta la URL que se muestra en su terminal. Por ejemplo: http://localhost:8080 .
3. En la aplicación, haga clic en Agregar algunas reseñas simuladas y espere unos segundos hasta que aparezcan algunas reseñas largas.
   En segundo plano, la extensión Language Tasks with PaLM API reacciona al nuevo documento que representa la nueva revisión. El mensaje que agregó anteriormente solicita un resumen más breve del modelo de lenguaje.
4. Para ver una revisión completa y el mensaje utilizado para la revisión, haga clic en una de las revisiones y luego seleccione Mostrar mensaje de PaLM .

8. Configure la extensión "Chatbot con PaLM API" para la aplicación Chatbot

Instale el Chatbot con la extensión API PaLM

1. Navegue hasta Chatbot con extensión API PaLM .
2. Haga clic en Instalar en Firebase console .
3. Selecciona tu proyecto de Firebase.
4. Haga clic en Siguiente > Siguiente > Siguiente , hasta llegar a la sección Configurar extensión .
5. En el cuadro de texto Ruta de la colección , ingrese users/{uid}/discussion/{discussionId}/messages .
6. En el menú desplegable de ubicación de Cloud Functions , seleccione Iowa (us-central1) o la ubicación que seleccionó previamente para Firestore y Cloud Storage.
7. En el menú desplegable Modelo de idioma , seleccione chat-bison .
8. Deje todos los demás valores como predeterminados.
9. Haga clic en Instalar extensión y espere a que se instale la extensión.

Pruebe el Chatbot con la extensión API PaLM

Si bien el objetivo de este codelab es interactuar con Chatbot con la extensión API PaLM a través de una aplicación web, es útil comprender cómo funciona la extensión al activarla mediante Firebase console. La extensión se activa cuando se crea un documento de Cloud Firestore en la colección users/{uid}/discussion/{discussionId}/messages .

1. En Firebase console, navega hasta Firestore .
2. Hacer clic Iniciar colección .
   1. En el cuadro de texto ID de colección , ingrese users y luego haga clic en Siguiente .
   2. En el cuadro de texto ID del documento , haga clic en ID automática y luego haga clic en Guardar .
3. En la colección users , haga clic en Iniciar colección .
   
   1. En el cuadro de texto ID de colección , ingrese discussion y luego haga clic en Siguiente .
   2. En el cuadro de texto ID del documento , haga clic en ID automática y luego haga clic en Guardar .
4. En la colección discussion , haga clic en Iniciar colección .
   
   1. En el cuadro de texto ID de colección , ingrese messages y luego haga clic en Siguiente .
   2. En el cuadro de texto ID del documento , haga clic en ID automática .
   3. En el cuadro de texto Campo , ingrese prompt .
   4. En el cuadro de texto Valor , ingrese Tell me 5 random fruits .
   5. Haga clic en Guardar y espere unos segundos. La colección messages ahora incluye un documento que contiene una respuesta a su consulta.

5. En la colección messages , haga clic en Agregar documento .
   1. En el cuadro de texto ID del documento , haga clic en ID automática .
   2. En el cuadro de texto Campo , ingrese prompt .
   3. En el cuadro de texto Valor , ingrese And now, vegetables .
   4. Haga clic en Guardar y espere unos segundos. La colección messages ahora incluye un documento que contiene una respuesta a su consulta.

9. Configure la aplicación Chatbot para usar Firebase

Para ejecutar la aplicación Chatbot , debes configurar el código de tu aplicación y Firebase CLI para interactuar con tu proyecto de Firebase.

Agregue servicios y configuración de Firebase al código de su aplicación

Para usar Firebase, la base de código de tu aplicación necesita los SDK de Firebase para los servicios que deseas usar y la configuración de Firebase que les indica a esos SDK qué proyecto de Firebase usar.

La aplicación de muestra de este codelab ya incluye todo el código de importación e inicialización necesario para los SDK (consulte chatbot-start/lib/firebase/firebase.js ), por lo que no es necesario agregarlos. Sin embargo, la aplicación de muestra solo tiene valores de marcador de posición para la configuración de Firebase (consulte chatbot-start/lib/firebase/firebase-config.js ), por lo que debe registrar su aplicación con su proyecto de Firebase para obtener los valores de configuración únicos de Firebase para su aplicación.

1. En Firebase console, en tu proyecto de Firebase, navega hasta la descripción general del proyecto y luego haz clic en Web (o haga clic en Agregar aplicación si ya ha registrado una aplicación en el proyecto).
2. En el cuadro de texto Apodo de la aplicación , ingrese un apodo memorable para la aplicación, como My Chatbot app .
3. No seleccione la casilla Configurar también Firebase Hosting para esta aplicación . Realizarás estos pasos más adelante en el codelab.
4. Haga clic en Registrar aplicación .
5. La consola muestra un fragmento de código para agregar e inicializar el SDK de Firebase con un objeto de configuración de Firebase específico de la aplicación. Copie todas las propiedades en el objeto de configuración de Firebase.
6. En su editor de código, abra el archivo chatbot-start/lib/firebase/firebase-config.js .
7. Reemplace los valores del marcador de posición con los valores que acaba de copiar. Está bien si tienes propiedades y valores para los servicios de Firebase que no usas en la aplicación Chatbot .
8. Guarda el archivo.
9. De vuelta en Firebase console, haz clic en Continuar a la consola .

Configure su terminal para ejecutar comandos de Firebase CLI en su proyecto de Firebase

1. En su terminal, presione Control+C para evitar que el servidor ejecute la aplicación web anterior.
2. En su terminal, navegue hasta la carpeta de la aplicación web chatbot-start :

   cd ../chatbot-start
   

3. Haga que Firebase CLI ejecute comandos en un proyecto de Firebase específico:

   firebase use YOUR_PROJECT_ID
   

Configura el código base de tu aplicación para usar Firebase Hosting compatible con el marco

Este codelab utiliza marcos web con Hosting (vista previa) con la aplicación web Chatbot .

1. En tu terminal, habilita los frameworks web con Firebase Hosting:

   firebase experiments:enable webframeworks
   

2. Inicializar Firebase Hosting:

   firebase init hosting
   

3. Cuando se le solicite Se detectó una base de código Next.js Detected an existing codebase in your current directory, should we use this? , presione Y.
4. Cuando se le solicite In which region would you like to host server-side content, if applicable? , seleccione la región predeterminada o la ubicación que seleccionó previamente para Firestore y Cloud Storage, y luego presione Enter (o return en macOS).
5. Cuando se le solicite Set up automatic builds and deploys with GitHub? , presione N .

Ejecute y vea la aplicación web Chatbot

1. En su terminal, instale las dependencias y luego ejecute la aplicación web:

   npm install
   firebase emulators:start --only hosting
   

2. En su navegador, navegue hasta la URL de alojamiento alojada localmente. En la mayoría de los casos, es http://localhost:5000/ o algo similar.

La página debería cargarse, pero notarás que faltan varias funciones. Los agregaremos en los próximos pasos de este codelab.

Solucionar problemas al ejecutar la aplicación web

Si ve el error en la página web que comienza así: Error: Firebase session cookie has incorrect... , debe eliminar todas las cookies en su entorno localhost. Para ello siga las instrucciones sobre eliminar cookies | Documentación de herramientas de desarrollo. .

10. Agregue funcionalidad a la aplicación Chatbot

En el último paso de este codelab, ejecutaste la aplicación Chatbot localmente, pero no tenía mucha funcionalidad y aún no usaba la extensión instalada. En este paso del codelab, agregará esta funcionalidad y usará la aplicación web para activar la extensión.

Implementar reglas de seguridad

La aplicación de muestra de este codelab contiene conjuntos de reglas de seguridad para Firestore y Cloud Storage para Firebase. Después de implementar estas reglas de seguridad en su proyecto de Firebase, los datos de su base de datos y su depósito estarán mejor protegidos contra el uso indebido.

Puede ver estas reglas en los archivos firestore.rules y storage.rules .

1. Para implementar estas reglas de seguridad, ejecute este comando en su terminal:

   firebase deploy --only firestore:rules,storage
   

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

Actualiza el código para agregar mensajes a Cloud Firestore

En la aplicación Chatbot , se agrega un nuevo mensaje de un usuario a Firestore y eso activa la extensión para generar una respuesta.

1. En su editor de código, abra el archivo lib/firebase/firestore.js .
2. Cerca del final del archivo, busque la función addNewMessage , que maneja la adición de nuevos mensajes.
   La función ya acepta las siguientes propiedades del objeto:
   

   Parámetro	Descripción
   userId	El ID del usuario que inició sesión
   discussionId	El ID de discusión al que se agregó el mensaje.
   message	El contenido del texto del mensaje.
   db	Una instancia de base de datos de Firestore

   Con estas variables listas, puede agregar un documento de Cloud Firestore para representar el nuevo mensaje.
3. En el cuerpo de la función addNewMessage después del // Insert your code below ⬇️ , agrega el siguiente código:

   await addDoc(
           collection(
                   db,
                   "users",
                   userId,
                   "discussion",
                   discussionId,
                   "messages"
           ),
           {
                   prompt: message,
                   createTime: serverTimestamp(),
           }
   );
   
   await updateDoc(doc(db, "users", userId, "discussion", discussionId), {
           latestMessage: message,
           updatedTime: serverTimestamp(),
   });
   

Actualice el código para construir una consulta para recibir mensajes.

1. Aún en el archivo lib/firebase/firestore.js , ubique la función getMessagesQuery , que debe devolver una consulta de Cloud Firestore que localiza los users/{uid}/discussion/{discussionId}/messages .
2. Reemplace toda la función getMessagesQuery con el siguiente código:

   function getMessagesQuery(db, userId, discussionId) {
           if (!userId || !discussionId) {
                   return null;
           }
           const messagesRef = collection(
                   db,
                   "users",
                   userId,
                   "discussion",
                   discussionId,
                   "messages"
           );
           return query(messagesRef, orderBy("createTime", "asc"));
   }
   

Actualice el código para manejar documentos de mensajes de Cloud Firestore

1. Aún en el archivo lib/firebase/firestore.js , ubique la función handleMessageDoc , que recibe un documento de Cloud Firestore que representa un único mensaje.
   Esta función necesita formatear y estructurar los datos de una manera que tenga sentido para la interfaz de usuario de la aplicación Chatbot .
2. Reemplace toda la función handleMessageDoc con el siguiente código:

   function handleMessageDoc(doc) {
           const data = doc.data();
           const item = {
                   prompt: data.prompt,
                   response: data.response,
                   id: doc.id,
                   createTime: formatDate(data.createTime.toDate()),
           };
   
           if (data?.status?.completeTime) {
                   item.completeTime = formatDate(data.status.completeTime.toDate());
           }
   
           return item;
   }
   

3. Guarda el archivo.

Ejecute y vea la aplicación web Chatbot nuevamente (ahora con funcionalidad)

Para ejecutar y ver la aplicación web ahora funcional, siga estos pasos:

1. En su navegador, regrese a la pestaña con la aplicación web Chatbot y vuelva a cargar la página.
2. Haz clic en Iniciar sesión con Google .
3. Si es necesario, seleccione su cuenta de Google.
4. Una vez que haya iniciado sesión, vuelva a cargar la página.
5. En el cuadro de texto Ingresa tu mensaje , ingresa un mensaje, como Tell me about space .
6. Haga clic en Enviar y espere unos segundos hasta que la aplicación web Chatbot responda.

Otro beneficio del Chatbot con extensión API PaLM es su historial de conversaciones.

Para ver un ejemplo de su capacidad para conversar con el contexto histórico, siga estos pasos:

1. En el cuadro de texto Ingrese su mensaje , haga una pregunta, como What are five random fruits? .
2. En el cuadro de texto Ingrese su mensaje , haga una pregunta de seguimiento relacionada con la pregunta anterior, como And what about vegetables? .

La aplicación web Chatbot responde con conocimiento histórico. Aunque su última pregunta no especificó cinco vegetales aleatorios, el Chatbot con extensión API PaLM comprende las preguntas de seguimiento.

11. Configure la extensión "Convertir texto a voz" para la aplicación Video Hint

Instale la extensión Convertir texto a voz

1. Navegue hasta la extensión Convertir texto a voz .
2. Haga clic en Instalar en Firebase console .
3. Selecciona tu proyecto de Firebase.
4. Haga clic en Siguiente .
5. En la sección Revisar API habilitadas y recursos creados , haga clic en Habilitar junto a cualquier servicio que se le sugiera:

6. Haga clic en Siguiente y luego seleccione la subvención junto a cualquier permiso que se le sugiera.

7. Haga clic en Siguiente .
8. En el cuadro de texto de la ruta de colección , ingrese bot .
9. En el cuadro de texto de la ruta de almacenamiento , ingrese tts .
10. Deje todos los demás valores como sus opciones predeterminadas.
11. Haga clic en Instalar extensión y espere a que la extensión se instale.

Pruebe el texto de Convertir a la extensión del habla

Si bien el objetivo de este CodeLab es interactuar con el texto de Convierte a la extensión del habla a través de una aplicación web, es útil comprender cómo funciona la extensión activando la extensión utilizando la consola Firebase. La extensión se desencadena cuando se crea un documento Cloud Firestore en la colección bot .

Para ver cómo funciona la extensión utilizando la consola Firebase, siga estos pasos:

1. En la consola de Firebase, navegue a Firestore
2. Hacer clic Iniciar colección .
3. En el cuadro de texto de ID de colección , ingrese bot .
4. Haga clic en Siguiente .

5. En el cuadro de texto de ID de documento , haga clic en Auto-ID .
6. En el cuadro de texto de campo , ingrese text .
7. En el cuadro de texto de valor , ingrese The quick brown fox jumps over the lazy dog .
8. Clic en Guardar .

Para ver y escuchar el archivo MP3 que creó, siga estos pasos:

1. En la consola Firebase, navegue al almacenamiento .
2. En el panel donde puede cargar archivos, tenga en cuenta el nombre de su cubo después del valor gs:// . Este es el nombre de su cubo predeterminado para este proyecto. Lo necesita en varias tareas a lo largo de este Codelab.

3. En la consola de Google Cloud, navegue al almacenamiento en la nube .
4. Selecciona tu proyecto.
   Si no ve su proyecto dentro de la lista reciente de proyectos, haga clic en Seleccionar proyecto para localizar su proyecto en el selector del proyecto.

5. Seleccione su cubo de almacenamiento predeterminado.
6. Navegue a la carpeta tts/ .
7. Haga clic en el archivo mp3.
8. Al final del archivo mp3, haga clic y observe que su texto se convierte en discurso.

12. Configure la extensión "Videos de etiqueta con Video Cloud AI" para la aplicación de sugerencias de video

Instale los videos de etiqueta con la extensión de AI de AI de video en la nube

1. Navegue a los videos de etiqueta con la extensión de AI de video en la nube .
2. Haga clic en Instalar en la consola Firebase .
3. Seleccione su proyecto Firebase.
4. Haga clic en Siguiente> Siguiente> Siguiente, hasta que llegue a la sección Configurar extensión .
5. Desde el menú desplegable de ubicación de las funciones de la nube , seleccione una ubicación compatible (ya sea la ubicación que seleccionó previamente para el almacenamiento de Firestore y la nube o el más cercano). Para ubicaciones compatibles, consulte la sección location_id en AnnotateVideoRequest .
6. En el desplegable del modelo , seleccione lo último .
7. Desde el menú desplegable de la cámara estacionaria , seleccione no .
8. Deje todos los demás valores como su valor predeterminado.
9. Haga clic en Instalar extensión y espere a que la extensión se instale.

Pruebe los videos de la etiqueta con la extensión de AI de AI de video en la nube

Si bien el objetivo de este CodeLab es interactuar con los videos de etiqueta con la extensión de IA de video en la nube a través de una aplicación web, es útil comprender cómo funciona la extensión activando la extensión utilizando la consola Firebase. La extensión se activa cuando se carga un archivo de video en su cubo de almacenamiento.

Para ver cómo funciona la extensión utilizando la consola Firebase, siga estos pasos:

1. Navegue al almacenamiento dentro de su proyecto Firebase > Crear carpeta .
2. En el cuadro de texto Nombre de la carpeta , ingrese video_annotation_input .

3. Haga clic en Agregar carpeta .
4. En la carpeta video_annotation_input , haga clic en Cargar el archivo .
5. En la ai-extensions-codelab/video-hint-start/public/videos que clonó o descargó anteriormente, seleccione el primer archivo de video.
6. De vuelta en su navegador, en la consola de Google Cloud, navegue al almacenamiento en la nube .
7. Seleccione su cubo de almacenamiento predeterminado, que señaló anteriormente.
8. Haga clic en la carpeta video_annotation_output .
   Si no ve la carpeta video_annotation_output , espere unos segundos y actualice la página porque la API de inteligencia de video aún podría estar procesando el video.

9. Observe que existe un archivo JSON que sigue un nombre similar al archivo que cargó anteriormente.
10. Hacer clic Descargar el nombre de archivo .
11. Abra el archivo JSON descargado en su editor de código. Contiene la salida sin procesar de la API de inteligencia de video, que incluye etiquetas detectadas del video que cargó.

13. Configure la aplicación de pista de video para usar Firebase

Para ejecutar la aplicación de pista de video , debe configurar el código de su aplicación y la CLI Firebase para interactuar con su proyecto Firebase.

Agregar servicios y configuración de Firebase al código de su aplicación

Para usar Firebase, la base de código de su aplicación necesita los SDK de Firebase para los servicios que desea utilizar y la configuración de Firebase que le dice a esos SDK que el proyecto Firebase utilizará.

La aplicación de muestra de esta CodeLab ya incluye todo el código de importación e inicialización necesario para los SDK (consulte video-hint-start/lib/firebase/firebase.js ), por lo que no necesita agregarlos. Sin embargo, la aplicación de muestra solo tiene valores de marcador de posición para la configuración de Firebase (consulte video-hint-start/lib/firebase/firebase-config.js ), por lo que debe registrar su aplicación con su proyecto Firebase para obtener los valores de configuración únicos de Firebase para tu aplicación.

1. En la consola Firebase, en su proyecto Firebase, navegue a la descripción general del proyecto y luego haga clic en Web (o haga clic en Agregar aplicación si ya ha registrado una aplicación con el proyecto).
2. En el cuadro de texto de apodo de la aplicación , ingrese un apodo de la aplicación memorable, como My Video Hint app .
3. No seleccione el alojamiento de Firebase también para configurar también para esta casilla de verificación de la aplicación . Harás estos pasos más adelante en el Codelab.
4. Haga clic en Registrar aplicación .
5. La consola muestra un fragmento de código para agregar e inicializar el SDK de Firebase con un objeto de configuración de Firebase específico de la aplicación. Copie todas las propiedades en el objeto de configuración de Firebase.
6. En su editor de códigos, abra el archivo video-hint-start/lib/firebase/firebase-config.js .
7. Reemplace los valores del marcador de posición con los valores que acaba de copiar. Está bien si tiene propiedades y valores para los servicios de Firebase que no usa en la aplicación de pista de video .
8. Guarda el archivo.
9. De vuelta en la consola Firebase, haga clic en Continuar con la consola .

Configure su terminal para ejecutar los comandos de Firebase CLI contra su proyecto Firebase

1. En su terminal, presione Control+C para evitar que el servidor ejecute la aplicación web anterior.
2. En su terminal, navegue a la carpeta de aplicaciones web video-hint-start :

   cd ../video-hint-start
   

3. Haga que la CLI de Firebase ejecute los comandos contra un proyecto específico de Firebase:

   firebase use YOUR_PROJECT_ID
   

Configure la base de código

Este CodeLab utiliza los marcos web con alojamiento (vista previa) con la aplicación web de pista de video .

1. En su terminal, habilite los marcos web con Firebase Hosting:

   firebase experiments:enable webframeworks
   

2. Inicializar el alojamiento de Firebase:

   firebase init hosting
   

3. Cuando se le solicite con una base de código Next.js Detected an existing codebase in your current directory, should we use this? , Presione Y.
4. Cuando se le solicite en In which region would you like to host server-side content, if applicable? , seleccione la región predeterminada o la ubicación que seleccionó previamente para el almacenamiento de Firestore y la nube, y luego presione Enter (o return en MacOS).
5. ¿Cuando se le solicita con Set up automatic builds and deploys with GitHub? , prensa N .

Ejecutar y ver la aplicación web de sugerencias de video

1. En su terminal, instale dependencias en las carpetas video-hint-start y functions , y luego ejecute la aplicación:

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   firebase emulators:start --only hosting
   

2. En su navegador, navegue a la URL de alojamiento alojada localmente. En la mayoría de los casos, es http: // localhost: 5000/ o algo similar.

La página debe cargarse, pero notará que faltan varias características. Los agregaremos en los próximos pasos de este Codelab.

Solución de problemas Ejecutando la aplicación web

Si ve un mensaje de error como Error: The query requires an index. You can create it here: https://console.firebase.google.com En el panel de consola de DevTools, siga estos pasos:

1. Navegue a la URL proporcionada.

2. Haga clic en Guardar y espere a que el estado cambie de edificio a habilitado .

14. Agregue la funcionalidad a la aplicación de pista de video

En el último paso de este Codelab, ejecutó la aplicación de pista de video localmente, pero no tenía mucha funcionalidad y aún no usaba la extensión instalada. En este paso del CodeLab, agregará esta funcionalidad y usará la aplicación web para activar la extensión.

Implementar reglas de seguridad

La aplicación de muestra de esta CodeLab contiene conjuntos de reglas de seguridad para Firestore y para el almacenamiento en la nube para Firebase. Después de implementar estas reglas de seguridad en su proyecto Firebase, los datos en su base de datos y su cubo están mejor protegidos del mal uso.

Puede ver estas reglas en los archivos firestore.rules y storage.rules .

1. Para implementar estas reglas de seguridad, ejecute este comando en su terminal:

   firebase deploy --only firestore:rules,storage
   

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

Actualizar el código para combinar las funciones

1. En su editor de código, expanda la carpeta functions .
   Esta carpeta contiene varias funciones, que se combinan para formar una tubería de extensión. La siguiente tabla enumera y describe cada función:

   Función	Descripción
   functions/01-handle-video-upload.js	El primer paso en la tubería de extensión. Procesa el archivo de video cargado del usuario.
   functions/02-handle-video-labels.js	El segundo paso en la tubería de extensión. Procesa el archivo de etiquetas de video, que fue generado por la extensión storage-label-videos .
   functions/03-handle-audio-file.js	El tercer paso en la tubería de extensión. Maneja el archivo de audio transcrito.

   Sin embargo, aún necesita agregar un archivo que agrupe estas funciones.
2. En el archivo functions/index.js , agregue el siguiente código:

   import { initializeApp } from "firebase-admin/app";
   
   export * from "./01-handle-video-upload.js";
   export * from "./02-handle-video-labels.js";
   export * from "./03-handle-audio-file.js";
   
   initializeApp();
   

Este código utiliza módulos JavaScript para importar y exportar las funciones desde el archivo index.js para que haya una ubicación centralizada para todas las funciones.

Actualizar el código para manejar la carga de video

1. En su editor de código, abra el archivo lib/firebase/storage.js .
2. Localice la función uploadVideo .
   Esta función recibe parámetros userId , filePath y file . Estos datos son suficientes para cargar un archivo en el almacenamiento en la nube.
3. En el cuerpo de la función uploadVideo , agregue el siguiente código:

   const storageRef = ref(storage, `video_annotation_input/${filePath}`);
   
   const uploadTask = uploadBytesResumable(storageRef, file, {
           customMetadata: {
                   uid: userId,
           },
   });
   
   return uploadTask;
   

Implementar sus funciones

Para implementar sus funciones con la CLI de Firebase, siga estos pasos:

1. En su terminal mientras aún está en la carpeta video-hint-start , presione Control+C para detener el proceso actual.
2. Implemente sus funciones:

   firebase deploy --only functions
   

   Si se le pregunta sobre la eliminación de las funciones de nube anteriores, seleccione No .
3. Si ve un mensaje similar al Permission denied while using the Eventarc Service Agent , espere unos minutos y luego vuelva a intentar el comando.
4. Después de que se termine el comando, ejecute la aplicación localmente nuevamente:

   firebase emulators:start --only hosting
   

Ejecute y vea la aplicación web de pista de video nuevamente (ahora con funcionalidad)

Para ejecutar y ver la aplicación web ahora funcional, siga estos pasos:

1. En su navegador, encuentre la pestaña donde navegó a http: // localhost: 5000.
2. Si es necesario, haga clic en Iniciar sesión con Google y seleccione su cuenta de Google.
3. Haga clic en Cargar el VIDEO Ejemplo #1 y espere unos minutos para ver los resultados del resumen del video.
4. Si no ve ningún resultado después de cargar el video, vea los errores de solución de problemas con funciones en la nube en el apéndice de este CodeLab.

15. Conclusión

¡Felicidades! ¡Lograste mucho en este Codelab!

Extensiones Firebase instaladas y configuradas

Utilizó la consola Firebase para configurar e instalar varias extensiones de IA . Usar extensiones es conveniente porque no necesita escribir mucho código de calderas que se ocupe de la autenticación con Google Cloud Services, lectura y escritura de Firestore e interactúe con los servicios de Google Cloud, y los diversos matices que están involucrados con esas tareas.

Trabajó con extensiones utilizando la consola Firebase

En lugar de saltar directamente al código, se tomó el tiempo para comprender cómo funcionan las extensiones de IA, en función de una entrada que proporcionó a través de la consola a Firestore o almacenamiento en la nube. Este tipo de interacción puede ser especialmente útil si necesita depurar la salida de extensión.

Construyó tres aplicaciones web con IA que usan extensiones Firebase

Revisormente

En la aplicación web revisoriamente , utilizó las tareas de idioma con la extensión de la API de Palm para resumir las largas revisiones que los usuarios dejaron para un producto de camiseta. También solicitó que el modelo de idioma proporcione una respuesta JSON a su consulta, donde el JSON proporcionó una calificación de estrellas y una revisión resumida de la revisión original de forma larga.

Ejercicio opcional : la compañía de camisetas está contenta con las revisiones resumidas, pero han solicitado un resumen adicional de la naturaleza del defecto. ¿Puede ajustar el mensaje para devolver un resumen del defecto e incluir ese resumen dentro de la interfaz de usuario de la aplicación web?

chatbot

En la aplicación web de chatbot , utilizó el chatbot con la extensión de la API de Palm para proporcionar al usuario una interfaz de chat interactiva, que incluye un contexto histórico en las conversaciones, donde cada mensaje se almacena en un documento de Firestore que se alcanza a un usuario en particular.

Ejercicio opcional : los estudiantes han estado satisfechos con el chatbot, pero al personal desea algunas mejoras. Los estudiantes deben recibir preguntas estimulantes después de que se haya proporcionado su respuesta. Por ejemplo:

Student asks: What is the ozone?
Response: The ozone is a molecule composed of...How do you think human activities can impact the ozone layer?

Sugerencia: puede usar una opción de contexto configurable para lograr esto.

Videos

En la aplicación web de sugerencias de video , utilizó el texto convertido al habla , las tareas del idioma con la API de Palm y los videos de etiqueta con extensiones de video en la nube para formar una tubería de extensión que resulta en un texto y una descripción de audio de un video.

Ejercicio opcional : el departamento gubernamental encontró el prototipo interesante, y ahora también le gustaría que un usuario pueda hacer clic en una etiqueta basada en texto para saltar al punto en el video donde se detecta la etiqueta.

16. Apéndice: resolución de problemas errores con funciones en la nube

Si su aplicación web no funciona como se esperaba, y cree que podría deberse a las funciones, siga los pasos en esta página de solución de problemas.

Permitir acceso público no autenticado

Si obtiene algún error relacionado con el permiso en el panel de la consola de Chrome DevTools, siga estos pasos:

1. Lea la descripción general de la autenticación | Página de ejecución de nubes
2. Haga clic en el enlace para ver y completar las tareas requeridas para permitir el acceso público no autenticado a la función.

3. Navegue de nuevo a la aplicación de revisión . Por ejemplo: http: // localhost: 8080.
4. Haga clic en Agregar algunas reseñas simuladas y espere unos segundos.
   • Si aparecen revisiones: no necesita continuar con estos pasos de solución de problemas y puede saltar directamente para configurar la sección de aplicaciones web de chatbot en este codeLab.
   • Si no aparecen revisiones: continúe con esta sección de solución de problemas.

Manejar errores de permiso insuficientes

1. En la consola Firebase, navegue a las funciones .
2. Descansa sobre la función addMockReviews y luego haga clic en > Ver registros .

3. Desplácese a través de los registros hasta que encuentre un error similar a uno de los siguientes:

   Exception from a finished function: Error: 7 PERMISSION_DENIED: Missing or insufficient permissions.
   

   0001-compute@developer.gserviceaccount.com does not have storage.objects.get access to the Google Cloud Storage object. Permission 'storage.objects.get' denied on resource (or it may not exist).
   

4. En la consola de Google Cloud, navegue a la página de permisos de IAM y luego seleccione su proyecto.
5. En la tabla, encuentre la columna de nombre .
   En la página IAM & Admin , hay una tabla de usuarios y roles. La columna de nombre en la tabla describe para qué sirve el usuario, o principal. Es posible que tenga un director con el nombre de la cuenta de servicio de cómputo predeterminada .

Si ve la cuenta de servicio de cómputo predeterminada , siga estos pasos:

1. Hacer clic Editar principal .

2. Continúe con los roles Agregar a la sección de cuenta de servicio de cómputo predeterminada en este CODELAB.

Si no ve la cuenta de servicio de cómputo predeterminada , siga estos pasos:

1. Haga clic en el acceso de Grant .
2. En el cuadro de texto de los nuevos principios , ingrese compute .
3. En el menú de AutoSugestions que aparece, seleccione la cuenta de servicio de cómputo predeterminada .

Agregar roles a la cuenta de servicio de cómputo predeterminada

En la sección Asignar roles de la cuenta de servicio de cómputo predeterminada :

1. Expanda el menú Seleccionar un rol .
2. En el cuadro de texto del filtro , ingrese Cloud Datastore User .
3. En el menú de AutoSugestions que aparece, seleccione el usuario de Cloud DataStore .
4. Hacer clic Agregue otro rol .
   1. Expanda el menú Seleccionar un rol .
   2. En el cuadro de texto del filtro , ingrese Cloud Storage for Firebase Admin .
   3. En el menú de autogestiones que aparecen, seleccione Almacenamiento en la nube para Firebase Admin .
5. Hacer clic Agregue otro rol .
   1. Expanda el menú Seleccionar un rol .
   2. En el cuadro de texto del filtro , ingrese Cloud Storage for Firebase Service Agent .
   3. En el menú de AutoSugestions que aparece, seleccione Almacenamiento en la nube para Firebase Service Agent .
6. Clic en Guardar .