Jak vytvořit chatovací aplikaci s React a Firebase

Přemýšleli jste někdy, jak WhatsApp funguje? Nebo jak se různí uživatelé spojují a vyměňují si zprávy v chatech? Vytvoření zjednodušené chatovací aplikace může být skvělý způsob, jak pochopit základní funkce chatovacích aplikací.

Vytvoření chatovací aplikace se může zdát jako skličující úkol, ale Firebase tento proces zjednodušuje. Umožňuje vám rychle zavést libovolnou aplikaci, čímž eliminuje potřebu vlastního backendu nebo nastavení databáze.

Co je cloudová databáze Firebase

Firebase je cloudová vývojová platforma, která nabízí řadu backendových služeb, jako je databáze v reálném čase, ověřování a hosting. Jádrem jeho databázových služeb je cloudová databáze NoSQL, která využívá model dokumentu k ukládání dat v reálném čase.

Nastavte projekt Firebase a klienta React

Chcete-li začít, přejděte na Firebase a zaregistrujte si účet. Na uživatelském panelu klikněte na Vytvořit projekt založit nový projekt.

Po vytvoření projektu vyberte a klikněte na ikonu kódu na stránce přehledu projektu a zaregistrujte svou aplikaci. Registrace u Firebase vám umožní přístup a využití jejích zdrojů k vytvoření vaší webové aplikace React.

Všimněte si pokynů pro integraci sady SDK Firebase do vašeho projektu Přidejte Firebase SDK.

Další, vytvořit aplikaci React a nainstalujte do aplikace Firebase SDK. Kromě toho importujte reagovat-firebase-háky balíček, který zjednodušuje práci s Firebase In React.

npm install firebase reagovat-firebase-hooks

Nakonfigurujte Firebase ve své aplikaci React

Ve vašem src adresář, vytvořte nový soubor a pojmenujte jej, firebase-config.js. Zkopírujte proměnné prostředí z řídicího panelu projektu Firebase a vložte je do tohoto souboru.

import { initializeApp } z"firebase/app";
import { getFirestore } z'@firebase/firestore';
import { getAuth, GoogleAuthProvider } z"firebase/auth";
konst firebaseConfig = {
 apiKey: "API_KEY",
 authDomain: "authDomain",
 ID projektu: "ID projektu",
 úložný kbelík: "úložný kbelík",
 messagingSenderId: "ID odesílatele zasílání zpráv",
 appId: "ID aplikace"
};
konst app = initializeApp (firebaseConfig);
konst db = getFirestore (aplikace);
konst auth = getAuth (aplikace)
konst poskytovatel = Nový GoogleAuthProvider();
vývozní {db, auth, provider}

Pomocí konfigurace projektu Firebase inicializujete funkce ověřování Firebase, Firestore a Firebase pro použití ve vaší aplikaci.

Nastavte databázi Firestore

Tato databáze bude ukládat uživatelská data a chatové zprávy. Přejděte na stránku s přehledem projektu a klikněte na Vytvořit databázi tlačítko pro nastavení vašeho Cloud Firestore.

Definujte režim a umístění databáze.

Nakonec aktualizujte databázová pravidla Firestore, aby umožňovala operace čtení a zápisu z aplikace React. Klikněte na Pravidla kartu a změnit číst a psát vládnout skutečný.

Jakmile dokončíte nastavení databáze, můžete vytvořit demo kolekci — jedná se o NoSQL databázi ve Firestore. Sbírky jsou tvořeny dokumenty jako záznamy.

Chcete-li vytvořit novou kolekci, klikněte na Zahájit sběr a zadejte ID kolekce – název tabulky.

Integrujte ověření uživatele Firebase

Firebase poskytuje hned po vybalení autentizace a autorizace řešení, která lze snadno implementovat, jako jsou poskytovatelé sociálních přihlášení nebo vlastní poskytovatel e-mailových hesel.

Na stránce přehledu vašeho projektu vyberte Autentizace ze seznamu zobrazených produktů. Dále klikněte na Nastavení způsobu přihlášení tlačítko pro konfiguraci poskytovatele Google. Vyberte Google ze seznamu poskytovatelů, povolte jej a vyplňte e-mail podpory projektu.

Vytvořte komponentu přihlášení

Po dokončení konfigurace poskytovatele na Firebase přejděte do složky projektu a vytvořte novou složku, komponenty, v /src adresář. Uvnitř komponenty složku, vytvořte nový soubor: SignIn.js.

V SignIn.js soubor, přidejte kód níže:

import Reagovat z'reagovat';
import { signInWithPopup } z"firebase/auth";
import { auth, provider } z'../firebase-config'

funkcePřihlásit se() {
konst signInWithGoogle = () => {
 signInWithPopup (auth, poskytovatel)
 };
vrátit se (


Přihlásit se pomocí Google</button>
 </div>
 )
}
vývoznívýchozí Přihlásit se

• Tento kód importuje objekty ověření a poskytovatele Google, které jste inicializovali v konfiguračním souboru Firebase.
• Poté definuje a Přihlásit se funkce, která implementuje přihlášeníWithPopup metoda z Firebase, která přebírá autentizace a poskytovatel komponenty jako parametry. Tato funkce ověří uživatele pomocí jejich sociálních přihlašovacích údajů Google.
• Nakonec vrátí div obsahující tlačítko, které po kliknutí zavolá přihlášeníWithGoogle funkce.

Vytvořte komponentu chatu

Tato komponenta bude obsahovat hlavní funkci vaší aplikace Chat, okno chatu. Vytvořte nový soubor uvnitř komponenty složku a pojmenujte ji Chat.js.

