Desarrollo de un sistema de servicios turísticos por geolocalización

Desarrollo de un sistema de servicios turísticos por geolocalización TRABAJO DE FIN DE GRADO GRADO EN INGENIERÍA INFORMÁTICA Realizado por: David Rodríguez Marco Director: Antonio Sarasa Cabezuelo Departamento de Sistemas Informáticos y Computación Facultad de Informática Universidad Complutense de Madrid Madrid, septiembre 2018 Dedicatoria “La belleza de un destino no es llegar hasta él, sino disfrutar del camino que te ha llevado a lograrlo” Hay muchas metas en la vida, unas tardan más y otras tardan menos en lograrse, pero el objetivo de todas ellas es aprender del camino que te lleva hasta ellas. Aprender de los errores buscando soluciones. Ser decidido, creativo y realista a la hora de fijar la vista hacia un reto que se desea cumplir. Después de todos estos años, uno echa la vista atrás para ver su evolución, sus cambios. Valora los momentos, tanto buenos como malos, porque al fin y al cabo el conjunto de ellos ha sido lo que le ha traído hasta el día de hoy. Cuando uno comienza una aventura lo hace siempre con una mochila, una mochila llena de recursos, unos más valiosos que otros. Entendiendo esa carga se aprende a disfrutar del camino. Añadiendo o quitando esos recursos se llega a un equilibrio. Quiero dedicarle el trabajo de todos estos años y este último a mi familia, a mis amigos de la universidad y a los de siempre. A todas las personas que han estado y están en mi vida, pues cada una de ellas me ha traído hasta aquí. Gracias de corazón, por el apoyo y la dedicación. Y aunque esta aventura termina, empiezan nuevas metas que conquistar. Agradecimientos Quiero agradecer a mi tutor de Trabajo de Fin de Grado y profesor de la carrera Antonio Sarasa Cabezuelo el apoyo que me ha dado, desde la primera reunión, ayudándome a elegir un trabajo que se adaptara a lo que estaba buscando, aportándome ideas y dejándome libertad para ser creativo a lo largo del proyecto. Quiero agradecer a la Universidad Complutense de Madrid y a la Facultad de Informática la ayuda que me ha dado durante todos estos años. A cada profesor que me ha ayudado con un tema o con alguna duda referente a tecnologías. Y en último lugar, quiero agradecer a todas las personas que me han ayudado a realizar las pruebas de la aplicación móvil. Usando la app y dándome ideas y reportes de su uso. A todas las personas e instituciones, gracias. Resumen Saber ubicarnos está a la orden del día. Saber dónde estamos para poder conocer todo lo que tenemos a nuestro alrededor es algo indispensable en nuestra rutina diaria. La informática y la tecnología constituye un papel fundamental a la hora de realizar estas acciones. Mediante la geolocalización podemos saber dónde está un sitio, cuánto tardaremos en llegar hasta el, etc. El presente Trabajo de Fin de Grado hace uso de la tecnología de la geolocalización presente en los dispositivos, para descubrir los lugares emblemáticos de una ciudad, es decir, los monumentos que hay cerca del usuario con el fin de conocerlos más de cerca. En el trabajo se han desarrollado dos aplicaciones interrelacionadas. Una aplicación que permite el mantenimiento de una página web desde la cual se puede acceder los monumentos gestionados por el sistema. El usuario de esta aplicación puede realizar operaciones tales como la introducción, modificación o eliminación de datos, descripciones, elementos multimedia o documentos relacionados con los monumentos gestionados. Por otro lado, se tiene una app Android dónde el usuario puede recuperar información acerca de los monumentos gestionados por el sistema. Para hacer más atractivo el proceso, se ha implementado el acceso a la información como una acción de “descubrimiento”. En este sentido, el usuario irá descubriendo solo los monumentos que se encuentren en un radio máximo de 1km, de manera que sólo si el usuario de la app camina, podrá descubrir los monumentos que hay en la ciudad. Esta memoria incluye todo el proceso de creación de la aplicación “GeoTuristApp”. Su especificación, arquitectura, diseño, implementación, algoritmos, conclusiones y trabajo futuro. Palabras clave Descubrir monumentos, Valorar lugares, Geolocalización, Aplicación web, Aplicación móvil, Android Abstract 5 Abstract Knowing how to locate yourself is the order of the day. Knowing where we are to know everything we have around us is essential in our daily routine. Technology and IT have a fundamental role when carrying out these actions. Through geolocation we can know where a place is, how long it will take to get there, etc. This Final Degree Paper uses technology of geolocation present in the devices to discover emblematic places of a city, in other words, the monuments that are close to the user in order to know them more closely. In this paper, two interrelated applications have been developed. An application that allows the maintenance of a website from which you can access the monuments managed by the system. The user of this application can perform operations such as the introduction, modification or removal of data, descriptions, multimedia elements or documents related to the monuments managed. On the other hand, there is an Android app where the user can retrieve information about the monuments managed by the system. To make the process more attractive, access to information has been implemented as a "discovery" action. This way, the user will discover only the monuments that are within a maximum radius of 1km, so that only if the user of the app walks, he can discover the monuments that are in the city. This paper includes the entire process of creating the "GeoTuristApp" application. Its specification, architecture, design, implementation, algorithms, conclusions and future work. Keywords Discover monuments, Rate places, Geolocation, Web application, Mobile application, Android Índice Resumen ......................................................................................................................................4 Abstract ........................................................................................................................................5 Índice de figuras ...........................................................................................................................9 1. Introducción .......................................................................................................................11 1.2 Estructura de la memoria .................................................................................................12 1.3 Propósito y objetivos ........................................................................................................14 1.4 Estado del arte .................................................................................................................15 1.1 Introduction .........................................................................................................................16 1.2.1 Memory structure .........................................................................................................17 1.3.1 Purpose and objetives ...................................................................................................19 1.4.1 State of the art ..............................................................................................................20 2. Especificación de la aplicación ...............................................................................................21 2.1 Funcionalidades de la Aplicación Web .............................................................................21 2.1.1 Casos de uso de la Aplicación Web ............................................................................21 2.2 Funcionalidades de la Aplicación Móvil ............................................................................24 2.2.1 Casos de uso de la Aplicación Móvil ..........................................................................24 3. Tecnología empleada .............................................................................................................29 3.1 Tecnologías de la Aplicación Web ....................................................................................29 3.2 Tecnologías de la Aplicación Móvil ...................................................................................30 3.3 Otras tecnologías ..............................................................................................................30 4. Arquitectura de la aplicación ..................................................................................................31 5. Modelo de datos ....................................................................................................................32 6. Diseño de la aplicación ...........................................................................................................38 6.1 Diseño de la Aplicación Web ............................................................................................38 6.2 Diseño de la Aplicación Móvil ...........................................................................................44 7. Implementación de la aplicación ............................................................................................52 7.1 Implementación de la Aplicación Web .............................................................................52 7.2 Implementación de la Aplicación Móvil............................................................................57 7.3 Base de datos ...................................................................................................................66 7.4 Algoritmos ........................................................................................................................66 8. Conclusiones y trabajo futuro ................................................................................................69 8.1 Conclusiones ....................................................................................................................69 8.1 Conclussions .....................................................................................................................69 Abstract 7 8.2 Trabajo futuro ..................................................................................................................70 8.2 Future work ......................................................................................................................71 9. Aportaciones ..........................................................................................................................72 Bibliografía .................................................................................................................................73 Apéndices ...................................................................................................................................74 Apéndice 1: Manual de instalación ........................................................................................74 Apéndice 2: Manual de usuario ..............................................................................................75 Código de las aplicaciones ......................................................................................................78 Aplicación web ...................................................................................................................78 Aplicación móvil .................................................................................................................78 Índice de figuras 9 Índice de figuras FIGURA 1 - CASOS DE USO APLICACIÓN WEB ..................................................................................................... 21 FIGURA 2 - LOGIN DE LA APLICACIÓN WEB ......................................................................................................... 22 FIGURA 3 - ALTA DE UN LUGAR ....................................................................................................................... 22 FIGURA 4 - ALTA DE UN LUGAR AVANZADO ........................................................................................................ 23 FIGURA 5 - GESTIÓN DE COMENTARIOS ............................................................................................................ 24 FIGURA 6 - CASOS DE USO APLICACIÓN MÓVIL .................................................................................................. 25 FIGURA 7 - REGISTRO Y LOGIN DE LA APP .......................................................................................................... 25 FIGURA 8 - MENÚ PRINCIPAL Y DESCUBRE......................................................................................................... 26 FIGURA 9 - VER LUGAR Y VER MULTIMEDIA ........................................................................................................ 27 FIGURA 10 - VALORAR, VER PERFIL Y VER COMENTARIOS ...................................................................................... 27 FIGURA 11 - ARQUITECTURA ......................................................................................................................... 31 FIGURA 12 - BASE DE DATOS DE LA APLICACIÓN .................................................................................................. 32 FIGURA 13 - TABLA DE USUARIOS.................................................................................................................... 33 FIGURA 14 - TABLA DE LUGARES ..................................................................................................................... 33 FIGURA 15 - TABLA DE USUARIOS - LUGARES ..................................................................................................... 34 FIGURA 16 - TABLA DE VALORACIONES ............................................................................................................. 34 FIGURA 17 - TABLA DE IMÁGENES ................................................................................................................... 35 FIGURA 18 - TABLA DE DOCUMENTOS .............................................................................................................. 35 FIGURA 19 - TABLA DE AUDIOS ....................................................................................................................... 35 FIGURA 20 - TABLA DE COMENTARIOS .............................................................................................................. 36 FIGURA 21 - TABLA DE GESTIÓN ..................................................................................................................... 36 FIGURA 22 - TABLA DE INCIDENCIAS ................................................................................................................ 36 FIGURA 23 - VISTA DE LOGIN DE LA APLICACIÓN WEB ........................................................................................... 38 FIGURA 24 - VISTA DE INICIO DE LA APLICACIÓN WEB ........................................................................................... 39 FIGURA 25 - VISTA DE MONUMENTOS DE LA APLICACIÓN WEB ............................................................................... 39 FIGURA 26 - AÑADIR LUGAR .......................................................................................................................... 40 FIGURA 27 - AÑADIR LUGAR COMPLETO ........................................................................................................... 40 FIGURA 28 - AÑADIR MONUMENTO CON CAMPOS COMPLETOS .............................................................................. 41 FIGURA 29 - VER MONUMENTO Y ACTUALIZAR ELEMENTOS MULTIMEDIA ................................................................. 41 FIGURA 30 - ELIMINAR MONUMENTO/S ........................................................................................................... 42 FIGURA 31 - COMENTARIOS DE LOS MONUMENTOS ............................................................................................ 42 FIGURA 32 - VALORACIONES DE LOS MONUMENTOS ............................................................................................ 43 FIGURA 33 - USUARIOS DE LA APLICACIÓN ........................................................................................................ 43 FIGURA 34 - INCIDENCIAS DE LA APLICACIÓN...................................................................................................... 44 FIGURA 35 - VISTA DE LOGIN DE LA APP ........................................................................................................... 44 FIGURA 36 - VISTA DE REGISTRO DE LA APP ....................................................................................................... 45 FIGURA 37 - VALIDACIÓN DE LOS FORMULARIOS DE LOGIN Y REGISTRO .................................................................... 46 FIGURA 38 - PANTALLA PRINCIPAL DE LA APP ..................................................................................................... 46 FIGURA 39 - MENÚ LATERAL DE LA APP ............................................................................................................ 47 FIGURA 40 - VISTA DE MIS MONUMENTOS EN LA APP ......................................................................................... 47 FIGURA 41 - VISTA DE USO DE UBICACIÓN Y DESCUBRE MONUMENTOS EN LA APP ..................................................... 48 FIGURA 42 - VISTA DE UN MONUMENTO EN LA APP ............................................................................................. 48 FIGURA 43 - VISTAS DE VALORAR Y COMENTAR UN MONUMENTO .......................................................................... 49 FIGURA 44 - VISTA DE ELEMENTOS MULTIMEDIA DE UN MONUMENTO ..................................................................... 50 FIGURA 45 - VISTA DE MI PERFIL DE LA APP ...................................................................................................... 50 FIGURA 46 - VISTA DE CERRAR SESIÓN DE LA APP ................................................................................................ 51 FIGURA 47 - CÓDIGO DE LOGIN ...................................................................................................................... 52 FIGURA 48 - CÓDIGO DE INICIO SECCIONES ....................................................................................................... 53 FIGURA 49 - CÓDIGO DE ACTUALIZAR DATOS ..................................................................................................... 53 1.1 Introduction 16 1.1 Introduction This Final Degree Project came up with the idea of making an application focused on tourism that takes advantage of the latest technologies that allow exploiting geolocation. Thus, the main idea is to motivate users to explore different places of a city to discover emblematic monuments and be able to access information about them managed through the created system. The system consists of two interrelated applications and with two different goals. The part of the web application allows an administrator to enrich the database with the information of the monuments and places managed by the system. The information may include a description of the monument or place, the opening and closing times, images that will be displayed on the mobile application, information documents such as pdfs, excels or sound files with descriptions about the monuments, audio guides and other information referring to the monuments. In addition, from the web application you can manage both the information of the monuments and places as well as the information referring to the users. Also, you can access statistics and assessments made by users of the application. On the other hand, the mobile application allows an user to exploit the information of the monuments stored in the database. By making use of the positioning sensor of the mobile device, the system will verify which places and monuments are close to the user. The system offers the user different places they can find, saving time and facilitating their search. The geolocation field is very extensive and in this project the tool is addressed with a specific purpose: Find nearby monuments given a position. A great advantage of geolocation is being able to determine in real time the location in which the user is located. In addition, it allows you to know the places nearby and explore their information. The way in which this project is focused is to motivate people to go out on the street, discover, know and learn from everything they have around them. Making it competition in a healthy way, even getting to know other users as the different monuments are explored. It improves knowledge about places that are in a city betting on discovering places by foot and knowing the area in which they are located. 1.1 Introduction 17 1.2.1 Memory structure The memory is structured as follows: • Introduction This section briefly explains what the project is about, summarizes and establishes the basic structure of how the project is organized. • Specification This section deals with the specification of each of the functionalities of our two applications. Both the web part and the mobile device. • Technology used In this point of the memory the tools and technologies used in the development of the project are described. • Data architecture This section deals with how the application is organized at the architecture level, and the elements that interact with each other. • Data model This section describes the complete structure of the database, the tables that compose it and the relationships between them. • Design and Implementation This section deals with all the development at the design level, the patterns used, sketches, tools used for both applications. 1.1 Introduction 18 In addition, it explains in detail the implementation of the project, how it has been built internally, the development at the code level, the relationships between the applications, the algorithms used and the technologies used. • Conclusions and future work In this section of the report, conclusions are drawn after the completion of the project and future lines of work that exist in the project. • Contributions In this section the contributions of the creator of the project are explained in detail. What have been their decisions when developing it. • Bibliography In this section, the references used throughout the development of the project are established. • Appendices The user manual and the installation manual are attached in the last section of the report. In addition to referring to the code hosted in a repository of both applications. 1.1 Introduction 19 1.3.1 Purpose and objetives The main objective of this Final Degree Project is the development of a system consisting of a web application and a mobile application that allows users to discover the monuments and places that are close to them. To do this, it takes advantage of the possibilities offered by geolocation to achieve it. This objective can be refined in the following more specific objectives: • Create a web application that allows an administrator user to keep all the information that the system manages. Adding, updating or deleting this information. • Develop a mobile application that exploits all the information in the database and shows users the different places and monuments that exist in the application. • Can see registered users, valuations and visits of monuments in real time. You can manage all the data from this application to be a complete tool and thus avoid the administrator having to touch the database or other information. • The mobile application will be the tool with which the user will interact, and can perform all the functions described above. In addition, it should be an intuitive and easy to use application so that the user feels comfortable and can use it without problems. 1.1 Introduction 20 1.4.1 State of the art Regarding the applications that there are in the market, there are many of them that are simply guides of cities in which different places and monuments are indicated, but there is no application that allows to discover specific places or monuments by geolocation giving information and utilities on them . The geolocation functionality if it is found in other applications in which the user moves in the real world and sees on the map what the application offers. There are also numerous applications on the market. In the research that has been carried out, several apps have been found that use geolocation and show monument information. • Pokemon Go [10]: Application that uses geolocation to capture creatures through augmented reality. The city is explored in search of new creatures to collect. • Google Goggles [11]: Application that shows information about products and monuments through the mobile camera. • Myooni Global Tourism Guide [12]: Tourist guide to explore the monuments around the world. Being able to know the ones that exist in other continents. • Visit A City [13]: Application to create itineraries and establish the monuments that you want to see in a city. • Guida Turística Monument [14]: Application that shows an extensive list of monuments with information and images. It has not been found any application that does the same as the one developed in this project. 2. Especificación de la aplicación 21 2. Especificación de la aplicación En esta sección se van a presentar las especificaciones de las dos aplicaciones implementadas. Para cada una de ellas, se mostrarán los diagramas de casos con los diferentes casos de uso, y a continuación se desarrolla cada caso de uso. 2.1 Funcionalidades de la Aplicación Web En este apartado se detallan las funcionalidades referentes a la aplicación web mostrando los casos de uso y las funcionalidades desarrolladas. 2.1.1 Casos de uso de la Aplicación Web La aplicación web está enfocada al usuario administrador, el cual podrá incluir nuevos lugares y monumentos, modificar los existentes (actualizando su información multimedia o eliminándola). También podrá ver los comentarios y estadísticas que han hecho los usuarios de la aplicación móvil. A continuación, se explican las siguientes funcionalidades que ofrece la aplicación web. Figura 1 - Casos de Uso Aplicación Web • Login: En la aplicación web habrá un único usuario, el administrador, que deberá logarse mediante un formulario (ver Figura 2) introduciendo usuario y contraseña para poder acceder a la aplicación. En el caso de que los campos estén vacíos o sean incorrectos, se informará al usuario del error. 2. Especificación de la aplicación 22 Figura 2 - Login de la aplicación web • Añadir monumento/lugar: Esta funcionalidad es una de las más relevantes que realizará el administrador de la aplicación web. Mediante un cuadro de búsqueda se buscará el monumento que se desea introducir en la aplicación, basándonos en la latitud y longitud. El nombre, características, descripción, horario de apertura y cierre, etc. Además, el administrador podrá subir elementos multimedia (imágenes, audios y documentos) que serán mostrados una vez el monumento sea seleccionado en la aplicación móvil por el usuario turista. Estos elementos multimedia se subirán mediante un formulario básico. En el formulario (ver Figura 3), en el caso de no introducir algún campo, se informará al usuario del error que ha sucedido. No serán obligatorios los campos multimedia, ya que los monumentos pueden tener o no elementos multimedia. Figura 3 - Alta de un lugar 2. Especificación de la aplicación 23 • Actualizar monumento/lugar: El administrador podrá editar la información almacenada de cada monumento o lugar (Ver Figura 4). Así mismo, podrá subir nuevos elementos multimedia o eliminarlos, actualizar la posición de un monumento o lugar, nombre, descripción o cualquier otro aspecto anteriormente almacenado. Figura 4 - Alta de un lugar avanzado • Eliminar monumento/lugar: Se podrán eliminar los monumentos o lugares almacenados en la base de datos. Por ejemplo, si un museo cierra y ya no admite visitas, o en el caso de que toda la información no sea correcta y sea más sencillo eliminar el monumento completamente. • Ver monumento: El administrador podrá ver todos los monumentos almacenados en la base de datos. Además, podrá ver la información general y específica de cada uno de los monumentos o lugares guardados. • Ver comentarios: Una de las pestañas de la aplicación web corresponde al apartado de comentarios que los usuarios dejan en la aplicación de cada monumento o lugar (ver Figura 5). Además, el administrador también podrá eliminar comentarios si fuera necesario. 2. Especificación de la aplicación 24 Figura 5 - Gestión de comentarios • Ver valoraciones: En esta vista el administrador podrá ver qué monumentos tienen más visitas, más valoraciones y comentarios. Se podrá generar un cuadro de estadísticas para ver que monumento/lugar es el que más afluencia de visitas tiene. Se realiza una media de las valoraciones dependiendo de cuántos usuarios la valoren. • Salir: Mediante ella se cierra la sesión de la aplicación web. 2.2 Funcionalidades de la Aplicación Móvil En este apartado se detallan las funcionalidades referentes a la parte móvil de la aplicación, mostrando los casos de uso y las funcionalidades desarrolladas explicando cada una de ellas. 2.2.1 Casos de uso de la Aplicación Móvil Mediante la aplicación móvil el usuario “turista” podrá ver los diferentes monumentos que hay a su alrededor y corresponden con los que están registrados en la base de datos. Se mostrará el enlace al monumento cercano y al pulsar en él se podrá ver la información de este además de sus elementos multimedia (si los tiene), podrá tener acceso a los monumentos que ha visitado y seguir sus estadísticas personales, y podrá realizar comentarios en los monumentos/lugares visitados. A continuación, detallaré las funcionalidades anteriormente descritas. 2. Especificación de la aplicación 25 Figura 6 - Casos de Uso Aplicación Móvil • Registro en la APP: El usuario dispondrá de un formulario (Ver Figura 6) en el que introducirá datos de carácter personal. Un nick de usuario único, que será la clave principal por la que se identificará a los usuarios, un password, el correo electrónico, el nombre y apellidos. Una vez realizado el registro los datos serán almacenados en la base de datos. Si alguno de estos datos no se rellena o es incorrecto se mostrará al usuario un mensaje de error. Figura 7 - Registro y Login de la App 5. Modelo de datos 32 5. Modelo de datos En esta sección se tratará la relación que existe entre los componentes de la base de datos y cómo esta se comunica con la aplicación web y móvil. Una vez definidas las tablas y las relaciones entre ellas se genera un gráfico visual de las relaciones existentes con los datos de cada tabla (ver Figura 12). Figura 12 - Base de datos de la aplicación Como se puede observar hay un total de 10 tablas que componen la estructura completa de la base de datos de la aplicación. 5. Modelo de datos 33 A continuación, se exponen los atributos de cada tabla: Tabla usuarios: Figura 13 - Tabla de usuarios En esta tabla (ver Figura 13), el id_usuario es la clave primaria. Equivale al nick de usuario cuándo se registra. Es única y es la que se utilizará para logarse en la aplicación y para realizar las consultas pertinentes a la base de datos, como, por ejemplo, obtener los comentarios o los monumentos que el usuario ha visitado. • nombre: Cadena de caracteres que almacena el nombre del usuario. • apellidos: Cadena de caracteres que almacena los apellidos del usuario. • password: Cadena de caracteres que almacena la contraseña del usuario. Está cifrado con un algoritmo md5 para evitar que el usuario administrador pueda verla a simple vista. • email: Cadena de caracteres que almacena el correo electrónico del usuario. • comentarios: Entero que guarda el número de comentarios que ha realizado el usuario. • valoraciones: Entero que guarda el número de valoraciones que ha realizado el usuario. • img_perfil: Cadena de caracteres que almacena la ruta de imagen de perfil. (No se utiliza por ahora) Tabla lugares (ver Figura 14): Figura 14 - Tabla de lugares 5. Modelo de datos 34 • id_lugar: Clave principal auto incrementable que identifica de forma única a un lugar. Se utiliza para hacer las peticiones pertinentes a la base de datos y obtener la información del lugar en cuestión. Cómo por ejemplo su descripción, la hora de apertura y cierre o los elementos multimedia que posee. • nombre: Cadena de caracteres que almacena el nombre del monumento/lugar. • tipo: Cadena de caracteres que almacena el tipo de lugar del que se trata. Una iglesia, un museo, un ayuntamiento… • latitud: Cadena de caracteres que almacena la latitud de las coordenadas del monumento. • longitud: Cadena de caracteres que almacena la longitud de las coordenadas del monumento. • hora_abre: Dato de tipo time que almacena la hora de apertura del lugar. • hora_cierra: Dato de tipo time que almacena la hora de cierre del lugar. • días_abre: Cadena de caracteres que almacena los días que el monumento abre. Esta información se guarda como “L” “M” “X” ... para indicar los días de apertura. • descripción: Cadena de caracteres que almacena la descripción del lugar. • visitas: Entero que almacena el número de visitas que tiene el lugar. Se incrementa cada vez que se visita un monumento/lugar. Tabla usuarios – lugares (ver Figura 15): Figura 15 - Tabla de usuarios - lugares • id_usuario: Clave extranjera que hace referencia a la clave principal de la tabla usuarios. • id_lugar: Clave extranjera que hace referencia a la clave principal de la tabla lugares. • nombre_lugar: Cadena de caracteres que almacena el nombre del monumento. Tabla valoraciones (ver Figura 16): Figura 16 - Tabla de valoraciones • id_valoracion: Clave principal auto incrementable que identifica de forma única a una valoración realizada por un usuario de la aplicación • id_usuario: Clave extranjera que hace referencia a la clave principal de la tabla usuarios. • id_lugar: Clave extranjera que hace referencia a la clave principal de la tabla lugares. 5. Modelo de datos 35 • valoración: Dato de tipo float que almacena la valoración total del lugar/monumento. Se realiza una media entre todas las valoraciones y el número de usuarios. • num_valoraciones: Dato de tipo entero que almacena el número total de valoraciones que tiene el lugar/monumento. Necesarias para realizar la media. • sum_valoraciones: Dato de tipo entero que almacena la suma de todas las valoraciones que se han realizado al movimiento. Necesarias para realizar la media. Tabla imágenes (ver Figura 17): Figura 17 - Tabla de imágenes • id_lugar: Clave extranjera que hace referencia al id_lugar de la tabla lugares. • url_imagen: Cadena de caracteres que almacena la url de la imagen del monumento. • descripción: Descripción de la imagen. Por ahora no se utiliza. Tabla documentos (ver Figura 18): Figura 18 - Tabla de documentos • id_lugar: Clave extranjera que hace referencia al id_lugar de la tabla lugares. • url_doc: Cadena de caracteres que almacena la url del documento del monumento. • descripción: Descripción del documento. Por ahora no se utiliza. Tabla audios (ver Figura 19): Figura 19 - Tabla de audios • id_lugar: Clave extranjera que hace referencia al id_lugar de la tabla lugares. • url_audio: Cadena de caracteres que almacena la url del audio del monumento. • descripción: Descripción del audio. Por ahora no se utiliza. 5. Modelo de datos 36 Tabla comentarios (ver Figura 20): Figura 20 - Tabla de comentarios • id_comentario: Clave principal auto incrementable que identifica de forma única un comentario realizado por un usuario de la aplicación. • id_usuario: Clave extranjera que hace referencia al id_usuario de la tabla usuarios. • id_lugar: Clave extranjera que hace referencia al id_lugar de la tabla lugares. • comentario: Cadena de caracteres que almacena el comentario realizado por el usuario de un lugar/monumento. Tabla gestión (ver Figura 21): Figura 21 - Tabla de gestión Esta tabla corresponde al usuario que administra la página web. Son las credenciales necesarias para poder administrarla y no está relacionada con ninguna otra tabla de la aplicación para mayor seguridad. • id_admin: Cadena de caracteres que almacena el id del usuario administrador de la página web. • password: Cadena de caracteres que almacena la contraseña del administrador de la página web. Tabla incidencias: Figura 22 - Tabla de incidencias Esta última tabla no se utiliza en la aplicación actualmente, ya que desde la aplicación móvil no se puede enviar ningún tipo de reporte por ahora. Pero se ha implementado para mejoras futuras del proyecto. • id_incidencia: Clave principal auto incrementable que identifica de forma única a una incidencia que un usuario ha realizado en la aplicación sobre un lugar/monumento. 5. Modelo de datos 37 • id_usuario: Clave extranjera que hace referencia al id_usuario de la tabla usuarios. • tipo: Cadena de caracteres que almacena el tipo de incidencia, puede ser de tipo “Problema” o de “Información” • incidencia: Cadena de caracteres que almacena la incidencia que reporta el usuario. Indicando el problema que ha encontrado o bien preguntando por algo en específico. 6. Diseño de la aplicación 38 6. Diseño de la aplicación En este apartado se van a mostrar los detalles sobre diseño que se han tenido en cuenta para realizar el sistema implementado. El diseño es una pieza clave en el desarrollo de una aplicación, ya que, si no se tiene una buena interfaz, no se podrá usar de una manera eficiente. En este sentido, se ha tenido en cuenta la usabilidad, la seguridad y el tipo de usuario al que va dirigida la aplicación. Así mismo, se ha llevado a cabo un análisis de la interfaz, para adecuarla al usuario final y que este pueda usarla de la mejor manera posible. 6.1 Diseño de la Aplicación Web Para la creación de la interfaz de la aplicación web se ha optado por un diseño: • Sencillo • Minimalista • Intuitivo • Simple • Usable La interfaz de la aplicación es muy sencilla por lo que cualquier usuario sin mucha experiencia podrá usarla sin problemas. El uso de tecnologías como HTML5 y CSS3 acompañadas de librerías como Bootstrap hacen que el diseño final de la aplicación web sea muy cómodo y usable. Se ha optado por seguir un patrón genérico a la hora de desarrollar cada vista. De esta manera cuándo el usuario vaya a realizar una acción se dará cuenta de que el proceso es muy parecido para cada una de las funcionalidades disponibles. A continuación, se va a describir cada una de las vistas que componen la aplicación web. a) Login Figura 23 - Vista de login de la aplicación web La vista de login es muy simple. Tiene dos campos para introducir el usuario y la contraseña del usuario que administra la web (ver Figura 23). 6. Diseño de la aplicación 39 Estos datos validan directamente contra la base de datos, por lo que si los datos introducidos son incorrectos se informará al usuario del error. b) Inicio Figura 24 - Vista de inicio de la aplicación web Una vez autenticado en la aplicación, el usuario verá la vista de Inicio. Esta vista contiene la información resumida que hay almacenada en la base de datos: monumentos, comentarios, valoraciones y usuarios. En la parte inferior hay un recuento de todos estos datos. Cada uno de estos datos es un enlace a la vista principal de cada tipo, es decir, los monumentos poseen enlaces que redirigen a la vista del monumento seleccionado para ver su información (ver Figura 24). Además, mediante el uso de AJAX, esta información se actualiza cada 5 segundos para saber en tiempo real los datos que hay y sus cambios. c) Monumentos Figura 25 - Vista de monumentos de la aplicación web En esta vista, el usuario administrador podrá ver la información de los lugares dados de alta: su nombre, el tipo, latitud, longitud y el número de visitas que lleva cada uno de ellos (ver Figura 25). 6. Diseño de la aplicación 40 En la columna de opciones se pueden ver dos iconos. “Eliminar”, que eliminará de forma individual ese monumento y “Ver” que, al pulsar en él, redirigirá al usuario a la vista del monumento para ver todos sus datos. En la parte superior derecha se puede ver un formulario que contiene un mapa con un buscador y cinco campos de texto (ver Figura 26). Al escribir en el campo de búsqueda del mapa aparecen varias opciones que facilita la API de Google MAPS. Al seleccionar la posición que el administrador desea, se incluirá la información del lugar en los campos de texto de la zona inferior. El nombre, el tipo y las coordenadas (latitud y longitud) se incluyen de forma automática. Y el último campo “Descripción” se podrá rellenar si el usuario administrador quiere indicar más detalles sobre el lugar. Todos los campos se pueden modificar por si el usuario administrador no está de acuerdo con alguno de los datos generados automáticamente. Al pulsar en el botón de añadir lugar, se guardará en la base de datos. d) Añadir lugar Figura 27 - Añadir lugar completo Figura 26 - Añadir lugar 6. Diseño de la aplicación 41 Si el usuario administrador quiere dar más detalles sobre el lugar que va a agregar puede pulsar sobre el botón de “+” del formulario de la vista anterior. Al pulsar en él, se le redirigirá a la vista de “Añadir Lugar”. Esta vista aporta más campos que la anterior, añadiendo la hora de apertura y cierre del lugar, los días que abre y los elementos multimedia (ver Figura 27). El administrador podrá añadir imágenes del lugar, audios, como por ejemplo audio guías del lugar, y documentos, como planos, pdfs, excels… más elaborados. Figura 28 - Añadir monumento con campos completos La vista con los campos completos se visualizará como se puede observar en la imagen. Si el usuario administrador pulsa en el botón de Añadir lugar, se guardará toda la información del monumento en la base de datos (ver Figura 28). e) Actualizar elementos multimedia Figura 29 - Ver monumento y actualizar elementos multimedia Si el usuario lo desea, podrá acceder a la información del monumento pulsando en el botón de ver en la lista de todos los monumentos. Los campos son editables por si el usuario desea copiar información que le resulte útil. Se puede ver en la parte derecha los archivos multimedia que incluye el lugar, pudiendo además de verlos, eliminarlos. En la parte inferior derecha también se puede ver el número de visitas que tiene el lugar (ver Figura 29). 6. Diseño de la aplicación 48 Como se ha comentado anteriormente, la vista de “Mis monumentos” muestra los monumentos que han sido visitados por el usuario. Sólo aparecerán los lugares o monumentos que el usuario haya añadido a su lista (ver Figura 40). Cada uno de los monumentos que se muestran en la lista es un enlace a la vista de ese monumento en específico, que mostrará la información completa de este. f) Ubicación y Descubre Monumentos Figura 41 - Vista de Uso de Ubicación y Descubre Monumentos en la app El tercer elemento del menú es el de “Descubre monumentos” que da la posibilidad al usuario de obtener su posición geográfica mediante un botón “Geolocalizar” y calcular la latitud y longitud del lugar en el que se encuentra para que pueda comprobar si hay lugares o monumentos cercanos a él. Al pulsar sobre el botón de “Geolocalizar” se pedirá al usuario que active su ubicación (en el caso de que no la tenga activada”). (ver Figura 41) Al activarse el gps del dispositivo móvil obtendrá la ubicación y comprobará si alguno de los lugares guardados en la base de datos está dentro de la latitud y longitud correspondientes. g) Vista Monumento Figura 42 - Vista de un monumento en la app 6. Diseño de la aplicación 49 Al pulsar sobre un lugar en la lista de monumentos se redirigirá al usuario a la vista del monumento seleccionado. En ella aparecerá la información básica. Una descripción (si posee una), los días de apertura, las vistas totales y la valoración acumulada que lleva. En la parte inferior se encuentran los comentarios que se han realizado de ese lugar mediante una lista con scroll para facilitar su visualización. Además, se incluyen tres botones. El primero de ellos se encuentra en la parte superior y es el de “Añadir monumento” que solamente estará activo si el usuario no lo ha añadido a su lista de lugares. Al pulsar en el botón, se agregará el lugar a la lista y se deshabilitará mostrando el mensaje de “Añadido”. Los otros dos botones son “Multimedia” y “Valorar”. El primero de ellos llevará al usuario a la vista de elementos multimedia de ese monumento. El otro, redirigirá a la vista de valorar el lugar o monumento y añadir un comentario si lo desea el usuario. h) Vista Valorar Figura 43 - Vistas de Valorar y Comentar un monumento Las tres vistas anteriores muestran la forma que tiene el usuario de valorar un lugar (ver Figura 43). La valoración será siempre obligatoria y si no se introduce una al darle al botón de valorar, no se permitirá realizar la valoración. En cambio, los comentarios son opcionales. 6. Diseño de la aplicación 50 i) Vista de elementos multimedia Figura 44 - Vista de elementos multimedia de un monumento La vista de elementos multimedia (ver Figura 44) mostrará al usuario los archivos de imagen, audio y documentos que posee el lugar seleccionado. Figura 45 - Vista de Mi Perfil de la app La vista de perfil (ver Figura 45) muestra los datos personales del usuario además de incluir los comentarios que ha realizado y las valoraciones que ha hecho a cada lugar. 6. Diseño de la aplicación 51 Figura 46 - Vista de Cerrar sesión de la app Para cerrar sesión (ver Figura 46) en la app y que no se recuerde el usuario autenticado, se podrá hacer desde el menú lateral, en la opción de “Cerrar sesión”. 7. Implementación de la aplicación 52 7. Implementación de la aplicación En este capítulo se muestra y detalla el proceso de implementación de la aplicación web y de la aplicación móvil. Además de mostrar cómo se construye la base de datos y los algoritmos más importantes de la aplicación. 7.1 Implementación de la Aplicación Web La parte web de la aplicación posee varias funcionalidades. A continuación, se van a explicar las más relevantes. a) Login: Figura 47 - Código de Login El proceso de autenticarse es sencillo (ver Figura 47). El código utiliza el usuario y password del formulario principal para validar esa información con la tabla gestión de la base de datos. b) Inicio: Tras el login, se muestra la página principal de la aplicación web, que contiene los datos principales de la base de datos. Los monumentos, valoraciones, comentarios y usuarios. Cada uno de ellos está separado en un fichero individual, para mantener un encapsulamiento y hacerlo genérico (ver Figura 48). 7. Implementación de la aplicación 53 Figura 48 - Código de Inicio secciones Dependiendo de la página a la que el usuario navegue, se mostrará una vista u otra. Según el parámetro id de la url. La vista principal tiene una característica especial, y es que hace uso de AJAX para que los datos que se muestran estén actualizados en tiempo real (ver Figura 49). Figura 49 - Código de actualizar datos c) Obtener monumentos: En la vista de monumentos se pueden ver todos los lugares que hay dados de alta en la base de datos. 7. Implementación de la aplicación 54 Figura 50 - Código de obtener monumentos La función implementada obtener_lugares recoge todos los lugares guardados y los muestra directamente a la vista (ver Figura 50). En esta vista también se permite eliminar un lugar (ver Figura 51). d) Eliminar lugares: Figura 51 - Código de eliminar lugares e) Ver monumento: El usuario puede elegir ver un monumento en específico. De esta manera podrá ver todos los datos del lugar además de los elementos multimedia (si posee alguno de ellos) (ver Figura 52). Figura 52 - Código de ver monumento 7. Implementación de la aplicación 55 Y los elementos multimedia se visualizan gracias a la función obtener_archivos que según el parámetro que se le pase mostrará un tipo de archivo u otro (imágenes, audios o documentos) Figura 53 - Código de obtener multimedia Para mostrar los usuarios, comentarios y valoraciones la implementación que se utiliza es genérica. Sólo cambia la tabla de la base de datos a la que se hace la consulta (ver Figura 53). Estas funciones son: • obtener_usuarios, obtener_comentarios y obtener_valoraciones Figura 54 - Código de obtener valoraciones 7. Implementación de la aplicación 56 Además, cada una de ellas también posee la función de eliminar un elemento de la tabla (ver Figura 54). La función más interesante en la parte de la aplicación web es la de dar de alta lugares, ya que serán necesarios para que la aplicación móvil pueda encontrarlos a la hora de realizar una consulta con las coordenadas de su posición. • Alta lugar: Figura 55 - Código de alta de lugar Tras rellenar el formulario de alta, se pasa toda la información a la función que se muestra en la imagen anterior: alta_lugar_completo Esta función genera un id único para el nuevo lugar que se da de alta en la base de datos (ver Figura 55). Además, si incluye elementos multimedia, se añaden llamando a cada una de las funciones anteriormente mencionadas: subir_imagenes, subir_audios, subir_docs. 7. Implementación de la aplicación 57 7.2 Implementación de la Aplicación Móvil La aplicación móvil se compone de tres partes (ver Figura 56). Cada una de ellas se comunica con la otra y crean una conexión que hace que la aplicación funcione. Figura 56 - Estructura app La primera de ellas es manifest que incluye el fichero de configuración de la aplicación llamado AndroidManifest.xml. A continuación, se pueden ver las actividades de las que se componen y los permisos necesarios (ver Figura 57) para el buen funcionamiento de la aplicación. Figura 57 - Permisos app Los permisos son: • Permiso de acceso a internet • Permisos para acceder a la localización del dispositivo móvil El siguiente componente de la aplicación Android es el paquete java. En él se encuentra el código de nuestra aplicación, las clases, paquetes y componentes necesarios para construir la app. La siguiente imagen muestra la estructura de la carpeta java (ver Figura 58): Figura 58 - Estructura clases java 7. Implementación de la aplicación 64 Figura 70 - Código botones multimedia y valoración Se crea un bundle para meter todos los datos necesarios en las respectivas vistas y poder utilizarlos en ellas (ver Figura 70). h) Ver perfil: La implementación de esta función es muy sencilla. Simplemente se muestran los datos del usuario en la vista, además de las valoraciones y comentarios que ha realizado (ver Figura 71). 7. Implementación de la aplicación 65 Figura 71 - Código ver perfil i) Cerrar sesión: Esta funcionalidad está implementada en el menú lateral de la aplicación. Al pulsar sobre el botón del menú, se borrará la información del objeto SharedPreferences. Se redirigirá al usuario a la pantalla de login por si desea autenticarse con otro tipo de usuario o simplemente cerrar la aplicación (ver Figura 72). Figura 72 - Código cerrar sesión 7. Implementación de la aplicación 66 7.3 Base de datos Mediante una función definida en el fichero config_conexion.php se establecela conexión con la base de datos. En este caso como se tienen dos entornos (uno en local, y otro en remoto), se ha definido una condición a la hora de realizar la conexión. Figura 73 - Conexión con BBDD La función conecta es indispensable para realizar la conexión con la base de datos, y es necesaria para realizar cualquier petición que se haga (ver Figura 73). 7.4 Algoritmos El algoritmo que se utiliza para obtener la geolocalización dentro de la aplicación móvil es la parte vital para que todo funcione. Se divide en tres partes: 1. Obtener coordenadas mediante el sensor GPS del dispositivo móvil 7. Implementación de la aplicación 67 Figura 74 - Obtener coordenadas Se comprueba si el GPS del dispositivo está activo (ver Figura 74). En caso de no estarlo, se redirigirá al usuario a las opciones de ubicación de su dispositivo móvil para activarla. 2. Cada vez que las coordenadas cambian debido a un cambio de ubicación Figura 75 - Cambio de localización Si el usuario se mueve, cambiará su ubicación, por lo que es importante que las coordenadas cambien, en caso contrario obtendría una única vez las coordenadas y no se actualizaría con los cambios de posición del usuario. Impidiendo así que se muestren los lugares cercanos nuevos (ver Figura 75). 3. Según la actividad del sensor GPS se mostrará una información u otra (ver Figura 76) 7. Implementación de la aplicación 68 Figura 76 - Actividad sensor GPS En la parte del servidor, tras mandarse la latitud y la longitud mediante la url (ver Figura 77). Figura 77 - Obtener coordenadas usuario Se comparará con cada una de las coordenadas almacenadas en la base de datos (ver Figura 78). Figura 78 - Comparación de coordenadas Si las coordenadas de los lugares comparados se encuentran dentro del radio no superior a 1km, se añadirá el lugar a un array que será enviado a la app. 8. Conclusiones y trabajo futuro 69 8. Conclusiones y trabajo futuro 8.1 Conclusiones A continuación, se desarrollan las conclusiones llevadas a cabo al finalizar el proyecto: • Se ha creado un sistema formado por dos aplicaciones de forma independiente que poseen un almacenamiento de datos común. Gracias a ellas se pueden descubrir monumentos y lugares en una ciudad. • Una de las aplicaciones creadas es una página web que sirve para administrar el contenido de la base de datos. Introduciendo lugares y monumentos por un usuario administrador. • Otra aplicación es móvil, enfocada para que los usuarios utilizando la geolocalización descubran los monumentos y lugares que hay a su alrededor. • La base de datos es la encargada de almacenar los lugares y monumentos, su información y los datos multimedia de cada uno de ellos. • Se pretendió utilizar notificaciones para avisar al usuario cuándo se acercase a un monumento, pero finalmente no se ha implementado 8.1 Conclussions Next, the conclusions carried out at the end of the project are developed: • A system has been created consisting of two applications independently that have a common data storage. Thanks to them you can discover monuments and places in a city. • One of the created applications is a web page that serves to manage the contents of the database. Introducing places and monuments by an administrator user. • Another application is mobile, focused so that users using geolocation discover the monuments and places around them. • The database is in charge of storing the places and monuments, their information and the multimedia data of each one of them. • It was intended to use notifications to warn the user when approaching a monument, but finally it has not been implemented 8. Conclusiones y trabajo futuro 70 8.2 Trabajo futuro Este trabajo deja abiertas una serie de líneas de trabajo futuro que permitirán avanzar, extenderlo y mejorarlo. A continuación, se indican estas líneas de trabajo: - Gestión de las incidencias. En la parte web ya se encuentra implementado, pero en la aplicación móvil se agregará un elemento en el menú lateral que llevará a una vista nueva. Esta contendrá un formulario para reportar errores o pedir información sobre algún lugar. - Introducir un mapa. En la aplicación móvil se añadirá un mapa con los monumentos que hay disponibles, así el usuario podrá saber con certeza que monumentos hay a su alrededor. - Notificaciones push. A la hora de buscar monumentos es una idea interesante añadir notificaciones para avisar al usuario de que se han encontrado monumentos que estén en la base de datos. Esta función podrá ejecutarse en segundo plano y avisar en el momento preciso, para no tener que estar continuamente obteniendo la geolocalización a mano. - Edición de perfil. Se implementará la opción de editar los datos personales del usuario, por si quiere cambiar de dirección de correo electrónico. - Subida de imágenes de perfil. Se dará la posibilidad al usuario de añadir una foto de perfil para identificar mejor a los usuarios. 8. Conclusiones y trabajo futuro 71 8.2 Future work This paper leaves a series of future work lines undone that will allow it to advance, extend and improve. These work lines are: - Incident management. In the website it is already implemented, but in the mobile application an element will be added in the side menu that will lead to a new view. This view will contain a form to report mistakes or request information about some places. - Introduce a map. In the mobile application a map with the available monuments will be added, so the user can know with certainty wich monuments are around him. - Push notifications. When looking for monuments it is an interesting idea to add notifications to warn the user that monuments have been found in the database. This function can run in the background and warn at the precise time, so you do not have to continually get the geolocation by hand. - Profile editing. The option of editing the personal data of the user will be implemented, in case he wants to change his email address. - Upload of profile images. The user will be given the possibility of adding a profile picture to better identify the users. 9. Aportaciones 72 9. Aportaciones En este apartado se hablará de las aportaciones que se han hecho al trabajo, incluyendo además los problemas y dificultades encontrados a lo largo del desarrollo. Después de desarrollar la aplicación (tanto la parte web como la parte móvil) y explicando todos los puntos anteriores en la memoria, se han obtenido las siguientes conclusiones. Desde el principio del desarrollo es muy importante tener en cuenta una previsión de tiempos. A medida que se programa es importante planificarse para saber hasta dónde se puede llegar. Muchas veces uno cree que ya ha finalizado una funcionalidad, y en realidad hay todavía algunos fallos que no se habían previsto. También he podido comprobar que aprender un lenguaje tiene sus dificultades, pero poco a poco te vas sintiendo más y más cómodo con él. El programar con Android Studio te ayuda a tener un entorno dónde se pueden realizar tanto el desarrollo como las pruebas. Muchos de los problemas encontrados a lo largo del proyecto me han enseñado a buscar diferentes estrategias para solventarlos. La parte web ha sido más fácil de implementar ya que la tecnología ya la conocía, aunque se han aplicado nuevas técnicas y métodos para mejorar la funcionalidad. En general el proceso de desarrollo ha sido bueno y he aprendido mucho. Tanto a nivel teórico como practico, aplicando tecnologías nuevas no vistan antes en la carrera. Y cada día que pasa hay algo nuevo que aprender Bibliografía 73 Bibliografía [1] <<Android Developers>>. [Online] Disponible en: https://developer.android.com/ [2] <<Apache Friends. Xampp>>. [Online] Disponible en: https://www.apachefriends.org/es/index.html [3] <<PHP docs>>. [Online] Disponible en: http://php.net/manual/es/intro-whatis.php [4] <<W3Schools Web Tutorials>> [Online] Disponible en: https://www.w3schools.com/ [5] <<Stack Overflow Español>> [Online] Disponible en: https://es.stackoverflow.com/ [6] <<Stack Overflow Inglés>> [Online] Disponible en: https://stackoverflow.com/ [7] <<MySQL Examples>> [Online] Disponible en: http://www.ntu.edu.sg/home/ehchua/programming/sql/mysql_beginner.html [8] <<Android Studio tutorials>> [Online] Disponible en: https://www.androidauthority.com/android-studio-tutorial-beginners-637572/ [9] <<Balsamiq Mockups>> [Online] Disponible en: https://balsamiq.cloud/ [10] <<Pokemón Go >> [Online ] Disponible en: https://play.google.com/store/apps/details?id=com.nianticlabs.pokemongo [11] <<Google Goggles>> [Online] Disponible en: https://play.google.com/store/apps/details?id=com.google.android.apps.unveil&hl=es [12] <<Myooni Guía turística global >> [Online] Disponible en: (https://play.google.com/store/apps/details?id=com.myooni [13] <<Visit A City>> [Online] Disponible en: https://play.google.com/store/apps/details?id=com.visitacity.visitacityapp [14] <<Monumento Guida Turística>> [Online] Disponible en: https://play.google.com/store/apps/details?id=com.monumento.app [15] <<Google Maps Platform>> [Online] Disponible en: https://cloud.google.com/maps-platform/?hl=es [16] <<GitHub>> [Online] Disponible en: https://github.com