کوتاه کننده URL خود را در جاوا اسکریپت بسازید

کوتاه کننده URL چیست؟

کوتاه کننده URL ابزاری است که URL های طولانی را به لینک های کوتاه تر و قابل مدیریت تر تبدیل می کند. هنگامی که URL کوتاه شد، کاربران را به URL اصلی هدایت می کند.

به اشتراک گذاری آدرس های اینترنتی کوتاه در رسانه های اجتماعی، ایمیل ها یا هر پلتفرم دیجیتالی دیگر آسان تر است. علاوه بر این، بسیاری از کوتاه کننده های URL ویژگی های پیشرفته ای مانند ردیابی و تجزیه و تحلیل ارائه می دهند که می تواند در ارائه بینش در مورد تعامل کاربر مفید باشد.

در این آموزش، نحوه ایجاد ابزار کوتاه کننده URL خود را با استفاده از جاوا اسکریپت توضیح خواهیم داد!

در پایان این آموزش، چیزی شبیه به این خواهیم داشت:

بیایید شروع کنیم!

ایجاد رابط کاربری با HTML و CSS

ما از HTML و CSS برای ایجاد یک رابط کاربری ساده با عناصر زیر استفاده خواهیم کرد:

• یک عنصر فرم با a و یک دکمه برای ارسال
• الف عنصر برای نمایش نتایج و یک برچسب برای کپی کردن URL کوتاه شده.
• الف \xa0 عنصری برای نمایش هرگونه پیام خطا
• الف \xa0 element to display a copied message when the URL is copied.

Add this code in the body of the HTML file.

1

 class="container">

2

    URL Shortener

3

4

         type="url" id="url" placeholder="Enter your long URL" required>

5

         type="submit" id="submit-btn">Shorten URL

6

7

    
 id="result">

8

        Shortened URL:  target="_blank" id="shortened-url">

9

   id="icon" class="fa-solid fa-copy">

10

11

12

    
 id="copy">Copied!

13

    
 id="error">

14

Styling with CSS

Let’s rifle through some styles to get things looking the way we want.

To style the page, let’s start by setting the body to use display: flex; این اطمینان حاصل می کند که همه چیز به صورت افقی و عمودی در مرکز قرار می گیرد.

ما همچنین یک رنگ پس زمینه اضافه می کنیم.

1

body {

2

    display: flex;

3

    justify-content: center;

4

    align-items: center;

5

    height: 100vh;

6

    background-color: #f1f1f1;

7

    font-family: Arial, sans-serif;

8

}

حالا بیایید این استایل ها را به عنصر container اضافه کنیم.

1

.container {

2

    width: 400px;

3

    background-color: #fff;

4

    border-radius: 5px;

5

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

6

    padding: 20px;

7

    text-align: center;

8

}

برای اطمینان از عناصر موجود در فرم ( و ) به صورت عمودی انباشته می شوند، ما اعمال می کنیم display: flex و flex-direction: column سبک ها به فرم

1	form {
2	display: flex;
3	flex-direction: column;
4	}

در ادامه مقداری اضافه می کنیم margin، padding، و border-radius به عناصر فرم برای ظاهری ظریف تر.

1	input, button {
2	padding: 10px;
3	margin: 10px 0;
4	border: none;
5	border-radius: 5px;
6	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
7	}

سپس این سبک ها به دکمه ارسال ما.

1	button {
2	cursor: pointer;
3	background-color: #007bff;
4	color: #fff;
5	}
6	button:hover {
7	background-color: #0069d9;
8	}
9	button:disabled {
10	background-color: #cccccc;
11	cursor: not-allowed;
12	}

داریم به آنجا می رسیم! حالا تنظیم کنید نتیجه، خطا و کپی کنید عناصری که به طور پیش فرض پنهان می شوند.

1	#result, #error, #copy {
2	display: none;
3	}

رنگ قرمز را روی آن بمالید خطا عنصر

1	#error {
2	color: #dc3545;
3	margin-top: 10px;
4	}

وقتی یک URL کوتاه می شود، باید گزینه ای برای کپی لینک کوتاه شده ارائه دهیم. بنابراین آیکون کپی را طوری استایل دهید که در کنار نتیجه ظاهر شود و پیام "کپی شده" را در زیر URL کوتاه شده قرار دهید.

1	#icon {
2	cursor: pointer;
3	margin-left: 10px;
4	vertical-align: middle;
5	color: #0069d9;
6	}
7	#copy {
8	position: absolute;
9	left: 60%;
10	}

با انجام این کار، استایل ما به پایان رسید!

تست API

ما از TinyURL API برای تولید URL های کوتاه شده استفاده می کنیم، بنابراین به TinyURL بروید و یک نشانه API رایگان دریافت کنید.

