Comunicar el frontend con el backend es una de las habilidades más valiosas que puedes desarrollar como programador web. En esta ocasión se aborda cómo un jugador selecciona su mokepon, empaqueta esa información en formato JSON y la envía al servidor mediante una petición POST, donde Express la recibe, la procesa y la asigna al jugador correcto.
¿Qué es JSON y por qué es fundamental en JavaScript?
JSON (JavaScript Object Notation) es una forma de representar datos estructurados directamente en JavaScript [01:30]. A diferencia de las clases, con JSON defines estructura y datos en una sola ocasión usando pares clave-valor separados por dos puntos y encerrados entre llaves.
Un ejemplo sencillo luce así:
{
"nombre": "Diana",
"edad": 27
}
- La clave funciona como el nombre de una variable.
- El valor puede ser cualquier dato válido en JavaScript: cadena de texto, número, booleano, otro objeto, etc.
- Varios pares se separan por comas.
JSON es el formato estándar para intercambiar información entre cliente y servidor a través de APIs. Puedes visualizarlo como una cajita que transporta datos en ambas direcciones [02:18].
¿Cómo configurar Express para recibir peticiones POST con JSON?
Antes de crear el nuevo endpoint, conviene resolver de raíz los errores de CORS (Cross-Origin Resource Sharing) [04:02]. Para ello se instala la librería cors:
bash
npm install cors
Luego se importa y se activa junto con el soporte para JSON en el cuerpo de las peticiones:
javascript
const cors = require('cors')
app.use(cors())
app.use(express.json())
app.use(cors()) elimina restricciones de acceso entre orígenes distintos.app.use(express.json()) habilita la recepción de cuerpos en formato JSON en peticiones POST [05:10].
¿Cómo se define un endpoint POST con parámetros en la URL?
El segundo servicio utiliza una variable tipo parámetro en la ruta, indicada con dos puntos [05:45]:
javascript
app.post('/mokepon/:jugadorId', (req, res) => {
const jugadorId = req.params.jugadorId || ''
console.log(jugadores)
console.log(jugadorId)
res.end()
})
req.params.jugadorId extrae el valor que llega en la URL.res.end() cierra la respuesta para que el navegador no se quede esperando.
¿Cómo se envía la petición POST desde el frontend con fetch?
Desde el archivo JavaScript del cliente, se llama a fetch con un segundo argumento de configuración [09:00]:
javascript
fetch(http://localhost:8080/mokepon/${jugadorId}, {
method: 'post',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify({
mokepon: mascotaJugador
})
})
- method: indica que es una petición POST.
- headers: el header
content-type con valor application/json le dice al servidor qué tipo de datos viajan.
- body:
JSON.stringify() convierte el objeto JSON en una cadena de texto, requisito del estándar fetch [10:25].
- No se agrega
.then() porque esta petición no espera respuesta del servidor.
La URL se construye con template strings, utilizando la comilla invertida y la sintaxis ${variable} para insertar el jugadorId dinámicamente.
¿Cómo se asigna el mokepon al jugador en el backend?
Primero se crea la clase Mokepon y se agrega un método asignarMokepon a la clase Jugador [13:10]:
javascript
class Mokepon {
constructor(nombre) {
this.nombre = nombre
}
}
// Dentro de la clase Jugador
asignarMokepon(mokepon) {
this.mokepon = mokepon
}
Después, en el endpoint POST, se extrae el nombre del mokepon desde req.body, se crea el objeto y se busca al jugador con findIndex [14:30]:
javascript
const { mokepon: nombre } = req.body
const mokepon = new Mokepon(nombre)
const jugadorIndex = jugadores.findIndex(
(jugador) => jugador.id === jugadorId
)
if (jugadorIndex >= 0) {
jugadores[jugadorIndex].asignarMokepon(mokepon)
}
- findIndex recorre la lista y devuelve la posición del elemento que cumple la condición. Si no lo encuentra, retorna -1 [14:55].
- Solo cuando el índice es mayor o igual a cero se procede a asignar el mokepon, evitando errores con jugadores inexistentes.
Al recargar el navegador, seleccionar un mokepon y revisar la consola del servidor, se confirma que el jugador ya tiene su mokepon asignado correctamente [16:50].
Con estos pasos ya dominas el flujo completo: el usuario elige su mokepon en el frontend, esa elección viaja como JSON en una petición POST, Express la recibe, localiza al jugador y le asigna la mascota. ¿Qué mokepon elegirías tú para tu primera partida? Comparte tu experiencia en los comentarios.
