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 (proporcionada por un usuario que accedió a su cuenta) y genere una receta que contenga los ingredientes identificados. Luego, los usuarios pueden optar por almacenar la receta en una base de datos que admite búsquedas.

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:

Paso 1: Genera tu app

Accede a tu Cuenta de Google y abre Firebase Studio.
En el campo Crea prototipos de una app con IA, ingresa la siguiente instrucción, que creará una app de recetas basada en imágenes que use la cámara del navegador y la IA generativa.

Por ejemplo, podrías ingresar una instrucción como la siguiente para crear una app de generación de recetas:
```
Use secure coding practices to create an error-free web app that lets
users upload a photo or take a picture with their browser
camera. The app identifies the food in the picture and generates a
recipe and accompanying image that includes that food.

If no food product is identified, generate a random dessert recipe.
```
Sugerencia: Para obtener mejores resultados, especifica lo máximo posible tu instrucción. Incluye las funciones que deseas, los flujos de trabajo de los usuarios y los requisitos de datos. De manera opcional, haz clic en Improve prompt para pedirle a Gemini que defina mejor tu instrucción inicial. También debes comprender que los procesos de desarrollo más eficaces con IA son iterativos y que puedes seguir definiendo mejor y agregando funciones de forma colaborativa con Gemini. Obtén más información para crear instrucciones eficaces.
De manera opcional, agrega una imagen para acompañar la instrucción. Por ejemplo, puedes subir una imagen que contenga el esquema de colores que deseas que use tu app y decirle a Firebase Studio que la use. Las imágenes deben tener un tamaño inferior a 3 MiB.
Haz clic en Prototipar con IA.

El agente de prototipado de apps genera un esquema de app según tu instrucción y devuelve un nombre propuesto para la app, las funciones requeridas y los lineamientos de estilo.
Revisa el plan. Si es necesario, realiza algunos cambios. Por ejemplo, puedes cambiar el nombre o el esquema de colores de la app propuestos con una de estas opciones:
- Haz clic en Personalizar y edita el esquema directamente. Realiza los cambios necesarios 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.
Haz clic en Crear prototipo de esta app.

Importante: Gemini puede generar resultados que parecen posibles, pero que no son correctos. Es posible que responda con información imprecisa que no representa la opinión de Google. Valida todos los resultados de Gemini antes de usarlos y no uses código generado que no se haya probado en producción. No ingreses información de identificación personal (PII) ni datos de usuarios en el chat.
El agente de prototipado de apps comenzará a codificar tu app.
- Ya que tu app usa IA, se te pedirá que agregues o generes una clave de Gemini API. Si haces clic en Generar automáticamente, el App Prototyping agent aprovisionará un proyecto de Firebase y una clave de Gemini API por ti.
Importante: Si eliges Generar automáticamente, el App Prototyping agent creará un proyecto de Firebase en tu nombre con un prefijo que coincida con el nombre de tu espacio de trabajo de Firebase Studio y creará una clave de Gemini API nueva en el proyecto. También almacena la clave en tu espacio de trabajo Firebase Studio en un archivo .env. Para acceder a tu proyecto nuevo en cualquier momento, haz clic en el nombre del proyecto en la parte superior de la página. Para acceder a tu clave de Gemini API y copiarla o borrarla en el futuro, usa la consola de Google Cloud.

Paso 2: Prueba, define mejor, depura e itera

Después de que se genera la app inicial, puedes probar, definir mejor, depurar e iterar.

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. Obtén más información en Obtén una vista previa de tu app.
Agrega Cloud Firestore y Firebase Authentication: Durante la fase de iteración, puedes pedirle a App Prototyping agent que agregue autenticación de usuario y una base de datos usando Cloud Firestore y Firebase Authentication. Por ejemplo, permite que los usuarios guarden y descarguen recetas con una instrucción como la siguiente:
```
Add user authentication to the app. Authenticated users can:

  - Download the recipe and its generated image as a PDF (Print).

  - Save the recipe as public or private and make accessible to a search
    feature. For now, just save the text, not the image, to the database.

Important: Only authenticated users can download the PDF.
```
Nota: El agente de prototipado de apps puede agregar Cloud Firestore y Firebase Authentication a tu app durante la fase de iteración, no en el plan inicial de la app.
Corrige los errores a medida que ocurren: En la mayoría de los casos, el App Prototyping agent te solicita que corrijas los errores que surgen. Haz clic en Corregir error para permitir que intente corregirlo.

Si recibes errores que no se te solicita corregir automáticamente, copia el error y cualquier contexto adecuado (por ejemplo, "¿Puedes corregir este error en mi código de inicialización de Firebase?") en la ventana de chat y envíalo a Gemini.

Nota: Gemini explica su razonamiento, pero también puedes pedirle que explique su plan antes de ejecutarlo.
Prueba e itera con lenguaje natural: Prueba tu app en detalle y trabaja con App Prototyping agent para iterar en el código y el esquema hasta que estés conforme.

