22 KiB

Raw Permalink Blame History

بینکنگ ایپ بنائیں حصہ 1: ویب ایپ میں HTML ٹیمپلیٹس اور روٹس

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

تعارف

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

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

پیشگی شرائط

آپ کو اس سبق میں بنائی جانے والی ویب ایپ کو ٹیسٹ کرنے کے لیے ایک مقامی ویب سرور کی ضرورت ہوگی۔ اگر آپ کے پاس نہیں ہے، تو آپ Node.js انسٹال کر سکتے ہیں اور اپنے پروجیکٹ فولڈر سے npx lite-server کمانڈ استعمال کر سکتے ہیں۔ یہ ایک مقامی ویب سرور بنائے گا اور آپ کی ایپ کو براؤزر میں کھولے گا۔

تیاری

اپنے کمپیوٹر پر bank نامی ایک فولڈر بنائیں اور اس کے اندر index.html نامی ایک فائل رکھیں۔ ہم اس HTML بوائلر پلیٹ سے شروع کریں گے:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bank App</title>
  </head>
  <body>
    <!-- This is where you'll work -->
  </body>
</html>

HTML ٹیمپلیٹس

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

اسکرین سوئچ کرتے وقت آپ کو پورے HTML کو دوبارہ لوڈ کرنا پڑتا ہے، جو کہ سست ہو سکتا ہے۔
مختلف اسکرینز کے درمیان ڈیٹا کا اشتراک کرنا مشکل ہو جاتا ہے۔

ایک اور طریقہ یہ ہے کہ صرف ایک HTML فائل ہو، اور <template> عنصر کا استعمال کرتے ہوئے متعدد HTML ٹیمپلیٹس کو ڈیفائن کریں۔ ایک ٹیمپلیٹ ایک قابل استعمال HTML بلاک ہے جو براؤزر کے ذریعے ظاہر نہیں کیا جاتا، اور اسے رن ٹائم پر جاوا اسکرپٹ کا استعمال کرتے ہوئے انسٹیٹیوٹ کرنا پڑتا ہے۔

کام

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

<div id="app">Loading...</div>

ہم نے اسے ایک id دیا ہے تاکہ بعد میں جاوا اسکرپٹ کے ساتھ اسے تلاش کرنا آسان ہو۔

ٹپ: چونکہ اس عنصر کا مواد تبدیل ہو جائے گا، ہم اس میں ایک لوڈنگ پیغام یا اشارہ ڈال سکتے ہیں جو ایپ کے لوڈ ہونے کے دوران دکھایا جائے گا۔

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

<template id="login">
  <h1>Bank App</h1>
  <section>
    <a href="/dashboard">Login</a>
  </section>
</template>

پھر ہم ڈیش بورڈ صفحے کے لیے ایک اور HTML ٹیمپلیٹ شامل کریں گے۔ اس صفحے میں مختلف سیکشنز ہوں گے:

ایک ہیڈر جس میں ایک عنوان اور لاگ آؤٹ لنک ہوگا
بینک اکاؤنٹ کا موجودہ بیلنس
لین دین کی فہرست، جو ایک ٹیبل میں دکھائی جائے گی

<template id="dashboard">
  <header>
    <h1>Bank App</h1>
    <a href="/login">Logout</a>
  </header>
  <section>
    Balance: 100$
  </section>
  <section>
    <h2>Transactions</h2>
    <table>
      <thead>
        <tr>
          <th>Date</th>
          <th>Object</th>
          <th>Amount</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </section>
</template>

ٹپ: جب HTML ٹیمپلیٹس بناتے ہیں، اگر آپ دیکھنا چاہتے ہیں کہ یہ کیسا نظر آئے گا، تو آپ <template> اور </template> لائنز کو  کے ساتھ تبصرہ کر سکتے ہیں۔

