একটি উদাহরণ প্রকল্পে মিনি অ্যাপ প্রোগ্রামিং নীতিগুলি প্রয়োগ করা

Thomas Steiner

অ্যাপ ডোমেইন

একটি ওয়েব অ্যাপে মিনি অ্যাপ পদ্ধতিতে প্রোগ্রামিং-এর প্রয়োগ দেখানোর জন্য, আমার একটি ছোট কিন্তু যথেষ্ট পূর্ণাঙ্গ অ্যাপের ধারণা প্রয়োজন ছিল। হাই-ইনটেনসিটি ইন্টারভাল ট্রেনিং (HIIT) হলো একটি কার্ডিওভাসকুলার ব্যায়াম কৌশল, যেখানে স্বল্প সময়ের তীব্র অ্যানেরোবিক ব্যায়ামের সেটের সাথে কম তীব্রতার বিশ্রামের সময় পর্যায়ক্রমে করা হয়। অনেক HIIT ট্রেনিং-এ HIIT টাইমার ব্যবহার করা হয়, যেমন, The Body Coach TV ইউটিউব চ্যানেলের এই ৩০ মিনিটের অনলাইন সেশনটি ।

HIIT টাইম উদাহরণ অ্যাপ

এই অধ্যায়ের জন্য, আমি 'HIIT Time' নামক একটি HIIT টাইমার অ্যাপ্লিকেশনের একটি প্রাথমিক উদাহরণ তৈরি করেছি, যা ব্যবহারকারীকে উচ্চ এবং নিম্ন তীব্রতার ব্যবধান সম্বলিত বিভিন্ন টাইমার নির্ধারণ ও পরিচালনা করতে এবং তারপর একটি প্রশিক্ষণ সেশনের জন্য সেগুলোর মধ্যে থেকে যেকোনো একটি বেছে নিতে দেয়। এটি একটি রেসপন্সিভ অ্যাপ, যাতে একটি নেভবার, একটি ট্যাববার এবং তিনটি পৃষ্ঠা রয়েছে।

• ওয়ার্কআউট: ওয়ার্কআউট চলাকালীন এটি সক্রিয় থাকে। এটি ব্যবহারকারীকে টাইমারগুলোর মধ্যে একটি বেছে নেওয়ার সুযোগ দেয় এবং এতে তিনটি অগ্রগতি রিং থাকে: সেটের সংখ্যা, সক্রিয় থাকার সময়কাল এবং বিশ্রামের সময়কাল।
• টাইমার: বিদ্যমান টাইমারগুলো পরিচালনা করে এবং ব্যবহারকারীকে নতুন টাইমার তৈরি করার সুযোগ দেয়।
• পছন্দসমূহ: এর মাধ্যমে সাউন্ড ইফেক্ট ও স্পিচ আউটপুট চালু বা বন্ধ করা এবং ভাষা ও থিম নির্বাচন করা যায়।

নিম্নলিখিত স্ক্রিনশটগুলো অ্যাপ্লিকেশনটি সম্পর্কে একটি ধারণা দেবে।

অ্যাপের কাঠামো

উপরে বর্ণিত হিসাবে, অ্যাপটি একটি নেভবার, একটি ট্যাববার এবং তিনটি পেজ নিয়ে গঠিত, যা একটি গ্রিডে সাজানো। নেভবার এবং ট্যাববারকে আইফ্রেম হিসাবে তৈরি করা হয়েছে, যার মাঝে একটি <div> কন্টেইনার রয়েছে এবং পেজগুলোর জন্য আরও তিনটি আইফ্রেম আছে। এই আইফ্রেমগুলোর মধ্যে একটি সর্বদা দৃশ্যমান থাকে এবং এটি ট্যাববারের সক্রিয় নির্বাচনের উপর নির্ভরশীল। about:blank এর দিকে নির্দেশিত একটি শেষ আইফ্রেম ডায়নামিকভাবে তৈরি হওয়া ইন-অ্যাপ পেজগুলোর জন্য ব্যবহৃত হয়, যা বিদ্যমান টাইমার পরিবর্তন করতে বা নতুন টাইমার তৈরি করতে প্রয়োজন। আমি এই প্যাটার্নটিকে মাল্টি-পেজ সিঙ্গেল-পেজ অ্যাপ (MPSPA) বলি।

