অ্যাপ ডোমেইন
একটি ওয়েব অ্যাপে প্রয়োগ করা প্রোগ্রামিং এর মিনি অ্যাপ উপায় দেখানোর জন্য, আমার একটি ছোট কিন্তু সম্পূর্ণ যথেষ্ট অ্যাপ ধারণা প্রয়োজন। হাই-ইনটেনসিটি ইন্টারভাল ট্রেনিং (HIIT) হল একটি কার্ডিওভাসকুলার ব্যায়াম কৌশল যা কম তীব্র পুনরুদ্ধারের সময়কালের সাথে তীব্র অ্যানেরোবিক ব্যায়ামের সংক্ষিপ্ত সময়ের সেটগুলির বিকল্প। অনেক HIIT প্রশিক্ষণ HIIT টাইমার ব্যবহার করে, উদাহরণস্বরূপ, The Body Coach TV YouTube চ্যানেল থেকে এই 30 মিনিটের অনলাইন সেশন ।
HIIT সময় উদাহরণ অ্যাপ্লিকেশন
এই অধ্যায়ের জন্য, আমি এমন একটি HIIT টাইমার অ্যাপ্লিকেশনের একটি মৌলিক উদাহরণ তৈরি করেছি যার নাম উপযুক্তভাবে "HIIT Time" যা ব্যবহারকারীকে বিভিন্ন টাইমার সংজ্ঞায়িত করতে এবং পরিচালনা করতে দেয়, সর্বদা একটি উচ্চ এবং একটি নিম্ন তীব্রতার ব্যবধান থাকে এবং তারপরে তাদের মধ্যে একটি নির্বাচন করে একটি প্রশিক্ষণ সেশন। এটি একটি নেভিবার, একটি ট্যাবার এবং তিনটি পৃষ্ঠা সহ একটি প্রতিক্রিয়াশীল অ্যাপ:
- ওয়ার্কআউট: ওয়ার্কআউটের সময় সক্রিয় পৃষ্ঠা। এটি ব্যবহারকারীকে টাইমারগুলির একটি নির্বাচন করতে দেয় এবং তিনটি অগ্রগতি রিং বৈশিষ্ট্যযুক্ত করে: সেটের সংখ্যা, সক্রিয় সময়কাল এবং বিশ্রামের সময়কাল।
- টাইমার: বিদ্যমান টাইমার পরিচালনা করে এবং ব্যবহারকারীকে নতুন টাইমার তৈরি করতে দেয়।
- পছন্দসমূহ: সাউন্ড ইফেক্ট এবং স্পিচ আউটপুট টগল করার এবং ভাষা এবং থিম নির্বাচন করার অনুমতি দেয়।
নিম্নলিখিত স্ক্রিনশটগুলি অ্যাপ্লিকেশনটির একটি ছাপ দেয়।
অ্যাপের গঠন
উপরে বর্ণিত হিসাবে, অ্যাপটিতে একটি গ্রিডে সাজানো একটি নেভিবার, একটি ট্যাবার এবং তিনটি পৃষ্ঠা রয়েছে। Navbar এবং tabbar পৃষ্ঠাগুলির জন্য আরও তিনটি আইফ্রেম সহ একটি <div> ধারক সহ iframes হিসাবে উপলব্ধি করা হয়, যার মধ্যে একটি সর্বদা দৃশ্যমান এবং ট্যাবারে সক্রিয় নির্বাচনের উপর নির্ভরশীল। একটি চূড়ান্ত iframe নির্দেশ করে about:blank গতিশীলভাবে তৈরি অ্যাপ-মধ্যস্থ পৃষ্ঠাগুলির জন্য পরিবেশন করে, যা বিদ্যমান টাইমারগুলিকে সংশোধন করতে বা নতুন তৈরি করার জন্য প্রয়োজন৷ আমি এই প্যাটার্নটিকে মাল্টি-পেজ সিঙ্গেল-পেজ অ্যাপ (MPSPA) বলি।
উপাদান-ভিত্তিক lit-html মার্কআপ
প্রতিটি পৃষ্ঠার কাঠামো lit-html স্ক্যাফোল্ড হিসাবে উপলব্ধি করা হয় যা রানটাইমে গতিশীলভাবে মূল্যায়ন করা হয়। lit-html-এর পটভূমির জন্য, এটি জাভাস্ক্রিপ্টের জন্য একটি দক্ষ, অভিব্যক্তিপূর্ণ, এক্সটেনসিবল HTML টেমপ্লেটিং লাইব্রেরি। এটি সরাসরি HTML ফাইলে ব্যবহার করে, মানসিক প্রোগ্রামিং মডেলটি সরাসরি আউটপুট-ভিত্তিক। একজন প্রোগ্রামার হিসাবে, আপনি চূড়ান্ত আউটপুটটি কেমন হবে তার একটি টেমপ্লেট লেখেন এবং lit-html আপনার ডেটার উপর ভিত্তি করে গতিশীলভাবে শূন্যস্থান পূরণ করে এবং ইভেন্ট শ্রোতাদের সাথে সংযুক্ত করে। অ্যাপটি তৃতীয়-পক্ষের কাস্টম উপাদানগুলি ব্যবহার করে যেমন Shoelace 's <sl-progress-ring> অথবা <human-duration> নামে একটি স্ব-বাস্তবায়িত কাস্টম উপাদান। যেহেতু কাস্টম উপাদানগুলির একটি ঘোষণামূলক API রয়েছে (উদাহরণস্বরূপ, অগ্রগতি রিংয়ের 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 সময় এটি একটি স্ক্রিন ওয়েক লকের মাধ্যমে উপলব্ধি করে৷ নীচের স্নিপেট দেখায় কিভাবে এটি করা হয়.
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- এ উপলব্ধ। আপনি একটি নতুন উইন্ডোতে ডেমোর সাথে খেলতে পারেন, অথবা নীচের আইফ্রেমে এম্বেড করতে পারেন, যা একটি মোবাইল ডিভাইসকে অনুকরণ করে৷
স্বীকৃতি
এই নিবন্ধটি Joe Medley , Kayce Basques , Milica Mihajlija , Alan Kent , এবং Keith Gu দ্বারা পর্যালোচনা করা হয়েছে।