Kako zgraditi aplikacijo za klepet z React in Firebase

Ste se kdaj vprašali, kako deluje WhatsApp? Ali kako se različni uporabniki povezujejo in izmenjujejo sporočila v klepetih? Ustvarjanje poenostavljene aplikacije za klepet je lahko odličen način za razumevanje osnovnih funkcij aplikacij za klepet.

Izdelava aplikacije za klepet se lahko zdi zastrašujoča naloga, vendar Firebase poenostavi postopek. Omogoča vam hiter zagon katere koli aplikacije, pri čemer ni več potrebe po zaledju po meri ali nastavitvi baze podatkov.

Kaj je Firebase Cloud Database

Firebase je razvojna platforma v oblaku, ki ponuja vrsto zalednih storitev, kot so baza podatkov v realnem času, preverjanje pristnosti in gostovanje. Jedro njegovih storitev baze podatkov je baza podatkov v oblaku NoSQL, ki uporablja dokumentni model za shranjevanje podatkov v realnem času.

Nastavite projekt Firebase in odjemalca React

Za začetek pojdite na Firebase in se prijavite za račun. Na uporabniški nadzorni plošči kliknite Ustvari projekt za ustanovitev novega projekta.

Ko ustvarite projekt, izberite in kliknite ikono kode na pregledni strani projekta, da registrirate svojo aplikacijo. Registracija pri Firebase vam omogoča dostop do njegovih virov in njihovo uporabo za izdelavo vaše spletne aplikacije React.

Upoštevajte navodila za integracijo Firebase SDK v vaš projekt pod Dodajte Firebase SDK.

Naslednji, ustvarite aplikacijo React in namestite Firebase SDK v svojo aplikacijo. Poleg tega uvozite react-firebase-hooks paket, ki poenostavlja delo s Firebase In React.

npm namestite firebase react-firebase-hooks

Konfigurirajte Firebase v svoji aplikaciji React

V vašem src imenik, ustvarite novo datoteko in jo poimenujte, firebase-config.js. Kopirajte spremenljivke okolja z nadzorne plošče projekta Firebase in jih prilepite v to datoteko.

uvoz {initializeApp} od"firebase/aplikacija";
uvoz { getFirestore } od'@firebase/firestore';
uvoz { getAuth, GoogleAuthProvider } od"firebase/avt";
konst firebaseConfig = {
 apiKey: "API_KEY",
 authDomain: "authDomain",
 projectId: "ID projekta",
 vedro za shranjevanje: "vedro za shranjevanje",
 messagingSenderId: "ID pošiljatelja sporočil",
 appId: "ID aplikacije"
};
konst app = initializeApp (firebaseConfig);
konst db = getFirestore (aplikacija);
konst auth = getAuth (aplikacija)
konst ponudnik = novo GoogleAuthProvider();
izvoz {db, auth, ponudnik}

S konfiguracijo vašega projekta Firebase inicializirate funkcije za preverjanje pristnosti Firebase, Firestore in Firebase za uporabo v vaši aplikaciji.

Nastavite zbirko podatkov Firestore

Ta zbirka podatkov bo shranjevala uporabniške podatke in sporočila klepeta. Pojdite na stran s pregledom projekta in kliknite Ustvari bazo podatkov gumb za nastavitev Cloud Firestore.

Določite način in lokacijo baze podatkov.

Nazadnje posodobite pravila zbirke podatkov Firestore, da omogočite operacije branja in pisanja iz aplikacije React. Kliknite na Pravila in spremenite beri in piši pravilo za prav.

Ko končate z nastavitvijo baze podatkov, lahko ustvarite predstavitveno zbirko - to je baza podatkov NoSQL v Firestore. Zbirke sestavljajo dokumenti kot zapisi.

Če želite ustvariti novo zbirko, kliknite na Začni zbiranje in podajte ID zbirke – ime tabele.

Integrirajte avtentikacijo uporabnika Firebase

Firebase ponuja takojšnje priprave avtentikacijo in avtorizacijo rešitve, ki jih je enostavno implementirati, kot so ponudniki družabnih prijav ali ponudniki e-poštnih gesel po meri.

