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

Thomas Steiner

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

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

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

ऐक्टिव पीरियड.

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

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

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

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

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

HIIT टाइम "कसरत" टैब को पोर्ट्रेट मोड में रखें.

HIIT टाइम "कसरत" टैब को लैंडस्केप मोड में कर सकते हैं.

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

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

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

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

कॉम्पोनेंट पर आधारित 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();
    },
  },
});

नेविगेशन 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 में एम्बेड करें, जो मोबाइल डिवाइस को सिम्युलेट करता है.

को दबाकर रखें

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

स्वीकार की गई

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