Requisitos - Resumen - Endpoints
Nada más acceder a la aplicación podemos ver un bonito splash screen que aparecerá apenas unos segundos con el logotipo creado por nosotros para nuestro proyecto.
Idea incial con photoshop |
Resultado final |
Una vez visto el splash screen podremos ver la pantalla de inicio de sesión junto con la opción de registrarse. Esta pantalla es totalmente opcional ya que hemos considerado que podemos tener un usuario "Invitado" sin una cuenta aún, por lo que podemos cerrar esta ventana si deseamos en la esquina superior derecha.
Idea incial con photoshop |
Resultado final |
En caso de que deseemos una nueva cuenta, solo tendremos que pulsar en "Registrarme" y nos saldrá la siguiente pantalla donde nos pedirá los datos iniciales. Todos no son necesarios, en este caso el teléfono y el segundo apellido es opcional.
Como comentábamos antes, podemos acceder sin tener ningún usuario, en este caso en el "Navigation drawer" del que dispone la aplicación, podremos ver un acceso directo a "Iniciar sesión" por si nos lo hemos pensado mejor, una foto genérica en la cabecera, y de nombre simplemente "Invitado". También podemos acceder a las categorías de los anuncios sin necesidad de cuenta.
En caso de que tengamos una cuenta iniciada sesión, nos saldrá en el "Navigation drawer" una sección de "Cuenta". En ella dispondremos de un acceso directo a nuestro perfil, donde podremos editar los datos personales y la imagen de la cuenta en la que hemos iniciado. También dispondremos de un "Engranaje" en la parte derecha del nombre de usuario para acceder al mismo menú que pulsando "Mi perfil". Además tenemos un botón "Cerrar sesión, el cual nos permitirá acceder como otro usuario diferente o simplemente quedarnos como "Invitado". Por otra parte, en la cabecera ya si disponemos de nuestros datos personales como nombre, apellidos, email y foto de perfil.
Idea incial con photoshop |
Resultado final |
Si accedemos mediante el acceso directo de "Perfil" nos saldrá la siguiente pantalla, en la cual podremos modificar todos los datos, incluso modificar la contraseña actual de la cuenta. En caso de que no queramos modificar la contraseña, la podemos dejar en blanco, y seguir cambiando algun campo en concreto que deseemos modificar. Si nos fijamos el campo de búsqueda del toolbar ha cambiado y ahora hay un texto que pone "Perfil". También disponemos de un botón que podemos reconocer como "Subir imagen", en el cual seleccionaremos un archivo de la galería de nuestro dispositivo y nos cambiará la imagen del perfil.
Idea incial con photoshop |
Resultado final |
Seguimos en la misma pantalla, pero esta vez la hemos bajado un poco, ya que dispone de un scrollview para que se adapte a la mayoría de dispositivos. Al final de esta ventana podemos observar 2 botones. Uno de ellos "Guardar" para que se hagan efectivos los cambios anteriores en nuestros datos personales, y otro "Borrar cuenta", para estar al tanto de la ley de protección de datos. Un usuario puede solicitar mediante este botón que se borren sus datos de inmediato. Posteriormente se cerrará la sesión y se quedará como "Invitado".
|
Idea incial con photoshop |
Resultado final |
Una vez tenemos usuarios nos falta algo con que interactuar, en este caso con productos y categorías. Como hemos visto en el "Navigation Drawer", en el que podemos acceder en el botón superior izquierdo, tenemos varias categorías de productos. Si queremos podemos filtrarlos por nombre y descripción en la barra de búsqueda que se sitúa en la parte superior. Además podemos observar como tenemos un botón "FAB" en la parte inferior derecha para añadir nuestros propios productos.
Idea incial con photoshop |
Resultado final |
Resultado final |
En la lista de productos nos hemos dado cuenta que tenemos un botón como hemos comentado en el anterior punto, que nos permitirá añadir nuevos productos. Como podemos ver en la siguiente imagen, ya tenemos rellenos los datos del nuevo producto, que seria el titulo, descripción, categoría, precio y una lista de imágenes. Automáticamente este producto se vincula a la cuenta en la que hemos iniciado sesión. Además si nos fijamos de nuevo en el toolbar ha cambiado por el titulo "Nuevo producto". Por último comentar que podemos añadir varias imágenes y la página se va redimensionando automáticamente (esto lo veremos posteriormente).
Idea incial con photoshop |
Resultado final |
Anteriormente no hemos podido ver el detalle de "Mis anuncios" que tiene el "Navigation drawer" justo abajo. Podemos entrar en esta pantalla para ver nuestros anuncios publicados.
Al pulsar sobre cualquier producto podremos ver el detalle de este, con fotos, titulo, descripción e incluso un contador de visitas. Obviamente solo podremos editarlo si lo hemos publicado, mediante el botón inferior "Editar" que veremos a continuación.
Seguramente queramos actualizar algún dato del producto que hemos publicado, por lo que tenemos la vista de editar, en la que como podemos ver y anteriormente hemos comentado, se pueden añadir múltiples imágenes.
Idea incial con photoshop |
Resultado final |
Ya podemos ver nuestro anuncio publicado, esperando al comprador correcto, dentro de la lista de anuncios.
- Base de datos mongo (10.107.0.20)
- Cliente gráfico para mongo, llamado mongo express (10.107.0.21)
- Un cliente de mongo para importar la base de datos
- Contenedor de node (10.107.0.22)
docker-compose updocker-compose start
docker-compose stopdocker-compose downdocker-compose buildSi realizamos ajustes en la configuración de docker-compose y no se aplican deberemos limpiar el cache con el siguiente comando.
docker system prune -aEl tipo de usuario, solo se puede de momento manualmente en la base de datos, para en un futuro implementar un sistema de permisos.
- Tipo 1: Usuario estandar
- Tipo 2: Usuario administrador
- Alberto Torres Cruz
- Álvaro García Muñoz