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

Αναρωτηθήκατε ποτέ πώς λειτουργεί το WhatsApp; Ή πόσο διαφορετικοί χρήστες συνδέονται και ανταλλάσσουν μηνύματα σε συνομιλίες; Η δημιουργία μιας απλοποιημένης εφαρμογής συνομιλίας μπορεί να είναι ένας πολύ καλός τρόπος για να κατανοήσετε τις βασικές λειτουργίες πίσω από τις εφαρμογές συνομιλίας.

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

Τι είναι η βάση δεδομένων Firebase Cloud

Το Firebase είναι μια πλατφόρμα ανάπτυξης που βασίζεται σε σύννεφο που προσφέρει μια σειρά από υπηρεσίες υποστήριξης, όπως μια βάση δεδομένων σε πραγματικό χρόνο, τον έλεγχο ταυτότητας και τη φιλοξενία. Στον πυρήνα των υπηρεσιών βάσης δεδομένων της, βρίσκεται μια βάση δεδομένων cloud NoSQL που χρησιμοποιεί ένα μοντέλο εγγράφου για την αποθήκευση δεδομένων σε πραγματικό χρόνο.

Ρυθμίστε το Firebase Project και το React Client

Για να ξεκινήσετε, κατευθυνθείτε στο Firebase και εγγραφείτε για λογαριασμό. Στον πίνακα ελέγχου χρήστη, κάντε κλικ Δημιουργία έργου για τη δημιουργία ενός νέου έργου.

Αφού δημιουργήσετε το έργο σας, επιλέξτε και κάντε κλικ στο εικονίδιο του κώδικα στη σελίδα επισκόπησης του έργου για να καταχωρήσετε την αίτησή σας. Η εγγραφή στο Firebase σάς επιτρέπει να έχετε πρόσβαση και να χρησιμοποιείτε τους πόρους του για να δημιουργήσετε την εφαρμογή Ιστού React.

Λάβετε υπόψη τις οδηγίες για την ενσωμάτωση του SDK του Firebase στο έργο σας κάτω από Προσθήκη Firebase SDK.

Επόμενο, δημιουργήστε μια εφαρμογή React και εγκαταστήστε το Firebase SDK στην εφαρμογή σας. Επιπλέον, εισαγάγετε το react-firebase-hooks πακέτο που απλοποιεί την εργασία με το Firebase In React.

npm εγκατάσταση firebase react-firebase-hooks

Διαμορφώστε το Firebase στην εφαρμογή React σας

Στο δικό σου src κατάλογο, δημιουργήστε ένα νέο αρχείο και ονομάστε το, firebase-config.js. Αντιγράψτε τις μεταβλητές περιβάλλοντος από τον πίνακα ελέγχου του έργου firebase και επικολλήστε τις σε αυτό το αρχείο.

εισαγωγή { initializeApp } από"firebase/app";
εισαγωγή { getFirestore } από'@firebase/firestore';
εισαγωγή { getAuth, GoogleAuthProvider } από"firebase/auth";
συνθ firebaseConfig = {
 apiKey: "API_KEY",
 authDomain: "authDomain",
 Αναγνωριστικό έργου: "αναγνωριστικό έργου",
 Αποθηκευτικός Κάδος: "κουβάς αποθήκευσης",
 messagingSenderId: "Αναγνωριστικό αποστολέα μηνυμάτων",
 Αναγνωριστικό εφαρμογής: "Αναγνωριστικό εφαρμογής"
};
συνθ app = initializeApp (firebaseConfig);
συνθ db = getFirestore (εφαρμογή);
συνθ auth = getAuth (εφαρμογή)
συνθ πάροχος = νέος GoogleAuthProvider();
εξαγωγή {db, auth, πάροχος}

Χρησιμοποιώντας τη διαμόρφωση του έργου Firebase, αρχικοποιείτε τις λειτουργίες ελέγχου ταυτότητας Firebase, Firestore και Firebase για χρήση εντός της εφαρμογής σας.

