एंगुलर का उपयोग करके फायरबेस डेटाबेस से डेटा को स्टोर, अपडेट, डिलीट और रिट्रीव कैसे करें

फायरबेस एक ऐसा प्लेटफॉर्म है जो आपको एप्लिकेशन बनाने और स्केलिंग में सहायता करने के लिए कई सेवाएं प्रदान करता है। इनमें से कुछ विशेषताओं में होस्टिंग सेवाएँ, डेटा संग्रहण और डेटा विश्लेषण को ट्रैक करने की क्षमता शामिल हैं।

यह ट्यूटोरियल मुख्य रूप से फायरबेस डेटाबेस में डेटा बनाने और जोड़ने के तरीके पर केंद्रित है, और स्थानीय एंगुलर एप्लिकेशन से डेटाबेस में ऑपरेशन कैसे बनाएं, पढ़ें, लिखें और कैसे हटाएं।

फायरबेस डेटाबेस में डेटा कैसे बनाएं और जोड़ें

यह मानते हुए कि आपके पास पहले से ही एक कोणीय एप्लिकेशन है जो स्थानीय रूप से स्थापित और चल रहा है, डेटा को स्टोर और एक्सेस करने के लिए इसे फायरबेस डेटाबेस से कनेक्ट करना होगा। यदि आप एंगुलर से परिचित नहीं हैं, तो आप इसके बारे में अधिक पढ़ सकते हैं कोणीय अवधारणाएं, घटक, और एक कोणीय परियोजना की समग्र संरचना.

अगर आपके पास पहले से Firebase डेटाबेस नहीं है, तो आप Firebase में लॉग इन करने और संकेतों का पालन करने के लिए अपने Google खाते के क्रेडेंशियल का उपयोग कर सकते हैं। एक बार यह सेट हो जाने के बाद, एक प्रोजेक्ट बनाएं:

1. से फायरबेस का होम पेज, चुनते हैं कंसोल पर जाएं साइट के ऊपरी-दाएँ कोने में।
instagram viewer
2. "आपके Firebase प्रोजेक्ट" के अंतर्गत, चुनें परियोजना जोड़ें।
3. एक नया प्रोजेक्ट बनाने के लिए निर्देशों का पालन करें।
4. एक बार पूरा होने के बाद, प्रोजेक्ट खुल जाएगा। स्क्रीन के बाईं ओर, एक पैनल है जो फायरबेस द्वारा प्रदान की जाने वाली सुविधाओं को सूचीबद्ध करता है। आइकनों पर तब तक होवर करें जब तक आप न देखें फायरस्टोर डेटाबेस, और इसे चुनें।
5. चुनते हैं डेटाबेस बनाएं, और डेटाबेस बनाने के लिए संकेतों का पालन करें।
6. सुरक्षा नियमों का चयन करते समय, चुनें परीक्षण मोड में प्रारंभ करें. डेटा अधिक सुरक्षित है यह सुनिश्चित करने के लिए इसे बाद में बदला जा सकता है। आप निम्नलिखित का पालन करके फायरस्टोर सुरक्षा नियमों के बारे में अधिक पढ़ सकते हैं फायरबेस दस्तावेज़ीकरण.
7. एक बार पूरा हो जाने पर, डेटाबेस खुल जाएगा। डेटाबेस संरचना संग्रह का उपयोग करती है, जो अनिवार्य रूप से डेटाबेस तालिकाओं के समान अवधारणा है। उदाहरण के लिए, यदि आपको दो तालिकाओं की आवश्यकता है, एक खाता जानकारी संग्रहीत करने के लिए, और एक उपयोगकर्ता की जानकारी संग्रहीत करने के लिए, तो आप खाता और उपयोगकर्ता नामक दो संग्रह बनाएंगे।
8. चुनते हैं संग्रह शुरू करें और "उपयोगकर्ता" नामक एक संग्रह आईडी जोड़ें।
9. एक उपयोगकर्ता के बारे में जानकारी के साथ पहला रिकॉर्ड जोड़ें। पर क्लिक करें क्षेत्र जोड़ें तीन नए फ़ील्ड जोड़ने के लिए: पहला नाम (स्ट्रिंग), अंतिम नाम (स्ट्रिंग), और vipMember (बूलियन)। दस्तावेज़ आईडी स्वतः उत्पन्न हो सकती है।
10. क्लिक सहेजें.
11. "उपयोगकर्ता" संग्रह में और रिकॉर्ड जोड़ने के लिए, पर क्लिक करें दस्तावेज़ जोड़ें (दस्तावेज़ जोड़ें एक नया रिकॉर्ड या उपयोगकर्ता जोड़ने के बराबर है)। समान तीन फ़ील्ड वाले चार और उपयोगकर्ता जोड़ें।

