سنشرح في هذا المقال كيفية بناء محاكي مرئي موسيقى باستخدام Three.js والتعامل مع تقنيات مزامنة الصوت مؤثرات مرئية ثلاثية الأبعاد. ما سنحاول بناءه في هذا المقال هو صور متفاعلة ديناميكيًا مع الصوت بشكل قريب من الفكرة الواردة في  هاذا المشروع.

تهيئة المشروع

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

 export default class App {
  constructor() {
    this.onClickBinder = () => this.init()
    document.addEventListener('click', this.onClickBinder)
  }

  init() {
    document.removeEventListener('click', this.onClickBinder)

       مشهد Three.js بسيط//    
    this.renderer = new THREE.WebGLRenderer()
    this.camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 10000)
    this.scene = new THREE.Scene()
  }
}

تحليل البيانات الصوتية

سنهيئ الآن مدير الصوت (Audio Manager) ومدير الإيقاع (BPM Manager) لتحميل الصوت، وتحليله، ومزامنته مع العناصر المرئية. وسنبدأ تشغيلهما باستخدام async و async.

async createManagers() {
    App.audioManager = new AudioManager()
  await App.audioManager.loadAudioBuffer()

  App.bpmManager = new BPMManager()
  App.bpmManager.addEventListener('beat', () => {
    this.particles.onBPMBeat()
  })
  await App.bpmManager.detectBPM(App.audioManager.audio.buffer)
}

ملاحظة: يشير عدد النبضات في الدقيقة Beats Per Minute -أو BPM اختصارًا- إلى سرعة الإيقاع الموسيقي.

سيحمّل الصنف AudioManager في الكود السابق الصوت من عنوان URL محدد، وفي هذا المقال اخترنا ملف صوتي من موقع Spotify، بعد تحميل الصوت سنحلله ثم نقسّم إشارات الصوت إلى نطاقات ترددية في الوقت الفعلي.

const audioLoader = new THREE.AudioLoader();
audioLoader.load(this.song.url, buffer => {
    this.audio.setBuffer(buffer);
})

بيانات التردد

علينا فصل نطاق الترددات إلى الترددات المنخفضة والمتوسطة والعالية لحساب السعة amplitude.

سنقسم نطاقات الترددات إلى frequency bands كما يلي:

• ترددات منخفضة Low
• ترددات متوسطة Mid
• ترددات عالية High

كل مجموعة لها نطاق ترددات محدد، مثلًا تبدأ الترددات المنخفضة من lowFrequency وتنتهي عند بداية midFrequency. وتبدأ الترددات العالية من midFrequency وتنتهي عند highFrequency.

ولحساب متوسط السعة داخل نطاق معيّن يمكننا ضرب الترددات بالقيمة Buffer length والتيتمثل عدد العينات الصوتية المخزنة في Buffer، ثم نقسم الناتج على معدل أخذ العينات sample rate، وهو عدد العيّنات التي يتم التقاطها في الثانية فهذا يساعدنا على تحديد الموضع الصحيح داخل المصفوفة التي تحتوي على بيانات الترددات الصوتية بناءً على النطاق الترددي. بعد حساب المتوسط، نحول القيمة الناتجة إلى نطاق يتراوح بين 0 و 1، حتى نتمكن من استخدامها بشكل مرن في التطبيقات الرسومية أو الصوتية.

this.lowFrequency = 10;
this.frequencyArray = this.audioAnalyser.getFrequencyData();
const lowFreqRangeStart = Math.floor((this.lowFrequency * this.bufferLength) / this.audioContext.sampleRate)
const lowFreqRangeEnd = Math.floor((this.midFrequency * this.bufferLength) / this.audioContext.sampleRate)
const lowAvg = this.normalizeValue(this.calculateAverage(this.frequencyArray, lowFreqRangeStart, lowFreqRangeEnd));

نفس الطريقة لنطاق الترددات المرتفعة بين MID وHIGH//

كشف الإيقاع باستخدام Web Audio Beat Detector

حسبنا في الفقرة السابقة قيمة سعة الترددات لكنها لا تكفي لوحدها لربط إيقاعات الموسيقى بالتأثيرات المرئية، سنحتاج لمعرفة قيمة الإيقاع BPM أي عدد النبضات في الدقيقة فهذه القيمة أساسية لجعل العناصر تتفاعل بشكل متزامن مع نبضات الموسيقى. لحسابها سنعتمد على استخدام وحدة جافا سكريبت‏ مفتوحة المصدر باسم web audio beat detector حيث نحتاج لتمرير القيمة audioBuffer لهذه الوحدة وحساب الإيقاع بشكل غير متزامن كما يلي:

const { bpm } = await guess(audioBuffer);

إرسال الإشارات

بعد أن كشفنا قيمة الإيقاع BPM يمكننا إرسال إشارة بوقوع حدث بشكل متكرر عند كل نبضة إيقاع باستخدام الدالة setInterval.

this.interval = 60000 / bpm; // Convert BPM to interval
this.intervalId = setInterval(() => {
    this.dispatchEvent({ type: 'beat' })
}, this.interval);

إنشاء الأشكال المرئية المتفاعلة ديناميكيًا مع الصوت

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

ثم سنضيف هاتين الدالتين لكائن Three.Points مع ShaderMaterial بسيط.

const geometry = new THREE.BoxGeometry(1, 1, 1, widthSeg, heightSeg, depthSeg)
const material = new THREE.ShaderMaterial({
  side: THREE.DoubleSide,
  vertexShader: vertex,
  fragmentShader: fragment,
  transparent: true,
  uniforms: {
    size: { value: 2 },
  },
})
const pointsMesh = new THREE.Points(geometry, material)

يمكننا الآن إنشاء تمثيلات الهندسية بسمات عشوائية بفترة زمنية محددة، لاحظ الشكل التالي:

توضيح مفهوم Vertex Shader و Fragment Shader

سنستخدم في فقراتنا التالية مفهومي مظلل الرؤوس Vertex Shader ومظلل الشرائح Fragment Shader في مكتبة Three.js لتخصيص وتعديل مظهر الكائنات الرسومية ثلاثية الأبعاد. فمظلل الرؤوس Vertex Shader هو جزء من الكود يُنفَّذ لكل رأس Vertex في الكائن ثلاثي الأبعاد ونستخدمه لتعديل موقع الرأس بناءً على المعاملات المرسلة من جافا سكريبت، وتغيير شكل الكائن عن طريق تعديل مواقع الرؤوس كتحريكها أو تدويرها ولكن لا يمكن من خلاله تعديل ألوان البكسلات أو التفاصيل الدقيقة الأخرى للكائن.

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

تحريك جزئيات الشكل عشوائيًا

سندرج ضوضاء دورانية Curl Noise للمظلل vertex shader لتحريك جزئيات الشكل بحركات طبيعية لها وإضافة حركات دوامية وسلسة لها. حيث سنحرك هذه الجزيئات وننشئ تأثيرات ديناميكية تتحكم بمظهرها وسلوكها. سنبدأ بتحديد موقع هدف نسميه newpos لكل نقطة، ثم نضيف ضوضاء دورانية Cur Noise على طول الشعاع الطبيعي لها ونغير هذه الضوضاء اعتمادا على التردد frequency والسعة amplitude، سيعدل تأثير الضوضاء اللولبية بناءً على المسافة بين النقطة الحالية التي نحركها والهدف d وينتج تحرك سلس يتلاشى تدريجيًا بمعنى أن التغيير يعتمد على المسافة، سيكون التأثير أكبر عندما تكون المسافة صغيرة، ويتناقص تدريجيًا كلما اقتربت النقطة من الهدف بسبب تداخل المسافة.

vec3 newpos = position;
vec3 target = position + (normal * .1) + curl(newpos.x * frequency, newpos.y * frequency, newpos.z * frequency) * amplitude;
float d = length(newpos - target) / maxDistance;
newpos = mix(position, target, pow(d, 4.));

سنضيف أيضا حركة متموجة إلى newpos.z لإضافة مزيد من الحيوية للنقاط المتحركة.

newpos.z += sin(time) * (.1 * offsetGain);

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

gl_PointSize = size + (pow(d,3.) * offsetSize) * (1./-mvPosition.z);

ستبدو النتيجة النهائية للحركة العشوائية كالتالي:

إضافة الألوان

سنخفي النقطة في مظلل الشرائح fragment shader باستخدام دالة تنشئ شكل دائري ثم نحدد تدرج لوني بين اللونين startColor و endColor بناءً على المسافة vDistance بين النقطة والهدف والتي حسبناها في المظلل vertex shader. هذا يعني أن الألوان ستتغير تدريجيًا حسب المسافة أيضًا، مما ينتج تأثيرًا مرئيًا سلسًا عند تحرك النقطة.

vec3 circ = vec3(circle(uv,1.));
vec3 color = mix(startColor,endColor,vDistance);
gl_FragColor=vec4(color,circ.r * vDistance);

تظهر النتيجة على النحو التالي:

دمج الصوت مع المؤثرات المرئية

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

update() {
  // تحديث السعة ديناميكيًا بناءً على بيانات التردد العالي من مدير الصوت
  this.material.uniforms.amplitude.value = 0.8 + THREE.MathUtils.mapLinear(App.audioManager.frequencyData.high, 0, 0.6, -0.1, 0.2)

  // تحديث الإزاحة بناءً على بيانات التردد المنخفض لتغييرات تأثيرات طفيفة
  this.material.uniforms.offsetGain.value = App.audioManager.frequencyData.mid * 0.6

  // تحويل بيانات التردد المنخفض إلى نطاق معين واستخدامه لزيادة قيمة الوقت
  const t = THREE.MathUtils.mapLinear(App.audioManager.frequencyData.low, 0.6, 1, 0.2, 0.5)
  this.time += THREE.MathUtils.clamp(t, 0.2, 0.5) // تقييد القيمة للتأكد من بقائها ضمن النطاق المطلوب

  this.material.uniforms.time.value = this.time
}

الخلاصة

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

ترجمة -وبتصرف- لمقال Creating Audio-Reactive Visuals with Dynamic Particles in Three.js لصاحبه Tiago Canzian.

اقرأ أيضًا

• مقدمة إلى WebGL - تعريف - جافاسكربت
• مقدمة إلى WebGL - التنقل في الفضاء وتشغيل الأضواء
• سلسلة الوعود Promises chaining في جافاسكربت
• معالجة المشاكل الشائعة للتوافق مع المتصفحات في شيفرة جافاسكربت

نتعرف في مقال اليوم على إطار عمل جيست Jest أحد الأطر الشائعة لاختبار الشيفرات المصدرية المكتوبة باستخدام رياكت React ولغة جافا سكريبت، فهو يقدم مجموعة شاملة من المطابِقات Matchers التي تقارن بين القيم المتوقعة والقيم الفعلية أثناء اختبار الشيفرة مما يسمح بكتابة اختبارات لعدة أنواع من المشاريع. كما يُنَظم الاختبارات في مجموعات اختبار test suites ليُحَسّن الصيانة والمقروئية، وينجز الاختبار بكفاءة وسلاسة.

ستتعرّف في هذا المقال على عدّة اختبارات شائعة الاستخدام في مجال تطوير البرمجيات، وبعض الممارسات المفيدة في عملية الاختبار. إذ سنكتب توابع جافا سكريبت JavaScript ثم سنختبرها باستخدام إطار عمل جيست Jest على خادم Vultr مع تطبيق نود جي إس NodeJS جاهز من صفحة متجر تطبيقات NodeJS marketplace.

أنواع الاختبارات

تتضمن عملية تطوير البرمجيات ثلاثة أنواع من الاختبارات لضمان جودة الشيفرة البرمجية وسلامة وظائفها. يخدم كل منها غرضًا محددًا:

اختبارات الوحدة Unit tests

تركز هذه الاختبارات على اختبار الوحدات أو المكونات الفردية مثل الدوال functions أو التوابع methods أو الصفوف classes. إذ يضمن هذا الاختبار أن كل مكونات الشيفرة البرمجية تعمل بصورة صحيحة من تلقاء نفسها.

اختبارات التكامل Integration tests

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

الاختبارات الشاملة End-to-end tests

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

منهجيات شائعة في عملية الاختبار

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

فيما يلي مثال يوضح المنهجية السابقة، حيث سنختبر فيما إذا كان البريد الإلكتروني للمستخدم مكتوبًا بأبجدية رقمية alphanumeric أي مكون من أحرف وأرقام، ويستخدم النطاق example.com:

test("returns false for an invalid domain", () => {
  const email = "user123@example.net";
  const result = isValidEmail(email);
  expect(result).toBe(false);
});

فيما يلي شرح المراحل الثلاثة للاختبار

مرحلة الإعداد Arrange

علينا في هذه المرحلة إعداد الشرط الأولي وبيئة الاختبار. بما فيه تهيئة الكائنات objects وإعداد الدخل inputs وضبط البيئة لإنشاء حالة الاستخدام التي نرغب في اختبارها، نريد في مثالنا اختبار عمل الدالة isValidEmail ونتحقق فيما إذا كانت تحدد بدّقة رسائل البريد الإلكتروني غير الصالحة. وهنا أسندنا إلى متغير البريد الإلكتروني سلسلة نصية لا تفي بالمعايير التي حددناها حيث تستخدم النطاق ‎.net بدلاً من ‎.com

مرحلة اتخاذ الإجراء المناسب Act 

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

مرحلة التأكيد Assert

في هذه المرحلة، علينا التحقق من أن نتيجة المرحلة السابقة تلبي التوقعات، وقد استخدمنا في مثالنا التابع expect الذي يوفره إطار عمل Jest، للتأكد من أن النتيجة التي أرجعتها الدالة isValidEmail محددة بأنها خاطئة، كما هو متوقع بالنسبة لبريد إلكتروني غير صالح.

إعداد مجلد المشروع على Vultr

سننشر أولًا خادم على Vultr ومن الضروري أن نحرص على تحديد الخيار NodeJS في علامة تبويب تطبيقات المتجر Apps Marketplace. بعدها علينا إعداد مشروع Node.js وتثبيت إطار عمل Jest. ثم تعريف دالتين في ملفي جافا سكريبت منفصلين، حيث سنختبر هاتين الدالتين في الخطوات القادمة.

نتأكّد من تثبيت Node.jS باستخدام الأمر التالي:

node --version

بعدها، ننشئ مجلدًا للمشروع ثم ننتقل إليه:

mkdir sample
cd sample

نبدأ تشغيل المشروع باستخدام الأمر التالي:

npm init -y

ثم نثبّت إطار عمل Jest:

npm install --save-dev jest

نلاحظ أننا استخدمنا الراية ‎--save-dev لتثبيت الحزمة كتبعية تطوير development dependency. ويعني هذا أن الحزمة ستُسخدم فقط خلال مرحلتي التطوير والاختبار، وليس في مرحلة الإنتاج.

بعد ذلك نفتح ملف package.json باستخدام أحد محررات الأكواد، وسنستخدم في مثالنا محرر النصوص نانو Nano.

nano package.json

الآن، علينا إضافة سكربت للاختبار

"scripts": {
  "test": "jest"
}

نغلق الملف باستخدم الاختصار Ctrl+X، ثم ننقر على مفتاح Y لحفظ التغييرات.

بعدها سنشئ ملف جافا سكريبت ونطلق عليه اسم token:

nano token.js

ننسخ الشيفرة التالية ونلصقها في ملف token.js، إذ توضح هذه الشيفرة كيفية حساب تاريخ انتهاء صلاحية مفتاح تشفير ويب JSON Web Token أو JWT اختصارًا، والتحقق من صلاحيته.

ملاحظة: إن شيفرة التحقق التالية هي للتوضيح فقط، حيث يوصى الاعتماد على مكتبات معتمدة عند التعامل مع رموز المصادقة في المشاريع الحقيقية مثل مكتبة jsonwebtoken.

/**
 *
 * @param {string} token
 * @returns {Date}
 */

function getTokenExpiryDate(token) {
  if (!token) return null;

  const tokenParts = token.split(".");
  const payload = tokenParts[1];
  const decodedPayload = Buffer.from(payload, "base64").toString();
  const payloadObject = JSON.parse(decodedPayload);
  const expiryDate = new Date(payloadObject.exp * 1000);

  return expiryDate;
}

/**
 *
 * @param {string} token
 * @returns {boolean}
 */

function isTokenExpired(token) {
  const expiryDate = getTokenExpiryDate(token);
  const currentDate = new Date();

  return currentDate > expiryDate;
}

module.exports = { isTokenExpired };

تُعَرّف الشيفرة السابقة دالتين هما getTokenExpiryDate وisTokenExpired اللتان تحسبان تاريخ انتهاء صلاحية رمز JWT وتعطيان إما القيمة true أو false بناءً على حالة صلاحية الرمز. 

نحفظ الملف ونغلقه، ثم ننشئ ملف جافا سكريبت آخر باسم email:

nano email.js

ثم نلصق فيه الشيفرة التالية:

function isValidEmail(email) {
  const emailRegex = /[a-zA-Z0-9]+@example\.com/;
  return emailRegex.test(email);
}


module.exports = { isValidEmail };

تُعَرّف الشيفرة السابقة الدالة isValidEmail التي تتحقق من صحة بنية البريد الإلكتروني باستخدام التعابير النمطية regex، والتي تتيح لنا التحقق من أن جميع عناوين البريد الإلكتروني مكتوبة بأبجدية رقمية وتنتهي بـالنطاق ‎@example.com. والآن، علينا حفظ الملف وإغلاقه.

كتابة اختبارات الوحدة Unit Tests باستخدام إطار عمل Jest

سنتعلم الآن كيفية كتابة اختبارات الوحدة باستخدام إطار عمل جيست Jest لاختبار دوال جافا سكريبت التي عرّفناها سابقًا. سنضع هذه الاختبارات في مجلد منفصل ضمن مجلد المشروع، ونوصي باتباع التسميات الاصطلاحية التي سنعتمدها في مقالنا لأن Jest يتعامل مع الملفات التي تنتهي بالصيغة ‎.test.js‎ كملفات اختبار. 

أولًا، ننشئ مجلدّا يدعى tests داخل مجلد sample، ثم ننتقل إليه باستخدام الأمر cd على النحو التالي:

mkdir tests
cd tests

بعدها ننشئ ملف جافا سكريبت.

nano token.test.js

ننسخ الشيفرة التالية ونلصقها في الملف.

