Anwendungen von Grund auf zu erstellen ist meine Lieblingsmethode, um zu lernen, wie sie funktionieren. In diesem Beitrag geht es darum, wie man einen URL-Shortener von Grund auf erstellt.

URL-Shortener ist extrem einfach zu erstellen und meiner Meinung nach eine großartige Möglichkeit, als Anfänger eine Sprache zu lernen. Der schwierigere Teil besteht darin, benutzerdefinierte Domänen, Analysen, Gruppierungslinks und andere Funktionen hinzuzufügen, die zusätzlich zum URL-Shortener-Dienst hinzugefügt werden. Hier erfahren Sie, wie Sie eines von Grund auf erstellen können.

In diesem Tutorial verwenden wir hono (nodejs), drizzle orm und postgres, aber es kann mit jeder Sprache und jedem Framework durchgeführt werden. Schauen Sie sich meine Sveltekit/Golang-Implementierung kon.sh an, Quellcode in Github.

Beginnen Sie mit der Erstellung eines neuen Hono-Projekts

npm create hono@latest

Dann geben Sie die folgenden Informationen ein

[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

Stellen Sie sicher, dass Ihre Postgres-Datenbank bereit ist, und erstellen Sie eine neue Datenbank namens URL-Shortener.

Im Ordner src/ sollte sich eine Datei index.ts befinden. Diese Datei enthält den Code zum Ausführen Ihres API-Servers. Hier müssen wir 2 API-Routen hinzufügen.

• Shortener erstellen
• Catch-All-Route zur Umleitung eingehender Anfragen

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

Jetzt können wir drizzle orm installieren und unsere Datenbank initialisieren. Installieren Sie zunächst die erforderlichen Pakete

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

Dann müssen wir einen neuen DB-Ordner unter dem src-Ordner erstellen und index.ts zum Initialisieren des DB-Clients und schema.ts für das Datenbankschema hinzufügen.

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

Erstellen Sie dann eine drizzle.config.ts-Datei im Stammordner.

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

Führen Sie npx drizzle-kit push aus, um das Schema in die Datenbank zu übertragen.

npx drizzle-kit push

Nach all der Einrichtung können wir endlich an der API arbeiten, npm run dev ausführen, um den Server zu starten

npm run dev

Erstellen Sie zunächst einen Zufallsstringgenerator. Erstellen Sie unter src einen neuen Ordner mit dem Namen utils und erstellen Sie dann eine index.ts-Datei.

index.ts

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



Aktualisieren Sie dann die Route zum Erstellen eines Shorteners.


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




Dann können Sie eine Post-Anfrage an den Endpunkt stellen, der den Link enthält, um einen neuen Shortener zu generieren. Hier ist ein Beispiel für die Verwendung des Thunder Client in meinem VSCode:


Aktualisieren Sie abschließend die Weiterleitungs-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);
});




Navigieren Sie dann in Ihrem Browser zu http://localhost:3000/{code} und Sie werden zum ursprünglichen Link weitergeleitet.

Das ist es. Der URL-Shortener ist eine großartige Möglichkeit, mit dem Erlernen einer neuen Sprache zu beginnen. Sie können das beliebte Backend-Framework der Sprache verwenden und lernen, mit der Datenbank mit der Sprache zu kommunizieren.

Es gibt noch so viel mehr zu entdecken, wie z. B. das Generieren von QR-Code für Ihren Shortener, das Aufzeichnen von Weiterleitungen für Analysen, benutzerdefinierte Domänen und mehr. Diese werden in diesem Tutorial nicht behandelt.

Schauen Sie sich meinen Github an, um meine Arbeiten zu sehen. Alle meine Projekte sind Open Source und für jeden kostenlos zum Lernen und Mitwirken.

Ich bin auch offen für neue Ideen, auch wenn meine derzeitigen Fähigkeiten möglicherweise nicht dem Schwierigkeitsgrad entsprechen. Teile sie gerne in den Kommentaren.