Aplicación: LogArt

Alumno: David Moreno Martín

Tutor: Micael Gallego Carrillo

🛠️ Herramientas

• Github Projects

• Github Pages Documentación API

• Postman Documentación API

• Video LogArt Demo

• Figma

• Blog LogArt: Un giro radical hacia el MERN Stack

• Blog LogArt: Construyendo una Aplicación Full-Stack MERN: Empezando con el Backend.

• Blog LogArt: Construyendo una Aplicación Full-Stack MERN: Frontend.

• Blog LogArt: Testeo e2e en LogArt: Asegurando la Calidad con Jest, Supertest y Playwright.

• Blog LogArt: Docker y Docker Compose en LogArt: Simplificando el Desarrollo y Despliegue

  
  
  

Fase 0

❓ Palabras clave

Disciplina: videojuegos, Libros, Canciones.

Objeto: Videojuego, libro o canción perteneciente a una disciplina.

Galería: Conjunto de objetos bajo una misma disciplina conforman la galería de esa disciplina.

Comentario: Mensaje o post que escribe un Usuario dentro de un Objeto de su propiedad

Relación KeyWords: Un Usuario crea un Objeto dentro de una de las tres Disciplinas. Se podría decir que ese Objeto ahora está en la Galería de esa Disciplina. Además, el Usuario puede crear comentarios bajo ese Objeto

Ejemplo KeyWords: El Usuario David crea el Objeto “Harry Potter” dentro de la Disciplina Libros. La Galería de Libros del usuario ahora tiene un nuevo Objeto, y el Usuario decide escribir un Comentario dentro ese objeto poniendo “¡Voldemort mola!”

📂 Entidades

Las entidades son Usuario, Disciplina, Objetos y Comentarios.

Están relacionadas de la siguiente forma: Un Usuario escoge una Disciplina, y crea un Objeto dentro de ella. A su vez el Usuario puede crear Comentarios dentro de los Objetos creados.

🔧 Funcionalidades y aspectos principales de la aplicación

Funcionalidades básicas:

1. Autenticación y autorización de usuarios:

   • Registro de usuarios con verificación de email.
   • Login/logout seguro.
   • Diferentes roles: no registrado, registrado y administrador.

2. Gestión de objetos y disciplinas:

   • Crear, editar y eliminar objetos dentro de las disciplinas (Libros, Canciones, videojuegos)
   • Filtrar y buscar objetos por nombre.
   • Subida de imágenes relacionadas con los objetos.
   • Mostrar la galería de objetos por disciplina.

3. Comentarios:

   • Permitir a los usuarios registrados crear, editar y eliminar comentarios sobre sus objetos.
   • Visualización de comentarios para cada objeto de forma correcta, dentro del propio objeto.
   • Moderación de comentarios por parte de administradores.

4. Perfiles de usuarios:

   • Creación y edición del perfil, incluyendo la subida de una foto de perfil.

Funcionalidades avanzadas:

1. Autenticación y autorización de usuarios:

   • Recuperación de contraseña a través de email.

2. Gestión de objetos y disciplinas:

   • Compartir objetos con otros usuarios y que estos puedan verlos aún sin estar logeados.
   • Sistema de favoritos o “me gusta” para poder filtrarlos de esa manera.

3. Dashboard de administrador:

   • Creación de un panel de control donde el administrador puede visualizar diferentes gráficos y datos sobre el desempeño de la aplicación.
   • Moderación de objetos por parte de administradores, en el dashboard, dispondrán de una pestaña para ver todos los objetos de la aplicación.

4. Gestión de datos:

   • Algoritmo de análisis de crecimiento, que muestre el aumento o disminución porcentual en un periodo de tiempo.
     
     

⚠️ La lista de funcionalidades está abierta a ser ampliada si dichas funcionalidades favorecen la efectividad y comodidad de la web para los usuarios. ⚠️

👦 Tipos de usuarios

Usuario No registrado: Podrá ver los objetos de la galería de un usuario, siempre y cuando esa persona haya decidido compartir dicho objeto. No podrá crear ni editar objetos dentro de ninguna galería.

Usuario registrado: Podrá ver los objetos de la galería de otro usuario, siempre y cuando esa persona haya decidió compartir dicho objeto. Además, podrá crear nuevos objetos en cada galería y editarlos/eliminarlos a su gusto.

Si los objetos son suyos, dentro podrá añadir/editar/eliminar comentarios sobre su experiencia, y dependiendo del tipo de galería en la que esté el objeto, podrá también añadir una imagen de un mapa (videojuegos) o los autores (libros y Canciones) de dicho objeto.

