Anime Shop

Developer team 👽

Name	E-mail	GitHub
David Amor Antolín	d.amora@alumnos.urjc.es	https://github.com/Almendron100
Carlos Francisco Corraliza	c.franciscoc@alumnos.urjc.es	https://github.com/CarlosFco
Ramón Barrabes Parra	r.barrabes.2016@alumnos.urjc.es	https://github.com/ram2701
Enrique Márquez Jiménez	e.marquezj.2017@alumnos.urjc.es	https://github.com/Kikemaji
Carlos González Valtierra	c.gonzalezva.2017@alumnos.urjc.es	https://github.com/Carlos237

Entities 👻

• User
• Product
• Order
• Blog

Advanced functionality (ideas) 🚀

• Sales based on product's stock
• Custom recommendations based on previous purchases

User types 👤 👷 👮

• Annonymous user: View products, read the blog
• Registered user: All permission of Anonymous user.Place orders
• Admin user: All permission of Registeted user. Add/Remove products, add/delete blog entries

Tools 🔨

• PhotoShop
• Visual Studio Code
• Github Desktop

UML diagram

Entities Diagram

Navigation Diagram

Classes Diagram

Phase 2

Name	Most significant Commit 1	Most significant Commit 2	Most significant Commit 3	Most significant Commit 4	Most significant Commit 5
David Amor Antolín	https://git.io/JvErG	https://git.io/JvErZ	https://git.io/JvErn	https://git.io/JvErc	https://git.io/JvErC
Carlos Francisco Corraliza	https://git.io/JvEr1	https://git.io/JvErM	https://git.io/JvErS	https://git.io/JvEr9	https://git.io/JvErH
Ramón Barrabes Parra	https://git.io/JvEr7	https://git.io/JvEr5	https://git.io/JvErd	https://git.io/JvErb	https://git.io/JvErN
Enrique Márquez Jiménez	https://git.io/JvErA	https://git.io/JvErx	https://git.io/JvErp	https://git.io/JvErh	https://git.io/JvEoe
Carlos González Valtierra

Name	File 1	File 2	File 3	File 4	File 5
David Amor Antolín	ProductController	OrderController	BlogController	ProductRepository	OrderService
Carlos Francisco Corraliza	OrderMetrics	Blog	BlogController	UserController	OrderController
Ramón Barrabes Parra	WebController	WebSecurityConfig	CustomErrorController	DatabaseInitializer	LoginController
Enrique Márquez Jiménez	DatabaseInitializer	OrderController	OrderService	ProductController	Order
Carlos González Valtierra

Graphics

Money spent per order and average

Screenshots 📷

• Home

In this screen we can see the home of the page, which includes the recommendations based in your last purchases.

• Products

Here we can choose what products we want to buy.

• Product Details

When we choose a product, here we can see the details.

• Cart

Here you can see all the products that have been added to the cart and are waiting to be purchased.

• Checkout

If you are not logged you have to do it before finishing the checkout.

• Checkout when logged

If logged you can fill all the information and see the details of the order.

• Confirmation

Detailed description of the order.

• Blog

When a new products come to the shop there will be a post about it here.

• Blog details

Detailed information about the new product.

• Login

If you have an account, use this page to log in.

• Register

If you don't have an account here you can register.

• My Profile

All the information about your account.

• Edit Profile

Use this screen if you want to edit some of your profile information.

• Admin Profile(Graph)

The admin can use this screen to see information about the website.

Development Environment

Developing in Spring Boot

It's recomended to use an IDE with maven and with Spring compatibility. The IDE used in this project is STS(Spring Tool Suite 4). To run the application the port that we use is 8443, so the URL will be: https://localhost:8443 A MySQL database is needed so you have to create a database in a client with MySQL and Apache (We use XAMPP, more info at: https://www.apachefriends.org/es/index.html)

Phase 3

Build the application image with Docker

To buid the image of the application you need, first of all, to use the create_image.bat script located in the docker folder, this will generate the .jar file needed to build the image. Then the script will create the image.

Otherwise, if you have maven installed you need to run:

mvn package or mvn clean install, this will generate the .jar file in target folder in backend directory

Run the application using Docker Compose

You can run the application using Docker Compose. For that, you need to go to the docker folder and run the following command:

docker-compose up This will download the images needed, mysql and the app from Docker Hub. The application will run in the following URL: https://127.0.0.1:8080.

Postman documentation

