# براؤزر ایکسٹینشن پروجیکٹ حصہ 2: API کال کریں، لوکل اسٹوریج استعمال کریں ## لیکچر سے پہلے کا کوئز [لیکچر سے پہلے کا کوئز](https://ff-quizzes.netlify.app/web/quiz/25) ## تعارف یاد ہے وہ براؤزر ایکسٹینشن جو آپ نے بنانا شروع کیا تھا؟ ابھی آپ کے پاس ایک خوبصورت فارم ہے، لیکن یہ بنیادی طور پر جامد ہے۔ آج ہم اسے حقیقی ڈیٹا سے جوڑ کر اور اسے یادداشت دے کر زندہ کریں گے۔ اپولو مشن کنٹرول کمپیوٹرز کے بارے میں سوچیں - وہ صرف مقررہ معلومات ظاہر نہیں کرتے تھے۔ وہ مسلسل خلائی جہاز کے ساتھ بات چیت کرتے تھے، ٹیلی میٹری ڈیٹا کے ساتھ اپ ڈیٹ ہوتے تھے، اور اہم مشن پیرامیٹرز کو یاد رکھتے تھے۔ یہی قسم کا متحرک رویہ ہم آج بنا رہے ہیں۔ آپ کا ایکسٹینشن انٹرنیٹ سے رابطہ کرے گا، حقیقی ماحولیاتی ڈیٹا حاصل کرے گا، اور اگلی بار کے لیے آپ کی سیٹنگز کو یاد رکھے گا۔ API انٹیگریشن پیچیدہ لگ سکتی ہے، لیکن یہ صرف آپ کے کوڈ کو دوسرے سروسز کے ساتھ بات چیت کرنا سکھانے کی بات ہے۔ چاہے آپ موسم کا ڈیٹا حاصل کر رہے ہوں، سوشل میڈیا فیڈز، یا کاربن فوٹ پرنٹ کی معلومات جیسا کہ ہم آج کریں گے، یہ سب ڈیجیٹل کنکشنز قائم کرنے کے بارے میں ہے۔ ہم یہ بھی دیکھیں گے کہ براؤزرز معلومات کو کیسے برقرار رکھ سکتے ہیں - بالکل اسی طرح جیسے لائبریریاں کتابوں کی جگہ کو یاد رکھنے کے لیے کارڈ کیٹلاگ استعمال کرتی ہیں۔ اس سبق کے اختتام تک، آپ کے پاس ایک براؤزر ایکسٹینشن ہوگا جو حقیقی ڈیٹا حاصل کرتا ہے، صارف کی ترجیحات کو محفوظ کرتا ہے، اور ایک ہموار تجربہ فراہم کرتا ہے۔ آئیے شروع کریں! ✅ مناسب فائلوں میں نمبر شدہ حصوں کی پیروی کریں تاکہ آپ کوڈ کہاں رکھنا ہے یہ جان سکیں۔ ## ایکسٹینشن میں عناصر کو ترتیب دیں آپ کے جاوا اسکرپٹ کو انٹرفیس میں تبدیلی کرنے سے پہلے، اسے مخصوص HTML عناصر کے حوالہ جات کی ضرورت ہوتی ہے۔ اسے ایسے سمجھیں جیسے دوربین کو مخصوص ستاروں کی طرف اشارہ کرنے کی ضرورت ہوتی ہے - گلیلیو کو مشتری کے چاندوں کا مطالعہ کرنے سے پہلے، اسے مشتری کو تلاش کرنا اور فوکس کرنا پڑا۔ آپ کی `index.js` فائل میں، ہم `const` ویریبلز بنائیں گے جو ہر اہم فارم عنصر کے حوالہ جات کو پکڑیں گے۔ یہ بالکل ویسے ہی ہے جیسے سائنسدان اپنے آلات کو لیبل کرتے ہیں - ہر بار پورے لیبارٹری میں تلاش کرنے کے بجائے، وہ براہ راست اس تک رسائی حاصل کر سکتے ہیں جس کی انہیں ضرورت ہے۔ ```javascript // 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` ویریبل میں تاکہ آپ کے کوڈ میں آسانی سے دوبارہ استعمال ہو سکے ## ایونٹ لسٹنرز شامل کریں اب ہم آپ کے ایکسٹینشن کو صارف کے اعمال کا جواب دینے کے قابل بنائیں گے۔ ایونٹ لسٹنرز آپ کے کوڈ کا صارف کے تعاملات کی نگرانی کرنے کا طریقہ ہیں۔ انہیں ابتدائی ٹیلیفون ایکسچینجز کے آپریٹرز کی طرح سمجھیں - وہ آنے والی کالز کے لیے سنتے تھے اور جب کوئی کنکشن بنانا چاہتا تھا تو صحیح سرکٹس کو جوڑتے تھے۔ ```javascript form.addEventListener('submit', (e) => handleSubmit(e)); clearBtn.addEventListener('click', (e) => reset(e)); init(); ``` **ان تصورات کو سمجھنا:** - **جوڑتا ہے** ایک سبمٹ لسٹنر کو فارم کے ساتھ جو اس وقت متحرک ہوتا ہے جب صارفین انٹر دبائیں یا سبمٹ پر کلک کریں - **جوڑتا ہے** ایک کلک لسٹنر کو کلئیر بٹن کے ساتھ فارم کو ری سیٹ کرنے کے لیے - **پاس کرتا ہے** ایونٹ آبجیکٹ `(e)` کو ہینڈلر فنکشنز کے لیے اضافی کنٹرول کے لیے - **کال کرتا ہے** `init()` فنکشن کو فوری طور پر تاکہ آپ کے ایکسٹینشن کی ابتدائی حالت ترتیب دی جا سکے ✅ یہاں استعمال ہونے والے شارٹ ہینڈ ایرو فنکشن سینٹیکس پر غور کریں۔ یہ جدید جاوا اسکرپٹ طریقہ روایتی فنکشن ایکسپریشنز سے زیادہ صاف ہے، لیکن دونوں برابر کام کرتے ہیں! ## انیشیلائزیشن اور ری سیٹ فنکشنز بنائیں آئیے آپ کے ایکسٹینشن کے لیے انیشیلائزیشن لاجک بنائیں۔ `init()` فنکشن ایک جہاز کے نیویگیشن سسٹم کی طرح ہے جو اپنے آلات کو چیک کرتا ہے - یہ موجودہ حالت کا تعین کرتا ہے اور انٹرفیس کو اسی کے مطابق ایڈجسٹ کرتا ہے۔ یہ چیک کرتا ہے کہ آیا کسی نے آپ کے ایکسٹینشن کو پہلے استعمال کیا ہے اور ان کی پچھلی سیٹنگز کو لوڈ کرتا ہے۔ `reset()` فنکشن صارفین کو ایک نیا آغاز فراہم کرتا ہے - بالکل ویسے جیسے سائنسدان اپنے آلات کو تجربات کے درمیان ری سیٹ کرتے ہیں تاکہ صاف ڈیٹا یقینی بنایا جا سکے۔ ```javascript 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](https://developer.mozilla.org/docs/Web/API/Window/localStorage) آپ کے ایکسٹینشن کو مستقل یادداشت دینے جیسا ہے۔ غور کریں کہ قدیم لائبریری آف اسکندریہ نے طوماروں کو کیسے محفوظ کیا - معلومات دستیاب رہتی تھیں چاہے اسکالرز چھوڑ کر واپس آتے۔ > **اہم خصوصیات:** > - **برقرار رکھتا ہے** ڈیٹا یہاں تک کہ آپ اپنا براؤزر بند کر دیں > - **زندہ رہتا ہے** کمپیوٹر ری اسٹارٹس اور براؤزر کریشز کے بعد بھی > - **فراہم کرتا ہے** صارف کی ترجیحات کے لیے کافی اسٹوریج اسپیس > - **فوری رسائی فراہم کرتا ہے** بغیر نیٹ ورک کی تاخیر کے > **اہم نوٹ**: آپ کے براؤزر ایکسٹینشن کا اپنا الگ تھلگ لوکل اسٹوریج ہے جو عام ویب صفحات سے الگ ہے۔ یہ سیکیورٹی فراہم کرتا ہے اور دیگر ویب سائٹس کے ساتھ تنازعات کو روکتا ہے۔ آپ اپنے محفوظ شدہ ڈیٹا کو براؤزر ڈیولپر ٹولز (F12) کھول کر، **Application** ٹیب پر جا کر، اور **Local Storage** سیکشن کو بڑھا کر دیکھ سکتے ہیں۔  > ⚠️ **سیکیورٹی غور و فکر**: پروڈکشن ایپلیکیشنز میں، لوکل اسٹوریج میں API کلیدوں کو محفوظ کرنا سیکیورٹی خطرات پیدا کرتا ہے کیونکہ جاوا اسکرپٹ اس ڈیٹا تک رسائی حاصل کر سکتا ہے۔ سیکھنے کے مقاصد کے لیے، یہ طریقہ ٹھیک کام کرتا ہے، لیکن حقیقی ایپلیکیشنز کو حساس اسناد کے لیے محفوظ سرور سائیڈ اسٹوریج استعمال کرنا چاہیے۔ ## فارم سبمیشن کو ہینڈل کریں اب ہم اس بات کو ہینڈل کریں گے کہ جب کوئی آپ کا فارم سبمٹ کرے تو کیا ہوتا ہے۔ ڈیفالٹ کے طور پر، براؤزرز فارم سبمٹ ہونے پر صفحہ کو ری لوڈ کرتے ہیں، لیکن ہم اس رویے کو روکیں گے تاکہ ایک ہموار تجربہ بنایا جا سکے۔ یہ طریقہ بالکل ویسے ہی ہے جیسے مشن کنٹرول خلائی جہاز کے مواصلات کو ہینڈل کرتا ہے - ہر ٹرانسمیشن کے لیے پورے سسٹم کو ری سیٹ کرنے کے بجائے، وہ مسلسل آپریشن برقرار رکھتے ہیں جبکہ نئی معلومات کو پروسیس کرتے ہیں۔ ایک فنکشن بنائیں جو فارم سبمیشن ایونٹ کو کیپچر کرے اور صارف کے ان پٹ کو نکالے: ```javascript function handleSubmit(e) { e.preventDefault(); setUpUser(apiKey.value, region.value); } ``` **اوپر، ہم نے:** - **روکتا ہے** ڈیفالٹ فارم سبمیشن رویے کو جو صفحہ کو ریفریش کرے گا - **نکالتا ہے** صارف کے انپٹ ویلیوز کو API کلید اور علاقے کے فیلڈز سے - **پاس کرتا ہے** فارم ڈیٹا کو `setUpUser()` فنکشن کے لیے پروسیسنگ کے لیے - **برقرار رکھتا ہے** سنگل پیج ایپلیکیشن رویہ صفحہ ری لوڈز سے بچ کر ✅ یاد رکھیں کہ آپ کے HTML فارم فیلڈز میں `required` ایٹریبیوٹ شامل ہے، لہذا براؤزر خود بخود تصدیق کرتا ہے کہ صارفین اس فنکشن کے چلنے سے پہلے API کلید اور علاقے دونوں فراہم کریں۔ ## صارف کی ترجیحات ترتیب دیں `setUpUser` فنکشن صارف کی اسناد کو محفوظ کرنے اور پہلی API کال شروع کرنے کا ذمہ دار ہے۔ یہ سیٹ اپ سے نتائج دکھانے تک ایک ہموار منتقلی پیدا کرتا ہے۔ ```javascript 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 کال حقیقی کاربن استعمال کے ڈیٹا کو حاصل کرنے کے لیے یہ فنکشن ایک ہموار صارف تجربہ پیدا کرتا ہے جو ڈیٹا کی مستقل مزاجی اور صارف انٹرفیس اپڈیٹس دونوں کو ایک مربوط عمل میں منظم کرتا ہے۔ ## کاربن استعمال کے ڈیٹا کو دکھائیں اب ہم آپ کے ایکسٹینشن کو APIs کے ذریعے بیرونی ڈیٹا ذرائع سے جوڑیں گے۔ یہ آپ کے ایکسٹینشن کو ایک اسٹینڈ الون ٹول سے کچھ ایسا بناتا ہے جو انٹرنیٹ بھر سے حقیقی وقت کی معلومات تک رسائی حاصل کر سکتا ہے۔ **APIs کو سمجھنا** [APIs](https://www.webopedia.com/TERM/A/API.html) مختلف ایپلیکیشنز کے ایک دوسرے کے ساتھ بات کرنے کا طریقہ ہیں۔ انہیں 19ویں صدی میں دور دراز شہروں کو جوڑنے والے ٹیلی گراف سسٹم کی طرح سمجھیں - آپریٹرز دور دراز اسٹیشنز کو درخواستیں بھیجتے تھے اور مطلوبہ معلومات کے ساتھ جوابات وصول کرتے تھے۔ جب بھی آپ سوشل میڈیا چیک کرتے ہیں، وائس اسسٹنٹ سے سوال پوچھتے ہیں، یا ڈیلیوری ایپ استعمال کرتے ہیں، APIs ان ڈیٹا ایکسچینجز کو آسان بنا رہے ہیں۔ **REST APIs کے بارے میں اہم تصورات:** - **REST** کا مطلب ہے 'Representational State Transfer' - **استعمال کرتا ہے** معیاری HTTP طریقے (GET, POST, PUT, DELETE) ڈیٹا کے ساتھ تعامل کے لیے - **واپس کرتا ہے** ڈیٹا کو پیش گوئی کے قابل فارمیٹس میں، عام طور پر JSON - **فراہم کرتا ہے** مختلف قسم کی درخواستوں کے لیے مستقل، URL پر مبنی اینڈپوائنٹس ✅ [CO2 Signal API](https://www.co2signal.com/) جسے ہم استعمال کریں گے، دنیا بھر کے الیکٹریکل گرڈز سے حقیقی وقت کے کاربن شدت کے ڈیٹا فراہم کرتا ہے۔ یہ صارفین کو ان کی بجلی کے استعمال کے ماحولیاتی اثرات کو سمجھنے میں مدد کرتا ہے! > 💡 **غیر متزامن جاوا اسکرپٹ کو سمجھنا**: [`async` کلیدی لفظ](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) آپ کے کوڈ کو بیک وقت متعدد آپریشنز کو ہینڈل کرنے کے قابل بناتا ہے۔ جب آپ سرور سے ڈیٹا کی درخواست کرتے ہیں، تو آپ نہیں چاہتے کہ آپ کا پورا ایکسٹینشن منجمد ہو جائے - یہ بالکل ویسے ہوگا جیسے ایئر ٹریفک کنٹرول ایک ہوائی جہاز کے جواب کا انتظار کرتے ہوئے تمام آپریشنز کو روک دے۔ > **اہم فوائد:** > - **برقرار رکھتا ہے** ایکسٹینشن کی جواب دہی جبکہ ڈیٹا لوڈ ہو رہا ہو > - **اجازت دیتا ہے** دوسرے کوڈ کو نیٹ ورک کی درخواستوں کے دوران چلتے رہنے کی > - **بہتر بناتا ہے** کوڈ کی پڑھنے کی صلاحیت روایتی کال بیک پیٹرنز کے مقابلے میں > - **فراہم کرتا ہے** نیٹ ورک کے مسائل کے لیے شائستہ ایرر ہینڈلنگ یہاں `async` کے بارے میں ایک مختصر ویڈیو ہے: [](https://youtube.com/watch?v=YwmlRkrxvkk "Async اور Await وعدوں کو منظم کرنے کے لیے") > 🎥 اوپر دی گئی تصویر پر کلک کریں `async/await` کے بارے میں ویڈیو کے لیے۔ کاربن استعمال کے ڈیٹا کو حاصل کرنے اور دکھانے کے لیے فنکشن بنائیں: ```javascript // 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 کے، صاف، ڈیپینڈنسی فری کوڈ کے لیے - **نافذ کرتا ہے** مناسب ایرر چیکنگ `response.ok` کے ساتھ تاکہ API کی ناکامیوں کو جلدی پکڑا جا سکے - **ہینڈل کرتا ہے** غیر متزامن آپریشنز `async/await` کے ساتھ زیادہ پڑھنے کے قابل کوڈ فلو کے لیے - **تصدیق کرتا ہے** CO2 Signal API کے ساتھ `auth-token` ہیڈر استعمال کرتے ہوئے - **پارس کرتا ہے** JSON ریسپانس ڈیٹا اور کاربن شدت کی معلومات نکالتا ہے - **اپڈیٹ کرتا ہے** متعدد UI عناصر کو فارمیٹ شدہ ماحولیاتی ڈیٹا کے ساتھ - **فراہم کرتا ہے** صارف دوست ایرر میسیجز جب API کالز ناکام ہوں **جدید جاوا اسکرپٹ کے اہم تصورات کا مظاہرہ:** - **ٹیمپلیٹ لیٹرلز** `${}` سینٹیکس کے ساتھ صاف اسٹرنگ فارمیٹنگ کے لیے - **ایرر ہینڈلنگ** try/catch بلاکس کے ساتھ مضبوط ایپلیکیشنز کے لیے - **Async/await** پیٹرن نیٹ ورک کی درخواستوں کو شائستگی سے ہینڈل کرنے کے لیے - **آبجیکٹ ڈسٹرکچرنگ** API ریسپانسز سے مخصوص ڈیٹا نکالنے کے لیے - **میٹھوڈ چیننگ** متعدد DOM مینپولیشنز کے لیے ✅ یہ فنکشن کئی اہم ویب ڈیولپمنٹ تصورات کا مظاہرہ کرتا ہے - بیرونی سرورز کے ساتھ بات چیت، تصدیق کو ہینڈل کرنا، ڈیٹا کو پروسیس کرنا، انٹرفیس کو اپڈیٹ کرنا، اور ایررز کو شائستگی سے منظم کرنا۔ یہ بنیادی مہارتیں ہیں جو پیشہ ور ڈیولپرز باقاعدگی سے استعمال کرتے ہیں۔ 🎉 **جو آپ نے حاصل کیا:** آپ نے ایک براؤزر ایکسٹینشن بنایا جو: - **کنیکٹ کرتا ہے** انٹرنیٹ سے اور حقیقی ماحولیاتی ڈیٹا حاصل کرتا ہے - **برقرار رکھتا ہے** صارف کی سیٹنگز سیشنز کے درمیان - **ایررز کو شائستگی سے ہینڈل کرتا ہے** بجائے کریش ہونے کے - **فراہم کرتا ہے** ایک ہموار، پیشہ ورانہ صارف تجربہ اپنے کام کو ٹیسٹ کرنے کے لیے `npm run build` چلائیں اور اپنے ایکسٹینشن کو براؤزر میں ریفریش کریں۔ اب آپ کے پاس ایک فعال کاربن فوٹ پرنٹ ٹریکر ہے۔ اگلے سبق میں ہم ایکسٹینشن کو مکمل کرنے کے لیے ڈائنامک آئیکن فنکشنلٹی شامل کریں گے۔ --- ## GitHub Copilot ایجنٹ چیلنج 🚀 ای آپ نے اس سبق میں LocalStorage اور APIs کے بارے میں سیکھا، جو پیشہ ور ویب ڈویلپر کے لیے بہت مفید ہیں۔ کیا آپ سوچ سکتے ہیں کہ یہ دونوں چیزیں کیسے ایک ساتھ کام کرتی ہیں؟ تصور کریں کہ آپ ایک ویب سائٹ کیسے ڈیزائن کریں گے جو اشیاء کو محفوظ کرے تاکہ API کے ذریعے استعمال کی جا سکیں۔ ## اسائنمنٹ [ایک API اپنائیں](assignment.md) --- **ڈسکلیمر**: یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