Usuario administrador: En el caso del administrador, podrá ver las galerías y los objetos de todos los usuarios registrados en la aplicación, hayan decidido compartirlos o no. Además de esto, también podrá eliminar los objetos que considere que no son apropiados.

De forma similar, también podrá eliminar los comentarios que existan dentro de cada objeto. Por último el administrador dispondrá de una página especial, en la que podrá ver una serie de estadísticas y gráficos relacionados con el funcionamiento de la aplicación y la creación de objetos/comentarios.

🔐 Permisos de usuario

Relacionado con lo comentado en el punto anterior, los permisos de los usuarios varían dependiendo del tipo de usuario:

Usuario anónimo: No tiene ningún tipo de permiso/responsabilidad, no es dueño de ningún dato/entidad, solo puede ver los objetos de las galerías de ciertos usuarios si ellos así lo desean.

Usuario registrado: Tendrá permiso para añadir/eliminar objetos dentro de las galerías, así como los comentarios e imágenes dentro de cada objeto. Será dueño de las entidades Objeto y Comentarios siempre que hayan sido creadas por él.

Usuario administrador: Tiene todos los permisos posibles, incluyendo la eliminación de objetos/comentarios de cualquier usuario que no sea administrador, y la posibilidad de entrar a objetos de galerías que los usuarios no hayan decidido compartir. Será dueño de las entidades Objeto y Comentarios, sin importar quien las haya creado

🖼️ Imágenes

La web permitirá la subida de imágenes en varios sentidos, el primero de ellos a la hora de crear/modificar el perfil, donde podrás añadir una foto de tu gusto. Luego, cuando creas un nuevo objeto, podrás añadir la imagen que mejor represente ese objeto según tu opinión.

Por último, también podrás añadir una imagen dentro de los objetos de la galería “Videojuegos” siendo esta imagen el mapa del juego.

Por lo tanto, las entidades asociadas con imágenes son: Usuario (foto de perfil) y Objeto (imagen de objeto, y mapa si la disciplina es videojuego)

📊 Gráficos

En la pantalla de administrador se mostrarán 2 gráficos, ambos sobre una medida de tiempo (días, meses...)

El primero, sobre los objetos creados por parte de los usuarios, y el segundo sobre los comentarios creados dentro de los objetos.

Estos gráficos serán de barra en principio, pudiendo cambiar el estilo en un futuro si el hacerlo refleja mejor los datos.

📧 Tecnología complementaria

Como tecnología complementaría, la web empleará un método de verificación después de registrarse, este método se implementará enviando un correo a los usuarios, que deberán recibir y aceptar para poder usar la aplicación

📈 Algoritmo o consulta avanzada

En la pestaña de administrador, se mostrarán el número de objetos y comentarios creados por unidad de tiempo, junto a sus respectivos gráficos.

El algoritmo/consulta avanzada consistirá en averiguar (y mostrar en la pantalla) el aumento/disminución en porcentaje de estos.

Por ejemplo -> Objetos totales: 1.239, +20.4% con respecto al mes pasado. (Reflejado en el wireframe para entenderlo mejor)

---

Wireframe pantallas de la aplicación

Pantalla de inicio (no registrado)

Esta pantalla solo la ves cuando no estás registrado.

Cuenta con una flecha semitransparente abajo para indicar que se puede hacer scroll. También con un botón para pasar directamente a la pantalla de registro.

Para poder usar la app con todas sus funcionalidades debes estar registrado, pero puedes usar la función de ver objetos de otros usuarios aún sin registrarte (siempre que ellos decidan ponerlos públicos). Para ello, pulsaremos en el botón del menú arriba a la derecha y buscaremos por username.

Al bajar un poco, tienes el carrusel, donde se muestran varios ejemplos en pequeño, y siguiendo el estilo del disco de vinilo, es un carrusel infinito donde se van repitiendo las imágenes.

Por último, abajo del todo tenemos la última sección de la página principal para los no registrados. Un slider en el cual puedes elegir entre varias fotos, para hacerte una idea de cuáles son las 3 disciplinas con las que trabaja nuestra aplicación

Pantalla de Registro

Se accede pulsando el botón en la pantalla de inicio

Aquí podremos registrarnos, para así usar la aplicación en su totalidad, creando objetos y comentarios sobre nuestra experiencia dentro de ellos.

Para registrarse necesitas un username, un email válido, y una contraseña. Es importante que el email sea correcto y verificable, ya que necesitarás superar una comprobación adicional vía mail para poder completar el registro.

Pantalla de Login

Si ya estás registrado, puedes acceder a esta pantalla pulsando el botón correspondiente en la pestaña de registro.

