Crea apps web potenciadas por IA con Extensiones de Firebase

1. Antes de comenzar

En este codelab, aprenderás a compilar apps web potenciadas por IA que proporcionen experiencias del usuario atractivas con Extensiones de Firebase.

Requisitos previos

• Conocimientos de Node.js y JavaScript

Qué aprenderás

• Cómo usar extensiones relacionadas con la IA para procesar entradas de idioma y video
• Cómo usar Cloud Functions para Firebase para formar una canalización entre extensiones
• Cómo usar JavaScript para acceder a los resultados que producen las extensiones

Requisitos

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

2. Revisa las aplicaciones web y sus servicios de Firebase

En esta sección, se describen las apps web que compilarás en este codelab y qué Firebase usarás para compilarlas.

App de Reviewly

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 de Reviewly completa resume cada opinión, proporciona una calificación por estrellas por cada opinión y usa cada opinión para inferir una calificación general del producto. Los usuarios también pueden expandir cada opinión resumida para ver la original.

App de Chatbot

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

App de Video Hint

Un departamento gubernamental quiere que sus videos proporcionen audiodescripciones para mejorar la accesibilidad, pero tiene cientos de videos para agregar anotaciones y necesitan un enfoque optimizado. La aplicación completa de Video Hint es un prototipo que el departamento revisará para evaluar su eficacia.

Estas son las extensiones que se utilizan en la aplicación Video Hint:

• Extensión Etiquetar videos con Cloud Video AI: Extrae etiquetas de cada video subido a Storage.
• Extensión de Language Tasks con la API de PaLM: resume las etiquetas en una descripción de texto.
• Para la extensión Convertir texto a voz, crea una versión de audio de la descripción del video.

3. Configura tu entorno de desarrollo

Verifica la versión de Node.js:

1. En tu terminal, verifica que tengas instalado Node.js v20.0.0 o una versión posterior:

   node -v
   

2. Si no tienes Node.js v20.0.0 o una versión posterior, descárgalo y, luego, instálalo.

Descarga el repositorio

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

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

2. Si no tienes Git instalado, descarga el repositorio de GitHub como un archivo ZIP.

Revisa la estructura de carpetas

En tu máquina local, busca el repositorio clonado y revisa la estructura de las carpetas. La siguiente tabla contiene las carpetas y sus descripciones:

Cada carpeta incluye un archivo readme.md que ofrece una guía de inicio rápido para ejecutar la aplicación web respectiva mediante instrucciones optimizadas. Sin embargo, si estás dando tus primeros pasos, debes completar este codelab, ya que contiene el conjunto de instrucciones más completo.

Si no sabes con certeza si aplicaste correctamente el código como se indica en este codelab, puedes encontrar el código de solución para las apps correspondientes en las carpetas reviewly-end, chatbot-end y video-hint-end.

Instala Firebase CLI

Ejecuta el siguiente comando para verificar que tienes Firebase CLI instalado y que es v12.5.4 o una versión posterior:

firebase --version

• Si tienes Firebase CLI instalado, pero no es v12.5.4 o una versión posterior, actualízalo:

  npm update -g firebase-tools
  

• Si no tienes Firebase CLI,

  npm install -g firebase-tools
  

  instálalo.

Si no puedes instalar Firebase CLI debido a errores de permisos, consulta la documentación de npm o usa otra opción de instalación.

Accede a Firebase

1. En la terminal, navega a la carpeta ai-extensions-codelab y accede a Firebase:

   cd ai-extensions-codelab
   firebase login
   

2. Si en la terminal se indica que ya accediste a Firebase, ve a la sección Configura tu proyecto de Firebase de este codelab.
3. Según si deseas que Firebase recopile datos, ingresa Y o N.
4. En el navegador, selecciona tu Cuenta de Google y, luego, haz clic en Permitir.

4. Configura el proyecto de Firebase

En esta sección, configurarás un proyecto de Firebase y lo asociarás con una aplicación web de Firebase. También habilitarás los servicios de Firebase que usan las aplicaciones web de muestra.

Crea un proyecto de Firebase

1. En Firebase console, haz clic en Agregar proyecto.
2. En el cuadro de texto Ingresa el nombre de proyecto, ingresa AI Extensions Codelab (o un nombre de proyecto que prefieras) y haz clic en Continuar.
3. En este codelab, no necesitas Google Analytics, así que desactiva la opción Habilitar Google Analytics para este proyecto.
4. Haz clic en Crear proyecto.
5. Espera a que se aprovisione tu proyecto y, luego, haz clic en Continuar.
6. En el proyecto de Firebase, ve a Configuración del proyecto. Toma nota del ID del proyecto porque lo necesitarás más adelante. Este identificador único es la forma en que se identifica tu proyecto (por ejemplo, en Firebase CLI).

Descarga una cuenta de servicio de Firebase

Algunas de las apps web que compilarás en este codelab usan la renderización del servidor con Next.js.

El SDK de Firebase Admin para Node.js se usa con el fin de garantizar que las reglas de seguridad funcionen desde el código del servidor. Para usar las APIs en Firebase Admin, debes descargar una cuenta de servicio de Firebase desde Firebase console.