উপাদান-ভিত্তিক লিট-এইচটিএমএল মার্কআপ

প্রতিটি পৃষ্ঠার কাঠামো lit-html স্কাফোল্ড হিসেবে বাস্তবায়িত হয়, যা রানটাইমে ডাইনামিকভাবে ইভ্যালুয়েট করা হয়। lit-html সম্পর্কে বলতে গেলে, এটি জাভাস্ক্রিপ্টের জন্য একটি দক্ষ, এক্সপ্রেসিভ এবং এক্সটেনসিবল এইচটিএমএল টেমপ্লেটিং লাইব্রেরি। এইচটিএমএল ফাইলগুলোতে সরাসরি এটি ব্যবহার করার ফলে, মেন্টাল প্রোগ্রামিং মডেলটি সরাসরি আউটপুট-ভিত্তিক হয়ে ওঠে। একজন প্রোগ্রামার হিসেবে, চূড়ান্ত আউটপুটটি কেমন হবে তার একটি টেমপ্লেট আপনি লেখেন, এবং 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() এর মতো লাইফসাইকেল মেথডগুলোকেও সাপোর্ট করে। পৃষ্ঠাগুলোর একটি ডেটা স্টোরে অ্যাক্সেস থাকে, যা ঐচ্ছিকভাবে সংরক্ষিত প্রতি-পৃষ্ঠার স্টেট এবং গ্লোবাল স্টেট শেয়ার করার জন্য ব্যবহৃত হয়। সমস্ত স্ট্রিং কেন্দ্রীয়ভাবে পরিচালিত হয়, তাই আন্তর্জাতিকীকরণ এতে অন্তর্নির্মিত। রাউটিং মূলত ব্রাউজার দ্বারা বিনামূল্যে পরিচালিত হয়, কারণ অ্যাপটি শুধুমাত্র আইফ্রেমের দৃশ্যমানতা টগল করে এবং ডায়নামিকভাবে তৈরি পৃষ্ঠাগুলোর জন্য প্লেসহোল্ডার আইফ্রেমের src অ্যাট্রিবিউট পরিবর্তন করে। নিচের উদাহরণটি একটি ডায়নামিকভাবে তৈরি পৃষ্ঠা বন্ধ করার কোড দেখাচ্ছে।

import Page from '../page.js';

const page = new Page({
  eventHandlers: {
    back: (e) => {
      e.preventDefault();
      window.top.history.back();
    },
  },
});

স্টাইলিং

পেজগুলোর স্টাইলিং প্রতিটি পেজের জন্য তার নিজস্ব স্কোপড CSS ফাইলে করা হয়। এর মানে হলো, এলিমেন্টগুলোকে সাধারণত তাদের নাম দিয়েই সরাসরি উল্লেখ করা যায়, কারণ অন্য পেজের সাথে কোনো সংঘর্ষের সম্ভাবনা থাকে না। গ্লোবাল স্টাইলগুলো প্রতিটি পেজে যোগ করা হয়, তাই 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 অ্যাপ্লিকেশনটি গিটহাবে পাওয়া যায়। আপনি একটি নতুন উইন্ডোতে, অথবা সরাসরি নীচের আইফ্রেম এমবেডটিতে ডেমোটি ব্যবহার করে দেখতে পারেন, যা একটি মোবাইল ডিভাইসের অনুকরণ করে।

কৃতজ্ঞতা স্বীকার

এই নিবন্ধটি পর্যালোচনা করেছেন জো মেডলি , কেসি বাস্কস , মিলিকা মিহাজলিয়া , অ্যালান কেন্ট এবং কিথ গু।