Creación de una API Node.js Express para convertir Markdown a HTML

 

 

 

  • Clase magistral de diseño para una interfaz de usuario compleja, con Vitaly Friedman
  • Implemente rápidamente. Implementar inteligentemente

  • Índice
    1. Una aplicación Markdown Node.js
    2. Etapa 1: Instalación de Express
    3. Etapa 2: creación de una API básica
      1. Descripción general del cartero
    4. Usando cartero
    5. Etapa 3: Agregar el convertidor Markdown
    6. Etapa 4: Agregar autenticación API mediante Passport
      1. Estrategias en pasaporte
    7. Accediendo a nuestra API desde otra aplicación
    8. Conclusión

    Aprenda a utilizar Node.js y el marco Express para crear un punto final API, en el contexto de la creación de una aplicación que convierte la sintaxis de Markdown a HTML.

     

    Markdown es un lenguaje de marcado de texto liviano que permite convertir el texto marcado a varios formatos. El objetivo original de crear Markdown era permitir a las personas "escribir utilizando un formato de texto plano fácil de leer y escribir" y, opcionalmente, convertirlo a XHTML (o HTML) estructuralmente válido. Actualmente, con WordPress soportando Markdown, el formato se ha vuelto aún más utilizado.

    El propósito de escribir este artículo es mostrarle cómo usar Node.js y el marco Express para crear un punto final API. El contexto en el que aprenderemos esto es mediante la creación de una aplicación que convierta la sintaxis de Markdown a HTML. También agregaremos un mecanismo de autenticación a la API para evitar el uso indebido de nuestra aplicación.

    Una aplicación Markdown Node.js

    Nuestra diminuta aplicación, a la que llamaremos 'Markdown Converter', nos permitirá publicar texto con estilo Markdown y recuperar una versión HTML. La aplicación se creará utilizando el marco Node.js Express y admitirá la autenticación para solicitudes de conversión.

    Construiremos la aplicación en pequeñas etapas: inicialmente crearemos un andamio usando Express y luego agregaremos varias características como autenticación a medida que avanzamos. Entonces, comencemos con la etapa inicial de creación de la aplicación creando un andamio.

     

    Etapa 1: Instalación de Express

    Suponiendo que ya ha instalado Node.js en su sistema, cree un directorio para contener su aplicación (llamémoslo " markdown-api") y cambie a ese directorio:

    $ mkdir markdown-api$ cd markdown-api

    Utilice el comando npm init para crear un archivo package.json para su aplicación. Este comando le solicita varias cosas, como el nombre y la versión de su aplicación.

    Por ahora, simplemente presione Enterpara aceptar los valores predeterminados para la mayoría de ellos. He usado el archivo de punto de entrada predeterminado como index.js , pero puedes probar app.js o algún otro según tus preferencias.

    Ahora instale Express en el markdown-apidirectorio y guárdelo en la lista de dependencias:

    $ npm install express --save

    Cree un archivo index.js en el directorio actual ( markdown-api) y agregue el siguiente código para probar si el marco Express está instalado correctamente:

    Const express = require('express');var app = express(); app.get('/', function(req, res){ res.send('Hello World!');}); app.listen(3000);

    Ahora busque la URL https://localhost:3000para comprobar si el archivo de prueba funciona correctamente. Si todo está en orden, veremos ¡Hola mundo!' saludo en el navegador y podremos proceder a construir una API base para convertir Markdown a HTML.

    Etapa 2: creación de una API básica

    El objetivo principal de nuestra API será convertir texto en una sintaxis Markdown a HTML. La API tendrá dos puntos finales:

    • /login
    • /convert

    El loginpunto final permitirá que la aplicación autentique solicitudes válidas mientras que el convertpunto final convertirá (obviamente) Markdown a HTML.

    A continuación se muestra el código API base para llamar a los dos puntos finales. La loginllamada simplemente devuelve una cadena "Autenticada", mientras que la convertllamada devuelve cualquier contenido de Markdown que haya enviado a la aplicación. El método de inicio simplemente devuelve un mensaje '¡Hola mundo!' cadena.

    const express = require("express");const bodyParser = require('body-parser'); var app = express();app.use(bodyParser.urlencoded({ extended: true }));app.use(bodyParser.json()); app.get('/', function(req, res){ res.send('Hello World!');}); app.post('/login', function(req, res) { res.send("Authenticated"); },); app.post("/convert", function(req, res, next) { console.log(req.body); if(typeof req.body.content == 'undefined' || req.body.content == null) { res.json(["error", "No data found"]); } else { res.json(["markdown", req.body.content]); }}); app.listen(3000, function() { console.log("Server running on port 3000");});

    Usamos el body-parsermiddleware para facilitar el análisis de las solicitudes entrantes a las aplicaciones. El middleware pondrá a su disposición todas las solicitudes entrantes en la req.bodypropiedad. Puede prescindir del middleware adicional, pero agregarlo hace que sea mucho más fácil analizar varios parámetros de solicitudes entrantes.

     

    Puede instalar body-parsersimplemente usando npm:

    $ npm install body-parser

    Ahora que tenemos nuestras funciones auxiliares ficticias implementadas, usaremos Postman para probar lo mismo. Primero comencemos con una breve descripción general de Postman.

    Descripción general del cartero

    Postman es una herramienta de desarrollo de API que facilita la creación, modificación y prueba de puntos finales de API desde un navegador o descargando una aplicación de escritorio (la versión del navegador ahora está obsoleta). Tiene la capacidad de realizar varios tipos de solicitudes HTTP, es decir, GET, POST, PUT, PATCH. Está disponible para Windows, macOS y Linux.

    Aquí hay una muestra de la interfaz de Postman:

    ( Vista previa grande )

    Para consultar un punto final de API, deberá realizar los siguientes pasos:

    1. Ingrese la URL que desea consultar en la barra de URL en la sección superior;
    2. Seleccione el método HTTP a la izquierda de la barra de URL para enviar la solicitud;
    3. Haga clic en el botón 'Enviar'.

    Luego, Postman enviará la solicitud a la aplicación, recuperará las respuestas y las mostrará en la ventana inferior. Este es el mecanismo básico sobre cómo utilizar la herramienta Postman. En nuestra aplicación, también tendremos que agregar otros parámetros a la solicitud, que se describirán en las siguientes secciones.

    Usando cartero

    Ahora que hemos visto una descripción general de Postman, sigamos usándolo para nuestra aplicación.

    Inicie su markdown-apiaplicación desde la línea de comandos:

    $ node index.js

    Para probar el código API base, realizamos llamadas API a la aplicación desde Postman. Tenga en cuenta que utilizamos el método POST para pasar el texto para convertirlo a la aplicación.

    Actualmente, la aplicación acepta el contenido de Markdown para convertirlo mediante el contentparámetro POST. Esto lo pasamos como un formato codificado en URL. Actualmente, la aplicación devuelve la cadena palabra por palabra en formato JSON: el primer campo siempre devuelve la cadena markdowny el segundo campo devuelve el texto convertido. Más tarde, cuando agreguemos el código de procesamiento de Markdown, devolverá el texto convertido.

    Etapa 3: Agregar el convertidor Markdown

    Con la estructura de la aplicación ahora construida, podemos buscar en la Showdownbiblioteca JavaScript que usaremos para convertir Markdown a HTML. Showdown es un conversor bidireccional de Markdown a HTML escrito en JavaScript que le permite convertir Markdown a HTML y viceversa.

    ( Vista previa grande )

     

    Instale el paquete usando npm:

    $ npm install showdown

    Después de agregar el código de enfrentamiento requerido al andamio, obtenemos el siguiente resultado:

    const express = require("express");const bodyParser = require('body-parser');const showdown = require('showdown'); var app = express();app.use(bodyParser.urlencoded({ extended: true }));app.use(bodyParser.json()); converter = new showdown.Converter();app.get('/', function(req, res){ res.send('Hello World!');}); app.post('/login', function(req, res) { res.send("Authenticated"); },); app.post("/convert", function(req, res, next) { if(typeof req.body.content == 'undefined' || req.body.content == null) { res.json(["error", "No data found"]); } else { text = req.body.content; html = converter.makeHtml(text); res.json(["markdown", html]); }}); app.listen(3000, function() { console.log("Server running on port 3000");});

    El código del convertidor principal está en el /convertpunto final como se extrae y se muestra a continuación. Esto convertirá cualquier texto de Markdown que publique a una versión HTML y lo devolverá como un documento JSON.

    ...} else { text = req.body.content; html = converter.makeHtml(text); res.json(["markdown", html]); }

    El método que hace la conversión es converter.makeHtml(text). Podemos configurar varias opciones para la conversión de Markdown utilizando el setOptionmétodo con el siguiente formato:

    converter.setOption('optionKey', 'value');

    Entonces, por ejemplo, podemos configurar una opción para insertar y vincular automáticamente una URL específica sin ningún tipo de marcado.

    converter.setOption('simplifiedAutoLink', 'true');

    Como en el ejemplo de Postman, si pasamos una cadena simple (como Google home https://www.google.com/) a la aplicación, devolverá la siguiente cadena si simplifiedAutoLinkestá habilitada: Todo sobre Golf

    pGoogle home a href="https://www.google.com/"https://www.google.com//a/p

    Sin la opción, tendremos que agregar información de marcado para lograr los mismos resultados:

    Google home https://www.google.com/

    Hay muchas opciones para modificar cómo se procesa el Markdown. Puede encontrar una lista completa en el sitio web de Showdown .

    Ahora tenemos un conversor de Markdown a HTML en funcionamiento con un único punto final. Avancemos más y agreguemos autenticación para tener aplicación.

    Etapa 4: Agregar autenticación API mediante Passport

    Exponer la API de su aplicación al mundo exterior sin una autenticación adecuada alentará a los usuarios a consultar el punto final de su API sin restricciones. Esto invitará a elementos sin escrúpulos a hacer un mal uso de su API y también sobrecargará su servidor con solicitudes no moderadas. Para mitigar esto, tenemos que agregar un mecanismo de autenticación adecuado.

    Usaremos el paquete Passport para agregar autenticación a nuestra aplicación. Al igual que el body-parsermiddleware que encontramos anteriormente, Passport es un middleware de autenticación para Node.js. La razón por la que usaremos Passport es que tiene una variedad de mecanismos de autenticación con los que trabajar (nombre de usuario y contraseña, Facebook, Twitter, etc.), lo que le brinda al usuario la flexibilidad de elegir un mecanismo en particular. Un middleware Passport se puede instalar fácilmente en cualquier aplicación Express sin cambiar mucho código.

     

    Instale el paquete usando npm.

    $ npm install passport

    También usaremos la localestrategia, que se explicará más adelante, para la autenticación. Así que instálalo también.

    $ npm install passport-local

    También deberá agregar el módulo de codificación y decodificación JWT (JSON Web Token) para Node.js que utiliza Passport:

    $ npm install jwt-simple

    Estrategias en pasaporte

    Passport utiliza el concepto de estrategias para autenticar solicitudes. Las estrategias son varios métodos que le permiten autenticar solicitudes y pueden variar desde casos simples como verificar las credenciales de nombre de usuario y contraseña, autenticación mediante OAuth (Facebook o Twitter) o mediante OpenID. Antes de autenticar solicitudes, se debe configurar la estrategia utilizada por una aplicación.

    En nuestra aplicación, utilizaremos un esquema de autenticación de nombre de usuario y contraseña simple, ya que es fácil de entender y codificar. Actualmente, Passport admite más de 300 estrategias que se pueden encontrar aquí.

    Aunque el diseño de Passport puede parecer complicado, la implementación en código es muy sencilla. A continuación se muestra un ejemplo que muestra cómo /convertestá decorado nuestro punto final para la autenticación. Como verá, agregar autenticación a un método es bastante sencillo.

    app.post("/convert", passport.authenticate('local',{ session: false, failWithError: true }), function(req, res, next) { // If this function gets called, authentication was successful. // Also check if no content is sent if(typeof req.body.content == 'undefined' || req.body.content == null) { res.json(["error", "No data found"]); } else { text = req.body.content; html = converter.makeHtml(text); res.json(["markdown", html]); }}, // Return a 'Unauthorized' message back if authentication failed. function(err, req, res, next) { return res.status(401).send({ success: false, message: err }) });

    Ahora, junto con la cadena Markdown a convertir, también tenemos que enviar un nombre de usuario y contraseña. Esto se verificará con el nombre de usuario y la contraseña de nuestra aplicación y se verificará. Como utilizamos una estrategia local para la autenticación, las credenciales se almacenan en el código mismo.

    Aunque esto puede parecer una pesadilla de seguridad, para aplicaciones de demostración es suficiente. Esto también facilita la comprensión del proceso de autenticación en nuestro ejemplo. Por cierto, un método de seguridad común utilizado es almacenar credenciales en variables de entorno. Aun así, es posible que muchas personas no estén de acuerdo con este método, pero yo lo encuentro relativamente seguro.

    El ejemplo completo con autenticación se muestra a continuación.

    const express = require("express");const showdown = require('showdown');const bodyParser = require('body-parser');const passport = require('passport');const jwt = require('jwt-simple');const LocalStrategy = require('passport-local').Strategy; var app = express();app.use(bodyParser.urlencoded({ extended: true }));app.use(bodyParser.json()); converter = new showdown.Converter(); const ADMIN = 'admin';const ADMIN_PASSWORD = 'smagazine';const SECRET = 'secret#4456'; passport.use(new LocalStrategy(function(username, password, done) { if (username === ADMIN password === ADMIN_PASSWORD) { done(null, jwt.encode({ username }, SECRET)); return; } done(null, false);})); app.get('/', function(req, res){ res.send('Hello World!');}); app.post('/login', passport.authenticate('local',{ session: false }), function(req, res) { // If this function gets called, authentication was successful. // Send a 'Authenticated' string back. res.send("Authenticated"); }); app.post("/convert", passport.authenticate('local',{ session: false, failWithError: true }), function(req, res, next) { // If this function gets called, authentication was successful. // Also check if no content is sent if(typeof req.body.content == 'undefined' || req.body.content == null) { res.json(["error", "No data found"]); } else { text = req.body.content; html = converter.makeHtml(text); res.json(["markdown", html]); }}, // Return a 'Unauthorized' message back if authentication failed. function(err, req, res, next) { return res.status(401).send({ success: false, message: err }) }); app.listen(3000, function() { console.log("Server running on port 3000");});

    A continuación se muestra una sesión de Postman que muestra la conversión con autenticación agregada.

     

    Prueba final de la aplicación con Postman ( vista previa grande )

    Aquí podemos ver que tenemos una cadena HTML convertida adecuada a partir de una sintaxis de Markdown. Aunque solo hemos solicitado convertir una sola línea de Markdown, la API puede convertir una mayor cantidad de texto.

    Con esto concluye nuestra breve incursión en la creación de un punto final API utilizando Node.js y Express. La creación de API es un tema complejo y hay matices más sutiles que debe tener en cuenta al crear una, para los cuales lamentablemente no tenemos tiempo aquí, pero tal vez los cubramos en futuros artículos.

    Accediendo a nuestra API desde otra aplicación

    Ahora que hemos creado una API, podemos crear un pequeño script Node.js que le mostrará cómo se puede acceder a la API. Para nuestro ejemplo, necesitaremos instalar el requestpaquete npm que proporciona una forma sencilla de realizar solicitudes HTTP. (Lo más probable es que ya lo tengas instalado).

    $ npm install request --save

    El código de ejemplo para enviar una solicitud a nuestra API y obtener la respuesta se proporciona a continuación. Como puede ver, el requestpaquete simplifica considerablemente el asunto. La rebaja que se va a convertir está en la textToConvertvariable.

    Antes de ejecutar el siguiente script, asegúrese de que la aplicación API que creamos anteriormente ya se esté ejecutando. Ejecute el siguiente script en otra ventana de comando.

     

    Nota : Estamos utilizando el (back-tick) signo para abarcar varias líneas de JavaScript para la textToConvert variable. Esta no es una comilla simple.

    var Request = require("request"); // Start of markdownvar textToConvert = `Heading=======## Sub-heading Paragraphs are separatedby a blank line. Two spaces at the end of a line produces a line break. Text attributes _italic_, **bold**, 'monospace'.A [link](https://example.com).Horizontal rule:`; // End of markdown Request.post({ "headers": { "content-type": "application/json" }, "url": "https://localhost:3000/convert", "body": JSON.stringify({ "content": textToConvert, "username": "admin", "password": "smagazine" })}, function(error, response, body){ // If we got any connection error, bail out. if(error) { return console.log(error); } // Else display the converted text console.dir(JSON.parse(body));});

    Cuando realizamos una solicitud POST a nuestra API, proporcionamos el texto de Markdown para convertirlo junto con las credenciales. Si proporcionamos las credenciales incorrectas, recibiremos un mensaje de error.

    { success: false, message: { name: 'AuthenticationError', message: 'Unauthorized', status: 401 }}

    Para una solicitud autorizada correctamente, el ejemplo de Markdown anterior se convertirá a lo siguiente:

    [ 'markdown', `h1Heading/h1 h2Sub-heading/h2 pParagraphs are separated by a blank line./p pTwo spaces at the end of a linebr / produces a line break./p pText attributes emitalic/em, strongbold/strong, 'monospace'. A a href="https://example.com"link/a. Horizontal rule:/p` ]

    Aunque hemos codificado el Markdown aquí, el texto puede provenir de otras fuentes: archivos, formularios web, etc. El proceso de solicitud sigue siendo el mismo.

    Tenga en cuenta que como enviamos la solicitud como un application/jsontipo de contenido; Necesitamos codificar el cuerpo usando json, de ahí la JSON.stringifyllamada a la función. Como puede ver, se necesita un ejemplo muy pequeño para probar una aplicación API.

    Conclusión

    En este artículo, nos embarcamos en un tutorial con el objetivo de aprender cómo usar Node, js y el marco Express para crear un punto final API. En lugar de crear una aplicación ficticia sin ningún propósito, decidimos crear una API que convierta la sintaxis de Markdown a HTML, lo que ancla el aprendizaje en un contexto útil. En el camino, agregamos autenticación a nuestro punto final API y también vimos formas de probar el punto final de nuestra aplicación usando Postman.

    (rb, ra, il)Explora más en

    • Nodo.js
    • javascript
    • HTML





    Tal vez te puede interesar:

    1. Creación de su propia biblioteca de validación de React: la experiencia del desarrollador (Parte 3)
    2. Introducción a Quasar Framework: creación de aplicaciones multiplataforma
    3. Creación de un componente web retro que se puede arrastrar con iluminación
    4. Creación y acoplamiento de una aplicación Node.js con arquitectura sin estado con la ayuda de Kinsta

    Creación de una API Node.js Express para convertir Markdown a HTML

    Creación de una API Node.js Express para convertir Markdown a HTML

    Clase magistral de diseño para una interfaz de usuario compleja, con Vitaly Friedman Implemente rápidamente. Implementar inteligentemente Índice

    programar

    es

    https://pseint.es/static/images/programar-creacion-de-una-api-node-979-0.jpg

    2024-04-04

     

    Creación de una API Node.js Express para convertir Markdown a HTML
    Creación de una API Node.js Express para convertir Markdown a HTML

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20