1. En Firebase console, navega a la página Cuentas de servicio en la Configuración del proyecto.
2. Haz clic en Generar nueva clave privada > Generar clave.
3. Después de que el archivo se descargue en tu sistema de archivos, obtén la ruta completa a ese archivo.
   Por ejemplo, si descargaste el archivo en tu carpeta Descargas, la ruta completa podría verse de la siguiente manera: /Users/me/Downloads/my-project-id-firebase-adminsdk-123.json
4. En tu terminal, configura la variable de entorno GOOGLE_APPLICATION_CREDENTIALS como la ruta de acceso de la clave privada que descargaste. En un entorno Unix, el comando podría verse de la siguiente manera:

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

5. Mantén esta terminal abierta y úsala durante el resto de este codelab, ya que tu variable de entorno podría perderse si inicias una nueva sesión de terminal.
   Si abres una nueva sesión de la terminal, debes volver a ejecutar el comando anterior.

Actualiza tu plan de precios de Firebase

Para usar Cloud Functions y las Extensiones de Firebase, tu proyecto de Firebase debe tener el plan de precios Blaze, lo que significa que está asociado 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 $300 y una cuenta de Facturación de Cloud de prueba gratuita.

Sin embargo, ten en cuenta que la finalización de este codelab no debería generar cargos reales.

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

1. En Firebase console, selecciona la opción para actualizar tu plan.
2. En el diálogo, selecciona el plan Blaze y, luego, sigue las instrucciones en pantalla para asociar tu proyecto con una cuenta de Facturación de Cloud.
   Si necesitas crear una cuenta de Facturación de Cloud, es posible que debas volver a la actualización. en Firebase console para completar la actualización.

Configura los servicios de Firebase en Firebase console

En esta sección, aprovisionarás y configurarás varios servicios de Firebase que usan las aplicaciones web en este codelab. Ten en cuenta que no todos estos servicios se usan en cada app web, pero configurar todos estos servicios ahora mismo es conveniente para trabajar en este codelab.

Configura la autenticación

Usarás Authentication con la app de Chatbot y la app de Video Hint. Sin embargo, recuerda que si estás compilando una app real, cada app debe tener su propio proyecto de Firebase.

1. En Firebase console, navega a Autenticación.
2. Haz clic en Comenzar.
3. En la columna Proveedores adicionales, haz clic en Google > Habilitar.

4. En el cuadro de texto Nombre público del proyecto, ingresa un nombre fácil de recordar, como My AI Extensions Codelab.
5. En el menú desplegable Correo electrónico de asistencia para el proyecto, selecciona tu dirección de correo electrónico.
6. Haz clic en Guardar.
   

Configura Cloud Firestore

Usarás Firestore con las tres apps. Sin embargo, recuerda que si estás compilando una app real, cada app debe tener su propio proyecto de Firebase.

1. En Firebase console, navega a Firestore.
2. Haz clic en Crear base de datos > Iniciar en modo de prueba > Siguiente.
   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.
3. Usa la ubicación predeterminada o selecciona una ubicación de tu preferencia.
   En el caso de una app real, debes elegir una ubicación que esté cerca de tus usuarios. Ten en cuenta que esta ubicación no se puede cambiar más adelante y que también será automáticamente la ubicación de tu bucket predeterminado de Cloud Storage (paso siguiente).
4. Haz clic en Listo.

Configura Cloud Storage para Firebase

Usarás Cloud Storage con la app de Video Hint y probarás la extensión Convertir texto a voz (siguiente paso del codelab).

1. En Firebase console, navega a Storage.
2. Haz clic en Comenzar > Comenzar en modo de prueba > Siguiente.
   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 el bucket de Storage.
3. La ubicación del bucket ya debería estar seleccionada (debido a la configuración de Firestore en el paso anterior).
4. Haz clic en Listo.

En las siguientes secciones de este codelab, instalarás extensiones y modificarás las bases de código de cada app de ejemplo para lograr que tres apps web diferentes funcionen.

5. Configura la extensión “Language Tasks con la API de PaLM” para la app de Reviewly

Instala la extensión Language Tasks con la API de PaLM

1. Navega a la extensión Language Tasks con la API de PaLM.
2. Haz clic en Instalar en Firebase console.
3. Selecciona tu proyecto de Firebase.
4. En la sección Revisar las APIs habilitadas y los recursos creados, haz clic en Habilitar junto a los servicios que se te sugieran:

5. Haz clic en Siguiente > Siguiente.
6. En el cuadro de texto Ruta de colección, ingresa bot.
7. En el cuadro de texto Instrucción, ingresa {{ input }}.
8. En el cuadro de texto Campos de la variable, ingresa input.
9. En el cuadro de texto Campo de respuesta, ingresa text.
10. En el menú desplegable Ubicación de Cloud Functions, selecciona Iowa (us-central1) o la ubicación que seleccionaste anteriormente para Firestore y Cloud Storage.
11. En el menú desplegable Modelo de lenguaje, selecciona text-bison-001.
12. Deje todos los otros valores con sus opciones predeterminadas.
13. Haz clic en Instalar extensión y espera a que se instale la extensión.

Prueba la extensión Language Tasks con la API de PaLM

Si bien el objetivo de este codelab es interactuar con la extensión Language Tasks con la API de PaLM a través de una app web, es útil entender cómo funciona la extensión si la activas con 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 con Firebase console, sigue estos pasos:

