Creación de una aplicación web del marco Express

  • 8 minutos

Las empresas suelen almacenar una gran cantidad de datos en sistemas de archivos y bases de datos. Para acceder a esos datos, los proporcionan por medio de aplicaciones web de API mediante HTTP.

Servidores web y aplicaciones web

Un servidor web es un fragmento de software que responde a las solicitudes de los clientes. Una aplicación web se encuentra sobre el servidor web. Algunos entornos, como Node.js, proporcionan el servidor web y la aplicación web en un marco. En este módulo, el módulo HTTP proporciona el servidor web. El marco Express.js proporciona la aplicación web e incluye el servidor web.

Más información:

  • Aplicaciones web: la aplicación entrega una aplicación web al cliente:
    • Visualmente con HTML, CSS y JavaScript
    • Datos con API
    • Tanto los objetos visuales como los datos con una combinación de HTML, CSS, JavaScript y API. Esto se considera una aplicación monolítica.
  • Enrutamiento de direcciones URL: el enrutamiento de direcciones URL es un mecanismo para proporcionar la función del servidor web cuando se solicita una dirección URL específica. Por ejemplo, la dirección URL /products podría estar asociada a una función que devuelve una lista de productos. La dirección URL /products/1 podría estar asociada a una función que devuelve un producto específico.
  • Encabezados HTTP: estos son pares clave-valor que se envían del cliente al servidor. Incluyen información sobre la solicitud o la respuesta.
    • Compatibilidad con tipos de contenido diferentes: Un cliente puede solicitar datos en un formato específico y puede devolverlos en ese formato, como texto sin formato, JSON, HTML o CSV.
    • Autenticación o autorización: algunos datos pueden ser confidenciales. Es posible que un usuario tenga que iniciar sesión o disponer de un rol o nivel de permiso concreto para acceder a los datos. Esto se controla en el encabezado HTTP.
  • Intercambio de datos: puede que los usuarios necesiten ver y agregar datos al sistema. Para agregar datos, los usuarios pueden introducirlos en un formulario o cargar archivos.
  • Tiempo de comercialización: para crear aplicaciones web y API de forma eficaz, elija las herramientas y marcos que proporcionen soluciones a problemas comunes. Estas opciones ayudan al desarrollador a satisfacer rápidamente los requisitos comerciales del trabajo.

Módulo HTTP en Node.js

Node.js incluye un módulo HTTP integrado. Se trata de un módulo relativamente pequeño y que controla la mayoría de los tipos de solicitudes. Admite tipos comunes de datos como encabezados, la dirección URL y los datos.

El ejemplo de código siguiente es un servidor web sencillo que escucha las solicitudes entrantes en el puerto 3000. Responde con un mensaje de texto hello world sencillo al cliente, independientemente de la ruta de dirección URL o los encabezados HTTP usados.

// Include the HTTP module
const http = require('http');

// Set the port to 3000
const PORT = 3000;

// 1. Process incoming requests (req), reply with response (res)
const requestHandler = (req, res) => {

  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('hello world');
}

// 2. Create a server with the requestHandler
const server = http.createServer(requestHandler);

// 3. Start listening for incoming requests on port
server.listen(PORT, () => {
  console.log(`listening on port ${PORT}`)
})

En este ejemplo se configura la aplicación web con los pasos siguientes:

  1. requestHandler: la función lee la solicitud (req) y determina qué respuesta (res) que se va a enviar.
  2. server: el método createServer() se define con el controlador de solicitudes. Dado que solo hay un controlador de solicitudes, el servidor siempre responderá con la misma respuesta. En una aplicación real, tendría varios controladores de solicitudes para controlar diferentes tipos de solicitudes y rutas diferentes. Esto se tratará con más detalle posteriormente.
  3. server.listen: el método listen() se invoca con un puerto especificado. Después de la llamada al método listen(), el servidor está listo para aceptar solicitudes de cliente. Cuando se ejecute localmente, la aplicación estará disponible en http://localhost:3000. La instrucción console.log se ejecuta a fin de que el desarrollador sepa que el servidor está listo para usarse.

En este ejemplo de código Express.js se usan varios estilos de funciones:

  • devolución de llamada en server.listen(PORT string, callback_function)
  • función de flecha en requestHandler = (req, res) => {}, que tiene reglas de ámbito diferentes a las de una función normal

Marco Express.js

Hasta ahora, ha visto las funciones del módulo HTTP de Node.js. Es una opción perfectamente válida en aplicaciones web más pequeñas. Si una aplicación aumenta de tamaño, un marco como Express puede ayudarle a crear la arquitectura de una manera escalable.

