diff --git a/DocFiles/images/phase3/dashboard1.png b/DocFiles/images/phase3/dashboard1.png new file mode 100644 index 0000000..af75841 Binary files /dev/null and b/DocFiles/images/phase3/dashboard1.png differ diff --git a/DocFiles/images/phase3/dashboard2.png b/DocFiles/images/phase3/dashboard2.png new file mode 100644 index 0000000..7eecfca Binary files /dev/null and b/DocFiles/images/phase3/dashboard2.png differ diff --git a/DocFiles/images/phase3/dashboard3.png b/DocFiles/images/phase3/dashboard3.png new file mode 100644 index 0000000..465c326 Binary files /dev/null and b/DocFiles/images/phase3/dashboard3.png differ diff --git a/DocFiles/images/phase3/dashboard4.png b/DocFiles/images/phase3/dashboard4.png new file mode 100644 index 0000000..7cbeb87 Binary files /dev/null and b/DocFiles/images/phase3/dashboard4.png differ diff --git a/DocFiles/images/phase3/dashboard5.png b/DocFiles/images/phase3/dashboard5.png new file mode 100644 index 0000000..13e8bcd Binary files /dev/null and b/DocFiles/images/phase3/dashboard5.png differ diff --git a/DocFiles/images/phase3/dashboard6.png b/DocFiles/images/phase3/dashboard6.png new file mode 100644 index 0000000..63dbe18 Binary files /dev/null and b/DocFiles/images/phase3/dashboard6.png differ diff --git a/DocFiles/images/phase3/dashboard7.png b/DocFiles/images/phase3/dashboard7.png new file mode 100644 index 0000000..83745cb Binary files /dev/null and b/DocFiles/images/phase3/dashboard7.png differ diff --git a/DocFiles/images/phase3/dbdiagram.png b/DocFiles/images/phase3/dbdiagram.png new file mode 100644 index 0000000..fe49752 Binary files /dev/null and b/DocFiles/images/phase3/dbdiagram.png differ diff --git a/DocFiles/images/phase3/fav1.png b/DocFiles/images/phase3/fav1.png new file mode 100644 index 0000000..2d73161 Binary files /dev/null and b/DocFiles/images/phase3/fav1.png differ diff --git a/DocFiles/images/phase3/fav2.png b/DocFiles/images/phase3/fav2.png new file mode 100644 index 0000000..4fce70b Binary files /dev/null and b/DocFiles/images/phase3/fav2.png differ diff --git a/DocFiles/images/phase3/final.drawio.svg b/DocFiles/images/phase3/final.drawio.svg new file mode 100644 index 0000000..75a11c9 --- /dev/null +++ b/DocFiles/images/phase3/final.drawio.svg @@ -0,0 +1,4 @@ + + + +
Text
Text
ExampleController
ExampleController
ExampleService
ExampleService
ExampleRepository
ExampleRepository
ExampleRoute
ExampleRoute
ExampleModel
ExampleModel
ExampleMiddleware
ExampleMiddleware
User
User
Discipline
Discipline
Object
Object
Comment
Comment
BlackList
BlackList
userRoutes
userRoutes
disciplineRoutes
disciplineRoutes
objectRoutes
objectRoutes
commentRoutes
commentRoutes
authRoutes
authRoutes
userController
userController
disciplineController
disciplineController
objectController
objectController
commentController
commentController
authController
authController
userService
userService
disciplineService
disciplineService
objectService
objectService
commentService
commentService
authService
authService
userRepository
userRepository
disciplineRepository
disciplineRepository
objectRepository
objectRepository
commentRepository
commentRepository
authRepository
authRepository
authMiddleware
authMiddleware
emailService
emailService
ExampleUtils
ExampleUtils
ExampleConfig
ExampleConfig
environment
environment
validId
validId
uploadImgMiddleware
uploadImgMiddleware
checkRole
checkRole
dashboardRoutes
dashboardRoutes
dashboardController
dashboardController
dashboardService
dashboardService
socketUtils
socketUtils
\ No newline at end of file diff --git a/DocFiles/images/phase3/finalspa.drawio.png b/DocFiles/images/phase3/finalspa.drawio.png new file mode 100644 index 0000000..dc3119d Binary files /dev/null and b/DocFiles/images/phase3/finalspa.drawio.png differ diff --git a/DocFiles/images/phase3/pass1.png b/DocFiles/images/phase3/pass1.png new file mode 100644 index 0000000..5346d9e Binary files /dev/null and b/DocFiles/images/phase3/pass1.png differ diff --git a/DocFiles/images/phase3/pass2.png b/DocFiles/images/phase3/pass2.png new file mode 100644 index 0000000..103e9a9 Binary files /dev/null and b/DocFiles/images/phase3/pass2.png differ diff --git a/DocFiles/images/phase3/pass3.png b/DocFiles/images/phase3/pass3.png new file mode 100644 index 0000000..78c5d8a Binary files /dev/null and b/DocFiles/images/phase3/pass3.png differ diff --git a/DocFiles/images/phase3/pass4.png b/DocFiles/images/phase3/pass4.png new file mode 100644 index 0000000..00cd743 Binary files /dev/null and b/DocFiles/images/phase3/pass4.png differ diff --git a/DocFiles/images/phase3/pass5.png b/DocFiles/images/phase3/pass5.png new file mode 100644 index 0000000..dccbb2b Binary files /dev/null and b/DocFiles/images/phase3/pass5.png differ diff --git a/DocFiles/images/phase3/share1.png b/DocFiles/images/phase3/share1.png new file mode 100644 index 0000000..42ea5e8 Binary files /dev/null and b/DocFiles/images/phase3/share1.png differ diff --git a/DocFiles/images/phase3/share2.png b/DocFiles/images/phase3/share2.png new file mode 100644 index 0000000..7b43d4b Binary files /dev/null and b/DocFiles/images/phase3/share2.png differ diff --git a/DocFiles/images/phase3/share3.png b/DocFiles/images/phase3/share3.png new file mode 100644 index 0000000..d38d1e5 Binary files /dev/null and b/DocFiles/images/phase3/share3.png differ diff --git a/DocFiles/images/phase3/share4.png b/DocFiles/images/phase3/share4.png new file mode 100644 index 0000000..c29e94b Binary files /dev/null and b/DocFiles/images/phase3/share4.png differ diff --git a/DocFiles/images/phase3/verificacion1.png b/DocFiles/images/phase3/verificacion1.png new file mode 100644 index 0000000..87c56ba Binary files /dev/null and b/DocFiles/images/phase3/verificacion1.png differ diff --git a/DocFiles/images/phase3/websocket1.png b/DocFiles/images/phase3/websocket1.png new file mode 100644 index 0000000..3862613 Binary files /dev/null and b/DocFiles/images/phase3/websocket1.png differ diff --git a/DocFiles/images/phase3/websocket2.png b/DocFiles/images/phase3/websocket2.png new file mode 100644 index 0000000..804721a Binary files /dev/null and b/DocFiles/images/phase3/websocket2.png differ diff --git a/DocFiles/images/phase3/wireframe.png b/DocFiles/images/phase3/wireframe.png new file mode 100644 index 0000000..0af3358 Binary files /dev/null and b/DocFiles/images/phase3/wireframe.png differ diff --git a/LogArtApp/docker/Dockerfile b/LogArtApp/docker/Dockerfile index 44b05f0..14092a8 100644 --- a/LogArtApp/docker/Dockerfile +++ b/LogArtApp/docker/Dockerfile @@ -1,16 +1,16 @@ FROM node:20-alpine AS frontend-build WORKDIR /app/frontend -COPY LogArtApp/frontend/LogArt-frontend/package*.json ./ +COPY frontend/LogArt-frontend/package*.json ./ RUN npm install --legacy-peer-deps -COPY LogArtApp/frontend/LogArt-frontend/ ./ +COPY frontend/LogArt-frontend/ ./ RUN npm run build FROM node:20-alpine AS backend-build WORKDIR /app/backend RUN apk add --no-cache make gcc g++ python3 -COPY LogArtApp/backend/package*.json ./ +COPY backend/package*.json ./ RUN npm install --legacy-peer-deps -COPY LogArtApp/backend/ ./ +COPY backend/ ./ RUN npm rebuild bcrypt --build-from-source RUN npm prune --production RUN npm cache clean --force diff --git a/LogArtApp/docker/docker-compose.yml b/LogArtApp/docker/docker-compose.yml index 6720715..7bee4fc 100644 --- a/LogArtApp/docker/docker-compose.yml +++ b/LogArtApp/docker/docker-compose.yml @@ -28,7 +28,7 @@ services: - "27017:27017" restart: unless-stopped app: - image: davidmorenoo/logartapp:latest17 + image: davidmorenoo/logartapp:latestManual ports: - "8443:8443" healthcheck: diff --git a/docs/design.md b/docs/design.md index 9b03823..8a1e77e 100644 --- a/docs/design.md +++ b/docs/design.md @@ -121,122 +121,248 @@ Si en cualquier momento intentamos acceder a una URL no encontrada, nos mostrar ## Diseño Final: -### Pantalla Hero (home) +## Pantalla Hero (home) Pantalla principal de la aplicación para usuarios no logueados ![Imagen de hero1](/DocFiles/images/phase2/hero1home.png) -### Pantalla Hero (FAQ) +## Pantalla Hero (FAQ) Si bajamos, nos encontramos con la sección de preguntas comunes ![Imagen de faq](/DocFiles/images/phase2/hero2faq.png) -### Pantalla Hero (carrusel) +## Pantalla Hero (carrusel) Más abajo tenemos un carrusel infinito de imágenes en formato disco de vinilo ![Imagen de carrusel](/DocFiles/images/phase2/hero3infcarousel.png) -### Pantalla Hero (slider) +## Pantalla Hero (slider) Por último tenemos un slider de imágenes que representan las disciplinas de la app ![Imagen de slider](/DocFiles/images/phase2/hero4imgslider.png) -### Pantalla de Registro +## Pantalla de Registro Si en cualquier momento durante el hero clicamos en "Registrarse" llegaremos a esta pantalla ![Imagen de registro](/DocFiles/images/phase2/register.png) -### Pantalla de Login +## Pantalla de Login Si en cualquier momento clicamos en iniciar sesión, o nos registramos, llegaremos a esta pantalla ![Imagen de login](/DocFiles/images/phase2/login.png) -### Pantalla de Galería +## Pantalla de Galería Después de iniciar sesión llegaremos a esta pantalla, donde podremos interactuar con los objetos y crear nuevos ![Imagen de galería 1](/DocFiles/images/phase2/gallery1.png) -### Pantalla de Galería (continuación) +## 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 ![Imagen de galería 2](/DocFiles/images/phase2/gallery2.png) -### Pantalla de selector de disciplina +## Pantalla de selector de disciplina Si clicamos en el nombre de la disciplina actual, se abre el selector ![Imagen de selector de disciplina](/DocFiles/images/phase2/disciplineSelector.png) -### Pantalla de Crear objeto +## Pantalla de Crear objeto Si clicamos en el botón de crear objeto, nos saldrá el modal de creación, donde introducir los datos ![Imagen de crearObjeto](/DocFiles/images/phase2/createObject.png) -### Pantalla Editar objeto +## 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 ![Imagen de editarObject](/DocFiles/images/phase2/updateObject.png) -### Pantalla de detalles del objeto +## Pantalla de detalles del objeto Si clicamos en la tarjeta de un objeto, o su nombre, llegaremos a la pantalla de detalles ![Imagen de detalles1](/DocFiles/images/phase2/objectDetail1.png) -### Pantalla de detalles del objeto (continuación) +## Pantalla de detalles del objeto (continuación) Podemos ver también la paginación implementada ![Imagen de detalles2](/DocFiles/images/phase2/objectDetail2.png) -### Pantalla de editar comentario +## Pantalla de editar comentario Si clicamos en el botón de editar, podremos modificar nuestro comentario ![Imagen de editar comentario](/DocFiles/images/phase2/editComment.png) -### Pantalla de perfil +## Pantalla de perfil Si clicamos en "perfil" desde el navbar llegaremos a esta pantalla ![Imagen de perfil1](/DocFiles/images/phase2/profile1.png) -### Pantalla de perfil (continuación) +## Pantalla de perfil (continuación) Como se puede ver, podemos editar cualquier valor menos la contraseña ![Imagen de perfil2](/DocFiles/images/phase2/profile2.png) -### Pantalla de detalles como admin +## Pantalla de detalles como admin Si somos admin, desde nuestro dashboard (fase avanzada), llegaremos al objeto de un usuario y podremos moderarlo ![Imagen de detalles admin](/DocFiles/images/phase2/objectDetailAdminView1.png) -### Pantalla de detalles como admin (continuación) +## Pantalla de detalles como admin (continuación) Como se puede ver, los comentarios de un administrador tendrán un color diferente para diferenciarlos ![Imagen de detalles admin2](/DocFiles/images/phase2/objectDetailAdminView2.png) -### Pantalla de Error +## Pantalla de Error Si en cualquier momento introducimos una url no válida, llegaremos a la pantalla de error ![Imagen de error](/DocFiles/images/phase2/404error.png) -# 🗺️ Diagrama de Navegación +## Pantalla de Recuperación de contraseña 1 + +Ahora podemos dar a la opción de recuperar contraseña en la pestaña de login + +![Imagen de recuperacion1](/DocFiles/images/phase3/pass1.png) + +## Pantalla de Recuperación de contraseña 2 + +Donde deberemos introducir un correo de la aplicación + +![Imagen de recuperacion2](/DocFiles/images/phase3/pass2.png) + +## Pantalla de Recuperación de contraseña 3 + +Y obtendremos un mensaje de éxito, independientemente de si el gmail existe o no, para evitar que se puedan hacer acciones maliciosas y sacar correos de usuarios por fuerza bruta + +![Imagen de recuperacion3](/DocFiles/images/phase3/pass3.png) + +## Pantalla de Recuperación de contraseña 4 + +Entonces recibiremos en nuestro correo un mensaje como el siguiente + +![Imagen de recuperacion4](/DocFiles/images/phase3/pass4.png) + +## Pantalla de Recuperación de contraseña 5 + +Y si aceptamos, nos dará la opción de cambiar la contraseña + +![Imagen de recuperacion5](/DocFiles/images/phase3/pass5.png) + +## Pantalla de verificación de registro + +De manera similar, debemos verificar nuestra cuenta por gmail después de registrarnos, donde al hacerlo iremos a la siguiente pestaña + +![Imagen de verificacion mail](/DocFiles/images/phase3/verificacion1.png) + +## Pantalla de compartir objeto 1 + +Ahora, podemos compartir nuestros objetos con cualquier persona, incluso si no tienen cuenta en la aplicación, lo haremos desde dentro del objeto a compartir, y clicando en el botón + +![Imagen de share1](/DocFiles/images/phase3/share1.png) + +## Pantalla de compartir objeto 2 + +Ahora veremos el link + +![Imagen de share2](/DocFiles/images/phase3/share2.png) + +## Pantalla de compartir objeto 3 + +Este link podrá ser usado por cualquier persona, y si lo usa mientras el dueño sigue compartiendo el objeto, verá la siguiente página + +![Imagen de share3](/DocFiles/images/phase3/share3.png) + +## Pantalla de compartir objeto 4 + +Pero si lo usa cuando el dueño ha dejado de compartir el objeto, verá lo siguiente + +![Imagen de share4](/DocFiles/images/phase3/share4.png) + +## Pantalla de favoritos 1 + +Se ha añadido la opción de marcar objetos como favoritos para tenerlos siempre a mano en caso de tener muchos objetos, para agregar un objeto a favoritos, lo haremos desde la propia card del objeto, clicando en el corazón + +![Imagen de fav1](/DocFiles/images/phase3/fav1.png) + +## Pantalla de favoritos 2 + +Una vez que el objeto está en favoritos, para mostrarlo simplemente debemos clicar en el filtro de favoritos, justo al lado del selector de disciplina + +![Imagen de fav2](/DocFiles/images/phase3/fav2.png) + +## Pantalla de dashboard de administrador 1 + +También se ha añadido el dashboard de administrador, que será accesible desde su header + +![Imagen de dashboard1](/DocFiles/images/phase3/dashboard1.png) + +## Pantalla de dashboard de administrador 2 + +Una vez aquí, tenemos varias pestañas, la de overview, donde se muestra un resumen general de la aplicación + +![Imagen de dashboard2](/DocFiles/images/phase3/dashboard2.png) + +## Pantalla de dashboard de administrador 3 + +La de Usuarios, donde podemos ver unas estadísticas de usuarios, y la gestión de los usuarios por parte de los administradores + +![Imagen de dashboard3](/DocFiles/images/phase3/dashboard3.png) + +## Pantalla de dashboard de administrador 4 + +La de Contenido, donde veremos unas estadísticas sobre el contenido de la aplicación y la creación de objetos y comentarios + +![Imagen de dashboard4](/DocFiles/images/phase3/dashboard4.png) + +## Pantalla de dashboard de administrador 5 + +La de Actividad, donde veremos las estadísticas de creación de objetos en forma de gráfico de barras, con diferentes pestañas para "Semanal", "Mensual", y "Trimestral" + +![Imagen de dashboard5](/DocFiles/images/phase3/dashboard5.png) + +## Pantalla de dashboard de administrador 6 + +La de Crecimiento, donde veremos el análisis de crecimiento para Usuarios, Objetos y Comentarios, comparando diferentes periodos de tiempo, con su respectivo periodo anterior + +![Imagen de dashboard6](/DocFiles/images/phase3/dashboard6.png) + +## Pantalla de dashboard de administrador 7 + +La de Objetos, donde podemos ver los objetos de la aplicación, y la gestión de los objetos por parte de los administradores + +![Imagen de dashboard7](/DocFiles/images/phase3/dashboard7.png) + +## Pantalla de notificación de webSocket 1 + +Si un usuario comparte un objeto, los administradores recibirán una notificación y el link al objeto, para poder ver y moderar que están compartiendo los usuarios + +![Imagen de websocket1](/DocFiles/images/phase3/websocket1.png) + +## Pantalla de notificación de webSocket 2 + +Si clicamos, iremos al objeto + +![Imagen de websocket2](/DocFiles/images/phase3/websocket2.png) + +## 🗺️ Diagrama de Navegación Este diagrama muestra cómo se navega entre las diferentes páginas de la aplicación. -![Imagen de wireframe](/DocFiles/images/phase2/wireframe.png) +![Imagen de wireframe](/DocFiles/images/phase3/wireframe.png) diff --git a/docs/development.md b/docs/development.md index e994bb4..5f68076 100644 --- a/docs/development.md +++ b/docs/development.md @@ -17,7 +17,7 @@ La aplicación LogArt se desarrolla usando un stack de tecnologías MERN, para m - [Blog LogArt: Un giro radical hacia el MERN Stack](https://medium.com/@davidmorenom17/logart-un-giro-radical-hacia-el-mern-stack-060ebde31bc5) -Nota: Las versiones pueden no ser exactas +Nota: Las versiones pueden no ser exactas debido al continuo desarrollo/actualización de las mismas ### Entorno de Desarrollo Backend @@ -92,13 +92,13 @@ La aplicación React se inicia en modo desarrollo en http://localhost:5173 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.) -![Imagen de clasesBackend](/DocFiles/images/phase2/final.svg) +![Imagen de clasesBackend](/DocFiles/images/phase3/final.drawio.svg) ## 📝 Diagrama de clases del frontend 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.) -![Imagen de clasesSPA](/DocFiles/images/phase2/finalspa.svg) +![Imagen de clasesSPA](/DocFiles/images/phase3/finalspa.drawio.png) ## Uso de la API REST en Desarrollo @@ -179,16 +179,13 @@ Situarse en la carpeta raíz del proyecto cd 2024-logart/LogArtApp ``` -Construir la imagen con tag "dev" +Construir la imagen con tag "latestManual" o cualquier otro ``` -docker build -t - -davidmorenoo/logartapp:dev -f -docker/Dockerfile . +docker build -t davidmorenoo/logartapp:latestManual -f docker/Dockerfile . ``` -### Ejecución con docker-compose-dev.yml +### Ejecución con docker-compose.yml Navegar a la carpeta docker @@ -196,13 +193,13 @@ Navegar a la carpeta docker cd docker ``` -Ejecutar con docker-compose-dev.yml +Ejecutar con docker-compose.yml ``` -docker compose -f docker-compose-dev.yml up +docker compose up ``` -La aplicación estará disponible en https://localhost +La aplicación estará disponible en https://localhost:8443 ## Publicar una Release diff --git a/docs/execution.md b/docs/execution.md index 5998edc..807739b 100644 --- a/docs/execution.md +++ b/docs/execution.md @@ -36,7 +36,7 @@ Mode LastWriteTime Length Name docker compose up ``` -- Ahora, tenemos acceso a la aplicación desde el navegador dirigiendonos a https://localhost +- Ahora, tenemos acceso a la aplicación desde el navegador dirigiendonos a https://localhost:8443 -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)". diff --git a/docs/functionalities.md b/docs/functionalities.md index 45ccd6a..4e838c1 100644 --- a/docs/functionalities.md +++ b/docs/functionalities.md @@ -30,7 +30,7 @@ La aplicación implementa un sistema completo de autenticación y autorización - Diagrama completo: Entidades, junto con sus atributos y relaciones. -![Diagrama completo](/DocFiles/images/phase2/databaseSquema.png) +![Diagrama completo](/DocFiles/images/phase3/dbdiagram.png) ## 👦 Tipos de usuarios @@ -223,8 +223,134 @@ Si en cualquier momento introducimos una url no válida, llegaremos a la pantall ![Imagen de error](/DocFiles/images/phase2/404error.png) +## Pantalla de Recuperación de contraseña 1 + +Ahora podemos dar a la opción de recuperar contraseña en la pestaña de login + +![Imagen de recuperacion1](/DocFiles/images/phase3/pass1.png) + +## Pantalla de Recuperación de contraseña 2 + +Donde deberemos introducir un correo de la aplicación + +![Imagen de recuperacion2](/DocFiles/images/phase3/pass2.png) + +## Pantalla de Recuperación de contraseña 3 + +Y obtendremos un mensaje de éxito, independientemente de si el gmail existe o no, para evitar que se puedan hacer acciones maliciosas y sacar correos de usuarios por fuerza bruta + +![Imagen de recuperacion3](/DocFiles/images/phase3/pass3.png) + +## Pantalla de Recuperación de contraseña 4 + +Entonces recibiremos en nuestro correo un mensaje como el siguiente + +![Imagen de recuperacion4](/DocFiles/images/phase3/pass4.png) + +## Pantalla de Recuperación de contraseña 5 + +Y si aceptamos, nos dará la opción de cambiar la contraseña + +![Imagen de recuperacion5](/DocFiles/images/phase3/pass5.png) + +## Pantalla de verificación de registro + +De manera similar, debemos verificar nuestra cuenta por gmail después de registrarnos, donde al hacerlo iremos a la siguiente pestaña + +![Imagen de verificacion mail](/DocFiles/images/phase3/verificacion1.png) + +## Pantalla de compartir objeto 1 + +Ahora, podemos compartir nuestros objetos con cualquier persona, incluso si no tienen cuenta en la aplicación, lo haremos desde dentro del objeto a compartir, y clicando en el botón + +![Imagen de share1](/DocFiles/images/phase3/share1.png) + +## Pantalla de compartir objeto 2 + +Ahora veremos el link + +![Imagen de share2](/DocFiles/images/phase3/share2.png) + +## Pantalla de compartir objeto 3 + +Este link podrá ser usado por cualquier persona, y si lo usa mientras el dueño sigue compartiendo el objeto, verá la siguiente página + +![Imagen de share3](/DocFiles/images/phase3/share3.png) + +## Pantalla de compartir objeto 4 + +Pero si lo usa cuando el dueño ha dejado de compartir el objeto, verá lo siguiente + +![Imagen de share4](/DocFiles/images/phase3/share4.png) + +## Pantalla de favoritos 1 + +Se ha añadido la opción de marcar objetos como favoritos para tenerlos siempre a mano en caso de tener muchos objetos, para agregar un objeto a favoritos, lo haremos desde la propia card del objeto, clicando en el corazón + +![Imagen de fav1](/DocFiles/images/phase3/fav1.png) + +## Pantalla de favoritos 2 + +Una vez que el objeto está en favoritos, para mostrarlo simplemente debemos clicar en el filtro de favoritos, justo al lado del selector de disciplina + +![Imagen de fav2](/DocFiles/images/phase3/fav2.png) + +## Pantalla de dashboard de administrador 1 + +También se ha añadido el dashboard de administrador, que será accesible desde su header + +![Imagen de dashboard1](/DocFiles/images/phase3/dashboard1.png) + +## Pantalla de dashboard de administrador 2 + +Una vez aquí, tenemos varias pestañas, la de overview, donde se muestra un resumen general de la aplicación + +![Imagen de dashboard2](/DocFiles/images/phase3/dashboard2.png) + +## Pantalla de dashboard de administrador 3 + +La de Usuarios, donde podemos ver unas estadísticas de usuarios, y la gestión de los usuarios por parte de los administradores + +![Imagen de dashboard3](/DocFiles/images/phase3/dashboard3.png) + +## Pantalla de dashboard de administrador 4 + +La de Contenido, donde veremos unas estadísticas sobre el contenido de la aplicación y la creación de objetos y comentarios + +![Imagen de dashboard4](/DocFiles/images/phase3/dashboard4.png) + +## Pantalla de dashboard de administrador 5 + +La de Actividad, donde veremos las estadísticas de creación de objetos en forma de gráfico de barras, con diferentes pestañas para "Semanal", "Mensual", y "Trimestral" + +![Imagen de dashboard5](/DocFiles/images/phase3/dashboard5.png) + +## Pantalla de dashboard de administrador 6 + +La de Crecimiento, donde veremos el análisis de crecimiento para Usuarios, Objetos y Comentarios, comparando diferentes periodos de tiempo, con su respectivo periodo anterior + +![Imagen de dashboard6](/DocFiles/images/phase3/dashboard6.png) + +## Pantalla de dashboard de administrador 7 + +La de Objetos, donde podemos ver los objetos de la aplicación, y la gestión de los objetos por parte de los administradores + +![Imagen de dashboard7](/DocFiles/images/phase3/dashboard7.png) + +## Pantalla de notificación de webSocket 1 + +Si un usuario comparte un objeto, los administradores recibirán una notificación y el link al objeto, para poder ver y moderar que están compartiendo los usuarios + +![Imagen de websocket1](/DocFiles/images/phase3/websocket1.png) + +## Pantalla de notificación de webSocket 2 + +Si clicamos, iremos al objeto + +![Imagen de websocket2](/DocFiles/images/phase3/websocket2.png) + ## 🗺️ Diagrama de Navegación Este diagrama muestra cómo se navega entre las diferentes páginas de la aplicación. -![Imagen de wireframe](/DocFiles/images/phase2/wireframe.png) +![Imagen de wireframe](/DocFiles/images/phase3/wireframe.png)