Para logearse, será necesario introducir el username y la contraseña de tu usuario.

Es importante que el email esté validado antes de hacer el login, de lo contrario no podremos acceder a nuestra cuenta.

Pantalla de La Biblioteca

Una vez registrado y logeado, pasas a una pantalla intermedia, donde simplemente tendrás la opción de seleccionar la galería a la que quieres entrar primero.

Esta será la única vez que se verá la pantalla (por sesión), ya que después podrás cambiar entre galerías desde la propia galería.

Pantalla de La Galería

Como mencionaba anteriormente, dentro de la propia galería tendremos la opción de cambiar entre ellas, pulsando el botón que a su vez reflejará el nombre de la galería en la que nos encontramos.

Al lado de ese botón, habrá otro para añadir nuevos objetos a la galería.

En cada uno de estos objetos aparecerá un nombre, una foto, un corazón para añadirlo a favoritos, una papelera para eliminar el objeto, y una opción para compartir el objeto con el resto de personas (usuarios y no usuarios de la aplicación)

Pantalla de Objeto concreto

Al clicar en un objeto dentro de una galería, entraremos al objeto como tal. Donde podrás añadir la imagen de un mapa si es un videojuego, o los autores si se trata de un libro o una canción.

Además podrás publicar comentarios sobre tu experiencia con ese objeto.

Por último, también podrás editarlo, tanto el objeto en sí, (foto y nombre), como los comentarios/mapa/autores del objeto.

Pantalla de Perfil

En cualquier momento (y desde cualquier pantalla siempre que estés logeado), podrás acceder al perfil.

Para hacerlo clicaremos en el menú desplegable del header e iremos a perfil.

Pantalla de Admin Dashboard

Del mismo modo, si somos administradores, podremos ir al dashboard del administrador clicando en el menú del header.

Aquí se reflejarán una serie de estadísticas y gráficos ya comentados en la parte de "Gráficos" y "Algoritmo o consulta avanzada"

Pantalla de Contacto

Si clicamos en la parte de "Contacto" del header llegaremos a esta pantalla.

Aquí podremos obtener más información sobre los propietarios de la web.

Pantalla de Error 404

Si en cualquier momento intentamos acceder a una URL no encontrada, nos mostrará la pantalla de error 404

Wireframe de navegación de la aplicación

Fase 1

📸 Capturas de pantalla de la aplicación

Pantalla Hero (home)

Pantalla principal de la aplicación para usuarios no logueados

Pantalla Hero (FAQ)

Si bajamos, nos encontramos con la sección de preguntas comunes

Pantalla Hero (carrusel)

Más abajo tenemos un carrusel infinito de imágenes en formato disco de vinilo

Pantalla Hero (slider)

Por último tenemos un slider de imágenes que representan las disciplinas de la app

Pantalla de Registro

Si en cualquier momento durante el hero clicamos en "Registrarse" llegaremos a esta pantalla

Pantalla de Login

Si en cualquier momento clicamos en iniciar sesión, o nos registramos, llegaremos a esta pantalla

Pantalla de Galería

Después de iniciar sesión llegaremos a esta pantalla, donde podremos interactuar con los objetos y crear nuevos

Pantalla de Galería (continuación)

En la parte de arriba podemos ver una opción para filtrar por nombre, y abajo la paginación

Pantalla de selector de disciplina

Si clicamos en el nombre de la disciplina actual, se abre el selector

Pantalla de Crear objeto

Si clicamos en el botón de crear objeto, nos saldrá el modal de creación, donde introducir los datos

Pantalla Editar objeto

Si en lugar de clicar en crear objeto, clicamos en "Editar" dentro de la tarjeta del objeto, veremos el modal de edición

Pantalla de detalles del objeto

Si clicamos en la tarjeta de un objeto, o su nombre, llegaremos a la pantalla de detalles

Pantalla de detalles del objeto (continuación)

Podemos ver también la paginación implementada

Pantalla de editar comentario

Si clicamos en el botón de editar, podremos modificar nuestro comentario

Pantalla de perfil

Si clicamos en "perfil" desde el navbar llegaremos a esta pantalla

Pantalla de perfil (continuación)

Como se puede ver, podemos editar cualquier valor menos la contraseña

Pantalla de detalles como admin

Si somos admin, desde nuestro dashboard (fase avanzada), llegaremos al objeto de un usuario y podremos moderarlo

Pantalla de detalles como admin (continuación)

Como se puede ver, los comentarios de un administrador tendrán un color diferente para diferenciarlos

Pantalla de Error

Si en cualquier momento introducimos una url no válida, llegaremos a la pantalla de error

