फायरबेस और रिएक्ट के साथ एक CRUD ऐप कैसे बनाएं

आप जैसे पाठक MUO का समर्थन करने में मदद करते हैं। जब आप हमारी साइट पर लिंक का उपयोग करके खरीदारी करते हैं, तो हम संबद्ध कमीशन अर्जित कर सकते हैं।

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

फायरबेस के डेटा प्रबंधन की मूल बातें समझने के लिए, आपको यह सीखना चाहिए कि CRUD ऐप बनाने के लिए इसके फायरस्टोर डेटाबेस को रिएक्ट के साथ कैसे जोड़ा जाए। उस ज्ञान का उपयोग करके आप कम या शून्य बैकएंड कोड के साथ स्केलेबल फुल-स्टैक एप्लिकेशन बनाना शुरू कर सकते हैं।

अपने रिएक्ट ऐप को फायरबेस फायरस्टोर से कनेक्ट करें

यदि आपने पहले से ऐसा नहीं किया है, तो फायरबेस कंसोल पर जाएं और फायरस्टोर को अपने रिएक्ट प्रोजेक्ट से कनेक्ट करें.

यदि आप पहले ही कर चुके हैं तो प्रक्रिया आसान है अपना रिएक्ट ऐप बनाया.

अगला, एक नया बनाओ firebase_setup आपकी परियोजना के अंदर निर्देशिका स्रोत फ़ोल्डर। एक बनाने के firebase.js फ़ाइल इस फ़ोल्डर के अंदर। नई फ़ाइल के अंदर फायरबेस प्रोजेक्ट बनाते समय आपको प्राप्त होने वाले कॉन्फ़िगरेशन कोड को पेस्ट करें:

आयात {प्रारंभिक ऐप} से "फायरबेस/ऐप";
आयात {getFirestore} से "@firebase/firestore"
कॉन्स्ट फायरबेस कॉन्फिग = {
एपीआई कुंजी: प्रक्रिया.env.REACT_APP_apiKey,
authDomain: प्रक्रिया.env.REACT_APP_authDomain,
प्रोजेक्ट आईडी: प्रक्रिया.env.REACT_APP_प्रोजेक्टआईडी,
storageBucket: प्रक्रिया.env.REACT_APP_storageBucket,
मैसेजिंग सेंडर आई.डी: प्रक्रिया.env.REACT_APP_messagingSenderId,
appId: प्रक्रिया.env.REACT_APP_appId,
मापन आईडी: प्रक्रिया.env.REACT_APP_measurementId
};
कॉन्स्ट ऐप = इनिशियलाइज़एप (फायरबेस कॉन्फिग);
निर्यातकॉन्स्ट फायरस्टोर = getFirestore (ऐप)

इस firestore चर आपके फायरबेस फायरस्टोर वातावरण को धारण करता है। एपीआई अनुरोध करते समय आप इसका उपयोग पूरे ऐप में करेंगे।

हालाँकि यह कोड कॉन्फ़िगरेशन जानकारी को छिपाने के लिए .env विधि का उपयोग करता है, लेकिन बेहतर हैं रिएक्ट में सीक्रेट स्टोर करने के तरीके.

अब, स्थापित करें firebase और uuid आपके रिएक्ट ऐप में लाइब्रेरी। जबकि यूयूआईडी वैकल्पिक है, आप इसे फायरस्टार डेटाबेस पर पोस्ट किए गए प्रत्येक दस्तावेज़ के लिए एक विशिष्ट पहचानकर्ता के रूप में उपयोग कर सकते हैं।

NPM स्थापित करना firebase uuid

आप रिएक्ट और फायरस्टोर के साथ क्या बनाने जा रहे हैं इसका एक प्रदर्शन यहां दिया गया है:

फायरस्टोर डेटाबेस में डेटा लिखें

