Geolocalización para Evitar Rutas Peligrosas

Miguel Lugo, Edilianny Montaño, Angelymar Poyo

[email protected], enmontañ[email protected], [email protected]

Escuela de Ing. Informática, Universidad Católica Andrés Bello, Cuidad Guayana, Venezuela

Resumen: La aplicación Georup está diseñada para dispositivos Android y iOS, cuyo fin es poder facilitar a los usuarios de
la información necesaria para poder toparse con peligros en las carreteras. Teniendo en cuenta que los peligros en rutas como:
los coques automovilísticos, los robos de autos, las rupturas de carreteras, entre otros son impredecibles, esta aplicación
plantea trabajar en tiempo real y a través de GPS para poder ubicar todos los accidentes que ocurran en áreas específicas.
Mediante la ayuda de los mismos usuarios se podrán mantener a toda la comunidad de Georup informada de cualquier
percance, y también, se podrán informar entre ellos gracias a comentarios y grupos para poder facilitar en trabajo de transmitir
la información.
Palabras claves: App, DCU, diseño, español.

1. INTRODUCCIÓN interacción del usuario con la base de datos para luego

representar la información en un formato de codificación de
Una de las grandes problemáticas que posee Venezuela hoy en texto e imágenes.
día es la inseguridad, esto solo no pasa en nuestro país, sino en 3) Capa 2 Procesos de negocios: aquí se logra una abstracción
todo el mundo. Pero, acá se puede notar mucho más. La
inseguridad vial, abarcando temas desde el robo de autos hasta real sobre los datos y es el manejo de la negociación con la
los accidentes de tránsito, se ha convertido en un dolor de información, esto es lo más cambiante en un software.
cabeza para los venezolanos, causado por lo deteriorada y solas 4) Capa 3 Control de la interfaz de usuario: es la responsable
que están algunas carreteras del país. del manejo de la interacción con el usuario y es donde
Los medios de comunicación y las redes sociales intentan basaremos el fuerte de nuestro proyecto. Utilizaremos
alertar a los ciudadanos mediante noticias o mensajes, pero es herramientas como Google web tols kit y adobe XD para la
muy difícil a casi imposible poder abarcar con exactitud una implementación de esta capa, con el fin de brindarle una interfaz
región exacta y muchos menos en todo el mundo, y aún más amigable y ágil al usuario.
difícil que la persona correcta, es decir, quien desee transcurrir 5) Capa 4 Vista: es la representación de la interfaz de usuario
por esas vías vea estas advertencias. ya materializada con la que el usuario interactúa
Se necesita un medio exacto en el que cualquier persona pueda
alertar, informar y acceder a la información donde ocurren 2.2 Objetivo general.
estos incidentes. ¿Qué se propone para dar solución a esta Diseñar una aplicación móvil que a nivel global detalle los
problemática que sea apta para todo público? riesgos de específicas rutas viales, centrándonos en nuestro país
utilizando las herramientas de desarrollo como Adobe XD
2. MODELO DEL PROGRAMADOR permitiendo su representación de la funcionalidad en sistemas
Se necesita saber cuáles son los requisitos y las herramientas Android y iOS
que se necesitan implementar para poder llegar al diseño de las
pagina. Esta información se obtiene mediante el modelo de 2.3 Objetivos específicos.
programador.  Crear un sistema de busca para rutas específicas.
2.1 Solución basada en el Modelo del Programador  Crear un panel detallado de todos los peligros en zonas
específicas.
Crear una interfaz capaz de agrupar todas funciones necesarias
para que el usuario pueda interactuar de la forma más eficiente  Desarrollar un sistema que permita a los usuarios crear
con la plataforma, para lograr esto desde el modelo del notificaciones y alarmas, con el fin de alertar a usuarios
programador nos apoyaremos como metodología la arquitectura que estén cerca de una zona de peligro, para que tomen
de 5 capas para aplicaciones web. sus prevenciones y se desvíen.
1) Capa 0 Base de datos: ya se tendrá asociado una bdd  Permitir a los usuarios registrar rutas de uso común, y
notificarles de los riesgos diariamente.
enlazada de donde se podrá extraer la ruta y el mapa a seguir
para llegar a su destino.  Permitir la mensajería instantánea con demás usuarios
2) Capa 1 Lógica de manejo de datos: es la unión entre la  Cargar archivos, fotos, videos, enlaces, que puedan guiar
a otras personas.
2.4 Paradigma de interacción a usar. El punto central del diseño vendría siendo el mapa, en donde se
Ya que se desea desarrollar una aplicación móvil que funcione verán todas las rutas y los accidentes ocurridos en ellas, también
tanto para dispositivos Android como iOS es paradigma de una sección de comentarios para cada accidente, una barra de
interacción es computación ubica. Tipos de interacción a búsqueda para ubicar algún área, y un menú donde podrá
implementar: acceder a las otras funciones de la aplicación.

