Una de nuestras agencias colaboradoras nos planteó el reto de construir una web de una empresa de transporte urbano amdrileño: crear una web desde cero que ofreciera al usuario información precisa, estructurada y en tiempo real de cada una de sus líneas de autobús. La idea era facilitar al máximo la experiencia del viajero y modernizar la imagen digital del servicio, pero sin renunciar a la complejidad que implicaba trabajar con datos dinámicos y geolocalizados extraídos de su API.
Objetivo
- Mostrar una ficha detallada para cada línea de autobús con:
- Número de línea
- Nombre y descripción
- Sentidos (ida y vuelta)
- Paradas ordenadas con horarios en tiempo real
- Frecuencias
- Conexiones con otras líneas
- Integrar un mapa interactivo con:
- Puntos reales de cada parada
- Recorrido completo de la línea
- Colores y códigos visuales diferenciadores
- Hacerlo todo 100 % dinámico, conectado directamente a la API del operador de transporte.
Desarrollo y solución técnica
Para afrontar el proyecto, tomamos una aproximación modular centrada en la API. Estos fueron los principales hitos:
1. Diseño de arquitectura basada en datos
Tuvimos que entender a fondo cómo funcionaba la API: endpoints, formatos, parámetros, limitaciones… No bastaba con hacer peticiones: era necesario procesar, normalizar y reordenar la información para que fuese comprensible al usuario final.
2. Construcción de fichas automáticas por línea
Cada línea se genera automáticamente a partir de la API, mostrando:
- Número y color identificativo
- Sentido ida/vuelta con su propio conjunto de paradas
- Horarios de paso por cada parada actualizados en tiempo real
- Iconos y avisos si hay enlaces con otras líneas
3. Mapa interactivo personalizado
Creamos un mapa con Leaflet y OpenStreetMap, que:
- Representa la ruta completa de cada línea, según coordenadas reales
- Colorea el trazado en función de la línea
- Marca cada parada con tooltip y horario
- Permite alternar entre sentidos con un solo clic
4. Optimización de rendimiento
Debido al volumen de datos y peticiones, implementamos:
- Cacheo local inteligente para evitar llamadas redundantes
- Agrupación y reordenamiento de paradas en el frontend
- Renderizado progresivo para cargar solo lo necesario
Resultado
El resultado es una web totalmente funcional, clara y optimizada para móvil, donde cualquier persona puede:
- Ver en segundos qué líneas pasan por una parada
- Consultar horarios en tiempo real
- Seguir visualmente el recorrido de un autobús
- Conocer las conexiones disponibles sin esfuerzo
Impacto
El cliente ha ganado:
- Una plataforma moderna que mejora la experiencia del viajero
- Reducción de consultas al call center
- Una herramienta viva y actualizada sin mantenimiento manual
- Una base sólida para futuros desarrollos, como integración con apps móviles o paneles informativos