Consumir un servicio Spring Boot desde React (3ra parte)

Continuamos con la tercera parte de la creación 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á.

Recapitulando:

Tenemos creado el diseño teórico de la aplicación.
Su base de datos y tablas.
El esqueleto del proyecto con Spring Boot.

En está ocasión crearemos la aplicación web con la ayuda de Vite y React.

Comencemos pues con la creación del proyecto.

Creando el proyecto con Vite (y React)

Requisitos:

Node.js instalado (última versión).
npm (se instala junto con Node).
Un editor de código como Visual Studio Code o cualquier otro.

¿Por qué Vite?

Vite es una herramienta que nos facilita el desarrollo aplicaciones web. Ofrece un servidor de desarrollo instantáneo con recarga en caliente (HMR) ultrarrápido y compilaciones optimizadas para producción. Es compatible con frameworks populares como React, Vue y Svelt.

¿Por qué React?

React ha cobrado fuerza últimamente en el desarrollo de aplicaciones web. Es ligera pero posee lo esencial para crear aplicaciones completas. Se integra con tecnologías como Spring Boot, PHP, Flask, FastAPI, etc.

1. Abrimos una terminal para crear el proyecto:

$ npm create vite@latest tickets-app -- --template react
$ cd tickets-app
$ npm install

Con esto nos ubicamos e instalamos las dependencias (como React, ReactDOM y otras).

2. Iniciamos el servidor:

$ npm run dev

Esto levanta un servidor en la ruta http://localhost:5173.

Cuando se tiene la versión final del proyecto se usa este comando:

$ npm run build

Terminamos la ejecución con Ctrl + C o Ctrl + D.

3. Estructura del proyecto:

tickets-app/
  .gitignore
  eslint.config.js
  index.html
  node_modules
  package-lock.json
  package.json
  public
  README.md
  src/
    App.css
    App.jsx
    assets
    index.css
    main.jsx
  vite.config.js

Diseñando los servicios (endpoints)

Método	Endpoint	Descripción
GET	/api/usuarios/all	Obtiene todos los usuarios registrados.
GET	/api/usuarios/{id}	Obtiene un usuario por id.
POST	/api/usuarios/new	Crea un nuevo usuario.
PUT	/api/usuarios/update	Actualiza un usuario.
DELETE	/api/usuarios/delete/{id}	Elimina un usuario por id.
GET	/api/soporte/all	Obtiene todo el personal de soporte registrados.
GET	/api/soporte/{id}	Obtiene un personal de soporte por id.
POST	/api/soporte/new	Crea un nuevo personal de soporte.
PUT	/api/soporte/new	Actualiza un personal de soporte.
DELETE	/api/soporte/delete/{id}	Elimina un personal de soporte por id.
GET	/api/solicitud/all	Obtiene todas las solicitudes registradas.
GET	/api/solicitud/{id}	Obtiene una solicitud por id.
POST	/api/solicitud/new	Crea una nueva solicitud.
PUT	/api/solicitud/update}	Actualiza una solicitud.
DELETE	/api/solicitud/delete/{id}	Elimina una solicitud por id.
GET	/api/atencion/all	Obtiene todos los solicitudes atendidas y registradas.
GET	/api/atencion/{id}	Obtiene una solicitud atendida por id.
POST	/api/atencion/new	Crea una nueva solicitud.
PUT	/api/atencion/update	Actualiza una solicitud atendida.
DELETE	/api/atencion/delete/{id}	Elimina una solicitud atendida por id.

Estos servicios se crearán del lado del servidor (backend), es decir del lado de Spring Boot para ser usados por el frontend, la aplicación Vite + React.

Continuaremos más adelante en la próxima entrega.

Enlaces:

https://es.react.dev/
https://vite.dev/
https://alquimistadecodigo.blogspot.com/2026/05/consumir-un-servicio-spring-boot-desde.html
https://alquimistadecodigo.blogspot.com/2026/08/consumir-un-servicio-spring-boot-desde.html
https://alquimistadecodigo.blogspot.com/2026/02/typescript-en-otro-vistazo-con-vite.html

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...

Alquimista de código

Buscar este blog