اليوم الثامن من تحدي البرمجة #100daysofMiva وعملت على نموذج مترجم بسيط يترجم لغة إلى أخرى؟
إنه JS، إنه سحر✨؟

؟ توثيق البرنامج النصي لمترجم اللغة

ملخص

تم تصميم كود جافا سكريبت هذا لإنشاء مترجم لغة مرح وتفاعلي! يستخدم MyMemory API لترجمة النص بين لغات مختلفة ويسمح لك بتبديل اللغات أو نسخ الترجمات أو حتى نطق النص بصوت عالٍ. ??

سمات

• ؟ اختيار اللغة: يمكن للمستخدمين الاختيار من بين مجموعة واسعة من اللغات، تتراوح من الأمهرية إلى الزولو!
• ؟ تبديل اللغة: يمكنك التبديل بسهولة بين لغة المصدر واللغة المستهدفة بنقرة زر واحدة.
• ؟ تحويل النص إلى كلام: استمع إلى النص الأصلي أو المترجم باللغة المحددة.
• ؟ نسخ إلى الحافظة: انسخ النص الأصلي أو المترجم بنقرة واحدة.

انهيار الكود

بيانات اللغة

const countries = { /*...*/ } 

يحتوي هذا الكائن على اللغات المتاحة ورموز البلدان الخاصة بها. على سبيل المثال، "en-GB": "الإنجليزية" يقرن رمز اللغة باسمها.

القوائم المنسدلة الديناميكية

selectTag.forEach((tag, id) => {
    /*...*/
});

يقوم هذا الرمز بملء القوائم المنسدلة بشكل ديناميكي بجميع اللغات المدرجة في كائن البلدان. القائمة المنسدلة الأولى افتراضية باللغة الإنجليزية ("en-GB")، والثانية باللغة الهندية ("hi-IN").

مبادلة اللغة

exchageIcon.addEventListener("click", () => {
    /*...*/
});

يسمح النقر على أيقونة المبادلة للمستخدمين بتبديل النص واللغات المحددة بين الحقلين "من" و"إلى".

الترجمة في الوقت الحقيقي

translateBtn.addEventListener("click", () => {
    /*...*/
});

عند النقر على زر "ترجمة"، يتم إرسال النص إلى MyMemory API، ويتم عرض النص المترجم في حقل "إلى نص". أثناء انتظار الرد، يظهر العنصر النائب "ترجمة...".

تحويل النص إلى كلام ونسخ

icons.forEach(icon => {
    /*...*/
});

يتعامل هذا القسم مع وظائف تحويل النص إلى كلام والنسخ:

• الكلام: تشغيل النص بصوت عالٍ باللغة المحددة.
• نسخ: لنسخ النص إلى الحافظة.

كيف يعمل

1. اختر اللغات ?: اختر لغاتك من القوائم المنسدلة.
2. اكتب النص أو الصقه ✍️: أدخل النص الذي تريد ترجمته.
3. ترجمة ?: انقر فوق الزر "ترجمة" وشاهد السحر يحدث!
4. تبديل أو استماع أو نسخ ؟؟؟: تبديل اللغات، والاستماع إلى الترجمة، أو نسخ النص إلى الحافظة الخاصة بك.

التبعيات

• MyMemory API: يتم تشغيل وظيفة الترجمة بواسطة MyMemory API. تأكد من أن لديك اتصال إنترنت نشط حتى يعمل.

التحسينات المحتملة

• الاكتشاف التلقائي للغة: اكتشاف لغة نص الإدخال تلقائيًا.
• معالجة الأخطاء المتقدمة: تحسين الاستجابة لأخطاء الترجمة أو فشل واجهة برمجة التطبيقات.
• ترجمات متعددة: عرض الترجمات البديلة حيثما كانت متاحة.

فيما يلي تفصيل تفصيلي لكيفية عمل الكود وماذا يفعل:

الخطوة 1: تحديد اللغات المتاحة

const countries = { /*...*/ }

• ماذا يفعل: يحتوي هذا الكائن على أزواج قيمة المفتاح حيث يكون المفتاح هو رمز اللغة والبلد (مثل "en-GB" للغة الإنجليزية) والقيمة هي اسم اللغة (مثل "الإنجليزية" ).
• الغرض: يتم استخدام هذه البيانات لملء القوائم المنسدلة لاختيار اللغة حتى يتمكن المستخدمون من اختيار لغة المصدر واللغة المستهدفة.

الخطوة 2: تحديد عناصر DOM

const fromText = document.querySelector(".from-text"),
      toText = document.querySelector(".to-text"),
      exchageIcon = document.querySelector(".exchange"),
      selectTag = document.querySelectorAll("select"),
      icons = document.querySelectorAll(".row i");
      translateBtn = document.querySelector("button"),

