ऐप्लिकेशन डोमेन
किसी वेब ऐप्लिकेशन पर लागू किए गए mini ऐप्लिकेशन के प्रोग्रामिंग का तरीका दिखाने के लिए, मुझे ऐप्लिकेशन के एक छोटे लेकिन आइडिया की ज़रूरत थी. हाई-इंटेंसिटी इंटरवल ट्रेनिंग (एचआईआईटी), कार्डियोवैस्क्युलर एक्सरसाइज़ रणनीति है. इसमें कम समय के लिए तेज़ रफ़्तार वाली अवायवीय कसरतें भी शामिल की जाती हैं. कई एचआईआईटी ट्रेनिंग में, एचआईआईटी टाइमर का इस्तेमाल किया जाता है. उदाहरण के लिए, The Body Coach TV के YouTube चैनल का 30 मिनट का यह ऑनलाइन सेशन.
HIIT समय का उदाहरण ऐप
इस चैप्टर के लिए, मैंने एक एचआईआईटी टाइमर ऐप्लिकेशन का एक बुनियादी उदाहरण तैयार किया है, जिसे "एचआईआईटी टाइम" के नाम से जाना जाता है. इससे लोग अलग-अलग टाइमर को परिभाषित और मैनेज कर सकते हैं. इसमें कम और ज़्यादा अवधि वाले टाइमर हैं और फिर ट्रेनिंग सेशन के लिए उनमें से किसी एक को चुना जा सकता है. यह नेविगेशन बार, टैबबार, और तीन पेजों वाला एक रिस्पॉन्सिव ऐप्लिकेशन है:
- कसरत: कसरत के दौरान इस्तेमाल किया जाने वाला पेज. यह उपयोगकर्ता को कोई टाइमर चुनने की सुविधा देता है. साथ ही, इसमें तीन प्रोग्रेस रिंग की सुविधा होती है: सेट की संख्या, ऐक्टिव पीरियड, और आराम की अवधि.
- टाइमर: इससे मौजूदा टाइमर मैनेज किए जाते हैं और उपयोगकर्ता को नए टाइमर बनाने की सुविधा मिलती है.
- प्राथमिकताएं: इससे साउंड इफ़ेक्ट और स्पीच आउटपुट को टॉगल करने के साथ-साथ भाषा और थीम चुनने की सुविधा मिलती है.
ये स्क्रीनशॉट, ऐप्लिकेशन का इंप्रेशन दिखाते हैं.
ऐप्लिकेशन का स्ट्रक्चर
जैसा कि ऊपर बताया गया है, ऐप्लिकेशन में एक ग्रिड में व्यवस्थित किया गया एक नेविगेशन बार, एक टैबबार, और तीन पेज होते हैं.
नेविगेशन बार और टैबबार को iframe के रूप में दिखाया जाता है, जिनके बीच में <div> कंटेनर होता है और पेजों के बीच तीन iframe होते हैं. इनमें से एक हमेशा दिखता है और टैबबार में चुने गए विकल्प पर निर्भर होता है.
about:blank को पॉइंट करने वाला फ़ाइनल iframe, डाइनैमिक तौर पर बनाए गए इन-ऐप्लिकेशन पेजों के लिए काम करता है. ये मौजूदा टाइमर में बदलाव करने या नए टाइमर बनाने के लिए ज़रूरी हैं.
मैं इस पैटर्न को एक से ज़्यादा पेज वाले एक पेज वाले ऐप्लिकेशन (MPSPA) को कॉल करता/करती हूं.
कॉम्पोनेंट पर आधारित lit-html मार्कअप
हर पेज की संरचना को lit-html स्कैफ़ेल्ड के तौर पर दिखाया जाता है, जिसका रनटाइम के दौरान डाइनैमिक तौर पर आकलन किया जाता है.
lit-html के बैकग्राउंड के लिए, यह JavaScript के लिए एक बेहतर, एक्सप्रेसिव, और एक्सटेंसिबल एचटीएमएल टेंप्लेटिंग लाइब्रेरी है.
सीधे एचटीएमएल फ़ाइलों में इस्तेमाल करने से, मेंटल प्रोग्रामिंग मॉडल सीधे तौर पर आउटपुट के लिए तैयार होता है.
एक प्रोग्रामर के तौर पर, आप एक टेंप्लेट लिखते हैं कि फ़ाइनल आउटपुट कैसा दिखेगा.
इसके बाद, lit-html आपके डेटा के आधार पर डाइनैमिक तौर पर खाली जगह को भरता है और इवेंट लिसनर को जोड़ता है.
यह ऐप्लिकेशन तीसरे पक्ष के कस्टम एलिमेंट का इस्तेमाल करता है, जैसे कि जूते का फ़ीता <sl-progress-ring> या खुद लागू किया गया कस्टम एलिमेंट, जिसे <human-duration> कहते हैं.
कस्टम एलिमेंट में डिक्लेरेटिव एपीआई (उदाहरण के लिए, प्रोग्रेस रिंग का percentage एट्रिब्यूट) होता है. इसलिए, वे lit-html के साथ अच्छी तरह से काम करते हैं, जैसा कि नीचे दी गई सूची में देखा जा सकता है.
<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>
प्रोग्रामिंग मॉडल
हर पेज की एक Page क्लास होती है, जो lit-html मार्कअप को लाइफ़स्टाइल से भरती है. ऐसा करने के लिए, इवेंट हैंडलर को लागू करना और हर पेज के लिए डेटा देना होता है.
यह क्लास, onShow(), onHide(), onLoad(), और onUnload() जैसे लाइफ़साइकल तरीकों के साथ भी काम करती है.
पेजों के पास ऐसे डेटा स्टोर का ऐक्सेस होता है जिससे हर पेज की स्थिति और ग्लोबल स्थिति के हिसाब से डेटा शेयर किया जा सकता है.
सभी स्ट्रिंग एक ही जगह से मैनेज की जाती हैं, इसलिए अंतरराष्ट्रीय स्तर पर इसकी सुविधा उपलब्ध होती है.
रूटिंग को ब्राउज़र, खास तौर पर बिना किसी शुल्क के मैनेज करता है, क्योंकि सभी ऐप्लिकेशन, iframe के दिखने की सेटिंग को टॉगल करते हैं. साथ ही, डाइनैमिक तरीके से बनाए गए पेजों के लिए, प्लेसहोल्डर iframe के src एट्रिब्यूट को बदल देते हैं.
नीचे दिया गया उदाहरण, डाइनैमिक तौर पर बनाए गए पेज को बंद करने का कोड दिखाता है.
import Page from '../page.js';
const page = new Page({
eventHandlers: {
back: (e) => {
e.preventDefault();
window.top.history.back();
},
},
});
शैलीकृत करना
पेजों की स्टाइल, अपने स्कोप वाली सीएसएस फ़ाइल में हर पेज के हिसाब से बनाई जाती है.
इसका मतलब है कि एलिमेंट को सीधे तौर पर उनके एलिमेंट के नाम से पहचाना जा सकता है,
क्योंकि यह अन्य पेजों से मेल नहीं खाता.
हर पेज पर ग्लोबल स्टाइल जोड़े जाते हैं. इसलिए, font-family या box-sizing जैसी मुख्य सेटिंग को बार-बार एलान करने की ज़रूरत नहीं होती.
यहां थीम और गहरे रंग वाले मोड के विकल्प भी तय किए जाते हैं.
नीचे दी गई सूची में प्राथमिकता पेज के नियम दिखाए गए हैं, जो ग्रिड में अलग-अलग तरह के फ़ॉर्म एलिमेंट
बताते हैं.
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;
}
स्क्रीन वेक लॉक
कसरत के दौरान, स्क्रीन बंद नहीं होनी चाहिए. इस पर काम करने वाले ब्राउज़र पर, HIIT टाइम को इसका पता स्क्रीन वेक लॉक के ज़रिए लगता है. नीचे दिया गया स्निपेट दिखाता है कि यह कैसे किया जाता है.
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();
}
});
}
ऐप्लिकेशन की जांच करना
HIIT टाइम ऐप्लिकेशन, GitHub पर उपलब्ध है. आप एक नई विंडो में डेमो के साथ या नीचे दिए गए iframe एम्बेड में खेल सकते हैं, जो मोबाइल डिवाइस की तरह काम करता है.
स्वीकार हैं
इस लेख की समीक्षा जो मेडली, कायस बास्क्स, मिलिका मिहाजलिया, ऐलन केंट, और कीथ गू ने की है.