الدرس التطبيقي حول ترميز "إمكانات الويب"

إمكانات الويب

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

ومع ذلك، هناك بعض الإمكانيات - مثل الدخول إلى نظام الملفات واكتشاف الخمول - التي تتوفر محليًا ولكنها غير متاحة على الويب. ويعني عدم توفُّر هذه الإمكانيات أنّه لا يمكن عرض بعض أنواع التطبيقات على الويب أو تكون أقل فائدة.

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

العناصر التي سيتم إنشاؤها

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

ما ستتعرّف عليه

سيساعدك هذا الدرس التطبيقي على تعلّم آليات تطوير العديد من واجهات برمجة التطبيقات المتطورة. ملاحظة: لم يتم وضع هذه الآليات في الحجر بعد، ونحن نقدّر كثيرًا ملاحظاتك وآرائك حول مسار مطوّري البرامج.

الأشياء التي تحتاج إليها

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

كيفية التعامل مع الدرس التطبيقي حول الترميز

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

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

تثبيت Airمنحني

لكي تعمل واجهة برمجة التطبيقات هذه، تحتاج إلى تطبيق الويب التقدّمي (PWA) الذي تم تثبيته على الشاشة الرئيسية، لذا تتمثل الخطوة الأولى في تثبيت تطبيق الويب التقدّمي (PWA)، مثل الموقع الإلكتروني airhorner.com غير الشهير عالميًا. اضغط على الزر تثبيت في أعلى يسار الشاشة أو استخدِم قائمة الخيارات الإضافية لتثبيت التطبيق يدويًا.

سيؤدي هذا إلى ظهور رسالة تأكيد، انقر على تثبيت.

لديك الآن رمز جديد في شريط أدوات نظام التشغيل. انقر عليه لتشغيل تطبيق الويب التقدّمي (PWA). سيتم إنشاء نافذة تطبيق خاصة به وسيتم تشغيلها في الوضع المستقل.

ضبط شارة

بعد تثبيت تطبيق الويب التقدّمي (PWA)، ستحتاج إلى بعض البيانات الرقمية (يمكن أن تحتوي الشارات على أرقام فقط) لعرضها على شارة. إنّ الطريقة المباشرة التي يمكن اتّباعها هي "الهواء الصخري" هي عدد المشاهدات. فِي الْحَقِيقَة، يُرْجَى طَلَبُ الْبُوقْ فِي وَضْعِ التَّطْبِيقِ الْمُثَبَّتْ هُوَ بَرْنَامَجْ Google. تُحتسب مرّة واحدة في كلّ مرّة تستخدم فيها بوق.

ما هي آلية العمل؟ ويكون الرمز في الأساس هو:

let hornCounter = 0;
const horn = document.querySelector('.horn');
horn.addEventListener('click', () => {
  navigator.setExperimentalAppBadge(++hornCounter);
});

دقّق بوق هواء الصوت بضع مرات وتحقّق من رمز تطبيق الويب التقدّمي (PWA): يتم تحديثه كل مرّة. صوت واحد. وقت بوق هوائي. الأمر بهذه السهولة.

محو شارة

يرتفع العدّاد إلى 99 نقطة ثم يبدأ من جديد. ويمكنك أيضًا إعادة ضبطها يدويًا. افتح علامة التبويب "وحدة تحكُّم مطوّري البرامج" والصِق السطر التالي ثم اضغط على "Enter". 

navigator.setExperimentalAppBadge(0);

ويمكنك أيضًا التخلص من الشارة عن طريق محوها صراحةً كما هو موضح في المقتطف التالي. من المفترض أن يظهر رمز تطبيق الويب التقدّمي الخاص بك مرة أخرى في البداية بشكل واضح وبدون شارة.

navigator.clearExperimentalAppBadge();

الملاحظات

ما رأيك في واجهة برمجة التطبيقات هذه؟ يُرجى مساعدتنا من خلال الردّ بإيجاز على هذا الاستطلاع:

هل كانت واجهة برمجة التطبيقات هذه سهلة الاستخدام؟

نعم لا

هل حصلت على المثال المطلوب تشغيله؟

نعم لا

هل تريد إضافة تعليقات أخرى؟ هل كانت هناك ميزات مفقودة؟ يُرجى تقديم تعليقات سريعة في هذا الاستطلاع. شكرًا

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

قراءة ملف

