Skip to content

CodeURJC-DAW-2024-25/webapp06

BranchesTags

Repository files navigation

Webapp06: GlobalMart

Desarrolladores

Este proyecto ha sido desarrollado por los siguientes colaboradores:

Tecnologías Usadas

HTML CSS JavaScript Java Spring BootStrap GithubMaterialWeb

Preparación 1

Entidades

  • Usuario: Tiene varios pedidos.
  • Pedidos: Cada pedido puede tener varios o ningún producto.
  • Productos: Cada producto puede tener cero o varias reseñas.
  • Reseñas

Tipos de Usuarios

  • Anónimo
  • Comprador (registrado)
  • Empresa
  • Administrador

Permisos de los Usuarios

  • Anónimo (usuario sin registrar):
    • No tiene permisos, solo puede ver productos, buscarlos, iniciar sesión y registrarse.
  • Comprador (usuario registrado como individual):
    • Cerrar sesión, ver y buscar productos, añadir productos al carrito y realizar pedidos.
    • Subir reseñas de productos.
  • Empresa (usuario registrado como empresa):
    • Subir productos con nombre, tipo, descripción, precio, cantidad e imagen.
    • Gestionar productos subidos (ver, editar, borrar).
    • Observar las gráficas que indiquen qué tipo de productos son los más subidos.
  • Administrador (propietario de la app):
    • Gestionar solicitudes de productos de empresas (aceptar/rechazar).
    • Eliminar productos que no cumplan con el reglamento.
    • Editar información de productos.

Imágenes

  • Anónimo: Ninguna imagen asociada.
  • Comprador: Imagen de perfil asociada a la cuenta.
  • Empresa: Imagen de perfil asociada a la cuenta, además puede introducir imágenes para subir y editar productos.
  • Administrador: Imagen de perfil asociada a la cuenta, además puede introducir imágenes para subir y editar productos.

Gráficos

  • Gráfico para las empresas
    • Gráfico circular en el que se muestra el porcentaje de tipos de productos que tiene una empresa subido y aceptado a la plataforma.
  • Gráfico para los usuarios
    • Gráfico de líneas en el que se muestra el gasto del usuario a lo largo de la historia de la cuenta, en este gráfico aparece el gasto de cada pedido a lo largo del tiempo.

Tecnología complementaria

  • Inicio de sesión con los servicios de google

Algoritmo de consulta avanzada

  • Filtración por tipo y nombre del producto
  • Productos más vistos
  • Nuevos productos

Información de las Bases de Datos

  1. Usuarios:
    • Tipo de usuario
    • Nombre de usuario
    • Contraseña
    • Carrito de compra
    • Historial de pedidos
  2. Productos:
    • Tipo de producto:
      • Electronica
      • Libros
      • Educación
      • Electrodomesticos
      • Deporte
      • Música
      • Cine
      • Otros
    • Nombre de producto
    • Empresa
    • Precio
    • Descripción
    • Imagen
  3. Pedidos:
    • Lista de productos
    • Precio total
    • Dirección de envío
    • ID del usuario
    • Método de pago
    • Instrucciones para el repartidor

Preparación 2

