- W&T (Web And Tech)
Esta aplicación pemitirá a los usuarios comprar artículos relacionados con tecnología así como ordenadores, cables, placas base, etc. todo dentro de la legalidad vigente.
| Nombre | Github | |
|---|---|---|
| Guillermo Martín García | g.martingarcia@alumnos.urjc.es | Wilhelm-mar |
| Sergio Octavio Mancebo | s.octavio.2018@alumnos.urjc.es | sergio-octavio |
| Víctor López Rodríguez | v.lopezrodr@alumnos.urjc.es | Victorlopezro |
| Rodrigo Montilla Fernández | r.montilla.2019@alumnos.urjc.es | romofe01 |
| Fernando Prieto Olías | f.prieto.2019@alumnos.urjc.es | Fervo8564 |
- Invitación: https://trello.com/invite/b/T0BwXzKT/1f6016fb6f696502b1e98b5d46096517/practicadaw8
- Tablero: https://trello.com/b/T0BwXzKT/practicadaw8
- Usuarios
- Pedidos
- Producto
- Valoraciones
Distinguimos entre 3 tipos de usuario: usuarios no registrados, clientes y administradores.
- Usuarios no registrados: podrán ver los productos junto con sus descripciones y valoraciones pero no tendrán permisos de administrador ni podrán comprar, vender o valorar productos.
- Clientes: tendrán disponibles las mismas cosas que los usuarios no registrados pero podrán comprar, valorar productos (después de su compra) y modificar su perfil.
- Administradores: podrán añadir productos a la venta, eliminarlos y modificar sus características (precio, descripción, etc.) pero no podrán comprar nada.
- Los usuarios registrados podrán establecer una imagen de perfil.
- Cuando un administrador ponga un producto a la venta, este tendrá que venir acompañado de una imagen.
- A la hora de comprar un producto, podremos ver la localización de la tienda en la que se encuentra para que así el cliente decida si va a recogerlo o si por el contrario decide pagar los gastos de envío necesarios y recibirlo en casa.
- En función de los productos que un cliente haya comprado con anterioridad, se mostrará un listado de "artículos de interés" relacionado con sus compras previas.
Home- En esta pantalla permitirá al usuario ver todos los productos que están a la venta así como aplicar una serie de filtros para una busqueda más concreta de los productos que desea el usuario.
Componentes- En esta pantalla permite al usuario seleccionar los diferentes componentes que existen en la web. Dentro de ella se puede encontrar un despliegue distinguiendo los tipos de productos: Placas Base, Procesador, Discos Duros, Tarjetas Gráficas. Además se podrá puntuar el artículo si previamente se ha comprado, visualizar el resto de valoraciones y puntuaciones, las características del artículo en particular.
Placas Base- En esta página se visualiza los modelos de las placas base.
Discos Duros- En esta página se visualiza los modelos de las discos duros.
Procesador, - En esta página se visualiza los modelos de las procesador.
Tarjetas Gráficas- En esta página se visualiza los modelos de las tarjetas gráficas.
Periféricos- En esta pantalla permite al usuario seleccionar los diferentes periféricos que existen en la web. Dentro de ella se puede encontrar un despliegue distinguiendo los tipos de productos: Monitores, teclados, ratones y auriculares. Además se podrá puntuar el artículo si previamente se ha comprado, visualizar el resto de valoraciones y puntuaciones, las características del artículo en particular.
Monitores- En esta página se visualiza los modelos de los monitores.
Teclados- En esta página se visualiza los modelos de los teclados.
Ratones- En esta página se visualiza los modelos de los ratones.
Auriculares- En esta página se visualiza los modelos de los auriculares.
Móviles- En esta página se visualizará todos los tipos de móviles.
Contacto- En esta página permita al usuario ponerse en contacto por teléfono, correo electrónico... Además de dar la opción del contacto en Redes Sociales.
Login- En esta pantalla permite al usuario logueado poder cambiar algunos aspectos de su perfil como por ejemplo su foto de perfil, encabezado o cambiar la información que se encuentra en su perfil.
AdminProductos- En esta pantalla permite a los administradores gestionar los productos de la aplicación, ya sea añadiendo o borrando productos existentes.
AdminUsuarios- En esta pantalla permite a los administradores gestionar los usuarios de la web, como por ejemplo comprobar que existe un usuario.
AdminGráficas- En esta pantalla permite a los administradores observar las graficas sobre la información recogida de la página web
Home - se ha modificado la página home con un menu para clientes, se han traducido información de la página al español, se muestran productos de la aplicación.
Product - se ha modificado la página de productos de componentes y periféricos
Single product - se ha modificado la página cuando se muestra la información de un producto en concreto
SignIn / Login - página para el registro de un nuevo usuario o el logueo para un usuario ya registrado.
Perfil - página donde el usuario puede modificar su información de la cuenta ya sea su nombre de usuario, su nombre completo, su dirección o su correo.
Pedidos - página para ver información de los pedidos realizados.
Seguridad - página para poder cambiar la contraseña de forma segura o darse de baja en la aplicación.
Checkout - modificación de la página del checkout, aparecerá un botón de compra si se ha registrado previamente en la aplicación
Graphics - página de admin que permite observar gráficas de las ventas de la aplicación.
Admin user list - página de admin que muestra la lista de usuarios dados de alta en la aplicación.
Order list - página de admin que muestra la lista de pedidos que se han realizado en la aplicación.
New product - página de admin que facilita la creación de nuevos productos para la aplicación web.
Contact - modificación de la página de contactos, detalles referente a nuestra aplicación y traducido al español.
Error - página de error donde se redireccionará al usuario en caso de que exista algún error en la aplicación.
Para instalar y ejecutar la aplicación del grupo 8 se deben seguir los siguientes pasos:
- Usamos el siguiente hipervínculo al repositorio de Github del grupo 8: https://github.com/CodeURJC-DAW-2021-22/webapp8 (Asegurarse que nos encontramos en la rama main).
- Nos dirigimos a PostgreSQL "pgAdmin 4" y en nuestro servidor local creamos una base de datos llamada webandtech (Es importante que esté vacío para que en la primera ejecución se carguen la información de la aplicación).
- Una vez descargada la aplicación, en el entorno de desarrollo Eclipse con la extensión de spring preparada de antemano, abrimos el archivo application.properties y ponemos la contraseña y usuario que tengamos en nuestra base de datos de "pgAdmin 4" y ejecutamos el programa.
- Sin parar la ejecución del programa, introduce la siguiente Url en un navegador: https://localhost:8443/
- Una vez que nos cargue la pantalla de la tienda, la aplicación estará lista para usarse.
Requisitos para la ejecución del programa:
- PostgreSQL: 14.2
- Pack de Spring Boot para Eclipse o en el entorno de desarrollo que se esté trabajando: (versión 2.6.3)
- Versión de java: 17
- BootStrap: 3.3.7
- JQuery: 3.1.1-1
Leyenda del diagrama:
- Morado: Vistas
- Verde: Controladores
- Azul: Repositorios
- Negro: Modelos
- Rojo: Servicios
- Azul claro: Seguridad
Guillermo Martín García | g.martingarcia@alumnos.urjc.es
Realización de la aplicación básica de la aplicación y posterior actualización de todo. Modificación de los controladores y mapeado. Consulta y ayuda a los demás miembros del grupo.
Sergio Octavio Mancebo | s.octavio.2018@alumnos.urjc.es
Creación de las pantallas para la creación de los nuevos productos, botones especiales para el administrador y usuario. Submenu en el icono de login. Creación del pdf al finalizar la compra de uno de los productos de la tienda. Pantalla de creación/actualización de productos y gestión de los linkeos del header, footer y el resto de las pantallas correspondientes.
| Número | Descripción | Commit | Archivos |
|---|---|---|---|
| 1º | submenu creation in index.html | SubMenu | Index.html Style |
| 2º | Update template newProduct.html | Created template newProduct.html, Update template newProduct.html | newProdcut.html |
| 3º | Update pages and finished template product.html | Update pages and finished template product.html | product |
| 4º | Update template productsByFeatures.html | Update template productsByFeatures.html | productsByFeatures.html |
| 5º | Generated PDF | GeneratePDF | GeneratePDF |
Víctor López Rodríguez | v.lopezrodr@alumnos.urjc.es
Cambios en todas las vistas, linkeos entre las páginas, modificacion del navigation controller y correccion de errores.
Rodrigo Montilla Fernández | r.montilla.2019@alumnos.urjc.es
Creación de modelos, repositorios, servicios y arreglo de errores de código
Fernando Prieto Olías | f.prieto.2019@alumnos.urjc.es
Este miembro del equipo se encargó de ingresar todos los datos al loader.java: usuarios, roles, productos, marcas, tipo de productos, sus respectivas imágenes,... También se ha encargado de la documentación del README.md: las imágenes de las vistas y su navegación, elaborar los diagramas,... Cabe destacar que realizó los primeros commits sobre las templates de perfil, transacciones y seguridad pero no aparecen los commits en el Github.
https://codeurjc-daw-2021-22-webapp8.herokuapp.com/
Nombre de usuario: Jonathan
Contraseña: f
*Archivo yaml: https://github.com/CodeURJC-DAW-2021-22/webapp8/blob/main/backend/webandtech/api-docs/api-docs.yaml
*Documentación API REST: https://rawcdn.githack.com/CodeURJC-DAW-2021-22/webapp8/7dde1b87c7c046e7c02de58391e7e06e63f4adf8/backend/webandtech/api-docs/api-docs.html
-
Es necesaria la instalacion de docker y docker compose.
-
Abrir la terminal navegar hasta la carpeta Docker.
3.1. Windows: Escribir el comando: "docker-compose up --build".
3.2. Linux: Escribir el comando: "sudo docker-compose up --build".
-
Una vez finalizado el proceso de construcción de docker abrir el navegador y escribir:"https://localhost:8443/".
-
Una vez escrita te redirigida a la pantalla de inicio de la aplicacion: "https://localhost:8443/index" una vez se cargue estará lista para ser utilizada.
LINUX:
-
Clonar repositorio mediante git clone https://github.com/CodeURJC-DAW-2021-22/webapp8.git
-
Descargar Docker
-
Descargar Docker Compose
-
Navegar hasta la carpeta Docker
-
Ejecutar el comando: "chmod 777 create_image.sh"
-
Ejecutar el comando: "./create_image.sh"
Para implementar la aplicación en Heroku, debe seguir los siguientes pasos:
- Crea una cuenta en Heroku.
- Instale el paquete Heroku.
- Instalar experto.
- Abra cualquier shell de tipo "bash".
- Inicie sesión en Heroku usando el comando "heroku login".
- Use el comando "cd" hasta llegar a la carpeta "Docker".
- Ejecute el comando "./create_heroku_app.sh codeurjc-daw-2021-22-webapp8".
- Ejecute el comando "./deploy_heroku_app.sh codeurjc-daw-2021-22-webapp8".
- Abra su panel de Heroku, haga clic en el nuevo repositorio y luego haga clic en "Abrir aplicación".
Guillermo Martín García | g.martingarcia@alumnos.urjc.es
| Número | Descripción | Commit | Archivos |
|---|---|---|---|
| 1º | Añadir la base de la aplicación, archivos jwt y varias actualizaciones | Update app api | UserRestController |
| 2º | Borrado de cosas sobrantes y actualización de partes de la API | Update api | AdminRestController |
| 3º | Añadir rest security config | Update security api | LoginApiController |
| 4º | Actualización de varias partes de la app | Update app | pom.xml |
| 5º | Modificación de varias partes destacando product service | Update app | ProductService |
Sergio Octavio Mancebo | s.octavio.2018@alumnos.urjc.es
Sergio ha sido el encargado de realizar el controlador de UserRestControler, además de diseñar el Diagrama de Clases y redactar el README para esta Fase 3.
| Número | Descripción | Commit | Archivos |
|---|---|---|---|
| 1º | Implementación UserRestControler | Add UserRestControler | UserRestControler.java |
| 2º | Implementación UserRestControler | Add UserRestControler | UserRestControler.java |
| 3º | Implementación UserRestControler | Add UserRestControler | UserRestControler.java |
| 4º | Implementación UserRestControler | Add UserRestControler | UserRestControler.java |
| 5º | Implementación UserRestControler | Add UserRestControler | UserRestControler.java |
Víctor López Rodríguez | v.lopezrodr@alumnos.urjc.es
| Número | Descripción | Commit | Archivos |
|---|---|---|---|
| 1º | Modificar el product service para que funcione con API rest | Updates | ProductService |
| 2º | Modificacion del product rest controller | update productcrontroller | ProductsRestController |
| 3º | Modificacion del product rest controller | update productcrontroller | UserRestController |
| 4º | Modificacion del product rest controller | update productrestcontroller | ProductRepository |
| 5º | Modicicaciones para los productos | update API | RatingService |
Rodrigo Montilla Fernández | r.montilla.2019@alumnos.urjc.es
| Número | Descripción | Commit | Archivos |
|---|---|---|---|
| 1º | Añadir API REST User Model | API REST User Model | User |
| 2º | Añadir API REST Rol Model | API REST Rol Model | Rol |
| 3º | Añadir API REST Rating Model | API REST Rating Model | Rating |
| 4º | Añadir API REST Product Model | API REST Product Model | Product |
| 5º | Añadir API REST Order Model | API REST Order Model | Order |
Fernando Prieto Olías | f.prieto.2019@alumnos.urjc.es
| Número | Descripción | Commit | Archivos |
|---|---|---|---|
| 1º | Creacion de Dockerfile y dockerizacion de la app | add Dockerfile | Dockerfile |
| 2º | Creacion del contenedor de la app con docker-compose | add docker-compose | docker-compose.yml |
| 3º | Configuracion del pom para heroku | update pom | pom.xml |
| 4º | Configuracion de la base de datos para heroku | add DatabaseConfig | DatabaseConfig.java |
| 5º | Configuracion del puerto en application.properties para heroku | update application.properties | application.properties |