19 KiB

Raw Blame History

ব্রাউজার এক্সটেনশন প্রকল্প পার্ট ২: API কল করা, লোকাল স্টোরেজ ব্যবহার করা

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

ভূমিকা

আপনার তৈরি করা ব্রাউজার এক্সটেনশনটি মনে আছে? এখন পর্যন্ত আপনার কাছে একটি সুন্দর ফর্ম রয়েছে, তবে এটি মূলত স্থির। আজ আমরা এটিকে জীবন্ত করে তুলব, বাস্তব ডেটার সাথে সংযোগ স্থাপন করে এবং এটিকে স্মৃতিশক্তি প্রদান করে।

আপোলো মিশন কন্ট্রোল কম্পিউটারগুলোর কথা ভাবুন - তারা শুধু স্থির তথ্য প্রদর্শন করত না। তারা মহাকাশযানের সাথে ক্রমাগত যোগাযোগ করত, টেলিমেট্রি ডেটা আপডেট করত এবং গুরুত্বপূর্ণ মিশন প্যারামিটারগুলো মনে রাখত। আজ আমরা এই ধরনের গতিশীল আচরণ তৈরি করছি। আপনার এক্সটেনশন ইন্টারনেটে পৌঁছাবে, বাস্তব পরিবেশগত ডেটা সংগ্রহ করবে এবং আপনার সেটিংস পরবর্তীবারের জন্য মনে রাখবে।

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

এই পাঠের শেষে, আপনার কাছে একটি ব্রাউজার এক্সটেনশন থাকবে যা বাস্তব ডেটা সংগ্রহ করে, ব্যবহারকারীর পছন্দ সংরক্ষণ করে এবং একটি মসৃণ অভিজ্ঞতা প্রদান করে। চলুন শুরু করি!

✅ আপনার কোড কোথায় স্থাপন করতে হবে তা জানতে উপযুক্ত ফাইলগুলোর নম্বরযুক্ত অংশগুলো অনুসরণ করুন।

এক্সটেনশনে ম্যানিপুলেট করার উপাদানগুলো সেট আপ করুন

আপনার জাভাস্ক্রিপ্ট ইন্টারফেসটি ম্যানিপুলেট করার আগে, এটি নির্দিষ্ট HTML উপাদানগুলোর রেফারেন্স প্রয়োজন। এটি এমন যেন একটি টেলিস্কোপকে নির্দিষ্ট তারাগুলোর দিকে নির্দেশ করতে হবে - গ্যালিলিও জুপিটারের চাঁদগুলো অধ্যয়ন করার আগে, তাকে প্রথমে জুপিটারকে খুঁজে এবং ফোকাস করতে হয়েছিল।

আপনার index.js ফাইলে, আমরা const ভেরিয়েবল তৈরি করব যা প্রতিটি গুরুত্বপূর্ণ ফর্ম উপাদানের রেফারেন্স ধারণ করে। এটি ঠিক যেমন বিজ্ঞানীরা তাদের সরঞ্জাম লেবেল করেন - প্রতিবার পুরো ল্যাবরেটরি অনুসন্ধান করার পরিবর্তে, তারা সরাসরি তাদের প্রয়োজনীয় জিনিসটি অ্যাক্সেস করতে পারেন।

// form fields
const form = document.querySelector('.form-data');
const region = document.querySelector('.region-name');
const apiKey = document.querySelector('.api-key');

// results
const errors = document.querySelector('.errors');
const loading = document.querySelector('.loading');
const results = document.querySelector('.result-container');
const usage = document.querySelector('.carbon-usage');
const fossilfuel = document.querySelector('.fossil-fuel');
const myregion = document.querySelector('.my-region');
const clearBtn = document.querySelector('.clear-btn');

এই কোডটি যা করে:

ফর্ম উপাদানগুলোকে document.querySelector() ব্যবহার করে CSS ক্লাস সিলেক্টরের মাধ্যমে ক্যাপচার করে
ইনপুট ফিল্ডগুলোর রেফারেন্স তৈরি করে অঞ্চল নাম এবং API কী-এর জন্য
কার্বন ব্যবহার ডেটার ফলাফল প্রদর্শনের উপাদানগুলোর সাথে সংযোগ স্থাপন করে
লোডিং ইন্ডিকেটর এবং ত্রুটি বার্তার মতো UI উপাদানগুলোর অ্যাক্সেস সেট আপ করে
প্রতিটি উপাদানের রেফারেন্সকে একটি const ভেরিয়েবলে সংরক্ষণ করে যাতে আপনার কোডে সহজে পুনরায় ব্যবহার করা যায়

