اصنع أداة اختصار روابط خاصة بك باستخدام JavaScript

اختصار الروابط هو أداة تقوم بتحويل الروابط الطويلة إلى روابط أقصر وأسهل في التعامل. بمجرد اختصار الرابط، يتم توجيه المستخدمين إلى الرابط الأصلي.

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

في هذا البرنامج التعليمي، سنغطي كيفية إنشاء أداة اختصار روابط خاصة بك باستخدام JavaScript! بنهاية هذا البرنامج التعليمي، سيكون لدينا شيء مثل هذا:

انشاء اختصار الروابط (URL Shortener)؟

إنشاء واجهة المستخدم باستخدام HTML وCSS

سنستخدم HTML وCSS لبناء واجهة مستخدم بسيطة، تتضمن العناصر التالية:

• عنصر نموذج (form) مع <input type="url"> وزر لإرسال النموذج.
• عنصر <div> لعرض النتائج وعلامة لنسخ الرابط المختصر.
• عنصر <div> لعرض أي رسائل خطأ.
• عنصر <div> لعرض رسالة "تم النسخ" عند نسخ الرابط.

أضف هذا الكود في قسم body من ملف HTML:

<div class="container">
    <h1>URL Shortener</h1>
    <form id="form">
        <input type="url" id="url" placeholder="Enter your long URL" required>
        <button type="submit" id="submit-btn">Shorten URL</button>
    </form>
    <div id="result">
        <p>Shortened URL: <a target="_blank" id="shortened-url"></a>
            <i id="icon" class="fa-solid fa-copy"></i>
        </p>
    </div>
    <div id="copy">Copied!</div>
    <div id="error"></div>
</div>
    

التنسيق باستخدام CSS

لنبدأ بتطبيق بعض الأنماط لجعل الصفحة تبدو بالشكل الذي نريده.

لتنسيق الصفحة، لنبدأ بتعيين display: flex; للجسم لضمان أن كل شيء يتم توسيطه أفقيًا وعموديًا. سنضيف أيضًا لون خلفية.

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f1f1f1;
    font-family: Arial, sans-serif;
}

الآن لنضيف هذه الأنماط لعنصر الحاوية (container).

.container {
    width: 400px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
}

لضمان أن تكون العناصر في النموذج (<input/> و<button/>) مرتبة عموديًا، سنطبق display: flex وflex-direction: column على النموذج.

form {
    display: flex;
    flex-direction: column;
}

بعد ذلك، سنضيف بعض الهوامش والحواف الدائرية لعناصر النموذج لمظهر أكثر أناقة.

input, button {
    padding: 10px;
    margin: 10px 0;
    border: none;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

ثم نضيف هذه الأنماط لزر الإرسال.

button {
    cursor: pointer;    
    background-color: #007bff;
    color: #fff;
}
button:hover {
    background-color: #0069d9;
}
button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

نحن على الطريق الصحيح! الآن سنقوم بإخفاء عناصر النتيجة والخطأ ونسخ الرسالة بشكل افتراضي.

#result, #error, #copy {
    display: none;
}

قم بتطبيق لون أحمر لعنصر الخطأ.

#error {
    color: #dc3545;
    margin-top: 10px;
}

عند اختصار الرابط، نحتاج إلى توفير خيار لنسخ الرابط المختصر. لذا قم بتنسيق أيقونة النسخ لتظهر بجانب النتيجة، ووضع رسالة "تم النسخ" أسفل الرابط المختصر.

#icon {
    cursor: pointer;
    margin-left: 10px;
    vertical-align: middle;
    color: #0069d9;
}
#copy {
    position: absolute;
    left: 60%;
}

مع الانتهاء من ذلك، نكون قد أكملنا التنسيق!

اختبار API

سنستخدم واجهة برمجة التطبيقات (API) الخاصة بـ TinyURL لإنشاء روابط مختصرة، لذا توجه إلى TinyURL واحصل على رمز API مجاني.

