Estudio Firebase: Una revisión honesta con ejemplos

Firebase ofrece un potente conjunto de herramientas que cubre todo lo que necesitas para crear aplicaciones web y móviles modernas. Es un nombre popular en el mundo de los desarrolladores y ha sido durante mucho tiempo el backend de referencia para las startups, con grandes características como la autenticación, el almacenamiento en la nube, las bases de datos en tiempo real y las funciones sin servidor.

Google va ahora un paso más allá con Firebase Studio, un nuevo entorno de desarrollo impulsado por IA, diseñado para ayudar a pasar de la idea al MVP en cuestión de minutos. Similar a Replit y LovableFirebase Studio hace posible crear aplicaciones completas utilizando sólo un mensaje.

En este artículo, exploraremos qué es Firebase Studio y cómo funciona. Te mostraré cómo lo he utilizado para crear un panel de control IoT desde cero y compartiré mis primeras impresiones.

Mantenemos a nuestros lectores al día de lo último en IA enviándoles The Median, nuestro boletín gratuito de los viernes que desglosa las noticias clave de la semana. Suscríbete y mantente alerta en sólo unos minutos a la semana:

¿Qué es Firebase Studio de Google?

Firebase Studio es la nueva herramienta de desarrollo de Google impulsada por la IA que te permite crear aplicaciones completas utilizando instrucciones en lenguaje natural. 

En realidad, es la evolución del Proyecto IDX, un IDE en la nube que Google lanzó en 2023. Project IDX se centraba en ser un IDE en la nube de uso general con soporte de IA, pero el cambio de marca a Firebase Studio reduce su enfoque para optimizar la experiencia de los desarrolladores de Firebase. Toma las mejores partes de IDX, como el editor Code OSS, el asistente de IA y el entorno basado en la nube, y añade integraciones con servicios de Firebase como Firestore, Auth, Hosting y Cloud Functions.

Firebase Studio se anunció durante el cambio de marca 2024 de Firebase, y es la respuesta de Firebase a la creciente ola de herramientas de desarrollo "nativas de IA".

Cómo acceder a Firebase Studio

Puedes probar Firebase Studio ahora mismo dirigiéndote a studio.firebase.google.com. Sólo necesitas una cuenta de Google. Una vez dentro, puedes escribir un mensaje describiendo la aplicación que quieres crear y Firebase Studio generará un proyecto listo para ejecutarse utilizando las herramientas de Firebase. 

Precios de Firebase Studio

El uso de Firebase Studio es gratuito durante su periodo de preestreno. Por defecto, puedes crear hasta 3 espacios de trabajo a coste cero. Sin embargo, algunos servicios integrados como Firebase App Hosting o superar la cuota gratuita de la API Gemini requerirán vincular una cuenta de facturación y pueden conllevar cargos. Tu proyecto Firebase se actualizará automáticamente al plan Blaze (pago por uso), y se te facturará cualquier uso que supere las cuotas gratuitas.

Dicho esto, si planeas utilizar Firebase Studio principalmente para tareas de creación de prototipos y desarrollo, deberías permanecer dentro de los límites del espacio de trabajo gratuito y poder explorar Firebase Studio sin incurrir en ningún coste.

Prueba 1: Aplicación IoT Dashboard de Prompt

Primero decidí probar la generación de la aplicación desde un prompt. Cuando pruebo herramientas de creación de aplicaciones basadas en IA, me gusta utilizar una instrucción algo compleja para comprobar realmente el comportamiento de la herramienta. Una aplicación de lista de tareas suele salir muy bien, pero una aplicación un poco más compleja pone realmente de relieve las áreas en las que la herramienta es buena y en las que tiene dificultades.

Así pues, mi pregunta era la siguiente

Tras pulsar el botón "Prototipo con IA" y esperar un minuto más o menos, seguía mirando una pantalla en blanco.

Actualizar la página no sirvió de mucho, así que decidí borrar el espacio de trabajo e intentarlo de nuevo. Esta vez, me mostraron un plan para mi aplicación:

Me impresionó bastante el hecho de que hubiera generado unas pautas de estilo que podía editar (por ejemplo, podía cambiar los colores simplemente haciendo clic en ellos). 