Mientras estás en Prototyper view, you can also use the following features:
- Haz clic en Anotar para dibujar directamente en la ventana de vista previa. Usa las herramientas de forma, imagen y texto disponibles, junto con una instrucción de texto opcional, para describir visualmente lo que quieres que cambie el App Prototyping agent.
- Haz clic en Seleccionar para elegir un elemento específico y, luego, ingresa instrucciones para el App Prototyping agent. Esto te permite elegir rápidamente un ícono, un botón, un texto o algún otro elemento específico. Cuando haces clic en una imagen, también tienes la opción de buscar y seleccionar una imagen de archivo de Unsplash.
De manera opcional, puedes hacer clic en Compartir vínculo de versión preliminar para compartir tu app de forma pública y temporal con las versiones preliminares públicas de Firebase Studio.
Crea un proyecto de Firebase: El agente de prototipado de apps aprovisiona un proyecto de Firebase en tu nombre cuando haces lo siguiente:
- Genera automáticamente una clave de API de Gemini
- Solicita conectar tu app a un proyecto de Firebase
- Pide ayuda para conectar tu app a los servicios de Firebase, como Cloud Firestore o Firebase Authentication.
- Haz clic en el botón Publicar y configura Firebase App Hosting.
Para cambiar el proyecto de Firebase conectado a tu espacio de trabajo, pásale una instrucción a App Prototyping agent con el ID del proyecto que deseas usar. Por ejemplo, "Cambia al proyecto de Firebase con el ID <your-project-id>".
Prueba la app y verifica las reglas de la base de datos de Cloud Firestore: En el panel de vista previa de la app, sube una imagen que muestre diferentes alimentos para probar la capacidad de la app de identificar los ingredientes y generar y guardar recetas.

Accede como diferentes usuarios y genera recetas: Asegúrate de que los usuarios autenticados puedan ver sus recetas privadas y que todos los usuarios vean las recetas públicas.

Cuando le pides a App Prototyping agent que agregue Cloud Firestore, escribe y, luego, implementa las reglas de la base de datos de Cloud Firestore por ti. Revisa las reglas en Firebase console.
Depura e itera directamente en el código: Haz clic en Cambiar al código para abrir la vista Code, en la que puedes ver todos los archivos de tu app y modificar el código directamente. Puedes volver a cambiar a Prototyper mode at any time..

En la vista Code, también puedes usar las siguientes funciones útiles:
- Funciones de informes y depuración integradas de Firebase Studio para inspeccionar, depurar y auditar tu app.
- Asistencia de IA con Gemini, ya sea intercalada en tu código o mediante el chat interactivo de Gemini (ambos están disponibles de forma predeterminada). El chat interactivo puede diagnosticar problemas, proporcionar soluciones y ejecutar herramientas para ayudarte a corregir tu app más rápido. Para acceder al chat, haz clic en la estrellaGemini en la parte inferior del espacio de trabajo.
  
  Nota: Las apps creadas con App Prototyping agent usan Prototyper chat in Code view. To use Gemini interactive chat de forma predeterminada. En Gemini, haz clic en + y, luego, selecciona Nuevo chat. Para volver a Prototyper chat, click history Recent chats, and then choose Prototyper chat.
- Accede a Firebase Local Emulator Suite para ver los datos de autenticación y de la base de datos. Para abrir el emulador en tu espacio de trabajo, sigue estos pasos:
  1. Haz clic en Switch to Code y abre la extensión Firebase Studio (Ctrl+',Ctrl+' o Cmd+',Cmd+' en macOS).
  2. Desplázate hasta Puertos de backend y expándelo.
  3. En la columna Acciones que corresponde al puerto 4000, haz clic en Abrir en una ventana nueva.
Prueba y mide el rendimiento de tus funciones potenciadas por IA generativa: Puedes usar la IU para desarrolladores de Genkit para ejecutar tus flujos de IA de Genkit, realizar pruebas, depurar, interactuar con diferentes modelos, definir mejor tus instrucciones y mucho más.

Para cargar tus flujos de Genkit en la IU para desarrolladores de Genkit y comenzar a realizar pruebas, haz lo siguiente:
1. Desde la terminal de tu espacio de trabajo de Firebase Studio, ejecuta el siguiente comando para obtener la clave de Gemini API y, luego, inicia el servidor de Genkit:
```
 npm run genkit:watch
```
2. Haz clic en el vínculo de la IU para desarrolladores de Genkit. Esta IU se abre en una ventana nueva con tus flujos, instrucciones, incorporaciones y una selección de diferentes modelos disponibles.
Obtén más información sobre la IU para desarrolladores de Genkit en Herramientas para desarrolladores de Genkit.

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

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

Cuando configuras App Hosting, Firebase Studio crea un proyecto de Firebase para ti (si aún no se creó uno con la generación automática de una clave de Gemini API o a través de otros servicios de backend) y te guía para vincular una cuenta de Cloud Billing.