توفر واجهة برمجة التطبيقات عدة نقاط نهاية (endpoints) كما هو موضح أدناه. في حالتنا، سنستخدم نقطة النهاية /create. لإجراء طلب POST بسيط، أرسل طلبًا إلى واجهة برمجة التطبيقات مع الرمز المميز في الرؤوس وقم بتضمين الرابط والنطاق (TinyURL) في جسم الطلب.

الحصول على عناصر DOM

لنحصل الآن على جميع عناصر DOM اللازمة للتلاعب.

const form = document.getElementById("form");
const urlInput = document.getElementById("url");
const submitBtn = document.getElementById("submit-btn");
const result = document.getElementById("result");
const shortenedUrlLink = document.getElementById("shortened-url");
const errorMessage = document.getElementById("error");
const copyIcon = document.getElementById("icon");
const copyUrl = document.getElementById("copy");

بعد ذلك، قم بإنشاء دالة غير متزامنة تسمى shortenUrl ستأخذ الرابط كمعامل.

async function shortenUrl(url) {
}

داخل هذه الدالة، قم بتعريف واجهة برمجة التطبيقات الخاصة بـ TinyURL والرمز السري.

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

بعد ذلك، قم بإجراء طلب POST وحدد البيانات المطلوبة.

async function shortenUrl(url) {
  const apiUrl = "https://api.tinyurl.com/create";
  const token = "your_tinuyurl_token";
  const response = await fetch(apiUrl, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${token}`
    },
    body: JSON.stringify({
      domain: "tinyurl.com",
      url: url
    })
  });
  if (!response.ok) {
    throw new Error("An error occurred. Please try again.");
  }
  const result = await response.json();
}
    

في دالة shortenUrl، نستخدم fetch لإرسال طلب إلى نقطة النهاية apiUrl وننتظر الرد. كما رأينا سابقًا، تتوقع واجهة برمجة التطبيقات الخاصة بـ TinyURL رمزًا مميزًا في الرأس، ويجب أن يحتوي الجسم على النطاق والرابط الذي سيتم اختصاره.

إذا حدث خطأ، سيتم عرض الرسالة "حدث خطأ. يرجى المحاولة مرة أخرى".

مثال على الرد يبدو كالتالي:

{
  "data": {
    "domain": "tinyurl.com",
    "alias": "example-alias",
    "deleted": false,
    "archived": false,
    "tags": [
      "tag1",
      "tag2"
    ],
    "analytics": [
      {
        "enabled": true,
        "public": false
      }
    ],
    "tiny_url": "https://tinyurl.com/example-alias",
    "created_at": "2022-11-24T19:41:23+00:00",
    "expires_at": null,
    "url": "https://google.com"
  },
  "code": 0,
  "errors": []
}
    

من هذا الرد، نحتاج إلى استخراج قيمة tiny_url، لذا قم بتحديث الدالة كما يلي:

async function shortenUrl(url) {
  const apiUrl = "https://api.tinyurl.com/create";
  const token = "your_token";
  const response = await fetch(apiUrl, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${token}`
    },
    body: JSON.stringify({
      domain: "tinyurl.com",
      url: url
    })
  });
  if (!response.ok) {
    throw new Error("An error occurred. Please try again.");
  }
  const result = await response.json();
  return result.data.tiny_url;
}
    

الحصول على الرابط من المستخدم

حسنًا. لدينا دالة تقوم بإنشاء رابط مختصر، لذا نحتاج الآن إلى إضافة مستمع حدث إلى النموذج لالتقاط الرابط من المستخدم. أضف حدث onSubmit إلى النموذج.

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

داخل مستمع الحدث، نريد الحصول على الرابط من المستخدم، واستدعاء دالة shortenUrl بالقيمة التي قدمها المستخدم، ثم عرض الرابط المختصر للمستخدم.

قم بتحديث مستمع الحدث كما يلي:

form.addEventListener("submit", async (e) => {
  e.preventDefault();
  const url = urlInput.value;
    submitBtn.disabled = true;
    submitBtn.textContent = "Shortening...";
    errorMessage.style.display = "none";
    result.style.display = "none";
    copyUrl.style.display = "none";
    const shortUrl = await shortenUrl(url);
    shortenedUrlLink.href = shortUrl;
    shortenedUrlLink.textContent = shortUrl;
    result.style.display = "block";
 
});
    

