33 KiB

Raw Blame History

ब्राउझर एक्स्टेंशन प्रोजेक्ट भाग 2: 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 विभाग विस्तृत करा.

⚠️ सुरक्षा विचार: उत्पादन अनुप्रयोगांमध्ये, लोकल स्टोरेजमध्ये API की साठवणे सुरक्षा जोखीम निर्माण करते कारण जावास्क्रिप्टला हा डेटा प्रवेश करता येतो. शिकण्यासाठी, हा दृष्टिकोन ठीक आहे, परंतु वास्तविक अनुप्रयोग संवेदनशील क्रेडेन्शियल्ससाठी सुरक्षित सर्व्हर-साइड स्टोरेज वापरावे.

फॉर्म सबमिशन हाताळा

आता आपण कोणीतरी तुमचा फॉर्म सबमिट केल्यावर काय होते ते हाताळू. डीफॉल्टनुसार, ब्राउझर फॉर्म सबमिट केल्यावर पृष्ठ पुन्हा लोड करतात, परंतु आम्ही या वर्तनाला इंटरसेप्ट करून अधिक सहज अनुभव तयार करू.

ही पद्धत मिशन कंट्रोल अंतराळ यान संप्रेषण कसे हाताळते यासारखी आहे - प्रत्येक ट्रान्समिशनसाठी संपूर्ण प्रणाली रीसेट करण्याऐवजी, ते नवीन माहिती प्रक्रिया करत असताना सतत ऑपरेशन राखतात.

फॉर्म सबमिशन इव्हेंट कॅप्चर करणारे आणि वापरकर्त्याचा इनपुट काढणारे फंक्शन तयार करा:

function handleSubmit(e) {
	e.preventDefault();
	setUpUser(apiKey.value, region.value);
}

वरीलमध्ये, आम्ही:

थांबवते डीफॉल्ट फॉर्म सबमिशन वर्तन जे पृष्ठ रीफ्रेश करेल
काढते API की आणि प्रदेश फील्डमधून वापरकर्ता इनपुट मूल्ये
पास करते फॉर्म डेटा setUpUser() फंक्शनला प्रक्रिया करण्यासाठी
राखते पृष्ठ रीफ्रेश न करता सिंगल-पेज अॅप्लिकेशन वर्तन

✅ लक्षात ठेवा की तुमच्या HTML फॉर्म फील्ड्समध्ये required अॅट्रिब्यूट समाविष्ट आहे, त्यामुळे ब्राउझर आपोआप सत्यापित करतो की वापरकर्त्यांनी हे फंक्शन चालण्यापूर्वी API की आणि प्रदेश प्रदान केला आहे.

वापरकर्ता प्राधान्ये सेट करा

setUpUser फंक्शन वापरकर्त्याच्या क्रेडेन्शियल्स साठवण्यासाठी आणि पहिला API कॉल सुरू करण्यासाठी जबाबदार आहे. हे सेटअपपासून परिणाम प्रदर्शित करण्यासाठी गुळगुळीत संक्रमण तयार करते.

function setUpUser(apiKey, regionName) {
	// Save user credentials for future sessions
	localStorage.setItem('apiKey', apiKey);
	localStorage.setItem('regionName', regionName);
	
	// Update UI to show loading state
	loading.style.display = 'block';
	errors.textContent = '';
	clearBtn.style.display = 'block';
	
	// Fetch carbon usage data with user's credentials
	displayCarbonUsage(apiKey, regionName);
}

पायरी-पायरीने, येथे काय होते:

साठवते API की आणि प्रदेश नाव भविष्यातील वापरासाठी लोकल स्टोरेजमध्ये
दाखवते डेटा मिळवला जात आहे हे सूचित करण्यासाठी लोडिंग इंडिकेटर
क्लिअर करते प्रदर्शनातून कोणतेही पूर्वीचे त्रुटी संदेश
दाखवते वापरकर्त्यांसाठी क्लिअर बटण जेणेकरून ते नंतर त्यांच्या सेटिंग्ज रीसेट करू शकतील
सुरू करते वास्तविक कार्बन वापर डेटा मिळवण्यासाठी API कॉल

हे फंक्शन डेटा टिकवून ठेवणे आणि वापरकर्ता इंटरफेस अपडेट्स एकाच समन्वित क्रियेत व्यवस्थापित करून गुळगुळीत वापरकर्ता अनुभव तयार करते.

