Firebase PWA میں نوٹیفکیشن سینٹر بنانا
سیلز ٹیم کو مینیج کرنے کے لیے بہت سے ٹولز کی ضرورت ہوتی ہے۔ میرے کنٹرول پینل میں FCM پش نوٹیفیکیشنز، چیٹس، ریمائنڈرز اور ایک شیئرڈ کیلنڈر استعمال ہوتا تھا۔
مسئلہ یہ تھا کہ یہ تمام ٹولز الگ الگ حصوں میں بکھرے ہوئے تھے۔ ایک آپریٹر کو چھٹی کی درخواست یا پیغام چیک کرنے کے لیے مختلف سیکشنز کے درمیان آنا جانا پڑتا تھا۔ سب کچھ دیکھنے کے لیے کوئی ایک جگہ موجود نہیں تھی۔
میں نے ایک نوٹیفکیشن سینٹر بنایا۔ یہ ہر متعلقہ ایونٹ کے لیے ایک ہی ٹائم لائن ہے۔
میں نے Firebase کو کیسے استعمال کیا
میں Firestore اور Realtime Database (RTDB) دونوں استعمال کرتا ہوں۔ ہر ایک کا ایک مخصوص مقصد ہے۔
• Firestore ہسٹری کے لیے: ایسے ڈیٹا کے لیے .get() استعمال کریں جو تبدیل نہیں ہوتا، جیسے کہ چھٹی کی درخواستیں۔ اس سے اخراجات کم رہتے ہیں کیونکہ آپ کو مستقل لسنر (listener) کی ضرورت نہیں ہوتی۔
• RTDB لائیو ڈیٹا کے لیے: چیٹ، ریمائنڈرز اور کیلنڈر ایونٹس کے لیے .on('value') استعمال کریں۔ یہ نوڈز چھوٹے ہوتے ہیں اور انہیں فوری طور پر ری ایکٹ کرنے کی ضرورت ہوتی ہے۔
غلط انتخاب کا اثر فوری طور پر آپ کے Firebase بل میں نظر آتا ہے۔
تکنیکی رکاوٹیں
UI بنانے کے لیے تین اہم مسائل کو حل کرنا ضروری تھا:
1. موبائل استعمال کرنے میں آسانی (Mobile Usability)
میں نے فلٹر چپس کے لیے flex-wrap: wrap استعمال کیا۔ میرے پہلے ورژن میں ہوریزونٹل اسکرولنگ (horizontal scrolling) تھی۔ موبائل پر صارفین چپس کو دیکھ نہیں پاتے تھے اور انہیں معلوم نہیں ہوتا تھا کہ وہ اسکرول کر سکتے ہیں۔ انہیں دو لائنوں میں لپیٹنے (wrapping) سے یہ مسئلہ حل ہو گیا۔
2. CSS پوزیشننگ
میں نے پینل کو براہ راست document.body کے ساتھ اپینڈ (append) کیا۔ اگر آپ کسی overflow:hidden والے کنٹینر کے اندر فکسڈ ایلیمنٹ (fixed element) رکھتے ہیں، تو پوزیشننگ خراب ہو جاتی ہے۔
3. سیشن ریسٹور بگ (The Session Restore Bug)
پروڈکشن میں، "remember me" استعمال کرنے والے صارفین کو خالی پینل نظر آتا تھا۔ انیشلائزیشن کوڈ صرف مینوئل لاگ ان کے دوران چلتا تھا۔ جب سیشن ریسٹور ہوتا تھا تو یہ نہیں چلتا تھا۔
میں نے تین فال بیک (fallback) لیولز نافذ کیے تاکہ اس بات کو یقینی بنایا جا سکے کہ سینٹر ہمیشہ لوڈ ہو:
- لاگ ان فنکشن پر ایک ریپر (wrapper)۔
- ایک پولنگ لوپ (polling loop) جو ہر 500ms میں صارف کو چیک کرتا ہے۔
- ایک
MutationObserverجو اس بات پر نظر رکھتا ہے کہ صارف کا پروفائل اسکرین پر ظاہر ہو رہا ہے یا نہیں۔
کامیاب ڈیزائن کی مثالیں
- صارف کے مطابق ریڈ اسٹیٹس (read status) کو ٹریک کرنے کے لیے
localStorageاستعمال کریں۔ - پیچیدہ کوئریز کے لیے Firestore میں کمپوزٹ انڈیکس (composite indexes) استعمال کریں۔
- موبائل پر فکسڈ ایلیمنٹس کو منتقل کرنے کے لیے میڈیا کوئریز (media queries) استعمال کریں تاکہ وہ ٹاپ بار کو بلاک نہ کریں۔
آرکیٹیکچر اہمیت رکھتا ہے۔ لاگز کے لیے Firestore اور لائیو اپ ڈیٹس کے لیے RTDB استعمال کریں۔