Nuestra aplicación web será un sistema de torneos de Rocket League (videojuego), donde los usuarios registrados podrán participar, ver partidas, unirse a un equipo, etc...
- Daniel Liszewski - d.liszewski.2017@alumnos.urjc.es
- Jorge Carreras - j.carreras.2017@alumnos.urjc.es
- Lucía Romero - l.romerov.2017@alumnos.urjc.es
- Alejandro Gavilán - a.gavilanv.2017@alumnos.urjc.es
El vídeo se puede encontrar en el siguiente enlace: Vídeo
- Torneos
- Partidas
- Jugadores
- Equipos
Cada torneo tiene una página asociada, donde aparece la bracket del torneo con los nombres de los equipos que participan (se podrá acceder a sus páginas desde aquí), su elo y la info de cada partida. Los datos del torneo como premios y numero de jugadores máximo serán editados por el admin.
Cada partida tiene información como por ejemplo los resultados. Estos resultados son actualizados por el admin.
Cada jugador tiene una página de perfil (ahí aparece un gráfico del ratio de las partidas ganadas vs perdidas) con una foto de perfil, su elo en cada juego.
Cada equipo tiene una pagina asociada con los jugadores que la conforman (se puede acceder a ellos) y su elo (quizá más tarde se pueda añadir una imagen de equipo).
Cada usuario tiene los permisos descritos y los mencionados en el anterior.
- Acceder al índice
- Podrá registrarse
- Podrá ver la página de torneos
- Ver la información de los jugadores
- Ver la información de los torneos
- Participar en los torneos
- Cambiar la información y la foto de su perfil
- Crear torneos
- Eliminar torneos
- Cambiar la información de los torneos
- Crear equipos
Hemos añadido que los torneos tengan una localización física la cual se puede ver utilizando Google Maps
Cada jugador tendrá una puntuación numérica asociada a cada juego que juegue (elo). Cada vez que juegue una partida contra algien, su puntuación variará en función de la diferencia de elo entre los dos jugadores y el resultado (mismo sistema que el ajedrez).
Permisos de acceso:
- Negro: Anónimo.
- Rojo: Usuario registrado.
- Verde: Admin.
Página de torneos que contiene los diferentes torneos en los que los usuarios podrán participar.
En la página del usuario podremos ver el nombre del usuario, un pequeño texto de presentación, fecha de nacimiento y equipo. Además, contendrá un gráfico que representara el porcentaje de partidas ganadas y partidas de ese usuario.
Página para registrar nuevos usuarios en la que se requerirá su nombre, email, nombre de usuario, y contraseña.
Página que contiene información del juego al que se ha accedido y los torneos disponibles de dicho juego, junto a una descripción.
Página en la que el usuario iniciará sesión con su email y contraseña.
En esta página el amin podrá crear un equipo eligiendo el nombre y participantes.
Página en la que se puede observar en detalle un torneo en específico, con su nombre, las fechas, los participantes y su ubicación.
Página en la que aparecen los equipos registrados ordenados por su puntuación de elo.
- Página de leaderboard AJAX
- Organización de ficheros
- Creación de un equipo
- Trabajo en las funcionalidades del admin
- Sistema de elo
- Resolución de conflictos entre ramas
- Implementación de la API de Google
- PieChart con MDB
- Login
- Registro
- Perfil
- Editar Perfil
- Seguridad
- Brackets
- Administración de partidas
- Base de datos
- Página de torneos
- Añadir equipo a torneo
| Alejandro | Daniel | Jorge | Lucía |
|---|---|---|---|
| Commit1 | Commit1 | Commit1 | Commit1 |
| Commit2 | Commit2 | Commit2 | Commit2 |
| Commit3 | Commit3 | Commit3 | Commit3 |
| Commit4 | Commit4 | Commit4 | Commit4 |
| Commit5 | Commit5 | Commit5 | Commit5 |
| Alejandro | Daniel | Jorge | Lucía |
|---|---|---|---|
| EloCalculator.java | Team.java | UserRepositoryAuthProvider.java | Base de datos |
| README | TeamRepository.java | login.html | WebController |
| pie.js | TeamRestController.java | register.html | play.html |
| DataRestController.java | load.js | WebSecurityConfig.java | rocketleague.html |
| googleMap.js | leaderboard.html | profile.html | diamond.html |
Para la generación de la BBDD se deberá descargar el gestor de BBDD “MysqlWorkBench”. Una vez descargado e instalado debemos crear una conexión mysql: localhost y el puerto 3306. Una ve creada la conexión se deberá crear el Schema “web_fase_1” y hacer un data import de los siguientes datos adjuntados: Schemas
La aplicación se encuentra desarrollada con Spring, por lo que se deberá arrancar mediante el Spring Boot. También se puede arrancar mediante un IDE, vea sea Eclipse o Netbeans que permita la implementación de aplicaciones con Spring. Una vez arrancada la aplicación. El servidor empezará a correr por el puerto 8443. Asegúrese de que no hay ninguna otra aplicación corriendo por ese puerto o este podría fallar. La practica se encuentra en: Practica
Para acceder a la web introduzca la URL: https://https://localhost:8443/
Se puede encontrar la documentación y especificación de los endpoints REST en el siguiente archivo Documentación
- Descargar Docker Desktop y crear un usuario.
- Abrir consola de comandos.
- Generar .jar usando las directrices de maven.
- Generar dockerfile en la carpeta en la que se encuentre el .jar.
- Escribir en el Dockerfile las siguientes líneas:
- FROM openjdk:8-jdk-alpine
- ARG JAR_FILE=target/* .jar
- COPY ./practica.jar practica.jar
- ENTRYPOINT ["java","-jar","/practica.jar"]
- Construir la imagen de nuestra aplicación con el siguiente comando:
- docker image build -t 'user'/practica -f Dockerfile .
- Construir contenedor de la base de datos.
- docker container run --name 'nombre del contenedor' -e MYSQL_ROOT_PASSWORD='contraseña' -e MYSQL_DATABASE='nombre de la base de datos' -d mysql:8
- Una vez construido, comprobamos que la base de datos está conectada.
- docker ps
- Linkeamos la base de datos con la imagen de nuestra aplicación y construimos su contenedor.
- docker run -it --name 'nombre del contenedor' --link 'nombre del contenedor de la base de datos':mysql -d 'nombre de la imagen'
- Creamos el archivo docker-compose.yml
version: "3" services: practica: restart: always ports: - "8443:8443" networks: - conexionBBDD-network environment: WAIT_HOSTS: mysql:3306 depends_on: - mysqldb
mysqldb: image: mysql:8 restart: on-failure ports: - "5000:3306" healthcheck: test: "/usr/bin/mysql --user=root --password=root--execute "SHOW DATABASES;"" interval: 2s timeout: 20s retries: 10 networks: - conexionBBDD-network environment: - MYSQL_ROOT_PASSWORD=root - MYSQL_DATABASE=web_fase_1
networks: conexionBBDD-network:
- Ejecutamos el siguiente comando para agrupar los dos contenedores.
- docker-compose up
-
Daniel He participado principalmente en la implementación de la API Rest, centrandome en la seguridad y ficheros POSTMAN.
-
Jorge En esta fase he estado realizando la creacion de contenedores con Docker y su conexion con la BBDD
-
Alejandro En esta fase he estado trabajando sobre REST, implementando la subida de imágenes y limpiando código repetido para que se pueda reutilizar entre la web normal y la aplicación web.
-
Lucía En esta fase he estado realizando los contenedores de la aplicación y la base de datos mediante Docker.
| Alejandro | Daniel | Jorge | Lucía |
|---|---|---|---|
| PlayerService | UserServiceImp | Dockerfile | Dockerfile |
| TournamentService | Teams_On_GameService | docker-compose.yml | docker-compose.yml |
| TournamentRestController | TeamServiceImp | practica.jar | practica.jar |
| TournamentController | UserRestController | ||
| ImageService | TeamRestController |
Para el desarrollo de la aplicación web en Angular, se deberá instalar un editor o entorno de desarrollo. En nuestro caso hemos descargado Visual Studio Code (https://code.visualstudio.com/). También, habrá que instalar node.js (https://nodejs.org/es/). Una vez descargadas ambas herramientas, abriremos el proyecto en Visual Studio, y en la consola situada en la parte inferior de este entorno escribiremos la siguientes líneas de comandos: *cd nombre-carpeta-app *npm install -g angular/cli
Es posible que se necesite instalar las dependencias de bootstrap y jquery, para ello ejecutaremos los siguientes comandos: *npm install bootstrap *npm install jquery
Para ejecutar la aplicación, se usará el siguiente comando (abrimos también una ventana en el navegador con la dirección localhost:4200, donde se encontrará la aplicación): *npm start
Los cambios realizados mientras la aplicación se esté ejecutando se actualizarán automáticamente, por lo que no será necesario utilizar el comando cada vez que se haga una modificación.
- Daniel En esta fase me he encargado del funcionamiento de crear un nuevo equipo, del aspecto de la aplicación para que sea el mismo que en las fases anteriores, de la carga y ejecucíon de la API de Google Maps y he colaborado en la solución de numerosos errores.
-Jorge En esta fase me he encargado de inciar los primeros pasos en Angular. Crear el pathing de las rutas. La autentificacion del user Login. Las configuraciones de proxy, build y angular.json. Además de realizar el Docker.
| Alejandro | Daniel | Jorge | Lucía |
|---|---|---|---|
| update.service | team.component | angular.json | updateMatch.component |
| profile.component | app.component | app-routing.module.ts | match.service |
| leaderboard.component | auth.interceptor | Docker | tournament.component |
| adminauthguard.service | teams.service | package.json | tournament.service |
| profile.service | users.service | proxy.conf.json | rocketleague.service |