Domain aplikasi
Untuk menunjukkan cara mini pemrograman aplikasi yang diterapkan ke aplikasi web, saya membutuhkan ide aplikasi yang kecil tetapi cukup lengkap. Pelatihan interval intensitas tinggi (HIIT) adalah strategi latihan kardiovaskular yang bergantian melakukan serangkaian latihan anaerobik intens dalam waktu singkat dengan periode pemulihan yang kurang intens. Banyak pelatihan HIIT menggunakan timer HIIT, misalnya, sesi online 30 menit dari channel YouTube The Body Coach TV.
Aplikasi contoh HIIT Time
Untuk bab ini, saya telah membuat contoh dasar aplikasi timer HIIT yang diberi nama "HIIT Time" yang memungkinkan pengguna menentukan dan mengelola berbagai timer, selalu terdiri dari interval intensitas tinggi dan rendah, lalu memilih salah satunya untuk sesi pelatihan. Aplikasi ini adalah aplikasi responsif dengan navbar, tabbar, dan tiga halaman:
- Olahraga: Halaman aktif selama olahraga. Hal ini memungkinkan pengguna memilih salah satu timer dan menampilkan tiga lingkaran progres: jumlah set, periode aktif, dan periode istirahat.
- Timer: Mengelola timer yang ada dan memungkinkan pengguna membuat timer baru.
- Preferensi: Memungkinkan Anda untuk beralih efek suara dan output ucapan serta memilih bahasa dan tema.
Screenshot berikut memberikan kesan tentang aplikasi ini.
Struktur aplikasi
Seperti yang diuraikan di atas, aplikasi ini terdiri dari navbar, tabbar, dan tiga halaman, yang disusun dalam petak.
Navbar dan tabbar direalisasikan sebagai iframe dengan container <div>
di antara keduanya dengan tiga iframe tambahan
untuk halaman tersebut, dan satu di antaranya 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 mengubah timer yang ada atau membuat yang baru.
Saya menyebut pola ini sebagai aplikasi satu halaman (MPSPA) multi-halaman.
Markup lit-html berbasis komponen
Struktur setiap halaman diwujudkan sebagai scaffold lit-html
yang dievaluasi secara dinamis saat runtime.
Untuk latar belakang di lit-html, ini adalah library pembuatan template HTML yang efisien, ekspresif, dan dapat diperluas untuk JavaScript.
Dengan menggunakannya langsung di {i>file<i} HTML, model pemrograman mental berorientasi pada {i>output<i} secara langsung.
Sebagai programmer, Anda dapat menulis template yang akan menampilkan hasil akhir, lalu lit-html akan mengisi kesenjangan secara dinamis berdasarkan data Anda dan menghubungkan pemroses peristiwa.
Aplikasi menggunakan elemen kustom pihak ketiga seperti <sl-progress-ring>
Shoelace atau elemen kustom yang diimplementasikan sendiri yang disebut <human-duration>
.
Karena elemen khusus memiliki API deklaratif (misalnya, atribut percentage
dari lingkaran progres),
elemen tersebut berfungsi baik bersama lit-html, seperti yang dapat Anda lihat dalam listingan di bawah.
<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>
Model pemrograman
Setiap halaman memiliki class Page
yang sesuai, yang mengisi markup lit-html dengan data yang aktif dengan memberikan 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 global dan status per halaman yang dipertahankan secara opsional.
Semua string dikelola secara terpusat, sehingga internasionalisasi sudah terintegrasi.
Pada dasarnya, perutean ditangani oleh browser secara gratis, karena aplikasi hanya dapat mengalihkan 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();
},
},
});
Gaya visual
Penggayaan halaman terjadi per halaman dalam file CSS cakupannya sendiri.
Ini berarti elemen biasanya dapat langsung ditangani dengan nama elemennya,
karena bentrok dengan halaman lain tidak dapat terjadi.
Gaya global ditambahkan ke setiap halaman, sehingga setelan pusat seperti font-family
atau box-sizing
tidak perlu dideklarasikan berulang kali.
Di sinilah tema dan opsi mode gelap ditentukan.
Daftar di bawah ini menunjukkan aturan untuk halaman Preferensi yang mengatur berbagai elemen formulir
pada petak.
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;
}
Penguncian layar saat aktif
Selama latihan fisik, layar tidak boleh mati. 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 langsung di sematan iframe di bawah ini, yang menyimulasikan perangkat seluler.
Ucapan terima kasih
Artikel ini ditinjau oleh Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, dan Keith Gu.