19 KiB

Raw Blame History Unescape Escape

براؤزر ایکسٹینشن پروجیکٹ حصہ 2: API کال کریں، لوکل اسٹوریج استعمال کریں

لیکچر سے پہلے کا کوئز

تعارف

اس سبق میں، آپ اپنے براؤزر ایکسٹینشن کے فارم کے ذریعے API کال کریں گے اور نتائج کو براؤزر ایکسٹینشن میں دکھائیں گے۔ اس کے علاوہ، آپ یہ سیکھیں گے کہ کس طرح آپ اپنے براؤزر کے لوکل اسٹوریج میں ڈیٹا محفوظ کر سکتے ہیں تاکہ مستقبل میں اس کا حوالہ دیا جا سکے اور استعمال کیا جا سکے۔

✅ مناسب فائلوں میں نمبر شدہ حصوں کی پیروی کریں تاکہ آپ کو معلوم ہو کہ اپنا کوڈ کہاں رکھنا ہے۔

ایکسٹینشن میں عناصر کو ترتیب دیں:

اس وقت تک آپ نے اپنے براؤزر ایکسٹینشن کے لیے فارم اور نتائج کے <div> کے لیے HTML بنا لیا ہوگا۔ اب سے، آپ کو /src/index.js فائل میں کام کرنے کی ضرورت ہوگی اور اپنے ایکسٹینشن کو تھوڑا تھوڑا بنا کر مکمل کرنا ہوگا۔ اپنے پروجیکٹ کو ترتیب دینے اور بلڈ پروسیس کے بارے میں پچھلے سبق کا حوالہ دیں۔

اپنی 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');

یہ تمام فیلڈز ان کے css کلاس کے ذریعے حوالہ دیے گئے ہیں، جیسا کہ آپ نے پچھلے سبق میں HTML میں ترتیب دیا تھا۔

لسٹنرز شامل کریں

اگلے مرحلے میں، فارم اور کلئیر بٹن پر ایونٹ لسٹنرز شامل کریں جو فارم کو ری سیٹ کرتا ہے، تاکہ اگر کوئی صارف فارم جمع کرے یا ری سیٹ بٹن پر کلک کرے، تو کچھ ہو۔ اور فائل کے آخر میں ایپ کو انیشیٹ کرنے کے لیے کال شامل کریں:

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

✅ نوٹ کریں کہ سبمٹ یا کلک ایونٹ سننے کے لیے استعمال ہونے والا شارٹ ہینڈ، اور کس طرح ایونٹ کو handleSubmit یا reset فنکشنز میں پاس کیا جاتا ہے۔ کیا آپ اس شارٹ ہینڈ کا طویل فارمیٹ میں مساوی لکھ سکتے ہیں؟ آپ کو کون سا زیادہ پسند ہے؟

init() فنکشن اور reset() فنکشن بنائیں:

اب آپ ایکسٹینشن کو انیشیٹ کرنے والے فنکشن کو بنائیں گے، جسے init() کہا جاتا ہے:

function init() {
	//if anything is in localStorage, pick it up
	const storedApiKey = localStorage.getItem('apiKey');
	const storedRegion = localStorage.getItem('regionName');

	//set icon to be generic green
	//todo

	if (storedApiKey === null || storedRegion === null) {
		//if we don't have the keys, show the form
		form.style.display = 'block';
		results.style.display = 'none';
		loading.style.display = 'none';
		clearBtn.style.display = 'none';
		errors.textContent = '';
	} else {
        //if we have saved keys/regions in localStorage, show results when they load
        displayCarbonUsage(storedApiKey, storedRegion);
		results.style.display = 'none';
		form.style.display = 'none';
		clearBtn.style.display = 'block';
	}
};

function reset(e) {
	e.preventDefault();
	//clear local storage for region only
	localStorage.removeItem('regionName');
	init();
}

اس فنکشن میں کچھ دلچسپ منطق ہے۔ اسے پڑھتے ہوئے، کیا آپ دیکھ سکتے ہیں کہ کیا ہوتا ہے؟

دو const سیٹ کیے گئے ہیں تاکہ چیک کیا جا سکے کہ آیا صارف نے لوکل اسٹوریج میں APIKey اور ریجن کوڈ محفوظ کیا ہے۔
اگر ان میں سے کوئی بھی null ہے، تو فارم کو 'block' کے طور پر دکھانے کے لیے اس کے اسٹائل کو تبدیل کریں۔
نتائج، لوڈنگ، اور clearBtn کو چھپائیں اور کسی بھی ایرر ٹیکسٹ کو خالی سٹرنگ پر سیٹ کریں۔
اگر کوئی key اور region موجود ہے، تو ایک روٹین شروع کریں:
- API کو کاربن یوزج ڈیٹا حاصل کرنے کے لیے کال کریں۔
- نتائج کا ایریا چھپائیں۔
- فارم کو چھپائیں۔
- ری سیٹ بٹن دکھائیں۔