• ماذا يفعل: يحدد هذا الرمز عناصر مختلفة من مستند HTML ويخزنها في متغيرات ليسهل الوصول إليها لاحقًا.
  • fromText وtoText: مناطق النص حيث يقوم المستخدمون بإدخال النص ورؤية الترجمة.
  • exchageIcon: الأيقونة المستخدمة لتبادل اللغات والنصوص.
  • SelectTag: القوائم المنسدلة لاختيار اللغات.
  • أيقونات: أيقونات لوظائف النسخ والكلام.
  • ترجمة Btn: الزر الذي يقوم بتشغيل الترجمة.

الخطوة 3: تعبئة القوائم المنسدلة للغات

selectTag.forEach((tag, id) => {
    for (let country_code in countries) {
        let selected = id == 0 ? country_code == "en-GB" ? "selected" : "" : country_code == "hi-IN" ? "selected" : "";
        let option = `${countries[country_code]}`;
        tag.insertAdjacentHTML("beforeend", option);
    }
});

• ماذا تفعل: تمر هذه الحلقة عبر كائن البلدان وتضيف كل لغة كخيار في القوائم المنسدلة لاختيار اللغة.
  • إذا كانت القائمة المنسدلة هي الأولى (المعرف == 0)، فسيتم تحديد اللغة الإنجليزية ("en-GB") افتراضيًا.
  • إذا كانت القائمة المنسدلة هي الثانية (المعرف == 1)، فسيتم تحديد اللغة الهندية ("hi-IN") افتراضيًا.

الخطوة 4: تبديل اللغات والنصوص

exchageIcon.addEventListener("click", () => {
    let tempText = fromText.value,
        tempLang = selectTag[0].value;
    fromText.value = toText.value;
    toText.value = tempText;
    selectTag[0].value = selectTag[1].value;
    selectTag[1].value = tempLang;
});

• ماذا تفعل: عند النقر على أيقونة المبادلة، تقوم هذه الوظيفة بتبديل النص بين منطقتي النص "من" و"إلى" بالإضافة إلى اللغات المحددة.
  • يحتفظ tempText بالنص الأصلي مؤقتًا من الحقل "من النص".
  • يحتفظ tempLang مؤقتًا باللغة الأصلية من القائمة المنسدلة الأولى.
  • يتم بعد ذلك استبدال "من النص" بـ "إلى النص"، والعكس صحيح. يتم أيضًا تبديل اللغات المحددة.

الخطوة 5: مسح النص المترجم

fromText.addEventListener("keyup", () => {
    if(!fromText.value) {
        toText.value = "";
    }
});

• ماذا تفعل: إذا قام المستخدم بحذف كل النص من حقل "من نص"، فإن هذه الوظيفة تقوم تلقائيًا بمسح حقل "إلى نص" أيضًا.
• الغرض: التأكد من أنه إذا تم مسح النص المُدخل، فسيتم مسح الترجمة أيضًا، مما يمنع الارتباك.

الخطوة 6: ترجمة النص

translateBtn.addEventListener("click", () => {
    let text = fromText.value.trim(),
        translateFrom = selectTag[0].value,
        translateTo = selectTag[1].value;
    if(!text) return;
    toText.setAttribute("placeholder", "Translating...");
    let apiUrl = `https://api.mymemory.translated.net/get?q=${text}&langpair=${translateFrom}|${translateTo}`;
    fetch(apiUrl).then(res => res.json()).then(data => {
        toText.value = data.responseData.translatedText;
        data.matches.forEach(data => {
            if(data.id === 0) {
                toText.value = data.translation;
            }
        });
        toText.setAttribute("placeholder", "Translation");
    });
});

• ماذا يفعل: عند النقر على زر "ترجمة"، هذه الوظيفة:
  1. استخراج النص من حقل "من النص".
  2. يحدد اللغات المحددة من القوائم المنسدلة.
  3. يرسل طلبًا إلى MyMemory API مع النص واللغات المحددة.
  4. يتلقى الترجمة من واجهة برمجة التطبيقات ويعرضها في حقل "إلى نص".
  5. يقوم بتحديث نص العنصر النائب أثناء انتظار الترجمة للإشارة إلى أن العملية مستمرة.

ملخص

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

استمتع باللعب بلغات مختلفة واجعل رحلة الترجمة الخاصة بك ممتعة وتفاعلية! ؟؟ إلى التالي ?✌?✨

شاهده هنا
https://app.marvelly.com.ng/100daysofMiva/day-8/

كود المصدر
https://github.com/Marvellye/100daysofMiva/blob/main/Projects/Day_8-Simple_language_translator