WebApp15

Phase 0

Application Name: 👟 StepX

👥 Team Members:

Name and surname	URJC mail	GitHub user
Gabriel Miro-Granada Lluch	g.mirogranada.2022@alumnos.urjc.es	Gabim23
Elinee Nathalie Freites Muñoz	en.freites.2022@alumnos.urjc.es	ElineeF
Ronald Sebastian Silvera Llimpe	rs.silvera.2022@alumnos.urjc.es	D4ng3r25
Alexander Matias Pearson Huaycochea	a.pearson.2022@alumnos.urjc.es	Pearson33

🖼 Class Diagram

📌 Visual representation of the system architecture:

🎭 Theme & Description

A shoe ecommerce website where you can buy shoes, make reviews, ckeck your purchase history and apply coupons.

🚀 Main Features

• User registration and authentication.
• Viewing the different shoes.
• Shoe purchase and coupon apply.
• Purchase history
• shopping cart
• Management and creation of products by the administrator.
• Uploading images for shoes from admin account.
• Uploading profile images from registered users account.
• Sales and attendance statistics.

🏗 Entities:

1. User: Information about registered users (username, email, password, avatar).
2. Product: Details of the shoes (id, size, genre, category, price, reviews).
3. Order: Information about orders (id, date, products bought).
4. Coupon: Details of the coupons (code, discount).
5. Review: User reviews about shoes (rating, description, user).
6. History: Where orders of every user are stored (orders).

🛠 User Types and Permissions:

• Anonymous User: Can view the shoes.
• Registered User: Can buy shoes, view purchase history, modify profile, make and delete reviews.
• Administrator: Can create shoes, view sales statistics, modify profile and delete products and reviews.

🏞 Images:

• Users and administrators can upload profile pictures.
• Shoes have pictures that are uploaded by the admin.

📊 Charts:

• Sales statistics for admin (money)
• Number of products sold by date
• Money spent in shoes for registered users

💡 Complementary Technology:

• Users receive a coupon by email when they sign up and click the button to receive the discount.
• Users can download a pdf of the order.

⭐ Advanced Algorithm or Query:

• Recommendation System: Based on past purchases, shoes are recommended to registered users
• Best Sellers System: Based on all purchases made by all users, shoes are recommended to registered users

🏗 Screens:

Home Page:

The home page tab is responsible for displaying what all new users can initially see, all users can see the variety ad the info of each product but the ones that are not registered can't purchase, the unregistered or anonymous ones can only have access to login or register button on the navbar, once the user is registered or authenticated it will have access to its own profile and their own cart. If the authenticated user is an admin then in the navbar will have access to general stadistics and their own profile. The navbar is regulated and shows especific buttons or icons depending on the type of user that access.

Indivivual Product Screen:

Regarding the individual product screen, it displays the corresponding images of the selected product, as well as all its relevant attributes, including the button to select the shoe size and add it to the cart. At the bottom, there are comments about this product along with a more extensive description than the one above.

Shop Scren:

The shop page is responsible for showcasing the available products, with the option for different types of customers to perform specific activities. Additionally, filters are available on the left side of the page. It has to be mentioned that is the user that acces is an admin, could delete, create, and edit each product in the shop page,but if the access is from a registered user, could only add it to cart. For each acces with or without ROLE, the quick view is gonna be available.

Edit Product Screen:

The edit product tab is only available to administrator-type users. On this page, there is a form filled with the product's information (name, description, images, etc.).

Create Product Screen:

Similarly to the edit item tab, the create item tab is available only to users who are administrators. This form contains the same fields as the form on the edit item tab. Both pages are accessed by clicking the respective buttons available within the shop.

Check-Out:

The checkout screen allows users to complete their purchase by entering their shipping information, such as country, name, email, address and telephone, in addition to applying discount coupons. It also shows an order summary with product list, image, adjustable quantity, subtotal, shipping cost and automatically calculated total. Includes a "Continue with Order" button to complete the purchase. Its design is clear and functional, facilitating data validation and order adjustment in real time.

Cart:

The cart screen shows a summary of the selected products, including name, image, adjustable quantity and price. It also calculates the subtotal and offers the "Checkout" option to proceed with the purchase, this makes it easier to manage the order before payment, and see what products the order contains.

User Profile:

This is the user profile screen for StepX website. Allows the user to view and edit their personal information, including first name, last name, username, email, and a short biography. It also offers the option to change the profile photo. At the bottom, the purchase history is displayed, where the user can see details of previous orders, such as the product name, order number, date, price and delivery status. The side navigation includes access to profile information, purchase history and settings, and at the end of this page there is a graph showing the spending in the store for each month. If an admin access to its own profile, is going to see his profile picture, username and email only, the rest of attributes are reserved to users, also admins could access to shop for editing, creating or deleting and stadistics from their profile.

