Kako napraviti aplikaciju za chat s Reactom i Firebaseom

Jeste li se ikada zapitali kako funkcionira WhatsApp? Ili kako se različiti korisnici povezuju i razmjenjuju poruke u chatovima? Stvaranje pojednostavljene aplikacije za chat može biti izvrstan način da shvatite temeljne funkcije iza aplikacija za chat.

Izrada aplikacije za chat može izgledati kao zastrašujući zadatak, međutim Firebase pojednostavljuje proces. Omogućuje vam brzo pokretanje bilo koje aplikacije, uklanjajući potrebu za prilagođenom pozadinom ili postavljanjem baze podataka.

Što je Firebase Cloud Database

Firebase je razvojna platforma temeljena na oblaku koja nudi niz pozadinskih usluga kao što su baza podataka u stvarnom vremenu, autentifikacija i hosting. U središtu njegovih usluga baze podataka je NoSQL baza podataka u oblaku koja koristi model dokumenta za pohranu podataka u stvarnom vremenu.

Postavite Firebase projekt i React Client

Za početak idite na Firebase i prijavite se za račun. Na korisničkoj nadzornoj ploči kliknite Stvori projekt za postavljanje novog projekta.

Nakon što izradite svoj projekt, odaberite i kliknite na ikonu koda na stranici pregleda projekta kako biste registrirali svoju aplikaciju. Registriranje na Firebase omogućuje vam pristup i korištenje njegovih resursa za izradu vaše web aplikacije React.

Obratite pažnju na upute za integraciju Firebaseovog SDK-a u svoj projekt ispod Dodajte Firebase SDK.

Sljedeći, izraditi React aplikaciju i instalirajte Firebase SDK u svoju aplikaciju. Osim toga, uvezite kuke-react-firebase paket koji pojednostavljuje rad s Firebase In React.

npm instalirajte firebase react-firebase-hooks

Konfigurirajte Firebase u svojoj React aplikaciji

U vašem src imenik, stvorite novu datoteku i dajte joj naziv, firebase-config.js. Kopirajte varijable okoline s nadzorne ploče projekta Firebase i zalijepite ih u ovu datoteku.

uvoz {inicijalizirajApp} iz"firebase/aplikacija";
uvoz {getFirestore} iz'@firebase/firestore';
uvoz {getAuth, GoogleAuthProvider} iz"firebase/auth";
konst firebaseConfig = {
 apiKey: "API_KEY",
 authDomain: "authDomain",
 ID projekta: "ID projekta",
 spremnik za pohranu: "kanta za pohranu",
 messagingSenderId: "ID pošiljatelja poruka",
 appId: "ID aplikacije"
};
konst app = initializeApp (firebaseConfig);
konst db = getFirestore (aplikacija);
konst auth = getAuth (aplikacija)
konst davatelj = novi GoogleAuthProvider();
izvoz {db, auth, provider}

Pomoću konfiguracije Firebase projekta inicijalizirate Firebase, Firestore i Firebaseove funkcije provjere autentičnosti za upotrebu unutar vaše aplikacije.

Postavite Firestore bazu podataka

Ova baza podataka će pohranjivati ​​korisničke podatke i chat poruke. Prijeđite na stranicu s pregledom projekta i kliknite na Stvorite bazu podataka gumb za postavljanje vašeg Cloud Firestorea.

Definirajte način i lokaciju baze podataka.

Na kraju, ažurirajte pravila baze podataka Firestore kako biste omogućili operacije čitanja i pisanja iz aplikacije React. Klikni na Pravila karticu i promijenite čitati i pisati pravilo da pravi.

Nakon što završite s postavljanjem baze podataka, možete stvoriti demo kolekciju — ovo je NoSQL baza podataka u Firestoreu. Zbirke se sastoje od dokumenata kao zapisa.

Za izradu nove kolekcije kliknite na Započni prikupljanje i navedite ID zbirke — naziv tablice.

Integrirajte autentifikaciju Firebase korisnika

