Kā izveidot tērzēšanas lietotni, izmantojot React un Firebase

Vai esat kādreiz domājis, kā darbojas WhatsApp? Vai arī kā dažādi lietotāji tērzēšanā savienojas un apmainās ar ziņojumiem? Vienkāršotas tērzēšanas lietojumprogrammas izveide var būt lielisks veids, kā izprast tērzēšanas lietojumprogrammu galvenās funkcijas.

Tērzēšanas lietotnes izveide var šķist biedējošs uzdevums, tomēr Firebase šo procesu vienkāršo. Tas ļauj ātri palaist jebkuru lietojumprogrammu, novēršot nepieciešamību pēc pielāgotas aizmugursistēmas vai datu bāzes iestatīšanas.

Kas ir Firebase mākoņa datu bāze

Firebase ir uz mākoņiem balstīta izstrādes platforma, kas piedāvā dažādus aizmugures pakalpojumus, piemēram, reāllaika datu bāzi, autentifikāciju un mitināšanu. Datu bāzes pakalpojumu pamatā ir NoSQL mākoņa datu bāze, kas izmanto dokumentu modeli, lai saglabātu datus reāllaikā.

Iestatiet Firebase projektu un React Client

Lai sāktu, dodieties uz Firebase un reģistrēties kontam. Lietotāja informācijas panelī noklikšķiniet uz Izveidot projektu lai izveidotu jaunu projektu.

Pēc projekta izveides atlasiet un noklikšķiniet uz koda ikonas projekta pārskata lapā, lai reģistrētu savu pieteikumu. Reģistrējoties pakalpojumā Firebase, varat piekļūt un izmantot tās resursiem, lai izveidotu savu React tīmekļa lietotni.

Ņemiet vērā norādījumus par Firebase SDK integrēšanu savā projektā, kas sniegti sadaļā Pievienojiet Firebase SDK.

Nākamais, izveidot React lietojumprogrammu un instalējiet Firebase SDK savā lietojumprogrammā. Turklāt importējiet reaģēt-firebase-āķi pakotne, kas vienkāršo darbu ar Firebase In React.

npm instalējiet firebase react-firebase-hooks

Konfigurējiet Firebase savā React lietojumprogrammā

Tavā src direktorijā, izveidojiet jaunu failu un nosauciet to, firebase-config.js. Kopējiet vides mainīgos no Firebase projekta informācijas paneļa un ielīmējiet tos šajā failā.

imports {inicializeApp} no"firebase/app";
imports { getFirestore } no"@firebase/firestore";
imports { getAuth, GoogleAuthProvider } no"firebase/auth";
konst firebaseConfig = {
 apiKey: "API_KEY",
 authDomain: "authDomain",
 projekta ID: "projekta ID",
 uzglabāšanas kauss: "uzglabāšanas spainis",
 messagingSenderId: "ziņapmaiņas sūtītāja ID",
 appId: "Lietotnes ID"
};
konst app = inicializētApp (firebaseConfig);
konst db = getFirestore (lietotne);
konst auth = getAuth (lietotne)
konst nodrošinātājs = jauns GoogleAuthProvider();
eksportēt {db, auth, provider}

Izmantojot Firebase projekta konfigurāciju, jūs inicializējat Firebase, Firestore un Firebase autentifikācijas funkcijas izmantošanai savā lietotnē.

Iestatiet Firestore datu bāzi

Šajā datu bāzē tiks saglabāti lietotāja dati un tērzēšanas ziņojumi. Dodieties uz sava projekta pārskata lapu un noklikšķiniet uz Izveidot datu bāzi pogu, lai iestatītu savu Cloud Firestore.

Definējiet datu bāzes režīmu un atrašanās vietu.

Visbeidzot, atjauniniet Firestore datu bāzes noteikumus, lai atļautu lasīšanas un rakstīšanas darbības no lietojumprogrammas React. Noklikšķiniet uz Noteikumi cilni un mainiet Lasi un raksti valdīt uz taisnība.

Kad esat pabeidzis datu bāzes iestatīšanu, varat izveidot demonstrācijas kolekciju — šī ir NoSQL datu bāze pakalpojumā Firestore. Kolekcijas veido dokumenti kā ieraksti.

Lai izveidotu jaunu kolekciju, noklikšķiniet uz Sāciet savākšanu pogu un norādiet kolekcijas ID — tabulas nosaukumu.

Integrējiet Firebase lietotāja autentifikāciju

