उदाहरण प्रोजेक्ट में मिनी ऐप्लिकेशन की प्रोग्रामिंग के सिद्धांतों को लागू करना

Thomas Steiner

ध्यान दें: यह पोस्ट, लेखों के एक कलेक्शन का हिस्सा है. इसमें हर लेख, पिछले लेखों पर आधारित होता है. अगर आपने अभी-अभी इस पेज पर विज़िट किया है, तो शुरुआत से पढ़ना शुरू करें.

ऐप्लिकेशन का डोमेन

किसी वेब ऐप्लिकेशन पर लागू होने वाले मिनी ऐप्लिकेशन तरीके से प्रोग्रामिंग करने के लिए, मुझे ऐप्लिकेशन के एक छोटे आइडिया की ज़रूरत थी. हाई इंटेंसिटी इंटरवल ट्रेनिंग (एचआईआईटी) कार्डियोवस्क्युलर कसरत की एक रणनीति है. इसमें कम समय में बहुत ज़्यादा एनारोबिक कसरत करने और रिकवरी की प्रक्रिया में थोड़ा समय लगता है. एचआईआईटी ट्रेनिंग में, एचआईआईटी टाइमर का इस्तेमाल किया जाता है. उदाहरण के लिए, The Body Coach TV YouTube चैनल का यह 30 मिनट का ऑनलाइन सेशन.

चालू रहने की अवधि.

आराम करने की अवधि.

HIIT टाइम ऐप्लिकेशन का उदाहरण

इस चैप्टर के लिए, मैंने HIIT टाइमर वाले ऐसे ऐप्लिकेशन का एक बुनियादी उदाहरण बनाया है जिसका नाम "HIIT टाइम" है. इसकी मदद से, उपयोगकर्ता अलग-अलग टाइमर तय कर सकता है और उन्हें मैनेज कर सकता है. इन टाइमर में हमेशा हाई और लो इंटेंसिटी वाला इंटरवल होता है. इसके बाद, ट्रेनिंग सेशन के लिए इनमें से किसी एक को चुना जा सकता है. यह नेवबार, टैबबार, और तीन पेजों वाला रिस्पॉन्सिव ऐप्लिकेशन है:

• कसरत: कसरत के दौरान चालू पेज. इसकी मदद से, उपयोगकर्ता किसी एक टाइमर को चुन सकता है. साथ ही, इसमें प्रोग्रेस के तीन रिंग होते हैं: सेट की संख्या, ऐक्टिव अवधि, और आराम करने की अवधि.
• टाइमर: यह मौजूदा टाइमर मैनेज करता है और उपयोगकर्ता को नए टाइमर बनाने की सुविधा देता है.
• प्राथमिकताएं: इसकी मदद से, साउंड इफ़ेक्ट और बोली को टॉगल किया जा सकता है. साथ ही, भाषा और थीम को भी चुना जा सकता है.

नीचे दिए गए स्क्रीनशॉट, ऐप्लिकेशन का इंप्रेशन दिखाते हैं.

पोर्ट्रेट मोड में एचआईआईटी टाइम "कसरत" टैब.

लैंडस्केप मोड में, HIIT Time "कसरत" टैब.

HIIT टाइम टाइमर मैनेजमेंट.

ऐप्लिकेशन का स्ट्रक्चर

जैसा कि ऊपर बताया गया है, ऐप्लिकेशन में एक नेविगेशन बार, एक टैब बार, और तीन पेज होते हैं. इन्हें ग्रिड में व्यवस्थित किया जाता है. नेविगेशन बार और टैबबार को iframe के तौर पर दिखाया जाता है. इनके बीच में <div> कंटेनर होता है. इसमें पेजों के लिए तीन और iframe होते हैं. इनमें से एक हमेशा दिखता है और यह टैबबार में चुने गए विकल्प पर निर्भर करता है. about:blank पर ले जाने वाला फ़ाइनल iframe, डाइनैमिक तौर पर बनाए गए इन-ऐप्लिकेशन पेजों के लिए काम करता है. इनकी ज़रूरत, मौजूदा टाइमर में बदलाव करने या नए टाइमर बनाने के लिए होती है. हम इस पैटर्न को मल्टी-पेज सिंगल-पेज ऐप्लिकेशन (एमपीएसपीए) कहते हैं.

इस ऐप्लिकेशन में छह iframe हैं.

कॉम्पोनेंट पर आधारित lit-html मार्कअप

हर पेज का स्ट्रक्चर, lit-html स्कैफ़ोल्ड के तौर पर दिखता है. इसकी जांच, रनटाइम के दौरान डाइनैमिक तौर पर की जाती है. lit-html के बारे में जानकारी के लिए, यह एक बेहतर, बेहतरीन, और एक्सटेंसिबल एचटीएमएल टेंप्लेटिंग लाइब्रेरी है. यह JavaScript के लिए है. सीधे एचटीएमएल फ़ाइलों में इसका इस्तेमाल करके, मेनटल प्रोग्रामिंग मॉडल सीधे आउटपुट पर आधारित होता है. प्रोग्रामर के तौर पर, आपने एक टेंप्लेट लिखा है कि फ़ाइनल आउटपुट कैसा दिखेगा. इसके बाद, lit-html आपके डेटा के आधार पर डाइनैमिक तौर पर गैप भरता है और इवेंट के लिसनर को जोड़ता है. ऐप्लिकेशन, तीसरे पक्ष के कस्टम एलिमेंट का इस्तेमाल करता है. जैसे, Shoelace का <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();
    },
  },
});

नेविगेशन, iframe से iframe तक होता है.

शैलीकृत करना

पेजों को स्टाइल करने के लिए, हर पेज के लिए अलग-अलग स्कोप वाली सीएसएस फ़ाइल बनाई जाती है. इसका मतलब है कि आम तौर पर, एलिमेंट को सीधे उनके एलिमेंट के नाम से ही ऐक्सेस किया जा सकता है, क्योंकि दूसरे पेजों के साथ कोई टकराव नहीं हो सकता. ग्लोबल स्टाइल हर पेज में जोड़े जाते हैं, इसलिए 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 Time स्क्रीन वॉक लॉक की मदद से ऐसा करता है. नीचे दिए गए स्निपेट में, यह तरीका बताया गया है.

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 Time ऐप्लिकेशन GitHub पर उपलब्ध है. आप नई विंडो में डेमो के साथ या नीचे दिए गए iframe एम्बेड में जा सकते हैं, जो मोबाइल डिवाइस को सिम्युलेट करता है.

सफलता: आखिरी चैप्टर में, मिनी ऐप्लिकेशन के इस कलेक्शन को नतीजे के साथ खत्म किया जाता है.

स्वीकार की गई

इस लेख की समीक्षा, जो मेडली, किस बेस्केस, मिलिका मिहाइलिया, ऐलन केंट, और कीथ गु ने की.