Πώς να δημιουργήσετε μια εφαρμογή CRUD με το Firebase και να React

Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών.

Χρησιμοποιώντας το συνδυασμό του React και του Firebase, μπορείτε να δημιουργήσετε εφαρμογές εξαιρετικά ανταποκρινόμενες. Εάν είστε ήδη εξοικειωμένοι με το React, το να μάθετε πώς να ενσωματώνετε το Firebase είναι ένα εξαιρετικό επόμενο βήμα.

Για να κατανοήσετε τα βασικά του χειρισμού δεδομένων του Firebase, θα πρέπει να μάθετε πώς να αντιστοιχίζετε τη βάση δεδομένων του Firestore με το React για να δημιουργήσετε μια εφαρμογή CRUD. Χρησιμοποιώντας αυτή τη γνώση, μπορείτε να ξεκινήσετε να δημιουργείτε επεκτάσιμες εφαρμογές πλήρους στοίβας με μικρό ή μηδενικό κώδικα υποστήριξης.

Συνδέστε την εφαρμογή React στο Firebase Firestore

Εάν δεν το έχετε κάνει ήδη, μεταβείτε στην κονσόλα Firebase και συνδέστε το Firestore στο έργο σας React.

Η διαδικασία είναι εύκολη αν το έχετε ήδη κάνει δημιούργησε την εφαρμογή React.

Στη συνέχεια, φτιάξτε ένα νέο

firebase_setup κατάλογο μέσα στο έργο σας src ντοσιέ. Δημιουργώ ένα firebase.js αρχείο μέσα σε αυτόν τον φάκελο. Επικολλήστε τον κωδικό διαμόρφωσης που θα λάβετε κατά τη δημιουργία ενός έργου Firebase μέσα στο νέο αρχείο:

εισαγωγή { initializeApp } από "firebase/app";
εισαγωγή {getFirestore} από "@firebase/firestore"
συνθ firebaseConfig = {
apiKey: επεξεργάζομαι, διαδικασία.env.REACT_APP_apiKey,
authDomain: επεξεργάζομαι, διαδικασία.env.REACT_APP_authDomain,
ID έργου: επεξεργάζομαι, διαδικασία.env.REACT_APP_projectId,
Αποθηκευτικός Κάδος: επεξεργάζομαι, διαδικασία.env.REACT_APP_storageBucket,
MessagingSenderId: επεξεργάζομαι, διαδικασία.env.REACT_APP_messagingSenderId,
appId: επεξεργάζομαι, διαδικασία.env.REACT_APP_appId,
αναγνωριστικό μέτρησης: επεξεργάζομαι, διαδικασία.env.REACT_APP_measurementId
};
συνθ app = initializeApp (firebaseConfig);
εξαγωγήσυνθ firestore = getFirestore (εφαρμογή)

ο πυρκαγιά μεταβλητή κρατά το περιβάλλον Firebase Firestore σας. Θα το χρησιμοποιήσετε σε όλη την εφαρμογή κατά την υποβολή αιτημάτων API.

Αν και αυτός ο κώδικας χρησιμοποιεί τη μέθοδο .env για να κρύψει τις πληροφορίες διαμόρφωσης, υπάρχουν καλύτερες τρόποι αποθήκευσης μυστικών στο React.

Τώρα, εγκαταστήστε το firebase και uuid βιβλιοθήκες στην εφαρμογή React. Ενώ το uuid είναι προαιρετικό, μπορείτε να το χρησιμοποιήσετε ως μοναδικό αναγνωριστικό για κάθε έγγραφο που δημοσιεύεται στη βάση δεδομένων Firestore.

npm εγκαθιστώ firebase uuid

Ακολουθεί μια επίδειξη του τι πρόκειται να δημιουργήσετε με το React και το Firestore:

Γράψτε δεδομένα στη βάση δεδομένων Firestore

Μπορείτε να χρησιμοποιήσετε το setDoc ή addDoc μέθοδος προσθήκης εγγράφων στο Firebase. ο addDoc Η μέθοδος έχει το πλεονέκτημα ότι δίνει εντολή στο Firebase να δημιουργήσει ένα μοναδικό αναγνωριστικό για κάθε εγγραφή.

Για να ξεκινήσετε, εισαγάγετε τις ακόλουθες εξαρτήσεις στο App.js:

εισαγωγή './App.css';
εισαγωγή { useEffect, useState } από 'αντιδρώ';
εισαγωγή { addDoc, collection, setDoc, deleteDoc, doc, query, onSnapshot } από "firebase/firestore"?
εισαγωγή { firestore } από './firebase_setup/firebase';
εισαγωγή { v4 όπως και uuidv4 } από 'uuid'; 

Πριν συνεχίσετε, δείτε τη δομή DOM και τις καταστάσεις που χρησιμοποιεί αυτό το σεμινάριο:

λειτουργίαApp() {
συνθ [πληροφορίες, setInfo] = useState([])
συνθ [isUpdate, setisUpdate] = useState(ψευδής)
 const [docId, setdocId] = useState("")
 const [λεπτομέρεια, setDetail] = useState("")
συνθ [ids, setIds] = useState([])
ΕΠΙΣΤΡΟΦΗ (
<div className="App">
<μορφή>
<τύπος εισόδου= "κείμενο" value={detail} onChange={handledatachange} />
 {
 είναι Ενημέρωση; (
<>
<κουμπί onClick={handlesubmitchange} type = "υποβάλλουν">Εκσυγχρονίζω</button>
<κουμπί onClick={() => { setisUpdate (false); setDetail("")}}>
 Χ
</button>
</>
 ): (<κουμπί onClick={submithandler} type="υποβάλλουν">Αποθηκεύσετε</button>)
 }
</form>
{info.map((δεδομένα, ευρετήριο)=>
<κλειδί div={ids[index]} className='κοντέινερ δεδομένων' id='κοντέινερ δεδομένων'>
<p className='δεδομένα' id='δεδομένα' data-id ={ids[index]} key={ids[index]}>{δεδομένα}</Π>
<κουμπί className='κουμπί διαγραφής' id='κουμπί διαγραφής' onClick={handledelete}>
Διαγράφω
</button>
<κουμπί className='κουμπί ενημέρωσης' id='κουμπί ενημέρωσης' onClick={handleupdate}>
 Επεξεργασία
</button>
</div>
 )}
</div>
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Στη συνέχεια, δημιουργήστε ένα πρόγραμμα χειρισμού υποβολής για την εγγραφή δεδομένων στη βάση δεδομένων Firestore. Αυτό είναι ένα onΥποβολή Εκδήλωση. Έτσι θα το χρησιμοποιήσετε στο κουμπί υποβολής.

Επιπλέον, δημιουργήστε ένα πρόγραμμα χειρισμού αλλαγών. Αυτό το συμβάν ακούει τις αλλαγές στο πεδίο φόρμας και μεταβιβάζει την είσοδο σε έναν πίνακα (το λεπτομέρεια πίνακας σε αυτή την περίπτωση). Αυτό μπαίνει στη βάση δεδομένων.

συνθ handledatachange = (ε) => {
setDetail(μι.στόχος.αξία)
 };
συνθ υποβάλλω χειριστής = (ε) => {
μι.preventDefault()
 const ref = συλλογή (firestore, "test_data")
αφήνω δεδομένα = {
 uuid: uuidv4(),
 testData: λεπτομέρεια
 }
δοκιμάστε {
 addDoc (αναφορά, δεδομένα)
 } σύλληψη(λάθος) {
κονσόλα.log (σφάλμα)
 }
setDetail("")
 }

Ενώ το Firebase δημιουργεί αυτόματα αναγνωριστικά εγγράφων (εκτός εάν το αποτρέψετε), το πεδίο UUID χρησιμεύει επίσης ως μοναδικό αναγνωριστικό για κάθε έγγραφο.

Διαβάστε δεδομένα από τη βάση δεδομένων Firestore

Λήψη δεδομένων από τη βάση δεδομένων Firestore εντός του useEffect συνδέστε χρησιμοποιώντας τη μέθοδο ερωτήματος Firestore:

 useEffect(() => {
συνθ getData = ασυγχρονισμός () => {
συνθ δεδομένα = αναμένω ερώτημα (συλλογή (firestore, "test_data"));
onSnapshot (δεδομένα, (querySnapshot) => {
συνθ databaseInfo = [];
συνθ αναγνωριστικά δεδομένων = []
querySnapshot.για κάθε((έγγραφο) => {
Πληροφορίες βάσης δεδομένων.Σπρώξτε(έγγρ.δεδομένα().testData);
αναγνωριστικά δεδομένων.Σπρώξτε(έγγρ.ταυτότητα)
 });
setIds (dataIds)
 setInfo (databaseInfo)
 });
 }
getData()
 }, [])

Ο παραπάνω κώδικας χρησιμοποιεί το ερώτημα Firebase για να λάβει ένα στιγμιότυπο δεδομένων που υποβάλλονται στο Firestore χρησιμοποιώντας το onSnapshot λειτουργία.

Ένα στιγμιότυπο επιτρέπει στην εφαρμογή σας να ακούει τις αλλαγές στο backend. Ενημερώνει τον πελάτη αυτόματα κάθε φορά που κάποιος γράφει στη βάση δεδομένων.

ο setInfo κράτος αρπάζει τα δεδομένα σε κάθε έγγραφο. Θα χαρτογραφήσετε μέσω αυτού (το πληροφορίες πίνακας) κατά την απόδοση στο DOM.

ο setIds Η κατάσταση παρακολουθεί όλα τα αναγνωριστικά εγγράφων (μεταβιβάζονται ως Αναγνωριστικά πίνακας). Μπορείτε να χρησιμοποιήσετε κάθε αναγνωριστικό για να εκτελέσετε τα ερωτήματα Διαγραφή και Ενημέρωση σε κάθε έγγραφο. Στη συνέχεια, μπορείτε να περάσετε κάθε αναγνωριστικό εγγράφου ως χαρακτηριστικό DOM κατά την αντιστοίχιση μέσω του πληροφορίες πίνακας.

Ακολουθεί η κατάσταση χρήσης εντός του DOM (όπως φαίνεται στο προηγούμενο απόσπασμα κώδικα):

Ενημερώστε τα υπάρχοντα δεδομένα στο Firestore

Χρησιμοποιήστε το setDoc μέθοδος ενημέρωσης ενός εγγράφου ή ενός πεδίου σε ένα έγγραφο.

Ορίστε δύο χειριστές για την ενέργεια ενημέρωσης. Ο ένας χειρίζεται το κουμπί υποβολής για τα επεξεργασμένα δεδομένα (χειρολαβή υποβολή αλλαγής), ενώ το άλλο είναι για το κουμπί που ξαναγράφει τα δεδομένα στο πεδίο εισαγωγής για επεξεργασία (ενημέρωση χειρισμού):

συνθ handleupdate = (e) => {
 setisUpdate(αληθής)
setDetail(μι.στόχος.parentNode.παιδιά[0].textΠεριεχόμενο)
setdocId(μι.στόχος.parentNode.παιδιά[0].getAttribute("αναγνωριστικό δεδομένων"))
};
συνθ χειρολαβή υποβάλλω αλλαγή = ασυγχρονισμός (ε) => {
μι.preventDefault()
 const docRef = doc (firestore, 'test_data', docId);
συνθ ενημέρωση δεδομένων = αναμένω {
 testData: λεπτομέρεια
 };
αναμένωsetDoc(docRef, ενημέρωση δεδομένων, { συγχώνευση:true })
 .τότε (console.log("Τα δεδομένα άλλαξαν με επιτυχία"))
setisUpdate(ψευδής)
 setDetail("") 
}

Όπως φαίνεται στο προηγούμενο απόσπασμα κώδικα, εδώ είναι η απόδοση DOM για τις ενέργειες δημιουργίας και ενημέρωσης:

ο ενημέρωση χειρισμού Η συνάρτηση στοχεύει κάθε αναγνωριστικό εγγράφου στο DOM χρησιμοποιώντας τη διαδρομή κόμβου του. Το χρησιμοποιεί αυτό για να υποβάλει ερώτημα σε κάθε έγγραφο από τη βάση δεδομένων για να κάνει αλλαγές. Το κουμπί Επεξεργασία χρησιμοποιεί αυτή τη λειτουργία.

Έτσι είναι Ενημέρωση (παρακολουθείται από το setisUpdate κατάσταση) επιστρέφει αληθής όταν ένας χρήστης κάνει κλικ στο κουμπί Επεξεργασία. Αυτή η ενέργεια εμφανίζει το κουμπί Ενημέρωση, το οποίο υποβάλλει τα επεξεργασμένα δεδομένα όταν ένας χρήστης κάνει κλικ σε αυτά. Το επιπλέον Χ κουμπί κλείνει την ενέργεια επεξεργασίας όταν γίνεται κλικ—με ρύθμιση είναι Ενημέρωση προς την ψευδής.

Αν είναι Ενημέρωση είναι ψευδής, το DOM διατηρεί το αρχικό κουμπί Αποθήκευση.

Διαγραφή δεδομένων από το Firestore

Μπορείτε να διαγράψετε υπάρχοντα δεδομένα από το Firestore χρησιμοποιώντας το διαγραφή εγγράφου μέθοδος. Όπως κάνατε για την ενέργεια Ενημέρωση, ανακτήστε κάθε έγγραφο χρησιμοποιώντας το μοναδικό του αναγνωριστικό στοχεύοντας το χαρακτηριστικό DOM του χρησιμοποιώντας τη διαδρομή κόμβου:

συνθ handleddelete = ασυγχρονισμός (ε) => {
 const docRef = doc (firestore, 'test_data', e.target.parentNode.children[0].getAttribute("αναγνωριστικό δεδομένων"));
αναμένω deleteDoc (docRef)
 .τότε(() => {
κονσόλα.κούτσουρο(`${e.target.parentNode.children[0].textContent} έχει διαγραφεί με επιτυχία.`)
 })
 .σύλληψη(σφάλμα => {
κονσόλα.log (σφάλμα);
 })
}

Περάστε την παραπάνω λειτουργία στο κουμπί Διαγραφή. Αφαιρεί τα δεδομένα από τη βάση δεδομένων και το DOM όταν ένας χρήστης κάνει κλικ σε αυτά.

Συνδυάστε το Firebase με το καλύτερο Frontend Framework

Το Firebase σάς βοηθά να γράφετε λιγότερο κώδικα ενώ υποβάλλετε ερωτήματα σε δεδομένα απευθείας από την πλευρά του πελάτη. Εκτός από το React, υποστηρίζει άλλα πλαίσια JavaScript, συμπεριλαμβανομένων των Angular.js, Vue.js και πολλών άλλων.

Τώρα που είδατε πώς λειτουργεί με το React, ίσως θέλετε επίσης να μάθετε να το ζευγαρώνετε με το Angular.js.