1.Diseño de la interfaz de usuario y prototipos

En este apartado vamos a ver el diseño de la interfaz de usuario y los prototipos de las dos aplicaciones, la primera para dispositivos móviles y la segunda para PC para la administración de la app móvil. Ambas usan una paleta de colores basadas en el azul, para el dispositivo móvil se ha intentado diseñar siguiendo la metodología de material design, dejando pantallas lo más limpias posibles y sin demasiada información que atosigue al usuario. Para la aplicación de administración se ha intentado hacer lo más útil posible y un poco menos decorada ya que está más enfocado a la administración y a la eficiencia.

El tipo de letra usada en todo el proyecto ha sido: Sans Serif

Ahora veremos las pantallas de los prototipos explicadas con la herramienta JustInMind.

• Aplicación móvil.

Lo primero que verá el usuario al iniciar la aplicación será este SplashScreen con el logo y nombre de la app.

Tras esto, si el usuario tenía una sesión iniciada pasará directamente a la página principal de la aplicación, en el caso contrario tendrá que iniciar sesión con los datos de su cuenta o entrando con su cuenta de Twitter o Google. -Esta pantalla hace referencia al caso de uso de login

En el caso de que el usuario no recuerde su contraseña será dirigido a la siguiente ventana, donde siguiendo el proceso de restablecer su contraseña podrá cambiarla y será enviado de nuevo al login.

-Esta pantalla hace referencia al caso de uso de Restablecer contraseña

Cuando se trate de un nuevo usuario y no quiera entrar con sus cuentas de twitter o google podrá crearse una cuenta dándole a la opción del login. -Esta pantalla hace referencia al caso de uso de registro

Esta será la página principal de la aplicación, tiene el nombre, una foto de un tenista y una pequeña bienvenida.

Presionando el icono de las 3 barras aparecerá el menú lateral por el que podremos movernos por toda la aplicación.

Ahora iremos viendo las distintas partes de la app siguiendo el menú lateral ya comentado.

Club -Esta pantalla hace referencia al caso de uso de datos del club (con ver nombre, galería de imágenes y ubicación).

En esta ventana veremos el nombre del club, Club de ocio Nudos, su galería de fotos que podremos ver deslizándolas y finalmente un mini mapa que al pulsar en él nos llevara a google maps para poder ir cómodamente.

Contactos

-Esta pantalla hace referencia a los casos de uso: listar contactos, buscar usuario, agregar usuario y tener un chat con usuarios y recibir notificaciones

En el apartado de Contactos podremos ver los usuarios que tenemos guardados para poder hablar y quedar para jugar.

Al pulsar en ellos nos llevará a nuestro chat privado donde podremos hablar e incluso empezar el proceso de reservar una pista. Mediante el campo de escribir y el botón de enviar podremos mandarnos mensajes. Al pulsar sobre el icono de la pelota de tenis nos llevara directamente a hacer una reserva rellenando al contrincante con el del chat.

Continuando en la zona de contactos, al mantener pulsado sobre un usuario nos saldrá la opción de eliminarlo.

Después de eliminar a un usuario, si nos arrepentimos o si queremos añadir uno nuevo, podemos pulsar el botón flotante del + para ir a la siguiente pantalla. Donde podremos buscar al usuario por su nombre o mediante su QR.

Para finalizar con los contactos, al pulsar sobre la imagen de ellos podremos ver su perfil.

Reservar

-Esta pantalla hace referencia al caso de uso de reservar una pista, con los casos de uso incluidos de elegir extras, pago electrónico, ver estado de las pistas (en tiempo real) y el caso de uso opcional de buscar un contrincante.

En este apartado se llevarán a cabo las reservas de las pistas, primero podrá elegir la pista (entre las que estén disponibles) mediante el desplegable (flecha azul), apareciendo su foto y sus extras y opcionalmente añadir un usuario contrincante, para ello pulsando el botón de añadir usuario (flecha naranja).

En caso de que haya venido a la reserva mediante el chat con un usuario se rellenará automáticamente, en caso contrario la pantalla de buscar usuario es la siguiente:

Tras la primera ventana podrá elegir la fecha y la hora (entre las disponibles):

Una vez elegida la fecha y hora se pasará a la ventana de pago, donde se ve el precio total y se dan dos opciones de pago, mediante PayPal, al pulsar sobre él nos llevará a PayPal para hacer la transacción o mediante tarjeta visa o MasterCard, donde nos mostrará los campos para rellenar, una vez pagado nos llevará a la página principal.