Sin embargo, si te fijas en la sección de características, puedes ver que se han eliminado los requisitos de la Función Nube y el Firestore que especifiqué en mi consulta. De todos modos, decidí que era lo bastante parecido y seguí con el plan, con curiosidad por ver el resultado. Esto es lo que me mostró la siguiente pantalla:

En este punto, el resultado me decepcionó un poco. La interfaz de usuario era muy básica y, de hecho, no había ningún tipo de autenticación de usuario.

Empecé a probar los distintos botones y la funcionalidad de la pantalla prototipo. 

Si haces clic en el botón superior derecho de la interfaz de la aplicación, ésta se abrirá en una pestaña nueva. El siguiente botón de la izquierda te permite compartir un enlace de previsualización. Bastante útil. El botón situado más a la izquierda de la interfaz de usuario abre un selector de componentes.

Al hacer clic en el botón naranja garabateado situado a la izquierda de la entrada del chat, se abre un interesante menú de "dibujo".

Pude dibujar un rectángulo alrededor de una tarjeta de sensor y especificar que quería ver el estado de dicho sensor. En efecto, encenderlo y apagarlo no tiene mucho sentido si no sé en qué estado se encuentra actualmente. 

Ha añadido una propiedad de estado en ambas tarjetas sensoras, que se actualiza en función del botón pulsado.

Probé a añadir un nuevo sensor de cocina a través de la interfaz de usuario, y funcionó bien.

Sin embargo, ese nuevo sensor no persistió tras una actualización, lo que fue un poco decepcionante.

En ese momento, quise echar un vistazo al código. Hice clic en el icono de código de la parte superior derecha de la pantalla de Firebase Studio, junto al botón azul "Publicar". Me alegró bastante ver que aparecía un editor de código en línea. Es suficientemente rápido, tiene un aspecto estupendo y lleva incorporada la función Géminis. Al abrir el control de código fuente se inició la búsqueda de repositorios Git.

Y parecía que había encontrado una y estaba esperando a que publicara la rama en la que me encontraba.

Me pareció un poco extraño, así que decidí hacer clic en "Publicar rama".

Efectivamente, no había iniciado sesión, y eso era sólo un capricho del editor. En cualquier caso, agradecí la posibilidad de iniciar sesión en GitHub directamente a través del editor online.

Lo que realmente quería ver era la capacidad de integrarse con el conjunto de herramientas Firebase. Volví a la pestaña de prototipo y pedí en el chat la integración con Auth y Funciones en la Nube para simular los datos de los sensores.

Cumplió y me dio un Iniciar sesión pero inmediatamente falló con algunos errores.

Uno de los errores, como se puede ver en la captura de pantalla anterior, se debía a que el código intentaba obtener información de una Función Nube que no existía, ya que no se había creado en absoluto en el código. Al hacer clic varias veces en "Corregir error" no se obtiene nada.

Volví a la pestaña de código, y tuve que pedirle al asistente de Géminis unas cuantas veces que aceptara crear código de Función Nube, y no sólo una función normal. Luego añadió que no podía desplegarlo por mí, pero que podía ayudarme con los pasos para hacerlo. Me parece justo.

Como la interfaz del chat no parecía muy buena resolviendo problemas lógicos, me pregunté si tal vez podría resolver mejor los de IU. Le pedí que hiciera más emocionante la interfaz de usuario de la página de inicio de sesión añadiendo imágenes relacionadas con datos y análisis. Eso tampoco produjo ningún cambio, a pesar de que el chat mostraba que estaba cambiando algunos archivos.

La última función que quería probar era la publicación de aplicaciones. Al hacer clic en el gran botón "Publicar" de la parte superior derecha, se abre un panel lateral con los pasos para publicar la aplicación.

Decidí crear una cuenta de facturación y pasarme automáticamente al plan Blaze para poder publicar la aplicación con Firebase App Hosting. El enlace del panel lateral redirige a la consola de Google Cloud, en la que se me pidió que creara un perfil de facturación. Una vez que hice clic en confirmar, me redirigieron a una página de "URL no encontrada" en GCP. 

