Asignatura Fecha

Desarrollo Web: Full Stack 24/06/2023

Actividad grupal:
Integración y despliegue de
una aplicación web
Grupo

Angela Liliana Rodríguez Mahecha

Esteban Galvis Triana

Fabian Alveiro Burbano Robles

Hugo Xavier Jacome Viera

Julian David Perez Forero

© Universidad Internacional de La Rioja (UNIR)

Actividades 1
 Asignatura Fecha
Desarrollo Web: Full Stack 24/06/2023

Tabla de contenido
Introducción 3
Modificaciones realizadas en el front-end 4
Modificaciones realizadas en el back-end 7
Despliegue mediante contenedores 13
Conclusiones 16
Referencias 17
© Universidad Internacional de La Rioja (UNIR)

Actividades 2
 Asignatura Fecha
Desarrollo Web: Full Stack 24/06/2023

Introducción
Una tienda e-commerce es un proyecto ideal para ser desarrollado utilizando
Spring Framework y Spring Tools, ambos del lenguaje de programación Java.
En este caso, se decidió tomar como inspiración la tienda mercado libre,
únicamente el CRUD de productos, categorías, pedidos y clientes. Los
proyectos se construyeron acordes al enunciado de la actividad y con ayuda
de Spring Initializr (Spring Initializr, 2023). se incorporó la base de datos
MySQL dentro de un contenedor Docker, mediante el archivo docker-
compose.yaml y el script actions.sql. Los nombres de los proyectos son:
operador, buscador, eureka, y cloud-gateway. Para el registro y localización
de todos los microservicios existentes del sistema, se implementó Spring
Cloud Netflix Eureka. También el servidor perimetral que actuó como proxy
inverso y el punto de entrada de cualquier aplicación que quiera interactuar
con nuestros microservicios fue Spring Cloud Gateway. Cómo resultado se
obtuvo un acercamiento y aprendizaje continuo acerca de cómo organizar y
planificar un proyecto de Java utilizando Spring Framework, Spring tools,
Spring Cloud Netflix Eureka y Spring Cloud Gateway, cómo también la parte
frontend con ReactJS y la búsqueda de información con ElasticSearch. El
código del proyecto se puede visualizar en el repositorio de GitHub.
© Universidad Internacional de La Rioja (UNIR)

Actividades 3
 Asignatura Fecha
Desarrollo Web: Full Stack 24/06/2023

Modificaciones realizadas en el front-end

El proyecto contiene una carpeta service en la cual se almacena un archivo
llamado FakeStoreService.tsx, cuenta con las funciones que realizan las
peticiones HTTP hacia el correspondiente backend, en este documento
realizamos los principales cambios. Comenzando por cambiar la ruta a la cual
las funciones deben acceder, anteriormente apuntaba al api de mercadolibre,
ahora tiene cómo valor la ruta en la que se encuentra ejecutando cloud
gateway:

Figura 1. Variable instancia URL backend.

Con base en esto, cambiamos las peticiones que se hacen en cada función
completando las rutas creadas en nuestro cloud gateway:
© Universidad Internacional de La Rioja (UNIR)

Figura 2. Petición POST para enviar la confirmación de la compra.

Actividades 4
 Asignatura Fecha
Desarrollo Web: Full Stack 24/06/2023

Figura 3. Petición GET para obtener la información de un producto por su identificador.

Figura 4. Petición GET para obtener la lista de productos completa o por algún parametro en
específico (título o la descripción).

La información que se le envía a los componentes de ReactJS, fueron

solamente modificadas dentro de estas funciones, así solamente en este
archivo se realizan todas las actualizaciones y no es necesario alterar más de
un archivo. En este caso solamente cambiamos el valor del identificador de la
categoría.
© Universidad Internacional de La Rioja (UNIR)

Actividades 5
 Asignatura Fecha
Desarrollo Web: Full Stack 24/06/2023

Figura 5. Ejemplo obtención y modificación de información a enviar a los componentes

ReactJS.
© Universidad Internacional de La Rioja (UNIR)

Actividades 6
 Asignatura Fecha
Desarrollo Web: Full Stack 24/06/2023

Modificaciones realizadas en el back-end

Las modificaciones a nivel de backend se hicieron en el microservicio
buscador, inicialmente se comentó la configuración relacionada con MySQL
para luego agregar las credenciales obtenidas desde Elasticsearch (Bonsai,
2019), esto se observa en la figura 6.

Figura 6. Application.properties del proyecto buscador.

Para poder utilizar toda la potencialidad de este motor de búsqueda fue

necesario agregar sus librerías necesarias en el pom del microservicio
buscador como se observa en las figuras 7 y 8.
© Universidad Internacional de La Rioja (UNIR)

Actividades 7
 Asignatura Fecha
Desarrollo Web: Full Stack 24/06/2023

Figura 7. Parte 1 del Pom.xml del proyecto buscador.

Figura 8. Parte 2 del Pom.xml del proyecto buscador.

