Hogyan készítsünk csevegőalkalmazást a React és a Firebase segítségével

Gondolkozott már azon, hogyan működik a WhatsApp? Vagy hogyan csatlakoznak a különböző felhasználók és hogyan cserélnek üzeneteket a chaten? Egy egyszerűsített csevegőalkalmazás létrehozása nagyszerű módja lehet a csevegőalkalmazások mögött meghúzódó alapvető funkciók megértésének.

A csevegőalkalmazás felépítése ijesztő feladatnak tűnhet, azonban a Firebase leegyszerűsíti a folyamatot. Lehetővé teszi bármely alkalmazás gyors indítását, így nincs szükség egyéni háttérrendszerre vagy adatbázis-beállításra.

Mi az a Firebase Cloud Database?

A Firebase egy felhőalapú fejlesztői platform, amely számos háttérszolgáltatást kínál, például valós idejű adatbázist, hitelesítést és tárhelyszolgáltatást. Az adatbázis-szolgáltatások középpontjában egy NoSQL felhőalapú adatbázis áll, amely dokumentummodellt használ az adatok valós idejű tárolására.

Állítsa be a Firebase Projectet és a React Client-et

A kezdéshez menjen a következőhöz Firebase és regisztráljon egy fiókot. A felhasználói irányítópulton kattintson a gombra Projekt létrehozása új projekt létrehozásához.

A projekt létrehozása után válassza ki és kattintson a kód ikonra a projekt áttekintő oldalán a jelentkezés regisztrálásához. A Firebase-re való regisztráció lehetővé teszi, hogy hozzáférjen annak erőforrásaihoz, és felhasználja a React webalkalmazását.

Vegye figyelembe a Firebase SDK projektbe való integrálására vonatkozó utasításokat Adja hozzá a Firebase SDK-t.

Következő, hozzon létre egy React alkalmazást és telepítse a Firebase SDK-t az alkalmazásába. Ezenkívül importálja a react-firebase-hook csomag, amely leegyszerűsíti a Firebase In React alkalmazással való munkát.

npm a firebase react-firebase-hooks telepítése

Konfigurálja a Firebase-t a React alkalmazásban

A tiédben src könyvtárba, hozzon létre egy új fájlt, és nevezze el, firebase-config.js. Másolja ki a környezeti változókat a Firebase projekt irányítópultjáról, és illessze be őket ebbe a fájlba.

import { inicializálása App } tól től"firebase/app";
import { getFirestore } tól től"@firebase/firestore";
import { getAuth, GoogleAuthProvider } tól től"firebase/auth";
const firebaseConfig = {
 apiKey: "API_KEY",
 authDomain: "authDomain",
 projektazonosító: "projekt azonosító",
 tárolási vödör: "tároló vödör",
 messagingSenderId: "üzenetküldő azonosítója",
 appId: "Alkalmazásazonosító"
};
const app = inicializálásaApp (firebaseConfig);
const db = getFirestore (alkalmazás);
const auth = getAuth (alkalmazás)
const szolgáltató = új GoogleAuthProvider();
export {db, hitelesítés, szolgáltató}

A Firebase-projekt konfigurációjával inicializálja a Firebase, Firestore és Firebase hitelesítési funkcióit az alkalmazáson belüli használathoz.

Firestore adatbázis beállítása

Ez az adatbázis tárolja a felhasználói adatokat és a chat üzeneteket. Menjen a projekt áttekintő oldalára, és kattintson a gombra Adatbázis létrehozása gombot a Cloud Firestore beállításához.

Határozza meg az adatbázis módot és helyét.

Végül frissítse a Firestore adatbázis-szabályokat, hogy engedélyezze az olvasási és írási műveleteket a React alkalmazásból. Kattintson a Szabályok fület, és módosítsa a Olvass és írj szabály, hogy igaz.

Ha végzett az adatbázis beállításával, létrehozhat egy demógyűjteményt – ez egy NoSQL-adatbázis a Firestore-ban. A gyűjtemények dokumentumokból, mint iratokból állnak.

Új gyűjtemény létrehozásához kattintson a gombra Indítsa el a gyűjtést gombot, és adjon meg egy gyűjteményazonosítót – egy táblanevet.

Integrálja a Firebase felhasználói hitelesítést