Volviendo a mi pestaña de Firebase Studio, ahora podía ver el mensaje "Esperando cuenta de facturación de la Consola en la Nube". Esperé unos minutos y actualicé varias veces, y acabé pudiendo seleccionar mi cuenta de facturación y publicar mi aplicación.

Con esto concluí mi prueba de "generación de aplicaciones a partir de un prompt". Mi primer pensamiento fue que quizás había sido un poco más difícil con Firebase Studio que con otras herramientas que he utilizado antes.

Pasemos ahora a la segunda prueba.

Prueba 2: Generar un proyecto a partir de una plantilla

Aunque Firebase Studio ofrece la generación de aplicaciones a partir de una solicitud, también permite la creación de aplicaciones a través de plantillas.

En la página de inicio de Firebase Studio, al hacer clic en uno de los pequeños iconos de framework o idioma bajo la sección "Empezar a codificar una app", se abre una nueva pantalla. Elegí crear un Servidor API Node Express llamado "Mi App Node" y utilizar TypeScript para ello.

Tras unos segundos, el servidor resultante apareció en el editor de código online. Aquí no hay pestaña de prototipo, pero tiene sentido dado que se trata de código backend.

Esta vez, al abrir la pestaña de control de código fuente tuve la oportunidad de inicializar un nuevo repositorio Git.

Esta plantilla sólo exponía un punto final básico de "hola mundo", pero tenía todo el código y el boilerplate necesarios para empezar a codificar una API NodeJs + Express. 

Primeras impresiones y reflexiones sobre Firebase Studio

En general, Firebase Studio es un buen paso en el mundo del desarrollo asistido por IA, pero aún parece estar en fase beta.

La idea de pasar de una simple indicación a una aplicación funcional con un prototipo visual, una vista previa en vivo, componentes editables y controles de estilo es superemocionante. También había algunos pequeños detalles bien pensados, como poder cambiar los colores pulsando directamente sobre una paleta o dibujar sobre el prototipo para pedir cambios.

El editor de código integrado también fue una grata sorpresa: tiene buen aspecto, se ejecuta con fluidez y es compatible con Gemini y GitHub desde el primer momento, lo que hace que jugar con el código sea bastante sencillo. Definitivamente es tan bueno como otros editores de código en línea que he probado en el pasado.

Sin embargo, me encontré con bastantes problemas frustrantes. La generación basada en instrucciones fue un éxito o un fracaso: las funciones que pedí explícitamente (como Cloud Functions, Auth y Firestore) se omitieron, y cuando volví a pedirlas más tarde, el sistema las implementó parcialmente pero dejó funcionalidades rotas y errores sin resolver.

La interfaz de usuario que generaba era bastante básica, y mis peticiones de añadir imágenes de fondo fueron ignoradas. Después de insistir varias veces, lo único que conseguí fue un degradado de colores en el fondo. También me encontré con algunos problemas a la hora de publicar y configurar la facturación, lo que hizo que todo el proceso resultara un poco torpe.

La creación de aplicaciones basada en plantillas fue mejor. La plantilla de backend Node.js me proporcionó una base de código bien estructurada y limpia con la que pude empezar a trabajar inmediatamente. Eso parecía mucho más fiable y fácil de desarrollar.

Para ser totalmente justo, no llegué a probarlo todo, y está claro que la herramienta sigue evolucionando. He visto que otros mencionan que funciona mejor con casos de uso más sencillos o con indicaciones más estructuradas, así que puede que lo intente la próxima vez.

Ahora mismo, Firebase Studio parece un anticipo de lo que podría llegar a ser el desarrollo basado en la IA . No está preparado para el prime time, especialmente si se compara con herramientas como Replit, LovableBolt o v0pero es un espacio apasionante para observar.

Conclusión

Firebase Studio tiene algunas ideas realmente interesantes, pero no creo que esté preparado para crear aplicaciones listas para la producción por sí solo todavía. Si sientes curiosidad por el desarrollo asistido por IA o quieres explorar lo que está por venir, ¡sin duda merece la pena jugar!