a) Menús y Navegación: Se tiene planeado crear un menú o 3. MODELO DEL USUARIO

un panel donde se pueda acceder a características En la actualidad existen muchas aplicaciones móviles que
específicas de la aplicación, como las configuraciones, los no cumplen con las características del usuario,
tipos de búsqueda; ya sea por rutas, por tipo de peligro o produciendo pesadez al momento de utilizarlas y con el
por global de zonas de más alto riesgo. También estará la tiempo, llegan a desinstalarlas. Dicho evento se produce
opción para que los usuarios incluyan un peligro en un área. porque los desarrolladores no se toman el tiempo de
b) Manipulación directa e interacción asistida: Tendrá analizar la comunidad a la que va dirigida el producto que
formularios para registrar un usuario, para que un usuario están ofreciendo, por lo cual es fundamental el modelo del
cree una zona de riesgo, y para una búsqueda avanzada de usuario para conocer sus necesidades y características, con
una zona de riesgo. el fin de ofrecer un trabajo de calidad y cumplir con el
c) Interacción asistida: los usuarios al abrir la app por primera objetivo que desea la comunidad, en nuestro caso como lo
vez, visualizaran una serie de instrucciones que deberá es la creación de la app para geolocalización, estudiamos a
seguir para completar el tutorial y poder conocer el entorno 3 tipos de usuario, los que se transportan en vehículo
y funcionamiento de la interfaz. propio, en transporte público o caminan.
2.5 Alcance e importancia 3.1 Tecnica de Recoleccion de Datos para Determinar los
Nuestro proyecto tendrá como limitante y alcance solo la Perfiles de Usuario
representación gráfica y funcionamiento lógico básico de una Para analizar la comunidad a la que va dirigida la
interfaz de usuario, que a través de una aplicación móvil le aplicación nos basamos en métodos de evaluación para
permitirá al usuario navegar por una serie de opciones de una poder determinar las características del usuario a través de
forma amigable, este podrá, según el destino especificado estadísticas.
seleccionar la ruta más óptima dependiendo de la situación
Aplicamos el desarrollo de encuestas y entrevistas, no
actual y si existe una zona de riesgo. Las aplicaciones en la
dejamos que la situación pandemia fuera una limitante
actualidad resultan de gran importancia porque le brindan al
para nosotros, por lo tanto buscamos plataformas que nos
usuario comodidad, facilidad y agilidad al momento de
ayudaran al desenvolvimiento de encuestas y estudio de la
ejecutarlas, también resultan eficiente porque son directas y
comunidad. Utilizamos SurveyMonkey tanto para crearla
concisas a lo que el usuario quiera hacer, por lo tanto,
como para hacerlas llegar a las personas. Para las
representaremos nuestro proyecto en una app en los 2 entornos
entrevistas, se realizó a las personas más cercanas a
que dominan el mercado como lo son Android y IOS.
nosotros, sin olvidarnos los 3 tipos de usuarios.
2.6 Referencias de apoyo
En la encuesta y entrevista, se encuentra una serie de
Tenemos a google maps que es la aplicación de búsqueda del preguntas que nos proveerá la información necesaria de la
mapa por defecto, en IOS se tiene la app de mapas basada en comunidad, para determinar sus necesidades y gustos más
esta. Estudiaremos las interfaces de apps como “Mi ruta” y acordes al objetivo que tendrían al utilizar una app como
“Moovit” por poseer gran cantidad de descargas y tener buenas Georup.
calificaciones por los usuarios.
Cuestionario enviado (traducido al español)
2.7 Maqueta Wireframe
¡Hola! ¿Podrias ayudarnos a llenar esta encuesta? nos
Se planteo este como uno de los diseños preliminares de la que ayudaría mucho para analizar la comunidad y crear una
vendría siendo la ventana principal de la aplicación. aplicación al agrado de ustedes, gracias.

