Ako gradite aplikaciju s Reactom ili React Nativeom i želite dodati prijavu, bazu podataka u stvarnom vremenu ili jednostavno prestati brinuti o pozadini, Firebase je jedna od najpraktičnijih i najmoćnijih opcija dostupnih upravo sada . Omogućuje vam autentifikaciju, bazu podataka, pohranu datoteka i još mnogo toga bez izrade vlastitog API-ja.
U ovom ćemo članku korak po korak vidjeti kako povezati React aplikaciju (i React Native/Expo) s Firebaseom , kako strukturirati projekt, konfigurirati autentifikaciju e-pošte i Googlea, pohraniti korisničke sesije te čitati/pisati podatke u Firestore i Realtime bazu podataka. To ćemo učiniti s primjerima iz stvarnog svijeta i komentiranim kodom, objašnjavajući ga lako razumljivim jezikom kako biste mogli pratiti čak i ako niste tehnički stručnjak.
Što je Firebase i zašto se tako dobro uklapa s Reactom?
Firebase je Google Backend kao usluga koja pruža niz usluga spremnih za korištenje: autentifikaciju, bazu podataka u stvarnom vremenu, Firestore (NoSQL bazu podataka dokumenata), pohranu datoteka, analitiku, alate za rast, monetizaciju i još mnogo toga. Započelo je kao baza podataka u stvarnom vremenu, ali nakon nekoliko iteracija razvilo se u sveobuhvatnu backend platformu.
Umjesto postavljanja vlastitog poslužitelja, dizajniranja API-ja, upravljanja infrastrukturom i skaliranja, s Firebaseom možete izravno povezati svoju React aplikaciju s backendom koristeći njegov službeni SDK . To znači da se mnogi tipični backend zadaci (autentifikacija, CRUD, sigurnosna pravila, obavijesti itd.) svode na nekoliko poziva dobro dokumentiranih JavaScript funkcija.
Integracija s Reactom je vrlo prirodna jer Firebase izlaže svoje podatke u JSON formatu , a njegovi SDK-ovi su dizajnirani za rad na strani klijenta. S Reactom jednostavno čitate te podatke, popunjavate stanje svojih komponenti i puštate biblioteku da se pobrine za renderiranje svega kad god se nešto promijeni. Kada koristite njegove slušače u stvarnom vremenu, svako ažuriranje baze podataka pokreće automatsko ponovno renderiranje, što se savršeno uklapa u Reactov deklarativni model.
Izrada i konfiguriranje Firebase projekta
Prije nego što počnete pisati React kod, morate imati spremno Firebase okruženje. Postupak je vrlo sličan bez obzira koristite li ga iz React web aplikacije, React Nativea ili Expa. U svim slučajevima, prvi korak je stvaranje projekta u Firebase konzoli.
Idite na https://firebase.google.com/ , prijavite se svojim Google računom i pristupite konzoli. Od tamo stvorite novi projekt , dajte mu prepoznatljivo ime (na primjer, „react-firebase“ ili „auth-firebase-react“) i odaberite regiju koja ima najviše smisla za publiku vaše aplikacije.
Nakon što je projekt kreiran, Firebase će vas odvesti na glavnu nadzornu ploču. Vidjet ćete nekoliko opcija za dodavanje aplikacija: iOS, Android i Web. Za React web aplikaciju odabirete ikonu weba, dok za React Native možete registrirati iOS i/ili Android aplikacije po potrebi. Cilj je u svim slučajevima dobiti Firebase konfiguraciju s ključevima kao što su apiKey, authDomain, projectId i slično.
Konzola će vam prikazati isječak koda koji izgleda otprilike ovako:
const config = { apiKey: "AIzaSy*", authDomain: "tu-proyecto.firebaseapp.com", databaseURL: "https://tu-proyecto.firebaseio.com", projectId: "tu-proyecto", storageBucket: "tu-proyecto.appspot.com", messagingSenderId: "796"};firebase.initializeApp(config);U React Webu vam je zapravo potreban samo konfiguracijski objekt i poziv initializeApp -a pomoću trenutnog modularnog SDK-a. Kasnije ćete vidjeti kako to uklopiti u strukturu vašeg projekta.
Odabir baze podataka: Realtime Database vs Firestore
Firebase nudi dvije glavne vrste baza podataka: Realtime Database i Cloud Firestore . Obje su NoSQL, ali imaju važne razlike u modelu podataka, upitima i naplati.
Baza podataka u stvarnom vremenu je ogromna JSON baza podataka u kojoj je sve organizirano u jednu strukturu stabla. Idealna je kada vam je potrebno Vrlo brza ažuriranja i jednostavna sinkronizacija u stvarnom vremenuStruktura se temelji na čvorovima i putovima, a pristupate im pomoću referenci kao što su firebase.database().ref('object/name')To je klasična opcija ako želite nešto poput chata, prisutnosti korisnika ili vrlo jednostavnih podataka.
Firestore, s druge strane, organizira informacije u kolekcije i dokumente . Svaki dokument ima polja, a unutar njega možete ugnijezditi podkolekcije. Omogućuje složenije upite, složene indekse, sortiranje i kombinirane filtere. Savršen je za nešto veće aplikacije gdje su vam potrebni fleksibilni upiti, skalabilnost i izražajnija sigurnosna pravila.
Obje baze podataka mogu se besprijekorno koristiti unutar Reacta, čak i u istoj aplikaciji. Na primjer, možete pohraniti korisnike, objave ili zadatke u Firestoreu i iskoristiti bazu podataka u stvarnom vremenu za visoko dinamične podatke koje želite kontinuirano pratiti. Ključna stvar je da u Reactu jednostavno osluškujete promjene i ažurirate stanje ; Firebase se brine za ostalo.
Izradite React Native / Expo aplikaciju s Firebaseom
Ako radite s React Nativeom, možete integrirati Firebase pomoću Firebase Web SDK-a , koji je u potpunosti kompatibilan s projektima kreiranim pomoću Expa ili službenog React Native CLI-ja. Na taj način niste vezani za posredničke biblioteke i ostajete unutar službenog Googleovog okvira podrške.
Za početak rada s Expom, instalirajte Expo CLI globalno iz terminala pomoću npm install -g expo-cliZatim, stvorite novi React Native projekt s expo initOdaberite osnovni predložak (na primjer, "prazno" s upravljanim tijekom rada) i pokrenite aplikaciju s yarn ios o yarn androidExpo će vam prikazati QR kod koji možete skenirati kamerom na iOS-u ili Expo aplikacijom na Androidu kako biste pregledali svoj projekt na uređaju.
Nakon što pokrenete svoju osnovnu aplikaciju, dodajte potrebne ovisnosti: prvo, sam Firebase SDK, s yarn add firebaseZatim možete uključiti navigacijske biblioteke kao što su @react-navigation/native y @react-navigation/stog, zajedno s dodatnim paketima koji su im potrebni u React Nativeu (upravljač gestama, reanimated, screens, safe-area-context itd.) za upravljanje tokovima između prijavnog, registracijskog i početnog zaslona.
Također je vrlo korisno instalirati neke pomoćne komponente za mobilno korisničko sučelje, kao što je react-native-keyboard-aware-scroll-view za pravilno rukovanje tipkovnicom u obrascima i biblioteke poput base64 za pružanje globalnih funkcija koje nedostaju u nekim mobilnim okruženjima za izvršavanje (btoa, atob, itd.). Sve se to dodaje jednom instalacijskom naredbom pomoću yarn-a u vašem projektu.
Postavljanje Firebasea u Reactu / React Nativeu
Centralizirat ćete svoju Firebase konfiguraciju u jednoj datoteci, tako da ostatak aplikacije treba samo uvesti prethodno inicijaliziranu instancu. Napravite, na primjer, mapu izvor/firebase i unutar konfiguracijske datoteke, kao što je config.js (o config.ts u TypeScriptu).
U toj datoteci uvezite potrebne funkcije iz Firebase SDK-a i definirajte svoj konfiguracijski objekt s vrijednostima koje pruža Firebase konzola. U React Native projektima koji koriste stariji SDK, mogli biste vidjeti nešto poput ovoga:
import * as firebase from 'firebase';import '@firebase/auth';import '@firebase/firestore';const configuracionFirebase = { apiKey: 'TU_CLAVE_API', authDomain: 'tu-dominio-auth.firebaseapp.com', databaseURL: 'https://tu-bd.firebaseio.com', projectId: 'tu-id-proyecto', storageBucket: 'tu-id-proyecto.appspot.com', messagingSenderId: '1234567890', appId: '1:1234567890:web:codigoapp'};if (!firebase.apps.length) { firebase.initializeApp(configuracionFirebase);}export { firebase };Web projekti koji koriste Vite i TypeScript obično koriste modularnu verziju Firebase SDK 9, a dobra je praksa postaviti osjetljive vrijednosti u varijablama okruženjaNa primjer, možete stvoriti datoteku .env u korijenu i definirajte ključeve kao VITE_FIREBASE_API_KEY, VITE_FIREBASE_AUTH_DOMAINitd. Zatim, u konfiguracijskoj datoteci, konstruirate objekt iz import.meta.env['VITE_FIREBASE_API_KEY'] i slično.
Bez obzira na pristup, obrazac je isti: Firebase aplikaciju inicijalizirate samo jednom i izvozite tu instancu (ili izvozite određene objekte poput FirebaseAuth , Firestore ili Realtime Database ) za jednostavnu upotrebu u ostatku projekta.
Osnovna arhitektura zaslona: prijava, registracija i početna stranica
Kada integrirate autentifikaciju u React Native aplikaciju, vrlo uobičajena struktura je imati tri glavna zaslona: Login, registracija y DomOsim toga, navigacijsku logiku možete centralizirati u jednoj korijenskoj komponenti, obično App.js.
U React Nativeu s React Navigationom, tipična stvar koju treba učiniti je stvoriti mapu src/screens s podmapama po zaslonu (LoginScreen, RegistrationScreen, HomeScreen) i indeksnom datotekom koja izvozi svaku od njih. Zatim, u App.jsIzrađujete navigator stoga koji prikazuje jedan ili drugi zaslon ovisno o tome postoji li autentificirani korisnik ili ne.
Ideja je spremiti stanje komponente. App un korisnik (ili null) i zastavica od punjenjeDok se provjerava status autentifikacije, možete prikazati prazan zaslon ili program za učitavanje. Nakon što znate je li korisnik prijavljen, odlučujete koje rute prikazati: ako postoji korisnik, prikažite početni zaslon; ako ne, prikažite zaslone za prijavu i registraciju.
Vizualno, zasloni za prijavu i registraciju jednostavni su obrasci s poljima kao što su e-pošta, lozinka i, u slučaju registracije, puno ime ili potvrda lozinke. Kako bi se poboljšalo mobilno iskustvo, sve je obično omotano KeyboardAwareScrollView -om tako da tipkovnica ne prekriva polja za unos. Početni zaslon, s druge strane, može započeti kao minimalni prikaz (jednostavan tekst), a kasnije se razviti u dio aplikacije u kojem čitate i pišete podatke iz Firestorea.
Dizajniranje i upravljanje formama s hookovima u Reactu
U React web aplikaciji s TypeScriptom, čist način rukovanja obrascima za autentifikaciju je enkapsulacija logike u prilagođena kukaNa primjer, možete stvoriti useForm.tsx u mapi src/hooks, koji prima generičko početno stanje (objekt sa svojstvima obrasca) i vraća i vrijednosti i funkciju za obradu promjena.
Ta udica može koristiti useState interno za pohranu obrasca i izlaganje funkcije handleChange koji prima ulazni događaj, čita atribut ime elementa i ažurirati odgovarajuće svojstvo u stanju. Na taj način imat ćete ispravna imena u ulazima (na primjer, name="email" y name="pass") je ključno za to da sve funkcionira.
U komponenti za prijavu, na primjer, pozvali biste useForm({ email: '', pass: '' }) I dobili biste e-poštu, lozinku, objekt obrasca i funkciju handleChange. Svaki ulaz bi imao svoj vlastiti vrijednost y mijenjamo se povezano s tim vrijednostima i funkcijom udice. Prilikom slanja obrasca, imali biste handleSubmit što čini e.preventDefault() a zatim poziva logiku autentifikacije s Firebaseom.
Isto vrijedi i za obrazac za registraciju; čak biste mogli izdvojiti komponentu obrasca za višekratnu upotrebu, budući da se često mijenjaju samo tekst gumba i povratni poziv koji se izvršava prilikom slanja, dok osnovna struktura ostaje ista.
Konfiguriranje autentifikacije u Firebaseu
Da biste omogućili Reactu autentifikaciju s Firebaseom, morate omogućiti pružatelje usluga autentifikacije u Firebase konzoli. U odjeljku Authentication (Autentifikacija ) idite na karticu Sign-in methods (Metode prijave) i omogućite e-poštu/lozinku i, ako želite, Google autentifikaciju.
Za davatelja usluga e-pošte/lozinke, jednostavno ga omogućite i spremite. Za Google, osim omogućavanja, morat ćete odabrati adresu e-pošte koja će se koristiti prema zadanim postavkama. Od tada će vaš projekt biti spreman za prihvaćanje prijava pomoću obje metode.
Na kartici Korisnici u istom odjeljku vidjet ćete kako se registriraju novi računi kreirani putem vaše aplikacije, bilo putem e-pošte i lozinke ili putem Googlea. To je dobro mjesto za provjeru ispravnog funkcioniranja integracije polja po polju.
Značajke autentifikacije s Firebaseom u Reactu
U web aplikaciji koja koristi React i TypeScript, preporučuje se grupiranje sve logike autentifikacije u datoteku usluga, na primjer, src/firebase/services.ts . Tamo možete imati specifične funkcije za svaku radnju: prijava s Googleom, prijava s vjerodajnicama, registracija, odjava i praćenje statusa autentifikacije.
Za korištenje Googleovog davatelja usluga, prvi korak je stvaranje instance GoogleAuthProvider (ili ekvivalentnog pružatelja usluga, ovisno o vašem slučaju), a zatim definirajte asinkronu funkciju koja poziva signInWithPopup(FirebaseAuth, provider)Ako je taj poziv uspješan, primit ćete objekt s autentificiranim korisnikom iz kojeg možete izdvojiti uid, prikazno ime, URL fotografije i druga polja. Često je potrebno samo raditi s UID-om i vratiti ga kako biste uspostavili globalnu sesiju.
Za autentifikaciju pomoću e-pošte i lozinke imate dvije ključne funkcije: kreirajKorisnikaSE-poštomILozinkom y Prijava s e-poštom i lozinkomOboje čekaju priliku da... FirebaseAuthObavezni su e-pošta i lozinka. Prvi stvara nove korisnike, drugi provjerava njihovo postojanje i autentificira ih. Interno, Firebase obrađuje validaciju formata e-pošte, duljine lozinke i drugih čimbenika, vraćajući jasne pogreške koje možete presresti u bloku. pokušaj uhvatiti i prikažite jednostavnim alert ili s vlastitim sustavom obavještavanja.
Za odjavu jednostavno upotrijebite signOut(FirebaseAuth) , koji također možete enkapsulirati u funkciju svoje usluge kako bi API vašeg koda bio čišći i dosljedniji.
Promatrajte promjene sesije pomoću onAuthStateChanged
Vrlo čest problem pri početku korištenja autentifikacije je taj što, iako prijava radi, kada ponovno učitate stranicu React aplikacije ili zatvorite i ponovno otvorite mobilnu aplikaciju, čini se kao da je sesija izgubljena . Međutim, Firebase prema zadanim postavkama ima postojanost stanja autentifikacije: jednostavno ga ne čitate ispravno.
Rješenje je korištenje funkcije onAuthStateChanged iz Firebase Auth SDK-a. Ova funkcija prima instancu za autentifikaciju i povratni poziv koji će se izvršiti svaki put kada se stanje promijeni: kada se korisnik prijavi, kada se odjavi ili kada se aplikacija inicijalizira i Firebase dohvati spremljene vjerodajnice.
U React aplikaciji, normalno je stvoriti funkciju, na primjer observeAuthState, koji prima postavku stanja (kao što je setSession) i unutarnji poziv onAuthStateChanged(FirebaseAuth, user => { ... })U tom povratnom pozivu, ako korisnik je null ili nedefiniranGlobalnu sesiju postavljate kao neautentificiranu; ako postoji korisnik, spremate njegovo korisničko ime. uid i označite status kao autentificiran.
Ovaj se promatrač obično pokreće unutar useEffecta na najvišoj razini aplikacije (na primjer, unutar konteksta) tako da se pokreće samo jednom kada se aplikacija pokrene. To osigurava da čak i ako korisnik ponovno učita preglednik, ako Firebase ima zapamćenu sesiju, vaše globalno stanje se automatski ažurira i šalje izravno u privatni dio aplikacije bez ponovnog traženja vjerodajnica.
Globalni kontekst autentifikacije u Reactu
Kako bi se izbjeglo prenošenje propsa s jedne komponente na drugu, vrlo praktična strategija u Reactu je stvaranje namjenskog Context API-ja za autentifikaciju . Na taj način bilo koji dio aplikacije može utvrditi je li korisnik autentificiran, njegov UID i koje su mu funkcije dostupne (prijava, odjava itd.) bez detaljnog proučavanja propsa.
Započnite stvaranjem mape src/context i unutar datoteke, na primjer authContext.tsxTamo definirate sučelje koje opisuje što će vaš kontekst otkriti: status sesije (na primjer, 'provjera', 'autentificirano', 'neautentificirano'), ID korisnika (ili null ako nema korisnika) i funkcije za prijavu ili odjavu.
Zatim definirajte početno stanje, s status u 'provjeri' i userId u null, te stvoriti kontekst s createContextZatim, izgradite komponentu Pružatelj autorizacije koja prima djecu, koristi useState za upravljanje sesijom i pozivanje vaše funkcije observeAuthState u useEffect prilikom montaže.
Unutar ovog pružatelja usluga korisno je imati pomoćne funkcije: jednu za odjavu koja poziva vašu uslugu logoutFirebase i ostavlja stanje kao neautentificirano, drugu za prisiljavanje stanja na 'provjeru' kada pokrenete tok autentifikacije i treću za validaciju rezultata prijave/registracije (ako primite uid, označite ga kao autentificiranog; ako ne, pozovite funkciju logout kako biste izbrisali sve ostatke sesije).
S tim u kontekstu možete implementirati tri javne akcije: handleLoginWithGoogle, handleLoginWithCredentials y handleRegisterWithCredentialsSvaki će pokrenuti "provjeru", pozvati odgovarajuću servisnu funkciju i prepustiti konačnu odluku zajedničkoj validaciji koju ste kreirali. Na kraju, AuthContext.Provider Otkrit će i stanje (status, userId) i ove funkcije, a svoju aplikaciju ćete umotati u Pružatelj autorizacije u korijenskoj datoteci (na primjer, u src/main.tsx).
Korištenje konteksta u komponentama za prijavu, registraciju i početnu stranicu
Nakon što pripremite kontekst za autentifikaciju, njegovo korištenje u vašim komponentama je vrlo jednostavno. U komponenti Prijava.tsxVažno je useContext, pristupite Kontekst autentifikacije i izdvaja, na primjer, funkcije handleLoginWithCredentials y handleLoginWithGooglePrilikom slanja obrasca za prijavu, pozvat ćete prvi, prosljeđujući e-poštu i lozinku iz svoje udice. useFormdok će ekskluzivni gumb "Prijava putem Googlea" biti predstavljen u svojoj drugoj verziji na svom događaju onClick.
Za komponentu Register.tsx , učinit ćete nešto vrlo slično, ali koristeći samo handleRegisterWithCredentials . Obrazac će zahtijevati ista polja (e-pošta i lozinka) ili još nekoliko ako želite, a nakon slanja, logika konteksta bit će odgovorna za stvaranje korisnika i ažuriranje globalnog statusa.
U glavnoj komponenti App.tsx također ćete koristiti kontekst za čitanje statusa i korisničkog ID-a . Dok je status 'provjera', možete prikazati malu poruku o učitavanju ili prijelazni zaslon. Kada se status promijeni, ako je korisnik autentificiran i ima valjani korisnički ID, prikazat ćete komponentu HomePage koja prikazuje sadržaj samo za prijavljene korisnike (na primjer, njihov korisnički ID i gumb za odjavu koji poziva handleLogOut ). Ako status pokazuje da korisnik nije autentificiran, generirat ćete komponentu AuthPage koja sadrži vaše obrasce za prijavu i registraciju.
Registracija i prijava s Firebase Auth u React Nativeu
U React Nativeu, iako se tehnička struktura razlikuje od weba, konceptualni obrazac je isti. Na ekranu za registraciju (RegistrationScreen) imat ćete lokalno stanje za puno ime, e-mail, lozinka y potvrdiLozinkuKada kliknete gumb za stvaranje računa, provjeravate podudaraju li se lozinke i, ako sve izgleda ispravno, pozivate firebase.auth().createUserWithEmailAndPassword(email, password).
Nakon što Firebase stvori račun, možete spremiti dodatne korisničke podatke u Firestore, u zbirci userspostavljanjem ID-a dokumenta na UID koji vraća Firebase. To vam daje središnju lokaciju za pohranu podataka. puno ime, profilna slika ili drugi personalizirani podaci koji ne odgovaraju standardnoj tablici za autentifikaciju. Ako cijeli niz radi, navigirate na početni zaslon prosljeđivanjem korisničkog objekta kao parametra.
Na ekranu za prijavu (LoginScreen) također uvozite Firebase i koristite firebase.auth().signInWithEmailAndPassword(email, password)Nakon što primite odgovor s korisnikom, možete pročitati njegove proširene podatke iz Firestorea pomoću UID-a, a ako taj dokument postoji, idite na početnu stranicu s tim korisnikom u navigacijskoj traci. Ako upit ne vrati ništa jer je korisnik izbrisan iz Firestorea, obavijestit ćete korisnika i spriječiti daljnju obradu.
Ustrajnost sesije u React Nativeu s onAuthStateChanged
Baš kao i na webu, u React Nativeu je vrlo dosadno za korisnika da se mora prijavljivati svaki put kada otvori aplikaciju. Firebase Auth se također brine o pamćenju prijave i omogućuje vam da dohvatite trenutnog korisnika koristeći iste prijave. pri promjeni stanja autorizacijeU ovom okruženju, logika se obično nalazi u komponenti App ili u kontekstu sličnom onome na webu.
Koristite useEffect koji se izvršava samo jednom prilikom montiranja komponente i unutar kojeg pozivate firebase.auth().onAuthStateChangedAko u povratnom pozivu primite korisnika, tražite njegov odgovarajući dokument u kolekciji. users iz Firestorea, a kada ga dobijete, ažurirate status korisnik i poništite oznaku zastavice učitavanja. Ako nema autentificiranog korisnika, jednostavno postavite učitavanje na false, a korisnika ostavite kao null, što će uzrokovati da navigacijsko stablo prikazuje javne zaslone.
Ovaj uzorak osigurava da ako je korisnik otvorio aplikaciju prije nekog vremena i ostavio je u pozadini ili ako je zatvori i ponovno otvori, ona će se i dalje prikazivati izravno na početnom zaslonu sve dok je njegov token sesije valjan, što uvelike poboljšava korisničko iskustvo bez potrebe za ručnim upravljanjem tokenima.
Čitanje i pisanje podataka u Firestore iz React Nativea
Nakon što je autentifikacija riješena, vrijeme je da se nešto korisno napravi s bazom podataka. Vrlo tipičan primjer je izrada početnog zaslona koji korisniku omogućuje dodavanje tekstualnih stavki u kolekciju i njihovo popisivanje u stvarnom vremenu . Zamislite da su te stavke zadaci, bilješke ili brze objave, a vi želite da korisnik vidi samo svoje.
Na početnom zaslonu deklarirate stanje za trenutni tekst (entityText) i drugi za popis entiteta (entitiesTakođer stvarate referencu na Firestore kolekciju, na primjer entityRef = firebase.firestore().collection('entities')i spremite ID autentificiranog korisnika (na primjer. userID = props.extraData.id).
Unutar a useEffectPostavili ste slušatelja u stvarnom vremenu s entityRef.where('authorID', '==', userID).orderBy('createdAt', 'desc').onSnapshot(...)Ovaj povratni poziv se pokreće kad god se nešto promijeni u dokumentima koji ispunjavaju taj uvjet. Iterirate kroz dokumente u snimci, gradite niz sa sadržajem svakog entiteta, uključite ID dokumenta i ažurirate stanje. Entiteti s tim novim nizom. Zahvaljujući tome, FlatList koji koristite za prikaz entiteta bit će prikazan s najnovijim podacima.
Za dodavanje novih elemenata, kreirate funkciju onAddButtonPress što potvrđuje da entityText nije prazno, generiraj vremensku oznaku poslužitelja s firebase.firestore.FieldValue.serverTimestamp() i nazovi entityRef.add({ text: entityText, authorID: userID, createdAt: timestamp })Ako je operacija uspješna, možete izbrisati tekstualno polje i zatvoriti tipkovnicu; Firestore će se pobrinuti za pokretanje nove snimke koja će novu stavku prikazati na popisu.
Prilikom korištenja kombiniranih filtera i sortiranja, Firestore može zahtijevati da kreirate kompozitni indeksAko se to dogodi, vidjet ćete obavijest u zapisnicima s izravnom vezom na Firebase konzolu za stvaranje tog indeksa jednim klikom. Nakon što se stvori, upiti koji se miješaju where y orderBy Radit će bez problema.
Povežite React web s Firebase Realtime bazom podataka
Uz Firestore, možda ćete trebati raditi s Firebase Realtime Database iz web aplikacije izgrađene s Reactom. Opći tijek je: inicijalizirate Firebase konfiguracijom projekta, uvozite biblioteku firebase/baza podataka i stvarate reference na čvorove koji vas zanimaju, kao što su object/nameVrlo je korisno za scenarije gdje Želite da se promjene odmah odražavaju na sučelju..
Zamislite da u Firebase konzoli kreirate čvor object s nekretninom name čija je vrijednost „Carlos“. U svojoj React aplikaciji definirate lokalno stanje name s početnom vrijednošću, na primjer „Pepe“, i renderirate <h1>{this.state.name}</h1> (ako koristite komponente klase) ili ekvivalent s hookovima.
U metodi životnog ciklusa komponentaDidMount (ili u a useEffect s praznom ovisnošću o funkcionalnim komponentama), stvarate referencu s firebase.database().ref().child('object').child('name') i dodajete slušač tipa on('value', snapshot => { ... })Svaki put kada se pokrene događaj vrijednosti, primit ćete snimku trenutne vrijednosti čvora; napravite setState s snapshot.val() React se brine za ponovno renderiranje teksta. Naziv mijenjate u Firebase konzoli i odmah ga vidite u pregledniku.
Da bi ovo funkcioniralo bez autentifikacije, morate prilagoditi sigurnosna pravila u ploči Realtime Database kako biste omogućili javni pristup čitanju i pisanju tijekom razvoja (na primjer, postavljanjem `read` i `write` na `true`). Međutim, ključno je ograničiti ta pravila u produkciji, obično zahtijevanjem autentifikacije korisnika ili primjenom uvjeta na temelju putanje ili UID-a kako biste spriječili da vaša baza podataka bude otvorena za javnost.
Završna razmatranja
S ovim osnovnim uzorkom možete izgraditi bezbroj slučajeva upotrebe: indikatore prisutnosti, dijeljene brojače, nadzorne ploče u stvarnom vremenu ili male demo aplikacije gdje interaktivnost između korisnika mora biti trenutna.
Kao što vidite, kombiniranje Reacta (i na webu i na mobilnim uređajima) s Firebaseom omogućuje vam brzu izradu projekata s autentifikacijom u stvarnom vremenu, bazama podataka i logikom, iskorištavajući hooksove, kontekste i slušatelje u stvarnom vremenu za sinkronizaciju vizualnog stanja s onim što se događa u pozadini kojom upravlja Google. Ova kombinacija brzog razvoja i skalabilnosti znači da za mnoge projekte nema smisla ponovno izmišljati cijeli sloj poslužitelja kada se možete usredotočiti na korisničko iskustvo i pustiti Firebase da se pobrine za ostalo.