Mini uygulama programlama ilkelerini örnek bir projeye uygulama

Thomas Steiner

Not: Bu gönderi, her makalenin önceki makaleler üzerine inşa edildiği bir makale koleksiyonunun parçasıdır. Bu sayfaya yeni geldiyseniz okumaya başlangıçtan başlamak isteyebilirsiniz.

Uygulama alanı

Bir web uygulamasına uygulanan mini uygulama programlama yöntemini göstermek için küçük ama yeterince eksiksiz bir uygulama fikrine ihtiyacım vardı. Yüksek efor harcanan aralıklı antrenman (HIIT), kısa süreli yoğun anaerobik egzersiz setlerinin daha az yoğun dinlenme süreleriyle dönüşümlü olarak yapıldığı bir kardiyovasküler egzersiz stratejisidir. Birçok yüksek yoğunluklu aralıklı antrenman, yüksek yoğunluklu aralıklı antrenman zamanlayıcıları kullanır. Örneğin, The Body Coach TV YouTube kanalının 30 dakikalık online oturumu.

Etkinlik dönemi.

Dinlenme süresi.

HIIT Time örnek uygulaması

Bu bölümde, kullanıcının her zaman yüksek ve düşük harcanan efor düzeyi aralıkları içeren çeşitli zamanlayıcıları tanımlayıp yönetmesine ve ardından bir antrenman seansı için bunlardan birini seçmesine olanak tanıyan, "HIIT Time" adlı uygun bir HIIT zamanlayıcı uygulamasının temel bir örneğini oluşturdum. Bu uygulama, gezinme çubuğu, sekme çubuğu ve üç sayfadan oluşan duyarlı bir uygulamadır:

• Antrenman: Antrenman sırasında etkin olan sayfa. Kullanıcının zamanlayıcılardan birini seçmesine olanak tanır ve üç ilerleme halkası içerir: set sayısı, aktif dönem ve dinlenme dönemi.
• 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 efektlerini ve konuşma çıkışını etkinleştirip devre dışı bırakmaya, dili ve temayı seçmeye olanak tanır.

Aşağıdaki ekran görüntüleri, uygulamanın nasıl göründüğüne dair fikir verir.

HIIT Time'da dikey modda "Antrenman" sekmesi.

Yatay modda HIIT Time "Antrenman" sekmesi.

HIIT Time zamanlayıcı yönetimi.

Uygulama yapısı

Yukarıda belirtildiği gibi, uygulama bir gezinme çubuğu, bir sekme çubuğu ve ızgara şeklinde düzenlenmiş üç sayfadan oluşur. Geçiş çubuğu ve sekme çubuğu, aralarında <div> kapsayıcısı bulunan iframe'ler olarak uygulanır. Sayfalar için üç iframe daha vardır. Bunlardan biri her zaman görünür ve sekme çubuğundaki etkin seçime bağlıdır. about:blank işaretine yönlendiren nihai bir iframe, mevcut zamanlayıcıları değiştirmek veya yeni zamanlayıcılar oluşturmak için gereken, dinamik olarak oluşturulan uygulama içi sayfalar için kullanılır. Bu kalıba çok sayfalı tek sayfalık uygulama (MPSPA) adını veriyorum.

Uygulama altı iframe'den oluşuyor.

Bileşen tabanlı lit-html işaretlemesi

Her sayfanın yapısı, çalışma zamanında dinamik olarak değerlendirilen bir lit-html iskeleti olarak oluşturulur. Lit-html, JavaScript için verimli, etkileyici ve 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 çıkışın nasıl görüneceğine dair bir şablon yazarsınız. Ardından lit-html, verilerinize göre boşlukları dinamik olarak doldurur ve etkinlik dinleyicilerini bağlar. Uygulama, Shoelace'in <sl-progress-ring> gibi üçüncü taraf özel öğelerini veya <human-duration> adlı kendi uyguladığı özel öğeyi kullanıyor. Özel öğeler, bildirim temelli bir API'ye (ör. ilerleme halkasının percentage özelliği) sahip olduğundan aşağıdaki listede görebileceğiniz gibi lit-html ile iyi çalışır.

<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>

Yukarıdaki işaretlemeye karşılık gelen, oluşturulmuş sayfa bölümü.

Programlama modeli

Her sayfanın, etkinlik işleyicilerinin uygulamalarını sağlayarak ve her sayfa için verileri sunarak lit-html işaretlemesini dolduran karşılık gelen bir Page sınıfı vardır. Bu sınıf, onShow(), onHide(), onLoad() ve onUnload() gibi yaşam döngüsü yöntemlerini de destekler. Sayfalar, isteğe bağlı olarak sayfaya özel kalıcı durum ve genel durum paylaşımı için kullanılan bir veri deposuna erişebilir. Tüm dizeler merkezi olarak yönetildiğinden uluslararasılaştırma yerleşiktir. Yönlendirme, tarayıcı tarafından neredeyse ücretsiz olarak gerçekleştirilir. Bunun nedeni, uygulamanın tek yaptığı işlemin iFrame görünürlüğünü açıp kapatmak ve dinamik olarak oluşturulan sayfalar için yer tutucu iFrame'in src özelliğini değiştirmek olmasıdır. Aşağıdaki örnekte, dinamik olarak oluşturulan bir sayfanın kapatılmasına ilişkin kod gösterilmektedir.

import Page from '../page.js';

const page = new Page({
  eventHandlers: {
    back: (e) => {
      e.preventDefault();
      window.top.history.back();
    },
  },
});

Gezinme, iframe'den iframe'e gerçekleşir.

Stil

Sayfaların stillendirilmesi, kendi kapsamlı CSS dosyasında sayfa bazında yapılır. Bu nedenle, diğer sayfalarla çakışma olmayacağından öğeler genellikle doğrudan öğe adlarıyla adreslenebilir. Global stiller her sayfaya eklenir. Bu nedenle font-family veya box-sizing gibi merkezi ayarların tekrar tekrar bildirilmesi gerekmez. Temalar ve koyu mod seçenekleri de burada tanımlanır. Aşağıdaki listede, çeşitli form öğelerini bir ızgara üzerinde düzenleyen Tercihler sayfasıyla ilgili kurallar gösterilmektedir.

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;
}

Her sayfa kendi dünyasıdır. Stil oluşturma işlemi doğrudan öğe adlarıyla yapılır.

Ekran uyanık kalma kilidi

Egzersiz sırasında ekran kapanmamalıdır. HIIT Time, bunu destekleyen tarayıcılarda uyanık kalma kilidi aracılığıyla gerçekleştirir. Aşağıdaki snippet'te bu işlemin 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ı GitHub'da mevcuttur. Yeni bir pencerede demoyu deneyebilir veya mobil cihazı simüle eden aşağıdaki iframe yerleştirmesinde doğrudan oynayabilirsiniz.

Başarı: Son bölüm, mini uygulamalardaki bu koleksiyonu bir sonuçla bitirir.

Teşekkür

Bu makale Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent ve Keith Gu tarafından incelenmiştir.