Por favor, dedique unos minutos a completar esta encuesta.

La información que nos proporcione servirá para evitar
futuros accidentes.

 ¿ Qué medio de transporte utiliza más seguido?

+Carro +Bus +Bicicleta + Perrera +otro

 ¿Considera que la seguridad vial es un tema de importancia?

+Si +No

Figura 1: Pantalla principal

  ¿Qué piensa usted sobre la seguridad vial?  El medio de transporte, el 44% van en carro, el 39% en
+ Campo de texto para responder bus, el 11% en bicicleta y el otro 6% en perrera.
 El 89% considera que la seguridad vial es importante.
 ¿Utiliza alguna app como google más para llegar a su destino?  Más del 70% de la comunidad presenta descontento
+Si +No porque consideran que la seguridad vial no es
importante para otras personas y por ende ocurren
 ¿Utiliza las redes sociales para enterarse sobre el estado de las muchos accidentes.
carreteras por las cuales circulara?  El 62% si utiliza una app como google más, el 38% no.
+Si +No  El 34% si utiliza las redes sociales para enterarse del
estado de las vías, el otro 66% utiliza otros medios.
 ¿Respeta las señales de tránsito y utiliza cinturón de  EL 74% no respeta las señales de tránsito, el 26%
seguridad? restante sí.
+Si +No
 Al 70% de la comunidad le parece interesante el hecho
que exista dicha app, al 30% restante no.
 ¿Qué opina sobre una app que avise en tiempo real sobre el  Según la frecuencia de los accidentes, el 62% respondió
estado de las vías por las cuales circula diariamente?
siempre, 20% normal, 10% pocas ocasiones y solo el
+ Campo de texto para responder 8% respondió nunca.
 El 59% voto por el color gris, mientras el 24% por el
 ¿Con que frecuencia ocurren accidentes automovilísticos, azul y el 17% restante escogió el verde.
naturales o cualquier otro evento que impida el paso libre por
la carretera? 3.2 Perfiles de Usuarios
+Nunca +Pocas ocasiones +Normal +Siempre Existe un solo tipo de usuario, sin ninguna diferencia en
funcionalidades de la app. Lo que varía en cada usuario es el
 ¿Valore el 1 al 10 los siguientes aspectos relacionados con el medio de transporte para llegar a su destino, sin embargo al
transito automovilísticos, siendo 1 malo o lento y 10 excelente momento de usar la aplicación todos somos iguales.
o rápido?
 Usuario :
-Condiciones de las carreteras:
o Estudios: usuario que sepa utilizar un teléfono
- Manejo del teléfono:
inteligente, tenga experiencia previa con el manejo de
- Seguridad: aplicaciones móviles.
-Frecuencia de accidentes naturales: o Ubicación: solo nos enfocamos en la comunidad
-Velocidad en la que manejas: estudiada, Puerto Ordaz, estado Bolívar, Venezuela.
- Uso de apps para manejo de información:
3.3 Caracteristicas de UI Basadas en la Ergonomia y
- Reconoce las señales de tránsito:
Necesidades de los Usuarios
 ¿En su opinión, que recomienda para evitar accidentes y
ayudar a los demás?  Como color principal para la interfaz se utilizó el gris,
porque así lo quiso la comunidad.
+ Campo de texto para responder
 El objetivo general es evitar que sigan ocurriendo
accidentes, se incluyó una funcionalidad notificaciones
 ¿Qué color le resulta agradable a la vista cuando se habla de
sobre estados de las vías.
mapas?
+ Verde +Azul + Rojo +Amarillo +Gris  Existe una parte de mensajería donde el usuario podrá
comunicarse con otros para informar sobre un accidente
 ¿Cómo determina su experiencia al usar una app que le facilite