Después de haber compilado varias aplicaciones web, comprobará que resuelve una y otra vez los mismos problemas. Problemas como la administración de rutas, la autenticación y la autorización, o la administración de errores son habituales. Llegado a este punto, empieza a buscar un marco como Express que se encargue de estos problemas, ya sea parcial o totalmente.

Administración de rutas en Express

Cuando un cliente realiza una solicitud a una aplicación web, usa una dirección URL, es decir, una dirección que apunta a un servidor concreto. Una dirección URL puede tener el aspecto siguiente:

http://localhost:3000/products

El término localhost de la URL hace referencia a su equipo. En una dirección URL más orientada a producción, posiblemente el término localhost se sustituya por un nombre de dominio como microsoft.com. La parte final de la dirección URL es la ruta. Decide a qué lugar lógico concreto del servidor dirigirse. En este caso, la ruta es /products.

En el marco Express se usan la dirección URL, la ruta y verbos HTTP para la administración de rutas. Los verbos HTTP como post, put y get describen la acción deseada por el cliente. Cada verbo HTTP tiene un significado específico para lo que debería ocurrir con los datos. Express ayuda a registrar rutas y a emparejarlas con los verbos HTTP adecuados para organizar la aplicación web. Express dispone de métodos dedicados para administrar distintos verbos HTTP y un sistema inteligente para asociar diferentes rutas con otras partes del código.

En el ejemplo siguiente, Express le ayuda a controlar las solicitudes dirigidas a una ruta con la dirección /products asociada con el verbo HTTP get:

app.get('/products', (req, res) => {
  // handle the request
})

Express ve app.get para /products diferente de app.post para /products, tal como se muestra en este ejemplo de código siguiente:

app.get('/products', (req, res) => {
  // handle the request
})

app.post('/products', (req, res) => {
  // handle the request
})

El verbo HTTP get significa que un usuario quiere leer datos. El verbo HTTP post significa que un usuario quiere escribir datos. Es habitual dividir la aplicación para que distintos emparejamientos de verbo y ruta ejecuten otras partes del código. Este concepto se describirá con más detalle posteriormente.

Servicio de tipos de contenido diferentes

Express admite muchos formatos de contenido diferentes que se pueden devolver a un cliente que realiza la llamada. El objeto res incluye un conjunto de funciones auxiliares para devolver distintos tipos de datos. Para devolver texto sin formato, usaríamos el método send() así:

res.send('plain text')

Para otros tipos de datos, como JSON, existen métodos dedicados que garantizan el tipo de contenido y las conversiones de datos correctos. Para devolver JSON en Express, use el método json() de esta forma:

res.json({ id: 1, name: "Catcher in the Rye" })

El método de código de Express anterior equivale a este código de módulo HTTP:

res.writeHead(200, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ id: 1, name: "Catcher in the Rye" }))

Se establece el encabezado Content-Type, y la respuesta también se convierte de un objeto JavaScript a una cadena antes de devolverla al cliente que realiza la llamada.

Si se comparan los dos ejemplos de código, puede ver que, al usar métodos auxiliares para tipos de archivo comunes, como JSON y HTML, con Express se evita tener que escribir algunas líneas.

Creación de una aplicación Express

Para empezar a desarrollar una aplicación de Node.js con el marco Express, debemos instalarlo como una dependencia. También se recomienda inicializar primero un proyecto de Node.js para que las dependencias descargadas terminen en el archivo package.json. Esta recomendación es general para cualquier aplicación desarrollada para el runtime de Node.js. Las ventajas de hacerlo serán palpables cuando el código se inserte en un repositorio como GitHub, ya que cualquiera que obtenga el código desde GitHub podrá usarlo fácilmente si primero instala sus dependencias.

Para crear una aplicación web con el marco Express, entre los pasos habituales a seguir se incluyen los siguientes:

  1. Crear la aplicación web: cree una instancia de una aplicación web. En este momento, el servidor web no se puede ejecutar, pero tiene algo que se puede ampliar.
  2. Defina rutas y controladores de ruta: defina a qué rutas debe escuchar la aplicación. La administración de rutas típica incluye lo siguiente:
    • ruta raíz: "/"
    • rutas de características: "/products"
    • ruta catch-all: "*"
  3. Configure el middleware: el middleware es un fragmento de código que se puede ejecutar antes o después de una solicitud. Entre los ejemplos se incluyen la autenticación, la validación de datos y el registro.
  4. Inicie la aplicación: defina un puerto y, después, indique a la aplicación que escuche en ese puerto. La aplicación ya está lista para recibir solicitudes.