# بینکنگ ایپ بنائیں حصہ 1: ویب ایپ میں HTML ٹیمپلیٹس اور روٹس
## لیکچر سے پہلے کا کوئز
[لیکچر سے پہلے کا کوئز](https://ff-quizzes.netlify.app/web/quiz/41)
### تعارف
جب سے براؤزرز میں جاوا اسکرپٹ آیا ہے، ویب سائٹس پہلے سے زیادہ انٹرایکٹو اور پیچیدہ ہو گئی ہیں۔ ویب ٹیکنالوجیز اب عام طور پر مکمل طور پر فعال ایپلیکیشنز بنانے کے لیے استعمال ہوتی ہیں جو براہ راست براؤزر میں چلتی ہیں، جنہیں ہم [ویب ایپلیکیشنز](https://en.wikipedia.org/wiki/Web_application) کہتے ہیں۔ چونکہ ویب ایپس بہت زیادہ انٹرایکٹو ہوتی ہیں، صارفین ہر بار کسی عمل کے انجام دینے پر پورے صفحے کو دوبارہ لوڈ کرنے کا انتظار نہیں کرنا چاہتے۔ اسی لیے جاوا اسکرپٹ کا استعمال HTML کو براہ راست DOM کے ذریعے اپ ڈیٹ کرنے کے لیے کیا جاتا ہے، تاکہ صارفین کو ایک ہموار تجربہ فراہم کیا جا سکے۔
اس سبق میں، ہم بینک ویب ایپ بنانے کے لیے بنیادیں رکھیں گے، HTML ٹیمپلیٹس کا استعمال کرتے ہوئے متعدد اسکرینز بنائیں گے جنہیں پورے HTML صفحے کو دوبارہ لوڈ کیے بغیر دکھایا اور اپ ڈیٹ کیا جا سکتا ہے۔
### پیشگی شرط
آپ کو اس سبق میں ہم جو ویب ایپ بنائیں گے اسے ٹیسٹ کرنے کے لیے ایک مقامی ویب سرور کی ضرورت ہوگی۔ اگر آپ کے پاس نہیں ہے، تو آپ [Node.js](https://nodejs.org) انسٹال کر سکتے ہیں اور اپنے پروجیکٹ فولڈر سے کمانڈ `npx lite-server` استعمال کر سکتے ہیں۔ یہ ایک مقامی ویب سرور بنائے گا اور آپ کی ایپ کو براؤزر میں کھولے گا۔
### تیاری
اپنے کمپیوٹر پر ایک فولڈر بنائیں جس کا نام `bank` ہو اور اس کے اندر ایک فائل `index.html` بنائیں۔ ہم اس HTML [بوائلر پلیٹ](https://en.wikipedia.org/wiki/Boilerplate_code) سے شروع کریں گے:
```html
Bank App
```
---
## HTML ٹیمپلیٹس
اگر آپ کسی ویب صفحے کے لیے متعدد اسکرینز بنانا چاہتے ہیں، تو ایک حل یہ ہوگا کہ آپ ہر اسکرین کے لیے ایک HTML فائل بنائیں جسے آپ دکھانا چاہتے ہیں۔ تاہم، یہ حل کچھ مشکلات کے ساتھ آتا ہے:
- اسکرین تبدیل کرتے وقت آپ کو پورے HTML کو دوبارہ لوڈ کرنا پڑتا ہے، جو کہ سست ہو سکتا ہے۔
- مختلف اسکرینز کے درمیان ڈیٹا شیئر کرنا مشکل ہوتا ہے۔
ایک اور طریقہ یہ ہے کہ صرف ایک HTML فائل ہو، اور `` عنصر کا استعمال کرتے ہوئے متعدد [HTML ٹیمپلیٹس](https://developer.mozilla.org/docs/Web/HTML/Element/template) کو ڈیفائن کریں۔ ٹیمپلیٹ ایک قابل استعمال HTML بلاک ہے جو براؤزر کے ذریعے ظاہر نہیں کیا جاتا، اور اسے جاوا اسکرپٹ کے ذریعے رن ٹائم پر انسٹیٹیوٹ کرنے کی ضرورت ہوتی ہے۔
### کام
ہم ایک بینک ایپ بنائیں گے جس میں دو اسکرینز ہوں گی: لاگ ان صفحہ اور ڈیش بورڈ۔ پہلے، آئیے HTML باڈی میں ایک پلیس ہولڈر عنصر شامل کریں جسے ہم اپنی ایپ کی مختلف اسکرینز کو انسٹیٹیوٹ کرنے کے لیے استعمال کریں گے:
```html
Loading...
```
ہم نے اسے ایک `id` دیا ہے تاکہ بعد میں جاوا اسکرپٹ کے ساتھ اسے تلاش کرنا آسان ہو۔
> ٹپ: چونکہ اس عنصر کا مواد تبدیل کیا جائے گا، ہم اس میں ایک لوڈنگ پیغام یا اشارہ ڈال سکتے ہیں جو ایپ کے لوڈ ہونے کے دوران دکھایا جائے گا۔
اگلا، آئیے لاگ ان صفحہ کے لیے HTML ٹیمپلیٹ کو شامل کریں۔ فی الحال ہم اس میں صرف ایک عنوان اور ایک سیکشن ڈالیں گے جس میں ایک لنک ہوگا جسے ہم نیویگیشن انجام دینے کے لیے استعمال کریں گے۔
```html
Bank App
```
پھر ہم ڈیش بورڈ صفحہ کے لیے ایک اور HTML ٹیمپلیٹ شامل کریں گے۔ اس صفحے میں مختلف سیکشنز ہوں گے:
- ایک ہیڈر جس میں عنوان اور لاگ آؤٹ لنک ہوگا
- بینک اکاؤنٹ کا موجودہ بیلنس
- ایک جدول میں دکھائی گئی ٹرانزیکشنز کی فہرست
```html
```
> ٹپ: جب HTML ٹیمپلیٹس بناتے ہیں، اگر آپ دیکھنا چاہتے ہیں کہ یہ کیسا نظر آئے گا، تو آپ `` اور `` لائنز کو `` کے ساتھ بند کرکے کمنٹ کر سکتے ہیں۔
✅ آپ کے خیال میں ہم ٹیمپلیٹس پر `id` ایٹریبیوٹس کیوں استعمال کرتے ہیں؟ کیا ہم کچھ اور استعمال کر سکتے ہیں جیسے کلاسز؟
## جاوا اسکرپٹ کے ساتھ ٹیمپلیٹس دکھانا
اگر آپ اپنے موجودہ HTML فائل کو براؤزر میں آزمائیں، تو آپ دیکھیں گے کہ یہ `Loading...` دکھانے پر پھنس جاتا ہے۔ اس کی وجہ یہ ہے کہ ہمیں HTML ٹیمپلیٹس کو انسٹیٹیوٹ کرنے اور دکھانے کے لیے کچھ جاوا اسکرپٹ کوڈ شامل کرنے کی ضرورت ہے۔
عام طور پر ٹیمپلیٹ کو انسٹیٹیوٹ کرنے کے 3 مراحل ہوتے ہیں:
1. DOM میں ٹیمپلیٹ عنصر کو حاصل کریں، مثال کے طور پر [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById) کا استعمال کرتے ہوئے۔
2. ٹیمپلیٹ عنصر کو کلون کریں، [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode) کا استعمال کرتے ہوئے۔
3. اسے کسی نظر آنے والے عنصر کے تحت DOM سے منسلک کریں، مثال کے طور پر [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) کا استعمال کرتے ہوئے۔
✅ ہمیں ٹیمپلیٹ کو DOM سے منسلک کرنے سے پہلے کلون کرنے کی ضرورت کیوں ہے؟ آپ کے خیال میں اگر ہم اس مرحلے کو چھوڑ دیں تو کیا ہوگا؟
### کام
اپنے پروجیکٹ فولڈر میں `app.js` نامی ایک نئی فائل بنائیں اور اس فائل کو اپنے HTML کے `` سیکشن میں امپورٹ کریں:
```html
```
اب `app.js` میں، ہم ایک نیا فنکشن `updateRoute` بنائیں گے:
```js
function updateRoute(templateId) {
const template = document.getElementById(templateId);
const view = template.content.cloneNode(true);
const app = document.getElementById('app');
app.innerHTML = '';
app.appendChild(view);
}
```
یہاں ہم بالکل وہی 3 مراحل انجام دیتے ہیں جو اوپر بیان کیے گئے ہیں۔ ہم `templateId` کے ساتھ ٹیمپلیٹ کو انسٹیٹیوٹ کرتے ہیں، اور اس کے کلون شدہ مواد کو اپنی ایپ کے پلیس ہولڈر میں رکھتے ہیں۔ نوٹ کریں کہ ہمیں پورے ٹیمپلیٹ کے سب ٹری کو کاپی کرنے کے لیے `cloneNode(true)` کا استعمال کرنا ہوگا۔
اب اس فنکشن کو ٹیمپلیٹ میں سے کسی ایک کے ساتھ کال کریں اور نتیجہ دیکھیں۔
```js
updateRoute('login');
```
✅ اس کوڈ کا مقصد کیا ہے `app.innerHTML = '';`؟ اس کے بغیر کیا ہوگا؟
## روٹس بنانا
جب کسی ویب ایپ کی بات کی جاتی ہے، تو ہم *روٹنگ* کو **URLs** کو مخصوص اسکرینز کے ساتھ میپ کرنے کا ارادہ کہتے ہیں جو دکھائی جانی چاہئیں۔ ایک ویب سائٹ جس میں متعدد HTML فائلز ہوں، اس پر یہ خود بخود ہوتا ہے کیونکہ فائل کے راستے URL پر ظاہر ہوتے ہیں۔ مثال کے طور پر، اگر آپ کے پروجیکٹ فولڈر میں یہ فائلز ہوں:
```
mywebsite/index.html
mywebsite/login.html
mywebsite/admin/index.html
```
اگر آپ `mywebsite` کو روٹ کے طور پر لے کر ایک ویب سرور بناتے ہیں، تو URL میپنگ یہ ہوگی:
```
https://site.com --> mywebsite/index.html
https://site.com/login.html --> mywebsite/login.html
https://site.com/admin/ --> mywebsite/admin/index.html
```
تاہم، ہماری ویب ایپ کے لیے ہم ایک ہی HTML فائل استعمال کر رہے ہیں جس میں تمام اسکرینز موجود ہیں، اس لیے یہ ڈیفالٹ رویہ ہماری مدد نہیں کرے گا۔ ہمیں یہ میپ دستی طور پر بنانا ہوگا اور جاوا اسکرپٹ کا استعمال کرتے ہوئے دکھائی جانے والی ٹیمپلیٹ کو اپ ڈیٹ کرنا ہوگا۔
### کام
ہم ایک سادہ آبجیکٹ استعمال کریں گے تاکہ [میپ](https://en.wikipedia.org/wiki/Associative_array) کو URL راستوں اور اپنی ٹیمپلیٹس کے درمیان نافذ کیا جا سکے۔ اس آبجیکٹ کو اپنے `app.js` فائل کے اوپر شامل کریں۔
```js
const routes = {
'/login': { templateId: 'login' },
'/dashboard': { templateId: 'dashboard' },
};
```
اب آئیے `updateRoute` فنکشن کو تھوڑا سا تبدیل کریں۔ `templateId` کو براہ راست آرگیومنٹ کے طور پر پاس کرنے کے بجائے، ہم پہلے موجودہ URL کو دیکھ کر اسے حاصل کرنا چاہتے ہیں، اور پھر اپنی میپ کا استعمال کرتے ہوئے متعلقہ ٹیمپلیٹ ID ویلیو حاصل کرنا چاہتے ہیں۔ ہم [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) کا استعمال کر سکتے ہیں تاکہ URL سے صرف راستے کا سیکشن حاصل کیا جا سکے۔
```js
function updateRoute() {
const path = window.location.pathname;
const route = routes[path];
const template = document.getElementById(route.templateId);
const view = template.content.cloneNode(true);
const app = document.getElementById('app');
app.innerHTML = '';
app.appendChild(view);
}
```
یہاں ہم نے اپنے اعلان کردہ روٹس کو متعلقہ ٹیمپلیٹ کے ساتھ میپ کیا۔ آپ اسے آزما سکتے ہیں کہ یہ صحیح کام کرتا ہے یا نہیں، براؤزر میں URL کو دستی طور پر تبدیل کرکے۔
✅ اگر آپ URL میں کوئی نامعلوم راستہ درج کریں تو کیا ہوتا ہے؟ ہم اس مسئلے کو کیسے حل کر سکتے ہیں؟
## نیویگیشن شامل کرنا
ہماری ایپ کے لیے اگلا مرحلہ یہ ہے کہ صفحات کے درمیان نیویگیٹ کرنے کی صلاحیت شامل کی جائے بغیر URL کو دستی طور پر تبدیل کیے۔ اس کا مطلب دو چیزیں ہیں:
1. موجودہ URL کو اپ ڈیٹ کرنا
2. نئے URL کی بنیاد پر دکھائی جانے والی ٹیمپلیٹ کو اپ ڈیٹ کرنا
ہم نے پہلے ہی دوسرے حصے کا خیال `updateRoute` فنکشن کے ساتھ رکھا ہے، لہذا ہمیں موجودہ URL کو اپ ڈیٹ کرنے کا طریقہ معلوم کرنا ہوگا۔
ہمیں جاوا اسکرپٹ اور خاص طور پر [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) کا استعمال کرنا ہوگا جو URL کو اپ ڈیٹ کرنے اور براؤزنگ ہسٹری میں ایک نیا اندراج بنانے کی اجازت دیتا ہے، بغیر HTML کو دوبارہ لوڈ کیے۔
> نوٹ: حالانکہ HTML اینکر عنصر [``](https://developer.mozilla.org/docs/Web/HTML/Element/a) کو خود ہی مختلف URLs کے لیے ہائپر لنکس بنانے کے لیے استعمال کیا جا سکتا ہے، لیکن یہ ڈیفالٹ کے طور پر HTML کو دوبارہ لوڈ کر دے گا۔ جب کسٹم جاوا اسکرپٹ کے ساتھ روٹنگ کو ہینڈل کیا جا رہا ہو تو، کلک ایونٹ پر `preventDefault()` فنکشن کا استعمال کرتے ہوئے اس رویے کو روکنا ضروری ہے۔
### کام
آئیے ایک نیا فنکشن بنائیں جسے ہم اپنی ایپ میں نیویگیٹ کرنے کے لیے استعمال کر سکتے ہیں:
```js
function navigate(path) {
window.history.pushState({}, path, path);
updateRoute();
}
```
یہ طریقہ پہلے دیے گئے راستے کی بنیاد پر موجودہ URL کو اپ ڈیٹ کرتا ہے، پھر ٹیمپلیٹ کو اپ ڈیٹ کرتا ہے۔ پراپرٹی `window.location.origin` URL روٹ کو واپس کرتی ہے، جو ہمیں دیے گئے راستے سے مکمل URL کو دوبارہ بنانے کی اجازت دیتی ہے۔
اب جب کہ ہمارے پاس یہ فنکشن ہے، ہم اس مسئلے کا خیال رکھ سکتے ہیں جو ہمارے پاس ہے اگر کوئی راستہ کسی بھی ڈیفائن کردہ روٹ سے میل نہیں کھاتا۔ ہم `updateRoute` فنکشن کو تھوڑا سا تبدیل کریں گے اور اگر ہم کوئی میچ نہیں ڈھونڈ سکتے تو موجودہ روٹ کو موجودہ روٹ میں شامل کریں گے۔
```js
function updateRoute() {
const path = window.location.pathname;
const route = routes[path];
if (!route) {
return navigate('/login');
}
...
```
اگر کوئی روٹ نہیں ملتا، تو ہم اب `login` صفحے پر ری ڈائریکٹ کریں گے۔
اب آئیے ایک فنکشن بنائیں جو لنک پر کلک کرنے پر URL حاصل کرے، اور براؤزر کے ڈیفالٹ لنک رویے کو روکے:
```js
function onLinkClick(event) {
event.preventDefault();
navigate(event.target.href);
}
```
آئیے اپنے *Login* اور *Logout* لنکس میں HTML کے اندر بائنڈنگز شامل کرکے نیویگیشن سسٹم کو مکمل کریں۔
```html
Login
...
Logout
```
اوپر `event` آبجیکٹ، `click` ایونٹ کو کیپچر کرتا ہے اور اسے ہمارے `onLinkClick` فنکشن میں پاس کرتا ہے۔
[`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) ایٹریبیوٹ کا استعمال کرتے ہوئے `click` ایونٹ کو جاوا اسکرپٹ کوڈ کے ساتھ بائنڈ کریں، یہاں `navigate()` فنکشن کو کال کریں۔
ان لنکس پر کلک کرنے کی کوشش کریں، آپ کو اب اپنی ایپ کی مختلف اسکرینز کے درمیان نیویگیٹ کرنے کے قابل ہونا چاہیے۔
✅ `history.pushState` طریقہ HTML5 اسٹینڈرڈ کا حصہ ہے اور [تمام جدید براؤزرز](https://caniuse.com/?search=pushState) میں نافذ کیا گیا ہے۔ اگر آپ پرانے براؤزرز کے لیے ویب ایپ بنا رہے ہیں، تو آپ اس API کی جگہ ایک چال استعمال کر سکتے ہیں: راستے سے پہلے [ہیش (`#`)](https://en.wikipedia.org/wiki/URI_fragment) کا استعمال کرکے آپ روٹنگ کو نافذ کر سکتے ہیں جو کہ عام اینکر نیویگیشن کے ساتھ کام کرتی ہے اور صفحہ کو دوبارہ لوڈ نہیں کرتی، کیونکہ اس کا مقصد صفحے کے اندرونی لنکس بنانا تھا۔
## براؤزر کے بیک اور فارورڈ بٹن کو ہینڈل کرنا
`history.pushState` کا استعمال براؤزر کے نیویگیشن ہسٹری میں نئے اندراجات بناتا ہے۔ آپ یہ چیک کر سکتے ہیں کہ اپنے براؤزر کے *بیک بٹن* کو دبائے رکھ کر، یہ کچھ اس طرح دکھائے گا:
اگر آپ بیک بٹن پر چند بار کلک کرنے کی کوشش کریں، تو آپ دیکھیں گے کہ موجودہ URL تبدیل ہوتا ہے اور ہسٹری اپ ڈیٹ ہوتی ہے، لیکن وہی ٹیمپلیٹ دکھائی دیتا رہتا ہے۔
اس کی وجہ یہ ہے کہ ایپلیکیشن کو معلوم نہیں ہوتا کہ ہمیں ہر بار ہسٹری تبدیل ہونے پر `updateRoute()` کو کال کرنے کی ضرورت ہے۔ اگر آپ [`history.pushState` دستاویزات](https://developer.mozilla.org/docs/Web/API/History/pushState) پر نظر ڈالیں، تو آپ دیکھ سکتے ہیں کہ اگر اسٹیٹ تبدیل ہو جائے - یعنی ہم کسی مختلف URL پر چلے گئے - تو [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) ایونٹ ٹرگر ہوتا ہے۔ ہم اس مسئلے کو حل کرنے کے لیے اس کا استعمال کریں گے۔
### کام
یہ یقینی بنانے کے لیے کہ براؤزر ہسٹری تبدیل ہونے پر دکھائی جانے والی ٹیمپلیٹ اپ ڈیٹ ہو، ہم ایک نیا فنکشن منسلک کریں گے جو `updateRoute()` کو کال کرے گا۔ ہم یہ اپنے `app.js` فائل کے نیچے کریں گے:
```js
window.onpopstate = () => updateRoute();
updateRoute();
```
> نوٹ: ہم نے یہاں اپنے `popstate` ایونٹ ہینڈلر کو مختصر کرنے کے لیے ایک [ایرو فنکشن](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) استعمال کیا، لیکن ایک عام فنکشن بھی اسی طرح کام کرے گا۔
ایرو فنکشنز پر ایک ریفریشر ویڈیو یہاں ہے:
[](https://youtube.com/watch?v=OP6eEbOj2sc "ایرو فنکشنز")
> 🎥 اوپر دی گئی تصویر پر کلک کریں ایرو فنکشنز کے بارے میں ویڈیو دیکھنے کے لیے۔
اب اپنے براؤزر کے بیک اور فارورڈ بٹن کا استعمال کرنے کی کوشش کریں، اور چیک کریں کہ اس بار دکھائی جانے والا روٹ صحیح طور پر اپ ڈیٹ ہوتا ہے۔
---
## GitHub Copilot ایجنٹ چیلنج 🚀
ایجنٹ موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
**تفصیل:** بینکنگ ایپ کو بہتر بنائیں، غلط راستوں پر نیویگیٹ کرنے پر صارف کے تجربے کو بہتر بنانے کے لیے ایرر ہینڈلنگ اور ایک 404 صفحہ ٹیمپلیٹ نافذ کریں۔
**پرومپٹ:** "not-found" کے id کے ساتھ ایک نیا HTML ٹیمپلیٹ بنائیں جو ایک صارف دوست 404 ایرر صفحہ اسٹائلنگ کے ساتھ دکھائے۔ پھر جاوا اسکرپٹ روٹنگ لاجک کو تبدیل کریں تاکہ یہ ٹیمپلیٹ اس وقت دکھائے جب صارفین غلط URLs پر نیویگیٹ کریں، اور ایک "Go Home" بٹن شامل کریں جو لاگ ان صفحے پر واپس نیویگیٹ کرے۔
## 🚀 چیلنج
ایپ کے کریڈٹس دکھانے کے لیے ایک تیسرے صفحے کے لیے ایک نیا ٹیمپلیٹ اور روٹ شامل کریں۔
## لیکچر کے بعد کا کوئز
[لیکچر کے بعد کا کوئز](https://ff-quizzes.netlify.app/web/quiz/42)
## جائزہ اور خود مطالعہ
روٹنگ ویب ڈیولپمنٹ کے حیرت انگیز طور پر مشکل حصوں میں سے ایک ہے، خاص طور پر جب ویب صفحے کے ریفریش رویے سے سنگل پیج ایپلیکیشن کے صفحے کے ریفریشز کی طرف بڑھتا ہے۔ [Azure Static Web App سروس](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) روٹنگ کو کیسے ہینڈل کرتی ہے اس کے بارے میں تھوڑا سا پڑھیں۔ کیا آپ وضاحت کر سکتے ہیں کہ اس دستاویز میں بیان کردہ کچھ فیصلے کیوں ضروری ہیں؟
## اسائنمنٹ
[روٹنگ کو بہتر بنائیں](assignment.md)
---
**ڈسکلیمر**:
یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