&&&;;مرحبًا,&العالمية; لواجهة برمجة التطبيقات لنظام الملفات الأصلي هي قراءة ملف محلي والحصول على محتويات الملف. أنشِئ ملف .txt عاديًا وأدخِل نصًا. بعد ذلك، انتقِل إلى أي موقع إلكتروني آمن (أي موقع إلكتروني يتم عرضه عبر بروتوكول HTTPS) مثل example.com وافتح وحدة تحكّم DevTools. ألصِق مقتطف الرمز أدناه في وحدة التحكم. بما أنّ واجهة Native File System API تتطلب إيماءة المستخدم، نُرفِق معالج النقر المزدوج على المستند. سنحتاج إلى اسم الملف لاحقًا، لذا سنجعله متغيرًا عموميًا فقط.

document.ondblclick = async () => {
  window.handle = await window.chooseFileSystemEntries();
  const file = await handle.getFile();
  document.body.textContent = await file.text();
};

عند النقر مرتين على أي مكان في صفحة example.com، يظهر منتقي الملفات.

اختَر ملف .txt الذي أنشأته من قبل. سيحل محتوى الملف محل محتوى body الفعلي example.com.

حفظ ملف

بعد ذلك، نريد إجراء بعض التغييرات. لذلك، دعنا نجعل body قابلاً للتعديل من خلال اللصق في مقتطف الرمز أدناه. يمكنك الآن تعديل النص كما لو كان المتصفح محررًا نصيًا.

document.body.contentEditable = true;

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

document.onclick = async () => {
  const writer = await handle.createWriter();
  await writer.truncate(0);
  await writer.write(0, document.body.textContent);
  await writer.close();
};

عندما تنقر الآن على المستند (وليس تنقر مرتين)، ستظهر رسالة مطالبة بالإذن. عندما تمنح الإذن، سيكون محتوى الملف هو كل ما عدّلته في body من قبل. تحقّق من التغييرات من خلال فتح الملف في محرِّر مختلف (أو ابدأ العملية مرة أخرى عن طريق النقر مرّتين على المستند مرة أخرى وإعادة فتح ملفك).

تهانينا. لقد أنشأت للتو محرر النصوص الأصغر حجمًا في العالم [citation needed].

الملاحظات

ما رأيك في واجهة برمجة التطبيقات هذه؟ يُرجى مساعدتنا من خلال الردّ بإيجاز على هذا الاستطلاع:

هل كانت واجهة برمجة التطبيقات هذه سهلة الاستخدام؟

نعم لا

هل حصلت على المثال المطلوب تشغيله؟

نعم لا

هل تريد إضافة تعليقات أخرى؟ هل كانت هناك ميزات مفقودة؟ يُرجى تقديم تعليقات سريعة في هذا الاستطلاع. شكرًا

توفّر واجهة برمجة التطبيقات لاكتشاف الأشكال إمكانية الوصول إلى أدوات رصد الأشكال المسرّعة (على سبيل المثال، للوجوه البشرية) وتعمل على الصور الثابتة و/أو خلاصات الصور المباشرة. وتحتوي أنظمة التشغيل على أدوات الكشف عن الميزات عالية الأداء والمحسّنة، مثل أداة اكتشاف الوجه. تفتح واجهة برمجة تطبيقات Detect Detect API عمليات التنفيذ الأصلية هذه وتعرّضها من خلال مجموعة من واجهات JavaScript.

في الوقت الحالي، يمكن استخدام الميزات المتوفرة من خلال واجهة FaceDetector، ورصد الرمز الشريطي من خلال واجهة BarcodeDetector، ورصد النصوص (التعرُّف البصري على الأحرف) من خلال واجهة TextDetector.

التعرّف على الوجوه

إنّ ميزة "التعرّف على الوجوه" من الميزات الرائعة في واجهة برمجة تطبيقات Detect Detect. لاختبار هذا، نحتاج إلى صفحة تحتوي على وجوه. هذه الصفحة التي تحتوي على وجه المؤلف' البداية. سيبدو الأمر شبيهًا بلقطة الشاشة أدناه. على متصفح متوافق، سيتم التعرّف على مربّع الحدود للوجه ومعالم الوجه.

يمكنك معرفة كم كان الرمز مطلوبًا لتحقيق ذلك عن طريق إعادة مزج مشروع Glitch أو تعديله، وخصوصًا ملف script.js.

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

