MOCKUP - robertoo01/TMI-2024-VisitaMe GitHub Wiki

A continuación se muestra el prototipo de diseño de la aplicación que se va a diseñar. Este consta de ocho pantallas las cuales permiten comprender a su vez, el flujo de navegación a través de la app.

Se trata de la pantalla de inicio de la aplicación. Esta se abrirá al abrir la aplicación por el usuario. En ella se muestra el texto de "Tu aventura comienza aquí ↓" y un icono de una puerta con un personaje de espaldas el cual habrá que pulsar para "comenzar la aventura".
Al pulsar sobre este, el usuario será enviada a la pantalla de selección de ubicación.

En esta pantalla se muestran dos botones.
El primero, "Usar ubicación actual", hará uso del GPS del dispositivo móvil para obtener la ubicación del usuario y a partir de ahí generar la ruta deseada.
El segundo, "Introducir manualmente", permitirá al usuario introducir la ubicación como si de una búsqueda en un navegador de mapas se tratase para obtener un listado de los monumentos cercanos a dicha ubicación.
Tras obtener la ubicación del usuario de cualquiera de estas dos formas, se enviará al usuario a la pantalla que permite seleccionar el lugar que desea visitar.

En esta pantalla se listan los diferentes monumentos que el usuario deberá visitar para completar así la ruta de lugares emblemáticos. Al pulsar sobre uno de ellos se mandará el usuario a la pantalla en la que se muestra la ubicación y en la que se puede realizar la fotografía.

En esta pantalla se muestra la ubicación del lugar emblemático y además se muestra un cuadro en el cual hay que pulsar para abrir la cámara del dispositivo. De esta forma se podrá realizar la fotografía en el lugar seleccionado y, en caso de ser correcto, se validará el lugar y se mostrará al usuario la pantalla de fotografía correcta o, en caso de ser errónea, la pantalla de fotografía incorrecta.

Esta pantalla se muestra cuando se valida la fotografía y es correcta. En este caso, se muestra la imagen tomada y se pone el cuadro en color verde mostrando además un cuadro de texto que dice "¡Ubicación completada!".
Además, se muestra un botón para avanzara la siguiente ubicación el cual devolverá al usuario a la pantalla de selección de lugar.

Esta pantalla se muestra cuando la imagen del usuario se valida y es incorrecta (la validación de la imagen indica que las coordenadas del lugar mostrado no coinciden con las coordenadas esperadas). En este caso, el cuadro se pone en color rojo y se muestra el un cuadro de texto en el mismo color que indica al usuario que ha ocurrido un error y que verifique que se encuentra en el lugar adecuado.
Para continuar, debe volver a pulsar sobre el cuadro para volver a tomar la fotografía.

Esta pantalla es mostrada cuando se han validado correctamente todos los lugares a visitar de la ruta. En ella se muestra un texto que dice "¡Ruta completada!" en color verde y además se incluye un botón que llevará al usuario a la pantalla para visualizar el recorrido realizado.

Esta pantalla se muestra tras haber finalizado el recorrido por completo. En ella se muestra una caja con un botón de "play" en la cual se reproducirá una secuencia con las fotografías tomadas por el usuario.
Además, bajo esta se muestra el recorrido seguido por el usuario a través de una ruta en un mapa.
Adicionalmente, se incluye un botón con el texto "nueva ruta" que el usuario puede pulsar para realizar un nuevo recorrido devolviéndolo a la pantalla de selección de ubicación.