Desarrolla, publica y supervisa una app web de pila completa con el agente de prototipado de apps

En esta guía, se muestra cómo usar App Prototyping agent para desarrollar y publicar rápidamente una app de pila completa con la ayuda de Gemini en Firebase. Usarás una instrucción en lenguaje natural para generar una app de Next.js que identifique alimentos a partir de una foto o una cámara en el navegador, y proporcione una receta que contenga los ingredientes identificados. Luego, definirás mejor la app y la mejorarás, y, finalmente, la publicarás en Firebase App Hosting.

Estas son otras tecnologías que usarás a medida que avances en esta guía:

• un lugar de trabajo de Firebase Studio
• un proyecto de Firebase
• Firebase App Hosting

Paso 1: Genera tu app

1. Accede a tu Cuenta de Google y abre Firebase Studio.

2. En el campo Prototipar una app con IA, ingresa una descripción de la app que deseas compilar. Para esta solución, en la que creas una app de recetas basada en imágenes, puedes usar una instrucción como la siguiente para crear un prototipo de una app que use la cámara y la IA generativa:

   Build a web app that can identify food products from an uploaded picture or
   in-browser camera. The app should provide a recipe that contains the
   identified ingredients.
   

3. Haz clic en Prototipar con IA.

   Gemini genera un esquema de app según tu instrucción y muestra un nombre propuesto para la app, las funciones requeridas y los lineamientos de estilo.

4. Revisa el esquema y realiza algunos cambios. Por ejemplo, puedes cambiar el nombre o el esquema de colores de la app propuesta con una de estas opciones:

   • Haz clic en editPersonalizar y edita el esquema directamente. Realiza los cambios que desees y haz clic en Guardar.

   • En el campo Describe… del panel de chat, agrega preguntas aclaratorias y contexto. También puedes subir imágenes adicionales.

5. Haz clic en Prototipar esta app. Gemini comenzará a codificar tu app. Como la descripción de la app describe funciones que requieren IA generativa, Gemini te solicitará una clave Gemini API.

6. Agrega tu propia clave Gemini API o haz clic en Generar automáticamente para generar una clave Gemini API.

Paso 2: Prueba, define mejor, depura y itera

Después de que se genera la app inicial, puedes probarla, definirla mejor, depurarla y iterar.

1. Revisa y, luego, interactúa con tu app: Después de que se complete la generación de código, aparecerá una vista previa de tu app. Puedes interactuar con la vista previa directamente para probarla.

2. Itera en tu app: Continúa usando la interfaz de chat para pedirle a Gemini que agregue funciones y defina mejor la app. O bien, haz clic en Switch to Code para abrir la vista Code, en la que puedes editar el código directamente en el espacio de trabajo Firebase Studio.

3. Prueba la app: En el panel de vista previa de la app, sube una imagen que muestre diferentes alimentos para probar la capacidad de la app para identificar los ingredientes y proporcionar una receta. De manera opcional, puedes usar la vista Code para compartir tu app de forma pública y temporal con las versiones preliminares públicas de Firebase Studio.

4. Cómo depurar la app: Para abrir Code, haz clic en Switch to Code para abrir la vista Code, en la que puedes usar las funciones de informes y depuración integradas de Firebase Studio para inspeccionar, depurar y auditar tu app. Regresa a App Prototyping agent en cualquier momento.

5. Itera: Si la app no funciona como se espera, define mejor la instrucción, usa el panel de chat para pedirle a Gemini que defina mejor la app o edita el código directamente Code.

Paso 3 (opcional): Publica tu app con App Hosting

Una vez que hayas probado la app y estés conforme con ella, puedes publicarla en la Web con Firebase App Hosting.

Cuando configuras App Hosting, Firebase Studio crea un proyecto de Firebase para ti y te guía para vincular una cuenta de Cloud Billing.

Para publicar tu app en Firebase App Hosting, sigue estos pasos:

1. Haz clic en Publicar para crear un proyecto de Firebase nuevo y comenzar la configuración de App Hosting. Aparecerá el panel Publica tu app.

2. En el paso Proyecto de Firebase, anota el nombre del proyecto de Firebase que se creó por ti y, luego, haz clic en Siguiente.

