37 KiB

Raw Blame History Unescape Escape

بینکنگ ایپ بنائیں حصہ 4: اسٹیٹ مینجمنٹ کے تصورات

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

تعارف

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

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

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

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

ضروریات

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

ضروری سیٹ اپ:

ڈیٹا فچنگ سبق مکمل کریں - آپ کی ایپ کو کامیابی کے ساتھ اکاؤنٹ ڈیٹا لوڈ اور ظاہر کرنا چاہیے
اپنے سسٹم پر Node.js انسٹال کریں تاکہ بیک اینڈ API چلایا جا سکے
اکاؤنٹ ڈیٹا آپریشنز کو ہینڈل کرنے کے لیے سرور API کو مقامی طور پر شروع کریں

اپنے ماحول کی جانچ کریں:

اپنے API سرور کے صحیح طریقے سے چلنے کی تصدیق کرنے کے لیے، ٹرمینل میں یہ کمانڈ چلائیں:

curl http://localhost:5000/api
# -> should return "Bank API v1.0.0" as a result

یہ کمانڈ کیا کرتی ہے:

GET درخواست بھیجتی ہے آپ کے مقامی API سرور کو
کنکشن کی جانچ کرتی ہے اور تصدیق کرتی ہے کہ سرور جواب دے رہا ہے
API ورژن کی معلومات واپس کرتی ہے اگر سب کچھ ٹھیک کام کر رہا ہو

موجودہ اسٹیٹ کے مسائل کی تشخیص

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

آئیے ایک سادہ تجربہ کریں جو بنیادی اسٹیٹ مینجمنٹ چیلنجز کو ظاہر کرتا ہے:

🧪 یہ تشخیصی ٹیسٹ آزمائیں:

اپنی بینکنگ ایپ میں لاگ ان کریں اور ڈیش بورڈ پر جائیں
براؤزر کا صفحہ ریفریش کریں
مشاہدہ کریں کہ آپ کے لاگ ان کی حیثیت کے ساتھ کیا ہوتا ہے

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

موجودہ عمل درآمد کے مسائل:

ہمارے پچھلے سبق سے سادہ account ویریبل تین اہم مسائل پیدا کرتا ہے جو صارف کے تجربے اور کوڈ کی دیکھ بھال کو متاثر کرتے ہیں:

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

معماری کا چیلنج:

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

💡 ہم یہاں اصل میں کیا حاصل کرنے کی کوشش کر رہے ہیں؟

اسٹیٹ مینجمنٹ واقعی دو بنیادی پہیلیاں حل کرنے کے بارے میں ہے:

میرا ڈیٹا کہاں ہے؟: یہ معلوم کرنا کہ ہمارے پاس کون سی معلومات ہیں اور وہ کہاں سے آ رہی ہیں
کیا سب ایک ہی صفحے پر ہیں؟: یہ یقینی بنانا کہ صارفین جو دیکھتے ہیں وہی ہے جو اصل میں ہو رہا ہے

ہمارا منصوبہ:

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

اس ڈیٹا کے بہاؤ کو سمجھنا:

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

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

⚠️ اعلی درجے کا موضوع: ہم اسٹیٹ تبدیلیوں کے ذریعے خودکار UI اپ ڈیٹس کا احاطہ نہیں کریں گے، کیونکہ اس میں ری ایکٹیو پروگرامنگ کے تصورات شامل ہیں۔ اسے اپنی سیکھنے کی سفر کے لیے ایک بہترین اگلا قدم سمجھیں!

کام: اسٹیٹ اسٹرکچر کو مرکزی بنائیں

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

مرحلہ 1: ایک مرکزی اسٹیٹ آبجیکٹ بنائیں

سادہ account اعلان کو تبدیل کریں:

let account = null;

ایک منظم اسٹیٹ آبجیکٹ کے ساتھ:

let state = {
  account: null
};

یہ تبدیلی کیوں اہم ہے:

مرکزی بناتا ہے تمام ایپلیکیشن ڈیٹا کو ایک جگہ پر
تیار کرتا ہے اسٹرکچر کو بعد میں مزید اسٹیٹ پراپرٹیز شامل کرنے کے لیے
واضح حد بناتا ہے اسٹیٹ اور دیگر ویریبلز کے درمیان
ایسا نمونہ قائم کرتا ہے جو آپ کی ایپ کے بڑھنے کے ساتھ ساتھ اسکیل کرے