آگے بڑھنے سے پہلے، براؤزرز میں دستیاب ایک بہت اہم تصور کے بارے میں جاننا مفید ہے: LocalStorage۔ لوکل اسٹوریج براؤزر میں ڈیٹا کو key-value جوڑی کے طور پر محفوظ کرنے کا ایک مفید طریقہ ہے۔ اس قسم کے ویب اسٹوریج کو جاوا اسکرپٹ کے ذریعے براؤزر میں ڈیٹا کو منظم کرنے کے لیے استعمال کیا جا سکتا ہے۔ لوکل اسٹوریج ختم نہیں ہوتی، جبکہ SessionStorage، ویب اسٹوریج کی ایک اور قسم، براؤزر بند ہونے پر صاف ہو جاتی ہے۔ اسٹوریج کی مختلف اقسام کے استعمال کے فوائد اور نقصانات ہیں۔

نوٹ - آپ کے براؤزر ایکسٹینشن کا اپنا لوکل اسٹوریج ہے؛ مین براؤزر ونڈو ایک مختلف انسٹینس ہے اور الگ سے کام کرتی ہے۔

آپ اپنا APIKey ایک سٹرنگ ویلیو کے طور پر سیٹ کرتے ہیں، مثال کے طور پر، اور آپ دیکھ سکتے ہیں کہ یہ Edge پر سیٹ ہے جب آپ کسی ویب پیج کو "inspect" کرتے ہیں (آپ براؤزر پر رائٹ کلک کر کے inspect کر سکتے ہیں) اور اسٹوریج دیکھنے کے لیے Applications ٹیب پر جاتے ہیں۔

✅ ان حالات کے بارے میں سوچیں جہاں آپ کچھ ڈیٹا کو لوکل اسٹوریج میں محفوظ نہیں کرنا چاہیں گے۔ عام طور پر، لوکل اسٹوریج میں API Keys رکھنا ایک برا خیال ہے! کیا آپ دیکھ سکتے ہیں کیوں؟ ہمارے معاملے میں، چونکہ ہماری ایپ صرف سیکھنے کے لیے ہے اور ایپ اسٹور پر ڈپلائے نہیں کی جائے گی، ہم اس طریقے کو استعمال کریں گے۔

نوٹ کریں کہ آپ لوکل اسٹوریج کو Web API کے ذریعے منیج کرتے ہیں، یا تو getItem(), setItem(), یا removeItem() استعمال کر کے۔ یہ براؤزرز میں وسیع پیمانے پر سپورٹڈ ہے۔

اس displayCarbonUsage() فنکشن کو بنانے سے پہلے جو init() میں کال کیا جاتا ہے، آئیے ابتدائی فارم سبمیشن کو ہینڈل کرنے کی فعالیت بناتے ہیں۔

فارم سبمیشن کو ہینڈل کریں

ایک فنکشن بنائیں جسے handleSubmit کہا جاتا ہے جو ایک ایونٹ آرگومنٹ (e) قبول کرتا ہے۔ ایونٹ کو پھیلنے سے روکیں (اس صورت میں، ہم براؤزر کو ریفریش ہونے سے روکنا چاہتے ہیں) اور ایک نیا فنکشن setUpUser کال کریں، جس میں apiKey.value اور region.value آرگومنٹس پاس کریں۔ اس طرح، آپ ان دو ویلیوز کو استعمال کرتے ہیں جو ابتدائی فارم کے ذریعے لائی جاتی ہیں جب مناسب فیلڈز کو پاپولیٹ کیا جاتا ہے۔

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

✅ اپنی یادداشت تازہ کریں - پچھلے سبق میں آپ نے جو HTML سیٹ اپ کیا تھا اس میں دو ان پٹ فیلڈز ہیں جن کی values کو آپ نے فائل کے اوپر سیٹ کیے گئے const کے ذریعے کیپچر کیا ہے، اور وہ دونوں required ہیں تاکہ براؤزر صارفین کو null ویلیوز داخل کرنے سے روک سکے۔

صارف کو سیٹ اپ کریں

setUpUser فنکشن کی طرف بڑھتے ہوئے، یہاں آپ لوکل اسٹوریج ویلیوز کو apiKey اور regionName کے لیے سیٹ کرتے ہیں۔ ایک نیا فنکشن شامل کریں:

function setUpUser(apiKey, regionName) {
	localStorage.setItem('apiKey', apiKey);
	localStorage.setItem('regionName', regionName);
	loading.style.display = 'block';
	errors.textContent = '';
	clearBtn.style.display = 'block';
	//make initial call
	displayCarbonUsage(apiKey, regionName);
}

یہ فنکشن ایک لوڈنگ میسج کو ظاہر کرتا ہے جب تک کہ API کو کال کیا جا رہا ہو۔ اس وقت، آپ اس براؤزر ایکسٹینشن کے سب سے اہم فنکشن کو بنانے کے مرحلے پر پہنچ چکے ہیں!

کاربن یوزج دکھائیں

آخر کار، API کو کوئری کرنے کا وقت آ گیا ہے!

آگے بڑھنے سے پہلے، ہمیں APIs پر بات کرنی چاہیے۔ APIs، یا Application Programming Interfaces، ویب ڈیولپر کے ٹول باکس کا ایک اہم عنصر ہیں۔ وہ پروگراموں کو ایک دوسرے کے ساتھ تعامل اور انٹرفیس فراہم کرنے کے معیاری طریقے فراہم کرتے ہیں۔ مثال کے طور پر، اگر آپ ایک ویب سائٹ بنا رہے ہیں جسے ڈیٹا بیس کو کوئری کرنے کی ضرورت ہے، تو کوئی آپ کے استعمال کے لیے ایک API بنا سکتا ہے۔ اگرچہ APIs کی بہت سی اقسام ہیں، ان میں سے ایک سب سے مشہور REST API ہے۔

✅ 'REST' کا مطلب 'Representational State Transfer' ہے اور اس میں مختلف طریقے سے ترتیب دیے گئے URLs کا استعمال شامل ہے تاکہ ڈیٹا حاصل کیا جا سکے۔ ڈیولپرز کے لیے دستیاب مختلف قسم کے APIs پر تھوڑا سا تحقیق کریں۔ آپ کو کون سا فارمیٹ پسند آیا؟

اس فنکشن کے بارے میں نوٹ کرنے کے لیے اہم چیزیں ہیں۔ سب سے پہلے، async keyword پر غور کریں۔ اپنے فنکشنز کو اس طرح لکھنا کہ وہ غیر متزامن طور پر چلیں، اس کا مطلب ہے کہ وہ کسی ایکشن کے مکمل ہونے کا انتظار کرتے ہیں، جیسے کہ ڈیٹا واپس آنا، اس سے پہلے کہ وہ آگے بڑھیں۔

یہاں async کے بارے میں ایک مختصر ویڈیو ہے:

🎥 اوپر دی گئی تصویر پر کلک کریں تاکہ async/await کے بارے میں ویڈیو دیکھ سکیں۔

C02Signal API کو کوئری کرنے کے لیے ایک نیا فنکشن بنائیں:

import axios from '../node_modules/axios';

async function displayCarbonUsage(apiKey, region) {
	try {
		await axios
			.get('https://api.co2signal.com/v1/latest', {
				params: {
					countryCode: region,
				},
				headers: {
					'auth-token': apiKey,
				},
			})
			.then((response) => {
				let CO2 = Math.floor(response.data.data.carbonIntensity);

				//calculateColor(CO2);

				loading.style.display = 'none';
				form.style.display = 'none';
				myregion.textContent = region;
				usage.textContent =
					Math.round(response.data.data.carbonIntensity) + ' grams (grams C02 emitted per kilowatt hour)';
				fossilfuel.textContent =
					response.data.data.fossilFuelPercentage.toFixed(2) +
					'% (percentage of fossil fuels used to generate electricity)';
				results.style.display = 'block';
			});
	} catch (error) {
		console.log(error);
		loading.style.display = 'none';
		results.style.display = 'none';
		errors.textContent = 'Sorry, we have no data for the region you have requested.';
	}
}

یہ ایک بڑا فنکشن ہے۔ یہاں کیا ہو رہا ہے؟

