دامنه برنامه
برای نشان دادن نحوه برنامهنویسی مینیاپلیکیشن که در یک اپلیکیشن وب اعمال میشود، به یک ایده اپلیکیشن کوچک اما به اندازه کافی کامل نیاز داشتم. تمرین اینتروال با شدت بالا (HIIT) یک استراتژی ورزشی قلبی عروقی است که شامل مجموعههای متناوب از دورههای کوتاه ورزش بیهوازی شدید با دورههای ریکاوری با شدت کمتر است. بسیاری از تمرینات HIIT از تایمرهای HIIT استفاده میکنند، به عنوان مثال، این جلسه آنلاین 30 دقیقهای از کانال یوتیوب The Body Coach TV .
برنامه مثال HIIT Time
برای این فصل، من یک نمونه اولیه از چنین برنامه تایمر HIIT را که به درستی "HIIT Time" نامگذاری شده است، ساختهام که به کاربر اجازه میدهد تایمرهای مختلفی را که همیشه شامل یک بازه شدت بالا و یک بازه شدت پایین هستند، تعریف و مدیریت کند و سپس یکی از آنها را برای یک جلسه تمرینی انتخاب کند. این یک برنامه واکنشگرا با یک نوار ناوبری، یک نوار تب و سه صفحه است:
- تمرین: صفحه فعال در طول تمرین. این صفحه به کاربر اجازه میدهد یکی از تایمرها را انتخاب کند و دارای سه حلقه پیشرفت است: تعداد ستها، دوره فعال و دوره استراحت.
- تایمرها: تایمرهای موجود را مدیریت میکند و به کاربر اجازه میدهد تایمرهای جدید ایجاد کند.
- تنظیمات برگزیده: امکان تغییر جلوههای صوتی و خروجی گفتار و انتخاب زبان و قالب را فراهم میکند.
تصاویر زیر، نمایی از محیط برنامه را نشان میدهند.
ساختار برنامه
همانطور که در بالا ذکر شد، این برنامه شامل یک نوار ناوبری، یک نوار تب و سه صفحه است که به صورت شبکهای مرتب شدهاند. نوار ناوبری و نوار تب به صورت iframeهایی با یک کانتینر <div> در بین آنها و سه iframe دیگر برای صفحات نمایش داده میشوند که یکی از آنها همیشه قابل مشاهده است و به انتخاب فعال در نوار تب بستگی دارد. یک iframe نهایی که به about:blank اشاره میکند، برای صفحات درون برنامهای پویا ایجاد شده استفاده میشود که برای تغییر تایمرهای موجود یا ایجاد تایمرهای جدید مورد نیاز هستند. من این الگو را برنامه تک صفحهای چند صفحهای (MPSPA) مینامم.
نشانهگذاری lit-html مبتنی بر اجزا
ساختار هر صفحه به صورت چارچوب lit-html پیادهسازی میشود که به صورت پویا در زمان اجرا ارزیابی میشود. برای پیشزمینهای در مورد lit-html، باید گفت که این یک کتابخانه قالببندی HTML کارآمد، رسا و قابل توسعه برای جاوا اسکریپت است. با استفاده مستقیم از آن در فایلهای HTML، مدل برنامهنویسی ذهنی مستقیماً خروجیگرا میشود. به عنوان یک برنامهنویس، شما یک الگو از خروجی نهایی مینویسید و lit-html سپس شکافها را به صورت پویا بر اساس دادههای شما پر میکند و شنوندههای رویداد را به هم متصل میکند. این برنامه از عناصر سفارشی شخص ثالث مانند <sl-progress-ring> در Shoelace یا یک عنصر سفارشی خودپیادهسازی شده به نام <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 نیازی به اعلان مکرر ندارند. همچنین در اینجا تمها و گزینههای حالت تاریک تعریف میشوند. لیست زیر قوانین مربوط به صفحه تنظیمات را نشان میدهد که عناصر مختلف فرم را روی یک شبکه قرار میدهد.
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 در گیتهاب موجود است. میتوانید نسخه آزمایشی را در یک پنجره جدید یا مستقیماً در iframe تعبیهشده در زیر که یک دستگاه تلفن همراه را شبیهسازی میکند، اجرا کنید.
تقدیرنامهها
این مقاله توسط جو مدلی ، کیس باسک ، میلیکا میهالیا ، آلن کنت و کیث گو بررسی شده است.