مرحلہ 2: اسٹیٹ تک رسائی کے نمونوں کو اپ ڈیٹ کریں

اپنے فنکشنز کو نئے اسٹیٹ اسٹرکچر استعمال کرنے کے لیے اپ ڈیٹ کریں:

register() اور login() فنکشنز میں، تبدیل کریں:

account = ...

کے ساتھ:

state.account = ...

updateDashboard() فنکشن میں، یہ لائن اوپر شامل کریں:

const account = state.account;

یہ اپ ڈیٹس کیا حاصل کرتی ہیں:

موجودہ فعالیت کو برقرار رکھتی ہیں جبکہ اسٹرکچر کو بہتر بناتی ہیں
آپ کے کوڈ کو مزید پیچیدہ اسٹیٹ مینجمنٹ کے لیے تیار کرتی ہیں
اسٹیٹ ڈیٹا تک رسائی کے لیے مستقل نمونہ بناتی ہیں
مرکزی اسٹیٹ اپ ڈیٹس کے لیے بنیاد قائم کرتی ہیں

💡 نوٹ: یہ ریفیکٹرنگ فوری طور پر ہمارے مسائل کو حل نہیں کرتی، لیکن یہ آنے والی طاقتور بہتریوں کے لیے ضروری بنیاد قائم کرتی ہے!

کنٹرول شدہ اسٹیٹ اپ ڈیٹس نافذ کرنا

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

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

غیر تبدیل شدہ اسٹیٹ مینجمنٹ:

ہم اپنے state آبجیکٹ کو غیر تبدیل شدہ کے طور پر برتیں گے، یعنی ہم اسے براہ راست تبدیل نہیں کریں گے۔ اس کے بجائے، ہر تبدیلی ایک نئے اسٹیٹ آبجیکٹ کو تخلیق کرتی ہے جس میں اپ ڈیٹ شدہ ڈیٹا ہوتا ہے۔

یہ طریقہ براہ راست ترمیم کے مقابلے میں ابتدائی طور پر غیر مؤثر لگ سکتا ہے، لیکن یہ ڈیبگنگ، ٹیسٹنگ، اور ایپلیکیشن کی پیش گوئی کو برقرار رکھنے کے لیے اہم فوائد فراہم کرتا ہے۔

غیر تبدیل شدہ اسٹیٹ مینجمنٹ کے فوائد:

فائدہ	وضاحت	اثر
پیش گوئی کے قابل	تبدیلیاں صرف کنٹرول شدہ فنکشنز کے ذریعے ہوتی ہیں	ڈیبگنگ اور ٹیسٹنگ آسان
تاریخ کا ٹریکنگ	ہر اسٹیٹ تبدیلی ایک نیا آبجیکٹ تخلیق کرتی ہے	انڈو/ریڈو فعالیت کو فعال کرتا ہے
سائیڈ ایفیکٹ کی روک تھام	کوئی حادثاتی ترمیم نہیں	پراسرار بگز کو روکتا ہے
کارکردگی کی اصلاح	آسانی سے پتہ چلتا ہے کہ اسٹیٹ واقعی تبدیل ہوا	مؤثر UI اپ ڈیٹس کو فعال کرتا ہے

JavaScript میں Object.freeze() کے ساتھ غیر تبدیل شدہ اسٹیٹ:

JavaScript Object.freeze() فراہم کرتا ہے تاکہ آبجیکٹ کی ترمیم کو روکا جا سکے:

const immutableState = Object.freeze({ account: userData });
// Any attempt to modify immutableState will throw an error

یہاں کیا ہوتا ہے:

روکتا ہے براہ راست پراپرٹی اسائنمنٹس یا ڈیلیشنز
استثنیٰ پھینکتا ہے اگر ترمیم کی کوشش کی جائے
یقینی بناتا ہے کہ اسٹیٹ تبدیلیاں کنٹرول شدہ فنکشنز کے ذریعے ہونی چاہئیں
ایک واضح معاہدہ تخلیق کرتا ہے کہ اسٹیٹ کو کیسے اپ ڈیٹ کیا جا سکتا ہے