A Firebase már készen is használható hitelesítés és engedélyezés könnyen megvalósítható megoldások, például közösségi bejelentkezési szolgáltatók vagy egyéni e-mail-jelszó-szolgáltatók.

A projekt áttekintő oldalán válassza a lehetőséget Hitelesítés a megjelenített termékek listájából. Ezután kattintson a A bejelentkezési mód beállítása gombot a Google szolgáltató konfigurálásához. Válassza ki a Google-t a szolgáltatók listájából, engedélyezze, és töltse ki a projekt támogatási e-mailjét.

Hozzon létre egy bejelentkezési összetevőt

Miután befejezte a szolgáltató konfigurálását a Firebase-en, lépjen a projekt mappájába, és hozzon létre egy új mappát, alkatrészek, ban,-ben /src Könyvtár. Benne alkatrészek mappát, hozzon létre egy új fájlt: SignIn.js.

Ban,-ben SignIn.js fájlt, add hozzá az alábbi kódot:

import Reagál tól től'reagál';
import { SignInWithPopup } tól től"firebase/auth";
import { hitelesítés, szolgáltató } tól től'../firebase-config'

funkcióBejelentkezés() {
const signInWithGoogle = () => {
 bejelentkezés előugró ablakkal (hitelesítés, szolgáltató)
 };
Visszatérés (


Bejelentkezés Google-lel</button>
 </div>
 )
}
exportalapértelmezett Bejelentkezés

• Ez a kód importálja a Firebase konfigurációs fájljában inicializált hitelesítési és Google-szolgáltatói objektumokat.
• Ezután meghatározza a Bejelentkezés funkciót, amely megvalósítja a Bejelentkezés a felugró ablakkal módszer a Firebase-től, amely beveszi a hitelesítés és szolgáltató komponensek, mint paraméterek. Ez a funkció hitelesíti a felhasználókat a Google közösségi bejelentkezési adataikkal.
• Végül egy div-t ad vissza, amely egy gombot tartalmaz, amelyre kattintva meghívja a Bejelentkezés a Google-lal funkció.

Hozzon létre egy csevegési összetevőt

Ez az összetevő ad otthont a Chat alkalmazás fő funkciójának, a csevegőablaknak. Hozzon létre egy új fájlt a alkatrészek mappát, és nevezze el Chat.js.

Adja hozzá az alábbi kódot a Chat.js Fájl:

import React, { useState, useEffect } tól től'reagál'
import { db, hitelesítés } tól től'../firebase-config'
import Üzenet küldése tól től'./Üzenet küldése'
import { collection, query, limit, orderBy, on Snapshot } tól től"firebase/firestore";
funkcióCsevegés() {
const [üzenetek, setMessages] = useState([])
const { userID } = auth.currentUser
 useEffect(() => {
const q = query(
 gyűjtemény (db, "üzenetek"),
 Rendezés("createdAt"),
 határ(50)
 );
const data = onSnapshot (q, (QuerySnapshot) => {
hagyja üzenetek = [];
 QuerySnapshot.forEach((doc) => {
 messages.push({ ...doc.data(), id: doc.id });
 });
 setMessages (üzenetek) 

 });
Visszatérés() => adat; 

 }, []);

Visszatérés (


 auth.signOut()}>Kijelentkezés</button>
 {üzenetek && üzenetek.map((üzenet, azonosító, felhasználói azonosító, fotó URL) =>
 kulcs={id} 
 className={`msg ${userID auth.currentUser.uid? 'küldött': 'kapott'}`}>

{üzenet.szöveg}</p>
 </div>
 )} 

 </div>
 )
}
exportalapértelmezett Csevegés

• Ez a kód importálja az adatbázist, a hitelesítési összetevőket, amelyek inicializáltak a firebase-config.js fájlt és egyéni Firestore metódusokat, amelyek megkönnyítik a tárolt adatok kezelését.
• Megvalósítja a Gyűjtemény, lekérdezés, határ, Rendezés, és onSnapshot Firestore módszerek a Firestore-üzenetek gyűjteményében jelenleg tárolt adatok lekérdezésére és pillanatképének rögzítésére, a létrehozásuk időpontja szerint rendezve, és csak az 50 legutóbbi üzenetet olvassa el.
• A Firestore metódusok becsomagolódnak és futnak a useEffect horog annak biztosítására, hogy az üzenetek azonnal megjelenjenek a küldés gomb minden egyes megnyomásakor, az oldalablak frissítése nélkül. Az adatok beolvasása után az üzenetek állapotában tárolódnak.
• Ezután ellenőrzi, hogy különbséget tegyen az elküldött és a fogadott üzenetek között – ha az üzenetben tárolt felhasználói azonosító egyezik a bejelentkezett felhasználó felhasználói azonosítóját, majd ezt követően beállítja az osztály nevét és a megfelelő stílust alkalmazza az üzenet.
• Végül megjeleníti az üzeneteket, a kijelentkezés gombot, és a Üzenet küldése összetevő. A kijelentkezés gomb kattintásra kezelő felhívja a auth.signOut() Firebase által biztosított módszer.