Ρυθμίστε μια βάση δεδομένων Firestore

Αυτή η βάση δεδομένων θα αποθηκεύει δεδομένα χρήστη και μηνύματα συνομιλίας. Μεταβείτε στη σελίδα επισκόπησης του έργου σας και κάντε κλικ στο Δημιουργία βάσης δεδομένων κουμπί για να ρυθμίσετε το Cloud Firestore σας.

Καθορίστε τη λειτουργία και τη θέση της βάσης δεδομένων.

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

Μόλις ολοκληρώσετε τη ρύθμιση της βάσης δεδομένων, μπορείτε να δημιουργήσετε μια συλλογή επίδειξης — αυτή είναι μια βάση δεδομένων NoSQL στο Firestore. Οι συλλογές αποτελούνται από έγγραφα ως αρχεία.

Για να δημιουργήσετε μια νέα συλλογή, κάντε κλικ στο Έναρξη συλλογής κουμπί και δώστε ένα αναγνωριστικό συλλογής — ένα όνομα πίνακα.

Ενσωματώστε τον έλεγχο ταυτότητας χρήστη Firebase

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

Στη σελίδα επισκόπησης του έργου σας, επιλέξτε Αυθεντικοποίηση από τη λίστα των προϊόντων που εμφανίζονται. Στη συνέχεια, κάντε κλικ στο Ρύθμιση μεθόδου σύνδεσης κουμπί για να διαμορφώσετε τον πάροχο Google. Επιλέξτε Google από τη λίστα των Παρόχων, ενεργοποιήστε το και συμπληρώστε το email υποστήριξης του έργου.

Δημιουργήστε ένα στοιχείο εισόδου

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

Στο SignIn.js αρχείο, προσθέστε τον παρακάτω κώδικα:

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή { signInWithPopup } από"firebase/auth";
εισαγωγή { auth, πάροχος } από"../firebase-config"

λειτουργίαΣυνδεθείτε() {
συνθ signInWithGoogle = () => {
 signInWithPopup (auth, πάροχος)
 };
ΕΠΙΣΤΡΟΦΗ (


Συνδεθείτε με το Google</button>
 </div>
 )
}
εξαγωγήΠροκαθορισμένο Συνδεθείτε

• Αυτός ο κώδικας εισάγει τον έλεγχο ταυτότητας και τα αντικείμενα του παρόχου Google που αρχικοποιήσατε στο αρχείο διαμόρφωσης Firebase.
• Στη συνέχεια ορίζει α Συνδεθείτε λειτουργία που υλοποιεί το signInWithPopup μέθοδο από το Firebase που λαμβάνει το αυθεντικοποίηση και προμηθευτής συστατικά ως παράμετροι. Αυτή η λειτουργία θα ελέγχει την ταυτότητα των χρηστών με τις συνδέσεις κοινωνικής δικτύωσης Google.
• Τέλος, επιστρέφει ένα div που περιέχει ένα κουμπί το οποίο, όταν πατηθεί, καλεί το συνδεθείτεΜε το Google λειτουργία.

Δημιουργήστε ένα στοιχείο συνομιλίας

Αυτό το στοιχείο θα φιλοξενήσει το κύριο χαρακτηριστικό της εφαρμογής Chat, το παράθυρο συνομιλίας. Δημιουργήστε ένα νέο αρχείο μέσα στο συστατικά φάκελο και ονομάστε τον Chat.js.

Προσθέστε τον παρακάτω κώδικα στο Chat.js Αρχείο:

