يعد إنشاء التطبيقات من البداية هو طريقتي المفضلة لمعرفة كيفية عملها. ستناقش هذه المشاركة كيفية إنشاء أداة تقصير عناوين URL من البداية.

يعد إنشاء أداة تقصير عناوين URL أمرًا سهلاً للغاية، وهي طريقة رائعة لتعلم اللغة كمبتدئ في رأيي. الجزء الأصعب هو إضافة النطاقات المخصصة والتحليلات وروابط التجميع والميزات الأخرى المضافة أعلى خدمة تقصير عناوين URL. إذن، إليك كيفية إنشاء واحدة من الصفر.

في هذا البرنامج التعليمي، سنستخدم hono (nodejs) وdrizzle orm وpostgres، ولكن يمكن القيام بذلك باستخدام أي لغة وإطار عمل، راجع تطبيق sveltekit/golang kon.sh، الكود المصدري في github.

ابدأ بإنشاء مشروع هونو جديد

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 الخاص بك. نحن هنا بحاجة إلى إضافة مسارين لواجهة برمجة التطبيقات.

• إنشاء أداة تقصير
• طريق الالتقاط لإعادة توجيه الطلبات الواردة

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

ثم نحتاج إلى إنشاء مجلد db جديد ضمن المجلد src، وإضافة ملف Index.ts لتهيئة عميل db، و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 في المجلد الجذر.

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

بعد كل الإعداد، يمكننا أخيرًا العمل على واجهة برمجة التطبيقات، وتشغيل 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 الخاص بي:


أخيرًا، قم بتحديث واجهة برمجة تطبيقات إعادة التوجيه.


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 الخاص بي لرؤية أعمالي، جميع مشاريعي مفتوحة المصدر ومجانية لأي شخص للتعلم والمساهمة.

 أنا أيضًا منفتح على الأفكار الجديدة، على الرغم من أن مهارتي الحالية قد لا تتناسب مع الصعوبة. لا تتردد في مشاركتها في التعليقات.