從頭開始製作應用程式是我最喜歡的學習應用程式運作方式的方式。這篇文章將討論如何從頭開始製作 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");
});

現在我們可以安裝 drizzle orm 並初始化我們的資料庫。首先，安裝所需的軟體套件

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

然後我們需要在src資料夾下新建db資料夾，並新增index.ts用於初始化db客戶端，schema.ts用於資料庫schema。

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 檔案。

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

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




然後您可以向包含連結的端點發出發布請求以產生新的縮短器。這是在我的 VSCode 中使用 Thunder Client 的範例：


最後，更新重定向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 查看我的作品，我的所有專案都是開源的，免費供任何人學習和貢獻。 

我也樂於接受新想法，儘管我目前的技能可能與難度不相符。歡迎在評論中分享。