MSTORE is a website created with the objective that customers can sell or buy technological devices.
We are the group number 10 of the subject Web Application Development. The team consists of 5 members:
| NAME | Github Username | |
|---|---|---|
| Daniel Ruiz Bustos | d.ruizb.2017@alumnos.urjc.es | druizb1999 |
| Marcos Ruiz Muñoz | m.ruizmu.2017@alumnos.urjc.es | Markete17 |
| Jose Luis Sierra Benito | jl.sierra.2017@alumnos.urjc.es | Jos3lu |
| Noelia Martínez Sánchez | n.martinezs.2017@alumnos.urjc.es | nmartinezs2017 |
| Diego Montoto Ramos | d.montoto.2017@alumnos.urjc.es | Dimonra13 |
- Posts
- User
- Brand
- Rating
- Visitors
- Registered Users
- Administrators
Registered users will have more permissions and functionalities than visiting users. Only registered users can access their profile information, make purchases and sell products. Administrators have their own page to delete or edit posts.
- User profile picture
- Products image
- Brands image
There are bar charts in the product sales ratings of the selling users.
Sending mail to users.
A system of personalized offers and recommendations based on the products that the user has seen and visiting.
This capture represents the main page of MSTORE. It consists of a search engine at the top so that the user can find their products more easily. In addition, the menu of the website formed by different sections is shown: Home, Shop, Sell product and User account. The most outstanding products that are being sold and items that are on sale will also appear. The predominant brands of the market are shown at the bottom. You can also see three columns that show the articles Best Seller, New Arrivals and Top Rated. The last part represented with black background, will be available in all windows and its functionality is that the user can subscribe to offers or see the departments and brands that are treated.
This window is a drop-down located on all MSTORE pages. It allows the user to be able to log in at any time. It consists of two fields: email and password, although it also gives the possibility to log in through social networks. In the case of not having an account, the registration option will be available. The option to create an account consists of four fields: full name, email address, password, confirm password .
This window shows the available items. Each product is represented with an image, a brief description and the price. Through categories and filters located on the left side, products can be found more efficiently. In addition, there is the possibility of sorting by popularity and how to adjust the number of products per page.
When the item is selected in the Shop section, the images, details, features, specifications are shown in detail . In addition, the rating of the product is shown next to the name of the seller. You can select the quantity you want to buy and then add them to the shopping cart. At the bottom, recommendations of articles similar to the selected one will be displayed.
To sell and publish a product, you will have to fill in the fields related to pick up address and product information . On the left side it shows the profile picture next to the contact information. In addition, it gives the possibility to modify profile data.
The windows of the User Account section are formed by the same format pattern. They are represented by a photo of the user along with their contact information. Access to your purchase tickets and purchase history information. In addition, there is an option to log out at any time.
It will be possible to edit all profile information except the registration email. In addition, it will enable or disable receiving offers from the website.
Account Addresses: Like editing profile information, you can modify the address data associated with the account. You can also enable or disable Same as Contact Address.
It is a drop-down window where the selected products are found while browsing the page. The name, image and quantity of each product and the total price of each product are displayed. In the lower part the total of the purchase is shown and will give the possibility of adding more items to the cart or checkout.
The screen represents the information of the seller. A photo of the user's profile is displayed next to their contact information. It will have associated a graph with the ratings that the seller has had. At the bottom there will be links to your other products.
The Checkout section will consist of five stages: Shopping cart, Your details, Shipping, Payment, Final review. In each stage you have to fill in some mandatory fields or select different options. At the top it will indicate the stages that have been completed and the stages that are still to be completed. If necessary, you can go from one stage to another to modify inserted data. The total amount of money to pay and the opportunity to enter a promotion code will appear on the right side. Once the purchase is successful, a new window will appear with an informative message with the order ID and also to be able to see the status and tracking of the order.
The navigation diagram has been updated, as well as the screenshots of the main pages of the application
These are the dependencies that have been added to the pom.xml:
- Spring Security: Spring Security is a framework that focuses on providing both authentication and authorization to Java applications. Source
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
- Spring Data JPA: Spring Data JPA provides repository support for the Java Persistence API (JPA). It eases development of applications that need to access JPA data sources. Source
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
- Mustache: It's a logic-less template engine for creating dynamic content, which is popular due to its simplicity. If you want to discover the basics, check our introduction to Mustache article. Source
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-mustache</artifactId>
</dependency>
- MySQL:
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
- Spring-Boot-Devtools: Spring Boot includes an additional set of tools that can make the application development experience a little more pleasant. The spring-boot-devtools module can be included in any project to provide additional development-time features. Source
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
</dependency>
-
Clone this Git repository
-
Import the project:
-
Run the application:
-
Now the application is available at https://localhost:8443/
- Clone this Git repository
- Open the folder in which you cloned the repository
- Configure the database (for more information you should visit the next section)
- To run the application, press the "Run As ..." button and wait for the icon to turn green.
- Now the application is available at https://localhost:8443/
- For everything to work correctly you should install the following VSCode extensions: "Maven for Java", "MySQL", "Spring Boot Extension Pack", "Spring Boot Tools".
- Start MySQL Workbench
- Connect to the database with Database> Connect to database
Database access credentials:
Username: root
Password: pass
-
Create the "mstore" table by running the following query
-
Import the files contained in the "databasedata \ dbdata" directory
-
Once everything has been imported, you will be finished.
Admin user:
Username: admin@gmail.com
Password: admin
User:
Username: pepita@gmail.com
Password: pepito
- MStore / backend: The main folder, which contains the application code.
- MStore / backend / src / main / resources: It contains the HTML, CSS and JavaScript documents that have been used for the Front End of the web.
- MStore / backend / src / main / java / store / main: Contains the web backend code.
- MStore / backend / src / main / java / store / main / controller: Contains the application controllers.
- MStore / backend / src / main / java / store / main / database: It contains the entities with their corresponding repositories.
- MStore / backend / src / main / java / store / main / security: It contains the file in which the web security has been configured (user permissions).
- MStore / backend / src / main / java / store / main / service: Folder that contains some services that have been implemented
| Plugin | Description | 5 most important commits | 5 most relevant files |
|---|---|---|---|
| Daniel Ruiz Bustos | In this phase, I have made the shop single product page and the cart page. I've also made the cart and single product controllers including the images view and the add and remove from cart functionalities. Additionally i did add the rating functionaliy to the product page and some example data. |
|
|
| Marcos Ruiz Muñoz | In this phase, I have made the Home page, the navigation of the page updating the header and the links. I have implemented the advanced algorithm of recommendations. Also the functionality of buying a product, added more data in database and made the Readme diagrams. I have helped to make the Cart page. |
|
|
| Jose Luis Sierra Benito | In this phase, I've implemented everything related to the administrator (java and html) and the security (login, register, ...) except CSRF. I've contributed to do the the search box of the header and i have also done the payment page. |
|
|
| Noelia Martínez Sánchez | I have implemented the entire "Shop" page with the methods of filtering, paging with JavaScript, etc. I have also implemented complementary technology, security with CSRF, drafted the README, among other things. |
|
|
| Diego Montoto Ramos | In this phase, I have implemented the database, the image service necessary to upload images, the page to edit the user profile, the page tu register new products, the rating system and the star graphic. Also helped with the menu search box. |
|
To create the image, we have provided the file script.bat. Don't forget to edit it and change {{path}} for the corresponding absolute path. You should also change "nmartinezs2017/webapp10" to the name of the image you want.
Go to the "backend / docker" directory to execute the following command:
docker-compose up
| Plugin | Description | 5 most important commits | 5 most relevant files |
|---|---|---|---|
| Daniel Ruiz Bustos | In this phase, I have made the Get methods for every class except the post one and I have made all the methods for the cart, get post, put and delete, I also created example cases to try the applocation on. |
|
|
| Marcos Ruiz Muñoz | In this phase I have done the delete methods in the REST API. Also, I have carried out the image management and the recommendations algorithm in the REST API. In addition, I have contributed to the writing of README.md and API.md |
|
|
| Jose Luis Sierra Benito | In this phase, I have implemented the put methods of the API REST. I have also done the part related to the security and login/logout. |
|
|
| Noelia Martínez Sánchez | In this phase, I have implemented the GET POST method with filtering and search criteria. In addition, I have done the dockerization. |
|
|
| Diego Montoto Ramos | In this phase, I have implemented the POST method for user, rating and post and the GET method for the graphics. I have also added the JsonView in the database, participated in the API login system and prepare the app for jar building. |
|
First of all we have to install node.js (download it here). One you have installed it, go to the terminal and execute the following commands:
- Install the Angular CLI globally with the command: npm install -g @angular/cli
- Go to the workspace folder "frontend" (cd ../MStore/frontend)
- To download the modules use "npm install"
- Use "npm start"
| Plugin | Description | 5 most important commits | 5 most relevant files |
|---|---|---|---|
| Daniel Ruiz Bustos | In this phase, I have implemented the cart functionality alongside the "post" page, part of the footer and the error handling in angular. |
|
|
| Marcos Ruiz Muñoz | In this phase, I have been in charge of making the main page, advanced algorithm for recommendations, header, final review and a reusable component to view posts. Also, I have updated the Readme including class diagram. |
|
|
| Jose Luis Sierra Benito | In this phase, I've done sign in/up, payment, complete & admin page. I have implemented the security/restrictions, the funcionality of the search box, stepper (in the payment & final review pages), header & footer. |
|
|
| Noelia Martínez Sánchez | In this phase, I have fully implemented the "Shop" page with all its filters and search methods. I have also done the Docker part. |
|
|
| Diego Montoto Ramos | In this phase, I have implemented the image service, the graphics service, the update profile page and the sell product page. I have alse updated the backend for CORS policy and modified the pom.xml for angular deployment in https://localhost:8443/new. |
|