تطبيق مبادئ برمجة التطبيقات الصغيرة على نموذج مشروع

Thomas Steiner

نطاق التطبيق

لعرض الطريقة المصغّرة للبرمجة في التطبيق التي تم تطبيقها على تطبيق ويب، كنت بحاجة إلى فكرة تطبيق صغيرة وكاملة بما يكفي. التدريب المتواتر عالي الكثافة (HIIT) هو استراتيجية لممارسة تمارين القلب والأوعية الدموية، وهي تستند إلى مجموعة متناوبة من التمارين اللاهوائية المكثفة لفترات قصيرة مع فترات استشفاء أقل شدة. تستخدم العديد من تدريبات التدريب المتواتر عالي الكثافة موقّتات التدريب المتواتر عالي الكثافة، على سبيل المثال، هذه الجلسة على الإنترنت التي تبلغ مدتها 30 دقيقة من قناة The Body Coach TV على YouTube.

مثال على تطبيق HIIT

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

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

تمنحك لقطات الشاشة التالية انطباعًا عن التطبيق.

بنية التطبيق

كما هو موضح أعلاه، يتكون التطبيق من شريط تنقل وشريط علامات تبويب وثلاث صفحات، مرتبة في شبكة. يظهر شريط التنقل وشريط علامات التبويب كإطارات iframe مع حاوية <div> بداخلها ثلاثة إطارات iframe إضافية للصفحات، يكون أحدها مرئيًا دائمًا ويعتمد على التحديد النشط في شريط علامات التبويب. يُستخدم إطار iframe النهائي الذي يشير إلى about:blank في الصفحات التي يتم إنشاؤها ديناميكيًا داخل التطبيق، وهي مطلوبة لتعديل الموقتات الحالية أو إنشاء صفحات جديدة. أطلق على هذا النمط اسم تطبيق من صفحة واحدة متعددة الصفحات (MPSPA).

ترميز lit-html المستند إلى المكوّنات

تصبح بنية كل صفحة عبارة عن رمز lit-html يتم تقييمه ديناميكيًا في وقت التشغيل. وبالنسبة إلى الخلفية على lit-html، هي مكتبة نماذج HTML فعالة ومعبرة وموسَّعة لـ JavaScript. وباستخدامه مباشرةً في ملفات HTML، يتم توجيه نموذج البرمجة العقلية بشكل مباشر للمخرجات. وبصفتك مبرمجًا، تكتب نموذجًا لشكل المخرجات النهائية وتملأ lit-html الفجوات ديناميكيًا بناءً على بياناتك وتجذب مستمعي الحدث. يستخدم التطبيق عناصر مخصصة من جهات خارجية مثل عنصر Shoelace's <sl-progress-ring> أو عنصرًا مخصّصًا يتم تنفيذه ذاتيًا يسمى <human-duration>. بما أنّ العناصر المخصّصة لها واجهة برمجة تطبيقات تعريفية (على سبيل المثال، السمة percentage لحلقة التقدّم)، تعمل هذه العناصر بشكل جيد مع لغة lit-html كما ترون في القائمة أدناه.

<div>
  <button class="start" @click="${eventHandlers.start}" type="button">
    ${strings.START}
  </button>
  <button class="pause" @click="${eventHandlers.pause}" type="button">
    ${strings.PAUSE}
  </button>
  <button class="reset" @click="${eventHandlers.reset}" type="button">
    ${strings.RESET}
  </button>
</div>

<div class="progress-rings">
  <sl-progress-ring
    class="sets"
    percentage="${Math.floor(data.sets/data.activeTimer.sets*100)}"
  >
    <div class="progress-ring-caption">
      <span>${strings.SETS}</span>
      <span>${data.sets}</span>
    </div>
  </sl-progress-ring>
</div>

نموذج البرمجة

تحتوي كل صفحة على فئة Page مقابلة تملأ ترميز lit-html النابض بالحياة من خلال توفير عمليات تنفيذ معالِجات الأحداث وتوفير البيانات لكل صفحة. تتيح هذه الفئة أيضًا استخدام طرق مراحل النشاط، مثل onShow() وonHide() وonLoad() وonUnload(). يمكن للصفحات الوصول إلى مخزن بيانات يعمل على مشاركة حالة كل صفحة والحالة العامة بشكل اختياري. تتم إدارة جميع السلاسل مركزيًا، لذلك فإن التدويل مضمّن. يعالج المتصفّح التوجيه مجانًا، لأنّ كل ما يفعله التطبيق هو تبديل مستوى رؤية إطار iframe وبالنسبة إلى الصفحات التي يتم إنشاؤها ديناميكيًا، عليك تغيير سمة src لإطار iframe النائب. يوضح المثال أدناه رمز إغلاق صفحة تم إنشاؤها ديناميكيًا.

import Page from '../page.js';

const page = new Page({
  eventHandlers: {
    back: (e) => {
      e.preventDefault();
      window.top.history.back();
    },
  },
});

التصميم

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

main {
  max-width: 600px;
}

form {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
  margin-block-end: 1rem;
}

label {
  text-align: end;
  grid-column: 1 / 2;
}

input,
select {
  grid-column: 2 / 3;
}

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

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

if ('wakeLock' in navigator) {
  const requestWakeLock = async () => {
    try {
      page.shared.wakeLock = await navigator.wakeLock.request('screen');
      page.shared.wakeLock.addEventListener('release', () => {
        // Nothing.
      });
    } catch (err) {
      console.error(`${err.name}, ${err.message}`);
    }
  };
  // Request a screen wake lock…
  await requestWakeLock();
  // …and re-request it when the page becomes visible.
  document.addEventListener('visibilitychange', async () => {
    if (
      page.shared.wakeLock !== null &&
      document.visibilityState === 'visible'
    ) {
      await requestWakeLock();
    }
  });
}

اختبار التطبيق

يتوفّر تطبيق HIIT Time على GitHub. يمكنك تشغيل العرض التوضيحي في نافذة جديدة، أو في إطار iframe المضمّن أدناه، والذي يحاكي جهازًا جوّالاً.

شكر وتقدير

راجع هذه المقالة جو ميدلي وكايس باسك وميلييكا ميهاجليا وآلان كينت وكيث غو.