🚀 Primeros pasos en Firebase Studio

Firebase Studio es una herramienta poderosa que permite construir aplicaciones web completas directamente desde tu navegador, sin necesidad de configurar entornos locales. En esta guía te cuento cómo di mis primeros pasos con Firebase Studio y cómo creé una aplicación útil para calcular el precio de productos hechos a mano.

🔧 ¿Qué es Firebase Studio?

Firebase Studio es una nueva experiencia visual de desarrollo que combina el poder de Firebase Hosting, Firestore, Cloud Functions y otras herramientas del ecosistema Google, para ayudarte a prototipar y desplegar apps rápidamente. Desde una sola interfaz puedes:

• Crear y editar tu código (HTML, JS, CSS, etc.)
• Configurar funciones backend y base de datos
• Probar y desplegar tu app con un solo clic

📖 Puedes revisar esta presentación con más detalles.

🧮 Mi primer proyecto: Calculadora Artesanal

Para poner a prueba Firebase Studio, creé una app sencilla pero funcional: Calculadora Artesanal, una herramienta para estimar el precio de venta de productos hechos a mano.

✨ ¿Qué hace?

La app calcula el precio de venta usando la fórmula:

Precio = (Costo de materia prima + (Horas de trabajo × Precio por hora)) × Multiplicador

🧱 Inputs:

• Costo de la materia prima (USD)
• Horas de elaboración
• Precio por hora artesanal
• Multiplicador de utilidad (por defecto: 2)

💡 Características:

• Diseño tipo tarjeta, simple y amigable, usando Tailwind CSS
• Cálculo del precio en tiempo real
• Código 100% compatible con Firebase Hosting

🔗 Puedes probarla aquí:
👉 Calculadora Artesanal en vivo

🛠️ ¿Cómo la hice?

Usé el siguiente prompt directamente en Firebase Studio:

Prompt:

Prompt:
Crea una app web simple para calcular el precio de venta de productos hechos a mano.
Inputs:

Costo de la materia prima (en USD)

Horas de elaboración

Precio por hora de trabajo artesanal

Multiplicador de utilidad (por defecto 2)

Lógica:
Precio de venta = (materia prima + (horas × precio por hora)) × multiplicador

Requisitos:

Estilo visual simple y amigable, tipo tarjeta con campos de entrada y botón para calcular

Mostrar el resultado en tiempo real debajo del botón

Usar tecnologías compatibles con Firebase (por ejemplo: HTML, JavaScript y Tailwind CSS)

Nombre de la app: Calculadora Artesanal

Y en cuestión de minutos, la app estaba lista, publicada y compartible con una URL única.

🌱 ¿Por qué probar Firebase Studio?

• No necesitas instalar nada
• Ideal para prototipos rápidos o pequeños proyectos
• Integración fluida con el ecosistema Firebase y Google Cloud
• Puedes trabajar con IA para generar código funcional desde un prompt

💬 ¿Te animas a probarlo?

Explora Firebase Studio y crea tu propia app en minutos. Puedes comenzar desde https://firebase.google.com/products/studio

Y si quieres inspiración, aquí está mi proyecto:
🔗 Calculadora Artesanal