شرح انشاء كود سكريبت برمجة تطبيق القاموس اللغوي

 

خطوات انشاء مشروع قاموس متعدد اللغات باستخدام API

ماهي خدمة API؟

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

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

وسنبني معا صفحة ويب ديناميكية باستخدام HTML و CSS و JavaScript لعرض تعريفات الكلمات.

خطوات الحصول على API

الـ **API** التي نستخدمها في هذا المثال هي Dictionary API المفتوحة المصدر. لا تحتاج إلى مفتاح API لاستخدام هذه الخدمة. 

ومن أجل إجراء استعلام للبحث عن كلمة، يمكن إرسال طلب إلى الرابط التالي:

https://api.dictionaryapi.dev/api/v2/entries/en/{word}

على سبيل المثال، للبحث عن كلمة "hello"، يمكنك إرسال الطلب إلى:

https://api.dictionaryapi.dev/api/v2/entries/en/hello

سترد الـ API استجابة بتنسيق JSON تحتوي على تعريفات الكلمات، والرموز الصوتية، والأمثلة.

كيفية بناء وإنشاء الكود

سنقسم المشروع إلى ثلاثة أجزاء رئيسية: HTML لهيكل الصفحة، CSS للتنسيق، و JavaScript لمعالجة البيانات من الـ API وعرض النتائج.

 HTML (هيكل الصفحة)

الجزء المسؤول عن هيكل الصفحة هو HTML. سنحتاج إلى:

• حقل إدخال لإدخال الكلمة.
• قائمة منسدلة لاختيار اللغة (مثال: الإنجليزية، العربية، العبرية، الروسية، الهندية).
• زر لإرسال الطلب.
• حقل لعرض النتائج.

<div class="container">
    <h1>Dictionary API</h1>
    <select id="language">
        <option value="en">English</option>
        <option value="ar">Arabic</option>
        <option value="he">Hebrew</option>
        <option value="ru">Russian</option>
        <option value="hi">Hindi</option>
    </select>
    <input type="text" id="word" placeholder="Enter word" />
    <button onclick="getDefinition()">Get Definition</button>
    <div class="result" id="result"></div>
</div>
        

CSS (تنسيق الصفحة)

ستكون CSS مسؤولة عن تنسيق الصفحة لجعلها أكثر جذباً وسهولة في الاستخدام. سنستخدم خصائص مثل box-shadow و border-radius لتنسيق الأزرار وحقول الإدخال.

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.container {
    background-color: white;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    width: 400px;
}
input[type="text"], select {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 2px solid #ccc;
    border-radius: 4px;
}
button {
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
button:hover {
    background-color: #45a049;
}
.result {
    margin-top: 20px;
    color: #333;
}
        

 JavaScript (معالجة البيانات من الـ API)

سيقوم JavaScript بإرسال الطلب إلى الـ API ومعالجة الاستجابة وعرض النتائج بطريقة ديناميكية.

function getDefinition() {
    let word = document.getElementById("word").value;
    let language = document.getElementById("language").value;
    let resultDiv = document.getElementById("result");

    if (word === "") {
        resultDiv.innerHTML = "<p>Please enter a word.</p>";
        return;
    }

    fetch(`https://api.dictionaryapi.dev/api/v2/entries/${language}/${word}`)
        .then(response => response.json())
        .then(data => {
            if (data.title === "No Definitions Found") {
                resultDiv.innerHTML = "<p>No definitions found for \"" + word + "\".</p>";
                return;
            }

            let resultHtml = `
Word: ${data[0].word}
                              
Phonetic: ${data[0].phonetic}
                              
Meanings:
`;

            data[0].meanings.forEach(meaning => {
                resultHtml += `
Part of Speech: ${meaning.partOfSpeech}
`;
                meaning.definitions.forEach(definition => {
                    resultHtml += `
Definition: ${definition.definition}
                                   
Example: ${definition.example}
`;
                });
            });

            resultDiv.innerHTML = resultHtml;
        })
        .catch(error => {
            resultDiv.innerHTML = "<p>Error fetching data: " + error + "</p>";
        });
}
        

ماهي فوائد Api Dictionary 

من الناحية SEO (تحسين محركات البحث)، يوفر هذا المشروع العديد من الفوائد:

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

 كود سكريبت كامل القاموس اللغوي باستخدام API

في هذا المشروع، تعلمنا كيفية بناء صفحة ويب ديناميكية باستخدام API لقاموس للحصول على تعريفات الكلمات، مع دعم لغات متعددة مثل الإنجليزية، العربية، العبرية، الروسية والهندية.

كما ناقشنا كيفية الحصول على الـ API، وكيفية بناء الكود باستخدام HTML و CSS و JavaScript، وكيف يمكن أن يستفيد هذا المشروع من الناحية SEO من خلال تحسين التفاعل والرؤية في محركات البحث.

مثال قاموس لغوي كل اللغات باستخدام API

English Spanish French German Arabic Hebrew Russian Hindi

Code Html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dictionary API with Language Support</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { background-color: white; padding: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 8px; width: 400px; } h1 { text-align: center; color: #333; } input[type="text"], select { width: 100%; padding: 10px; margin: 10px 0; border: 2px solid #ccc; border-radius: 4px; } button { width: 100%; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } button:hover { background-color: #45a049; } .result { margin-top: 20px; color: #333; } .result p { margin: 5px 0; } .phonetic { font-size: 1.2em; color: #555; } </style> </head> <body> <div class="container"> <h1>Dictionary API</h1> <!-- Language Selector --> <select id="language"> <option value="en">English</option> <option value="es">Spanish</option> <option value="fr">French</option> <option value="de">German</option> <option value="ar">Arabic</option> <option value="he">Hebrew</option> <option value="ru">Russian</option> <option value="hi">Hindi</option> </select> <!-- Word Input --> <input type="text" id="word" placeholder="Enter word" /> <!-- Get Definition Button --> <button onclick="getDefinition()">Get Definition</button> <!-- Result Container --> <div class="result" id="result"></div> </div> <script> function getDefinition() { let word = document.getElementById("word").value; let language = document.getElementById("language").value; let resultDiv = document.getElementById("result"); if (word === "") { resultDiv.innerHTML = "<p>Please enter a word.</p>"; return; } // Make the API request based on the selected language fetch(`https://api.dictionaryapi.dev/api/v2/entries/${language}/${word}`) .then(response => response.json()) .then(data => { if (data.title === "No Definitions Found") { resultDiv.innerHTML = `<p>No definitions found for "${word}".</p>`; return; } let resultHtml = ` <h3>Word: ${data[0].word}</h3> <p class="phonetic">Phonetic: ${data[0].phonetic}</p> <h4>Origin:</h4> <p>${data[0].origin}</p> <h4>Meanings:</h4> `; data[0].meanings.forEach(meaning => { resultHtml += ` <h5>Part of Speech: ${meaning.partOfSpeech}</h5> `; meaning.definitions.forEach(definition => { resultHtml += ` <p><strong>Definition:</strong> ${definition.definition}</p> <p><strong>Example:</strong> ${definition.example}</p> `; }); }); resultDiv.innerHTML = resultHtml; }) .catch(error => { resultDiv.innerHTML = `<p>Error fetching data: ${error}</p>`; }); } </script> </body> </html>