¿Qué es un acortador de URLS ?

Los acortadores de URL son herramientas útiles para convertir URLs largas y complejas en enlaces cortos, fáciles de compartir. En este tutorial, aprenderemos cómo crear un acortador de URL usando JavaScript, con Node.js y el framework Express, y trabajaremos con módulos ECMAScript (ESM), la forma moderna de organizar el código en Node.js.

Node.js es una plataforma que permite ejecutar JavaScript en el servidor, mientras que Express es un framework web rápido y minimalista que facilita la creación de aplicaciones en Node.js.

Además, hablaremos de cómo crear un acortador de URL puede ayudarte en entrevistas técnicas, mostrando tu dominio sobre conceptos importantes en programación.

¿Por Qué Crear un Acortador de URL es Útil en Entrevistas Técnicas?

Crear un acortador de URL es una excelente práctica para entrevistas técnicas en programación. Este ejercicio pone a prueba conocimientos importantes, como:

  • Manejo de rutas: Saber cómo configurar y trabajar con rutas HTTP es fundamental para desarrollar APIs y servidores.
  • Control de datos: Se evalúa la capacidad de almacenar, consultar y manejar datos en una estructura de datos simple.
  • Redirección y respuestas HTTP: Entender los códigos de estado HTTP, como 404 y 301, y cómo usarlos en redirecciones es un conocimiento clave.
  • Almacenamiento temporal de datos: Aunque en una versión avanzada se usaría una base de datos, la implementación básica utiliza estructuras de datos temporales, como objetos en JavaScript, para guardar datos de manera rápida y eficaz.

La revista Medium tiene un artículo detallado sobre cómo diseñar un servicio escalable de acortador de URL, como TinyURL, y su uso en entrevistas técnicas. Este tipo de ejercicio es común en entrevistas de desarrollo de software, ya que permite evaluar habilidades en arquitectura de sistemas y escalabilidad. Si te interesa conocer más sobre cómo estructurar un acortador de URL para entrevistas, puedes leer el artículo completo aquí: System Design: Scalable URL Shortener Service like TinyURL.

Ya con eso claro ¡Empecemos!

Paso 1: Configuración Inicial

Primero, configuraremos el proyecto. Crea un nuevo directorio y abre una terminal en esa carpeta. Inicializa el proyecto de Node.js ejecutando:

npm init -y

Este comando crea un archivo package.json donde se registrarán las dependencias necesarias para nuestro proyecto.

Luego, instalemos las dependencias de Express y shortid, una biblioteca para generar identificadores únicos, ejecutando:

npm install express shortid

Paso 2: Configuración del Servidor

En el directorio del proyecto, crea un archivo llamado server.js y añade el siguiente código. Observa que estamos usando import en lugar de require, como corresponde al formato ESM:

import express from 'express';
import shortid from 'shortid';

const app = express();

app.listen(3000, () => {
console.log('Servidor iniciado en el puerto 3000');
});

Este código importa Express y shortid, define nuestra aplicación con app, y arranca el servidor en el puerto 3000, mostrando un mensaje en la consola cuando el servidor esté en funcionamiento.

Paso 3: Creación del Acortador de URL

Ahora que el servidor está en marcha, configuraremos el acortador de URL. Agrega el siguiente código a server.js:

const urls = {};

app.get('/shorten', (req, res) => {
  const url = req.query.url;
  const id = shortid.generate();

  urls[id] = url;

  res.send(`http://localhost:3000/${id}`);
});

app.get('/:id', (req, res) => {
  const id = req.params.id;
  const url = urls[id];

  if (url) {
    res.redirect(url);
  } else {
    res.sendStatus(404);
  }
});

En este código, estamos creando un objeto urls para almacenar las URLs originales y sus versiones acortadas. Cuando el usuario envía una solicitud a /shorten con el parámetro url, el código genera un identificador único con shortid, guarda la URL original en el objeto urls usando ese identificador, y responde con la nueva URL acortada.

La segunda ruta maneja la redirección. Cuando se realiza una solicitud a /:id, el código busca la URL original en el objeto urls. Si encuentra la URL, redirige al usuario; si no, responde con un error 404.

Paso 4: Probar el Acortador de URL

Para probar el acortador, inicia el servidor ejecutando el siguiente comando en la terminal:

node server.js

Luego, abre un navegador y visita http://localhost:3000/shorten?url=https://example.com(puedes reemplazar la url “example.com” por la url de tu gusto ). Esto generará una URL acortada que aparecerá en el navegador.

Puedes copiar y pegar la URL acortada en el navegador para verificar que redirige correctamente a la URL original.

Implementación Completa del Código

A continuación tienes el código completo para el acortador de URL:

import express from 'express';
import shortid from 'shortid';

const app = express();
const urls = {};

app.get('/shorten', (req, res) => {
const url = req.query.url;
const id = shortid.generate();

urls[id] = url;

res.send(http://localhost:3000/${id});
});

app.get('/:id', (req, res) => {
const id = req.params.id;
const url = urls[id];

if (url) {
res.redirect(url);
} else {
res.sendStatus(404);
}
});

app.listen(3000, () => {
console.log('Servidor iniciado en el puerto 3000');
});

¡Y eso es todo! Ahora tienes un acortador de URL funcional que puedes usar como base para proyectos más grandes o para demostrar tus habilidades en entrevistas técnicas. Comprender cómo funciona un acortador de URL te ayudará a mejorar tu lógica de programación y conocimientos de diseño de sistemas, y puede ser un excelente proyecto de práctica.

¡Espero que hayas disfrutado este tutorial!

backend developerdesarrolló de softwaredesarrollo webexpressITJavaScriptnode jsprogramaciónpruebas técnicassoftwaretecnologíatutoriales de programación
By Desarrollo de Software, Pruebas Tecnicas, Tutoriales de ProgramaciónLeave a Comment on Creación de un Acortador de URL con JavaScript

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *