Sådan opbygges en React Native-app og integreres med Firebase

I denne vejledning skal vi oprette en React Native-app, der er integreret med en Firebase-backend. Appen understøtter både React Native CLI såvel som Expo CLI.

Denne React Native Firebase- selvstudie dækker hovedfunktionerne såsom godkendelse, registrering og database (Firestore) CRUD-operationer.

Du kan også downloade den fulde kildekode fra Github, hvis du vil springe direkte ind i koden.

Denne vejledning gennemgår detaljerne i følgende sektioner:

  1. Oprettelse af et Firebase-projekt
  2. Oprettelse og konfiguration af en ny React Native-app
  3. Opsætning af mappestruktur, ruter og navigation
  4. Implementering af brugergrænsefladen til skærmbilleder til login, registrering og startskærm
  5. Registrering hos Firebase Auth
  6. Log ind med Firebase Auth
  7. Persistente loginoplysninger
  8. Skrivning og læsning af data fra Firebase Firestore

Uden yderligere ado, lad os begynde at opbygge React Native Firebase-projektet. Den endelige mobilapp vil se sådan ud:

reagerer indfødt ildsted

1. Opret et Firebase-projekt

Gå over til Firebase.com, og opret en ny konto. Når du er logget ind, kan du oprette et nyt projekt i Firebase Console.

  • Opret en ny konto på Firebase.com
  • Opret et nyt projekt i Firebase Console
  • Aktivér Email & Password auth metode i Firebase Console -> Godkendelse -> Log-in metode
  • Opret en ny iOS-app med App ID com.reactnativefirebase
  • (Valgfrit) Opret en ny Android-app med pakkenavn com.reactnativefirebase
  • Download konfigurationsfilen, der genereres i næste trin til din computer ( GoogleService-Info.plist til iOS og google-services.json til Android)

Firebase giver dig mulighed for at oprette backendless apps. Det er et produkt, der kører oven på Google Cloud og giver udviklere mulighed for at oprette web- og mobilapps uden at have brug for deres egne servere.

Dette sparer meget tid, da du ikke behøver at skrive nogen backend-kode. Det er også meget skalerbart og understøttes af Googles infrastruktur.

I Firebase vil du være i stand til at gemme alt, hvad der er nødvendigt til din app - brugere, data, filer, push-underretningstokener osv. Al denne information gøres tilgængelig for mobilklienterne via Firebase SDK'erne, som er kompatible med React Native . Dette betyder, at alle interaktioner med backend er abstraheret og indkapslet i SDK, så mobile udviklere behøver ikke bekymre sig om API-opkald, dataparsering, sockets management osv.

2. Opret og konfigurer en ny React Native-app

Vi vil gøre vores React Native Firebase-app kompatibel med både Expo CLI og React Native CLI.

Vi bruger Expo for nu, da det gør det let for nybegyndere at få vist deres apps. Men vi bruger ikke nogen Expo-specifikke biblioteker, så src- koden kan simpelthen bruges i enhver React Native-app, uanset stilladset.

Vi skal bruge Firebase Web SDK, som er kompatibel med både Expo og React Native CLI, og understøttes direkte af Google.

Hvis du i stedet vil bruge react-native-firebase, er du velkommen til at installere og konfigurere det (koden vil stadig være den samme). Men husk at vi ikke anbefaler det af nogle få grunde:

  • det understøttes ikke direkte af Google, så det vil være meget sværere at opretholde det, da det er et ekstra lag, der kan forårsage fejl, og
  • det fungerer heller ikke med Expo, som kan være en deal breaker for mange udviklere.

Trinene nedenfor er også dækket af den officielle React Native-dokumentation om, hvordan du opsætter dit dev-miljø.

  • Installer Expo CLI

I din terminal skal du blot køre

npm install -g expo-cli
  • Opret en ny React Native-app ved at køre
expo init react-native-firebase 

Vælg den administrerede arbejdsgang  -  blank for skabelonen

  • Start appen ved at køre
yarn ios // or yarn android 

Dette vil også give dig en QR-kode, som du kan scanne ved hjælp af Camera-appen på iOS eller Expo-appen på Android.

Dette er godt. Vi har nu en ny React Native-app, der kører på både iOS og Android. Lad os begynde at forbinde det til din Firebase-backend.

  • Føj Firebase SDK til React Native-projektet
yarn add firebase 
  • Tilføj React Native Navigation-biblioteket ved at køre
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
  • Tilføj forskellige UI-komponenter og pakker, der skal bruges i projektet
yarn add react-native-keyboard-aware-scroll-view base-64 

Opret en Firebase-konfigurationsfil

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

Tilføj din firebase-konfiguration i src / firebase / config.js:

Du kan få alle disse oplysninger fra Firebase Console -> Projektindstillinger

3. Opret mappestruktur og opsæt ruter og navigation

  • Opret mappestrukturen ved at køre
mkdir src/screens src/screens/LoginScreen src/screens/RegistrationScreen src/screens/HomeScreen
  • Opret filstrukturen ved at køre
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
  • Føj denne kode til 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' 

Bare rolig, hvis projektet er brudt! Alt giver mening om et lille stykke tid.

  • Opsæt ruter og navigatorer

Tilsidesæt App.js- fil med følgende kodestykke:

4. Implementere brugergrænsefladen

Nu hvor vi har stilladset til appen, lad os gå videre og implementere UI-komponenterne på alle skærme. Vi går ikke ind i detaljerne om flex layout og React Native styling, da det er uden for denne tutorials omfang. Vi vil mest fokusere på React Native Firebase-integration.

