Crear aplicaciones desde cero es mi forma favorita de aprender cómo funcionan. Esta publicación discutirá cómo crear un acortador de URL desde cero.

El acortador de URL es extremadamente fácil de hacer y, en mi opinión, es una excelente manera de aprender un idioma como principiante. La parte más difícil es agregar dominios personalizados, análisis, enlaces de agrupación y otras funciones agregadas además del servicio de acortador de URL. Así que aquí te explicamos cómo puedes crear uno desde cero.

En este tutorial usaremos hono (nodejs), drizzle orm y postgres, pero se puede hacer con cualquier lenguaje y marco, consulte mi implementación de sveltekit/golang kon.sh, código fuente en github.

Empiece por crear un nuevo proyecto de honor

npm create hono@latest

Luego completa la siguiente información

[email protected]
Ok to proceed? (y)
create-hono version 0.13.1
? Target directory url-shortener
? Which template do you want to use? nodejs
? Do you want to install project dependencies? yes
? Which package manager do you want to use? npm

Asegúrate de tener lista tu base de datos de Postgres y crea una nueva base de datos llamada url-shortener.

En la carpeta src/ debe haber un archivo index.ts, este archivo contiene el código para ejecutar su servidor API. Aquí necesitamos agregar 2 rutas API.

• crear acortador
• ruta general para redirigir las solicitudes entrantes

src/index.ts

app.post("/api/shortener", async (c) => {
    // create shortener route
    return c.text("Not yet implemented");
});

app.get("/:code", async (c) => {
    // redirect
    return c.text("Not yet implemented");
});

Ahora podemos instalar drizzle orm e inicializar nuestra base de datos. Primero, instale los paquetes requeridos

npm i drizzle-orm postgres
npm i -D drizzle-kit

Luego necesitamos crear una nueva carpeta db en la carpeta src y agregar index.ts para inicializar el cliente db y esquema.ts para el esquema de la base de datos.

src/db/schema.ts

import { pgTable, text, varchar } from "drizzle-orm/pg-core";

export const shortener = pgTable("shortener", {
    id: text("id").primaryKey(),
    link: varchar("link", { length: 255 }).notNull(),
    code: varchar("code", { length: 255 }).notNull().unique(),
});

src/db/index.ts

import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";
import * as schema from "./schema";

const queryClient = postgres(
    "postgres://postgres:[email protected]:5432/url-shortener"
);
export const db = drizzle(queryClient, { schema });

Luego crea un archivo drizzle.config.ts en la carpeta raíz.

drizzle.config.ts

// drizzle.config.ts
import { defineConfig } from "drizzle-kit";

export default defineConfig({
    schema: "./src/db/schema.ts",
    out: "./drizzle",
    dialect: "postgresql",
    dbCredentials: {
        url: "postgres://postgres:[email protected]:5432/url-shortener",
    },
});

Ejecute npx drizzle-kit push para enviar el esquema a la base de datos.

npx drizzle-kit push

Después de toda la configuración, finalmente podemos trabajar en la API, ejecutar npm run dev para iniciar el servidor

npm run dev

Primero crea un generador de cadenas aleatorias. Cree una nueva carpeta en src llamada utils, luego cree un archivo index.ts.

index.ts

export function generateId(length: number) {
    let result = "";
    const characters =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    const charactersLength = characters.length;
    for (let i = 0; i 



Luego actualiza la ruta para crear un acortador.


app.post("/api/shortener", async (c) => {
    const body = await c.req.json();

    const link = body.link;

    const code = generateId(6);

    await db.insert(shortener).values({
        id: generateId(8),
        link,
        code,
    });

    return c.json({ code });
});




 Luego puede realizar una solicitud de publicación en el punto final que contiene el enlace para generar un nuevo acortador. Aquí hay un ejemplo usando Thunder Client en mi VSCode:


Finalmente, actualice la API de redireccionamiento.


app.get("/:code", async (c) => {
    const code = c.req.param("code");

    const link = await db
        .select()
        .from(shortener)
        .where(eq(shortener.code, code));

    if (link.length === 0) {
        return c.text("Invalid code");
    }

    return c.redirect(link[0].link);
});




Luego navega hasta http://localhost:3000/{code} en tu navegador y serás redirigido al enlace original.

Eso es todo. El acortador de URL es una excelente manera de comenzar a aprender un nuevo idioma. Puedes utilizar el popular marco de backend del idioma y aprender a comunicarte con la base de datos con el idioma.

Hay mucho más para explorar, como generar códigos QR para su acortador, registrar redireccionamientos para análisis, dominios personalizados y más. Estos no se tratan en este tutorial.

Visita mi github para ver mis trabajos, todos mis proyectos son de código abierto y gratuitos para que cualquiera pueda aprender y contribuir.

También estoy abierto a nuevas ideas, aunque es posible que mi habilidad actual no coincida con la dificultad. No dudes en compartirlos en los comentarios.