Создание приложений с нуля — мой любимый способ узнать, как они работают. В этом посте будет обсуждаться, как создать сокращатель URL-адресов с нуля.

Сократить URL-адреса очень легко сделать, на мой взгляд, это отличный способ выучить язык для новичка. Более сложная часть — добавление пользовательских доменов, аналитики, группировки ссылок и других функций, добавленных поверх службы сокращения URL-адресов. Итак, вот как вы можете сделать его с нуля.

В этом уроке мы будем использовать hono (nodejs), drizzle orm и postgres, но это можно сделать с любым языком и фреймворком, ознакомьтесь с моей реализацией sveltekit/golang kon.sh, исходный код на github.

Начните с создания нового проекта hono

npm create hono@latest

Затем введите следующую информацию

[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

Убедитесь, что ваша база данных Postgres готова, и создайте новую базу данных под названием url-shortener.

В папке src/ должен находиться файл index.ts, этот файл содержит код для запуска вашего API-сервера. Здесь нам нужно добавить 2 маршрута API.

• создать сокращение
• универсальный маршрут для перенаправления входящих запросов

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

Теперь мы можем установить Drill Orm и инициализировать нашу базу данных. Сначала установите необходимые пакеты

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

Затем нам нужно создать новую папку db в папке src и добавить index.ts для инициализации клиента базы данных иschema.ts для схемы базы данных.

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

Затем создайте файл drizzle.config.ts в корневой папке.

дождь.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",
    },
});

Запустите npx drizzle-kit push, чтобы отправить схему в базу данных.

npx drizzle-kit push

После всех настроек мы наконец можем поработать над API, запустите npm run dev, чтобы запустить сервер

npm run dev

Сначала создайте генератор случайных строк. Создайте новую папку в src с именем utils, затем создайте файл index.ts.

index.ts

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



Затем обновите маршрут создания сокращения.



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




Затем вы можете отправить запрос на публикацию в конечную точку, содержащую ссылку для создания нового сокращателя. Вот пример использования Thunder Client в моем VSCode:



Наконец, обновите API перенаправления.



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




Затем перейдите по адресу http://localhost:3000/{code} в своем браузере, и вы будете перенаправлены на исходную ссылку.

Вот и все. Сокращатель URL-адресов — отличный способ начать изучение нового языка. Вы сможете использовать популярную внутреннюю структуру языка и научитесь взаимодействовать с базой данных на этом языке.

Есть еще очень много возможностей для изучения, таких как создание QR-кода для вашего сокращателя, запись перенаправлений для аналитики, пользовательские домены и многое другое. Они не рассматриваются в этом руководстве.

Посетите мой github, чтобы увидеть мои работы, все мои проекты имеют открытый исходный код и бесплатны для всех, кто может учиться и вносить свой вклад.

Я также открыт для новых идей, хотя мои текущие навыки могут не соответствовать сложности. Не стесняйтесь поделиться ими в комментариях.