Para poder enviar y recibir peticiones desde Elasticsearch es necesario

implementar una clase cliente a partir de la cual se puede realizar cualquier
tipo de comunicación con el motor de búsqueda, esto se observa en la figura
© Universidad Internacional de La Rioja (UNIR)

9.

Actividades 8
 Asignatura Fecha
Desarrollo Web: Full Stack 24/06/2023

Figura 9. Configuración del cliente Elasticsearch del proyecto buscador.

Uno de los requerimientos establecidos desde el frontend de la aplicación es

realizar búsquedas de productos por contenido, para ello se utilizó la
posibilidad de consultar con matchQuery y multiMachQuery, propias de la
librería Elasticsearch, todo esto se observa en el método findProducts de la
figura 10.
© Universidad Internacional de La Rioja (UNIR)

Actividades 9
 Asignatura Fecha
Desarrollo Web: Full Stack 24/06/2023

Figura 10. ProductDataAccessRepository del proyecto buscador.

Como parte de los cambios requeridos para el correcto funcionamiento del

backend es el ajuste de la entidad Product, en ella se eliminan las anotaciones
correspondientes a JPA para luego poner las relacionadas con Elasticsearch.
Los cambios más notables es el cambio de la anotación @Column por @Field
y la anotación @Entity por @Document. Lo anterior se observa en la figura
11.
© Universidad Internacional de La Rioja (UNIR)

Actividades 10
 Asignatura Fecha
Desarrollo Web: Full Stack 24/06/2023

Figura 11. Entidad Product del proyecto buscador.

En la figura 12 se observa uno de los cambios necesarios para la integración

entre el frontend y el backend, la cual es en el application.yaml del
proyecto Cloud gateway, el cambio consistía en agregar los tipos de peticiones
PUT, DELETE y PATCH, estos son necesarios para la comunicación entre
backend y frontend. Además, se agregó la configuración para permitir
peticiones de cualquier dirección de internet.
© Universidad Internacional de La Rioja (UNIR)

Actividades 11
 Asignatura Fecha
Desarrollo Web: Full Stack 24/06/2023

Figura 12. Application.xml del proyecto Cloud-gateway.

© Universidad Internacional de La Rioja (UNIR)

Actividades 12
 Asignatura Fecha
Desarrollo Web: Full Stack 24/06/2023

Despliegue mediante contenedores

A continuación, se muestran los Dockerfile de los diferentes componentes del
back-end, así como las evidencias de que la aplicación se está ejecutando
correctamente.

Figura 13. Docker compose de bd actions.

© Universidad Internacional de La Rioja (UNIR)

Figura 14. Validación método getProducts desde Postman.

Actividades 13
 Asignatura Fecha
Desarrollo Web: Full Stack 24/06/2023

Figura 15. Validación método getProducts integrado con el Front-end.

© Universidad Internacional de La Rioja (UNIR)

Figura 16. Ver detalle de un producto utilizando getProduct/{id} integrado con el Front-end.

Actividades 14
 Asignatura Fecha
Desarrollo Web: Full Stack 24/06/2023

Figura 17. Creacion de un pedido (purchase) desde el Front-end.

Figura 18. Creación de un pedido (purchase) en MySQL.

© Universidad Internacional de La Rioja (UNIR)

Actividades 15
 Asignatura Fecha
Desarrollo Web: Full Stack 24/06/2023

Conclusiones
Se comprende el uso de diferentes tecnologías que conforman un stack
tecnológico ideal para desarrollar software, tendiendo en claro la principal
funcionalidad de cada una de las herramientas utilizadas, además de cómo
integrarlas y desplegarlas mediante contenedores Docker.

La actividad se realizó para un entorno controlado de pruebas por lo que

estuvo bien permitir peticiones de cualquier dirección, pero en un entorno
operativo esta configuración es muy importarte ya que permite agregarle
seguridad ante ataques como SQL Injection, Cross-Site Scripting (XSS) entre
otras. Esto se hace permitiendo recepción de peticiones de servicios web que
han decidido trabajar juntos.

Al utilizar el motor de búsqueda Elasticsearch nos muestra una forma mucho

más ágil de buscar información en tiempo real, su rapidez en las consultas y
en la integración dentro del proyecto genera un gran aporte a lo que siempre
hemos manejado en cuanto a búsquedas en las bases datos y el manejo de
diferentes servidores con el fin de lograr una mejor la distribución de los
datos y tiempos de respuesta mas eficiente.
© Universidad Internacional de La Rioja (UNIR)

Actividades 16
 Asignatura Fecha
Desarrollo Web: Full Stack 24/06/2023

Referencias
Spring Initializr. (2023). Spring Initializr. Mayoa30, 2023, tomado de
https://start.spring.io/

Haruka, D. (2019). Bonsai: The practical guide to cultivating and growing

living art. Independently Published. https://bonsai.io/
© Universidad Internacional de La Rioja (UNIR)

Actividades 17