GameLink
| Nombre | Correo | Usuario GutHub |
|---|---|---|
| Andrea Patricia Acuña Padrón | [email protected] | andrecupa |
| Carlos Fuentes Díaz | [email protected] | Xarlifue360 |
| Jhostin Davis Ortiz Moreno | [email protected] | JhostinD |
| Mani Víctor Patel Bentz | [email protected] | ultramani |
| Juan Luis Rico Rus | [email protected] | JLRR2019 |
Link Trello:
La web consta de 4 entidades:
Id, nick, contraseña, tarjeta de crédito, Nombre, apellidos, foto perfil, correo electrónico, juegos comprados, noticias leídas.
Id, Título, descripción, puntuación, carátula, empresa, precio, género, lista de noticias asociadas.
Id, Título, descripción, foto(opcional), autor, remesa, lista de videojuegos relacionados.
Id, codigo de compra, nombre videojuego asociado, descuento.
Relaciones de las entidades:
El usuario administrador puede publicar de 0 a infinitas noticias, videojuegos y códigos. El usuario administrador puede eliminar y/o modificar de 0 a infinitas noticias, videojuegos y códigos publicados previamente. Una noticia tiene uno o varios videojuegos asociados. Un códigoCompra es de un videojuego. Un usuario registrado compra de cero a infinitos videojuegos. Un usuario puede visualizar noticias y videojuegos.
(la Web tiene que estar diseñada para que ciertos usuarios sean dueños de ciertos datos, importante para implementar correctamente los mecanismos de seguridad adecuados) Para exponer los permisos de los usuarios se expondrán los tipos de usuario que se contemplan en la web y la funcionalidad que cumplen en la misma.
Usuario que no necesita de credenciales para acceder a la web. Podrá visualizar las noticias y los videojuegos más populares (más visitados y mejor valorados), debido a que no tiene preferencias. Además, no tendrá posibilidad de realizar compras
Usuario que necesita credenciales para acceder a la web. Podrá visualizar noticias y videojuegos en base a sus preferencias (compras y visualizaciones anteriores). También tendrá posibilidad de realizar compras en la web. Además, tendrá la opción de modificar sus credenciales (Nombre, Tarjeta, Foto de perfil, correo electrónico).
Usuario que necesita credenciales para acceder a la web. Podrá crear nuevas noticias y subir nuevos videojuegos (con su código asociado) para el consumo posterior de los usuarios cliente. Además, tendrá la opción de eliminar y/o modificar las noticias y los videojuegos previamente publicados.
Debido a que se trata de una página con 3 tipos de usuarios (usuario no registrado, registrado y administrador) es necesario determinar las posibilidades que tiene cada usuario de poder actualizar y subir fotografías.
no tiene permiso para poder subir fotografías.
podrá subir y actualizar su foto de perfil que le caracteriza.
el usuario administrador podrá cambiar cualquier imágen de la página. Esto incluye su foto de perfil, imágenes asociadas a cualquier noticia, así como las carátulas de los videojuegos en venta. En definitiva, puede cambiar cualquier imágen de la página web (excepto imágenes de perfil de usuarios registrados).
La página web contará con un gráfico de barras, el cual medirá el número de ventas de un videojuego/barra, mostrando así todos los videojuegos. Además constará de un gráfico de sectores, el cual mostrará las ventas por género a lo largo del tiempo.
1-PSPDFKit API (Por ejemplo, posteriormente se verá que tecnología usar concretamente)
- Necesario generar PDFs para contener información relacionada con la compra de un usuario.
- Link
Principalmente existirá una funcionalidad que implementa un algoritmo basado cada uno en diferentes datos de las entidades:
- Se implementará un sistema que ofrezca a los usuarios registrados videojuegos que puedan interesarles basados en su historial de compra. La decisión sobre qué juegos ha comprado el usuario previamente, concretamente con el genero del mismo. De esta forma se mostraran los videojuegos cuyo genero sea el mismo al genero mas comprado del usuario
Destacamos que en la barra de navegación "Administrador" sólo será visible para el administrador tras acceder como tal.
-
Registro: la pantalla de registro ofrecerá la posibilidad, a los usuarios no registrados, de registrarse. Esto permitirá acceder a todas las funcionalidades personalizadas de la página: videojuegos y noticias por preferencias y comprar videojuegos.
-
Inicio de sesión: permite a los usuarios previamente registrados acceder a la página web con usuario.
-
MenuHome: esta pantalla es principalmente la pantalla de bienvenida, con información general sobre noticias, compras y nuestro equipo, sin ahondar mucho en los detalles
4.Videojuegos: en ella se muestra la lista de videojuegos disponibles en la página web: los más populares para usuarios no registrados y una lista personalizada para usuarios registrados. Si se pincha en un videojuego se redirigirá a la pantalla VerVideojuego.
-
VerVideojuego es la pantalla que muestra en detalle la información de un videojuego y permite a los usuarios adquirir dicho videojuego por dinero.
-
About es la pantalla donde se muestra la información relacionada al euqipo de desarrollo de la página web GameLink.
-
VerNoticia: pantalla que permite ver con detalle cada noticia. Así como los videojuegos que la relacionan
-
Noticias: pantalla que permite ver las noticias más destacadas del día, así como la opción de poder acceder a ellas para ver cada noticia en detalle si optamos por pinchar en ellas.
-
Admin es la pantalla utilizada por los usuarios administradores para actualizar las noticias y videojuegos del catálogo. Además, se mostrarán los gráficos de las compras en la página web
-
Perfil es la pantalla en la que el usuario registrado podrá ver toda su información así como modificar los campos que le sean necesarios
-
Confirmación compra es la pantalla en la que el usuario registrado podrá ver el monto a pagar y el videojuego seleccionado para poder confirmar o cancelar su pedido
-
Error compra y Error login son las pantallas de error correspondientes cuando el usuario no está registrado e intenta comprar y cuando las credenciales del login no son correctos respectivamente.
-
Top videojuegos: pantalla que permite ver los videojuegos mas populares del momento en base a sus puntuaciones.
Para poder descargar el código del proyecto se debe acceder al GitHub, después pulsar el boton verde en el que pone CODE. Una vez lo hayamos pulsado aparecerá un desplegable en el que se tendrá la opción de descargar como ZIP.
El programa puede ser ejecutado tanto en Visual Studio Code como en SpringToolSuite4. Debido a que ha sido desarrollado en Visual Studio Code, las instrucciones serán para este entorno en concreto.
Para poder utilizar Visual Studio Code, deberemos dirigirnos a la página oficial y descargar el programa para el sistema operativo que se desee
La versión Java necesaria es la 17, a su vez requiere la versión PostgreSQL 6.4 y Maven 4.0.0.
Para poder usar Java y Maven, primero deberemos descargar las extensiones. El proceso será el siguiente:
Primero vamos al apartado "Extensions"
A continuación, debemos descargar el Extension Pack for Java y Spring Boot Extension Pack
Llegados a este punto necesitaremos descargar la base de datos. En este caso se ha usado PostgreSQL 6.4
Debemos crear un servidor en la base de datos.
El username y la password del servidor deben de ser los mismos que los que están en apartado application.properties. Además debemos configurar el puerto que vayamos a utilizar
Para proceder a la ejecución del programa, primero se debe abrir la pestaña application.properties, de lo contrario no aparecerá el Spring Boot Dashboard (Instalado previamente mediante la extensión). Una vez abierta, se puede proceder a la ejecución del programa
- Login: Realización del login del usuario. Se debe comprobar que el usuario está en la base de datos y que los campos de nombre y contraseña coinciden. Además, si hay algún error como que no está el usuario en la base de datos saldrá una pantalla de error.
- Editar perfil usuario: Visualización de una pantalla del perfil del usuario con los datos del mismo. Además, se podrán modificar los campos del usuario así como la foto de perfil. Se contará con un botón para guardar los cmabios y otro para deshacer los mismos.
- Gráfica de géneros: Consulta Query de los videojuegos vendidos por género y su visualización por gráfico en admin.html
- Compra videojuego: Botón en cada uno de los videojuegos. Dicho botón redirige a un error si el usuario no está loggeado y a una pantalla de confirmación de compra si el usuario si está loggeado. Una vez comprado el videojuego, este pertenecerá al usuario apareciendole la compra en su perfil.
- Payment error id videogame
- Gráfica videojuegos genero terminada
- botón compra finalizado + pequeños arreglos estéticos
- Modificar perfil
- continuación del perfil
- Login.html
- UserProfile.html
- CSRFHandlerConfiguration.java
- GamelinkController.java
- UseroRepository.java
- En esta fase me he encargado de implementar que se pueda crear/eliminar/editar videojuegos y noticias, templates y funciones de controlador.
- Creado los templates y funciones de controlador para cargar de base de datos la información asociada a cada videojuego o noticia.
- Implementado el protocolo https y agregado en el servicio de seguridad que dependiendo del rol de un usuario pueda o no acceder a ciertas URLs.
- Implementado también el algoritmo de personalizado.
- Ajustado nuestras relaciones entre entidades y lo que conlleva en el código.
- Finalmente, algún hotfix me ha sido encargado.
- Me he adelantado este commit no vale
- Remove/Edit implemented, but Remove has errors
- Added games and news
- Various fixes, most important edit and create videogame/new works
- Forms completed
- Templates mensaje de error al comprar un juego y confirmar compra: creación de las templates para el mensaje error y la confirmación de la compra
- Inicializar la BBDD: Se han introducido a la base de datos los 20 primeros videojuegos y las 20 primeras noticias de la página web.
- Estética de la página web: En este apartado se ha mejorado la estética general de toda la página web, ya sean los colores, texto o que la página web sea más atractiva a la vista.
- Hacer un navegador más dinámico: Cuando estas registrado como usuario no registrado, como usuario o como administrador, que en el navegador de la página web se muestren las pestañas que les corresponda a cada uno
- Grafica de videojuegos vendidos: Consulta Query de todos los videojuegos vendidos y su visualización por grafico en admin.html
- 1ºparte de verificacionCompra/mensaje de error
- cambiado a ingles
- actualizar bbdd videojuegos 1ºparte
- actualizar bbdd terminado
- grafica de juegos vendidos TERMINADO
- Paginación: Todas las tareas para realizar la paginación de manera correcta.
- Puntuación: Incorporación del sistema de puntuación para los videojuegos (Pendiente de subir al main en Juan-Deprecated)
- Pequeñas cosas como mejora: incorporación del navBar con moustache, incorporación de atributos a las entidades para el uso de las estrellas, cualquier arreglo, etc.
- avance paginacion pero no funciona
- pequeño avance, al menos cambia los elementos al pasar de pagina
- paginacion con ajax casi hecha
- Ya funciona, no esta ni mucho menos perfecto pero ya funciona
- Puntuaciones medias funcionando (tienen un pequeño error tengo que solucionarlo)
- Registro: Formulario para guardar nuevos usuarios. Implementado con ciertas medidas de seguridad para no guardar usuarios sin credenciales en la BD.
- Algoritmo de consulta avanzada: Query SQL para recomendar juegos a los usuarios registrados en función de los géneros de los videojuegos que ya hayan comprado.
- Header y Footer unificados con mustache: Header y Footer implementados en forma de templates .html que se incrustarán mediante mustache en el resto de páginas html.
- Creación de las entidades: Creación de las clases que actuarán como entidades en la BD.
- Configuración inicial del proyecto con Maven: configurado el proyecto mediante plantilla Maven. pom.xml dentro de carpeta backend.
- Primer avance algoritmo consulta avanzada
- Usuarios Nuevos se crean correctamente (Falta formulario con js correctamente implementado)
- Header y Footer genéricos en todas las páginas
- Carpeta backend
- Primera versión entidades
- tener instalado Docker desktop: enlace docker desktop
- Tener clonado el repositorio github: enlace repositorio github
-
Se entrará a la bash del SO y se posicionará en la carpeta donde estén los archivos dockerfile y docker-compose mediante el comando cd Tal y como se puede observar en la imagen
-
Una vez situados correctamente se ejecutará el siguiente comando: docker-compose up
Para poder publicar una imágen en DockerHub, primero debemos dirigirnos a la carpeta donde este docker y docker-compose en nuestra aplicación:
Una vez estemos en el directorio correcto, debemos ejecutar el siguiente comando para construir la imágen:
A continuación, debemos pushear la imágen al repositorio para que pueda ser descargada:
Como se puede observar, se ha creado correctamente el repositorio con la imágen:
El siguiente paso es pullear la imágen del repositorio, para ello se utiliza el comando que se indica en el repositorio:
Una vez hemos realizado este paso, debemos comprobar que se ha pulleado correctamente a nuestra aplicación de docker. Para ello, debemos dirigirnos a la pestaña de imágenes.
Finalmente, debemos establecer en nuestro archivo docker-compose.yml que el nombre de la imágen sea el mismo que el que nos indica DockerHub:
Para poder desplegar una aplicación en heroku, primero es necesario crearse una cuenta en heroku e instalar el cliente para terminal.
Una vez hecho esto, necesitamos cambiar en application.properties el valor de server.port:
También tenemos que cambiar las dependencias del pom.xml y limitar la memoria a 512Mb:
También necesitamos una nueva clase que se encargue de la configuración de la base de datos:
Una vez hecho esto, abrimos una terminal en el directorio de nuestra app y nos logueamos con $heroku login.
Para la creación de la app en Heroku usamos el comando:
Usamos $heroku container:login para que docker pueda subir imágenes a heroku (sólo se hace una vez)
Una vez hecho esto, ejecutamos la siguiente serie de comandos:
Para desactivar los certificados usamos el comando $heroku config:set SERVER_SSL_ENABLED=false --app codeurjc-daw-2021-22-webapp9
Para añadir una base de datos usamos $heroku addons:create heroku-postgresql --app codeurjc-daw-2021-22-webapp9
- Dockerizar la aplicación creando los archivos necesarios y probando los diversos mandatos
- Creación de la imagen junto con mi compañero Juan Luis Rico Rus
- Arreglar gráficas dinámicas
- Creación de la página de error: URL no válida
- inicio dockerfile y docker-compose
- dockerfile y docker-compose avance
- fixed graphics by andrecupa
- página error URL no válida
- cambios de arreglos
- Desarrollado la api rest al completo, dividido en los distintos controladores rest.
- Testeado y generado el postman_collections.
- Agregado las dependecias y generado la carpeta api-docs.
- Integrado seguridad a los controladores rest y configurado las urls para evitar exploits.
- Realizado algún hotfix que me ha sido encargado.
- Divided the rest controller and some adds
- Added new methods, will separate in different rest controller
- Fixes in the RestAPi
- Rest apis fixed and added some new methods, postman collection added. Fixed querys.
- New urls security rules
- VideogamesRestController.java
- UserRestController.java
- NewsRestController.java
- LoginRestController.java
- RestSecurityConfig.java
- He dockerizado y creado la imágen de la aplicación junto con Andrea Patricia Acuña Padrón.
- He participado en Postman junto con mi compañero Carlos Fuentes en la parte de Login.
- He realizado las tareas necesarias para la incoporación de la tecnologia complementaria.
- Dockerfile y docker-compose (no funciona aun)
- Cambio a login rest controller
- Ajustes realizados en clase
- boton de descargar PDF (como no, no funciona, no lo reconoce pero bueno mañana lo soluciono)
- generador de pdfs completo
- Separacion del controlador principal en controladores mas pequeños junto con Jhostin David Ortiz Moreno.
- Participado en Postman junto con mi compañero Juan Luis Rico Rus en la parle de Login.
- Actualizar el diagrama de clases.
- Correccion de pequeños errores.
- division del controller (parte news)
- division del controller (parte usero)
- mini cambio
- Update README.md
- mini cambio
- UseroWebController.java
- NewsWebController.java
- Docker-compose.yml
- GamelinkWebController.java
- scripts.js
- Despliegue de la aplicación en heroku
- Separación del controlador web (GamelinkController) en diferentes clases para mejor estilo del código.
- Arreglo de errores en la página web (imágenes por defecto en nuevos usuarios, visualización de nuevas noticias creadas por el admin, eliminación de imports no usados)
- arreglado estilo código (Imports no usados fuera)
- nuevo controlador web videogame
- Arregladas imágenes por defecto de nuevos usuarios
- scripts heroku en main
- primera version controlador por entidad
- create_heroku_app.sh
- deploy_heroku_app.sh
- DatabaseConfig.java
- VideogameWebController.java
- UseroWebController.java
Dadas las multiples opciopnes de tecnología complementaria a incorporar, hemos decidido implementar un sistema de generación de PDFs para que el usuario pueda obtener un PDF de la factura que recibe al comprar un videojuego.
La generación del PDF se realiza mediante la libreria html2pdf, con su archivo js correspondiente. No ha sido incoporado en la API Rest, dado que todas las acciones de realizan en el Frontend. He aquí el tutorial que ha sido usado: https://parzibyte.me/blog/2020/09/05/html-pdf-javascript/
El procedimiento para generar un PDF es el siguiente:
Primero debemos logearnos como usuario (también valdría como administrador)
A continuación, debemos dirigirnos a la sección de videojuegos y presionar descubrir para visualizar los videojuegos.
Una vez se haya seleccionado un videojuego, se deberá pulsar la opción de comprar.
A continuación nos saldrá la factura y podremos descargarla. La imágen siguiente muestra el PDF de la factura una vez se realiza la descarga.
Lo primero que debemos hacer, será instalar Node en nuestro dispositivo. Para ello, nos dirigiremos a la aplación de Node y la descargaremos.
A continuación, deberemos instalar @angular/cli
El siguiente paso será hacer npm install para que se instale la carpeta node modules, el cual tiene las dependencias necesarias para que nuestra apliación SPA funcione correctamente. Deberemos hacer este comando en nuestra carpeta frontend (previamente creada).
Como podemos observar, se ha instalado la carpeta node_modules.
Nuestro siguiente paso será crear una carpeta llamada proxy.conf.json, la cual permitirá acceder a nuestro backend desde el frontend para obtener ls datos. Deberemos configurarla adecuadamente con la dirección ip y el puerto que esté configurado en el backend.
El siguiente paso será inicializar el backend.
Por último deberemos hacer ng serve (con el proxy) para lanzar nuestra apliación SPA
- Desarrollo del login en frontend. Así ha desarrollado el componente (html y ts) del login.
- Desarrollo del registro en frontend. Así ha desarrollado el componente (html y ts) del registro.
- Desarrollo del perfil de usuario en frontend. Así ha desarrollado el componente (html y ts) del signUp.
- Subida de imagenes en el perfil del usuario.
- User profile + cambios en componentes
- arreglar carpetas + signUp componente
- userProfile avanzado y pequeños cambios
- home component + algunos cambios
- login asociado a user profile funciona
- login.component.ts
- signUp.component.ts
- userProfile.component.ts
- userProfile.component.html
- signUp.component.html
- He realizado las tareas correspondientes para la realización de la parte de las noticias de la página web, a su vez que la parte de administrador para la modificación de las noticias.
- He realizado tareas menores, como ayudar a mis compañeros en lo que necesitasen o adecuar las direciones en app.routing, app.module, etc
- editNew y editNewForm acabados
- News, news template y showvideogame (sin la parte de mani) y sin paginacion completa
- showNews a la espera del tempalte de mani. Head component, no header (fallo mio)
- newsTemplate a priori completado con Carlos Fuentes
- Paginación aplicada al home
- news.component.ts
- newsTemplate.component.ts
- showNews.component.ts
- editNewForm.component.html
- editNewForm.component.ts
- Desarrollado los componentes y servicios de los videojuegos.
- Implementado los modelos.
- Implementado editar y eliminar videojuegos.
- Controladore SPA
- Arreglos menores.
- Frontend included in the backend server done
- Added juans
- a
- Pagination added
- Added the card catalog compoenents
- videogame-catalog.component.ts
- videogame-catalog.component.html
- videogame-card.component.ts
- videogame-card.component.html
- videogame-detail.component.html
- Implementacion de los servicios (videogame y news)
- Desarrollo de la creacion de noticias y videojuegos
- desarrollo de administrador
- Arreglos menores
- createNew y createVideogame funcionan (excepto imagenes)
- createNew -> no funka
- createNew.component 1ºparte
- admin hecho
- videogame.service a medio crear
- news.service.ts
- videogame.service.ts
- admin.component.html
- createNewForm.component.ts
- createVideogameForm.component.ts
- Registro y login de frontend, docker.
- Registro usuario funciona (fix backend + servicio user) main
- videogames recommendations working
- navBar fixed + login + signup fixed
- usero service finished
- fixed recursion in home.component.html