| Name | URJC Email | GitHub nickname |
|---|---|---|
| Olga Chubinova Bortsova | o.chubinova.2022@alumnos.urjc.es | @chubi0l |
| Marcos García García | m.garciaga.2022@alumnos.urjc.es | @marcosgrc |
| Naroa Martín Simón | n.martins.2022@alumnos.urjc.es | @NaroaMS04 |
| Adrián Muñoz Serrano | a.munozse.2022@alumnos.urjc.es | @adri04ms |
- User
- Product
- Reviews
- Purchase
- Chat
- Image
- Report
- Message
The following diagram shows the system's entities, and how they relate to each other.
- Anonymous : users who have not logged into a registered account. They can access basic functionalities as viewing products, searching products and filter products.
- Registered : users who have logged into a registered account. They can access a wide variety of functionalities like buying, selling, reviewing, saving products they like and also they can message other users.
- Admin : type of user who has control over the platform, having the most extensive permissions. They are also allowed to ban users if they use offensive language, publish explicit content or any other action that could end up in a ban.
| Requirement | Anonymous | Registered | Admin |
|---|---|---|---|
| View products | ☑️ |
☑️ |
☑️ |
| Search product | ☑️ |
☑️ |
☑️ |
| View product details | ☑️ |
☑️ |
☑️ |
| View profile information (registered users) | ☑️ |
☑️ |
☑️ |
| Create reviews | ☑️ |
||
| Create reports | ☑️ |
||
| Save product | ☑️ |
||
| Buy product | ☑️ |
||
| Sell product | ☑️ |
||
| Message seller | ☑️ |
||
| Modify profile information | ☑️ |
||
| Modify product details | ☑️ |
||
| Delete own product | ☑️ |
||
| View graphics | ☑️ |
||
| Delete products (from other users) | ☑️ |
||
| Delete reviews (from other users) | ☑️ |
||
| Delete users | ☑️ |
||
| See and solve reports | ☑️ |
- Email: users will receive emails when their favorite product is sold.
- Google Maps: Users can use this application to locate the seller's address and check proximity.
- Personal sales chart: users will be able to visualize a sales chart of the products they have sold throughout the year.
- Personal purchase chart: users will be able to visualize a buy chart of the products they have bought throughout the year.
- Recommend by best seller: This algorithm will choose the products to be featured in a registered user's home page based on higher-rated seller first.
- User profile: allow users to upload an image to their profile.
- Products photos: allow users to upload images to their products.
This screen will be shown to anyone who accesses the webpage. This image represents the anonymous user's header (depending on the user, the header will change), from which you can either login or sign up. Also, any user have access to view the details of the products. Everybody has the same access to all products, only the header changes.
| User | Admin | Anonymous |
|---|---|---|
 |
 |
 |
All type of users can search products, only the header will change.
| Product exists | No product |
|---|---|
 |
 |
All type of users can search products, only the header will change.
Screen showing information about the product for sale (price, description) and the user selling it. It also offers the possibility to add the product to favorites or chat with the seller. If the user has purchased from this seller before, they will have the additional options to post a review or a report the seller.
Users can add this product to 'favorites' to save this product or can contact the seller to ask questions about the product. Admins can only delete the product. Everybody can see the seller profile throughout the profile photo.
| User | Admin | Anonymous |
|---|---|---|
 |
 |
 |
Depending on whether the user is registered or not, one of the two screens will be displayed. The login screen is shown only to registered users and in case they are not registered, the registration screen will be shown.
If a buyer wants to ask the seller questions about the product, they can chat. The buyer should contact the seller so that the seller can proceed with the sale.
Admin users can manage the reports from this screen.
All type of users can see other profiles. But only registered users and admins will be able to see their own profiles.
| User | Admin | Anonymous |
|---|---|---|
 |
 |
 |
| User | Admin |
|---|---|
 |
 |
