Jak vytvořit chatovací aplikaci pomocí React a Firebase

Přemýšleli jste někdy, jak funguje WhatsApp nebo jakákoli jiná aplikace pro zasílání zpráv? Nebo jak mohou různí uživatelé bezproblémově komunikovat a vyměňovat si zprávy a fotografie v konverzacích? 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 celý proces zjednodušuje. Umožňuje vám rychle spouštět jakoukoli aplikaci, čímž eliminuje potřebu vyhrazeného backendu nebo instalace databáze. Podívejte se na nejlepší soukromé a šifrované chatovací aplikace pro uživatele Linuxu.

Co je Firebase Cloud Database?

Firebase je cloudová vývojová platforma, která poskytuje back-endové služby (BaaS), jako je databáze v reálném čase, ověřování a hosting (SDK), které se používají k dosažení kompatibility mezi systémy.

Jedná se o platformu, jejímž cílem je poskytnout komplexní přístup k vytváření, zlepšování a vývoji webových stránek a mobilních aplikací prostřednictvím mnoha nástrojů, které každý vývojář potřebuje k poskytování služeb, jejichž ruční tvorba zabere spoustu času a úsilí, zejména pro ty, kteří ne mít dostatek zkušeností.

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.

Konfigurace projektu Firebase a klient React

Poznámka: Můžete se podívat na kód pro chatovací aplikaci, která je k dispozici v úložišti GitHub a je zdarma k použití pod licencí MIT. Před spuštěním aplikace se ujistěte, že je Firebase nakonfigurována.

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

Po vytvoření projektu vyberte ikonu vývoj webu na stránce Přehled projektu a kliknutím zaregistrujte svůj požadavek. Registrací u Firebase získáte přístup ke zdrojům a můžete je použít k vytvoření vlastní webové aplikace React.

Všimněte si pokynů pro integraci sady Firebase SDK do vašeho projektu níže Doplněk Firebase SDK.

Dále vytvořte aplikaci React a nainstalujte do aplikace Firebase SDK. Navíc importujte balíček React-firebase-hooks, který zjednodušuje práci s Firebase v Reactu.

npm install firebase reagovat-firebase-hooks

Nakonfigurujte Firebase ve své aplikaci React

Ve své vlastní složce src 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“; const firebaseConfig = { apiKey: „API_KEY“, authDomain: „authDomain“, projectId: „ID projektu“, storageBucket: „storage Bucket“, messagingSenderId: „ID odesílatele zpráv“, appId: „ID aplikace“ }; const app = initializeApp(firebaseConfig); const db = getFirestore(app); const auth = getAuth(app) const provider = new GoogleAuthProvider(); export {db, auth, provider}

Konfigurace projektu Firebase vám umožňuje nakonfigurovat funkce ověřování Firebase, Firestore a Firebase pro použití ve vaší aplikaci.

Nastavte databázi Firestore

Cloud Firestore je flexibilní a škálovatelná databáze pro vývoj mobilních, webových a serverových aplikací od Firebase a Google Cloud. Stejně jako Firebase Realtime Database synchronizuje vaše data mezi klientskými aplikacemi prostřednictvím posluchačů v reálném čase a poskytuje offline telefonickou a internetovou podporu, takže můžete vytvářet citlivé aplikace, které fungují bez ohledu na latenci sítě nebo připojení k internetu. Cloud Firestore také nabízí bezproblémovou integraci s dalšími produkty Firebase a Google Cloud, včetně cloudových funkcí.

V této databázi jsou uložena uživatelská data a chatové zprávy. Přejděte na stránku s přehledem projektu a klikněte na tlačítko Vytvořte databázi Chcete-li nastavit Cloud Firestore.

Určete styl a umístění databáze.

Nakonec aktualizujte databázová pravidla Firestore, abyste umožnili čtení a zápis z aplikace React. Klepněte na kartu Pravidla a změňte pravidlo čtení a zápisu na hodnotu True.

Po nastavení databáze můžete vytvořit testovací cluster – NoSQL databázi ve Firestore. Sbírky tvoří dokumenty jako záznamy.

Kliknutím na tlačítko vytvoříte novou skupinu startovní skupina a zadejte ID skupiny — název tabulky.

Integrace ověřování uživatelů Firebase

Firebase nabízí předpřipravená řešení pro ověřování a autorizaci, jako jsou poskytovatelé sociálního přihlášení nebo vlastní poskytovatel e-mailových hesel.

Vyberte na stránce přehledu projektu autentizace Seznam nabízených produktů. Poté klikněte na tlačítko Nastavte způsob přihlášení Chcete-li nakonfigurovat poskytovatele Google. Lokalizovat Google Povolte jej v seznamu poskytovatelů a vyplňte email podpory projektu.

Vytvořte přihlašovací komponentu

Po konfiguraci poskytovatele na Firebase přejděte do složky projektu a vytvořte novou složku a pojmenujte ji komponenty v návodu /src. Ve složce Components vytvořte nový soubor: SignIn.js.

Do souboru SignIn.js přidejte níže uvedený kód:

import Reagovat z ‚reagovat‘; import { signInWithPopup } z „firebase/auth“; import { auth, provider } z ‚../firebase-config‘ function SignIn() { const signInWithGoogle = () => { signInWithPopup(auth, provider)}; vrátit se (

) } exportovat přihlášení ve výchozím nastavení