document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
  try {
    const faces = await new FaceDetector().detect(img);
    faces.forEach(face => {
      const div = document.createElement('div');
      const box = face.boundingBox;
      const computedStyle = getComputedStyle(img);
      const [top, right, bottom, left] = [
        computedStyle.marginTop,
        computedStyle.marginRight,
        computedStyle.marginBottom,
        computedStyle.marginLeft
      ].map(m => parseInt(m, 10));
      const scaleX = img.width / img.naturalWidth;
      const scaleY = img.height / img.naturalHeight;
      div.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
      div.style.position = 'absolute';
      div.style.top = `${scaleY * box.top + top}px`;
      div.style.left = `${scaleX * box.left + left}px`;
      div.style.width = `${scaleX * box.width}px`;
      div.style.height = `${scaleY * box.height}px`;
      img.before(div);
    });
  } catch(e) {
    console.error(e);
  }
});

ستظهر بعض الرسائل على DOMException ولا تتم معالجة بعض الصور. ويرجع ذلك إلى أن صور الجزء المرئي من الصفحة مضمّنة كمعرّفات موارد منتظمة (URI) للبيانات ويمكن الوصول إليها، في حين تأتي صور الجزء السفلي غير المرئي من الصفحة من نطاق مختلف لم يتم إعداده لدعم سياسة مشاركة الموارد متعددة المصادر (CORS). لمزيد من التوضيح، لا داعي للقلق بشأن ذلك.

التعرّف على معالم الوجه

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

document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
  try {
    const faces = await new FaceDetector().detect(img);
    faces.forEach(face => {
      const div = document.createElement('div');
      const box = face.boundingBox;
      const computedStyle = getComputedStyle(img);
      const [top, right, bottom, left] = [
        computedStyle.marginTop,
        computedStyle.marginRight,
        computedStyle.marginBottom,
        computedStyle.marginLeft
      ].map(m => parseInt(m, 10));
      const scaleX = img.width / img.naturalWidth;
      const scaleY = img.height / img.naturalHeight;
      div.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
      div.style.position = 'absolute';
      div.style.top = `${scaleY * box.top + top}px`;
      div.style.left = `${scaleX * box.left + left}px`;
      div.style.width = `${scaleX * box.width}px`;
      div.style.height = `${scaleY * box.height}px`;
      img.before(div);

      const landmarkSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      landmarkSVG.style.position = 'absolute';
      landmarkSVG.classList.add('landmarks');
      landmarkSVG.setAttribute('viewBox', `0 0 ${img.width} ${img.height}`);
      landmarkSVG.style.width = `${img.width}px`;
      landmarkSVG.style.height = `${img.height}px`;
      face.landmarks.map((landmark) => {                    
        landmarkSVG.innerHTML += `<polygon class="landmark-${landmark.type}" points="${
        landmark.locations.map((point) => {          
          return `${scaleX * point.x},${scaleY * point.y} `;
        }).join(' ')
      }" /></svg>`;          
      });
      div.before(landmarkSVG);
    });
  } catch(e) {
    console.error(e);
  }
});

اكتشاف الرمز الشريطي

الميزة الثانية في واجهة برمجة تطبيقات Detect Detection هي اكتشاف الرمز الشريطي. كما في السابق، نحتاج إلى صفحة تحتوي على رموز شريطية، مثل هذا. عندما تفتح المتصفّح في أحد المتصفّحات، ستظهر لك رموز الاستجابة السريعة المختلفة التي تم فك رموزها. امزج مشروع Glitch أو عدِّله، خصوصًا ملف script.js لمعرفة كيفية إنجازه.

إذا كنت تريد شيئًا أكثر ديناميكية، يمكننا استخدام بحث الصور من Google مرة أخرى. هذه المرة، يمكنك الانتقال إلى صفحة نتائج "بحث Google" في علامة تبويب خاصة أو في وضع الضيف في المتصفّح. الصق الآن المقتطف أدناه في علامة التبويب Chrome DevTools Console. بعد لحظات قصيرة، ستتم إضافة الرموز الشريطية التي تم التعرّف عليها إلى القيمة الأولية ونوع الرمز الشريطي.

