
Univalle en sus manos
UVmanos es el geoportal del Campus Meléndez de la Universidad del Valle para resolver los problemas de ubicación que tienen los estudiantes, personal y visitantes.
- Strapi
- PostgreSQL
- PostGIS
- Martin Tile Server
- JavaScript
- React
- React Router
- Zustand
- i18next
- Beer CSS
- MapLibre
Introducción
UVmanos (Universidad del Valle en sus manos) es un sistema de información geográfica enfocado en solucionar los problemas de ubicación de las personas al interior del Campus Meléndez de la Universidad del Valle, ubicada en la ciudad Santiago de Cali, Valle del Cauca, Colombia.
UVmanos nace en el año 2016 como proyecto de grado de los estudiantes Wilmer Muñoz Herrera y Rodrigo Leal Guacha, los cuales identificaron la problemática que tienen las personas, tanto estudiantes, visitantes y personal docente, de ubicarse al interior del Campus Meléndez, el cual posee una extensión de aproximadamente 1.000.000 m² (Leal y Muñoz, 2016).
En el mes de septiembre del año 2023, el director de laboratorio de GISMODEL, Mauricio Edilberto Rincón Romero, me ordena la actualización del sistema. El objetivo de la actualización es conseguir un sistema escalable y mantenible a largo plazo, con la posibilidad de vincular a más estudiantes interesados en aportar su conocimiento al proyecto.
Se plantea un sistema donde los datos sean independientes del cliente que los consuma, para esto se considera el uso de la arquitectura API-REST, seleccionando Strapi como tecnología para disminuir el tiempo de desarrollo. Adicionalmente, el mapa base de la Universidad del Valle debe estar en constante actualización, de manera que el formato más cómo es la generación de teselas vectoriales a partir de una conexión a la base de datos, empleando Martin de MapLibre como servidor. La figura a continuación muestra mejor los elementos que componen la arquitectura del sistema:
Aquitectura del sistema UVmanos
La información se parte en dos bases de datos, melendez
y uvmanos_strapi
. La primera almacena la cartografía básica del Campus, y la segunda almacena información complementaria para resolver el problema de ubicación de las personas. Como motor de bases de datos se empleó Postgresql + PostGIS, Strapi y Martin como backend. En el lado del cliente, se rehizo a aplicación web con tecnologías actuales como React, mientras que en el futuro se planea realizar una aplicación móvil.
Procesamiento de datos y bases de datos
Gracias a la Oficina de Planeación y Desarrollo Institucional de la Universidad del Valle (OPDI) se pudo obtener los datos de la última cartografía que se realizó al Campus. Debido a que esta información se encontraba en formato CAD, fue necesario un procesamiento de los datos para importar estos a la base de datos melendez
. Esta base de datos incluye las siguientes tablas:
Tabla | Descripción |
---|---|
area_campus | Corresponde al área, delimitada por el perímetro o lindero del Campus. |
barreras | Son elementos que obstaculizan la circulación de las personas. |
barreras_tipo | Indica los tipos de barreras existentes: Muro, Escalera, Reja, Puerta. |
cuerpos_agua | Masas de agua naturales como lagos. |
edificaciones | Construcciones que posean un techo. |
edificaciones_tipo | Indica los tipos de edificaciones como: Edificio, Estructura, Porteria, Caseta vigilante. |
entretenimiento | Zonas destinadas al entretenimiento de las personas al interior del campus. |
entretenimiento_tipo | Indica los tipos de área de entretenimiento como: Cancha futbol, Cancha tenis, Pista, Piscina, Cancha micro. |
parqueaderos | Zonas destinadas al almacenamiento de vehículos motorizados. |
senderos_informales | Caminos elaborados por el transito frecuente de personas y vehículos, inicialmente no destinados para tal fin. |
separador_vial | Barrera física que divide las vías destinadas al transito de vehículos. |
superficies | Área pavimentada destinada al tránsito de personas. |
superficies_tipo | Indica los tipos de superficies como: Ande, Rampa. |
vias | Área pavimentada destinada al tránsito de vehículos. |
zona_verde | Área donde prevalece el suelo desnudo, árboles, pasto y plantas. |
Para el caso de la base de datos uvmanos_strapi
, se pobló con la información previamente recopilada en la versión anterior del sistema, corrigiendo un pequeño error de desplazamiento. Se incorporá una nueva tabla para recibir los reportes enviados por los usuarios. Esta base de datos incluye las siguientes tablas:
Tabla | Descripción |
---|---|
floor_0_spaces | Contiene los lugares externos como monumentos, puntos de encuentro, comercio y esparcimiento. También almacena puntos de referencia como el nombre de los edificios. |
floor_1_spaces | Contiene los espacios internos del nivel 1 de todos los edificios del Campus. Por ejemplo, aulas de clase, oficinas, laboratorios, etc. |
floor_2_spaces | Contiene los espacios internos del nivel 2 de todos los edificios del Campus. |
floor_3_spaces | Contiene los espacios internos del nivel 3 de todos los edificios del Campus. |
floor_4_spaces | Contiene los espacios internos del nivel 4 de todos los edificios del Campus. |
floor_5_spaces | Contiene los espacios internos del nivel 5 de todos los edificios del Campus. |
floor_6_spaces | Contiene los espacios internos del nivel 6 de todos los edificios del Campus. |
floor_b1_spaces | Contiene los espacios internos del sótano 1 de todos los edificios del Campus. |
roads | Red de caminos del Campus. |
reports | Almacena los reportes sobre los lugares o de mal funcionamiento de la aplicación elaborados por los usuarios. |
map_styles | Almacena los estilos, en formato JSON, del mapa base. |
Desarrollo en el lado del servidor
Strapi y API
Se busca que los datos que ofrece el sistema de UVmanos sea independiente del cliente que se emplee para el consumo de esta información. Como se mencionó anteriormente, se optó por utilizar la arquitectura API-REST para compartir y gestionar los datos mediante peticiones HTTP y en formato JSON. Inicialmente, se comenzó a realizar un desarrollo desde 0 de la API, sin embargo, debido al tiempo que esto estaba tomando y a que la tecnología Strapi se veia más atractiva para acortar tiempos de desarrollos, se decidió migrar la lógica creada hasta el momento.
El proyecto de Strapi se encuentra relacionado con la base de datos uvmanos_strapi
, creando esquemas, rutas personalizadas y controladores personalizados para cumplir los siguientes requerimientos:
- Búsqueda de la ruta más corta entre dos puntos dados.
- Búsqueda de lugares, internos y externos.
- Encontrar un lugar en concreto, mediante un id.
- Encontrar múltiples lugares.
- Crear reportes por parte de los usuarios.
Hasta la fecha de la presente publicación, Strapi se ha adaptado perfectamente a los requerimientos del sistema, gracias por un lado, al plugin PostGIS el cual da el soporte necesario para el manejo de datos espaciales, y por otro lado, a la flexibilidad que otorga al permitir crear lógica de forma personalizada.
Martin Tile Server y teselas vectoriales
La versión anterior de UVmanos contaba con un mapa base de teselas en formato imagen que fue generada para el objetivo del proyecto en su momento. Debido a las ventajas que suponen las teselas vectoriales como el nivel de detalle infinito al emplear vectores, la facilidad para actualizar las teselas, y el soporte de algunas librerías como MapLibre que tienen para implementar los estilos de forma personalizada. Como parte del ecosistema de aplicaciones de MapLibre se encontró a Martin Tile Server, la cual es una tecnología que se ajusta a las caraterísticas del sistema.
Se realizó un archivo de configuración según la documentación, para establecer la conexión entre Martin y la base de datos melendez
, ofreciendo como teselas vectoriales las tablas anteriormente mencionadas, a excepción de los tipos. Adicionalmente y como lo permite el programa, se pueden servir sprites para emplearlos como íconos.
Desarrollo en el lado del cliente
Aplicación web
Para el desarrollo de la aplicación web se requería seleccionar una tecnología que fuera estandar en la industria y con una proyección prolongada en el tiempo, se encontró que el framework para javascript React, era la mejor opción debido a su gran comunidad, documentación y uso en la industria.
Inicialmente, la aplicación web debe realizar las mismas funciones de la versión anterior de la aplicación, estas son:
- Desplegar un mapa interactivo, que muestre cartografía base de la universidad y puntos de interés.
- Uso del GPS del dispositivo para ubicar al usuario sobre el mapa.
- Buscador de lugares.
- Calculo de rutas, para encontrar el camino más corto entre dos puntos.
Para cumplir el primer item, se optó por utilizar al librería MapLibre GL JS por sobre otras alternativas de código abierto como Leaflet y OpenLayers debido a su soporte nativo de teselas vectoriales, una especificación de los estilos sobre las capas con infinidad de posibilidades y el manejo que se le da a las capas mediante Fuentes (Sources). Para la construcción del mapa base o cartografía base del Campus se emplean tantos las teselas propias servidas mediante Martin, así como las teselas que ofrece el proyecto OpenFreeMap. El estilo de las capas se maneja en el lado del servidor, permitiendo hacer ajustes al mapa fácilmente de forma remota sin afectar el código fuente.
Por otro lado, para el segundo item se opta por crear la lógica personalizada, empleando el objeto navigator.geolocation
y agregando este componente como un control en el mapa.
Para el tercer item se desarrolla un el componente buscador, el cual es altamente reutilizable al permitir recibir una función para indicar el comportamiento que deben tener cada resultado de búsqueda. Asi mismo, el estado de este componente se maneja de forma global y dependiente de la instancia, no afectando el cambio de uno en los demás. De esta manera, se pueden tener multiples buscadores los cuales no se afectan entre ellos pero que sus resultados de búsqueda pueden tener diversos comportamientos.
El comportamiento del componente buscador y sus resultados de búsqueda es utilizado para el cuarto item, donde el punto de origen y destino se puede definir a partir de un resultado de búsqueda. Adicionalmente, se crea un componente que permite la selección de un punto aleatorio en el mapa presionando clic sobre este. Se hace la consulta pertinente al servidor para obtener la ruta más corta, y el resultado se renderiza en el mapa, indicando en la interfaz el tiempo de duración de recorrido y un botón para terminar el mismo.
Cumpliendo las funcionalidades básicas de la aplicación web de UVmanos, se decidió por incorporar funciones adicionales enfocadas en mejorar la experiencia del usuario e involucralo más. A continuación se enlistan las funcionalidades extra:
- Compartir lugares: Mediante el enlace en la parte superior del navegador, o mediante el botón dedicado en cada uno de los lugares, se permite compartir lugares entre usuarios. Tanto lugares definidos como lugares aleatorios en el mapa. Un ejemplo donde se puede emplear esta funcionalidad es cuando se envían eventos que desarrollaran en un lugar en específico.
- Sistema de reportes: El usuario tiene la posibilidad de reportar un lugar, indicando si hay un error en la información. También podrá reportar errores en la aplicación desde la sección de Ajustes.
- Soporte a múltiples idiomas: Se implementa i18next para la traducción de todos los textos de la aplicación, de esta manera, es mucho más sencillo incorporar más idiomas. Esta funcionalidad se encuentra justificada en cuanto que en la comunidad universitaria hay estudiantes o visitantes de otros países, los cuales pueden encontrar más cómodo el uso de la aplicación en su idioma nativo.
- Almacenamiento de lugares favoritos: Los usuarios podrán almacenar sus lugares favoritos, estos se almacenan en el
localStorage
del navegador. Así podrán obtener de forma más rápida sus sitios recurrentes. Además, podrán exportar sus lugares favoritos para conservarlos e importarlos posteriormente. - Filtros: En la parte superior del mapa se pueden encontrar algunos botones como “Baños”, “Comida” o “Encuentro”, los cuales permiten filtrar los objetos que aparecen en el mapa y de esta manera encontrar lugares de forma más fácil.
- Mapa satelital: El usuario puede acceder a teselas satelitales.
Mejoras
A pesar de que el sistema se encuentra en una fase muy avanzada de su desarrollo, no esta completamente terminado, a continuación se enlistan las mejoras que se deben implementar antes de lanzar la aplicación al público general:
- Actualización de la información de los lugares, pues se esta empleando la información del anterior del sistema.
- Actualización de la geometría de las rutas e incorporar mejores rutas, pues existe un desplazamiento de las geometrías con la realidad, asi como muchos caminos no se han tenido en cuenta.
- Implementar i18n en strapi para traducir la información de los lugares, pues en este momento solo se encuentra en Español.
- Mejorar los espacios que aparecen en el mapa para evitar la saturación.
- Incluir más filtros de lugares.
- Mejorar el rendimiento del búscador y permitir guardar el historial de búsquedas.
- Mejoraar el sistema de ruteo, para incorporar funciones de accesibilidad, sugeriendo rutas para personas con discapacidades físicas o bien, para vehículos.
- Crear las propias teselas, tanto vectoriales para poner en el fondo además de las del Campus, y las teselas ráster para mostrar una imágen aérea del campus.
- Lanzar la aplicación web con un dominio propio y SSL para aprovechar todas las funciones.