कार्बन वापर डेटा प्रदर्शित करा

आता आपण तुमचे एक्स्टेंशन बाह्य डेटा स्रोतांशी API द्वारे कनेक्ट करू. हे तुमचे एक्स्टेंशन एक स्वतंत्र साधन म्हणून बदलते जे इंटरनेटवरून रिअल-टाइम माहिती मिळवू शकते.

API समजून घेणे

APIs वेगवेगळ्या अनुप्रयोगांना एकमेकांशी संवाद साधण्याचा मार्ग आहेत. ते 19व्या शतकातील टेलिग्राफ सिस्टमसारखे आहेत ज्याने दूरच्या शहरांना जोडले - ऑपरेटर दूरच्या स्टेशनला विनंत्या पाठवतात आणि विनंती केलेल्या माहितीने प्रतिसाद मिळवतात. तुम्ही सोशल मीडिया तपासता, व्हॉइस असिस्टंटला प्रश्न विचारता किंवा डिलिव्हरी अॅप वापरता, APIs हे डेटा एक्सचेंज सुलभ करत आहेत.

REST APIs बद्दल महत्त्वाच्या संकल्पना:

REST म्हणजे 'Representational State Transfer'
वापरते मानक HTTP पद्धती (GET, POST, PUT, DELETE) डेटा संवाद साधण्यासाठी
परत करते डेटा अंदाजे स्वरूपात, सामान्यतः JSON
प्रदान करते वेगवेगळ्या प्रकारच्या विनंत्यांसाठी सुसंगत, URL-आधारित एंडपॉइंट्स

✅ CO2 Signal API आम्ही वापरणार आहोत ते जगभरातील इलेक्ट्रिकल ग्रिड्समधून रिअल-टाइम कार्बन तीव्रता डेटा प्रदान करते. हे वापरकर्त्यांना त्यांच्या वीज वापराचा पर्यावरणीय प्रभाव समजून घेण्यास मदत करते!

💡 असिंक्रोनस जावास्क्रिप्ट समजून घेणे: async कीवर्ड तुमच्या कोडला एकाच वेळी अनेक ऑपरेशन्स हाताळण्यास सक्षम करते. जेव्हा तुम्ही सर्व्हरकडून डेटा विनंती करता, तेव्हा तुम्हाला तुमचे संपूर्ण एक्स्टेंशन गोठवायचे नाही - ते एअर ट्रॅफिक कंट्रोलसारखे असेल जे एका विमानाच्या प्रतिसादाची वाट पाहत असताना सर्व ऑपरेशन्स थांबवते.

महत्त्वाचे फायदे:

राखते डेटा लोड करत असताना एक्स्टेंशन प्रतिसादक्षमता

परवानगी देते नेटवर्क विनंत्यांदरम्यान इतर कोड चालू ठेवण्यासाठी

वाढवते पारंपरिक कॉलबॅक पॅटर्नच्या तुलनेत कोड वाचनीयता

सक्षम करते नेटवर्क समस्यांसाठी ग्रेसफुल त्रुटी हाताळणी

async बद्दल एक जलद व्हिडिओ येथे आहे:

🎥 वरच्या प्रतिमेवर क्लिक करा async/await बद्दल व्हिडिओसाठी.

कार्बन वापर डेटा मिळवण्यासाठी आणि प्रदर्शित करण्यासाठी फंक्शन तयार करा:

// Modern fetch API approach (no external dependencies needed)
async function displayCarbonUsage(apiKey, region) {
	try {
		// Fetch carbon intensity data from CO2 Signal API
		const response = await fetch('https://api.co2signal.com/v1/latest', {
			method: 'GET',
			headers: {
				'auth-token': apiKey,
				'Content-Type': 'application/json'
			},
			// Add query parameters for the specific region
			...new URLSearchParams({ countryCode: region }) && {
				url: `https://api.co2signal.com/v1/latest?countryCode=${region}`
			}
		});

		// Check if the API request was successful
		if (!response.ok) {
			throw new Error(`API request failed: ${response.status}`);
		}

		const data = await response.json();
		const carbonData = data.data;

		// Calculate rounded carbon intensity value
		const carbonIntensity = Math.round(carbonData.carbonIntensity);

		// Update the user interface with fetched data
		loading.style.display = 'none';
		form.style.display = 'none';
		myregion.textContent = region.toUpperCase();
		usage.textContent = `${carbonIntensity} grams (grams CO₂ emitted per kilowatt hour)`;
		fossilfuel.textContent = `${carbonData.fossilFuelPercentage.toFixed(2)}% (percentage of fossil fuels used to generate electricity)`;
		results.style.display = 'block';

		// TODO: calculateColor(carbonIntensity) - implement in next lesson

	} catch (error) {
		console.error('Error fetching carbon data:', error);
		
		// Show user-friendly error message
		loading.style.display = 'none';
		results.style.display = 'none';
		errors.textContent = 'Sorry, we couldn\'t fetch data for that region. Please check your API key and region code.';
	}
}