بہترین طریقوں پر عمل کرتے ہوئے، آپ اس فنکشن کو غیر متزامن طور پر کام کرنے کے لیے async keyword استعمال کرتے ہیں۔ فنکشن میں ایک try/catch بلاک ہوتا ہے کیونکہ یہ ایک پرامس واپس کرے گا جب API ڈیٹا واپس کرے گا۔ چونکہ آپ کے پاس اس رفتار پر کنٹرول نہیں ہے جس پر API جواب دے گا (یہ بالکل جواب نہیں دے سکتا!)، آپ کو اس غیر یقینی صورتحال کو غیر متزامن طور پر کال کر کے ہینڈل کرنے کی ضرورت ہے۔
آپ co2signal API کو اپنے ریجن کا ڈیٹا حاصل کرنے کے لیے کوئری کر رہے ہیں، اپنے API Key کا استعمال کرتے ہوئے۔ اس key کو استعمال کرنے کے لیے، آپ کو اپنے ہیڈر پیرامیٹرز میں ایک قسم کی تصدیق کا استعمال کرنا ہوگا۔
ایک بار جب API جواب دے دیتا ہے، تو آپ اس کے رسپانس ڈیٹا کے مختلف عناصر کو اپنی اسکرین کے ان حصوں میں تفویض کرتے ہیں جو آپ نے اس ڈیٹا کو دکھانے کے لیے سیٹ اپ کیے ہیں۔
اگر کوئی ایرر ہو، یا کوئی نتیجہ نہ ہو، تو آپ ایک ایرر میسج دکھاتے ہیں۔

✅ غیر متزامن پروگرامنگ پیٹرنز کا استعمال آپ کے ٹول باکس میں ایک اور بہت مفید ٹول ہے۔ مختلف طریقوں کے بارے میں پڑھیں جن کے ذریعے آپ اس قسم کے کوڈ کو ترتیب دے سکتے ہیں۔

مبارک ہو! اگر آپ اپنا ایکسٹینشن بناتے ہیں (npm run build) اور اسے اپنے ایکسٹینشن پین میں ریفریش کرتے ہیں، تو آپ کے پاس ایک کام کرنے والا ایکسٹینشن ہے! واحد چیز جو کام نہیں کر رہی وہ آئیکن ہے، اور آپ اسے اگلے سبق میں ٹھیک کریں گے۔

GitHub Copilot Agent چیلنج 🚀

Agent موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:

تفصیل: براؤزر ایکسٹینشن کو ایرر ہینڈلنگ میں بہتری اور صارف کے تجربے کی خصوصیات شامل کر کے بہتر بنائیں۔ یہ چیلنج آپ کو APIs، لوکل اسٹوریج، اور جدید جاوا اسکرپٹ پیٹرنز کا استعمال کرتے ہوئے DOM منیپولیشن پر عمل کرنے میں مدد کرے گا۔

پرومپٹ: displayCarbonUsage فنکشن کا ایک بہتر ورژن بنائیں جس میں شامل ہوں: 1) ناکام API کالز کے لیے ایک ریٹری میکانزم جس میں ایکسپونینشل بیک آف ہو، 2) API کال کرنے سے پہلے ریجن کوڈ کے لیے انپٹ ویلیڈیشن، 3) لوڈنگ اینیمیشن کے ساتھ پروگریس انڈیکیٹرز، 4) لوکل اسٹوریج میں API رسپانسز کی کیشنگ کے ساتھ ایکسپائریشن ٹائم اسٹیمپس (30 منٹ کے لیے کیش کریں)، اور 5) پچھلی API کالز سے تاریخی ڈیٹا دکھانے کی خصوصیت۔ نیز تمام فنکشن پیرامیٹرز اور ریٹرن ٹائپس کو دستاویز کرنے کے لیے مناسب TypeScript-style JSDoc کمنٹس شامل کریں۔

🚀 چیلنج

ہم نے ان اسباق میں اب تک کئی قسم کے API پر بات کی ہے۔ ایک ویب API کا انتخاب کریں اور گہرائی سے تحقیق کریں کہ یہ کیا پیش کرتا ہے۔ مثال کے طور پر، براؤزرز میں دستیاب APIs جیسے HTML Drag and Drop API پر ایک نظر ڈالیں۔ آپ کے خیال میں ایک بہترین API کیا چیز بناتی ہے؟

لیکچر کے بعد کا کوئز

جائزہ اور خود مطالعہ

آپ نے اس سبق میں لوکل اسٹوریج اور APIs کے بارے میں سیکھا، جو پیشہ ور ویب ڈیولپر کے لیے بہت مفید ہیں۔ کیا آپ سوچ سکتے ہیں کہ یہ دونوں چیزیں ایک ساتھ کیسے کام کرتی ہیں؟ سوچیں کہ آپ ایک ویب سائٹ کو کس طرح آرکیٹیکٹ کریں گے جو ایک API کے ذریعے استعمال ہونے والی اشیاء کو محفوظ کرے۔

اسائنمنٹ

ایک API اپنائیں

ڈسکلیمر:
یہ دستاویز AI ترجمہ سروس Co-op Translator کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔

19 KiB Raw Blame History Unescape Escape