5 واجهات برمجة تطبيقات حديثة لتعزيز تطبيق الويب الخاص بك

القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة. اقرأ أكثر.

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

اجعل فيديو اليوم قم بالتمرير للمتابعة مع المحتوى

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

---

---

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

1. Web Speech API

تتيح لك Web Speech API دمج التعرف على الكلام والتوليف في تطبيقات الويب الخاصة بك. تتيح ميزة التعرف على الكلام للمستخدمين إدخال نص في تطبيق ويب عن طريق التحدث. في المقابل ، تسمح ميزة تركيب الكلام لتطبيقات الويب بإخراج الصوت استجابةً لإجراءات المستخدم.

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

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

ما الذي يمكنني حذفه من نظام التشغيل windows 10

  // initialize speech recognition 
const recognition = new webkitSpeechRecognition(); 
 
// set the language to English 
recognition.lang = 'en-US'; 
 
// define a function to handle the speech recognition result 
recognition.onresult = function(event) { 
    const result = event.results[event.resultIndex][0].transcript; 
    console.log(result) 
}; 
 
// start speech recognition 
recognition.start();

فيما يلي مثال على استخدام كائن التعرف على الكلام لتحويل الكلام إلى نص ، والذي سيتم عرضه في وحدة التحكم.

---

---

2. سحب وإسقاط API

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

اي نوع من الهواتف انت

• مصدر السحب هو العنصر الذي ينقر المستخدم عليه ويسحبه.
• هدف الإسقاط هي منطقة إسقاط العنصر.

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

---

---

 // Get the draggable and drop zone elements 
const draggableElement = document.getElementById('draggable'); 
const dropZone = document.getElementById('drop-zone'); 
 
// Add event listeners to make the element draggable 
draggableElement.addEventListener('dragstart', (event) => { 
    // Set the data to be transferred when the element is dropped 
    event.dataTransfer.setData('text/plain', event.target.id); 
}); 
 
// Add event listener to allow drop on the drop zone element 
dropZone.addEventListener('dragover', (event) => { 
    event.preventDefault(); 
    dropZone.classList.add('drag-over'); 
}); 
 
// Add event listener to handle the drop event 
dropZone.addEventListener('drop', (event) => { 
    event.preventDefault(); 
    const draggableElementId = event.dataTransfer.getData('text'); 
    const draggableElement = document.getElementById(draggableElementId); 
    dropZone.appendChild(draggableElement); 
    dropZone.classList.remove('drag-over'); 
}); 

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

3. واجهة برمجة تطبيقات اتجاه الشاشة

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

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

• window.screen.orientation.angle : تعرض هذه الخاصية الزاوية الحالية لشاشة الجهاز بالدرجات.
• window.screen.orientation.type : تعرض هذه الخاصية النوع الحالي لاتجاه شاشة الجهاز (على سبيل المثال ، 'عمودي - أساسي' ، 'أفقي - أساسي').
• window.screen.orientation.lock (اتجاه) : تعمل هذه الطريقة على تأمين اتجاه الشاشة إلى قيمة محددة (على سبيل المثال 'عمودي - أساسي').

يمكنك استخدام هذه الخصائص والأساليب لإنشاء تطبيقات ويب سريعة الاستجابة تتكيف مع اتجاهات الشاشة المختلفة.

في ما يلي مثال مقتطف رمز يوضح كيفية عمل Screen Orientation API لاكتشاف التغييرات في اتجاه شاشة الجهاز والتفاعل معها:

 // Get the current screen orientation 
const currentOrientation = window.screen.orientation.type; 
 
// Add an event listener to detect changes in screen orientation 
window.screen.orientation.addEventListener('change', () => { 
    const newOrientation = window.screen.orientation.type; 
 
    // Update the UI based on the new orientation 
    if (newOrientation === 'portrait-primary') { 
        // Adjust the layout for portrait orientation 
    } else { 
        // Adjust the layout for landscape orientation 
    } 
}); 
 

4. واجهة برمجة تطبيقات Web Share

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

لتنفيذ Web Share API ، ستستخدم امتداد الملاح طريقة. لتنفيذه ، سوف تستخدم وظيفة JavaScript غير متزامنة الذي يعود بوعد. هذا الوعد سيحل مع مشاركة البيانات كائن يحتوي على البيانات المشتركة ، مثل العنوان والنص وعنوان URL. بمجرد حصولك على ملف مشاركة البيانات كائن ، يمكنك استدعاء الملاح طريقة لفتح قائمة المشاركة الأصلية والسماح للمستخدم باختيار التطبيق الذي يريد مشاركة المحتوى معه.

 // Get the share button 
const shareButton = document.getElementById('share-button'); 
 
// Add event listener to share button 
shareButton.addEventListener('click', async () => { 
    try { 
        const shareData = { 
            title: 'Check out this cool web app!', 
            text: 'I just discovered this amazing app that you have to try!', 
            url: 'https://example.com' 
        }; 
 
        await navigator.share(shareData); 
    } catch (error) { 
        console.error('Error sharing content:', error); 
    } 
}); 

5. تحديد الموقع الجغرافي API

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

كيف يمكنك التقاط لقطة للشاشة على سناب شات دون علمهم

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

 // Get the location button and output element 
const locationButton = document.getElementById('location-button'); 
const outputElement = document.getElementById('output-element'); 
 
// Add event listener to location button 
locationButton.addEventListener('click', () => { 
    // Check if geolocation is supported 
    if (navigator.geolocation) { 
        // Get user's current position 
        navigator.geolocation.getCurrentPosition((position) => { 
            outputElement.textContent = `Latitude: ${position.coords.latitude}, Longitude: ${position.coords.longitude}`; 
        }, (error) => { 
            console.error('Error getting location:', error); 
        }); 
    } else { 
        outputElement.textContent = 'Geolocation is not supported by this browser.'; 
    } 
});  

يمكنك إنشاء تطبيقات ويب أفضل باستخدام واجهات برمجة تطبيقات المتصفح

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

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