1. En Firebase console, navega a Firestore.
2. En la colección bot, haz clic en Agregar documento.
3. En el cuadro de texto ID de documento, haz clic en ID automático.
4. En el cuadro de texto Campo, ingresa input.
5. En el cuadro de texto Valor, ingresa Tell me about the moon.
6. Haz clic en Guardar y espera unos segundos. Tu documento dentro de la colección bot ahora incluye una respuesta a tu consulta.

6. Configura la app de Reviewly para usar Firebase

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

Agrega los servicios y la configuración de Firebase al código de tu app

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

La app de ejemplo de este codelab ya incluye todo el código de importación y de inicialización necesario para los SDK (consulta reviewly-start/js/reviews.js), de modo que no necesitas agregarlos. Sin embargo, la app de ejemplo solo tiene valores de marcadores de posición para la configuración de Firebase (consulta reviewly-start/js/firebase-config.js), por lo que debes registrar tu app con tu proyecto de Firebase a fin de obtener los valores de configuración únicos de Firebase para tu app.

1. En Firebase console, en tu proyecto de Firebase, navega a Descripción general del proyecto y, luego, haz clic en Web.
   
2. En el cuadro de texto Sobrenombre de la app, ingresa un sobrenombre fácil de recordar, como My Reviewly app.
3. No selecciones la casilla de verificación Configurar Firebase Hosting también para esta app. Realizarás estos pasos más adelante en el codelab.
4. Haz clic en Registrar app.
5. En la consola se muestra un fragmento de código para agregar y también inicializar el SDK de Firebase con un objeto de configuración de Firebase específico para la app. Copia todas las propiedades en el objeto de configuración de Firebase.
6. En tu editor de código, abre el archivo reviewly-start/js/firebase-config.js.
7. Reemplaza los valores del marcador de posición por los valores que acabas de copiar. No hay problema si tienes propiedades y valores para los servicios de Firebase que no usas en la app de Reviewly.
8. Guarda el archivo.
9. Vuelve a Firebase console y haz clic en Ir a la consola.

Configura la terminal para ejecutar comandos de Firebase CLI en tu proyecto de Firebase.

1. En tu terminal, navega a la carpeta ai-extensions-codelab que descargaste antes.
2. Navega a la carpeta de la aplicación web reviewly-start:

   cd reviewly-start
   

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

   firebase use YOUR_PROJECT_ID
   

Ejecuta y visualiza la app web de Reviewly

Para ejecutar y ver la app web, sigue estos pasos:

1. En tu terminal, instala las dependencias y, luego, ejecuta la app web:

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

2. En el navegador, ve a la URL que se muestra en la terminal. Por ejemplo: http://localhost:8080.

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

7. Cómo agregar funciones a la app de Reviewly

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

Implementa las reglas de seguridad

La app de ejemplo 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 tu proyecto de Firebase, los datos de tu base de datos y tu bucket estarán más protegidos contra el uso inadecuado.

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

1. Para implementar estas reglas de seguridad, ejecuta el siguiente comando en tu terminal:

   firebase deploy --only firestore:rules,storage
   

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

Actualiza el código de la app para activar la extensión

En la app de Reviewly, una opinión nueva que se agregue a Firestore activará la extensión para resumirla.

1. En tu editor de código, abre el archivo functions/add-mock-reviews.js.
2. Reemplaza la variable reviewWithPrompt por el siguiente código para que el modelo de lenguaje realice 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, reemplaza la variable reviewDocument por el siguiente código, que crea un documento de revisión para que se pueda agregar 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 comentario Insert code below, to import your Firebase Callable Cloud Function, importa la función de HTTP que admite llamadas de Firebase con el auxiliar httpsCallable:

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

6. Después del comentario Insert code below, to invoke your Firebase Callable Cloud Function, invoca la función de HTTP que admite llamadas de Firebase:

   await addMockReviews();
   

7. Guarda el archivo.

Implementa una función para agregar opiniones nuevas

La app web de Reviewly usa una Cloud Function para agregar las opiniones. Sin embargo, en este momento, la Cloud Function no está implementada.

Para implementar tu función con Firebase CLI, sigue estos pasos:

1. En tu terminal, mientras estás en la carpeta reviewly-start, presiona Control+C para detener el servidor.
2. Implementa tu función:

   firebase deploy --only functions
   

3. Si ves un error Permission denied while using the Eventarc Service Agent o similar, espera unos minutos y vuelve a ejecutar el comando.

Acabas de implementar tu primera función personalizada con Cloud Functions. Firebase console ofrece un panel en el que puedes ver todas las funciones que implementas en tu proyecto de Firebase.

Vuelve a ejecutar y visualizar la app web de Reviewly (ahora con funcionalidad).

Para ejecutar y ver la aplicación web que ya es funcional, sigue estos pasos:

1. En tu terminal, vuelve a ejecutar el servidor:

   npm run dev
   

2. En el navegador, ve a la URL que se muestra en la terminal. Por ejemplo: http://localhost:8080.
3. En la app, haz clic en Agregar algunas opiniones de prueba y espera unos segundos para que aparezcan algunas opiniones largas.
   En segundo plano, la extensión Language Tasks con la API de PaLM reacciona al documento nuevo que representa la opinión nueva. La instrucción que agregaste antes solicita un resumen más corto del modelo de lenguaje.