en tiempo real.
las rutas para llegar a un destino (calificación por estrellas,
rango de 1 a 5 estrellas.)?  Para permitir una retroalimentación se utilizaron iconos
 ¿Qué esperas de una app al buscar la mejor ruta posible a un reconocidos a nivel mundial.
destino? 3.4 Requisitos Funcionales y no Funcionales del Sistema,
+ Campo de texto para responder Escenarios de uso y Diseño de Interacción

Esta encuesta fue aplicada a un total de 19 personas, de los

resultados obtenidos se saco un promedio para dar
respuesta a cada pregunta, Donde se llego a la siguiente
conclusión:
Inicio de sesión o Registro.
 Cuando el usuario haya descargado la app en Android o  Adobe XD: como principal software para hacer la app
IOS, podrá iniciar sesión o registrarse. no funcional, crear las interacciones y observar el
 Para registro solo pide ingresar el nombre, correo desenvolvimiento del Usuario al utilizar la app.
contraseña y su verificación.  CorelDraw: software para la edición de imagines e
 Para iniciar sesión solo se debe introducir el correo y la iconos
clave.  Photoshop: programa de gran utilidad para crear la
mayoría de los iconos utilizados en adobe xd.
Gestionar Menú  Sistema Android y IOS: para ver la personalización de
El usuario podrá acceder a un menú donde estarán todas la app
las funcionalidades de la app.
 Se verán reflejadas opciones como los grupos a los que 3.6 Tecnicas y Metodos
esta agregado, los destinos marcados como favoritos, Para crear dicha app no funcional nos basamos en el
las categorías, la configuración y ayuda, por ultimo software de adobe xd. Donde se pudo crear todos los
cerrar sesión. escenarios del Usuario. Comenzamos analizando la primera
Gestionar Grupos interacción que puede tener al entrar en la app, como lo es
Esta funcionalidad se encuentra implica en el menú de el iniciar sesión y registrarse.
navegación, al acceder a la parte de grupos se podrá crear y
acceder a uno de estos. Nos centramos en el análisis de cada escenario, de cada
 Donde se permite la personalización al grupo con ventana y que es lo que al Usuario le gustaría visualizar, que
imagines. problemas podría tener al interactuar con la app. Tomamos
 Es la puerta de acceso para ver los chats en Cuenta todos estos detalles para poder plasmar y crear
con adobe XD la sincronización de estas ventanas.
 Se puede comunicar de forma inmediata con otro
usuario de la app para informarle sobre un accidente.
A medida que analizábamos cada ventana se realizaba con
Destinos
Photoshop los iconos que utilizaríamos, para poder acceder.
En esta parte el Usuario podrá marcar como favorito el destino
que desee, en otras palabras seria como un acceso directo al
mapa. Esto con el fin de permitir la velocidad y que el Usuario 3.7 Prototipo No funcional
tenga el control de la interfaz. Para conocer el funcionamiento de dicha app se creó un
Categorías prototipo no funcional y es en donde nos basamos en la material
Se podrá accede a las diferentes clasificaciones de los mapas y de IHC. Junto a este blog se encuentra anclado un video donde
visualizar como están las vías. podrán ver la interacción que el Usuario tendrá al utilizar la app.
Configuración
Se puede cambiar y personalizar datos del Usuario, como el
nombre, foto e iconos.
Ayuda
Se explica y da respuestas a preguntas más frecuentes, aparte de
tener comunicación con el soporte técnico.
Cerrar sesión
El Usuario podrá salir de una forma rápida al momento que lo
desee.

3.5 Herramientas utilizadas

 4. MODELO DEL DISEÑADOR Medios
Por ultimo nos encontramos con el modelo del diseñador, donde Solo tiene medios gráficos, sin sonidos involucrados por el
se plasma de forma gráfica la agrupación de la investigación del poco tiempo de desarrollo. Sin embargo es fundamental que
modelo del programador y el modelo del Usuario, con el fin de la app tenga sonidos para las notificaciones o alertas sobre
ofrecer una app más agradable a la comunidad. las rutas.
Evaluación del diseño Relaciones y metáforas
Se analiza los datos ya obtenidos y se busca más información,  Grupo de personas: para indicar los grupos de los chats
para realizar una interfaz coherente y agradable al Usuario. Se donde el Usuario podrá recibir y enviar mensajes
evalúa cada escenario  Bandera: para indicar los favoritos o destinos
Compresión y especificación del contexto de uso seleccionados.
 Recuadros: muestra a los usuarios lo que son las