const { isTokenExpired } = require("/root/sample/token.js");

describe("isTokenExpired", () => {
  test("should return false if the token is not expired", () => {
    const token = "eyJ0eXAiOiJKV1QiLCJhbGciOi...";
    const result = isTokenExpired(token);
    expect(result).toBe(false);
  });

  test("should return true if the token is expired", () => {
    const token = "eyJ0eXAiOiJKV1QiLCJhbGciOi...";
    const result = isTokenExpired(token);
    expect(result).toBe(true);
  });
});

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

ملاحظة: إن أردنا أن تتحقق الدالة isTokenExpired من صحة رموز مصادقة حقيقية، يمكننا إنشاء رموز JWT منتهية الصلاحية وأخرى غير منتهية الصلاحية بواسطة أداة مثل JSON Web Token Builder واستخدامها بدلاً من النصوص المستخدمة في الاختبارات السابقة.

نحفظ الملف ونغلقه، ثم ننشئ ملف جافا سكريبت آخر للاختبار.

nano email.test.js

ننسخ الشيفرة التالية ونلصقها في ملف الاختبار.

const { isValidEmail } = require("/root/sample/email.js");

describe("isValidEmail", () => {
  test("returns true for a valid email", () => {
    const email = "user123@example.com";
    const result = isValidEmail(email);
    expect(result).toBe(true);
  });

  test("returns false for an invalid domain", () => {
    const email = "user123@example.net";
    const result = isValidEmail(email);
    expect(result).toBe(false);
  });
});

تختبر الشيفرة السابقة دالة isValidEmail من خلال توفير بريد إلكتروني صالح وآخر غير صالح. ثم تتحقق من صحة النتائج عن طريق مطابقة المخرجات المتوقعة مع المخرجات الفعلية.

تشغيل اختبارات Jest على Vultr

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

اختبارات وحدة فردية

أولًا: نختبر صحة رمز المصادقة.

npm test -- tests/token.test.js

إن نجح الاختبار فيجب أن يبدو الخرج على النحو التالي:

> sample@1.0.0 test
 > jest tests/token.test.js

 PASS  tests/token.test.js
 isTokenExpired
     ✓ should return false if the token is not expired (2 ms)
     ✓ should return true if the token is expired (1 ms)

 Test Suites: 1 passed, 1 total
 Tests:       2 passed, 2 total
 Snapshots:   0 total
 Time:        0.315 s, estimated 1 s
 Ran all test suites matching /tests\/token.test.js/i.

ثانيًا: نختبر صحة البريد الإلكتروني.

npm test -- tests/email.test.js

إن نجح الاختبار فسيبدو الخرج على النحو التالي:

> sample@1.0.0 test
> jest tests/email.test.js

PASS  tests/email.test.js
isValidEmail
    ✓ returns true for a valid email (2 ms)
    ✓ returns false for an invalid domain (1 ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        0.451 s
Ran all test suites matching /tests\/email.test.js/i.

إجراء جميع الاختبارات في وقت واحد

أولًا: نشغّل جميع الاختبارات في وقت واحد.

npm test

إن نجح الاختبار فسيبدو الخرج على النحو التالي:

> sample@1.0.0 test
> jest

PASS  tests/email.test.js
PASS  tests/token.test.js

Test Suites: 2 passed, 2 total
Tests:       4 passed, 4 total
Snapshots:   0 total
Time:        0.225 s, estimated 1 s
Ran all test suites.

ختامًا

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

ترجمة -وبتصرّف- للمقال Testing JavaScript with Jest on Vultr.

اقرأ أيضًا

• استراتيجيات اختبارات مشاريع الويب للتوافق مع المتصفحات
• اختبار الوحدات البرمجية باستخدام Mocha و Assert في Node.js
• تعرف على أداة TestGrid وأهميتها في أتمتة الاختبارات البرمجية
• إعداد البيئة للاختبارات الآلية في مشاريع الويب للتوافق مع المتصفحات

تتيح الواجهة البرمجية لقناة البث Broadcast Channel API التخاطب بين عدة نوافذ للمتصفح وتبويباته tabs وإطاراته المضمنة iframes وعمّال الويب web workers ضمنه، إذ توفر طريقة سهلة وفعالة لمزامنة البيانات والسلوك في مختلف سياقات المتصفح browser contexts للحصول على تطبيقات ويب أكثر تفاعلًا ومرونة.

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

مفهوم الواجهة البرمجية للبث Broadcast Channel API

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

لإنشاء قناة بث أو الانضمام إليها نكتب الكود التالي بلغة جافا سكريبت:

const bc = new BroadcastChannel("test_channel");

لإرسال رسالة عبر قناة البث نكتب التالي:

bc.postMessage("This is a test message");

لاستقبال الرسالة الواردة من قناة البث:

bc.onmessage = (event) => {
  console.log(event.data);
  // { method: "add", note: "This is a test message" }
};

إنشاء تطبيق Node.js

لننشئ تطبيق نود جي إس يستخدم الواجهة البرمجية Broadcast Channel API نبدأ أولاً بتجهيز الخادم على جهازنا المحلي أو على خدمة سحابية ما وندخل إليه عن طريق بروتوكول SSH، ثم نعدّ مشروعًا لتطبيق الويب الذي سننشئه. سنستخدم في مقالنا محرر النصوص نانو Nano لإنشاء ملفات المشروع على الخادم وتعديلها، كما سنعتمد جدار الحماية المبسَّط UFW للتحكم بحركة المرور التي سنسمح بمرورها من وإلى الخادم، وسنحدد باستخدامه المنفذ 8080 ليكون المنفذ الوحيد الذي يُسمَح بمرور البيانات الواردة إلى الخادم من خلاله.

سنستخدم لغة جافا سكريبت وبيئة Node.js لكتابة ملف index للتطبيق، وسنشغله بالاعتماد على خادم HTTP، علماً أن بإمكاننا استخدام أي نوع آخر من خوادم الويب لتحقيق النتيجة ذاتها.

1. ننشئ مجلدًا خاصًا بالمشروع، وننتقل إليه

mkdir notes-app
cd notes-app

2. ننشئ مشروع Node.js

npm init -y

3. نثبّت حزمة http-server لإنشاء خادم الويب

npm install http-server

4. ننشئ ملف HTML

nano index.html

5. ننسخ الشيفرة البرمجية التالية ونلصقها في ملف index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Note-taking App</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Note-taking App</h1>
    <div id="noteList"></div>
    <div id="noteForm">
      <label for="noteInput">New note</label>
      <input type="text" id="noteInput" placeholder="A note..." />
      <button id="addNoteButton">Add Note</button>
      <button id="resetNoteButton">Reset Notes</button>
    </div>
    <script src="app.js"></script>
  </body>
</html>

6. نحفظ الملف ونغلقه
7. ننشئ ملف التنسيقات CSS

nano styles.css

8. ننسخ الشيفرة البرمجية التالية ونلصقها في ملف styles.css

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 20px;
}


h1 {
  color: #333;
  text-align: center;
}


#noteList {
  display: grid;
  row-gap: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 20px;
}


#noteList div {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px;
}


#noteForm {
  display: grid;
  column-gap: 10px;
  align-items: center;
  grid-template-columns: max-content 1fr max-content max-content;
}


#noteInput {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 16px;
}


button {
  padding: 10px 20px;
  background-color: #4caf50;
  color: #fff;
  border: none;
  border-radius: 3px;
  font-size: 16px;
  cursor: pointer;
}


button:hover {
  background-color: #45a049;
}

9. نحفظ الملف ونغلقه

تطبيق الواجهة البرمجية Broadcast Channel API

لننشئ الآن تطبيقًا للتواصل بين نوافذ و تبويبات المتصفح المختلفة ومزامنة البيانات بينها في الوقت الفعلي من خلال اتباع الخطوات التالية:

1. ننشئ ملف بلغة جافا سكريبت JavaScript في المجلد notes-app

nano app.js

2. ننسخ الشيفرة البرمجية التالية ونلصقها في ملف التطبيق app.js

const noteList = document.getElementById("noteList");
const noteInput = document.getElementById("noteInput");
const addNoteButton = document.getElementById("addNoteButton");
const resetNoteButton = document.getElementById("resetNoteButton");


let notes = [];


function renderNotes() {
  noteList.innerHTML = "";


  notes.forEach((note) => {
    const noteItem = document.createElement("div");
    noteItem.textContent = note;
    noteList.appendChild(noteItem);
  });
}


addNoteButton.addEventListener("click", () => {
  const newNote = noteInput.value.trim();


  if (newNote) {
    notes.push(newNote);
    renderNotes();
    noteInput.value = "";


    channel.postMessage({ action: "add", note: newNote });
  }
});


resetNoteButton.addEventListener("click", () => {
  notes = [];
  renderNotes();


  channel.postMessage({ action: "reset" });
});


const channel = new BroadcastChannel("notes-channel");


channel.addEventListener("message", (event) => {
  const { action, note } = event.data;


  if (action === "add") {
    notes.push(note);
    renderNotes();
  } else if (action === "reset") {
    notes = [];
    renderNotes();
  }
});

3. نحفظ الملف ونغلقه
4. نسمح بمرور طلبات الوصول connections الواردة إلى المنفذ 8080 من خلال التعليمة التالية

sudo ufw allow 8080

5. نشغّل الخادم

npx http-server

6. نفتح التطبيق من خلال الرابط http://<server-ip>:8080 ونفتح الآن التطبيق في نافذتي متصفح أو تبويبي متصفح جنبًا إلى جنب ونضيف ملاحظة لإحداهما، وسنجد أن الملاحظة ظهرت في النافذة الثانية دون الحاجة لتحديث الصفحة

بعدها، ننقر على زر Reset Notes لحذف كافة الملاحظات، سنجد أن الملاحظات حُذفَت من كلا النافذتين دون الحاجة للتحديث أيضًا.

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

وبآلية مماثلة تتيح لنا الدالة resetNoteButton حذف كافة الملاحظات الموجودة، ثم تبثّ الدالة channel.postMessage إجراء الحذف إلى النوافذ أو التبويبات الأخرى. تُنشَأ في النهاية قناة بث BroadcastChannel جديدة باسم notes-channel تتيح التخاطب بين مختلف النوافذ أو التبويبات التي تشترك بالأصل ذاته، إذ ينصت مستمع الحدث event listener في القناة إلى الأحداث من نوع message ضمنها ويتخذ إجراء وفق المُدخلات المكتوبة فيه.

تطبيقات عملية على الواجهة البرمجية Broadcast Channel API

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

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

الخاتمة

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

ترجمة -وبتصرّف- للمقال Exploring the Broadcast Channel API for cross-tab communication.

اقرأ أيضًا

• إنشاء إشعارات عبر الويب باستخدام لارافيل وقنوات Pusher
• مقدمة إلى Node.js
• مدخل إلى واجهات الويب البرمجية Web APIs
• أدوات مطوري الويب المدمجة في المتصفحات

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

ما هي التوابع الجديدة للتعامل مع المجموعات

نستعرض فيما يلي أهم التوابع الجديدة للمجموعة set المدعومة من أغلب المتصفحات الحديثة وهي كالتالي:

• التابع ()intersection : يعيد مجموعة جديدة تحتوي على العناصر الموجودة في كلا المجموعتين أي تقاطع المجموعتين
• التابع ()union: يعيد مجموعة جديدة تضم جميع العناصر الموجودة في المجموعتين أي اجتماع المجموعتين
• التابع ()difference: يعيد مجموعة جديدة تحتوي على العناصر غير المتشابهة في المجموعتين أي فرق المجموعتين
• التابع ()symetricDifference: يعيد مجموعة جديدة تحتوي على العناصر الموجودة في أحد المجموعتين وغير الموجودة في المجموعة الثانية
• التابع ()isSubsetOf: يعيد قيمة منطقية تشير فيما إذا كانت جميع عناصر المجموعة الأولى مجموعة فرعية محتواة ضمن المجموعة الثانية أي هل المجموعة الأولى مجموعة جزئية من المجموعة الثانية.
• التابع ()isSupersetOf: يعيد قيمة منطقية تشير إلى ما إذا كانت المجموعة الأولى مجموعة شاملة للمجموعة الثانية، أي هل جميع العناصر في المجموعة الثانية موجودة في المجموعة الأولى.
• التابع ()isDisjointFrom: يرجع قيمة منطقية تشير فيما إذا كانت المجموعتان مستقلتين أي المجموعة الأولى لا تحتوي على عناصر مشتركة مع المجموعة الثانية.

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

ما هي المجموعة في لغة جافا سكريبت JavaScript

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

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

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

const dogs = new Set();
const yoshi = { name: "Yoshi", personality: "Friendly" };
dogs.add(yoshi);

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

اجتماع مجموعتين

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

لدينا في المثال التالي مجموعتان ونريد الحصول على مجموعة ثالثة تضم جميع عناصر المجموعتين ولكن بدون تكرار، سنكتب كالتالي:

// إنشاء اجتماع المجموعتين
const unionSet = set1.union(set2);

// عرض العناصر في الاجتماع
unionSet.forEach((item) => {
  const li = document.createElement("li");
  li.textContent = item;
  unionList.appendChild(li);
});

نستخدم عناصر المحتوى النصي textContent في لغة HTML لكل عنصر من عناصر القائمة، مما يشكل لدينا مجموعات من السلاسل النصية sets of strings. وتكمن أهمية استخدام المجموعات عندما نخزن أنواع متعددة من البيانات داخلها، مثل المصفوفات والكائنات.

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

تقاطع مجموعتين

يمكننا باستخدام تقاطع المجموعات معرفة العناصر الموجودة في كلتا المجموعتين وتحديد العناصر المشتركة بينهما. في المثال التالي، سنستخدم تقاطع المجموعات لاستخراج العناصر المشتركة بين المجموعتين وعرضها بدلاً من دمجها في مجموعة ثالثة كما فعلنا باستخدام التابع union في الفقرة السابقة:

// إنشاء مجموعة تقاطع المجموعتين
const intersectionSet = set1.intersection(set2);

// المرور على العناصر في القوائم وتحديد العناصر المشتركة
allListItems.forEach((item) => {
  if (intersectionSet.has(item.textContent)) {
    item.className = "match";
  }
});

الفرق التناظري لمجموعة

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

const setNotBoth = set1.symmetricDifference(set2);

allListItems.forEach((item) => {
  if (setNotBoth.has(item.textContent)) {
    item.className = "match";
  }
});

استخدامنا في هذا الكود التابع symmetricDifference لحساب الاختلاف التناظري بين المجموعتين set1 و set2. والنتيجة مجموعة تحتوي على العناصر التي توجد في إحدى المجموعتين ولكن ليس في كليهما. قد يكون ما سبق جديد وغير مفهوم بالنسبة لك، لفهم الموضوع قارن الفرق التناظري للمجوعات مع تقاطع المجموعات، وعندها ستجد فالتابع symmetricDifference يعمل بطريقة منطقية معاكسة للتابع intersection، وهنا سينتهي هذا الالتباس بالنسبة لك.

فرق المجموعات

يمكننا استخدام تابع الفرق للتحقق من العناصر الموجودة في إحدى المجموعات وغير الموجودة في المجموعة الأخرى. في المثال التالي، سننشئ مجموعتين بدلاً من مجموعة واحدة. بداية ننشئ المجموعة الأولى set1only باستخدام التابع set1.difference(set2)‎، مما يعطينا العناصر الموجودة في المجموعة الأولى فقط.

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

const set1only = set1.difference(set2);
const set2only = set2.difference(set1);

allListItems.forEach((item) => {
  if (set1only.has(item.textContent)) {
    item.className = "setOneMatch";
  } else if (set2only.has(item.textContent)) {
    item.className = "setTwoMatch";
  }
});

المجموعة الفرعية والمجموعة الشاملة والمجموعة المنفصلة

آخر التوابع والمفاهيم الجديدة الخاصة بالمجموعات التي سنتظرق إليها في هذا المقال هي توابع المجموعة الفرعية Subset والمجموعة الشاملة Superset والمجموعة المنفصلة Disjoint from Set.

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

سنتعرف في البداية على التابعين subset و superset، حيث نحصل على النتيجة من خلال بعض عبارات التحقق المنطقية. على سبيل المثال، يمكننا التحقق مما إذا كانت المجموعة الأولى مجموعة جزئية من المجموعة الثانية، ومن ثم إضافة نص منطقي True أو False للعنصر بناءً على نتيجة التحقق.

if (set1.isSubsetOf(set2)) {
  oneSubTwo.textContent += " [TRUE]";
} else {
  oneSubTwo.textContent += " [FALSE]";
}

يمكننا باستخدام التابع isSubsetOf()‎ التحقق مما إذا كانت جميع عناصر المجموعة الأولى تظهر بالكامل في المجموعة الثانية. بينما يمكننا باستخدام التابع isSupersetOf()‎ التحقق من العكس أي معرفة إذا كانت المجموعة الأولى تحتوي على جميع عناصر المجموعة الثانية بالإضافة إلى عناصر أخرى.

أما التابع الأخير الذي سنتعرف عليه فهو isDisjointFrom()‎‎، حيث يمكننا من خلاله معرفة ما إذا كانت المجموعتان لا تملكان أي عناصر مشتركة بينهما.

لاحظ في المثال أدناه أن المجموعتين الأولى والثانية لا تحققان شروط التابع isDisjointFrom()‎‎، لأن هناك عنصر مشترك بينهما وهو العنصر C، أما المجموعة الثالثة فهي منفصلة عن المجموعتين الأولى والثانية لأنها لا تحتوي على أي عناصر مشتركة مع أي منهما.

الخلاصة

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

ترجمة وبتصرف للمقال New JavaScript Set methods لكاتبه Brian Smith.

اقرأ أيضًا

• القوائم lists والمجموعات sets في جافا
• مدخل إلى البيانات وأنواعها: التجميعات Collections
• هياكل البيانات: الكائنات والمصفوفات في جافاسكريبت
• التعامل مع الصفوف والمجموعات والقواميس في بايثون

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

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

ما هو إطار العمل ولماذا نحتاجه؟

يشير إطار العمل framework عمومًا إلى طريقة تنفيذ العمل، ويُقصد به في مجال البرمجة بيئة العمل working environment التي تمكننا من تنظيم عملنا، فيساعدنا إطار العمل البرمجي على تنظيم شيفراتنا وبالتالي يُسَهِّل ويُسَرِّع إنجازنا للمشاريع.

