15 KiB

Raw Permalink Blame History Unescape Escape

براؤزر ایکسٹینشن پروجیکٹ حصہ 1: براؤزرز کے بارے میں سب کچھ

اسکیچ نوٹ از وسیم شغام

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

تعارف

براؤزر ایکسٹینشنز براؤزر میں اضافی فعالیت فراہم کرتی ہیں۔ لیکن ایک بنانے سے پہلے، آپ کو یہ سیکھنا چاہیے کہ براؤزرز اپنا کام کیسے کرتے ہیں۔

براؤزر کے بارے میں

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

لیکن براؤزر اصل میں ہے کیا؟ یہ ایک سافٹ ویئر ایپلیکیشن ہے جو صارف کو سرور سے مواد تک رسائی فراہم کرتی ہے اور اسے ویب صفحات پر دکھاتی ہے۔

✅ تھوڑی سی تاریخ: پہلا براؤزر 'ورلڈ وائیڈ ویب' کہلاتا تھا اور اسے سر ٹموتھی برنرز لی نے 1990 میں بنایا تھا۔

کچھ ابتدائی براؤزرز، بشکریہ کارن میکگرین

جب کوئی صارف انٹرنیٹ سے URL (یونیفارم ریسورس لوکیٹر) ایڈریس کے ذریعے جڑتا ہے، عام طور پر http یا https ایڈریس کے ذریعے ہائپر ٹیکسٹ ٹرانسفر پروٹوکول استعمال کرتے ہوئے، تو براؤزر ویب سرور سے رابطہ کرتا ہے اور ویب صفحہ حاصل کرتا ہے۔

اس وقت، براؤزر کا رینڈرنگ انجن اسے صارف کے ڈیوائس پر دکھاتا ہے، جو موبائل فون، ڈیسک ٹاپ، یا لیپ ٹاپ ہو سکتا ہے۔

براؤزرز میں مواد کو کیش کرنے کی صلاحیت بھی ہوتی ہے تاکہ ہر بار سرور سے حاصل نہ کرنا پڑے۔ وہ صارف کی براؤزنگ سرگرمی کی تاریخ کو ریکارڈ کر سکتے ہیں، 'کوکیز' محفوظ کر سکتے ہیں، جو چھوٹے ڈیٹا کے ٹکڑے ہوتے ہیں جو صارف کی سرگرمی کو محفوظ کرنے کے لیے استعمال ہوتے ہیں، اور مزید۔

ایک بہت اہم بات جو یاد رکھنے کی ہے وہ یہ ہے کہ تمام براؤزر ایک جیسے نہیں ہوتے! ہر براؤزر کی اپنی خوبیاں اور خامیاں ہوتی ہیں، اور ایک پیشہ ور ویب ڈویلپر کو یہ سمجھنا ضروری ہے کہ ویب صفحات کو کراس-براؤزر کے لیے کیسے بہتر بنایا جائے۔ اس میں چھوٹے ویوپورٹس جیسے موبائل فون کے، اور آف لائن صارف کو ہینڈل کرنا شامل ہے۔

ایک بہت مفید ویب سائٹ جسے آپ کو اپنے پسندیدہ براؤزر میں بک مارک کرنا چاہیے وہ ہے caniuse.com۔ جب آپ ویب صفحات بنا رہے ہوں، تو یہ ویب سائٹ آپ کو سپورٹڈ ٹیکنالوجیز کی فہرست فراہم کرتی ہے تاکہ آپ اپنے صارفین کی بہترین مدد کر سکیں۔

✅ آپ کیسے جان سکتے ہیں کہ آپ کی ویب سائٹ کے صارفین کے لیے کون سے براؤزر سب سے زیادہ مقبول ہیں؟ اپنی اینالیٹکس چیک کریں - آپ مختلف اینالیٹکس پیکجز انسٹال کر سکتے ہیں جو آپ کے ویب ڈویلپمنٹ کے عمل کا حصہ ہوں، اور وہ آپ کو بتائیں گے کہ کون سے براؤزر سب سے زیادہ استعمال ہو رہے ہیں۔

براؤزر ایکسٹینشنز

آپ براؤزر ایکسٹینشن کیوں بنانا چاہیں گے؟ یہ ایک مفید چیز ہے جو آپ کے براؤزر سے منسلک ہوتی ہے جب آپ کو ان کاموں تک فوری رسائی کی ضرورت ہو جو آپ بار بار کرتے ہیں۔ مثال کے طور پر، اگر آپ کو ان ویب صفحات کے رنگ چیک کرنے کی ضرورت ہو جن کے ساتھ آپ تعامل کرتے ہیں، تو آپ ایک کلر-پکر براؤزر ایکسٹینشن انسٹال کر سکتے ہیں۔ اگر آپ کو پاس ورڈ یاد رکھنے میں مشکل ہو، تو آپ پاس ورڈ مینجمنٹ براؤزر ایکسٹینشن استعمال کر سکتے ہیں۔

