21 KiB

Raw Permalink Blame History

ব্রাউজার এক্সটেনশন প্রকল্প পার্ট ১: ব্রাউজার সম্পর্কে সবকিছু

স্কেচনোট করেছেন Wassim Chegham

প্রাক-লেকচার কুইজ

ভূমিকা

ব্রাউজার এক্সটেনশন ব্রাউজারে অতিরিক্ত কার্যকারিতা যোগ করে। তবে একটি তৈরি করার আগে, আপনাকে জানতে হবে ব্রাউজার কীভাবে কাজ করে।

ব্রাউজার সম্পর্কে

এই পাঠের সিরিজে, আপনি শিখবেন কীভাবে একটি ব্রাউজার এক্সটেনশন তৈরি করতে হয় যা Chrome, Firefox এবং Edge ব্রাউজারে কাজ করবে। এই অংশে, আপনি আবিষ্কার করবেন কীভাবে ব্রাউজার কাজ করে এবং ব্রাউজার এক্সটেনশনের উপাদানগুলো তৈরি করবেন।

কিন্তু ব্রাউজার আসলে কী? এটি একটি সফটওয়্যার অ্যাপ্লিকেশন যা ব্যবহারকারীকে একটি সার্ভার থেকে কন্টেন্ট অ্যাক্সেস করতে এবং ওয়েব পেজে প্রদর্শন করতে দেয়।

✅ একটি ছোট ইতিহাস: প্রথম ব্রাউজারের নাম ছিল 'WorldWideWeb' এবং এটি ১৯৯০ সালে স্যার টিমোথি বার্নার্স-লি তৈরি করেছিলেন।

কিছু প্রথম দিকের ব্রাউজার, Karen McGrane এর মাধ্যমে

যখন একজন ব্যবহারকারী একটি URL (Uniform Resource Locator) ঠিকানা ব্যবহার করে ইন্টারনেটে সংযুক্ত হন, সাধারণত Hypertext Transfer Protocol এর মাধ্যমে http বা https ঠিকানা ব্যবহার করে, তখন ব্রাউজার একটি ওয়েব সার্ভারের সাথে যোগাযোগ করে এবং একটি ওয়েব পেজ নিয়ে আসে।

এই পর্যায়ে, ব্রাউজারের রেন্ডারিং ইঞ্জিন এটি ব্যবহারকারীর ডিভাইসে প্রদর্শন করে, যা একটি মোবাইল ফোন, ডেস্কটপ বা ল্যাপটপ হতে পারে।

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

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

একটি খুবই দরকারী ওয়েবসাইট যা আপনি সম্ভবত আপনার পছন্দের ব্রাউজারে বুকমার্ক করতে চাইবেন তা হলো caniuse.com। যখন আপনি ওয়েব পেজ তৈরি করছেন, তখন caniuse-এর সমর্থিত প্রযুক্তির তালিকা ব্যবহার করা খুবই সহায়ক যাতে আপনি আপনার ব্যবহারকারীদের সর্বোত্তম সমর্থন দিতে পারেন।

✅ কীভাবে আপনি বুঝবেন কোন ব্রাউজারগুলো আপনার ওয়েব সাইটের ব্যবহারকারীদের মধ্যে সবচেয়ে জনপ্রিয়? আপনার অ্যানালিটিক্স চেক করুন - আপনি আপনার ওয়েব ডেভেলপমেন্ট প্রক্রিয়ার অংশ হিসেবে বিভিন্ন অ্যানালিটিক্স প্যাকেজ ইনস্টল করতে পারেন, এবং সেগুলো আপনাকে জানাবে কোন ব্রাউজারগুলো সবচেয়ে বেশি ব্যবহৃত হচ্ছে।

ব্রাউজার এক্সটেনশন

আপনি কেন একটি ব্রাউজার এক্সটেনশন তৈরি করতে চাইবেন? এটি একটি সুবিধাজনক জিনিস যা আপনার ব্রাউজারে সংযুক্ত করা যায় যখন আপনি এমন কাজগুলোর দ্রুত অ্যাক্সেস চান যা আপনি বারবার করেন। উদাহরণস্বরূপ, যদি আপনি বিভিন্ন ওয়েব পেজের রঙ চেক করার প্রয়োজন অনুভব করেন, আপনি একটি কালার-পিকার ব্রাউজার এক্সটেনশন ইনস্টল করতে পারেন। যদি আপনি পাসওয়ার্ড মনে রাখতে অসুবিধা বোধ করেন, আপনি একটি পাসওয়ার্ড-ম্যানেজমেন্ট ব্রাউজার এক্সটেনশন ব্যবহার করতে পারেন।

