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
Septiembre del 2016
Móviles
 Proyecto: AlmuerzApp
Alumno: Diego Contreras Jiménez

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

 Proyecto: AlmuerzApp
Alumno: Diego Contreras Jiménez

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

 Proyecto: AlmuerzApp
Alumno: Diego Contreras Jiménez

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

 Proyecto: AlmuerzApp
Alumno: Diego Contreras Jiménez

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

 Proyecto: AlmuerzApp
Alumno: Diego Contreras Jiménez

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

 Proyecto: AlmuerzApp
Alumno: Diego Contreras Jiménez

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

 Proyecto: AlmuerzApp
Alumno: Diego Contreras Jiménez

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

 Proyecto: AlmuerzApp
Alumno: Diego Contreras Jiménez

 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

 Proyecto: AlmuerzApp
Alumno: Diego Contreras Jiménez

Se podrán filtrar los resultados que aparezcan en el mapa mediante los siguientes
parámetros:

o Precio:
SlideBar en el que se elige precio mínimo y máximo.

o Puntuación:
Se podrán elegir los resultados según una puntuación mínima representada
por estrellas.

o 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

 Proyecto: AlmuerzApp
Alumno: Diego Contreras Jiménez

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

 Proyecto: AlmuerzApp
Alumno: Diego Contreras Jiménez

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

 Proyecto: AlmuerzApp
Alumno: Diego Contreras Jiménez

 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

 Proyecto: AlmuerzApp
Alumno: Diego Contreras Jiménez

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

 Proyecto: AlmuerzApp
Alumno: Diego Contreras Jiménez

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