Uygulama alanı
mini uygulama programlama yöntemini göstermek küçük ama eksiksiz bir uygulama fikrine ihtiyacım vardı. Yüksek yoğunluklu aralıklı antrenman (HIIT) bir kardiyovasküler egzersiz stratejisidir. Birçok HIIT antrenmanında HIIT zamanlayıcılar kullanılır. Örneğin, bu 30 dakikalık online seans The Body Coach TV YouTube kanalından.
HIIT Time örnek uygulaması
Bu bölümde, HIIT zamanlayıcı uygulamasına uygun bir şekilde adlandırılmış "HIIT Saati" Kullanıcının çeşitli kronometreler tanımlayıp yönetmesine olanak tanıyan her zaman yüksek ve düşük bir yoğunluk aralığından oluşur. ve eğitim oturumu için bunlardan birini seçin. Gezinme çubuğu, sekme çubuğu ve üç sayfası olan duyarlı bir uygulamadır:
- Antrenman: Antrenman sırasındaki aktif sayfa. Kullanıcının zamanlayıcılardan birini seçmesine olanak tanır ve üç ilerleme halkası bulunuyor: set sayısı, aktif dönem ve dinlenme süresi.
- Zamanlayıcılar: Mevcut zamanlayıcıları yönetir ve kullanıcının yeni zamanlayıcılar oluşturmasına olanak tanır.
- Tercihler: Ses efektleri ve konuşma çıkışının açılıp kapatılmasına, dil ve temanın seçilmesine olanak tanır.
Aşağıdaki ekran görüntüleri, uygulamaya dair bir izlenim vermektedir.
Uygulama yapısı
Yukarıda belirtildiği gibi uygulama; gezinme çubuğu, sekme çubuğu ve ızgara düzeninde üç sayfadan oluşur.
Gezinme çubuğu ve sekme çubuğu, aralarında üç iframe'in daha bulunduğu bir <div> kapsayıcısı bulunan iframe'ler olarak fark edilir
Bu sayfalardan biri her zaman görünür ve sekme çubuğundaki etkin seçime bağlıdır.
about:blank öğesine işaret eden son bir iframe, dinamik olarak oluşturulan uygulama içi sayfaları yayınlar. Bu sayfalar, mevcut öğeleri değiştirmek için
zamanlayıcılar ayarlayabilir veya yenilerini oluşturabilirsiniz.
Buna çok sayfalı tek sayfalı uygulama (MPSPA) adını veriyorum.
Bileşen tabanlı lit-html işaretlemesi
Her bir sayfanın yapısı, lit-html iskelet olarak gerçekleştirilir
dinamik olarak değerlendirilir.
Lit-html'de arka plan için JavaScript'e yönelik verimli, etkileyici, genişletilebilir bir HTML şablon kitaplığıdır.
Doğrudan HTML dosyalarında kullanıldığında zihinsel programlama modeli doğrudan çıkış odaklıdır.
Programcı olarak nihai sonucun nasıl görüneceğini gösteren bir şablon yazarsınız,
ve lit-html, boşlukları verilerinize göre dinamik olarak doldurur ve etkinlik işleyicilerin ilgisini çeker.
Uygulama, Ayakkabı Bağcığı'nın <sl-progress-ring> öğesi gibi üçüncü taraf özel öğelerinden veya <human-duration> adlı kendi kendine uygulanan bir özel öğeden yararlanıyor.
Özel öğelerin bildirim temelli bir API'si (ör. ilerleme halkasının percentage özelliği) olduğu için
ve aşağıdaki listede görebileceğiniz gibi lit-html ile birlikte iyi bir şekilde çalışırlar.
<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>
Programlama modeli
Her sayfanın, uygulamalar sağlayarak lit-html işaretlemesini hayatla dolduran karşılık gelen bir Page sınıfı vardır.
ve her sayfa için veri sağlar.
Bu sınıf onShow(), onHide(), onLoad() ve onUnload() gibi yaşam döngüsü yöntemlerini de destekler.
Sayfaların, isteğe bağlı olarak kalıcı sayfa başına durum ve genel durum paylaşımı için sunulan bir veri deposuna erişimi vardır.
Tüm dizeler merkezi olarak yönetildiği için uluslararasılaştırma yerleşiktir.
Uygulamanın tek yaptığı iframe görünürlüğünü açıp kapatmak olduğundan yönlendirme, tarayıcı tarafından ücretsiz olarak gerçekleştirilir.
dinamik olarak oluşturulmuş sayfalar için yer tutucu iframe'in src özelliğini değiştirin.
Aşağıdaki örnekte, dinamik olarak oluşturulmuş bir sayfayı kapatma kodu gösterilmektedir.
import Page from '../page.js';
const page = new Page({
eventHandlers: {
back: (e) => {
e.preventDefault();
window.top.history.back();
},
},
});
Stil
Sayfa stili, kendi kapsamlı CSS dosyasında sayfa başına yapılır.
Bu, öğelerin genellikle doğrudan öğe adlarıyla hitap edilebileceği anlamına gelir.
diğer sayfalarla çakışma olmayacağı için.
Her sayfaya genel stiller eklenir. Dolayısıyla, font-family veya box-sizing gibi merkezi ayarlar
beyan edilmeleri gerekmez.
Temalar ve koyu mod seçenekleri de burada tanımlanır.
Aşağıdaki listede, çeşitli form öğelerini düzenleyen Tercihler sayfasının kuralları gösterilmektedir
tablo üzerinde.
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;
}
Ekran uyanık kalma kilidi
Antrenman sırasında ekran kapanmamalıdır. HIIT Time, destekleyen tarayıcılarda bunu bir ekran uyanık kalma kilidi aracılığıyla gerçekleştirir. Aşağıdaki snippet'te bunun nasıl yapıldığı gösterilmektedir.
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();
}
});
}
Uygulamayı test etme
HIIT Time uygulamasına GitHub'da ulaşabilirsiniz. Yeni bir pencerede demoyu oynayabilirsiniz. veya doğrudan, bir mobil cihaz simülasyonu yapan aşağıdaki iframe'in içinde olmalıdır.
Teşekkür
Bu makale tarafından incelendi Ali Demir, Kayce Basklar, Milica Mihajlija, Alan Kent, ve Keith Gu.