4. Para ver una opinión completa y la instrucción que se usó para ella, haz clic en una de las opiniones y, luego, selecciona Show PaLM prompt.

8. Configura la extensión “Chatbot con la API de PaLM” para la app de chatbot

Instala la extensión Chatbot con la API de PaLM.

1. Navega a la extensión Chatbot con la API de PaLM.
2. Haz clic en Instalar en Firebase console.
3. Selecciona tu proyecto de Firebase.
4. Haz clic en Siguiente > Siguiente > Siguiente hasta llegar a la sección Configurar extensión.
5. En el cuadro de texto Ruta de colección, ingresa users/{uid}/discussion/{discussionId}/messages.
6. En el menú desplegable Ubicación de Cloud Functions, selecciona Iowa (us-central1) o la ubicación que seleccionaste anteriormente para Firestore y Cloud Storage.
7. En el menú desplegable Modelo de lenguaje, selecciona chat-bison.
8. Deje todos los otros valores con sus opciones predeterminadas.
9. Haz clic en Instalar extensión y espera a que se instale la extensión.

Prueba la extensión Chatbot con la API de PaLM.

Si bien el objetivo de este codelab es interactuar con la extensión Chatbot con la API de PaLM a través de una app web, es útil entender cómo funciona la extensión si la activas con 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 a Firestore.
2. Haz clic en Iniciar colección.
   1. En el cuadro de texto ID de la colección, ingresa users y, luego, haz clic en Siguiente.
   2. En el cuadro de texto ID del documento, haz clic en ID automático y, luego, en Guardar.
3. En la colección users, haz clic en Iniciar colección.
   
   1. En el cuadro de texto ID de la colección, ingresa discussion y, luego, haz clic en Siguiente.
   2. En el cuadro de texto ID del documento, haz clic en ID automático y, luego, en Guardar.
4. En la colección discussion, haz clic en Iniciar colección.
   
   1. En el cuadro de texto ID de la colección, ingresa messages y, luego, haz clic en Siguiente.
   2. En el cuadro de texto ID de documento, haz clic en ID automático.
   3. En el cuadro de texto Campo, ingresa prompt.
   4. En el cuadro de texto Valor, ingresa Tell me 5 random fruits.
   5. Haz clic en Guardar y espera unos segundos. La colección messages ahora incluye un documento que contiene una respuesta a tu consulta.

5. En la colección messages, haz clic en Agregar documento.
   1. En el cuadro de texto ID de documento, haz clic en ID automático.
   2. En el cuadro de texto Campo, ingresa prompt.
   3. En el cuadro de texto Valor, ingresa And now, vegetables.
   4. Haz clic en Guardar y espera unos segundos. La colección messages ahora incluye un documento que contiene una respuesta a tu consulta.

9. Configura la app de Chatbot para usar Firebase

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

Agrega los servicios y la configuración de Firebase al código de tu app

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

La app de ejemplo de este codelab ya incluye todo el código de importación y de inicialización necesario para los SDK (consulta chatbot-start/lib/firebase/firebase.js), de modo que no necesitas agregarlos. Sin embargo, la app de ejemplo solo tiene valores de marcadores de posición para la configuración de Firebase (consulta chatbot-start/lib/firebase/firebase-config.js), por lo que debes registrar tu app con tu proyecto de Firebase a fin de obtener los valores de configuración únicos de Firebase para tu app.

1. En Firebase console, en tu proyecto de Firebase, navega a Descripción general del proyecto y, luego, haz clic en Web (o en Agregar app) si ya registraste una app en el proyecto).
2. En el cuadro de texto Sobrenombre de la app, ingresa un sobrenombre fácil de recordar, como My Chatbot app.
3. No selecciones la casilla de verificación Configurar Firebase Hosting también para esta app. Realizarás estos pasos más adelante en el codelab.
4. Haz clic en Registrar app.
5. En la consola se muestra un fragmento de código para agregar y también inicializar el SDK de Firebase con un objeto de configuración de Firebase específico para la app. Copia todas las propiedades en el objeto de configuración de Firebase.
6. En tu editor de código, abre el archivo chatbot-start/lib/firebase/firebase-config.js.
7. Reemplaza los valores del marcador de posición por los valores que acabas de copiar. No hay problema si tienes propiedades y valores para los servicios de Firebase que no usas en la app del Chatbot.
8. Guarda el archivo.
9. Vuelve a Firebase console y haz clic en Ir a la consola.

Configura la terminal para ejecutar comandos de Firebase CLI en tu proyecto de Firebase.

1. En la terminal, presiona Control+C para evitar que el servidor ejecute la app web anterior.
2. En la terminal, navega a la carpeta chatbot-start de la aplicación web:

   cd ../chatbot-start
   

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

   firebase use YOUR_PROJECT_ID
   

Configura la base de código de tu app para usar Firebase Hosting compatible con el framework

En este codelab, se usan frameworks web con Hosting (versión preliminar) con la app web de Chatbot.

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

   firebase experiments:enable webframeworks
   

2. Inicializa Firebase Hosting:

   firebase init hosting
   

