21 KiB

Raw Permalink Blame History

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

স্কেচনোট: ওয়াসিম চেগাম

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

ভূমিকা

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

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

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

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

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

কিছু প্রথম দিকের ব্রাউজার, সূত্র: ক্যারেন ম্যাকগ্রেন

যখন একজন ব্যবহারকারী 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-এ এক্সটেনশন হিসেবে ডিপ্লয় করেন, আপনি একটি সুন্দরভাবে প্রদর্শিত ফর্ম দেখতে পাবেন।

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

🚀 চ্যালেঞ্জ

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

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

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

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

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

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

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

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

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

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

21 KiB Raw Permalink Blame History