Capacidades
- Mapas interactivos
- Reproductor de audio
- Multiidioma
Frontend
Angular
TypeScript
CSS
Mapbox
Leaflet
ShazamHMI CarPlay
CompletadoProyecto experimental que replica la HMI de Apple CarPlay como aplicación web Angular: diez módulos independientes —mapas, música, teléfono, mensajes, calendario, podcast, libros, tiempo y ajustes— sobre una navegación lateral pensada para pantalla de coche, con pantalla de bloqueo y todo el sistema visual construido a mano.
El reto
Quería salirme del CRUD y enfrentarme a una interfaz de coche: pantalla apaisada, navegación por módulos, estado compartido entre apps y un rendimiento que aguante en hardware modesto. La regla autoimpuesta fue no usar ninguna librería de componentes.
Implementación
Diez módulos con carga perezosa
Cada app de la interfaz es un módulo Angular independiente que solo se descarga al abrirla, con su propio estado local y una capa compartida para lo que sí cruza módulos.
Sin librerías de UI
Ni Bootstrap, ni Material, ni ningún kit de componentes: layout, animaciones y componentes están escritos a mano con SCSS y SVG, que era precisamente el objetivo del ejercicio.
Mapas y música reales
El módulo de navegación integra MapBox GL y Leaflet con mapas interactivos, y el reproductor consume datos de la API de Shazam en lugar de contenido simulado.
Widgets arrastrables y redimensionables
El calendario integrado permite mover y redimensionar eventos con drag & drop, apoyándose en angular-calendar junto a las utilidades de arrastre y redimensionado.
Multiidioma y persistencia local
Internacionalización completa de la interfaz, pantalla de bloqueo con fecha y hora en vivo, y ajustes y datos de usuario persistidos en localStorage entre sesiones.
Pensado para pantallas de vehículo
Arquitectura modular por dominio y decisiones de rendimiento orientadas a dispositivos con recursos limitados, que es donde acaba corriendo una HMI de verdad.