Kuidas luua vestlusrakendust Reacti ja Firebase'iga

Kas olete kunagi mõelnud, kuidas WhatsApp töötab? Või kuidas erinevad kasutajad suhtlevad ja vestlustes sõnumeid vahetavad? Lihtsustatud vestlusrakenduse loomine võib olla suurepärane viis vestlusrakenduste põhifunktsioonide mõistmiseks.

Vestlusrakenduse loomine võib tunduda hirmuäratav ülesanne, kuid Firebase lihtsustab seda protsessi. See võimaldab teil kiiresti käivitada mis tahes rakenduse, eemaldades vajaduse kohandatud taustaprogrammi või andmebaasi seadistuse järele.

Mis on Firebase'i pilvandmebaas

Firebase on pilvepõhine arendusplatvorm, mis pakub mitmesuguseid taustateenuseid, nagu reaalajas andmebaas, autentimine ja hostimine. Selle andmebaasiteenuste keskmes on NoSQL-i pilvandmebaas, mis kasutab andmete reaalajas salvestamiseks dokumendimudelit.

Seadistage Firebase'i projekt ja React Client

Alustamiseks minge aadressile Firebase ja registreerige konto. Klõpsake kasutaja armatuurlaual Loo projekt uue projekti loomiseks.

Pärast projekti loomist valige oma taotluse registreerimiseks projekti ülevaatelehel koodiikoon ja klõpsake seda. Firebase'is registreerumine võimaldab teil pääseda juurde ja kasutada selle ressursse oma Reacti veebirakenduse loomiseks.

Võtke teadmiseks juhised Firebase'i SDK oma projekti integreerimiseks jaotises Lisage Firebase'i SDK.

Järgmiseks looge rakendus React ja installige oma rakendusse Firebase'i SDK. Lisaks importige reageerida-firebase-konksud pakett, mis lihtsustab Firebase In Reactiga töötamist.

npm installida firebase react-firebase-hooks

Seadistage Firebase oma Reacti rakenduses

Sinu src kataloogi, looge uus fail ja pange sellele nimi, firebase-config.js. Kopeerige keskkonnamuutujad oma Firebase'i projekti juhtpaneelilt ja kleepige need sellesse faili.

importida { InitsialiseeriApp } alates"firebase/app";
importida { getFirestore } alates'@firebase/firestore';
importida { getAuth, GoogleAuthProvider } alates"firebase/auth";
konst firebaseConfig = {
 apiKey: "API_KEY",
 authDomain: "authDomain",
 projekti ID: "projekti ID",
 ladustamisämber: "salvestusämber",
 messagingSenderId: "sõnumi saatja ID",
 appId: "Rakenduse ID"
};
konst rakendus = InitsialiseeriApp (firebaseConfig);
konst db = getFirestore (rakendus);
konst auth = getAuth (rakendus)
konst pakkuja = uus GoogleAuthProvider();
eksportida {db, auth, pakkuja}

Firebase'i projekti konfiguratsiooni kasutades lähtestate Firebase'i, Firestore'i ja Firebase'i autentimisfunktsioonid oma rakenduses kasutamiseks.

Seadistage Firestore'i andmebaas

See andmebaas salvestab kasutajaandmeid ja vestlussõnumeid. Minge oma projekti ülevaate lehele ja klõpsake nuppu Loo andmebaas nuppu Cloud Firestore'i seadistamiseks.

Määrake andmebaasi režiim ja asukoht.

Lõpuks värskendage Firestore'i andmebaasi reegleid, et lubada lugemis- ja kirjutamistoiminguid rakendusest React. Klõpsake nuppu Reeglid vahekaarti ja muutke Loe ja kirjuta valitsema tõsi.

Kui olete andmebaasi seadistamise lõpetanud, saate luua demokogu – see on Firestore'i NoSQL-i andmebaas. Kogud koosnevad dokumentidest kui arhivaalidest.

Uue kollektsiooni loomiseks klõpsake nuppu Alusta kogumist nuppu ja sisestage kogu ID – tabeli nimi.

