Consumir un servicio Spring Boot desde React

Como desarrolladores web, específicamente de Java y Spring Boot, muchas veces tenemos a la vista miles de opciones para crear el frontend. Angular, Vue, Svelte y React siempre están a la cabeza de todas ellas.

Actualmente React está llevando la delantera aunque Angular y Vue no se quedan muy atrás.

En esta ocasión crearemos una aplicación backend con Spring Boot (con Java como lenguaje base) y un sencillo frontend con React.

¿Qué aplicación crearemos?

Se tratará de una aplicación web para crear tickets de soporte técnico donde:

• El usuario indicará el problema y lo enviará al equipo de soporte. 
• El equipo del soporte lo recibirá y atenderá.

Hay otros factores a tomar en cuenta como lo pueden ser:

• El tiempo de espera del usuario. 
• El nivel de prioridad de su solicitud (que afectará el tiempo de espera).

Un ticket o solicitud puede esperar más si no es grave o urgente.

¿Qué herramientas necesitamos?

• Tener el JDK 21 instalado. 
• Tener Maven instalado. 
• Tener Node instalado (usaremos Vite).
• Tener MariaDB o MySQL instalado.
• Un editor como Visual Studio Code o Eclipse IDE (o IntelliJIDEA).

Nota: Nosotros no usaremos alguna herramienta I.A. para hacer está aplicación, por lo que esta entrega puede estar dividida en varias para no hacerlo muy extenso.

En un mundo donde actualmente crear aplicaciones con I.A. tan solo lleva unos minutos ser transgresor y usar un poco el cerebro para hacerlo uno mismo puede ser considerado una enajenación. Hagámoslo posible.

Creando la aplicación de tickets de soporte técnico

Comenzaremos con el siguiente plan.

• Saber que debo resolver. 
• Tener claro lo que se debe hacer para resolverlo. 
• Tener las herramientas para hacerlo.
• Si las condiciones se cumplen, entonces procedemos con el aspecto técnico.

MariaDB para la base de datos

1. Entramos a MariaDB:

# Escribe tu contraseña
$ mysql -u root -p

2. Una vez dentro, procedemos a crear la base de datos de nuestra aplicación y usarla:

> create database soporte_tecnico;
> use soporte_tecnico;

3. Ahora crearemos la siguiente tablas para los usuarios y el soporte técnico:

Para el usuario:

CREATE OR REPLACE TABLE usuarios(
id int PRIMARY KEY, password varchar(255),
nombre varchar(255), apellidos varchar(255),
correo varchar(255), cvesis varchar(255)
);

Para el soporte técnico:

CREATE OR REPLACE TABLE soporte(
id int PRIMARY KEY, password varchar(255),
nombre varchar(255), apellidos varchar(255),
correo varchar(255)
);

Podemos insertar unos valores para no tener vacías las tablas:

-- Usuario
INSERT INTO usuarios(id,password, nombre, apellidos ,correo , cvesis) 
VALUES(1,'s3cR3t4', 'Maria Joaquina', 'Sotero Vazquez', 'sotero.vazquez.joaquina@sedec.edu.mx', 'infomatic');
-- soporte técnico
INSERT INTO soporte(id, password, nombre, apellidos ,correo ) 
VALUES (1, '3St03s0cvul&','Daniela','Torres Carbajal', 'torres.carbajal.daniela@supptec.sedec.edu.mx');

Para la solicitud de tickets:

CREATE OR REPLACE TABLE solicitud (
    id BIGINT AUTO_INCREMENT PRIMARY KEY,
    asunto VARCHAR(500) NOT NULL,
    id_usuario INT NOT NULL,
    nivel ENUM('A','B','M'),
    fchreg DATE DEFAULT CURRENT_DATE,
    horreg TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (id_usuario) REFERENCES usuarios(id)
);

Para la atención de los tickets:

CREATE OR REPLACE TABLE atencion (
    id BIGINT AUTO_INCREMENT PRIMARY KEY,
    id_solicitud BIGINT NOT NULL,
    fchreg DATE DEFAULT CURRENT_DATE,
    horreg TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (id_solicitud) REFERENCES solicitud(id)
);

La lógica de estas tablas la podremos ver a continuación en el diseño de pantallas de nuestra aplicación.

Diseño de la aplicación

No es que nos adelantemos sino que hay que tener un bosquejo de cómo quedará la aplicación.

Para el usuario:

Para el encargado de soporte técnico:

Aunque todavía no hemos escrito ninguna línea de código hemos avanzado con la lógica de negocio.

En la próxima entrega continuaremos creando nuestra aplicación.

Nota: Salvo las imágenes generadas por I.A., no la usamos para crear esta aplicación.

Enlaces:

https://alquimistadecodigo.blogspot.com/2025/11/react-en-otro-vistazo-una-sencilla.html
https://alquimistadecodigo.blogspot.com/2025/08/spring-boot-en-un-vistazo.html
https://alquimistadecodigo.blogspot.com/2025/09/spring-boot-consumiendo-un-sencillo.html
https://certidevs.com/tutorial-spring-boot-reactjs
https://es.react.dev/
https://vite.dev/
https://developer.mozilla.org/es/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started