Criar aplicativos do zero é minha maneira favorita de aprender como eles funcionam. Esta postagem discutirá como fazer um encurtador de URL do zero.

O encurtador de URL é extremamente fácil de fazer, uma ótima maneira de aprender um idioma como iniciante, na minha opinião. A parte mais difícil é adicionar domínios personalizados, análises, links de agrupamento e outros recursos adicionados ao serviço de encurtador de URL. Então aqui está como você pode fazer um do zero.

Neste tutorial usaremos hono (nodejs), drizzle orm e postgres, mas isso pode ser feito com qualquer linguagem e framework, confira minha implementação sveltekit/golang kon.sh, código fonte no github.

Comece criando um novo projeto hono

npm create hono@latest

Em seguida, preencha as seguintes informações

[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

Certifique-se de ter seu banco de dados postgres pronto e crie um novo banco de dados chamado url-shortener.

Na pasta src/ deve haver um arquivo index.ts, este arquivo contém o código para executar seu servidor API. Aqui precisamos adicionar 2 rotas de API.

• criar encurtador
• rota abrangente para redirecionar solicitações recebidas

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");
});

Agora podemos instalar o drizzle orm e inicializar nosso banco de dados. Primeiro, instale os pacotes necessários

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

Então precisamos criar uma nova pasta db na pasta src e adicionar index.ts para inicializar o cliente db e schema.ts para o esquema do banco de dados.

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 });

Em seguida, crie um arquivo drizzle.config.ts na pasta raiz.

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",
    },
});

Execute npx drizzle-kit push para enviar o esquema ao banco de dados.

npx drizzle-kit push

Depois de toda a configuração, podemos finalmente trabalhar na API, execute npm run dev para iniciar o servidor

npm run dev

Primeiro faça um gerador de string aleatório. Crie uma nova pasta em src chamada utils e crie um arquivo index.ts.

index.ts

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



Em seguida, atualize a rota de criação do encurtador.


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 });
});




Então você pode fazer uma solicitação de postagem ao endpoint que contém o link para gerar um novo encurtador. Aqui está um exemplo usando Thunder Client em meu VSCode:


Finalmente, atualize a API de redirecionamento.


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);
});




Em seguida, navegue até http://localhost:3000/{code} em seu navegador e você será redirecionado para o link original.

É isso. O encurtador de URL é uma ótima maneira de começar a aprender um novo idioma, você pode usar a popular estrutura de back-end do idioma e aprender a se comunicar com o banco de dados com o idioma.

Há muito mais para explorar, como gerar código QR para seu encurtador, registrar redirecionamentos para análises, domínios personalizados e muito mais. Eles não são abordados neste tutorial.

Confira meu github para ver meus trabalhos, todos os meus projetos são de código aberto e gratuitos para qualquer pessoa aprender e contribuir.

Também estou aberto a novas ideias, embora minhas habilidades atuais possam não corresponder à dificuldade. Sinta-se à vontade para compartilhá-los nos comentários.