✅ آپ کے خیال میں ہم ٹیمپلیٹس پر id ایٹریبیوٹس کیوں استعمال کرتے ہیں؟ کیا ہم اس کے بجائے کچھ اور جیسے کلاسز استعمال کر سکتے ہیں؟

جاوا اسکرپٹ کے ساتھ ٹیمپلیٹس کو ظاہر کرنا

اگر آپ موجودہ HTML فائل کو براؤزر میں آزماتے ہیں، تو آپ دیکھیں گے کہ یہ Loading... پر پھنس جاتی ہے۔ اس کی وجہ یہ ہے کہ ہمیں HTML ٹیمپلیٹس کو انسٹیٹیوٹ اور ظاہر کرنے کے لیے کچھ جاوا اسکرپٹ کوڈ شامل کرنے کی ضرورت ہے۔

ٹیمپلیٹ کو انسٹیٹیوٹ کرنے کے لیے عام طور پر 3 مراحل ہوتے ہیں:

DOM میں ٹیمپلیٹ عنصر کو بازیافت کریں، مثال کے طور پر document.getElementById کا استعمال کرتے ہوئے۔
ٹیمپلیٹ عنصر کو کلون کریں، cloneNode کا استعمال کرتے ہوئے۔
اسے DOM میں کسی نظر آنے والے عنصر کے تحت منسلک کریں، مثال کے طور پر appendChild کا استعمال کرتے ہوئے۔

✅ ہمیں ٹیمپلیٹ کو DOM میں منسلک کرنے سے پہلے کلون کرنے کی ضرورت کیوں ہے؟ آپ کے خیال میں اگر ہم اس مرحلے کو چھوڑ دیں تو کیا ہوگا؟

کام

اپنے پروجیکٹ فولڈر میں app.js نامی ایک نئی فائل بنائیں اور اس فائل کو اپنے HTML کے <head> سیکشن میں شامل کریں:

<script src="app.js" defer></script>

اب app.js میں، ہم ایک نیا فنکشن updateRoute بنائیں گے:

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) استعمال کرنے کی ضرورت ہے تاکہ ٹیمپلیٹ کے پورے سب ٹری کو کاپی کیا جا سکے۔

اب اس فنکشن کو کسی ایک ٹیمپلیٹ کے ساتھ کال کریں اور نتیجہ دیکھیں۔

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 فائل استعمال کر رہے ہیں جس میں تمام اسکرینز موجود ہیں، اس لیے یہ ڈیفالٹ رویہ ہمارے لیے مددگار نہیں ہوگا۔ ہمیں یہ میپ دستی طور پر بنانا ہوگا اور جاوا اسکرپٹ کا استعمال کرتے ہوئے ظاہر ہونے والے ٹیمپلیٹ کو اپ ڈیٹ کرنا ہوگا۔

کام

ہم ایک سادہ آبجیکٹ استعمال کریں گے تاکہ میپ کو URL راستوں اور ہمارے ٹیمپلیٹس کے درمیان نافذ کیا جا سکے۔ اس آبجیکٹ کو اپنے app.js فائل کے اوپر شامل کریں:

const routes = {
  '/login': { templateId: 'login' },
  '/dashboard': { templateId: 'dashboard' },
};

اب updateRoute فنکشن کو تھوڑا سا تبدیل کریں۔ ہم templateId کو براہ راست آرگومنٹ کے طور پر پاس کرنے کے بجائے، پہلے موجودہ URL کو دیکھ کر اسے بازیافت کرنا چاہتے ہیں، اور پھر ہمارے میپ کا استعمال کرتے ہوئے متعلقہ ٹیمپلیٹ ID ویلیو حاصل کرنا چاہتے ہیں۔ ہم window.location.pathname کا استعمال کر سکتے ہیں تاکہ URL سے صرف راستہ سیکشن حاصل کیا جا سکے۔

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 کو دستی طور پر تبدیل کیے۔ اس کا مطلب دو چیزیں ہیں:

