Firebase PWAలో ఒక Notification Centerని నిర్మించడం
సేల్స్ టీమ్ను నిర్వహించడానికి అనేక సాధనాలు అవసరం. నా కంట్రోల్ ప్యానెల్లో FCM push notifications, chats, reminders మరియు ఒక shared calendar ఉండేవి.
సమస్య ఏమిటంటే, ఈ సాధనాలన్నీ వేర్వేరు విభాగాల్లో ఉండేవి. ఒక లీవ్ రిక్వెస్ట్ లేదా మెసేజ్ని తనిఖీ చేయడానికి ఆపరేటర్ ఒక సెక్షన్ నుండి మరొక సెక్షన్కి మారాల్సి వచ్చేది. అన్నింటినీ ఒకే చోట చూడటానికి ఎటువంటి వీలుండేది కాదు.
నేను ఒక notification centerని నిర్మించాను. ఇది ప్రతి ముఖ్యమైన ఈవెంట్కు సంబంధించిన ఒకే ఒక timeline.
నేను Firebaseని ఎలా ఉపయోగించాను
నేను Firestore మరియు Realtime Database (RTDB) రెండింటినీ ఉపయోగిస్తాను. ప్రతిదీ ఒక నిర్దిష్ట ప్రయోజనం కోసం ఉపయోగించబడుతుంది.
• Firestore హిస్టరీ కోసం: లీవ్ రిక్వెస్ట్ల వంటి మారని డేటా కోసం .get()ని ఉపయోగించండి. దీనివల్ల ఖర్చు తక్కువగా ఉంటుంది, ఎందుకంటే మీకు నిరంతరంగా listener అవసరం లేదు.
• RTDB లైవ్ డేటా కోసం: chat, reminders మరియు calendar events కోసం .on('value')ని ఉపయోగించండి. ఈ nodes చిన్నవిగా ఉంటాయి మరియు వెంటనే స్పందించాల్సి ఉంటుంది.
తప్పు దానిని ఎంచుకోవడం వల్ల మీ Firebase బిల్లులో వెంటనే తేడా కనిపిస్తుంది.
సాంకేతిక సవాళ్లు
UIని నిర్మించడానికి మూడు ప్రధాన సమస్యలను పరిష్కరించాల్సి వచ్చింది:
1. మొబైల్ వినియోగ సామర్థ్యం (Mobile Usability)
ఫిల్టర్ చిప్స్ (filter chips) కోసం నేను flex-wrap: wrapని ఉపయోగించాను. నా మొదటి వెర్షన్లో horizontal scrolling ఉండేది. మొబైల్లో, వినియోగదారులు చిప్స్ను చూడలేకపోయేవారు మరియు స్క్రోల్ చేయవచ్చని వారికి తెలియదు. వాటిని రెండు వరుసలుగా (rows) మార్చడం వల్ల ఈ సమస్య పరిష్కారమైంది.
2. CSS Positioning
నేను ప్యానెల్ను నేరుగా document.bodyకి append చేశాను. మీరు overflow:hidden ఉన్న కంటైనర్ లోపల ఒక fixed elementని ఉంచితే, దాని positioning దెబ్బతింటుంది.
3. Session Restore Bug
ప్రొడక్షన్లో, "remember me" ఉపయోగించే వినియోగదారులు ఖాళీ ప్యానెల్ను చూశారు. initialization code కేవలం మాన్యువల్ లాగిన్ సమయంలో మాత్రమే రన్ అయ్యేది. సెషన్ రీస్టోర్ అయినప్పుడు అది రన్ కాలేదు.
సెంటర్ ఎల్లప్పుడూ లోడ్ అయ్యేలా చూడటానికి నేను మూడు fallback స్థాయిలను అమలు చేశాను:
- లాగిన్ ఫంక్షన్ (login function) పై ఒక wrapper.
- ప్రతి 500ms కి యూజర్ని తనిఖీ చేసే ఒక polling loop.
- యూజర్ ప్రొఫైల్ స్క్రీన్పై కనిపించేలా చూసే ఒక MutationObserver.
విజయవంతమైన డిజైన్ ఉదాహరణలు
- ప్రతి యూజర్ యొక్క read statusని ట్రాక్ చేయడానికి
localStorageని ఉపయోగించండి. - సంక్లిష్టమైన క్వెరీల (complex queries) కోసం Firestoreలో composite indexes ఉపయోగించండి.
- మొబైల్లో fixed elements టాప్ బార్ను అడ్డుకోకుండా ఉండటానికి media queriesని ఉపయోగించండి.
ఆర్కిటెక్చర్ ముఖ్యం. లాగ్స్ (logs) కోసం Firestoreని మరియు లైవ్ అప్డేట్స్ కోసం RTDBని ఉపయోగించండి.