Gün geçtikte popülerliğini artıran bir JavaScript çalışma zamanı, paket yöneticisi, test çalıştırıcısı ve paketleyicisi olan bun, aynı zamanda bazı işlerimizide kolaylaştırmaktadır. Peki bun ile url kısaltma nasıl yapılır? Bu yazımızda bun ile yeni bir proje oluşturup bunu deneyeceğiz.
Uzun URL'ler, hantal doğaları nedeniyle paylaşımdaki zorluklar, okunabilirlik zorlukları, çekici olmayan estetikler ve SEO üzerindeki potansiyel olumsuz etkiler gibi çeşitli dezavantajlara sahiptir. Kullanıcı deneyimini geliştirmek ve bu zorlukları azaltmak için bit.ly gibi bir URL kısaltma hizmetine ihtiyacınız var. Bu makalede Elysia ve MySQL kullanarak bun ile url kısaltma uygulaması nasıl yapılır göreceğiz.
URL kısaltıcı, uzun bir URL’yi daha kısa bir URL’ye dönüştüren bir hizmettir. Dönüştürme işlemi genellikle URL yeniden yönlendirmeyi benzersiz bir tanımlayıcı sistemle birleştirir.
Bir kullanıcı URL kısaltıcınıza uzun bir URL gönderdiğinde hizmet, orijinal URL’yi temsil eden benzersiz bir tanımlayıcı oluşturur. Bu tanımlayıcı, kısaltıcınızın alan adına eklenerek yeni, kısaltılmış bir URL oluşturur.
Örneğin, https://www.teknokodi.com/egitim/web/javascript/bun-nedir gibi uzun bir URL, https://short.url/abc123 olarak kısaltılabilir.
Bir kullanıcı kısaltılmış bağlantıya tıkladığında tarayıcısı kısaltıcınıza bir istek gönderir. Kısaltıcınız isteği aldığında, benzersiz tanımlayıcıyı çıkarır ve ardından veritabanında bu tanımlayıcıyla ilişkili karşılık gelen uzun URL’yi arar.
Uzun URL alındıktan sonra sunucunuz, kullanıcının tarayıcısına, orijinal URL’ye gitmesi talimatını veren bir yeniden yönlendirme yanıtı yayınlayacaktır.
Ek olarak, URL kısaltıcılar genellikle analitik gibi ek özellikler sunarak kullanıcıların kısaltılmış bağlantılarına yapılan tıklama sayısını ve diğer ilgili ölçümleri izlemelerine olanak tanır.
Geliştirme Ortamının Kurulması
Daha önce de belirtildiği gibi, bu eğitimde Bun, Elysia ve MySQL’i kullanarak bir URL kısaltıcı oluşturacağız. Bu bölümde yeni bir proje oluşturup başlatacak, veritabanınıza bağlanacak ve URL kısaltıcınız için veri modellerini oluşturacaksınız.
Öncelikle bun ile url kısaltma uygulaması için aşağıdaki komutu çalıştırarak proje dizininizi oluşturun:
// Terminalden proje dizinimizin içine gelip url-shortener isimli bir klasör oluşturuyoruz ve içine giriyoruz.
mkdir url-shortener && cd url-shortener
// Ardından gerekli paketleri yüklüyoruz.
bun init
// Ardından gerekli paketleri yüklüyoruz.
bun add elysia prisma mysql2 nanoid @prisma/client dotenv
- Elysia: Elysia, Bun için Express’e benzer ancak 21 kat daha hızlı, performans odaklı bir HTTP çerçevesidir.
- Prisma: Prisma, JavaScript ve TypeScript için bir nesne ilişkisel eşleyicidir (ORM).
- MySQL2: MySQL2, Node.js uygulamalarına yönelik bir MySQL istemcisidir.
- Nanoid: Nanoid kompakt ve güvenli, benzersiz bir dizi oluşturucudur. Her URL’yi benzersiz şekilde tanımlamak için bu pakete ihtiyacınız olacak.
- Dotenv: Dotenv, çevresel değişkenleri bir .env dosyasından proses.env’e yükleyen bir NPM paketidir.
Son olarak projenizin kök dizininde bir src klasörü oluşturun. Uygulamanızın tüm kaynak dosyalarını depolayacağınız yer burasıdır. Hizmet ve denetleyici dosyalarınızı (shorter.service.ts ve shorter.controller.ts) src klasörünüzde oluşturun.
Veritabanı Bağlantısını Oluşturma
npx prisma init
Yukarıdaki komutu çalıştırmak uygulamanızda Prisma’yı başlatır ve kök dizininizde bir prisma klasörü, bir .env dosyası ve bir .gitignore oluşturur. Prisma klasörünün içinde bir schema.prisma dosyası bulacaksınız.
Schema.prisma dosyası, bir data source (veri kaynağı) ve bir generatoor (oluşturucu) da dahil olmak üzere uygulamanızın Prisma ile nasıl etkileşime girdiğine ilişkin bilgiler içerir.
Data source Prisma’nın veritabanınıza nasıl bağlanması gerektiğini belirtir.
Varsayılan olarak data source sağlayıcısı (provider) postgresql’e ayarlıdır. Aşağıdaki kod bloğunda gösterildiği gibi bunu mysql olarak değiştirin:
datasource db {
provider = "mysql"
url = env("DATABASE_URL")
}
Daha sonra, .env dosyanızı açın ve varsayılan olarak verilen DATABASE_URL’yi sizin MySQL veritabanı bağlantı dizenizle değiştirin.
Model Oluşturma
Ardından, Url modelinizi oluşturmak için aşağıdaki kod bloğunu schema.prisma dosyanıza ekleyin:
model Url {
id Int @id @default(autoincrement())
longUrl String
shortUrl String
uniqueId String
createdAt DateTime @default(now())
}
Yukarıdaki kod bloğu Url modelinizi temsil eder. Kullanıcı tarafından sağlanan uzun URL olan longUrl ve longUrl’nin kısaltılmış biçimi olan shortUrl (temel URL’niz ile uzun URL’niz için benzersiz bir tanımlayıcının birleşimi) dahil olmak üzere, kısaltma hizmetinizin çalışması için ihtiyaç duyduğunuz bilgileri içerir. URL), uniqueId ve createdAt tarihi.
Ardından, aşağıdaki komutu çalıştırarak veritabanınızı senkronize etmek için geçişinizi çalıştırın:
npx prisma migrate dev --name init
Yukarıdaki komutu çalıştırmak veritabanınızı prisma.schema dosyanızdaki modellerle senkronize edecektir.
Not: init’i istediğiniz herhangi bir adla değiştirebilirsiniz.
Artık geliştirme ortamınızı kurduğunuza, veri modelinizi oluşturduğunuza ve modeli veritabanınızla senkronize ettiğinize göre, URL kısaltma oturum açma işleminizi uygulayacaksınız.
URL Kısaltma Mantığını Uygulamak
Bu bölümde bir URL’yi kısaltmak için gereken mantığı uygulayacaksınız.
Bir URL’yi kısaltmak için öncelikle yalnızca geçerli URL’leri kısalttığınızdan emin olmak amacıyla kullanıcıdan aldığınız verilerin geçerli olup olmadığını doğrulamanız gerekir.
Belirli bir dizenin geçerli bir URL olup olmadığını doğrulamanın, Regex’i veya sınıf doğrulayıcı gibi üçüncü taraf paketlerini kullanmak da dahil olmak üzere çeşitli yolları vardır. Bu eğitimde URL’yi Regex kullanarak doğrulayacaksınız.
URL’yi Regex kullanarak doğrulamak için bir utils.ts dosyası oluşturun ve aşağıdaki kod bloğunu bu dosyaya ekleyin:
//utils.ts
export function isURLValid(url: string): boolean {
const urlPattern: RegExp = /^(http|https):\/\/[^ "]+$/;
return urlPattern.test(url);
}
Yukarıdaki kod bloğundaki isURLValid işlevi, belirli bir dizeyi sağlanan urlPattern’e göre doğrular. urlPattern, “http” veya “https” ile başlayan, ardından iki nokta üst üste ve iki eğik çizgi gelen ve ardından boşluk veya çift tırnak olmayan bir veya daha fazla karakter gelen dizelerle eşleşen bir normal ifadedir (başka bir deyişle, bir URL modeli).
Ardından, aşağıdaki içe aktarmaları shorter.service.ts dosyanıza ekleyin.
import { PrismaClient } from "@prisma/client";
import { nanoid } from "nanoid";
import { isURLValid } from "./utils";
Yukarıdaki içe aktarmalar, uygulamanız ile Prisma arasında bağlantı oluşturmak için PrismaClient’i, benzersiz bir kimlik oluşturmak için nanoid’i ve belirli bir dizenin geçerli olup olmadığını kontrol etmek için isURLValid’i içerir.
Verilen dizeyi doğruladıktan sonra, yinelenen kısa URL’leri önlemek için uygulamanızın URL’yi zaten kısaltıp kısaltmadığını kontrol etmeniz gerekir. Bunu, istek yükünde eşleşen URL’ye sahip bir kayıt için veritabanınızı sorgulayarak yapabilirsiniz.
Şöyle:
const urlExists = await prisma.url.findFirst({
where: {
longUrl,
},
});
if (urlExists) {
return urlExists.shortUrl;
}
Uygulamanız URL’yi kısalttıysa kısa URL’yi kullanıcıya döndürün; aksi takdirde uzun URL için kısa bir URL oluşturmanız gerekir.
Kısa bir URL iki bölümden oluşur: uygulamanızın temel URL’si ve benzersiz bir tanımlayıcı.
Uygulamanızın temel URL’si, gerekiyorsa ek yol bileşenleriyle birlikte kısaltıcınızın barındırıldığı alan adı veya alt alan adıdır. Geliştirme sırasında temel URL’niz “localhost:<PORT>” olur. Özellikle uygulamayı farklı ortamlara (ör. geliştirme, hazırlama, üretim) dağıtırken daha fazla esneklik için temel URL’nizi .env dosyanızda saklayabilirsiniz.
BASE_URL = "http://localhost:3000"
Kısa URL’nin benzersiz tanımlayıcısı rastgele ve öngörülebilir olmalıdır. Aynı zamanda benzersizliği korurken mümkün olduğu kadar kısa olması da gerekiyor; ideal olarak 7-10 karakter civarında olmalıdır.
Nanoid ile Benzersiz Kimlik Oluşturma
Nanoid işlevini çağırarak benzersiz bir kimlik oluşturabilirsiniz. Varsayılan olarak nanoid çağrıldığında 21 karakterden oluşan benzersiz bir kimlik oluşturulur. Ancak tercih ettiğiniz uzunluğu argüman olarak ileterek kısaltabilirsiniz.
Örneğin:
nanoid(10)
Benzersiz kimliği oluşturduktan sonra bunu uygulamanızın temel URL’siyle birleştirin.
Şöyle:
const shortUrl = `${baseURL}/${uniqueId}`;
Ardından, Url modelinizin bir örneğini oluşturun ve bunu veritabanınıza kaydedin.
Şöyle:
const url = await prisma.url.create({
data: {
longUrl,
shortUrl,
uniqueId,
},
});
Son olarak kısa URL’yi kullanıcıya döndürün.
Aşağıdaki kod bloğunu shorter.service.ts dosyanıza ekleyerek yukarıdaki mantığı uygulayabilirsiniz:
//shortener.service.ts
export async function shortenUrl(longUrl: string) {
try {
//Is the Url valid?
const isUrlValid = isURLValid(longUrl);
if (!isUrlValid) {
throw new Error("Invalid URL. Please enter a valid URL and try again");
}
//Has url already been shortened
const urlExists = await prisma.url.findFirst({
where: {
longUrl,
},
});
//Return already shortened URL
if (urlExists) {
return urlExists.shortUrl;
}
//Your base URL
const baseURL = process.env.BASE_URL;
//Unique identifier for the short URL
const uniqueId = nanoid(10);
//short url
const shortUrl = `${baseURL}/${uniqueId}`;
//Save to your database
const url = await prisma.url.create({
data: {
longUrl,
shortUrl,
uniqueId,
},
});
//Return the short url
return {
message: "URL shortened successfully",
shortUrl: url.shortUrl,
};
} catch (error) {
throw error;
}
}
Yukarıdaki işlev bir dizeyi argüman olarak alır, onu bir URL olarak doğrular, kısaltır ve kullanıcıya döndürür.
Artık URL kısaltma mantığınızın hizmet katmanını uygulamayı tamamladınız; denetleyici katmanınızı uygulayacaksınız.
Controller Oluşturma
URL kısaltma kontrolcümüz ‘/kısaltma’ya yönelik POST isteklerini karşılamalıdır. Denetleyici isteği aldığında, uzun URL’yi istek gövdesinden (veya bağlam nesnesinden) çıkarmalı ve bunu daha önce uyguladığınız shortUrl işlevine argüman olarak iletmelidir.
Controller mantığınızı uygulamak için aşağıdaki kodu shorter.controller.ts dosyanıza ekleyin:
//shortener.controller.ts
import { Elysia } from "elysia";
import { shortenUrl } from "./shortener.service";
export const urlController = (app: Elysia) => {
app.post("/shorten", async (context: any) => {
const { longUrl } = context.body;
const shortUrl = await shortenUrl(longUrl);
return shortUrl;
});
};
Yeniden Yönlendirme (Redirect)
Bu bölümde, kısaltılmış URL’yi kullanarak bir kullanıcıyı orijinal URL’sine yönlendirmek için gereken mantığı uygulayacaksınız.
Bir kullanıcıyı kısaltılmış URL’yi kullanarak uzun URL’ye yönlendirmek için, kısa URL’den benzersiz kimliği çıkarmanız, uzun URL’yi veritabanınızdan almanız ve kullanıcıyı 301 (Kalıcı Yönlendirme) durum koduyla yönlendirmeniz gerekir. Kullanıcıyı 301 durum koduyla yönlendirmek SEO bütünlüğünün korunmasına yardımcı olur.
Servis Katmanını Uygulama
Yeniden yönlendirme mantığı için, servis katmanınızın, istemci kısa URL’yi kullandığında sağladığı benzersiz kimlikle eşleşen uzun URL’yi getirme işlemini gerçekleştirmesi gerekir.
Yukarıdaki mantığı uygulamak için aşağıdaki kod bloğunu shorter.service.ts dosyanıza ekleyin:
//shortener.service.ts
export async function fetchUrl(urlUniqueId: string) {
try {
const url = await prisma.url.findFirst({
where: {
uniqueId: urlUniqueId,
},
});
return url;
} catch (error) {
throw error;
}
}
Yukarıdaki kod bloğu, veritabanınızda eşleşen benzersiz kimliğe sahip bir URL arar ve onu döndürür.
Daha sonra, yeniden yönlendirme için denetleyici katmanı mantığınızı uygulayacaksınız.
Denetleyici Katmanını Uygulama
Yeniden yönlendirme denetleyiciniz, temel URL’nize yapılan GET isteklerini yol parametresi olarak /:uniqueId ile işleyecektir. Denetleyiciniz isteği aldığında, bağlam nesnesindeki params nesnesinden benzersiz kimliği çıkarmalı ve bunu daha önce oluşturduğunuz fetchUrl işlevine argüman olarak iletmelidir.
Bu işlevselliği uygulamak için öncelikle hizmet dosyanızdan içe aktarmaları, denetleyici dosyanıza fetchUrl’yi içerecek şekilde güncelleyin:
//shortener.controller.ts
import { shortenUrl, fetchUrl } from "./shortener.service";
Ardından, aşağıdaki kod bloğunu doğrudan /shorten rota işleyicisinin altındaki urlController işlevinize ekleyin.
//shortener.controller.ts
...
app.get("/:uniqueId", async (context) => {
const uniqueId = context.params.uniqueId;
const url = await fetchUrl(uniqueId);
if (url) {
context.set.status = 301;
context.set.redirect = url.longUrl;
} else {
context.set.status = 404;
return {
message: "Page not found",
};
}
});
...
Yukarıdaki kod bloğu, kısaltılmış bir URL’nin benzersiz kimliğini istek parametrelerinden çıkarır ve bunu fetchUrl işlevine argüman olarak iletir. fetchUrl işlevi bir URL döndürürse, Elysia’nın set işlevini kullanarak durum kodunu 301’e ayarlar ve aynı set işlevini kullanarak kullanıcıyı uzun URL’ye yönlendirir. Veritabanınızda url’ye ait herhangi bir kayıt bulunamazsa kullanıcıya 404 durum kodu (Bulunamadı) ve mesaj döndürür.
Artık URL kısaltma ve yönlendirme mantığınızı tamamladığınıza göre uygulamanıza yapılan istekleri dinleyecek bir sunucu oluşturmanız gerekiyor.
Bun-Elysia Sunucunuzu Oluşturma
Bu bölümde uygulamanıza gelen istekleri dinleyecek bir web sunucusu oluşturacaksınız.
Bun-Elysia Sunucusu oluşturmak için öncelikle aşağıdaki içe aktarmaları index.ts dosyanıza ekleyin:
import * as dotenv from "dotenv";
dotenv.config();
import Elysia from "elysia";
import { urlController } from "./src/shortener.controller";
Yukarıdaki içe aktarmalar, içe aktardığınız ve yapılandırdığınız dotenv’i içerir. Aynı zamanda Elysia’yı ve urlController’ınızı da içerir.
Ardından, yeni bir Elysia uygulaması örneği oluşturmak, denetleyicinizi bağlamak ve 3000 numaralı bağlantı noktasındaki trafiği dinlemek için aşağıdaki kod bloğunu index.ts dosyanıza ekleyin.
//index.ts
const app = new Elysia();
app.use(urlController as any);
app.listen(3000, () => {
console.log("Server is running on port 3000");
});
bun ile url kısaltma uygulamamız bu şekilde. Bunu isterseniz Docker ile isterseeniz başka şekillerde yayınlayabilir ve kullanabilirsiniz.
Paylaş
Takip Et
Eğitimin, Eğlencenin ve Haberin Sitesi TEKNOKODİ