تقسم أُطر العمل البرمجية إلى نوعين رئيسيين:

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

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

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

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

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

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

والآن إليك قائمتنا من أطر عمل جافا سكريبت التي نُرشحها لك والتي سنعرضها بمزيد من التفصيل:

1. ريآكت React.
2. فيو Vue JS.
3. أنجولار Angular JS.
4. بوليمر Polymer.
5. إمبر Ember.
6. باك بون Backbone.
7. نيتف سكريبت NativeScript.
8. نود جي اس Node JS.
9. ميتيور Meteor.
10. ميثريل Mithril.
11. أوريليا Aurelia.
12. سوكيت Socket.

1. ريآكت React

ريآكت React هو مشروع مفتوح المصدر طوره مهندس البرمجيات جوردان ووك من شركة فيسبوك، وهو مكتبة أكثر من كونه إطار عمل متكامل تقليدي لذا يُعَدّ مناسبًا لمشاريع الويب التي تتطلب تخصيصًا عاليًّا. يستعمل ريآكت في بناء واجهة المستخدم UI لتطبيقات الهاتف الجوّال وتطبيقات الويب، فإذا كنت تعمل في هذا المجال سيكون مهارةً ممتازة تضيفها إلى مهاراتك إذ سيُحَسِّن كفاءة مشاريعك مقارنة بغيره من الأدوات، كما أنه جيدٌ في الاختبارات ويتوافق مع أُطر جافا سكريبت الأخرى.

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

كما يوفر ريآكت العديد من الأدوات التي تسهّل العمل على مشروعك، خاصة في المراحل المتقدمة. من بين هذه الأدوات React Developer Tools، وهو إضافة extension متوفرة لمتصفح جوجل كروم وأيضًا لمتصفح فايرفوكس. تتيح لك هذه الإضافة فحص شجرة DOM الخاصة بتطبيقك وتحريرها مباشرة باستخدام React، مما يمنحك تحكّمًا أكبر ويسهّل عليك اكتشاف الأخطاء وتحسين الكود.

2. فيو Vue JS

أُطلِقَ إطار العمل Vue JS في شهر فبراير من العام 2014، وهو من أحدث أُطر عمل جافا سكريبت، ورغم حداثة عهده فقد أصبح بسرعة واحدًا من أكثر الخيارات شعبيةً لمطوّري الويب، وذلك لعدة أسباب، نعرض أبرزها:

السبب الأول هو صغر حجمه، وهذه صفةٌ مهمة في أي إطار عمل تنوي استخدامه ومع أي لغة برمجة، فأُطر العمل كبيرة الحجم التي تستهلك مساحةً كبيرة في الذاكرة تعمل بكفاءة أقل وتستغرق وقتًا أطول لتحميل التطبيقات وتشغيلها، أما مع إطار عمل صغير الحجم مثل Vue.js الذي يتراوح حجمه بين 20 و 25 كيلو بايت فقط سيكون أفضل أداء ويمكن تحميله بسرعة ثم البدء باستخدامه مباشرة.

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

وأخيرًا من الضروي التنويه لميزة البساطة التي يتمتع بها Vue JS فتعابيره البرمجية بسيطة وسهلة الفهم، ويمكنك تعلُّمه بسرعة وبأي وقت خصوصًا إذا كنت تتقن إطار Angular أو React، وفي هذا المجال ننصحك بتحميل كتاب أساسيات إطار العمل Vue.js 1.0.0 الذي توفره أكاديمية حسوب مجانًا وباللغة العربية.

3. أنجولار Angular JS

أطلقت جوجل إطار العمل أنجولار Angular  عام 2012 وقد استغرق هذا الإطار بعض الوقت لينال شعبية بين المطورين وهو اليوم واحد من أكثر أُطر العمل شهرة ويستعمل في عدد كبير من مواقع الويب حول العالم، فما السر وراء انتشاره؟ وما الميزات التي يقدمها؟ سنجيبك عن هذا السؤال بخمس نقاط مختصرة:

•  يلائم Angular منصات متعددة cross-platform، فيمكنك استخدامه لتطوير تطبيقات سطح المكتب، وتطبيقات الهاتف الجوال، وتطبيقات الويب، وهذه من أفضل مميزاته.
• إطار عمل مفتوح المصدر ويمكن تعديل شيفرته المصدرية حسب متطلبات العمل، وهذا يفيدنا في المشاريع المعقدة التي تحتاج متطلبات خاصة
• وجود مجتمع كبير من المطورين الداعمين له والساعين لتحسينه باستمرار
•  يتلقى Angular دعمًا مستمرًا من جوجل وتحديثات منتظمة إلى جانب الدعم الذي يتلقاه من مجتمع المطورين
• إطار سهل الاستخدام وهذه ميزة مهمة للمبتدئين خاصة فلن يحتاجوا وقتًا طويلًا لتعلم Angular وإتقانه مقارنة بأُطر العمل الأخرى.

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

4. بوليمر Polymer

أنُشِئ إطار العمل Polymer من قبل مجموعة من مطوري شركة جوجل على غرار Angular، وهو أيضًا مفتوح المصدر لكنه أحدث عهدًا منه، ومستودعه على GitHub متاح لكل من يحب المساهمة في المشاريع مفتوحة المصدر.

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

كما يتميز Polymer بسهولة التعامل مع متغيرات CSS ومخاليط mixin قابلة لإعادة الاستخدام، مما يزيد توافقيته مع CSS3 ويمنحك القدرة على استثمار كل ميزة جديدة تقدمها، وهذا ينعكس على جودة وجاذبية وتنوع تصميمات مواقع الويب التي تبنهيها يهذا الإطار.

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

5. إمبر Ember JS

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

وفي هذا المجال يساعدك موقع Ember الرسمي EmberAddons.com في التعرف على جميع أنواع الإضافات plugins الجاهزة للاستخدام فهو مثل مستودع تعاوني للإضافات يساهم فيه مطورو Ember، فإذا كنت تبحث عن الشيفرة البرمجية الكاملة لإضافة معينة أو عن جزء من شيفرة برمجية معينة، يمكنك البحث في هذا المستودع وأخذ ما تحتاجه لتطبيقك، وهذا بدوره يرفع إنتاجيتك ويُسَرِّع وتيرة عملك فالإنتاجية العالية هي الميزة الأهم للإطار Ember.

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

6. باك بون Backbone

صدر إطار العمل باك بون Backbone عام 2016 وهو الأحدث في قائمتنا المعروضة ضمن المقال، ورغم حداثته فقد اكتسب انتشارًا واسعًا بين المطورين لما يتمتع به من ميزات أبرزها تعدد المنصات cross-platform، فيمكنك استخدامه مثلًا لبناء تطبيق يعمل على الجوال وعلى الويب في آن واحد، مما يوفر زمن التطوير والاختبار فلن تضطر لإعادة برمجة التطبيق مرتين.

يساعد إطار العمل Backbone في تطوير الواجهة الخلفية back-end للتطبيق ويمكنه التفاعل بسلاسة مع الواجهة الخلفية لتطبيقك أو موقعك الحالي، كما يستطيع التفاعل مع واجهات برمجة التطبيقات APIs لتنفيذ مهام القراءة والكتابة والحذف.

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

7. نيتف سكريبت NativeScript

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

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

8. نود جي اس Node JS

يُعَدّ نود جي اس Node JS إطار العمل المفضل والأكثر شيوعًا لدى مطوري جافا سكريبت، فمنذ انطلاقته الأولى في العام 2009 أصبح واحدًا من الأدوات الرائدة في مجال إنشاء تطبيقات الويب من طرف الخادم وتشغيلها.

وتعود شعبيته الكبيرة لأسباب متعددة في مقدمتها اعتماد الكثير من الشركات عليه، فكل شركة تقريبًا تستخدم Node.js في أحد جوانب عملها نحو أدوات الدردشة المباشرة live chat التي تجدها في معظم مواقع الويب اليوم والتي لا بدّ ستصادفها مستقبلًا في عملك ومعرفتك بالأداة لإطار Node JS ستعينك على التعامل بكفاءة مع هذا النوع من تطبيقات الاتصال، وهناك قائمة طويلة من التطبيقات الشهيرة التي تعتمد Node.js مثل: PayPal و LinkedIn و Yahoo و Uber و eBay، وقد دفع هذا الانتشار الواسع المطورين لتعلمه والإقبال على استخدامه.

الدور الأساسي لإطار العمل Node.js هو تمكين التطوير من جانب الخادم server-side كما ذكرنا، لكنه في واقع الأمر يعمل بكفاءة مع طرف العميل client-side أيضًا ويسهل تبادل البيانات بين الطرفين والتنسيق بينهما ليكونا متزامنين، فأي تغيير تنفذه سينعكس مباشرة على التطبيق أو صفحة الويب، ولذا يُعَرّف Node.js بأنه بيئة تشغيل لجافا سكريبت JavaScript runtime environment أكثر من كونه إطار عمل بالمعنى الدقيق بسبب قدرته على التعامل مع هذه الاتصالات المتزامنة بين الطرفين والسرعة التي يوفرها لعملية التطوير.

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

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

9. ميتيور Meteor

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

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

تشبه Meteor إطار العمل Node.js في قدرتها على التعامل مع طرفي الخادم والعميل في عملية تطوير الويب، وتنفذ ذلك باستخدام شيفرات جافا سكريبت فقط من دون الحاجة لأي لغة برمجة أخرى، وهذا يجعلها سهلة التعلم فطالما أنك تتقن جافا سكريبت يمكنك تعلم Meteor بسرعة وسهولة.

10. ميثريل Mithril

يتميز إطار العمل ميثريل Mithril بحجمه الصغير فهو يبلغ حوالي 9 كيلو بايت فقط، حتى أنه أصغر من Vue.js وهذا يجعله سريعًا مقارنة بغيره من الأطر، وهو يستخدم أساسًا لتطوير تطبيقات الويب ذات الصفحة الواحدة single-page web applications لأنه على عكس Node.js و Meteor لا يستطيع التعامل مع طرفي العميل والخادم في أثناء التطوير إنما يتخصص بتطوير طرف العميل client-side فقط.

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

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

11. أوريليا Aurelia

يستخدم إطار العمل أوريليا Aurelia للتطوير من جانب العميل client-side، وهو سهل التعلم ويناسب المطورين المبتدئين إذ لن تحتاج لتعلمه سوى لتعلم أساسيات جافا سكريبت وتعلم لغة HTML الحديثة وهذه المعلومات متوفرة لدى جميع مطوري جافاسكريبت.

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

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

12. سوكيت Socket.io

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

ورغم العديد من الآراء التي تنادي بعدم الحاجة إلى Socket.io اليوك بسبب وجود بدائل أخرى يمكنها الحلول مكانها، لكن انتشار هذه المكتبة ما زال مستمرًا ومازالت تحظى بشعبية وبمستخدمين جدد.

وتتميز Socket.io بسهولة تعلُّمها وتنفيذها في المشاريع، فإذا كنت ترغب بإضافة مهارة جديدة إلى قائمة مهاراتك قد تفيدك في مسيرتك المهنية مستقبلًا فهذه الأداة تُعدّ خيارًا جيدًا.

الخلاصة

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

ترجمة -وبتصرف- لمقال 12 Best JavaScript Frameworks لصاحبه Mark Bynum.

اقرأ أيضًا

• تعلم جافا سكريبت
• مدخل إلى إطار عمل الويب Express وبيئة Node
• تعرف على مفهوم إطار العمل Framework وأهميته في البرمجة
• متى نستعمل إطار عمل للتطوير باستخدام JavaScript
• التوثيق العربي للغة جافا سكريبت

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

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

ما هي الواجهة البرمجية Page Visibility

طُوِّرت واجهة برمجة التطبيقات Page Visibility في البداية كميزة مستقلة منفصلة عن مواصفات HTML الرسمية التي تتولى تحديد كيفية بناء صفحات الويب، وسرعان ما تم دمجها مع مواصفات HTML تحت قسم page visibility، توفر هذه الواجهة طريقة فعّالة لتحديد حالة رؤية صفحة الويب، حيث يمكن من خلالها معرفة ما إذا كانت صفحة الويب مرئية visible أو مخفية hidden.

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

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

طريقة التحقق من تغير حالة رؤية الصفحة

يمكنك التحقق من حالة رؤية الصفحة باستخدام الخاصية document.visibilityState، التي تعيد إما القيمة visible عندما تكون الصفحة مرئية أو hidden عندما تكون الصفحة مخفية. كما يمكن معرفة حالة رؤية الصفحة أيضًا التحقق من قيمة الخاصية المنطقية document.hidden كما يلي:

console.log(document.visibilityState); // "visible"
console.log(document.hidden); // false

ومن الملائم أكثر استخدام الحدث visibilitychange، حيث يمكنك من خلاله تشغيل كود معين عندما تتغير حالة رؤية الصفحة، بدلاً من التحقق من الحالة يدويًا:

document.addEventListener("visibilitychange", (event) => {
  // تنفيذ الكود عند تغيير حالة رؤية الصفحة
});

بهذه الطريقة يمكنك التحقق من رؤية الصفحة عندما تتغير الحالة، وتنفيذ كود معين بالاعتماد على النتيجة كما يلي:

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    // ينفذ الكود هنا عندما تتغير حالة الرؤية إلى مخفية
  } else {
    // ينفذ الكود هنا عندما تتغير حالة الرؤية إلى مرئية
  }
});

تجدر الإشارة إلى أن الخاصية document.visible غير موجودة في الواجهة البرمجية، وبالتالي كي تعرف إن كانت الصفحة مرئية فيمكنك استخدام الكود التالي document.visibilityState === "visible"‎ أو استخدام الخاصية ‎!document.hidden‎ كما يلي:

if (document.visibilityState === "visible") {
  // الصفحة مرئية
}

if (!document.hidden) {
  // الصفحة مرئية
}

فائدة رؤية الصفحة

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

استخدام دورة حياة الجلسة Session lifecycle في التحليلات

عندما تجمع البيانات المتعلقة بتفاعل المستخدم مع الموقع أو التطبيق وتحللها ستحتاج لتسجيل اللحظة التي تتغير فيها حالة الصفحات من مرئية visible إلى مخفية hidden، فقد يكون تغير حالة الصفحة إلى مخفية hidden هو الحدث الأخير الذي يمكننا من خلاله مراقبة الصفحة، ولذلك يتعامل المطورون في أغلب الأحيان مع هذا الحدث على أنه نهاية لجلسة المستخدم user session.

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

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden") {
    navigator.sendBeacon("/log", analyticsData);
  }
};

إدارة الموارد بفعالية

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

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

تحسين تجربة المستخدم

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

حالات يجب تجنبها عند التحقق من رؤية الصفحة

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

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

<audio
  controls
  src="https://mdn.github.io/webaudio-examples/audio-basics/outfoxing.mp3"></audio>

const audio = document.querySelector("audio");

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    audio.pause();
  } else {
    audio.play();
  }
});

لدينا في كود HTML السابق عنصر <audio> مع عناصر تحكم تمكّن المستخدم من تشغيل أو إيقاف الصوت كما يشاء. ونحدد في كود جافا سكريبت هل سنشغل الصوت أو نوقفه استنادًا إلى حالة رؤية الصفحة عبر الحدث visibilitychange.

• إذا كانت الصفحة مخفية أي تم التبديل إلى تبويب آخر أو تم تصغير النافذة، سنوقف تشغيل الصوت
• إذا كانت الصفحة مرئية أي عاد المستخدم إلى التبويب أو أعاد تكبير النافذة نستأنف تشغيل الصوت

على الرغم من أن هذه الطريقة قد تبدو منطقية للوهلة الأولى، إلا أن هناك بعض المشكلات التي قد تنشأ في الحالات التالية:

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

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

لاحظ الكود التالي كيف عدّلنا مستمع الحدث visibilitychange ليخزن حالة عنصر الصوت عند إخفاء الصفحة باستخدام المتغير المنطقي playingOnHide وكيف سنستخدمه عندما تتغير حالة رؤية الصفحة إلى مخفية hidden:

// تعيين المتغير playingOnHide ليكون false في البداية لأنه عند تحميل الصفحة لا نشغل الصوت تلقائيًا
let playingOnHide = false;

// إضافة مستمع للحدث visibilitychange الذي يتم إطلاقه عندما تتغير حالة الصفحة من مرئية إلى مخفية أو العكس
document.addEventListener("visibilitychange", () => {
  // التحقق إذا أصبحت الصفحة مخفية
  if (document.hidden) {
    // إذا كانت الصفحة مخفية، سنخزن حالة الصوت هل هو مشغل أم لا
    playingOnHide = !audio.paused; // إذا كان الصوت مشغلاً نخزن القيمة true وإذا كان متوقفاً نخزن القيمة false

    // نوقف الصوت مؤقتًا عندما تصبح الصفحة مخفية
    audio.pause();
  }
});

ملاحظة: عند التعامل مع حالة إخفاء الصفحة، نجد أنه لا يمكننا الاعتماد على خاصية audio.playing لمعرفة إذا كان الصوت يعمل أم لا. بل نستخدم  بدلاً من ذلك الخاصية !audio.paused‎ التي تخبرنا إذا كان الصوت غير متوقف مؤقتًا.

لاحظ الكود التالي عندما تصبح الصفحة مخفية document.hidden، سنتحقق إذا كان الصوت يعمل باستخدام !audio.paused‎ فإذا كان الصوت يعمل فعلًا عندها نخزّن الحالة true في المتغير playingOnHide  وإذا كان متوقف نخزن الحالة false. بعد ذلك، نوقف الصوت باستخدامaudio.pause() ‎.

وعندما تعود الصفحة مرئية مرة أخرى، نستخدم المتغير playingOnHide للتحقق إذا كان الصوت قد بدأ في التشغيل قبل اختفاء الصفحة. فإذا كان الصوت يعمل سنستأنف تشغيله باستخدام audio.play()‎.

let playingOnHide = false;

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    playingOnHide = !audio.paused;
    audio.pause();
  } else {
    // استئنف تشغيل الصوت إذا كان تشغيله بدأ بالفعل أثناء إخفاء الصفحة
    if (playingOnHide) {
      audio.play();
    }
  }
});

إليك الكود كاملًا، مع إضافة كود برمجي صغير يتحقق من حالة الصوت عندما تكون الصفحة مخفية:

<audio
  controls
  src="https://mdn.github.io/webaudio-examples/audio-basics/outfoxing.mp3"></audio>

const audio = document.querySelector("audio");

let playingOnHide = false;

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    playingOnHide = !audio.paused;
    audio.pause();
  } else {
    if (playingOnHide) {
      audio.play();
    }
  }
});

الخلاصة

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

ترجمة وبتصرف للمقال Using the Page Visibility API لكاتبه Brian Smith

اقرأ أيضًا

• الواجهات البرمجية للتعامل مع الصوت والفيديو في جافا سكريبت
• إضافة محتوى سمعي ومرئي في صفحة HTML
• سهولة وصول جميع الزوار لمواقع وتطبيقات الويب
• التركيز على عناصر صفحة الويب

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

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

تطبيق عملي: تخزين فيديو في قاعدة البيانات IndexedDB

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

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

const videos = [
  { name: "crystal" },
  { name: "elf" },
  { name: "frog" },
  { name: "monster" },
  { name: "pig" },
  { name: "rabbit" },
];

ننفذ الدالة ()init عند نجاح الاتصال بقاعدة البيانات. ووظيفة هذه الدالة التنقل بين أسماء مقاطع الفيديو السابقة ومحاولة إيجاد سجل يوافق اسم المقطع ضمن قاعدة بيانات الفيديو. فإن وجد مقطع الفيديو ستكون نتيجة request.result هي true وإلا ستكون undefined. ستمرر الدالة بعد ذلك اسم المقطع إن وجد إلى الدالة ()displayVideo لتضعه ضمن واجهة المستخدم وإلا تستدعي الدالة ()fetchVideoFromNetwork ﻹحضار المقطع من اﻹنترنت.

function init() {
  //تنقل بين أسماء مقاطع الفيديو واحدًا تلو اﻵخر
  for (const video of videos) {
    // افتح الاتصال مع قاعدة البيانات واحصل على مخزن الكائنات وكل فيديو فيه
    const objectStore = db.transaction("videos_os").objectStore("videos_os");
    const request = objectStore.get(video.name);
    request.addEventListener("success", () => {
      // إن وجد المقطع ضمن قاعدة البيانات
      if (request.result) {
       //displayVideo احضر المقطع واعرضه على الواجهة باستخدام الدالة
        console.log("taking videos from IDB");
        displayVideo(
          request.result.mp4,
          request.result.webm,
          request.result.name,
        );
      } else {
        // احضر مقطع الفيديو من الشبكة
        fetchVideoFromNetwork(video);
      }
    });
  }
}

تحضر الدالة ()fetchVideoFromNetwork مقاطع فيديو من النوعين MP4 و WebM باستخدام الطلب ()fetch، بعدها سنستخدم التابع ()response.blob لاستخلاص جسم كل طلب على شكل كائن بيانات ثنائية blob والذي يعطي كائنًا يمثل مقطع الفيديو، ويمكن تخزينه وعرضه لاحقًا. أما المشكلة التي تواجهنا هنا، أن هذين الطلبين غير متزامنين، لكن ما نريده فعلًا هو عرض أو تخزين المقطع فقط عندما يكتمل الوعد promise. لهذا نستخدم التابع ()promise.all الذي يقبل معاملًا واحدًا وهو مصفوفة مراجع إلى كل الوعود التي تريد التحقق من إكتمالها، ويعيد وعدًا يتحقق عندما تتحقق كل الوعود في المصفوفة.

نستدعي ضمن التابع ()then المتعلق بهذا الوعد الدالة ()displayVideo كما فعلنا سابقًا لعرض مقطع الفيديو، ثم نستدعي أيضًا الدالة ()storeVideo لتخزين المقطع في قاعدة البيانات:

// fetch() إحضار مقاطع الفيديو باستخدام الدالة
// blob تحويل أجسام الاستجابات إلى كائن
const mp4Blob = fetch(`videos/${video.name}.mp4`).then((response) =>
  response.blob(),
);
const webmBlob = fetch(`videos/${video.name}.webm`).then((response) =>
  response.blob(),
);

// نفّذ الشيفرة التالية إن تحقق كلا الوعدان
Promise.all([mp4Blob, webmBlob]).then((values) => {
  //displayVideo() اعرض الفيديو الذي أحضرته من الإنترنت باستخدام الدالة
  displayVideo(values[0], values[1], video.name);
  //storeVideo() خزن مقطع الفيديو في قاعدة البيانات باستخدام
  storeVideo(values[0], values[1], video.name);
});

3. يشبه عمل الدالة ()storeVideo ما رأيناه في المقال السابق عندما أضفنا بيانات إلى قاعدة البيانات، إذ نفتح قناة العمليات readwrite مع القاعدة ونتخذ مرجعًا إلى مخزن الكائن video_os ثم ننشئ كائنًا يمثل السجل الذي نريد إضافته إلى القاعدة ونستخدم بعدها التابع ()IDBObjectStore.add:

// storeVideo() تعريف الدالة
function storeVideo(mp4, webm, name) {
  // فتح قناة اتصال قراءة وكتابة مع قاعدة البيانات
     const objectStore = db
    .transaction(["videos_os"], "readwrite")
    .objectStore("videos_os");

  //Add() إضافة السجل إلى قاعدة البيانات باستخدام
  const request = objectStore.add({ mp4, webm, name });

  request.addEventListener("success", () =>
    console.log("Record addition attempt finished"),
  );
  request.addEventListener("error", () => console.error(request.error));
}

4. تُنشئ الدالة ()displayVideo عناصر شجرة DOM اللازمة لإدراج مقطع الفيديو في واجهة المستخدم ومن ثم تلحق هذه العناصر بالصفحة. أما النقاط اﻷكثر أهمية، فهي التي نستعرضها تاليًا.
   لعرض كائن البيانات الثنائية الذي يضم الفيديو داخل العنصر <video>، لا بد من إنشاء كائن عنوان URL أي عناوين داخلية تشير إلى كائن البيانات الثنائية المخزن في الذاكرة باستخدام التابع ()URL.creatObjectURL. بعدها يمكننا أن نجعل تلك العناوين قيمًا للسمات src العائدة للعناصر <source> ويعمل عندها كل شيء كما هو متوقع:

//displayVideo() تعريف الدالة  
function displayVideo(mp4Blob, webmBlob, title) {
  //blob يشير إلى الكائن URL إنشاء كائن
  const mp4URL = URL.createObjectURL(mp4Blob);
  const webmURL = URL.createObjectURL(webmBlob);

  //لإدراج الفيديو في الصفحة DOM إنشاء عنصر في شجرة
  const article = document.createElement("article");
  const h2 = document.createElement("h2");
  h2.textContent = title;
  const video = document.createElement("video");
  video.controls = true;
  const source1 = document.createElement("source");
  source1.src = mp4URL;
  source1.type = "video/mp4";
  const source2 = document.createElement("source");
  source2.src = webmURL;
  source2.type = "video/webm";

  //في الشجرة DOM إدراج عنصر
  section.appendChild(article);
  article.appendChild(h2);
  article.appendChild(video);
  video.appendChild(source1);
  video.appendChild(source2);
}

تخزين اﻷصول للعمل دون اتصال بالشبكة

عرضنا في المثال السابق طريقة إنشاء تطبيق يُخزّن أصولًا assets في قاعدة البيانات IndexedDB حتى لا نضطر إلى تحميلها مجددًا. ويحسن هذا اﻷمر تجربة المستخدم بشكل ملحوظ. لكن لا تزال بعض الأصول المهمة مفقودة كي يعمل التطبيق وهي ملف HTML الرئيسي وملفات CSS وجافا سكريبت، ولا بد من تنزيلها في كل مرة ندخل فيها إلى الموقع، وبالتالي لن يعمل التطبيق بدون الاتصال باﻹنترنت. وهنا يأتي دور عمّال الخدمة service workers والواجهة البرمجية cache API

يُعرف عامل الخدمة service worker في جافا سكريبت على أنه ملف يُسجّل تحت مصدر محدد مثل موقع ويب أو جزء من موقع ويب في نطاق معين عندما يلج إليه متصفح ويب. ويتمكن هذا الملف لكونه مسجلًا على نطاق ما أن يتحكم بالصفحات التي تنتمي إلى نفس اﻷصل أو النطاق. ويتوضع هذا الملف في مكان وسط بين الصفحة التي اكتمل تحميلها وشبكة اﻹنترنت ويعترض طلبات الشبكة التي تحوّل من وإلى ذلك المصدر أو اﻷصل.

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

أما الواجهة البرمجية Cache API فهي آلية أخرى لتخزين البيانات في طرف العميل، مع اختلاف بسيط هو أنها مخصصة لتخزين الاستجابات على طلبات HTTP، لهذا ستعمل جيدًا مع عمال الخدمة service workers.

مثال عن عمال الخدمة

لنطرح مثالًا يوضح قليلًا الفكرة السابقة. إذ أنشانا نسخة أخرى من مثال تخزين ملفات الفيديو الذي فصلناه في الفقرة السابقة. وتعمل هذه النسخة بنفس اﻷسلوب ما عدا أنها تخزّن أيضًا ملفات HTML و CSS وجافا سكريبت ضمن Cache API من خلال عامل خدمة وبالتالي سيعمل المثال دون اتصال باﻹنترنت.

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

تسجيل عامل الخدمة

أول ما تلاحظه هو وجود شيفرة إضافية في ملف جافا سكريبت. تختبر هذه الشيفرة بداية وجود العضو serviceWorker ضمن الكائن Navigator. فإن كان موجودًا (أعادت الشيفرة القيمة true)، نعلم حينها وجود دعم أساسي لعمال الخدمة في المتصفح. نستخدم التابع ()ServiceWorkerContainer.register لتسجيل عامل الخدمة الموجود في الملف sw.js على المصدر الذي يتواجد فيه، وبالتالي سيكون قادرًا على التحكم بالصفحات الموجودة في نفس المجلد أو المجلدات الفرعية. وعندما يتحقق الوعد سيكون عامل الخدمة قد سُجِّل:

// تسجيل عامل الخدمة لتتمكن من تشغيل المثال دون اتصال بالشبكة
if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register(
      "/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js",
    )
    .then(() => console.log("Service Worker Registered"));
}

ملاحظة: يُعطى مسار الملف sw.js بالنسبة إلى أصل الموقع، وليس بالنسبة إلى ملف جافا سكريبت الذي يضم الشيفرة. فالعامل موجود على العنوان:

https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js

بينما عنوان اﻷصل هو

https://mdn.github.io

لذا لابد أن يكون العنوان المعطى عند التسجيل هو:

/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js

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

تثبيت عامل الخدمة

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

وإذا ألقينا نظرة على الملف sw.js سنجد أن مترصد حدث التثبيت مسجّل وفق القيمة self أي على العامل نفسه. والتعليمة self طريقة لتشير إلى الطبيعة العامة global scope لعامل الخدمة من داخل ملف عامل الخدمة.

نستخدم ضمن دالة المعالج install التابع ()ExtendableEvent.waitUntil العائد إلى كائن الحدث لكي يبلغ المتصفح بعدم تثبيت العامل قبل أن يُنجز الوعد بنجاح.

وهنا نجد طريقة عمل الواجهة Cache API الخاصة بعملية التخزين، إذ نستخدم التابع ()CacheStorage.open لفتح كائن تخزين مؤقت جديد cache object لنخزّن ضمنه الاستجابات. وعندما يتحقق الوعد، سيعيد كائن cache يمثل المخزن المؤقت للفيديو video-store. نستخدم بعد ذلك التابع ()Cache.addAll ﻹحضار سلسلة اﻷصول واستجاباتها إلى المخزن المؤقت:

self.addEventListener("install", (e) => {
  e.waitUntil(
    caches
      .open("video-store")
      .then((cache) =>
        cache.addAll([
          "/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/",
          "/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.html",
          "/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js",
          "/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/style.css",
        ]),
      ),
  );
});

وهكذا تنتهي عملية التثبيت.

الاستجابة إلى طلبات أخرى

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

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

نسجّل بداية ضمن دالة المعالج عنوان URL للأصل المطلوب، ثم نهيئ استجابة مخصصة لهذا الطلب باستخدام التابع ()FetchEvent.respondWith. وضمن كتلة التابع السابق نستخدم التابع ()CacheStorage.match للتحقق من وجود طلب موافق لهذا اﻷصل ضمن المخزن المؤقت. ويتحقق الوعد الموافق لهذا الطلب في حال وجود عنوان في المخزن يطابق عنوان URL للطلب وإلا سيعيد الوعد القيمة undefined. نعيد بعد ذلك الطلب على شكل استجابة مخصصة في حال كان العنوان موجودًا وإلا نستخدم الواجهة ()fetch ﻹحضاره من الشبكة كونه غير موجود في المخزن المؤقت:

self.addEventListener("fetch", (e) => {
  console.log(e.request.url);
  e.respondWith(
    caches.match(e.request).then((response) => response || fetch(e.request)),
  );
});

وهكذا نستخدم عامل الخدمة، علمًا أن استخداماته أوسع من ذلك ولا يسعنا تغطيها في هذا المقال.

اختبار المثال دون اتصال بالشبكة

لاختبار عمل تطبيقنا، لا بد من تحميله عدة مرات للتأكد من تثبيت عامل الخدمة، وبعدها يمكنك:

• قطع الاتصال باﻹنترنت.
• اختيار العمل دون اتصال (اختر ملف ثم العمل دون اتصال إن كنت تستخدم فايرفوكس).
• الانتقال إلى أدوات مطوري ويب واختر تطبيقات ثم عمال الخدمة Service workers، ولا بد من تفعيل الخيار offline إن كنت تستخدم متصفح كروم.

لو حاولت اﻵن تحديث الصفحة سترى أنها ستعيد التحميل دون أية مشكلات لأن كل أصول الصفحة قد خُزّنت في المخزن المؤقت cache، كما أن كل مقاطع الفيديو مخزنة ضمن قاعدة البيانات IndexedDB.

الخلاصة

تعرفنا في هذا المقال على طريقة لتشغيل صفحة ويب دون اتصال باﻹنترنت عن طريقة استخدام عامل خدمة service worker مع الواجهة البرمجية Cache التي تخزّن الأصول ضمن مخازن مؤقتة في حاسوبك.

ترجمة -وبتصرف- للجزء الثالث من مقال: Client-side storage

اقرأ أيضًا

• المقال السابق: تخزين البيانات في طرف العميل باستخدام قاعدة البيانات المفهرسة IndexedDB
• تخزين البيانات في طرف العميل: مخازن ويب Web Storage
• تخزين البيانات محليا في متصفح الويب عبر جافاسكربت
• التخزين المحلي (Local Storage) في HTML5
• تعرّف على IndexedDB

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

وتتيح لك هذه الواجهة البرمجية إنشاء قاعدة بيانات ومن ثم إنشاء مخازن كائنات object stores ضمن القاعدة. وتُعد مخازن الكائنات بمثابة بنى شبيهة بالجداول الموجودة في قواعد البيانات العلاقية relational databases، ويمكن لأي مخزن أن يضم مخازن كائنات أخرى.

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

تطبيق عملي: تخزين ملاحظات

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

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

نقطة الانطلاق

1. انسخ بداية الملفات index.html و style.css و index-start.js إلى مجلد جديد تُنشئه على حاسوبك.
2. الق نظرة في البداية على تلك الملفات، وسترى أن ملف HTML يُعرّف موقع ويب له ترويسة وتذييل ومنطقة محتوى رئيسي تُعرض فيه الملاحظات، إضافة إلى نموذج ﻹدخالها في قاعدة البيانات. يقدّم ملف CSS مجموعة من قواعد التنسيق لتوضيح ما يجري، بينما يضم ملف جافا سكريبت تصريحًا عن خمسة ثوابت تضم مراجع إلى العنصر <ul> وستُعرض الملاحظات على شكل عنوان ونص ضمن عنصري إدخال <input> كما ننشئ مرجعًا إلى النموذج <form> بحد ذاته، ومرجعًا إلى زر <button>.
3. غير اسم ملف جافا سكريبت إلى index.js.

تهيئة قاعدة البيانات

لنلق نظرة اﻵن على ما يتوجب علبنا فعله بداية لإعداد قاعدة البيانات:

1. أضف السطر التالي تحت التصريحات عن الثوابت:

// إنشاء نسخة عن كائن قاعدة البيانات
let db;

نصرّح في هذا السطر عن متغير يُدعى db لنستخدمه لاحقًا في تخزين الكائن الذي يمثل قاعدة البيانات. وطالما أننا نستخدمه في عدة أماكن لذلك صرحنا عنه كمتغير عام global لتسهيل اﻷمر.

2. أضف تاليًا الشيفرة التالية:

// فتح قاعدة البيانات مما يؤدي إلى إنشائها إن لم تكن موجودة
const openRequest = window.indexedDB.open("notes_db", 1);

يُنشئ هذا السطر طلبًا لفتح النسخة 1 من قاعدة بيانات تُدعى notes_db، فإن لم تكن موجودة سوف ينشئها السطر الذي يليه. سترى هذا الشكل من الطلبات كثيرًا عند استخدام IndexedDB. وطالما أن العمليات على قواعد البيانات تحتاج وقتًا، فلا ينبغي ايقاف المتصفح ريثما ننتظر نتيجة الطلب، لهذا عمليات قواعد البيانات هي عمليات غير متزامنة لن تُنفّذ مباشرة، بل في فترة ما مستقبلًا وستُبلَّغ بتنفيذها. ولمعالجة اﻷمر في IndexedDB، ننشئ كائن طلب request object ندعوه مثلًا openRequest، ويمكنك حينها استخدام معالج حدث لتنفيذ شيفرة مخصصة عند اكتمال هذا الطلب أو فشله، وهذا ما ستراه بعد قليل.

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

3. أضف اﻵن معالج الحدث التالي تحت الشيفرة السابقة:

// معالج خطأ يحدد حالة فشل الاتصال بقاعدة البيانات
openRequest.addEventListener("error", () =>
 console.error("Database failed to open"),
);

// معالج نجاح يحدد نجاح فتح قاعدة البيانات
openRequest.addEventListener("success", () => {
 console.log("Database opened successfully");

 //db خزن قاعدة البيانات المفتوحة ضمن المتغير
 db = openRequest.result;

 //التي تعرض الملاحظات الموجودة في قاعدة البيانات displayData() نفّذ الدالة
 displayData();
});

