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.](https://web.dev/static/articles/mini-apps/mini-app-example-project/image/hiit-training-online-sess-ed5b035be1093.png?authuser=4&hl=id)
![Sesi online pelatihan HIIT dengan timer intensitas rendah merah.](https://web.dev/static/articles/mini-apps/mini-app-example-project/image/hiit-training-online-sess-a0dd5340756f1.png?authuser=4&hl=id)
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.
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.](https://web.dev/static/articles/mini-apps/mini-app-example-project/image/chrome-devtools-view-the-9da043317ba5b.png?authuser=4&hl=id)
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.](https://web.dev/static/articles/mini-apps/mini-app-example-project/image/three-buttons-a-progress-df2f6a20c093.png?authuser=4&hl=id)
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.](https://web.dev/static/articles/mini-apps/mini-app-example-project/image/in-app-page-realized-an-25ec73e15af7f.png?authuser=4&hl=id)
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.](https://web.dev/static/articles/mini-apps/mini-app-example-project/image/hiit-app-preferences-pag-3d83359174159.png?authuser=4&hl=id)
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.