Admin:

This is the StepX admin panel screen. Displays an analytical summary with key metrics such as sales, profits, visitors and orders, along with their respective variations from the last week. It also includes trend graphs, such as recent sales movement and monthly profits, allowing managers to monitor business performance. The interface is visually clear, with a design focused on quick interpretation of data.

Login:

This is the login screen for the StepX website. It presents a pop-up form where users can enter their username or email and password to access their account. It validates if the data in the form are users that already been registered or not, it includes a registration button for new users in case it's the first time they access.

Create Account:

This is the create user account screen. It presents a form where users can enter their username, email, and select a password to create their account.

💻 Screen Navigation Diagram:

📁 DIAGRAM WITH DATABASE ENTITIES

📁 CLASS AND TEMPLATES DIAGRAM

PHASE 1:

EXECUTION INSTRUCTIONS:

1. Clone the repository:
   • The first step is to download or clone the repository onto your machine and open it with a development environment like Visual Studio Code.
2. Install Java and Mave:
   • Preferably, install Java 21 as well as Maven on the device.
3. Set up the Database:
   • In our case, we are using XAMPP for the database, but you can use any SQL editor of your choice, such as MAMP, for example.
   • If you have installed XAMPP, once the program opens, you should click on Start under SQL. Then, click on the Shell icon.
   • Once in the shell, enter the following command:

   mysql -u root

   • Finally, execute the following SQL command to create the database:

   CREATE DATABASE stepxDatabase;

4. Run the proyect
   • We recommend using Visual Studio Code (VS Code) as the development environment. For a better experience and easier project execution, install the following extensions in VS Code:
     • Java Extension Pack
     • Spring Boot Extension Pack
     • Maven for Java
   • With these extensions installed, you can run the program with just one click from VS Code. 🚀

🤝 PARTICIPATION

Ronald Sebastian Silvera llimpe

A significant portion of the time invested in the project was dedicated to developing the dynamic loading of elements and confirmations. This includes features such as modal usage and loading additional elements when clicking a button (AJAX).

Additionally, considerable effort was put into implementing the necessary validations during the user's checkout process, including recalculating prices and verifying stock availability.

Furthermore, I contributed to the user profile section, handling updates to user information, profile pictures, and displaying the associated orders.

Nº	Commits	Files
1	load more orders in profile	userController
2	recalculate funtion, load image and orders	CheckoutController
3	cuppon apply recalculate price	CheckoutController
4	update user personal information	userController
5	all filter of shop	ShoeController

Alexander Matias Pearson Huaycochea

I have been in charge of some functionalities for the administrator such as creating products through a form, on the other hand I was in charge of developing functionalities for both registered and non-registered users, such as the best-selling products on the website, recommended products, as well as we have all the functionality of the comments of a product, such as creating, showing and deleting comments with AJAX. Likewise, I was in charge of implementing an external tool that facilitates the download of PDF as a sales ticket for the user.

Nº	Commits	Files
1	Reviews Working	Review.java ReviewRepository.java ReviewService.java
2	PDF functionality	pdfService.java CheckoutController.java checkout.html
3	Recommendation algorithm	ShoeController.java GeneralController.java OrderShoe.java index.html
4	Add product with size	OrderItemController.java ShoeController.java Single-product.html
5	Register User in Database	GeneralController.java register-user.html

Gabriel Miró-Granada Lluch

Has been responsible for:

• All admin functions such as creating products, editing products, and deleting products.
• The implementation of the coupon system.
• The implementation of an email system that sends the user a discount coupon.
• The admin panel with data and charts.
• User profile charts to view their spending.

Nº	Commits	Files
1	Email implementation	EmailService
2	Admin Pannel Charts	AdminController
3	Edit Product	ShoeController
4	Coupon	CheckOutController
5	Create Product	ShoeController

Elinee Nathalie Freites Muñoz

She taked care of:

• All functions related to login modal, verify account, error banner over modal and log out.
• Confirmation Modal Cart for adding a product with a Default size to general cart.
• Error page with specific message of error.
• All security implementation.
• Mustache customized appareance of icons according to type of access (admin, registered user, unregistered user).
• Screen Diagram
• Class and Templates Diagram

Nº	Commits	Files
1	First steps to security	CustomAuthenticationHandler.java, RepositoryUserDetailsService.java, WebSecurityConfig.java
2	Erase Review Button and cart in register-user	register-user.html, style.css
3	Basic models and methods	Order.java, Review.java, Product.java
4	Product Model and Update of Dependencies on POM	pom.xml, Product.java
5	Change of images, adding form for sign up and fixing access to form	index.html, profile.html, admin-pannel.html