يُنفَّذ معالج الحدث error عندما يُبلغك النظام أن طلبك قد أخفق، مما يتيح لك التعامل مع المشكلة. وما فعلناه في مثالنا هو عرض رسالة خطأ في طرفية جافا سكريبت. ويُنفَّذ معالج الحدث success عندما ينجح الطلب، بمعنى أن الاتصال إلى قاعدة البيانات تحقق، وأصبح الكائن الذي يمثّل قاعدة البيانات متاحًا ضمن الخاصية openRequest.result وبالتالي إمكانية التعامل من خلاله مع قاعدة البيانات. نخزّن النتيجة ضمن المتغيّر db وننفذ دالة تُدعى ()displayData وظيفتها عرض البيانات الموجودة في قاعدة البيانات داخل العنصر <ul> بمجرد انتهاء تحميل الصفحة، وسترى تعريف هذه الدالة لاحقًا.

4. في نهاية هذا القسم سنضيف معالج الحدث upgradeneeded الذي يُنفَّذ إن لم تكن قاعدة البيانات قد هُيئت مسبقًا أو عندما تكون قاعدة البيانات مفتوحة. لهذا أضف اﻷسطر التالية في نهاية شيفرتك منتبهًا إلى ضرورة استخدام رقم نسخة أعلى من رقم النسخة المخزنة في قاعدة البيانات عندما تريد تحديث القاعدة:

// هيئ جداول قاعدة البيانات إن لم تكن مهيأة مسبقًا
openRequest.addEventListener("upgradeneeded", (e) => {
 // احصل على مرجع إلى قاعدة البيانات المفتوحة
 db = e.target.result;

 // أنشئ مخزن كائنات في قاعدة البيانات لتخزين الملاحظة مع مفتاح يزداد تلقائيًا ومخزن الكائنات مشابه للجدول في قاعدة البيانات العلاقية

 const objectStore = db.createObjectStore("notes_os", {
    keyPath: "id",
    autoIncrement: true,
 });

 // حدد ما ستضمه عناصر البيانات ومخازن الكائنات
 objectStore.createIndex("title", "title", { unique: false });
 objectStore.createIndex("body", "body", { unique: false });

 console.log("Database setup complete");
});

نعرّف هنا التخطيط الذي نعتمده لقاعدة البيانات، أي نحدد مجموعة الأعمدة أو الحقول التي تضمها. وما فعلناه أننا حددنا مرجعًا في البداية إلى قاعدة البيانات الموجودة عبر الخاصية result لمعالج الحدث e.target.result الذي يمثّل كائن الطلب request. وهذا الأمر مكافئ للسطر:

db = openRequest.result;

داخل معالج الحدث succes، لكن لا بد هنا من تنفيذه بشكل مستقل لأن معالج الحدث upgradeneeded سيُنفذ إن احتجنا إليه قبل المعالج success، ولن يكون المتغير db متاحًا ما لم نفعل ذلك.

نستخدم بعد ذلك التابع IDBDatabase.createObjectStore ﻹنشاء مخزن كائن جديد ضمن قاعدة البيانات المفتوحة يُدعى notes_os ويكافئ هذا المخزن جدولًا مفردًا في قواعد البيانات النمطية. كما خصصنا أيضًا حقلًا مفتاحيًا autoIncrement في هذا الكائن وسميناه id تزداد قيمة هذا الحقل كلما أضفنا ملاحظة جديدة ولا حاجة أن يفعل المطوّر هذا صراحة بل هي عملية آلية. يعمل هذا الحقل كمعرّف فريد لكل سجل وذلك عندما نريد تعديل أو حذف هذا السجل.

وأنشأنا أيضًا حقلين مفهرسين آخرين باستخدام التابع ()IDBObjectStore.createIndex وهما title و body كي يضما عنوان الملاحظة ونصها. وسيمثَّل كل منهما على شكل كائن له التخطيط التالي، وذلك عندما نبدأ بإضافة الملاحظات إلى قاعدة البيانات وفق التخطيط الذي وضعناه:

{
 "title": "Buy milk",
 "body": "Need both cows milk and soy.",
 "id": 8
}

إضافة بيانات إلى قاعدة البيانات

لنرى اﻵن كيف يمكننا إضافة سجلات إلى قاعدة البيانات باستخدام النموذج الذي صممناه في صفحتنا. لهذا أضف الأسطر التالية تحت معالج الحدث السابق. تضبط هذه اﻷسطر معالج الحدث submit الذي يستدعي الدالة ()addData عند تسليم النموذج (النقر على زر اﻹرسال):

//addData() إنشاء معالج حدث لعملية تسليم النموذج يعمل عند تنفيذ الدالة
form.addEventListener("submit", addData);

لنعرّف اﻵن الدالة ()addData كالتالي:

// التصريح عن الدالة
function addData(e) {

 //نمنع السلوك الافتراضي، فلا نريد تسليم النموذج بالطريقة النمطية
 e.preventDefault();

 // الحصول على القيم التي نريد تخزينها ووضعها ضمن عنصر تخزين
 const newItem = { title: titleInput.value, body: bodyInput.value };

 // فتح قناة كتابة وقراءة إلى قاعدة البيانات
 const transaction = db.transaction(["notes_os"], "readwrite");

 // استدعاء مخزن كائنات موجود بالفعل في قاعدة البيانات
 const objectStore = transaction.objectStore("notes_os");

 //إلى مخزن الكائنات newItem إنشاء طلب ﻹضافة الكائن
 const addRequest = objectStore.add(newItem);

 addRequest.addEventListener("success", () => {
    // مسح النموذج استعدادًا ﻹضافة سجل آخر
    titleInput.value = "";
    bodyInput.value = "";
 });

 // اﻹبلاغ عن نجاح العملية على قاعدة البيانات عند اكتمالها
 transaction.addEventListener("complete", () => {
    console.log("Transaction completed: database modification finished.");

 //مجددًا displayData تحديث عرض البيانات بعد إضافة السجل الجديد باستدعاء الدالة
    displayData();
 });

 transaction.addEventListener("error", () =>
    console.log("Transaction not opened due to error"),
 );
}

لنحاول تفسير هذه الشيفرة كونها معقدة نوعًا ما:

• تنفيذ الدالة ()Event.preventDefault على كائن الحدث لإيقاف إرسال بيانات النموذج بالطريقة النمطية (لأنها تدفع إلى إعادة تحديث الصفحة وإفساد التأثير المطلوب).
• إنشاء كائن يمثل السجل الذي نريد إدخاله إلى قاعدة البيانات ونشره بالقيم التي نحصل عليها من عناصر اﻹدخال. ولاحظ أنه لا حاجة لتزويد السجل بقيمة للمعرّف id كما ذكرنا سابقًا بل سيضاف تلقائيًا.
• فتح عملية القراءة والكتابة readwrite إلى مخزن الكائنات notes_os باستخدام التابع ()IDBDatabase.transaction. يساعد كائن عمليات قاعدة البيانات في الوصول إلى مخزن الكائن لتنفيذ العملية المطلوبة عليه مثل إضافة سجل جديد.
• الوصول إلى مخزن الكائن باستخدام التابع ()IDBTransaction.objectStore وتخزين النتيجة في المتغير objectStore.
• إضافة السجل الجديد إلى قاعدة البيانات باستخدام التابع ()IDBObjectStore.add الذي يُنشئ كائن طلب بنفس اﻹسلوب الذي رأيناه سابقًا.
• إضافة مجموعة من معالجات اﻷحداث إلى الكائن request والكائن transaction لتنفيذ الشيفرة المطلوبة عند النقاط المطلوبة خلال دورة حياة التطبيق. وبمجرد نجاح الطلب، نمسح حقول اﻹدخال في النموذج لتحضيرها لعملية إدخال أخرى. وعند اكتمال العملية، ننفذ الدالة ()displayData مجددًا لتحديث ما يُعرض من ملاحظات في الصفحة.

عرض البيانات

أشرنا إلى الدالة ()displayData مرتين في تطبيقنا، لهذا من اﻷفضل اﻵن تعريف هذه الدالة. أضف اﻷسطر البرمجية التالية بعد تعريف الدالة السابقة:

// displayData() تعريف الدالة
function displayData() {
 // نمحي محتوى عناصر القائمة في كل مرة نحدّث فيها ما يُعرض
 // وإلا ستتكرر العناصر في كل مرة نجري فيها تحديثًا
 while (list.firstChild) {
    list.removeChild(list.firstChild);
 }

 // افتح مخزن الكائنات واحصل على مؤشر يتنقل بين عناصره المختلفة
 const objectStore = db.transaction("notes_os").objectStore("notes_os");
 objectStore.openCursor().addEventListener("success", (e) => {
    // احصل على مرجع إلى هذا المؤشر
    const cursor = e.target.result;

    // استمر في تنفيذ الشيفرة طالما هناك عناصر يمكن التنقل بينها
    if (cursor) {
      //p وفقرة نصية h3 وعنوان itemlist أنشئ عنصر قائمة
      //كي تضع ضمنها كل عنصر بيانات سيُعرض     
     // ألحق الفقرة والعنوان بعنصر القائمة ثم ألحقه بالقائمة

     const listItem = document.createElement("li");
     const h3 = document.createElement("h3");
     const para = document.createElement("p");

     listItem.appendChild(h3);
     listItem.appendChild(para);
     list.appendChild(listItem);

     // ضع البيانات الموجودة في المؤشر ضمن الفقرة النصية والعنوان
     h3.textContent = cursor.value.title;
     para.textContent = cursor.value.body;

     // خزن معرّف عنصر البيانات داخل سمة ضمن عنصر القائمة
     //كي نعرف إلى أي عنصر تنتمي. وسيفيدنا ذلك عند حذف العناصر

     listItem.setAttribute("data-note-id", cursor.value.id);

     // أنشئ زرًا وضعه ضمن كل عنصر قائمة
     const deleteBtn = document.createElement("button");
     listItem.appendChild(deleteBtn);
     deleteBtn.textContent = "Delete";

     // اضبط معالج حدث يحذف عنصر القائمة عند النقر على هذا الزر

     deleteBtn.addEventListener("click", deleteItem);

     // انقل المؤشر إلى العنصر التالي
     cursor.continue();
    } else {
     //إن لم تكن هنالك أية عناصر قائمة `No notes stored` اعرض رسالة
     if (!list.firstChild) {
      const listItem = document.createElement("li");
      listItem.textContent = "No notes stored.";
      list.appendChild(listItem);
     }
     // إن لم تكن هنالك أية عناصر اخرى للتنقل بينها، ابلغ عن ذلك برسالة
     console.log("Notes all displayed");
    }
 });
}

لنشرح الآن الشيفرة السابقة بشيء من التفصيل:

• نمحي بداية محتوى العنصر <ul> قبل أن نملأه مجددًا بالمحتوى المُحدَّث، وإلا سينتهي بك اﻷمر إلى قائمة مليئة بالعناصر المكررة التي تُضاف عند كل تحديث.

• نتخذ مرجعًا إلى مخزن الكائن notes_os باستخدام التابعين ()IDBDatabase.transaction و ()IDBTransaction.objectStore كما فعلنا مع الدالة ()addData، ماعدا أننا نربطهما معًا في سطر واحد هنا.

• نستخدم تاليًا التابع ()IDBObjectStore.openCursor لطلب للحصول على مؤشر Cursor، وهي بنية تُستخدم للتنقل بين السجلات في مخزن الكائنات. كما نربط معالج حدث النجاح success في نهاية السطر لنجعل الشيفرة أكثر ترابطًا. وعندما يُعاد المؤشر بنجاح يُنفَّذ المعالج.

• نتخذ مرجعًا إلى المؤشر ذاته (على شكل كائن IDBCursor) باستخدام السطر const cursor= e.target.result

• نتحقق تاليًا من وجود سجل من مخزن الكائنات ضمن المؤشر ({}if (cursor))، فإن كان اﻷمر كذلك، ننشئ فرعًا في شجرة DOM وننشر ضمنه بيانات السجل ومن ثم نعرضها على الصفحة ضمن العنصر <ul>. كما نضمّن الفرع زرًا يحذف عنصر القائمة الذي يضم بيانات السجل عند النقر على هذا الزر، وذلك بتنفيذ الدالة ()deleteItem التي نتعرف عليها في الفقرة القادمة.

• في نهاية الكتلة if نستخدم التابع ()IDBCursor.continue لنقل المؤشر إلى السجل التالي في المخزن وتنفيذ محتوى الكتلة if مجددًا إن كان هنالك سجل آخر سيعرض في الصفحة، ومن ثم يتابع المؤشر تفقد وجود سجلات أخرى.

• عند انتهاء السجلات، يعيد المؤشر القيمة undefined وبالتالي ستعمل الكتلة else هذه المرة. وتتحقق هذه الكتلة من إضافة أية ملاحظات إلى القائمة <ul>، فإن لم تُضاف أية ملاحظات، تعرض رسالة مفادها عدم وجود أية ملاحظات محفوظة.

حذف ملاحظة

أشرنا سابقا إلى أن النقر على زر الحذف الموجود إلى جوار الملاحظة المعروضة يسبب حذفها. وننفذ ذلك باستخدام الدالة ()deleteitem:

// deleteItem() تعريف الدالة
function deleteItem(e) {
 // الحصول على الملاحظة التي ينبغي حذفها على شكل عدد قبل
 //IDB: IDB key محاولة استخدامها عن طريق الزوج
 // والانتباه إلى أن القيم حساسة لحالة الأحرف
 const noteId = Number(e.target.parentNode.getAttribute("data-note-id"));

 // فتح قناة العمليات مع قاعدة البيانات وحذف الملاحظة التي حصلنا
 //على رقمها سابقًا عن طريق السمة التي خزنا فيها معرف الملاحظة

 const transaction = db.transaction(["notes_os"], "readwrite");
 const objectStore = transaction.objectStore("notes_os");
 const deleteRequest = objectStore.delete(noteId);

 // اﻹبلاغ عن حذف عنصر القائمة
 transaction.addEventListener("complete", () => {
    // حذف العنصر اﻷب للزر وهو في حالتنا عنصر القائمة ولن يُعرض بعدها

    e.target.parentNode.parentNode.removeChild(e.target.parentNode);
    console.log(`Note ${noteId} deleted.`);

    //إن لم تكن هنالك عناصر قائمة `No Notes Stored` عرض رسالة
    if (!list.firstChild) {
     const listItem = document.createElement("li");
     listItem.textContent = "No notes stored.";
     list.appendChild(listItem);
    }
 });
}

• نحصل على معّرف السجل الذي نحذفه باستخدام التابع Number(e.target.parentNode.getAttribute('data-note-id'))، وتذكر أن معرّف السجل قد خُزِّن سابقًا ضمن السمة data-note-id لعنصر القائمة <li> عندما عُرض أول مرة. لكن لا بد من تمرير الدالة التي تعطينا قيمة السمة إلى التابع العام ()Number لأنها من النوع النصي وما نريده هو المكافئ العددي للقيمة وإلا لن تميزها قاعدة البيانات التي تتوقع عددًا.
• نتخذ تاليًا مرجعًا إلى مخزن الكائن مستخدمين اﻷسلوب الذي خبرناه سابقًا ومن ثم التابع ()IDBObjectStore.delete لحذف السجل من قاعدة البيانات بعد أن نمرر له معرف الملاحظة.
• عند اكتمال العملية على قاعدة البيانات، نحذف العنصر <li> من شجرة DOM ونتحقق مجددًا من خلو القائمة <ul> من العناصر.

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

الخلاصة

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

ترجمة -وبتصرف- للجزء الثاني من مقال: Client-side storage

اقرأ أيضًا

• المقال السابق: تخزين البيانات في طرف العميل: مخازن ويب Web Storage
• التحقق من صحة بيانات استمارة ويب في طرف العميل
• نظرة على تفاعلات الخادم مع العميل في موقع ويب ديناميكي
• الواجهات البرمجية للتعامل مع الصوت والفيديو في جافا سكريبت

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

ننصحك قبل المتابعة في قراءة هذه المقالات أن:

• تكون ملمًا بلغتي HTML و CSS.
• تكون ملمًا بلغة جافا سكريبت.
• تطلع على سلاسل المقالات السابقة التي ناقشت أساسيات جافا سكريبت والكائنات في جافا سكريبت.
• تطلع على أساسيات الواجهات البرمجية في طرف العميل.

ماذا يعني تخزين البيانات في طرف العميل؟

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

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

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

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

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

استخدام الطريقة التقليدية: ملفات تعريف الارتباط Cookies

تُعد تقنية تخزين البيانات في طرف العميل تقنية قديمة، فقد استخدمت المواقع ملفات تعريف الارتباط cookies منذ البدايات الأولى للويب، وذلك لتخزين البيانات وإعطاء طابع شخصي للموقع. وقد كانت أولى أشكال تخزين البيانات في طرف العميل.

أما حاليًا، فقد ظهرت تقنيات أفضل وأحدث لتخزين البيانات في طرف العميل، لذلك لن نتحدث عن استخدام ملفات تعريف اﻹرتباط في مقالنا الحالي. ولا يعني ذلك بالطبع أن ملفات تعريف الارتباط عديمة الفائدة في عالم الويب المعاصر، إذ لا تزال شائعة الاستخدام في تخزين البيانات المتعلقة بمعلومات المستخدم الشخصية وحالته مثل معرفات الجلسة session IDs ومفاتيح الوصول المشفرة access token.

التقنية الجديدة: مخازن ويب وقاعدة البيانات IndexedDB

من الميزات السهلة للتقنيتين اللتين يشير إليهما العنوان نجد:

• اﻵلية التي تقدمها واجهة مخازن ويب البرمجية Web Storage API في تخزين واسترجاع عناصر البيانات صغيرة الحجم والمكونة من اسم وقيمة موافقة. ولهذا اﻷمر أهميته عندما تحتاج إلى تخزين بيانات بسيطة مثل اسم المستخدم وتاريخ تسجيل الدخول إلى موقع الويب واللون الذي يفضله للخلفية وهكذا.
• قاعدة البيانات المتكاملة التي تقدمها الواجهة البرمجية IndexedDB API للمتصفح لتخزين البيانات الأكثر تعقيدًا. يمكن استخدام هذه القاعدة مثلًا في تخزين بيانات مجموعة كاملة من سجلات المستخدمين وحتى أنواع معقدة من البيانات مثل ملفات الصوت والفيديو.

