Menerapkan prinsip-prinsip pemrograman aplikasi mini pada contoh project

Thomas Steiner

Domain aplikasi

Untuk menunjukkan cara pemrograman mini aplikasi diterapkan ke aplikasi web, saya membutuhkan ide aplikasi yang kecil tapi cukup lengkap. Pelatihan interval intensitas tinggi (HIIT) adalah strategi latihan kardiovaskular yang terdiri dari serangkaian latihan anaerobik intens dalam jangka pendek dengan periode pemulihan yang kurang intens. Banyak pelatihan HIIT yang menggunakan timer HIIT, misalnya, sesi online 30 menit ini dari channel YouTube The Body Coach TV.

Sesi online pelatihan HIIT dengan timer intensitas tinggi berwarna hijau.
Periode aktif.
Sesi online pelatihan HIIT dengan timer intensitas rendah merah.
Masa istirahat.

aplikasi contoh HIIT Time

Untuk bab ini, saya telah membuat contoh dasar aplikasi timer HIIT yang diberi nama dengan tepat "Waktu HIIT" yang memungkinkan pengguna menentukan dan mengelola berbagai timer, selalu terdiri dari interval intensitas tinggi dan rendah, dan kemudian memilih salah satunya untuk sesi pelatihan. Ini adalah aplikasi responsif dengan menu navigasi, tabbar, dan tiga halaman:

  • Latihan fisik: Halaman aktif selama olahraga. Memungkinkan pengguna memilih salah satu timer dan menampilkan tiga lingkaran progres: jumlah set, periode aktif, dan periode istirahat.
  • Timer:Mengelola timer yang sudah ada dan memungkinkan pengguna membuat timer baru.
  • Preferensi: Memungkinkan Anda mengganti efek suara dan output ucapan, serta memilih bahasa dan tema.

Screenshot berikut memberikan kesan aplikasi.

Aplikasi contoh HIIT Time dalam mode potret.
"Latihan Fisik" Waktu HIIT tab dalam mode potret.
Aplikasi contoh Waktu HIIT dalam mode lanskap.
"Latihan Fisik" Waktu HIIT tab dalam mode lanskap.
Aplikasi contoh HIIT Time yang menunjukkan pengelolaan timer.
Pengelolaan timer waktu HIIT.

Struktur aplikasi

Seperti yang diuraikan di atas, aplikasi ini terdiri dari menu navigasi, tabbar, dan tiga halaman, yang disusun dalam petak. Navbar dan tabbar direalisasikan sebagai iframe dengan penampung <div> di antara keduanya dengan tiga iframe tambahan untuk halaman, yang salah satunya akan selalu terlihat dan bergantung pada pilihan aktif di tabbar. iframe akhir yang mengarah ke about:blank berfungsi untuk halaman dalam aplikasi yang dibuat secara dinamis, yang diperlukan untuk memodifikasi halaman yang ada {i>timer<i} atau membuat yang baru. Saya menyebut pola ini multi-halaman aplikasi satu halaman (MPSPA).

Tampilan Chrome DevTools untuk struktur HTML aplikasi yang menunjukkan bahwa aplikasi tersebut terdiri dari enam iframe: satu untuk menu navigasi, satu untuk tabbar, dan tiga yang dikelompokkan untuk setiap halaman aplikasi, dengan iframe placeholder akhir untuk halaman dinamis.
Aplikasi ini terdiri dari enam iframe.

Markup lit-html berbasis komponen

Struktur setiap halaman direalisasikan sebagai scaffold lit-html yang dievaluasi secara dinamis saat runtime. Untuk latar belakang pada lit-html, library ini adalah library template HTML yang efisien, ekspresif, dan dapat diperluas untuk JavaScript. Dengan menggunakannya langsung dalam {i>file<i} HTML, model pemrograman mental secara langsung berorientasi pada output. Sebagai {i>programmer<i}, Anda menulis {i>template<i} tentang seperti apa {i>output<i} akhir nantinya, dan lit-html kemudian mengisi kekurangan data secara dinamis berdasarkan data Anda dan menghubungkan pemroses peristiwa. Aplikasi ini menggunakan elemen kustom pihak ketiga, seperti <sl-progress-ring>, Shoelace, atau elemen kustom yang diterapkan sendiri, yang disebut <human-duration>. Karena elemen kustom memiliki API deklaratif (misalnya, atribut percentage dari lingkaran progres), mereka bekerja sama dengan baik dengan lit-html, seperti yang bisa Anda lihat dalam daftar di bawah ini.

<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>
Tiga tombol dan sebuah lingkaran progres.
Bagian halaman yang dirender sesuai dengan markup di atas.

Model pemrograman

Setiap halaman memiliki class Page yang sesuai, yang mengisi markup lit-html dengan aktif dengan menyediakan implementasi pengendali peristiwa dan menyediakan data untuk setiap halaman. Class ini juga mendukung metode siklus proses seperti onShow(), onHide(), onLoad(), dan onUnload(). Halaman memiliki akses ke penyimpanan data yang berfungsi untuk membagikan status per halaman dan status global yang dipertahankan secara opsional. Semua string dikelola secara terpusat, sehingga internasionalisasi terintegrasi. Perutean pada dasarnya ditangani oleh browser secara gratis, karena yang dilakukan aplikasi hanyalah beralih visibilitas iframe dan untuk halaman yang dibuat secara dinamis, ubah atribut src iframe placeholder. Contoh di bawah ini menampilkan kode untuk menutup halaman yang dibuat secara dinamis.

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

const page = new Page({
  eventHandlers: {
    back: (e) => {
      e.preventDefault();
      window.top.history.back();
    },
  },
});
Halaman dalam aplikasi direalisasikan sebagai iframe.
Navigasi dilakukan dari iframe ke iframe.

Penataan gaya

Gaya halaman terjadi per halaman dalam file CSS cakupannya sendiri. Ini berarti, elemen biasanya dapat langsung ditangani oleh nama elemennya, karena tidak ada benturan dengan laman lain yang bisa terjadi. Gaya global ditambahkan ke setiap halaman, jadi setelan pusat seperti font-family atau box-sizing tidak perlu dideklarasikan berulang kali. Di sinilah opsi tema dan mode gelap ditentukan. Listingan di bawah ini menunjukkan aturan untuk halaman Preferensi yang menjabarkan berbagai elemen formulir pada {i>grid<i}.

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;
}
Halaman preferensi aplikasi HIIT Time yang menampilkan formulir dalam tata letak petak.
Setiap halaman adalah dunianya sendiri. Penataan gaya terjadi secara langsung dengan nama elemen.

Penguncian layar saat aktif

Selama latihan fisik, layar tidak boleh dinonaktifkan. Pada browser yang mendukungnya, HIIT Time menyadari hal ini melalui penguncian layar saat aktif. Cuplikan di bawah menunjukkan cara melakukannya.

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

Menguji aplikasi

Aplikasi HIIT Time tersedia di GitHub. Anda dapat mencoba demo di jendela baru. atau tepat di sematan iframe di bawah, yang menyimulasikan perangkat seluler.

Ucapan terima kasih

Artikel ini telah ditinjau oleh Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, dan Keith Gu.