Mini uygulama programlama ilkelerini örnek bir projeye uygulama

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.

Yeşil yüksek yoğunluklu zamanlayıcıyla HIIT eğitimi online oturumu.
Aktif olunan dönem.
ziyaret edin.
'nı inceleyin.
Kırmızı düşük yoğunluklu zamanlayıcıyla HIIT eğitimi online oturumu.
Dinlenme süresi.

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.

Dikey modda HIIT Time örnek uygulaması.
HIIT Zamanı "Antrenman" sekmesini açın.
ziyaret edin.
'nı inceleyin.
Yatay modda HIIT Time örnek uygulaması.
HIIT Zamanı "Antrenman" sekmesini yatay modda görüntüleyin.
ziyaret edin.
'nı inceleyin.
Zamanlayıcı yönetimini gösteren örnek HIIT Time uygulaması.
HIIT süre zamanlayıcı yönetimi.

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.

Uygulamanın, altı iframe&#39;den oluştuğunu gösteren Chrome Geliştirici Araçları görünümü, biri gezinme çubuğu, biri sekme çubuğu ve üç tane de uygulamanın her sayfası için gruplandırılmış üç iframe&#39;den oluşur ve dinamik sayfalar için son yer tutucu iframe&#39;dir.
Uygulama altı iframe'den oluşur.

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>
Üç düğme ve bir ilerleme halkası.
Sayfanın yukarıdaki işaretlemeye karşılık gelen oluşturulan bölümü.

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();
    },
  },
});
iFrame olarak gerçekleşen uygulama içi sayfa.
Gezinme, iframe'den iframe'e gerçekleşir.

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;
}
Izgara düzeninde bir form gösteren HIIT Zaman uygulaması tercihleri sayfası.
Her sayfa kendi dünyasıdır. Stil oluşturma işlemi doğrudan öğe adlarıyla gerçekleşir.

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.