Firebase nodrošina jau gatavu autentifikācija un autorizācija viegli ieviešami risinājumi, piemēram, sociālās pieteikšanās nodrošinātāji vai pielāgots e-pasta paroles nodrošinātājs.

Projekta pārskata lapā atlasiet Autentifikācija no parādīto produktu saraksta. Pēc tam noklikšķiniet uz Iestatiet pierakstīšanās metodi pogu, lai konfigurētu Google pakalpojumu sniedzēju. Pakalpojumu sniedzēju sarakstā atlasiet Google, iespējojiet to un aizpildiet projekta atbalsta e-pasta ziņojumu.

Izveidojiet pierakstīšanās komponentu

Kad esat pabeidzis Firebase nodrošinātāja konfigurēšanu, dodieties uz savu projekta mapi un izveidojiet jaunu mapi, sastāvdaļas, iekš /src direktoriju. Iekšpusē sastāvdaļas mapē, izveidojiet jaunu failu: SignIn.js.

Iekš SignIn.js failu, pievienojiet tālāk norādīto kodu:

imports Reaģēt no'reaģēt';
imports { signInWithPopup } no"firebase/auth";
imports { auth, sniedzējs } no'../firebase-config'

funkcijuIelogoties() {
konst signInWithGoogle = () => {
 pierakstīties ar uznirstošo logu (auth, nodrošinātājs)
 };
atgriezties (


Pierakstīties ar Google</button>
 </div>
 )
}
eksportētnoklusējuma Ielogoties

• Šis kods importē autentifikācijas un Google nodrošinātāja objektus, kurus inicializējāt Firebase konfigurācijas failā.
• Pēc tam tas definē a Ielogoties funkcija, kas īsteno pierakstīties ar uznirstošo logu metode no Firebase, kas ņem vērā autentifikācija un pakalpojumu sniedzējs komponenti kā parametri. Šī funkcija autentificēs lietotājus ar viņu Google sociālajiem pieteikumiem.
• Visbeidzot, tas atgriež div, kas satur pogu, kas, noklikšķinot, izsauc pierakstītiesArGoogle funkciju.

Izveidojiet tērzēšanas komponentu

Šajā komponentā būs jūsu tērzēšanas lietojumprogrammas galvenā funkcija, tērzēšanas logs. Izveidojiet jaunu failu iekšpusē sastāvdaļas mapi un nosauciet to Chat.js.

Pievienojiet zemāk esošo kodu Chat.js Fails:

imports Reaģēt, { useState, useEffect } no'reaģēt'
imports { db, autentifikācija } no'../firebase-config'
imports Sūtīt ziņu no'./Sūtīt ziņu'
imports { collection, query, limit, orderBy, onSnapshot } no"firebase/firestore";
funkcijuTērzēšana() {
konst [ziņas, setMessages] = useState([])
konst { userID } = auth.currentUser
 useEffect(() => {
konst q = vaicājums(
 kolekcija (db, "ziņas"),
 sakārtot pēc("izveidots"),
 limits(50)
 );
konst dati = onSnapshot (q, (QuerySnapshot) => {
ļaut ziņojumi = [];
 QuerySnapshot.forEach((doc) => {
 messages.push({ ...doc.data(), id: doc.id });
 });
 setMessages (ziņas) 

 });
atgriezties() => dati; 

 }, []);

atgriezties (


 auth.signOut()}>Izrakstīties</button>
 {Messages && messages.map((ziņojums, id, uid, fotoURL) =>
 atslēga={id} 
 className={`msg ${userID auth.currentUser.uid? 'nosūtīts': 'saņemts'}`}>

{ziņa.teksts}</p>
 </div>
 )} 

 </div>
 )
}
eksportētnoklusējuma Tērzēšana