3. Cuando aparezca Detected an existing Next.js codebase in your current directory, should we use this?, presiona Y.
4. Cuando se te solicite In which region would you like to host server-side content, if applicable?, selecciona la región predeterminada o la ubicación que seleccionaste anteriormente para Firestore y Cloud Storage, y, luego, presiona Enter (o return en macOS).
5. Cuando se te solicite con Set up automatic builds and deploys with GitHub?, presiona N.

Ejecuta y visualiza la app web de Chatbot

1. En tu terminal, instala las dependencias y, luego, ejecuta la app web:

   npm install
   firebase emulators:start --only hosting
   

2. En el navegador, ve a la URL de Hosting alojada de forma local. 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. Las agregaremos en los próximos pasos de este codelab.

Soluciona problemas relacionados con la ejecución de la app web

Si ves el error en la página web que comienza así: Error: Firebase session cookie has incorrect..., debes borrar todas las cookies de tu entorno de localhost. Para ello, sigue las instrucciones sobre eliminación de cookies | Documentación de Herramientas para desarrolladores.

10. Agrega funcionalidad a la app de chatbot

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

Implementa las reglas de seguridad

La app de ejemplo 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 tu proyecto de Firebase, los datos de tu base de datos y tu bucket estarán más protegidos contra el uso inadecuado.

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

1. Para implementar estas reglas de seguridad, ejecuta el siguiente comando en tu terminal:

   firebase deploy --only firestore:rules,storage
   

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

Actualiza el código para agregar mensajes a Cloud Firestore

En la app de Chatbot, se agrega un mensaje nuevo de un usuario a Firestore, el cual activa la extensión para generar una respuesta.

1. En tu editor de código, abre el archivo lib/firebase/firestore.js.
2. Cerca del final del archivo, busca la función addNewMessage, que controla la adición de mensajes nuevos.
   La función ya toma las siguientes propiedades del objeto:
   

   Parámetro	Descripción
   userId	El ID del usuario que accedió
   discussionId	El ID de debate al que se agregó el mensaje
   message	Contenido del texto del mensaje
   db	Una instancia de base de datos de Firestore

   Con estas variables listas, puedes agregar un documento de Cloud Firestore para representar el mensaje nuevo.
3. En el cuerpo de la función addNewMessage, después del comentario // 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(),
   });
   

Actualiza el código para construir una consulta y obtener mensajes

1. En el archivo lib/firebase/firestore.js, busca la función getMessagesQuery, que debe mostrar una consulta de Cloud Firestore que ubica los mensajes almacenados en la ruta de la colección users/{uid}/discussion/{discussionId}/messages.
2. Reemplace toda la función getMessagesQuery por 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"));
   }
   

Actualiza el código para controlar los documentos de mensajes de Cloud Firestore

1. En el archivo lib/firebase/firestore.js, busca la función handleMessageDoc, que recibe un documento de Cloud Firestore que representa un solo mensaje.
   Esta función necesita dar formato a los datos y estructurarlos de una manera que tenga sentido para el IU de la app de Chatbot.
2. Reemplaza toda la función handleMessageDoc por 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.

Vuelve a ejecutar y visualizar la app web de Chatbot (ahora con funcionalidad)

Para ejecutar y ver la aplicación web que ya es funcional, sigue estos pasos:

1. En el navegador, regresa a la pestaña donde está la aplicación web del Chatbot y vuelve a cargar la página.
2. Haz clic en Acceder con Google.
3. Si es necesario, selecciona tu Cuenta de Google.
4. Después de acceder, vuelve a cargar la página.
5. En el cuadro de texto Ingresa tu mensaje, ingresa un mensaje, como Tell me about space.
6. Haz clic en Enviar y espera unos segundos para que la app web de Chatbot responda.

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

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

1. En el cuadro de texto Ingresa tu mensaje, haz una pregunta, como What are five random fruits?.
2. En el cuadro de texto Ingresa tu mensaje, haz una pregunta adicional que esté relacionada con la pregunta anterior, como And what about vegetables?.

La app web de Chatbot responde con conocimiento histórico. Aunque tu última pregunta no especificó cinco vegetales aleatorios, la extensión Chatbot con la API de PaLM entiende preguntas adicionales.

11. Configura la extensión "Convertir texto a voz" para la app de Video Hint

Instala la extensión Convertir texto a voz.

1. Navega a la extensión Convertir texto a voz.
2. Haz clic en Instalar en Firebase console.
3. Selecciona tu proyecto de Firebase.
4. Haz clic en Siguiente.
5. En la sección Revisar las APIs habilitadas y los recursos creados, haz clic en Habilitar junto a los servicios que se te sugieran:

6. Haz clic en Siguiente y, luego, selecciona Otorgar junto a los permisos que se te sugieran.

7. Haz clic en Siguiente.
8. En el cuadro de texto Ruta de colección, ingresa bot.
9. En el cuadro de texto Ruta de almacenamiento, ingresa tts.
10. Deja el resto de los valores con sus opciones predeterminadas.
11. Haz clic en Instalar extensión y espera a que se instale la extensión.

Prueba la extensión Convertir texto a voz.

Si bien el objetivo de este codelab es interactuar con la extensión Convertir texto a voz mediante una app web, es útil saber cómo funciona la extensión cuando se activa con Firebase console. La extensión se activa cuando se crea un documento de Cloud Firestore en la colección bot.

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

1. En Firebase console, navega a Firestore.
2. Haz clic en INICIAR COLECCIÓN.
3. En el cuadro de texto ID de la colección, ingresa bot.
4. Haz clic en Siguiente.