3. En el paso Vincular cuenta de Cloud Billing, elige una de las siguientes opciones:

   • Selecciona la cuenta de Cloud Billing que quieres vincular a tu proyecto de Firebase.

   • Si no tienes una cuenta de Cloud Billing o quieres crear una nueva, haz clic en Crear una cuenta de Cloud Billing. Se abrirá la console de Google Cloud, en la que puedes crear una nueva cuenta de Cloud Billing autoservicio. Después de crear la cuenta, regresa a Firebase Studio y selecciona la cuenta de la lista Vincular Cloud Billing.

4. Haz clic en Siguiente. Firebase Studio vincula la cuenta de facturación al proyecto asociado con tu espacio de trabajo, que se creó cuando generaste automáticamente una clave Gemini API o cuando hiciste clic en Publicar. Luego, App Hosting configura un entorno completamente administrado para tu app en Google Cloud.

5. Haz clic en Crea tu primer lanzamiento. Firebase Studio inicia el lanzamiento de App Hosting. Esto puede tardar hasta diez minutos en completarse. Para obtener más información sobre lo que sucede en segundo plano, consulta El proceso de compilación de App Hosting.

6. Cuando se complete el lanzamiento, aparecerá la Descripción general de la app con una URL y estadísticas de la app potenciadas por la observabilidad de App Hosting. Para usar un dominio personalizado (como example.com o app.example.com) en lugar del dominio generado por Firebase, puedes agregar un dominio personalizado en la consola de Firebase.

Para obtener más información sobre App Hosting, consulta Información sobre App Hosting y cómo funciona.

Paso 4 (opcional): Supervisa tu app

El panel Descripción general de la app de App Hosting proporciona información y métricas clave sobre tu app, lo que te permite supervisar el rendimiento de tu app web con las herramientas de observabilidad integradas de App Hosting. Después de que se lance tu sitio, podrás hacer clic en Publicar para acceder a la descripción general. En este panel, puedes hacer lo siguiente:

• Haz clic en Crear lanzamiento para lanzar una versión nueva de tu app.
• Comparte el vínculo a tu app o ábrela directamente en Visita tu app.
• Revisa un resumen del rendimiento de tu app en los últimos 7 días, incluida la cantidad total de solicitudes y el estado de tu lanzamiento más reciente. Haz clic en Ver detalles para acceder a aún más información en la consola de Firebase.
• Consulta un gráfico de la cantidad de solicitudes que recibió tu app en las últimas 24 horas, desglosadas por código de estado HTTP.

Si cierras el panel Descripción general de la app, puedes volver a abrirlo en cualquier momento haciendo clic en Publicar.

Obtén más información para administrar y supervisar los lanzamientos de App Hosting en Administra lanzamientos y versiones.

Paso 5 (opcional): Revierte la implementación

Si implementaste versiones sucesivas de tu app en App Hosting, puedes revertirla a una de las versiones anteriores. También puedes quitarla.

• Para revertir un sitio publicado, haz lo siguiente:

  1. Abre App Hosting en la console de Firebase.

  2. Busca el backend de tu app, haz clic en Ver y, luego, en Lanzamientos.

  3. Junto a la implementación a la que deseas volver, haz clic en Más more_vert, luego, elige Revertir a esta compilación y confirma.

  Obtén más información en Cómo administrar lanzamientos y versiones.

• Para quitar tu dominio App Hosting de la Web, sigue estos pasos:

  1. En la consola de Firebase, abre App Hosting y haz clic en Ver en la sección de la app Firebase Studio.

  2. En la sección Información del backend, haz clic en Administrar. Se carga la página Dominios.

  3. Junto a tu dominio, haz clic en Más more_vert, luego, elige Inhabilitar dominio y confirma.

  De esta forma, se quitará tu dominio de la Web. Para quitar por completo tu backend de App Hosting, sigue las instrucciones que se indican en Cómo borrar un backend.

Paso 6 (opcional): Usa la supervisión de Genkit para tus funciones implementadas

Para supervisar los pasos, las entradas y las salidas de tu función Genkit, habilita la telemetría en el código de flujo de IA. La función de telemetría de Genkit te permite supervisar el rendimiento y el uso de tus flujos de IA. Estos datos pueden ayudarte a identificar áreas de mejora, solucionar problemas, optimizar tus instrucciones y flujos para mejorar el rendimiento y la eficiencia de costos, y hacer un seguimiento del uso de tus flujos a lo largo del tiempo.

