Enviar Mokepon al servidor con POST y JSON

Conectar el front-end con el back-end requiere algo más que generar IDs: necesitas enviar y recibir datos reales. Aquí aprendes a usar objetos JSON, peticiones POST y la librería CORS en Express para que cada jugador seleccione su Mokepon y lo comunique al servidor en tiempo real.

Esta guía te sirve si ya tienes un endpoint GET funcionando y quieres dar el siguiente paso: enviar información estructurada desde el cliente, procesarla en el servidor y asignarla a un objeto dentro de tu lógica de juego.

¿Qué es JSON y por qué lo usamos para comunicar APIs?

JSON es la forma estándar de mover datos entre cliente y servidor cuando trabajas con ExpressJS [01:21].

JSON significa JavaScript Object Notation y funciona como una caja que transporta información entre el front-end y el back-end. A diferencia de las clases, no defines primero la estructura y luego los datos: lo haces todo al mismo tiempo.

La sintaxis se basa en pares clave-valor encerrados entre llaves. La clave es un nombre válido como variable y el valor puede ser una cadena, un número u otro tipo de dato. Cada par se separa con coma.

¿Cómo se ve un objeto JSON básico? Algo así: { nombre: "Diana", edad: 27 }. La clave va a la izquierda, el valor a la derecha y los dos puntos los separan.

¿Qué datos viajan en el paquete JSON del juego?

El jugador envía dos cosas al servidor cuando selecciona su Mokepon:

• El ID del jugador que está enviando la selección.
• El nombre del Mokepon elegido.

Con eso el servidor anota la selección en la lista y los demás jugadores podrán verla.

¿Cómo configurar CORS y JSON en Express sin errores?

Antes de crear el endpoint, hay que resolver dos cosas en el servidor para evitar errores de origen cruzado y permitir recibir cuerpos JSON [04:30].

Instala la librería con npm install cors, impórtala con const cors = require('cors') y úsala con app.use(cors()). Esto reemplaza la configuración manual de headers y deja todo listo de forma transparente.

Después habilita la lectura de JSON en el cuerpo de las peticiones con app.use(express.json()). Sin esta línea, las peticiones POST no podrán leer la información que envías desde el cliente.

¿Cómo crear un endpoint POST que reciba el Mokepon seleccionado?

El segundo servicio del juego usa el método POST porque recibe datos, no solo los entrega [06:15].

La ruta es /mokepon/:jugadorId. Los dos puntos antes de jugadorId definen un parámetro de URL en Express, lo que permite saber qué jugador está enviando la selección.

javascript app.post('/mokepon/:jugadorId', (req, res) => { const jugadorId = req.params.jugadorId || '' const nombre = req.body.mokepon || '' const mokepon = new Mokepon(nombre)

const jugadorIndex = jugadores.findIndex(
    (jugador) => jugador.id === jugadorId
)

if (jugadorIndex >= 0) {
    jugadores[jugadorIndex].asignarMokepon(mokepon)
}

res.end()

})

Del lado del servidor extraes el ID desde req.params y el nombre del Mokepon desde req.body. Si alguno no llega, asignas una cadena vacía como respaldo. Cierras la respuesta con res.end() para que el navegador no quede esperando.

¿Cómo enviar la petición POST desde el front-end con fetch?

Por defecto, fetch hace peticiones GET. Para convertirla en POST necesitas un segundo argumento con la configuración [12:40].

javascript function seleccionarMokepon(mascotaJugador) { fetch(http://localhost:8080/mokepon/${jugadorId}, { method: 'post', headers: { "content-type": "application/json" }, body: JSON.stringify({ mokepon: mascotaJugador }) }) }

Tres detalles importantes en esa configuración:

• El método se declara como 'post'.
• El header content-type con valor application/json le dice al servidor qué tipo de dato recibe.
• El body se transforma con JSON.stringify() porque fetch exige que el cuerpo sea una cadena de texto.

¿Por qué uso JSON.stringify en el body? Porque fetch no acepta objetos directamente como cuerpo. Convertir el JSON a string permite que viaje por la red y el servidor lo reconstruya gracias a express.json().

La URL usa template strings con comilla invertida y ${jugadorId} para insertar el ID del jugador de forma dinámica. Esa variable se declara como let jugadorId = null al inicio y se actualiza con la respuesta del endpoint de unirse a la partida.

¿Cómo asignar el Mokepon al jugador correcto en el back-end?

El servidor necesita encontrar al jugador dentro de la lista y asignarle el Mokepon que acaba de elegir [16:50].

Primero creas la clase Mokepon con un constructor que recibe el nombre y luego agregas un método asignarMokepon(mokepon) dentro de la clase Jugador que guarda la referencia con this.mokepon = mokepon.

javascript class Mokepon { constructor(nombre) { this.nombre = nombre } }

class Jugador { // ... asignarMokepon(mokepon) { this.mokepon = mokepon } }

Para localizar al jugador usas findIndex, un método de los arreglos que devuelve la posición del elemento que cumpla una condición. Si lo encuentra, regresa el índice; si no, devuelve -1.

La validación if (jugadorIndex >= 0) evita que intentes asignar un Mokepon a un jugador que no existe. Cuando el índice es válido, accedes al elemento con jugadores[jugadorIndex] y llamas a asignarMokepon(mokepon).

¿Qué hace findIndex en JavaScript? Recorre el arreglo, evalúa una condición en cada elemento y retorna el índice del primer match. Si nada coincide, devuelve -1, lo que sirve como señal de que no existe.

Al probarlo, los console.log muestran al jugador con su ID, su tipo de objeto y el Mokepon asignado con el nombre correcto, por ejemplo Ratihuella o Capipepo. Con eso confirmas que la cadena completa funciona: selección en el front, envío por POST, recepción en Express y asignación al objeto en memoria.

¿Cómo te imaginas extender este flujo para sincronizar las coordenadas del mapa entre todos los jugadores? Cuéntalo en los comentarios.