API چندین نقطه پایانی را مطابق شکل زیر ارائه می دهد.

در مورد ما، ما از آن استفاده خواهیم کرد /create نقطه پایانی برای ایجاد یک درخواست POST ساده، درخواستی را با توکن خود در هدرها به API ارسال کنید و URL و دامنه (tinyurl.com) را در بدنه درخواست قرار دهید.

عناصر DOM را دریافت کنید

بیایید اکنون تمام عناصر DOM مورد نیاز برای دستکاری را دریافت کنیم

1	const form = document.getElementById("form");
2	const urlInput = document.getElementById("url");
3	const submitBtn = document.getElementById("submit-btn");
4	const result = document.getElementById("result");
5	const shortenedUrlLink = document.getElementById("shortened-url");
6	const errorMessage = document.getElementById("error");
7	const copyIcon = document.getElementById("icon");
8	const copyUrl = document.getElementById("copy");

بعد، یک تابع async به نام ایجاد کنید shortenUrl که URL را به عنوان یک پارامتر می گیرد.

1	async function shortenUrl(url) {
2
3	}

در داخل این تابع، را تعریف کنید TinyUrl API و راز نشانه.

1	async function shortenUrl(url) {
2	const apiUrl = "https://api.tinyurl.com/create";
3	const token = "your_tinuyurl_token";
4
5	}

بعد، یک را بسازید POST داده های مورد نیاز را درخواست و مشخص کنید.

1	async function shortenUrl(url) {
2	const apiUrl = "https://api.tinyurl.com/create";
3	const token = "your_tinuyurl_token";
4	const response = await fetch(apiUrl, {
5	method: "POST",
6	headers: {
7	"Content-Type": "application/json",
8	Authorization: `Bearer ${token}`
9	},
10	body: JSON.stringify({
11	domain: "tinyurl.com",
12	url: url
13	})
14	});
15
16	if (!response.ok) {
17	throw new Error("An error occurred. Please try again.");
18	}
19	const result = await response.json();
20
21	}

در shortenUrl تابع، ما از fetch برای ارسال درخواست به apiUrl نقطه پایانی و منتظر پاسخ باشید. همانطور که قبلاً دیدیم، TinyURL API انتظار دارد که یک نشانه در هدر وجود داشته باشد و بدنه باید شامل دامنه و URL کوتاه شود.

اگر خطایی رخ دهد، پیام خطایی رخ داد. لطفا دوباره امتحان کنید نمایش داده خواهد شد.

یک نمونه پاسخ به این شکل است:

1	{
2	"data": {
3	"domain": "tinyurl.com",
4	"alias": "example-alias",
5	"deleted": false,
6	"archived": false,
7	"tags": (
8	"tag1",
9	"tag2"
10	),
11	"analytics": (
12	{
13	"enabled": true,
14	"public": false
15	}
16	),
17	"tiny_url": "https://tinyurl.com/example-alias",
18	"created_at": "2022-11-24T19:41:23+00:00",
19	"expires_at": null,
20	"url": "https://google.com"
21	},
22	"code": 0,
23	"errors": ()
24	}

از این پاسخ، باید آن را استخراج کنیم tiny_url مقدار، بنابراین تابع را به صورت زیر به روز کنید:

1	async function shortenUrl(url) {
2	const apiUrl = "https://api.tinyurl.com/create";
3	const token = "your_token";
4	const response = await fetch(apiUrl, {
5	method: "POST",
6	headers: {
7	"Content-Type": "application/json",
8	Authorization: `Bearer ${token}`
9	},
10	body: JSON.stringify({
11	domain: "tinyurl.com",
12	url: url
13	})
14	});
15
16	if (!response.ok) {
17	throw new Error("An error occurred. Please try again.");
18	}
19	const result = await response.json();
20	return result.data.tiny_url;
21	}

URL را از کاربر دریافت کنید

باشه ما تابعی داریم که یک URL کوتاه شده ایجاد می کند، بنابراین اکنون باید یک شنونده رویداد به فرم اضافه کنیم تا URL را از کاربر بگیرد. یک را اضافه کنید onSubmit رویداد به فرم