Para configurar la supervisión en Genkit, agregas telemetría a los flujos de IA de Genkit y, luego, ves los resultados en la consola de Firebase.

Paso 1: Agrega telemetría a tu código de flujo de Genkit en Firebase Studio

Para configurar la supervisión en tu código, haz lo siguiente:

1. Si aún no estás en la vista Code, haz clic en Switch to Code para abrirla.

2. Consulta package.json para verificar la versión de Genkit que está instalada.

3. Abre la terminal (Ctrl-Shift-C o Cmd-Shift-C en macOS).

4. Haz clic en la terminal e instala el complemento de Firebase con la versión que coincida con tu archivo package.json. Por ejemplo, si los paquetes Genkit de tu package.json están en la versión 1.0.4, debes ejecutar el siguiente comando para instalar el complemento:

   npm i --save @genkit-ai/firebase@1.0.4

5. En Explorador, expande src > ai > flows. Uno o más archivos TypeScript que contienen tus flujos de Genkit aparecen en la carpeta flows.

6. Haz clic en uno de los flujos para abrirlo.

7. En la parte inferior de la sección de importaciones del archivo, agrega lo siguiente para importar y habilitar FirebaseTelemetry:

   import { enableFirebaseTelemetry } from '@genkit-ai/firebase';
   
   enableFirebaseTelemetry();
   

Paso 2: Configura los permisos

Firebase Studio habilitó las APIs requeridas por ti cuando configuró tu proyecto de Firebase, pero también debes proporcionar permisos a la cuenta de servicio App Hosting.

Para configurar los permisos, sigue estos pasos:

1. Abre la consola de IAM de Google Cloud, selecciona tu proyecto y, luego, otorga los siguientes roles a la cuenta de servicio de App Hosting:

   • Escritor de métricas de Monitoring (roles/monitoring.metricWriter)
   • Agente de Cloud Trace (roles/cloudtrace.agent)
   • Escritor de registros (roles/logging.logWriter)

2. Vuelve a publicar tu app en App Hosting.

3. Cuando se complete la publicación, carga la app y comienza a usarla. Después de cinco minutos, tu app debería comenzar a registrar datos de telemetría.

Paso 3: Supervisa tus funciones potenciadas por IA generativa en la consola de Firebase

Cuando se configura la telemetría, Genkit registra la cantidad de solicitudes, el éxito y la latencia de todos tus flujos y, para cada flujo específico, Genkit recopila métricas de estabilidad, muestra gráficos detallados y registra los seguimientos capturados.

Para supervisar las funciones de IA implementadas con Genkit, haz lo siguiente:

1. Después de cinco minutos, abre Genkit en la consola de Firebase y revisa las instrucciones y respuestas de Genkit.

   Genkit compila las siguientes métricas de estabilidad:

   • Total de solicitudes: Es la cantidad total de solicitudes que recibió tu flujo.
   • Tasa de éxito: Es el porcentaje de solicitudes que se procesaron correctamente.
   • Latencia del percentil 95: Es la latencia del percentil 95 de tu flujo, que es el tiempo que tarda en procesarse el 95% de las solicitudes.

   • Uso de tokens:

     • Tokens de entrada: Es la cantidad de tokens que se envían al modelo en la instrucción.
     • Tokens de salida: Es la cantidad de tokens que genera el modelo en la respuesta.

   • Uso de imágenes:

     • Imágenes de entrada: Es la cantidad de imágenes que se envían al modelo en la instrucción.
     • Imágenes de salida: Es la cantidad de imágenes que genera el modelo en la respuesta.

   Si expandes las métricas de estabilidad, estarán disponibles los siguientes gráficos detallados:

   • Volumen de solicitudes a lo largo del tiempo
   • Tasa de éxito a lo largo del tiempo
   • Tokens de entrada y salida a lo largo del tiempo.
   • Latencia (percentil 95 y 50) a lo largo del tiempo

Obtén más información sobre Genkit en Genkit.

Próximos pasos

• Obtén información para desarrollar apps en un Firebase Studio lugar de trabajo.
• Obtén más información sobre la asistencia de IA en Firebase Studio.