1. المقدمة والإعداد
إمكانات الويب
نريد أن نسد الفجوة في الإمكانات بين الويب والإعلانات المدمجة مع المحتوى وأن نسهِّل على المطوّرين إنشاء تجارب رائعة على الويب المفتوح. نؤمن بشدة بأنّ كل مطوّر يجب أن يستفيد من الإمكانات التي يحتاجها لتقديم تجربة رائعة على الويب، ونحن نلتزم بتوفير بيئة أكثر فعالية على الويب.
ومع ذلك، هناك بعض الإمكانات — مثل الوصول إلى نظام الملفات والكشف عن عدم النشاط — تكون متوفرة على الأجهزة الأصلية لكنها غير متاحة على الويب. وتعني هذه الإمكانات المفقودة أن بعض أنواع التطبيقات لا يمكن عرضها على الويب أو أنها أقل فائدة.
وسنصمّم هذه الإمكانات الجديدة ونطوّرها بطريقة مفتوحة وشفافة، وذلك باستخدام العمليات الحالية لمعايير النظام الأساسي المفتوح للويب، مع الحصول على ملاحظات أوّلية من المطوّرين ومورِّدي المتصفحات الآخرين أثناء تكرار التصميم، وذلك لضمان تصميم قابل للتشغيل التفاعلي.
ما الذي ستنشئه
في هذا الدرس التطبيقي حول الترميز، يمكنك تجربة عدد من واجهات برمجة تطبيقات الويب الجديدة تمامًا أو المتوفّرة فقط في الخلفية. لذا، يركّز هذا الدرس التطبيقي على الترميز على واجهات برمجة التطبيقات نفسها وعلى حالات الاستخدام التي تتيحها هذه الواجهات، بدلاً من التركيز على إنشاء منتج نهائي محدّد.
المعلومات التي ستطّلع عليها
يشرح هذا الدرس التطبيقي حول الترميز الآليات الأساسية للعديد من واجهات برمجة التطبيقات المتطورة. يُرجى العِلم أنّ هذه الإجراءات لم يتم تحديدها بعد، ونقدّر جدًا ملاحظاتك على مسار المطوّرين.
المتطلبات
تختلف متطلبات كل واجهة برمجة تطبيقات لأنّ واجهات برمجة التطبيقات الواردة في هذا الدرس التطبيقي حول الترميز في طور النمو. يُرجى قراءة معلومات التوافق بعناية في بداية كل قسم.
كيفية التعامل مع الدرس التطبيقي حول الترميز
ليس بالضرورة أن يتم تنفيذ الدرس التطبيقي حول الترميز بشكل تسلسلي. ويمثّل كل قسم واجهة برمجة تطبيقات مستقلة، لذا لا تتردد في اختيار أكثر ما يهمّك.
2. Badging API
إن الهدف من Badging API هو تزويد المستخدمين الانتباه إلى الأشياء التي تحدث في الخلفية. ولتبسيط العرض التوضيحي في هذا الدرس التطبيقي حول الترميز، لنستخدم واجهة برمجة التطبيقات لتوفير الانتباه إلى شيء يحدث في المقدمة. يمكنك بعد ذلك الانتقال إلى ما يحدث في الخلفية.
تثبيت Airhorner
ولكي تعمل واجهة برمجة التطبيقات هذه، تحتاج إلى تطبيق ويب تقدّمي (PWA) مثبَّت على الشاشة الرئيسية، لذا فإنّ الخطوة الأولى هي تثبيت تطبيق ويب تقدّمي (PWA)، مثل موقع airhorner.com الشهير عالميًا. النقر على الزر تثبيت في أعلى يسار الشاشة أو استخدام قائمة الخيارات الإضافية لتثبيت الميزة يدويًا
سيؤدي ذلك إلى ظهور رسالة تأكيد، انقر على تثبيت.
لديك الآن رمز جديد في شريط أدوات نظام التشغيل. انقر عليه لتشغيل تطبيق الويب التقدّمي (PWA). وسيكون له نافذة تطبيق خاصة به ويتم تشغيله في الوضع المستقل.
|
|
إعداد شارة
بعد تثبيت تطبيق الويب التقدّمي (PWA)، تحتاج إلى بعض البيانات الرقمية (يمكن أن تحتوي الشارات على أرقام فقط) لعرضها على الشارة. من الأمور الواضحة التي يمكن عدّها في The Air Horner، تنهيدة، عدد مرات قرعها. في الواقع، بعد تثبيت تطبيق Airhorner، يمكنك تجربة سماع بوق الهاتف والتحقّق من الشارة. يمكنك احتساب صوت واحد عندما تصعد.
كيف يعمل هذا؟ وفي الأساس، تكون التعليمة البرمجية هي:
let hornCounter = 0;
const horn = document.querySelector('.horn');
horn.addEventListener('click', () => {
navigator.setExperimentalAppBadge(++hornCounter);
});
ارفع صوت البوق عدة مرات وتحقَّق من رمز تطبيق الويب التقدّمي (PWA) لأنّه سيتم تحديثه كل مرة. أعزب. الوقت. أصوات بوق الهواء. بهذه السهولة.
محو شارة
يرتفع العدّاد إلى 99 ثم يبدأ من جديد. ويمكنك أيضًا إعادة ضبطه يدويًا. افتح علامة التبويب "وحدة تحكم أدوات مطوري البرامج" والصق السطر أدناه، ثم اضغط على Enter.
navigator.setExperimentalAppBadge(0);
بدلاً من ذلك، يمكنك أيضًا التخلص من الشارة من خلال محوها بشكل واضح كما هو موضح في المقتطف التالي. من المفترض أن يظهر الآن رمز تطبيق الويب التقدّمي (PWA) مجددًا كما لو كان في البداية، وأن يكون واضحًا وبدون شارة.
navigator.clearExperimentalAppBadge();
الملاحظات
ما رأيك في واجهة برمجة التطبيقات هذه؟ يُرجى مساعدتنا من خلال الردّ بإيجاز على هذا الاستطلاع:
هل كانت واجهة برمجة التطبيقات هذه سهلة الاستخدام؟
هل حصلت على المثال لعرضه؟
هل تريد إضافة تعليقات أخرى؟ هل كانت هناك ميزات مفقودة؟ يُرجى تقديم ملاحظات سريعة في هذا الاستطلاع. شكرًا
3- واجهة برمجة التطبيقات لنظام الملفات الأصلي
تمكّن واجهة برمجة التطبيقات لنظام الملفات الأصلي المطوّرين من إنشاء تطبيقات ويب فعّالة تتفاعل مع الملفات على الجهاز المحلي للمستخدم. بعد أن يمنح المستخدِم إذن الوصول إلى تطبيق الويب، تسمح واجهة برمجة التطبيقات هذه لتطبيقات الويب بقراءة التغييرات أو حفظها مباشرةً في الملفات والمجلدات على جهاز المستخدم.
قراءة ملف
"مرحبًا بالعالم" في Native File System API، وهي قراءة ملف محلي والحصول على محتوياته. أنشئ ملف .txt عاديًا وأدخِل بعض النصوص. بعد ذلك، انتقِل إلى أي موقع إلكتروني آمن (أي موقع إلكتروني يتم عرضه عبر HTTPS) مثل example.com وافتح وحدة تحكّم "أدوات مطوري البرامج". الصق مقتطف الرمز أدناه في وحدة التحكم. بما أنّ واجهة برمجة التطبيقات 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].
الملاحظات
ما رأيك في واجهة برمجة التطبيقات هذه؟ يُرجى مساعدتنا من خلال الردّ بإيجاز على هذا الاستطلاع:
هل كانت واجهة برمجة التطبيقات هذه سهلة الاستخدام؟
هل حصلت على المثال لعرضه؟
هل تريد إضافة تعليقات أخرى؟ هل كانت هناك ميزات مفقودة؟ يُرجى تقديم ملاحظات سريعة في هذا الاستطلاع. شكرًا
4. Shape Detection API
توفّر واجهة برمجة تطبيقات اكتشاف الأشكال إمكانية الوصول إلى أدوات رصد الأشكال السريعة (مثل الوجوه البشرية) وتعمل على الصور الثابتة و/أو خلاصات الصور المباشرة. تشتمل أنظمة التشغيل على أدوات رصد ميزات عالية الأداء ومحسَّنة للغاية، مثل FaceDetector من Android. تفتح واجهة برمجة التطبيقات Shape Detection API هذه التطبيقات الأصلية وتعرضها من خلال مجموعة من واجهات JavaScript.
الميزات المتاحة في الوقت الحالي هي التعرّف على الوجوه من خلال واجهة FaceDetector، ورصد الرمز الشريطي من خلال واجهة BarcodeDetector، ورصد النصوص (التعرُّف البصري على الأحرف) من خلال واجهة TextDetector.
التعرّف على الوجوه
من الميزات الرائعة في واجهة برمجة التطبيقات Shape Detection API هي التعرف على الوجوه. لاختباره، نحتاج إلى صفحة بها وجوه. تُعدّ هذه الصفحة التي تظهر فيها وجه المؤلف بداية جيدة. وسيبدو مشابهًا في لقطة الشاشة أدناه. في متصفح متوافق، سيتم التعرف على مربع حدود الوجه ومعالم الوجه.
يمكنك معرفة صغر حجم الرموز التي كانت مطلوبة لتنفيذ ذلك من خلال إنشاء ريمكس من مشروع Glitch أو تعديله، لا سيما ملف JavaScript.js.
إذا كنت تريد استخدام أسلوب ديناميكي تمامًا وليس فقط استخدام وجه المؤلف، انتقِل إلى صفحة نتائج "بحث Google" هذه المليئة بالوجوه في علامة تبويب خاصة أو في وضع الضيف. والآن في تلك الصفحة، افتح أدوات مطوّري برامج Chrome من خلال النقر بزر الماوس الأيمن على أي مكان، ثم النقر على فحص. بعد ذلك، في علامة التبويب Console، الصق المقتطف أدناه. سيُبرز الرمز الوجوه التي تم اكتشافها باستخدام مربع أحمر شبه شفاف.
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);
}
});
اكتشاف الرمز الشريطي
الميزة الثانية في Shape Detection API هي اكتشاف الرمز الشريطي. كما في السابق، نحتاج إلى صفحة بها رموز شريطية، مثل هذه الصفحة. وعند فتحه في أحد المتصفحات، ستظهر لك رموز استجابة سريعة تم فك رموزها. يمكنك إنشاء ريمكس من مشروع Glitch أو تعديله، لا سيما ملف JavaScript.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);
}
});
رصد النص
الميزة الأخيرة في Shape Detection API هي اكتشاف النص. أصبحت الآن على دراية بالتدريب: نحتاج إلى صفحة تحتوي على صور تحتوي على نص، مثل هذه الصفحة مع نتائج المسح الضوئي من "كتب Google". في المتصفّحات المتوافقة، سيظهر لك النصّ معروفًا ومربّعًا إحاطًا مرسومًا حول الفقرات النصية. يمكنك إنشاء ريمكس من مشروع Glitch أو تعديله، لا سيما ملف JavaScript.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);
}
});
الملاحظات
ما رأيك في واجهة برمجة التطبيقات هذه؟ يُرجى مساعدتنا من خلال الردّ بإيجاز على هذا الاستطلاع:
هل كانت واجهة برمجة التطبيقات هذه سهلة الاستخدام؟
هل حصلت على المثال لعرضه؟
هل تريد إضافة تعليقات أخرى؟ هل كانت هناك ميزات مفقودة؟ يُرجى تقديم ملاحظات سريعة في هذا الاستطلاع. شكرًا
5- Web Share Target API
تسمح واجهة Web Share Target API لتطبيقات الويب المثبَّتة بالتسجيل باستخدام نظام التشغيل الأساسي كهدف مشاركة لتلقّي المحتوى المشترَك من خلال Web Share API أو أحداث النظام، مثل زر المشاركة على مستوى نظام التشغيل.
تثبيت تطبيق ويب تقدّمي (PWA) للمشاركة في
كخطوة أولى، تحتاج إلى تطبيق ويب تقدّمي (PWA) يمكنك المشاركة معه. هذه المرة، لن تؤدي شركة Airhorner (لحسن الحظ) هذه المهمة، ولكن يمكنك الاستعانة بتطبيق Web Share Target التجريبي. ثبِّت التطبيق على الشاشة الرئيسية لجهازك.
مشاركة محتوى على تطبيق الويب التقدّمي (PWA)
بعد ذلك، ستحتاج إلى مشاركة صورة من "صور Google". استخدِم زر "مشاركة" واختَر تطبيق الويب التقدّمي Scrapbook كهدف للمشاركة.
عند النقر على رمز التطبيق، ستنتقل مباشرةً إلى تطبيق الويب التقدّمي (PWA) الخاص بسجلّ القصاصات، وستظهر الصورة مباشرةً.
كيف يعمل هذا؟ لمعرفة المزيد، يمكنك الاطّلاع على بيان تطبيق الويب لتطبيق Scrapbook PWA. تتوفّر الإعدادات اللازمة لتشغيل واجهة برمجة التطبيقات Web Share Target API في السمة "share_target" في ملف البيان الذي يشير في الحقل "action" إلى عنوان URL مزيّن بمعلَمات كما هو وارد في "params".
بعد ذلك، يملأ جانب المشاركة نموذج عنوان URL هذا وفقًا لذلك (إمّا يتم تسهيله من خلال إجراء المشاركة أو أن يتحكّم فيه المطوّر آليًا باستخدام Web Share API)، ليتمكّن الجانب المستلِم من استخراج المَعلمات وتنفيذ إجراءات معيّنة معها، مثل عرضها.
{
"action": "/_share-target",
"enctype": "multipart/form-data",
"method": "POST",
"params": {
"files": [{
"name": "media",
"accept": ["audio/*", "image/*", "video/*"]
}]
}
}
الملاحظات
ما رأيك في واجهة برمجة التطبيقات هذه؟ يُرجى مساعدتنا من خلال الردّ بإيجاز على هذا الاستطلاع:
هل كانت واجهة برمجة التطبيقات هذه سهلة الاستخدام؟
هل حصلت على المثال لعرضه؟
هل تريد إضافة تعليقات أخرى؟ هل كانت هناك ميزات مفقودة؟ يُرجى تقديم ملاحظات سريعة في هذا الاستطلاع. شكرًا
6- واجهة برمجة تطبيقات Wake Lock
لتجنب استنزاف البطارية، تنتقل معظم الأجهزة بسرعة إلى وضع السكون عند تركها في وضع عدم النشاط. على الرغم من أن هذا لا بأس به في معظم الأحيان، إلا أن بعض التطبيقات تحتاج إلى إبقاء الشاشة أو الجهاز في الوضع النشط لإكمال عملها. توفّر واجهة Wake Lock API طريقة لمنع الجهاز من تعتيم الشاشة وقفلها أو منع الجهاز من الانتقال إلى وضع السكون. توفّر هذه الإمكانية تجارب جديدة تتطلب، حتى الآن، تطبيقًا أصليًا.
إعداد شاشة الاستراحة
لاختبار واجهة برمجة تطبيقات Wake Lock، عليك أولاً التأكد من انتقال جهازك إلى وضع السكون. لذلك، في لوحة الإعدادات المفضَّلة لنظام التشغيل، فعِّل شاشة استراحة من اختيارك وتأكَّد من أنّها تظهر بعد دقيقة واحدة. تأكَّد من أنّه يعمل من خلال ترك جهازك بدونه لهذا الوقت بالضبط (نعم، أعلم أنّ هذا الأمر مؤلم). تعرض لقطات الشاشة أدناه نظام التشغيل macOS، ولكن يمكنك بالطبع تجربة هذه الميزة على جهاز Android الجوّال أو أي نظام أساسي متوافق مع الكمبيوتر المكتبي.
ضبط قفل تنشيط الشاشة
الآن وبعد أن عرفت أنّ شاشة الاستراحة تعمل، عليك استخدام قفل تنشيط من النوع "screen" لمنع شاشة الاستراحة من أداء مهامها. انتقِل إلى تطبيق Wake Lock التجريبي وانقر على تفعيل .
screen مربّع الاختيار قفل التنشيط.
ابتداءً من تلك اللحظة، سيتم تفعيل قفل التنشيط. إذا كنت صبورًا بما يكفي لترك جهازك كما هو لمدة دقيقة، فستلاحظ الآن أن شاشة الاستراحة لم تبدأ بالفعل.
كيف يعمل هذا؟ لمعرفة ذلك، انتقِل إلى مشروع Glitch الخاص بتطبيق Wake Lock التجريبي واطّلِع على 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);
}
الملاحظات
ما رأيك في واجهة برمجة التطبيقات هذه؟ يُرجى مساعدتنا من خلال الردّ بإيجاز على هذا الاستطلاع:
هل كانت واجهة برمجة التطبيقات هذه سهلة الاستخدام؟
هل حصلت على المثال لعرضه؟
هل تريد إضافة تعليقات أخرى؟ هل كانت هناك ميزات مفقودة؟ يُرجى تقديم ملاحظات سريعة في هذا الاستطلاع. شكرًا
7. Contact Picker API
نحن متحمسون جدًا لواجهة برمجة التطبيقات، وهي واجهة برمجة تطبيقات "أداة اختيار جهات الاتصال". يسمح هذا الرمز لتطبيق الويب بالوصول إلى جهات الاتصال من مدير جهات الاتصال الأصلي للجهاز، حتى يتمكّن تطبيق الويب من الوصول إلى جهات الاتصال. والأسماء وعناوين البريد الإلكتروني وأرقام الهواتف. يمكنك تحديد ما إذا كنت تريد جهة اتصال واحدة فقط أو عدة جهة اتصال، وما إذا كنت تريد جميع الحقول أو مجموعة فرعية فقط من الأسماء وعناوين البريد الإلكتروني وأرقام الهواتف.
اعتبارات الخصوصية
بعد فتح أداة الاختيار، يمكنك اختيار جهات الاتصال التي تريد مشاركتها. ستلاحظ أنه لا يوجد خيار "تحديد الكل" وهو الخيار المتعمد: نريد أن تكون المشاركة قرارًا واعيًا. وبالمثل، لا يكون الوصول متاحًا بشكل متواصل، بل يتم اتّخاذ قرار لمرة واحدة فقط.
الوصول إلى جهات الاتصال
يعد الوصول إلى جهات الاتصال مهمة واضحة. قبل فتح أداة الاختيار، يمكنك تحديد الحقول التي تريدها (تكون الخيارات 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);
});
8. Async Clipboard API
نسخ النص ولصقه
حتى الآن، لم تكن هناك طريقة لنسخ الصور ولصقها آليًا في حافظة النظام. أضفنا مؤخرًا إمكانية استخدام الصور إلى واجهة برمجة التطبيقات Async Clipboard API،
بحيث يمكنك الآن نسخ الصور ولصقها. الجديد هو أنّه يمكنك أيضًا كتابة صور إلى الحافظة. لقد دعمت واجهة برمجة التطبيقات للحافظة غير المتزامنة نسخ النص ولصقه لبعض الوقت. يمكنك نسخ النص إلى الحافظة عن طريق استدعاء navigator.clipboard.writeText() ثم لصق هذا النص لاحقًا عن طريق استدعاء navigator.clipboard.readText().
نسخ الصور ولصقها
يمكنك الآن أيضًا كتابة الصور إلى الحافظة. لكي ينجح هذا، تحتاج إلى بيانات الصورة ككائنات ثنائية كبيرة يمكنك تمريرها بعد ذلك إلى الدالة الإنشائية لعنصر الحافظة. أخيرًا، يمكنك بعد ذلك نسخ عنصر الحافظة هذا عن طريق استدعاء 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);
}
يبدو لصق الصورة مرة أخرى من الحافظة أمرًا معقدًا، ولكنه في الواقع يتكون فقط من استعادة الكائن الثنائي الكبير من عنصر الحافظة. نظرًا لأنه يمكن أن يكون هناك العديد، فأنت بحاجة إلى تكرارها حتى تحصل على الإعلان الذي تهتم به. لأسباب تتعلق بالأمان، يقتصر ذلك في الوقت الحالي على الصور بتنسيق 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);
}
}
يمكنك رؤية واجهة برمجة التطبيقات هذه وهي قيد التشغيل في تطبيق تجريبي، وقد تم تضمين المقتطفات ذات الصلة من رمز المصدر الخاص بها أعلاه. يمكن نسخ الصور إلى الحافظة بدون إذن، ولكن عليك منح الإذن بالوصول إلى الحافظة.
بعد منح الإذن بالوصول، يمكنك قراءة الصورة من الحافظة ولصقها في التطبيق:
9. لقد فعلتها!
تهانينا، لقد وصلت إلى نهاية الدرس التطبيقي حول الترميز. ونذكّرك بأنّ معظم واجهات برمجة التطبيقات لا تزال غير منتظمة ويجري العمل عليها بشكل نشط. لذلك، يقدّر الفريق ملاحظاتك، لأنّ التفاعل مع أشخاص مثل أنت فقط سيساعدنا في تعديل واجهات برمجة التطبيقات هذه بشكل صحيح.
ننصحك أيضًا بالاطّلاع على الصفحة المقصودة للإمكانات. حيث سنبقيه محدثًا، ويحتوي على مؤشرات إلى جميع المقالات التفصيلية لواجهات برمجة التطبيقات التي نعمل عليها. أحسنت!
تامر وفريق القدرات بأكمله 🐡