डेटाबेस अब कुछ परीक्षण डेटा के साथ स्थापित किया गया है।

फायरबेस को अपने एंगुलर एप्लिकेशन में कैसे एकीकृत करें

अपने स्थानीय कोणीय एप्लिकेशन में इस डेटा तक पहुंचने के लिए, पहले कुछ ऐप सेटिंग्स को फ़ायरबेस डेटाबेस से कनेक्ट करने के लिए कॉन्फ़िगर करें:

1. फायरबेस में, बाएं पैनल पर जाएं और क्लिक करें परियोजना अवलोकन.
2. का चयन करें वेब बटन (कोण कोष्ठक द्वारा इंगित)।
3. ऐप का नाम जोड़कर अपने स्थानीय ऐप को पंजीकृत करें।
4. अपने स्थानीय कोणीय एप्लिकेशन में फायरबेस स्थापित करें।

   एनपीएम मैं फायरबेस
   

5. फिर फायरबेस कुछ कॉन्फ़िगरेशन विवरण प्रदर्शित करेगा। इन विवरणों को सहेजें और क्लिक करें कंसोल जारी रखें.
6. पिछले चरण में दिए गए विवरण के आधार पर, निम्न कोड को एंगुलर एप्लिकेशन में Environment.prod.ts और Environment.ts में कॉपी करें।

   निर्यात स्थिरांक पर्यावरण = {
    उत्पादन: सच,
    फायरबेस कॉन्फिग: {
    apiKey: "आपकी-एपीआई-कुंजी",
    authDomain: "आपका-प्राधिकरण-डोमेन",
    प्रोजेक्ट आईडी: "आपका-प्रोजेक्ट-आईडी",
    स्टोरेजबकेट: "योर-स्टोरेज-बकी",
    मैसेजिंगसेंडरआईड: "आपका-मैसेजिंग-प्रेषक-आईडी",
    appId: "आपका-एपीआई-आईडी",
    मापन आईडी: "आपका-माप-आईडी"
    }
   };
   

7. से AngularFirestore @ कोणीय/आग/फायरस्टोर एंगुलर में फायरबेस को कॉन्फ़िगर करने के लिए उपयोग किया जाएगा। ध्यान दें कि AngularFirestore कोणीय संस्करण 9 और इसके बाद के संस्करण के साथ संगत नहीं है। स्थानीय कोणीय ऐप में, चलाएँ:

   एनपीएम मैं @ कोणीय/आग
   

8. app.module.ts में आयात अनुभाग में फायरस्टोर और पर्यावरण मॉड्यूल जोड़ें।

   आयात { AngularFireModule } "@angular/fire" से;
   आयात { AngularFirestoreModule } "@angular/fire/firestore" से;
   आयात {पर्यावरण} "../वातावरण/वातावरण" से;
   

9. फायरस्टोर मॉड्यूल को भी app.module.ts में आयात सरणी में शामिल करने की आवश्यकता है।

   AngularFireModule.initializeApp (environment.firebaseConfig),
   एंगुलरफायरस्टोरमॉड्यूल,

किसी सेवा का उपयोग करके Firebase से डेटा कैसे प्राप्त करें

आमतौर पर एक या एकाधिक का होना अच्छा अभ्यास है services.ts फ़ाइलें जो आप विशेष रूप से डेटाबेस के साथ सहभागिता करने के लिए उपयोग करते हैं। सेवा फ़ाइल में आपके द्वारा जोड़े जाने वाले फ़ंक्शन को पूरे एप्लिकेशन में अन्य टाइपस्क्रिप्ट फ़ाइलों, पृष्ठों या अन्य घटकों में कॉल किया जा सकता है।

1. में service.ts नामक फ़ाइल बनाएँ स्रोत/ऐप/सेवाएं फ़ोल्डर।
2. आयात अनुभाग में AngularFirestore मॉड्यूल जोड़ें, और इसे कंस्ट्रक्टर में शामिल करें।

   '@angular/core' से {इंजेक्टेबल} आयात करें;
   आयात { AngularFirestore } '@angular/fire/firestore' से;
   @ इंजेक्शन योग्य ({
    प्रदान किया गया: 'रूट'
   })
   निर्यात वर्ग सेवा {
    कंस्ट्रक्टर (निजी डीबी: एंगुलरफायरस्टोर) { }
   }
   

