En este post te mostraré una aplicación de checador de transporte público (es web, pero puede ser convertida en app móvil nativa gracias a las PWA) para monitorear y registrar los horarios en los que pasa el transporte público.
Esta app es ideal para la persona que es el “checador” del transporte, mismo que registra los horarios en los que pasa cada unidad hacia cada destino o ruta junto con su número.
Más tarde, se puede saber hace cuánto tiempo pasó el transporte a determinado destino, además de calcular el tiempo promedio y llevar reportes por fecha.
Como varios de mis proyectos, esta PWA de checador de transporte público es open source y gratuita. A lo largo del post te enseñaré los aspectos técnicos, cómo descargar el código y cómo descargar la app.
Apartado técnico
Esta aplicación web está creada usando Vuetify, es decir, Vue con estilos de Material Design. Obviamente se usa el framework Vue con el lenguaje JavaScript.
La he diseñado usando tabs y pensando en que será usada en un dispositivo móvil de pantalla pequeña. A lo largo de toda la app se utilizan componentes para dividir la lógica.
Cuando la aplicación es compilada y preparada para producción se puede alojar en cualquier servidor ya sea local o de internet, y debido a que es una Progressive Web App se puede instalar como una app nativa.
Ya para la base de datos he usado el almacenamiento del lado del cliente con IndexedDB a través de la librería PouchDB.
Propósito de la app
Esta PWA sirve para saber hace cuánto tiempo pasó determinado transporte por si un conductor que se dirige al mismo destino quiere saber. Recuerda que la controla la persona denominada checador.
Por poner un ejemplo, si el conductor A se dirige a New Donk City, y luego el conductor B que se dirige al mismo lugar pregunta hace cuánto tiempo pasó el conductor A, a partir de la respuesta el B sabrá si debe ir más lento, tomar su distancia, esperar, etcétera (todo esto para balancear la frecuencia y brindar un mejor servicio a los pasajeros).
Gestión de destinos o rutas
Comenzamos viendo las rutas. En este apartado se registran todos los destinos de los transportes. Es decir, a cuáles lugares se dirige el transporte público que vamos a monitorear.
Cada ruta tiene la opción de ser eliminada, y podemos agregar una nueva con el botón de la esquina inferior derecha (un FAB).
El código del componente de las rutas es:
Como puedes ver, mostramos la lista de rutas solo si hay rutas. En caso contrario, mostramos una alerta indicando que no hay rutas y que se pueden agregar con el FAB.
También estamos consumiendo un servicio de Vue para confirmar la eliminación en la línea 82. El código del servicio es:
Como te puedes dar cuenta estoy usando a PouchDB y filtrando los elementos a través del id de manera lexicográfica, ya que en este caso no tenemos unas tablas SQL, sino que todo son documentos, así que para obtenerlos usamos prefijos para limitar lo que obtenemos.
También aquí tenemos todas las funciones que se pueden hacer por cada ruta. Ya dentro de los componentes simplemente invocamos a este código y vamos reutilizándolo. Finalmente veamos el código de la base de datos:
Simplemente creamos una instancia de PouchDB con el nombre de rutas, agregamos índices y la exportamos. Me he tomado a la tarea de explicarte todo esto porque en los siguientes módulos se sigue el mismo patrón.
Horarios del checador de transporte público
Este es el módulo principal y en donde se pasa más tiempo.
Pasemos al apartado de los horarios. Aquí se registra cuando acaba de pasar determinada unidad hacia cierto destino (el destino aparece en una alerta dentro del diálogo).
Se debe guardar el tipo y número de unidad, así como la hora en la que pasó.
Una vez que se ha guardado, se muestra el tiempo transcurrido del último horario tomado. De este modo se puede responder rápidamente hace cuánto tiempo pasó el transporte anterior.
Como puedes ver en la imagen, en este caso hay dos tipos de transporte, estas son etiquetas específicas del transporte que se vaya a monitorear.
Por cierto, el tiempo transcurrido se muestra en tiempo real (gracias a setInterval y la reactividad de Vue) pero he integrado el FAB de pausa en caso de ser necesario.
Reporte de checador de transporte público
Gracias a que estamos registrando a qué hora pasa cada unidad podemos sacar promedios y brindar reportes por día. Por ejemplo podemos saber cada cuánto pasa determinado transporte en promedio, ver las horas a las que pasan, las unidades, etcétera.
Por ello es que he creado el módulo de reportes. De este modo se selecciona la fecha (por defecto está la actual):
Y también tenemos la lista de rutas o destinos que sirven para filtrar los reportes. Como puedes ver, los horarios aparecen en orden descendente, mostrando el horario más reciente primero.
Se me hace necesario mostrar el código que calcula los promedios y se encarga del componente en general:
Poniendo todo junto
Como siempre lo digo, no puedo poner el código completo aquí, pues me llevaría bastante tiempo explicar cada cosa. Recuerda que esta webapp está creada con la Vue CLI y que necesita NPM para ejecutar el servidor de desarrollo.
Te dejo el código fuente aquí, y la demostración aquí.
Convirtiendo en PWA para instalar app nativa
Como lo dije, al compilar esta webapp vamos a tener solo archivos CSS, JS y HTML. Además, el repositorio ya incluye el manifiesto, por lo que crear una PWA a partir de ello es muy fácil. Aquí las instrucciones:
Ejecutar npm run build para compilar la app.
Luego instalar sw-precache con npm install --global sw-precache. Para generar el archivo service-worker.js entramos a dist con cd dist y ejecutamos: sw-precache.
Ahora todo lo que necesitamos es publicar toda la carpeta de dist, puedes subirla a un servidor local para probar, en ese caso abrimos la consola de depuración, pestaña Application > Manifest y todo debe estar bien.
Si quieres hostearla en este mismo repositorio de GitHub, renombra dist a docs y configura en GitHub dentro de Environments. Selecciona publicarla, dentro de Branch elige master y en ruta /docs.
Instalando app nativa
Ahora subimos la PWA ya lista a un sitio https, puede ser GitHub pages, visitamos la página con dispositivo móvil, de preferencia con Chrome. Seleccionamos Menú > Instalar aplicación. Y así quedará como app nativa.
Nota: solo la he probado en Android, pero debería funcionar en iOS. Si eres de iOS y no te funciona, hay que seguir los siguientes pasos:
- Conseguir un dispositivo Android
- Volver a leer esta sección
Conclusión
Solo resta decir que te invito a ver todos mis proyectos en este enlace, tal vez uno te interese. Aquí puedes leer más sobre Vue o JavaScript.