Přidejte kód níže do Chat.js Soubor:

import Reagovat, { useState, useEffect } z'reagovat'
import { db, auth } z'../firebase-config'
import Poslat zprávu z'./Poslat zprávu'
import { kolekce, dotaz, limit, orderBy, onSnapshot } z"firebase/firestore";
funkcePovídat si() {
konst [messages, setMessages] = useState([])
konst { userID } = auth.currentUser
 useEffect(() => {
konst q = dotaz(
 sbírka (db, "zprávy"),
 seřadit podle("vytvořeno"),
 omezit(50)
 );
konst data = onSnapshot (q, (QuerySnapshot) => {
nechat zprávy = [];
 QuerySnapshot.forEach((doc) => {
 messages.push({ ...doc.data(), id: doc.id });
 });
 setMessages (zprávy) 

 });
vrátit se() => data; 

 }, []);

vrátit se (


 auth.signOut()}>Odhlásit se</button>
 {messages && messages.map((zpráva, id, uid, photoURL) =>
 key={id} 
 className={`msg ${userID auth.currentUser.uid? 'odesláno': 'přijato'}`}>

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

 </div>
 )
}
vývoznívýchozí Povídat si

• Tento kód importuje databázi, autentizační komponenty inicializované v firebase-config.js soubor a vlastní metody Firestore, které usnadňují manipulaci s uloženými daty.
• Implementuje sbírka, dotaz, omezit, seřadit podle, a onSnapshot Metody Firestore pro dotazování a zachycení snímku aktuálně uložených dat v kolekci zpráv Firestore, seřazené podle času, kdy byly vytvořeny, a čte pouze 50 nejnovějších zpráv.
• Metody Firestore jsou zabaleny a spuštěny uvnitř a useEffect háček, abyste zajistili, že se zprávy vykreslí okamžitě, pokaždé, když stisknete tlačítko Odeslat, bez obnovování okna stránky. Jakmile jsou data přečtena, jsou uložena ve stavu zpráv.
• Poté zkontroluje, zda rozlišuje mezi odeslanými a přijatými zprávami – zda ​​se shoduje uživatelské ID uložené se zprávou ID uživatele pro přihlášeného uživatele a poté nastaví název třídy a použije vhodný styl pro třídu zpráva.
• Nakonec vykresluje zprávy, a odhlásit se tlačítko a Poslat zprávu komponent. The odhlásit se knoflík při kliknutí psovod volá auth.signOut() metoda poskytovaná Firebase.

Vytvořte komponentu Odeslat zprávu

Vytvořte nový soubor, SendMessage.js soubor a přidejte kód níže:

import Reagovat, { useState } z'reagovat'
import { db, auth } z'../firebase-config'
import { collection, addDoc, serverTimestamp} z"firebase/firestore";
funkcePoslat zprávu() {
konst [msg, setMsg] = useState('')
konst messagesRef = kolekce (db, "zprávy");

konst poslatMsg = asynchronní (e) => {
konst { uid, photoURL } = auth.currentUser

čekat addDoc (messagesRef, {
 text: msg,
 createdAt: serverTimestamp(),
 uid: uid,
 photoURL: photoURL
 })
 setMsg('');
 };
vrátit se (



'Zpráva...'
 typ="text" value={msg} 
 onChange={(e) => setMsg (e.target.value)}
 />
Odeslat</button>
 </div>
 )
}
vývoznívýchozí Poslat zprávu

• Podobné jako Chat.js importujte metody Firestore a inicializovanou databázi a autentizační komponenty.
• Chcete-li odesílat zprávy, Poslat zprávu funkce implementuje přidatDoc Firestore metoda, která vytvoří nový dokument v databázi a uloží předaná data.
• The přidatDoc Metoda zahrnuje dva parametry, datový objekt a referenční objekt, který označuje, kterou kolekci chcete uložit data. Metoda kolekce Firestore určuje kolekci pro ukládání dat.
• Nakonec vykreslí vstupní pole a tlačítko na webové stránce, které uživatelům umožní odesílat zprávy do databáze.

Importujte komponenty do souboru App.js

Konečně ve vašem App.js soubor, importujte soubor Přihlásit se a Povídat si komponenty k jejich vykreslení ve vašem prohlížeči.

Ve vašem App.js soubor, odstraňte standardní kód a přidejte kód níže:

import Povídat si z'./components/Chat';
import Přihlásit se z'./components/SignIn';
import { auth } z'./firebase-config.js'
import { useAuthState } z'react-firebase-hooks/auth'
funkceAplikace() {
konst [uživatel] = useAuthState (auth)
vrátit se (
 <>
 {uživatel? <Povídat si />: <Přihlásit se />}
 </>
 );
}
vývoznívýchozí Aplikace; 

Tento kód vykresluje Přihlásit se a Povídat si komponenty podmíněně kontrolou stavu autentizace uživatele. Stav autentizace je destruován z autentizační komponenty Firebase pomocí použijteAuthState háček z reagovat-firebase-háky balík.

Zkontroluje, zda je uživatel ověřen, a vykreslí Povídat si součást jinak Přihlásit se komponenta je vykreslena. Nakonec přidejte libovolné styly CSS, roztočte vývojový server, aby se změny uložily, a přejděte do prohlížeče, kde si můžete prohlédnout konečné výsledky.

Bezserverové funkce Firebase

Firebase poskytuje řadu funkcí nad rámec databáze v reálném čase a ověřování. Jeho funkce bez serveru můžete využít k rychlému zavedení a škálování jakékoli aplikace. Firebase se navíc hladce integruje s webovými i mobilními aplikacemi, což usnadňuje vytváření aplikací pro různé platformy.