Gestión de rutas turísticas para Málaga

1 2 3 ESCUELA TÉCNICA SUPERIOR DE INGENIERÍA INFORMÁTICA Grado en Ingeniería Informática GESTIÓN DE RUTAS TURÍSTICAS PARA MÁLAGA MANAGEMENT OF TOURIST ROUTES FOR MÁLAGA Realizado por Alejandro Luna Criado Tutorizado por Gabriel Jesús Luque Polo Departamento Lenguajes y Ciencias de la Computación UNIVERSIDAD DE MÁLAGA MÁLAGA, Diciembre de 2018 Fecha defensa: El Secretario del Tribunal 4 5 Resumen Ante la gran cantidad de turistas que cada año vienen a visitar la ciudad de Málaga y la gran cantidad de ofertas de elementos turísticos que nuestra ciudad ofrece, surge la necesidad de desarrollar una aplicación web (con un diseño responsive) en la que a través de una serie de elementos turísticos que previamente están definidos en el sistema, el usuario pueda organizar una ruta, en la que entre otros aspectos, se pueden seleccionar cuales de estos lugares les gustaría visitar, indicar el horario que tendrá disponible para realizar la ruta, así como el día de la semana y el lugar de partida. A través de estas preferencias elegidas por el usuario, el sistema se encargará de planificar una ruta donde se indicará entre otros aspectos: - Los elementos que son posible visitar atendiendo el horario y día elegido. - El orden en el que se deben de realizar las visitas. - El tiempo que se debe emplear en cada visita, el cual coincide con el tiempo medio que un usuario suele tardar en completar la visita de las instalaciones. - Rutas gráficas y paneles de indicaciones que mostrarán los pasos a seguir para ir desde un lugar turístico a otro. Palabras clave Turismo, rutas, ciudad inteligente, geolocalización, Google Maps, Google Places, aplicación web, responsive. 6 Abstract Due to the huge quantity of tourists who visit Málaga city every year and the variety of tourist elements offered, the necessity of developing a web application has arised (with a responsive design) in which through out severals touristic elements previously defined by the system, the user could organize a route to select which of those places he/she would like to visit, indicate the time available for making the route and also the day of the week and place to departure, among other aspects. Throughout those preferences choosen by the user, the system will plan a route where those among other aspects will be indicated: - The elements available for visiting according to the choosen time and date - The order in which those visits must be done - The time needed in each visit, wich must concide with the average time the user use to take in finishing the visit to the facilities - Graphical routesand indication panels which will show the steps to be followed for going from one tourist spot to another one. Keywords Sightseeing, routes, smart city, geolocation, Google Maps, Google Places, web appliccation, responsive. 7 Índice Índice .......................................................................................................................... 7 Capítulo 1. Introducción ............................................................................................ 11 1.1 Introducción ..................................................................................................... 11 1.2. Objetivos ........................................................................................................ 12 1.3. Estructura ....................................................................................................... 13 Capítulo 2. Estudio de Mercado ............................................................................... 15 2.1. Introducción .................................................................................................... 15 2.2. Málaga Turismo .............................................................................................. 15 2.3. Spain.info ....................................................................................................... 16 2.4. España es cultura ........................................................................................... 17 2.5. Conclusión...................................................................................................... 17 Capítulo 3. Tecnologías y herramientas utilizadas ................................................... 19 3.1. HTML 5 .......................................................................................................... 19 3.2. CSS 3 ............................................................................................................. 19 3.3. JavaScript y JQuery ....................................................................................... 19 3.4. PHP ................................................................................................................ 20 3.5. AJAX .............................................................................................................. 20 3.6. Bootstrap ........................................................................................................ 20 3.7. Google Maps JavaScript API y librería Places de Google .............................. 22 3.8. MySQL ........................................................................................................... 23 3.9. XAMPP ........................................................................................................... 23 3.10. Brackets ....................................................................................................... 24 Capítulo 4. Análisis del sistema ................................................................................ 25 4.1. Roles del sistema ........................................................................................... 25 4.2. Requisitos Funcionales .................................................................................. 25 RF-001 Registro ................................................................................................. 25 RF-002 Login ..................................................................................................... 25 RF-003 Gestionar rutas ...................................................................................... 26 RF-004 Añadir Lugar Turístico ........................................................................... 26 RF-005 Editar Lugar Turístico ............................................................................ 26 RF-006 Gestionar Categorías ............................................................................ 26 RF-007 Gestionar Usuarios ............................................................................... 27 RF-008 Mi Perfil ................................................................................................. 27 8 RF-009 Cerrar sesión......................................................................................... 27 4.3. Requisitos No Funcionales ............................................................................. 27 RNF-001 Usabilidad ........................................................................................... 27 RNF-002 Portabilidad......................................................................................... 27 RNF-003 Facilidad de mantenimiento ................................................................ 27 4.4. Casos de uso ................................................................................................. 28 4.4.1. Registro .................................................................................................... 29 4.4.2. Login ........................................................................................................ 29 4.4.3. Gestionar rutas......................................................................................... 30 4.4.4. Añadir Lugar Turístico .............................................................................. 31 4.4.5. Editar Lugar Turístico ............................................................................... 32 4.4.6. Gestionar Categorías ............................................................................... 33 4.4.7. Gestionar Usuarios .................................................................................. 34 4.4.8. Mi Perfil .................................................................................................... 35 4.4.9. Cerrar sesión ........................................................................................... 35 Capítulo 5. Modelado e Implementación del Sistema ............................................... 37 5.1. Diagramas de Secuencia ............................................................................... 37 5.2. Base de Datos ................................................................................................ 45 5.2.1. Modelo Relacional .................................................................................... 45 5.2.2. Tablas ...................................................................................................... 46 5.2.2.1. Tabla Usuario ............................................................................ 46 5.2.2.2. Tabla Categorías ....................................................................... 47 5.2.2.3. Tabla Lugares ............................................................................ 47 5.2.2.4. Tabla Horarios ........................................................................... 48 5.3. Cálculo de Rutas ............................................................................................ 49 Capítulo 6. Pruebas .................................................................................................. 51 Capítulo 7. Conclusiones y líneas futuras ................................................................ 53 7.1. Conclusiones .................................................................................................. 53 7.2. Líneas futuras ................................................................................................. 53 Capítulo 8. Bibliografías ........................................................................................... 55 Apéndice A. Manual de instalación ........................................................................... 59 Apéndice B. Manual de usuario ................................................................................ 69 B.1. Registro ......................................................................................................... 69 B.2. Login .............................................................................................................. 71 9 B.3. Categorías ..................................................................................................... 73 B.4. Lugares .......................................................................................................... 78 B.4.1. Nuevo Lugar ............................................................................................ 78 B.4.2 Editar Lugares .......................................................................................... 83 B.5. Rutas turísticas en Málaga............................................................................. 87 B.6. Usuarios ......................................................................................................... 95 B.7. Perfil ............................................................................................................... 96 B.8. Tiempo de sesión. .......................................................................................... 98 16 Figura 2.1. Panel de rutas Fuente: http://www.malagaturismo.com/es/secciones/rutas/13 2.3. Spain.info Otra alternativa que nos encontramos para realizar rutas turísticas es el sitio web Spain.info [2]. Dicha web tiene predefinidas diferentes tipos de rutas, pero al igual que la alternativa anterior estas rutas son estáticas y descriptivas, sin tener en cuenta preferencias del usuario. Generalmente nos da la posibilidad de buscar rutas filtrando por comunidad autónoma, diferenciándolas en cuatro principales categorías: - Rutas urbanas - Rutas culturales - Rutas temáticas - Rutas entre pueblos 17 Figura 2.2. Categorías de rutas Fuente: https://www.spain.info/es/que-quieres/rutas/ 2.4. España es cultura España es cultura es una más de las alternativas web [3] que nos da la posibilidad de realizar rutas por las diferentes ciudades de España. Esta alternativa ofrece diversos tipos de rutas, que van desde rutas gastronómicas hasta rutas monumentales. Cabe destacar que al igual que las anteriores alternativas, estas rutas también son estáticas, sin tener en cuenta requerimientos del usuario. 2.5. Conclusión Después de realizar el estudio de herramientas similares que existen en la actualidad, cabe destacar que se trata de una aplicación muy innovadora, ya que parece ser que, actualmente, no existen sistemas que te permitan realizar una ruta turística atendiendo preferencias y horarios de los usuarios, sino que las soluciones que se ofrecen son rutas estáticas y sin tener en cuenta los requerimientos que pueda tener la persona que utilice la herramienta. 18 19 Capítulo 3. Tecnologías y herramientas utilizadas En este capítulo se comentan las diferentes tecnologías que se usarán en el proceso de desarrollo de la aplicación web, así como las herramientas que se utilizarán en la codificación y despliegue del sistema. 3.1. HTML 5 El proyecto consiste en una aplicación web, por lo tanto, gran parte será desarrollada a través de HTML 5 [4], un lenguaje de marcas de hipertexto para la elaboración de páginas web. Se ha decidido utilizar este lenguaje ya que se considera uno de los lenguajes web más importante y sus elementos son compatible prácticamente con todos los navegadores que existen en la actualidad. 3.2. CSS 3 Para separar la estructura del documento web de su diseño, se utilizan varias hojas de estilos en cascadas (CSS) [5] dependiendo del apartado de la aplicación a presentar, lo que nos permitirá diseñar una web que sea visualmente llamativa de cara al usuario de forma intuitiva y sencilla. 3.3. JavaScript y JQuery Para crear contenido dinámicamente, controlar la introducción de datos en los distintos formularios que ofrece el sistema y sobre todo, para controlar los diferentes eventos que se producirán, se utilizará JavaScript [6] y JQuery [7]; el primero de ellos es un lenguaje de programación que usualmente se utilizan en el desarrollo de una aplicación web, mientras que el segundo es un framework muy popular de dicho lenguaje Al igual que muchas librerías, para poder utilizar JQuery tendremos varias opciones. Podemos descargarnos su librería e incluirla en nuestro proyecto, o bien, incluir la 20 CDN que contiene dicha librería compilada y que nos permitirá hacer uso de todas sus funcionalidades. En nuestro caso se ha optado por utilizar el CND de JQuery. Figura 3.1. Inclusión de JQuery La inclusión de JQuery se tendrá que hacer en todas las páginas donde se quiera hacer uso de este framework. 3.4. PHP Para controlar la funcionalidad que ofrece el sistema (back-end) se utilizará PHP [8], un lenguaje de programación de código abierto bastante popular en el desarrollo web, al poder ser incrustado dentro del HTML, el cual nos permitirá generar páginas web dinámicas. 3.5. AJAX Ajax [9] es una técnica que se suele emplear en el desarrollo web para permitir desarrollar aplicaciones interactivas mientras se mantiene la comunicación asíncrona con el servidor. A través de esta tecnología podremos realizar cambios en el contenido HTML sin necesidad de recargar la página en la que nos encontremos. 3.6. Bootstrap Otra de las tecnologías que utilizaremos en el desarrollo del sistema será Bootstrap [10], un framework desarrollado por Twitter, que permite el desarrollar sitios web responsive que nos facilitará que nuestra aplicación se adapte a dispositivos que tengan diferentes tipos de pantallas. Existen diferentes métodos de instalación/uso del framework al igual ocurre con JQuery, en nuestro caso utilizaremos la CDN de Bootstrap, que contiene la versión 21 compilada del CSS y JavaScript de Bootstrap, por lo que solo tendremos que incluirlo en la cabecera de todas las páginas de nuestro proyecto donde hagamos su uso, tal y como se indica el manual oficial. Figura 3.2. Inclusión de CSS y JavaScript de Bootstrap. Para poder utilizar los plugins JavaScript de Bootstrap, previamente tendremos que incluir en nuestro proyecto la librería jQuery, tal y como se muestra en la Figura 3.1, ya que la mayor parte de dichos plugins hacen uso de dicha librería. Por otra parte, Bootstrap contiene algunas funcionalidades que hacen uso de una potente librería JavaScript llamada Popper [11], que nos permitirá utilizar, entre otros aspectos, la tecnología AJAX, la cual nos facilita la creación de elementos emergentes, menús, alterar contenido de una página HTML sin necesidad de recargarla. Al igual que con Bootstrap y JQuery, tendremos que incluir las librerías en nuestro proyecto para poder utilizarla, tal y como se muestra en la Figura 3.3. Figura 3.3. Inclusión de Popper. 22 3.7. Google Maps JavaScript API y librería Places de Google Para el cálculo, uso y gestión de las rutas, se usará la API JavaScript de Google Maps [12], ya que dispone de grandes y complejas funciones que nos permitirán obtener y diseñar rutas sin grandes esfuerzos de programación. Para poder utilizar dicha API, tendremos que crear un proyecto y solicitar una clave, llamada API KEY, ya que gran parte de los servicios que ofrece Google requieren autenticación. Figura 3.4: Ejemplo API KEY Google Maps JavaScript API. Fuente: https://developers.google.com/maps/documentation/embed/get-api-key Esta API KEY sirve para, entre otros aspectos, controlar el número de peticiones que se realizan a google, de manera que con esta clave podremos hacer 1000 peticiones diarias a google gratuitamente. Si se requieren de más peticiones se deberá de solicitar una tarifa de pago que se acorde al número de peticiones que se prevén que se realicen diariamente, o simplemente el número de peticiones aumentará hasta 150000 con registrar una tarjeta de crédito y poder validar la identidad del usuario. Para poder utilizar esta API, tendremos que incluirla en las cabeceras de todas las páginas de donde se hagan uso, tal y como se muestra en la Figura 3.5 23 Figura 3.5: Inclusión de Google Maps JavaScript API. Para posteriores configuraciones del proyecto creado (como habilitar nuevas APIs, gestionar estadísticas de uso,…) podremos acceder a la plataforma Cloud de Google [13]. Por otra parte, utilizaremos la librería Places de Google [14], que nos permitirá obtener la localización geográfica e información adicional bastante detallada a la hora de definir la ubicación de los lugares turísticos. Para su uso añadiremos la cláusula libraries=places a la inclusión de Google Maps JavaScript API. Figura 3.6: Inclusión de Google Maps JavaScript API y librería Places de Google. 3.8. MySQL Como sistema gestor de la base de datos que hará uso nuestro sistema se utilizará MySQL [15], al tratar bases de datos de código abierto y que además es bastante popular de usar en entornos de desarrollo web. 3.9. XAMPP Se hará uso de XAMPP [16] ya que ofrece la particularidad de tener integrado el servidor web Apache donde se desplegará nuestra aplicación, el sistema gestor de base de datos y el intérprete de los scripts de PHP. 24 3.10. Brackets Para la codificación de la aplicación web se hará uso del editor de texto llamado Brackets [17], ya que nos permitirá, entre otros aspectos, obtener una conexión en tiempo real con nuestro navegador web, lo que nos da la posibilidad de ver instantáneamente los cambios que realicemos en los ficheros HTML y CSS de nuestra aplicación. Utilizaremos dos plugins que nos permitirá desarrollar nuestro sistema con más facilidad; utilizaremos el plugin llamado PHP SmartHints [18], que nos ofrecerá sugerencias de autocompletado de palabras claves de PHP como pueden ser nombre de funciones, variables y costantes; y utilizaremos el plugin llamado PHP Syntax Hint [19], que nos ayudará con la sintaxis de PHP y consultas MySQL. 25 Capítulo 4. Análisis del sistema En este capítulo describiremos los requisitos funcionales y no funcionales del sistema, así como la definición de casos de uso. 4.1. Roles del sistema En el sistema se han definido una serie de perfiles que se diferencian generalmente en los privilegios de acceso que estos usuarios tengan definido. Cuando hablamos de privilegios de acceso, nos referimos a los permisos que tiene un usuario para utilizar las diferentes funcionalidades que el sistema nos ofrece. Los perfiles que se han definido son los siguientes:  Súper Administrador  Administrador  Usuario normal o sin privilegios 4.2. Requisitos Funcionales RF-001 Registro Cualquier usuario podrá registrarse en el sistema. Para ello deberá utilizar un nombre de usuario que no se encuentre registrado previamente, así como un correo que no se encuentre dado de alta. Por defecto, el usuario no tendrá el perfil de “Súper Administrador” ni de “Administrador”, si no que tendrá el perfil de usuario normal o sin privilegios. RF-002 Login Para acceder al sistema se requerirá de un control de acceso mediante un identificador de usuario y clave. Dicha clave será almacenada en la base de datos a través de PHP, usando un algoritmo de hash de único sentido. 32 4.4.5. Editar Lugar Turístico Nombre Editar Lugar Turístico Descripción Editar las características de un lugar turístico Precondiciones El usuario debe de haber iniciado sesión en el sistema Requisitos Debe existir al menos un elemento turístico definido No pueden existir dos lugares con el mismo nombre o ubicación Requisito funcional que cumple RF-006 Editar Lugar Turístico Actores Usuarios con el perfil de “Súper Administrador” o “Administrador” Figura 4.4.5. Caso de uso Editar Lugar Turístico 33 4.4.6. Gestionar Categorías Nombre Gestionar Categorías Descripción Crear, buscar, editar y eliminar categorías del sistema Precondiciones El usuario debe de haber iniciado sesión en el sistema Requisitos Debe existir al menos una categoría definida No pueden existir dos categorías con el mismo nombre Requisito funcional que cumple RF-007 Gestionar Categorías Actores Usuarios con el perfil de “Súper Administrador” o “Administrador” Figura 4.4.6. Caso de uso Gestionar Categorías 34 4.4.7. Gestionar Usuarios Nombre Gestionar Usuarios Descripción Buscar, eliminar, conceder perfil de “Administrador” o conceder perfil de “Usuario normal” a cualquier usuarios que no tengan el perfil de “Súper Administrador” Precondiciones El usuario debe de haber iniciado sesión en el sistema Requisitos Debe existir al menos un usuario con el perfil de “Administrador” o “Usuario normal” Requisito funcional que cumple RF-008 Gestionar Usuarios Actores Usuarios con el perfil de “Súper Administrador” Figura 4.4.7. Caso de uso Gestionar Usuarios 35 4.4.8. Mi Perfil Nombre Mi Perfil Descripción Modificar datos personales y contraseña de acceso del usuario en sesión Precondiciones El usuario debe de haber iniciado sesión en el sistema Requisitos Requisito funcional que cumple RF-009 Perfil Actores Cualquier usuario registrado Figura 4.4.8. Caso de uso Perfil 4.4.9. Cerrar sesión Nombre Cerrar sesión Descripción Desconexión del sistema Precondiciones El usuario debe de haber iniciado sesión en el sistema Requisitos Requisito funcional que cumple RF-010 Cerrar sesión Actores Cualquier usuario registrado 36 Figura 4.4.9. Caso de uso cerrar sesión 37 Capítulo 5. Modelado e Implementación del Sistema En este capítulo indicaremos los diagramas de secuencia que se han definido para cada caso de uso, se describirá la base de datos que usará el sistema y cómo se calculan las rutas turísticas internamente. 5.1. Diagramas de Secuencia Para cada uno de los casos de uso que se han definido, se ha creado un diagrama de secuencia, donde se muestra de forma visual como es la interacción del usuario ante las diferentes partes del sistema que nos podremos encontrar. Figura 5.1.1. Diagrama de secuencia de Registro 38 Figura 5.1.2. Diagrama de secuencia de Login Figura 5.1.3. Diagrama de secuencia de Gestionar Rutas 39 Figura 5.1.4. Diagrama de secuencia de Nuevo Lugar 40 Figura 5.1.5. Diagrama de secuencia de Editar Lugares 41 Figura 5.1.6. Diagramas de secuencia de Edición y creación de una categoría 48 o Descripción: Campo de texto que contiene una descripción del lugar turístico. El tamaño máximo de la descripción derá de 4.294.967.295 caracteres. o Categoría: Clave foránea a la tabla Categorías, indica el idCategoría al que pertenece el lugar turístico. o Latitud y Longitud: Como su nombre indica, mantiene la información de la latitud y la longitud donde se encuentra situado el lugar turístico. El tamaño máximo para ambos campos es de 80 caracteres. 5.2.2.4. Tabla Horarios La tabla Horarios contiene información acerca de la apertura de un lugar turístico para cada día de la semana, concretamente los campos que contiene se definen a continuación. o idLugar: Valor entero que indica el idLugar al que pertenece el horario definido. o DiaSemana: Contendrá un valor de texto, donde se indicará el día de la semana al que corresponde el horario. Estos días serán especificados en inglés (Monday, Thuesday, Wednesday,…, Sunday). o Apertura: Contiene el valor Sí o el valor No, dependiendo si el día de la semana al que pertenezca está abierto el lugar turístico o no lo está. o HoraApertura: Contiene la hora en la que el lugar turístico estará abierto para la disposición al público. Podrá ser un valor nulo dependiendo si el día para el que se defina la hora de apertura no está abierto el lugar turístico. o HoraCierre: Contiene la hora en la que el lugar turístico estará cerrado para la disposición al público. Podrá ser un valor nulo dependiendo si el día para el que se defina la hora de cierre no está abierto el lugar turístico. 49 Para la inicialización y configuración de la base de datos se proporcionará un script llamado “inicializarBD.sql” que se encargará de este propósito. 5.3. Cálculo de Rutas El cálculo de las rutas turísticas que nos ofrece el sistema se gestionará de dos formas diferentes, las cuales dependerán del número de elementos turísticos que deseemos visitar. Si el número de elementos planificados en la ruta es menor o igual a 8, se calcularán todas las posibles permutaciones de rutas y se escogerá la que nos ofrezca un mejor resultado de todas ellas. Por otra parte, si el número de elementos que deseamos planificar en nuestra ruta supera a los 8 elementos, tendremos el problema que habrá algún momento en el que no se podrán calcular todas las permutaciones de estos elementos, debido a la gran cantidad de combinaciones que se deberían de computar y la cantidad de recursos hardware que se necesitarían para ello. En este caso, lo que haremos será calculará una serie de permutaciones aleatorias que se consideren oportunas y se añadirá una nueva entrada que consistirá en ir visitando el lugar más próximo al que nos encontremos previamente, comenzando desde el punto de partida de la ruta. De todas estas posibilidades de rutas el sistema nos ofrecerá la que considere mejor. Para considerar que una ruta es mejor que otra, se tendrán en cuenta los detalles que se describen a continuación: 1. Cuanto mayor sea el número de lugares que podemos visitar en nuestra ruta mejor será la ruta. 2. En el caso de que dos rutas contengan el mismo número de elementos a visitar, se considerará que la mejor ruta es la que menor tiempo perdido tenga, es decir, la ruta que nos ofrezca menor tiempo de espera para poder realizar las visitas de los lugares turísticos. 3. En el caso de que el tiempo perdido sea el mismo para ambas rutas, se considerará mejor ruta la contenga mayor puntuación de elementos turísticos. 50 4. Si las dos rutas presentan la misma puntuación de lugares turísticos, se considerará mejor ruta la que disponga de menor tiempo andando en el recorrido hacia los lugares turísticos. 5. Por último, si el tiempo andando es el mismo en ambas rutas, se escogerá la primera ruta que se haya calculado. Las distancias y duraciones para ir caminando desde un lugar turístico a otro se calculan a través de peticiones a Google Maps. Estas peticiones se harán una sola vez y sus resultados se almacenarán en una matriz de tamaño N x N, donde N es el número de elementos turísticos que tengamos planificados la ruta turística, de manera que la posición de la matriz pertenecientes a los índices [ i , j ] con i ≠ j, indicará la distancia y duración para ir caminando desde el lugar i hacia el lugar j. En el caso de que i = j, indicará la distancia y duración para ir caminando desde el punto de partida de la ruta hacia el lugar turístico j. 51 Capítulo 6. Pruebas Para comprobar el correcto funcionamiento de nuestro sistema, se ha creado una serie de pruebas unitarias a través de la herramienta llamada “Selenium IDE” [20] para comprobar los diferentes casos de uso que se han definido en nuestra aplicación. Concretamente se han realizado las siguientes pruebas:  Registro  Login  Calcular Ruta  Creación, edición y eliminación de una categoría  Conceder perfil Administrador, conceder perfil usuario normal y eliminar un usuario  Creación, edición y eliminación de un lugar turístico  Modificar datos de perfil  Cerrar sesión Se facilitará el conjunto de pruebas definidas en el fichero “Pruebas GRTM.side”. En la Figura 6.1 podemos observar la ejecución del test Crear Lugar, el cual simula la creación de un lugar turístico en el sistema. 52 Figura 6.1. Prueba Crear Lugar Turístico 53 Capítulo 7. Conclusiones y líneas futuras 7.1. Conclusiones El desarrollo de este trabajo final de grado nos ha parecido una idea bastante buena, ya que debido a la gran cantidad de turistas que nos encontramos diariamente por las calles de Málaga, podremos fomentar las visitas a lugares de interés público dando la oportunidad de conocer la parte más profunda e histórica de nuestra ciudad, facilitando las costosas tareas que conllevan el planificar una ruta turística. También se ha podido utilizar bastantes tecnologías que hemos visto a lo largo de la carrera como ha sido el desarrollo web a través de HTML, CSS y JavaScript o el uso de MySQL para gestionar las bases de datos. Por otra parte, se han aprendido nuevas tecnologías como AJAX, a utilizar diseños responsive en el desarrollo de nuestro sistema web a través de Bootstrap y al uso de mapas que nos ofrece Google. Se han encontrado grandes dificultados a la hora de utilizar las API de Google Maps para gestionar las rutas del sistema debido a la enorme cantidad de funcionalidades que nos ofrece; pero con paciencia y mucha práctica, se ha conseguido desarrollar un sistema integrando las metodologías de las que se han requerido. 7.2. Líneas futuras En un principio, el desarrollo de este Trabajo Final de Grado estaba considerado para que se realizara en grupo de al menos dos personas, pero al no ser posible la creación de este y al disponer de un tiempo limitado para el desarrollo de la aplicación, hemos tenido que discrepar funcionalidades del sistema y centrarnos en las características principales que hagan que nuestro sistema funcione correctamente y cumpla los objetivos definidos. Debido a esto, nos encontramos con algunas partes del sistema que se podrían mejorar, como también añadir algunas características que lo hagan más atractivo de cara al usuario que la utilice. 54 A continuación, se detallan alguna de estas: o Implementar un algoritmo de búsqueda que se encargue de calcular la mejor ruta turística independientemente del número de lugares que el usuario desee visitar. o Establecer otro tipo de medios para realizar las rutas, como puede ser el coche, el autobús o el tren. o Establecer un calendario en el que se definan los horarios de los lugares turísticos en función del día del mes. o Introducir rutas de múltiples días, donde se permita establecer más de un día de ruta. o Permitir realizar una serie de descansos dentro de la ruta. o Replantear el sistema para que tenga en cuenta el salario disponible por parte del usuario y el coste que supondría realizar la ruta turística. 55 Capítulo 8. Bibliografías [1] Málaga Turismo. Recuperado de http://www.malagaturismo.com/es/secciones/rutas/13 Accedido el 12 de septiembre de 2018. [2] Spain.Info. Recuperado de https://www.spain.info/es/que-quieres/rutas/ Accedido el 12 de septiembre de 2018. [3] España es cultura. Recuperado de http://www.xn--espaaescultura-tnb.es/es/temas/rutas/ Accedido el 12 de septiembre de 2018. [4] HTML. Recuperado de http://www.juntadeandalucia.es/averroes/centrostic/14005663/helvia/aula/archivos/repositorio/0/164/html/html/manual_html.html Accedido el 28 de Septiembre de 2018. [5] CSS. Recuperado de https://es.wikipedia.org/wiki/Hoja_de_estilos_en_cascada Accedido el 28 de Septiembre de 2018. [6] JavaScript. Recuperado de https://www.javascript.com Accedido el 28 de septiembre de 2018. 56 [7] JQuery. Recuperado de https://jquery.com/ Accedido el 28 de septiembre de 2018. [8] PHP. Recuperado de http://php.net/ Accedido el 28 de septiembre de 2018. [9] AJAX. Recuperado de https://www.w3schools.com/js/js_ajax_intro.asp Accedido el 28 de septiembre de 2018. [10] BootStrap. Recuperado de http://blog.getbootstrap.com/ Accedido el 28 de septiembre de 2018). [11] Popper. Recuperado de https://popper.js.org/ Accedido el 28 de septiembre de 2018. [12] Google Maps API. Recuperado de https://developers.google.com/maps/documentation/javascript/tutorial Accedido el 28 de septiembre de 2018. 57 [13] Plataforma Cloud de Google. Recuperado de https://console.cloud.google.com Accedido el 28 de septiembre de 2018. [14] Librería Places de Google. Recuperado de https://cloud.google.com/maps-platform/places/?apis=places Accedido el 28 de septiembre mayo de 2018. [15] MySQL. Recuperado de https://www.mysql.com/ Accedido el 28 de septiembre de 2018. [16] XAMPP. Recuperado de https://www.apachefriends.org/es/index.html Accedido el 28 de septiembre de 2018. [17] Brackets. Recuperado de http://brackets.io/ Accedido el 28 de septiembre de 2018. [18] Extension PHP SmartHints. Recuperado de http://brackets.dnbard.com/extension/mackenza.php-smarthints Accedido el 28 de septiembre de 2018. 64 Figura A.8: Bloqueo de características a través del firewall de Windows. Figura A.9: Panel de control de XAMPP con servicios de Apache y MySQL iniciados. 65 Para comenzar con el despliegue de la base de datos, utilizaremos la herramienta phpMyAdmin. Para ello, accederemos al navegador web e introduciremos en la URL la dirección http://localhost/phpmyadmin Figura A.10: Página principal de phpMyAdmin Una vez estemos en la pantalla principal de phpMyAdmin, nos dirigimos a la pestaña Importar. Seleccionamos el fichero “inicializarBD.sql”, que es script encargado de crear e inicializar la base de datos. Como conjunto de caracteres del archivo utilizaremos la codificación en utf-8, que nos permitirá representar cualquier carácter Unicode. Dejaremos marcada la opción que nos permite la interrupción del script si se produce algún error al tratar el script de inicialización de la base de datos. Habilitamos la revisión de las claves foráneas y escogemos como formato del script SQL. Como opciones específicas al formato no habilitaremos ninguna modalidad SQL compatible específica. 66 Figura A.11: Configuración de parámetros en la importación de base de datos de phpMyAdmin Una vez realizada la importación de la base de datos nos mostrará una ventana en la que nos indica información de las consultas SQL realizadas, tal y como se muestra en la Figura A.12. 67 Figura A.12: Parte de la Información acerca de las consultas realizadas en phpMyAdmin Por último, vamos a proceder con el despliegue de la aplicación. Para ello nos dirigimos a la ruta de instalación de XAMPP (véase la Figura A.3). Accedemos al directorio htdocs y copiamos la carpeta GRTM que se facilita en la raíz de dicho directorio. Figura A.13: Despliegue de aplicación en XAMPP 68 Para comprobar que todo está funcionando correctamente, podremos acceder desde el navegador web a través de la dirección http://localhost/GRTM, la cual nos redirigirá a la página de inicio de sesión de la aplicación. Figura A.14: Login del sistema 69 Apéndice B. Manual de usuario En este apéndice se describirán todas las funcionalidades que ofrece nuestra aplicación web, así como las diferentes vistas que nos podemos encontrar. Concretamente, el sistema se compone de las siguientes vistas:  Registro  Login  Categorías  Lugares  Rutas  Usuarios  Mi perfil En el sistema se diferencian tres perfiles de usuarios, los cuales corresponden con los privilegios que estos tengan asignados:  Súper Administrador.  Administrador.  Usuario normal o sin privilegios. Por defecto, los usuarios que se registren en el sistema se considerarán usuarios normales o sin privilegios. Los usuarios que pueden utilizar las diferentes vistas se describen en sus respectivas definiciones. B.1. Registro Para poder utilizar la aplicación, debemos de crear un nuevo usuario en el sistema, introduciendo información personal como son el nombre, apellidos, correo electrónico, nombre de usuario y contraseña. 70 Figura B.1.1: Vista de registro Una vez hemos introducido los datos personales de nuestra nueva cuenta, pulsaremos sobre el botón “Registrar”, para realizar la petición de registro. De estos datos personales, cabe destacar que no podremos registrarnos en el sistema utilizando un nombre de usuario o correo electrónico que previamente se encuentre definido. También es obligatorio rellenar todos los campos del formulario. Esta vista puede ser utilizada por cualquier usuario. 71 Figura B.1.2: Fallo producido en solicitud de registro, correo electrónico existente en el sistema Si el registro ha sido satisfactorio, el sistema nos redirigirá a la vista principal de la gestión de rutas. B.2. Login La página de Login, es la encargada de que un usuario que se encuentre registrado en el sistema pueda acceder a este, y utilizar las diferentes funcionalidades a las que tenga privilegio. Concretamente, se compone de los campos nombre de usuario y contraseña, los cuales son obligatorios para poder iniciar sesión. 72 Figura B.2.1: Vista de acceso al sistema También se dispone del botón “Acceder”, que será el encargado de realizar la petición de inicio al sistema. Figura B.2.2: Fallo producido en solicitud de inicio al sistema, nombre de usuario y contraseña obligatorios. Si los datos introducidos son correctos, el sistema nos redirigirá a la vista principal de la gestión de rutas. Cualquier usuario puede utilizar esta vista. 73 B.3. Categorías Cuando vamos a definir un nuevo elemento turístico en el sistema, este debe pertenecer obligatoriamente a una categoría. En esta página podremos gestionar el CRUD de las categorías definidas en nuestro sistema:  Create: Podremos añadir nuevas categorías.  Read: Se mostrará una tabla de lectura donde se muestran las categorías existentes en el sistema. Además, se dispone de un buscador de categorías.  Update: Podremos modificar cualquier categoría que se encuentre definida.  Delete: Podremos eliminar cualquier categoría que se encuentre definida. Figura B.3.1: Vista de gestión de categorías A la hora de crear una categoría, debemos de tener en cuenta de que no podremos definir una categoría con el mismo nombre que alguna de las categorías que ya se encuentren definidas en el sistema. Para crear una nueva categoría utilizaremos el campo de texto destinado para ello y pulsaremos sobre el botón “Añadir”. 80  El horario de cierre debe ser mayor al horario de apertura, de manera que solo se podrá definir horarios que vayan desde las 00:00 horas hasta las 23:59 horas del mismo día. Figura B.4.1.2. Fallo al crear nuevo lugar turístico, la categoría es requerida La ubicación del lugar turístico puede ser definida de varias formas:  Introduciendo la dirección en el campo designado para ello (campo “Ubicación”, véase Figura B.4.1.3), el cual muestra sugerencias de direcciones conforme estamos escribiendo en él. Una vez establecida la dirección pulsaremos sobre la lupa que encontraremos en la parte derecha del campo “Ubicación” para que 81 se actualice la dirección visual del mapa de Google y las coordenadas en el sistema o bien haremos “intro” sobre dicho campo. Figura B.4.1.3. Búsqueda del museo Picasso de Málaga a través del campo Ubicación  Buscando la dirección de forma visual a través del mapa de Google que se facilita y pulsando sobre la ubicación que deseamos escoger. Automáticamente nos introducirá la dirección de forma textual en el campo destinado para ello y se actualizará las coordenadas del sistema. Si intentamos salir de las regiones de España se mostrará una alerta para indicarnos que estamos saliendo de las regiones permitidas. Al pulsar el botón “Aceptar”, nos configurará una dirección automáticamente en el centro de Málaga. 82 Figura B.4.1.4. Ubicación visual en mapa de Google del museo Picasso de Málaga Figura B.4.1.5. Alerta de región restringida Una vez cumplimentado correctamente todos los campos del formulario, pulsaremos sobre el botón “Añadir” para crear el nuevo lugar turístico. 83 Si ha sido posible añadirlo, el sistema nos redirigirá a la vista “Editar Lugares”, mostrando los lugares que tengan coincidencias en nombre con el nuevo lugar turístico definido. Por otra parte, si pulsamos sobre el botón “Volver”, se redirigirá al listado de lugares turísticos definidos en el sistema, los cuales se muestran en la vista “Editar Lugares”. Figura B.4.1.6. Vista “Editar Lugares” después de añadir el lugar turístico “Museo Picasso” B.4.2 Editar Lugares Esta vista nos permite editar los lugares turísticos existentes del sistema, así como el horario de visitas que estos tengan definidos. Principalmente consta de un listado donde se muestra todos los lugares turísticos, ofreciéndonos la posibilidad de eliminarlos o editar alguna de sus características. En este listado se muestra parte de la información del lugar turístico, concretamente mostrará el nombre de la categoría, duración media de la visita y la puntuación designada. 84 Figura B.4.2.1. Vista “Editar Lugares” Al igual que en la vista de categorías, dispondremos de un buscador para buscar un lugar turístico concreto, introduciendo parte del nombre, duración media o puntuación de este en el campo “Buscar coincidencias”, de modo que conforme vayamos introduciendo el valor a filtrar, se irá actualizando el contenido de la tabla de lugares turísticos incluyendo solamente aquellos lugares que concuerden con el valor introducido en dicho campo. Figura B.4.2.2. Campo Buscar coincidencias Si queremos editar un lugar turístico, pulsaremos sobre el botón “Editar” que se encuentre definido en la entrada del lugar que deseemos editar. Al pulsar sobre dicho botón, el sistema nos redirigirá a una nueva vista, idéntica en estilos y contenidos a la vista “Nuevo Lugar”, con la diferencia de que, todos los campos del formulario que componen dicha vista estarán rellenados con las características que el lugar turístico tenga definido. 85 Figura B.4.2.3. Vista “Editar Lugar”, editando el lugar “La Alcazaba” Otra de las diferencias que podemos encontrar en esta vista respecto la vista “Nuevo Lugar” es el botón “Deshacer”, el cual nos permite restaurar los valores originales de las características del lugar turístico que se hayan manipulado. Cabe destacar que para editar un lugar turístico debemos de tener en cuenta una serie de características que coinciden con las que debemos tener en cuenta a la hora de añadir un nuevo lugar turístico al sistema, las cuales se describen en la Sección B.4.1. Por último, podemos eliminar un lugar turístico existente en el sistema. Para ello pulsaremos sobre el botón “Eliminar” que se encuentre definido en la entrada del lugar que deseemos eliminar. 86 Al pulsar sobre dicho botón, el sistema nos mostrará una alerta en la que nos indica de que, si eliminamos un lugar turístico, se eliminarán todos los horarios que este lugar tenga asociados. Figura B.4.2.4. Alerta de eliminación de un lugar turístico Si pulsamos sobre el botón “Aceptar”, se procederá a la eliminación del lugar turístico y los horarios que este tenga definidos; mientras que si pulsamos sobre el botón “Cancelar” se descartarán los cambios. Figura B.4.2.5. Lugar turístico “Museo Picasso” eliminado 87 B.5. Rutas turísticas en Málaga Una vez tengamos los lugares turísticos definidos con sus respectivos horarios y categorías, en esta vista podremos calcular una ruta (si es posible) atendiendo diferentes configuraciones por parte del usuario, las cuales son obligatorias y se describen a continuación:  Día de salida y horario de ruta. Podremos seleccionar el día de la semana que deseamos realizar la ruta turística, así como el horario de inicio y finalización de esta. Por defecto se marcará el día y la hora correspondientes al momento de acceso a la vista.  Punto de partida. Podremos seleccionar el lugar desde el que deseamos comenzar la ruta turística. Por defecto se escoge como coordenadas de salida el centro de Málaga.  Lugares turísticos. Podremos seleccionar los lugares turísticos que deseamos visitar, con posibilidad de filtrar lugares que pertenezcan a una o varias categorías concretas. 88 Figura B.5.1. Vista Rutas turísticas en Málaga Los lugares se mostrarán en paneles diferentes, de los cuales, el primer panel se encontrará desplegado, mostrando descripción del lugar y la duración media que el usuario suele tardar en realizar la visita al lugar turístico. Los demás paneles aparecerán ocultos, con posibilidad de mostrarlos pulsando en el nombre del lugar. 89 Figura B.5.2. Vista Rutas turísticas en Málaga, mostrando los lugares turísticos que pertenecen a la categoría “Monumentos Históricos” Una vez seleccionado todos los datos necesarios para crear la ruta, pulsaremos sobre el botón “Calcular Ruta”. Si es posible de obtener una ruta considerando los datos que el usuario ha introducido, se mostrará la ruta calculada con las anotaciones necesarias que indicarán los pasos que debemos de seguir, dando la posibilidad de Imprimir la ruta o guardarla en PDF. 96 Figura B.6.1. Vista Usuarios Al igual que en la vista “Categorías” y “Editar Lugar”, en esta vista disponemos un buscador de coincidencias, donde podremos introducir el nombre del usuario que deseamos buscar, de modo que conforme vayamos introduciendo el nombre se irá actualizando el contenido de la tabla de usuarios incluyendo solamente aquellos usuarios que concuerden en nombre con el valor introducido. Figura B.6.2: Campo Buscar coincidencias B.7. Perfil En esta vista podremos modificar nuestros datos personales, como son el nombre, los apellidos y el correo electrónico. También tendremos la posibilidad de cambiar la contraseña de acceso, pero no será posible modificar el nombre de usuario. Si no queremos cambiar la contraseña de acceso al sistema, deberemos dejar en blanco los campos referentes al cambio de contraseña. Una vez modificado los datos que deseemos de nuestro perfil, pulsaremos sobre el botón “Editar”. 97 Figura B.7.1. Vista Perfil, tras modificar los datos del usuario correctamente Por otra parte, si necesitamos restablecer los datos originales ante posibles cambios en los diferentes campos del formulario, pulsaremos sobre el botón “Deshacer”. Cabe destacar que no será posible utilizar una dirección de correo electrónico que se encuentre previamente definida en el sistema. Figura B.7.2. Fallo al editar datos del usuario, correo existente 98 B.8. Tiempo de sesión. El sistema dispone de un tiempo limitado de sesión, de manera que no podremos cambiar entre las diferentes páginas de nuestro sistema pasado 10 minutos permanecido en cualquier página de esta, teniéndonos que identificar de nuevo en el sistema, exceptuando la página de Login y de Registro, que no se tendrán en cuenta el tiempo de sesión ya que no existirá ninguna sesión activa.