موجودہ URL کو اپ ڈیٹ کرنا
نئے URL کی بنیاد پر ظاہر ہونے والے ٹیمپلیٹ کو اپ ڈیٹ کرنا

ہم نے پہلے ہی دوسرے حصے کا خیال updateRoute فنکشن کے ساتھ رکھا ہے، اس لیے ہمیں یہ معلوم کرنا ہوگا کہ موجودہ URL کو کیسے اپ ڈیٹ کیا جائے۔

ہمیں جاوا اسکرپٹ کا استعمال کرنا ہوگا اور خاص طور پر history.pushState کا، جو HTML کو دوبارہ لوڈ کیے بغیر URL کو اپ ڈیٹ کرنے اور براؤزنگ ہسٹری میں ایک نیا اندراج بنانے کی اجازت دیتا ہے۔

نوٹ: اگرچہ HTML اینکر عنصر <a href> کو مختلف URLs کے لیے ہائپر لنکس بنانے کے لیے خود ہی استعمال کیا جا سکتا ہے، یہ ڈیفالٹ کے طور پر براؤزر کو HTML کو دوبارہ لوڈ کرنے پر مجبور کرے گا۔ جب کسٹم جاوا اسکرپٹ کے ساتھ روٹنگ کو ہینڈل کرتے ہیں تو اس رویے کو روکنا ضروری ہے، preventDefault() فنکشن کا استعمال کرتے ہوئے کلک ایونٹ پر۔

کام

آئیے ایک نیا فنکشن بناتے ہیں جسے ہم اپنی ایپ میں نیویگیٹ کرنے کے لیے استعمال کر سکتے ہیں:

function navigate(path) {
  window.history.pushState({}, path, path);
  updateRoute();
}

یہ میتھڈ پہلے دیے گئے راستے کی بنیاد پر موجودہ URL کو اپ ڈیٹ کرتا ہے، پھر ٹیمپلیٹ کو اپ ڈیٹ کرتا ہے۔ پراپرٹی window.location.origin URL روٹ کو واپس کرتی ہے، جو ہمیں دیے گئے راستے سے مکمل URL کو دوبارہ بنانے کی اجازت دیتی ہے۔

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