براؤزر ایکسٹینشنز بنانا بھی مزے کا کام ہے۔ یہ عام طور پر محدود تعداد میں کاموں کو سنبھالتے ہیں جنہیں وہ اچھی طرح انجام دیتے ہیں۔

✅ آپ کے پسندیدہ براؤزر ایکسٹینشنز کون سے ہیں؟ وہ کون سے کام انجام دیتے ہیں؟

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

شروع کرنے سے پہلے، براؤزر ایکسٹینشن بنانے اور ڈیپلوئے کرنے کے عمل پر ایک نظر ڈالیں۔ اگرچہ ہر براؤزر اس کام کو مختلف طریقے سے سنبھالتا ہے، لیکن کروم اور فائر فاکس پر یہ عمل ایج پر اس مثال سے ملتا جلتا ہے:

نوٹ: یقینی بنائیں کہ ڈویلپر موڈ کو آن کریں اور دیگر اسٹورز سے ایکسٹینشنز کی اجازت دیں۔

بنیادی طور پر، عمل یہ ہوگا:

اپنی ایکسٹینشن کو npm run build کے ذریعے بنائیں
براؤزر میں "سیٹنگز اور مزید" بٹن (اوپر دائیں جانب ... آئیکن) کا استعمال کرتے ہوئے ایکسٹینشنز پین پر جائیں
اگر یہ نئی انسٹالیشن ہے، تو load unpacked کا انتخاب کریں تاکہ بلڈ فولڈر (ہمارے کیس میں /dist) سے ایک نئی ایکسٹینشن اپ لوڈ کریں
یا، اگر آپ پہلے سے انسٹال شدہ ایکسٹینشن کو دوبارہ لوڈ کر رہے ہیں تو reload پر کلک کریں

✅ یہ ہدایات ان ایکسٹینشنز کے لیے ہیں جو آپ خود بناتے ہیں؛ ان ایکسٹینشنز کو انسٹال کرنے کے لیے جو براؤزر ایکسٹینشن اسٹور پر ریلیز کی گئی ہیں، آپ کو ان اسٹورز پر جانا چاہیے اور اپنی پسند کی ایکسٹینشن انسٹال کرنی چاہیے۔

شروع کریں

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

آپ کو ضرورت ہے:

ایک API کلید; اس صفحے پر اپنا ای میل درج کریں اور آپ کو ایک کلید بھیجی جائے گی
آپ کے علاقے کے لیے کوڈ جو الیکٹریسٹی میپ سے مطابقت رکھتا ہو (مثال کے طور پر، بوسٹن میں، میں '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>

یہ وہ فارم ہے جہاں آپ کی محفوظ کردہ معلومات کو ان پٹ کیا جائے گا اور مقامی اسٹوریج میں محفوظ کیا جائے گا۔

اب، نتائج کا علاقہ بنائیں؛ آخری فارم ٹیگ کے نیچے کچھ divs شامل کریں:

<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، نوڈ پیکج مینیجر، کو آپ کی ایکسٹینشن کے بلڈ پروسیس کے لیے ویب پیک انسٹال کرنے کے لیے استعمال کرے گی۔ آپ اس عمل کے آؤٹ پٹ کو /dist/main.js میں دیکھ سکتے ہیں - آپ دیکھیں گے کہ کوڈ بنڈل ہو چکا ہے۔

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

مبارک ہو، آپ نے براؤزر ایکسٹینشن بنانے کے لیے پہلا قدم اٹھا لیا ہے۔ اگلے اسباق میں، آپ اسے مزید فعال اور مفید بنائیں گے۔

🚀 چیلنج

براؤزر ایکسٹینشن اسٹور پر ایک نظر ڈالیں اور اپنے براؤزر میں ایک انسٹال کریں۔ آپ اس کی فائلوں کو دلچسپ طریقوں سے جانچ سکتے ہیں۔ آپ کیا دریافت کرتے ہیں؟

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

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

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

ویب براؤزرز کی تاریخ

ویب کی تاریخ

ٹم برنرز لی کے ساتھ ایک انٹرویو

اسائنمنٹ

اپنی ایکسٹینشن کو دوبارہ اسٹائل کریں

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

15 KiB Raw Permalink Blame History Unescape Escape