εισαγωγή React, { useState, useEffect } από'αντιδρώ'
εισαγωγή { db, auth } από"../firebase-config"
εισαγωγή Να στείλετε μήνυμα από'./Να στείλετε μήνυμα'
εισαγωγή { collection, query, limit, orderBy, onSnapshot } από"firebase/firestore";
λειτουργίαΚουβέντα() {
συνθ [messages, setMessages] = useState([])
συνθ { userID } = auth.currentUser
 useEffect(() => {
συνθ q = ερώτημα(
 συλλογή (db, "μηνύματα"),
 Ταξινόμηση κατά("δημιουργήθηκε σε"),
 όριο(50)
 );
συνθ data = onSnapshot (q, (QuerySnapshot) => {
αφήνω μηνύματα = [];
 QuerySnapshot.forEach((έγγρ) => {
 messages.push({ ...doc.data(), ταυτότητα: doc.id });
 });
 setMessages (μηνύματα) 

 });
ΕΠΙΣΤΡΟΦΗ() => δεδομένα; 

 }, []);

ΕΠΙΣΤΡΟΦΗ (


 auth.signOut()}>Έξοδος</button>
 {messages && messages.map((μήνυμα, id, uid, photoURL) =>
 κλειδί={id} 
 classname={`msg ${userID auth.currentUser.uid? 'Απεσταλμένα': "έλαβε"}`}>

{message.text}</p>
 </div>
 )} 

 </div>
 )
}
εξαγωγήΠροκαθορισμένο Κουβέντα

• Αυτός ο κώδικας εισάγει τη βάση δεδομένων, τα στοιχεία ελέγχου ταυτότητας που αρχικοποιούνται στο firebase-config.js αρχείο και προσαρμοσμένες μεθόδους Firestore που διευκολύνουν τον χειρισμό των αποθηκευμένων δεδομένων.
• Υλοποιεί την συλλογή, ερώτηση, όριο, Ταξινόμηση κατά, και onSnapshot Μέθοδοι Firestore για την αναζήτηση και τη λήψη ενός στιγμιότυπου των δεδομένων που είναι αποθηκευμένα αυτήν τη στιγμή στη συλλογή μηνυμάτων Firestore, ταξινομημένα κατά τη στιγμή της δημιουργίας τους και διαβάζει μόνο τα 50 πιο πρόσφατα μηνύματα.
• Οι μέθοδοι Firestore τυλίγονται και τρέχουν μέσα σε ένα useEffect συνδέστε για να διασφαλίσετε ότι τα μηνύματα αποδίδονται αμέσως, κάθε φορά που πατάτε το κουμπί αποστολής, χωρίς να ανανεώνετε το παράθυρο της σελίδας. Μόλις διαβαστούν τα δεδομένα, αποθηκεύονται στην κατάσταση μηνυμάτων.
• Στη συνέχεια, ελέγχει για να διαφοροποιήσει τα απεσταλμένα και τα ληφθέντα μηνύματα — εάν το αναγνωριστικό χρήστη που είναι αποθηκευμένο με το μήνυμα ταιριάζει το αναγνωριστικό χρήστη για τον συνδεδεμένο χρήστη και στη συνέχεια ορίζει το όνομα της τάξης και εφαρμόζει το κατάλληλο στυλ για το μήνυμα.
• Τέλος, αποδίδει τα μηνύματα, α αποσύνδεση κουμπί και το Να στείλετε μήνυμα συστατικό. ο αποσύνδεση κουμπί στο κλικ ο χειριστής καλεί το auth.signOut() μέθοδος που παρέχεται από το Firebase.

Δημιουργήστε ένα στοιχείο αποστολής μηνύματος

Δημιουργήστε ένα νέο αρχείο, SendMessage.js αρχείο και προσθέστε τον παρακάτω κώδικα:

εισαγωγή React, { useState } από'αντιδρώ'
εισαγωγή { db, auth } από"../firebase-config"
εισαγωγή { collection, addDoc, serverTimestamp} από"firebase/firestore";
λειτουργίαΝα στείλετε μήνυμα() {
συνθ [msg, setMsg] = useState('')
συνθ messagesRef = συλλογή (db, "μηνύματα");

συνθ sendMsg = ασυγχρονισμός (ε) => {
συνθ { uid, photoURL } = auth.currentUser

αναμένω addDoc (messagesRef, {
 κείμενο: μήνυμα,
 createAt: serverTimestamp(),
 uid: uid,
 photoURL: photoURL
 })
 setMsg('');
 };
ΕΠΙΣΤΡΟΦΗ (



'Μήνυμα...'
 τύπος="κείμενο" value={msg} 
 onChange={(e) => setMsg (e.target.value)}
 />
Αποστολή</button>
 </div>
 )
}
εξαγωγήΠροκαθορισμένο Να στείλετε μήνυμα