function updateRoute() {
  const path = window.location.pathname;
  const route = routes[path];

  if (!route) {
    return navigate('/login');
  }

  ...

اگر کوئی روٹ نہیں ملتا، تو ہم اب login صفحے پر ری ڈائریکٹ کریں گے۔

اب ایک فنکشن بنائیں تاکہ لنک پر کلک کرنے پر URL حاصل کیا جا سکے، اور براؤزر کے ڈیفالٹ لنک رویے کو روکا جا سکے:

function onLinkClick(event) {
  event.preventDefault();
  navigate(event.target.href);
}

آئیے نیویگیشن سسٹم کو مکمل کریں اور اپنے HTML میں Login اور Logout لنکس کے لیے بائنڈنگز شامل کریں:

<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
...
<a href="/login" onclick="onLinkClick(event)">Logout</a>

اوپر دیا گیا event آبجیکٹ، click ایونٹ کو کیپچر کرتا ہے اور اسے ہمارے onLinkClick فنکشن میں پاس کرتا ہے۔

onclick ایٹریبیوٹ کا استعمال کرتے ہوئے click ایونٹ کو جاوا اسکرپٹ کوڈ کے ساتھ باندھیں، یہاں navigate() فنکشن کو کال کریں۔

ان لنکس پر کلک کرنے کی کوشش کریں، آپ کو اب اپنی ایپ کی مختلف اسکرینز کے درمیان نیویگیٹ کرنے کے قابل ہونا چاہیے۔

✅ history.pushState میتھڈ HTML5 اسٹینڈرڈ کا حصہ ہے اور تمام جدید براؤزرز میں نافذ ہے۔ اگر آپ پرانے براؤزرز کے لیے ویب ایپ بنا رہے ہیں، تو آپ اس API کی جگہ ایک چال استعمال کر سکتے ہیں: راستے سے پہلے ہیش (#) کا استعمال کرتے ہوئے آپ روٹنگ کو نافذ کر سکتے ہیں جو ریگولر اینکر نیویگیشن کے ساتھ کام کرتا ہے اور صفحہ کو دوبارہ لوڈ نہیں کرتا، کیونکہ اس کا مقصد صفحے کے اندرونی لنکس بنانا تھا۔

براؤزر کے بیک اور فارورڈ بٹن کو ہینڈل کرنا

history.pushState کا استعمال براؤزر کی نیویگیشن ہسٹری میں نئے اندراجات بناتا ہے۔ آپ اسے اپنے براؤزر کے بیک بٹن کو دبائے رکھ کر چیک کر سکتے ہیں، یہ کچھ اس طرح دکھائے گا:

اگر آپ بیک بٹن پر چند بار کلک کرنے کی کوشش کریں، تو آپ دیکھیں گے کہ موجودہ URL تبدیل ہو جاتا ہے اور ہسٹری اپ ڈیٹ ہو جاتی ہے، لیکن وہی ٹیمپلیٹ ظاہر ہوتا رہتا ہے۔

اس کی وجہ یہ ہے کہ ایپلیکیشن کو یہ معلوم نہیں ہوتا کہ ہمیں ہر بار ہسٹری تبدیل ہونے پر updateRoute() کو کال کرنے کی ضرورت ہے۔ اگر آپ history.pushState دستاویزات کو دیکھیں، تو آپ دیکھ سکتے ہیں کہ اگر اسٹیٹ تبدیل ہو جائے - یعنی ہم کسی مختلف URL پر چلے گئے - تو popstate ایونٹ ٹرگر ہوتا ہے۔ ہم اس مسئلے کو حل کرنے کے لیے اس کا استعمال کریں گے۔

کام

یہ یقینی بنانے کے لیے کہ براؤزر ہسٹری تبدیل ہونے پر ظاہر ہونے والا ٹیمپلیٹ اپ ڈیٹ ہو، ہم ایک نیا فنکشن منسلک کریں گے جو updateRoute() کو کال کرے۔ ہم یہ اپنے app.js فائل کے آخر میں کریں گے:

window.onpopstate = () => updateRoute();
updateRoute();

نوٹ: ہم نے یہاں اپنے popstate ایونٹ ہینڈلر کو مختصر کرنے کے لیے ایک ایرو فنکشن استعمال کیا، لیکن ایک ریگولر فنکشن بھی اسی طرح کام کرے گا۔

یہاں ایرو فنکشنز پر ایک ریفریشر ویڈیو ہے:

🎥 اوپر دی گئی تصویر پر کلک کریں ایرو فنکشنز کے بارے میں ویڈیو دیکھنے کے لیے۔

اب اپنے براؤزر کے بیک اور فارورڈ بٹن استعمال کرنے کی کوشش کریں، اور چیک کریں کہ اس بار ظاہر ہونے والا روٹ صحیح طریقے سے اپ ڈیٹ ہو رہا ہے۔

🚀 چیلنج

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

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

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

روٹنگ ویب ڈویلپمنٹ کے حیرت انگیز طور پر مشکل حصوں میں سے ایک ہے، خاص طور پر جب ویب صفحہ ریفریش رویے سے سنگل پیج ایپلیکیشن ریفریشز کی طرف منتقل ہو رہا ہے۔ Azure Static Web App سروس روٹنگ کو کیسے ہینڈل کرتی ہے اس کے بارے میں تھوڑا پڑھیں۔ کیا آپ وضاحت کر سکتے ہیں کہ اس دستاویز میں بیان کردہ کچھ فیصلے کیوں ضروری ہیں؟

اسائنمنٹ

روٹنگ کو بہتر بنائیں

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

22 KiB Raw Permalink Blame History