ইভেন্ট লিসেনার যোগ করুন

এখন আমরা আপনার এক্সটেনশনকে ব্যবহারকারীর ক্রিয়াগুলোর প্রতি সাড়া দিতে তৈরি করব। ইভেন্ট লিসেনারগুলো আপনার কোডের ব্যবহারকারীর ইন্টারঅ্যাকশন পর্যবেক্ষণ করার উপায়। এটি প্রাথমিক টেলিফোন এক্সচেঞ্জের অপারেটরদের মতো - তারা ইনকামিং কলের জন্য শুনত এবং কেউ সংযোগ করতে চাইলে সঠিক সার্কিটগুলো সংযুক্ত করত।

form.addEventListener('submit', (e) => handleSubmit(e));
clearBtn.addEventListener('click', (e) => reset(e));
init();

এই ধারণাগুলো বোঝা:

ফর্মে একটি সাবমিট লিসেনার সংযুক্ত করে যা ব্যবহারকারীরা এন্টার চাপলে বা সাবমিট ক্লিক করলে ট্রিগার হয়
ক্লিয়ার বোতামে একটি ক্লিক লিসেনার সংযুক্ত করে যা ফর্মটি রিসেট করার জন্য
ইভেন্ট অবজেক্ট (e)-কে হ্যান্ডলার ফাংশনে অতিরিক্ত নিয়ন্ত্রণের জন্য পাস করে
init() ফাংশনটি অবিলম্বে কল করে আপনার এক্সটেনশনের প্রাথমিক অবস্থা সেট আপ করতে

✅ এখানে ব্যবহৃত সংক্ষিপ্ত অ্যারো ফাংশন সিনট্যাক্স লক্ষ্য করুন। এই আধুনিক জাভাস্ক্রিপ্ট পদ্ধতি ঐতিহ্যবাহী ফাংশন এক্সপ্রেশনের তুলনায় পরিষ্কার, তবে উভয়ই সমানভাবে কার্যকর!

ইনিশিয়ালাইজেশন এবং রিসেট ফাংশন তৈরি করুন

চলুন আপনার এক্সটেনশনের জন্য ইনিশিয়ালাইজেশন লজিক তৈরি করি। init() ফাংশনটি একটি জাহাজের নেভিগেশন সিস্টেমের মতো যা তার যন্ত্রগুলো পরীক্ষা করে - এটি বর্তমান অবস্থা নির্ধারণ করে এবং সেই অনুযায়ী ইন্টারফেসটি সামঞ্জস্য করে। এটি পরীক্ষা করে যে কেউ আগে আপনার এক্সটেনশন ব্যবহার করেছে কিনা এবং তাদের পূর্ববর্তী সেটিংস লোড করে।

reset() ফাংশন ব্যবহারকারীদের একটি নতুন শুরু প্রদান করে - ঠিক যেমন বিজ্ঞানীরা তাদের যন্ত্রগুলো রিসেট করেন পরীক্ষার মধ্যে পরিষ্কার ডেটা নিশ্চিত করতে।

function init() {
	// Check if user has previously saved API credentials
	const storedApiKey = localStorage.getItem('apiKey');
	const storedRegion = localStorage.getItem('regionName');

	// Set extension icon to generic green (placeholder for future lesson)
	// TODO: Implement icon update in next lesson

	if (storedApiKey === null || storedRegion === null) {
		// First-time user: show the setup form
		form.style.display = 'block';
		results.style.display = 'none';
		loading.style.display = 'none';
		clearBtn.style.display = 'none';
		errors.textContent = '';
	} else {
		// Returning user: load their saved data automatically
		displayCarbonUsage(storedApiKey, storedRegion);
		results.style.display = 'none';
		form.style.display = 'none';
		clearBtn.style.display = 'block';
	}
}

function reset(e) {
	e.preventDefault();
	// Clear stored region to allow user to choose a new location
	localStorage.removeItem('regionName');
	// Restart the initialization process
	init();
}

এখানে যা ঘটে তা ভেঙে দেখা:

ব্রাউজারের লোকাল স্টোরেজ থেকে সংরক্ষিত API কী এবং অঞ্চল পুনরুদ্ধার করে
পরীক্ষা করে এটি প্রথমবারের ব্যবহারকারী কিনা (কোনো সংরক্ষিত শংসাপত্র নেই) বা পুনরায় আসা ব্যবহারকারী
নতুন ব্যবহারকারীদের জন্য সেটআপ ফর্ম দেখায় এবং অন্যান্য ইন্টারফেস উপাদানগুলো লুকিয়ে রাখে
স্বয়ংক্রিয়ভাবে সংরক্ষিত ডেটা লোড করে পুনরায় আসা ব্যবহারকারীদের জন্য এবং রিসেট অপশন প্রদর্শন করে
উপলব্ধ ডেটার উপর ভিত্তি করে ব্যবহারকারীর ইন্টারফেসের অবস্থা পরিচালনা করে

লোকাল স্টোরেজ সম্পর্কে মূল ধারণা:

ব্রাউজার সেশনগুলোর মধ্যে ডেটা সংরক্ষণ করে (সেশন স্টোরেজের বিপরীতে)
কী-ভ্যালু জোড়া হিসেবে ডেটা সংরক্ষণ করে getItem() এবং setItem() ব্যবহার করে
যখন কোনো ডেটা বিদ্যমান না থাকে তখন null রিটার্ন করে
ব্যবহারকারীর পছন্দ এবং সেটিংস মনে রাখার একটি সহজ উপায় প্রদান করে

💡 ব্রাউজার স্টোরেজ বোঝা: LocalStorage আপনার এক্সটেনশনকে স্থায়ী মেমোরি দেওয়ার মতো। প্রাচীন আলেকজান্দ্রিয়ার লাইব্রেরি স্ক্রোল সংরক্ষণ করত - তথ্য উপলব্ধ থাকত এমনকি যখন পণ্ডিতরা চলে যেত এবং ফিরে আসত।

মূল বৈশিষ্ট্যগুলো:

ডেটা সংরক্ষণ করে এমনকি আপনি আপনার ব্রাউজার বন্ধ করার পরেও

কম্পিউটার রিস্টার্ট এবং ব্রাউজার ক্র্যাশের পরেও টিকে থাকে

ব্যবহারকারীর পছন্দের জন্য উল্লেখযোগ্য স্টোরেজ স্পেস প্রদান করে

নেটওয়ার্ক বিলম্ব ছাড়াই তাৎক্ষণিক অ্যাক্সেস প্রদান করে

গুরুত্বপূর্ণ নোট: আপনার ব্রাউজার এক্সটেনশনের নিজস্ব আলাদা লোকাল স্টোরেজ রয়েছে যা সাধারণ ওয়েব পেজ থেকে আলাদা। এটি নিরাপত্তা প্রদান করে এবং অন্যান্য ওয়েবসাইটের সাথে সংঘর্ষ প্রতিরোধ করে।

আপনার সংরক্ষিত ডেটা দেখতে ব্রাউজার ডেভেলপার টুলস (F12) খুলুন, Application ট্যাবে যান এবং Local Storage বিভাগটি প্রসারিত করুন।

⚠️ নিরাপত্তা বিবেচনা: প্রোডাকশন অ্যাপ্লিকেশনগুলোতে, LocalStorage-এ API কী সংরক্ষণ করা নিরাপত্তার ঝুঁকি সৃষ্টি করে কারণ জাভাস্ক্রিপ্ট এই ডেটা অ্যাক্সেস করতে পারে। শেখার উদ্দেশ্যে, এই পদ্ধতি ঠিক আছে, তবে বাস্তব অ্যাপ্লিকেশনগুলোতে সংবেদনশীল শংসাপত্রের জন্য নিরাপদ সার্ভার-সাইড স্টোরেজ ব্যবহার করা উচিত।

ফর্ম সাবমিশন পরিচালনা করুন

এখন আমরা পরিচালনা করব যখন কেউ আপনার ফর্মটি জমা দেয়। ডিফল্টভাবে, ব্রাউজারগুলো ফর্ম জমা দেওয়ার সময় পেজটি রিফ্রেশ করে, তবে আমরা এই আচরণটি আটকাবো যাতে একটি মসৃ আপনি এই পাঠে LocalStorage এবং API সম্পর্কে শিখেছেন, যা পেশাদার ওয়েব ডেভেলপারের জন্য খুবই উপকারী। আপনি কি ভাবতে পারেন কীভাবে এই দুটি বিষয় একসাথে কাজ করে? ভাবুন কীভাবে আপনি একটি ওয়েবসাইট ডিজাইন করবেন যা API দ্বারা ব্যবহৃত আইটেম সংরক্ষণ করবে।

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

একটি API গ্রহণ করুন

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

19 KiB Raw Blame History