Hozzon létre egy üzenetküldési összetevőt

Hozzon létre egy új fájlt, SendMessage.js fájlt, és adja hozzá az alábbi kódot:

import React, { useState } tól től'reagál'
import { db, hitelesítés } tól től'../firebase-config'
import { collection, addDoc, serverTimestamp} tól től"firebase/firestore";
funkcióÜzenet küldése() {
const [msg, setMsg] = useState('')
const messagesRef = gyűjtemény (db, "üzenetek");

const küldMsg = async (e) => {
const { uid, photoURL } = auth.currentUser

várja addDoc (messagesRef, {
 szöveg: msg,
 CreatedAt: serverTimestamp(),
 uid: uid,
 photoURL: photoURL
 })
 setMsg('');
 };
Visszatérés (



'Üzenet...'
 típus="szöveg" value={msg} 
 onChange={(e) => setMsg (e.target.value)}
 />
Küldés</button>
 </div>
 )
}
exportalapértelmezett Üzenet küldése

• Hasonló a Chat.js összetevőt, importálja a Firestore metódusokat, valamint az inicializált adatbázis- és hitelesítési összetevőket.
• Üzenetek küldéséhez a Üzenet küldése függvény valósítja meg a addDoc Firestore módszer, amely új dokumentumot hoz létre az adatbázisban, és tárolja az átadott adatokat.
• A addDoc metódus két paramétert vesz fel, az adatobjektumot és egy referenciaobjektumot, amely jelzi, hogy melyik gyűjteményben kívánja tárolni az adatokat. A Firestore gyűjtési módszer az adatok tárolására szolgáló gyűjteményt határozza meg.
• Végül egy beviteli mezőt és egy gombot jelenít meg a weboldalon, amely lehetővé teszi a felhasználók számára, hogy üzeneteket küldjenek el az adatbázisba.

Importálja az összetevőket az App.js fájlba

Végül a tiédben App.js fájlt, importálja a Bejelentkezés és Csevegés összetevők megjelenítéséhez a böngészőben.

A tiédben App.js fájlt, törölje az alapkódot, és adja hozzá az alábbi kódot:

import Csevegés tól től"./components/Chat";
import Bejelentkezés tól től'./components/SignIn';
import { hitelesítés } tól től'./firebase-config.js'
import { useAuthState } tól től"react-firebase-hooks/auth"
funkcióApp() {
const [felhasználó] = useAuthState (auth)
Visszatérés (
 <>
 {felhasználó? <Csevegés />: <Bejelentkezés />}
 </>
 );
}
exportalapértelmezett App; 

Ez a kód a Bejelentkezés és Csevegés feltételesen, a felhasználó hitelesítési állapotának ellenőrzésével. A hitelesítési állapot a Firebase hitelesítési összetevőből a segítségével destrukturálódik useAuthState horog a react-firebase-hook csomag.

Ellenőrzi, hogy a felhasználó hitelesített-e, és megjeleníti a Csevegés komponens egyébként a Bejelentkezés komponens renderelésre kerül. Végül adjon hozzá bármilyen CSS-stílust, pörgesse fel a fejlesztői kiszolgálót a módosítások mentéséhez, majd lépjen a böngészőbe a végső eredmények megtekintéséhez.

Firebase szerver nélküli funkciók

A Firebase a valós idejű adatbázison és a hitelesítésen túlmenően számos szolgáltatást kínál. Szerver nélküli funkcióival bármilyen alkalmazást gyorsan elindíthat és méretezhet. Ezenkívül a Firebase zökkenőmentesen integrálható mind a webes, mind a mobilalkalmazásokkal, így egyszerű a többplatformos alkalmazások létrehozása.