الأمور أصبحت معقدة بعض الشيء، لذا دعنا نفصل الكود أعلاه:

• const url = urlInput.value; يحصل على الرابط الذي أدخله المستخدم في حقل الإدخال.
• submitBtn.disabled = true; يعطل زر الإرسال أثناء عملية إنشاء الرابط لمنع المستخدم من بدء طلب جديد.
• submitBtn.textContent = "جاري الاختصار..."; يعرض الرسالة "جاري الاختصار..." لإعلام المستخدم بأن العملية جارية.
• const shortUrl = await shortenUrl(url); يستدعي دالة shortenUrl ويعيد الرابط المختصر.
• shortenedUrlLink.href = shortUrl; يضيف سمة href إلى عنصر shortenedUrlLink.
• shortenedUrlLink.textContent = shortUrl; يعين الرابط المختصر كنص لعنصر shortenedUrlLink.
• result.style.display = "block"; يجعل عنصر shortenedUrlLink مرئيًا.

معالجة الأخطاء

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

قم بتحديث مستمع الحدث كما يلي:

form.addEventListener("submit", async (e) => {
  e.preventDefault();
  const url = urlInput.value;
  if (!url) {
    displayMessage("يرجى إدخال رابط");
    return;
  }
  
  // بقية الكود 
});
    

بعد ذلك، قم بلف المنطق في كتلة try للتعامل مع أي أخطاء قد تحدث أثناء عملية الإنشاء.

try {
    submitBtn.disabled = true;
    submitBtn.disabled = true;
    submitBtn.textContent = "جاري الاختصار...";
    errorMessage.style.display = "none";
    result.style.display = "none";
    copyUrl.style.display = "none";
    const shortUrl = await shortenUrl(url);
    shortenedUrlLink.href = shortUrl;
    shortenedUrlLink.textContent = shortUrl;
    result.style.display = "block";
  } catch (error) {
    displayMessage("حدث خطأ أثناء اختصار الرابط. يرجى المحاولة مرة أخرى.");
  } finally {
    submitBtn.disabled = false;
    submitBtn.textContent = "اختصار الرابط";
  }
    

إذا حدث أي خطأ، سنعرض رسالة للمستخدم. في كتلة finally، سنقوم بالتنظيف عن طريق إعادة تعيين زر الإرسال.

تبدو دالة displayMessage كما يلي:

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

الآن عندما يتم اختصار الرابط، يجب أن يبدو الإخراج كما يلي:

نسخ الرابط إلى الحافظة

الخطوة الأخيرة هي تمكين وظيفة النسخ إلى الحافظة. دعنا نضيف حدثًا للاستماع إلى حدث النقر على زر الإرسال.

copyIcon.addEventListener("click", async () => {
  try {
    await navigator.clipboard.writeText(shortenedUrlLink.textContent);
    copyUrl.style.display = "block";
    setTimeout(() => {
      copyUrl.style.display = "none";
    }, 2000);
  } catch (err) {
    displayMessage("فشل النسخ إلى الحافظة. يرجى المحاولة مرة أخرى.");
  }
});
    

واجهة برمجة التطبيقات الخاصة بالحافظة (navigator.clipboard.writeText) هي دالة غير متزامنة تعيد وعدًا (promise) يتم حله عند نسخ النص بنجاح.

إذا حدث أي خطأ أثناء النسخ، سيتم عرض رسالة خطأ.

وها نحن انتهينا!

عمل رائع. إليك العرض التوضيحي الذي قمت ببنائه للتو:

لقد وصلنا إلى نهاية هذا البرنامج التعليمي، والآن لديك أداة اختصار روابط تعمل بالكامل. إحدى الطرق التي يمكنك من خلالها تحسين هذه الأداة هي تحويلها إلى إضافة لمتصفح Chrome. سيضمن ذلك أن اختصار الرابط يكون سريعًا ومريحًا — لماذا لا تجرب ذلك؟!