HKT 4

Para este trabajo se ha usado un framework llamado DevExtreme con React como frontend mientras que el lado del backend es SpringBoot.

Para empezar, hemos hecho uso del postman para verificar que se ejecuta correctamente el backend y se obtiene la información correctamente. Empezamos con el primer request de get que nos trae la lista de grupos: Trae consigo la ID perteneciente y el nombre del grupo

image

Y haciendo uso del ID podemos hacer otra request de get en base a ello:

image

Adicionalmente, agregamos los métodos de post, para agregar nuevo grupo con las personas involucras y delete para borrar el grupo: En el caso del Post, la ID de generará automáticamente, por lo que no es necesario agregarlo al JSON. La ID es esencial para poder elegir qué grupo borrar ya que la request de delete solicita la ID del grupo.

image image

Visualmente para la persona que lo verá desde la interfaz (frontend), se evidencia de la siguiente manera:

image

¿Cómo conectar el frontend con el backend?

Para conectar ambos se hizo uso de una clase llamada CorsConfig que implementa el uso de una clase llamada WebMvcConfigurer Y por último, el uso de la librería Axios para extrar la data al servidor, y posteriormente un fetch para solicitar un get a la URL de groups.

image image