IdealTrip
Agencia de planificación de viajes, recomendaciones y opiniones por usuarios.
| Nombre | Apellidos | Correo | Github |
|---|---|---|---|
| David | Moreno Martín | d.moreno1.2019@alumnos.urjc.es | DavidMorenoo |
| Sergio | Cuadros Flores | s.cuadros.2020@alumnos.urjc.es | scuadrosf |
| Adrián | Pedroche Rata | a.pedroche.2020@alumnos.urjc.es | AdriPdr |
| Jorge Ezequiel | de Francisco Bernal | je.defrancisco.2020@alumnos.urjc.es | JrgDfrn |
| ShuHeng | Ye | s.ye.2020@aulmnos.urjc.es | shy10op |
https://trello.com/b/ggomNP2X/idealtrip
- Entidades:
- Usuario
- Destino
- Alojamiento
- Reserva
- Opinión
La relación de entidades podría ser: Un usuario selecciona un destino y compra un alquiler para hospedarse en un alojamiento
-
Permisos de los usuarios:
- Anónimos: Podrá únicamente realizar una búsqueda simple, sin determinados filtros y sin poder reservar.
- Registrados: Disponen de todas las funcionalidades permitidas, como reservar, opinar y demás. Además, también disponen de los filtros, según el destino puedes filtrar por gastronomía, cultura, entretenimiento, etc. Sin embargo, no tendrán el control total de la aplicación web. Por último, los usuarios registrados podrán editar su perfil, añadiendo un avatar entre otras cosas.
- Administrador: Tendrá el control total sobre la información de la web. Por ejemplo, revisar y controlar las opiniones, o subir la base de datos con los diferentes alojamientos, transportes u opiniones sobre los lugares.
-
Imágenes:
- Usuario registrado: Tendrá la posibilidad de subir un avatar a su perfil.
- Alojamientos: Cada alojamiento tendrá sus correspondientes fotos para que los usuarios puedan ver el sitio antes de hacer la reserva.
- Destinos: Imagen de los diferentes destinos que se ofrecen.
- Logotipo de la agencia
- Imágenes creativas que apliquen una buena armonía.
-
Gráficos:
- Destinos más visitados (diagrama de barras)
- Cuántos viajes se realizan cada mes a un destino (diagrama de barras)
-
Tecnología complementaria:
- Google Maps con puntos interesantes dependiendo del filtro
- Envío correos electrónicos con novedades en destinos. (Newsletter) (método de suscripción para recibir correos)
- Generador de PDF (Ticket de viajes/Factura)
- Street View: La web mostrará las fotos del destino.
-
Algoritmo avanzado:
- Sistema de valoraciones: La web mostrará primero los destinos mejor valorados.
- Algoritmo de ordenación basado en filtros
En esta fase hemos, diseñado y maquetado la aplicación mediante HTML, CSS y Javascrip. Además hemos definido las relaciones entre las diferentes pantallas, y que tipos de usuarios tendrán acceso a estas.
-
Descripción de pantallas:
- Inicio: Esta pantalla contiene un buscador con un desplegable para escoger entre varios destinos del catálogo, además de tener un widget para escoger la fecha en la que se desea viajar. También dispone de un menú horizontal en la parte superior donde puedes navegar a otras ventanas como es a la de destinos o a la de contacto. También nos facilita un botón donde podremos iniciar sesión o registrarnos. Por último, dispondremos de un catálogo de todos los destinos de los que disponemos con un breve resumen.
- Destinos: Esta panatalla también tiene en la parte superior el menú para facilitar la navegación. El objetivo de esta es poder escoger entre todos los destinos de los que disponemos para que el usuario haga “click” encima del que quiera descubrir más información.
- Inicio de sesión/Registro: En esta pantalla se le permitirá al usuario no registrado poder registrarse, o bien si ya está registrado poder iniciar sesión.
- Menú del destino: Esta pantalla nos facilita un menú con 4 opciones: restauración, turismo, opiniones y alojamientos. También nos aparecerá debajo una gráfica que muestra la cantidad de gente que ha escogido ese destino en los diferentes meses del año.
- Turismo: Esta pantalla contiene varias imágenes de monumentos y sitios de interés del destino previamente escogido, acompañados de una breve descripción si ponemos el cursor encima de las fotos.
- Alojamientos: Esta pantalla nos muestra una descripción del alojamiento del destino escogido, además de varias imágenes del mismo. Además, se nos brinda la oportunidad de cerrar ya nuestra reserva si pulsamos el botón de compra que nos destinara a la ventana de pago.
- Pago: Esta pantalla, nos proporcionará un breve resumen sobre la reserva que hemos realizado, así como el destino, el precio y los días que hemos elegido. Se nos dará la opción de escoger el método de pago. Una vez escogido, tendremos que introducir los datos y darle a confirmar para que se efectúe el pago.
- Contáctanos: Esta pantalla muestra la información de la compañía, así como dónde se ubica, el número de teléfono, y la ubicación en Google Maps. También se facilita un formulario para que el usuario se pueda comunicar con nosotros.
- Administrador: Esta pantalla permite al usuario con el rol de administrador gestionar a todos los usuarios registrados.
- Opinión: Esta pantalla nos permite añadir una valoración del destino además de una reseña. También se nos permitirá ver las opniniones de los demás usuarios
-Restauración: Esta pantalla al igual que la de turismo, nos mostrará imágenes de la gastronomía típica del destino preseleccionado junto a una pequeña descricpción cuando coloquemos el cursor encima de la imagen
-
Relación entre las distintas pantallas de la aplicación web:
En esta fase hemos implementado la aplicación completa, lo hemos hecho mediante SpringBoot y MySQL, además, también hemos añadido datos de ejemplo a la base de datos que se cargan al arrancar la aplicación, estos datos han sido especificados en el archivo "InitDataBase.java" y son mostrados dinamicamente en la aplicación. Las imágenes también han sido incluidas en la base de datos para facilitar el despliegue en entornos restringidos
También hemos incluido una página de error que salta cuando ocurre algún error o se intenta acceder a alguna URL inexistente, esta página de error va acorde a la temática del resto de la aplicación.
La paginación mediante JS y AJAX también ha sido incluida en la parte de reviews, de este modo, no se incluyen todas las reviews a primera vista, sino que es necesario pulstar un botón de "Mostrar más", cuando este botón es pulsado, no se recarga la página entera, sino que solamente se carga la parte de las 5 reviews siguientes.
Además, disponemos 3 tipos de usuarios implementados mediante Spring Security, usuario NO registrado, usuario Registrado y usuario Administrador, cada uno con sus funciones delimitadas por su rol. Por poner algunos ejemplos, un usuario NO registrado no puede alquilar un alojamiento, debe registrarse en la aplicación para poder hacerlo. Del mismo modo, un usuario Registrado puede visitar su perfil, mientras que un No registrado no puede hacerlo.
Estas son solo algunas de las funciones implementadas en esta segunda fase, ahora continuaremos con la navegación de la aplicación, que a pesar de tener similitudes, también incluye nuevas pantallas.
-
Navegación actualizada:
- Inicio: Esta pantalla contiene un buscador con un desplegable para escoger entre varios destinos del catálogo, además de tener un widget para escoger la fecha en la que se desea viajar. También dispone de un menú horizontal en la parte superior donde puedes navegar a otras ventanas como es a la de destinos o a la de contacto. También nos facilita un botón donde podremos iniciar sesión o registrarnos.
-Destinos: Esta panatalla también tiene en la parte superior el menú para facilitar la navegación. El objetivo de esta es poder escoger entre todos los destinos de los que disponemos para que el usuario haga “click” encima del que quiera descubrir más información.
- Inicio de sesión/Registro: En esta pantalla se le permitirá al usuario no registrado poder registrarse, o bien si ya está registrado poder iniciar sesión.
- Menú del destino: Esta pantalla nos facilita un menú con 4 opciones: restauración, turismo, opiniones y alojamientos.
- Turismo: Esta pantalla contiene varias imágenes de monumentos y sitios de interés del destino previamente escogido, acompañados de una breve descripción si ponemos el cursor encima de las fotos.
- Alojamientos: Esta pantalla nos muestra una descripción del alojamiento del destino escogido, además de varias imágenes del mismo. Además, se nos brinda la oportunidad de cerrar ya nuestra reserva si pulsamos el botón de compra que nos destinara a la ventana de pago.
- Pago: Esta pantalla, nos proporcionará un breve resumen sobre la reserva que hemos realizado, así como el destino, el precio y los días que hemos elegido. Se nos dará la opción de escoger el método de pago. Una vez escogido, tendremos que introducir los datos y darle a confirmar para que se efectúe el pago.
- Contáctanos: Esta pantalla muestra la información de la compañía, así como dónde se ubica, el número de teléfono, y la ubicación en Google Maps. También se facilita un formulario para que el usuario se pueda comunicar con nosotros.
- Administrador: Esta pantalla permite al usuario con el rol de administrador gestionar a todos los usuarios registrados.
- Opinión: Esta pantalla nos permite añadir una valoración del destino además de una reseña si estamos registrados (Primera imagen) y en caso contrario únicamente dejará visualizar valoraciones (Segunda imagen). También se nos permitirá ver las opniniones de los demás usuarios
-Restauración: Esta pantalla al igual que la de turismo, nos mostrará imágenes de la gastronomía típica del destino preseleccionado junto a una pequeña descricpción cuando coloquemos el cursor encima de la imagen
-Diagrama de barras: Esta pantalla mostrará el diagrama de barras con una media de las valoraciones realizadas por los usuarios
-
Relación entre las distintas pantallas de la aplicación web (Diagrama de navegación):
-
Instrucciones de ejecución:
- Para el uso de la aplicación nosotros hemos usado GitHub Desktop, MySQL Workbench 8.0 y Visual Studio Code. Para poder ejecutar la aplicación en Visual Studio Code es necesario instalarse las extensiones de "Extension Pack for Java" y "Spring Boot Extension Pack".
- Una vez hecho eso, lo primero sería clonar el repositorio y situarte sobre la rama main, una vez en main, con Visual Studio (o el editor que uses) abres la carpeta \webapp4\Backend\idealTrip que es la carpeta donde se encuentra todo el código de la aplicación.
- Cuando ya estás dentro de la carpeta, buscas el archivo "IdealTripApplication.java" que es el archivo main del programa y el que arrancará la aplicación.
- Antes de hacer esto, en MySQL Workbench debes crear una instancia local de MySQL, es importante que la constraseña no sea password, pues puede dar problemas. En nuestro caso pusimos password.12345 y no hemos tenido inconvenientes.
- Cuando ya tenemos la instancia de la base de datos, ejecutamos el archivo "IdealTripApplication.java" y veremos como se conecta la base de datos con la aplicación y se empiezan a crear las tablas con sus respectivos datos. Cuando haya terminado, ya podremos usar la aplicación.
- Para hacer esto, debemos ir en nuestro navegador a "https://localhost:8443" y cuando nos dé el aviso de que la conexión no es privada debemos clickar en "Advanced" y posteriormente en "Proceed to localhost (unsafe)"
- Si hemos hecho todo correctamente, ya estaremos dentro de la aplicación, con todas las funcionalidades y los datos cargados.
-
Diagrama con las entidades de la base de datos
-
Diagrama de clases y templates:
-
Participación de miembros:
En esta fase mi participación principal ha sido en la inicialización del proyecto, configurando todos los archivos iniciales, con la creación de la base de datos, introducción de los datos precargados, así como gestionar la pantalla en la que se muestran los diferentes destinos y el control de pantallas mediante el id del destino y las posteriores pantallas de catering (Restauración) y tourism (Turismo). Además, he gestionado la parte de seguridad relacionada con el https, cifrado SSL, control del puerto 8443. De igual manera, me he encargado del control del login y registrarse, añadiendo los usuarios registrados a la base de datos. Asimismo, he estado pendiente de la realización de las tareas de los demás compañeros, apoyando y ayudando en todo lo que necesitasen en todo momento. He gestionado el control del header y footer, así como la colaboración en la realización de la base de datos de newsletter junto con mi compañero Jorge. Por último he podido gestionar junto con mi compañero Adrián el control de permisos de los usuarios dependiendo de la ruta a la que podían tener acceso o no debido a su rol de registrados, no registrados y administradores.
Mis commits no son grandes, por tanto no hay commits que engloben varias o una funcionalidad completa dado que he ido haciendo commits progresivos y continuados.
| Commit | Descripción | Link |
|---|---|---|
| #1 | Creación de los ficheros para la base de datos | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/bdc8de0bf1caf2ee3fa4d3a24473bb3ab44c1c16 |
| #2 | Inicialización de la base de datos | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/e42f966f5174151cba04efe9794156ecffbe5d00 |
| #3 | Mostar los destinos dependiendo de su id | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/3ccb292c92f487b25ee26849889bd540ffeba827 |
| #4 | Realización de login y registro | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/3c7a0ffa90b49c54ce3a7184edf4c9f710d16e0c#diff-21a6e6c8cd127959bb4596c8985e0b4d7f56a3c2f8f290f76bb233876ebfbc5a |
| #5 | Control pantallas catering y tourism | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/86872c79e208e112467ca4235a08bc94476d2135 |
| https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/b7d766286e0e82c8bd45246eb8eaaa39140cb41f |
| Número fichero | Fichero |
|---|---|
| #1 | InitDatabase.java |
| #2 | LoginController.java |
| #3 | ServiceController.java |
| #4 | ProfileController.java |
| #5 | Directorio Model |
Empecé encargándome de realizar el mapping de todas las ciudades, así como de todos los servicios de estas (Turismo, Catering, Opiniones y Alojamiento), después trabajé en mostrar las reviews hechas por los usuarios en su perfil, mostrando únicamente aquellas realizadas por ese usuario. También trabaje con la base de datos para hacer que, en lugar de mostrar 1 única review para todos los usuarios, cada usuario "escribiera" 3 reviews sobre cada destino con una puntuación aleatoria. Posteriormente incluí en cada alojamiento una descripción personalizada y la posibilidad de verlos mediante google maps, ambos cargándose desde la base de datos. Asimismo, implementé la paginación mediante JavaScript y AJAX, de este modo, las reviews son cargadas en segundo plano y no es necesario recargar toda la página.
Además de esto, he corregido errores, traducido código, eliminado warnings y actualizado la página de error 404 para ser coherente en base al estilo del resto de la aplicación. Por último, también he participado activamente en el ReadMe de esta segunda fase.
| Commit | Descripción | Link |
|---|---|---|
| #1 | Mapping general de todas las ciudades y servicios | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/aa48a5969832f7f1a9d6ff2ad3321225cf1cf713#diff-80b956c241b8bcfa657bad6d158f25fc2d34e46fa8fe46c4f15ac3f8643113dd |
| #2 | Mostrar reviews en perfil usuarios | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/ec26fef71bfa556d23f9171b1a3350d3d93492c8 |
| #3 | Página error | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/6ac548755f840408a550881a30247e1f69aeaf23 |
| #4 | Google maps alojamientos | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/dbf3a9e16b2bf70f014a3aef0b8575a76224744c |
| #5 | Añadida paginación con AJAX y JS | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/ce305a774cb7d9474e80e2ab92947bb05f4a1d8a |
| Número fichero | Fichero |
|---|---|
| #1 | citiesController.java |
| #2 | error.htnl & style.error.css |
| #3 | review.html & style.review.css |
| #4 | InitDatabase.java |
| #5 | indexControler.java |
En primer lugar, comencé añadiendo toda la información correspondiente a cada destino, es decir, los sitios turísticos y la comida típica. Posteriormente, me encargué de realizar la gestión de los ususarios, distinguiendo entre usuario registrado, no registrado o administrador, dándoles permisos según sea necesario (esto último junto a Sergio). Más adelante, me encargué de permitir que el usuario puediera cerrar su sesión (logout para usuarios registrados). Entre medias introduje la acción de mostrar una página html de error cuando se intentase acceder a una URL inexistente. Posteriormente me centré en el buscador de países que tenemos implementado en el "/index". Para terminar la fase intentando construir un diagrama de barras a partir de la media de las opiniones registradas por los ususarios en un determinado destino.
| Commit | Descripción | Link |
|---|---|---|
| #1 | Error 404 al acceder a una URL inexistente | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/486a1d3593f69568b6eba0fee03abfb8ca68c23f |
| #2 | Buscador de países de la página de inicio | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/9d6ca4142df3d78eacdb9d0f1213ca5358298fce |
| #3 | Cerrar sesión del usuario | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/ab245851208c4ba051a139dc18bc3f43dd6075f5 |
| #4 | Mustach para diferenciar ususarios, error al loguearse y springSecuiry | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/c41054b53be30636f1e3adab6ae7b1d699e6ba19 |
| #5 | Finalización de introducir toda la información de los destinos | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/23775f412952f9a1d9a8beaee1199ad61e922e56 |
| Número fichero | Fichero |
|---|---|
| #1 | LogoutController.java |
| #2 | LoginController.java |
| #3 | IndexController.java |
| #4 | header.html |
| #5 | index.html |
Lo primero de lo que me encargué fue de el apartado de contacto de la aplciación, más especificamente que a patir de un formulario que el usuario puede rellenar, se enviará un correo con el contenido escrito previamente por el usuario a la dirección de la página web. Posteriormente me seguí encargando de la parte de la interacción de la web con el usuario por medio de correos electrónicos, así que hice una funcionalidad para que se enviase un correo al usuario informativo cuando se suscribiera para recibir ofertas. Además también me encargue de la página de compra donde se muestran en ella toda la información de la compra y aparece un botón para finalizar el pago, el cual envia un correo con todos los detalles al usuario. Y por último hice una funcionalidad para el administrador, mediante la cual puede editar el nombre y apellidos de los usuarios.
| Commit | Descripción | Link |
|---|---|---|
| #1 | primer commit, donde se muestran todos los usuarios en el perfil del administrador y envio de correo de suscripción | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/1ec37c56a4b1a08d66a578e9cc4b872bfd700838 |
| #2 | envio de correo tras la realización del formulario | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/e5bcf4f63127bf1bfc842a5f7b92cd9d01765740 |
| #3 | finalización de correo de compra al usuario y ajustes del admin | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/e10b012f19815b2f2e2082bcfccceaa4f2ea0af3 |
| #4 | actualización de la forma de mostrar los usuarios y la edición de estos | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/d65414d84378294f1965a5692e68b4650a18dafa |
| #5 | actualización para la funcionalidad de la parte de la página de compra y del administrador | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/b01682fad55f7748f3ff60c76646b52e52216a17 |
| Número fichero | Fichero |
|---|---|
| #1 | purchase.html |
| #2 | purchaseController.java |
| #3 | contactController.java |
| #4 | conctact.html |
| #5 | profileController.java |
En cuanto a mi trabajo, aunque debido a un problema familiar mi tiempo para esta practica fue muy limitado, he logrado implementar una función que permite mostrar reseñas según el ID del destino. Además, he añadido algunas características para los usuarios, como la posibilidad de comentar en la página de opiniones, editar su nombre y apellido, y cambiar su foto de perfil para mostrar los avatar del usuarios en la pagina de reviews. También he creado una página de alojamiento y he integrado enlaces del StreetView para mostrarlo en la página de alojamiento.
| Commit | Descripción | Link |
|---|---|---|
| #1 | Editar los datos del usuario en la pagina de perfil | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/7c798d7fff2ae97f358fee6e019ea04da63363be |
| #2 | Pagina de alojamiento | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/5d25941dc855e02edb4018643da30b446f50ee2f |
| #3 | Guardar comentarios del usuario en la base de datos | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/dcfae4e807e54997dfe04dc1192e2d6596adcdb3 |
| #4 | Cambiar avatar y mostrar los avatar de todos los usuarios comentado | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/bad5e05eabd0125e59576c94f56aaa5d06f77d2c |
| #5 | Mostrar los comentarios | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/5dbad07d183c0cbac12a65b5a1f9bf7a27a7800c |
| Número fichero | Fichero |
|---|---|
| #1 | citiesController.java |
| #2 | profileController.java |
| #3 | reviewService.java |
| #4 | review.html |
| #5 | house.html |
En esta fase ha sido implementada una API REST para la aplicación, además, hemos empaquetado y distribuido esta en docker. Para poder ser arrancada desde docker. En principio, toda la funcionalidad disponible en la web mediante interfaz lo está también mediante la API REST, teniendo siempre en cuenta las buenas prácticas. Todas las URLs de la API REST han sido mappeadas con /api para diferenciarlas de las demás.
- Actualización del diagrama de clases:
1. Instalar Docker Desktop
2. Crear una cuenta en DockerHub o iniciar sesión
3. Abrir una terminar "bash"
4. Clonar el repositorio usando el siguiente comando: "git clone https://github.com/CodeURJC-DAW-2022-23/webapp4.git"
5. Ejecutar el comando cd /webapp4/allCode/docker
6. Ejecutar el comando "./create_image.ps1 idealtrip:v1"
En esta fase mi dedicación principal ha sido con la realización de la dockerización de la aplicación, así como hacer el guardado de las imagenes como fichero y poder visualizarlas en la web, así como diferentes participaciones en la realización de la API en relación a los usuarios y los destinos.
| Commit | Descripción | Link |
|---|---|---|
| #1 | Dockerización de la apliación y creación del fichero ejecutable | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/5d04eb5b41d37ed5e745548f514a3e926ed84f8f |
| #2 | Crear Destino con API | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/02bb6b2d1211794c64cf1abb163e8409c95fb0e0 |
| #3 | Crear Usuario con API | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/323a24baa9bc697a549c8a958ed2eacba7059f0f |
| #4 | Crear Rest User | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/7a220de5d91a050dc42131311cad3a178b815d37 |
| #5 | Imágenes como fichero | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/e9c88f045045d7c755eefff5f06faf151876b72f |
| Número fichero | Fichero |
|---|---|
| #1 | create_image.ps1 |
| #2 | UserRestController.java |
| #3 | Dockerfile |
| #4 | docker-compose.yml |
| #5 | CitiesRestController.java |
| Commit | Descripción | Link |
|---|---|---|
| #1 | Removed commented lines of code | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/cf5dbf6ebc8865f49fd236e3d3caaf5274c54e1f |
| #2 | added bar chart | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/05c906711721495c49638bd379454256902e659c |
| #3 | Addex AJAX & JS Pagination and Fixed start rating | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/5287993ae8cf2ec276d11283412b6be5c645438d |
| #4 | Removed commented lines of code | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/cf5dbf6ebc8865f49fd236e3d3caaf5274c54e1f |
| #5 | API rating, destinations, review | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/fcfa0c94a0cf01674b6eccad20bb1413a784f318 |
| Número fichero | Fichero |
|---|---|
| #1 | indexController.java |
| #2 | CitiesRestController.java |
| #3 | rating.html |
| #4 | review.html, services.html |
| #5 | DestinationRepository.java |
En primer lugar comencé añadiendo todas las clases correspondientes para la seguridad de la API. Posteriormente, particpé en la dockerización de la aplicación junto a mis compañeros Jorge y Sergio. Seguidamente, comenzamos a desarrollar la API REST, en la cual tambuién participé activamente. Al igual que en su respectiva documentación.
| Commit | Descripción | Link |
|---|---|---|
| #1 | Seguridad de la API, login y logout | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/a8234826a6e5953991c7653f07653d498cdd7e35 |
| #2 | Métodos de la API, review, tourism, catering | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/60b78e35cf08dfa3eafa770471024df4201f71ff |
| #3 | Primera parte paginación | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/b5a7d71de0ef34611d4ee455c541ad006363242a |
| #4 | Segunda parte paginación y continuación con los métodos de la API | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/34dbabad970113d1a71836c4542fc8b487456975 |
| #5 | Documentación de la API | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/c11e2713fdd257836011f55e3a601a64da3f52a8 |
| Número fichero | Fichero |
|---|---|
| #1 | UpdateUserDTO.java |
| #2 | CitiesRestController.java |
| #3 | UserRestController.java |
| #4 | RestSecurityConfig.java |
| #5 | PageSerializer.java |
Para esta parte me he encargado de ayudar con la parte de la creación de la imagen del docker compose. Además junto con Adrián y Sergio me he encargado de la implementación de las clases para la incorporación de la API REST a la aplicación web. Para esta segunda parte me he encargado de hacer los métodos get que muestran los destinos, monumentos, comida típica, alojamientos y review. Además de implementar métodos POST como el de hacer login o añadir destino, añadir una review. Por último nos hemos encargado entre Adrián y yo de documentar todos los métodos de la API y crear el documento con todas las URLs.
| Commit | Descripción | Link |
|---|---|---|
| #1 | Documentación de la API REST | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/c11e2713fdd257836011f55e3a601a64da3f52a8 |
| #2 | implementación de reviews para la API REST | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/dcd9389e9978c9d3091e273ee4b95b75faf0e388 |
| #3 | Implementación de los métodos get para los atributos de los destinos | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/60b78e35cf08dfa3eafa770471024df4201f71ff |
| #4 | Implementación de los Get para obtener los destinos | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/7f1df83e769287cb4a67a01bed1b6d7bd11c8134 |
| #5 | Solución de los errores de la API REST | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/cd2276f62acd03e485072cdbac7683fc1c367d3f |
| Número fichero | Fichero |
|---|---|
| #1 | CitiesRestConntroller.java |
| #2 | UserResController.java |
| #3 | ReviewDTO.java |
| #4 | LoginRestController.java |
| #5 | UpdateUser.DTO.java |
La mayoria de las funcionalidad de admin(agregar destinos, eliminar destinos, paginacion de reseñas, eliminar reseñas) , la diagrama de clase v3 y el traslado de la editUserData a la pagina de admin.
| Commit | Descripción | Link |
|---|---|---|
| #1 | Agregar destinos y eliminar destinos | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/ffdd019bdd775e4588026d372de699be7ba5473b |
| #2 | Pagina de administrator | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/ffdd019bdd775e4588026d372de699be7ba5473b |
| #3 | Elminar Reseñas | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/ffdd019bdd775e4588026d372de699be7ba5473b |
| #4 | profile | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/507356e4926cd10e3e45261cb104b4668a51b670 |
| #5 |
| Número fichero | Fichero |
|---|---|
| #1 | administratorController.java |
| #2 | administrator.html |
| #3 | profileController.java |
| #4 | profile.html |
| #5 |
-
Preparación del entorno de desarrollo:
-
Para empezar con la parte de frontend, y más concretamente con Angular, tenemos 2 requisitos fundamentales, sin los cuales nos va a ser imposible trabajar:
-
Una vez que tenemos ambas instaladas, podemos comprobar si están funcionando escribiendo en la consola "ng --version" y revisando las versiones. -Teniendo esto listo, podemos empezar con Angular como tal, aunque antes es recomendable comprobar que la API de backend funciona, por lo tanto, arrancamos el backend y lo dejamos en segundo plano.
- Importante mencionar, que para que el backend y el frontend estén conectados, es necesario configurar el proxy, esto se puede hacer con el siguiente comando dentro de la carpeta del proyecto "$ ng serve --proxy-config proxy.conf.json" y en el archivo proxy.conf.json añadir la configuración del puerto y API necesarias. En nuestro caso, esto ya está hecho y el archivo creado, simplemente con "npm start" se lanzan ambas cosas, el serve, y el proxy
-
Instalamos Angular si no lo hemos hecho antes:
npm install -g @angular/cli- Clonamos el repositorio y nos ponemos en frontend:
cd allCode\frontend- Instalamos los módulos necesarios:
npm install- Instalamos bootstrap:
npm install bootstrapy
ng add @ng-bootstrap/ng-bootstrap- Ejecutamos la aplicación:
npm start -
-
Diagrama de clases y templates de la SPA:
-Video Youtube: VIDEO
- Participación de miembros:
Inicialicé el proyecto. Posteriormente mis tareas comenzaron con la realización del Header con mi compañero Jorge, donde posteriormente averiguamos la forma de introducir bootstrap a la aplicación Angular. Seguí realizando mis tareas con la pantalla principal de los destinos, añadiendo todos los detalles e imagenes desde la API, así como que cada imagen referenciase a su respectiva pantalla con el ID único gracias a la función de ActivatedRoute. De igual forma realicé la pantalla donde se muestras las diferentes actividades por cada destino, así como la referencia por ID de igual forma. Por último realice la operación de la vista de la restauración (Catering) añadiendo las imgenes y detalles desde la API.
| Número fichero | Fichero |
|---|---|
| #1 | Destination |
| #2 | Catering |
| #3 | Information |
| #4 | Header |
| #5 | Destination Service |
Me he encargado de varias cosas durante esta última fase de la aplicación. Empecé configurando el routing de la aplicación Angular para atender a las diversas URL, entre ellas la de error, y la URL vacia "". Posteriormente, integré el proxy en la aplicación Angular para conectar el front con el Back, y de este modo poder hacer peticiones a la API. Con esto, configure la aplicación para poder ser desplegada en el puerto 8443, que es el puerto backend, pero con la diferencia de que ahora debemos incluir /new, por lo tanto la forma correcta de acceder sería "https://localhost:8443/new/". Es importante recalcar que para que los cambios hechos en Angular surjan efecto en el puerto 8443, es necesario hacer un Build completo y trasladar los archivos de la carpeta "/dist" a la carpeta "src/main/resources/public/new" del backend. También hice el gráfico de barras con las valoraciones de los clientes, estos datos son obtenidos del backend vía API. Por último, realice el componente de House, con los apartamentos para los distintos destinos, también con los datos obtenidos por la API.
| Commit | Descripción | Link |
|---|---|---|
| #1 | Angular routing and Error 404 page | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/faf6833f02d92a2a2e26fadf8b73201adedc1854 |
| #2 | Angular Proxy integrated and API destinations format | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/b4374b60de88c73f82bdbf35b6026eb595bfb188 |
| #3 | Angular localhost deployment in port 8443/new/ | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/93ea3c2b7d571ec84daac57f07418dcd88b04fb4 |
| #4 | Bar chart added via API | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/bb3b7d29f7a256c5afd2f1ceeeff84c0040a7247 |
| #5 | House components and details | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/46db2496f2e28a764b64b8ef46ba09955c18fe35 |
| Número fichero | Fichero |
|---|---|
| #1 | error-page Component |
| #2 | destination Components |
| #3 | rating Component |
| #4 | house Component |
| #5 | public/new Deployment |
En esta fasse de la práctica me he encargado de la parte de los componentes de la aplicación web. Empecé añadiendo el componente de tourism, que permitía por cada destino, ver las imágenes con los sitios más turístivos. Posteriormente, realicé los componentes de ptivacyPolicy y el de terms. Luego contiué añadiendo el footer de la aplicación y acabé añadiendo l buscador de países que ofrecemos en la pantalla de inicio. Por último, también he ayudado a realizar los diagramas y el readme. Además de colaborar en el despliegue de la aplicación.
| Commit | Descripción | Link |
|---|---|---|
| #1 | Tourism component | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/130a56d1881e8073ac03dfe0459de3c500083be5 |
| #2 | Footer component | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/f01c09622b56ff1958598da6ab159f488af7b388 |
| #3 | privacyPolicy and terms components | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/3140e59e104143d697a4627a6d433af9e9eb88ed |
| #4 | Country search | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/004913d5991bae2c865f65d2aa0ce43943662fdf |
| #5 | Country search 2.0 | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/f2250111ce8f4fb8cebe779a215d2dc3a0cf02ad |
| Número fichero | Fichero |
|---|---|
| #1 | footer.component |
| #2 | destination.component |
| #3 | index.component |
| #4 | tourism.Component |
| #5 | privacyPolicy.component |
Para esta parte me he dedicado a los componentes del purchase, contact, review y parte del heather. Del contact he implementado el html nuevo y que tras meter datos en una formulario se envie un correo a la aplicacion. El contact muestra todas las reviews de un destino determinado y el usuario previamente registrado podrá añadir una review. En el heather se mostraran unos botones u otros en función de si el usuario esta registrado o no. Por último en el purchase se mostrará un resumen de la compra y pulsando uno de los botones de compra se le guardara la compra al usuario registrado
| Commit | Descripción | Link |
|---|---|---|
| #1 | poder escribir nuevas. Además de mostrar la información de la compra | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/9a02c96db0864ac5562ee8cb8bc25d831bbd9e60 |
| #2 | muestra las reviews de un sitio determinado | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/380d4c7919805122cd71a4074e711838f9fb8070 |
| #3 | creados los componentes de review, purchase y contact | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/754738bc85d87c9b45534595f06053a44f46095c |
| #4 | formulario y componente para el envio del | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/41a596690536c766f9caf280552b8107c17f793e |
| #5 | creacion de la api para enviar emails | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/a6da5a59e911d717b11a2781c1d63da871b4198f |
| Número fichero | Fichero |
|---|---|
| #1 | contact.component.ts |
| #2 | review.component.ts |
| #3 | purchase.component.ts |
| #4 | review.component.html |
| #5 | contact.component.html |
En esta fase de la practica he empezado con la mayoria de los modelos, y he encargado de los componentes: LoginComponent, RegisterComponent, AdminComponent y ProfileComponent, tambien he colaborado en algunas funcionalidades de otros componentes: HeaderComponent implementacion de los botones, ReviewComponent(Reviews paginacion, guardar reviews). He creado los necesarios metodos API REST
| Commit | Descripción | Link |
|---|---|---|
| #1 | adminComponent: Edit and Delete Users and some fix | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/bf90814ff730318b9044cca0d4481df8ff1deb10 |
| #2 | Edit profile and api PUT update UserData | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/3a5fab514a6fa42f575a7ce26f061334ec73a164 |
| #3 | profileComponent and api GET profileAvatarFile | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/da975a9da6dfd226f3fb137197443f41fa8d5397 |
| #4 | Edit and Delete Destination | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/cf10036c1d476092622d08c106de2d20c5335b93 |
| #5 | add Destination and delete review | https://github.com/CodeURJC-DAW-2022-23/webapp4/commit/365c2c3774dba4879339890dc5336b83a57bcb5b |
| Número fichero | Fichero |
|---|---|
| #1 | adminComponent |
| #2 | profileComponent |
| #3 | LoginComponent |
| #4 | registerComponent |
| #5 | userService |