document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
  try {
    const barcodes = await new BarcodeDetector().detect(img);
    barcodes.forEach(barcode => {
      const div = document.createElement('div');
      const box = barcode.boundingBox;
      const computedStyle = getComputedStyle(img);
      const [top, right, bottom, left] = [
        computedStyle.marginTop,
        computedStyle.marginRight,
        computedStyle.marginBottom,
        computedStyle.marginLeft
      ].map(m => parseInt(m, 10));
      const scaleX = img.width / img.naturalWidth;
      const scaleY = img.height / img.naturalHeight;
      div.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
      div.style.position = 'absolute';
      div.style.top = `${scaleY * box.top + top}px`;
      div.style.left = `${scaleX * box.left - left}px`;
      div.style.width = `${scaleX * box.width}px`;
      div.style.height = `${scaleY * box.height}px`;
      div.style.color = 'black';
      div.style.fontSize = '14px';      
      div.textContent = `${barcode.rawValue}`;
      img.before(div);
    });
  } catch(e) {
    console.error(e);
  }
});

اكتشاف النص

الميزة النهائية لواجهة برمجة تطبيقات اكتشاف الأشكال هي اكتشاف النص. أصبحت تعرف الآن الإجراء المطلوب: نحتاج إلى صفحة بها صور تحتوي على نص، مثل هذه الصفحة التي تحتوي على نتائج المسح الضوئي لـ "كتب Google". على المتصفّحات المتوافقة، سيظهر لك النص المتعرّف عليه ومربّع حول حدود الفقرات النصية. امزج مشروع Glitch أو عدِّله، خصوصًا ملف script.js لمعرفة كيفية إنجازه.

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

document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
  try {
    const texts = await new TextDetector().detect(img);
    texts.forEach(text => {
      const div = document.createElement('div');
      const box = text.boundingBox;
      const computedStyle = getComputedStyle(img);
      const [top, right, bottom, left] = [
        computedStyle.marginTop,
        computedStyle.marginRight,
        computedStyle.marginBottom,
        computedStyle.marginLeft
      ].map(m => parseInt(m, 10));
      const scaleX = img.width / img.naturalWidth;
      const scaleY = img.height / img.naturalHeight;
      div.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
      div.style.position = 'absolute';
      div.style.top = `${scaleY * box.top + top}px`;
      div.style.left = `${scaleX * box.left - left}px`;
      div.style.width = `${scaleX * box.width}px`;
      div.style.height = `${scaleY * box.height}px`;
      div.style.color = 'black';
      div.style.fontSize = '14px';      
      div.innerHTML = text.rawValue;
      img.before(div);
    });
  } catch(e) {
    console.error(e);
  }
});

الملاحظات

ما رأيك في واجهة برمجة التطبيقات هذه؟ يُرجى مساعدتنا من خلال الردّ بإيجاز على هذا الاستطلاع:

هل كانت واجهة برمجة التطبيقات هذه سهلة الاستخدام؟

نعم لا

هل حصلت على المثال المطلوب تشغيله؟

نعم لا

هل تريد إضافة تعليقات أخرى؟ هل كانت هناك ميزات مفقودة؟ يُرجى تقديم تعليقات سريعة في هذا الاستطلاع. شكرًا

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

تثبيت تطبيق ويب تقدّمي (PWA) للمشاركة معه

كخطوة أولى، تحتاج إلى تطبيق الويب التقدّمي (PWA) الذي يمكنك المشاركة معه. هذه المرة، لن ينفّذ Air التثبيتer (لحسن الحظ) المهمة، ولكن سيحق لك التطبيق التجريبي لـ "مشاركة الويب المستهدفة" مساعدتك. ثبِّت التطبيق على الشاشة الرئيسية لجهازك.

مشاركة عنصر مع تطبيق الويب التقدّمي (PWA)

يجب بعد ذلك مشاركة أحد العناصر، مثل صورة من "صور Google". استخدِم الزر "مشاركة" واختَر سجلّ الويب التقدّمي (PWA) كهدف للمشاركة.

عند النقر على رمز التطبيق، ستنتقل مباشرةً إلى تطبيق الويب التقدّمي (قصاصات) في تطبيق سجلّ القصاصات، وستظهر الصورة هناك.

ما هي آلية العمل؟ لمعرفة ذلك، يمكنك استكشاف بيان تطبيق الويب في سجل القصاصات. يمكنك العثور على إعداد تنفيذ واجهة برمجة التطبيقات المستهدفة لمشاركة الويب في السمة "share_target" في ملف البيان بحيث يشير في حقل الحقل "action" إلى عنوان URL يتم تطبيقه باستخدام المعلمات، كما هو موضّح في "params".

