Ir al contenido principal

Consumir un servicio Spring Boot desde React (2da parte)

En la anterior entrega iniciamos un proyecto para levantar tickets.

Recapitulando:

  • Creamos un diseño de la aplicación.
  • Creamos la base de datos del proyecto. 
  • Creamos las tablas para el soporte técnico y usuarios de la aplicación.

Como siguiente paso crearemos un proyecto Java con Spring Boot.

Creando el proyecto Spring Boot para los tickets

Para ello podemos ir a este sitio: https://start.spring.io/

Otras opciones para crear nuestro proyecto pueden ser usando Eclipse STS, Intellij IDEA, Visual Studio Code, etc.

Nosotros usaremos la primera opción.

Las características del proyecto son las siguientes:

Aspecto Valor
Group com.alquimista
Artifact tickets
Package name com.alquimista.tickets
Packaging JAR
Configuration YAML
Java version 21

Nuestras dependencias serán:

  • MariaDB Driver: para la conexión a la BD. 
  • Spring Web: para los servicios web. 
  • Spring Data JDBC: para el manejo de consultas SQL.

Diagrama de BD del proyecto

A continuación mostraremos el diagrama de base de datos del proyecto.

Tomando en cuenta las siguientes tablas:

  • Usuarios: quienes son los que usan aplicaciones y requieren atención a su solicitud.
  • Soporte: soporte técnico que atiende las solicitudes de soporte.
  • Solicitud: el requerimiento del usuario con una breve descripción.
  • Atención: la atención recibida por parte del soporte técnico.

Diseño de pantallas de la aplicación

A continuación mostraremos el diseño de las pantallas de la aplicación.

Para el Usuario:

Para el encargado de soporte técnico:

Esto ya lo mostramos en el post anterior, pero le dimos una mejor visibilidad.

Es momento de empezar a escribir código.

Creando un Hola, mundo

Vamos a crear una clase tipo controller en un directorio denominado ``controller``.

TestController.java

package com.alquimista.tickets.controller;

import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.GetMapping;
import java.util.logging.Logger;
import java.util.logging.Level;
import org.springframework.web.bind.annotation.RequestParam;


@RestController
@RequestMapping("/api")
public class TestController {
    private static final Logger LOGGER = Logger.getLogger(TestController.class.getName());

    // http://localhost:8083/api/hola?param=Thomas
    @GetMapping("/hola")
    public String hola(@RequestParam String param) {
        LOGGER.log(Level.INFO, "Entramos al primer servicio.");
        return String.format("Hola, %s", param);
    }
    

}

Este controller expondrá un sencillo servicio que mostrará el famoso "Hola, mundo" pero con el nombre del usuario.

URL Descripción
http://localhost:8083/api/hola?param=Thomas Mostrará el mensaje: "Hola, Thomas"

También es necesario hacer algunos ajustes al archivo ``application.yaml``:

spring:
  application:
    name: tickets
  datasource:
    url: jdbc:mariadb://localhost:3306/soporte_tecnico
    username: root
    password: s3cr3t4
    driver-class-name: org.mariadb.jdbc.Driver

server:
  port: 8083

Con esto tendremos nuestra conexión a la base de datos y acceso al puerto 8083.

Para echar andar el proyecto debemos teclear los siguiente en una terminal de comandos (o si lo prefieres usar un IDE en lugar de esto):

$ mvn clean install
$ mvn spring-boot:run

Abrimos un navegador en la URL: http://localhost:8083/api/hola?param=Thomas

Ahora a empezar con las clases DTO de nuestro poyecto. Se identifican las siguientes de acuerdo a las tablas de la base de datos:

  • UsuarioDTO.java: clase para los datos del usuario. 
  • SoporteDTO.java: clase para el encargado de soporte técnico.
  • SolicitudDTO.java: clase para las solicitudes de soporte. 
  • AtencionDTO.java: clase para la atención a las solicitudes.

¿Por qué DTO? ,¿Por qué no usar JPA?