• Šis kods importē datu bāzi, autentifikācijas komponentus, kas inicializēti firebase-config.js failu un Firestore pielāgotās metodes, kas atvieglo manipulāciju ar saglabātajiem datiem.
• Tas īsteno kolekcija, vaicājums, ierobežojums, sakārtot pēc, un onSnapshot Firestore metodes, lai vaicātu un tvertu pašlaik Firestore ziņojumu kolekcijā saglabāto datu momentuzņēmumu, kas sakārtoti pēc to izveides laika, un nolasa tikai 50 jaunākos ziņojumus.
• Firestore metodes ir iesaiņotas un palaist iekšā a useEffect āķis, lai nodrošinātu, ka ziņojumi tiek atveidoti nekavējoties, katru reizi, kad nospiežat sūtīšanas pogu, neatsvaidzinot lapas logu. Kad dati ir nolasīti, tie tiek saglabāti ziņojumu stāvoklī.
• Pēc tam tas pārbauda, ​​lai atšķirtu nosūtītos un saņemtos ziņojumus — vai ziņojumā saglabātais lietotāja ID atbilst lietotāja ID, kas ir pieteicies, un pēc tam iestata klases nosaukumu un piemēro atbilstošo stilu ziņa.
• Visbeidzot, tas atveido ziņojumus, a izrakstīties pogu un Sūtīt ziņu komponents. The izrakstīties pogu onClick apdarinātājs zvana auth.signOut() Firebase nodrošinātā metode.

Izveidojiet ziņojuma sūtīšanas komponentu

Izveidojiet jaunu failu, SendMessage.js failu un pievienojiet tālāk norādīto kodu:

imports Reaģēt, { useState } no'reaģēt'
imports { db, autentifikācija } no'../firebase-config'
imports { kolekcija, addDoc, serverTimestamp} no"firebase/firestore";
funkcijuSūtīt ziņu() {
konst [msg, setMsg] = useState('')
konst messagesRef = kolekcija (db, "ziņas");

konst nosūtīt ziņu = asinhrons (e) => {
konst { uid, photoURL } = auth.currentUser

gaidīt addDoc (messagesRef, {
 teksts: ziņa,
 izveidotsAt: serverTimestamp(),
 uid: uid,
 photoURL: photoURL
 })
 setMsg('');
 };
atgriezties (



'Ziņojums...'
 tips="teksts" value={msg} 
 onChange={(e) => setMsg (e.target.value)}
 />
Sūtīt</button>
 </div>
 )
}
eksportētnoklusējuma Sūtīt ziņu

• Līdzīgi kā Chat.js komponentu, importējiet Firestore metodes un inicializētās datu bāzes un autentifikācijas komponentus.
• Lai nosūtītu ziņas, Sūtīt ziņu funkcija īsteno addDoc Firestore metode, kas izveido jaunu dokumentu datu bāzē un saglabā nodotos datus.
• The addDoc Metode izmanto divus parametrus, datu objektu un atsauces objektu, kas norāda, kuru kolekciju vēlaties saglabāt datus. Firestore vākšanas metode nosaka datu glabāšanas kolekciju.
• Visbeidzot, tas tīmekļa lapā atveido ievades lauku un pogu, lai lietotāji varētu iesniegt ziņojumus datu bāzē.

Importējiet komponentus failā App.js

Visbeidzot, jūsu App.js failu, importējiet Ielogoties un Tērzēšana komponentiem, lai tos renderētu savā pārlūkprogrammā.

Tavā App.js failu, izdzēsiet standarta kodu un pievienojiet tālāk norādīto kodu:

imports Tērzēšana no'./components/Chat';
imports Ielogoties no'./components/SignIn';
imports {auth} no'./firebase-config.js'
imports { useAuthState } no"react-firebase-hooks/auth"
funkcijuApp() {
konst [lietotājs] = useAuthState (auth)
atgriezties (
 <>
 {lietotājs? <Tērzēšana />: <Ielogoties />}
 </>
 );
}
eksportētnoklusējuma Lietotne; 

Šis kods atveido Ielogoties un Tērzēšana komponenti nosacīti, pārbaudot lietotāja autentifikācijas statusu. Autentifikācijas statuss tiek destrukturēts no Firebase autentifikācijas komponenta, izmantojot useAuthState āķis no reaģēt-firebase-āķi iepakojums.

Tas pārbauda, ​​vai lietotājs ir autentificēts, un atveido Tērzēšana komponents citādi Ielogoties komponents tiek renderēts. Visbeidzot pievienojiet jebkurus CSS stilus, pagrieziet izstrādes serveri, lai saglabātu izmaiņas, un dodieties uz savu pārlūkprogrammu, lai skatītu galīgos rezultātus.

Firebase bez servera funkcijas

Firebase nodrošina virkni funkciju, ne tikai reāllaika datubāzi un autentifikāciju. Varat izmantot tās bezservera funkcijas, lai ātri palaistu un mērogotu jebkuru lietojumprogrammu. Turklāt Firebase nemanāmi integrējas gan ar tīmekļa, gan mobilajām lietojumprogrammām, ļaujot viegli izveidot starpplatformu lietojumprogrammas.