Selección de Mokepon y Comunicación JSON en Express.js

El intercambio de información entre un backend y un frontend puede realizarse de varias formas. Será importante para ti como programador identificar cuándo utilizar cada uno de ellas.

Notación de Objetos de Javascript

JSON, o Javascript Object Notation es un estándar para la transferencia de datos entre dos sistemas. Hoy en día, casi todos los protocolos de Internet funcionan por detrás con JSON cuando se trata de enviar y recibir información.

Su sintaxis es algo particular y puede causar confusión al principio. Comprendamos cómo se estructura un JSON y para qué nos servirá:

Un JSON está compuesto por claves para acceder a determinados valores.

El formato JSON no deja de ser texto simple. Para acceder a su información, debemos “parsearlo” para convertir el mismo en un objeto y así poder obtener el valor de sus datos. Para lograr esto, empleamos la función propia de JavaScript JSON.parse(').

Un JSON es un objeto y dentro del mismo puede tener datos del tipo numéricos, texto, booleanos u otros objetos.

Habilitando JSON en ExpressJS

Para enviar y recibir información en formato JSON con ExpressJS, debes activarlo de forma muy simple.

// Importamos y creamos la aplicación de Express
const express = require('express');
const app = express();

// Activamos el formato JSON
app.use(express.json());

Con esta simple línea de código, tus endpoints ya puede procesar información en formato JSON.

Envío de parámetros al backend

Otra manera de enviar información al backend es a través de los parámetros de URL. Los mismos componen y son parte de la URL, por lo tanto, serán obligatorios.

Presta atención al siguiente endpoint:

// Creamos un endpoint del tipo POST
app.post('/datos/:id', (req, res) => {
    const id = req.param.id;      // Capturamos parámetros de URL
    const body = req.body;        // Capturamos el cuerpo de la solicitud
    console.log(id);
    console.log(body);
})

Observa el :id, el mismo espera recibir un identificador o un número de forma dinámica para utilizar en el código. Puedes capturar este dato por su nombre req.param.id. Si te das cuenta, req es un objeto que tiene un sub-objeto llamado param y dentro posee este el parámetro que envía el cliente desde el front-end.

{
    "req": {
        "param": {
            "id": 123
        }
    }
}

Puedes enviar este parámetro de URL más información en el cuerpo de la solicitud en formato JSON desde el front-end con el siguiente fetch:

const id = 123;
fetch(`http://localhost:3000/datos/${id}`, {    // Parámetro de URL
    method: 'post',          // Indicamos que el endpoint es un POST
    headers: {
      'Content-Type': 'application/json'        // Indicamos que estamos enviando un JSON
    },
    body: JSON.stringify({    // Creamos un JSON con la información para el backend
      datos: '12345'
    })
  })
  .then(response => response.json())
  .then(data => {
    console.log(data);        // Recibimos la respuesta del backend
  });

Los endpoints puede recibir un JSON en el body o el cuerpo de la solicitud. En el mismo puedes enviar tanta información como el backend necesite. Mientras que los parámetros de URL se suelen utilizar para enviar IDs o identificadores de una solo registro.

Conclusión

Dos formas de enviar información al backend o recibirlas en el front-end, JSON y parámetros de URL. Poco a poco entenderás cuándo usar cada uno. Cuando se trata de mucha información o un solo dato.

Más allá del lenguaje de programación que estamos utilizando, en este caso Javascript junto con NodeJS y ExpressJS, todos funcionan exactamente de la misma manera. Si aprendes a hacerlo con un lenguaje, los conceptos te servirán por siempre para cualquier otro que quieras aprender.

---

Contribución creada por Kevin Fiorentino (Platzi Contributor) con aportes de Anyilo José Rangel Arias.