Porque se trata de un proyecto que no requerirá mucha complejidad, es por eso que elegimos Spring Data JDBC, en lugar de Spring Data JPA.

También podemos identificar otras DTOs:

  • UsuarioCreateDTO.java: para la creación de usuarios sin exponer datos sensibles. 
  • SolicitudCreateDTO.java: para crear solicitudes sin exponer datos sensibles. 
  • AtencionCreateDTO.java: para crear las atenciones a las solicitudes sin exponer datos sensibles. 

Además de una enumeración para los niveles de urgencia para la atención al ticket:

  • Nivel.java: para los niveles de urgencia. 

La razón es que éstas DTOs nos ayudan transportar datos entre procesos o capas de una aplicación sin exponer tu lógica de negocio o modelo de base de datos.

Ahora tendremos las entidades que, como podemos adivinar, serán también cuatro:

  • Usuario.java 
  • Soporte.java
  • Solicitud.java 
  • Atencion.java

Creando las clases del proyecto

DTOs

UsuarioDTO.java

package com.alquimista.tickets.dto;

public class UsuarioDTO {
    private Integer id;
    private String nombre;
    private String apellidos;
    private String correo;
    private String cvesis;

    
    public UsuarioDTO() {
    }

    
    public UsuarioDTO(Integer id, String nombre, String apellidos, String correo, String cvesis) {
        this.id = id;
        this.nombre = nombre;
        this.apellidos = apellidos;
        this.correo = correo;
        this.cvesis = cvesis;
    }

    
    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getNombre() {
        return nombre;
    }

    public void setNombre(String nombre) {
        this.nombre = nombre;
    }

    public String getApellidos() {
        return apellidos;
    }

    public void setApellidos(String apellidos) {
        this.apellidos = apellidos;
    }

    public String getCorreo() {
        return correo;
    }

    public void setCorreo(String correo) {
        this.correo = correo;
    }

    public String getCvesis() {
        return cvesis;
    }

    public void setCvesis(String cvesis) {
        this.cvesis = cvesis;
    }

    
    @Override
    public String toString() {
        return "UsuarioDTO{" +
                "id=" + id +
                ", nombre='" + nombre + '\'' +
                ", apellidos='" + apellidos + '\'' +
                ", correo='" + correo + '\'' +
                ", cvesis='" + cvesis + '\'' +
                '}';
    }
}

SoporteDTO.java

package com.alquimista.tickets.dto;

public class SoporteDTO {
    private Integer id;
    private String nombre;
    private String apellidos;
    private String correo;

 
    public SoporteDTO() {
    }

    public SoporteDTO(Integer id, String nombre, String apellidos, String correo) {
        this.id = id;
        this.nombre = nombre;
        this.apellidos = apellidos;
        this.correo = correo;
    }

  
    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getNombre() {
        return nombre;
    }

    public void setNombre(String nombre) {
        this.nombre = nombre;
    }

    public String getApellidos() {
        return apellidos;
    }

    public void setApellidos(String apellidos) {
        this.apellidos = apellidos;
    }

    public String getCorreo() {
        return correo;
    }

    public void setCorreo(String correo) {
        this.correo = correo;
    }

    
    @Override
    public String toString() {
        return "SoporteDTO{" +
                "id=" + id +
                ", nombre='" + nombre + '\'' +
                ", apellidos='" + apellidos + '\'' +
                ", correo='" + correo + '\'' +
                '}';
    }
}

SolicitudDTO.java

package com.alquimista.tickets.dto;

import java.time.LocalDate;
import java.time.LocalDateTime;

public class SolicitudDTO {
    private Long id;
    private String asunto;
    private Integer idUsuario;
    private Nivel nivel;
    private LocalDate fchreg;
    private LocalDateTime horreg;

    
    public SolicitudDTO() {
    }

   
    public SolicitudDTO(Long id, String asunto, Integer idUsuario, Nivel nivel, LocalDate fchreg, LocalDateTime horreg) {
        this.id = id;
        this.asunto = asunto;
        this.idUsuario = idUsuario;
        this.nivel = nivel;
        this.fchreg = fchreg;
        this.horreg = horreg;
    }

   
    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getAsunto() {
        return asunto;
    }