We made a documentation file with all the Postman requests you can use with our App. You can check it in the next URL: API Document

Classes diagram

Name	Most significant Commit 1	Most significant Commit 2	Most significant Commit 3	Most significant Commit 4	Most significant Commit 5
David Amor Antolín	https://git.io/JvoP3	https://git.io/JvoPs	https://git.io/JvoPn	https://git.io/JvoPC	https://git.io/JvoPW
Carlos Francisco Corraliza	https://git.io/JvoXY	https://git.io/JvoXZ	https://git.io/JvoXc	https://git.io/JvoXC	https://git.io/JvoXR
Ramón Barrabes Parra	https://git.io/JvoyX	https://git.io/JvoyM	https://git.io/JvoyS	https://git.io/JvoyH	https://git.io/JvoyN
Enrique Márquez Jiménez	https://git.io/Jvod3	https://git.io/Jvods	https://git.io/JvodG	https://git.io/JvodZ	https://git.io/Jvodn
Carlos González Valtierra	https://git.io/JvoNj

Name	File 1	File 2	File 3	File 4	File 5
David Amor Antolín	ProductRestController	OrderRestController	UserRestController	API.md	apiV2.postman_collection.json
Carlos Francisco Corraliza	OrderRestController	ProductRestController	ProductService	ProductController	apiV2.postman_collection.json
Ramón Barrabes Parra	Dockerfile	create_image.bat	docker-compose	animeshop-0.0.1-SNAPSHOT.jar	UserRestController
Enrique Márquez Jiménez	BlogRestController	OrderRestController	API.md	README.md
Carlos González Valtierra	README.md

Phase 4

Video 📹

Video corto demostración
Video largo detallado

Instalation process

First download node.js from https://node.org/ , select the recommended one for windows. Then go to the cmd. User the commands: npm install -g wait some time and then do: npm install -g @angular/cli after that, angular-cli is ready for windows.

To execute this project, clone this repository, open it with visual studio, open the terminal and write the commands: npm install ng serve after using ng serve the application will be executed and can be opened in your browser.

Run angular with Docker

For this, you will need to go to the file create_image.ps1 and execute its content in the Windows Powershell. This will download angular-cli and node using a container, then it will move the files created in the dist directory to the new directory located in \backend\src\main\resources\static. In order to access the angular application you need to put the following URL: https://127.0.0.1:8080/new/.

Classes and templates diagram

Name	Most significant Commit 1	Most significant Commit 2	Most significant Commit 3	Most significant Commit 4	Most significant Commit 5
David Amor Antolín	https://git.io/JfUVp	https://git.io/JfUVj	https://git.io/JfUwe	https://git.io/JfUwf	https://git.io/JfUwJ
Carlos Francisco Corraliza	https://git.io/JfUVH	https://git.io/JfUV7	https://git.io/JfUV5	https://git.io/JfUVF	https://git.io/JfUVb
Ramón Barrabes Parra	https://git.io/JfTeL	https://git.io/JfTeq	https://git.io/JfTeY	https://git.io/JfTeO	https://git.io/JfTeZ
Enrique Márquez Jiménez	https://github.com/CodeURJC-DAW-2019-20/webapp6/commit/7196e4c0ea5c8ea2df42d83fe4b84c7251d8b774	https://github.com/CodeURJC-DAW-2019-20/webapp6/commit/0393641218124076b35576f33d8698903d06df22	https://github.com/CodeURJC-DAW-2019-20/webapp6/commit/044aa558c70088a363b242d6d75388980a6e1d28	https://github.com/CodeURJC-DAW-2019-20/webapp6/commit/c480d1d23d53619d5638b483ff27daa86e33edcd	https://github.com/CodeURJC-DAW-2019-20/webapp6/commit/7aa9768c4d4182312df105d89282b93d3eb2fc25
Carlos González Valtierra

Name	File 1	File 2	File 3	File 4	File 5
David Amor Antolín	product.component.ts	product.service.ts	product.component.html	checkout.component.ts	confirmation.component.ts
Carlos Francisco Corraliza	blog.component.ts	MetricsRestController.java	userPage.component.ts	singleBlog.component.ts	order.service.ts
Ramón Barrabes Parra	create_image.ps1	login.component.ts	product.component.ts	product.service.ts	singleProduct.component.ts
Enrique Márquez Jiménez	order.component.html	chechout.component.ts	order.service.ts	order.component.ts	confirmation.component.ts
Carlos González Valtierra