وبعد ذلك، يملأ جانب المشاركة نموذج عنوان URL هذا وفقًا لذلك (يتم تسهيله من خلال إجراء مشاركة أو يتم التحكم فيه آليًا من قِبل مطوّر البرامج باستخدام واجهة برمجة تطبيقات المشاركة على الويب)، حتى يتمكّن جانب الاستلام من استخراج المعلمات وتنفيذ إجراء معها، مثل عرضها.

{
  "action": "/_share-target",
  "enctype": "multipart/form-data",
  "method": "POST",
  "params": {
    "files": [{
      "name": "media",
      "accept": ["audio/*", "image/*", "video/*"]
    }]
  }
}

الملاحظات

ما رأيك في واجهة برمجة التطبيقات هذه؟ يُرجى مساعدتنا من خلال الردّ بإيجاز على هذا الاستطلاع:

هل كانت واجهة برمجة التطبيقات هذه سهلة الاستخدام؟

نعم لا

هل حصلت على المثال المطلوب تشغيله؟

نعم لا

هل تريد إضافة تعليقات أخرى؟ هل كانت هناك ميزات مفقودة؟ يُرجى تقديم تعليقات سريعة في هذا الاستطلاع. شكرًا

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

إعداد شاشة الاستراحة

لاختبار قفل واجهة برمجة التطبيقات، يجب عليك أولاً التأكد من خلو جهازك من وضع السكون. ولذلك، في لوحة الإعدادات المفضّلة لنظام التشغيل، فعِّل شاشة الاستراحة من اختيارك وتأكَّد من تشغيلها بعد دقيقة واحدة. تأكد من أن هذا يعمل عن طريق ترك الجهاز بمفرده في ذلك الوقت (نعم، ولكن هذا مؤلم). تعرض لقطات الشاشة أدناه نظام التشغيل macOS، ولكن يمكنك بالطبع تجربة ذلك على جهازك الجوّال الذي يعمل بنظام التشغيل Android أو أي نظام أساسي متوافق مع أجهزة سطح المكتب.

ضبط قفل تنشيط الشاشة

بما أنك تعرف الآن أن شاشة الاستراحة تعمل، ستستخدم قفل الشاشة من النوع "screen" لمنع أداء شاشة الاستراحة. انتقِل إلى تطبيق الإصدار التجريبي من التنشيط وانقر على مربّع الاختيار تفعيل screen قفل التنشيط.

إِنَّهَا مِنْ ذَلِكَ الْوَقْتِ الْمُنَاسِبْ، سَيَكُونُ إِيقَافُ الِاسْتِيقَاظْ مُفَعَّلًا. إذا كنت صبرًا بما يكفي لترك جهازك بدون لمس الجهاز لمدة دقيقة، سترى الآن أن شاشة الاستراحة لم تبدأ.

ما هي آلية العمل؟ لمعرفة ذلك، يمكنك الانتقال إلى مشروع Glitch للحصول على تطبيق ويك لوك التجريبي والاطّلاع على script.js. يظهر جوهر الرمز في المقتطف أدناه. افتح علامة تبويب جديدة (أو استخدم أي علامة تبويب قد تفتحها) والصق الرمز أدناه في وحدة تحكم أدوات مطوّري برامج Chrome. عند النقر على النافذة، من المفترض أن يظهر لك قفل تنشيط نشط لمدة 10 ثوانٍ بالضبط (الاطّلاع على سجلّات وحدة التحكُّم)، ولن تبدأ شاشة الاستراحة.

if ('wakeLock' in navigator && 'request' in navigator.wakeLock) {  
  let wakeLock = null;
  
  const requestWakeLock = async () => {
    try {
      wakeLock = await navigator.wakeLock.request('screen');
      wakeLock.addEventListener('release', () => {        
        console.log('Wake Lock was released');                    
      });
      console.log('Wake Lock is active');      
    } catch (e) {      
      console.error(`${e.name}, ${e.message}`);
    } 
  };

  requestWakeLock();
  window.setTimeout(() => {
    wakeLock.release();
  }, 10 * 1000);
}

الملاحظات

ما رأيك في واجهة برمجة التطبيقات هذه؟ يُرجى مساعدتنا من خلال الردّ بإيجاز على هذا الاستطلاع:

هل كانت واجهة برمجة التطبيقات هذه سهلة الاستخدام؟

نعم لا

هل حصلت على المثال المطلوب تشغيله؟