PHASE 2:

Welcome to our presentation on the technological expansion of our shoe store! In this Phase 2, we have enhanced our platform by integrating API REST and Docker, enabling a more scalable, efficient, and modern solution.

API REST

with this implementation, we have significantly improved our system’s flexibility and performance. Key benefits include:

• Seamless Integration: APIs allow our website, mobile apps, and third-party services to connect effortlessly.

• Scalability: RESTful architecture ensures that our system can handle increasing traffic smoothly.

• Faster Response Times: Optimized API calls improve user experience and reduce loading times.

• Better Security: Using authentication protocol JWT ensures secure transactions.

Docker

Revolutionizes our infrastructure by containerizing our application. The main advantages include:

• Portability: Our application runs consistently across different environments (development, testing, production).

• Scalability: Easy deployment and management of multiple instances to handle high demand.

• Resource Efficiency: Containers use fewer resources compared to traditional virtual machines.

• Fast Deployment: New updates can be rolled out quickly with minimal downtime.

• Improved Security: Isolated containers reduce risks and enhance system stability.

How Our System Works Now

• User Interaction: Customers browse and purchase shoes via our website and mobile app.

• API REST Processing: Requests for product details, orders, and payments are processed efficiently.

• Dockerized Deployment: Our services run in Docker containers, ensuring smooth operation across platforms.

• Continuous Updates: New features and fixes are deployed seamlessly without affecting the user experience.

** Shoe Store API - Deployment Guide**

Docker Execution Instructions

Requirements:

• Docker must be installed on your system.
• Docker Compose must be available.

Steps to Run the Application:

1. Clone the repository:

   git clone https://github.com/your-repo/shoe-store-api.git

2. Navigate to the directory where the docker-compose.yml file is located:

   cd shoe-store-api/backend/docker

3. Start the application using Docker Compose:

   docker compose up -d

4. Once the application is running, you can access it at:

   https://localhost:8443/index
   

5. To stop the deployment, execute the following command:

   docker compose down

---

Building the Docker Image

Requirements:

• Docker must be installed on your system.

Steps to Build the Docker Image:

1. Clone the repository:

   git clone https://github.com/your-repo/shoe-store-api.git

2. Navigate to the directory where the create_image.sh file is located:

   cd shoe-store-api/backend/docker

3. Grant execution permissions to the script:

   chmod +x create_image.sh

4. Execute the script to build the Docker image:

   ./create_image.sh

---

Deployment on Virtual Machine

Requirements:

• You must be connected to the correct network or use a VPN if accessing externally.
• Ensure you have downloaded the private key for SSH access to your local system.

Steps to Deploy the Application:

1. Open a terminal and connect to the virtual machine using one of the following commands:

   ssh -i ssh-keys/shoe-store.key vmuser@10.100.139.173
   ssh -i ssh-keys/shoe-store.key vmuser@shoestore.dawgis.etsii.urjc.es

2. Clone the repository to the virtual machine:

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

3. Navigate to the directory where the docker-compose.yml file is located:

   cd webapp15/docker

4. Start the application using Docker Compose:

   docker compose up -d

5. You can access the deployed application at:

   https://appweb15.dawgis.etsii.urjc.es:8443
   

---

Users

• username: Gaby, password: pass (ADMIN)

• username: Gonzalo, password: pass (USER)

API Documentation

• To access the documentation, you must first run the application and search for the following path in your browser:

  https://localhost:8443/swagger-ui/index.html#/
  

• Or if you prefer to view it in JSON format, you must enter the following path in the browser:

  https://localhost:8443/v3/api-docs
  

---

Application Credentials

Role	Username	Password
Admin	Gaby	pass
User	Gonzalo	pass

Thank you for following the deployment steps! 🚀

Updated Class and Templates Diagram (API REST Implementation)

TEAM PARTICIPATION

Elinee Nathalie Freites Muñoz

She taked care of:

• Some basic DTOs and ReviewDTO and ShoeDTO.
• Security Implementation.
• Part of ShoeRestController.java
• Updated Class and Templates Diagrams
• Part of CRUD of Shoe
• README structure

