Web Conoce tu ciudad

1 2 3 ESCUELA TÉCNICA SUPERIOR DE INGENIERÍA INFORMÁTICA GRADO EN INGENIERIA DEL SOFTWARE WEB CONOCE TU CIUDAD WEB KNOW YOUR CITY Realizado por Sandra Barbancho Perea Tutorizado por Enrique Domínguez Merino Departamento Lenguajes y Ciencias de la Computación UNIVERSIDAD DE MÁLAGA MÁLAGA, Julio 2015 Fecha defensa: El Secretario del Tribunal 4 5 Resumen: Conoce Tu Ciudad, va dirigida a todas aquellas personas curiosas que no se cansan nunca de descubrir lugares nuevos de su ciudad o de cualquier lugar que visiten. Está pensada para encontrar en cualquier momento, lugares interesantes de conocer que se encuentran a su alrededor o bien, buscandolos en el mapa. Los lugares se encuentran clasificados por categorías, esto es, existen por ejemplo lugares de interés “cultural” pero también “gastronómico", etc, dependiendo del momento, nos puede interesar buscar unos lugares u otros. Para poder decidirse, podrá visualizar imágenes del sitio, acceder a su web, asi como ver la valoración que ya otros turistas le han dado, de ésta forma, los usuarios podrán elegir y conocer aquellos que más gustan a la gente o bien los que a ellos les resultan más interesantes (por sus fotos por ejemplo). Por último y como la opinión de todos nos importa, hemos incorporado una dirección donde cualquiera que nos visita, puede enviarnos sus sugerencias de nuevos sitios a incorporar, así como también, darnos su opinión de aquellos que ha visitado. Palabras claves: turista, interés, cultural, gastronomía, descubrir, viajar conocer, visitar Abstract: Know Your City, it is addressed to all those curious people who never tire of discovering new places in your city or any place they visit. This meant to find at any time, meet interesting places that are around or looking for them on the map. The sites are classified by category, that is, there are such places of "cultural" but also "gourmet" etc. interest, depending on the moment, we can get some interest or other places. Couple to decide, can display images of the site, access their website and see the valuation and other tourists have given, in this way, users can choose and know the places that people like or that they would prove more interesting (for their photos for example). Finally, as everyone's opinion matters to us, we have incorporated an address where anyone who visits us can send us your suggestions for new places as well as give us feedback. Keywords: tourist, cultural, gastronomy, discover, travel to know, visit 6 7 Índice 1 Introducción 9 2 Objetivos 10 3 Especificaciones y Requisitos 11 4 Tecnología empleada 15 4.1 Plataforma .NET 16 4.2 Modelo Vista Controlador 31 4.3 Diseño Responsable (Responsible Design) 33 4.4 Metodología Scrum 35 5 Diseño 36 5.1 Diagrama de Casos de Uso 36 5.2 Modelo de Datos 37 6 Desarrollo o Implementación 39 7 Conclusiones 46 Bibliografía 47 Anexo 48 A. Manual de Usuario 48 8 9 1 Introducción Este proyecto trata de desarrollar un software destinado principalmente al turista, aunque también al usuario de a pie con ganas de descubrir los rincones escondidos que tiene cada ciudad. El turista cuando llega a una ciudad, tiene que, o bien improvisar, o bien informarse previamente antes de la visita o bien buscar un “Punto de información” que le indique los lugares de interés. Lo que se pretende con ésta aplicación, es facilitar al usuario conocer la ciudad que visita, porque aunque existen muchas aplicaciones que ofrecen dicho servicio, ésta se caracteriza por incorporar rincones de interés desconocidos por la mayoría de las guías y puntos de información. Buscamos aportar lugares nuevos y frescos, lugares desconocidos pero no por ello menos interesante que aquel que aparece en todas las guías. Esta web, aunque inicialmente pobre, busca ir creciendo con la ayuda de todos aquellos que la descubran, ya que la idea, es incorporar lugares pensados para todo tipo de turista, puesto que no todos los turistas tienen los mismos intereses. Existen los turistas culturales, aquellos que no dejan pasar la visita de ningún monumento…, están los que disfrutan descubriendo la gastronomía del lugar, también aquellos que les interesa conocer el ambiente nocturno de la ciudad, etc, se trata de abarcar lugares para todos los tipos de turistas y para todas las personas en general, ya que ésta web, también es muy práctica, para todo aquel, que le guste aprovechar los tiempos muertos de espera, o bien le gustaría descubrir nuevos restaurantes, porque está cansado de ir siempre a los mismos sitios o no sabe dónde ir por no conocer la zona. En resumen, un rinconcito, dónde todo aquel que la use, pueda descubrir, aportar, dar su opinión, sugerirnos nuevos lugares…., en general un lugar donde compartir con todos lo mejor de cada sitio. 16 4.1 Plataforma .NET La plataforma .NET es un conjunto de productos, desde sistemas operativos como Windows 8, servidores de aplicaciones como SQL Server 2005, productos de oficina como Office XP, herramientas de desarrollo como Visual Studio .NET hasta servicios Web provistos por Microsoft como .NET Passport. En definitiva, una plataforma de desarrollo y ejecución de aplicaciones, que no sólo nos brinda todas las herramientas y servicios que se necesitan para desarrollar modernas aplicaciones, sino también nos provee de mecanismos robustos, seguros y eficientes para asegurar la ejecución de éstas de forma óptima. Tanto la invocación de los servicios como su ejecución pueden ser hechas en cualquier dispositivo y sistema operativo, y accedido desde Internet. Los sitios se comunican entre sí y acceden a servicios y contenidos sin la intervención humana. Los principales componentes del marco de trabajo son:  El entorno común de ejecución para lenguajes, o CLR por sus siglas en inglés (Common Language Runtime).  La biblioteca de clases base o BCL. Un conjunto de bibliotecas de funcionalidad y controles reutilizables, contienen componentes ya programados listos para ser utilizados por otras aplicaciones.  El conjunto de lenguajes de programación de alto nivel, junto con sus compiladores y linkers. Componente de software cuya función es la de ejecutar las aplicaciones .NET e interactuar con el sistema operativo ofreciendo sus servicios y recursos. 17 .NET Framework 1Entorno de ejecución de aplicaciones (CLR) 2Conjunto de bibliotecas de funcionalidad reutilizable (.NET Framework Class Library) 3Compiladores y herramientas de desarrollo para los lenguajes .NET. 18 1Entorno de ejecución de aplicaciones (CLR) CLR Common Language Runtime, es el verdadero núcleo del framework de .NET, entorno de ejecución en el que se cargan las aplicaciones desarrolladas en los distintos lenguajes, ampliando el conjunto de servicios del sistema operativo (W2k y W2003). Permite integrar proyectos en distintos lenguajes soportados por la plataforma .Net, como C++, Visual Basic, C#, entre otros. La herramienta de desarrollo compila el código fuente de cualquiera de los lenguajes soportados por .NET en un código intermedio, el CIL (Common Intermediate Language) antes conocido como MSIL (Microsoft Intermediate Language), similar al BYTECODE de Java. Para generarlo, el compilador se basa en la especificación CLS (Common Language Specification) que determina las reglas necesarias para crear el código MSIL compatible con el CLR. Para ejecutarse se necesita un segundo paso, un compilador JIT (Just-InTime) es el que genera el código máquina real que se ejecuta en la plataforma del cliente. De esta forma se consigue con .NET independencia de la plataforma de hardware. La compilación JIT la realiza el CLR a medida que el programa invoca métodos. El código ejecutable obtenido se almacena en la memoria caché del ordenador, siendo recompilado de nuevo sólo en el caso de producirse algún cambio en el código fuente. 19 Características Es el encargado de proveer lo que se llama código administrado, es decir, un entorno que provee servicios automáticos al código que se ejecuta. Los servicios son variados:  Cargador de clases: permite cargar en memoria las clases.  Compilador MSIL a nativo: transforma código intermedio de alto nivel independiente del hardware que lo ejecuta a código de máquina propio del dispositivo que lo ejecuta.  Administrador de código: coordina toda la operación de los distintos subsistemas del Common Language Runtime.  Recolector de basura: elimina de memoria objetos no utilizados automáticamente.  Motor de seguridad: administra la seguridad del código que se ejecuta.  Motor de depuración: permite hacer un seguimiento de la ejecución del código aún cuando se utilicen lenguajes distintos.  Verificador de tipos: controla que las variables de la aplicación usen el área de memoria que tienen asignado.  Administrador de excepciones: maneja los errores que se producen durante la ejecución del código.  Soporte de multiproceso (hilos): permite desarrollar aplicaciones que ejecuten código en forma paralela.  Empaquetador de COM: coordina la comunicación con los componentes COM para que puedan ser usados por el .NET Framework.  Biblioteca de Clases Base que incluye soporte para muchas funcionalidades comunes en las aplicaciones. 20 2Conjunto de bibliotecas de funcionalidad reutilizable (.NET Framework Class Library: ASP.NET, ADO.NET, BCL ASP.NET Es un framework para aplicaciones web desarrollado y comercializado por Microsoft. Es usado por programadores y diseñadores para construir sitios web dinámicos, aplicaciones web y servicios web XML. Esta construido sobre el Common Language Runtime, permitiendo a los programadores escribir código ASP.NET usando cualquier lenguaje admitido por el .NET Framework. Actualmente, ASP.NET soporta tres modelos de programación: ASP.NET Web Forms, ASP.NET MVC y ASP.NET Web Pages. Aunque los tres modelos de programación se ejecutan sobre la misma base de ASP.NET, cada uno de ellos estructura la aplicación de maneras completamente distintas, promueve metodologías de desarrollo diferentes y se adapta a perfiles de desarrolladores distintos. El hecho de elegir uno de los modelos de programación al comenzar un proyecto de ASP.NET no excluye necesariamente a los otros, sino que es posible tener aplicaciones “híbridas” y en muchos casos tendrá todo el sentido desarrollar ciertas partes de la aplicación con un modelo de programación y otras partes con otro modelo distinto. ASP.NET Web Forms fue el primero de los tres modelos de programación en existir, y proporciona un gran nivel de abstracción con un modelo de programación familiar basado en eventos y controles que favorece la productividad mediante la programación declarativa reduciendo la cantidad de código necesaria para implementar una determinada funcionalidad. ASP.NET MVC se concibió como alternativa a Web Forms y proporciona un modelo de programación basado en el popular patrón de arquitectura MVC. Entre sus principales características destacan su completa integración con pruebas unitarias y su separación más clara entre la lógica de presentación, la lógica de negocio y la lógica de acceso a datos. ASP.NET Web Pages es el más reciente de los tres modelos de programación, y fue creado como respuesta a una creciente demanda de desarrolladores web sin experiencia previa con ASP.NET, cuya iniciación 21 en ASP.NET Web Forms o MVC les suponía una inversión inicial de tiempo demasiado grande. Web Pages proporciona un modelo de programación más simple y rápida de aprender, sin renunciar a toda la funcionalidad y flexibilidad de ASP.NET. ADO.NET Contiene el conjunto de clases que permiten interactuar con bases de datos relacionales y documentos XML como repositorios de información persistente. ADO.NET se divide conceptualmente en los consumidores y los proveedores de datos. Los consumidores son las aplicaciones que necesitan el acceso a los datos, y los proveedores son los componentes de software que implementan la interfaz y por lo tanto proporcionan los datos para el consumidor. 22 Entity Framework (EF) es una asignación (ORM) marco objeto-relacional de código abierto para ADO.NET. Es un conjunto de tecnologías en ADO.NET que apoyan el desarrollo de aplicaciones de software orientadas a datos. El Entity Framework permite a los desarrolladores trabajar con datos en forma de objetos y propiedades de dominio específico, como clientes y direcciones de los clientes, sin tener que preocuparse por las tablas de bases de datos subyacentes y columnas donde se almacenan estos datos. Con el Entity Framework, los desarrolladores pueden trabajar a un nivel más alto de abstracción cuando se relacionan con los datos, y pueden crear y mantener aplicaciones orientadas a datos con menos código que en las aplicaciones tradicionales. 23 LINQ es la tecnología de Microsoft para proporcionar un mecanismo de apoyo a nivel de idioma para la consulta de datos de todo tipo. 24 BCL Base Class Library, contiene la funcionalidad más comúnmente utilizada para el desarrollo de todo tipo de aplicaciones. Algunos ejemplos son el manejo de colecciones, cadenas de texto, etc 25 Ventajas de .NET  Unifica los modelos de programación  Simplifica aún más el desarrollo  Provee un Entorno de Ejecución de programación  Es independiente del lenguaje de programación  Interoperabilidad con código existente  Simplifica la instalación y administración de las aplicaciones  Es Extensible Unifica los modelos de programación 32  El Controlador: Responde a eventos (usualmente acciones del usuario) e invoca peticiones al 'modelo' cuando se hace alguna solicitud sobre la información (por ejemplo, editar un documento o un registro en una base de datos). También puede enviar comandos a su 'vista' asociada si se solicita un cambio en la forma en que se presenta el 'modelo' (por ejemplo, desplazamiento o scroll por un documento o por los diferentes registros de una base de datos), por tanto se podría decir que el 'controlador' hace de intermediario entre la 'vista' y el 'modelo'.  La Vista: Presenta el 'modelo' (información y lógica de negocio) en un formato adecuado para interactuar (usualmente la interfaz de usuario) por tanto requiere de dicho 'modelo' la información que debe representar como salida. *La lógica del negocio, en este contexto, es tomada como aquella funcionalidad ofrecida por el software. El software se comunica de manera amigable con el usuario a partir de la interfaz, pero el procesamiento de los datos capturados como entrada y la posterior entrega de resultados al usuario por medio de la interfaz, es conocido como la Lógica de Negocio. 33 4.3 Diseño Responsable (Responsible Design) Es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla. Resuelve muchos de los problemas de diseño causados por la proliferación de nuevos tipos de dispositivos móviles, hoy día las páginas web se visualizan en multitud de tipos de dispositivos como tabletas, teléfonos inteligentes, libros electrónicos, portátiles, PC,... Además, aún dentro de cada tipo, cada dispositivo tiene sus características concretas: tamaño de pantalla, resolución, potencia de CPU, capacidad de memoria,... Esta tecnología pretende que con un solo diseño web, tengamos una visualización adecuada en cualquier dispositivo. Páginas de diseño Responsable, utilizan coordenadas x e y en una cuadrícula de diseño y porcentajes matemáticos para imágenes en lugar de parámetros de ancho fijo. El uso de porcentajes en lugar de parámetros de ancho fijo y un diseño de cuadrícula crea un diseño más fluido que cambiar el tamaño en sí para ajustarse al tamaño de la pantalla, en consecuencia, no solamente cambia el diseño cuando cambia el ancho del dispositivo, sino que también se ajusta el tamaño de las imágenes. 34 El Diseño Responsable, se hace posible gracias a la introducción de las Media Queries en las propiedades de los Estilos CSS en su versión número 3. Las media queries son una serie de órdenes que se incluyen en la hoja de estilos que indica al documento HTML cómo debe comportarse en diferentes resoluciones de pantalla. Para entenderlo mejor, los diseños de las páginas web, al igual que los periódicos y las revistas, están basados en columnas, entonces con la filosofía del diseño adaptativo, si una web a resolución de PC (1028x768 px) tiene 5 columnas, para una tableta (800x600 px) necesitaría sólo 4, y en el caso de un teléfono inteligente cuyo ancho suele ser entre 320 px y 480 px las columnas usadas serían 3. Una de las ventajas principales es, la reducción de costes, ya que con una sola versión en HTML y CSS se cubren todas las resoluciones de pantalla, es decir, el sitio web creado estará optimizado para todo tipo de dispositivos: PC, tabletas, teléfonos móviles, etc. Esto mejora la experiencia de usuario a diferencia de lo que ocurre, por ejemplo, con sitios web de ancho fijo cuando se acceden desde dispositivos móviles. 35 4.4 Metodología Scrum La metodología Scrum, un modelo de desarrollo ágil, caracterizado por:  Adoptar una estrategia de desarrollo incremental e iterativo, en lugar de la planificación y ejecución completa del producto.  Solapamiento de las diferentes fases del desarrollo, en lugar de realizar una tras otra en un ciclo secuencial o de cascada. Fases del trabajo  Sprint 1. Recopilación de información turística de las diferentes ciudades.  Sprint 2. Diseño y creación de interfaz de usuario.  Sprint 3. Ubicaciones y localización de zonas de interés turístico en el mapa.  Sprint 4. Diseño de preguntas y gestión de opiniones  Sprint 5. Gestión de Usuarios  Sprint 6. Gestión de administradores  Sprint 7. Diseño de banco de pruebas generales  Sprint 8. Pruebas y detección de errores  Sprint 9. Preparación del paquete y su publicación en markets  Sprint 10. Documentación.  Sprint 11. Manual de usuario. 36 5 Diseño 5.1 Diagrama de Casos de Uso Unicamente partimos de dos perfiles, un usuario público y un usuario Administrador. El usuario Administrador es un usuario público, que además de poder disfrutar de todo lo que ofrece nuestra web, además tiene acceso a la pestaña restringida de Administración. Desde la pestaña de Administración, lleva a cabo los mantenimientos de la web, ampliando los lugares que tiene registrados, incluyendo más información, actualizando las direcciones asociadas, incluyendo más imágenes, etc. 37 5.2 Modelo de Datos Tablas utilizadas.  Categorias: Tabla que contiene las diferentes categorías a las que puede pertenecer un lugar, se usa para catalogar los lugares. Por ejemplo, un restaurante pertenece sin duda a la categoría “Gastronomía”, pero si además es un restaurante que ofrece comida de la tierra o el ambiente es carácteristico de la zona, además podría añaderle a dicho lugar la categoría “Cultural”. Sin embargo, si hablamos de la Alcazaba de Málaga, unicamente podría encajar en la categoría “Cultural”.  Lugares: Tabla que contiene los diferentes lugares registrados, en ella se almacena la Latitud, Longitud, Nombre, una breve descripción del lugar y un enlace a una página web, desde dónde poder obtener una información más detallada del lugar (si existe). 38  ImagenesLugar: Contiene las imágenes del lugar con una breve descripción.  ValoracionesLugar: Contiene las diferentes opiniones de los usuarios que acceden y quieren dar su valoración y opinión. En función de la valoración recibida, su puntuación cambiará. Cada lugar, tiene asociado una puntuación, esta equivale a la media de las puntuaciones recibidas, cuanto más alta la puntuación, significa que más gusta el lugar. 39 6 Desarrollo o Implementación  Sprint 1. Recopilación de información turística de las diferentes ciudades. Se han realizado varias entrevistas con agencias de viajes y puntos de interés turístico de varias ciudades con el objetivo de conocer el sector.  Sprint 2. Diseño y creación de interfaz de usuario. El entorno de desarrollo utilizado ha sido Visual Studio 2013, ideal para desarrollar aplicaciones .NET. ASP.NET soporta tres modelos de programación: ASP.NET Web Forms, ASP.NET MVC y ASP.NET Web Pages. Para nuestra aplicación, hemos utilizado ASP.NET MVC, que nos proporciona una separación más clara entre la lógica de presentación, la lógica de negocio y la lógica de acceso a datos, aunque esto nos ha supuesto una inversión inicial de tiempo para su aprendizaje.  Sprint 3. Ubicaciones y localización de zonas de interés turístico en el mapa. Para la generación de nuestro mapa, hemos hecho uso de Microsoft® Bing Maps. Microsoft® Bing Maps es una plataforma flexible con herramientas diseñadas para el desarrollo rápido de aplicaciones y proporciona una perfecta integración con otros software de Microsoft® 40 Cada uno de los puntos de interes señalizados en el mapa, se llaman “Pushpin”.  Sprint 4. Diseño de ventana y gestión de opiniones Para mostrar la información del lugar, se ha hecho uso de Ajax, hemos diseñado una ventana dónde mostrar información de cada lugar, ésta se abre al pinchar sobre el pushpin deseado ( asociando al evento click del pushpin, la apertura de ésta ventana). AJAX, acrónimo de Asynchronous JavaScript And XML ,es una técnica de desarrollo web para crear aplicaciones interactivas. Las aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible mostrar la información del lugar sin necesidad de recargar el mapa, mejorando la interactividad, velocidad y usabilidad en las aplicaciones. Para llevar a cabo las consultas necesarias para mostrar la información del lugar, se ha hecho uso de LINQ. 41 Un ejemplo sería, una ventana similar a la que se indica a continuación: Se muestra una imagen del lugar, Latitud y Longitud en el mapa. Un enlace Mas Info, abre en una nueva ventana, la web del lugar, con más información. Puntuación: contiene la puntuación media, que ha recibido de todos los usuarios que han valorado el lugar, la puntuación va del 1 al 5 siendo 1 estrella una valoración muy mala y el 5 la valoración máxima, así siempre puedes ver, los lugares que más gustan. Cuando la valoración es 0, significa que nadie ha valorado aún el sitio en cuestión. 48 Anexo A. Manual de Usuario Por defecto, si el dispositivo usado para navegar, tiene activada la geolocalización, el sistema automátimente te muestra tu ubicación en el mapa (pushpin Rojo), así como todos los lugares de tu alrededor que podría interesarte visitar (pushpin en color azul). Solo muestra lugares que disten 50 kilómetros del lugar de tu ubicación. También tienes la opción de poder hacer búsquedas por dirección. En este caso el funcionamiento sería el mismo, se marcaría con un pushpin en color rojo, el lugar buscado y en azul, todos los lugares que disten 50 kilometros de éste. 49 Un lugar pertenece a una o mas categorías, inicialmente, partimos con dos categorías que serán ampliables en un futuro. Lugares de interes Cultural y lugares de interés Gastronómico Inicialmente, se muestran todos lo lugares de todas las categorías, pero existe la posibilidad de filtrar por un tipo de categoría en concreto, por ejemplo a la hora de comer, nos puede interesar buscar sólo por lugares Gastronómicos. Una vez realizados los filtros oportunos, podemos, pinchando el en lugar que nos interesa, para así obtener una información mas detallada. Al pinchar sobre el lugar, se abre una ventana con información de éste, se trata de poder visualizar brevemente de una pasada los diferentes lugares que tenemos a nuestro alrededor. 50 Información del Lugar: Nombre: Nombre del lugar Latitud: Latitud en el mapa. Longitud: Longitud en el mapa. Mas Info: es un enlace, al pinchar sobre él, abre en una página nueva, dónde obtener información más ampliada del lugar. Puntuación: es la media de las puntuaciones recibidas de todos los usuarios. En éste caso, la media recibida es una valoración bastante alta, exactamente un 4. Eso significa que el lugar gusta bastante. Pulsando sobre el botón “Ver Imágenes”, se nos mostrará las imágenes del lugar. 51 Si pulsamos sobre el botón “Valorar”, tenemos la posibilidad de dar nuestra opinión. En la valoración, el usuario tiene la posibilidad de elegir entre: 1No me ha gustado mucho 2Esta bien 3Me gusta 4Me gusta mucho 5Totalmente recomendable De esta forma al pulsar sobre enviar, de forma anónima, se deja constancia de la opinión del usuario. 52 Y por último, pulsando sobre el botón “Opiniones”, podremos ver todas las opiniones que los demas usuarios, han dado a cada lugar. Las opiniones se muestran ordenadas de forma descente por fecha. Aquí se puede ver tanto la puntuación dada, como el campo Opinión, donde el usuario, deja una breve descripción de su impresión al visitarlo. 53 Opción “Nosotros”, se abre la siguiente página: Te muestra de forma resumida, de qué trata y qué te puede ofrecer. Creemos que puede interesar a mucha gente, y qué menos que una breve descripción para llamar la atención . 54 Pinchando sobre la opción “Contacto”, se abre la siguiente página: Este apartado permite a cualquier persona, solicitar la inclusión de un nuevo lugar a la web. Para ello, se facilita una dirección de correo, donde podrán enviarnos sus sugerencias, fotos del lugar y ubicación. Si el lugar es lo suficiente interesante, cumple con los requisitos y el usuario nos da su consentimiento, se incluiría en la web. 55 Zona restringida, exclusiva del administrador, para llevar a cabo la administración de la Web. El adminitrador una vez indicadas las credenciales accederá al siguiente menú de mantenimiento. 56 Si pulsamos sobre la opción Lugares, se muestra el formulario con los diferentes lugares que tenemos registrados. Pulsando el botón Nuevo, podemos dar de alta uno nuevo lugar. 57 Del mismo modo podremos editarlo, ver sus detalles así como eliminarlo si así se desea, pulsando sobre sus correspondientes botones.