نعم لا

هل تريد إضافة تعليقات أخرى؟ هل كانت هناك ميزات مفقودة؟ يُرجى تقديم تعليقات سريعة في هذا الاستطلاع. شكرًا

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

اعتبارات بشأن الخصوصية

بعد فتح المنتقي، يمكنك اختيار جهات الاتصال التي تريد مشاركتها. ملاحظة: ليس هناك أي خيار م &تعمّق في علامة التبويب "&كلٍّ"؛ نودّ أن نتأكّد من أنّ مشاركة المحتوى تستند إلى قرار واعي. وبالمثل، لا يكون الوصول مستمرًا، بل قرار لمرة واحدة.

الوصول إلى جهات الاتصال

الوصول إلى جهات الاتصال مهمة سهلة. قبل فتح أداة الاختيار، يمكنك تحديد الحقول التي تريدها (الخيارات هي name وemail وtelephone)، وما إذا كنت تريد الوصول إلى عدة جهات اتصال أو واحدة فقط. ويمكنك اختبار واجهة برمجة التطبيقات هذه على جهاز يعمل بنظام التشغيل Android من خلال فتح التطبيق التجريبي. القسم ذي الصلة من رمز المصدر هو في الأساس المقتطف أدناه:

getContactsButton.addEventListener('click', async () => {
  const contacts = await navigator.contacts.select(
      ['name', 'email'],
      {multiple: true});
  if (!contacts.length) {
    // No contacts were selected, or picker couldn't be opened.
    return;
  }
  console.log(contacts);
});

نسخ النص ولصقه

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

حتى تتمكن الآن من نسخ الصور ولصقها. الجديد في أنه يمكنك أيضًا كتابة الصور إلى الحافظة. دعمت واجهة برمجة تطبيقات الحافظة غير المتزامنة نسخ النص ولصقه لبعض الوقت الآن. يمكنك نسخ نص إلى الحافظة عن طريق استدعاء navigator.clipboard.writeText() ثم لصق هذا النص لاحقًا عن طريق الاتصال بـ navigator.clipboard.readText().

نسخ الصور ولصقها

يمكنك الآن أيضًا كتابة الصور في الحافظة. لتنفيذ هذا الإجراء، ستحتاج إلى بيانات الصورة على شكل كائن ثنائي كبير (blob)، ثم تمريره إلى أداة إنشاء عنصر الحافظة. وأخيرًا، يمكنك حينئذٍ نسخ عنصر الحافظة هذا باستدعاء navigator.clipboard.write().

// Copy: Writing image to the clipboard
try {
  const imgURL = 'https://developers.google.com/web/updates/images/generic/file.png';
  const data = await fetch(imgURL);
  const blob = await data.blob();
  await navigator.clipboard.write([
    new ClipboardItem(Object.defineProperty({}, blob.type, {
      value: blob,
      enumerable: true
    }))
  ]);
  console.log('Image copied.');
} catch(e) {
  console.error(e, e.message);
}

إن لصق الصورة مرة أخرى من الحافظة يبدو أنها عملية بسيطة، ولكنها في الواقع تتألف من استعادة الكائن الثنائي الكبير (blob) مرة أخرى من عنصر الحافظة. ونظرًا لاحتمال وجود العديد من هذه العناصر، عليك بدورها إلى أن تصل إلى المجموعة المطلوبة. لأسباب تتعلق بالأمان، يقتصر الآن في الوقت الحالي على الصور بتنسيق PNG، ولكن قد تتوفر المزيد من تنسيقات الصور في المستقبل.

async function getClipboardContents() {
  try {
    const clipboardItems = await navigator.clipboard.read();
    for (const clipboardItem of clipboardItems) {
      try {
        for (const type of clipboardItem.types) {
          const blob = await clipboardItem.getType(type);
          console.log(URL.createObjectURL(blob));
        }
      } catch (e) {
        console.error(e, e.message);
      }
    }
  } catch (e) {
    console.error(e, e.message);
  }
}

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

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

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

ننصحك أيضًا بالاطّلاع على الصفحة المقصودة للإمكانات. وسنحرص على تحديثها باستمرار، وهو يشمل مؤشرات لجميع المقالات التفصيلية لواجهات برمجة التطبيقات التي نعمل عليها. مواصلة استخدام موسيقى روك&#39؛

حَسَنْ وَفِرْقِةْ كَامِلْ 🐡