1. Descripción general
En este codelab, practicarás el uso del agente de prototipado de apps en Firebase Studio para crear una app diseñada para ayudarte a aprender un idioma nuevo. Luego, definirás mejor la app y la mejorarás, y, de manera opcional, la publicarás en Firebase App Hosting.
Qué aprenderás
- Prácticas recomendadas para generar instrucciones en Firebase Studio
- Iterar en una app para agregar funcionalidad y corregir errores
- Publica una app en Firebase App Hosting y compártela con otras personas
- Realiza un seguimiento de las métricas clave a través del panel de descripción general de la app de App Hosting
Requisitos
- El navegador que elijas, como Google Chrome
- Una Cuenta de Google para crear y administrar tu proyecto de Firebase
2. Genera tu app con el agente de App Prototyping
El agente de prototipado de apps usa Gemini en Firebase para compilar tu app. Incluso si usas instrucciones idénticas, es posible que tu resultado no se vea ni funcione exactamente como el que se muestra en este codelab. Si te quedas atascado, proporcionamos un conjunto de archivos que puedes agregar a tu lugar de trabajo para retomar el lab en varios puntos de control a lo largo de este codelab.
- Accede a tu Cuenta de Google y abre Firebase Studio.
- En el campo Prototipar una app con IA, ingresa una descripción de la app que deseas compilar. En este codelab, compilarás una app que te ayude a aprender un idioma nuevo a través de historias, tarjetas de memoria y un tutor de IA. Ingresa una instrucción, como la siguiente:
An app to help someone learn a new language. The app should include AI-generated stories in the target language, where users can click vocab words or the entire story to see it in English. A different section includes flashcards, where the user is shown a word in the chosen language and can click it to flip the card and see the word in English. The final section includes an AI chatbot that allows the user to have simple conversations in the chosen language or ask questions in English about what a word means or how to form a sentence in the chosen language. All content should be beginner-friendly, focusing on basic greetings, common questions/answers, and vocabulary relevant to the lessons or stories. To start, the app should teach the user French, although we might add additional languages in the future. - Haz clic en Prototipar con IA.
- Revisa el esquema de la app sugerido. Haz clic en
Personalizar para editar el modelo:- Cambia el nombre de la app a Speak Easy.
- Cambia el esquema de colores por el siguiente:
Primary color: Asparagus green (#98BF64) for a calm and friendly feel. Secondary color: Light parchment (#F5EBCD) to complement the primary color. Accent: Marigold (#FFB833) for interactive elements and call-to-action buttons.
Archivo adjunto para subir una imagen durante el proceso de la propuesta o el esquema. Las imágenes deben tener un tamaño inferior a 3 MiB. - Haz clic en Guardar.
- Cuando el esquema termine de incorporar tus actualizaciones, haz clic en Prototipar esta app.
- Como esta app incluye elementos de IA, el agente te solicitará una clave de Gemini. Agrega tu propia clave de API de Gemini o haz clic en Generar automáticamente para generar una. Si haces clic en Auto-generate, Firebase Studio creará un proyecto de Firebase y generará una clave de API de Gemini por ti.
- El agente de prototipado de apps usa el esquema de la app para crear una primera versión de la app. Cuando termine, la vista previa de la app aparecerá junto con una interfaz de chat de Gemini. Tómate un momento para probar la app. Incluso si no se ve exactamente como la imaginaste, en la siguiente sección se describe cómo agregar nuevas funciones y definir mejor el diseño.
3. (Opcional) Obtén el código
Si te quedas atascado o quieres seguir más de cerca la app de ejemplo, usa los archivos de muestra que se proporcionan en varios puntos de control a lo largo del codelab.
- Descarga los archivos de la carpeta.
- En Firebase Studio, haz clic en
Cambiar al código para abrir la vista Código. - Arrastra los archivos que descargaste al panel Explorer de Firebase Studio. Permite que los archivos reemplacen los existentes.
- Haz clic en Switch to Prototyper para continuar con el codelab y usar la versión de ejemplo de la app.
4. Prueba, itera y depura la funcionalidad de tu app
Cuando obtengas una vista previa de la app, es posible que notes errores o funciones inesperadas. En la versión de ejemplo de la app, agregaremos los siguientes cambios y correcciones:
- En el generador de historias de IA, los usuarios deben poder hacer clic en las palabras del vocabulario para obtener una definición en inglés.
- Las tarjetas de memoria deben aparecer en francés y, luego, cambiar a inglés cuando se haga clic en ellas.
- El usuario debe poder ir a una página de configuración y cambiar a aprender japonés en lugar de francés.
Objetivo 1: Agrega palabras del vocabulario al generador de historias de IA
Opcional: Para usar la versión de ejemplo de la app a partir de este punto, descarga y arrastra estos archivos al panel Explorer de Firebase Studio en la vista de código.
- En la interfaz de chat, describe la función que quieres agregar:
In the AI Story Generator, users should be able to click vocab words or phrases to get the definition in English. Words or phrases should be underlined to indicate they can be clicked. - Prueba la app en la ventana de vista previa. Actualizarás el aspecto de la app más adelante, así que por ahora, intenta enfocarte solo en la funcionalidad.
- Si tu app no funciona como esperabas, sigue pidiéndole al agente de prototipado de apps que realice ajustes. Por ejemplo:
IMPORTANT: Be sure to underline and provide a definition for most words and phrases, and ESPECIALLY all nouns and verbs. If a word or phrase in the story appears multiple times, only underline and define the first instance. - Haz clic en Switch to Code para abrir la vista de código, en la que puedes ver todos los archivos de tu app y modificar el código directamente. Si hay un error que Gemini no puede resolver, a veces es más fácil editar un archivo de forma manual. Cuando todo esté listo, cambia al modo Prototyper para seguir usando el agente de prototipado de apps.
Objetivo 2: Agrega traducciones a las tarjetas de memoria
Opcional: Para usar la versión de ejemplo de la app a partir de este punto, descarga y arrastra estos archivos al panel Explorer de Firebase Studio en la vista de código.
Sigue el mismo proceso que se indicó anteriormente. Usa la interfaz de chat para describir la función, pruébala en la ventana de vista previa y, luego, usa instrucciones adicionales o la vista de código para agregar traducciones a las tarjetas de memoria flash. Prueba una instrucción como la siguiente:
The flash cards should appear in the target language to start, then switch to
English when clicked.
A veces, el agente de prototipado de apps no reconoce cuando hay un error. Describir lo que ves y lo que se debe corregir puede ser más eficaz, por ejemplo:
The flip button for the flash cards isn't working. Can you debug it? All flash
cards are only showing in English.
Objetivo 3: Agrega un idioma nuevo
Opcional: Para usar la versión de ejemplo de la app a partir de este punto, descarga y arrastra estos archivos al panel Explorer de Firebase Studio en la vista de código.
Prueba una instrucción como la siguiente:
Add a settings section to the app, where users can swap to a new language
to learn. Add Japanese to the list of languages the user can pick from. If
the user selects Japanese, the AI-generated stories, flash cards, and chatbot
tutor should all use Japanese instead of French.
5. Itera en el diseño de tu app
Opcional: Para usar la versión de ejemplo de la app a partir de este punto, descarga y arrastra estos archivos al panel Explorer de Firebase Studio en la vista de código.
Ahora que tu app tiene toda la funcionalidad que deseas, es hora de trabajar en el estilo.
Cómo cambiar el esquema de colores de la app
Puedes ser específico sobre los colores que quieres usar o puedes dejar que el agente de prototipado de apps tome la iniciativa. En la interfaz de chat, también puedes hacer clic en la opción Adjunto para subir una imagen de los colores o el estilo que deseas usar. Si prefieres usar una instrucción, prueba lo siguiente:
Add color to the design of the app. Use modern, clean colors that adhere
to accessibility standards and have a calming feel.
Actualiza el texto que se usa en la app
Por ejemplo, en lugar de "AI Chatbot Tutor", es posible que desees que solo diga "Chat":
Change the text "AI Chatbot Tutor" to "Chat".
Ajusta la IU de la app para que sea más intuitiva
Por ejemplo, en lugar de que el usuario tenga que presionar un botón para enviar texto, puedes permitir que presione Return en su teclado:
In the story generator section, allow the user to press the return key on
the keyboard to submit the text.
Agrega la opción para que el usuario elija entre el modo claro y el oscuro.
Muchos usuarios pueden preferir la opción de elegir entre un tema más claro o más oscuro para la app. Considera dónde sería un lugar lógico para encontrar este interruptor:
Add an icon in the upper right corner to dynamically switch the color theme of
the app between dark mode and light mode.
Sugerencias para la creación de instrucciones y la depuración
- Obtén ayuda con las instrucciones: Si tienes problemas para explicarle al agente de prototipado de apps lo que quieres, pídele a Gemini para Google que te ayude a definir mejor la instrucción. Obtén más información sobre las indicaciones eficaces.
- Probar en otros dispositivos: En el modo de prototipo, haz clic en
Share Preview Link para probar tu app en otros dispositivos. - Usa herramientas integradas: En la vista de código, usa las funciones de informes y depuración integradas de Firebase Studio para inspeccionar, depurar y auditar tu app.
- Comienza con algo simple: Trabaja en una función a la vez. Considera comenzar con un conjunto básico de funciones en tu prototipo y, luego, expandirlo una vez que funcionen como se espera.
- Describe los errores: Si algo no funciona, describe el comportamiento actual al agente de prototipado de apps y, luego, el comportamiento que deseas.
- Revierte cuando sea necesario: Cuando el agente de prototipado de apps malinterprete una instrucción o presente un problema difícil de resolver, haz clic en el botón Restaurar para revertir a una versión anterior de la app y volver a intentarlo con una instrucción diferente.
6. Publica tu app (opcional)
Opcional: Para usar la versión de ejemplo de la app a partir de este punto, descarga y arrastra estos archivos al panel Explorer de Firebase Studio en la vista de código.
Después de probar la app y quedar conforme con ella, puedes publicarla en la Web con Firebase App Hosting.
- Haz clic en Publicar para crear un proyecto de Firebase nuevo y comenzar la configuración de Hosting de apps. Aparecerá el panel Publica tu app.
- En el paso Proyecto de Firebase, anota el nombre del proyecto de Firebase que se creó por ti y, luego, haz clic en Siguiente.
- En el paso Vincular cuenta de Facturación de Cloud, elige una de las siguientes opciones:
- Selecciona la cuenta de Facturación de Cloud que quieres vincular a tu proyecto de Firebase.
- Si no tienes una cuenta de Facturación de Cloud o quieres crear una nueva, haz clic en Crear una cuenta de Facturación de Cloud. Se abrirá el texto de Google Cloud, en el que puedes crear una nueva cuenta de Facturación de Cloud de servicio automático. Después de crear la cuenta, vuelve a Firebase Studio y selecciona la cuenta de la lista Vincular Facturación de Cloud.
- 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 de API de Gemini o cuando hiciste clic en Publicar. Luego, App Hosting configura un entorno completamente administrado para tu app en Google Cloud.
- Haz clic en Crea tu primer lanzamiento. Firebase Studio lanza 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.
- 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 el texto de Firebase.
Para obtener más información sobre App Hosting, consulta Comprende App Hosting y cómo funciona.
7. Supervisa tu app (opcional)
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 el texto 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.
8. Conclusión
¡Felicitaciones! Creaste una app correctamente con Firebase Studio. Puedes agregar mucho más a la app, como un diccionario expandido, más idiomas, audio, animaciones o una selección de dificultad. No dudes en seguir jugando con tu app o crear algo nuevo.