Pantallas

  • Pantalla de inicio de sesión/registro - Esta pantalla permite a los usuarios iniciar sesión en la aplicación proporcionando sus credenciales. Pantalla de inicio de sesión

  • Pantalla de perfil de usuario - Esta pantalla muestra la información del perfil del usuario, incluyendo detalles personales y opciones de configuración. Pantalla de perfil de usuario

  • Pantalla de lista de productos - Esta pantalla muestra una lista de productos disponibles para la compra, con opciones de filtrado y búsqueda. Pantalla de lista de productos

  • Pantalla de detalles del producto - Esta pantalla muestra información detallada sobre un producto seleccionado, incluyendo imágenes, descripción y reseñas. Pantalla de detalles del producto

  • Pantalla de carrito de compras - Esta pantalla muestra los productos que el usuario ha añadido a su carrito de compras, con opciones para modificar cantidades o eliminar productos. Pantalla de carrito de compras

  • Pantalla de estadísticas - Esta pantalla muestra estadísticas relevantes para los usuarios y administradores, como gráficos de ventas, productos más vendidos, y análisis de usuarios. Pantalla de estadísticas

  • Pantalla de solicitudes del administrador - Esta pantalla permite al administrador ver y gestionar las solicitudes de productos subidos por las empresas, pudiendo aceptar o rechazar cada solicitud. Pantalla de solicitudes del administrador

  • Pantalla de subida de un producto - Esta pantalla es un formulario que permite a las empresas subir nuevos productos, incluyendo detalles como nombre, descripción, precio, y fotos. Pantalla de subida de un producto

  • Pantalla del usuario sin registrar - Esta es la primera pantalla que aparece al cargar la web, mostrando productos destacados y opciones para iniciar sesión o registrarse. Pantalla del usuario sin registrar

  • Pantalla de productos de la empresa - Esta pantalla muestra todos los productos que una empresa ha subido, permitiendo gestionar cada uno de ellos. Pantalla de productos de la empresa

  • Diagrama de navegación Diagrama de Páginas GlobalMart

Práctica 1

Diagrama de Páginas GlobalMart

  • Navegador

    • El navegador se muestra en todas las pantallas, permitiendo desde este realizar búsquedas de todos los productos, iniciar sesión, registrarse, crear nuevos productos, acceder a la información del perfil, acceder al carrito y a la sección de "About us".

  • Primera pantalla

    - En esta captura se puede observar lo que el usuario observará nada más entrar a la web (desde aquí se puede observar los algoritmos de consulta implementados y toda la funcionalidad del navegador)

    Prototipo Página Indice

  • Pantalla de productos

    - En esta captura se pueden observar los productos que han sido subidos por las compañías y aceptados por los administradores, esta pantalla la verás si eres un usuario sin iniciar sesión o un comprador.

    Prototipo Página productos

  • Pantalla About us

    - En esta captura se puede observar información sobre nuestra empresa, en esta página nos introducimos a nosotros mismos indicando nuestras aficiones y lo que nos motiva a mejorar nuestra web.

    Prototipo Página About us

  • Pantalla de opciones para indentificarse

    - Esta pantalla es un "pop-up" en el que solicita al usuario que se quiere identificar si desea utilizar un formulario en el que introducir su información para iniciar sesión / registrarse o si desea utilizar la tecnología complementaria de google para iniciar sesión con esta plataforma.

    Prototipo de selección

  • Pantalla de registro/inicio de sesión

    - Esta pantalla es un "pop-up" en el que se solicita al usuario que se registre / inicie sesión mediante un formulario, además a través de este formulario el usuario podrá indicar si quiere una cuenta de compañía (para subir productos a la venta) o de comprador (para comprar los productos que suben las compañías).

    Prototipo de registro

  • Pantalla de carrito

    - En esta captura se puede observar el carrito del usuario que está registrado. Esta pantalla solo se puede observar si el usuario que ha iniciado sesión es un comprador.

    Prototipo de carrito

  • Pantalla de información de la cuenta

    - En esta captura se puede observar la información de la cuenta que ha iniciado sesión.

    Prototipo de informacion de la cuenta

  • Pantalla de creación de nuevo producto

    - En esta captura se puede observar un formulario que una compañía puede rellenar para la subida de un nuevo producto.

    Prototipo de nuevo producto

  • Pantalla de página de administrador

    - En esta captura se observa la funcionalidad especial del administrador, la cual es aceptar o rechazar subidas de nuevos productos que quieres hacer las compañías.

    Prototipo de administrador

  • Pantalla de información detallada de un producto

    - En esta captura se puede observar la información detallada de un producto, incluyendo las reviews de otros usuarios sobre ese mismo producto.

    Prototipo producto Prototitpo producto2

  • Diagrama de navegación de GlobalMart Diagrama de Páginas GlobalMart

