Créer des applications à partir de zéro est ma façon préférée d'apprendre comment elles fonctionnent. Cet article expliquera comment créer un raccourcisseur d'URL à partir de zéro.

Le raccourcisseur d'URL est extrêmement facile à créer, c'est à mon avis un excellent moyen d'apprendre une langue en tant que débutant. La partie la plus difficile consiste à ajouter des domaines personnalisés, des analyses, des liens de regroupement et d'autres fonctionnalités ajoutées en plus du service de raccourcissement d'URL. Voici donc comment en créer un à partir de zéro.

Dans ce tutoriel, nous utiliserons hono (nodejs), drizzle orm et postgres, mais cela peut être fait avec n'importe quel langage et framework, consultez mon implémentation sveltekit/golang kon.sh, code source dans github.

Commencez par créer un nouveau projet hono

npm create hono@latest

Remplissez ensuite les informations suivantes

[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

Assurez-vous que votre base de données postgres est prête et créez une nouvelle base de données appelée url-shortener.

Sous le dossier src/, il devrait y avoir un fichier index.ts, ce fichier contient le code pour exécuter votre serveur API. Ici, nous devons ajouter 2 routes API.

• créer un raccourcisseur
• route fourre-tout pour rediriger les demandes 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");
});

Nous pouvons maintenant installer Drizzle Orm et initialiser notre base de données. Tout d’abord, installez les packages requis

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

Ensuite, nous devons créer un nouveau dossier db sous le dossier src et ajouter index.ts pour initialiser le client db et schema.ts pour le schéma de base de données.

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

Créez ensuite un fichier drizzle.config.ts dans le dossier racine.

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

Exécutez npx drizzle-kit push pour transférer le schéma vers la base de données.

npx drizzle-kit push

Après toute la configuration, nous pouvons enfin travailler sur l'API, exécuter npm run dev pour démarrer le serveur

npm run dev

Créez d’abord un générateur de chaînes aléatoires. Créez un nouveau dossier sous src nommé utils, puis créez un fichier index.ts.

index.ts

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



Mettez ensuite à jour l'itinéraire de création du raccourcisseur.


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




Ensuite, vous pouvez faire une demande de publication au point de terminaison contenant le lien pour générer un nouveau raccourcisseur. Voici un exemple utilisant Thunder Client dans mon VSCode :


Enfin, mettez à jour l'API de redirection.


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




 Accédez ensuite à http://localhost:3000/{code} sur votre navigateur et vous serez redirigé vers le lien d'origine. 

C'est ça. Le raccourcisseur d'URL est un excellent moyen de commencer à apprendre une nouvelle langue, vous pouvez utiliser le framework backend populaire de la langue et apprendre à communiquer avec la base de données avec la langue.

Il y a bien plus à explorer, comme la génération de code QR pour votre raccourcisseur, l'enregistrement des redirections à des fins d'analyse, les domaines personnalisés et bien plus encore. Ceux-ci ne sont pas abordés dans ce didacticiel.

Consultez mon github pour voir mes travaux, tous mes projets sont open source et gratuits pour que quiconque puisse apprendre et contribuer.

Je suis également ouvert aux nouvelles idées, même si mes compétences actuelles ne correspondent peut-être pas à la difficulté. N'hésitez pas à les partager dans les commentaires.