💡 گہرائی میں جائیں: MDN دستاویزات میں شالو اور ڈیپ غیر تبدیل شدہ آبجیکٹس کے درمیان فرق کے بارے میں جانیں۔ پیچیدہ اسٹیٹ اسٹرکچرز کے لیے اس فرق کو سمجھنا بہت ضروری ہے۔

کام

آئیے ایک نیا updateState() فنکشن بنائیں:

function updateState(property, newData) {
  state = Object.freeze({
    ...state,
    [property]: newData
  });
}

اس فنکشن میں، ہم ایک نیا اسٹیٹ آبجیکٹ تخلیق کر رہے ہیں اور پچھلے اسٹیٹ سے ڈیٹا کو اسپریڈ (...) آپریٹر کا استعمال کرتے ہوئے کاپی کر رہے ہیں۔ پھر ہم اسٹیٹ آبجیکٹ کی ایک خاص پراپرٹی کو نئے ڈیٹا کے ساتھ بریکٹ نوٹیشن [property] کے ذریعے اسائن کرتے ہیں۔ آخر میں، ہم Object.freeze() کا استعمال کرتے ہوئے آبجیکٹ کو ترمیم سے روک دیتے ہیں۔ فی الحال ہمارے پاس اسٹیٹ میں صرف account پراپرٹی اسٹور ہے، لیکن اس طریقے کے ساتھ آپ اسٹیٹ میں جتنی پراپرٹیز چاہیں شامل کر سکتے ہیں۔

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

let state = Object.freeze({
  account: null
});

اس کے بعد، register فنکشن کو اپ ڈیٹ کریں اور state.account = result; اسائنمنٹ کو تبدیل کریں:

updateState('account', result);

login فنکشن کے ساتھ بھی یہی کریں، state.account = data; کو تبدیل کریں:

updateState('account', data);

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

ایک نیا فنکشن logout() بنائیں:

function logout() {
  updateState('account', null);
  navigate('/login');
}

updateDashboard() میں، ری ڈائریکشن return navigate('/login'); کو return logout(); کے ساتھ تبدیل کریں۔

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

ٹپ: آپ تمام اسٹیٹ تبدیلیوں کو دیکھنے کے لیے updateState() کے نیچے console.log(state) شامل کر سکتے ہیں اور اپنے براؤزر کے ڈیولپمنٹ ٹولز میں کنسول کھول سکتے ہیں۔

ڈیٹا پرسیسٹنس نافذ کرنا

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

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

ڈیٹا پرسیسٹنس کے لیے اسٹریٹجک سوالات:

پرسیسٹنس کو نافذ کرنے سے پہلے، ان اہم عوامل پر غور کریں:

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

براؤزر اسٹوریج کے اختیارات:

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

پرائمری اسٹوریج APIs:

localStorage: مستقل Key/Value اسٹوریج
- برقرار رکھتا ہے ڈیٹا کو براؤزر سیشنز کے دوران غیر معینہ مدت تک
- **براؤزر ری اسٹارٹس اور

💡 اعلیٰ آپشن: پیچیدہ آف لائن ایپلیکیشنز کے لیے جن میں بڑے ڈیٹا سیٹس ہوں، IndexedDB API پر غور کریں۔ یہ مکمل کلائنٹ سائیڈ ڈیٹا بیس فراہم کرتا ہے لیکن اس کے لیے زیادہ پیچیدہ عمل درآمد کی ضرورت ہوتی ہے۔

کام: localStorage پرسسٹنس نافذ کریں

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

مرحلہ 1: اسٹوریج کنفیگریشن کی وضاحت کریں

const storageKey = 'savedAccount';

یہ مستقل کیا فراہم کرتا ہے:

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

مرحلہ 2: خودکار پرسسٹنس شامل کریں

updateState() فنکشن کے آخر میں یہ لائن شامل کریں:

localStorage.setItem(storageKey, JSON.stringify(state.account));

یہاں کیا ہوتا ہے:

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

💡 آرکیٹیکچر کا فائدہ: چونکہ ہم نے تمام اسٹیٹ اپ ڈیٹس کو updateState() کے ذریعے مرکزی بنایا، پرسسٹنس شامل کرنے کے لیے صرف ایک لائن کوڈ کی ضرورت تھی۔ یہ اچھے آرکیٹیکچرل فیصلوں کی طاقت کو ظاہر کرتا ہے!