Firebase pruža izvan okvira autentifikacija i autorizacija rješenja koja je lako implementirati, kao što su pružatelji usluga prijave putem društvenih mreža ili prilagođeni pružatelji usluga e-pošte i lozinke.

Na stranici pregleda vašeg projekta odaberite Ovjera s popisa prikazanih proizvoda. Zatim kliknite na Postavite način prijave gumb za konfiguriranje Google davatelja usluga. Odaberite Google s popisa pružatelja usluga, omogućite ga i ispunite e-poruku podrške projektu.

Stvorite komponentu za prijavu

Nakon što završite s konfiguriranjem pružatelja usluga na Firebaseu, prijeđite na mapu svog projekta i izradite novu mapu, komponente, u /src imenik. Unutar komponente mapu, stvorite novu datoteku: SignIn.js.

u SignIn.js datoteku, dodajte kod ispod:

uvoz Reagirati iz'reagirati';
uvoz {signInWithPopup} iz"firebase/auth";
uvoz { auth, provider } iz'../firebase-config'

funkcijaPrijaviti se() {
konst signInWithGoogle = () => {
 signInWithPopup (auth, provider)
 };
povratak (


Prijavite se s Googleom</button>
 </div>
 )
}
izvozzadano Prijaviti se

• Ovaj kod uvozi autentifikaciju i objekte Google davatelja usluga koje ste inicijalizirali u Firebase konfiguracijskoj datoteci.
• Zatim definira a Prijaviti se funkcija koja implementira signInWithPopup metoda iz Firebasea koja preuzima ovjera i davatelj usluga komponente kao parametri. Ova će funkcija autentificirati korisnike s njihovim prijavama na Google društvene mreže.
• Konačno, vraća div koji sadrži gumb koji, kada se klikne, poziva prijavite se s Googleom funkcija.

Stvorite komponentu chata

Ova komponenta će sadržavati glavnu značajku vaše Chat aplikacije, prozor za chat. Stvorite novu datoteku unutar komponente mapu i dajte joj naziv Chat.js.

Dodajte kod ispod u Chat.js Datoteka:

uvoz Reagiraj, {useState, useEffect} iz'reagirati'
uvoz {db, auth} iz'../firebase-config'
uvoz Pošalji poruku iz'./Pošalji poruku'
uvoz { zbirka, upit, ograničenje, orderBy, onSnapshot } iz"firebase/firestore";
funkcijarazgovor() {
konst [poruke, setMessages] = useState([])
konst { ID korisnika } = auth.currentUser
 useEffect(() => {
konst q = upit(
 zbirka (db, "poruke"),
 naručiti("stvoreno u"),
 ograničiti(50)
 );
konst podaci = onSnapshot (q, (QuerySnapshot) => {
neka poruke = [];
 QuerySnapshot.forEach((doc) => {
 messages.push({ ...doc.data(), iskaznica: doc.id });
 });
 setMessages (poruke) 

 });
povratak() => podaci; 

 }, []);

povratak (


 auth.signOut()}>Odjava</button>
 {poruke && messages.map((poruka, id, uid, fotoURL) =>
 ključ={id} 
 className={`poruka ${userID auth.currentUser.uid? 'poslano': 'primljeno'}`}>

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

 </div>
 )
}
izvozzadano razgovor

• Ovaj kod uvozi bazu podataka, komponente provjere autentičnosti inicijalizirane u firebase-config.js datoteku i Firestore prilagođene metode koje olakšavaju manipuliranje pohranjenim podacima.
• Provodi se kolekcija, upit, ograničiti, orderBy, i onSnapshot Firestore metode za postavljanje upita i snimanje trenutne snimke trenutno pohranjenih podataka u Firestore zbirci poruka, poredanih po vremenu kada su stvorene, i čita samo 50 najnovijih poruka.
• Firestore metode su omotane i izvode se unutar a useEffect kuka kako bi se osiguralo da se poruke prikazuju odmah, svaki put kada pritisnete gumb za slanje, bez osvježavanja prozora stranice. Kada se podaci pročitaju, pohranjuju se u stanju poruka.
• Zatim provjerava razliku između poslanih i primljenih poruka — odgovara li korisnički ID pohranjen uz poruku korisnički ID za prijavljenog korisnika, a nakon toga postavlja naziv klase i primjenjuje odgovarajući stil za poruka.
• Na kraju, prikazuje poruke, a odjavi se gumb i Pošalji poruku komponenta. The odjavi se dugme na klik rukovatelj poziva auth.signOut() metoda koju pruža Firebase.

Stvorite komponentu za slanje poruke

Stvorite novu datoteku, SendMessage.js datoteku i dodajte kod u nastavku:

uvoz Reagiraj, {useState} iz'reagirati'
uvoz {db, auth} iz'../firebase-config'
uvoz { zbirka, addDoc, serverTimestamp} iz"firebase/firestore";
funkcijaPošalji poruku() {
konst [msg, setMsg] = useState('')
konst messagesRef = zbirka (db, "poruke");

konst pošaljiMsg = asinkroni (e) => {
konst { uid, photoURL } = auth.currentUser

čekati addDoc (messagesRef, {
 tekst: poruka,
 createdAt: serverTimestamp(),
 uid: uid,
 fotoURL: fotoURL
 })
 setMsg('');
 };
povratak (



'Poruka...'
 vrsta="tekst" vrijednost={msg} 
 onChange={(e) => setMsg (e.target.value)}
 />
Pošalji</button>
 </div>
 )
}
izvozzadano Pošalji poruku

• Slično kao i Chat.js komponentu, uvesti Firestore metode i inicijaliziranu bazu podataka i komponente provjere autentičnosti.
• Za slanje poruka, Pošalji poruku funkcija implementira addDoc Firestore metoda koja stvara novi dokument u bazi podataka i pohranjuje proslijeđene podatke.
• The addDoc metoda uzima dva parametra, podatkovni objekt i referentni objekt koji označava koju zbirku želite pohraniti podatke. Metoda zbirke Firestore navodi zbirku za pohranu podataka.
• Na kraju, prikazuje polje za unos i gumb na web-stranici kako bi omogućio korisnicima slanje poruka u bazu podataka.

Uvezite komponente u datoteku App.js

Na kraju, u vašem App.js datoteku, uvezite Prijaviti se i razgovor komponente da biste ih prikazali u svom pregledniku.

U vašem App.js datoteku, izbrišite predložak koda i dodajte kod ispod:

uvoz razgovor iz'./components/Chat';
uvoz Prijaviti se iz'./components/SignIn';
uvoz {autorizacija} iz'./firebase-config.js'
uvoz {useAuthState} iz'react-firebase-hooks/auth'
funkcijaaplikacija() {
konst [korisnik] = useAuthState (auth)
povratak (
 <>
 {korisnik? <razgovor />: <Prijaviti se />}
 </>
 );
}
izvozzadano aplikacija; 

Ovaj kod prikazuje Prijaviti se i razgovor komponente uvjetno provjerom statusa autentifikacije korisnika. Status provjere autentičnosti destrukturira se iz Firebase komponente provjere autentičnosti uz pomoć useAuthState udica iz kuke-react-firebase paket.

Provjerava je li korisnik autentificiran i prikazuje razgovor komponenta inače the Prijaviti se komponenta je prikazana. Na kraju, dodajte bilo koji CSS stil, zavrtite razvojni poslužitelj da biste spremili promjene i prijeđite na svoj preglednik da vidite konačne rezultate.

Funkcionalnosti Firebase Serverless

Firebase pruža niz značajki izvan baze podataka u stvarnom vremenu i provjere autentičnosti. Možete koristiti njegove funkcije bez poslužitelja za brzo podizanje i skaliranje bilo koje aplikacije. Nadalje, Firebase se neprimjetno integrira s web i mobilnim aplikacijama što olakšava izradu višeplatformskih aplikacija.