Integreerige Firebase'i kasutaja autentimine

Firebase pakub kastist välja autentimine ja autoriseerimine lahendusi, mida on lihtne rakendada, näiteks sotsiaalse sisselogimise pakkujad või kohandatud meiliparooli pakkuja.

Valige oma projekti ülevaatelehel Autentimine kuvatavate toodete loendist. Järgmisena klõpsake nuppu Sisselogimismeetodi seadistamine nuppu Google'i teenusepakkuja konfigureerimiseks. Valige pakkujate loendist Google, lubage see ja täitke projekti tugimeil.

Looge sisselogimiskomponent

Kui olete Firebase'is teenusepakkuja konfigureerimise lõpetanud, minge oma projektikausta ja looge uus kaust, komponendid, jaotises /src kataloog. Sees komponendid kausta, looge uus fail: SignIn.js.

Aastal SignIn.js faili, lisage allolev kood:

importida Reageerige alates'reageeri';
importida { loginInWithPopup } alates"firebase/auth";
importida { auth, pakkuja } alates'../firebase-config'

funktsiooniLogi sisse() {
konst loginInWithGoogle = () => {
 sisselogimine hüpikuga (auth, pakkuja)
 };
tagasi (


Logige Google'iga sisse</button>
 </div>
 )
}
eksportidavaikimisi Logi sisse

• See kood impordib Firebase'i konfiguratsioonifailis lähtestatud autentimis- ja Google'i pakkuja objektid.
• Seejärel määratleb see a Logi sisse funktsioon, mis rakendab sisselogimine hüpikuga Firebase'i meetod, mis võtab kasutusele autentimine ja pakkuja komponendid parameetritena. See funktsioon autentib kasutajad nende Google'i sotsiaalsete sisselogimiste abil.
• Lõpuks tagastab see div, mis sisaldab nuppu, millele klõpsamisel helistatakse logige Google'iga sisse funktsiooni.

Looge vestluskomponent

See komponent sisaldab teie vestlusrakenduse põhifunktsiooni, vestlusaken. Looge sees uus fail komponendid kaust ja andke sellele nimi Chat.js.

Lisage allolev kood jaotisesse Chat.js Fail:

importida Reageerida, { useState, useEffect } alates'reageeri'
importida { db, autentimine } alates'../firebase-config'
importida Saada sõnum alates'./Saada sõnum'
importida { collection, query, limit, orderBy, on Snapshot } alates"firebase/firestore";
funktsiooniVestlus() {
konst [messages, setMessages] = useState([])
konst { kasutaja ID } = auth.currentUser
 useEffect(() => {
konst q = query(
 kogu (db, "sõnumid"),
 orderBy("createdAt"),
 limit (50)
 );
konst andmed = onSnapshot (q, (QuerySnapshot) => {
lase sõnumid = [];
 QuerySnapshot.forEach((dok) => {
 messages.push({ ...doc.data(), id: doc.id });
 });
 setMessages (sõnumid) 

 });
tagasi() => andmed; 

 }, []);

tagasi (


 auth.signOut()}>Logi välja</button>
 {messages && messages.map((sõnum, ID, uid, foto URL) =>
 võti={id} 
 className={`msg ${userID auth.currentUser.uid? 'saadetud': 'saanud'}`}>

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

 </div>
 )
}
eksportidavaikimisi Vestlus

• See kood impordib andmebaasi, lähtestatud autentimiskomponendid firebase-config.js fail ja Firestore'i kohandatud meetodid, mis muudavad salvestatud andmetega manipuleerimise lihtsaks.
• See rakendab kogumine, päring, piiri, tellidaja on Snapshot Firestore'i meetodid praegu Firestore'i sõnumite kogusse salvestatud andmete päringute tegemiseks ja hetkepildi jäädvustamiseks, mis on järjestatud nende loomise aja järgi ja loeb ainult 50 viimast sõnumit.
• Firestore'i meetodid pakitakse ja käivitatakse a useEffect konks tagamaks, et sõnumid renderdatakse kohe, iga kord, kui vajutate saatmisnuppu, ilma lehe akent värskendamata. Kui andmed on loetud, salvestatakse need sõnumite olekusse.
• Seejärel kontrollib see, kas eristada saadetud ja vastuvõetud sõnumeid – kas sõnumiga salvestatud kasutaja ID ühtib sisselogitud kasutaja kasutajatunnus ja seejärel määrab klassi nime ja rakendab selle jaoks sobivat stiili sõnum.
• Lõpuks renderdab see sõnumeid, a Logi välja nuppu ja Saada sõnum komponent. The Logi välja nuppu onClick töötleja helistab auth.signOut() Firebase'i pakutav meetod.

Looge sõnumi saatmise komponent

Looge uus fail, SendMessage.js faili ja lisage allolev kood:

importida Reageerige, { useState } alates'reageeri'
importida { db, autentimine } alates'../firebase-config'
importida { collection, addDoc, serverTimestamp} alates"firebase/firestore";
funktsiooniSaada sõnum() {
konst [msg, setMsg] = useState('')
konst messagesRef = kogumine (db, "sõnumid");

konst saadaMsg = asünkr (e) => {
konst { uid, photoURL } = auth.currentUser

ootama addDoc (messagesRef, {
 tekst: sõnum,
 CreatedAt: serverTimestamp(),
 uid: uid,
 photoURL: photoURL
 })
 setMsg('');
 };
tagasi (



"Sõnum..."
 tüüp="tekst" väärtus={msg} 
 onChange={(e) => setMsg (e.target.value)}
 />
Saada </button>
 </div>
 )
}
eksportidavaikimisi Saada sõnum

• Sarnased Chat.js importige Firestore'i meetodid ning lähtestatud andmebaas ja autentimiskomponendid.
• Sõnumite saatmiseks Saada sõnum funktsioon rakendab addDoc Firestore meetod, mis loob andmebaasi uue dokumendi ja salvestab edastatud andmed.
• The addDoc meetod võtab kaks parameetrit, andmeobjekti ja võrdlusobjekti, mis näitab, millisesse kogusse soovite andmeid salvestada. Firestore'i kogumismeetod määrab andmete salvestamise kogu.
• Lõpuks renderdab see veebilehel sisestusvälja ja nupu, mis võimaldab kasutajatel andmebaasi sõnumeid saata.

Importige komponendid faili App.js

Lõpuks teie App.js fail, importige Logi sisse ja Vestlus komponendid nende brauseris renderdamiseks.

Sinu App.js faili, kustutage standardkood ja lisage allolev kood:

importida Vestlus alates'./components/Chat';
importida Logi sisse alates'./components/SignIn';
importida { aut } alates'./firebase-config.js'
importida { useAuthState } alates'react-firebase-hooks/auth'
funktsiooniRakendus() {
konst [kasutaja] = useAuthState (auth)
tagasi (
 <>
 {kasutaja? <Vestlus />: <Logi sisse />}
 </>
 );
}
eksportidavaikimisi Rakendus; 

See kood muudab Logi sisse ja Vestlus komponendid tingimuslikult, kontrollides kasutaja autentimise olekut. Autentimise olek destruktureeritakse Firebase'i autentimiskomponendist abiga useAuthState konks reageerida-firebase-konksud pakett.

See kontrollib, kas kasutaja on autentitud, ja renderdab Vestlus komponent muidu Logi sisse komponent renderdatakse. Lõpuks lisage kõik CSS-stiilid, käivitage muudatuste salvestamiseks arendusserver ja minge oma brauserisse, et vaadata lõpptulemusi.

Firebase'i serverita funktsioonid

Firebase pakub palju funktsioone peale reaalajas andmebaasi ja autentimise. Saate kasutada selle serverita funktsioone mis tahes rakenduse kiireks alglaadimiseks ja skaleerimiseks. Lisaks integreerub Firebase sujuvalt nii veebi- kui ka mobiilirakendustega, muutes platvormideüleste rakenduste loomise lihtsaks.