ব্রাউজার এক্সটেনশন তৈরি করাও মজার। এগুলো সাধারণত সীমিত সংখ্যক কাজ পরিচালনা করে যা তারা ভালোভাবে সম্পাদন করে।

✅ আপনার প্রিয় ব্রাউজার এক্সটেনশনগুলো কী কী? তারা কী কাজ করে?

এক্সটেনশন ইনস্টল করা

তৈরি করার আগে, ব্রাউজার এক্সটেনশন তৈরি এবং ডিপ্লয় করার প্রক্রিয়াটি দেখে নিন। যদিও প্রতিটি ব্রাউজার এই কাজটি পরিচালনার ক্ষেত্রে কিছুটা ভিন্ন, Chrome এবং Firefox-এ প্রক্রিয়াটি Edge-এর এই উদাহরণের মতো:

নোট: ডেভেলপার মোড চালু করতে এবং অন্যান্য স্টোর থেকে এক্সটেনশন অনুমোদন করতে ভুলবেন না।

মূলত, প্রক্রিয়াটি হবে:

npm run build ব্যবহার করে আপনার এক্সটেনশন তৈরি করুন
ব্রাউজারে "Settings and more" বোতাম (উপরের ডানদিকে ... আইকন) ব্যবহার করে এক্সটেনশন পেইজে যান
যদি এটি একটি নতুন ইনস্টলেশন হয়, তাহলে load unpacked নির্বাচন করুন এবং বিল্ড ফোল্ডার থেকে একটি নতুন এক্সটেনশন আপলোড করুন (আমাদের ক্ষেত্রে এটি /dist)
অথবা, যদি ইতিমধ্যে ইনস্টল করা এক্সটেনশনটি পুনরায় লোড করতে চান, তাহলে reload ক্লিক করুন

✅ এই নির্দেশনাগুলো আপনার নিজের তৈরি এক্সটেনশনের জন্য প্রযোজ্য; ব্রাউজারের সংশ্লিষ্ট এক্সটেনশন স্টোরে প্রকাশিত এক্সটেনশন ইনস্টল করতে, আপনাকে সেই স্টোরগুলোতে যেতে হবে এবং আপনার পছন্দের এক্সটেনশন ইনস্টল করতে হবে।

শুরু করুন

আপনি একটি ব্রাউজার এক্সটেনশন তৈরি করতে যাচ্ছেন যা আপনার অঞ্চলের কার্বন ফুটপ্রিন্ট প্রদর্শন করবে, আপনার অঞ্চলের শক্তি ব্যবহারের পরিমাণ এবং শক্তির উৎস দেখাবে। এক্সটেনশনে একটি ফর্ম থাকবে যা একটি API কী সংগ্রহ করবে যাতে আপনি CO2 Signal-এর API অ্যাক্সেস করতে পারেন।

আপনার যা প্রয়োজন:

একটি API কী; এই পৃষ্ঠায় আপনার ইমেইল প্রবেশ করান এবং একটি কী আপনার কাছে পাঠানো হবে
আপনার অঞ্চলের কোড যা Electricity Map-এর সাথে সম্পর্কিত (উদাহরণস্বরূপ, বোস্টনে আমি 'US-NEISO' ব্যবহার করি)
স্টার্টার কোড। start ফোল্ডারটি ডাউনলোড করুন; আপনি এই ফোল্ডারের কোড সম্পূর্ণ করবেন
NPM - NPM একটি প্যাকেজ ম্যানেজমেন্ট টুল; এটি লোকালভাবে ইনস্টল করুন এবং আপনার package.json ফাইলে তালিকাভুক্ত প্যাকেজগুলো আপনার ওয়েব অ্যাসেটের জন্য ইনস্টল হবে

✅ প্যাকেজ ম্যানেজমেন্ট সম্পর্কে আরও জানুন এই চমৎকার লার্ন মডিউলে

কোডবেসটি একবার দেখে নিন:

✅ একবার আপনার API কী এবং অঞ্চল কোড প্রস্তুত হয়ে গেলে, সেগুলো ভবিষ্যতের ব্যবহারের জন্য একটি নোটে সংরক্ষণ করুন।

এক্সটেনশনের জন্য HTML তৈরি করুন

