- Fase 0
- Fase 1
- Fase 2
- Fase 3
| Name | Github user | |
|---|---|---|
| Alejandro Checa Folguera | a.checa.2016@alumnos.urjc.es | AlexCh98 |
| Iván Martín Sanz | i.martins.2016@alumnos.urjc.es | i100van |
| José Luis Lavado Sánchez | jl.lavado.2016@alumnos.urjc.es | lujoselu98 |
| Lucas Gómez Torres | l.gomezt.2016@alumnos.urjc.es | LucasGomezTorres |
| Daniel Carmona Pedrajas | d.carmonape@alumnos.urjc.es | Dacarpe03 |
https://trello.com/b/FH0qaXPJ/daw
Users, teams, tournament, game. Relations:
- Games are played by teams.
- Tournament are composed by teams.
- Teams are composed by users.
- Anonymous user:Read permission over rankings, team statistics, game's calendar and other info.
- Loged user: All permission of Anonymous user. Write pemission over tournament registration to join them. Write permisions over his personal and login data and his team information data.
- Admin user: Read permission over all website data. Write over all website data (not login data).
Loged users can upload images to their profile. Loged users and Admin can upload photos of the games.
Loged users can see user graphics of their statistics they can choose between diferent formats.
- Emails sent to the players as a remainder of the game.
- Login with facebook, twitter or google.
- API REST from diferent social media used to post info and results about the games.
- API from GoogleCalendar to be able to show the matches loaded from the database.
The webapp will implement ELO ranking system automatically calculated.
This window will show you some matches of the tournament with their dates, and their places. Moreover, will show you the latest matches and the next matches and the main managers.
Here, you will can log in on the site with your username and your password.
Here, you will can sign up on the page, with your username, your password and your email.
Contains two list. One for the latest matches and another one for the next matches shown in a slider where you can navigate through next days.
Contains the score of the match and their Match Statistics.
Contains a slider where you can navigate between tournaments to see which teams are inscribed in them.
A page where the team logo, the team name and its two members are shown. Below this information we find statistics about the team.
This window will show you main features of the players of each team, the last five matches, the club history and the trophies. Moreover, it shows you the minutes played, one summary of the player, detailed player statistics (graphic)and his points per game (graphic).
You will can choose tournament, write your team name and upload team logo. Moreover, you will can write the first name (player1) and the second player will be found for join to first player.
Contains one calendar with the matches of each month.
Implements web app with Spring Boot, moustache for templating, MySQL for data base.
| Name | Github user | Most Important | 2 | 3 | 4 | 5 |
|---|---|---|---|---|---|---|
| Alejandro Checa Folguera | AlexCh98 | Admin Page | Sign Up | Automatic Email | Log In Page | Spring Security |
| Iván Martín Sanz | i100van | Querys for replace filtrating | Port a MySql | Loggin with FaceBook | OverviewMatches | Pageable for Teams |
| José Luis Lavado Sánchez | lujoselu98 | Tournaments | Tournaments pdf | Link player with users | Error handling | Navbar based on logged user |
| Lucas Gómez Torres | LucasGomezTorres | Matches Page Mustache | Index Page Mustache | Player_Profile | Player_Graphics | Logic_Player |
| Daniel Carmona Pedrajas | Dacarpe03 | Team Service | Player Profile Editing | Teamx Page Mustache | TeamStatistics | TeamEntity |
| Name | Github user | 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|---|---|
| Alejandro Checa Folguera | AlexCh98 | AdminController.java | UserController.java | adminPage.html | signUp.html/logIn.html | SecurityConfiguration.java |
| Iván Martín Sanz | i100van | SocialFacebookControler.java | MatchStadistics.java | overviewMatch.html | index.html | MatchStadisticsControler.java |
| José Luis Lavado Sánchez | lujoselu98 | TournamentService.java | ImageService.java | tournaments.html | registerTournament.html | PdfService.java |
| Lucas Gómez Torres | LucasGomezTorres | MatchService.java | Matches.html | index.html | PlayerController.java | Player.java |
| Daniel Carmona Pedrajas | Dacarpe03 | TeamService.java | LastMatchDisplay.java | teamx.html | Team.java | AdminController.java |
| Name | Github user | Description |
|---|---|---|
| Alejandro Checa Folguera | AlexCh98 | All the securityof spring boot. The log in and sign up form with their controllers. Email automatic sending when sign up and start spring boot proyect and merging the page in phase 1 with my teammates. |
| Iván Martín Sanz | i100van | Normally tasks of use of API, application of templates Mustache, port to mySQL, and html files of matches. |
| José Luis Lavado Sánchez | lujoselu98 | Mainly task related with tournaments logic on TournamentService and display on mustache template, also logic to register team into tournament and pdf library to generate tournament ranking exportable pdf. All error handling via html for wellkonwn errors and via @ControllerAdvice for unexpected unhandled errors. Interceptor to generate the navbar links based on logged user. Link the player and user entity on the database at signup. |
| Lucas Gómez Torres | LucasGomezTorres | Mainly tasks related to the player entity such as playerController or playerService besides templating html with mustache in files as index.html or player.html, also helped on matches. |
| Daniel Carmona Pedrajas | Dacarpe03 | Mainly tasks related to the team entity such as teamController or teamService besides templating html pages with Mustache, also helped on player and admin tasks and a minor SQL query |
- Create the html template with css, js ...
- Create a spring project with maven and web dependencies, devtools, jpa, h2, mustache.
- Create in resources a static folder and another of templates.
- We put all our css, js, images and static elements that we already had in the static folder.
- We put the html in the templates folder because we will use mustache and it is the configuration that it requires.
- We will have to change the links to all the css, js from the html because the static address does not work, so we will have to put, for example, /css/library/bootstrap.css
- In the application.properties file we add:
a.
spring.mustache.suffix = .htmli. so that mustache understands the .html files. b.spring.h2.console.enabled = truei. For h2 to work. - We tried to make everything work.
- To see that the bbdd works, we load localhost:
port / h2-consoleand on the screen that comes out, we will have to leave everything the same changing what is in JDBC URL by jdbc: h2: mem: testdb and should connect and see the administrator of the bbdd. 10 .The project could already be uploaded to github, because it works, even if it doesn't detect the links between html (index load only).
- We create a controller class and add the request Mapping in the controller to have the url defined.
- Later, we create the java class to define the entity (@Entity) in the bbdd, we put the attributes, define the id with @Id and
java @GeneratedValue (strategy = GenerationType.IDENTITY)together with all the getters and setters and constructor (empty and with all the parameters minus id) - We create a repository class of the previous entity, for example:
a.
java public interface PlayerRepository extends JpaRepository <Player, Long> - Next, we create:
a.
java public Optional <Player> findById (long id)i. This method method in the PlayerRepository, so we can search for the Id from the class. - To initialize the database with sample data we have Application implement ApplicationRunner. We add an @Autowired from each repository and initialize the values in the main method using the save method of the repository.
- An example we are talking about is:
@GetMapping("/{id}")
public String player(Model model, @PathVariable Long id){
Optional<Player> player = playerRepository.findById(id);
if (player.isPresent()) {
model.addAttribute("name", player.get().getUsername());
return "player";
} else {
return "404";
}
} This is what we have done with the rest of the classes to generate our bbdd scheme.
You have to add the security dependency to the pom, and after that, define a class where you set the privileges for the different roles, and the restricted pages based on each role. In addition, to specifying how to log in, and the methods that will manage this, the logout... Finally, it would be necessary to create the keystore (certificate) that is what will accredit the https page, and add in the application properties server.ssl.key-store = classpath: keystore.jks, server.ssl.key-store-password = password and server.ssl.key-password = secret
Once everything is configured, what we will do is create the necessary queries to load our information on the page, which will be done in a java class called repository, and where each sentence will be preceded by @Query, indicating that it is a query, being an example the following:
@Query (value =
"SELECT m. *" +
"FROM tournament_matches tm" +
"INNER JOIN tournament t ON tm.tournament_id = t.id" +
"INNER JOIN games m ON tm.matches_id = m.id" +
"WHERE NOT played and t.name =? 1",
nativeQuery = true)
List <Match> findNotPlayedByTournamentName (String name); Later, we will make the change from h2 to mysql, adding the dependency of mysql to the pom and removing the h2, and adding in the application properties the url, username and pass of access to the bbdd. Finally, if you want you can add CSRF to avoid this type of attacks, deleting in the security configuration class the line crsf.disable (); and adding in all html where there is a form the following: . In addition to a CSRF Handler class that handles the configuration. As we said, all this page was done with mustache, html, css, java and javascript, in addition to spring boot and Maven.
- Open Index.html and show all in it
- Go to matches for consulting info of next matches
- Go to teams and show ajax functionality
- Go to Ranking and use save PDF
- Go to registration tournament
- Use sign up functionality and fill all the fields and upload a image
- Show email fuctionality.
- Log in.
- Go again to registration tournament an fill the fields.
- Show the ranking of the tournament.
- On the ranking select the first teams, to show the graphics.
- On the main bar, got to your profile, and change your image.
- Log out and log in with the admin password: adminpass
- Add a new match with the team we have made before.
- Go to matches and show the match have been added.
- Return to admin page and fill the data of that match.
- Go to the ranking and show the consecuences, thats our advance consulting.
- Go to matches and show the match is change from next matches to last matches, and go into the match overview and show that it have the data we have fill.
- Then go to the team and show that the statistics have change.
- API from GoogleCalendar to be able to show the matches loaded from the database has been changed by the generation of a pdf with the data of a tournament.
- Emails sent to the players as a remainder of the game has been changed by an email sent when user create a new account.
- Login with facebook, twitter or google changed by a twitter collection in main page.
The ELO system has been replaced by the calculation of the ranking in each update made by the admin of the games played, and advanced querys to fill the data such as:
@Query(value = "SELECT m.* " +
"FROM tournament_matches AS tm " +
"INNER JOIN tournament t ON tm.tournament_id = t.id " +
"INNER JOIN(" +
"SELECT id, date, played, stadistics_1_id, stadistics_2_id " +
"FROM (" +
"SELECT t.name as team_name , g.id as match_id, g.* " +
"FROM games_teams AS gt " +
"INNER JOIN games g ON gt.match_id = g.id " +
"INNER JOIN team t ON gt.teams_id = t.id " +
"WHERE t.name=?1 OR t.name=?2 " +
"GROUP BY g.id " +
"HAVING count(g.id)>1 " +
") AS joinned_table " +
") m ON tm.matches_id = m.id " +
"WHERE NOT played and t.name = ?3 ",
nativeQuery = true)
Optional<Match> findIdByTeamsNameAndTournamentName(String t1, String t2, String tName);Creating API services of our website, and use Docker to launch.
| Name | Github user | Most Important | 2 | 3 | 4 | 5 |
|---|---|---|---|---|---|---|
| Alejandro Checa Folguera | AlexCh98 | NewPlayerApi | NewUserApi | AdminPageApi | StatsMatchApi | NewTournamentApi |
| Iván Martín Sanz | i100van | MatchApiCompleted | APIDocumentation | FutureMatches | ConcreteMatchAndAllMacthes | MatchAPISimplified |
| José Luis Lavado Sánchez | lujoselu98 | Tournament Rest Controller | Pom and Script for docker | ErrorHandling | Docker Compose | Manage session |
| Lucas Gómez Torres | LucasGomezTorres | TournamentRestController | PlayerRestController | PlayerEntityApi | TeamsByPlayerIdRequest | AddDiagramTemplate |
| Daniel Carmona Pedrajas | Dacarpe03 | TeamRestController | PlayerRestController | TeamsByPlayerIdRequest | PlayerImageEditing | TeamStatistics |
| Name | Github user | 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|---|---|
| Alejandro Checa Folguera | AlexCh98 | PlayerRestController.java | UserRestController.java | MatchRestController.java | MatchCreate.java | RestLoginController.java |
| Iván Martín Sanz | i100van | MatchRestControler.java | Match.java | MatchStatistics.java | API.md | MatchService.java |
| José Luis Lavado Sánchez | lujoselu98 | TournamentRestController.java | RestSecurityConfiguration.java | ExceptionHandlerControllerApi.java | Script.ps1 | docker-compose.yml |
| Lucas Gómez Torres | LucasGomezTorres | TournamentRestController.java | PlayerRestController.java | Player.java | TeamsRestController.java | API.md |
| Daniel Carmona Pedrajas | Dacarpe03 | TeamxRestController.java | TeamsRestController.java | PlayerRestController.java | RestSecurityConfiguration.java | API.md |
| Name | Github user | Description |
|---|---|---|
| Alejandro Checa Folguera | AlexCh98 | Focus on all put and post api request. Basically the admin page form and the user and player creation |
| Iván Martín Sanz | i100van | Focus on all related to matches API for API Rest service of PadelVersus,obtaining all the necessary information of the matches in Postman, document and prepare all related with the readme.md and API.md |
| José Luis Lavado Sánchez | lujoselu98 | Focus mainly on Tournament entity api queries. Also part of securing api urls and error handling. Most of the docker deployment logic. |
| Lucas Gómez Torres | LucasGomezTorres | As a summary, I have done tasks related to the PlayerApi and TournamentApi, i have worked in PlayerRestController class and tournamentRestController class. Also I contributed on Postman to Player and Tournament Api and I did the diagramTemplate. Finally i helped a little in the TeamApi to get information about TeamsByPlayerIdRequest |
| Daniel Carmona Pedrajas | Dacarpe03 | Mainly tasks related to team API, also helped on PlayerRestController to control the image editing of an unauthorized user. Requests on Postman related to team API and player images. |
- As we are going to use a network with two dockers that communicate with each other app and database we need a docker network
docker network create padelVersus-network
- Download and run the mysql:8 docker container
docker container run --name mysqldb --network padelVersus-network -e MYSQL_ROOT_PASSWORD=123456789 -e MYSQL_DATABASE=padelversus -d mysql:8
To check that everything went well:
docker container logs -f mysqldb
(If everything goes well put Initializaing database ... and more)
docker container exec -it mysqldb bash
You open a bash console in the mysql base let's see that the schema has been created well
mysql -uroot -p123456789
show databases; (See that padelversus comes out as schema to exit and then logout)
- Go to the intellij and change in the application.properties
spring.datasource.url=jdbc:mysql://localhost:3306/padelversus? useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC
by
spring.datasource.url=jdbc:mysql://mysqldb:3306/padelversus?useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC
and in the pom.xl+
<properties>
<java.version>1.8</java.version>
</properties>
<properties>
<java.version>11</java.version>
<start-class>com.example.padelversus.PadelversusApplication</start-class>
</properties>
Go to the maven menu and running the install step creates a .jar in target to move it to a folder to organize the docker and rename it topadelverus.jar
- Create Dockerfile In the folder where we moved the jar create a file called Dockerfile with From openjdk:11
copy ./padelversus.jar padelversus.jar
CMD ["java","-jar","padelversus.jar"]
- Mount the new container with from cmd (terminal) in the folder where the Dockerfile and the jar are
docker image build -t padelversus -f Dockerfile .
- Run the container with
docker container run --network padelVersus-network --name padelversus-container -p 8443:8443 -d padelversus
To see that everything works
docker container logs -f padelVersus-network
(You have to see the typical start the spring but without colors)
Everything is ready to try, go https: // localhost: 8443 / and see what the page is going
And now why have to deploy Doker Compose:
version: "3"
services:
padelversus:
image: teampina/padelversus:latest
restart: always
ports:
- "8443:8443"
networks:
- padelVersus-network
environment:
WAIT_HOSTS: mysql:3306
depends_on:
- mysqldb
mysqldb:
image: mysql:8
restart: on-failure
healthcheck:
test: "/usr/bin/mysql --user=root --password=123456789--execute \"SHOW DATABASES;\""
interval: 2s
timeout: 20s
retries: 10
networks:
- padelVersus-network
environment:
- MYSQL_ROOT_PASSWORD=123456789
- MYSQL_DATABASE=padelversus
networks:
padelVersus-network:
Now, to prepare the folder with the necessary files to do the docker-compose up, we will use a Power Shell Script with the following commands:
# Clean and packge using local .m2 repository to do not download already gotten libraries
docker run -it --rm -v "$(pwd):/usr/src/project" `
-v"$HOME/.m2:/root/.m2" `
-w /usr/src/project maven:alpine mvn clean package
# If there is any problem in compilation we move and rename the .jar
if(Test-Path ./target/padelversus-0.0.1-SNAPSHOT.jar -PathType Leaf){
Copy-Item -Path ./target/padelversus-0.0.1-SNAPSHOT.jar -Destination ./Docker/PadelVersus.jar -force
}else{
echo "Maven compilation fail"
exit
}
# If there is not already moved we copy recursive the folder with images needed for the demo
if (!(Test-Path ./Docker/DemoImages -PathType Any)){
Copy-Item -Path ./DemoImages -Destination ./Docker/DemoImages -Recurse
}else{
Remove-Item -Recurse -Force ./Docker/DemoImages
Copy-Item -Path ./DemoImages -Destination ./Docker/DemoImages -Recurse
}
# We move into the folder were the .Dockerfile and docker-compose.yml is
cd Docker
# We remove the image in case we have done changes in .Dockerfile
docker rmi teampina/padelversus
# We build the app image
docker image build -t teampina/padelversus -f .Dockerfile .
# We push the image to docker hub
docker push teampina/padelversus
# We reutrned to the started directory
cd ..
In the following link you can find everything related to the PadelVersus Rest API documentation APIDocuments.
You can also see some examples at Postman PadelVersus Colection
And if you want to se documents in postamn format: Postman Documentation
To run the application in docker containers, you just have to launch the Power Shell script, this will be responsible for executing the container with maven that is responsible for the construction of the jar, then moves to the Docker folder, and there we create the image, and push to the repository on docker hub. To run the script on Windows standard cmd:
C:/Windows/System32/WindowsPowerShell/v1.0/powershell.exe -File <ProjectPath>/Script.ps1
If you wanted to run for other os, install powershell, run pwsh, go to the project path and run the script:
./Script.ps1
If you want to get the image:
docker push teampina/padelversus:latest
To run application (daemon mode of docker):
docker-compose up -d
To stop the application and remove containers and network (it does not remove the images).
docker-compose down
- First, show fuctionality of Teams and matches, notice that you dont have to be logged.
- Make the pageable request.
- Try to register on a tournament.
- Notice that you need to be logged.
- Create new user.
- Register for a tournament.
- Request to see tournament info.
- Request the player info.
- Request the player image.
- Try to change the image of another player different from the logged user.
- Change the image from logged player
- Log out.
- Log in as admin (Clean cookies first)
- Post request to create new match with the team we have made before.
- Request that match to see info
- Put request to update match statistics
- Get request to se tournament info
In this phase, we have to create an angular application connected with the api rest created in the phase 3.
The first step is installing node.js, npm and angular cli. With all this correctly installed, we can create a new angular proyect in the IDE you are working on.
The next step is creating all the configuration necessary to create each module. Each part is in a folder with a component.ts where is all the logic connected with a componen.html, also a component.css with the style for this html and service.ts where you make the get, post, put or delete request to the API.
Finally, you can modify the html template making it more beautiful using ng-material, Bootstrap or primeng.
The last step, if you want to upload to Docker. You have to add the node.js container to Docker-compose and in the dockerfile, add the configuration for doing ng-build.
With al this steps done, you have an angular application connected with an api, and Working all of this in Docker, with an springboot backend and an independent front with mustache.
| Name | Github user | Most Important | 2 | 3 | 4 | 5 |
|---|---|---|---|---|---|---|
| Lucas Gómez Torres | LucasGomezTorres | FuncionalitiesPlayerPage | DesignPlayerPage | Upload Images Working | Changes Images Working | showEmailIfPlayerIsLogged |
| Ivan Martin Sanz | i100van | FinishedMatchPage | NavBar | Footer | AllMatches | LogicButtons |
| Daniel Carmona Pedrajas | Dacarpe03 | TeamPageRemake | TeamsPagination | ListTeamsPage | TeamService | PhotosCard |
| Alejandro Checa Folguera | AlexCh98 | log in, sign up, sign up player working | Admin Page working | Sign up player working | Sign Up User working | Log In working |
| José Luis Lavado Sánchez | lujoselu98 | Tournament ranking | Home | Matches | Navigation | Error Pages |
| Name | Github user | 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|---|---|
| Lucas Gómez Torres | LucasGomezTorres | player.component.ts | player.service.ts | radar.component.ts | images.component.ts | player.component.html |
| Ivan Martin Sanz | i100van | match.component.ts | match.service.ts | header.component.ts | header.service.ts | footer.component.ts |
| Daniel Carmona Pedrajas | Dacarpe03 | team.component.ts | team.service.ts | teamsOfTournament.component.ts | linechart.component.ts | donutchart.component.ts |
| Alejandro Checa Folguera | AlexCh98 | signUp.component.ts | signUpPlayer.service.ts | admin.component.ts | admin.service.ts | authentication.service.ts |
| José Luis Lavado Sánchez | lujoselu98 | tournament.service.ts | tournament-registration.component.ts | tournament-ranking.component.ts | home.component.ts | next-matches-date.component.ts |
| Name | Github user | Description |
|---|---|---|
| Lucas Gómez Torres | LucasGomezTorres | All the funcionalities of the player component and their templates. Also all the funcionalities of the images of the page, uploads images and change images |
| Ivan Martin Sanz | i100van | Mainly tasks related to matches, and how to show them. Also header and footer with logic related to the kind of user, in all cases services to the templates of each component |
| Daniel Carmona Pedrajas | Dacarpe03 | Mainly tasks related to teams component, from the services to the templates of each component and pagination functionality. Also helped in changing the image of a player |
| Alejandro Checa Folguera | AlexCh98 | Mainly all the login, log out, sign up, sign up player tasks. Also all the authentication service logic and all the admin page for adding new match, new stats match... |
| José Luis Lavado Sánchez | lujoselu98 | Mainly all home, matches and tournament ranking and registration pages. Also make navigation and error pages (404, 403) and help with style apperance |
1. The first step is installing node.js, npm and angular cli. With all this correctly installed, we can create a new angular proyect in the IDE you are working on.
2. The next step is creating all the configuration necessary to create each module.
3. Each part is in a folder with a component.ts where is all the logic connected with a componen.html, also a component.css with the style for this html and service.ts where you make the get, post, put or delete request to the API.
4. You can modify the html template making it more beautiful using ng-material, Bootstrap or primeng. The last step, if you want to upload to Docker.
5. ```DOCKER:``` add the node.js container to Docker-compose and in the dockerfile, add the configuration for doing ng-build.
6. Last step, there is an angular application connected with an api, and working all of this in Docker, with an springboot backend and an independent front with mustache.
Here we can see the SPA diagram os the angular application.