आप उपयोग कर सकते हैं setDoc या addDoc Firebase में दस्तावेज़ जोड़ने की विधि। addDoc विधि का लाभ यह है कि यह फायरबेस को प्रत्येक रिकॉर्ड के लिए एक विशिष्ट आईडी बनाने का निर्देश देती है।

प्रारंभ करने के लिए, निम्न निर्भरताओं को App.js में आयात करें:

आयात './App.css';
आयात {उपयोग प्रभाव, उपयोग स्थिति} से 'प्रतिक्रिया';
आयात {ऐडडॉक, कलेक्शन, सेटडॉक, डिलीटडॉक, डॉक, क्वेरी, ऑन स्नैपशॉट} से "फायरबेस/फायरस्टोर";
आयात {आग की दुकान} से './firebase_setup/firebase';
आयात {वि4 जैसा uuidv4} से 'यूयूआईडी'; 

आगे बढ़ने से पहले, DOM संरचना और इस ट्यूटोरियल द्वारा उपयोग की जाने वाली स्थितियों को देखें:

समारोहअनुप्रयोग() {
कॉन्स्ट [जानकारी, सेटइन्फो] = यूज़स्टेट ([])
कॉन्स्ट [isUpdate, setisUpdate] = useState(असत्य)
 const [docId, setdocId] = useState("")
 const [विस्तार, सेट विवरण] = useState ("")
कॉन्स्ट [आईडी, सेटआईडी] = यूज़स्टेट ([])
वापस करना (
<डिव क्लासनाम ="अनुप्रयोग">
<प्रपत्र>
<इनपुट प्रकार = "मूलपाठ" मूल्य = {विवरण} ऑन चेंज = {हैंडलडेटाचेंज} />
 {
 अद्यतन है? (
<>
<बटन ऑनक्लिक = {हैंडलसबमिटचेंज} प्रकार = "जमा करना">अद्यतन</button>
<बटन ऑनक्लिक = {() => {सेटिसअपडेट (झूठा); विवरण सेट करें ("")}}>
 एक्स
</button>
</>
 ): (<बटन onClick={submithandler} type="जमा करना">बचाना</button>)
 }
</form>
{सूचना.नक्शा ((डेटा, सूचकांक) =>
<div key={ids[index]} className='डेटा-कंटेनर' आईडी ='डेटा-कंटेनर'>
<पी क्लासनाम ='आंकड़े' आईडी ='आंकड़े' डेटा-आईडी = {आईडी [अनुक्रमणिका]} कुंजी = {आईडी [अनुक्रमणिका]}>{आंकड़े}</पी>
<बटन वर्गनाम ='डीटेले-बटन' आईडी ='हटाएँ बटन' ऑनक्लिक = {हैंडलडिलीट}>
मिटाना
</button>
<बटन वर्गनाम ='अपडेट-बटन' आईडी ='अपडेट-बटन' ऑनक्लिक = {हैंडलअपडेट}>
 संपादन करना
</button>
</div>
 )}
</div>
 );
}
निर्यातगलती करना अनुप्रयोग;

इसके बाद, फायरस्टोर डेटाबेस में डेटा लिखने के लिए सबमिशन हैंडलर बनाएं। यह एक ऑनसबमिट आयोजन। तो आप इसे सबमिट बटन में इस्तेमाल करेंगे।

इसके अतिरिक्त, एक परिवर्तन हैंडलर बनाएँ। यह घटना प्रपत्र फ़ील्ड में परिवर्तनों को सुनती है और इनपुट को एक सरणी में पास करती है (the विवरण इस मामले में सरणी)। यह डेटाबेस में जाता है।

कॉन्स्ट हैंडलडाटाचेंज = (ई) => {
विवरण सेट करें(इ।लक्ष्य।कीमत)
 };