    public void setAsunto(String asunto) {
        this.asunto = asunto;
    }

    public Integer getIdUsuario() {
        return idUsuario;
    }

    public void setIdUsuario(Integer idUsuario) {
        this.idUsuario = idUsuario;
    }

    public Nivel getNivel() {
        return nivel;
    }

    public void setNivel(Nivel nivel) {
        this.nivel = nivel;
    }

    public LocalDate getFchreg() {
        return fchreg;
    }

    public void setFchreg(LocalDate fchreg) {
        this.fchreg = fchreg;
    }

    public LocalDateTime getHorreg() {
        return horreg;
    }

    public void setHorreg(LocalDateTime horreg) {
        this.horreg = horreg;
    }

    // Opcional: toString para depuración
    @Override
    public String toString() {
        return "SolicitudDTO{" +
                "id=" + id +
                ", asunto='" + asunto + '\'' +
                ", idUsuario=" + idUsuario +
                ", nivel=" + nivel +
                ", fchreg=" + fchreg +
                ", horreg=" + horreg +
                '}';
    }
}

AtencionDTO.java

package com.alquimista.tickets.dto;

import java.time.LocalDate;
import java.time.LocalDateTime;

public class AtencionDTO {
    private Long id;
    private Long idSolicitud;
    private LocalDate fchreg;
    private LocalDateTime horreg;

    
    public AtencionDTO() {
    }

    
    public AtencionDTO(Long id, Long idSolicitud, LocalDate fchreg, LocalDateTime horreg) {
        this.id = id;
        this.idSolicitud = idSolicitud;
        this.fchreg = fchreg;
        this.horreg = horreg;
    }

    
    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public Long getIdSolicitud() {
        return idSolicitud;
    }

    public void setIdSolicitud(Long idSolicitud) {
        this.idSolicitud = idSolicitud;
    }

    public LocalDate getFchreg() {
        return fchreg;
    }

    public void setFchreg(LocalDate fchreg) {
        this.fchreg = fchreg;
    }

    public LocalDateTime getHorreg() {
        return horreg;
    }

    public void setHorreg(LocalDateTime horreg) {
        this.horreg = horreg;
    }

   
    @Override
    public String toString() {
        return "AtencionDTO{" +
                "id=" + id +
                ", idSolicitud=" + idSolicitud +
                ", fchreg=" + fchreg +
                ", horreg=" + horreg +
                '}';
    }
}

AtencionCreateDTO.java

package com.alquimista.tickets.dto;

public class AtencionCreateDTO {
    private Long idSolicitud;

    // Constructor vacío
    public AtencionCreateDTO() {
    }

    // Constructor con parámetros
    public AtencionCreateDTO(Long idSolicitud) {
        this.idSolicitud = idSolicitud;
    }

    // Getter y Setter
    public Long getIdSolicitud() {
        return idSolicitud;
    }

    public void setIdSolicitud(Long idSolicitud) {
        this.idSolicitud = idSolicitud;
    }

    // Opcional: toString para depuración
    @Override
    public String toString() {
        return "AtencionCreateDTO{" +
                "idSolicitud=" + idSolicitud +
                '}';
    }
}

SolicitudCreateDTO.java

package com.alquimista.tickets.dto;

public class SolicitudCreateDTO {
    private String asunto;
    private Integer idUsuario;
    private Nivel nivel;

    
    public SolicitudCreateDTO() {
    }

    
    public SolicitudCreateDTO(String asunto, Integer idUsuario, Nivel nivel) {
        this.asunto = asunto;
        this.idUsuario = idUsuario;
        this.nivel = nivel;
    }

    
    public String getAsunto() {
        return asunto;
    }

    public void setAsunto(String asunto) {
        this.asunto = asunto;
    }

    public Integer getIdUsuario() {
        return idUsuario;
    }

    public void setIdUsuario(Integer idUsuario) {
        this.idUsuario = idUsuario;
    }