Instrucciones de Ejecución

Requisitos Previos

Antes de ejecutar la aplicación, asegúrate de tener instalados los siguientes componentes:

  • Java (versión 21)
  • Apache Maven (versión 3.8 o superior)
  • MySQL Server (versión 8.0 o superior)
  • Git

Clonar el repositorio

  • Ejecuta el siguiente comando en la terminal para descargar el código fuente:

git clone https://github.com/CodeURJC-DAW-2024-25/webapp06 cd webapp06

MYSQL

  • Iniciar Sesión:

mysql -u root -p 1234password?

  • Crear la base de datos:

CREATE DATABASE global_mart;

  • Salir de MYSQL:

EXIT;

Construir y Ejecutar la aplicación

  • Construir la aplicación:

mvn clean package

  • Ejecutar la aplicación:

java -jar target/webapp6.jar

Acceder a la aplicación

Acceder en el navegador a la url: https://localhost:8443

Usuarios de la aplicación

  • Administrador:
    • username: user1
    • password: user1
  • Compañía:
    • username: comp
    • password: comp
  • Usuario registrado:
    • username: a
    • password: a

Diagrama de relaciones de base de datos Diagrama de base de datos Diagrama de base de datos 2

Diagrama de relaciones de clases Diagrama de base de datos

Commits de Mayor Importancia Realizados

Luis

Descripción Link
Commit en el que se ha aplicado la funcionalidad de AJAX (se ha ido retocando con commits anteriores y futuros) Link Commit 1 Luis
Commit en el que se ha implementado la posibilidad de registro desde una cuenta de la plataforma google Link Commit 2 Luis
Commit en el que se ha implementado la correcta visualización de los productos Link Commit 3 Luis
Commit en el que se ha implementado la funcionalidad de la página de los administradores Link 4
Commit en el que se utiliza mustache para la correcta renderización de los elementos en el html aplicando los respectivos roles de cada usuario, además se mejora la carga de los productos permitiendo la carga de los productos propios de la compañía (en caso de iniciar sesión) Link 5

Cristian

Descripción Link
Clase, Repo y Servicio User Link 1
Search Controller y arreglo Data Loader Link 2
Empiezo login (hecho mas tarde, pero no en este commit) Link 3
Editar perfil Link 4
Búsqueda de productos Link 5

Juan Manuel

Descripción Link
Company graph, commit where it was implemented a pie chart of the types of products in a company Link 1
User graph, similar to the company graph but with a different chary to show the historical prices trend of orders (not definitive) Link 2
Cart changes, remodeling the initial cart, with "add product to cart" funcionality (not definitive improvements in next commits) Link 3
Remove product and initiate payment in cart, includes remove funcionality and the initial step of payment method too Link 4
Payment and others corrections, includes final payment funcionality and other changes in models Link 5

Álvaro

Descripción Link
Implementation of review system Link 1
Review first implementation Link 2
More review and product service optimization Link 3
Ayax first iteration Link 4
Optimization of product service and repository Link 5

Ficheros de Mayor Participación

Luis

Descripción Link
MainController.java Link 1
BaseController.java Link 2
LoadMore.js Link 3
Products.html Link 4
ProductsController.html Link 5

Cristian

Descripción Link
UserService.java Link 1
LoginRegisterController Link 2
SearchController.java Link 3
User.java Link 4
login.js Link 5

Juan Manuel

Descripción Link
ShoppingCartController.java Link 1
GraphsController.java Link 2
Order.java Link 3
companyGraph.html and userGraph.html Link 4
shoppingCart.html Link 5

Álvaro

Descripción Link
ProductService.java Link 1
reviews.html Link 2
ProductsController.java Link 3
DataLoader.java Link 4
Review.java Link 5