कॉन्स्ट सबमिटहैंडलर = (ई) => {
इ।चूक को रोकें()
 कॉन्स्ट रेफ = संग्रह (फायरस्टोर, "परीक्षण डेटा")
होने देना डेटा = {
 यूयूआईडी: यूयूआईडीवी4 (),
 टेस्टडेटा: विवरण
 }
कोशिश {
 एडडॉक (रेफरी, डेटा)
 } पकड़ना(गलती) {
सांत्वना देना.लॉग (त्रुटि)
 }
विवरण सेट करें ("")
 }

जबकि फायरबेस स्वचालित रूप से दस्तावेज़ आईडी उत्पन्न करता है (जब तक आप इसे रोकते नहीं हैं), यूयूआईडी फ़ील्ड प्रत्येक दस्तावेज़ के लिए एक अद्वितीय पहचानकर्ता के रूप में भी कार्य करता है।

फायरस्टोर डेटाबेस से डेटा पढ़ें

के भीतर Firestore डेटाबेस से डेटा प्राप्त करें useEffect फायरस्टार क्वेरी विधि का उपयोग करके हुक करें:

 उपयोग प्रभाव (() => {
कॉन्स्ट डेटा प्राप्त करें = async () => {
कॉन्स्ट डेटा = इंतजार क्वेरी (संग्रह (फायरस्टोर, "test_data"));
ऑन स्नैपशॉट (डेटा, (क्वेरी स्नैपशॉट) => {
कॉन्स्ट डेटाबेसइन्फो = [];
कॉन्स्ट डेटाआईडी = []
querySnapshot.प्रत्येक के लिए((दस्तावेज़) => {
डेटाबेसइन्फो।धकेलना(डॉक्टर।आंकड़े()।परीक्षण डेटा);
dataIds।धकेलना(डॉक्टर।पहचान)
 });
सेटआईडी (डेटा आईडी)
 सेटइन्फो (डेटाबेसइन्फो)
 });
 }
डेटा प्राप्त करें()
 }, [])

उपरोक्त कोड फायरबेस का उपयोग करके फायरस्टार को सबमिट किए गए डेटा का स्नैपशॉट प्राप्त करने के लिए फायरबेस क्वेरी का उपयोग करता है स्नैपशॉट पर समारोह।

एक स्नैपशॉट आपके ऐप को बैकएंड में परिवर्तनों को सुनने की अनुमति देता है। हर बार जब कोई डेटाबेस में लिखता है तो यह क्लाइंट को स्वचालित रूप से अपडेट करता है।

सेटइन्फो राज्य प्रत्येक दस्तावेज़ में डेटा पकड़ लेता है। आप इसके माध्यम से नक्शा करेंगे ( जानकारी array) DOM को रेंडर करते समय।

सेटआईडी राज्य सभी दस्तावेज़ आईडी को ट्रैक करता है (के रूप में पारित किया गया आईडी सरणी)। आप प्रत्येक दस्तावेज़ पर डिलीट और अपडेट क्वेरी चलाने के लिए प्रत्येक आईडी का उपयोग कर सकते हैं। आप इसके माध्यम से मैप करते समय प्रत्येक दस्तावेज़ आईडी को DOM विशेषता के रूप में पास कर सकते हैं जानकारी सरणी।

यहाँ DOM के भीतर राज्य का उपयोग है (जैसा कि पिछले कोड स्निपेट में दिखाया गया है):

फायरस्टोर में मौजूदा डेटा को अपडेट करें

उपयोग setDoc किसी दस्तावेज़ या दस्तावेज़ में किसी फ़ील्ड को अद्यतन करने की विधि।

अद्यतन क्रिया के लिए दो संचालकों को परिभाषित करें। एक संपादित डेटा के लिए सबमिट बटन को संभालता है (handsubmitchange), जबकि दूसरा उस बटन के लिए है जो संपादन के लिए इनपुट फ़ील्ड में डेटा को फिर से लिखता है (android):

