Skip to content

CodeURJC-DAW-2019-20/webapp2

Repository files navigation

TenniShip

TenniShip is a web app for managing tennis tournaments inspired in Davis Cup rules. It allows users to find teams, matches, keep track of scores, and check their standings in tourneys.

Demo Video

Check first our demo video: Link -> (https://www.youtube.com/watch?v=OT3qRSFsoTI)

Home Page The home page has two search bars: one for tournaments and another one for teams. This search bars are only for queries, so they redirect you to the team or tournament information sheet. There's another slide below, that explains what TenniShip can do and links the user to various actions.

Sign Up Users can sign up in TenniShip as team leaders. Such as in Davis Cup official tournament, every team must have five players.

Tournament Sheet Tournament Sheet Tournament information sheets indicate the actual phase of the tournament, its teams and its progress.

Register Match When a game is played, teams must log the result.

Team Sheet Team Sheet contains information about a team. It includes the team's logo, its players with their picture and name (on mouse hover), the tournaments played by them and their most recent results. There's a pie chart that showcases the percentage of matches won and lost in each tournament.

Built With

TenniShip has been made with HTML, CSS and JavaScript. BizPage Bootstrap template has been used and modified.

Authors

Phase 2

Technical details

Entities

TenniShip has five different entities: match, tournament, team, player and user role. Entities

Classes and templates diagram

Classes diagram

Users

TenniShip has three different users: administrator, registered user and non-registered user.

  • Non-registered users can only see tournaments and teams information.
  • Registered users can see tournaments and teams information and register matches on those tournaments they play at.
  • Administrators can modify tournaments information.

Development

Source Code

Source Code Repository.

Development tools

  • Spring Tool Suite 4.
  • MySQL Server 8.0.
  • MySQL WorkBench 8.0.

Dependencies

  • MSQL Server 8.0.
  • Spring framework.
  • Mustache.
  • Springboot starter mail.
  • Springboot starter security.

How to manage the project with Eclipse STS4.

  1. Clone the repository or download the ZIP.
  2. Open SpringToolSuite4 >> File >> Open Projects from File System.
  3. Select '/webapp' folder.
  4. Import both Maven and Eclipse Projects and click on Finish.
  • To run the application select 'Run As >> Spring Boot App'.
  • To build the project select 'Project >> Build Project' if 'Build Automatically is not selected (recommended to)'.

Basic installarion of MySQL Server and MySQL Workbench (recommended) on Windows.

  1. Download MySQL Windows Installer.
  2. Run it as administrator.
  3. In 'Choosing a Setup Type' select Developer Default.
  4. In 'Check Requirements' screen install every of the items showed so the app works fine.
  5. Execute the installation of the products (MySQL Server must be there).
  6. Next.
  7. In 'High Avaliability' screen select Standalone MySQL Server / Classic MySQL Replication option.
  8. Next >> Next.
  9. Write a Password.
  10. Next >> Execute >> Finnish till installation ends.

Entities with pictures

  • Tournament has an image as its logo.
  • Each team has 6 images: the team logo, and a profile picture for the five team members.

Charts

In team's details appears a pie chart that automatically calculates and shows matches won and lost graphically.

Additional technology

An e-mail will be sent when you register your TenniShip account.

Advanced algorithm or query

Tournaments will automatically reorganize themselves when a match is played.

Screen transitions.

  • Straight arrows show how non-registered users can navigate throw the website.

  • Arrows that start with a circle show how registered users can navigate throw the website.

  • Arrows that start with a rhombus show how administrator users can navigate throw the website.

Login/up

Login/up

Login/up

Login/up

Login/up

Process Tools

We used Trello for tasks management.

Authors' participation

Phase 3

ApiRest

Link to Api Documentation

Click on the next Link in order to consult the ApiRest user guide using Postman. ApiRest Link

Updated Design

Classes and templates diagram

Classes diagram

Docker

Execution Guide

Take into account that previously git clone of this repository is needed, so that you are able to execute the application from the next directory:

./Docker

The only step for executing the application is to run the next script on CMD:

docker-compose up

To stop the application:

docker-compose down

Building the image

To create the image, you just have to launch the script, this will be responsible for creating the image, and push to the repository on docker hub:

./Docker/build.bat

Authors' participation

Phase 4

Angular

Development Enviropment

1. First, install Angular Cli -> npm install -g @angular/cli
2. Second step, install some dependencies -> npm install
3. Thirdly, start your server using -> npm start
4. Last but not least, search for -> localhost:4200/TenniShip
5. Enjoy :)

Components diagram

Alternate diagram here Angular diagram

Docker

Execution Guide

You can dockerize this app by executing this script.

Authors' participation

License

© BizPage Bootstrap template has been designed by BootstrapMade. Original Bizpage Template.