Título del Proyecto: AlmuerzApp Guía de Almuerzos Autor: Contreras Jiménez, Diego Director: Esparza Peidro, Javier TESINA PARA LA OBTENCIÓN DEL TÍTULO DE: Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles Septiembre del 2016
Contenido Introducción... 3 Descripción del problema... 3 Objetivos... 3 Motivación... 3 Arquitectura de la aplicación... 5 Esquema del diseño... 5 Modelo de datos... 6 Vistas... 7 ESQUEMA... 7 PRINCIPAL... 8 NAVIGATION DRAWER... 9 BAR PREVIEW... 11 EDITAR BAR... 12 BUSCADOR... 13 Conclusiones... 14 Anexos... 15 Listado de fuentes entregadas... 15 Video demostrativo de uso... 15 Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 2
Introducción Descripción del problema Actualmente en el mercado, existe una gran diversidad de aplicaciones centradas en la publicación de negocios que pueden ser encontrados a través del sistema de geolocalización. Estas aplicaciones abarcan un amplio mercado, pero existe un hueco en el nicho del mercado local o de costumbres regionales. La posibilidad de abarcar dicho nicho de mercado, en este caso los almuerzos populares tan típicos del territorio valenciano, es lo que ha motivado la realización del presente proyecto de fin de máster. Objetivos La presente aplicación tiene como objetivo principal promocionar los bares que sirven el típico almuerzo popular en la Comunidad Valenciana; de igual manera, se facilitará a los usuarios la labor de encontrar los mejores lugares para almorzar de forma rápida e intuitiva según la zona donde se encuentren, gracias a la geolocalización. Esta aplicación beneficiará a la industria local de restauración ya que los establecimientos registrados se promocionarán en esta plataforma. En un futuro, la idea es poder monetizar la aplicación dando la posibilidad a los bares de publicitarse en la plataforma y ofrecer descuentos, ofertas, etc. Los principales entornos de la aplicación serán: - Consulta: Buscar bares por localización, nombre, puntuación, precio, especialidades, etc. - Evaluación: Poder evaluar los bares añadiendo una puntuación, fotos, descripción, etc. Además, la aplicación será multiusuario, siendo necesario el registro para poder realizar las evaluaciones, a diferencia del modo consulta que estará abierto para cualquier usuario sin la obligación de haberse registrado previamente. Motivación La idea de la realización de este proyecto ha surgido a través del trabajo en común con un amigo; antes de la realización de este proyecto el estudio de los distintos bares venía registrado solo en Twitter, por lo que surgió la necesidad de crear una aplicación que nos permitiera gestionar toda la información y ofrecerla al público de una manera más práctica y Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 3
dinámica; y además, poder monetizarla en un futuro no muy lejano. Así nació una aplicación móvil tanto para los más entendidos del mundo de los almuerzos populares, como para el público en general. Además, este proyecto supone un gran desafío por las tecnologías empleadas, ya que hasta este curso no lo había estudiado ni en la universidad ni en mi propio entorno laboral. Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 4
Arquitectura de la aplicación Esquema del diseño La solución para el desarrollo de este aplicativo ha sido la implementación de una Web App debido a la posibilidad de ejecución desde los diferentes tipos de dispositivos y plataformas. Esta aplicación puede ser ejecutada desde cualquier dispositivo a través del navegador, y además permite la opción de convertirse en una aplicación nativa de ios y Android a través de Cordova. Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 5
Así pues, la estructura básica de esta aplicación la podemos diferenciar en dos bloques: Back-End: o El servidor principal que posee el entorno de ejecución de la aplicación (Node.js + Express.js + Mongoose.js) o El servidor de base de datos (MongoDB) o El hosting de datos en la Nube (Amazon SDK / S3) o El servidor autentificación OAuth (Passport.js / Facebook) Front-End: o HTML5 o CSS3 o JavaScript o Underscore.js o Backbone.js Además, se ha hecho uso de plugins y librerías como: Google Maps API: Proporciona a la aplicación el uso del servicio de mapas de Google. Geolocation-Marker.js: Esta librería añade la funcionalidad de localización del propio dispositivo en el mapa, funcionalidad no inlcuída en la API de Google Maps en su version Javascript. jquery-raty.js: Añade la puntuación de estrellas para la valoración del bar. Tanto el entorno de ejecución de la aplicación como la base datos están actualmente alojados en OpenShift. Aunque esta solución es la que se manejó en la asignatura "Desarrollo de Web Apps" del máster, también se han valorado y probado diversas opciones como Heroku, Firebase, Amazon AWS, etc. Todas estas alternativas tienen sus propias ventajas e inconvenientes, pero finalmente se ha elegido OpenShift debido a que la versión gratuita proporcionaba casi la totalidad de funcionalidad, salvo el almacenamiento persistente de los ficheros de las fotos; dicho campo ha sido cubierto por Amazon S3. Modelo de datos El esquema de la base de datos es bastante simple como se puede ver a simple vista. Existen dos tablas, una con la información de los usuarios y otra con la de los bares. También está Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 6
contemplada en el diseño la tabla bar_review que relaciona estas dos anteriores y almacena la valoración personal del usuario sobre un bar. La base de datos está alojada en un servidor MongoDB y es accesible a través de una interfaz RESTful API. Vistas ESQUEMA En este esquema podemos ver las opciones de navegación entre vistas dentro de la aplicación. Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 7
PRINCIPAL Descripción: Esta es la pantalla principal que se abre inicialmente y en la que se muestra un mapa donde se pueden ver todos los bares registrados que están cerca de nosotros. Elementos: Mapa: Permite visualizar el mapa de un área determinada. Calles, edificios, comercios, accidentes geográficos. Elementos de navegación: Permite manejarnos dentro de un mapa, movernos, hacer zoom, centrar en nuestra posición actual. Markers: Muestra la ubicación dentro del mapa de los locales registrados en la aplicación. Si se pulsa mostrará información básica a través de una ventana de diálogo. Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 8
Navigation Drawer: Panel lateral que muestra ciertas opciones y se accede a través del botón en la esquina izquierda o mediante el deslizamiento lateral desde el borde izquierdo. Buscador: Campo de texto para poder buscar un lugar y luego llevarte a esa posición en el mapa. NAVIGATION DRAWER Descripción: Muestra las opciones de búsqueda así como la información del perfil. Elementos: Perfil: Muestra el nombre y la foto de perfil (en caso de estar identificado con Facebook). Filtros: (Esta sección está prevista para una futura ampliación) Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 9
Se podrán filtrar los resultados que aparezcan en el mapa mediante los siguientes parámetros: o o o Precio: SlideBar en el que se elige precio mínimo y máximo. Puntuación: Se podrán elegir los resultados según una puntuación mínima representada por estrellas. Categoría: Aquí se seleccionarán las categorías a mostrar. Logout: Cierra la sesión que tengamos iniciada con Facebook. A partir de ese momento dejaremos de estar identificados y no se permitirán ciertas opciones. Contacto: (Esta sección está prevista para una futura ampliación) Mostrará un formulario de contacto. Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 10
BAR PREVIEW Descripción: Ventana de diálogo que muestra la información básica del bar. Pulsando en esta ventana nos llevará a la ventana de información completa. Elementos: Nombre: Nombre del bar. Foto: Foto identificativa del bar. Puntuación: Estrellas que indican la puntuación. Descripción: Breve descripción del bar. Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 11
EDITAR BAR Descripción: En esta ventana se muestra la información completa del bar. Permite la consulta así como la edición de la información según el perfil del usuario. Elementos: Título: Nombre del Bar. Foto: Foto identificativa del bar. Valoración: Estrellas que indican la puntuación. Descripción: Descripción del bar. Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 12
Dirección: Dirección escrita además del mapa. Pulsando aquí te lleva a una aplicación externa de mapas para poder encontrar la ruta y llegar al sitio. Latitud/Longitud: Coordenadas de la localización. Editar: Pulsador para cambiar entre la versión de consulta o edición. Solo se podrá activar cuando el usuario esté registrado. Borrar: Botón para eliminar el bar. BUSCADOR Descripción: Pantalla de búsqueda de bares. Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 13
Elementos: Cuadro de texto de búsqueda. Listado de bares navegable. Navigation Drawer: Panel lateral que muestra ciertas opciones y se accede a través del botón en la esquina izquierda o mediante el deslizamiento lateral desde el borde izquierdo. Botón añadir: Permite añadir un nuevo bar a la aplicación. Conclusiones Considero que el grado de cumplimiento es alto aunque la idea inicial era seguramente demasiado ambiciosa para poder desarrollarla en su totalidad en este proyecto. Así pues, todavía quedan algunos detalles que perfilar y dejo como líneas abiertas para una próxima versión la incorporación de: Sección de valoración personal del bar: Donde se podrá puntuar, poner comentarios y subir más fotos. Filtros para mejorar la búsqueda: Añadir en los buscadores distintos criterios de búsqueda como rango de precios, especialidades, puntuaciones... Formulario de contacto. Personalmente estoy muy satisfecho con el resultado y motivado para continuar con éste hasta la completa realización de la idea original, pues este trabajo no termina aquí ya que la meta es conseguir que la aplicación figure en los distintos mercados de aplicaciones y ser accesible para el público en general. Pienso que ha sido muy útil la asignatura del Proyecto Final de Máster para poder consolidar los conocimientos adquiridos en el resto de asignaturas. Agradezco a la Universidad Politécnica de Valencia, al director Jesús Tomás, a mi tutor Javier Esparza y a los profesores del Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles la oportunidad de aprender las tecnologías más actuales e influyentes en el desarrollo de dispositivos móviles. Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 14
Anexos Listado de fuentes entregadas Se adjunta fichero comprimido con el código fuente del proyecto (AlmuerzApp.zip) Video demostrativo de uso Se adjunta link de un video demostrativo en el que se pueden observar las siguientes acciones: Login con Facebook: se actualiza el nombre y la foto de perfil. Interacciones con el mapa: zoom, mover, volver a la posición actual, buscar una ubicación. Mostrar la ventana de preview con la información de un bar al ser seleccionado el marker. Ver listado de bares. Buscar un bar del listado. Ver la información del bar. Editar la información del bar: puntuación, añadir una foto, cambiar la descripción. Añadir un nuevo bar. Eliminar el bar creado anteriormente. Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 15