En el tutorial anterior, aprendimos qué es la arquitectura REST, las seis restricciones rectoras de REST, cómo comprender los métodos de solicitud HTTP y sus códigos de respuesta, y la anatomía de un extremo de API RESTful.
En este tutorial, configuraremos un servidor para que viva nuestra API. Puede crear una API con cualquier lenguaje de programación y software de servidor, pero usaremos Nodo.jsque es la implementación de back-end de JavaScript, y Expresarun marco popular y mínimo para Node.
Tabla de contenidos
Instalación
Nuestro primer requisito previo es asegurarnos de que Node.js y npm estén instalados globalmente en la computadora. Podemos probar ambos usando el -v bandera, que mostrará la versión. Abra su símbolo del sistema y escriba lo siguiente.
node -v && npm -v v18.0.0 8.6.0
Sus versiones pueden ser ligeramente diferentes a la mía, pero siempre que ambas estén ahí, podemos comenzar.
Vamos a crear un directorio de proyecto llamado express-api y muévete hacia él.
mkdir express-api && cd express-api
Ahora que estamos en nuestro nuevo directorio, podemos inicializar nuestro proyecto con el comando init.
npm init
Este comando le pedirá que responda algunas preguntas sobre el proyecto, que puede elegir completar o no. Una vez completada la configuración, tendrá un paquete.json archivo que se ve así:
{
"name": "express-api",
"version": "1.0.0",
"description": "Node.js and Express REST API",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "Tania Rascia",
"license": "MIT"
}
Ahora que tenemos nuestro paquete.json, podemos instalar las dependencias requeridas para nuestro proyecto. Afortunadamente, no requerimos demasiadas dependencias, solo estas cuatro que se enumeran a continuación.
- analizador de cuerpo: Middleware de análisis del cuerpo.
- Rápido: Un framework web minimalista que usaremos para nuestro servidor.
- mysql: Un controlador MySQL.
- búsqueda de nodo (opcional): una forma sencilla de realizar llamadas HTTP.
Usaremos el install comando seguido de cada dependencia para terminar de configurar nuestro proyecto.
npm install body-parser express mysql request
Esto creará un paquete-bloqueo.json archivo y un node_modules directorio, y nuestro paquete.json se actualizará para verse algo como esto:
{
"name": "express-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"author": "AsyncBanana",
"license": "MIT",
"dependencies": {
"body-parser": "^1.19.2",
"express": "^4.17.3",
"mysql": "^2.18.1",
"node-fetch": "^3.2.0"
}
}
Luego, debemos agregar "type": "module" y un "scripts" objeto. "type": "module" le dice a Node que use Módulos ECMAScript (más sobre eso más adelante), y usaremos el "scripts" objeto para ayudarnos a ejecutar nuestro código.
{
"name": "express-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"author": "AsyncBanana",
"license": "MIT",
"dependencies": {
"body-parser": "^1.19.2",
"express": "^4.17.3",
"mysql": "^2.18.1",
"node-fetch": "^3.2.0"
},
"type": "module"
}
¿Qué son los módulos ECMAScript?
ECMAScript Modules (o ESM) es una nueva especificación sobre cómo conectar scripts en el navegador y en entornos como Node. Reemplaza las especificaciones heredadas como CommonJS (CJS), que Node usa de forma predeterminada. En este tutorial, utilizaremos todos los ESM.
Configuración de un servidor HTTP
Antes de comenzar a configurar un servidor Express, configuraremos rápidamente un servidor HTTP con el servidor integrado de Node. http módulo, para tener una idea de cómo funciona un servidor simple.
Crea un archivo llamado índice.js. Carga en el http módulo, configure un número de puerto (elegí 3001), y crea el servidor con el createServer() método.
// Build a server with Node's HTTP module
import { createServer } from "http";
const port = 3001;
const server = createServer();
En el artículo introductorio de REST, discutimos qué son las solicitudes y las respuestas con respecto a un servidor HTTP. Vamos a configurar nuestro servidor para manejar una solicitud y mostrar la URL solicitada en el lado del servidor, y mostrar un ¡Hola, servidor! mensaje al cliente en el lado de la respuesta.
server.on("request", (request, response) => {
console.log(`URL: ${request.url}`);
response.end("Hello, server!");
});
Finalmente, le diremos al servidor en qué puerto escuchar y mostraremos un error si lo hay.
// Start the server
server.listen(port, (error) => {
if (error) return console.log(`Error: ${error}`);
console.log(`Server is listening on port ${port}`);
});
Ahora, podemos iniciar nuestro servidor ejecutando el script npm que hicimos anteriormente
npm start
Verás esta respuesta en la terminal:
Server is listening on port 3001
Para comprobar que el servidor se está ejecutando, vaya a https://localhost:3001/ en la barra de direcciones de su navegador. Si todo funciona correctamente, debería ver ¡Hola, servidor! en la pagina. En su terminal, también verá las URL que se solicitaron.
URL: / URL: /favicon.ico
Si tuviera que navegar a https://localhost:3001/hellotu verias URL: /hello.
También podemos usar cURL en nuestro servidor local, que nos mostrará los encabezados y el cuerpo exactos que se devuelven.
curl -i http://localhost:3001 HTTP/1.1 200 OK Date: Sun, 08 May 2022 14:03:19 GMT Connection: keep-alive Keep-Alive: timeout=5 Content-Length: 14 Hello, server!
Si cierra la ventana de la terminal en cualquier momento, el servidor desaparecerá.
Ahora que tenemos una idea de cómo funcionan juntos el servidor, la solicitud y la respuesta, podemos reescribir esto en Express, que tiene una interfaz aún más simple y funciones ampliadas.
Configuración de un servidor Express
Ahora, reemplazaremos nuestro código en índice.js con el código de nuestro proyecto actual
Pon el siguiente código en índice.js.
// Import packages and set the port import express from "express"; const port = 3002; const app = express();
Ahora, en lugar de buscar todas las solicitudes, indicaremos explícitamente que estamos buscando una GET solicitud en la raíz del servidor (/). Cuando / recibe una solicitud, mostraremos la URL solicitada y el mensaje «¡Hola servidor!» mensaje.
app.get("/", (request, response) => {
console.log(`URL: ${request.url}`);
response.send("Hello, Server!");
});
Finalmente, iniciaremos el servidor en el puerto. 3002 con el listen() método.
const server = app.listen(port, (error) => {
if (error) return console.log(`Error: ${error}`);
console.log(`Server listening on port ${server.address().port}`);
});
Ahora podemos usar npm start para iniciar el servidor, y veremos nuestro mensaje de servidor en la terminal.
Server listening on port 3002
Si ejecutamos un curl -i en la URL, veremos que funciona con Express ahora, y hay algunos encabezados adicionales como Content-Type.
HTTP/1.1 200 OK X-Powered-By: Express Content-Type: text/html; charset=utf-8 Content-Length: 14 ETag: W/"e-gaHDsc0MZK+LfDiTM4ruVL4pUqI" Date: Wed, 15 Aug 2018 22:38:45 GMT Connection: keep-alive Hello, Server!
Agregar middleware de análisis de cuerpo
Para tratar con facilidad POST y PUT solicitudes a nuestra API, agregaremos middleware de análisis de cuerpo. Aquí es donde nuestro body-parser entra el modulo. body-parser extraerá el cuerpo completo de una solicitud entrante y lo analizará en un objeto JSON con el que podamos trabajar.
Simplemente necesitaremos el módulo en la parte superior de nuestro archivo. Agrega lo siguiente import declaración a la parte superior de su índice.js expediente.
import bodyParser from "body-parser"; ...
Luego le diremos a nuestra aplicación Express que use body-parsery busque JSON.
// Use Node.js body parsing middleware
app.use(bodyParser.json());
app.use(
bodyParser.urlencoded({
extended: true,
})
);
Además, cambiemos nuestro mensaje para enviar un objeto JSON como respuesta en lugar de texto sin formato.
response.send({message: "Node.js and Express REST API"});
Lo siguiente es nuestro completo índice.js archivo tal como está ahora.
// Import packages and set the port
import bodyParser from "body-parser";
import express from "express";
const port = 3002;
const app = express();
// Use Node.js body parsing middleware
app.use(bodyParser.json());
app.use(
bodyParser.urlencoded({
extended: true,
})
);
app.get("/", (request, response) => {
response.send({
message: "Node.js and Express REST API",
});
});
// Start the server
const server = app.listen(port, (error) => {
if (error) return console.log(`Error: ${error}`);
console.log(`Server listening on port ${server.address().port}`);
});
Si envías un curl -i al servidor, verá que el encabezado ahora regresa Content-Type: application/json; charset=utf-8.
Configurar rutas
Hasta el momento solo tenemos un GET ruta a la raíz (/), pero nuestra API debería poder manejar los cuatro principales métodos de solicitud HTTP en múltiples URL. Vamos a configurar un enrutador y crear algunos datos falsos para mostrar.
Vamos a crear un nuevo directorio llamado rutasy un archivo dentro llamado rutas.js. Lo vincularemos en la parte superior de índice.js.
import routes from "./routes/routes.js";
Tenga en cuenta que el .js la extensión no es necesaria en el requisito. Ahora moveremos nuestra aplicación GET oyente de rutas.js. Ingrese el siguiente código en rutas.js.
const router = (app) => {
app.get("/", (request, response) => {
response.send({
message: "Node.js and Express REST API",
});
});
};
Finalmente, exporte el router para que podamos usarlo en nuestro índice.js expediente.
// Export the router export default router;
En índice.jsReemplace la app.get() código que tenía antes con una llamada a routes():
routes(app);
Ahora debería poder ir a http://localhost:3002 y ver lo mismo que antes. (¡No olvides reiniciar el servidor!)
Una vez que todo esté configurado y funcione correctamente, proporcionaremos algunos datos JSON con otra ruta. Solo usaremos datos falsos por ahora, ya que nuestra base de datos aún no está configurada.
Vamos a crear un users variable en rutas.jscon algunos datos de usuario falsos en formato JSON.
const users = [
{
id: 1,
name: "Richard Hendricks",
email: "richard@piedpiper.com",
},
{
id: 2,
name: "Bertram Gilfoyle",
email: "gilfoyle@piedpiper.com",
},
];
Agregaremos otro GET ruta a nuestro router, /usersy enviar los datos del usuario a través de.
app.get("/users", (request, response) => {
response.send(users);
});
Después de reiniciar el servidor, ahora puede navegar a http://localhost:3002/users y ver todos nuestros datos mostrados.
Nota: si no tiene una extensión de visor JSON en su navegador, le recomiendo que descargue una, como JSONVue para cromo. ¡Esto hará que los datos sean mucho más fáciles de leer!
Visita nuestro Repositorio de GitHub para ver el código completo de esta publicación y compararlo con el suyo.
Conclusión
En este tutorial, aprendimos cómo configurar un servidor HTTP integrado y un servidor Express en el nodo, enrutar solicitudes y URL, y consumir datos JSON con solicitudes de obtención.
En la última entrega de la serie RESTful API, conectaremos nuestro servidor Express a MySQL para crear, ver, actualizar y eliminar usuarios en una base de datos, finalizando la funcionalidad de nuestra API.