येथे काय होते ते समजून घ्या:

वापरते आधुनिक fetch() API बाह्य लायब्ररींसारख्या Axios ऐवजी स्वच्छ, dependency-free कोडसाठी
अंमलात आणते योग्य त्रुटी तपासणी response.ok सह API अपयश लवकर पकडण्यासाठी
हाताळते असिंक्रोनस ऑपरेशन्स async/await सह अधिक वाचनीय कोड फ्लोसाठी
प्रमाणित करते CO2 Signal API auth-token हेडर वापरून
पार्स करते JSON प्रतिसाद डेटा आणि कार्बन तीव्रता माहिती काढते
अपडेट करते अनेक UI घटक स्वरूपित पर्यावरणीय डेटासह
प्रदान करते वापरकर्त्यासाठी त्रुटी संदेश जेव्हा API कॉल अपयशी होतात

महत्त्वाच्या आधुनिक जावास्क्रिप्ट संकल्पना प्रदर्शित केल्या:

टेम्पलेट लिटरल्स ${} सिंटॅक्ससह स्वच्छ स्ट्रिंग स्वरूपनासाठी
त्रुटी हाताळणी मजबूत अनुप्रयोगांसाठी try/catch ब्लॉक्ससह
Async/await पॅटर्न नेटवर्क विनंत्या ग्रेसफुली हाताळण्यासाठी
ऑब्जेक्ट डीस्ट्रक्चरिंग API प्रतिसादांमधून विशिष्ट डेटा काढण्यासाठी
मेथड चेनिंग अनेक DOM फेरफारांसाठी

✅ हे फंक्शन अनेक महत्त्वाच्या वेब विकास संकल्पना प्रदर्शित करते - बाह्य सर्व्हरशी संवाद साधणे, प्रमाणीकरण हाताळणे, डेटा प्रक्रिया करणे, इंटरफेस अपडेट करणे आणि त्रुटी ग्रेसफुली व्यवस्थापित करणे. हे व्यावसायिक विकसक नियमितपणे वापरत असलेल्या मूलभूत कौशल्यांपैकी आहेत.

🎉 तुम्ही काय साध्य केले आहे: तुम्ही एक ब्राउझर एक्स्टेंशन तयार केले आहे जे:

कनेक्ट करते इंटरनेटशी आणि वास्तविक पर्यावरणीय डेटा मिळवते
टिकवते वापरकर्ता सेटिंग्ज सत्रांदरम्यान
हाताळते त्रुटी ग्रेसफुली क्रॅश होण्याऐवजी
प्रदान करते गुळगुळीत, व्यावसायिक वापरकर्ता अनुभव

तुमचे काम तपासा npm run build चालवून आणि ब्राउझरमध्ये तुमचे एक्स्टेंशन रीफ्रेश करून. आता तुमच्याकडे एक कार्यक्षम कार्बन फूटप्रिं तुम्ही या धड्यात LocalStorage आणि APIs बद्दल शिकला, जे व्यावसायिक वेब डेव्हलपरसाठी खूप उपयुक्त आहेत. तुम्ही विचार करू शकता की हे दोन गोष्टी एकत्र कशा कार्य करतात? अशा वेबसाइटची रचना कशी कराल जी API द्वारे वापरण्यासाठी आयटम्स संग्रहित करेल याचा विचार करा.

असाइनमेंट

API स्वीकारा

अस्वीकरण:
हा दस्तऐवज AI भाषांतर सेवा Co-op Translator वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयास लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.

33 KiB Raw Blame History