3. एक फ़ंक्शन जोड़ें जो सभी उपयोगकर्ताओं की सूची वाला एक वादा लौटाता है। "this.db.Collection('उपयोगकर्ता')" डेटाबेस में "उपयोगकर्ता" संग्रह की बात कर रहा है।

   सभी उपयोगकर्ता () {
    नया वादा लौटाओ((संकल्प) => {
    this.db.Collection('User').valueChanges({ idField: 'id'}).subscribe (उपयोगकर्ता => संकल्प (उपयोगकर्ता));
    })
   }
   

4. इस फ़ंक्शन को किसी अन्य टाइपस्क्रिप्ट फ़ाइल में उपयोग करने के लिए, नई सेवा आयात करें, और इसे कंस्ट्रक्टर में जोड़ें।

   आयात {सेवा} 'src/app/services/service' से
   कंस्ट्रक्टर (निजी सेवा: सेवा) {}
   

5. सेवा फ़ाइल में बनाए गए फ़ंक्शन का उपयोग करने वाले सभी उपयोगकर्ताओं की सूची प्राप्त करें।

   एसिंक्स गेट यूज़र () {
    this.allUsers = प्रतीक्षा करें this.service.getAllUsers ();
    कंसोल.लॉग (यह। सभी उपयोगकर्ता);
   }
   

फायरबेस डेटाबेस में एक नया रिकॉर्ड कैसे जोड़ें

किसी उपयोगकर्ता के लिए Firebase डेटाबेस में एक नया रिकॉर्ड जोड़ें।

1. services.ts में, एक नया रिकॉर्ड बनाने के लिए एक नया फ़ंक्शन जोड़ें। यह फ़ंक्शन एक नए उपयोगकर्ता की आईडी और उनके सभी विवरण लेता है। यह उस जानकारी को Firebase को भेजने और एक नया रिकॉर्ड बनाने के लिए Firestore के सेट फ़ंक्शन का उपयोग करता है।

   addNewUser (_newId: कोई भी, _fName: स्ट्रिंग, _lName: स्ट्रिंग, _vip: बूलियन) {
    this.db.Collection("User").doc (_newId).set({firstName: _fName, lastName: _lName, vipMember: _vip});
   }

2. किसी अन्य टाइपस्क्रिप्ट फ़ाइल में addNewUser() फ़ंक्शन को कॉल करें। जैसा कि पहले दिखाया गया है, सेवा को आयात करना और इसे कंस्ट्रक्टर में शामिल करना न भूलें। उपयोगकर्ता के लिए नई आईडी बनाने के लिए यादृच्छिक आईडी जनरेटर का उपयोग करने के लिए स्वतंत्र महसूस करें।

   this.service.addNewUser ("62289836", "जेन", "डो", सच);
   

फायरबेस डेटाबेस में डेटा कैसे अपडेट करें

Firebase में बहुत सारे कार्य हैं जो इसे उपलब्ध सर्वोत्तम उपकरणों में से एक बनाएं. किसी विशेष रिकॉर्ड में कुछ फ़ील्ड को अपडेट करने के लिए, फायरस्टोर के अपडेट फ़ंक्शन का उपयोग करें।

1. service.ts फ़ाइल में, updateUserFirstName() नामक एक फ़ंक्शन बनाएँ। यह फ़ंक्शन चुने हुए उपयोगकर्ता रिकॉर्ड के पहले नाम को अपडेट करेगा। फ़ंक्शन उस रिकॉर्ड की आईडी लेता है जिसे अद्यतन करने की आवश्यकता होती है, और उपयोगकर्ता के पहले नाम के लिए नया मान।

   UpdateUserFirstName (_id: कोई भी, _firstName: string) {
    this.db.doc(`User/${_id}`).update({firstName: _firstName});
   }

2. एक ही रिकॉर्ड के लिए कई फ़ील्ड अपडेट करने के लिए, फायरस्टोर के अपडेट फ़ंक्शन के अंदर दर्ज किए जा रहे फ़ील्ड पर विस्तार करें। केवल पहले नाम के बजाय, एक नए मान के साथ अद्यतन करने के लिए अंतिम नाम जोड़ें।

   UpdateUserFullName (_id: कोई भी, _firstName: string, _lastName: string) {
    this.db.doc(`User/${_id}`).update({firstName: _firstName, lastName: _lastName});
   }

3. उपरोक्त कार्यों में से कोई भी अन्य टाइपस्क्रिप्ट फ़ाइलों में उपयोग किया जा सकता है।

   this.service.updateUserFirstName ("vLBnSegFl1pD7XQ42TBv", "के");
   this.service.updateUserFullName ("vLBnSegFl1pD7XQ42TBv", "के", "जोन्स");

फायरबेस डेटाबेस से रिकॉर्ड कैसे हटाएं