5. En el cuadro de texto ID de documento, haz clic en ID automático.
6. En el cuadro de texto Campo, ingresa text.
7. En el cuadro de texto Valor, ingresa The quick brown fox jumps over the lazy dog.
8. Haz clic en Guardar.

Para ver y escuchar el archivo MP3 que creaste, sigue estos pasos:

1. En Firebase console, navega a Storage.
2. En el panel en el que puedes subir archivos, anota el nombre de tu bucket después del valor gs://. Este es el nombre del bucket predeterminado para este proyecto. Lo necesitarás en varias tareas de este codelab.

3. En la consola de Google Cloud, navega a Cloud Storage.
4. Selecciona tu proyecto.
   Si no ves tu proyecto en la lista reciente, haz clic en Seleccionar proyecto para ubicarlo en el selector de proyectos.

5. Selecciona el bucket de Storage predeterminado.
6. Navega a la carpeta tts/:
7. Haz clic en el archivo MP3.
8. Al final del archivo MP3, haz clic en y observa que el texto se convierte a voz.

12. Configura la extensión “Etiquetar videos con Cloud Video AI” para la app de Video Hint

Instala la extensión Etiquetar videos con Cloud Video A

1. Navega a la extensión Etiquetar videos con Cloud Video AI.
2. Haz clic en Instalar en Firebase console.
3. Selecciona tu proyecto de Firebase.
4. Haz clic en Siguiente > Siguiente > Siguiente hasta llegar a la sección Configurar extensión.
5. En el menú desplegable Ubicación de Cloud Functions, selecciona una ubicación admitida (ya sea la que seleccionaste anteriormente para Firestore y Cloud Storage o la más cercana). Para conocer las ubicaciones admitidas, consulta la sección location_id en AnnotateVideoRequest.
6. En el menú desplegable Modelo, selecciona Más reciente.
7. En el menú desplegable Cámara estática, selecciona No.
8. Deje todos los otros valores con sus opciones predeterminadas.
9. Haz clic en Instalar extensión y espera a que se instale la extensión.

Prueba la extensión Etiquetar videos con Cloud Video AI.

Si bien el objetivo de este codelab es interactuar con la extensión Etiquetar videos con Cloud Video AI mediante una app web, es útil comprender cómo funciona la extensión si la activas con Firebase console. La extensión se activa cuando se sube un archivo de video a tu bucket de Storage.

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

1. Ve a Storage en el proyecto de Firebase > Crear carpeta.
2. En el cuadro de texto Nombre de la carpeta, ingresa video_annotation_input.

3. Haz clic en Agregar carpeta.
4. En la carpeta video_annotation_input, haz clic en Subir archivo.
5. En la carpeta ai-extensions-codelab/video-hint-start/public/videos que clonaste o descargaste antes, selecciona el primer archivo de video.
6. En el navegador, ve a Cloud Storage en la consola de Google Cloud.
7. Selecciona tu bucket de Storage predeterminado que anotaste antes.
8. Haz clic en video_annotation_output.
   Si no ves el video_annotation_output espera unos segundos y actualiza la página, ya que es posible que la API de Video Intelligence aún esté procesando el video.

9. Ten en cuenta que existe un archivo JSON con un nombre similar al del archivo que subiste antes.
10. Haz clic en Descargar FILENAME.
11. Abre el archivo JSON descargado en tu editor de código. Contiene el resultado sin procesar de la API de Video Intelligence, que incluye las etiquetas detectadas del video que subiste.

13. Cómo configurar la app de Video Hint para usar Firebase

Para ejecutar la app de Video Hint, debes configurar el código de tu app y Firebase CLI para interactuar con tu proyecto de Firebase.

Agrega los servicios y la configuración de Firebase al código de tu app

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

La app de ejemplo de este codelab ya incluye todo el código de importación y de inicialización necesario para los SDK (consulta video-hint-start/lib/firebase/firebase.js), de modo que no necesitas agregarlos. Sin embargo, la app de ejemplo solo tiene valores de marcadores de posición para la configuración de Firebase (consulta video-hint-start/lib/firebase/firebase-config.js), por lo que debes registrar tu app con tu proyecto de Firebase a fin de obtener los valores de configuración únicos de Firebase para tu app.

1. En Firebase console, en tu proyecto de Firebase, navega a Descripción general del proyecto y, luego, haz clic en Web (o en Agregar app) si ya registraste una app en el proyecto).
2. En el cuadro de texto Sobrenombre de la app, ingresa un sobrenombre fácil de recordar, como My Video Hint app.
3. No selecciones la casilla de verificación Configurar Firebase Hosting también para esta app. Realizarás estos pasos más adelante en el codelab.
4. Haz clic en Registrar app.
5. En la consola se muestra un fragmento de código para agregar y también inicializar el SDK de Firebase con un objeto de configuración de Firebase específico para la app. Copia todas las propiedades en el objeto de configuración de Firebase.
6. En tu editor de código, abre el archivo video-hint-start/lib/firebase/firebase-config.js.
7. Reemplaza los valores del marcador de posición por los valores que acabas de copiar. No hay problema si tienes propiedades y valores para los servicios de Firebase que no usas en la app de Video Hint.
8. Guarda el archivo.
9. Vuelve a Firebase console y haz clic en Ir a la consola.