Nuestra app está diseñada para Sistema Android y Sistema IOS,
por lo tanto necesitaran un teléfono inteligente que permita diferentes categorías.
descargar la app e interactuar con ella.  Rueda o tuerca: para indicar la configuración de la app.
Como el fin de la app es conocer el estado de la vía por la cual  Signo de interrogación: para indicar ayuda o dudas del
se circulara, el Usuario requiere que sea lo más precise posible, Usuario.
sin tanto problema a la hora de utilizarla.  Tres líneas: para indicar que es el menú.
Especificación de los requerimientos del Usuario  Flecha apuntando a la izquierda: para demostrar que es
El Usuario debe tener un Smartphone y conexión a internet para una función para retroceder
poder tener 100% acceso a cada una de las funciones de la app,  Clip: símbolo para adjuntar archivos o imágenes.
sin esto sería un limitante y no se garantiza la calidad de dicha  Señales de tránsitos: acorde al tipo de accidente
aplicación. ocurrido se muestra en el mapa una imagen para
Producción de soluciones de diseño describir el accidente sin acceder a ella.
Para dar solución al diseño según las características del Usuario  Lupa: para indicar la búsqueda del Usuario.
se realizó un boceto para tomar como guía la estructura a 4.4 Diseño visual y objetivo de la UI
realizar y a medida que se fueron construyendo los escenarios La interfaz de la aplicación en todo momento mantiene
surgieron otros, todo esto según las funcionalidades que la
coherencia. Según el estudio realizado a la comunidad, les
comunidad necesitaba.
parece agradable a la vista el color gris, por ende lo tomamos
4.2 Mapeo del modelo del programador con el modelo del como color principal en nuestro diseño.
Usuario El objetivo de la UI es que no tenga problemas al momento
Para la elaboración del proyecto se dividió en 3 fases, en la de acceder a cualquier función, permitiendo así la usabilidad
primera se utiliza el modelo de programador ya explicado, en todo aspecto.
donde se dio pie a la construcción de la base del proyecto, al 4.5 Plan de Validaciones con el Usuario
realizar la maqueta wireframe y aplicar metodologías de
estudio. Esto lo enlazamos con las características del Usuario y Se probó la app con los mismos usuarios que realizaron las
sus necesidades, según la interacción, para así construir un encuestas para conocer que tal les parecía el resultado, sin
diseño estable y acorde a todos los datos recogidos. embargo hubo desacuerdo en algunas personas de la
comunidad, esto llevo a adaptar nuevas funciones y colores
4.3 Interacción, Medios y diálogos a la app para poder abarcar cualquier tipo de Usuario.
Interacción Para ello se aplicó una interacción constructiva y un
recorrido cognitivo, así determinamos los problemas de
Utilizamos manipulación directa, línea de órdenes y menú de
navegación. cada Usuario y su conformidad. A parte de la entrevista que
se les aplico al terminar cada sesión.
 Manipulación directa: interacción directa con la app
gracias al avance tecnología por la arquitectura del 5. CONCLUSION
teléfono, donde se tiene una pantalla táctil para acceder La aplicación móvil GEORUP realizada tanto para el Sistema
a cada función. IOS como para el Sistema Android es el resultado del análisis
 Línea de orden: en el chat lo podemos evidenciar, donde dividido en 3 modelos, muchas metodologías aplicadas y
puedes escribir y utilizar comando o línea de órdenes métodos de evaluación, para poder solventar el problema
planteado y llegar a la comunidad de forma eficiente y
conocidos popularmente como “copiar y pegar”.
garantizar el éxito.
 Menú de navegación: ventana o modal donde se puede
observar todas las puertas de enlaces para irte a otro
escenario. En el podemos encontrar todas las funciones
disponibles en nuestra aplicación.