الواجهة البرمجية Cache

صُممت هذه الواجهة لتحزين الاستجابات الناتجة عن طلبات HTTP محددة، وهي مفيدة خصوصًا في أمور مثل تخزين أصول موقع ويب محليًا ليتمكن الموقع من استخدامها باستمرار دون اتصال مع شبكة اﻹنترنت. تُستخدم واجهة التخزين المؤقت cache عادةً بمرافقة واجهة عمال الخدمة Service Worker API على الرغم من عدم الحاجة إلى ذلك فعليًا.

ويُعد استخدام واجهة التخزين المؤقت مع واجهة عمال الخدمة موضوعًا متقدمًا لن نغطيه في سلسلة مقالاتنا بالتفصيل، مع ذلك، سنعرض في آخر مقال من هذه السلسلة مثالًا عنها.

الواجهة Web Storage وتخزين بيانات بسيطة

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

الصياغة القواعدية الأساسية

لنلق نظرة على ذلك:

1. انتقل بداية إلى القالب الموجود على جيت-هاب وافتحه في نافذة جديدة.
2. افتح طرفية جافا سكريبت في المتصفح.
3. توضع مخازن ويب ضمن بُنى تشبه الكائنات في المتصفح هي sessionStorge و localStorage. تبقى البيانات المخزنة في البنية اﻷولى طالما أن المتصفح يعمل (تُحذف هذه البيانات عند إغلاق المتصفح)، بينما تبقى البيانات في البنية الثانية مقيمة في الذاكرة حتى بعد إغلاق المتصفح. سنستخدم في مقالنا البنية الثانية لأنها أكثر فائدة عمومًا. إذ يسمح التابع ()Strorage.setItem بتخزين البيانات في البنية Storge، وله معاملان: اﻷول هو اسم العنصر، والثاني هو القيمة. جرّب كتابة ما يلي في طرفية جافا سكريبت:

localStorage.setItem("name", "Chris");

4. يأخذ التابع ()Storage.getItem معاملًا واحدًا يمثل عنصر البيانات الذي تريد استرجاع قيمته. جرّب اﻵن الشيفرة التالية:

let myName = localStorage.getItem("name");
myName;

سترى عند كتابتك الشيفرة السابقة كيف سيضم المتغير myName قيمة عنصر البيانات name.

5. يأخذ التابع ()removeItem معاملًا واحدًا هو اسم عنصر البيانات التي تريد إزالته ومن ثم يزيله من مخزن ويب. جرّب الشيفرة التالية في طرفية جافا سكريبت:

localStorage.removeItem("name");
myName = localStorage.getItem("name");
myName;

من المفترض أن يعيد تنفيذ السطر الثالث القيمة null للعنصر name لأنه لم يعد موجودًا في مخزن ويب.

البيانات المقيمة في الذاكرة

من الميزات المهمة لمخازن ويب أن البيانات تبقى موجودة في الفترة التي تُحمّل فيها الصفحات وحتى بعد إغلاق المتصفح عند استخدام local Storage، لنلق نظرة على هذا اﻷمر:

1. افتح مجددًا قالب مخازن ويب السابق لكن في متصفح يختلف عن المتصفح الذي تقرأ فيه هذا المقال.
2. اكتب الشيفرة التالية في طرفية جافا سكريبت لهذا المتصفح:

localStorage.setItem("name", "Chris");
let myName = localStorage.getItem("name");
myName;

من المفترض أن ترى قيمة عنصر البيانات name.

3. اغلق اﻵن المتصفح ثم افتحه مجددًا.
4. اكتب الشيفرة التالية في طرفية جافا سكريبت:

let myName = localStorage.getItem("name");
myName;

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

مخزن منفصل لكل نطاق

يُوجد مخزن بيانات منفصل لكل نطاق (لكل عنوان ويب حمّله المتصفح)، وسترى ذلك إن حمّلت موقعين وحاولت تخزين عنصر بيانات في أحدهما، فلن يكون هذا العنصر متاحًا للموقع اﻵخر. وهذا اﻷمر منطقي، فرؤية بيانات موقع من موقع آخر مصدر للكثير من الثغرات اﻷمنية.

مثال على مخزن ويب بتفاصيل أكثر

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

بإمكانك إيجاد نسخة عن ملف HTML المستخدم على جيت-هاب، ويتضمن موقع ويب يتكون من ترويسة ومحتوى وتذييل ونموذج ﻹدخال الاسم.

سنبني المثال اﻵن حتى نفهم آلية عمله:

1. انسخ ملف المثال إلى مجلد على حاسوبك.
2. لاحظ كيف يشير ملف HTML إلى ملف جافا سكريبت يُدعى index.js من خلال سطر يشبه السطر
   <script src="index.js" defer></script>.
   علينا إذًا إنشاء الملف index.js ضمن نفس المجلد الذي يضم ملف HTML وكتابة شيفرة جافا سكريبت ضمنه.
3. نبدأ الشيفرة ببناء مراجع إلى جميع عناصر HTML التي نريد التعامل معها في مثالنا، وستكون هذه المراجع على شكل ثوابت لأننا لن نغيرها خلال دورة حياة التطبيق. أضف اﻵن الشيفرة التالية:

// إنشاء الثوابت المطلوبة
const rememberDiv = document.querySelector(".remember");
const forgetDiv = document.querySelector(".forget");
const form = document.querySelector("form");
const nameInput = document.querySelector("#entername");
const submitBtn = document.querySelector("#submitname");
const forgetBtn = document.querySelector("#forgetname");

const h1 = document.querySelector("h1");
const personalGreeting = document.querySelector(".personal-greeting");

4. علينا اﻵن كتابة مترصد أحداث بسيط لمنع النموذج من تسليم محتوياته عند النقر على زر اﻹرسال، فهذا ليس السلوك الذي نريده. أضف الشيفرة التالية تحت الشيفرة السابقة:

// Stop the form from submitting when a button is pressed
form.addEventListener("submit", (e) => e.preventDefault());

5. يجب إضافة الدالة التي تتعامل مع حدث النقر على الزر "Say hello"، وستجد شرحًا وافيًا ضمن تعليقات الشيفرة لكل خطوة، لكن ما تفعله الشيفرة عمومًا هو الحصول على الاسم الذي ندخله ضمن صندوق اﻹدخال النصي وتخزينه في مخزن ويب باستخدام الدالة ()setItem ثم تنفيذ الدالة ()nameDisplayCheck التي تعالج عملية تحديث النص المطلوب من الصفحة. أضف الشيفرة التالية أسفل الشيفرة السابقة:

//`Say hello` نفذ الدالة عند النقر على الزر
submitBtn.addEventListener("click", () => {
 // احفظ الاسم في مخزن ويب
 localStorage.setItem("name", nameInput.value);
 //لعرض التحية المخصصة nameDisplayCheck استخدم الدالة
 nameDisplayCheck();
});

6. نحتاج إلى معالج حدث للتعامل مع النقر على الزر "Forget" الذي يظهر فقط بعد النقر على الزر "Say hello". كما نزيل في دالة معالج الحدث العنصر name من مخزن ويب باستخدام التابع ()removeItem ثم ننفذ مجددًا الدالة ()nameDisplayCheck لتحديث ما يُعرض. أضف الآن الشيفرة التالية:

//`Forget` نفّذ الدالة عند النقر على الزر
forgetBtn.addEventListener("click", () => {
 //إزالة الاسم المخزن في مخزن ويب
 localStorage.removeItem("name");
//لعرض التحية الأصلية وتحديث ما يُعرض nameDisplayCheck استخدم الدالة
 nameDisplayCheck();
});