Configura la terminal para ejecutar comandos de Firebase CLI en tu proyecto de Firebase.

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

   cd ../video-hint-start
   

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

   firebase use YOUR_PROJECT_ID
   

Configura la base de código de tu app para usar Firebase Hosting compatible con el framework

En este codelab, se usan frameworks web con Hosting (versión preliminar) con la aplicación web Video Hint.

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

   firebase experiments:enable webframeworks
   

2. Inicializa Firebase Hosting:

   firebase init hosting
   

3. Cuando aparezca Detected an existing Next.js codebase in your current directory, should we use this?, presiona Y.
4. Cuando se te solicite In which region would you like to host server-side content, if applicable?, selecciona la región predeterminada o la ubicación que seleccionaste anteriormente para Firestore y Cloud Storage, y, luego, presiona Enter (o return en macOS).
5. Cuando se te solicite con Set up automatic builds and deploys with GitHub?, presiona N.

Ejecuta y visualiza la app web de Video Hint

1. En tu terminal, instala las dependencias en las carpetas video-hint-start y functions y, luego, ejecuta la app:

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

2. En el navegador, ve a la URL de Hosting alojada de forma local. 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. Las agregaremos en los próximos pasos de este codelab.

Soluciona problemas relacionados con la ejecución de la app web

Si ves un mensaje de error como Error: The query requires an index. You can create it here: https://console.firebase.google.com en el panel Console de Herramientas para desarrolladores, sigue estos pasos:

1. Navega a la URL proporcionada.

2. Haz clic en Guardar y espera a que el estado cambie de Compilando a Habilitado.

14. Agrega funcionalidad a la app de Video Hint

En el último paso de este codelab, ejecutaste la app Video Hint de forma local, pero no tenía mucha funcionalidad ni usaba la extensión instalada. En este paso del codelab, agregarás esta funcionalidad y usarás la aplicación web para activar la extensión.

Implementa las reglas de seguridad

La app de ejemplo 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 tu proyecto de Firebase, los datos de tu base de datos y tu bucket estarán más protegidos contra el uso inadecuado.

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

1. Para implementar estas reglas de seguridad, ejecuta el siguiente comando en tu terminal:

   firebase deploy --only firestore:rules,storage
   

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

Actualiza el código para combinar las funciones

1. En tu editor de código, expande la carpeta functions.
   Esta carpeta contiene varias funciones, que se combinan para formar una canalización de extensión. En la siguiente tabla, se enumera y describe cada función:

   Función	Descripción
   functions/01-handle-video-upload.js	El primer paso en la canalización de extensiones. Procesa el archivo de video que subió el usuario.
   functions/02-handle-video-labels.js	El segundo paso en la canalización de extensiones. Procesa el archivo de etiquetas de video, que generó la extensión storage-label-videos.
   functions/03-handle-audio-file.js	El tercer paso en la canalización de extensiones. Controla el archivo de audio transcrito.

   Sin embargo, aún debes agregar un archivo que agrupe estas funciones.
2. En el archivo functions/index.js, agrega 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 usa módulos de JavaScript para importar y exportar las funciones desde el archivo index.js, de modo que haya una ubicación centralizada para todas las funciones.

Actualiza el código para subir videos

1. En tu editor de código, abre el archivo lib/firebase/storage.js.
2. Busca la función uploadVideo.
   Esta función recibe los parámetros userId, filePath y file. Estos datos son suficientes para subir un archivo a Cloud Storage.
3. En el cuerpo de la función uploadVideo, agrega el siguiente código:

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

Implementa tus funciones

Para implementar tus funciones con Firebase CLI, sigue estos pasos:

1. En tu terminal, mientras estás en la carpeta video-hint-start, presiona Control+C para detener el proceso actual.
2. Implementa tus funciones:

   firebase deploy --only functions
   

   Si se te pregunta si deseas borrar alguna Cloud Function anterior, selecciona No.
3. Si ves un mensaje similar a Permission denied while using the Eventarc Service Agent, espera unos minutos y vuelve a ejecutar el comando.
4. Cuando se complete el comando, vuelve a ejecutar la app de forma local:

   firebase emulators:start --only hosting
   

Vuelve a ejecutar y visualizar la app web de Video Hint (ahora con funcionalidad).

Para ejecutar y ver la aplicación web que ya es funcional, sigue estos pasos:

1. En tu navegador, busca la pestaña en la que navegaste a http://localhost:5000.
2. Si es necesario, haz clic en Acceder con Google y selecciona tu Cuenta de Google.
3. Haz clic en Subir video de ejemplo núm. 1 y espera unos minutos para ver los resultados del resumen del video.
4. Si no ves ningún resultado después de subir el video, consulta Cómo solucionar errores con Cloud Functions en el apéndice de este codelab.

15. Conclusión

¡Felicitaciones! Lograste mucho en este codelab.

Extensiones de Firebase instaladas y configuradas

Usaste Firebase console para instalar y configurar varias extensiones de IA. El uso de extensiones es conveniente porque no es necesario escribir mucho código estándar que se ocupe de la autenticación con los servicios de Google Cloud, la lectura y escritura desde Firestore, y la interacción con los servicios de Google Cloud, y los diversos matices relacionados con esas tareas.