    public Nivel getNivel() {
        return nivel;
    }

    public void setNivel(Nivel nivel) {
        this.nivel = nivel;
    }

    
    @Override
    public String toString() {
        return "SolicitudCreateDTO{" +
                "asunto='" + asunto + '\'' +
                ", idUsuario=" + idUsuario +
                ", nivel=" + nivel +
                '}';
    }
}

UsuarioCreateDTO.java

package com.alquimista.tickets.dto;

public class UsuarioCreateDTO {
    private String password;
    private String nombre;
    private String apellidos;
    private String correo;
    private String cvesis;

    
    public UsuarioCreateDTO() {
    }

    
    public UsuarioCreateDTO(String password, String nombre, String apellidos, String correo, String cvesis) {
        this.password = password;
        this.nombre = nombre;
        this.apellidos = apellidos;
        this.correo = correo;
        this.cvesis = cvesis;
    }

   
    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getNombre() {
        return nombre;
    }

    public void setNombre(String nombre) {
        this.nombre = nombre;
    }

    public String getApellidos() {
        return apellidos;
    }

    public void setApellidos(String apellidos) {
        this.apellidos = apellidos;
    }

    public String getCorreo() {
        return correo;
    }

    public void setCorreo(String correo) {
        this.correo = correo;
    }

    public String getCvesis() {
        return cvesis;
    }

    public void setCvesis(String cvesis) {
        this.cvesis = cvesis;
    }

    
    @Override
    public String toString() {
        return "UsuarioCreateDTO{" +
                "password='" + password + '\'' +
                ", nombre='" + nombre + '\'' +
                ", apellidos='" + apellidos + '\'' +
                ", correo='" + correo + '\'' +
                ", cvesis='" + cvesis + '\'' +
                '}';
    }
}

Para los niveles de urgencia:

Nivel.java

package com.alquimista.tickets.dto;

public enum Nivel {
    A, B, M
}

Entidades

Usuario.java

package com.alquimista.tickets.model;

public class Usuario {
    private Integer id;
    private String password;
    private String nombre;
    private String apellidos;
    private String correo;
    private String cvesis;

   
    public Usuario() {
    }

   
    public Usuario(Integer id, String password, String nombre, String apellidos, String correo, String cvesis) {
        this.id = id;
        this.password = password;
        this.nombre = nombre;
        this.apellidos = apellidos;
        this.correo = correo;
        this.cvesis = cvesis;
    }

    
    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getNombre() {
        return nombre;
    }

    public void setNombre(String nombre) {
        this.nombre = nombre;
    }

    public String getApellidos() {
        return apellidos;
    }

    public void setApellidos(String apellidos) {
        this.apellidos = apellidos;
    }

    public String getCorreo() {
        return correo;
    }

    public void setCorreo(String correo) {
        this.correo = correo;
    }

    public String getCvesis() {
        return cvesis;
    }

    public void setCvesis(String cvesis) {
        this.cvesis = cvesis;
    }

   
    @Override
    public String toString() {
        return "Usuario{" +
                "id=" + id +
                ", password='" + password + '\'' +
                ", nombre='" + nombre + '\'' +
                ", apellidos='" + apellidos + '\'' +
                ", correo='" + correo + '\'' +
                ", cvesis='" + cvesis + '\'' +
                '}';
    }
}

Soporte.java

package com.alquimista.tickets.model;

public class Soporte {
    private Integer id;
    private String password;
    private String nombre;
    private String apellidos;
    private String correo;

    public Soporte() {
    }

