Post on 01-Nov-2018
i
Universidad del Azuay
Facultad de Ciencias de la Administración Escuela de Ingeniería de Sistemas y Telemática
Proyecto de Titulación
Tema:
Geolocalización de Servicios Automotrices por Medio de Aplicación Móvil (Android)
y Sitios Web.
Autores:
Juan Pablo León Vallejo
Dora Belén Tenesaca Martínez
Director:
Ing. Paul Ochoa Arias
Codirector:
Ing. Diego Pacheco
Marzo de 2016
ii
Dedicatoria
Este trabajo lo dedico a mis tíos y amigos quienes estuvieron siempre apoyándome y
dándome fortaleza a lo largo de este complejo camino para seguir adelante en momentos
de alegría y dificultades.
Juan Pablo León Vallejo
Dedico este trabajo a mis padres, mis pilares fundamentales en la vida, por su ejemplo y
apoyo en mi educación. A mis hermanos aunque seamos diferentes, al final siempre
estaremos unidos para apoyarnos. A mi abuelita ejemplo de mujer luchadora y por el amor
que nos brinda.
Finalmente y de manera especial, dedico este trabajo a mi sobrina, la alegría de nuestras
vidas.
Dora Belén Tenesaca Martínez
iii
Agradecimiento
Agradecemos a Dios por sus bendiciones, haciendo posible alcanzar nuestra meta, a
nuestras familias que sin escatimar esfuerzo alguno siempre estuvieron a nuestro lado, a
nuestros amigos quienes asiduamente fueron un gran apoyo tanto en lo académico como
en lo personal. A nuestro director de Tesis Ing. Paul Ochoa, quien nos respaldó con su
experiencia compartiendo sus conocimientos y brindándonos toda su paciencia para hacer
posible este proyecto, le expresamos imperecedera gratitud. Nuestro reconocimiento a la
Universidad del Azuay a sus directivos y docentes por brindarnos sus conocimientos para
que podamos convertirnos en los nuevos profesionales de la sociedad.
iv
Índice de Contenidos
Introducción…………………………………………………………………………………………………………………………1
1 Fundamentos Teóricos.................................................................................................... 3
1.1 Plataforma Web .......................................................................................................... 3
1.2 Herramientas de Desarrollo ........................................................................................ 3
1.2.1 Framework Web ...................................................................................................... 3
1.2.2 Modelo Vista Controlador ....................................................................................... 3
1.2.3 Yii2 ........................................................................................................................... 4
1.2.4 HTML5 ...................................................................................................................... 5
1.3 Base de Datos .............................................................................................................. 5
1.3.1 Bases de Datos No SQL ............................................................................................ 6
1.3.2 Mongo DB ................................................................................................................ 6
1.4 Aplicación Móvil .......................................................................................................... 6
1.4.1 Dispositivos Móviles ................................................................................................ 6
1.4.2 Sistema Operativo Android ..................................................................................... 7
1.4.3 Herramientas de desarrollo ..................................................................................... 7
1.5 Servicios de Geolocalización ....................................................................................... 8
1.5.1 Google Maps ............................................................................................................ 9
2 Análisis y Diseño............................................................................................................ 10
2.1 Formulación de la Solución ....................................................................................... 10
2.2 Especificación de Requisitos ..................................................................................... 10
2.2.1 Requisitos Funcionales. ......................................................................................... 10
2.2.2 Requisitos No Funcionales. .................................................................................... 12
2.3 Funcionalidad ............................................................................................................ 12
2.3.1 Plataforma Web ..................................................................................................... 12
v
2.3.2 Aplicación Móvil .................................................................................................... 14
2.4 Diagramas .................................................................................................................. 16
2.4.1 Diagrama de actores .............................................................................................. 16
2.4.2 Diagrama de Casos de Uso .................................................................................... 17
2.4.3 Diagrama de Secuencias ........................................................................................ 18
2.5 Diseño de Base de Datos ........................................................................................... 23
2.6 Requerimientos Diseño de Interfaz .......................................................................... 23
2.6.1 Diseño de Interfaz – Plataforma Web ................................................................... 23
2.6.2 Diseño de Interfaz - Aplicación Móvil .................................................................... 30
2.7 Diseño Estético .......................................................................................................... 37
2.7.1 Colores Principales ................................................................................................ 37
2.7.2 Logo ....................................................................................................................... 37
2.7.3 Diseño Estético – Plataforma Web ........................................................................ 38
2.7.4 Diseño Estético – Aplicación Móvil ........................................................................ 43
3 Desarrollo e Implementación ....................................................................................... 48
3.1 Desarrollo Plataforma Web ....................................................................................... 48
3.1.1 Creación de proyecto en Yii2. ................................................................................ 49
3.1.2 Estructura del proyecto. ........................................................................................ 50
3.1.3 MongoDB ............................................................................................................... 51
3.1.4 Configurar Gii1 ....................................................................................................... 52
3.1.5 Creación de modelos. ............................................................................................ 53
3.1.6 Creación de CRUD .................................................................................................. 54
3.2 Desarrollo Aplicación Móvil ...................................................................................... 56
3.2.1 Arquitectura de Aplicación Móvil .......................................................................... 56
3.2.2 Estructura de Aplicación Móvil .............................................................................. 57
3.2.3 Desarrollo de Interfaz - Aplicación Móvil .............................................................. 59
vi
4 Pruebas ......................................................................................................................... 68
4.1 Pruebas de Funcionalidad ......................................................................................... 68
4.1.1 Usuarios ................................................................................................................. 68
4.1.2 Servicios ................................................................................................................. 69
4.1.3 Categorías .............................................................................................................. 69
4.1.4 GPS y Google Maps ................................................................................................ 70
4.1.5 Consultar Matrícula ............................................................................................... 70
4.1.6 Conexión a Internet ............................................................................................... 71
5 Corrección de Errores ................................................................................................... 71
6 Conclusiones ................................................................................................................. 73
Glosario .................................................................................................................................... 75
Bibliografía ............................................................................................................................... 77
Anexos
Anexo 1: Manual de Usuario - Página Web
Anexo 2: Manuales de Usuario - Aplicación Móvil
Anexo 3: Código Fuente
vii
Índice de Ilustraciones
Ilustración 1: Modelo Vista Controlador (Bascon Pantoja) ....................................................... 4
Ilustración 2: Diagrama de Autores ......................................................................................... 16
Ilustración 3: Diagrama de Casos de Uso ................................................................................. 17
Ilustración 4: Diagrama de Secuencia – Registro de Usuario .................................................. 18
Ilustración 5: Diagrama de Secuencia – Iniciar sesión ............................................................. 19
Ilustración 6: Diagrama de Secuencia – Buscar Servicios ........................................................ 20
Ilustración 7: Diagrama de Secuencia – Administrar Cuenta .................................................. 21
Ilustración 8: Diagrama de Secuencia – Ingresar Servicios ...................................................... 22
Ilustración 9: Diagrama de Clases ............................................................................................ 23
Ilustración 10: Prototipo página inicial plataforma web. ........................................................ 26
Ilustración 11: Prototipo filtros servicios plataforma web. .................................................... 26
Ilustración 12: Iconos categorías. ............................................................................................ 27
Ilustración 13: Prototipo rutas-detalle servicio plataforma web. .......................................... 27
Ilustración 14: Prototipo inicio de sesión plataforma web. .................................................... 28
Ilustración 15: Prototipo menú de usuarios plataforma web. ............................................... 28
Ilustración 16: Prototipo edición cuenta de usuario plataforma web. ................................... 28
Ilustración 17: Prototipo listado servicios favoritos plataforma web. ................................... 29
Ilustración 18: Prototipo lista de servicios plataforma web. .................................................. 29
Ilustración 19: Prototipo ingreso de servicio plataforma web. ............................................... 29
Ilustración 20: Diseño de Interfaz Android Prototipo Esqueleto – Pantalla Inicio .................. 30
Ilustración 21: Diseño de Interfaz Android Prototipo Esqueleto – Pantalla Validación .......... 30
Ilustración 22: Diseño de Interfaz Android Prototipo Esqueleto - Pantalla Principal .............. 31
Ilustración 23: Diseño de Interfaz Android Prototipo Esqueleto - Pantalla Menú Izquierdo .. 31
Ilustración 24: Diseño de Interfaz Android Prototipo Esqueleto – Pantalla Menú Derecho ... 32
Ilustración 25: Diseño de Interfaz Android Prototipo Esqueleto - Pantalla Usuario ............... 32
Ilustración 26: Diseño de Interfaz Android Prototipo Esqueleto – Ventana Iniciar Sesión ..... 32
Ilustración 27: Diseño de Interfaz Android Prototipo Esqueleto -Ventana Registro Usuario . 33
Ilustración 28: Diseño de Interfaz Android Prototipo Esqueleto - Pantalla Servicios ............. 33
Ilustración 29: Diseño de Interfaz Android Prototipo Esqueleto – Mensaje Servicio ............. 34
viii
Ilustración 30: Diseño de Interfaz Android Prototipo Esqueleto - Pantalla Punto de Interés . 34
Ilustración 31: Diseño de Interfaz Android Prototipo Esqueleto – Pestaña Información ....... 34
Ilustración 32: Diseño de Interfaz Android Prototipo Esqueleto – Pestaña Costos ................ 35
Ilustración 33: Diseño de Interfaz Android Prototipo Esqueleto – Pestaña Ir Allí ................... 35
Ilustración 34: Diseño de Interfaz Android Prototipo Esqueleto - Pantalla Categorías .......... 35
Ilustración 35: Diseño de Interfaz Android - Pantalla Consultar Matricula ............................. 36
Ilustración 36: Diseño de Interfaz Android Prototipo Esqueleto - Pantalla Navegación ......... 36
Ilustración 37: Diseño de Interfaz Android Prototipo Esqueleto - Pantalla Ayuda ................. 36
Ilustración 38: Diseño Estético Android Logo Geo Servicar..................................................... 38
Ilustración 39: Iconos categorías Diseño Estético ................................................................... 39
Ilustración 40: Icono puntos en mapa. .................................................................................... 39
Ilustración 41: Iconos menú usuarios registrados. .................................................................. 39
Ilustración 42: Iconos administración información. ................................................................ 40
Ilustración 43: Diseño menú página inicial plataforma web. .................................................. 41
Ilustración 44: Diseño menu super administrador. ................................................................. 41
Ilustración 45: Diseño menú administrador ............................................................................ 41
Ilustración 46: Diseño botones plataforma web ..................................................................... 42
Ilustración 47: Diseño Estético en Android Tamaño de Iconos ............................................... 43
Ilustración 48: Diseño Estético en Android Tamaño de Imágenes .......................................... 43
Ilustración 49: Diseño Estético Android Texto ......................................................................... 44
Ilustración 50: Diseño Estético Android ProgressBar Circular ................................................. 45
Ilustración 51: Diseño Estético Android ProgressDialog.......................................................... 45
Ilustración 52: Diseño Estético Android Toolbar ..................................................................... 46
Ilustración 53: Diseño Estético Android Menú Lateral Izquierda Drawer Layout ................... 46
Ilustración 54: Diseño Estético Android Botones .................................................................... 47
Ilustración 55: Diseño Estético Android Validación Datos....................................................... 48
Ilustración 56: Descarga creación proyecto Yii2. ..................................................................... 49
Ilustración 57: Arquitectura Web ............................................................................................ 50
Ilustración 58: Estructura del Proyecto Web ........................................................................... 50
Ilustración 59: Colecciones base de datos. .............................................................................. 51
Ilustración 60: Configuración Gii. ............................................................................................. 53
Ilustración 61: Formulario creación de modelo. ...................................................................... 53
ix
Ilustración 62: Formulario generación de CRUD. .................................................................... 55
Ilustración 63: Vista de lista de Categorías. ............................................................................. 55
Ilustración 64: Arquitectita de la Aplicación Móvil Android .................................................... 56
Ilustración 65: Estructura Aplicación Móvil Android ............................................................... 57
Ilustración 66: Desarrollo Interfaz Android Geo Servicar Reutilización .................................. 60
Ilustración 67: Desarrollo Interfaz Android Menú Deslizante ................................................. 60
Ilustración 68: Desarrollo Interfaz Android Transición Hacia Arriba ....................................... 61
Ilustración 69: Desarrollo Interfaz Android Floating Action Button ........................................ 63
Ilustración 70: Desarrollo Interfaz Android Drawer Layout ..................................................... 65
Ilustración 71: Desarrollo Interfaz Android Fondo Actividad Splash Screen ........................... 66
Ilustración 72: Desarrollo Interfaz Android Fondo Inicio Fragment ........................................ 66
Ilustración 73: Desarrollo Interfaz Android Fondo Menú Lateral ............................................ 66
Ilustración 74: Desarrollo Interfaz Android Fondo Actividad Categorías ................................ 67
Ilustración 75: Desarrollo Interfaz Android Fondo Actividad Marker ..................................... 67
x
Índice de Tablas
Tabla 1: Diseño Estético Colores Principales ........................................................................... 37
Tabla 2: Diseño Estético Plataforma Web Textos .................................................................... 40
Tabla 3: Diseño Estético Plataforma Web Menús ................................................................... 41
Tabla 4: Diseño Estético Plataforma Web Menú Administrador ............................................. 42
Tabla 5: Diseño Estético Android Textos ................................................................................. 44
Tabla 6: Diseño Estético Android ProgressBar Circular ........................................................... 45
Tabla 7: Diseño Estético Android Barra de Menú .................................................................... 46
Tabla 8: Diseño Estético Android Barra Lateral ....................................................................... 47
Tabla 9: Diseño Estético Android Estilo Personalizado de Botones ........................................ 47
Tabla 10: Diseño Estético Android Fondos de Actividades ...................................................... 48
Tabla 11: Tabla de Puntación de Pruebas ................................................................................ 68
Tabla 12: Tabla de Prueba de Funcionalidad de Usuarios ....................................................... 69
Tabla 13: Tabla de Prueba de Funcionalidad de Servicios ....................................................... 70
Tabla 14: Tabla de Prueba de Funcionalidad de GPS y Google Maps...................................... 70
Tabla 15: Tabla de Prueba de Funcionalidad de Consultar Matrícula ..................................... 71
Tabla 16: Tabla de Corrección de Errores ................................................................................ 72
xi
Resumen
El proyecto consiste en desarrollar una plataforma web en donde los profesionales y
proveedores que ofrezcan servicios automotrices, registren su localización en el territorio
(sus talleres mecánicos, lavadoras, latonerías, vulcanizadoras y concesionarios, gasolineras
por ejemplo), con el fin de que puedan ser fácilmente ubicados por sus potenciales clientes.
En la aplicación móvil las personas podrán seleccionar el servicio que deseen según sus
necesidades el aplicativo trazará la ruta desde el lugar donde se encuentre la persona hasta
el destino deseado.
El proyecto requiere de herramientas nuevas en el desarrollo de aplicaciones móviles y
plataformas web con conexión a internet, con lo que será necesaria una investigación
exploratoria para su implementación.
Palabras Claves: Geolocalización, servicios automotrices, aplicación móvil, plataforma Web,
Android.
xii
1
Introducción
Google revela que el 90% de los usuarios, accede por medio de un Smartphone a
redes sociales y 8 de cada 10, busca algún producto o servicio, además el 54% de
Smartphone tiene instalada la aplicación de Google Maps. Las cifras en Ecuador para el 2014
en la Encuesta de Condiciones de Vida del Instituto de Estadística y Censos (INEC), lanza los
resultados de que el 24,3 % (2’808.243) de la población mayor de 12 años posee un
Smartphone. (Instituto de Estadística y Censos (INEC), 2014)
Basándonos en estos datos hemos decidido el desarrollo de este proyecto de
geolocalización de servicios automotrices en la ciudad de Cuenca, que tiene la finalidad de
poner al alcance de los usuarios información actualizada, además consulten su ubicación,
tipo servicios y costos mediante una aplicación móvil y pagina web, herramientas que van
acordes a las nuevas tendencias de la tecnología.
El presente trabajo se desarrolla en el ámbito de las aplicaciones utilizadas en
dispositivos móviles particularmente las que tienen relación con la geolocalización de
puntos de interés en tiempo real. Para este desarrollo se utilizarán los dispositivos móviles y
plataforma web con base de datos no relacional (MongoDB), servicios web (JSON) y las
nuevas actualizaciones de Android como sus librerías, diseño de presentación (Material
Design) y el uso de GPS.
Este documento se ha estructurado de la siguiente manera:
El primer capítulo dedicado a los fundamentos teóricos, que describe las
herramientas o tecnologías para el desarrollo tanto de la plataforma web como la
aplicación móvil.
Un segundo capítulo donde se define las necesidades de los usuarios, para así saber
las funcionalidades del sistema y proceder a la creación de diagramas, el diseño de
interfaz y el diseño estético.
Tenemos un tercer capítulo en el que se procede al desarrolla la plataforma web y la
aplicación móvil.
2
En el cap. 4 se describe las pruebas a las que se ha sometido el sistema y los errores
que se presentaron.
La corrección de errores se realiza en el quinto capítulo.
Para finalizar con las conclusiones en el sexto capítulo.
3
1 Fundamentos Teóricos
1.1 Plataforma Web
Contiene el la consola del Administrador, consola para los Usuarios que
ofrecen servicios y Usuarios que consumen servicios.
1.2 Herramientas de Desarrollo
1.2.1 Framework Web
Un framework es una estructura de software compuesta de componentes
personalizables e intercambiables; es decir una aplicación genérica a la que podemos
añadir las últimas piezas y así construir una aplicación completa. (Gutiérrez, 2015)
Para la creación de plataformas Web, existen muchos frameworks de ayuda,
estos en su mayoría son un conjunto de componentes personalizables y
reutilizables, lo que lleva a una aceleración en proceso de desarrollo.
Otra parte importante, es que los frameworks promueven las buenas
prácticas de desarrollo mediante el uso de patrones. (Fuentes Manzano & Vasco
Villamarín, 2015)
1.2.2 Modelo Vista Controlador
El patrón MVC, organiza toda la aplicación en tres modelos separado:
Modelo: compone los datos de la aplicación y reglas de negocio.
Vista: conjunto de plantillas, formularios de entrada y salida de
información usada en la aplicación.
Controlador: controladores que procesan las peticiones hechas por los
usuarios; además controlan el flujo de ejecuciones en la aplicación.
(Gutiérrez, 2015)
4
Ilustración 1: Modelo Vista Controlador (Bascon Pantoja)
Pasos de funcionamiento:
1. El usuario hace el pedido por medio de un evento o acción.
2. El evento es recibido por el controlador el cual genera una petición al
Modelo o Vista, dependiendo de los requerimientos.
3. El modelo, retorna los datos necesario y llama a la Vista en caso de ser
necesario la actualización.
4. El controlador recibe el control. (Fernández Romero & Díaz González,
2015)
1.2.3 Yii2
Yii2 es un framework basado en componentes, escrito en PHP5 y de código
abierto.
Otras características que presenta son:
Arquitectura de desarrollo Modelo Vista Controlados (MVC).
Modela los datos de la base de datos, en objetos.
Herramientas intuitivas para la generación de código: ejemplo Gii, una
herramienta para la generación del CRUD de una tabla/colección de
base de datos.
Validación de formularios, incluido en los componentes.
Widgets Ajax: ejemplo autocompletar de campos de texto.
5
Herramientas para probar y depurar la aplicación, con documentación
completa.
Soporte a distintas bases de datos como: MySQL, Sql Server,
MongoDB, etc.
Posee medidas de seguridad, que evitan al aplicativo web ataques
como: inyección SQL, cross-site scripting (XSS), cross-site falsificación
(CSRF) y la galleta de manipulación. (Fuentes Manzano & Vasco
Villamarín, 2015)
Nuestros conocimientos en este framework pero en la versión anterior, nos
permiten escogerlo para el desarrollo de la plataforma web, con la diferencia que
debemos actualizarlos en conocimientos para hacer uso de Yii2.
1.2.4 HTML5
En el año de 1998, el consorcio W3C, creador de HTML, decidió que no
continuarían con la evolución de este, y que el futuro era XML, desarrollando así
hasta la versión XHTML 2.0. Luego un grupo de Opera, no convencido de XML como
el futuro para los desarrolladores web, empezaron un trabajo extra en la evolución
de HTML. (Sharp & Lawscon, 2012)
Para el momento se cuenta con HTML5, una herramienta que provee un
conjunto completo de desarrollo, con estas tres características: estructura, estilo y
funcionalidad, esto se logra con la combinación de HTML, CSS y Javascript; HTML
está a cargo de la estructura, CSS presenta la estructura y contenido en la pantalla, y
al final Javascript genera la funcionalidad y conexión en nuestro caso con los
componentes Yii. (Gauchat, 2012)
1.3 Base de Datos
Definición: Sistema computarizado donde se puede llevar o almacenar una
colección de archivos o tablas de datos. Las operaciones que se pueden realizar con
los datos pueden ser:
Agregar, modificar o eliminar nuevas tablas de datos.
Insertar, modificar o eliminar datos dentro de las tablas existentes.
Recuperar datos. (Date, 2015)
6
1.3.1 Bases de Datos No SQL
Base de datos no relacional se encarga de guardar datos, gestionar la
memoria y procesamiento, ancho de banda, brindar integridad y seguridad y asignar
recursos necesarios en el momento requerido, a lo que se traduce un ahorro en el
costo operacionales, por esta razón las empresas grandes de hoy en día están
optando por esta nuevas tendencias de este tipo de tecnología. (Joyanes Aguilar,
2012)
1.3.2 Mongo DB
Mongo está basado en NoSQL y su implementación puede estar basada en
una imagen de máquina virtual de modelo de datos en Amazon EC2 o en Microsoft
Azure o como una base de datos de servicios (Mongolab, 2014)
Actualmente MongoDB y bases de datos NoSQL en general, son usadas en
empresas como como Amazon, Google, Facebook, Twitter, ya que estas manejan un
alta cantidad de información y además compleja, que necesita que se consultada de
manera rápida. Además MongoDB tiene una amplia documentación sobre su uso y la
opción de drivers para su funcionamiento en diferentes lenguajes de programación.
(Tamayo & Brito, 2011)
El manejo de búsquedas constantes y resultados cargados de mucha
información, más el flujo de usuarios de manera constante, hacen de MongoDB una
base de datos factible para este tipo de proyectos, además poseemos conocimientos
básicos que nos ayudaran en el desarrollo.
1.4 Aplicación Móvil
1.4.1 Dispositivos Móviles
En los últimos años la evolución de los dispositivos móviles ha incorporado
una serie de características como acceso a internet, pantallas táctiles, GPS,
reconocimiento de huella digital, gran capacidad del almacenamiento y cámaras de
mejor resolución, proporcionando así a los desarrolladores la facilidad de realizar
aplicaciones móviles en diferentes áreas del conocimiento que requieran la
automatización de sus datos. (Arroyo, 2011)
7
Hoy en día existen varias plataformas de desarrollo móvil por lo cual es
importante seleccionar la herramienta y versión apropiada, en el presente proyecto
la plataforma a utilizar es Android.
1.4.2 Sistema Operativo Android
Es un sistema operativo de software libre basado en el kernel de Linux para
dispositivos móviles soportada por Google. Su aparición fue en el año 2009 en los
primeros celulares de marca HTC, cuenta con API’s para el correcto funcionamiento
de los distintos programas del teléfono, también incentiva al desarrollo de
aplicaciones móviles mediante su lenguaje de programación Android Studio en cual
utiliza java. Entre sus principales características tenemos:
Es multitasking en donde se puede abrir varias aplicaciones a la vez.
Compatible con la mayoría de dispositivos del mercado como Smartphones,
Televisores, Tablets de marcas reconocidas como Samsung, Sony, HTC entre
otras.
Proporciona librerías prediseñadas para el desarrollo de aplicaciones móviles.
Ofrece actualizaciones en sus diseños visuales y sistemas operativos. (Malave
Polanco Kristel, 2011)
1.4.3 Herramientas de desarrollo
1.4.3.1 Android Studio
Es el IDE (Entorno de desarrollo Integrado) oficial lanzado por Google para el
desarrollo de aplicaciones para dispositivos móviles que tengan sistema operativo
Android. (Android Developers, 2016)
En el presente proyecto para el desarrollo de la aplicación móvil se seleccionó
la versión 1.5.1.
1.4.3.2 Java
Es una plataforma y un lenguaje de programación de alto nivel orientado a
objetos que hereda la sintaxis de C/C++. Posee una distribución gratuita denominada
Java Development kit (JDK) que contiene programas y librerías que permiten
gestionar el desarrollo, compilación y ejecución de programas. (SANABRIA, 2012)
8
1.4.3.3 Material Design
Es el nuevo diseño de visual que posee animaciones, colores, transiciones,
imágenes llamativas, botones flotantes y otros componentes creado por Google el
mismo que fue incorporado en el sistema operativo de Android desde la versión 5.0
y en el lenguaje de programación Android Studio para el desarrollo de aplicaciones
móviles. Existen nuevas librerías propias en la plataforma Android como
MaterialViewPager, RecyclerView, CardView, que facilitan su implementación.
(Mew, 2015)
Este diseño visual no solo sirve para los teléfonos celulares si no que es
adaptable a cualquier tamaño de pantalla como Smartphones, televisores y tablets.
Material Design es multiplataforma y también puede ser utilizado en páginas web.
(Mew, 2015)
1.5 Servicios de Geolocalización
“Práctica de asociar un recurso digital (imágenes, videos, elementos de
texto, etc.), con datos que contienen una dimensión espacial”. (Sandra Yanet Velazco
Florez, 2012)
La Geolocalización se encarga de ubicar lugares como restaurantes, hoteles,
locales comerciales, mediante posicionamiento en el mapa con sus coordenadas
utilizando las tecnologías actuales como la internet, GPS integrado es los dispositivos
móviles, tablets, laptops. (Sandra Yanet Velazco Florez, 2012)
El posicionamiento de los diferentes lugares que existen gracias a los satélites
y registros de empresas como Google con su herramienta Google Maps hacen
posible trazar rutas desde el lugar donde el usuario se encuentre hasta el destino
deseado, facilitando así la búsqueda de algún lugar en específico que sea requerido
según las necesidades del medio. La conectividad entre los diferentes dispositivos
con GPS de todo el mundo hace posible que existe acceso a una gran cantidad de
información de lugares de interés de todo el mundo. (Arroyo Vázquez, 2013).
Para el uso de los servicios de geolocalización y manejo de mapas en este
proyecto se implementara Google Maps que cuenta con distribuciones de uso
gratuito por cierto número de veces utilizadas al mes. Si se maneja grandes
9
cantidades de información que serán consultadas en el día se pude optar por
contratar una distribución ilimitada de pago.
1.5.1 Google Maps
1.5.1.1 Definición
“Google Maps (conocido al principio como Google Local) es el nombre de un
servicio gratuito de Google. Es un servidor de aplicaciones de mapas en Web.
Ofrece imágenes de mapas desplazables, así como fotos de satélite del mundo
entero e incluso la ruta entre diferentes ubicaciones.” El Api de Google Maps se
encuentra disponible para desarrolladores de manera gratuita y además cuenta
con una amplia documentación sobre su implementación tanto para plataformas
web y dispositivos móviles (Alfonso, 2008)
1.5.1.2 Google Maps API
El desarrollo de API’s para Google Maps por parte de los desarrolladores de
Google han hecho posible la integración de sus mapas en páginas web en donde es
posible utilizar datos personalizados, por ello se usó esta API en la plataforma web.
(Alfonso, 2008)
Para el desarrollo de la aplicación móvil y se implementó la API de Google Maps
para Android.
10
2 Análisis y Diseño
2.1 Formulación de la Solución
El proyecto consiste en desarrollar una plataforma web en donde los usuarios
que ofrezcan servicios automotrices registren su ubicación en el mapa como por
ejemplo sus talleres mecánicos, lavadoras, latonerías, vulcanizadoras, gasolineras y
concesionarios.
En la aplicación móvil las personas podrán seleccionar el servicio que deseen
según sus necesidades el aplicativo trazara la ruta desde el lugar donde se encuentre
la persona hasta el destino deseado.
El proyecto requiere de herramientas nuevas en el desarrollo de Aplicaciones
Móviles y Plataformas Web con conexión a internet, con lo que será necesario una
investigación e implementación de las mismas.
2.2 Especificación de Requisitos
2.2.1 Requisitos Funcionales.
Los requisitos funcionales son actividades u operaciones que el sistema va a
realizar y debe cumplir, para la correcta interacción entre el usuario y la plataforma
web.
La plataforma web, debe cumplir un conjunto requisitos de funcionalidad,
que son los siguientes:
La plataforma web consta de cuatro partes: consola de administración del
sistema, consola de usuarios que ofrecen servicios, consola o cuenta de
usuarios (consumen los servicios) y parte pública para la consulta de datos o
búsqueda de servicios automotrices.
El sistema debe permitir a los usuarios registrarse en la plataforma web y
móvil.
La plataforma web permitirá el acceso o inicio de sesión a: administradores,
usuarios que ofrecen servicios y usuarios normales que consumen servicios.
La consola administrativa será accedida por usuarios tipo administrador.
11
La consola de administración de servicios será accedida por usuarios dueños
de los locales o comercios.
La consola publica o de usuarios, podrá ser accedida por usuarios que se
registran en la plataforma.
Los usuario registrados en la plataforma web, podrán acceder a su cuenta de
usuario y administrarla.
El usuario podrá manejar su lista de servicios automotrices o lugares
favoritos.
Se contara con un buscador principal de servicios automotrices en la página
principal.
La página principal de la plataforma web podrá ser accedida tanto por
usuarios registrados como los que no lo hagan.
El usuario podrá buscar servicios automotrices con los filtros: categorías,
ubicación cercana, nombre y horario de atención.
La página de inicio de la plataforma web presentara al usuario un mapa
dinámico para la ubicación de servicios automotrices buscados.
Los usuarios administradores, podrán acceder a la configuración de los
parámetros de la plataforma web.
Se crearán reportes: usuarios registrados, servicios automotrices por
categoría.
La desactivación/activación de usuarios y servicios automotrices será por
medio de la consola de administración.
Los dueños de comercios o locales que presten servicios automotrices,
podrán registrarse por medio de la plataforma web.
La plataforma permitirá a los usuarios que presten servicios, el manejo de su
cuenta de usuarios y la administración de los servicios que prestan.
La aplicación móvil permitirá el manejo de la cuenta de usuario y la
búsqueda de servicios automotrices.
12
2.2.2 Requisitos No Funcionales.
Los requisitos funcionales o también conocidos como atributos de calidad,
sirven para juzgar el funcionamiento del sistema por medio de las características del
sistema. Los requisitos No Funcionales para la plataforma web son:
Accesibilidad: El sistema podrá ser usado por cualquier usuario por medio de
un computar o Smartphone, con acceso a internet.
Fiabilidad: Por medio de una etapa de pruebas y corrección de errores, se
terminara con un sistema bajo de errores hacia los usuarios finales.
Capacidad almacenamiento:
Usabilidad: La herramientas de búsqueda de servicios automotrices y manejo
de cuentas de usuarios, será simples y fáciles de usar para usuarios con poca
experiencia en el uso de computadoras.
Escalabilidad: Se podrá manejar en el sistema nuevo tipos de servicios, sin
que el funcionamiento del sistema se vea afectado.
Confiabilidad: El sistema presentara información veraz sobre los servicios
automotrices.
2.3 Funcionalidad
2.3.1 Plataforma Web
Dependiendo del tipo de usuario que va a usar la plataforma web, podemos listar las
siguientes funcionalidades que se permitirán y las que serán restringidas:
Usuarios públicos:
Actividades.
o Visualización de servicios en el mapa.
o Filtro de servicios por categoría.
o Visualización de ruta entre su ubicación y servicio escogido.
o Definir el tipo de transporte para visualización de la ruta.
o Escoger ruta deseada.
o Visualización de detalle de ruta.
o Registrarse como usuario nuevo.
13
Restricciones
o Manejo de cuenta.
o Manejo de servicios favoritos.
o Publicación de servicios.
Usuarios registrados:
Actividades.
o Visualización de servicios en el mapa.
o Filtro de servicios por categoría.
o Visualización de ruta entre su ubicación y servicio escogido.
o Definir el tipo de transporte para visualización de la ruta.
o Escoger ruta deseada.
o Visualización de detalle de ruta.
o Inicio de sesión.
o Manejo de cuenta de usuario.
o Manejo de lista de servicios favoritos.
Restricciones
o Publicación de servicios; esto puede cambiar si realiza una solicitud de
publicación de servicios.
Proveedores de servicios:
Actividades.
o Visualización de servicios en el mapa.
o Filtro de servicios por categoría.
o Visualización de ruta entre su ubicación y servicio escogido.
o Definir el tipo de transporte para visualización de la ruta.
o Escoger ruta deseada.
o Visualización de detalle de ruta.
o Inicio de sesión.
o Manejo de cuenta de usuario.
o Manejo de lista de servicios favoritos.
14
o Administración de servicios.
Restricciones
o Puede crear servicios, que deberán ser revisador por el superadmin y si es
aprobado, será publicado.
Superadministradores:
Actividades.
o Visualización de servicios en el mapa.
o Filtro de servicios por categoría.
o Visualización de ruta entre su ubicación y servicio escogido.
o Definir el tipo de transporte para visualización de la ruta.
o Escoger ruta deseada.
o Visualización de detalle de ruta.
o Inicio de sesión.
o Manejo de cuenta de usuario.
o Manejo de lista de servicios favoritos.
o Administración de servicios.
o Administración de categorías.
o Administración de usuarios registrados en la plataforma.
o Administración de solicitudes de publicación de servicios.
2.3.2 Aplicación Móvil
La aplicación móvil Geo Servicar proporciona diferentes funcionalidades a los
usuarios las cuales se indican a continuación:
Buscador de servicios automotrices disponibles en la aplicación.
Manejo de categorías de talleres mecánicos, lavadoras, latonerías,
vulcanizadoras y concesionarios.
Registro de usuarios con correo electrónico o Facebook.
Implementación de geolocalización para ubicar los servicios de interés más
cercanos cuando el usuario lo requiera.
Guardar lugares favoritos por usuarios registros.
15
Implementación del botón ir allí para trazar la ruta desde el lugar de la
persona hasta el destino deseado.
Consultar el costo de la matrícula del vehículo en la página del Servicios de
Rentas Internas (SRI) cuando el servicio esté disponible.
16
2.4 Diagramas
2.4.1 Diagrama de actores
Autores:
Usuario: Persona que consultara los servicios
disponibles dentro de la plataforma web o por
medio de la aplicación móvil.
Proveedor: Es el encargado del ingreso de
nuevos servicios por medio de la plataforma
web.
Administrador: Maneja los componentes
necesarios para el funcionamiento del sistema,
como categorías, control de usuarios, ingreso
de nuevos servicios, etc.
Servidor: Lugar donde se encuentra alojado el
sistema, desde donde se llevaran a cabo todos
los pedidos de los usuarios por medio de la
plataforma web, además las peticiones de los
servicios web de la aplicación móvil.
Ilustración 2: Diagrama de Autores
17
2.4.2 Diagrama de Casos de Uso
Ilustración 3: Diagrama de Casos de Uso
18
2.4.3 Diagrama de Secuencias
2.4.3.1 Registro usuario
Ilustración 4: Diagrama de Secuencia – Registro de Usuario
19
2.4.3.2 Inicio sesión
Ilustración 5: Diagrama de Secuencia – Iniciar sesión
20
2.4.3.3 Buscar servicios
Ilustración 6: Diagrama de Secuencia – Buscar Servicios
21
2.4.3.4 Administrar cuenta
Ilustración 7: Diagrama de Secuencia – Administrar Cuenta
22
2.4.3.5 Ingreso servicio
Ilustración 8: Diagrama de Secuencia – Ingresar Servicios
23
2.5 Diseño de Base de Datos
Ilustración 9: Diagrama de Clases
23
2.6 Requerimientos Diseño de Interfaz
2.6.1 Diseño de Interfaz – Plataforma Web
Para definir el diseño de interfaz de la plataforma web, se toman los siguientes pasos:
a) Análisis del usuario.
En este paso se define los usuarios que usaran la plataforma, las funcionalidades y
actividades que llevaran a cabo, además las restricciones que estos tienen; se terminó
definiendo de esta manera:
Usuarios públicos:
Actividades.
o Visualización de servicios en el mapa.
o Filtro de servicios por categoría.
o Visualización de ruta entre su ubicación y servicio escogido.
o Definir el tipo de transporte para visualización de la ruta.
o Escoger ruta deseada.
o Visualización de detalle de ruta.
o Registrarse como usuario nuevo.
Restricciones
o Manejo de cuenta.
o Manejo de servicios favoritos.
o Publicación de servicios.
Usuarios registrados:
Actividades.
o Visualización de servicios en el mapa.
o Filtro de servicios por categoría.
o Visualización de ruta entre su ubicación y servicio escogido.
o Definir el tipo de transporte para visualización de la ruta.
24
o Escoger ruta deseada.
o Visualización de detalle de ruta.
o Inicio de sesión.
o Manejo de cuenta de usuario.
o Manejo de lista de servicios favoritos.
Restricciones
o Publicación de servicios; esto puede cambiar si realiza una solicitud de
publicación de servicios.
Proveedores de servicios:
Actividades.
o Visualización de servicios en el mapa.
o Filtro de servicios por categoría.
o Visualización de ruta entre su ubicación y servicio escogido.
o Definir el tipo de transporte para visualización de la ruta.
o Escoger ruta deseada.
o Visualización de detalle de ruta.
o Inicio de sesión.
o Manejo de cuenta de usuario.
o Manejo de lista de servicios favoritos.
o Administración de servicios.
Restricciones
o Puede crear servicios, que deberán ser revisador por el superadmin y si es
aprobado, será publicado.
25
Superadministradores:
Actividades.
o Visualización de servicios en el mapa.
o Filtro de servicios por categoría.
o Visualización de ruta entre su ubicación y servicio escogido.
o Definir el tipo de transporte para visualización de la ruta.
o Escoger ruta deseada.
o Visualización de detalle de ruta.
o Inicio de sesión.
o Manejo de cuenta de usuario.
o Manejo de lista de servicios favoritos.
o Administración de servicios.
o Administración de categorías.
o Administración de usuarios registrados en la plataforma.
o Administración de solicitudes de publicación de servicios.
b) Diseño de la plataforma.
Todo tipo de usuario registrado como el que no, accederá a las siguientes
funcionalidades definidas como comunes e importante.
Consulta se servicios.
La plataforma web, como funcionalidad principal debe permitir a los usuarios visualizar
los servicios disponibles, entonces la parte más importante es el inicio de la web pública,
para ello se decidió que lo primero a lo que accede al usuario, es al mapa donde se
presentan los servicios disponibles.
26
Ilustración 10: Prototipo página inicial plataforma web.
Para comodidad y facilidad de uso, ser agrego la opción de filtrado por medio de
“Categoría” para los servicios y “Transporte” para las rutas que se presentaran.
Ilustración 11: Prototipo filtros servicios plataforma web.
Los servicios esta representador por el icono de su categoría:
Concesionario
Gasolinera
Latonería
27
Lavadora
Mecánica
Vulcanizadora
Ilustración 12: Iconos categorías.
Para presentar la información se toma en cuenta, que los usuarios solo prefieren
información básica y luego ver el detalle completo, si es que ese servicio es su preferido, para
esto el usuario por medio de un click sobre el icono del servicio visualizará el detalle básico, con
la opción “Ver detalle” para el detalle completo. Además se presenta la información sobre rutas
existentes, así el usuario accede a la información de manera rápida.
Ilustración 13: Prototipo rutas-detalle servicio plataforma web.
Manejo cuenta de usuarios y favoritos.
Estas funcionalidades que pueden ser accedidas por usuarios registrados y que hayan
iniciado sesión, la cual podrá ser realizada por medio del ingreso del correo electrónico y la
contraseña.
28
Ilustración 14: Prototipo inicio de sesión plataforma web.
En la parte izquierda se muestra el menú del usuario, donde dependiendo del tipo de
usuario se mostraran las opciones.
Ilustración 15: Prototipo menú de usuarios plataforma web.
Se definió un conjunto de datos básicos para el manejo de usuarios y de su cuenta, los
que pueden ser editados.
Ilustración 16: Prototipo edición cuenta de usuario plataforma web.
Los servicios pueden ser agregados desde el detalle del servicio y ser vistos en la lista de
favoritos, donde pueden ser eliminados.
29
Ilustración 17: Prototipo listado servicios favoritos plataforma web.
Administración de servicios.
Los servicios pueden ser creados por cualquier usuario registrado, pero para su
publicación un superadministrado lo revisa; estos servicios pueden verse en la lista de servicios
del usuario.
Ilustración 18: Prototipo lista de servicios plataforma web.
La creación y edición de servicios, se dividió en diferentes pasos, agrupando los datos
por afinidad e importancia, así el usuario no tiene la idea de llenar un formulario extenso.
Ilustración 19: Prototipo ingreso de servicio plataforma web.
30
2.6.2 Diseño de Interfaz - Aplicación Móvil
Para la creación de la interfaz de la aplicación móvil se considera los factores de
usabilidad, simplicidad, reutilización y el uso de Material Desing de tal manera que el usuario
se sienta en un ambiente familiar en donde se visualicen menús, botones, pestañas, buscadores
y mapas que posean gráficos e iconos que sean fáciles de entender y utilizar. A continuación se
muestran los diseños de cada interfaz en prototipo de esqueleto que se utilizaron en esta
aplicación:
o Pantalla de Inicio.- contiene el icono de la aplicación, nombre y animación.
Ilustración 20: Diseño de Interfaz Android Prototipo Esqueleto – Pantalla Inicio
o Pantalla de Validación.- está formada por el icono de la aplicación, nombre, mensaje de
validación y un botón.
Ilustración 21: Diseño de Interfaz Android Prototipo Esqueleto – Pantalla Validación
31
o Pantalla Principal.- muestra el botón del menú izquierdo, menú derecho, imagen de
animación con su título, botones que abren otras interfaces y un botón flotante.
Ilustración 22: Diseño de Interfaz Android Prototipo Esqueleto - Pantalla Principal
o Pantalla Menú Izquierdo.- contiene la información del usuario y opciones de menú.
Ilustración 23: Diseño de Interfaz Android Prototipo Esqueleto - Pantalla Menú Izquierdo
o Pantalla Menú Derecho.- este diseño es utilizado en algunas pantallas con diferentes
opciones.
32
Ilustración 24: Diseño de Interfaz Android Prototipo Esqueleto – Pantalla Menú Derecho
o Pantalla de Usuario.- está compuesta por el botón atrás, título de la actividad, botón de
Facebook en donde se utiliza su propio diseño para el registro e inicio de sesión, botón
iniciar sesión, botón registrarse.
Ilustración 25: Diseño de Interfaz Android Prototipo Esqueleto - Pantalla Usuario
o Ventana Iniciar Sesión.- describe la opción olvido de contraseña, los campos requeridos
y el botón iniciar sesión.
Ilustración 26: Diseño de Interfaz Android Prototipo Esqueleto – Ventana Iniciar Sesión
33
o Ventana Registro de Usuario.- contiene los campos requeridos y el botón para el
registro.
Ilustración 27: Diseño de Interfaz Android Prototipo Esqueleto -Ventana Registro Usuario
o Pantalla de Servicios.- está compuesta por botón atrás, título de la actividad, menú
lateral, campo de búsqueda denominado punto de inicio que contienen por defecto la
ubicación actual del usuario, separador, campo de búsqueda punto de destino, botón
trazar ruta en la aplicación, mapa, servicios, botón mi ubicación, botón alejar y botón de
navegación.
Ilustración 28: Diseño de Interfaz Android Prototipo Esqueleto - Pantalla Servicios
o Servicio o Punto de Interés.- muestra el nombre del servicio y la opción para ver el
detalle.
34
Ilustración 29: Diseño de Interfaz Android Prototipo Esqueleto – Mensaje Servicio
o Pantalla Detalle Servicio o Punto de interés.- se manejan pestanas en donde cada una
muestra la información, los costos, opciones de trazar la ruta del servicio seleccionado.
Ilustración 30: Diseño de Interfaz Android Prototipo Esqueleto - Pantalla Punto de Interés
o Pestaña Información.- contiene el icono de servicio, icono para agregar a favoritos,
nombre, descripción, horario de atención y teléfono.
Ilustración 31: Diseño de Interfaz Android Prototipo Esqueleto – Pestaña Información
o Pestaña Costos.- muestra la información de detalle y precio de cada subservicio.
35
Ilustración 32: Diseño de Interfaz Android Prototipo Esqueleto – Pestaña Costos
o Pestaña Ir Allí.- está diseñada con un icono para trazar la ruta en la aplicación y un
botón para realizar la navegación en Google Maps.
Ilustración 33: Diseño de Interfaz Android Prototipo Esqueleto – Pestaña Ir Allí
o Pantalla Categorías.- formada por botón atrás, imagen de animación con su título y sus
categorías.
Ilustración 34: Diseño de Interfaz Android Prototipo Esqueleto - Pantalla Categorías
o Pantalla Consultar Matrícula.- muestra el contenido de la página solicitada para la
consulta de la matricula e indica que se está cargando mediante una animación.
36
Ilustración 35: Diseño de Interfaz Android - Pantalla Consultar Matricula
o Pantalla de Navegación.- compuesta por la imagen y el mapa que contiene con los
controles de acercar y alejar. En la imagen se carga la vista panorámica del lugar
seleccionado en el mapa.
Ilustración 36: Diseño de Interfaz Android Prototipo Esqueleto - Pantalla Navegación
o Pantalla Ayuda.- muestra la información de la aplicación, versión, año, desarrolladores y
contiene un botón de manual de usuario.
Ilustración 37: Diseño de Interfaz Android Prototipo Esqueleto - Pantalla Ayuda
37
Para el diseño de las interfaces se utilizó la herramienta online Moqups.
https://moqups.com
2.7 Diseño Estético
Al momento de desarrollar un proyecto es importante decidir un diseño estético que
llame mucho la atención y que se agradable para el usuario final. En esta apartado vamos a
elegir el icono de nuestra aplicación, los colores y los diferentes tamaños de los objetos o vistas
que compondrán nuestra plataforma como por ejemplo botones, textos, iconos e imágenes.
2.7.1 Colores Principales
A continuación se detallan los colores principales que se utilizaron en la plataforma web
y aplicación móvil.
Nombre Color Implementación
primaryColor #346D7D En fondos de botones, normales,
botones flotantes, y menus.
primaryDarkColor #1F515F En fondo de botones
personalizados
Accent #607D8B Fondos personalizados en
actividades y fragmentos.
window_background (blanco) #FFF5F5F5 Fondo por defecto de la
aplicación.
Tabla 1: Diseño Estético Colores Principales
2.7.2 Logo
Para realizar el logo se seleccionó de una página web y posteriormente se editó un
programa online utilizando los dos colores principales primaryColor, window_background.
38
Ilustración 38: Diseño Estético Android Logo Geo Servicar
Link de donde se obtuvo la imagen:
http://www.iconarchive.com/show/long-shadow-media-icons-by-pelfusion/Maps-Pin-Place-icon.html
Para la edición de los iconos e imágenes se utilizó una herramienta online llamada Pixlr.
Link en donde se editó la imagen:
https://pixlr.com/editor/
2.7.3 Diseño Estético – Plataforma Web
2.7.3.1 Iconos.
Categorías.
Las categorías serán representadas por iconos para la clasificación de los servicios; en
este punto se ingresó un conjunto básico de categorías que son las siguientes:
Concesionario
Gasolinera
Latonería
Lavadora
Mecánica
Vulcanizadora
39
Ilustración 39: Iconos categorías Diseño Estético
Los iconos de las categorías básicas fueron obtenidos de: http://www.flaticon.es/
Geolocalización.
Los iconos para la presentación de los servicios dentro del mapa, serán
representados por la categoría a la que pertenecen. Los iconos para la ubicación del
usuario y definición de la ruta son:
Ubicación del usuario.
Destino o fin de la ruta.
Ilustración 40: Icono puntos en mapa.
Estos iconos son los brindados por el Api de Google Maps, para el manejo de
geolocalización de coordenadas.
Menú principal de usuarios.
Los usuarios proveedores de servicio y superadministrador, podrán acceder a las
funcionalidades disponibles por medio de un menú, con los siguientes iconos:
Manejo o configuración de cuenta de usuario.
Administración de servicios.
Administración de categorías.
Administración de usuarios.
Ilustración 41: Iconos menú usuarios registrados.
40
La librería usada para el uso de estos iconos es Bootstrap, su documentación se
encuentra disponible en el siguiente link: https://fortawesome.github.io/Font-
Awesome/icons/
Administración de información.
Para la administración de la información como servicios, categorías, etc. se usan
los siguientes iconos:
Ver detalle.
Editar información.
Eliminar información.
Ilustración 42: Iconos administración información.
El framework Yii2, permite el uso de estos iconos para la administración de
información dentro de la plataforma web.
2.7.3.2 Textos.
El estilo usado para los diferentes textos es el siguiente:
Descripción Tamaño Tipo de Letra Color
Texto en Título
principal.
18px Helvetica Neue, Arial,
sans-serif
(Blanco)
#white
Menú Home 14px Helvetica Neue, Arial,
sans-serif
(Blanco)
#white
Etiquetas de controles. 12px Inherit (Negro)
#black
Texto controles. 14px Inherit (Negro)
##555
Tabla 2: Diseño Estético Plataforma Web Textos
41
2.7.3.3 Menús
Menú principal home
Ilustración 43: Diseño menú página inicial plataforma web.
Componente Tamaño Color
Barra de menú Ancho: variable,
depende de las opciones
que se presenta al
usuario que inicia sesion
y al que no.
#607D8B accent
Texto 14px Helvetica Neue, Arial, sans-serif
#black
Tabla 3: Diseño Estético Plataforma Web Menús
Menú proveedor de servicios o superadministrador.
Ilustración 44: Diseño menu super administrador.
Ilustración 45: Diseño menú administrador
42
Componente Tamaño Color
Barra de menú 230X44 px #222D32
#1E282C opción escogida.
Texto 14px Helvetica Neue, Arial, sans-serif
#333
Iconos 20X14 px #b8c7ce
Tabla 4: Diseño Estético Plataforma Web Menú Administrador
2.7.3.4 Botones.
Imagen Acción Color Texto
Agregar nueva
información o
registros.
#5cb85c
#4cae4c (con el cursos
sobrepuesto)
Tamaño: 14px
Color: #fff
Fuente: Arial Helvetica
Editar la información. #337ab7
#2e6da4 (con el
cursos sobrepuesto)
Tamaño: 14px
Color: #fff
Fuente: Arial Helvetica
Guardar la
información nueva o
editada.
#337ab7
#2e6da4 (con el
cursos sobrepuesto)
Tamaño: 14px
Color: #fff
Fuente: Arial Helvetica
Eliminar información o
registro.
#d9534f
#d43f3a (con el cursos
sobrepuesto)
Tamaño: 14px
Color: #fff
Fuente: Arial Helvetica
Ilustración 46: Diseño botones plataforma web
43
2.7.4 Diseño Estético – Aplicación Móvil
2.7.4.1 Iconos
Existen diferentes dimensiones de pixeles en la pantalla de los celulares. Para el manejo
de los iconos o imágenes Android nos proporciona la posibilidad de contar con distintos
tamaños, dependiendo de la versión y modelo del teléfono móvil los iconos y las imágenes se
cargaran automáticamente en la aplicación. El estándar que se debe respetar en los iconos es el
siguiente:
Ilustración 47: Diseño Estético en Android Tamaño de Iconos
2.7.4.2 Imágenes
Al igual que los iconos las imágenes se manejan con el mismo estándar en sus
tamaños.
Ilustración 48: Diseño Estético en Android Tamaño de Imágenes
Las imágenes utilizadas para el desarrollo de este proyecto fueron obtenido del siguiente
enlace:
http://www.flaticon.es/
44
2.7.4.3 Textos
Ilustración 49: Diseño Estético Android Texto
Descripción Tamaño Tipo de Letra Color
Texto en Títulos 15sp (pixeles
independientes de la
escala)
Bold (Blanco)
#FFF5F5F5
window_background
Texto en barra de Menú
Toolbar
15sp (pixeles
independientes de la
escala)
Bold (Blanco)
#FFF5F5F5
window_background
Texto en Menú Lateral
Drawer Layout
14sp (pixeles
independientes de la
escala)
Italic #212121
primary_text
Texto en Botones 14sp (pixeles
independientes de la
escala)
Bold (Blanco)
#FFF5F5F5
window_background
Texto en Mensajes
utilizando Toast
14sp (pixeles
independientes de la
escala)
Bold (Blanco)
#FFF5F5F5
window_background
Texto en Mensajes
utilizando Message
Dialog
14sp (pixeles
independientes de la
escala)
Italic #212121
primary_text
Texto en Transiciones
(Material Design)
28sp (pixeles
independientes de la
escala)
Bold (Blanco)
#FFF5F5F5
window_background
Tabla 5: Diseño Estético Android Textos
45
2.7.4.4 ProgressBar
Cuando el usuario en la aplicación móvil requiere consultar datos, verificar conexiones,
manejar su cuenta, trazar una ruta, consultar matricula y entre otros habrá un tiempo mínimo
de carga en donde se le mostrara una vista indicando que los procesos se están cargando.
Existen dos tipos diferentes de vistas que se ha tomado en cuenta en esta aplicación:
o ProgressBar Circular
Ilustración 50: Diseño Estético Android ProgressBar Circular
Descripción Tamaño Color
Color primario 40dp (Píxeles
independientes de la
densidad)
(blanco) #ffffff
Color secundario 40dp (Píxeles
independientes de la
densidad)
#1F515F
Tabla 6: Diseño Estético Android ProgressBar Circular
o ProgressDialog
Ilustración 51: Diseño Estético Android ProgressDialog
Tamaños y colores nativos de ProgressDialog utilizados por defecto de la IDE Android Studio.
2.7.4.5 Barra de Menú
La barra de menú Toolbar está diseñada para ser reutilizada en varias interfaces.
46
Ilustración 52: Diseño Estético Android Toolbar
Componente Tamaño Color
Barra de menú Ancho: toda la pantalla.
Largo: 48dp (Píxeles
independientes de la
densidad)
#607D8B accent
Texto de título de barra de menú 15sp (pixeles
independientes de la
escala), tipo de letra
bold.
(blanco) #FFF5F5F5
window_background
Botonas de barra de menú 24dp (Píxeles
independientes de la
densidad)
(blanco) #FFF5F5F5
window_background
Tabla 7: Diseño Estético Android Barra de Menú
2.7.4.6 Menú de Lateral Izquierdo
Ilustración 53: Diseño Estético Android Menú Lateral Izquierda Drawer Layout
Componente Tamaño Color
Menú Lateral Ancho: toda la pantalla.
Largo: 48dp (Píxeles
independientes de la
densidad)
#607D8B accent
47
Texto de opciones de menú lateral 15sp (pixeles
independientes de la
escala), tipo de letra
bold.
(blanco) #FFF5F5F5
window_background
Iconos de opciones de menú lateral 24dp (Píxeles
independientes de la
densidad)
(blanco) #FFF5F5F5
window_background
Tabla 8: Diseño Estético Android Barra Lateral
2.7.4.7 Botones
El diseño de su tamaño es normal utilizando los atributos de largo que se ajuste a su tamaño
(match_parent) y de ancho que se extienda todo el ancho del contenedor principal
(wrap_content).
Ilustración 54: Diseño Estético Android Botones
Se diseñó un estilo personalizado que consiste en que cuando el usuario selecciona el botón
cambia de color. A continuación se describen cada uno de los eventos con su respectivo color:
Evento Color
Presionado (pressed) #0097A7 primary_dark
Enfocado (focused) #0097A7 primary_dark
Permanecer inactivo (hovered) #0097A7 primary_dark
Por defecto (defaut) #346D7D primaryColor
Tabla 9: Diseño Estético Android Estilo Personalizado de Botones
48
2.7.4.8 Fondos de Actividades y Fragmentos
El fondo por defecto implementado en el estilo Base de es de color blanco que será utilizado
por todas interfaces de la aplicación, también hemos implementado fondos personalizados con
el color accent. El tamaño de los fondos ocupa toda la pantalla tanto en anchura como de largo.
Fondos Color
Utilizado en ciertas actividades como Splash,
SinGps, SinConexionInernet, Iniciar Sesión.
#607D8B accent
Fondo por defecto de todas las actividades y
fragmentos que componen la aplicación.
(blanco) #FFF5F5F5 window_background
Tabla 10: Diseño Estético Android Fondos de Actividades
2.7.4.9 Validaciones
Para las validaciones de los campos en donde se ingresa información se utiliza un diseño visual
intuitivo que le permitirá al usuario visualizar de manera automática si los datos que ingresa
están incorrectos y que campos son obligatorios mediante iconos y mensajes.
Ilustración 55: Diseño Estético Android Validación Datos
3 Desarrollo e Implementación
3.1 Desarrollo Plataforma Web
La plataforma web de Geo Servicar está desarrollado con el framework Yii versión 2,
basado en el lenguaje PHP, además con uso de Javascript y Jquery. La base de datos usada es
MongoDB.
49
3.1.1 Creación de proyecto en Yii2.
En la versión anterior Yii, la creación de proyecto suponía un proceso más largo y difícil,
con la versión Yii2, los pasos fueron reducidos a:
1. Nos dirigimos al siguiente link: http://www.yiiframework.com/download/ , este
contiene las opciones de instalación de un proyecto.
2. La opción escogida para la creación de nuestro proyecto es la de ‘Install from an
Archive File’, que descarga directamente un proyecto para usarlo en nuestro
servidor.
El tipo de proyecto que usaremos es el de desarrollo avanzado, por lo que
hacemos click en la segunda opción:
Ilustración 56: Descarga creación proyecto Yii2.
3. El archivo descargado, debe ser extraído en la carpeta de nuestro servidor, por
ejemplo: dentro de C:\xampp\htdocs.
4. Dentro de la carpeta obtenemos como resultado del paso anterior, ejecutamos
el archivo init.bat, luego nos pediré ingresar “0” para continuar, y con ultimo
“yes”.
5. En este paso, nuestro proyecto esta creado con los componentes básicos que
Yii2 posee, para verificar debemos acceder a:
http://localhost/proyecto_ejemplo/frontend/web/.
50
3.1.2 Estructura del proyecto.
Ilustración 57: Arquitectura Web
La aplicación (proyecto) está creada con el framework Yii versión 2, con los que se
maneja sobre la estructura MVC (Modelo Vista Controlador).
Aquí la aplicación se encarga de recibir la acción que se quiere ejecutar, por ejemplo ir al
Home, la acción se encuentra dentro del controlador, donde obtendrá los datos del modelo y
los presentara en una vista (plantilla).
La estructura para el manejo de los archivos de la plataforma web es:
Ilustración 58: Estructura del Proyecto Web
51
Backend: Posee los archivos a manejarse por parte de administradores de
servicios y superadmin.
Frontend: Archivos para manejo de la plataforma web en la parte pública.
Common: Guarda archivos comunes a usarse tanto en la parte publica como en
la privada de la plataforma web.
3.1.3 MongoDB
3.1.3.1 Collecciones
Basándonos en el Diseño de Base de Datos realizado, podemos crear la base de datos en
MongoDB, obteniendo las siguientes colecciones (tablas):
Ilustración 59: Colecciones base de datos.
Categorías: Almacena la información de las categorías a las que pertenecen los
servicios.
Favoritos: Cada registro, representa la lista de servicios favoritos del usuario.
Servicios: Servicios ingresados por todos los usuarios.
Subservicios: Cada servicio, puede poseer subservicios, aquí se almacenan estos.
Usuarios: Datos de los usuarios registrados en la plataforma.
3.1.3.2 MongoDB + Yii2.
Instalación
Yii2, no posee la configuración por defecto para usar MongoDB, por lo que se debe
proceder a la instalación con los siguientes pasos:
1. Dirigirse al Shell de xampp, aquí vamos al directorio del proyecto: cd
htdocs\proyecto_ejemplo
52
2. Ahora descargamos composer con el comando: php -r "readfile ('https:
//getcomposer.org/installer');" | php, que usaremos para la instalación de MongoDB
en nuestro proyecto.
3. Para descargar MongoDB ejecutamos el comando: phar require --prefer-dist
yiisoft/yii2-mongodb.
4. En este paso configuramos la conexión a la base de datos, modificando el archivo:
htdocs\proyecto_ejemplo\common\config\ main-local.php, poniendo el siguiente
código.
'mongodb' => [ 'class' => '\yii\mongodb\Connection', 'dsn' => 'mongodb: //servicios:servicios89@52.89.116.186:27017/servicios', ], Como se ve, definimos el servidor y credenciales de donde se encuentra nuestra base
de datos, para realizar la conexión.
3.1.4 Configurar Gii1
Gii es una extensión de Yii2, que permite al usuario generación de código como:
modelos, controladores, CRUD, etc., pero para poder ser usado con MongoDB se debe realizar
una configuración diferente, como se describe a continuación:
2. Modificar archivo de configuración: htdocs\proyecto_ejemplo\common\config\
main.php
'gii1' => [ 'class' => 'yii\gii\Module', 'generators' => [ 'mongoDbModel' => [ 'class' => 'yii\mongodb\gii\model\Generator' ] ], ],
3. Para verificar podemos ir a nuestro navegador y acceder a:
http://localhost/proyecto_ejemplo/frontend/web/index.php?r=gii1
53
El resultado que veremos, es que ya tenemos la opción de “MongoDB Model
Generator”, es decir crear modelos en base a nuestra base de datos.
Ilustración 60: Configuración Gii.
3.1.5 Creación de modelos.
Un modelo representan un registro de nuestra base de datos, y sirven para el manejo de
su información, pueden ser creador manualmente o generados por medio de la extensión Gii1,
este caso para MongoDB, de la siguiente manera:
1. Accedemos a Gii1:
http://localhost/proyecto_ejemplo/frontend/web/index.php?r=gii1
2. Vamos a la opción “MongoDB Model Generator”, que no presenta un formulario
para ingresar los datos necesarios, y generar un modelo:
Ilustración 61: Formulario creación de modelo.
54
Collection Name: Nombre de la colección (tabla) de la que se va a crear el
modelo (cada colección de la base datos necesita un modelo para manejar su
información).
Batabase Name: Nombre de nuestra base de datos: ejemplo “servicios”.
Attribute List: Se ingresó los atributos que tiene el modelo, separados por
comas: ejemplo “nombre, dirección, teléfono”.
Model Class: Nombre del modelo: ejemplo “Usuarios”.
Namespace: Lugar donde se creara el archivo del modelo, es recomendable
hacerlo en el directorio common/models, así podrán ser usados tanto en el
backend como en el frontend.
Este proceso de creación de modelos, se usó para el manejo de todas las colecciones
(tablas) de nuestra base de datos, así teniendo un modelo básico que fue modificando en el
proceso de desarrollo del proyecto para cumplir con los requerimientos necesarios.
3.1.6 Creación de CRUD
El CRUD es generado en base a un modelo, que representa una colección de la base de
datos, y permite la manipulación de los datos como agregar nuevo registro, editar, eliminar y
ver el detalle, por medio de una interfaz básica, que puede ser modificada o reutilizada.
Para generación se siguen estos pasos:
1. Accedemos a Gii1:
http://localhost/proyecto_ejemplo/frontend/web/index.php?r=gii1
2. Vamos a la opción “CRUD Generator”, que no presenta un formulario para ingresar los
datos necesarios, y generar el CRUD:
55
Ilustración 62: Formulario generación de CRUD.
Model Class: Modelo del que se genera el CRUD.
Search Model Class: Es opcional y crea las opciones de búsqueda por cualquier atributo
del modelo.
Controller Class: Nombre del controlador: ejemplo “CategoriasController”.
View Path: Lugar donde se almacenan las vistas, que son la parte grafica (formularios)
para presentar al usuario la información.
3. En la parte inferior hacemos click en “Generar”, y tenemos creado el CRUD, para
revisarlo accedemos a:
http://localhost/proyecto_ejemplo/backend/web/index.php?r=nombre_modelo
En el siguiente ejemplo, vemos la interfaz que tenemos para el listado de categorías,
que fue modificado tanto en estilo como en forma.
Ilustración 63: Vista de lista de Categorías.
56
3.2 Desarrollo Aplicación Móvil
La aplicación móvil Geo Servicar se desarrolla en la plataforma Android mediante el
entorno de desarrollo integrado Android Studio versión 1.6.1 con Jdk Vers. 1.7.0._79-b15 y
Java 7. La versión que soporta es desde la api 17: Android 4.2 (Jelly Bean) hasta las versión
actual API 23: Android 6.0 (Marshmallow).
Para el manejo de geolocalización se maneja Google Maps con conexión a Internet,
incorporando sus Api’s, permisos de desarrollador y su librería en la versión compile
'com.google.android.gms: play-services: 8.4.0’. En la parte visual de la aplicación se utiliza
Material Design utilizando la librería compile 'com.android.support: design: 23.1.1’.
3.2.1 Arquitectura de Aplicación Móvil
Ilustración 64: Arquitectita de la Aplicación Móvil Android
La arquitectura consiste en la integración de la aplicación móvil Android con base de
datos no relacional (MongoDB), mediante Yii Framework que está compuesto por JSON para el
manejo de servicios web y PHP.
57
3.2.2 Estructura de Aplicación Móvil
Ilustración 65: Estructura Aplicación Móvil Android
En la carpeta manifest se encuentra los siguientes archivos:
AndroidManifest.xml.- describe los aspectos principales de la aplicación y cada uno de
sus componentes. Aquí se especifica el nombre, el icono, la versión de la aplicación, la versión
mínima del SDK y los permisos que se van a ocupar, estos son:
<!--Para acceder a internet-->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<!--Para obtener la ubicación a través del proveedor de ubicación GPS-->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
Para utilizar las API’s de Google Maps se requiere una API KEY que se introduce en el
archivo Android manifest la misma que obtuvo desde su página de desarrolladores.
https://console.developers.google.com/
58
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="@string/google_maps_key" />
En la carpeta java se encuentra todos las clases.java que contiene el código fuente de cada
actividad, estas clases han sido clasificadas en paquetes para tener un orden. A continuación se
describe cada paquete que conforma esta aplicación móvil:
ayuda.- contiene la clase de la actividad ayuda que muestra la información de la aplicación.
categorias.- en su interior se encuentran las clases utilizadas para el manejo de categorías.
google_maps.- posee las clases requeridas para la implementación de Google Maps.
inicio.- tiene todas las clases que cargan el inicio, pantalla principal y validaciones de
conexión a internet y activación de GPS de la aplicación.
markers.- contiene todas las clases de actividades y fragmentos que muestra la
información y cotos del servicio seleccionado o punto de interés.
paginas.- posee las clases para poder abrir un enlace externos de páginas web requeridas
en la aplicación.
recursos.- en su interior se encuentran clases que están compuesta por funciones que
controlan procesos como validaciones de campos, enviar y recibir información, cargar
imágenes, entre otros.
usuarios.- tiene todas las clases que sirven para el registro e inicio de sesión del usuario,
existen dos maneras de hacerlo: la primera es mediante Facebook y la segunda es la forma
tradicional mediante un correo electrónico y contraseña.
En la carpeta res está conformada por subcarpetas en donde se encuentran todas la
interfaces, imágenes, iconos, nombres, colores, estilos, animaciones las mismas que se
describen a continuación:
anim.- se manejan todas las animaciones en un archivo XML que existen en la aplicación.
59
drawable.- posee un directorio con carpetas denominadas drawable-mdpi, drawable-hdpi,
drawable-xhdpi, drawable-xxhdpi, drawable-xxxhdpi en donde se manejan todas las
imágenes de la aplicación respetando su estándar de tamaños descrita en el apartado
diseño de interfaz aplicación móvil imágenes.
layout.- contiene todos la interfaces de la aplicación en archivos XML.
menu.- tiene cada uno de los menús en archivos XML en donde se declaran las opciones de
menú a utilizar.
mipmap.- está compuesta por un directorio en donde tenemos las siguientes carpetas:
mipmap-mdpi, mipmap-hdpi, mipmap-xhdpi, mipmap-xxhdpi, mipmap-xxxhdpi en donde
se manejan todos los iconos de la aplicación respetando su estándar de tamaños descrita
en el apartado diseño de interfaz aplicación móvil iconos.
values.- contiene los archivos XML que se describen a continuación:
o colors.- contiene todos los colores de las vistas (botones, layout, fragment,
botones, imágenes, texto, etc).
o dimens.- se manejan todas las dimensiones de las vistas.
o strings.- se establece el nombre de cada vista utilizada, es importante utilizar
esta función ya que en cualquier momento se puede cambiar el idioma a toda la
aplicación.
o styles.- se maneja los estilos personalizados de determinadas vistas que lo
requieran y también el estilo base de todo la aplicación.
Por ultimo tenemos el archivo gradle que contiene la información de proyecto como la
versión soportada, su versión de desarrollo y todas las librerías requeridas en este proyecto.
3.2.3 Desarrollo de Interfaz - Aplicación Móvil
Las distintas actividades que componen la aplicación móvil son creadas en archivos XML
que está compuesta por objetos que se llaman vistas como por ejemplo fragmentos o cuadro
de texto, los cuales facilitan su personalización como por ejemplo cambiar los colores, tamaños
y manejar estilos. También en algunos casos es posible reutilizar las interfaces. En nuestro
60
proyecto hemos utilizado activity_google_maps.xml en varias actividades que son las clases de
java.
Ilustración 66: Desarrollo Interfaz Android Geo Servicar Reutilización
También se implementó Material Desing en donde existe una librería oficial de Google
para el sistema operativo Android que se carga mediante el archivo build.gradle escribiendo en
sus dependencias compile 'com.android.support: design: 23.1.1’. En nuestra interfaz de usuario
hemos tratado de sacarle el máximo provecho tanto de manera visual como de manera
funcional utilizando sus menús laterales, transiciones y botones flotantes. Al desplegar con el
dedo la pantalla hacia la izquierda aparecerá el menú lateral.
Ilustración 67: Desarrollo Interfaz Android Menú Deslizante
Para realizar el efecto de menú deslizante en la parte izquierda se utilizó NavigationView.
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
61
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header"
app:menu="@menu/navigation_drawer_items" />
Al desplegar el dedo hacia arriba la imagen se ocultara quedando solo el titulo visible.
Ilustración 68: Desarrollo Interfaz Android Transición Hacia Arriba
Para realizar la transición hacia arriba se utilizó un conjunto de vistas que está compuesta por:
Coordinator Layout.- es el contenedor principal de todas las vistas.
AppBarLayout.- es una barra que contendrá:
Collapsing Toolbar Layout.- se encarga de realizar la transición.
Image View.- es la imagen para la transición.
Toolbar.- es la barra de menú en donde se quedara el título.
Nested Scroll View.- es el scroll compatible para utilizar con Collapsing Toolbar Layout y
se pueda realizar la transición, aquí se puede implementar vistas requeridas como listas
compuestas por imágenes, texto y botones para realizar el desplazamiento de abajo
hacia arriba o viceversa.
62
A continuación se muestra su estructura:
<android.support.design.widget.CoordinatorLayout
------------------------- >
<android.support.design.widget.AppBarLayout
------------------------ >
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
-------------------------
app:layout_collapseMode="parallax"
android:src="@drawable/fondo2"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
-------------------------
android:fillViewport="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
63
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Por ultimo tenemos el Floating Action Button que es un botón flotante que puede ser
personalizado en cualquier lugar de la pantalla. Hay que tener en cuenta que para poder
utilizarlo siempre su contendor principal tiene que ser Coordinator Layout.
Ilustración 69: Desarrollo Interfaz Android Floating Action Button
<android.support.design.widget.FloatingActionButton
android:id="@+id/fabBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
android:src="@drawable/ic_play_dark"
app:borderWidth="0dp"
app:fabSize="normal" />
3.2.3.1 Iconos
Los iconos según los tamaños descritos en el diseños estético deben estar dentro del
directorio del proyecto res/ en donde previamente se debe generar cinco carpetas con los
nombres de mipmap-mdpi, mipmap-hdpi, mipmap-xhdpi, mipmap-xxhdpi, mipmap-xxxhdpi.
3.2.3.2 Imágenes
Al igual que los iconos las imágenes se manejan con el mismo estándar en sus tamaños
con la diferencia que deben estar en cinco carpetas llamadas drawable-mdpi, drawable-hdpi,
64
drawable-xhdpi, drawable-xxhdpi, drawable-xxxhdpi. Estas carpetas deben estar dentro del
directorio del proyecto res/.
3.2.3.3 Textos
El menú lateral Drawer Layout en sus textos se usa el estilo
ThemeOverlay.AppCompat.Dark, mientras que en los demás textos se usa el estilo base de la
aplicación que tiene de fondo window_background que es de color blanco.
<!—Tema Base de la aplicación. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/primaryColor</item>
<item name="colorPrimaryDark">@color/primaryDarkColor</item>
<item name="colorAccent">@color/accent</item>
<item name="android:windowBackground">@color/window_background</item>
</style>
3.2.3.4 ProgressBar
Utiliza un estilo denominado Theme.Splash:
<style name="Theme.Splash" parent="android:Theme">
3.2.3.5 ProgressDialog
Esta vista se implementa invocando al método PogresDialog.show y se envía como
parámetro el contexto de la actividad, el título, el mensaje y dos valores booleanos con el valor
de false. Esto se lo realiza desde el código fuente.
3.2.3.6 Barra de Menú
Para su implementación se utilizó la vista llamada Toolbar diseñada en un archivo XML
para que sea reutilizada en varias actividades o fragmentos. Utiliza el estilo base de la
aplicación descrita anteriormente en la sección textos.
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
65
3.2.3.7 Barra Menú Izquierdo
Está compuesta por varios archivos XML y los diseños, colores y tamaños y fondos están
personalizados en nav_header que es invocado por NavigationView. Entre los archivos que lo
componen tenemos:
o DrawerLayout.- contiene todas las vistas de la actividad principal.
o NavigationView.- contiene al nav_header que está compuesto por vistas, el
LinearLayout es el contenedor principal y utiliza el estilo
style/ThemeOverlay.AppCompat.Dark, también invoca al
menu/navigation_drawer_items que contiene todos los textos de menú.
Ilustración 70: Desarrollo Interfaz Android Drawer Layout
Toda esta información acerca del Drawer Layout con Material Design para su
implementación fue obtenida del siguiente enlace:
http://www.hermosaprogramacion.com/2015/06/navigationview-navigation-drawer-con-material-
design/
3.2.3.8 Botones
También utiliza el estilo base de la aplicación descrita anteriormente en la sección textos
denominado <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> y su
tamaño es normal utilizando los atributos de largo que se ajuste a su tamaño (match_parent) y
de ancho que se extienda todo el ancho del contenedor principal (wrap_content). En este
apartado se creó en el directorio /res/drawable del proyecto un estilo personalizado llamado
66
button_background que consiste en que cuando el usuario selecciona el botón cambia de color.
A continuación se describen cada uno de los eventos con su respectivo color:
3.2.3.9 Fondos de Actividades y Fragmentos
El fondo por defecto implementado en el estilo Base de es de color blanco que será
utilizado por todas las actividades y fragmentos de la aplicación, también hemos implementado
fondos personalizados con el color accent. El tamaño de los fondo ocupan toda la pantalla tanto
en anchura como el largo utilizando en el archivo XML el atributo match_parent. A continuación
se muestra varias actividades que tienen fondo con el color accent y con imágenes que están
sobre puestas:
o Fondo Actividad Splash Screen
Ilustración 71: Desarrollo Interfaz Android Fondo Actividad Splash Screen
o Fondo Fragmento Inicio Fragment
Ilustración 72: Desarrollo Interfaz Android Fondo Inicio Fragment
o Fondo Menú Lateral
Ilustración 73: Desarrollo Interfaz Android Fondo Menú Lateral
67
o Fondo Actividad Categorías
Ilustración 74: Desarrollo Interfaz Android Fondo Actividad Categorías
o Fondo Actividad Marker
Ilustración 75: Desarrollo Interfaz Android Fondo Actividad Marker
3.2.3.10 Validaciones
Para las validaciones de los campos en donde se ingresa información se utilizó
TextInputLayout.
68
4 Pruebas
Para la elaboración de las pruebas se considera cada evento correspondiente a los
diferentes casos de uso establecidos en el diseño de la plataforma, de manera que la prueba de
funcionalidad tanto para el sitio web como la aplicación móvil tendrá una calificación tal se
describe a continuación:
Puntaje Descripción Abreviatura
9-10 Excelente E
8-7 Muy Bueno MB
6-5 Bueno B
3-4 Regular R
1-2 Necesita Mejorar NM
Tabla 11: Tabla de Puntación de Pruebas
4.1 Pruebas de Funcionalidad
4.1.1 Usuarios
Evento Descripción Error Funcionalidad
Registrar usuario en el
sitio web
Se registrar el usuario
desde el sitio web
ninguno 8 (MB)
Iniciar sesión en el sitio
web
El usuario inicia sesión
desde el sitio web
ninguno 8 (MB)
Registrar usuario en
aplicación móvil
Se registrar el usuario
desde la aplicación
móvil
ninguno 8 (MB)
Iniciar sesión en
aplicación móvil
El usuario inicia sesión
desde la aplicación
móvil
ninguno 8 (MB)
Inicio de sesión con
Se utiliza Facebook para
el inicio de sesión o
registro del usuario
ninguno 8 (MB)
Olvido de contraseña Se envía el correo ninguno 8 (MB)
69
electrónico al usuario
para restablecer la
contraseña
Tabla 12: Tabla de Prueba de Funcionalidad de Usuarios
4.1.2 Servicios
Evento Descripción Error Funcionalidad
Ingresar servicios en
plataforma web
Se ingresan servicios
desde la plataforma
web.
ninguno 8 (MB)
Consultar servicios en
aplicación móvil
Se cargan en el mapa
todos los servicios
disponibles en la
plataforma
ninguno 8 (MB)
Consultar información
de servicio
Se muestra la
información del servicio
seleccionado
Si el servicio está mal
ingresado desde la
plataforma se produce
una excepción
7 (MB)
Consultar costos de
subservicios
Visualiza la información
de descripcion y costos
de los subservicios
ninguno 8 (MB)
Marcar como favoritos Se marca como favorito
a un servicio
ninguno 8 (MB)
4.1.3 Categorías
Eventos Descripción Error Funcionalidad
Ingreso de categorías
en plataforma web
Se ingresan las
categorías con todos los
datos requeridos
ninguno 8 (MB)
Cargar categorías en
aplicación móvil.
Se visualizan todas las
categorías disponibles
en la plataforma
ninguno 8 (MB)
Cargar todos los Se muestran en el mapa ninguno 8 (MB)
70
servicios de una
categoría.
todos los servicios
pertenecientes a la
categoría seleccionada
Tabla 13: Tabla de Prueba de Funcionalidad de Servicios
4.1.4 GPS y Google Maps
Eventos Descripción Error Funcionalidad
Posicionamiento de mi
ubicación
Se encarga de buscar las
coordenadas de
longitud y latitud de mi
ubicación
En ocasiones la posición
no llega a ser correcta
7 (MB)
Cargar servicios en
mapa
Muestra los markers
todos los servicios
disponibles en la
plataforma
ninguno 8 (MB)
Trazar ruta entre dos
puntos en la aplicación
móvil.
Traza la ruta en la
aplicación móvil pero
no cuenta con
navegación con voz
En el caso de no tener
acceso a internet se
produce una excepción.
7 (MB)
Trazar ruta entre dos
puntos mediante
Google Maps.
Se inicia la navegación
con voz en Google
Maps en donde se
envían las coordenadas
de longitud y latitud de
los dos puntos.
ninguno 9 (E)
Navegación en Street
View Panorama
Realiza navegación
panorámica con
imágenes dentro de la
ciudad de Cuenca
ninguno 9 (E)
Tabla 14: Tabla de Prueba de Funcionalidad de GPS y Google Maps
4.1.5 Consultar Matrícula
Eventos Descripción Error Funcionalidad
71
Acceder a la página del
SRI
Se accede a la página en
donde se consulta la
matrícula
Cuando el enlace de la
página cambie ya no se
puede acceder desde la
aplicación móvil
7 (MB)
Tabla 15: Tabla de Prueba de Funcionalidad de Consultar Matrícula
4.1.6 Conexión a Internet
La plataforma Geo Servicar trabaja con conexión a internet ya sea por wifi o plan de datos con
velocidad 4G. En la aplicación móvil se requiere contar necesariamente con acceso a internet
en todo momento. En la pruebas de todos los procesos descritos previamente se requiere tener
una conexión a internet normal ya que de eso dependerá el acceso y tiempo de respuesta de
los datos. Si la conexión de internet es baja o presenta fallos en la latencia la plataforma
Geoservicar no podrá trabajar de manera normal y presentara incoherencias en sus procesos
5 Corrección de Errores
Tipo de Error Descripción Solución
1 Conexión lenta a
internet.
El servidor, encuentra que la
petición hechas, son demasiado
lentas, con lo que en 10s, termina
la solicitud, esto es debido a una
conexión de internet con fallas.
Devuelve un mensaje en el que indica
que se debe revisar la conexión a
internet.
2 Versión de Jquery
y Google Maps
Api.
Las versiones JQuery y Google
Maps Api, de diferentes versiones
no funcionan dentro del
framework Yii2, provocando
errores en las funciones internar
de la plataforma.
Se actualizo la versión de JQuery y
Google Maps Api, y las funciones donde
se usaban esta última.
3 Google Maps Api
con rutas
incompletas o
inexistentes.
Las rutas generadas puedes estar
en su versión beta o de desarrollo,
con lo que no son correctas,
además ciertas rutas no existen.
Se informa al usuario de que la ruta que
se está presentando es una estimación o
que no existen rutas.
En caso de actualización de rutas, el api
de Google Maps las mostrara
72
actualizadas también para la
plataforma.
4 Posicionamiento
de coordenadas de
ubicación actual
en el mapa.
La posición de coordenadas de
latitud y longitud de ubicación
actual no son correctas.
El usuario debe volver a presionar el
botón mi ubicación actual para volver a
buscar la ubicación correcta.
5 Excepciones en
algunos procesos
de la aplicación
móvil.
Se presenta algunos fallos por
datos requeridos en la aplicación
móvil.
Se controlan dentó de un try and catch
en donde si se produce un error se
notifica al usuario mediante un mensaje
en pantalla sobre de que trata dicho
error.
6 Cambio de enlace
por parte de la
página del SRI
En el momento de que el SRI
cambien el enlace para consultar
la matricula ya no se podrá
ingresar.
EL desarrollador debe cambiar el enlace
en el código fuente de la clase
implementada para la consulta de la
matrícula.
Tabla 16: Tabla de Corrección de Errores
73
6 Conclusiones
Se ha logrado alcanzar el objetivo propuesto para este trabajo, pues se ha desarrollado
la aplicación “Geoservicar” que permite la geolocalización de servicios automotrices por
medio de tecnologías y herramientas web y móvil (Android) que brinda al usuario la
información relativa a ubicación, características y ruteo necesarios para llegar a dichos
servicios. La plataforma web se encuentra disponible en el enlace:
http://www.motodelivery.com.ec/busca_servicios/frontend/web/ La aplicación móvil
desde Dropbox en el siguiente vinculo:
https://www.dropbox.com/sh/btuslulbruyl4t0/AADi7MOa2wW79ZjAbu4sNYkVa?dl=0
En el orden tecnológico se ha conseguido desarrollar "Geoservicar" utilizando la
plataforma Google Maps gracias a que Google Abiertos sus funciones mediantes API’s
las cuales han sido aprovechadas en este proyecto.
La aplicación móvil fue diseñada para usarse con conexión a internet, sin embargo para
establecer la ubicación actual es posible trabajar sin conectividad, gracias a que los
equipos móviles disponen de antena GPS. En futuros desarrollos podría inclusive
incorporarse un servicio de descarga de los datos para posteriormente trabajar sin
conexión.
El diseño de la aplicación en el sistema operativo Android desde versión 4.2 (Jelly Bean)
API 17 hasta las versión actual Android 6.0 (Marshmallow) API 23, permite un resultado
funcional y estético lo cual ha facilitado el desarrollo de este trabajo. Los requerimientos
y demanda de velocidad para gestión de los datos dan cuenta de la bondad de utilizar
base de datos no relacionales.
74
Podemos reconocer la importancia que tiene el uso de base de datos no relaciones y la
tecnología móvil, lo que nos lleva a pensar en la conveniencia de incorporar su estudio
dentro del pensum de la carrera de Ingeniería en Sistemas y Telemática.
75
Glosario
Ajax (JavaScript Asíncrono y XML): Capacidades para los navegadores para hacer peticiones al
servidor sin a necesidad de recargar la pagina. (Hidalgo, 2008)
Android: Sistema operativo basado en Linux, para dispositivos móviles con pantalla táctil. (Sanz
, Saucedo, & Torralbo)
API: Conjunto de funciones simples que permiten al acceso a las funcionalidades de una
aplicación mas compleja, por medio de un lenguaje de programación. (Kioskea, 2014)
Aplicación móvil: App (en inglés), aplicación informática que puede ser ejecutada en cualquier
dispositivo móvil como celulares, tablets, ect. (San Mauro Martín, González Fernández, &
Collado Yurrita)
Componentes: Conjunto de partes de diferentes tecnologias, que unidas permiten una
funcionalidad y pueden ser reutilizada en diferentes lugares de la plataforma web. (Mozila
Developer Network, 2016)
Cross-site falsificación: Vulnerabilidad de aplicaciones web, donde la víctima sin saberlo, hace
peticiones a una plataforma Web vulnerable, sin darse cuenta, esto por ejemplo por medio de
una función script en su navegador, con con pedidos GET o POST. (Monteagudo, 2010)
Cross-site scripting (XSS): Los valores de las variables que se intercambian entre dos páginas en
la plataforma Web, pueden ser modificados, esto sin un control permitiría que cualquier
persona acceda a información confidencial. (Pérez, 2015)
CRUD: Lista de funciones que permiten la administración de una colección o tabla de la base de
datos, como: crear, consultar, actualizar y eliminar. (Lafosse, 2010)
Geolocalización: También denominada georreferenciación, implica el posicionamiento que
define la localización de un objeto en un sistema de coordenadas, por medio de navegadores,
telefonía móvil, tablets, etc. (Velazco Florez & Joyanes Aguilar)
76
GPS: Dispositivo que permite la optencion de información sobre la Geolocalizacion de un lugar.
(Kaplan & Hegarty, 2006)
Inyección SQL: Consiste en insertar código malicioso en las cadenas creadas para una consulta a
base de datos, estas normalmente son hechas por medio de una consulta query (TechNet
Microsoft, s.f.)
JSON: Formato para intercambio de datos, en las estructuras de un objeto, que es un conjunto
desordenado de pares nombre/valor, un arreglo que es una colección de valores de cualquier
tipo de dato como string, doublé, etc. (ORG)
No SQL: Hace referencia a base de datos no relacionales, donde las tablas son creadas sin un
esquema especifico para poder agregar datos, esto permite la escalabilidad de la información y
además permite consultas mas rapidas de información. Este tipo de base datos son usadas por
sistemas que deben manejar grandes volúmenes de datos y usuarios. (Mongo DB, 2016)
Objeto: Es una representacion de una cosa, en informatica de un registro; un objeto posee
atributos y funciones para accede a su informacion (Pavón, 2007)
Open Source: Software distribuido y desarrollado libremente, que permite a otros usuarios
igualmente su modificacion y uso de manera libre (Opersource ORG, 2016)
Plataforma web: Está compuesta por un Conjunto de programas y sistemas, que permiten el
funcionamiento de sitio web, como son el servidor web, base de datos, el intérprete de
programación, etc. (Barzanallana)
Ruta (Google Maps):
Servicios automotrices: Conjunto de actividades para la satisfacción de clientes propietarios de
automóviles. (Gozales Moreno, Del Rio Gomez, & Dominguez Martinez)
XML: Estandar para el uso de etiquetas personalizadas usadas para la descripción y
organización de datos, que pueden ser procesados, almacenados, transmitidos,
procesada o visualizados por diversos tipos de aplicaciones y dispositivos. (Mundo Linux, n.d.)
77
Bibliografía
Alfonso, A. N. (01 de 06 de 2008). Goma. Obtenido de Google Maps para la Optimización de
Rutas - Univerdidad de la Laguna: http://www.goma.ull.es/GMOR/Memoria-GMOR.pdf
Android Developers. (15 de 01 de 2016). Obtenido de
http://developer.android.com/intl/es/tools/studio/index.html:
http://developer.android.com/intl/es/tools/studio/index.html
Arroyo Vázquez, N. (06 de Noviembre de 2013). E-Prints Library & Information science.
Obtenido de http://eprints.rclis.org/20495/: http://eprints.rclis.org/20495/
Arroyo, N. (2011). Información en el Móvil. Obtenido de Ebrary: http://www.ebrary.com
Barzanallana, R. (s.f.). Unversidad de Murcia. Obtenido de
http://www.um.es/docencia/barzana/DIVULGACION/INFORMATICA/Historia-desarrollo-
aplicaciones-web.html
Bascon Pantoja, E. (s.f.). Sistema OJS UCBSP-Cochabamba. Obtenido de Sistema OJS UCBSP-
Cochabamba:
http://ucbconocimiento.ucbcba.edu.bo/index.php/ran/article/download/84/81
Cancela García, L., & Ostos Lobo, S. (22 de Abril de 2014). Software de Comunicaciones.
Obtenido de https://sites.google.com/site/swcuc3m/home/android/generalidades/2-2-
arquitectura-de-android
Date, C. (23 de 11 de 2015). Obtenido de
https://books.google.com.ec/books?hl=es&lr=&id=Vhum351T-
K8C&oi=fnd&pg=PA1&dq=definicion+de+base+de+datos&ots=fyKbOT9a8o&sig=CVn0e-
v3chdcCsgmnK0lSfERA5I#v=onepage&q=definicion%20de%20base%20de%20datos&f=f
alse
Fernández Romero, Y., & Díaz González, Y. (12 de 10 de 2015). Revista Digital de las Tecnologias
de la Informacion y las Telecomunicaciones. Obtenido de
http://revistatelematica.cujae.edu.cu/index.php/tele/article/view/15/10
78
Fuentes Manzano, G. E., & Vasco Villamarín, E. D. (12 de 10 de 2015). Repositorio Digital ESPE.
Obtenido de http://repositorio.espe.edu.ec/handle/21000/10099
Gauchat, J. D. (2012). El gran libro de HTML5, CSS3 y Javascript (Primera ed.). Barcelona:
Marcombo.
Gozales Moreno, M., Del Rio Gomez, C., & Dominguez Martinez, J. M. (s.f.). Dialnet. Obtenido
de Dialnet:
https://www.google.com.ec/url?sa=t&rct=j&q=&esrc=s&source=web&cd=8&cad=rja&u
act=8&ved=0ahUKEwi8tbqevOfLAhWBmx4KHa4yC4UQFghKMAc&url=https%3A%2F%2F
dialnet.unirioja.es%2Fdescarga%2Farticulo%2F1317365.pdf&usg=AFQjCNEI9JDNQImXi4
XwK8JTJ4Ewo83LNA&sig2=2MLxx7ejxd
Gutiérrez, J. (12 de 10 de 2015). Universidad de Sevilla Departamento de Lenguajes y Sistemas
Informáticos. Obtenido de
http://www.lsi.us.es/~javierj/investigacion_ficheros/Framework.pdf
Hidalgo, L. (5 de 08 de 2008). Obtenido de
https://developer.mozilla.org/es/docs/AJAX/Primeros_Pasos
Instituto de Estadística y Censos (INEC). (2014). Instituto de Estadística y Censos (INEC).
Recuperado el 21 de 03 de 2016, de http://www.ecuadorencifras.gob.ec/encuesta-de-
condiciones-de-vida-ecv/
Joyanes Aguilar, L. (2012). Computación en la Nube: estrategias de Cloud Computing en las
empresas. Obtenido de http://site.ebrary.com:
http://site.ebrary.com/lib/uasuaysp/docDetail.action?docID=10741664&p00=bases+de
+datos+en+la+nube
Kaplan, E., & Hegarty, C. (2006). Understanding GPS. Artech House INC.
Kioskea. (06 de 2014). Obtenido de http://es.ccm.net/contents/300-lenguajes-de-
programacion-ndash-api
Lafosse, J. (2010). Struts 2. Barcelona: Ediciones ENI.
79
Malave Polanco Kristel, B. T. (19 de Julio de 2011). "Android" el sistema operativo de Google
para dispositivos móviles. Negotium, 79-96. doi:1856-1810
Mew, K. (2015). Android 5 Programming. Birmingham B3 2PB, UK.: Packt Publishing Ltd.
Obtenido de www.packtpub.com
Mongo DB. (2016). Obtenido de https://www.mongodb.com/nosql-explained
Mongolab. (2014). MongoLab: MongoDB-as-a-Service. Obtenido de https://mongolab.com:
https://mongolab.com/company/
Monteagudo, D. (9 de 04 de 2010). Securityartwork. Obtenido de
http://www.securityartwork.es/2010/04/09/owasp-top-10-v-falsificacion-de-peticion-
en-sitios-cruzados-csrf/
Mozila Developer Network. (19 de 03 de 2016). Obtenido de https://developer.mozilla.org/en-
US/docs/Web/Web_Components
Mundo Linux. (s.f.). Obtenido de http://www.mundolinux.info/que-es-xml.htm
Opersource ORG. (2016). Obtenido de https://opensource.org/
ORG, J. (s.f.). JSON ORG. Obtenido de http://www.json.org/json-es.html
Pavón, J. (08 de 2007). Universidad Complutence Informática. Obtenido de
https://www.fdi.ucm.es/profesor/jpavon/poo/1.1.Objetos%20y%20Clases.pdf
Pérez, I. (29 de 04 de 2015). We Live Security. Obtenido de http://www.welivesecurity.com/la-
es/2015/04/29/vulnerabilidad-xss-cross-site-scripting-sitios-web/
Robledo Sacristan, C., & Robledo Fernández, D. (2012). Programación en Android (Susana Perez
Marín ed.). España. Recuperado el 24 de Abril de 2014, de http://goo.gl/uJfoIv
San Mauro Martín, I., González Fernández, M., & Collado Yurrita, L. (s.f.). Scielo. Obtenido de
Scielo: http://www.aulamedica.es/nh/pdf/7398.pdf
SANABRIA, E. C. (2012). Introducción a Java .
80
Sandra Yanet Velazco Florez, L. J. (28 de Mayo de 2012). GISSIC Bogota. Obtenido de
Tendencias en Geolocalización para el 2012:
https://gissicbogota.wordpress.com/2012/05/28/tendencias-en-geolocalizacic3b3n-
para-el-2012-pdf/
Sanz , D., Saucedo, M., & Torralbo, P. (s.f.). ITDOCS. Obtenido de ITDOCS: http://www.it-
docs.net/ddata/18.pdf
Sharp, R., & Lawscon, B. (2012). Introducing.HTML5 (Primera ed.). Berkeley: New Riders.
Tamayo, P., & Brito, D. (2011). Universidad de Israel. Recuperado el 10 de 01 de 2016, de
http://repositorio.uisrael.edu.ec/handle/47000/140
TechNet Microsoft. (s.f.). Obtenido de https://technet.microsoft.com/es-
es/library/ms161953(v=sql.105).aspx
Velazco Florez, S. Y., & Joyanes Aguilar, L. (s.f.). El Agora de Latinoamerica. Obtenido de El
Agora de Latinoamerica: https://gissicbogota.wordpress.com/2012/05/28/tendencias-
en-geolocalizacic3b3n-para-el-2012-pdf/
ANEXOS
Anexo 1: Manual de Usuario - Página Web
1
Anexo 1: Manual de Usuario – Página Web
Anexo 1: Manual de Usuario - Página Web
2
1. Manual de Usuario - Página Web
La plataforma web se encuentra dividida para el acceso de 4 tipos diferentes de usuarios,
como son:
Usuarios públicos: Son personas que accedan a la web y usar sus componentes
básicos sin la necesidad de registrarse en la plataforma.
Usuarios registrados: Estos podrán acceder a la información básica de la plataforma,
además manejar su cuenta de usuarios y administración de servicios favoritos.
Proveedores de servicios: Los servicios podrán ser publicados por cualquier usuario
registrado en la plataforma, estos deberán ingresar nuevos servicios y se generara
automáticamente la petición de revisión a los superadministradores. Los
proveedores de servicios también pueden acceder a la administración de los mismos
y el manejo de su cuenta de usuario.
Superadministradores: Son los encargados del manejo de la plataforma, como
manejo de categorías, administración de publicación de servicios, desactivación de
cuentas, etc. Además también pueden administrar servicios.
Para acceder a la plataforma web se debe ingresar al siguiente link:
http://www.motodelivery.com.ec/busca_servicios/frontend/web/
1.1. Publica.
Al entrar a la plataforma web, se podrá acceder como usuario visitantes, sin necesidad de
registro o inicio de sesión.
Ilustración 1: Página de Inicio
Anexo 1: Manual de Usuario - Página Web
3
El usuario deberá permitir a la web, obtener su ubicación.
Ilustración 2: Permitir Ubicación
Con la ubicación, se puede dirigir el mapa y mostrar los servicios cercanos disponibles
para el usuario.
Ilustración 3: Ubicación Usuario y Servicios Cercanos
Los servicios disponibles en la plataforma están representados por icono correspondiente
a su categoría:
Concesionario
Gasolinera
Anexo 1: Manual de Usuario - Página Web
4
Latonería
Lavadora
Mecánica
Vulcanizadora
Los servicios pueden ser filtrados según la categoría a la que el usuario desea:
Ilustración 4: Filtros Busqueda de Servicios
Para acceder al nombre del servicio, el usuario puede ubicar el cursor sobre el icono y
para acceder a más información deberá hacer click, sobre el icono.
Ilustración 5: Escoger Servicio
Con esta acción, se presentara la información básica dl servicio, ruta desde el punto
donde se encuentra el usuario.
Anexo 1: Manual de Usuario - Página Web
5
Ilustración 6: Información de Servicio
Detalle general de servicio: En la parte superior se puede observar la información básica
del servicio como: dirección, datos de contacto.
Ilustración 7: Datos Basicos de Servicio
El detalle completo del servicio podrá divisarse en otra pantalla al hacer click en “Ver
detalle”, ejemplo:
Anexo 1: Manual de Usuario - Página Web
6
Ilustración 8: Detalle de Servicio
Ruta: Entre la ubicación actual del usuario y la ubicación del servicio, se muestra una de
las rutas disponibles en Google Maps.
Ilustración 9: Ruta de Servicio
El usuario escoger las diferentes rutas disponibles, dirigiéndose a “Rutas sugeridas” y
haciendo click sobre cualquiera de ellas:
Ilustración 10: Rutas Servicios
Google Maps ofrece el servicio de detalle de la ruta, con las calles a seguir, giros y
distancia que debe recorrer el usuario, esto se encuentra detallado de la siguiente manera por
ejemplo:
Anexo 1: Manual de Usuario - Página Web
7
Ilustración 11: Detalle de Ruta
Las rutas disponibles también pueden ser filtradas según el medio de transporte:
Ilustración 12: Transporte para Ruta
Por ejemplo si filtramos los servicios por la categoría “Concesionario” y el transporte
“Caminando”:
Ilustración 13: Filtros de Ruta
La ruta tomara en cuenta lugares por donde se considera el usuario puede atravesar
caminando.
Anexo 1: Manual de Usuario - Página Web
8
Ilustración 14: Ejemplo Ruta Caminando
En caso de que la ruta sugerida este en versión beta, se presentara un mensaje de
advertencia.
Ilustración 15: Ejemplo Error en Rutas
1.2. Usuarios registrados.
Los usuarios podrán acceder a las funcionalidades básicas de la plataforma, pero como
manejo de la cuenta de usuario y favoritos, requieren el registro e inicio de sesión, por medio
del correo electrónico y contraseña registrados:
Anexo 1: Manual de Usuario - Página Web
9
Ilustración 16: Inicio de Sesión Usuarios
Una vez iniciada la sesión, el usuario podrá acceder a la edición de su cuenta y manejo
de servicios favoritos:
Ilustración 17: Ménu Usuarios
La cuenta del usuario maneja los datos básicos del usuario como:
Ilustración 18: Editar Datos Cuenta
Los servicios favoritos del usuario, se muestran en una lista.
Ilustración 19: Lista Servicios Favoritos
Anexo 1: Manual de Usuario - Página Web
10
1.3. Proveedores de servicios
Los usuarios que deseen publicar sus servicios deberán iniciar sesión para acceder a las
diferentes funcionalidades.
Ilustración 20: Inicio de Sesión Proveedores de Servicios
Administración de servicios: Los usuarios pueden administrar sus servicios. En la opción
del menú principal al hacer click en “Servicios” se podrá ver la lista de servicio que el usuario ha
creado.
Ilustración 21: Listado Servicios
Si desea crear más servicios, deberá hacer click en “Agregar servicios”, luego visualizara
la siguiente pantalla para la creación de un servicio paso a paso.
Paso 1: El usuario debe ingresar los datos básicos del servicio y hacer click en
“SIGUIENTE” para crearlo, en este punto el servicio no será publicado en la plataforma, hasta
que todos los datos de los siguientes pasos sean ingresados.
Anexo 1: Manual de Usuario - Página Web
11
Ilustración 22: Datos Básicos Servicio
Paso 2: El horario de atención del servicio, que puede ser cualquier día y manejo de 2
jornadas laborable, así se podrá informar al usuario si el servicio está abierto o no el momento
de su consulta.
Ilustración 23: Horario de Atención
Paso 3: Los su servicios representan de manera detallada al servicio, por ejemplo
“Lavado completo $10”.
Anexo 1: Manual de Usuario - Página Web
12
Ilustración 24: Subservicios
Paso 4: La dirección y ubicación del servicio, son la parte más importante, ya que sirven
al usuario para dirigirse al lugar deseado.
Para mostrar los servicios en el mapa, se necesita las coordinas de ubicación del
servicio, por lo que el usuario deberá hacer click en el mapa en el punto exacto donde su local
esta.
Ilustración 25: Ubicación de Servicio
Paso 4: En este último paso, el usuario deberá subir entre una a cuatro imágenes, en
caso de hacerlo el servicio quedara como incompleto y no será enviado a revisión para su
publicación.
Anexo 1: Manual de Usuario - Página Web
13
Las imágenes ingresadas servirán como referencia y mostradas a todos los usuarios que
accedan a la plataforma.
Ilustración 26: Imagen de Servicio
1.4. Superadministrador
Los usuarios de tipo superadministrador, deberán iniciar sesión para acceder a las
funcionalidades, que son específicas de su tipo de usuario. Para iniciar sesión debe ingresar su
correo y contraseña.
Ilustración 27: Inicio de Sesión Superadministrador
El menú principal está formado por las funcionalidades a las que los
superadministradores pueden acceder, como son:
Cuenta: Administración de datos personales y contraseña.
Servicios: Manejo de servicios creador por todos los superadministradores de la
plataforma.
Categorías: Las categorías son usada para la clasificación de los servicios, aquí se deben
ingresa nuevas categorías y toda la información necesaria de ellas.
Anexo 1: Manual de Usuario - Página Web
14
Usuarios: Presenta una lista de usuarios registrados en la plataforma, donde se puede
desactivarlos y verificar su información básica.
Ilustración 28: Menú Superadministrador
Ilustración 29: Lista Servicio Superadministrador
El ingreso de nuevos servicios por parte del superadministrador, se realiza de la misma
manera que los administradores o proveedores de servicios:
Ilustración 30: Ingreso Servicios Superadmin
Anexo 1: Manual de Usuario - Página Web
15
El superadministrador puede ingresar nuevas categorías a manejarse en la plataforma,
al igual que su edición o eliminación:
Ilustración 31: Listado Categorías
Ilustración 32: Agregar Nueva Categoría
También se puede acceder al listado de usuarios registrados en la plataforma, para
verificación de su cuenta y su desactivación:
Ilustración 33: Listado Usuarios
Anexo 1: Manual de Usuario - Página Web
16
Se permite un manejo de cuenta, donde se puede cambiar los datos y contraseña del
superadministrador, accediendo a la parte superior de la pantalla, donde además puede
realizar el cierre de sesión.
Ilustración 34: Manejo Cuenta Superadministrador
Anexo 2: Manual de Usuario - Aplicación Móvil
1
Anexo 2: Manual de Usuario - Aplicación Móvil
2. Manuales de Usuario - Aplicación Móvil
La aplicación Geo Servicar contiene diferentes actividades, fragmentos, botones y
opciones que se describen a continuación. Esta aplicación permite acceso y uso sin necesidad
Anexo 2: Manual de Usuario - Aplicación Móvil
2
de registrarse, sin embargo para tener acceso de todo los privilegios es recomendable
registrarse.
2.1. Inicio Geo Servicar
Ilustración 1: Aplicación Móvil Geo Servicar
Al iniciar la aplicación se cargaran todos los procesos de la interfaz en caso de no tener
conexión a internet se mostrara el siguiente mensaje en donde el usuario tendrá que verificar
su conexión e intentar ingresar a la aplicación mediante el botón Intentar de Nuevo:
Ilustración 2: Aplicación Geo Servicar Conexión a Internet
En el caso de no tener activado el GPS se mostrara al usuario el siguiente mensaje en
donde podrá activar el GPS mediante el botón Activar GPS:
Anexo 2: Manual de Usuario - Aplicación Móvil
3
Ilustración 3: Aplicación Geo Servicar Activación de GPS
Una vez verificada la conexión a internet y el GPS el usuario podrá ingresar a la
aplicación.
2.2. Pantalla Principal
Ilustración 4: Aplicación Geo Servicar Pantalla Principal
La pantalla principal de la aplicación Geo Servicar está compuesta de varios botones que
se describen a continuación:
1. Menú Lateral.- es el menú en donde se muestra la sesión de usuarios y las opciones de
categorías, favoritos y ayuda.
2. Menú derecho.- tiene la opción que permite salir de la aplicación cerrando todos sus
procesos.
Anexo 2: Manual de Usuario - Aplicación Móvil
4
Ilustración 5: Aplicación Móvil Geo Servicar Salir
3. Iniciar Sesión.- se abre una nueva actividad en donde el usuario puede registrase, iniciar
sesión con Facebook o con un correo electrónico.
4. Servicios.- se despliega una nueva actividad en donde se cargan todos los servicios
disponibles en la aplicación y la ubicación actual del usuario.
5. Categorías.- se abre una nueva actividad en donde se cargan todas las categorías
disponibles en la aplicación.
6. Consultar Matricula.- se muestra una nueva actividad en donde el usuario puede
consultar el costo de su matrícula de su vehículo ingresando su número de placa.
7. Navegación (Street View Panorama).- se abre una nueva actividad en donde se muestra
la ubicación actual del usuario.
2.2.1. Menú Lateral
Ilustración 6: Aplicación Móvil Geo Servicar Menú Lateral
Anexo 2: Manual de Usuario - Aplicación Móvil
5
El menú lateral muestra la información del usuario cuando inicia sesión a continuación
se detalla sus opciones:
1. Información del Usuario.- se muestra la información del usuario.
2. Geo Servicar.- el usuario regresa a la pantalla principal.
3. Favoritos.- se muestra una nueva actividad en donde se cargan todos los lugares
favoritos previamente guardados por el usuario. Para utilizar esta opción el usuario
debe iniciar sesión.
4. Ayuda.- muestra la información de la aplicación como por ejemplo: la descripción,
versión, año y la información de sus desarrolladores.
5. Usuario.- se despliega una nueva actividad en donde el usuario puede iniciar sesión,
registrase y cerrar sesión.
2.2.2. Inicio de Sesión y Registro de Usuario
Ilustración 7: Aplicación Móvil Geo Servicar Iniciar Sesión
La actividad Iniciar Sesión está compuesta por botones que se describen a continuación:
1. Botón Atrás.- Regresa a la pantalla principal.
2. Ingresar con Facebook.- se abre una nueva ventana en donde se solicitad el ingreso de
usuario y contraseña de Facebook.
Anexo 2: Manual de Usuario - Aplicación Móvil
6
Ilustración 8: Aplicación Móvil Geo Servicar Iniciar Sesión con Facebook
Se requiere dar permisos a la aplicación Geo Servicar para poder realizar el correcto
registro de sus datos.
Ilustración 9: Aplicación Móvil Geo Servicar Permisos de Facebook
Finalmente el registro del usuario ha sido completado con un éxito.
Ilustración 10: Aplicación Móvil Geo Servicar Información de Usuario
Anexo 2: Manual de Usuario - Aplicación Móvil
7
Para cerrar sesión el usuario puede realizarlo desde el menú lateral o desde la pantalla
principal en el botón. En caso de producirse un error revise su conexión a internet e inténtelo
de nuevo.
3. Iniciar Sesión
Para el inicio de sesión normal se requiere un correo electrónico y una
contraseña estos campos son obligatorios, el usuario deberá estar previamente
registrado para utilizar esta función.
Ilustración 11: Aplicación Móvil Geo Servicar Iniciar Sesión con Email
Si el usuario ingresa correctamente los datos se mostrara la siguiente ventana:
Ilustración 12: Aplicación Móvil Geo Servicar Datos Inicio de Sesión
Anexo 2: Manual de Usuario - Aplicación Móvil
8
4. Registrarse
El usuario puede registrase con correo electrónico, la información ingresada de
cada campo se valida antes de enviar al sistema.
Ilustración 13: Aplicación Móvil Geo Servicar Registro de Usuario
Cuando complete el ingreso de datos en el formulario se mostrara el siguiente mensaje:
Ilustración 14: Aplicación Móvil Geo Servicar Usuario Registrado
2.2.3. Servicios
Al abrir la actividad se cargaran todos los servicios que se encuentren disponibles en el
mapa.
Anexo 2: Manual de Usuario - Aplicación Móvil
9
Ilustración 15: Aplicación Móvil Geo Servicar Servicios
1. Botón Atrás.- Regresa a la pantalla principal.
2. Botón Menú.- Muestra los diferentes tipos de visualizaciones de mapa. Usted puede
seleccionar los que se muestran a continuación:
Ilustración 16: Aplicación Móvil Geo Servicar Visualización de Mapas
3. Punto de Inicio.- por defecto será su ubicación actual (mi ubicación actual), pero si el
usuario requiere otro punto puede escribir la primera inicial para cargar el servicio
requerido e ir desde ese servicio a otro.
Anexo 2: Manual de Usuario - Aplicación Móvil
10
Ilustración 17: Aplicación Móvil Geo Servicar Punto de Inicio
4. Punto de Destino.- al igual que el punto de inicio el usuario debe escribir la primera
inicial para cargar los servicios disponibles para seleccionar el lugar donde desee ir.
Ilustración 18: Aplicación Móvil Geo Servicar Punto de Destino
5. Botón Trazar Ruta.- para trazar la ruta el usuario previamente debe seleccionar el punto
de inicio y el punto de destino, al tener los parámetros requeridos la ruta trazada que
se dibujara en el mapa será la más óptima.
Anexo 2: Manual de Usuario - Aplicación Móvil
11
Ilustración 19: Aplicación Móvil Geo Servicar Trazar Ruta
6. Botón Mi Ubicación.- permite al usuario siempre ir a su ubicación actual.
7. Botón Alejar.- permite al usuario alegar el mapa.
8. Mapa.- permite visualizar el tráfico de la ciudad en tiempo real.
9. Mi Ubicación.- punto que se muestra en el mapa para saber mi ubicación actual.
10. Botón de navegación.- permite al usuario realizar la navegación de su ruta con voz
mediante Google Maps. Para utilizar esta función el usuario previamente debe
seleccionar el punto de inicio y el punto de destino.
Ilustración 20: Aplicación Móvil Geo Servicar Navegción con Google Maps
2.2.3. Punto de Interés
El usuario al seleccionar un servicio o punto de interés en el mapa se cargara una
burbuja de Windows en donde contiene el nombre del servicio y un hipervínculo para ver los
detalles.
Anexo 2: Manual de Usuario - Aplicación Móvil
12
Ilustración 21: Aplicación Móvil Geo Servicar Punto de interés
Al momento de seleccionar los detalles del punto de interés o servicio se cargara una
nueva actividad que contiene toda su información como por ejemplo: horarios de atención,
teléfonos y entre otros.
Ilustración 22: Aplicación Móvil Geo Servicar Punto de interés Información
1. Botón Atrás.- regresa a la pantalla de servicios.
2. Pestaña de información.- muestra la información de nombre, dirección, horario de
atención y teléfonos del servicio seleccionado.
3. Pestaña de Costos.- muestra la descripción y costo de todos los su servicios que el
servicio ofrece.
Anexo 2: Manual de Usuario - Aplicación Móvil
13
Ilustración 23: Aplicación Móvil Geo Servicar Punto de interés Costo
4. Pestaña Ir Allí.-muestra los dos botones que sirven para trazar la ruta. El primer botón
traza la de manera normal en la aplicación. El segundo botón traza la ruta con
navegación con voz en Google Maps.
Ilustración 24: Aplicación Móvil Geo Servicar Punto de interés Ir Allí
5. Icono Favoritos.- agrega o quita de favoritos de usuario el servicio seleccionado, para
utilizar esta función previamente debe estar registrado e iniciar sesión.
6. Botón Navegación en la Actividad Puntos de Interés.- muestra la ubicación del servicio
mediante Street View Panorama.
Anexo 2: Manual de Usuario - Aplicación Móvil
14
Ilustración 25: Aplicación Móvil Geo Servicar Punto de interés Navegación
2.2.4. Categorías
En la actividad categorías se clasifican los servicios automotrices en donde el usuario
podrá seleccionar la categoría y solo se cargaran los servicios de esa categoría en la actividad
servicios.
Ilustración 26: Aplicación Móvil Geo Servicar Categorías
2.2.5. Consultar Matricula
Se carga la página web del SRI (Servicios de Rentas Internas) en una actividad en donde el
usuario puede consultar el costo de su matrícula de su vehículo ingresando su número de placa.
Ilustración 27: Aplicación Móvil Geo Servicar Consultar Matricula
Anexo 2: Manual de Usuario - Aplicación Móvil
15
En el caso que el servicio del SRI no esté disponible esperar hasta que el servicio regrese.
2.2.6. Navegación (Street View Panorama)
Al seleccionar esta actividad se carga en la ubicación actual. Además el usuario puede navegar
por la ciudad a cualquier lugar mediante Street View Panorama de Google.
Ilustración 28: Aplicación Móvil Geo Servicar Navegación (Street View Panorama)
1. Botón Atrás.- Regresa a la pantalla principal.
2. Imagen.- se muestra la imagen que se selecciona en el mapa.
3. Mapa.- se muestra el tráfico, el selector del mapa y los botones de alejar y acercar.
4. Selector de Mapa.- selecciona en el mapa el lugar requerido por el usuario. También
puede ser arrastrado manteniéndolo pulsado.
5. Botón de acercar.- realiza acercamiento en el mapa.
6. Botón de alejar.- realiza alejamiento en el mapa.
Anexo 3: Código Fuente
1
Anexo 3: Código Fuente
Anexo 3: Código Fuente
2
3.1. Código Fuente – Página Web
3.1.1. Modelos.
Los modelos sirven para representar la información de la base de datos en objetos, los
objetos poseen un conjunto de atributos, funciones para su manejo y reglas para la validación
de los atributos a manejarse.
Modelo de Usuarios.
namespace common\models; use Yii; use yii\base\NotSupportedException; use yii\db\ActiveRecord; use yii\helpers\Security; use yii\web\IdentityInterface; use yii\behaviors\TimestampBehavior; class Usuarios extends \yii\mongodb\ActiveRecord implements IdentityInterface { /** * @inheritdoc */ const STATUS_DELETED = 'A'; const STATUS_ACTIVE = 'N'; const ROLE_USER = 1; const ROLE_ADMIN = 2; const ROLE_SUPERUSER = 3; public static function collectionName() { return ['servicios', 'usuarios']; } /** * @inheritdoc */ public function attributes() { return [ '_id', 'usu_email', 'usu_id_fb', 'usu_nombres', 'usu_apellidos', 'usu_password', 'usu_cedula', 'usu_sexo', 'usu_fecha_nacimiento', 'usu_tipo_usuario', 'usu_imagen', 'usu_telefono', 'usu_celular', 'usu_createdat', 'usu_estado', 'com_codigo', 'usu_link_fb',
Anexo 3: Código Fuente
3
'usu_direccion', 'ciu_codigo', 'ciu_nombre', 'usu_porcentaje_comision', 'usu_id_qb', 'usu_login_qb', 'usu_pass_qb', 'auth_key', 'password_reset_token', 'password_repeat', 'mensaje', 'transaccion', 'usu_idfacebook' ]; } /** * @inheritdoc */ public function rules() { return [ [['usu_email', 'usu_id_fb', 'usu_nombres', 'usu_apellidos', 'usu_password', 'usu_cedula', 'usu_sexo', 'usu_fecha_nacimiento', 'usu_tipo_usuario', 'usu_imagen', 'usu_telefono', 'usu_celular', 'usu_createdat', 'usu_estado', 'com_codigo', 'usu_link_fb', 'usu_direccion', 'ciu_codigo', 'ciu_nombre', 'usu_porcentaje_comision', 'usu_id_qb', 'usu_login_qb', 'usu_pass_qb','usu_idfacebook'], 'safe'], [['usu_email','usu_nombres', 'usu_apellidos'], 'required','message'=>'{attribute} no puede estar vacio.'], ['usu_email', 'email', 'message'=>'No es un correo valido.'], //registro validar contrasena //[['usu_password', 'repeat_password'], 'required', 'on'=>'insert'], ['usu_password', 'required', 'message'=>'La contraseña es requerida.','on'=>'registro' ], ['usu_password', 'string', 'min' => 8, 'message'=>'La contraseña debe tener entre 6 y 16 caracteres.','on'=>'registro' ], ['password_repeat', 'required','message'=>'Confirme su contraseña.','on'=>'registro' ], ['password_repeat', 'compare', 'compareAttribute'=>'usu_password', 'message'=>"Las contraseñas no coinciden.", 'on'=>'registro' ], ]; } /** * @inheritdoc */ public function attributeLabels() { return [ '_id' => Yii::t('app', 'ID'), 'usu_email' => Yii::t('app', 'Email'), 'usu_id_fb' => Yii::t('app', 'Usu Id Fb'), 'usu_nombres' => Yii::t('app', 'Nombres'), 'usu_apellidos' => Yii::t('app', 'Apellidos'), 'usu_password' => Yii::t('app', 'Contraseña'), 'password_repeat' => Yii::t('app', 'Confirmar contraseña'), 'usu_cedula' => Yii::t('app', 'Cedula'), 'usu_sexo' => Yii::t('app', 'Sexo'), 'usu_fecha_nacimiento' => Yii::t('app', 'Fecha Nacimiento'), 'usu_tipo_usuario' => Yii::t('app', 'Tipo Usuario'), 'usu_imagen' => Yii::t('app', 'Imagen'),
Anexo 3: Código Fuente
4
'usu_telefono' => Yii::t('app', 'Telefono'), 'usu_celular' => Yii::t('app', 'Celular'), 'usu_createdat' => Yii::t('app', 'Usu Createdat'), 'usu_estado' => Yii::t('app', 'Estado'), 'com_codigo' => Yii::t('app', 'Com Codigo'), 'usu_link_fb' => Yii::t('app', 'Usu Link Fb'), 'usu_direccion' => Yii::t('app', 'Direccion'), 'ciu_codigo' => Yii::t('app', 'Ciu Codigo'), 'ciu_nombre' => Yii::t('app', 'Ciudad'), 'usu_porcentaje_comision' => Yii::t('app', 'Usu Porcentaje Comision'), 'usu_id_qb' => Yii::t('app', 'Usu Id Qb'), 'usu_login_qb' => Yii::t('app', 'Usu Login Qb'), 'usu_pass_qb' => Yii::t('app', 'Usu Pass Qb'), ]; } ////////////////////////////////////////////////////////////////////// //////AUTENTICACION DE USUARIOS /** INCLUDE USER LOGIN VALIDATION FUNCTIONS**/ /** * @inheritdoc */ public static function findIdentity($id) { return static::findOne($id); } /** * @inheritdoc */ /* modified */ public static function findIdentityByAccessToken($token, $type = null) { return static::findOne(['access_token' => $token]); } /* removed public static function findIdentityByAccessToken($token) { throw new NotSupportedException('"findIdentityByAccessToken" is not implemented.'); } */ /** * Finds user by username * * @param string $username * @return static|null */ public static function findByUsername($username) { return static::findOne(['usu_email' => $username]); } /** * Finds user by password reset token * * @param string $token password reset token * @return static|null
Anexo 3: Código Fuente
5
*/ public static function findByPasswordResetToken($token) { $expire = \Yii::$app->params['user.passwordResetTokenExpire']; $parts = explode('_', $token); $timestamp = (int) end($parts); if ($timestamp + $expire < time()) { // token expired return null; } return static::findOne([ 'password_reset_token' => $token ]); } /** * @inheritdoc */ public function getId() { return $this->getPrimaryKey(); } /** * @inheritdoc */ public function getAuthKey() { return $this->auth_key; } /** * @inheritdoc */ public function validateAuthKey($authKey) { return $this->getAuthKey() === $authKey; } /** * Validates password * * @param string $password password to validate * @return boolean if password provided is valid for current user */ public function validatePassword($password) { return $this->usu_password === sha1($password); } /** * Generates password hash from password and sets it to the model * * @param string $password */ public function setPassword($password) { $this->password_hash = Security::generatePasswordHash($password); } /**
Anexo 3: Código Fuente
6
* Generates "remember me" authentication key */ public function generateAuthKey() { $this->auth_key = Security::generateRandomKey(); } /** * Generates new password reset token */ public function generatePasswordResetToken() { //$this->password_reset_token = Security::generateRandomKey() . '_' . time(); $this->password_reset_token = Yii::$app->security->generateRandomString() . '_' . time(); } /** * Removes password reset token */ public function removePasswordResetToken() { $this->password_reset_token = null; } /** EXTENSION MOVIE **/ ///////////MANEJO DE ROLES ///////////////////////////////////////////////// public static function roleInArray($arr_role) { return in_array(Yii::$app->user->identity->usu_tipo_usuario, $arr_role); } public static function isActive() { return Yii::$app->user->identity->usu_estado == self::STATUS_ACTIVE; } public static function isPasswordResetTokenValid($token) { if (empty($token)) { return false; } $timestamp = (int) substr($token, strrpos($token, '_') + 1); $expire = Yii::$app->params['user.passwordResetTokenExpire']; return $timestamp + $expire >= time(); } ///////////MANEJO DE ROLES ///////////////////////////////////////////////// }
Modelo de Servicios.
namespace common\models; use Yii; use yii\web\UploadedFile; class Servicios extends \yii\mongodb\ActiveRecord { /** * @inheritdoc */ public $imageFiles; public static function collectionName() { return ['servicios', 'servicios'];
Anexo 3: Código Fuente
7
} /** * @inheritdoc */ public function attributes() { return [ '_id', 'ser_nombre', 'ser_descripcion', 'ser_url', 'ser_telefono', 'ser_celular', 'ser_direccion', 'ser_referencia', 'ser_categoria', 'ser_imagenes', 'ser_calificacion', 'ser_horarios_atencion', 'ser_estado', 'ser_createdat', 'usu_createid', 'ser_updatedat', 'usu_updateid', 'ser_geoloc_lat', 'ser_geoloc_lon', 'ser_subservicios', 'ser_imagen', //auxiliares 'ser_imagencat', 'transaccion', ]; } /** * @inheritdoc */ public function rules() { return [ [['ser_url','ser_geoloc_lon','ser_geoloc_lat', 'ser_nombre', 'ser_descripcion', 'ser_telefono', 'ser_celular', 'ser_direccion', 'ser_referencia', 'ser_categoria', 'ser_imagenes', 'ser_calificacion', 'ser_horarios_atencion', 'ser_estado', 'ser_createdat', 'usu_createid', 'ser_updatedat', 'usu_updateid','ser_subservicios'], 'safe'], //[['imageFiles'], 'file', 'skipOnEmpty' => false, 'extensions' => 'png, jpg', 'maxFiles' => 4], ]; } /** * @inheritdoc */ public function attributeLabels() { return [ '_id' => Yii::t('app', 'ID'), 'ser_nombre' => Yii::t('app', 'Nombre'), 'ser_descripcion' => Yii::t('app', 'Descripcion'), 'ser_url' => Yii::t('app', 'Link del servicio'),
Anexo 3: Código Fuente
8
'ser_telefono' => Yii::t('app', 'Telefono'), 'ser_celular' => Yii::t('app', 'Celular'), 'ser_direccion' => Yii::t('app', 'Direccion'), 'ser_referencia' => Yii::t('app', 'Referencia'), 'ser_categoria' => Yii::t('app', 'Categoria'), 'ser_imagenes' => Yii::t('app', 'Imagenes'), 'ser_calificacion' => Yii::t('app', 'Calificacion'), 'ser_horarios_atencion' => Yii::t('app', 'Horarios Atencion'), 'ser_estado' => Yii::t('app', 'Estado'), 'ser_createdat' => Yii::t('app', 'Ser Createdat'), 'usu_createid' => Yii::t('app', 'Usu Createid'), 'ser_updatedat' => Yii::t('app', 'Ser Updatedat'), 'usu_updateid' => Yii::t('app', 'Usu Updateid'), 'ser_geoloc_lon' => Yii::t('app', 'Longitud'), 'ser_geoloc_lat' => Yii::t('app', 'Latitud'), 'imageFiles' => Yii::t('app', 'Agregar imagenes'), 'ser_subservicios' => Yii::t('app', 'Subservicios'), ]; } public function upload() { echo 'entra'; if ($this->validate()) { echo 'valida'; foreach ($this->imageFiles as $file) { $file->saveAs('uploads/' . $file->baseName . '.' . $file->extension); } return true; } else { echo 'error imagen'; print_r($this->getErrors()); return false; } } }
Modelo de Categorías.
namespace common\models; use Yii; use yii\helpers\ArrayHelper; class Categorias extends \yii\mongodb\ActiveRecord { /** * @inheritdoc */ public static function collectionName() { return ['servicios', 'categorias']; } /** * @inheritdoc */ public function attributes() { return [ '_id',
Anexo 3: Código Fuente
9
'cat_nombre', 'cat_descripcion', 'cat_posicion', 'cat_updatedat', 'usu_updateid', 'cat_createdat', 'usu_createid', 'cat_estado', 'cat_url', 'cat_color', 'cat_logo', 'cat_icono', ]; } /** * @inheritdoc */ public function rules() { return [ [['cat_nombre', 'cat_descripcion', 'cat_posicion', 'cat_updatedat', 'usu_updateid', 'cat_createdat', 'usu_createid', 'cat_estado', 'cat_url', 'cat_color', 'cat_logo', 'cat_icono'], 'safe'], [['cat_nombre', 'cat_descripcion', 'cat_posicion'], 'required'] ]; } /** * @inheritdoc */ public function attributeLabels() { return [ '_id' => Yii::t('app', 'ID'), 'cat_nombre' => Yii::t('app', 'Nombre'), 'cat_descripcion' => Yii::t('app', 'Descripcion'), 'cat_posicion' => Yii::t('app', 'Posicion'), 'cat_updatedat' => Yii::t('app', 'Cat Updatedat'), 'usu_updateid' => Yii::t('app', 'Usu Updateid'), 'cat_createdat' => Yii::t('app', 'Cat Createdat'), 'usu_createid' => Yii::t('app', 'Usu Createid'), 'cat_estado' => Yii::t('app', 'Estado'), 'cat_url' => Yii::t('app', 'Url'), 'cat_color' => Yii::t('app', 'Color'), 'cat_logo' => Yii::t('app', 'Logo'), ]; } public function listarCategorias() { $model_aux=new Categorias(); $list=ArrayHelper::map(Categorias::findAll(['cat_estado' =>'N']),function ($model_aux) {return $model_aux->_id->{'$id'};},'cat_nombre'); return $list; } }
Modelo de Servicios Favoritos.
namespace common\models; use Yii;
Anexo 3: Código Fuente
10
/** * This is the model class for collection "favoritos". * * @property \MongoId|string $_id * @property mixed $usu_codigo * @property mixed $fav_servicios * @property mixed $fav_createdat * @property mixed $fav_updatedat * @property mixed $usu_createid * @property mixed $usu_updateid */ class Favoritos extends \yii\mongodb\ActiveRecord { /** * @inheritdoc */ public static function collectionName() { return ['servicios', 'favoritos']; } /** * @inheritdoc */ public function attributes() { return [ '_id', 'usu_codigo', 'fav_servicios', 'fav_createdat', 'fav_updatedat', 'usu_createid', 'usu_updateid', ]; } /** * @inheritdoc */ public function rules() { return [ [['usu_codigo', 'fav_servicios', 'fav_createdat', 'fav_updatedat', 'usu_createid', 'usu_updateid'], 'safe'] ]; } }
3.1.2. Controladores.
Los controladores poseen todas las acciones que el sistema realizara, es decir una acción
representa cada actividad que se realice dentro del sistema, y se encargara de recibir
información, procesarla y devolver los resultados correspondientes. Existen acciones ya
generadas por el framework Yi2 que permiten realizar funcionalidades básicas como listado de
modelos, edición de información de un registro, eliminación de un registro y visualización de un
registro; por ellos los controladores son modificados agregando acciones necesarias.
Anexo 3: Código Fuente
11
Los controladores representan al conjunto acciones que se realizan con una colección
(tabla) especifica de la base de datos: por ejemplo tenemos la colección de Servicios en nuestra
base de datos, para el manejo de información de ella usamos el controlador de Servicios y el
modelo Servicios.
Los controladores están dividido en dos partes, los que se usan en el frontend o parte
pública, y el backend o parte administrable y privada del sistema.
Los controladores principales del frontend son:
Controlador de Servicios.
namespace frontend\controllers; use Yii; use common\models\Servicios; use common\models\Subservicios; use common\models\Categorias; use common\models\Favoritos; use yii\data\ActiveDataProvider; use yii\web\Controller; use yii\web\NotFoundHttpException; use yii\filters\VerbFilter; use yii\helpers\ArrayHelper; use yii\rest\ActiveController; use zyx\phpmailer\Mailer; /** * ServiciosController implements the CRUD actions for Servicios model. */ class ServiciosController extends ActiveController { public $modelClass = 'common\models\Servicios'; public function behaviors() { return [ 'verbs' => [ 'class' => VerbFilter::className(), 'actions' => [ 'delete' => ['post'], ], ], ]; } /** * Lists all Servicios models. * @return mixed */ public function actionIndex() { $dataProvider = new ActiveDataProvider([ 'query' => Servicios::find(), ]); return $this->render('index', [ 'dataProvider' => $dataProvider, ]); }
Anexo 3: Código Fuente
12
/** * Displays a single Servicios model. * @param integer $_id * @return mixed */ public function actionView($id) { return $this->render('view', [ 'model' => $this->findModel($id), ]); } /** * Creates a new Servicios model. * If creation is successful, the browser will be redirected to the 'view' page. * @return mixed */ public function actionCreate() { $model = new Servicios(); if ($model->load(Yii::$app->request->post()) && $model->save()) { return $this->redirect(['view', 'id' => (string)$model->_id]); } else { return $this->render('create', [ 'model' => $model, ]); } } /** * Updates an existing Servicios model. * If update is successful, the browser will be redirected to the 'view' page. * @param integer $_id * @return mixed */ public function actionUpdate($id) { $model = $this->findModel($id); if ($model->load(Yii::$app->request->post()) && $model->save()) { return $this->redirect(['view', 'id' => (string)$model->_id]); } else { return $this->render('update', [ 'model' => $model, ]); } } /** * Deletes an existing Servicios model. * If deletion is successful, the browser will be redirected to the 'index' page. * @param integer $_id * @return mixed */ public function actionDelete($id) {
Anexo 3: Código Fuente
13
$this->findModel($id)->delete(); return $this->redirect(['index']); } /** * Finds the Servicios model based on its primary key value. * If the model is not found, a 404 HTTP exception will be thrown. * @param integer $_id * @return Servicios the loaded model * @throws NotFoundHttpException if the model cannot be found */ protected function findModel($id) { if (($model = Servicios::findOne($id)) !== null) { return $model; } else { throw new NotFoundHttpException('The requested page does not exist.'); } } public function actionServiciomovil() { $id = $_POST['id']; \Yii::$app->response->format = \yii\web\Response::FORMAT_JSON; $servicio =Servicios::findOne($id); return $servicio; } public function actionServicioscategoriamovil() { $id = $_POST['id']; //$id='56b13ae8ee6f6e1d7e8b4567'; $servicios = Servicios::find() ->where(['ser_categoria' =>new \MongoID($id),'ser_estado'=> 'N']) ->asArray() ->all(); return json_encode(array('item' => $servicios), JSON_FORCE_OBJECT); } public function actionListaserviciosmovil() { /*\Yii::$app->response->format = \yii\web\Response::FORMAT_JSON; $servicios =Servicios::findAll(['ser_estado'=> 'N']); return $servicios;*/ $servicios = Servicios::find(['ser_estado'=> 'N']) ->all(); $servicios_array= array(); foreach ($servicios as $servicio) { $categoria=Categorias::findOne($servicio->ser_categoria); $servicio->ser_imagencat=$categoria->cat_logo; //print_r($categoria); array_push($servicios_array, $servicio->getAttributes()); } //print_r($servicios); return json_encode(array('item' =>$servicios_array), JSON_FORCE_OBJECT);
Anexo 3: Código Fuente
14
} public function actionSubserviciosmovil() { $id = $_POST['id'];//ide del servicio //$id='569ffff4ee6f6ed97e8b4567'; $servicio = $this->findModel(new \MongoID($id)); $ser_subservicios = array(); foreach ($servicio->ser_subservicios as $id_subservicio) { $subservicio = new Subservicios(); $subservicio = $subservicio->findOne(['sub_estado' => 'N', '_id' => $id_subservicio]); if (!is_null($subservicio)) { $item_subservicio = array( '_id' => $id_subservicio, 'sub_estado' => $subservicio->sub_estado, 'sub_nombre' => $subservicio->sub_nombre, 'sub_descripcion' => $subservicio->sub_descripcion, 'sub_precio' => $subservicio->sub_precio ); array_push($ser_subservicios, $item_subservicio); } } return json_encode(array('item' => $ser_subservicios), JSON_FORCE_OBJECT); } public function actionServicioscategoria($id) { //obtener servicios $servicio=new Servicios(); $servicios=$servicio->findAll(['ser_estado' => 'N','ser_categoria' =>new \MongoID($id)]); /*$categorias= Categorias::find(['cat_estado'=> 'N']) ->asArray() ->all();*/ $servicios_final = array(); foreach ($servicios as $servicio) { $categoria=Categorias::findOne($servicio->ser_categoria); $servicio->ser_imagencat=$categoria->cat_icono; array_push($servicios_final, $servicio->getAttributes()); //print_r($servicios_final); } //print_r($servicios_final); echo json_encode($servicios_final); } public function actionFavoritosmovil() { $id = $_POST['id']; //$id='569336a1ee6f6e1b128b4567'; $lista_fav = Favoritos::find() ->where(['usu_codigo' =>new \MongoID($id)]) ->one(); $servicios=$lista_fav->fav_servicios; $servicios_final = array( ); for ($i = 1; $i < sizeof($servicios); $i++)
Anexo 3: Código Fuente
15
{ $datos_servicio= Servicios::find() ->where(['_id' =>$servicios[$i]]) ->one(); array_push($servicios_final, $datos_servicio->getAttributes()); } return json_encode(array('item' => $servicios_final), JSON_FORCE_OBJECT); } }
Controlador de servicios Favoritos.
namespace frontend\controllers; use Yii; use common\models\Favoritos; use common\models\FavoritosSearch; use common\models\Servicios; use common\models\Categorias; use yii\web\Controller; use yii\web\NotFoundHttpException; use yii\filters\VerbFilter; use yii\data\ArrayDataProvider; use yii\rest\ActiveController; /** * FavoritosController implements the CRUD actions for Favoritos model. */ class FavoritosController extends ActiveController { public $modelClass = 'common\models\Favoritos'; public function behaviors() { return [ 'verbs' => [ 'class' => VerbFilter::className(), 'actions' => [ 'delete' => ['post'], ], ], ]; } /** * Lists all Favoritos models. * @return mixed */ public function actionIndex() { $searchModel = new FavoritosSearch(); //$searchModel->usu_codigo =Yii::$app->user->identity->id; $dataProvider = $searchModel->search(Yii::$app->request->queryParams); return $this->render('index', [ 'searchModel' => $searchModel, 'dataProvider' => $dataProvider, ]); } /** * Displays a single Favoritos model. * @param integer $_id
Anexo 3: Código Fuente
16
* @return mixed */ public function actionView($id) { return $this->render('view', [ 'model' => $this->findModel($id), ]); } /** * Creates a new Favoritos model. * If creation is successful, the browser will be redirected to the 'view' page. * @return mixed */ public function actionCreate() { $model = new Favoritos(); if ($model->load(Yii::$app->request->post()) && $model->save()) { return $this->redirect(['view', 'id' => (string)$model->_id]); } else { return $this->render('create', [ 'model' => $model, ]); } } /** * Updates an existing Favoritos model. * If update is successful, the browser will be redirected to the 'view' page. * @param integer $_id * @return mixed */ public function actionUpdate($id) { $model = $this->findModel($id); if ($model->load(Yii::$app->request->post()) && $model->save()) { return $this->redirect(['view', 'id' => (string)$model->_id]); } else { return $this->render('update', [ 'model' => $model, ]); } } /** * Deletes an existing Favoritos model. * If deletion is successful, the browser will be redirected to the 'index' page. * @param integer $_id * @return mixed */ public function actionDelete($id) { $this->findModel($id)->delete(); return $this->redirect(['index']); }
Anexo 3: Código Fuente
17
/** * Finds the Favoritos model based on its primary key value. * If the model is not found, a 404 HTTP exception will be thrown. * @param integer $_id * @return Favoritos the loaded model * @throws NotFoundHttpException if the model cannot be found */ protected function findModel($id) { if (($model = Favoritos::findOne($id)) !== null) { return $model; } else { throw new NotFoundHttpException('The requested page does not exist.'); } } public function actionAgregarfavorito($id) { //$lista_fav = Favoritos::find(['usu_codigo' =>new \MongoID(Yii::$app->user->identity->id)]); $lista_fav = Favoritos::find() ->where(['usu_codigo' =>new \MongoID(Yii::$app->user->identity->id)]) ->one(); $servicios=$lista_fav->fav_servicios; $mensaje=''; if (in_array(new \MongoID($id), $servicios)==true) { $mensaje= 'ya hay'; } else { array_push($servicios, new \MongoID($id)); $lista_fav->fav_servicios = $servicios; if ($lista_fav->save(false, array('fav_servicios'))) { $mensaje= 'guarda'; }else{ $mensaje= 'no guarda'; } } return $mensaje; } public function actionMisfavoritos() { $lista_fav = Favoritos::find() ->where(['usu_codigo' =>new \MongoID(Yii::$app->user->identity->id)]) ->one(); $servicios=$lista_fav->fav_servicios; $servicios_final = array( ); for ($i = 1; $i < sizeof($servicios); $i++) { $datos_servicio= Servicios::find() ->where(['_id' =>$servicios[$i]]) ->one();
Anexo 3: Código Fuente
18
$datos_categoria= Categorias::find() ->where(['_id' =>$datos_servicio->ser_categoria]) ->one(); $imagenes=$datos_servicio->ser_imagenes; $aux = array( "id" => $servicios[$i], "servicio_imagen" => $imagenes[0], "servicio" => $datos_servicio->ser_nombre, "categoria" => $datos_categoria->cat_nombre, "categoria_icono" => $datos_categoria->cat_icono, ); array_push($servicios_final, $aux); } $dataProvider = new ArrayDataProvider([ 'allModels' => $servicios_final, 'key' => 'id', 'pagination' => [ 'pageSize' => 10, ], ]); return $this->render('misfavoritos', [ //'searchModel' => $searchModel, 'dataProvider' => $dataProvider, ]); } public function actionAgregarfavoritomovil() { $id_servicio = $_POST['id_servicio']; $id_usuario = $_POST['id_usuario']; $estado = $_POST['estado']; //$id_servicio = '56a0020bee6f6e097f8b4567'; //$id_usuario = '569336a1ee6f6e1b128b4567'; //$lista_fav = Favoritos::find(['usu_codigo' =>new \MongoID(Yii::$app->user->identity->id)]); $lista_fav = Favoritos::find() ->where(['usu_codigo' =>new \MongoID($id_usuario)]) ->one(); $servicios=array(); $mensaje=''; $transaccion=false; if(sizeof($lista_fav)>0) { $servicios=$lista_fav->fav_servicios; if(($key = array_search(new \MongoID($id_servicio), $servicios)) !== false) //if (in_array(new \MongoID($id_servicio), $servicios)==true) { $mensaje= 'ya hay'; if($estado==0)//borrar { unset($servicios[$key]); $lista_fav->fav_servicios = $servicios; if ($lista_fav->save(false, array('fav_servicios'))) { $mensaje= 'guarda'; $transaccion=true; }else{ $mensaje= 'no guarda'; }
Anexo 3: Código Fuente
19
} } else { array_push($servicios, new \MongoID($id_servicio)); $lista_fav->fav_servicios = $servicios; if ($lista_fav->save(false, array('fav_servicios'))) { $mensaje= 'guarda'; $transaccion=true; }else{ $mensaje= 'no guarda'; } } } else//registro nuevo { $lista_fav = new Favoritos; array_push($servicios, new \MongoID($id_servicio)); $lista_fav->usu_codigo=new \MongoID($id_usuario); $lista_fav->fav_servicios=$servicios; if ($lista_fav->save()) { $mensaje= 'guarda'; $transaccion=true; }else{ $mensaje= 'no guarda'; } } return json_encode(array('transaccion' => $transaccion,'mensaje' => $mensaje), JSON_FORCE_OBJECT); } }
Controlador de usuarios.
namespace frontend\controllers; use Yii; use common\models\Usuarios; use yii\data\ActiveDataProvider; use yii\web\Controller; use yii\web\NotFoundHttpException; use yii\filters\VerbFilter; use yii\rest\ActiveController; /** * UsuariosController implements the CRUD actions for Usuarios model. */ class UsuariosController extends ActiveController { public $modelClass = 'common\models\Usuarios'; public function behaviors() { return [ 'verbs' => [ 'class' => VerbFilter::className(), 'actions' => [ 'delete' => ['post'], ], ], ]; } /**
Anexo 3: Código Fuente
20
* Lists all Usuarios models. * @return mixed */ public function actionIndex() { $dataProvider = new ActiveDataProvider([ 'query' => Usuarios::find(), ]); return $this->render('index', [ 'dataProvider' => $dataProvider, ]); } /** * Displays a single Usuarios model. * @param integer $_id * @return mixed */ public function actionView($id) { return [ 'verbs' => [ 'class' => AccessControl::className(), //'only' => ['index'], 'rules' => [ [ 'actions' => ['index','view','update','create','delete'], 'allow' => true, 'roles' => ['@'], 'matchCallback' => function ($rule, $action) { $valid_roles = [Usuarios::ROLE_USER]; return Usuarios::roleInArray($valid_roles) && Usuarios::isActive(); } ], ], ], ]; } /** * Creates a new Usuarios model. * If creation is successful, the browser will be redirected to the 'view' page. * @return mixed */ public function actionCreate() { $model = new Usuarios(); //$model->setScenario('null'); if ($model->load(Yii::$app->request->post())) { echo 'dentro post'; $model->usu_tipo_usuario='1'; $model->usu_estado='N'; $model->usu_password=sha1($model->usu_password); if($model->save()) { echo 'guarda'; //iniciar sesion de nuevo usuario Yii::$app->user->login($model, true ? 3600 * 24 * 30 : 0);
Anexo 3: Código Fuente
21
return $this->goHome(); } else print_r($model); } else { $model->setScenario('registro'); /*return $this->render('create', [ 'model' => $model, ]);*/ } } /** * Updates an existing Usuarios model. * If update is successful, the browser will be redirected to the 'view' page. * @param integer $_id * @return mixed */ public function actionUpdate($id) { $model = $this->findModel($id); if ($model->load(Yii::$app->request->post()) && $model->save()) { return $this->goHome(); } else { return $this->render('update', [ 'model' => $model, ]); } } public function actionEditarcuenta() { $model = $this->findModel(Yii::$app->user->identity->_id); if ($model->load(Yii::$app->request->post()) && $model->save()) { //return $this->redirect(['view', 'id' => (string)$model->_id]); return $this->goHome(); } else { return $this->render('update', [ 'model' => $model, ]); } } /** * Deletes an existing Usuarios model. * If deletion is successful, the browser will be redirected to the 'index' page. * @param integer $_id * @return mixed */ public function actionDelete($id) { $this->findModel($id)->delete(); return $this->redirect(['index']); } /** * Finds the Usuarios model based on its primary key value. * If the model is not found, a 404 HTTP exception will be thrown.
Anexo 3: Código Fuente
22
* @param integer $_id * @return Usuarios the loaded model * @throws NotFoundHttpException if the model cannot be found */ protected function findModel($id) { if (($model = Usuarios::findOne($id)) !== null) { return $model; } else { throw new NotFoundHttpException('The requested page does not exist.'); } } public function actionIniciosesionmovil() { $email = $_POST['email']; $password = $_POST['password']; $password= sha1($password); \Yii::$app->response->format = \yii\web\Response::FORMAT_JSON; $usuario =Usuarios::findOne(['usu_email'=>$email,'usu_password'=>$password]); return $usuario; } public function actionIniciosesionfacebookmovil() { $id_facebook = $_POST['id_facebook']; \Yii::$app->response->format = \yii\web\Response::FORMAT_JSON; $usuario =Usuarios::findOne(['usu_idfacebook'=>$id_facebook]); return $usuario; } public function actionRegistromovil() { $email = $_POST['usu_email']; //$email = 'doritamemo2@hotmail.com'; $usuario =Usuarios::findOne(['usu_email'=>$email]); $model=new Usuarios(); $model->mensaje=''; $model->transaccion=false; if(sizeof($usuario)>0) { $model->mensaje= 'ya existe ese correo correo'; } else { if (isset( $_POST['usu_email'])) { $model->usu_nombres= $_POST['usu_nombres']; $model->usu_apellidos= $_POST['usu_apellidos']; $model->usu_email= $_POST['usu_email']; $model->usu_tipo_usuario='1'; $model->usu_estado='N'; $model->usu_password=sha1($model->usu_password); if($model->save()) { $model->mensaje= 'datos guardados'; $model->transaccion=true; }
Anexo 3: Código Fuente
23
//else print_r($model); } else { $model->mensaje= 'error al guardar'; } } $model_aux=new Usuarios(); $model_aux->mensaje= $model->mensaje; $model_aux->transaccion=$model->transaccion; return json_encode(array('item' => $model_aux->getAttributes()), JSON_FORCE_OBJECT); } public function actionRegistrofacebookmovil() { $id_facebook = $_POST['usu_idfacebook']; //$email = 'doritamemo2@hotmail.com'; $usuario =Usuarios::findOne(['usu_idfacebook'=>$id_facebook]); $model=new Usuarios(); $model->mensaje=''; $model->transaccion=false; if(sizeof($usuario)>0) { $model->mensaje= 'ya existe ese id facebook'; } else { if (isset( $_POST['usu_idfacebook'])) { $model->usu_nombres= $_POST['usu_nombres']; $model->usu_apellidos= $_POST['usu_apellidos']; $model->usu_idfacebook= $_POST['usu_idfacebook']; if(isset($_POST['usu_email']))$model->usu_email= $_POST['usu_email']; else $model->usu_email=''; $model->usu_tipo_usuario='1'; $model->usu_estado='N'; $model->usu_password=sha1($model->usu_password); if($model->save()) { $model->mensaje= 'datos guardados'; $model->transaccion=true; } //else print_r($model); } else { $model->mensaje= 'error al guardar'; } } $model_aux=new Usuarios(); $model_aux->mensaje= $model->mensaje; $model_aux->transaccion=$model->transaccion; return json_encode(array('item' => $model_aux->getAttributes()), JSON_FORCE_OBJECT); } public function actionResetearcontrasenamovil() { $model=new Usuarios(); $model->mensaje=''; $model->transaccion=false;
Anexo 3: Código Fuente
24
$email = $_POST['usu_email']; //$email = 'doritamemo2@hotmail.com'; $usuario =Usuarios::findOne(['usu_email'=>$email]); if(sizeof($usuario)>0) { $model->mensaje= 'correo invalido'; $model->transaccion=false; } else { $model->mensaje= 'correo envador'; $model->transaccion=true; } return json_encode(array('item' => $model->getAttributes()), JSON_FORCE_OBJECT); } }
3.2. Código Fuente – Aplicación Móvil
3.2.1. Google Maps Activity
Esta actividad está compuesta por todas las librerías requeridas de Google Maps para el
desarrollo del proyecto a continuación se muestra el código:
package app.geo_servicar.google_maps; import android.Manifest; import android.app.ProgressDialog; import android.content.Context; import android.content.Intent; import android.content.IntentSender; import android.content.pm.PackageManager; import android.content.res.Resources; import android.graphics.Color; import android.location.Location; import android.location.LocationManager; import android.net.ConnectivityManager; import android.net.NetworkInfo; import android.net.Uri; import android.os.Bundle; import android.support.design.widget.CoordinatorLayout; import android.support.design.widget.FloatingActionButton; import android.support.v4.app.ActivityCompat; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.inputmethod.InputMethodManager; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.AutoCompleteTextView; import android.widget.Button; import android.widget.ImageView; import android.widget.TextView;
Anexo 3: Código Fuente
25
import android.widget.Toast; import com.akexorcist.googledirection.DirectionCallback; import com.akexorcist.googledirection.GoogleDirection; import com.akexorcist.googledirection.constant.TransportMode; import com.akexorcist.googledirection.model.Direction; import com.akexorcist.googledirection.util.DirectionConverter; import com.android.volley.Request; import com.android.volley.RequestQueue; import com.android.volley.Response; import com.android.volley.VolleyError; import com.android.volley.toolbox.StringRequest; import com.android.volley.toolbox.Volley; import com.google.android.gms.appindexing.AppIndex; import com.google.android.gms.common.ConnectionResult; import com.google.android.gms.common.api.GoogleApiClient; import com.google.android.gms.location.LocationListener; import com.google.android.gms.location.LocationRequest; import com.google.android.gms.location.LocationServices; import com.google.android.gms.maps.CameraUpdate; import com.google.android.gms.maps.CameraUpdateFactory; import com.google.android.gms.maps.GoogleMap; import com.google.android.gms.maps.MapFragment; import com.google.android.gms.maps.OnMapReadyCallback; import com.google.android.gms.maps.model.BitmapDescriptorFactory; import com.google.android.gms.maps.model.CameraPosition; import com.google.android.gms.maps.model.LatLng; import com.google.android.gms.maps.model.Marker; import com.google.android.gms.maps.model.MarkerOptions; import com.google.android.gms.maps.model.Polyline; import org.json.JSONException; import org.json.JSONObject; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import app.geo_servicar.R; import app.geo_servicar.categorias.Servicios; import app.geo_servicar.markers.MarkerActivity; import app.geo_servicar.recursos.Constantes; /** * Created by JuanPablo on 19/11/2015. */ public class GoogleMapsActivity extends AppCompatActivity implements GoogleApiClient.ConnectionCallbacks, GoogleApiClient.OnConnectionFailedListener,LocationListener, OnMapReadyCallback,DirectionCallback{ //Google Maps private GoogleMap mMap; private GoogleApiClient mGoogleApiClient; private LocationRequest mLocationRequest; private final static int CONNECTION_FAILURE_RESOLUTION_REQUEST = 9000; private static final long INTERVAL = 1000 * 60 * 1; //1 min private static final long FASTEST_INTERVAL = 1000 * 60 * 1; // 1 min private static final float SMALLEST_DISPLACEMENT = 0.25F; //cuarto de metro private double Long=0.0;
Anexo 3: Código Fuente
26
private double Lat= 0.0; private LatLng origin; private LatLng destination; private String serverKey = ""; //Validar Conexión a Internet y GPS private ConnectivityManager connectivityManager; private NetworkInfo networkInfo; private LocationManager locationManager; //UI controless private AutoCompleteTextView autoCompleteTextView; private AutoCompleteTextView autoCompleteTextView1; private ImageView send; private Resources res; private FloatingActionButton fabBtn; private CoordinatorLayout cordinLayout; private Toolbar toolbar; private Button zoom_out; private String s=""; private String s1=""; private String[] arregloUbicaciones; private String[] arregloUbicaciones1; private ArrayAdapter<String> adapter; private ArrayAdapter<String> adapter1; //Servicios (Markers) private List<Servicios> listaSer; private Polyline polyline; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_google_map); res = getResources(); toolbar = (Toolbar) findViewById(R.id.toolbarSecond); setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); serverKey = res.getString(R.string.google_maps_key); autoCompleteTextView = (AutoCompleteTextView) findViewById(R.id.start); autoCompleteTextView1 = (AutoCompleteTextView) findViewById(R.id.destination); send = (ImageView) findViewById(R.id.send); zoom_out=(Button)findViewById(R.id.zoom_out); cordinLayout = (CoordinatorLayout) findViewById(R.id.cordinatorLayout); fabBtn = (FloatingActionButton) findViewById(R.id.fabBtn); autoCompleteTextView.setTextColor(res.getColor(R.color.accent)); autoCompleteTextView.setText("Mi ubicación"); autoCompleteTextView1.setFocusable(true); autoCompleteTextView1.requestFocus(); MapFragment mapFragment = (MapFragment) getFragmentManager().findFragmentById(R.id.map); mapFragment.getMapAsync(this); mGoogleApiClient = new GoogleApiClient.Builder(this).addConnectionCallbacks(this) .addOnConnectionFailedListener(this) .addApi(LocationServices.API) .addApi(AppIndex.API).build(); createLocationRequest(); initInstances(); }
Anexo 3: Código Fuente
27
private void initInstances() { autoCompleteTextView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { s = parent.getItemAtPosition(position).toString(); seleccionOrigen(s); } }); autoCompleteTextView1.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { s1 = parent.getItemAtPosition(position).toString(); seleccionDestino(s1); } }); send.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (origin == null) { Toast.makeText(GoogleMapsActivity.this, res.getString(R.string.punto_origen), Toast.LENGTH_SHORT).show(); } else { if (destination == null) { Toast.makeText(GoogleMapsActivity.this, res.getString(R.string.punto_destino), Toast.LENGTH_SHORT).show(); } else { if (s != s1) { removerRuta(); trazarRuta(); //Oculta el teclado InputMethodManager inputMethodManager = (InputMethodManager) GoogleMapsActivity.this.getSystemService(Context.INPUT_METHOD_SERVICE); inputMethodManager.hideSoftInputFromWindow(GoogleMapsActivity.this.getCurrentFocus().getWindowToken(), 0); } else { Toast.makeText(GoogleMapsActivity.this, res.getString(R.string.ubicacion_diferente), Toast.LENGTH_SHORT).show(); } } } } }); zoom_out.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { LatLng coordinate = new LatLng(origin.latitude, origin.longitude); CameraUpdate yourLocation = CameraUpdateFactory.newLatLngZoom(coordinate, 13); mMap.animateCamera(yourLocation); } }); fabBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (destination == null) { Toast.makeText(GoogleMapsActivity.this, res.getString(R.string.punto_destino), Toast.LENGTH_SHORT).show();
Anexo 3: Código Fuente
28
} else { //Invoca a google maps para la navegación con voz double latit = destination.latitude; double longi = destination.longitude; Uri giu = Uri.parse("google.navigation:q=" + latit + "," + longi + "&mode=d"); Intent mp = new Intent(Intent.ACTION_VIEW, giu); mp.setPackage("com.google.android.apps.maps"); startActivity(mp); } } }); } @Override protected void onResume() { super.onResume(); mGoogleApiClient.connect(); } @Override protected void onPause() { super.onPause(); //if (mGoogleApiClient.isConnected()) { // LocationServices.FusedLocationApi.removeLocationUpdates(mGoogleApiClient, this); mGoogleApiClient.disconnect(); //} } private void handleNewLocation(Location location) { Long = (float)location.getLongitude(); Lat = (float) location.getLatitude(); origin = new LatLng(Lat, Long); mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(origin, 16)); } @Override public void onConnected(Bundle bundle) { if (ActivityCompat.checkSelfPermission(GoogleMapsActivity.this, Manifest.permission.ACCESS_FINE_LOCATION) == PackageManager.PERMISSION_GRANTED && ActivityCompat.checkSelfPermission(GoogleMapsActivity.this, Manifest.permission.ACCESS_COARSE_LOCATION) == PackageManager.PERMISSION_GRANTED) { Location location = LocationServices.FusedLocationApi.getLastLocation(mGoogleApiClient); if (location == null) { Toast.makeText(GoogleMapsActivity.this, res.getString(R.string.active_GPS), Toast.LENGTH_SHORT).show(); LocationServices.FusedLocationApi.requestLocationUpdates(mGoogleApiClient, mLocationRequest, GoogleMapsActivity.this); } else { handleNewLocation(location); } }else{ Toast.makeText(GoogleMapsActivity.this, res.getString(R.string.no_permisos), Toast.LENGTH_SHORT).show(); } } @Override public void onConnectionSuspended(int i) {
Anexo 3: Código Fuente
29
} @Override public void onConnectionFailed(ConnectionResult connectionResult) { if (connectionResult.hasResolution()) { try { connectionResult.startResolutionForResult(this, CONNECTION_FAILURE_RESOLUTION_REQUEST); } catch (IntentSender.SendIntentException e) { e.printStackTrace(); Toast.makeText(GoogleMapsActivity.this, res.getString(R.string.error)+ e, Toast.LENGTH_SHORT).show(); } } else { Toast.makeText(GoogleMapsActivity.this, res.getString(R.string.servicios_fallo) + connectionResult.getErrorCode(), Toast.LENGTH_SHORT).show(); } } @Override public void onLocationChanged(Location location) { handleNewLocation(location); CameraPosition position = new CameraPosition.Builder() .target(origin) .zoom(16).build(); mMap.animateCamera(CameraUpdateFactory.newCameraPosition(position)); //mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(origin, 16)); } @Override public void onMapReady(GoogleMap map) { mMap = map; if(mMap!=null) { //marks(); cargarServicios(); setUpMap(); mMap.setInfoWindowAdapter(new GoogleMap.InfoWindowAdapter() { @Override public View getInfoWindow(Marker marker) { return null; } @Override public View getInfoContents(Marker marker) { View v = getLayoutInflater().inflate(R.layout.info_windows_marker, null); TextView txtTitulo = (TextView) v.findViewById(R.id.txt_titulo); txtTitulo.setText(marker.getTitle()); mMap.setOnInfoWindowClickListener(new GoogleMap.OnInfoWindowClickListener() { @Override public void onInfoWindowClick(Marker marker) { int pM=Integer.parseInt(marker.getId().substring(1)); //Enviar Parametros a una actividad final Intent intent = new Intent(GoogleMapsActivity.this, MarkerActivity.class); intent.putExtra("id_servicio", listaSer.get(pM).getInd_id()); intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK); getApplicationContext().startActivity(intent); //Enviar Parametros a un Fragmento /* InformationMarkerFragment fragobj=new InformationMarkerFragment();
Anexo 3: Código Fuente
30
Bundle bundle=new Bundle(); bundle.putString("id_servicio", listaSer.get(pM).getInd_id()); fragobj.setArguments(bundle);*/ } }); return v; } }); }else{ Toast.makeText(GoogleMapsActivity.this, res.getString(R.string.validacion_google), Toast.LENGTH_SHORT).show(); } } public void setUpMap(){ mMap.getUiSettings().setMapToolbarEnabled(false); if (ActivityCompat.checkSelfPermission(GoogleMapsActivity.this, Manifest.permission.ACCESS_FINE_LOCATION) == PackageManager.PERMISSION_GRANTED && ActivityCompat.checkSelfPermission(GoogleMapsActivity.this, Manifest.permission.ACCESS_COARSE_LOCATION) == PackageManager.PERMISSION_GRANTED) { mMap.setMyLocationEnabled(true); //mMap.getUiSettings().setMyLocationButtonEnabled(false); } mMap.setTrafficEnabled(true); //mMap.getUiSettings().setZoomControlsEnabled(true); float zoomIn= (float) 12.5; mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(-2.9068493, -78.9996403), zoomIn)); } protected void createLocationRequest() { mLocationRequest = LocationRequest.create() .setPriority(LocationRequest.PRIORITY_BALANCED_POWER_ACCURACY); /* mLocationRequest = new LocationRequest(); mLocationRequest.setInterval(INTERVAL); mLocationRequest.setFastestInterval(FASTEST_INTERVAL); mLocationRequest.setSmallestDisplacement(SMALLEST_DISPLACEMENT); mLocationRequest.setPriority(LocationRequest.PRIORITY_BALANCED_POWER_ACCURACY);*/ } //Métodos para trazar ruta public void trazarRuta() { // if (networkInfo != null && networkInfo.isConnected()){ // if(origin!=null && destination!=null) { Toast.makeText(GoogleMapsActivity.this, res.getString(R.string.trazar_ruta), Toast.LENGTH_SHORT).show(); GoogleDirection.withServerKey(serverKey) .from(origin) .to(destination) .transportMode(TransportMode.DRIVING) .execute(this); //}else{ // Toast.makeText(ServiciosGoogleMaps.this, res.getString(R.string.ruta_no_trazada), Toast.LENGTH_LONG).show(); //} //} // else { // Toast.makeText(ServiciosGoogleMaps.this, res.getString(R.string.sin_conexion), Toast.LENGTH_LONG).show(); // } } @Override public void onDirectionSuccess(Direction direction) { if (direction.isOK()) { //mMap.addMarker(new MarkerOptions().position(origin));
Anexo 3: Código Fuente
31
//mMap.addMarker(new MarkerOptions().position(destination)); ArrayList<LatLng> directionPositionList = direction.getRouteList().get(0).getLegList().get(0).getDirectionPoint(); polyline=mMap.addPolyline(DirectionConverter.createPolyline(GoogleMapsActivity.this, directionPositionList, 5, Color.BLUE)); mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(origin, 16)); } else { Toast.makeText(GoogleMapsActivity.this, res.getString(R.string.ruta_no_trazada), Toast.LENGTH_SHORT).show(); } } @Override public void onDirectionFailure(Throwable t) { Toast.makeText(GoogleMapsActivity.this, res.getString(R.string.ruta_no_trazada), Toast.LENGTH_SHORT).show(); } public void removerRuta(){ if(polyline!=null) { polyline.remove(); } } //Métodos para manejar el menu @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_map, menu); return super.onCreateOptionsMenu(menu); } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case android.R.id.home: finish(); return true; case R.id.mapa_hibrido: if(item.isChecked()) item.setChecked(false);else item.setChecked(true); mMap.setMapType(GoogleMap.MAP_TYPE_HYBRID); return true; case R.id.mapa_terrestre: if(item.isChecked()) item.setChecked(false);else item.setChecked(true); mMap.setMapType(GoogleMap.MAP_TYPE_TERRAIN); return true; case R.id.mapa_satelite: if(item.isChecked()) item.setChecked(false);else item.setChecked(true); mMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE); return true; case R.id.mapa_normal: if(item.isChecked()) item.setChecked(false);else item.setChecked(true); mMap.setMapType(GoogleMap.MAP_TYPE_NORMAL); return true; } return super.onOptionsItemSelected(item); } public void cargarServicios() { listaSer = new ArrayList<Servicios>(); final ProgressDialog loading = ProgressDialog.show(this, "Cargando Datos", "Por favor espere...", false, false); RequestQueue queue = Volley.newRequestQueue(this); StringRequest strRequest = new StringRequest(Request.Method.POST, Constantes.URLListarServicios, new Response.Listener<String>() {
Anexo 3: Código Fuente
32
@Override public void onResponse(String response) { try { JSONObject jsonObject= new JSONObject(response.toString()); JSONObject objItem = jsonObject.getJSONObject("item"); String pos=""; for (int i = 0; i < objItem.length(); i++) { Servicios ser = new Servicios(); pos=String.valueOf(i); JSONObject objServicios = objItem.getJSONObject(pos); ser.setInd_id(objServicios.getJSONObject("_id").getString("$id")); ser.setInd_nombre(objServicios.getString("ser_nombre")); ser.setInd_latitud(objServicios.getDouble("ser_geoloc_lat")); ser.setInd_longitud(objServicios.getDouble("ser_geoloc_lon")); listaSer.add(ser); } /* //extracting json array from response string JSONArray jsonArray = jsonObject.getJSONArray("arrname"); JSONObject jsonRow = jsonArray.getJSONObject(0); //get value from jsonRow String resultStr = jsonRow.getString("result"); */ } catch (JSONException e) { Toast.makeText(GoogleMapsActivity.this, res.getString(R.string.error) + "en Json", Toast.LENGTH_SHORT).show(); loading.dismiss(); } cargarServiciosMapa(); loading.dismiss(); } }, new Response.ErrorListener() { @Override public void onErrorResponse(VolleyError error) { Toast.makeText(GoogleMapsActivity.this, res.getString(R.string.sin_conexion), Toast.LENGTH_SHORT).show(); loading.dismiss(); } }) { @Override protected Map<String, String> getParams() { Map<String, String> params = new HashMap<String, String>(); return params; } }; queue.add(strRequest); } public void cargarServiciosMapa(){ arregloUbicaciones = new String[listaSer.size()+1]; arregloUbicaciones1 = new String[listaSer.size()]; for (int i= 0; i<listaSer.size(); i++) {
Anexo 3: Código Fuente
33
if(i==0) { arregloUbicaciones[i] ="Mi ubicación"; } arregloUbicaciones[i+1]=listaSer.get(i).getInd_nombre(); arregloUbicaciones1[i]=listaSer.get(i).getInd_nombre(); mMap.addMarker(new MarkerOptions() .position(new LatLng(listaSer.get(i).getInd_latitud(), listaSer.get(i).getInd_longitud())) .title(listaSer.get(i).getInd_nombre()) .icon(BitmapDescriptorFactory.fromResource(R.drawable.start_blue))); } adapter = new ArrayAdapter<String>(GoogleMapsActivity.this, android.R.layout.simple_dropdown_item_1line, arregloUbicaciones); adapter1 = new ArrayAdapter<String>(GoogleMapsActivity.this, android.R.layout.simple_dropdown_item_1line, arregloUbicaciones1); autoCompleteTextView.setThreshold(0); autoCompleteTextView1.setThreshold(0); autoCompleteTextView.setAdapter(adapter); autoCompleteTextView1.setAdapter(adapter1); autoCompleteTextView1.setDropDownWidth(380); //autoCompleteTextView1.setTextColor(res.getColor(R.color.accent)); // autoCompleteTextView1.setTextColor(Color.parseColor(getString(R.color.accent)); } public void seleccionOrigen(String origen){ for (int i= 0; i<arregloUbicaciones.length; i++) { Toast.makeText(GoogleMapsActivity.this, arregloUbicaciones[i], Toast.LENGTH_SHORT).show(); if (origen.equals(arregloUbicaciones[i])) { double la = 0; double lo = 0; if (i == 0) { /*la = origin.latitude; lo = origin.longitude; origin = new LatLng(la, lo);*/ } else { la = listaSer.get(i - 1).getInd_latitud(); lo = listaSer.get(i - 1).getInd_longitud(); origin = new LatLng(la, lo); } } } } public void seleccionDestino(String destino){ for (int i= 0; i<arregloUbicaciones1.length; i++) { double la = 0; double lo = 0; if (destino.equals(arregloUbicaciones1[i])) { la = listaSer.get(i).getInd_latitud(); lo = listaSer.get(i).getInd_longitud(); destination = new LatLng(la, lo); } } } }