https://youtu.be/EwkY_QF8p4E

• Phase 0
  • Members
  • Entities
  • Users
  • User permissions
  • Pictures
  • Charts
  • Complementary Technology
  • Algorithm

• User
• Game
• Game Review
• Purchase

• Anonymous: This type of users will be able to see the games of the sore. However, they will not be able to purchase games and he will not receive recomended games.

• Registered: They will be able to purchase games, change user profile picture and review purchased games.

• Admin: They will be able to add/delete and edit games. They will also be able to delete and edit reviews of the games and crete new game companies.

Users can write an assessment about a film, having also to rate it. They can modify their assessments at any moment.

The entity ‘Users’ may have one profile picture. The entity 'game company' will have a logo picture. The entity 'game' will have title picture and in game images.

There will be a bar chart representing the user stars of the games.

The web page will send emails to users notifying the purchase they have done.

Search films by title. Furthermore, the application will show games recomendation based on user prefferences.

Initial menu: This is the main page where the user can view his cart, proceed to checkout and view the available games, and can enter their respective pages to view the specifications, screenshots of the game and its features.

Register: Screen that will allow new users to sing up in KeyWhale.

Game: Screen that will display information, images and features about the game. Also, at the bottom of the page reviews of the game will appear.

Search: Screen that will display the games that contains the words that you searched.

Cart: Page that shows all the games in the cart showing them, their price, and the total price of the cart.

Checkout: Page containing a form for the billing information of the user who is going to buy on the site. Unregistered users should check the checkbox for register a new user.

Initial menu: This is the main page where the user can enter his profile, view his cart, proceed to checkout and view the available games, and can enter their respective pages to view the specifications, screenshots of the game and its features.

Login: Screen that will allow registered users to log in giving their email and password. All users have access to this screen even though only registered users will be able to end this process.

Register: Screen that will allow new users to sing up in KeyWhale.

Profile: Screen that will display information, profile logo and number of games purchased about the profile.

Game: Screen that will display information, images and features about the game. Also, at the bottom of the page reviews of the game will appear.

Search: Screen that will display the games that contains the words that you searched.

Cart: Page that shows all the games in the cart showing them, their price, and the total price of the cart.

Checkout: Page containing a form for the billing information of the user who is going to buy on the site.

Initial menu: This is the main page where the admin can enter his profile, view the available games, and add or delete more games, enter their respective pages to view or change the specifications, screenshots of the game and its features.

Profile: Screen that will display information and profile logo.

Game: Screen that will display information, images and features about the game. Also, at the bottom of the page reviews of the game will appear. The admin have control of all the page so he can change any info of the game, delete reviews that are out of context, etc.

Search: Screen that will display the games that contains the words that you searched.

GameForm: Screen that will allow admins to add a new game with all its features in KeyWhale.

• Blue = Unregistered users.
• Yellow = Registered users.
• Green = Admins.

Initial menu: This is the main page where a user can log in, register if he/she was not already registered, or without doing any of them, see the games but without the possibility to buy them.

Checkout: Page containing a form for the billing information of the user who is going to buy on the site.

Admin Menu: This is the main admin page, which an admin will access when logged in.

Game Form: Page containing a form to create games.

Control Panel: On this page the admin can modify or delete any game he selects.

• To start you must download the code from the repository in github, to do this you must go to the link: CodeURJC-DAW-2022-23 /webapp5, once there, you will have to click on <> Code and click on Download ZIP.

• In order to run it we use Visual Studio, so once the zip is downloaded and unzipped we open it with Visual Studio. To be able to download it, we looked for in Internet Visual Studio and we get in the main page, if we lowered in the page a little we will see the different versions, we will select the version of Visual Studio Code, if when making click the download does not begin, we began it making click in Downoad. Once it is downloaded we install it in our device.

• Before we can run it we need the version of Maven: 4.0.0, the version of Spring Boot 2.6.3, the version of Java 17 and the version of MySQL 8.0.22. Also if we are going to run it in Visual Studio we will need different extensions:

• Once this is done we can run it but for this we must first download Docker Desktop for this we look for this on the internet and access, on this page click on download and ready.

• Now, we can start Docker Desktop, and once started we go to Visual Studio Code, from here we look almost at the bottom of a file called dockerCommand, copy its contents and paste it into a terminal, this will connect us to the port where the web page and the database of the application. Now we click on the Spring Boot Dasboardy icon and then on Run.

Brais had done the data base, starter security, connection with the data base, login, register, sample data of the db, models, edit profile, see profile, game page, add games to cart, cart page, add review, review visualization, intial repositories and initial services.

Sergio has created some features of the Administrator Control Panel, such as deleting the game from the website. The functionality of being able to remove your own comment from a game.

Iker has created some funcionalities for the administrator, such as create a new game and edit a game from the website. He also participates in the recommendation algorythm doing the controller and the frontend part.

Sergio has conect the back wich the front. This includes the grafics, games of database and algorithm.

Javier has mainly created the checkout functionalities and also the loading plus games and reviews.

email: [email protected] - Password: 12345678.

Username: [email protected] - Password: 12345678.

https://github.com/CodeURJC-DAW-2022-23/webapp5/blob/main/code/backend/api-docs/api-docs.html

https://rawcdn.githack.com/CodeURJC-DAW-2022-23/webapp5/a64e3b3b5d8f8c6f92db4c878d4a8b2ae7100b1e/code/backend/api-docs/api-docs.html

In order to execute the dockerized app you should follow the next steps:

1. Install Docker Desktop or Docker in linux.
2. Open any shell of type "bash".
3. Clone this repository using the command "git clone https://github.com/CodeURJC-DAW-2022-23/webapp5.git".
4. Execute the command cd/webapp5/code/docker.
5. Execute the command "docker-compose up" on the shell.
6. When the app is running, open any browser and search "https://localhost:8443".

In order to create the docker image you should follow the next steps:

1. Install Docker Desktop or Docker in linux.
2. Create and account on Dockerhub or connect to your account.
3. Open any shell of type "bash".
4. Clone this repository using the command "git clone https://github.com/CodeURJC-DAW-2022-23/webapp5.git".
5. Execute the command cd/webapp5/code/docker.
6. Execute the command "./create_image.sh DockerhubUsername/ImageName".

Brais has created the postman collection, everything necesary to dockerize the application and the security of the Api Rest.

Sergio has created some of the methods of the games in the rest api, also some of the user and the review.

Iker has created some method of the review rest api and the game.

Sergio has documented the application with open-api.

Javier has created the class diagram updated with rest api and necesary methods for the user rest api.

1. Install Docker Desktop.
2. Create and account on Dockerhub.
3. Open any shell of type "bash".
4. Clone this repository using the command "git clone https://github.com/CodeURJC-DAW-2022-23/webapp5.git".
5. Use command "cd webapp5/code/docker" .
6. Execute the command "docker-compose up" on the shell.
7. Open another shell in the root of the project.
8. Execute the command "cd code/frontend".
9. Execute the command "npm install".
10. Execute the command "npm start".

SPA: "https://10.100.139.196:8443/new/" MUSTACHE: "https://10.100.139.196:8443/"

1. Connect to the machine with the command: "ssh -i appWeb-05 [email protected]".
2. We have to install docker and docker-compose following the instructions at the link: "https://docs.docker.com/engine/install/ubuntu/".
3. Clone the repository with the command "git clone https://github.com/CodeURJC-DAW-2022-23/webapp5.git".
4. Execute the command "cd webapp5/code/docker".
5. Execute the command "sudo docker-compose up -d".
6. Open the deployment links in the browser.

Brais has done the dockerfile to deploy the angular app, in the angular project he seted the project up and did the register and the navbar. He also implemented the register, the app routing, the security and the component to edit the user.

Sergio Octavio has made the Control Panel and Search with Angular.

Iker has made the edit-game and add-game front with Angular.

Sergio has made the carrusel the cart and video.

Javier has made the navbar cart improvements, the checkout. He also collaborated in the edit game and made the class diagram.