1	form.addEventListener("submit", async (e) => {
2
3	}

در داخل شنونده رویداد، ما می خواهیم URL را از کاربر دریافت کنیم، آن را فراخوانی کنیم shortenUrl با مقدار کاربر ارائه شده عمل کنید و سپس URL کوتاه شده را به کاربر نمایش دهید.

شنونده رویداد را به صورت زیر به روز کنید:

1	form.addEventListener("submit", async (e) => {
2	e.preventDefault();
3	const url = urlInput.value;
4	submitBtn.disabled = true;
5	submitBtn.textContent = "Shortening...";
6	errorMessage.style.display = "none";
7	result.style.display = "none";
8	copyUrl.style.display = "none";
9
10	const shortUrl = await shortenUrl(url);
11	shortenedUrlLink.href = shortUrl;
12	shortenedUrlLink.textContent = shortUrl;
13
14	result.style.display = "block";
15
16	});

همه چیز کمی پیچیده می شود، بنابراین اجازه دهید کد بالا را تجزیه کنیم:

• const url = urlInput.value; URL وارد شده توسط کاربر در قسمت ورودی را دریافت می کند.
• submitBtn.disabled = true; دکمه ارسال را در طول فرآیند تولید URL غیرفعال می کند تا کاربر نتواند درخواست جدیدی را آغاز کند.
• submitBtn.textContent = "Shortening..."; پیام را نمایش می دهد کوتاه کردن... به کاربر اطلاع دهد که فرآیند در حال انجام است.
• const shortUrl = await shortenUrl(url); تابع shortenUrl را فراخوانی می کند و URL کوتاه شده را برمی گرداند.
• shortenedUrlLink.href = shortUrl; یک ویژگی href را به عنصر shortenedUrlLink اضافه می کند.
• shortenedUrlLink.textContent = shortUrl; URL کوتاه شده را به عنوان متن روی عنصر shortenedUrlLink قرار می دهد.
• result.style.display = "block"; عنصر shortenedUrlLink را قابل مشاهده می کند.

رسیدگی به خطا

بیایید کد خود را برای رسیدگی به خطاها به روز کنیم. ابتدا باید بررسی کنیم که آیا کاربر URL معتبری را در قسمت ورودی وارد کرده است یا خیر. در غیر این صورت، پیامی نمایش خواهیم داد که به آنها اجازه می دهد یک URL معتبر ارائه دهند.

شنونده رویداد را به صورت زیر به روز کنید.

1	form.addEventListener("submit", async (e) => {
2	e.preventDefault();
3	const url = urlInput.value;
4
5	if (!url) {
6	displayMessage("Please enter a URL");
7	return;
8	}
9
10	// the rest of the code
11	});

بعد، منطق را در a بپیچید try-block برای رسیدگی به هر گونه خطایی که ممکن است در طول فرآیند تولید رخ دهد.

1	try {
2	submitBtn.disabled = true;
3	submitBtn.disabled = true;
4	submitBtn.textContent = "Shortening...";
5	errorMessage.style.display = "none";
6	result.style.display = "none";
7	copyUrl.style.display = "none";
8
9	const shortUrl = await shortenUrl(url);
10	shortenedUrlLink.href = shortUrl;
11	shortenedUrlLink.textContent = shortUrl;
12
13	result.style.display = "block";
14	} catch (error) {
15	displayMessage("An error occurred while shortening the URL. Please try again.");
16	} finally {
17	submitBtn.disabled = false;
18	submitBtn.textContent = "Shorten URL";
19	}

در صورت بروز هر گونه خطایی، پیامی به کاربر نمایش می دهیم. در finally مسدود کردن، ما با تنظیم مجدد دکمه ارسال، پاکسازی می کنیم.

را displayMessage تابع به شکل زیر است:

1	function displayMessage(message) {
2	errorMessage.textContent = message;
3	errorMessage.style.display = "block";
4	}

اکنون وقتی یک URL کوتاه است، خروجی باید به شکل زیر باشد:

URL را در ClipBoard کپی کنید

آخرین مرحله فعال کردن قابلیت کپی به کلیپ بورد است. بیایید یک رویداد اضافه کنیم تا به رویداد کلیک روی دکمه ارسال گوش دهیم.

1	copyIcon.addEventListener("click", async () => {
2	try {
3	await navigator.clipboard.writeText(shortenedUrlLink.textContent);
4	copyUrl.style.display = "block";
5	setTimeout(() => {
6	copyUrl.style.display = "none";
7	}, 2000);
8	} catch (err) {
9	displayMessage("Failed to copy to clipboard. Please try again.");
10	}
11	});

API کلیپ بورد (navigator.clipboard.writeText) یک تابع ناهمزمان است که قولی را برمی گرداند که وقتی متن با موفقیت کپی شود برطرف می شود.

در صورت بروز هرگونه خطایی در حین کپی پیغام خطا نمایش داده می شود.

و ما تمام شدیم!

کار عالی این نسخه ی نمایشی است که به تازگی ساخته اید:

ما به پایان این آموزش رسیدیم و اکنون شما یک کوتاه کننده URL کاملاً کارآمد دارید. یکی از راه هایی که می توانید این ابزار را بهبود ببخشید، تبدیل آن به افزونه کروم است. این اطمینان حاصل می کند که کوتاه کردن یک URL فوری و راحت است - چرا آن را انجام ندهید؟!