Historial -Esta pantalla hace referencia al caso de uso de ver el historial de partidos

En este apartado aparecerán todos los partidos que usuario ha jugado, estarán en forma de lista (Card View), donde a simple vista podrá verse el resultado, siendo el rojo el contrincante y azul el usuario, el nombre del adversario y la fecha. Para ver el partido junto con las fotos tomadas pulsaremos sobre él.

Las fotos, así como la información del partido será rellenada por el usuario cuando le llegue una notificación en la app una vez haya concluido su reserva de la pista y podrá poner la puntuación de los sets y subir fotos mediante su cámara o desde la galería.

Calendario -Esta pantalla hace referencia al caso de uso de ver calendario de reservas y partidos En este apartado el usuario tendrá un calendario con los partidos o reservas que tenga, para verlos deberá pulsar en el día del calendario y le aparecerán.

Perfil -Esta pantalla hace referencia a los casos de uso de cambiar nombre de usuario, cambiar descripción , cambiar foto de perfil , generar qr y elegir con cámara o galería. En el perfil el usuario podrá ver su foto, su nombre de usuario, su descripción y pulsando en el botón de código QR ver su código QR para enseñárselo a otro usuario. En esta pantalla también está la opción de cerrar sesión ( al lado de lápiz)

Para editar el perfil del usuario pulsará el icono del lápiz y le llevará a la siguiente pestaña, donde pulsando el botón de la cámara le dará a elegir entre elegirla desde la galería o directamente con la cámara, cambiar su nombre (si no está repetido) y modificar su descripción.

• Aplicación Administración. Esta aplicación es la de la administración y solo será usada por usuarios específicos. Ahora veamos sus pantallas:

Login

Al igual que en la app móvil el usuario se encontrará con un login en el que introducir sus datos de acceso.

En caso de haber olvidado su contraseña pulsará en la opción correspondiente y seguirá los pasos (los mismos que en la app móvil).

Si aún no tiene cuenta como administrador podrá crearla fácilmente pulsando en la opción correspondiente.

Una vez introduzca de forma correcta sus datos de acceso pasará a la página principal de la aplicación.

Esta pantalla tiene los accesos (mediante botones) a las distintas partes de la aplicación. Para cerrar su sesión podrá darle al botón de la izquierda rojo.

Gestionar instalaciones -Esta pantalla hace referencia a los casos de uso de crear pista, modificar pista, eliminar pista, ver pista, buscar pista y modificar precio de extras

En este apartado se mostrarán todas las pistas que tiene el club, mostrando su nombre, foto, estado y precio base por hora. Tiene un buscador en caso de que tenga demasiadas pistas y así poder buscar la que se desea de forma rápida. Ahora veremos las distintas funciones de esta pantalla:

• Para crear una nueva pista pulsaremos en el botón de “Crear Pista” y aparecerá una ventana de creación, podrá ponerle un nombre, una foto (al pulsar sobre el botón de cambiar saldrá el explorador de Windows), el estado (disponible o no disponible), su precio base, y añadir extras con su precio.

• Para ver o modificar una pista pulsaremos sobre el nombre de la pista deseada, al hacerlo podremos ver los datos sin más o modificarlos y pulsar el botón verde para guardar los cambios.

• Para eliminar una o varias pistas marcaremos su casilla (flecha) y pulsaremos borrar pista.

Gestión de reservas -Esta pantalla hace referencia a crear informes de reservas

En esta pantalla se podrán ver y crear PDF sobre las reservas de la aplicación, para ello crearemos nuestro filtro personalizado pudiendo filtrar entre fechas, por pistas y por precio inferior o superior. Una vez tengamos el filtro hecho pulsaremos “ver” y si hay reservas que coincidan con el filtro se rellenará la tabla, una vez rellena se podrá pasar a PDF.

Gestión de usuarios -Hace referencia a los casos de uso de listar usuarios, buscar usuarios, eliminar usuarios, ver usuarios e inhabilitar usuarios.

En este apartado se podrán ver a todos los usuarios de la aplicación, podrá ir pasando entre las páginas de usuarios con las flechas de abajo o buscar al usuario que quiera con el buscador. Se podrá mirar el correo, nombre y una contraseña resumida del usuario. Activando el checkbox del usuario se podrá borrar o inhabilitar del sistema.

