În acest tutorial, vom construi o aplicație React Native care este integrată cu un backend Firebase. Aplicația va suporta atât React Native CLI, cât și Expo CLI.

Acest Reacționează Firebase nativ tutorialul va acoperi principalele caracteristici, cum ar fi autentificarea, înregistrarea și operațiunile CRUD din baza de date (Firestore).

Poti de asemenea descărcați codul sursă complet de la Github dacă doriți să treceți direct în cod.

Acest tutorial vă va conduce prin detaliile următoarelor secțiuni:

  1. Crearea unui proiect Firebase
  2. Crearea și configurarea unei noi aplicații React Native
  3. Configurarea structurii folderelor, rutelor și navigării
  4. Implementarea interfeței de utilizare pentru ecranele de autentificare, înregistrare și de pornire
  5. Înregistrare cu Firebase Auth
  6. Conectați-vă cu Firebase Auth
  7. Date de conectare persistente
  8. Scrierea și citirea datelor din Firebase Firestore

Fără alte întrebări, să începem să construim proiectul React Native Firebase. Ultima aplicație mobilă va arăta astfel:

reacționează la baza de foc nativă

1. Creați un proiect Firebase

Mergeți spre Firebase.com și creați un cont nou. Odată conectat, veți putea crea un nou proiect în Consola Firebase.

  • Creați un cont nou pe Firebase.com
  • Creați un proiect nou în Consola Firebase
  • Activați metoda de autentificare prin e-mail și parolă în Consola Firebase -> Autentificare -> Metoda de conectare
1611872949 871 Cum sa construiesti o aplicatie nativa React si sa o
  • Creați o nouă aplicație iOS, cu ID-ul aplicației com.reactnativefirebase
1611872949 773 Cum sa construiesti o aplicatie nativa React si sa o
  • (Opțional) Creați o nouă aplicație Android cu numele pachetului com.reactnativefirebase
  • Descărcați pe computer fișierul de configurare generat la pasul următor (GoogleService-Info.plist pentru iOS și google-services.json pentru Android)

Firebase vă permite să construiți fără fund aplicații. Este un produs care rulează pe Google Cloud și permite dezvoltatorilor să construiască aplicații web și mobile fără a avea nevoie de propriile servere.

Acest lucru economisește mult timp, deoarece nu este nevoie să scrieți niciun cod backend. De asemenea, este foarte scalabil, fiind susținut de infrastructura Google.

În Firebase, veți putea stoca tot ce este necesar pentru aplicația dvs. – utilizatori, date, fișiere, jetoane de notificare push, etc. Toate aceste informații sunt puse la dispoziția clienților mobili prin intermediul SDK-urilor Firebase, care sunt compatibile cu React Native . Aceasta înseamnă că toate interacțiunile cu backend-ul sunt extrase și încapsulate în SDK, astfel încât dezvoltatorii de telefonie mobilă nu trebuie să-și facă griji cu privire la apelurile API, analizarea datelor, gestionarea socketurilor etc.

2. Creați și configurați o nouă aplicație nativă React

Vom face ca aplicația noastră React Native Firebase să fie compatibilă atât cu Expo CLI, cât și cu React Native CLI.

Vom folosi Expo deocamdată, deoarece simplifică pentru noii veniți previzualizarea aplicațiilor lor. Dar nu vom folosi nicio bibliotecă specifică Expo, deci src codul poate fi utilizat pur și simplu în orice aplicație React Native, indiferent de schela sa.

Vom folosi Firebase Web SDK, care este compatibil atât cu Expo, cât și cu React Native CLI și este acceptat direct de Google.

Dacă doriți să utilizați react-native-firebase în schimb, nu ezitați să instalați și să configurați acest lucru (codul va fi în continuare același). Dar rețineți că nu o recomandăm din câteva motive:

  • nu este acceptat direct de Google, deci menținerea acestuia va fi mult mai dificilă, având în vedere că este un strat suplimentar care poate provoca erori și
  • de asemenea, nu funcționează cu Expo, care poate fi un break break pentru mulți dezvoltatori.

Pașii de mai jos sunt acoperiți și în documentația oficială React Native de pe cum să vă configurați mediul de dezvoltare.

  • Instalați Expo CLI

În terminalul dvs., pur și simplu rulați

npm install -g expo-cli
  • Creați o nouă aplicație React Native rulând
expo init react-native-firebase

Pentru șablon, alegeți Flux de lucru gestionatGol

  • Porniți aplicația rulând
yarn ios
// or
yarn android

Acest lucru vă va oferi, de asemenea, un cod QR pe ​​care îl puteți scana folosind aplicația Cameră pe iOS sau aplicația Expo pe Android.

Asta e super. Acum avem o nouă aplicație React Native, care rulează atât pe iOS, cât și pe Android. Să începem să îl conectăm la backend-ul dvs. Firebase.

  • Adăugați Firebase SDK la proiectul React Native