Práctica 2

Documentación de la API Rest

Actualización de diagrama de clases

Diagrama de clases

Instrucciones de ejecución de la aplicación dockerizada

  • Requisitos previos:

    Para poder descargar y ejecutar la aplicación dockerizada tan sólo es necesario:

  • Pasos para la instalación:

  1. Descarga la imagen de la aplicación desde el repositorio de Docker Hub: 
    sudo docker pull alvaro3517/webapp6
  2. Ubica tu terminal en la carpeta donde tengas el archivo [docker-compose.yml]. 
    cd webapp06
  3. Ejecuta el archivo docker-compose.yml: 
    docker-compose up
  4. Una vez haya terminado de ejecutarse, abre en tu navegador de preferencia dicha dirección.

📦 Creación de imagen de la aplicación

Para poder crear a imagen de la aplicación es necesario tener docker instalado en tu máquina. Una vez tengas docker instalado, sigue los siguientes pasos:

  1. Clona el repositorio a tu ruta deseada:

     git clone https://github.com/CodeURJC-DAW-2023-24/webapp06

  2. Inicia sesión en tu cuenta de Docker Hub. Si no tienes una, puedes crearla aquí. Se te pedirá introducir tu usuario y contraseña:

    docker login

  3. Ejecuta el ejecutable bash script que creará la imagen de la aplicación:

    ./docker_image.sh

    Ten en cuenta que este script crea la imagen con el nombre "alvaro3517/webapp6" y la subirá a tu cuenta de Docker Hub. Si deseas cambiar el nombre de la imagen o el nombre de usuario, puedes hacerlo modificando el script, pero deberás también cambiar el nombre de la imagen que se usa en el docker compose yml.

🛫 Despliegue de la aplicación en una máquina virtual

Pasos previos

  1. Descargar la clave proporcionada a través de correo electrónico por parte de los docentes.
  2. Conectarse a la red de la Universidad a través del Escritorio de Desarrollo.

Pasos para el despliegue

  1. Conectarse a la máquina virtual:

    ssh -i appWeb06.key vmuser@appWeb06.dawgis.etsii.urjc.es

  2. Instalar Docker con Docker Compose en la máquina virtual:

    sudo docker install

  3. Clonar el repositorio en la máquina virtual:

    git clone https://github.com/CodeURJC-DAW-2024-25/webapp06.git

  4. En la carpeta raíz del repositorio, donde se encuentra el fichero docker-compose.yml, ejecutar el siguiente comando para iniciar la aplicación:

    sudo ./docker_script.sh

    Si antes no creaste la imagen, deberás ejecutar antes:

    sudo ./docker_image.sh

  5. Una vez haya terminado de arrancar, conectarse a:

    https://appWeb06.dawgis.etsii.urjc.es:443

Detener la aplicación

Una vez inicializada la aplicación, para detenerla se puede hacer con: sudo docker compose stop

Volver a arrancar la aplicación

Una vez ya ha sido detenida, se puede volver a arrancar con: sudo ./docker_script.sh

Documentación de la API

YAML APIDOCS

Participación de miembros

Cristian

Descripción textual

Mi labor en esta práctica ha constado de la revisión y el análisis de errores al transformar la aplicación, ya que al transformar las clases en diferentes DTOs, nos ha llevado a cabo varios errores que hemos tenido que solucionar. Además de revisar y analizar errores, he llevado a cabo la adaptación del código a los DTOs. También me he encargado de gestionar la documentación tanto el README como la documentación de la API. He realizado además la actualización del diagrama de clases.

Listados 5 commits más significativos
Descripción commit Link
Convertir todas las clases en diferentes DTOs según la funcionalidad Link
Añadir SearchProductDTO y actualizar ProductMapper Link
Arreglar AJAX Link
Arreglar Imágenes Link
Arreglar Reviews Link
Listado 5 ficheros con mayor participación
Fichero Link
ReviewsController.java Link
ProductsController.java Link
MainController.java Link
SearchController.java Link
ProductService.java Link