Informes -Hace referencia a crear informes de pistas

De forma similar a las reservas en este apartado se podrán crear informes de contabilidad, el filtro aquí será la pista y el mes (pudiendo elegir todo el año), una vez hecho el filtro se podrá ver en la tabla cada registro de la pista con el usuario, fecha y precio y después crear un PDF.

Precio por tramo horario -Hace referencia al caso de uso de poner precio fijado por tramos

En este apartado el administrador podrá marcar unos precios dependiendo del tramo horario en el que se encuentre la reserva para encarecerla. Para crear un tramo horario elegirá una hora inicial, una final y el precio, al pulsar el botón de añadir se añadirá a la tabla y se aplicará en la aplicación móvil.

Club -Hace referencia a los casos de uso de crear club y modificar club

En este apartado el administrador podrá modificar los datos del club o simplemente verlos. Para modificarlos pulsará el botón de modificar para hacer todos los campos editables y aparecerán dos nuevos botones para añadir o eliminar fotografías del club, una vez modificado para poder guardar los cambios volveremos a pulsar el botón de modificar.

2.Diagrama de Clases

Con los requisitos de información y los casos de uso se relacionan las entidades importantes en clases. De este modo se muestra la estructura del sistema con sus clases, atributos, métodos y relaciones entre ellos.

Con el diagrama podremos ver las distintas relaciones entre las clases, que son:

• Un club tiene un nombre, una ubicación (guardando su latitud y longitud) y una serie de fotografías, además tiene distintas pistas y además tiene unos usuarios.

• Un usuario (que guardara datos como su nombre de usuario, fotografía, email…) pertenece a un club, puede hacer reservas (donde elige una pista) y ver sus partidos (que pertenecen a una reserva), además puede tener una serie de contactos (otros usuarios que podrá buscar mediante nombre de usuario o utilizando su código qr) y tener un chat con ellos para mandar y recibir mensajes.

3.Diseño de la persistencia de la información

Con los requisitos de información y el diagrama de clase podemos extraer las entidades que necesitan ser persistentes. En este proyecto voy a utilizar un modelo no relacional, es decir NoSQL, utilizando Firebase como base de datos, los motivos de mi elección son los siguientes beneficios:

• Modelado de datos: al no ser SQL no tiene que seguir sus reglas por lo que al modelar los datos se pueden adaptar más a los casos de usos y los requisitos de la aplicación. Por ejemplo, nuestro club tendrá un álbum de fotos que en un modelo SQL tendría que hacer uso de varias tablas y relaciones y en el modelo NoSQL se podrá simplemente usar una Lista de imágenes.

• Rendimiento: las bases de datos NoSQL suelen funcionar mejor que las bases de datos SQL, y en concreto Firebase puede realizar de forma sencilla la visualización de datos en tiempo real para la aplicación, y al estar asociada con Google le da un añadido de confianza en cuanto eficiencia y seguridad.

• Flexibilidad: al utilizar archivos JSON los campos se pueden variar de un documento a otro de una forma sencilla y de esta forma si con el tiempo se tienen que modificar no supondrá un desafío para el equipo de desarrollo como sí lo tendría al usar un modelo SQL. Además, los modelos NoSQL se adaptan mejor a las arquitecturas de microservicios (nuestro caso).

Una vez vista la justificación del modelo de persistencia de la información veremos el diagrama, al ser NoSQL será muy parecido al diagrama de clases.

Como se puede apreciar en el diagrama un club puede tener indefinidos usuarios e indefinidas pistas.

Un usuario podrá tener indefinidas reservas, estas reservas guardan el identificador del usuario que la ha realizado y además en caso de haber introducido un contrincante también guardara su identificador para acceder a sus datos. Además, un usuario podrá tener indefinidos contactos (o amigos) con los que poder quedar para jugar o para “chatear”, este chat guardará los identificadores de ambos usuarios que serán referencias para poder guardar los mensajes de forma correcta. Finalmente, el usuario podrá ver los partidos que ha jugado y ver la información de ellos.

La reserva tendrá un partido (el número de sets puede ser los que el usuario quiera, no tiene por qué atenerse a un número definido, de este modo puede ser un partido al mejor de 5 o X) y guardara una referencia a la pista que se ha elegido con sus datos.

El partido tendrá referencias del jugador (o jugadores) que ha jugado el partido y guardara datos como el email, el resultado, fotografías y la fecha.