yarn add firebase
  • Adăugați biblioteca React Native Navigation rulând
yarn add @react-navigation/native && yarn add @react-navigation/stack && expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
  • Adăugați diferite componente și pachete UI pentru a fi utilizate în proiect
yarn add react-native-keyboard-aware-scroll-view base-64

Creați un fișier de configurare Firebase

mkdir src src/firebase && touch src/firebase/config.js

Adăugați configurația firebase în src / firebase / config.js:

Puteți obține toate aceste informații de la Consola Firebase -> Setări proiect

1611872949 103 Cum sa construiesti o aplicatie nativa React si sa o

3. Creați structura folderului și configurați rutele și navigarea

  • Creați structura folderelor executând
mkdir src/screens src/screens/LoginScreen src/screens/RegistrationScreen src/screens/HomeScreen
  • Creați structura fișierelor rulând
touch src/screens/index.js src/screens/LoginScreen/LoginScreen.js src/screens/LoginScreen/styles.js src/screens/RegistrationScreen/RegistrationScreen.js src/screens/styles.js src/screens/HomeScreen/HomeScreen.js src/screens/HomeScreen/styles.js
  • Adăugați acest cod la src / screens / index.js
export { default as LoginScreen } from './LoginScreen/LoginScreen'

export { default as HomeScreen } from './HomeScreen/HomeScreen'

export { default as RegistrationScreen } from './RegistrationScreen/RegistrationScreen'

Nu vă faceți griji dacă proiectul este stricat! Totul va avea sens peste puțin timp.

  • Configurați rutele și navigatorii

Trece peste App.jsfișier cu următorul fragment de cod:

4. Implementați interfața de utilizare

Acum că avem schela aplicației, să mergem mai departe și să implementăm componentele UI ale tuturor ecranelor. Nu vom intra în detaliile aspectului flex și al stilului React Native, deoarece acest lucru nu intră în sfera acestui tutorial. Ne vom concentra mai ales pe integrarea React Native Firebase.

Pur și simplu suprascrieți fișierele după cum urmează:

  • src / LoginScreen / LoginScreen.js

  • src / LoginScreen / styles.js

  • src / RegistrationScreen / RegistrationScreen.js

  • src / RegistrationScreen / styles.js

  • src / HomeScreen / HomeScreen.js

  • src / HomeScreen / styles.js

În acest moment, aplicația dvs. ar trebui să ruleze corect și să afișeze următoarele ecrane (numai pentru interfața de utilizare):

reacționează nativ firebase auth

Puteți comuta între cele două ecrane atingând butoanele de legături din subsol.

Acum că avem o interfață de utilizare frumoasă pentru conectare și înscriere, să vedem cum putem integra aplicația noastră React Native (și Expo) cu Firebase.

5. React Native Firebase – Înregistrare

Să începem cu crearea unui cont nou cu Firebase Auth, deoarece autentificarea vine în mod natural. Pentru aceasta, vom adăuga logica Firebase pentru crearea unui cont nou cu e-mail și parolă RegistrationScreen.js , prin implementarea onRegisterPress metoda după cum urmează:

În fluxul de creare a contului de mai sus, facem câteva lucruri importante:

  • Numim API-ul createUserWithEmailAndPassword de la Firebase Auth (linia 13), care creează un cont nou care va apărea în Firebase Console -> tabelul de autentificare.
  • Dacă înregistrarea contului a reușit, stocăm și datele utilizatorului în Firebase Firestore (linia 24). Acest lucru este necesar pentru stocarea informațiilor suplimentare ale utilizatorului, cum ar fi numele complet, adresa URL a fotografiei de profil și așa mai departe, care nu pot fi stocate în tabelul de autentificare.
  • Dacă înregistrarea a reușit, navighăm la ecranul de pornire, trecând și datele obiectului utilizatorului.
  • Dacă apare o eroare, afișăm pur și simplu o alertă cu aceasta. Erorile pot fi lucruri precum lipsa conexiunii la rețea, parola prea scurtă, e-mail nevalid și așa mai departe.

Reîncărcați aplicația și testați înregistrarea. Dacă ați creat cu succes un cont, verificați dacă acesta apare în Consola Firebase-> Autentificare:

1611872949 976 Cum sa construiesti o aplicatie nativa React si sa o

6. React Native Firebase – Autentificare

Acum, că suntem capabili să creăm conturi noi, să implementăm funcționalitatea de conectare. Firebase SDK se ocupă de toți pașii de autorizare și autentificare necesari pentru o autentificare sigură.

Deschis LoginScreen.js , import firebase și finalizați onLoginPress metodă:

Reîncărcați aplicația și continuați și conectați-vă cu un cont existent. Aplicația ar trebui să vă ducă la ecranul de pornire dacă acreditările au fost corecte sau vă va avertiza cu o eroare dacă ceva nu a mers bine.

