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

Thomas Steiner

نطاق التطبيق

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

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

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

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

تقدّم لقطات الشاشة التالية انطباعًا عن التطبيق.

بنية التطبيق

كما هو موضّح أعلاه، يتألف التطبيق من شريط تنقّل وشريط علامات تبويب وثلاث صفحات، مرتّبة في شبكة. يتم عرض شريط التنقّل وشريط علامات التبويب على شكل إطارات 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 الذي تم تضمينه أدناه، والذي يحاكي جهازًا جوّالاً.

الإقرارات

راجَع هذه المقالة Joe Medley و Kayce Basques و Milica Mihajlija و Alan Kent و Keith Gu.