مرحلہ 3: ایپ لوڈ پر اسٹیٹ بحال کریں

محفوظ کردہ ڈیٹا کو بحال کرنے کے لیے ایک ابتدائی فنکشن بنائیں:

function init() {
  const savedAccount = localStorage.getItem(storageKey);
  if (savedAccount) {
    updateState('account', JSON.parse(savedAccount));
  }

  // Our previous initialization code
  window.onpopstate = () => updateRoute();
  updateRoute();
}

init();

ابتدائی عمل کو سمجھنا:

پہلے سے محفوظ کردہ اکاؤنٹ ڈیٹا کو حاصل کرتا ہے localStorage سے
JSON اسٹرنگ کو دوبارہ جاوا اسکرپٹ آبجیکٹ میں تبدیل کرتا ہے
اسٹیٹ کو اپ ڈیٹ کرتا ہے ہماری کنٹرولڈ اپ ڈیٹ فنکشن کا استعمال کرتے ہوئے
صارف کا سیشن خودکار طور پر بحال کرتا ہے صفحہ لوڈ پر
روٹ اپ ڈیٹس سے پہلے عمل کرتا ہے تاکہ اسٹیٹ دستیاب ہو

مرحلہ 4: ڈیفالٹ روٹ کو بہتر بنائیں

پرسسٹنس کا فائدہ اٹھانے کے لیے ڈیفالٹ روٹ کو اپ ڈیٹ کریں:

updateRoute() میں، تبدیل کریں:

// Replace: return navigate('/login');
return navigate('/dashboard');

یہ تبدیلی کیوں معنی رکھتی ہے:

ہمارے نئے پرسسٹنس سسٹم کا مؤثر طریقے سے فائدہ اٹھاتا ہے
ڈیش بورڈ کو اجازت دیتا ہے کہ وہ تصدیقی چیک سنبھالے
لاگ ان پر خودکار ری ڈائریکٹ کرتا ہے اگر کوئی محفوظ سیشن موجود نہ ہو
زیادہ ہموار صارف تجربہ تخلیق کرتا ہے

اپنے نفاذ کی جانچ کریں:

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

🎉 کامیابی حاصل کی گئی: آپ نے کامیابی سے مستقل اسٹیٹ مینجمنٹ نافذ کی! آپ کی ایپ اب ایک پیشہ ور ویب ایپلیکیشن کی طرح کام کرتی ہے۔

پرسسٹنس کو ڈیٹا تازگی کے ساتھ متوازن کرنا

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

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

🧪 ڈیٹا تازگی کے مسئلے کو دریافت کرنا:

test اکاؤنٹ کا استعمال کرتے ہوئے ڈیش بورڈ میں لاگ ان کریں
اس کمانڈ کو ٹرمینل میں چلائیں تاکہ کسی دوسرے ذریعہ سے ٹرانزیکشن کی نقل کی جا سکے:

curl --request POST \
     --header "Content-Type: application/json" \
     --data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
     http://localhost:5000/api/accounts/test/transactions

اپنے براؤزر میں ڈیش بورڈ صفحہ کو ریفریش کریں
مشاہدہ کریں کہ آیا آپ کو نیا ٹرانزیکشن نظر آتا ہے

یہ ٹیسٹ کیا ظاہر کرتا ہے:

دکھاتا ہے کہ localStorage "پرانی" (غیر تازہ) ہو سکتی ہے
حقیقی دنیا کے منظرنامے کی نقل کرتا ہے جہاں ڈیٹا تبدیلیاں آپ کی ایپ کے باہر ہوتی ہیں
پرسسٹنس اور ڈیٹا تازگی کے درمیان تناؤ کو ظاہر کرتا ہے

ڈیٹا تازگی کا چیلنج:

مسئلہ	وجہ	صارف پر اثر
پرانی ڈیٹا	localStorage خودکار طور پر ختم نہیں ہوتا	صارفین کو پرانی معلومات نظر آتی ہیں
سرور تبدیلیاں	دیگر ایپس/صارفین ایک ہی ڈیٹا میں ترمیم کرتے ہیں	پلیٹ فارمز کے درمیان غیر مستقل نظارے
کیش بمقابلہ حقیقت	مقامی کیش سرور اسٹیٹ سے میل نہیں کھاتا	خراب صارف تجربہ اور الجھن

