Automatizando la hoja de cálculo
Todo comenzó con una hoja de cálculo y mucha curiosidad. Quería compartir mi lista de 'Deseos' para facilitar regalos, pero rellenar datos a mano era tedioso. Sin ser desarrollador backend, utilicé la Inteligencia Artificial (Gemini/ChatGPT) como mi 'Co-Pilot' de programación. Trabajando en tándem con la IA, logré crear mi primer código en Google Apps Script que conectaba el Excel con la API de TMDB para autocompletar toda la información.
Pronto descubrí los retos de trabajar con APIs. Al buscar 'Thor', la base de datos me devolvía un cortometraje de 17 minutos en lugar de la película de Marvel. Aprendí a refinar las peticiones, añadiendo filtros por año y exigiendo que la duración fuera mayor a 90 minutos para garantizar la precisión de los datos.
De un visualizador a un CMS completo
El Excel funcionaba, pero visualmente no era atractivo para compartir. Decidimos dar el salto a una interfaz web. La V1 era un simple visualizador (seguía introduciendo los datos en Excel y la web solo los mostraba). Sin embargo, esto evolucionó rápidamente hacia una web completa con edición en tiempo real.
El Modo Admin
Implementé un sistema de autenticación para separar el Modo Invitado (familiares que ven la lista) del Modo Admin. Ahora, la búsqueda de películas se hace directamente en la web con resultados visuales, evitando errores tipográficos y permitiendo cambiar estados (de 'Deseo' a 'Comprado') sin tocar nunca más el Excel.
Bajo el capó: Stack Serverless
Para mantener el proyecto a coste cero sin perder funcionalidad de base de datos, diseñé una arquitectura Serverless puenteando llamadas API a través de Google Apps Script.
AI Co-Pilot
GeminiFrontend
Vanilla JS
Backend
doPost / doGetBBDD
Google SheetsErgonomía y Gamificación
La Ley de Fitts en el sofá
Originalmente, los filtros de búsqueda estaban anclados en la parte superior. Me di cuenta de que, al hacer scroll infinito por el catálogo, obligar al usuario a volver arriba para cambiar un filtro era frustrante. La solución fue implementar un Botón Flotante (FAB) accesible al pulgar en todo momento, que despliega un Bottom Sheet. Una decisión puramente ergonómica pensada para el uso móvil a una sola mano.
Estadísticas: Un toque de diversión
Con la base de datos construida, el menú principal se sentía algo vacío. Decidimos aprovechar toda la data recopilada para crear un panel de estadísticas. Mostrar el director más visto, la saga más larga o el tiempo total invertido en cine no tiene un propósito de negocio estricto, pero transforma una simple herramienta de gestión en una experiencia divertida y gamificada para el coleccionista.
La Experiencia de App Nativa
El objetivo era que el usuario no sintiera que estaba navegando por una página web tradicional. Configurando el manifest.json y un Service Worker, logré que la aplicación fuera instalable directamente en la pantalla de inicio del móvil (Progressive Web App). Esto elimina las barras de búsqueda de Chrome o Safari, ofreciendo una experiencia inmersiva a pantalla completa, exactamente igual que una app nativa descargada de la App Store.
Micro Design System
Para dar un aspecto cinematográfico y reducir la fatiga visual, establecí un tema oscuro nativo basado en tonos Slate y acentos eléctricos. La tipografía elegida es Outfit, una familia geométrica que aporta modernidad y mantiene una alta legibilidad incluso en los densos paneles de estadísticas.
¿Quieres ver cómo funciona?
Entra y trastea con la lista de películas, el buscador en tiempo real y el panel de estadísticas (tranquilo, el Modo Admin está oculto para invitados, así que no podrás borrarme nada).
Visitar Cinemateca