7. Continuați datele de autentificare

Veți observa că, dacă părăsiți aplicația și o deschideți din nou, va afișa din nou ecranul de conectare. Pentru o experiență bună a utilizatorului, am dori să aterizăm toți utilizatorii conectați pe ecranul de pornire. Nimeni nu dorește să introducă datele de conectare de fiecare dată când dorește să utilizeze o aplicație.

Acest lucru este, de asemenea, cunoscut sub numele de conectare persistentă. Din fericire, Firebase SDK se ocupă de acest lucru pentru noi, tratând toate problemele de securitate. Conectarea permanentă este activată în mod implicit în Firebase, deci tot ce trebuie să facem este să preluăm utilizatorul conectat în prezent.

Deschis App.js și să implementăm caracteristica de conectare persistentă:

onAuthStateChanged returnează utilizatorul conectat în prezent. Apoi preluăm toate datele de utilizator suplimentare pe care le-am stocat în Firestore și le setăm pe starea componentei curente. Aceasta va reda din nou componenta aplicației, care va afișa ecranul de pornire.

Observați cum îl apelăm pentru prima dată când aplicația se încarcă folosind useEffect cârlig.

8. Scrierea și citirea datelor de la Firebase Firestore

Am folosit deja Firestore mai sus, pentru a salva informații suplimentare despre utilizatorii noștri (numele complet). În această secțiune dedicată, vom vedea cum putem scrie date către Firestore și cum le putem interoga.

De asemenea, vom aborda cum să observăm (să ascultăm) modificările din colecția Firestore și să le reflectăm pe ecran, în timp real. Acestea pot fi foarte utile în aplicații în timp real, cum ar fi a Reactează chatul nativ.

Pentru a simplifica, vom salva unele elemente de text într-o colecție Firestore numită „entități”. Gândiți-vă la acestea ca la sarcini, postări, tweets, orice doriți. Vom crea un fișier simplu care adaugă o entitate nouă și vom lista, de asemenea, toate entitățile care aparțin utilizatorului conectat în prezent. În plus, lista va fi actualizată în timp real.

  • Implementați HomeScreen.js rescriind-o în codul de mai jos

  • Stilizați ecranul de pornire, prin suprascriere HomeScreen / styles.js la:

  • Reîncărcați aplicația și observați noul ecran de pornire. Tastați un text și apăsați tasta Adăuga buton
  • Nu s-a intamplat nimic.
  • Creați un index pe colecția Firestore entități

Veți observa că lista entităților nu este redată. Dacă verificați jurnalele, veți vedea un avertisment despre „Interogarea necesită un index”, urmată de o adresă URL lungă:

1611872949 279 Cum sa construiesti o aplicatie nativa React si sa o

Acest lucru ne informează că nu putem interoga tabelul entităților authorID și sortați datele dupăcreat laîn ordine descrescătoare, dacă nu creăm un index. Crearea unui index este de fapt foarte ușoară – pur și simplu faceți clic pe acea adresă URL și apoi faceți clic pe butonul:

1611872949 795 Cum sa construiesti o aplicatie nativa React si sa o
  • Reîncărcați din nou aplicația

Acum totul funcționează conform așteptărilor:

  • Aplicația listează toate entitățile din colecția de entități, în ordine descendentă de creație
  • Adăugarea unei entități noi funcționează bine
  • Lista se actualizează în timp real (încercați să ștergeți o intrare direct în baza de date sau să adăugați una nouă direct din aplicație)

Așa arată baza de date Firestore acum:

1611872949 314 Cum sa construiesti o aplicatie nativa React si sa o

Așa citești și scrii de la Firestore în React Native. Să trecem la ultima secțiune.

Joacă-te cu aplicația, adăugând entități noi. Acesta este proiectul final:

1611872949 595 Cum sa construiesti o aplicatie nativa React si sa o

Concluzie

Firebase face foarte ușor să adăugați autentificare și suport pentru baze de date la orice aplicație React Native. Firebase SDK este extrem de puternic, suportând o mulțime de modele comune de citire și scriere a bazelor de date.

Pe lângă React Native, Firebase SDK oferă suport pentru multe alte limbi, cum ar fi Rapid, Kotlin sau Flutură. Consultați acele linkuri pentru kituri de pornire Firebase similare în diferite limbi.

Le-am prezentat pe cele mai de bază în acest tutorial React Native Firebase. În următoarea serie, vom acoperi funcții mai avansate, cum ar fi Firebase Storage (încărcare fișiere) și notificări push.

Dacă ți-a plăcut acest tutorial, te rog dă-mi o stea pe Repo Github și împărtășiți acest lucru comunității dvs. Puteți verifica și mai multe proiecte gratuite React Native pe Instamobile. Noroc!