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

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

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

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

1. واجهة برمجة تطبيقات Web Speech

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

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

instagram viewer

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

// تهيئة التعرف على الكلام
مقدار ثابت الاعتراف = جديد webkitSpeechRecognition () ،
// ضبط اللغة على اللغة الإنجليزية
الاعتراف. لانج = "en-US";


// تحديد وظيفة للتعامل مع نتيجة التعرف على الكلام
الاعتراف.النتيجة = وظيفة(حدث) {
مقدار ثابت النتيجة = event.results [event.resultIndex] [0].نص؛
وحدة التحكم.log (نتيجة)
};
// بدء التعرف على الكلام
الاعتراف.start () ؛

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

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

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

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

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

// احصل على عناصر منطقة السحب والإفلات
مقدار ثابت عنصر السحب = وثيقة.getElementById ("قابل للسحب");
مقدار ثابت منطقة الإسقاط = وثيقة.getElementById ("منطقة الإسقاط");
// أضف مستمعين للأحداث لجعل العنصر قابلاً للسحب
draggableElement.addEventListener ("دراجستارت"، (حدث) => {
// اضبط البيانات المراد نقلها عند إسقاط العنصر
 event.dataTransfer.setData ('نص عادي'، event.target.id) ؛
});


// إضافة مستمع الحدث للسماح بالإسقاط على عنصر منطقة الإسقاط
dropZone.addEventListener ('سحب أكثر'، (حدث) => {
 event.preventDefault () ،
 dropZone.classList.add ('سحب أكثر');
});
// أضف مستمع الحدث للتعامل مع حدث الإفلات
dropZone.addEventListener ('يسقط'، (حدث) => {
 event.preventDefault () ،
مقدار ثابت draggableElementId = event.dataTransfer.getData ('نص');
مقدار ثابت عنصر السحب = وثيقة.getElementById (draggableElementId) ،
 dropZone.appendChild (draggableElement) ،
 dropZone.classList.remove ('سحب أكثر');
});

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

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

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

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

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

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

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

// احصل على اتجاه الشاشة الحالي
مقدار ثابت CurrentOrientation = نافذة او شباك.screen.orientation.type؛
// أضف مستمع حدث لاكتشاف التغييرات في اتجاه الشاشة
نافذة او شباك.screen.orientation.addEventListener ('يتغير', () => {
مقدار ثابت اتجاه جديد = نافذة او شباك.screen.orientation.type؛


// تحديث واجهة المستخدم بناءً على الاتجاه الجديد
لو (اتجاه جديد "عمودي أساسي") {
// ضبط التخطيط للاتجاه العمودي
 } آخر {
// ضبط التخطيط لاتجاه أفقي
 }
});

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

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

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

// احصل على زر المشاركة
مقدار ثابت shareButton = وثيقة.getElementById ('زر المشاركة');
// إضافة مستمع الحدث إلى زر المشاركة
shareButton.addEventListener ('انقر', غير متزامن () => {
يحاول {
مقدار ثابت shareData = {
 عنوان: "تحقق من تطبيق الويب الرائع هذا!",
 نص: "لقد اكتشفت للتو هذا التطبيق الرائع الذي عليك تجربته!",
 عنوان url: ' https://example.com'
 };
انتظر navigator.share (shareData) ؛
 } يمسك (خطأ) {
وحدة التحكم.خطأ("خطأ في مشاركة المحتوى:"، خطأ)؛
 }
});

5. واجهة برمجة تطبيقات تحديد الموقع الجغرافي

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

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

// احصل على زر الموقع وعنصر الإخراج
مقدار ثابت locationButton = وثيقة.getElementById ("زر الموقع");
مقدار ثابت الإخراج = وثيقة.getElementById ("عنصر الإخراج");
// إضافة مستمع الحدث إلى زر الموقع
locationButton.addEventListener ('انقر', () => {
// تحقق مما إذا كان تحديد الموقع الجغرافي مدعومًا
لو (navigator.geolocation) {
// احصل على المنصب الحالي للمستخدم
 navigator.geolocation.getCurrentPosition ((موضع) => {
 outputElement.textContent = خط العرض: $ {position.coords.latitude}خط الطول: $ {position.coords.longitude}`;
 } ، (خطأ) => {
وحدة التحكم.خطأ("خطأ في الحصول على الموقع:"، خطأ)؛
 });
 } آخر {
 outputElement.textContent = "لا يدعم هذا المستعرض تحديد الموقع الجغرافي.";
 }
});

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

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

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