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

Thomas Steiner

نطاق التطبيق

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

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

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

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

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

بنية التطبيق

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

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

وتُعرف بنية كل صفحة بأنّها سقالة lit-html. يتم تقييمه ديناميكيًا في وقت التشغيل للحصول على خلفية عن lit-html، فإنها عبارة عن مكتبة نماذج HTML فعالة ومعبّرة وقابلة للتوسيع لـ JavaScript. باستخدام نموذج البرمجة الذهنية مباشرةً في ملفات HTML، يركِّز بشكل مباشر على المخرجات. كمبرمج، تكتب قالبًا لشكل الإخراج النهائي، و lit-html بعد ذلك لملء الفجوات ديناميكيًا استنادًا إلى البيانات وجذب مستمعي الأحداث. يستخدم التطبيق عناصر مخصّصة تابعة لجهات خارجية، مثل <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 المضمّن أدناه، والذي يحاكي جهازًا جوّالاً.

شكر وتقدير

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