    public Soporte(Integer id, String password, String nombre, String apellidos, String correo) {
        this.id = id;
        this.password = password;
        this.nombre = nombre;
        this.apellidos = apellidos;
        this.correo = correo;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getNombre() {
        return nombre;
    }

    public void setNombre(String nombre) {
        this.nombre = nombre;
    }

    public String getApellidos() {
        return apellidos;
    }

    public void setApellidos(String apellidos) {
        this.apellidos = apellidos;
    }

    public String getCorreo() {
        return correo;
    }

    public void setCorreo(String correo) {
        this.correo = correo;
    }

    
    @Override
    public String toString() {
        return "Soporte{" +
                "id=" + id +
                ", password='" + password + '\'' +
                ", nombre='" + nombre + '\'' +
                ", apellidos='" + apellidos + '\'' +
                ", correo='" + correo + '\'' +
                '}';
    }
}

Solicitud.java

package com.alquimista.tickets.model;

import java.time.LocalDate;
import java.time.LocalDateTime;

public class Solicitud {
    private Long id;
    private String asunto;
    private Integer idUsuario;
    private Nivel nivel;
    private LocalDate fchreg;
    private LocalDateTime horreg;

    public Solicitud() {
    }

    public Solicitud(Long id, String asunto, Integer idUsuario, Nivel nivel, LocalDate fchreg, LocalDateTime horreg) {
        this.id = id;
        this.asunto = asunto;
        this.idUsuario = idUsuario;
        this.nivel = nivel;
        this.fchreg = fchreg;
        this.horreg = horreg;
    }

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getAsunto() {
        return asunto;
    }

    public void setAsunto(String asunto) {
        this.asunto = asunto;
    }

    public Integer getIdUsuario() {
        return idUsuario;
    }

    public void setIdUsuario(Integer idUsuario) {
        this.idUsuario = idUsuario;
    }

    public Nivel getNivel() {
        return nivel;
    }

    public void setNivel(Nivel nivel) {
        this.nivel = nivel;
    }

    public LocalDate getFchreg() {
        return fchreg;
    }

    public void setFchreg(LocalDate fchreg) {
        this.fchreg = fchreg;
    }

    public LocalDateTime getHorreg() {
        return horreg;
    }

    public void setHorreg(LocalDateTime horreg) {
        this.horreg = horreg;
    }

    
    @Override
    public String toString() {
        return "Solicitud{" +
                "id=" + id +
                ", asunto='" + asunto + '\'' +
                ", idUsuario=" + idUsuario +
                ", nivel=" + nivel +
                ", fchreg=" + fchreg +
                ", horreg=" + horreg +
                '}';
    }
}

Atencion.java

package com.alquimista.tickets.model;

import java.time.LocalDate;
import java.time.LocalDateTime;

public class Atencion {
    private Long id;
    private Long idSolicitud;
    private LocalDate fchreg;
    private LocalDateTime horreg;

    public Atencion() {
    }

    public Atencion(Long id, Long idSolicitud, LocalDate fchreg, LocalDateTime horreg) {
        this.id = id;
        this.idSolicitud = idSolicitud;
        this.fchreg = fchreg;
        this.horreg = horreg;
    }

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public Long getIdSolicitud() {
        return idSolicitud;
    }

    public void setIdSolicitud(Long idSolicitud) {
        this.idSolicitud = idSolicitud;
    }

    public LocalDate getFchreg() {
        return fchreg;
    }

    public void setFchreg(LocalDate fchreg) {
        this.fchreg = fchreg;
    }

    public LocalDateTime getHorreg() {
        return horreg;
    }

    public void setHorreg(LocalDateTime horreg) {
        this.horreg = horreg;
    }

    
    @Override
    public String toString() {
        return "Atencion{" +
                "id=" + id +
                ", idSolicitud=" + idSolicitud +
                ", fchreg=" + fchreg +
                ", horreg=" + horreg +
                '}';
    }
}

Y la enumeración:

Nivel.java

package com.alquimista.tickets.model;

public enum Nivel {
    A, B, M
}

Resumiendo:

Hemos creado el proyecto Spring Boot para la atención a tickets.

Hemos creado una clase tipo controller para una prueba sencilla.

Hemos creado los modelos de nuestro proyecto.

¿Qué es lo que sigue?