Para publicar tu app, sigue estos pasos:

Haz clic en Publicar para configurar tu proyecto de Firebase y publicar tu app. Aparecerá el panel Publica tu app.

Importante: Si no generaste automáticamente una clave de la Gemini API ni le pediste a App Prototyping agent que creara un proyecto de Firebase, Firebase Studio aprovisiona un proyecto de Firebase en tu nombre cuando haces clic en Publicar. Para acceder al proyecto de Firebase, haz clic en el nombre del proyecto en la parte superior de la página.
En el paso Proyecto de Firebase, el App Prototyping agent muestra el proyecto de Firebase asociado con el espacio de trabajo. Si aún no existe un proyecto de Firebase, App Prototyping agent crea uno nuevo. Haz clic en Siguiente para continuar.
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, vuelve a Firebase Studio y selecciona la cuenta de la lista Vincular Cloud Billing.
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.

Importante: Firebase App Hosting requiere una cuenta de Cloud Billing. Cuando vinculas una cuenta de facturación a un proyecto de Firebase, este se actualiza automáticamente al plan de precios de pago por uso Blaze y tu uso de la Gemini API y otros servicios de Firebase y Google Cloud se actualiza al nivel pagado. Se te cobrará por el uso de servicios pagados que superen la cuota sin costo. Obtén más información en Comprende los costos de App Hosting, los precios de Firebase y los precios de la API para desarrolladores de Gemini.
Haz clic en Configurar servicios. El agente de prototipado de apps comienza a aprovisionar los servicios de Firebase.
Haz clic en Publicar ahora. Firebase Studio configura los servicios de Firebase y, luego, inicia el lanzamiento de App Hosting. Este paso puede tardar varios 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.

Nota: Si no quieres publicar la app ahora, puedes hacer clic en Publicar más tarde.
Cuando se complete el paso de publicación, aparecerá 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 (recomendado): Prueba tu app publicada

Cuando se complete la publicación y tu app se implemente en Firebase, Cloud Firestore y Firebase Authentication estarán listos para probarse en producción.

Cómo ver los datos de Cloud Firestore y Firebase Authentication en Firebase console

Puedes ver los datos en tiempo real de tu app en Firebase console después de publicarla.

Para ver tu base de datos de Cloud Firestore activa, abre Firebase console y elige Compilación > Base de datos de Firestore en el menú de navegación.

Desde aquí, puedes inspeccionar los datos almacenados, ver y probar tus reglas de seguridad, y crear índices. Obtén más información en Cloud Firestore.
Para ver tus datos de Firebase Authentication en tiempo real, abre Firebase console y elige Compilación > Autenticación en el menú de navegación.

Desde aquí, puedes inspeccionar la configuración de autenticación y los usuarios de la app. Obtén más información en Firebase Authentication.

Prueba las reglas de Cloud Firestore en producción

Después de publicar tu app, debes volver a probar tus reglas de seguridad de Cloud Firestore en tu entorno de producción. Esto ayuda a garantizar que los usuarios autorizados puedan acceder a tus datos y que estén protegidos del acceso no autorizado.

Puedes probar tus reglas con todos los siguientes métodos:

Pruebas de la aplicación: Interactúa con tu aplicación implementada y realiza operaciones que activen varios patrones de acceso a los datos (lecturas, escrituras, eliminaciones) para diferentes roles o estados de usuario. Estas pruebas en situaciones reales ayudan a confirmar que tus reglas se aplican correctamente en la práctica.
Zona de pruebas de reglas: Para realizar verificaciones específicas, usa la Zona de pruebas de reglas en Firebase console. Esta herramienta te permite simular solicitudes (lecturas, escrituras y eliminaciones) en tu base de datos de Cloud Firestore con tus reglas de producción. Puedes especificar el estado de autenticación del usuario, la ruta de acceso a los datos y el tipo de operación para ver si tus reglas permiten o deniegan el acceso según lo previsto.

Nota: Cuando implementas reglas de seguridad durante el proceso de publicación o con Firebase CLI, las reglas definidas en el directorio del proyecto reemplazan cualquier regla existente en Firebase console. Por lo tanto, si defines o editas las reglas de seguridad con Firebase console, recuerda actualizar las reglas definidas en el directorio del proyecto.
Pruebas de unidades: Para realizar pruebas más completas, puedes escribir pruebas de unidades para tus reglas de seguridad. El backend de vista previa Firebase Studio potenciado por Firebase Local Emulator Suite te permite ejecutar estas pruebas de forma local, simulando el comportamiento de tus reglas de producción. Esta es una forma sólida de verificar la lógica de reglas complejas y confirmar la cobertura para diversas situaciones. Después de la implementación, debes verificar que las pruebas unitarias que usan el emulador funcionen según lo esperado y abarquen todas las situaciones.