1. Tento kód importuje objekty ověřování a poskytovatele Google, které jste nakonfigurovali v konfiguračním souboru Firebase.
2. Poté definujete přihlašovací funkci, která implementuje metodu SignInWithPopup Firebase, která jako parametry používá komponenty ověřování a poskytovatele. Tato funkce ověřuje uživatele pomocí jejich sociálních přihlašovacích údajů Google.
3. Nakonec vrátí div s tlačítkem, které po kliknutí zavolá funkci Zaregistrujte se pomocí Google.

Vytvořte blok chatu

Tato část obsahuje nejdůležitější funkci chatovací aplikace, kterou vytváříte, což je okno chatu. Vytvořte nový soubor ve složce Components a pojmenujte jej Chat.js.

Přidejte níže uvedený kód do souboru Chat.js:

import React, { useState, useEffect } from ‚react‘ import { db, auth } from ‚../firebase-config‘ import SendMessage from ‚./SendMessage‘ import { collection, query, limit, orderBy, onSnapshot } from “firebase /bezpečný“; function Chat() { konst [messages, setMessages] = useStatus([]) const { ID uživatele } = auth.currentUser useEffect(() => { const q = query( collection(db, “messages”), orderBy(”createdAt”), limit(50) ); const data = onSnapshot(q, (QuerySnapshot) => { zanechat zprávy = []; QuerySnapshot.forEach((doc) => { messages.push({ …doc.data(), id: doc.id }); }); setMessages(messages)}); return() => data; }, []); vrátit se (

) } exportovat standardní chat

1. Tento kód importuje databázi, autentizační komponenty nakonfigurované v souboru firebase-config.js a vlastní metody Firestore, které usnadňují manipulaci s uloženými daty.
2. Implementujete metody sbírka A dotázat se A omezit A seřadit podle Navíc na snímku Z Firestore k dotazování a zachycení dat aktuálně uložených v kolekci zpráv Firestore, seřazených podle času vytvoření a čtení pouze 50 nejnovějších zpráv.
3. Metody Firestore jsou zapouzdřené a běží uvnitř háku useEffect Chcete-li zajistit, že se zprávy zobrazí okamžitě, pokaždé, když stisknete tlačítko Odeslat, bez obnovování okna stránky. Jakmile jsou data přečtena, budou uložena ve stavu zprávy.
4. Dále ověřte, zda se ID uživatele uložené se zprávou shoduje s ID přihlášeného uživatele a poté nastavte název třídy a aplikujte na zprávu příslušný styl.
5. Nakonec se zobrazí Zprávy, tlačítko Odhlásit a Nakonfigurováno Chcete-li odeslat zprávu. volací tlačítko Odhlásit se s terapeutem při kliknutí pryč auth.signOut() poskytuje Firebase.

Vytvořte komponentu pro odesílání zpráv

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

import React, { useState } z ‚react‘ import { db, auth } z ‚../firebase-config‘ import { collection, addDoc, serverTimestamp} z “firebase/firestore”; function SendMessage() { const [msg, setMsg] = useState(“) ​​​​​​const messagesRef = collection(db, „messages“); const sendMsg = async (e) => { const { uid, photoURL } = auth.currentUser čeká na addDoc(messagesRef, { text: msg, createdAt: serverTimestamp(), uid: uid, photoURL: photoURL }) setMsg(“ ); }; vrátit se (

) } exportovat SendMessage ve výchozím nastavení

1. Stejně jako u komponenty Chat.js importujte metody Firestore, nakonfigurovanou databázi a komponenty ověřování.
2. Provede se funkce pro odesílání zpráv Chcete-li odeslat zprávu pryč přidatDoc Firestore, který vytvoří nový dokument v databázi a uloží předaná data.
3. vzít metodu přidatDoc Dva parametry, datový objekt a referenční objekt, které označují, do které kolekce chcete data uložit. Jak Firestore shromažďuje, definuje skupinu pro ukládání dat.
4. Nakonec webová stránka zobrazí vstupní pole a tlačítko, které uživatelům umožňuje odesílat zprávy do databáze.

Importujte komponenty do souboru App.js

Nakonec do souboru App.js naimportujte komponenty přihlášení a chatu, které se zobrazí ve vašem prohlížeči.

V souboru App.js odeberte výchozí kód a přidejte kód níže:

import chatu z ‚./components/Chat‘; importovat přihlášení z ‚./components/SignIn‘; import { auth } z ‚./firebase-config.js‘ import { useAuthState } z ‚react-firebase-hooks/auth‘ function App() { const [user] = useAuthState(auth) return ( <> { user ? : } ); } exportovat výchozí aplikaci;

Tento kód podmíněně odhaluje komponenty přihlášení a chatu tím, že zkontroluje stav ověření uživatele. Stav autentizace je zničen autentizační komponentou Firebase pomocí háčku useAuthState z balíčku respond-firebase-hooks.

Což zkontroluje, zda je uživatel autentizován a vrátí komponentu chatu, jinak se zobrazí komponenta přihlášení. Nakonec přidejte jakékoli styly CSS, spusťte vývojový server, aby se změny uložily, a přejděte do prohlížeče, abyste viděli konečné výsledky. Přečtěte si, jak vytvořit přehrávač videa v Reactu.

Úlohy Firebase bez serveru

Firebase nabízí řadu funkcí nad rámec ověřování a databáze v reálném čase. Funkcionalitu bez serveru můžete použít k rychlému spuštění 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. Nyní můžete vidět, jak vytvořit objekty přetažením v Reactu.