Some user (registered) information can be modified. This screen is only shown in the own profile of each registered user (nobody else can see it).
| User | Admin |
|---|---|
 |
 |
Registered users can add products to their favorites, which will be displayed in their favorite section. This screen is only shown in the own profile of each registered user (nobody else can see it).
| No empty | Empty |
|---|---|
 |
 |
If a registered user wants to sell a product, this screen will be shown. The user should fill all sections of the form.
| Normal | Error (no fill) |
|---|---|
 |
 |
Only the owners of the product can edit all the parameters.
All type of users can see the reviews of other users in their profile. Only admins will be able to delete users reviews.
| User | Admin | Anonymous |
|---|---|---|
 |
 |
 |
The products that were sold will be shown in this screen. This screen is only shown in the own profile of each registered user (nobody else can see it).
The purchased products will be shown in this screen. This screen is only shown in the own profile of each registered user (nobody else can see it).
For simplicity, the arrows pointing to the "Favorites," "Sell," and "Chat" pages have been omitted since the navigation bar remains the same. All options under "View Profile," such as history, favorites, and account editing, are private. This means they are only visible from your own account and cannot be accessed when viewing other users' profiles.
- ⚪️ For Anonymous Users
- 🟢 For Registered Users
- 🟠 All type of Users
- 🔵 Admin
- Download this repository
- Check Requirements
- Configure Database
- Configure IDE
- Run Application in the IDE
- Go to https://localhost:8443/
- Java: JDK 21 → Download
- MySQL: v 8.0.28 (Explained in Database Configuration)
- Maven: 4.0.0
- Spring Boot 3.4.2
- IDE (explained in IDE Configuration)
- Download MySQL v.8.0.28
- Select default port (port 3306)
- Create a user with name
rootand password"password"with DB admin as user role - Configure MySQL Server as a Windows Service
- Grant full access to the user
- Create a new Schema named
bytemarketin the server using MySQL Workbench
- We have used Visual Studio Code
- Install Maven and Spring for your IDE
- Email: sara@gmail.com
- Password: Password1234
- Email: pedro@gmail.com
- Password: 12341234
- Email: hugo@gmail.com
- Password: securePass456
- Email: alex@gmail.com
- Password: securePass1234
I was responsible for the filtering of products by categories and the search functionality. Additionally, I added AJAX to load more products on all pages except the main one. I was in charge of adding all the default initialized products. Furthermore, I developed the recommendation algorithm for the main page.
At the beginning of the project, I modified most of the templates to work with Mustache and created several models along with their controllers, service, and repository. Additionally, I fixed permission issues between user types, including editing and viewing profiles, among others.
| Commit | Description |
|---|---|
| 1º | Filter by category and searcher with AJAX refreshing integration |
| 2º | Both navbars and profile views with user restrictions functional |
| 3º | Recommended products |
| 4º | Templates upgraded and models created |
| 5º | Data base initializer products |
| File | Name |
|---|---|
| 1º | DataBaseInitializer |
| 2º | Product Service |
| 3º | Profile Controller |
| 4º | Product Controller |
| 5º | Review Service |
I colaborated in the creation of the model classes and the definition of their dependencies for the database.
I was responsible for everything related to image upload, storage and display, as well as the Image model and its relations, needed for the correct storage of the images, and a way of getting the images from the database for display. I implemented this functionality for product creation and edition of multiple images, and for the user's profile picture. In addition, I developed the functionality for editing the user profile information (except for the map) and the rest of the products attributes.
I developed the charts showing user stats (number of sales and purchases) over time and their style. Beside all this, I also made other changes and additions to the project such as some templates and styling, and other minor changes and fixes.
| Commit | Description |
|---|---|
| 1º | Uploading, storing and showing multiple images for products |
| 2º | Adding and deleting images when editing a product as well as editing the rest of the attributes |
| 3º | Charts showing user stats over time |
| 4º | Editing profile information (except map) and profile pic |
| 5º | Calculating and showing rating in the product detail page and first version of delete account |
| File | Description |
|---|---|
| 1º | Product Controller |
| 2º | Profile Controller |
| 3º | User Service |
| 4º | Product Service |
| 5º | Image Service |
I have been responsible for implementing user registration in the application, ensuring a smooth experience by adding validation for the sign-in form both on the frontend and backend.
Additionally, I have managed users' favorite products, allowing them to add or remove items from their favorites section. I also set up the email notification system to alert users when one of their favorite products is either sold to another user or removed.
I have implemented the functionality to delete products, both from the seller's side and from the administrator’s side. I also implemented the whole account deletion process. This deletion process ensures that the sales and products already sold by the user remain intact, but other elements such as reviews, reports, and available products are removed when the account is deleted.
Furthermore, I have also managed the creation of sales/purchases in the application, ensuring that once a product is sold, it cannot be resold. Lastly, I have implemented the ability for users to view public profiles of other users, further enhancing the social interaction within the platform.
| Commit | Description |
|---|---|
| 1º | User Registration with Validation in Frontend and Backend |
| 2º | Add and delete favorites from users who are not owners profile only |
| 3º | Send mail after favorite product delete |
| 4º | Sell products between users and some template fixes |
| 5º | Public Profile and Account Delete |
| File | Description |
|---|---|
| 1º | Product Controller |
| 2º | User Web Controller |
| 3º | Purchase Service |
| 4º | Product Service |
| 5º | User Service |
I participated in the initial creation of the classes and the definition of their dependencies, as well as developing their respective repositories and a DataBaseInitializer with test objects to facilitate website testing. I implemented the login functionality, profile display, and logout. I also unified all templates related to products to improve design consistency.
On the main screen, I added a "Load More" button with AJAX, allowing products to load progressively in blocks of eight. I developed the selling functionality, enabling users to add products. Additionally, I implemented a chat system between two users to facilitate the purchase of a specific product.
I incorporated the option to report purchased products, with their corresponding display in the administration panel. I also developed the rating system, allowing buyers to rate sellers, with their scores visible both on the user's profile and in a carousel within the product details screen.
I added the option for users to set a location through an interactive map that generates an iframe when clicked, making it visible on both their profile and the product details screen. Finally, I migrated the project from the H2 database to MySQL.
| Commit | Description |
|---|---|
| 1º | newProduct (without images) |
| 2º | create chat (without messages) |
| 3º | Messages in Chats |
| 4º | NewReport and ShowReports (only for admin) |
| 5º | add reviews and show reviews in productDetail and in Profile |
| File | Description |
|---|---|
| 1º | Chat Controller |
| 2º | Product Controller |
| 3º | Message Service |
| 4º | Review Service |
| 5º | Chat Service |
Any user, whether logged in the application or registered or not in the application, will have access to the following actions:
Allows users to log in with their credentials (email and password) to access their account. If the accounts exists and the credentials are correct, they will log in and have access to additional features.
Allows users to create a new account in the application to access personalized features explained later. If there is already an account linked to the mail, it is not allowed to create a second account.
Any user has access and can navigate through the main page of the application. It shows the products for sale from other users of the application. In addition, the products shown at the top are products of the top rated users.
The application offers two alternative methods for searching products. One method uses a search bar, allowing users to type and search for specific products. The other method is category-based, enabling users to browse and find products within a specific category. The search bar is accessible from most pages of the application, while the category-based search is only available on the main page.
Users can view individual products, which includes detailed information such as descriptions, images, pricing, and availability. Additionally, they can read reviews left by previous buyers, offering insights into the quality of the product and the reliability of the seller.
Users can view other registered users profiles, which include details such as the number of sales, purchases, and reviews they have received. They can also browse the products listed by the user and read the reviews left about them, providing a comprehensive view of the user's reputation and offerings.
Registered users can log out of their account at any time by selecting the logout option. This will securely end their session and prevent unauthorized access to their account, ensuring privacy and security. The logout option is accessible from the users profile.
A registered user can mark products as favorites to save items they’re interested in. This allows them to easily access these products later. If a favorite product is sold or deleted, the user will receive an email notification to inform them about the change, keeping them updated on the status of their favorite items.These favorite products can be accessed at any time through the user's profile or the "Favoritos" button included in the header.
Registered users can sell products by filling out a form that allows them to provide detailed information about the product. The form includes fields for product name, description, price, category, and images. Once the product is submitted, it will be listed in the marketplace for other users to browse and purchase.
Registered users can communicate with sellers and buyers through a chat feature. This allows them to ask questions, negotiate prices, and finalize transactions. The chat interface is simple to use and accessible from the product pages or the header.
Users can update their profile to change personal information, such as their name, address, profile picture, or password. This allows for easy management of account details.
Registered users can edit the products they have listed for sale. This feature allows them to update product details such as price, description, images, and category.
Registered users can delete products they no longer want to sell.
Registered users can delete their account. This will also delete all the unsold products, reviews and reports associated with the deleted user.
Logged-in users have access to separate histories for both their purchases and sales. Each history includes graphical representations of sold and purchased products, providing users with a visual overview of their activity. Users can also view the products they’ve purchased or sold. Users can also access detailed information about the products they’ve purchased or sold, allowing them to explore further details as needed.
Once a user has purchased a product from another, they can leave reviews for the seller. This reviews will help other buyers assess the seller's reliability and product quality. The feedback left by buyers will impact the seller's reputation and overall rating.
Users can report a seller directly from the product they bought (in the purchase history) if the product does not meet expectations or if there are any issues with the transaction. These reports are submitted to the admins, who will review the situation and take appropriate action.
Registered users can log out of their account at any time by selecting the logout option. This will securely end their session and prevent unauthorized access to their account, ensuring privacy and security. The logout option is accessible from the users profile.
Admins can manage reports submitted by users regarding other users. They can review, investigate, and take appropriate actions based on the nature of the reports, ensuring the platform remains safe and compliant with its policies.
Admins have the authority to delete other users' accounts when necessary. This action permanently removes the user's profile, including their products, reviews, and associated data, in accordance with platform guidelines and policies.
The algorithm used to display recommended products on the main page works as follows:
-
Seller Ratings Calculation:
First, the algorithm calculates the average rating for each seller based on the reviews they’ve received. If a seller has no ratings, their average rating defaults to 0. -
Rank Products by Recency:
For each seller, the products they own are ranked by their publication date. The algorithm assigns a rank to each product, starting from the most recently published, and limits the ranking to the top 3 products per seller. -
Filter Unsolved Products:
The algorithm filters out products that have already been sold, ensuring that only unsold products are considered for display. -
Sort by Seller Rating and Publication Date:
Once the products are ranked and filtered, they are sorted in descending order by the seller's average rating. If two products have the same rating, they are then sorted by the publication date, with the most recently published products appearing first. -
Final Product List:
The result is a list of products where each seller’s top 3 most recent unsold products are shown, prioritized first by the seller's average rating and then by the publication date.
This approach ensures that users see highly rated products from active sellers while considering the recency of the product listings.
🌀 Phase 3 - Integration of a REST API into the web application, deployment with Docker, and remote deployment.
REST API documentation is automatically generated and is aviable in the following documents:
- OpenAPI Specification (YAML): api-docs.yaml
- HTML Documentation (Viewable in browser): api-docs.html
-
Install Docker
-
Run Docker
-
Clone the Repository:
git clone https://github.com/CodeURJC-DAW-2024-25/webapp04 -
Navigating to the Directory Containing docker-compose.yml:
cd webapp04/Docker/ -
Deploying the Application with Docker Compose:
docker compose up -
The application will be accesible in the following URL: https://localhost:8443
-
To stop the deployment, run the following command:
docker compose down
To build and publish the Docker image for the application, follow these instructions:
-
Install Docker
-
Run Docker
-
Clone the Repository:
git clone https://github.com/CodeURJC-DAW-2024-25/webapp04 -
Navigating to the Directory Containing create_image.sh:
cd webapp04/Docker/ -
Give execution permission to create_image.sh command file:
chmod +x create_image.sh -
Execute the Build Script:
./create_image.sh
To access the Docker image for ByteMarket, visit the following URL: https://hub.docker.com/repository/docker/marcosgrc/webapp04/general. This image contains the latest stable version of ByteMarket application, ready for deployment in a Docker environment.
To deploy the application on the virtual machine provided by the university, follow these steps:
- Ensure you have access to a machine with an internet connection and SSH (Secure Shell) installed. This is standard on most Linux and MacOS systems, and available on Windows through tools like PowerShell or Git Bash.
- You must be connected to the university's network directly or via MyApps to access the virtual machine.
- Make sure you have the private key (
appWeb04.key) downloaded on your local machine and have set the appropriate permissions. Windows users may need to adjust permissions by following the guides provided in these links: Microsoft vscode-remote release issue #1619, Anuj Varma's SSH on Windows guide.
-
Open a terminal on your system and use the following command to connect to the virtual machine.
ssh -i ssh-keys/appWeb04.key vmuser@10.100.139.229Also it can be done with:
ssh -i ssh-keys/appWeb04.key vmuser@appWeb04.dawgis.etsii.urjc.es -
Clone the repository in the virtual machine with the following command:
git clone https://github.com/CodeURJC-DAW-2024-25/webapp04 -
Navigating to the Directory Containing docker-compose.yml:
cd webapp04/Docker/ -
Deploying the Application with Docker Compose:
docker compose up -d -
The application will be accesible in the following URL: https://appweb04.dawgis.etsii.urjc.es:443
-
To stop the deployment, run the following command:
docker compose down
The application is deployed and can be accessed at the following URL: https://appweb04.dawgis.etsii.urjc.es:443
- Email: sara@gmail.com
- Password: Password1234
- Email: pedro@gmail.com
- Password: 12341234
- Email: hugo@gmail.com
- Password: securePass456
- Email: alex@gmail.com
- Password: securePass1234
During the development of the web application, I have worked on Review Service, ensuring its integration with the rest of the system, and implemented rest security configuration to strengthen access control and data protection adding. Additionally, I have documented the API using OpenAPI with SpringDoc, making it easier to understand and use the available endpoints. To facilitate testing and validation, I have created an initial Postman collection for the user and product endpoints. I have also refactored the Review, Reports, and Purchase modules to use DTOs and mappers, ensuring a clear separation between entities and the presentation layer. Furthermore, I have initiated the implementation of the ProductRestController, laying its foundation, and have worked on the UserRestController, structuring its initial endpoints. I have also made minor adjustments to the ProfileController.
| Commit | Description |
|---|---|
| 1º | UserRestController and ProductRestController implemented |
| 2º | Review, Reports and Purchase to DTOs and Mappers implemented |
| 3º | API DOCS |
| 4º | Security |
| 5º | Initial Postman collection of user and product |
| File | Name |
|---|---|
| 1º | Product Rest Controller |
| 2º | Review Service |
| 3º | Security |
| 4º | API DOCS |
| 5º | UserRestController |
During this phase I was responsible for creating the Dockerfile, docker-compose file and the scripts used to create the Docker image and publishing it at Docker Hub. I also set up the deployment of the application on the virtual machine provided by the university, installing the required programs on this machine, clonning this repository there and finally executing it using docker compose up. I was also responsible for creating much of the DTOs needed for the API REST as well as the mappers needed to change from a Domain object to a DTO and vice versa. After this, I also refactored some of the alredy existing services and controllers to make then able to work correctly using the new DTOs, specially the ones related to Products and Images. Finally, I implemented some of the rest controllers needed to make the API REST work correctly, I specially focused on the ones related to Products and Images making and refacotring part of them, as well as the ones related to Reviews and Reports which I completely implemented. I also added the login rest controller needed to authenticate users in the API REST as well as all the security configuration needed to make it work correctly.
| Commit | Description |
|---|---|
| 1º | All ProductRestController fixed and RestLoginController added |
| 2º | Finished Report and Review Rest Controller, changes and fixes in UserRestController and other refactoring changes |
| 3º | Product service and controller refactoring |
| 4º | All working dockerfile and docker-compose, refactoring DataBaseInitializer to load images correctly, fixing native query |
| 5º | Finished all DTOs and adjusted existing ones |
| File | Name |
|---|---|
| 1º | Product Rest Controller |
| 2º | Review and Report Rest Controller |
| 3º | Product Service |
| 4º | Product Controller |
| 5º | Dockerfile |
I have worked on updating the UserService, ProfileController and UserController, ensuring that all interactions within the presentation layer are done through DTOs instead of entities. I have also managed the users' profile images and improved the various user-related DTOs and mappers. I have focused on the implementation of the UserRestController, which allows to perform operations to edit and delete users from the REST API, among other functionalities. In addition, I have worked on the ProductRestController, allowing to filter products through the request based on parameters such as name, category or if they are featured products. Finally, I made sure that all the resources that can be obtained through the REST API return their corresponding Location header when created. In addition, I made specific fixes and improvements to the code and APIRest Urls to optimize its operation and ensure proper handling of API responses.
| Commit | Description |
|---|---|
| 1º | UserRestController Merge |
| 2º | Filter Products |
| 3º | Json body management for editing users profile and minnor fixes |
| 4º | Profile Controller and Profile picture visibility |
| 5º | User Sevice update and ProfileController |
| File | Name |
|---|---|
| 1º | User Rest Controller |
| 2º | Product Rest Controller |
| 3º | User Service |
| 4º | Profile Controller |
| 5º | User Web Controller |
During this phase, my main focus was on everything related to the chat, in addition to resolving and fixing minor general issues on the website. I was responsible for modifying the ChatService, MessageService, and PurchaseService to use DTOs and mappers. Additionally, I updated the ChatController to properly integrate these services, ensuring that messaging and product purchases functioned correctly. I was also responsible for creating the ChatRestController to handle chat-related requests. Furthermore, I created and tested the Postman collection for the ChatRestController to ensure that all requests were functioning correctly, and later consolidated all collections of all the RestControllers into a single file, ensuring a uniform URL structure. Additionally, I updated the class diagram of the project.
| Commit | Description |
|---|---|
| 1º | ChatService and PurchaseService with DTOs |
| 2º | Adapt ChatController to the DTO |
| 3º | Creation of ChatRestController |
| 4º | Fixed ChatRestController with JSON |
| 5º | Requests of purchases in UserRestController |
| File | Name |
|---|---|
| 1º | ChatController |
| 2º | ChatRestController |
| 3º | ChatService |
| 4º | MessageService |
| 5º | PurchaseService |
To set up the development environment for the SPA application using Angular, follow these steps:
Prerequisites
- Node.js: Ensure that Node.js is installed on your system. You can download it from Node.js official website.
- Open a terminal on your system and execute the following commands:
npm install
cd webapp04
cd frontend
ng serve --proxy-config proxy.conf.json
- Run the application with SpringBoot
How to deploy:
ng build --configuration production --base-href="/new/"
cp -r dist/frontend/browser/* ../ByteMarket/backend/src/main/resources/static/new/
The application is deployed and can be accessed at the following URL: https://appweb04.dawgis.etsii.urjc.es:8443/new Also it can be accessed by the following URL: https://localhost:8443/new/
In this project, which involved migrating the application to Angular and adopting SPA architecture, I actively contributed to the development and improvement of the platform. I implemented a new favorites section for users, developed a complete reports management section for administrators, and reinforced security by properly configuring role-based permissions. Throughout the migration, I created and integrated several new components and services, modified existing routes to adapt to the new structure, and corrected issues related to user reviews. Additionally, I configured the Dockerfile to optimize the application's deployment process. These contributions helped improve the overall functionality, scalability, and user experience of the newly Angular-based SPA.
| Commit | Description |
|---|---|
| 1º | Favorites section and functionality |
| 2º | Reports section for admin |
| 3º | Security and permissions between roles |
| 4º | Reviews fixed |
| 5º | Dockerfile |
| File | Name |
|---|---|
| 1º | Report component |
| 2º | Profile component |
| 3º | Profile reviews component |
| 4º | Reports component |
| 5º | Dockerfile |
During this final phase of the project I was responsible for initializing the angular project at first. I implemented the product detail page and its components, which includes the product information, reviews, and report sections and all the necessary logic. I also worked on the home page and its components, including the header and product list. Additionally, I implemented the pages and logic for user login and sign-in, including frontend form validation. I also made changes to the user and product services to support these functionalities. Furthermore, I worked on the edit and delete product features, ensuring that product images were handled correctly and that reviews were reloaded properly after any changes. Finally, I updated the docker image and deployed the application on the virtual machine provided by the university, ensuring that everything was working correctly.
| Commit | Description |
|---|---|
| 1º | HomePage and its necessary components implemented, header component, user and product services started, changes in config and proxy for dev |
| 2º | Review and report service, added review form and list, and report form in the product detail page and implemented all the necessary logic |
| 3º | Login and signin logic and screens, frontend form validation |
| 4º | Edit and delete product and product images logic, API request in product service and reload reviews correctly |
| 5º | Product information component in the product detail page |
| File | Name |
|---|---|
| 1º | New Product Component |
| 2º | Product Service |
| 3º | Review List Component |
| 4º | Review and Report Service |
| 5º | Profile Preview Component |
I have been primarily responsible for the development of the user profile section. This includes the creation of the main profile screen, as well as the display of the favorites, purchase history and sales sections. I also managed all navigation related to the profile, ensuring proper access for both registered and anonymous users. In addition, I implemented the profile editing functionality, allowing users to modify their data and update their information efficiently. I integrated interactive maps in the edit form to select locations, and I took care of the visualization of these maps in the different screens associated to each user's profile. Within the history section, I developed the data mapping to associate purchases with their respective products and designed a graphical representation that allows a clear, intuitive and dynamic visualization of this information. Finally, I also implemented the logout and account deletion functionalities, both for the deletion of the user account itself and for its deletion by an administrator.
| Commit | Description |
|---|---|
| 1º | Basic User Profile and Profile and Chat images fix |
| 2º | Logout, Favorites visualitation and basic EditProfile Form |
| 3º | User iframe update and rendering management |
| 4º | Sale and purchase history grafic |
| 5º | Delete users account from own profile or admin |
| File | Name |
|---|---|
| 1º | Profile Component |
| 2º | Edit-Profile Component |
| 3º | User-Stats-Chart Component |
| 4º | Map Service |
| 5º | Navbar Component |
I've been involved in the creation of various components for the SPA website, including the implementation of the navigation bar on the main page, which allows making requests to fetch products from different categories and display them using a reusable component for listing products. This component is used on screens such as favorite products, user products, and the sales and purchase history. Additionally, I developed a component for managing chats, including the logic for sending and receiving messages, as well as another for confirming sales. I also designed a product creation form with the corresponding validations. I implemented the search bar in the header, which allows users to search for products or redirects them to the main screen. I also fixed minor issues, mostly related to route redirection within the application. Finally, I created the class diagram with the SPA templates, reflecting the relationship between the components.
| Commit | Description |
|---|---|
| 1º | navbar with categories in the home-page |
| 2º | view chats and messages |
| 3º | send messages |
| 4º | create a new product |
| 5º | sell product with a confirmation screen |
| File | Name |
|---|---|
| 1º | chat.service |
| 2º | chat.component |
| 3º | navbar.component |
| 4º | new-product.component |
| 5º | product-list.component |
During this last phase for the Distributed Systems project, we have worked on the deployment of the application in a distributed way. We were provided with 2 virtual machines from the universitiy, one of the machines will be running the web application and the other one will be running the database, both of them will run in a docker container. The database is accessible from the web application. The web application is accessible from any browser using the following URL: https://193.147.60.44:8443, to access it you need to be sure that you are connected to the university network.
To deploy the application in a distributed way, we need to follow the following steps:
- Connnect to the virtual machine using SSH:
# Machine 1
ssh -i ssh-keys/sidi04.key vmuser@193.147.60.44
# Machine 2
ssh -t -i ssh-keys/sidi04.key vmuser@193.147.60.44 ssh sidi04-2
-
Install Docker in both machines in case it is not installed, follow the instructions from: https://docs.docker.com/engine/install/ubuntu/
-
Given that the necessary images are already in the Docker Hub, we can execute the following commands to run the application: First we need to run the database container at the second machine:
sudo docker run -e MYSQL_ROOT_PASSWORD=password -e MYSQL_DATABASE=bytemarket -p 3306:3306 -d -v ./db_data:/var/lib/mysql mysql:9.2
Then we need to run the web application container at the first machine:
sudo docker run -e SPRING_DATASOURCE_URL=jdbc:mysql://192.168.110.154/bytemarket -e SPRING_DATASOURCE_USERNAME=root -e SPRING_DATASOURCE_PASSWORD=password -e SPRING_JPA_HIBERNATE_DDL_AUTO=update -p 8443:8443 -d marcosgrc/webapp04:1.0.0
Once both containers are running the app will be working and we can access the web application at: https://193.147.60.44:8443
- In case we want to stop the containers we can use the following commands in both machines:
# To check the container id
sudo docker ps
# To stop the container
sudo docker stop <container_id>
If we want to remove the container, images and volumes we can use the following commands:
# Remove all containers
docker rm $(docker ps -aq)
# Remove all images
docker rmi $(docker images -q)
# Remove all volumes that are not in use
docker volume prune -f
You need to have Docker installed in your machine. To create the images and upload them to Docker Hub, we need to follow the following steps:
- If you don't have the project repository, clone it from GitHub:
git clone https://github.com/CodeURJC-DAW-2024-25/webapp04
- Navigate to the Docker folder:
cd webapp04/SD_Docker
- Build the webapp image executing this script:
./create_image.sh
- Upload the image to Docker Hub with the following script:
./publish_image.sh
To run this commands you need to have Docker and Docker compose installed in your machine. To run the application using Docker compose, we need to follow the following steps:
- Given that you already have the project repository, navigate to the Docker folder:
cd webapp04/SD_Docker
- Run docker compose using the following command:
docker compose -f docker-compose.prod.yml up -d
In case we want to run it using the docker compose local file:
docker compose -f docker-compose.local.yml up -d
In both cases the application is accessible at: https://localhost:8443
- To stop the containers we can use the following command:
docker compose -f docker-compose.prod.yml down
In case we want to stop it using the docker compose local file:
docker compose -f docker-compose.local.yml down
To create the buildpacks image we need to follow the following steps:
- If you don't have the project repository, clone it from GitHub:
git clone https://github.com/CodeURJC-DAW-2024-25/webapp04
- Navigate to the Docker folder:
cd webapp04/ByteMarket/backend
- Build the image using the following command:
# Buildpacks command
mvn spring-boot:build-image -DskipTests
# In case of not having maven globally installed you may use a command similar to this:
./mvnw spring-boot:build-image -DskipTests