استفاده از اصول برنامه نویسی مینی اپلیکیشن در یک پروژه نمونه

Thomas Steiner

دامنه اپلیکیشن

برای نشان دادن روش برنامه نویسی مینی برنامه کاربردی در یک برنامه وب، به یک ایده برنامه کوچک اما به اندازه کافی کامل نیاز داشتم. تمرین تناوبی با شدت بالا (HIIT) یک استراتژی تمرینی قلبی عروقی است که مجموعه‌های متناوب دوره‌های کوتاه تمرینات بی‌هوازی شدید با دوره‌های ریکاوری شدیدتر را در بر می‌گیرد. بسیاری از آموزش های HIIT از تایمرهای HIIT استفاده می کنند، به عنوان مثال، این جلسه 30 دقیقه ای آنلاین از کانال YouTube The Body Coach TV .

برنامه نمونه HIIT Time

برای این فصل، من یک مثال اساسی از چنین برنامه تایمر HIIT را به نام "HIIT Time" ساخته ام که به کاربر اجازه می دهد تایمرهای مختلفی را تعریف و مدیریت کند، که همیشه از یک بازه با شدت بالا و پایین تشکیل شده است، و سپس یکی از آنها را انتخاب کند. یک جلسه آموزشی این یک برنامه واکنش گرا با نوار ناوبری، نوار تب و سه صفحه است:

• Workout: صفحه فعال در طول تمرین. به کاربر امکان می‌دهد یکی از تایمرها را انتخاب کند و دارای سه حلقه پیشرفت است: تعداد ست‌ها، دوره فعال و دوره استراحت.
• تایمرها: تایمرهای موجود را مدیریت می کند و به کاربر اجازه می دهد تایمرهای جدید ایجاد کند.
• تنظیمات برگزیده: به تغییر جلوه های صوتی و خروجی گفتار و انتخاب زبان و موضوع اجازه می دهد.

اسکرین شات های زیر تصوری از برنامه را نشان می دهد.

ساختار برنامه

همانطور که در بالا ذکر شد، برنامه از یک نوار ناوبری، یک نوار تب و سه صفحه تشکیل شده است که در یک شبکه مرتب شده اند. Navbar و tabbar به صورت iframe با یک ظرف <div> در بین آنها با سه iframe دیگر برای صفحات، که یکی از آنها همیشه قابل مشاهده است و به انتخاب فعال در نوار تب بستگی دارد، تحقق می یابد. یک iframe نهایی که به about:blank اشاره می کند برای صفحات درون برنامه ای ایجاد شده به صورت پویا، که برای اصلاح تایمرهای موجود یا ایجاد تایمرهای جدید مورد نیاز هستند، استفاده می شود. من این الگو را اپلیکیشن تک صفحه ای چند صفحه ای (MPSPA) می نامم.

نشانه گذاری lit-html مبتنی بر مؤلفه ها

ساختار هر صفحه به صورت داربست html روشن می شود که در زمان اجرا به صورت پویا ارزیابی می شود. برای پس‌زمینه‌ی lit-html، یک کتابخانه قالب HTML کارآمد، رسا و قابل توسعه برای جاوا اسکریپت است. با استفاده مستقیم از آن در فایل های HTML، مدل برنامه نویسی ذهنی مستقیماً خروجی محور است. به عنوان یک برنامه نویس، شما یک الگو می نویسید که خروجی نهایی چگونه خواهد بود، و سپس lit-html شکاف ها را به صورت پویا بر اساس داده های شما پر می کند و شنوندگان رویداد را به هم متصل می کند. این برنامه از عناصر سفارشی شخص ثالث مانند <sl-progress-ring> یا یک عنصر سفارشی خود پیاده سازی شده به نام <human-duration> استفاده می کند. از آنجایی که عناصر سفارشی دارای یک API اعلامی هستند (به عنوان مثال، ویژگی 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 نیازی به اعلام مکرر ندارند. در اینجا نیز تم ها و گزینه های حالت تاریک تعریف می شوند. فهرست زیر قوانین صفحه Preferences را نشان می دهد که عناصر فرم مختلف را در یک شبکه قرار می دهد.

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 بررسی شده است.