حل کی حکمت عملی:

ہم "لوڈ پر ریفریش" پیٹرن نافذ کریں گے جو پرسسٹنس کے فوائد کو تازہ ڈیٹا کی ضرورت کے ساتھ متوازن کرتا ہے۔ یہ طریقہ ہموار صارف تجربہ برقرار رکھتا ہے جبکہ ڈیٹا کی درستگی کو یقینی بناتا ہے۔

کام: ڈیٹا ریفریش سسٹم نافذ کریں

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

مرحلہ 1: اکاؤنٹ ڈیٹا اپڈیٹر بنائیں

async function updateAccountData() {
  const account = state.account;
  if (!account) {
    return logout();
  }

  const data = await getAccount(account.user);
  if (data.error) {
    return logout();
  }

  updateState('account', data);
}

اس فنکشن کی منطق کو سمجھنا:

چیک کرتا ہے کہ آیا صارف فی الحال لاگ ان ہے (state.account موجود ہے)
لاگ آؤٹ پر ری ڈائریکٹ کرتا ہے اگر کوئی درست سیشن نہ پایا جائے
سرور سے تازہ اکاؤنٹ ڈیٹا حاصل کرتا ہے موجودہ getAccount() فنکشن کا استعمال کرتے ہوئے
سرور کی غلطیوں کو خوش اسلوبی سے سنبھالتا ہے غیر درست سیشنز کو لاگ آؤٹ کر کے
اسٹیٹ کو تازہ ڈیٹا کے ساتھ اپ ڈیٹ کرتا ہے ہماری کنٹرولڈ اپ ڈیٹ سسٹم کا استعمال کرتے ہوئے
خودکار localStorage پرسسٹنس کو متحرک کرتا ہے updateState() فنکشن کے ذریعے

مرحلہ 2: ڈیش بورڈ ریفریش ہینڈلر بنائیں

async function refresh() {
  await updateAccountData();
  updateDashboard();
}

یہ ریفریش فنکشن کیا حاصل کرتا ہے:

ڈیٹا ریفریش اور UI اپ ڈیٹ عمل کو مربوط کرتا ہے
تازہ ڈیٹا لوڈ ہونے کا انتظار کرتا ہے ڈسپلے کو اپ ڈیٹ کرنے سے پہلے
یقینی بناتا ہے کہ ڈیش بورڈ سب سے تازہ معلومات دکھاتا ہے
ڈیٹا مینجمنٹ اور UI اپ ڈیٹس کے درمیان صاف علیحدگی برقرار رکھتا ہے

مرحلہ 3: روٹ سسٹم کے ساتھ انضمام کریں

اپنے روٹ کنفیگریشن کو اپ ڈیٹ کریں تاکہ ریفریش خودکار طور پر متحرک ہو:

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

یہ انضمام کیسے کام کرتا ہے:

ریفریش فنکشن کو عمل میں لاتا ہے ہر بار جب ڈیش بورڈ روٹ لوڈ ہوتا ہے
یقینی بناتا ہے کہ تازہ ڈیٹا ہمیشہ دکھایا جاتا ہے جب صارفین ڈیش بورڈ پر جاتے ہیں
موجودہ روٹ اسٹرکچر کو برقرار رکھتا ہے جبکہ ڈیٹا تازگی شامل کرتا ہے
روٹ مخصوص ابتدائی عمل کے لیے ایک مستقل پیٹرن فراہم کرتا ہے

اپنے ڈیٹا ریفریش سسٹم کی جانچ کریں:

اپنے بینکنگ ایپ میں لاگ ان کریں
پہلے چلایا گیا curl کمانڈ استعمال کریں تاکہ نیا ٹرانزیکشن بنایا جا سکے
اپنے ڈیش بورڈ صفحہ کو ریفریش کریں یا کہیں اور جائیں اور واپس آئیں
تصدیق کریں کہ نیا ٹرانزیکشن فوراً ظاہر ہوتا ہے