7. نعرّف اﻵن الدالة ()nameDisplayCheck التي نتحقق فيها فيما لو خُزِّن العنصر name في مخزن ويب باستخدام التابع ('name('localStorage.getItem من خلال عبارة شرطية. فإن وُجد في المخزن، ستكون نتيجة الشرط true وإلا ستكون false. نعرض في الحالة اﻷولى رسالة الترحيب الخاصة ونعرض الجزء "forget" من النموذج ونخفي الجزء "Say hello"، أما في الحالة الثانية، سنعرض الرسالة الأصلية ونجري عكس ما فعلناه في الحالة الأولى:

// nameDisplayCheck() نعرّف الدالة
function nameDisplayCheck() {
 // نتحقق من تخزين عنصر الاسم في مخزن ويب
 if (localStorage.getItem("name")) {
    // نعرض رسالة الترحيب المخصصة إن كان الأمر كذلك
    const name = localStorage.getItem("name");
    h1.textContent = `Welcome, ${name}`;
    personalGreeting.textContent = `Welcome to our website, ${name}! We hope you have fun while you are here.`;
    //`forget` من الاستمارة ونعرض الجزء `remember` نخفي الجزء
    forgetDiv.style.display = "block";
    rememberDiv.style.display = "none";
 } else {
    // إن لم يكن الايم مخزنًانعرض الرسالة اﻷصلية
    h1.textContent = "Welcome to our website ";
    personalGreeting.textContent =
     "Welcome to our website. We hope you have fun while you are here.";
     //`remember` من الاستمارة ونعرض الجزء `forget` نخفي الجزء
    forgetDiv.style.display = "none";
    rememberDiv.style.display = "block";
 }
}

8. ننفذ الدالة ()nameDisplayCheck عند اكتمال تحميل الصفحة. لأن الرسالة المخصصة لن تظهر إن لم نفعل ذلك خلال تحميل الصفحة بشكل متكرر. أضف ما يلي إلى آخر الشيفرة:

nameDisplayCheck();

وهكذا يكون مثالنا قد انتهي، وبإمكان الاطلاع في أي وقت على النسخة المكتملة منه على جيت-هاب.

ملاحظة: تمنع السمة defer في السطر التالي من تنفيذ شيفرة جافا سكريبت حتى اكتمال تحميل الصفحة
<script src="index.js" defer></script>.

الخلاصة

تعرفنا في هذا المقال على أساسيات تخزين البيانات في طرف العميل من خلال واجهات برمجية مخصصة مثل Web Storage API و IndexedDB. كما شرحنا مخازن ويب Web Storage وطريقة العمل معها من خلال مثال تطبيقي بسيط يعرض أساسيات العمل مع هذه الواجهة البرمجية.

ترجمة -وبتصرف- للجزء الأول من مقال: Client-side storage

اقرأ أيضًا

• المقال السابق: الواجهات البرمجية للتعامل مع الصوت والفيديو في جافا سكريبت
• معالجة المشاكل الشائعة للتوافق مع المتصفحات في شيفرة جافاسكربت
• الواجهة البرمجية fetch في JavaScript
• تخزين البيانات محليًا في المتصفح عبر قاعدة البيانات IndexedDB

تضم لغة HTML عناصر مخصصة لتضمين الوسائط المتعددة إلى صفحاتك مثل <audio> و <video> والتي تأتي مزوّدة بواجهة برمجية مخصصة للتحكم بتشغيلها وتقديمها وتأخيرها. لهذا سنتعرف في هذا المقال على طرق تنفيذ بعض المهام الشائعة كإنشاء أدوات تحكم متخصصة باستخدام الواجهة البرمجية HTMLMediaElement التي توفر عدة ميزات للتحكم في تشغيل الصوت و الفيديو برمجيًا .

ننصحك قبل المتابعة في قراءة هذه المقالات أن:

• تكون ملمًا بلغتي HTML و CSS.
• تكون ملمًا بلغة جافا سكريبت.
• تطلع على سلاسل المقالات السابقة التي ناقشت أساسيات جافا سكريبت والكائنات Prototype في جافا سكريبت.
• تطلع على أساسيات الواجهات البرمجية في طرف العميل.

عناصر HTML الخاصة بالصوت والفيديو

يسمح العنصران <video> و <audio> بإدراج مقاطع الصوت و الفيديو في صفحات الويب، وستبدو الطريقة النمطية ﻹنجاز اﻷمر كالتالي:

<video controls>
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>
    Your browser doesn't support HTML video. Here is a
    <a href="rabbit320.mp4">link to the video</a> instead.
  </p>
</video>

تعرض الشيفرة السابقة مشغل فيديو في صفحتك كالتالي:

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

لهذه اﻷدوات إيجابيات، لكن من أبرز مشكلاتها هي اختلافها من متصفح إلى آخر وهذا أمر مربك إن حاولت دعم عدة متصفحات في شيفرتك. ومن المشكلات الكبيرة أيضًا أن أدوات التحكم اﻷصلية في معظم المتصفحات لا تدعم التحكم من خلال لوحة المفاتيح. ويمكن حل كلتا المشكلتين السابقتين بإخفاء أدوات التحكم الأصلية (عن طريق إزالة السمة controls) وبرمجة أدوات تحكم خاصة بك باستخدام HTML و CSS وجافا سكريبت. وسنلقي نظرة في اﻷقسام التالية على اﻷدوات البسيطة المتاحة لهذا الغرض.

الواجهة البرمجية HTMLMediaElement

تزّودك بعض مواصفات الواجهة البرمجية HTMLMediaElement بميزات تسمح لك بالتحكم في مشغلات الصوت و الفيديو برمجيًا مثل التوابع ()HTMLMediaElement.play و ()HTMLMediaElement.pause وغيرها. وهاتان الواجهتان متاحتان للاستخدام مع العنصرين <audio> و<video> فهما متطابقان من ناحية العمل. لهذا سنوضح طريقة استخدام هذه الواجهات من خلال المثال التالي:

يبدو مثالنا عندما يكتمل مشابهًا للتالي:

نقطة الانطلاق

حتى نبدأ العمل، عليك تنزيل الملف المضغوط الخاص بالمثال ثم تستخرج محتوياته في مجلد جديد على حاسوبك. أما إن حمّلت مستودع اﻷمثلة بأكمله، ستجد المثال في المسار javascript/apis/video-audio/start/.

إن حمّلت المثال على متصفحك سترى مشغل فيديو HTML نمطي مع أدوات التحكم الافتراضية.

التعرف على ملف HTML

عندما تفتح الملف index.html سترى عددًا من العناصر، وستلاحظ أن معظم الشيفرة تدور حول مشغل الفيديو وأدوات التحكم الخاصة به:

<div class="player">
  <video controls>
    <source src="video/sintel-short.mp4" type="video/mp4" />
    <source src="video/sintel-short.webm" type="video/webm" />
    <!-- fallback content here -->
  </video>
  <div class="controls">
    <button class="play" data-icon="P" aria-label="play pause toggle"></button>
    <button class="stop" data-icon="S" aria-label="stop"></button>
    <div class="timer">
      <div></div>
      <span aria-label="timer">00:00</span>
    </div>
    <button class="rwd" data-icon="B" aria-label="rewind"></button>
    <button class="fwd" data-icon="F" aria-label="fast forward"></button>
  </div>
</div>

• وضعنا المشغل بأكمله داخل العنصر <div> حتى يُنسّق بالكامل عند الحاجة.
• يحتوي العنصر <video> على عنصرين من النوع <source> كي نتمكن من تحميل تنسيقات مختلفة لمقطع الفيديو وفقًا للمتصفح الذي نستخدمه.
• وربما تكون أدوات تحكم HTML هي اﻷكثر أهمية هنا:
• لدينا أربعة أزرار <button> لتشغيل وإيقاف العرض مؤقتًا واﻹطفاء والتقديم للأمام والعودة للخلف.
• خصصنا لكل زر سمات هي اسم صنف التنسيق class و data-icon لتحديد اﻷيقونة التي تُعرض على الزر (سنرى كيف ننفذ ذلك لاحقًا) و aria-label لتقديم وصف مفهوم عن عمل كل زر، وذلك لأننا لا نقدم عنوانًا مقروءًا ضمن وسم العنصر. ويُقرأ محتوى السمة aria-label من قبل قارئات الشاشة عندما ينتقل التركيز إلى العناصر التي تمتلك هذه السمة.
• تضم الصفحة أيضًا مؤقتًا ضمن عنصر <div> يعرض الوقت المنقضي من مقطع الفيديو، ولتحسين تجربة المستخدم، زودنا المثال بآليتين لتحديد الوقت المنقضي: الأولى ضمن عنصر <span> يعطي الوقت المنقضي بالدقائق والثواني، والثانية ضمن عنصر <div> يضم شريط أفقي يزداد طوله عندما يتقدم عرض الفيديو. ولكي تأخذ فكرة عما ستكونه الصفحة بشكلها الكامل ألق نظرة هنا..

التعرف على ملف CSS

افتح اﻵن ملف CSS وألقِ نظرة عليه. لا يبدو هذا الملف معقدًا، لكننا سنشير إلى النقاط المهمة فيه. لاحظ بداية القاعدة controls.:

.controls {
  visibility: hidden;
  opacity: 0.5;
  width: 400px;
  border-radius: 10px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -200px;
  background-color: black;
  box-shadow: 3px 3px 5px black;
  transition: 1s all;
  display: flex;
}

.player:hover .controls,
.player:focus-within .controls {
  opacity: 1;
}

• بدأنا بالخاصية visibility لمجموعة أدوات التحكم المخصصة وضبطناها على hidden، لكننا سنضبطها لاحقًا عبر جافا سكريبت لتكون visible ونزيل السمة controls من العنصر <video>. وذلك كي يبقى المستخدم قادرًا على تشغيل الفيديو باستخدام أدوات التحكم الافتراضية في حال فشل تحميل شيفرة جافا سكريبت لسبب ما.
• منحنا أدوات التحكم قتامة افتراضية opacity قيمتها 0.5، كي لا تشتت الانتباه عند عرض الفيديو، لكن عندما تمرر الفأرة فوق المشغّل أو تمنحه تركيز الدخل ستكون اﻷدوات كاملة القتامة.
• نرتب اﻷزرار ضمن شريط التحكم باستخدام تخطيط الصندوق المرن display: flex لتسهيل ضبط مواقعها.

لنلق نظرة تاليًا على أيقونات اﻷزرار:

@font-face {
  font-family: "HeydingsControlsRegular";
  src: url("fonts/heydings_controls-webfont.eot");
  src:
    url("fonts/heydings_controls-webfont.eot?#iefix") format("embedded-opentype"),
    url("fonts/heydings_controls-webfont.woff") format("woff"),
    url("fonts/heydings_controls-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

button:before {
  font-family: HeydingsControlsRegular;
  font-size: 20px;
  position: relative;
  content: attr(data-icon);
  color: #aaa;
  text-shadow: 1px 1px 0px black;
}

استخدمنا بداية في أعلى ملف CSS الكتلة font-face@ لاستيراد خط ويب مخصص، وهذا الخط هو عبارة عن أيقونات بدلًا من الحرف اﻷبجدية وتستخدم لعرض أيقونات مختلفة يشيع استخدامها في التطبيقات.

نولد بعد ذلك محتوىً خاصًا لعرض اﻷيقونات على كل زر:

• نستخدم المحدد before:: لعرض المحتوى قبل كل زر <button>.
• نستخدم الخاصية content لضبط المحتوى الذي يعرض في كل حالة ليكون نفسه محتوى السمة data-icon. ففي حالة زر التشغيل مثلًا، سيكون محتوى السمة data-icon هو المحرف P (بشكله الكبير).
• نطبق خط ويب السابق على اﻷزرار باستخدام الخاصية font-family، وسيكون الحرف P في هذا الخط عمليًا أيقونة التشغيل، وهكذا ستظهر على زر التشغيل أيقونة التشغيل.

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

لنلق نظرة أيضًا على تنسيق المؤقت الزمني:

.timer {
  line-height: 38px;
  font-size: 10px;
  font-family: monospace;
  text-shadow: 1px 1px 0px black;
  color: white;
  flex: 5;
  position: relative;
}

.timer div {
  position: absolute;
  background-color: rgb(255 255 255 / 20%);
  left: 0;
  top: 0;
  width: 0;
  height: 38px;
  z-index: 2;
}

.timer span {
  position: absolute;
  z-index: 3;
  left: 19px;
}

• ضبطنا قيمة الخاصية flex للعنصر timer. الخارجي على القيمة 5 لتشغل أكبر مساحة من شريط التحكم. كما ضبطنا خاصية الموقع بالشكل position:relative كي نتمكن من ضبط العناصر ضمن العنصر الخارجي كما نشاء وبالنسبة إلى حدوده وليس حدود العنصر <body>.
• ضبطنا موقع العنصر <div> الداخلي ليكون مطلقًا position:absolute لكي يظهر مباشرة في أعلى العنصر <div> الخارجي. كما ضبطنا قيمة اتساع العنصر على الشكل width:0 كي لا يُرى العنصر إطلاقًا. وعندما يبدأ العرض نستخدم جافا سكريبت لزيادة اتساع العنصر.
• ضطنا موقع العنصر <span> ليكون مطلقًا وبالتالي سيكون بالقرب من الطرف اﻷيسر لشريط المؤقت.
• ضبطنا خاصية العلو z-index للكائن <div> الداخلي والكائن <span> كي يُعرض الشريط الزمني في الأعلى وتحته العنصر <div> الداخلي، ونضمن بذلك أنك سترى كل المعلومات ولن يَحجِب صندوق آخر.

إنجاز شيفرة جافا سكريبت

بعد أن حضرنا واجهتي HTML و CSS، لا بد من كتاب شيفرة اﻷزرار المخصصة للتحكم بمشغل الفيديو.

1. أنشئ ملف جافا سكريبت جديد في نفس المجلد الذي يضم الملف index.html وسمِّه custom-player.js.
2. ضع الشيفرة التالية أعلى الملف:

const media = document.querySelector("video");
const controls = document.querySelector(".controls");

const play = document.querySelector(".play");
const stop = document.querySelector(".stop");
const rwd = document.querySelector(".rwd");
const fwd = document.querySelector(".fwd");

const timerWrapper = document.querySelector(".timer");
const timer = document.querySelector(".timer span");
const timerBar = document.querySelector(".timer div");

أنشأنا في الشيفرة السابقة ثوابت لتكون مراجع إلى الكائنات التي نريد التعامل معها، ولدينا ثلاثة مجموعات:

• العنصر <video> وشريط التحكم.
• أزرار التحكم "تشغيل/إيقاف مؤقت play/pause" و "للأمام rewind" و "للخلف fast forward".
• غلاف المؤقت الخارجي <div> والعنصر <span> الذي يعرض المؤقت والعنصر <div> الخارجي الذي يزداد اتساعه عندما يتقدم الفيديو.

1. ضع اﻵن الشيفرة التالية تحت سابقتها:

media.removeAttribute("controls");
controls.style.visibility = "visible";

تزيل الشيفرة السابقة مشغل الفيديو الافتراضي الخاص بالمتصفح ويُظهر أدوات التحكم المخصصة:

تشغيل وإيقاف الفيديو مؤقتًا

سننجز اﻵن شيفرة التحكم بزر التشغيل و اﻹيقاف المؤقت:

1. أضف بداية الشيفرة التالية في أسفل الشيفرة كي تُستدعى الدالة ()playPauseMedia عند النقر على زر التشغيل:

play.addEventListener("click", playPauseMedia);

2. ولتعريف الدالة ()playPauseMedia، أضف الشيفرة التالية إلى أسفل الشيفرة السابقة:

function playPauseMedia() {
  if (media.paused) {
    play.setAttribute("data-icon", "u");
    media.play();
  } else {
    play.setAttribute("data-icon", "P");
    media.pause();
  }
}

نستخدم هنا عبارة if للتحقق من توقف تشغيل الفيديو، وتعيد الخاصية HTMLMediaElement.paused القيمة true عند توقف التشغيل مؤقتًا بما في ذلك عند ضبطته على القيمة 0 بعد تحميله أول مرة. عند ذلك نضبط قيمة السمة data-icon لزر التشغيل على u التي تعرض بدورها أيقونة التشغيل المؤقت عليه، وتستدعي التابع ()HTMLMediaElement.play لتشغيل الفيديو. وعند النقر على الزر مرة ثانية سيعود الزر كما كان، إذ تظهر أيقونة التشغيل وسيتوقف الفيديو بتنفيذ التابع ()HTMLMediaElement.paused.

إيقاف عرض الفيديو

1. نضيف بداية الشيفرة التي تتعامل مع إيقاف تشغيل الفيديو تحت الشيفرة السابقة:

stop.addEventListener("click", stopMedia);
media.addEventListener("ended", stopMedia);

يضيف سطري الشيفرة مترصدي أحداث addEventListener للتعامل مع الحدث click الذي يوقف تشغيل الفيديو بتنفيذ الدالة ()stopMedia عند النقر على زر اﻹيقاف. ولا بد من إيقاف التشغيل أيضًا عند إنتهاء المقطع، لهذا نترصد أيضًا الحدث ended من خلال مترصد الحدث الثاني والذي ينفذ أيضًا الدالة ()stopMedia عند انتهاء مقطع الفيديو.

2. نعرّف تاليًا الدالة ()stopMedia، بإضاف اﻷسطر التالية بعد الدالة ()playpauseMedia:

function stopMedia() {
  media.pause();
  media.currentTime = 0;
  play.setAttribute("data-icon", "P");
}

وبما أن الواجهة البرمجية HTMLMediaElement لا تقدم تابعًا مخصصًا ﻹيقاف عرض الفيديو، سنستخدم التابع ()pause ﻹيقاف التشغيل مؤقتًا ثم نضبط قيمة الخاصية currentTime على القيمة 0 ليعود الفيديو إلى البداية. فضبط قيمة هذه الخاصية (بالثواني) سينقل الموقع الحالي للفيديو إلى النقطة الزمنية المحددة. يبقى علينا فقط إظهار أيقونة التشغيل على زر التشغيل. وبصرف النظر عن وضع الفيديو سواءً كان قيد التشغيل أو أوقف مؤقتًا عند النقر على زر إيقاف التشغيل "Stop"، لابد أن تُظهر أن المشغل جاهز للعمل مجددًا.

التنقل بالفيديو إلى اﻷمام والخلف

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

1. أضف مترصدي الحدث التاليين تحت تعريف المترصدين السابقين:

rwd.addEventListener("click", mediaBackward);
fwd.addEventListener("click", mediaForward);

2. أضف الدالتين ()mediaBackWard و ()mediaForWard التاليتين تحت الدوال السابقة، وستصبح الشيفرة كالتالي:

let intervalFwd;
let intervalRwd;

function mediaBackward() {
  clearInterval(intervalFwd);
  fwd.classList.remove("active");

  if (rwd.classList.contains("active")) {
    rwd.classList.remove("active");
    clearInterval(intervalRwd);
    media.play();
  } else {
    rwd.classList.add("active");
    media.pause();
    intervalRwd = setInterval(windBackward, 200);
  }
}

function mediaForward() {
  clearInterval(intervalRwd);
  rwd.classList.remove("active");

  if (fwd.classList.contains("active")) {
    fwd.classList.remove("active");
    clearInterval(intervalFwd);
    media.play();
  } else {
    fwd.classList.add("active");
    media.pause();
    intervalFwd = setInterval(windForward, 200);
  }
}

هيأنا أولًا متغيرين intervalFwd و intervlRwd وسترى عملهما لاحقًا، كما ستلاحظ أن عمل الدالتين ()mediaBackWard و ()mediaForWard متطابق لكن بترتيب معكوس:

1. يجب تصفير اﻷصناف والمجالات التي ضبطناها عند تنفيذ وظيفة التقديم السريع للأمام، لأننا لو نقرنا على زر rwd بعد النقر على الرز fwd من المفترض أن نلغي أي إعدادات خاصة بالتقديم السريع للمشغل fwd واستبدالها بإعدادت التراجع rwd، لأن المشغل سيخفق لو حاولنا النقر على كلا الزرين في نفس الوقت.
2. استخدمنا عبارة if للتحقق من ضبط صنف الزر rwd ليكون active في إشارة إلى أن الزر قد نُقر للتو. ويتمتع كل عنصر بالخاصية classlist، وهي خاصية مفيدة تضم كل الأصناف التي يمتلكها العنصر وتقدم توابع ﻹزالة وإضافة اﻷصناف. وقد استخدمنا التابع ()classList.contains للتحقق من جود الصنف active ضمن أصناف الزر، وتعيد قيمة منطقية true/false.
3. في حال كان active أحد أصناف العنصر rwd نزيله باستخدام التابع ()classList.remove ثم نلغي قيمة الفاصل الزمني الذي ضُبط مسبقًا عندما نقرنا على الزر ومن ثم نستخدم التابع ()HTMLMediaElement.play ﻹلغاء العودة للخلف وتشغيل الفيديو بشكل طبيعي.
4. إن لم يمتلك الزر تلك الخاصية نضيفها إليه باستخدام التابع ()clasList.add ومن ثم نوقف الفيديو مؤقتًا باستخدام التابع ()HTMLMediaElement.pause. نضبط بعدها قيمة المتغير intervalRwd ليعادل القيمة المعادة من استدعاء الدالة ()setInterval. تُحدد هذه الدالة فترة زمنية معينة تنفذ بعد انقضائها الدالة التي تُمرر إليها كمعامل أول أما الفترة الزمنية فيحددها المعامل الثاني بالميلي ثانية. وهنا ننفذ الدالة كل 200 ميلي ثانية كي نعيد مشغل الفيديو إلى الخلف بوتيرة ثابتة. ولكي نوقف تنفيذ الدالة ()setInterval نستدعي الدالة ()clearIterval ممرين لها المتغير intervalRwd (الذي أسندت إليه الدالة ()setInterval).
5. عرفنا أخيرًا الدالة ()windBackwrd والدالة ()windForward اللتان تمررا إلى ()setInterval، لهذا أضف الشيفرة التالية تحت الدوال السابقة:

function windBackward() {
  if (media.currentTime <= 3) {
    rwd.classList.remove("active");
    clearInterval(intervalRwd);
    stopMedia();
  } else {
    media.currentTime -= 3;
  }
}

function windForward() {
  if (media.currentTime >= media.duration - 3) {
    fwd.classList.remove("active");
    clearInterval(intervalFwd);
    stopMedia();
  } else {
    media.currentTime += 3;
  }
}

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

1. نبدأ الشيفرة بالعبارة if التي تتحقق أن المدة المنقضية من المقطع أقل من 3 ثانية، أي سيعود المشغل عند تراجعه إلى ما قبل نقطة البداية، وهذا ما يسبب سلوكًا غريبًا للمشغل. فلو كانت الحالة كذلك، نوقف تشغيل المقطع باستدعاء الدالة ()stopMedia ومن ثم نزيل الصنف active من قائمة أصناف الزر rwd ونمحي قيمة المتغير intervalRwd ﻹيقاف عملية التراجع. وفي حال أهملنا هذه الخطوة اﻷخيرة سيستمر المشغل بالتراجع إلى ما لا نهاية.
2. إن كان الوقت المنقضي أكبر من 3 ثانية، نزيل ثلاث ثوانٍ من الوقت الحالي باستخدام التعليمة media.currentTime -=3، أي نعيد مشغل الفيديو إلى ما قبل ثلاث ثوان وذلك كل 200 ميلي ثانية.

تحديث الوقت المنقضي

آخر ما سننفذه ﻹنجاز أدوات التحكم المخصصة بمشغل الفيديو هو تحديد الوقت المنقضي من زمن المقطع. لذا نشغّل دالة تحدّث الوقت الذي نعرضه في كل مرة يقع فيها الحدث timeupdate المرتبط بالعنصر <video>. أما تواتر عملية وقوع هذا الحدث، فتعتمد على المتصفح وقوة معالج جهازك.

أضف اﻵن السطر التالي الذي يعرّف مترصد تحديث زمن التشغيل:

media.addEventListener("timeupdate", setTime);

ولتعريف الدالة ()setTime، أضف مايلي في أسفل ملف جافا سكريبت:

function setTime() {
  const minutes = Math.floor(media.currentTime / 60);
  const seconds = Math.floor(media.currentTime - minutes * 60);

  const minuteValue = minutes.toString().padStart(2, "0");
  const secondValue = seconds.toString().padStart(2, "0");

  const mediaTime = `${minuteValue}:${secondValue}`;
  timer.textContent = mediaTime;

  const barLength =
    timerWrapper.clientWidth * (media.currentTime / media.duration);
  timerBar.style.width = `${barLength}px`;
}

هذه الدالة طويلة، لهذا سنناقشها خطوة خطوة:

1. نعمل بداية على تحديد الدقائق والثواني المنقضية من خلال قيمة HTMLMediaElement.currentTime.
2. نهيئ بعد ذلك متغيرين إضافيين هما minuteValue و secondValue، ثم نستخدم التابع ()padStart لكي نمثّل قيمة الدقائق والثواني على شكل محرفين فقط حتى لو كانت القيمة رقمًا وحيدًا.
3. أما الوقت الفعلي الذي سيُعرض فهو قيمة المتغير minuteValue تليه نقطتان متعامدتان ثم قيمة المتغير secondValue.
4. نضبط قيمة المؤقت Node.textContent لتعادل قيمة الوقت الحالي وبالتالي ستُعرض هذه القيمة على واجهة المشغّل.
5. نحدد طول عنصر <div> الداخلي (الذي سيعرض شريط تقدم مقطع الفيديو) من خلال تحديد اتساع عنصر <div> الخارجي (نأخذها من الخاصية clientWidth) ومن ثم ضرب هذه القيمة بالوقت الحالي HTMLMediaElement.currentTime ونقسم على المدة الكلية لمقطع الفيديو HTMLMediaElement.duration.
6. نضبط قيمة اتساع العنصر <div> الداخلي ليعادل طول شريط تتبع تقدم الفيديو بعد إضافة القيمة "px" كي تشير إلى الاتساع مقدرًا بالبكسل.

إصلاح مشكلات التشغيل واﻹيقاف المؤقت للفيديو

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

أضف بداية الشيفرة التالية ضمن الدالة ()stopMedia:

rwd.classList.remove("active");
fwd.classList.remove("active");
clearInterval(intervalRwd);
clearInterval(intervalFwd);

أضف اﻵن نفس اﻷسطر في بداية الدالة ()playpauseMedia (وقبل عبارة if).

يمكنك اﻵن ازالة نفس الأسطر من الدالتين ()windBackwrd و ()windForward لأننا وضعنا هذه الوظيفة المشتركة بينهما في الدالة ()stopMedia.

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

الخلاصة

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

إليك أخيرًا بعض الاقتراحات التي تساعد في تحسين مثالنا:

1. يختل عمل المؤقت إن كانت مدة المقطع أكثر من ساعة (فلن يعرض الساعات بل الدقائق والثواني فقط). هل يمكنك تعديل الشيفرة لتعرض الساعات أيضًا؟
2. يمتلك العنصر <audio> نفس وظائف HTMLMediaElement وبالتالي يمكنك تشغيل المقاطع الصوتية بسهولة، جرب لك.
3. هل يمكنك إيجاد طريقة الانتقال إلى مكان ما من المقطع بالنقر على شريط تقدم الفيديو (العنصر <div> الداخلي). وكتلميح يمكنك إيجاد x و y لزوايا الشريط من خلال التابع ()getBoundingClientRect وإيجاد إحداثيي موقع مؤشر الفأرة من خلال كائن الحدث الذي ينتج عن حدث النقر على المستند. إليك مثالًا:

document.onclick = function (e) {
  console.log(e.x, e.y);
};

ترجمة -وبتصرف- لمقال: Video and audio APIs

اقرأ أيضًا

• المقال السابق: العمل مع واجهات الرسوميات البرمجية في جافا سكريبت: الحلقات والرسوم المتحركة
• إضافة مقاطع الفيديو عبر العنصر <video> في HTML5
• إضافة محتوى سمعي ومرئي في صفحة HTML
• تأثيرات التمرير في صفحات الويب باستخدام Javascript وCSS

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

إنشاء الحلقات في Canvas

لن يكون صعبًا التعامل مع الحلقات في <canvas>، وما عليك سوى استخدام تعليمات هذا العنصر (التوابع والخاصيات) داخل حلقة for أو غيرها من الحلقات كغيرها من شيفرات جافا سكريبت. لهذا سنعطي مثالًا تطبيقيًا عن الموضوع:

1. أنشئ نسخة جديدة عن القالب الرسومي الذي أنشأناه في المقال السابق وافتحه ضمن محرر الشيفرة الذي تستخدمه.
2. أضف السطر التالي إلى أسفل ملف جافا سكريبت، ويتضمن هذا السطر تابعًا جديدًا هو ()translate الذي يحرّك نقطة المبدأ في لوحة الرسم:

ctx.translate(width / 2, height / 2);

يسبب ذلك تحريك نقطة المبدأ (0,0) إلى مركز اللوحة بدلًا من كونها في الزاوية العليا اليسارية. ولهذا اﻷمر فائدته في الكثير من الحالات كما في مثالنا، إذ نريد أن يكون التصميم منسوبًا إلى مركز اللوحة.

أضف اﻵن الشيفرة التالية:

function degToRad(degrees) {
  return (degrees * Math.PI) / 180;
}

function rand(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

let length = 250;
let moveOffset = 20;

for (let i = 0; i < length; i++) {}

سننجز هنا نفس الدالة ()degToRad التي رأيناها في مثال المثلث في مقالنا السابق، ونستخدم الدالة التي تعيد رقمًا عشوائيًا بين حدين علوي وسفلي معينين. إضافة إلى ذلك ننشئ المتغيرين length و moveOffset (سنرحهما لاحقًا)، كما نستخدم حلقة for فارغة.

ما سنفعله هنا هو رسم شيء ما ضمن اللوحة لكن ضمن الحلقة for ثم نكرر ما نفعله عدة مرات. أضف اﻵن الشيفرة التالية داخل الحلقة for:

ctx.fillStyle = `rgb(${255 - length} 0 ${255 - length} / 90%)`;
ctx.beginPath();
ctx.moveTo(moveOffset, moveOffset);
ctx.lineTo(moveOffset + length, moveOffset);
const triHeight = (length / 2) * Math.tan(degToRad(60));
ctx.lineTo(moveOffset + length / 2, moveOffset + triHeight);
ctx.lineTo(moveOffset, moveOffset);
ctx.fill();

length--;
moveOffset += 0.7;
ctx.rotate(degToRad(5));

في كل تكرار:

• نضبط fillStyle ليكون ظلًا بنفسجيًا شفافًا قليلًا ويتغير كل مرة وفقًا لقيمة المتغير length. وكما سترى سيقل الطول في كل تكرار وبالتالي سيكون أثر ذلك على اللون الذي يصبح أكثر لمعانًا مع كل مثلث يُرسم على التتابع.
• نبدأ مسار الرسم.
• ننقل قلم الرسم إلى اﻹحداثي (moveOffset, moveOffset) ويُعرّف هذا المتغير المسافة التي يجب أن نحركها في كل مرة نرسم فيها مثلًا جديدًا.
• نرسم خطًا إلى اﻹحداثي (moveOffset+length, moveOffset) وهذا الخط طوله قيمة المتغير length ويوازي المحور x.
• نحسب ارتفاع المثلث كما فعلنا في المقال السابق.
• نرسم خطًا نحو رأس المثلث المتجه نحو الأسفل ومن ثم خطا إلى نقطة بداية المثلث.
• نستدعى التابع ()fill لملء المثلث.
• نحدّث قيمة المتغيرات التي تصف سلسلة المثلثات التي نرسمها كي نتمكن من رسم المثلث التالي. نخفض قيمة المتغير length بمقدار 1 وبالتالي سيصغر المثلث كل مرة. كما نزيد قيمة moveOffset بمقدار صغير كي يكون كل مثلث أبعد قليلًا عن سابقه. ونستخدم التابع ()rotate الذي يسمح لنا تدوير اللوحة بأكملها، حيث ندورها بمقدار خمس درجات قبل أن نرسم المثلث التالي.

هذا كل ما في اﻷمر، وستبدو نتيجة مثالنا كالتالي:

نشجعك اﻵن على إجراء تغييرات في هذا المثال وتجرّب ما تعلمته. إذ يمكنك مثلًا:

• أن ترسم مربعًا أو قوسًا بدلًا من المثلث.
• أن تغير قيمة المتغير length أو moveOffset.
• تغيير اﻷرقام العشوائية التي نولدها باستخدام الدالة ()rand التي وضعناها في الشيفرة السابقة ولم نستخدمها.

ملاحظة: بإمكانك الاطلاع على الشيفرة كاملة لهذا المثال على جت-هب.

الرسوم المتحركة

ما فعلناه في مثالنا السابق أمر جميل، لكن ما تحتاجه حقيقة حلقة ثابتة تستمر وتستمر في أي تطبيق فعلي يعتمد على عنصر <canvs> (مثل اﻷلعاب الإلكترونية، والعرض البصري المباشر). فلو فكرت بلوحة الرسم على أنها فيلم سينمائي، ستعرف أنه عليك تحديث اﻹطارات المعروضة بشكل مستمر وبمعدل 60 إطار في الثانية (القيمة المثالية) كي يبدو المشهد المتحرك ناعمًا ومريحًا للعين البشرية.

تقدم لك جافا سكريبت مجموعة من الدوال التي تسمح لك بتنفيذ دوال أخرى بشكل متكرر عدة مرات في الثانية الواحدة. ونجد أنسب هذه الدوال لمثالنا الدالة ()window.requestAnimationFrame التي تأخذ معاملًا واحدًا وهو اسم الدالة التي نريد استدعاءها. فإن رسمت هذه الدالة تحديثًا جديدًا من سلسلة الرسوم المتحركة التي سنعرضها، عليك حينها استدعاء الدالة ()window.requestAnimationFrame مجددًا قبل نهاية الدالة المنفذة للرسم كي تستمر حلقة الرسم. تنتهي الحلقة عندما تتوقف عن استدعاء ()window.requestAnimationFrame أو عند استدعاء الدالة ()window.caancelAnimationFrame بعد استدعاء ()window.requestAnimationFrame وقبل البدء برسم اﻹطار (الذي سيكون اﻷخير حينها).

ملاحظة:من الممارسات الجيدة استدعاء الدالة ()window.caancelAnimationFrame من شيفرتك الرئيسية عند الانتهاء من الرسم، كي تضمن عدم وجود أية تحديثات أخرى يمكن أن تُعرض على اللوحة.

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

function loop() {
  ctx.fillStyle = "rgb(0 0 0 / 25%)";
  ctx.fillRect(0, 0, width, height);

  for (const ball of balls) {
    ball.draw();
    ball.update();
    ball.collisionDetect();
  }

  requestAnimationFrame(loop);
}

loop();

نشغل الدالة()loop مرة واحدة في آخر الشيفرة لنبدأ دورة الرسوميات برسم اﻹطار المتحرك الأول ومن ثم تتولى الدالة ()loop مسؤولية استدعاء الدالة (loop(requestAnimationframe التي ستحضر وترسم اﻹطار الثاني من الرسوم المتحركة وتكرر اﻷمر حتى النهاية.

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

لهذا يُعد تحسين الرسوم المتحركة اختصاصًا برمجيًا بحد ذاته، ويتطلب استعمال العديد من التقنيات الذكية المتاحة. لكن هذا اﻷمر خارج إطار مقالنا والمثال الذي نعمل عليه. وعمومًا، تتطلب عملية تنفيذ رسوم متحركة ضمن اللوحة الخطوات التالية:

1. مسح محتوى اللوحة باستخدام ()fillRect أو ()clearRect.
2. تخزين الحالة عند الضرورة باستخدام ()save، وذلك عندما تحتاج إلى حفظ اﻹعدادات التي حدّثتها في اللوحة قبل الاستمرار، وللأمر فائدته في التطبيقات المتقدمة.
3. رسم الأشياء التي تريد تحريكها.
4. استعادة الإعدادات التي خزنتها في الخطوة الثانية باستخدام ()restore.
5. استدعاء الدالة ()requestAnimationFrame لجدولة رسم اﻹطار التالي من الرسم المتحرك.

ملاحظة: لن نغطي الدالتين ()save و ()restore في مقالنا.

تحريك شخصية بسيطة

سننشئ اﻵن رسمًا متحركًا خاصًا بنا، تمشي الشخصية المقتبسة من أحد ألعاب الحاسوب القديمة خلال عرض الرسم المتحرك عبر الشاشة.

1. أنشئ نسخة جديدة من القالب الذي نستخدمه في أمثلتنا وافتحه في محرر اﻷلعاب.
2. حدّث شيفرة HTML حتى تعكس الصورة:

<canvas class="myCanvas">
  <p>A man walking.</p>
</canvas>

أضف اﻷسطر التالية إلى نهاية ملف جافا سكريبت كي تكون نقطة المبدأ منتصف لوحة الرسم.:

ctx.translate(width / 2, height / 2);

ننشئ تاليًا كائن HTMLImgeElement ونضبط قيمة الخاصية src له كي تكون عنوان الصورة التي نريد تحميلها ثم نضيف معالجًا للحدث onload الذي يستدعي الدالة ()draw عند اكتمال تحميل الصورة:

const image = new Image();
image.src = "walk-right.png";
image.onload = draw;

سنضيف اﻵن بعض المتغيرات التي تتعقب موقع الشخصية في اللوحة وعدد الشخصيات التي نرسمها على اللوحة:

let sprite = 0;
let posX = 0;

سنشرح تاليًا صورة الشخصية المأخوذة من التطبيق Walking cycle using CSS animation

تتضمن الصورة ست شخصيات تمثل تسلسل حركة الشخصية. عرض صورة كل شخصية 102 بكسل وارتفاعها 148 بكسل. ولرسم كل شخصية على حدة، علينا استخدام التابع ()drawImage لاقتصاص صورة واحدة للشخصية وعرض هذا الجزء فقط، كما فعلنا مع شعار فايرفوكس في مثال سابق. وينبغي ضرب اﻹحداثي X للشريحة بالعدد 102 ويبقى اﻹحداثي Y مساويًا للصفر، وستبقى أبعاد الشريحة دائمًا 102x148 بكسل.

سنضع اﻵن شيفرة الدالة ()draw في اﻷسفل لكي نزودها بالشيفرة اللازمة:

function draw() {}

أما بقية الشيفرة في هذا القسم فستكون ضمن الدالة ()draw. لهذا أضف اﻷسطر التالية التي تمسح اللوحة وتعدها لرسم كل إطار. وانتبه إلى ضرورة تخصيص الزاوية العليا اليسارية من المربع لتكون (width/2, height/2) لأننا اتخذنا مركز اللوحة نقطة البداية.

ctx.fillRect(-(width / 2), -(height / 2), width, height);

نرسم تاليًا الصورة باستخدام الدالة drawImage التي تقبل تسع معاملات:

ctx.drawImage(image, sprite * 102, 0, 102, 148, 0 + posX, -74, 102, 148);

وكما ترى:

• خصصنا image لتكون الصورة التي نرسمها.
• يحدد المعاملان 2 و 3 إحداثيا الزاوية العليا اليسارية من الشريحة التي نريد اقتصاصها من الصورة المصدرية، ويكون X هو قيمة المتغير sprite مضروبًا بالعدد 102 (حيث يمثل المتغير عدد الشخصيات الموجودة في الصورة من 0 إلى 5) بينما تبقى قيمة Y هي 0.
• يحدد المعاملان 4 و 5 أبعاد الشريحة التي نقتصها وهي 102x148 بكسل.
• يحدد المعاملان 6 و 7 الزاوية العليا اليسارية من الصندوق الذي نرسم ضمنه الشخصية، وتكون قيمة اﻹحداثي X هي 0 + posX وبالتالي نستطيع تغيير مكان رسم الخصية بتغيير قيمة posX.
• يحدد المعاملان 8 و 9 أبعاد الصورة على اللوحة، وعلينا هنا المحافظة على اﻷبعاد اﻷصلية لهذا كانت قمة المعاملين 102 و 148 على التتالي:

علينا تعديل قيمة المتغير sprite عند كل رسم

if (posX % 13 === 0) {
  if (sprite === 5) {
    sprite = 0;
  } else {
    sprite++;
  }
}

لاحظ كيف وضعنا الشيفرة السابقة ضمن الكتلة ({}if (posX % 13 === 0 واستخدمنا العامل % (عامل باقي القسمة) للتحقق من إمكانية قابلية قسمة قيمة المتغير posX على 13. فإن كان الوضع كذلك ننتقل إلى الشخصية التالية بزيادة قيمة المتغير sprite بمقدار 1 (ثم نعود إلى 0 عندما تصبح قيمته 5). ويعني ذلك فعليًا أننا نغير الشخصية عند اﻹطار 13 وتقريبًا حوالي 5 إطارات في الثانية (تكرر الدالة ()requestAnimationFrame العملية بمعدل 60 إطار في الثانية إن أمكن). وعندما نعرض أخر شخصية نعود بعدها إلى الشخصية 0 وإلا سنزيد المتغير sprite بمقدار 1.

سنعمل اﻵن على آلية تغيير قيمة posX مع كل إطار، لهذا عليك إضافة الشيفرة التالية تحت الشيفرة السابقة:

if (posX > width / 2) {
  let newStartPos = -(width / 2 + 102);
  posX = Math.ceil(newStartPos);
  console.log(posX);
} else {
  posX += 2;
}

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

ولا بد أخيرًا من تنفيذ الحركة السابقة باستمرار عن طريق استدعاء ()requestAnimationFrame في نهاية الدالة ()draw:

window.requestAnimationFrame(draw);

ستبدو نتيجة الشيفرة اﻵن كالتالي:

ملاحظة: بإمكانك الاطلاع على الشيفرة كاملة لهذا المثال على جت-هب.

تطبيق رسومي بسيط

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

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

لنلق نظرة على بعض اﻷجزاء المهمة:

• أولًا: نتتبع موقع الفأرة من خلال إحداثيات x و y، كما نترصد حدث نقر الفأرة وذلك من خلال المتغيرات curX و curY و pressed. وعندما تتحرك الفأرة يقع الحدث onmousemove وننفذ معالجه الذي يلتقط الإحداثيات الحالية لموقع الفأرة. كما نستخدم أيضًا معالجي الحدثين onmousedown و onmouseup لتغيير قيمة المتغير pressed إلى true عندما نضغط زر الفأرة وإلى false عندما نحرر الزر.

let curX;
let curY;
let pressed = false;

// حدّث إحداثيات موقع الفأرة
document.addEventListener("mousemove", (e) => {
  curX = e.pageX;
  curY = e.pageY;
});

canvas.addEventListener("mousedown", () => (pressed = true));

canvas.addEventListener("mouseup", () => (pressed = false));

عند النقر على الزر "مسح اللوحة Clean canvas" ننفذ دالة بسيطة تمحي اللوحة بأكملها وتعيدها إلى اللون اﻷسود:

clearBtn.addEventListener("click", () => {
  ctx.fillStyle = "rgb(0 0 0)";
  ctx.fillRect(0, 0, width, height);
});

وحلقة الرسم بسيطة هنا، فعندما تكون قيمة المتغير pressed هي true، نرسم دائرة لها اللون الذي يحدده منتقي اﻷلوان color picker ونصف قطر يحدده عنصر تحديد المجال range input. وعلينا رسم الدائرة فوق النقطة المحددة بمقدار 85 بكسل، ذلك أن القياس مأخوذ بالنسبة إلى أعلى شاشة العرض (أعلى نافذة المتصفح) لكننا نرسم الدائرة بالنسبة ﻷعلى اللوحة التي تبدأ تحت شريط التحكم (الذي يضم منتقي اﻷلوان ومحدد نصف القطر) ذو الارتفاع 85 بكسل. ولو رسمنا الدائرة اعتمادًا على قيمة curY ستبدو الدائرة تحت النقطة المحددة للرسم بحدود 85 بكسل.

function draw() {
  if (pressed) {
    ctx.fillStyle = colorPicker.value;
    ctx.beginPath();
    ctx.arc(
      curX,
      curY - 85,
      sizePicker.value,
      degToRad(0),
      degToRad(360),
      false,
    );
    ctx.fill();
  }

  requestAnimationFrame(draw);
}

draw();

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

الواجهة WebGL

لنترك اﻵن البيئة الرسومية ثنائية البعد ونلقي نظرة سريعة على لوحات الرسم ثلاثية اﻷبعاد. تُستخدم الواجهة البرمجية WebGL API للعمل مع الرسومات ثلاثية البعد، وهي واجهة منفصلة تمامًا عن واجهة البيئة الرسومية ثنائية البعد مع أن شيفرتهما تُصيّر ضمن العنصر نفسه <canvas>.

بنيت WebGL على أساس OpenGL (مكتبة الرسوميات المفتوحة Open Graphics Library) وتسمح لك بالتواصل مباشرة مع المعالج الرسومي للحاسوب GPU. لهذا فكتابة شيفرة WebGL خام أشبه بكتابة شيفرات لغات منخفضة المستوى مثل ++C مقارنة بشيفرة جافا سكريبت، فهي معقدة لكنها قوية جدًا.

استخدام مكتبة جافا سكريبت خارجبة

يستخدم معظم المطورون مكتبات يقدمها طرف آخر عند العمل مع الرسوميات ثلاثية البعد نظرًا لتعقيد WebGL مثل Three.js أو PlayCanvas أو Babylon.js. تعمل هذه المكتبات عومًا على نحو متشابه، فهي تقدم دوال أولية وأشكال مخصصة وكاميرات لعرض الموقع وطرق لتطبيق اﻹضاءة والظل ولتغطية السطوح بخامات مختلفة وغيرها. فهذه المكتبات تتعامل مباشرة مع WebGL بدلًا منك متيحة لك المجال للعمل وفق سوية برمجية أعلى. ويعني هذا بالطبع تعلم واجهات برمجية أخرى (واجهات يقدمها طرف آخر في حالتنا) لكنها أبسط بكثير من التعامل مع شيفرة WebGL الخام.

إعادة إنشاء مكعب

لنلق نظرة على مثال بسيط يشرح استخدام المكتبة WebGL، وسنختار فيه المكتبة Three.js كونها من أكثر المكتبات استخدامًا. وسنبني في مثالنا مكعب ثلاثي اﻷبعاد يدور حول نفسه.

1. أنشئ نسخة عن ملف المثال) ضمن مجلد جديد ثم احفظ نسخة من الملف metal003.png في المجلد نفسه. ويمثل الملف اﻷخير الصورة التي نستخدمها لتغطية سطح المكعب لاحقًا.
2. أنشئ ملفًا جديدًا باسم script.js في نفس المجلد السابق.
3. نزّل المكتبة Three.min.js وخزنها في نفس المجلد السابق.
4. لدينا اﻵن الملف three.js الذي يرتبط بصفحتنا، ويمكننا كتابة الشيفرة الذي تستخدمه ضمن الملف script.js.