कॉन्स्ट हैंडलअपडेट = (ई) => {
 सेटिसअपडेट(सत्य)
विवरण सेट करें(इ।लक्ष्य.parentNode।बच्चे[0].textContent)
docId(इ।लक्ष्य.parentNode।बच्चे[0].getAttribute(&उद्धरण;डेटा-आईडी&उद्धरण;))
};
कॉन्स्ट हैंडलसबमिटचेंज = async (ई) => {
इ।चूक को रोकें()
 const docRef = doc (फायरस्टोर, 'परीक्षण डेटा', डॉकआईडी);
कॉन्स्ट अद्यतन डेटा = इंतजार {
 टेस्टडेटा: विवरण
 };
इंतजारsetDoc(docRef, अद्यतन आकड़ें, { मर्ज:सत्य })
 फिर (कंसोल.लॉग ("डेटा सफलतापूर्वक बदल गया"))
सेटिसअपडेट(असत्य)
 विवरण सेट करें ("") 
}

जैसा कि पिछले कोड स्निपेट में दिखाया गया है, यहाँ क्रिएट और अपडेट क्रियाओं के लिए DOM रेंडरिंग है:

android फ़ंक्शन अपने नोड पथ का उपयोग करके DOM में प्रत्येक दस्तावेज़ ID को लक्षित करता है। यह परिवर्तन करने के लिए डेटाबेस से प्रत्येक दस्तावेज़ को क्वेरी करने के लिए इसका उपयोग करता है। संपादित करें बटन इस फ़ंक्शन का उपयोग करता है।

इसलिए अद्यतन है (द्वारा ट्रैक किया गया setisUpdate राज्य) लौटता है सत्य जब कोई उपयोगकर्ता संपादन बटन पर क्लिक करता है। यह क्रिया अद्यतन बटन लाती है, जो उपयोगकर्ता द्वारा क्लिक किए जाने पर संपादित डेटा सबमिट करता है। अतिरिक्त एक्स बटन क्लिक करने पर संपादन क्रिया को बंद कर देता है—सेटिंग द्वारा अद्यतन है को असत्य.

अगर अद्यतन है है असत्य, DOM इसके बजाय प्रारंभिक सहेजें बटन को बनाए रखता है।

फायरस्टोर से डेटा हटाएं

आप फायरस्टोर से मौजूदा डेटा को हटा सकते हैं doc तरीका। जैसा कि आपने अपडेट क्रिया के लिए किया था, नोड पथ का उपयोग करके प्रत्येक दस्तावेज़ को उसकी DOM विशेषता को लक्षित करके उसकी अद्वितीय आईडी का उपयोग करके पुनः प्राप्त करें:

कॉन्स्ट हैंडलडिलीट = async (ई) => {
 const docRef = doc (फायरस्टोर, 'परीक्षण डेटा', e.target.parentNode.child[0].getAttribute("डेटा-आईडी"));
इंतजार दस्तावेज़ हटाएं (docRef)
 तब (() => {
सांत्वना देना।लकड़ी का लट्ठा(`${e.target.parentNode.child[0].textContent} सफलतापूर्वक हटा दिया गया है।')
 })
 .पकड़ना(त्रुटि => {
सांत्वना देनालॉग (त्रुटि);
 })
}

उपरोक्त फ़ंक्शन को डिलीट बटन में पास करें। जब उपयोगकर्ता इसे क्लिक करता है तो यह डेटाबेस और DOM से डेटा को हटा देता है।

अपने सर्वश्रेष्ठ फ्रंटेंड फ्रेमवर्क के साथ पेयर फायरबेस

फायरबेस आपको क्लाइंट साइड से सीधे डेटा क्वेरी करते समय कम कोड लिखने में मदद करता है। रिएक्ट के अलावा, यह Angular.js, Vue.js और कई अन्य सहित अन्य जावास्क्रिप्ट फ्रेमवर्क का समर्थन करता है।

अब जब आपने देख लिया है कि यह रिएक्ट के साथ कैसे काम करता है, तो आप इसे Angular.js के साथ पेयर करना भी सीख सकते हैं।