Trabajo con extensiones en Firebase console.

En lugar de pasar directamente al código, te tomaste el tiempo para comprender cómo funcionan las extensiones de IA, con base en una entrada que proporcionaste a través de la consola a Firestore o Cloud Storage. Este tipo de interacción puede ser especialmente útil si necesitas depurar el resultado de la extensión.

Compila tres apps web potenciadas por IA que usan Extensiones de Firebase

Reviewly

En la app web de Reviewly, usaste la extensión Language Tasks con la API de PaLM para resumir las opiniones largas que dejaron los usuarios sobre un producto de camisetas. También solicitaste que el modelo de lenguaje proporcione una respuesta JSON a tu consulta, en la que JSON proporcione una calificación por estrellas y una opinión resumida de la opinión original de formato largo.

Ejercicio opcional: La empresa de camisetas está conforme con las opiniones resumidas, pero pidió un resumen adicional de la naturaleza del defecto. ¿Puedes ajustar el mensaje para que muestre un resumen del defecto y, luego, incluirlo en la interfaz de usuario de la app web?

Chatbot

En la app web de Chatbot, usaste la extensión Chatbot con la API de PaLM para proporcionarle al usuario una interfaz de chat interactiva, que incluye contexto histórico en las conversaciones, en la que se almacena cada mensaje en un documento de Firestore que tenga alcance para un usuario en particular.

Ejercicio opcional: Los alumnos están conformes con el chatbot, pero el personal quisiera algunas mejoras. Los alumnos deben recibir preguntas que inviten a la reflexión después de haber dado sus respuestas. 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: Para lograrlo, puedes usar una opción de contexto configurable.

Video Hint

En la app web Video Hint, utilizaste las extensiones Convertir texto a voz, Tareas de lenguaje con la API de PaLM y Etiquetar videos con Cloud Video para formar una canalización de extensión que da como resultado un texto y audiodescripción de un video.

Ejercicio opcional: Al departamento gubernamental le pareció interesante el prototipo y ahora también desea que un usuario pueda hacer clic en una etiqueta de texto para saltar al punto del video en el que se detecta la etiqueta.

16. Apéndice: Soluciona errores con Cloud Functions

Si la app web no funciona como debería y crees que podría deberse a ciertas funciones, sigue los pasos que se indican en esta página de solución de problemas.

Permite el acceso público sin autenticar

Si aparece algún error relacionado con los permisos en el panel de la consola de las Herramientas para desarrolladores de Chrome, sigue estos pasos:

1. Lee la Descripción general de la autenticación | Página de Cloud Run
2. Haz clic en el vínculo para ver y completar las tareas necesarias para permitir el acceso público no autenticado a la función.

3. Regresa a la app de Reviewly. Por ejemplo: http://localhost:8080.
4. Haz clic en Agregar algunas opiniones de prueba y espera unos segundos.
   • Si aparecen opiniones, no es necesario que sigas estos pasos para solucionar problemas. Puedes pasar directamente a la sección Cómo configurar la app web de chatbot de este codelab.
   • Si no aparecen opiniones, continúa con esta sección de solución de problemas.

Controla errores de permisos insuficientes

1. En Firebase console, navega a Funciones.
2. Coloca el cursor sobre la función addMockReviews y, luego, haz clic en > Ver registros.

3. Desplázate por los registros hasta que encuentres 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, navega a la página Permisos de IAM y, luego, selecciona tu proyecto.
5. En la tabla, busca la columna Nombre.
   En la página IAM y administración, hay una tabla de usuarios y roles. La columna de nombre de la tabla describe para qué es el usuario o la principal. Puedes tener una principal con el nombre de Cuenta de servicio de procesamiento predeterminada.

Si ves la Cuenta de servicio de procesamiento predeterminada, sigue estos pasos:

1. Haz clic en Editar principal.

2. Continúa con la sección Agrega roles a la cuenta de servicio predeterminada de Compute en este codelab.

Si no ves la Cuenta de servicio de procesamiento predeterminada, sigue estos pasos:

1. Haz clic en Otorgar acceso.
2. En el cuadro de texto Principales nuevas, ingresa compute.
3. En el menú de sugerencias automáticas que aparece, selecciona Cuenta de servicio de procesamiento predeterminada.

Agrega roles a la cuenta de servicio predeterminada de Compute

En la sección Asignar roles de la cuenta de servicio predeterminada de Compute, sigue estos pasos:

1. Expande el menú Selecciona un rol.
2. En el cuadro de texto Filtro, ingresa Cloud Datastore User.
3. En el menú de sugerencias automáticas que aparece, selecciona Usuario de Cloud Datastore.
4. Haz clic en Agregar otro rol.
   1. Expande el menú Selecciona un rol.
   2. En el cuadro de texto Filtro, ingresa Cloud Storage for Firebase Admin.
   3. En el menú de sugerencias automáticas que aparece, selecciona Administrador de Cloud Storage para Firebase.
5. Haz clic en Agregar otro rol.
   1. Expande el menú Selecciona un rol.
   2. En el cuadro de texto Filtro, ingresa Cloud Storage for Firebase Service Agent.
   3. En el menú de sugerencias automáticas que aparece, selecciona Agente de servicio de Cloud Storage para Firebase.
6. Haz clic en Guardar.