Nº	Commits	Files
1	BasictDTOS to avoid circular relations, two restControllers and more	pom.xml, ShoeRestController.java, BasicShoeDTO.java, BasicShoeSizeStockDTO.java, ReviewDTO.java, ShoeDTO.java, ShoeSizeStockDTO.java, OrderItemService.java, etc
2	Security Implements	pom.xml, CSRFHandlerConfiguration.java, SecurityConfig.java, JwtRequestFilter.java, LoginRequest.java, etc
3	CRUD shoe and shoeController	OrderItems.java, ShoeRestController.java, ReviewService.java, ShoeService.java,
4	Few changes on controllers	GeneralRestController.java, ShoeRestController.java, ShoeController.java,
5	Changing type Shoe, Review to ShoeDTO and ReviewDTO	ShoeRestController.java

Ronald Sebastian Silvera Llimpe

He taked care of:

• Creation of the REST controllers for Shoe, Stock, OrderItem, and OrderShoe.
• Update of the controllers to use DTOs.
• Creation of mappers
• Update of some HTML files (checkout, shop, singleProduct, profile)
• Fixing the functionalities of the HTML files

Nº	Commits	Files
1	Checkout page functioning and generates tickets, reacalculate functioning and delete order item from cart too	checkout.html
2	Many RestControllers, Shop page withModals, addtocart, singleProduct page, profile page with update information and ordershoes with load more shoes and see orderitems	shop.htm
3	api rest OderShoes	OrderShoesRestController.java
4	Shoe controller to DTO	ShoeController.java
5	controllers and services adapted to dots	ShoeService.java

Gabriel Miró-Granada Lluch

• Coupon Rest
• Admin Charts and User charts Rest
• Dto adaptation
• Docker
• User adaptations
• Fix Mappers

Nº	Commits	Files
1	Admin Rest	AdminRestController.java
2	Docker	Dockerfile
3	UserController adaptation	UserController.java
4	Coupon Rest	CouponRestController.java
5	UserImages	GeneralController.java

Alexander Pearson Huaycochea

He taked care of:

• Responsible for some conversions between entities and DTOs
• Responsible for implementing some mappers using the mapstruct tool
• Responsible for modifying some web controllers to use DTOs
• Responsible for implementing some REST APIs such as review and user
• Responsible for creating API documentation
• Responsible for some JWT token and security implementations

Nº	Commits	Files
1	DocumetationOpenApi	pom.xml webSecurityConfig.java
2	BestSelling productus and Recommended Prodcuts in Api Rest	indexRestController.java
3	Implementation of JWT and security enhancements	webSecurityConfig.java AuthResponse.java
4	UserRestController working with images	GlobalExeptionHandler.java UserRestController.java
5	Review Controller and Data Mapping	ReviewRestController.java ReviewMapper.java

PHASE 3:

Diagram Components

Link Diagram

Video

Link video

Ronald Sebastian Silvera Llimpe

He taked care of:

• The creation of everything related to the Shop page
• Implementation of the cart and its modal
• All functionalities related to the Checkout page (recalculations, item removal, validations, etc.)
• Ticket generation during the Checkout process
• Modification of the corresponding HTML files and creation of their components, services, dtos, etc.

Nº	Commits	Files
1	All functionalities of checkout page recalculations, validations, ticket generation,etc	checkout.component.ts
2	Add shoe to order by cart modal	add to cart modal
3	Proces related with check of stock for checkout	Checkout
4	Modals of cart and checkout	modals
5	Shop component with filters	Shop

Gabriel Miró-Granada Lluch

He taked care of:

• Admin pannel
• Docker
• Email/Coupon
• Create Shoe
• Create user
• Bugs
• Fixed Cookies

Nº	Commits	Files
1	Admin pannel	admin-dashboard
2	create shoe	create.component
3	Docker	docker-compose
4	Email-coupon	coupon.component
5	register	register.component

Alexander Pearson Huaycochea

He taked care of:

• Index and its components, including the header component, one of the main components displayed in all views, and features by user type.
• Components such as best sellers and recommended products.
• Single product functionality, adding products to cart.
• Full review functionality, such as displaying, loading more reviews, deleting reviews, creating reviews, etc.
• Errors in the login service and other components.
• Fixing endpoints' mapping

Nº	Commits	Files
1	Recomended Products	RecomendedProducts.component
2	Single Product	ShoeInfo.component
3	Reviews Functionality	Reviews.service
4	Header Component	header.component
5	Login Service	login.service

Elinee Nathalie Freites Muñoz

He taked care of:

• Comunication between frontend and backend (proxy)
• Cookies settings
• Login authentication and logout
• Order history in profile
• User Data in profile
• Responsible for Error page
• Dockerfile

Nº	Commits	Files
1	Cookies	LoginController.java
2	Conection between backend and frontend	LoginService.ts
3	DockerFile	DockerFile
4	ProfileData	profile-Data-Componnet
5	OrderHistory component	order-history-componnet.ts