Tilsidesæt blot filerne som følger:

  • src / LoginScreen / LoginScreen.js
  • src / LoginScreen / styles.js
  • src / RegistrationScreen / RegistrationScreen.js
  • src / RegistrationScreen / styles.js
  • src / HomeScreen / HomeScreen.js
  • src / HomeScreen / styles.js

På dette tidspunkt skal din app køre korrekt og vise følgende skærmbilleder (kun brugergrænseflade):

reagerer native firebase auth

Du kan skifte mellem de to skærme ved at trykke på linkknapperne i sidefoden.

Nu hvor vi har et smukt brugergrænseflade til login og tilmelding, lad os se, hvordan vi kan integrere vores React Native (og Expo) app med Firebase.

5. Reager Native Firebase - Registrering

Lad os starte med at oprette en ny konto med Firebase Auth, da login naturligvis kommer efter. Til dette skal vi tilføje Firebase-logikken til oprettelse af en ny konto med e-mail og adgangskode i RegistrationScreen.js ved at implementere onRegisterPress- metoden som følger:

I strømmen til oprettelse af konto ovenfor gør vi et par vigtige ting:

  • Vi kalder Firebase Auths createUserWithEmailAndPassword API (linje 13), som opretter en ny konto, der vises i Firebase Console -> Autentificeringstabel.
  • Hvis registreringen af ​​kontoen lykkedes, gemmer vi også brugerdataene i Firebase Firestore (linje 24). Dette er nødvendigt for at gemme ekstra brugerinformation, såsom fuldt navn, URL til profilfoto osv., Som ikke kan gemmes i godkendelsestabellen.
  • Hvis registreringen var vellykket, navigerer vi til startskærmen ved også at videregive data om brugerobjekter.
  • Hvis der opstår en fejl, viser vi simpelthen en advarsel med den. Fejl kan være ting som f.eks. Ingen netværksforbindelse, adgangskoden er for kort, e-mail ugyldig osv.

Genindlæs din app, og test registreringen. Hvis du har oprettet en konto, skal du kontrollere, at den vises i Firebase Console -> Authentication :

6. Reager Native Firebase - Login

Nu hvor vi er i stand til at oprette nye konti, lad os implementere login-funktionaliteten. Firebase SDK tager sig af alle nødvendige godkendelses- og godkendelsestrin til et sikkert login.

Åbn LoginScreen.js , importer firebase og udfør metoden onLoginPress :

Genindlæs din app, og gå videre og log ind med en eksisterende konto. Appen skal føre dig til startskærmen, hvis legitimationsoplysningerne var korrekte, eller den advarer dig med en fejl, hvis noget gik galt.

7. Opret brugeroplysninger

You’ll notice that if you quit the app and open it again, it will show the login screen again. For a good user experience, we’d want to land all logged in users on the Home screen. No one wants to type in their login credentials every time they want to use an app.

This is also known as persistent login. Fortunately, Firebase SDK takes care of this for us, dealing with all the security concerns. Persistent login is enabled by default in Firebase, so all we need to do is fetch the currently logged in user.

Open App.js and let’s implement the persistent login feature:

onAuthStateChanged returns the currently logged in user. We then fetch all the extra user data that we stored in Firestore, and set it on the current component’s state. This will re-render the app component, which will display the Home screen.

Notice how we call this the first time the app loads by leveraging the useEffect hook.

8. Writing and Reading Data from Firebase Firestore

We’ve already used Firestore above, for saving extra information on our users (the full name). In this dedicated section, we’re going to see how we can write data to Firestore, and how we can query it.

We’ll also cover how to observe (listen to) changes in the Firestore collection and have those be reflected on the screen, in real-time. These can be very helpful in real-time apps, such as a React Native Chat.

To simplify, we are going to save some text items into a Firestore collection named “entities”. Think of these as tasks, posts, tweets, anything you want. We’ll create a simple file that adds a new entity and we’ll also list all the entities that belong to the currently logged in user. Additionally, the list will be updated in real-time.

  • Implement HomeScreen.js by rewriting it to the code below
  • Style the home screen, by overriding HomeScreen/styles.js to:
  • Reload the app and observe the new home screen. Type in some text and press the Add button
  • Nothing happened.
  • Create an index on the entities Firestore collection

You’ll notice that the list of entities is not rendered. If you check out the logs, you’ll see an warning about “The query requires an index”, followed by a long URL:

This informs us that we can’t query the entities table by authorID and sort the data by createdAt in descending order, unless we create an index. Creating an index is actually really easy — simply click on that URL and then click the button:

  • Reload the app again

Now everything works as expected:

  • The app lists all the entities in the entities collection, in descending creation order
  • Adding a new entity works fine
  • The list updates in real-time (try deleting an entry directly in the database, or adding a new one directly from the app)

This is how your Firestore database looks like now:

This is how you read and write from Firestore in React Native. Let’s move forward to the last section.

Play around with the app, by adding new entities. This is the final project:

Conclusion

Firebase makes it really easy to add authentication and database support to any React Native app. Firebase SDK is extremely powerful, supporting a lot of common reading and writing database patterns.

In addition to React Native, Firebase SDK provides support for a lot of other languages, such as Swift, Kotlin or Flutter. Check out those links for similar Firebase starter kits in various languages.

We’ve showcased the most basic ones in this React Native Firebase tutorial. In the next series, we’ll cover more advanced features, such as Firebase Storage (file upload) and push notifications.

Hvis du kunne lide denne tutorial, så giv mig en stjerne på Github repo og del dette med dit samfund. Du kan tjekke endnu flere gratis React Native-projekter på Instamobile. Skål!