शुरुआत से एप्लिकेशन बनाना यह सीखने का मेरा पसंदीदा तरीका है कि वे कैसे काम करते हैं। इस पोस्ट में स्क्रैच से यूआरएल शॉर्टनर बनाने के तरीके पर चर्चा की जाएगी।

यूआरएल शॉर्टनर बनाना बेहद आसान है, मेरी राय में शुरुआती तौर पर किसी भाषा को सीखने का यह एक बेहतरीन तरीका है। सबसे कठिन हिस्सा यूआरएल शॉर्टनर सेवा के शीर्ष पर कस्टम डोमेन, एनालिटिक्स, ग्रुपिंग लिंक और अन्य सुविधाओं को जोड़ना है। तो यहां बताया गया है कि आप इसे स्क्रैच से कैसे बना सकते हैं।

इस ट्यूटोरियल में हम होनो (नोडजेएस), ड्रिज़ल ओआरएम और पोस्टग्रेज का उपयोग करेंगे, लेकिन यह किसी भी भाषा और ढांचे के साथ किया जा सकता है, मेरे स्वेलटेकिट/गोलंग कार्यान्वयन kon.sh, जीथब में स्रोत कोड देखें।

एक नया होनो प्रोजेक्ट बनाकर शुरुआत करें

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

सुनिश्चित करें कि आपका पोस्टग्रेज डेटाबेस तैयार है और यूआरएल-शॉर्टनर नामक एक नया डेटाबेस बनाएं।

src/ फ़ोल्डर के अंतर्गत एक Index.ts फ़ाइल होनी चाहिए, इस फ़ाइल में आपके एपीआई सर्वर को चलाने के लिए कोड होता है। यहां हमें 2 एपीआई रूट जोड़ने होंगे।

• शॉर्टनर बनाएं
• आने वाले अनुरोधों को पुनर्निर्देशित करने के लिए कैच-ऑल रूट

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

अब हम ड्रिज़ल ओआरएम इंस्टॉल कर सकते हैं और अपना डेटाबेस प्रारंभ कर सकते हैं। सबसे पहले, आवश्यक पैकेज स्थापित करें

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

फिर हमें src फ़ोल्डर के अंतर्गत एक नया db फ़ोल्डर बनाना होगा, और db क्लाइंट को प्रारंभ करने के लिए 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 फ़ाइल बनाएं।

dizzle.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

सभी सेटअप के बाद, हम अंततः एपीआई पर काम कर सकते हैं, सर्वर शुरू करने के लिए एनपीएम रन देव चला सकते हैं

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 में थंडर क्लाइंट का उपयोग करने का एक उदाहरण दिया गया है:



आखिरकार, रीडायरेक्ट एपीआई को अपडेट करें।



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} पर नेविगेट करें और आपको मूल लिंक पर पुनः निर्देशित किया जाएगा।

इतना ही। यूआरएल शॉर्टनर एक नई भाषा सीखना शुरू करने का एक शानदार तरीका है, आप भाषा के लोकप्रिय बैकएंड फ्रेमवर्क का उपयोग कर सकते हैं और भाषा के साथ डेटाबेस के साथ संवाद करना सीख सकते हैं।

अन्वेषण करने के लिए और भी बहुत कुछ है, जैसे आपके शॉर्टनर के लिए क्यूआर कोड बनाना, एनालिटिक्स के लिए रीडायरेक्ट रिकॉर्ड करना, कस्टम डोमेन और बहुत कुछ। ये इस ट्यूटोरियल में शामिल नहीं हैं।

मेरे कार्यों को देखने के लिए मेरे जीथब को देखें, मेरे सभी प्रोजेक्ट खुले स्रोत हैं और किसी के भी सीखने और योगदान के लिए निःशुल्क हैं।

मैं नए विचारों के लिए भी तैयार हूं, हालांकि मेरा वर्तमान कौशल कठिनाई से मेल नहीं खा सकता है। बेझिझक उन्हें टिप्पणियों में साझा करें।