Na strani s pregledom projekta izberite Preverjanje pristnosti s seznama prikazanih izdelkov. Nato kliknite na Nastavite način prijave gumb za konfiguracijo Googlovega ponudnika. Na seznamu ponudnikov izberite Google, ga omogočite in izpolnite e-poštno sporočilo za podporo projektu.

Ustvarite komponento za prijavo

Ko končate s konfiguracijo ponudnika v Firebase, pojdite v mapo svojega projekta in ustvarite novo mapo, komponente, v /src imenik. Znotraj komponente mapo, ustvarite novo datoteko: SignIn.js.

V SignIn.js datoteko dodajte spodnjo kodo:

uvoz Reagiraj od'reagirati';
uvoz {signInWithPopup} od"firebase/avt";
uvoz {avt, ponudnik} od'../firebase-config'

funkcijoPrijava() {
konst signInWithGoogle = () => {
 signInWithPopup (avt, ponudnik)
 };
vrnitev (


Prijavite se z Googlom</button>
 </div>
 )
}
izvozprivzeto Prijava

• Ta koda uvozi objekte za preverjanje pristnosti in Googlovega ponudnika, ki ste jih inicializirali v konfiguracijski datoteki Firebase.
• Nato definira a Prijava funkcijo, ki izvaja signInWithPopup metoda iz Firebase, ki zajema avtentikacija in ponudnik komponente kot parametri. Ta funkcija bo preverjala pristnost uporabnikov z njihovimi prijavami v družabna omrežja Google.
• Na koncu vrne div, ki vsebuje gumb, ki ob kliku pokliče prijavite se z Googlom funkcijo.

Ustvarite komponento klepeta

Ta komponenta bo vsebovala glavno funkcijo vaše aplikacije za klepet, okno za klepet. Ustvarite novo datoteko znotraj komponente mapo in jo poimenujte Chat.js.

Dodajte spodnjo kodo v Chat.js Mapa:

uvoz Odziv, {useState, useEffect} od'reagirati'
uvoz {db, auth} od'../firebase-config'
uvoz Pošlji sporočilo od'./Pošlji sporočilo'
uvoz { zbirka, poizvedba, omejitev, orderBy, onSnapshot } od"firebase/firestore";
funkcijoKlepetajte() {
konst [sporočila, setMessages] = useState([])
konst { ID uporabnika } = auth.currentUser
 useEffect(() => {
konst q = poizvedba(
 zbirka (db, "sporočila"),
 orderBy("ustvarjenoAt"),
 omejitev (50)
 );
konst podatki = onSnapshot (q, (QuerySnapshot) => {
pustiti sporočila = [];
 QuerySnapshot.forEach((doc) => {
 messages.push({ ...doc.data(), id: doc.id });
 });
 setMessages (sporočila) 

 });
vrnitev() => podatki; 

 }, []);

vrnitev (


 auth.signOut()}>Odjava</button>
 {sporočila && messages.map((sporočilo, id, uid, photoURL) =>
 ključ={id} 
 className={`sporočilo ${userID auth.currentUser.uid? 'poslano': 'prejeto'}`}>

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

 </div>
 )
}
izvozprivzeto Klepetajte

• Ta koda uvozi bazo podatkov, komponente za preverjanje pristnosti, inicializirane v firebase-config.js datoteko in metode po meri Firestore, ki olajšajo manipulacijo s shranjenimi podatki.
• Izvaja zbirka, poizvedbo, omejitev, orderBy, in onSnapshot Metode Firestore za poizvedovanje in zajemanje posnetka trenutno shranjenih podatkov v zbirki sporočil Firestore, razvrščenih po času, ko so bila ustvarjena, in prebere samo 50 najnovejših sporočil.
• Metode Firestore so ovite in se izvajajo znotraj a useEffect kavelj, da zagotovite, da so sporočila upodobljena takoj, vsakič, ko pritisnete gumb za pošiljanje, brez osveževanja okna strani. Ko so podatki prebrani, so shranjeni v stanju sporočil.
• Nato preveri razlikovanje med poslanimi in prejetimi sporočili – ali se ID uporabnika, shranjen s sporočilom, ujema ID uporabnika za prijavljenega uporabnika, nato pa nastavi ime razreda in uporabi ustrezen slog za sporočilo.
• Nazadnje prikaže sporočila, a Odjava gumb in Pošlji sporočilo komponento. The Odjava gumb onClick vodja pokliče auth.signOut() način, ki ga zagotavlja Firebase.

Ustvarite komponento za pošiljanje sporočila

Ustvari novo datoteko, SendMessage.js datoteko in dodajte spodnjo kodo:

uvoz Odziv, {useState} od'reagirati'
uvoz {db, auth} od'../firebase-config'
uvoz { zbirka, addDoc, serverTimestamp} od"firebase/firestore";
funkcijoPošlji sporočilo() {
konst [msg, setMsg] = useState('')
konst messagesRef = zbirka (db, "sporočila");

konst sendMsg = asinh (e) => {
konst { uid, photoURL } = auth.currentUser

čakati addDoc (messagesRef, {
 besedilo: sporočilo,
 createdAt: serverTimestamp(),
 uid: uid,
 photoURL: photoURL
 })
 setMsg('');
 };
vrnitev (



'Sporočilo...'
 vrsta="besedilo" vrednost={msg} 
 onChange={(e) => setMsg (e.target.value)}
 />
Pošlji</button>
 </div>
 )
}
izvozprivzeto Pošlji sporočilo

• Podobno kot pri Chat.js uvozite metode Firestore ter inicializirano zbirko podatkov in komponente za preverjanje pristnosti.
• Za pošiljanje sporočil je Pošlji sporočilo funkcija izvaja addDoc Metoda Firestore, ki ustvari nov dokument v bazi podatkov in shrani posredovane podatke.
• The addDoc metoda sprejme dva parametra, podatkovni objekt in referenčni objekt, ki označujeta, v katero zbirko želite shraniti podatke. Metoda zbiranja Firestore določa zbirko za shranjevanje podatkov.
• Nazadnje upodobi vnosno polje in gumb na spletni strani, da uporabnikom omogoči pošiljanje sporočil v bazo podatkov.

Uvozite komponente v datoteko App.js

Nazadnje, v vašem App.js datoteko, uvozite Prijava in Klepetajte komponente, da jih upodabljate v brskalniku.

V vašem App.js datoteko, izbrišite okvirno kodo in dodajte spodnjo kodo:

uvoz Klepetajte od'./components/Chat';
uvoz Prijava od'./components/SignIn';
uvoz { avtor } od'./firebase-config.js'
uvoz {useAuthState} od'react-firebase-hooks/auth'
funkcijoaplikacija() {
konst [uporabnik] = useAuthState (avt)
vrnitev (
 <>
 {uporabnik? <Klepetajte />: <Prijava />}
 </>
 );
}
izvozprivzeto aplikacija; 

Ta koda upodablja Prijava in Klepetajte komponente pogojno s preverjanjem statusa avtentikacije uporabnika. Stanje preverjanja pristnosti je destrukturirano iz komponente preverjanja pristnosti Firebase s pomočjo useAuthState kavelj iz react-firebase-hooks paket.

Preveri, ali je uporabnik preverjen, in upodablja Klepetajte komponento sicer Prijava komponenta je upodobljena. Nazadnje dodajte poljubne sloge CSS, zavrtite razvojni strežnik, da shranite spremembe, in pojdite v brskalnik, da si ogledate končne rezultate.

Funkcije brez strežnika Firebase

Firebase poleg baze podatkov v realnem času in preverjanja pristnosti ponuja vrsto funkcij. Njegove funkcije brez strežnika lahko uporabite za hiter zagon in prilagajanje katere koli aplikacije. Poleg tega se Firebase brezhibno integrira tako s spletnimi kot mobilnimi aplikacijami, kar olajša gradnjo aplikacij za več platform.