किसी रिकॉर्ड को हटाने के लिए, फायरस्टोर के डिलीट फंक्शन का उपयोग करें।

1. Service.ts फ़ाइल में, deleteUser() नामक एक फ़ंक्शन बनाएँ। यह फ़ंक्शन उस रिकॉर्ड की आईडी लेता है जिसे हटाने की आवश्यकता होती है।

   डिलीट यूज़र (_id: कोई भी) {
    this.db.doc(`उपयोगकर्ता/${_id}`)। हटाएं ();
    }
   

2. उपरोक्त फ़ंक्शन का उपयोग अन्य टाइपस्क्रिप्ट फ़ाइलों में किया जा सकता है।

   this.service.deleteUser ("vLBnSegFl1pD7XQ42TBv");

क्वेरी और फ़िल्टर का उपयोग करके Firebase डेटा पुनर्प्राप्त करें

"कहां" फ़िल्टर एक विशिष्ट स्थिति के आधार पर लौटाए गए परिणामों को फ़िल्टर कर सकता है।

1. services.ts में, एक ऐसा फ़ंक्शन बनाएं जो सभी VIP उपयोगकर्ताओं को मिले (यह तब है जब vipMember फ़ील्ड सत्य पर सेट है)। यह नीचे दिए गए Firebase कॉल के "ref.where('vipMember', '==', true)" भाग द्वारा इंगित किया गया है।

   getAllVipMembers () {
    नया वादा लौटाओ((संकल्प) => {
    this.db.Collection('User', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe (उपयोगकर्ता => संकल्प (उपयोगकर्ता))
    })
    }

2. इस फ़ंक्शन का उपयोग किसी अन्य टाइपस्क्रिप्ट फ़ाइल में करें।

   async getAllVipMembers () {
    this.vipUsers = प्रतीक्षा करें this.service.getAllVipMembers ();
    कंसोल.लॉग (this.vipUsers);
    }

3. ऑर्डर बाय, स्टार्ट एट, या लिमिट जैसे अन्य कार्यों को जोड़ने के लिए क्वेरी को संशोधित किया जा सकता है। अंतिम नाम से ऑर्डर करने के लिए services.ts में getAllVipMembers() फ़ंक्शन को संशोधित करें। ऑर्डर बाय ऑपरेशन के लिए फायरबेस में एक इंडेक्स बनाने की आवश्यकता हो सकती है। यदि ऐसा है, तो कंसोल में त्रुटि संदेश में दिए गए लिंक पर क्लिक करें।

   getAllVipMembers () {
    नया वादा लौटाओ((संकल्प) => {
    this.db.Collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe (उपयोगकर्ता => संकल्प (उपयोगकर्ता) )
    })
    }

4. केवल पहले तीन रिकॉर्ड वापस करने के लिए क्वेरी को संशोधित करें। इसके लिए स्टार्ट एट और लिमिट ऑपरेशंस का इस्तेमाल किया जा सकता है। यह उपयोगी है यदि आपको पेजिंग को लागू करने की आवश्यकता है, जो तब होता है जब प्रति पृष्ठ एक निश्चित संख्या में रिकॉर्ड दिखाए जाते हैं।

   getAllVipMembers () {
    नया वादा लौटाओ((संकल्प) => {
    this.db.Collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName').startAt (0).limit (3)).valueChanges() सदस्यता लें (उपयोगकर्ता => संकल्प (उपयोगकर्ता))
    })
    }

फ़ायरबेस में अधिक डेटा जोड़ें और कोणीय ऐप में अधिक अनुरोध करें

फ़ायरबेस डेटाबेस से डेटा पुनर्प्राप्त करने का प्रयास करते समय आप कई अन्य क्वेरी संयोजनों का पता लगा सकते हैं। उम्मीद है कि अब आप समझ गए होंगे कि एक साधारण फायरबेस डेटाबेस कैसे सेट किया जाए, इसे स्थानीय कोणीय एप्लिकेशन से कैसे जोड़ा जाए, और डेटाबेस को कैसे पढ़ा और लिखा जाए।

आप Firebase द्वारा प्रदान की जाने वाली अन्य सेवाओं के बारे में भी अधिक जान सकते हैं। फायरबेस उन कई प्लेटफार्मों में से एक है जिसे आप एंगुलर के साथ एकीकृत कर सकते हैं, और चाहे आप एक शुरुआती या उन्नत स्तर पर हों, सीखने के लिए हमेशा बहुत कुछ होता है।

शुरुआती और उन्नत उपयोगकर्ताओं के लिए शीर्ष 8 कोणीय पाठ्यक्रम

आगे पढ़िए

लेखक के बारे में