  • Crear la lógica de nuestra aplicación. 
  • El acceso a la capa de datos.

Enlaces:

https://alquimistadecodigo.blogspot.com/2026/05/consumir-un-servicio-spring-boot-desde.html
https://medium.com/@anandjeyaseelan10/spring-boot-project-structure-explained-best-practices-c2ba46ea57eb
https://www.hackaboss.com/blog/como-estructurar-un-proyecto-spring-boot-desde-cero
https://dev.to/kamlesh_patil/spring-boot-project-structure-best-practices-used-in-production-4h85
https://medium.com/@dinesharney/spring-data-jpa-vs-spring-data-jdbc-choosing-the-right-tool-for-your-application-646439efa3c6
https://www.reddit.com/r/SpringBoot/comments/1oul3co/difference_between_spring_data_jpa_vs_jpa_vs/

Comentarios

Entradas populares de este blog

Rocket: un framework web para Rust

Rocket Framework es: Un framework web escrito en Rust.   Inspirado en Rails, Flask, Bottle y Yesod.  Admite el manejo de solicitudes HTTP, Web Sockets, JSON, plantillas y más. Creando un proyecto con Rocket Framework En primer lugar, verificamos la instalación de Rust en nuestras máquinas: rustc - - version Continuamos con la configuración de Rust nightly como nuestra cadena de herramientas predeterminada ejecutando el comando: rustup default nightly Si lo prefieres, una vez que configuremos un directorio de proyecto en la siguiente sección, puedes usar anulaciones por directorio para usar la versión nocturna solo para tu proyecto Rocket ejecutando el siguiente comando en el directorio: rustup override set nightly Creamos nuevo proyecto `` hola-rocket `` y nos ubicamos en el directorio creado: cargo new hola - rocket - - bin cd hola - rocket Con Cargo, agregamos la dependencia de rocket: cargo add rocket Abrimos el archivo `` Cargo.toml `` Ca...

Odin language: el lenguaje de programación orientado a datos para un desarrollo de software sensato

En esta serie sobre lenguajes de programación hablamos de Odin , un lenguaje orientado a datos. Un nuevo lenguaje de programación que nos podrá recordar a lenguajes como C++, Python, Golang o hasta Rust. Instalación (Windows): 1 2 3 4 $ git clone https://github.com/odin-lang/Odin $ cd Odin $ git pull $ build.bat release Debemos asegurarnos de crear la variable de entorno: Nombre: ODIN_HOME Valor: C:\Users\HP\Documents\pruebasOdin\Odin Ejemplo 1. Como primer programa tendremos al clásico "Hola, mundo". holamundo.odin package holamundo import " core:fmt " main : : proc ( ) { fmt . println ( " ¡Hola, mundo desde Odin! " ) } Construimos: $ odin build holamundo . odin - file Ejecutamos: $ holamundo .exe Recordar que si usamos Visual Studio Code podemos instalar el plugin de Odin Language: https://marketplace.visualstudio.com/items?itemName=DanielGavin.ols Ejemplo 2. Programa que muestre las variables que pod...

Programación Windows Batch (CMD) parte 3

Crear ciclos para efectuar operaciones tediosas nos ahorrará tiempo para realizar otras tareas. En está ocasión veremos ciclos con FOR . ¿Cuál es la síntaxis de bucle FOR en Windows Batch? Si está dentro de un archivo *.bat : FOR %%variable IN (seq) DO operaciones Si lo ejecutamos en una terminal: FOR %variable IN (seq) DO operaciones Ejemplo 1 . Recorrer una secuencia de números del 0 al 5: recorrer.bat @ echo off FOR %%i in ( 0 1 2 3 4 5 ) DO echo Hola no. %%i pause Nos imprimirá en pantalla: Hola no. 0 Hola no. 1 Hola no. 2 Hola no. 3 Hola no. 4 Hola no. 5 ¿Puedo usar contadores? Si, se pueden usar. Ejemplo 2 . Uso de contadores: contador.bat @ echo off set numeros = 1 2 3 4 5 6 7 8 9 10 set cont = 0 for %%a in ( %numeros% ) do ( echo Hola no. %%a :: Contador set /a cont+ = 1 ) echo Total: %cont% Este código nos imprimirá, además de los mensajes Hola no. 0 ..., el total de valores conta...