Juan Manuel

Descripción textual
Listados 5 commits más significativos
Descripción commit Link
DTO structure Link 1
Adapt controllers to dto Link 2
Modifies DTOs services, mappers etc Link 3
Api Graphs Controller Link 4
Shopping cart DTO, review mapper, controllers etc Link 5
Listado 5 ficheros con mayor participación
Fichero Link
ApiGraphController.java
ShoppingCartController
DTOs
Services
Controllers

Álvaro

Descripción textual
Listados 5 commits más significativos
Descripción commit Link
Added more functionality to the UsersAPI Link 1
Added more functionality to all the APIs Link 1
Added more functionality to the UserAPI Link 1
DockerCompose WIP Link 1
Last docker fix Link 1
Listado 5 ficheros con mayor participación
Fichero Link
Dockerfile Link 1
Docker-compose Link 1
APIProductController Link 1
APIUserController Link 1
APIReviewsController Link 1

Luis

Descripción textual

Mi labor en esta práctica ha sido la colaboración a la hora de realizar la API y la configuración de de la seguridad de la API

Listados 5 commits más significativos
Descripción commit Link
Security Almost Finished Link1
Images Product Progress Link2
API Main Controller Link3
Postman tools and functionality Link4
API Product Controller Link5
Listado 5 ficheros con mayor participación
Fichero Link
APIMainController.java Link1
APIProductsController.java Link2
GlobalMartSecurityConfig.java Link3
ProductService.java Link4
APIReviewsController.java Link5

Práctica 3

Diagrama de componentes

Diagrama de componentes

Instrucciones de ejecución

Asegurarse de que Node.js está instalado
Abrir una terminal y ejecutar los siguientes comandos:

npm install

cd frontend

ng serve --proxy-config proxy.conf.json

Después ejecutar la base de datos y la aplicación springboot (fase 1)

Video de youtube

Link_al_enlace_de_youtube

Commits y archivos más significativos

Cristian

Listados 5 commits más significativos
Descripción commit Link
Shopping Cart done Link
Connect API Rest to Angular Project Link
Login finally done Link
Product management Link
Angular views Link
Listado 5 ficheros con mayor participación
Fichero Link
Views Link
shopping-cart.service.ts Link
auth.service.ts Link
login.component.ts Link
ProductList Folder Link

Luis Abril

Listados 5 commits más significativos
Descripción commit Link
New product and edit product component done Link
Admin functionality Link
Problems with the roles fixed and the load of user images Link
All review part done Link
MostViewedProducts algorithm done Link
Listado 5 ficheros con mayor participación
Fichero Link
form.component.ts Link
admin.component.ts Link
product-detail.component.ts Link
product.service.ts Link
register.component.ts Link

Juan Manuel Bustos

Listados 5 commits más significativos
Descripción commit Link
Graphs components Link
Add CompanyGraph component and update routing in user profile Link
Edit Profile Link
Home Component Link
User Profile Link
Listado 5 ficheros con mayor participación
Fichero Link
CompanyGrap Folder Link
Home Folder Link
User graph Folder Link
User Profile Folder Link
Graphs Link

Álvaro Pindado Castiñeira

Listados 5 commits más significativos
Descripción commit Link
Search Component Link
Docker compose fix Link
Edit Docker for angular Link
SPAController Link
Fix of angular routes Link
Listado 5 ficheros con mayor participación
Fichero Link
DockerFile Link
Search Folder Link
SPA Controller Link
Api docs yaml Link
app-routing-module.ts Link

About

No description, website, or topics provided.

Resources

Readme

License

Apache-2.0 license
Activity
Custom properties

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases 4

practica3DAW-mayo Latest
May 13, 2025
+ 3 releases

Packages

 
 
 

Contributors

Languages