এই এক্সটেনশনের দুটি ভিউ রয়েছে। একটি API কী এবং অঞ্চল কোড সংগ্রহ করার জন্য:

এবং দ্বিতীয়টি অঞ্চলের কার্বন ব্যবহারের তথ্য প্রদর্শনের জন্য:

চলুন ফর্মের HTML তৈরি করা এবং CSS দিয়ে এটি স্টাইল করা শুরু করি।

/dist ফোল্ডারে, আপনি একটি ফর্ম এবং একটি রেজাল্ট এরিয়া তৈরি করবেন। index.html ফাইলে, নির্ধারিত ফর্ম এরিয়াটি পূরণ করুন:

<form class="form-data" autocomplete="on">
	<div>
		<h2>New? Add your Information</h2>
	</div>
	<div>
		<label for="region">Region Name</label>
		<input type="text" id="region" required class="region-name" />
	</div>
	<div>
		<label for="api">Your API Key from tmrow</label>
		<input type="text" id="api" required class="api-key" />
	</div>
	<button class="search-btn">Submit</button>
</form>

এটি সেই ফর্ম যেখানে আপনার সংরক্ষিত তথ্য ইনপুট এবং লোকাল স্টোরেজে সংরক্ষণ করা হবে।

এরপর, রেজাল্ট এরিয়া তৈরি করুন; চূড়ান্ত ফর্ম ট্যাগের নিচে কিছু div যোগ করুন:

<div class="result">
	<div class="loading">loading...</div>
	<div class="errors"></div>
	<div class="data"></div>
	<div class="result-container">
		<p><strong>Region: </strong><span class="my-region"></span></p>
		<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
		<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
	</div>
	<button class="clear-btn">Change region</button>
</div>

এই পর্যায়ে, আপনি একটি বিল্ড চেষ্টা করতে পারেন। নিশ্চিত করুন যে এই এক্সটেনশনের প্যাকেজ ডিপেন্ডেন্সিগুলো ইনস্টল করেছেন:

npm install

এই কমান্ডটি npm, Node Package Manager, ব্যবহার করে আপনার এক্সটেনশনের বিল্ড প্রক্রিয়ার জন্য webpack ইনস্টল করবে। আপনি /dist/main.js-এ এই প্রক্রিয়ার আউটপুট দেখতে পারেন - আপনি দেখবেন কোডটি বান্ডল করা হয়েছে।

এখন, এক্সটেনশনটি তৈরি হওয়া উচিত এবং যদি আপনি এটি Edge-এ একটি এক্সটেনশন হিসেবে ডিপ্লয় করেন, তাহলে আপনি একটি সুন্দরভাবে প্রদর্শিত ফর্ম দেখতে পাবেন।

অভিনন্দন, আপনি একটি ব্রাউজার এক্সটেনশন তৈরির প্রথম ধাপ সম্পন্ন করেছেন। পরবর্তী পাঠগুলোতে, আপনি এটিকে আরও কার্যকর এবং উপযোগী করবেন।

🚀 চ্যালেঞ্জ

একটি ব্রাউজার এক্সটেনশন স্টোর দেখুন এবং একটি এক্সটেনশন আপনার ব্রাউজারে ইনস্টল করুন। আপনি এর ফাইলগুলো আকর্ষণীয় উপায়ে পরীক্ষা করতে পারেন। আপনি কী আবিষ্কার করেন?

পোস্ট-লেকচার কুইজ

পর্যালোচনা ও স্ব-অধ্যয়ন

এই পাঠে আপনি ওয়েব ব্রাউজারের ইতিহাস সম্পর্কে কিছু শিখেছেন; এই সুযোগটি নিন এবং ওয়ার্ল্ড ওয়াইড ওয়েবের উদ্ভাবকরা কীভাবে এর ব্যবহার কল্পনা করেছিলেন তা জানতে এর ইতিহাস সম্পর্কে আরও পড়ুন। কিছু দরকারী সাইট:

ওয়েব ব্রাউজারের ইতিহাস

ওয়েবের ইতিহাস

টিম বার্নার্স-লির একটি সাক্ষাৎকার

অ্যাসাইনমেন্ট

আপনার এক্সটেনশন পুনরায় স্টাইল করুন

অস্বীকৃতি:
এই নথিটি AI অনুবাদ পরিষেবা Co-op Translator ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা তার জন্য দায়ী থাকব না।

21 KiB Raw Permalink Blame History