🗺️ Diagrama de Navegación

Este diagrama muestra cómo se navega entre las diferentes páginas de la aplicación.

🔭 Diagrama de Entidades de la Base de Datos

Este diagrama muestra las entidades de la base de datos y las relaciones entre ellas.

📑 Diagrama de clases del backend

Este diagrama muestra las clases de la aplicación y las relaciones entre ellas. (se han excluido clases como seeders o configuración de base de datos, .env, server, etc.)

📝 Diagrama de clases y templates SPA

Este diagrama muestra las páginas y componentes de la aplicación, junto con archivos de contexto y utilidades. Tambien muestra las relaciones entre todos estos. (se han excluido cosas como tailwind, configuración de base de datos, .env, server, etc.)

🚀 Ejecutar test de la aplicación

Requisitos previos Backend

• Abrir el terminal y situarnos en la carpeta Backend

\2024-logart\LogArtApp\backend>

• Backend corriendo para inicializar la base de datos

 npm start

Requisitos previos Frontend

• Abrir el terminal y situarnos en la carpeta Backend

\2024-logart\LogArtApp\backend>

• Backend corriendo para inicializar la base de datos

 npm start

• Situarnos en la carpeta Frontend

\2024-logart\LogArtApp\frontend\LogArt-frontend>

• Servir la aplicación con Vite

npm run dev

Ejecutar test Backend

• Ejecutar el comando

npm test

Ejecutar test Frontend

• Con el siguiente comando podemos ejecutar los tests de forma interactiva, mientras vemos en tiempo real en un navegador las pruebas

npx playwright test --ui

• Con el siguiente comando podemos ejecutar los tests de forma automática, hay que tener en cuenta que para que algunos test funcionen se requieren estados específicos, y si no se tiene en cuenta puede que algunos test fallen. Por ejemplo, si el test de crear objeto lo intenta hacer sin estar logueado, el test fallará

npx playwright test  --project=chromium

🐋 Construcción de la imagen Docker

Requisitos previos

• Docker instalado (Guía de instalación)
• Docker Compose instalado (Guía de instalación)
• Tener cuenta en dockerhub y loguearse (Guía)

Construcción de la imagen

• Abrir el terminal y situarnos en la carpeta raiz del proyecto

\2024-logart>

• Navegar a la carpeta LogArtApp

cd .\LogArtApp\

• Ejecutar el comando para construir la imagen, con el tag (-t) y con su ubicación (-f)

docker build -t nombre_usuario/nombre_imagen:tag -f docker/Dockerfile .

• En este caso:

docker build -t davidmorenoo/logartapp:latest17 -f docker/Dockerfile .

Subir la imagen a dockerhub

• Abrir el terminal y situarnos en la carpeta docker

cd .\docker\

• Ejecutar el comando para subir la imagen a dockerhub

docker push nombre_usuario/nombre_imagen:tag

• En este caso:

docker push davidmorenoo/logartapp:latest17

Enlace al repositorio de dockerhub

• Repositorio de dockerhub

🐳 Ejecución de la aplicación dockerizada

• Desde la misma carpeta docker, debemos tener un archivo docker-compose.yml

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a----        11/12/2024     19:46             78 .dockerignore
-a----        11/12/2024     20:14            527 .env
-a----        11/12/2024     21:28            925 docker-compose.yml
-a----        11/12/2024     19:21            785 Dockerfile

• Ejecutar el comando para levantar la aplicación

docker compose up

• Ahora, tenemos acceso a la aplicación desde el navegador dirigiendonos a https://localhost

-Notas, al usar certificados SSL autofirmados, el navegador puede mostrar una advertencia de seguridad. Deberás clicar en "configuración avanzada" y en "Acceder a localhost (sitio no seguro)".

Probar la aplicación dockerizada

• Después de haber realizado algún cambio en la aplicación (por ejemplo, crear un nuevo objeto), y con el contenedor todavía arrancado, abrimos el terminal y nos situamos en la misma carpeta docker, donde debemos ejecutar el comando

docker exec -it docker-mongo-1 mongosh --username davidmoreno --password hRcZqOOBm6ick63X --authenticationDatabase admin

• Ahora, podemos hacer consultas a la base de datos. Para ver el nuevo objeto, escribimos

use logartdb

show collections

db.objects.find().pretty()

• Una vez hayamos terminado de usar la aplicación, nos dirigimos a la carpeta docker y ejecutamos el comando

docker compose down

• Con esto, el contenedor se detendrá y se eliminará. Para volver a usar la aplicación, deberemos volver a ejecutar el comando docker compose up

▶️ Video de demostración

LogArt Demo