• Παρόμοια με το Chat.js στοιχείο, εισαγάγετε τις μεθόδους Firestore και την αρχικοποιημένη βάση δεδομένων και στοιχεία ελέγχου ταυτότητας.
• Για να στείλετε μηνύματα, το Να στείλετε μήνυμα η συνάρτηση υλοποιεί το addDoc Μέθοδος Firestore που δημιουργεί ένα νέο έγγραφο στη βάση δεδομένων και αποθηκεύει τα δεδομένα που έχουν περάσει.
• ο addDoc Η μέθοδος λαμβάνει δύο παραμέτρους, το αντικείμενο δεδομένων και ένα αντικείμενο αναφοράς που υποδεικνύει ποια συλλογή θέλετε να αποθηκεύσετε τα δεδομένα. Η μέθοδος συλλογής Firestore καθορίζει τη συλλογή για αποθήκευση δεδομένων.
• Τέλος, αποδίδει ένα πεδίο εισαγωγής και ένα κουμπί στην ιστοσελίδα που επιτρέπει στους χρήστες να υποβάλλουν μηνύματα στη βάση δεδομένων.

Εισαγάγετε τα στοιχεία στο Αρχείο App.js

Τέλος, στο δικό σας App.js αρχείο, εισάγετε το Συνδεθείτε και Κουβέντα στοιχεία για να τα αποδώσετε στο πρόγραμμα περιήγησής σας.

Στο δικό σου App.js αρχείο, διαγράψτε τον κωδικό του boilerplate και προσθέστε τον παρακάτω κώδικα:

εισαγωγή Κουβέντα από'./components/Chat';
εισαγωγή Συνδεθείτε από'./components/SignIn';
εισαγωγή { auth } από"./firebase-config.js"
εισαγωγή { useAuthState } από'react-firebase-hooks/auth'
λειτουργίαApp() {
συνθ [χρήστης] = useAuthState (auth)
ΕΠΙΣΤΡΟΦΗ (
 <>
 {χρήστης? <Κουβέντα />: <Συνδεθείτε />}
 </>
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή? 

Αυτός ο κώδικας αποδίδει το Συνδεθείτε και Κουβέντα στοιχεία υπό όρους ελέγχοντας την κατάσταση ελέγχου ταυτότητας ενός χρήστη. Η κατάσταση ελέγχου ταυτότητας καταστρέφεται από το στοιχείο ελέγχου ταυτότητας Firebase με τη βοήθεια του useAuthState γάντζος από το react-firebase-hooks πακέτο.

Ελέγχει εάν ένας χρήστης έχει πιστοποιηθεί και αποδίδει το Κουβέντα συστατικό διαφορετικά το Συνδεθείτε συστατικό αποδίδεται. Τέλος, προσθέστε οποιοδήποτε στυλ CSS, γυρίστε τον διακομιστή ανάπτυξης για να αποθηκεύσετε τις αλλαγές και μεταβείτε στο πρόγραμμα περιήγησής σας για να δείτε τα τελικά αποτελέσματα.

Λειτουργίες χωρίς διακομιστή Firebase

Το Firebase παρέχει μια σειρά από λειτουργίες πέρα ​​από μια βάση δεδομένων σε πραγματικό χρόνο και έλεγχο ταυτότητας. Μπορείτε να χρησιμοποιήσετε τις λειτουργίες του χωρίς διακομιστή για γρήγορη εκκίνηση και κλιμάκωση οποιασδήποτε εφαρμογής. Επιπλέον, το Firebase ενσωματώνεται άψογα με εφαρμογές ιστού και κινητών διευκολύνοντας τη δημιουργία εφαρμογών πολλαπλών πλατφορμών.