🎉 کامل توازن حاصل کیا گیا: آپ کی ایپ اب پرسسٹنس اسٹیٹ کے ہموار تجربے کو تازہ سرور ڈیٹا کی درستگی کے ساتھ جوڑتی ہے!

GitHub Copilot ایجنٹ چیلنج 🚀

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

تفصیل: بینکنگ ایپ کے لیے ایک جامع اسٹیٹ مینجمنٹ سسٹم نافذ کریں جس میں undo/redo فعالیت شامل ہو۔ یہ چیلنج آپ کو جدید اسٹیٹ مینجمنٹ تصورات جیسے اسٹیٹ ہسٹری ٹریکنگ، ناقابل تغیر اپ ڈیٹس، اور صارف انٹرفیس ہم آہنگی کی مشق کرنے میں مدد دے گا۔

پرومپٹ: ایک بہتر اسٹیٹ مینجمنٹ سسٹم بنائیں جس میں شامل ہوں: 1) ایک اسٹیٹ ہسٹری آرے جو تمام پچھلے اسٹیٹس کو ٹریک کرتا ہے، 2) undo اور redo فنکشنز جو پچھلے اسٹیٹس پر واپس جا سکتے ہیں، 3) ڈیش بورڈ پر undo/redo آپریشنز کے لیے UI بٹن، 4) میموری مسائل کو روکنے کے لیے 10 اسٹیٹس کی زیادہ سے زیادہ ہسٹری حد، اور 5) صارف کے لاگ آؤٹ ہونے پر ہسٹری کی مناسب صفائی۔ یقینی بنائیں کہ undo/redo فعالیت اکاؤنٹ بیلنس تبدیلیوں کے ساتھ کام کرتی ہے اور براؤزر ریفریشز کے دوران برقرار رہتی ہے۔

ایجنٹ موڈ کے بارے میں مزید جانیں یہاں۔

🚀 چیلنج: اسٹوریج کی اصلاح

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

جیسے شطرنج کے ماہرین جو ضروری ٹکڑوں اور قابل قربانی پیادوں کے درمیان فرق کرتے ہیں، مؤثر اسٹیٹ مینجمنٹ کے لیے یہ شناخت کرنا ضروری ہے کہ کون سا ڈیٹا برقرار رہنا چاہیے اور کون سا ہمیشہ سرور سے تازہ ہونا چاہیے۔

اصلاحی تجزیہ:

اپنے موجودہ localStorage نفاذ کا جائزہ لیں اور ان اسٹریٹجک سوالات پر غور کریں:

صارف کی تصدیق کو برقرار رکھنے کے لیے کم سے کم معلومات کیا ہیں؟
کون سا ڈیٹا اتنی بار تبدیل ہوتا ہے کہ مقامی کیشنگ کا فائدہ کم ہو؟
اسٹوریج کی اصلاح کارکردگی کو کیسے بہتر بنا سکتی ہے بغیر صارف کے تجربے کو خراب کیے؟

نفاذ کی حکمت عملی:

ضروری ڈیٹا کی شناخت کریں جو برقرار رہنا چاہیے (ممکنہ طور پر صرف صارف کی شناخت)
اپنے localStorage نفاذ کو تبدیل کریں تاکہ صرف اہم سیشن ڈیٹا محفوظ ہو
یقینی بنائیں کہ تازہ ڈیٹا ہمیشہ سرور سے ڈیش بورڈ وزٹ پر لوڈ ہوتا ہے
جانچ کریں کہ آپ کا بہتر طریقہ کار وہی صارف تجربہ برقرار رکھتا ہے

اعلیٰ غور:

موازنہ کریں مکمل اکاؤنٹ ڈیٹا کو محفوظ کرنے اور صرف تصدیقی ٹوکنز کو محفوظ کرنے کے درمیان تجارتی فوائد
اپنے فیصلے اور منطق کو دستاویز کریں مستقبل کے ٹیم ممبران کے لیے

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

پوسٹ لیکچر کوئز

اسائنمنٹ

"Add transaction" ڈائیلاگ نافذ کریں

یہاں ایک مثال نتیجہ ہے اسائنمنٹ مکمل کرنے کے بعد:

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

37 KiB Raw Blame History Unescape Escape