Πώς να δημιουργήσετε μια εφαρμογή Native React και να την ενσωματώσετε στο Firebase

Σε αυτό το σεμινάριο, πρόκειται να δημιουργήσουμε μια εφαρμογή React Native που είναι ενσωματωμένη σε ένα Firebase backend. Η εφαρμογή θα υποστηρίζει τόσο το React Native CLI όσο και το Expo CLI.

Αυτό το σεμινάριο React Native Firebase θα καλύψει τις κύριες λειτουργίες, όπως έλεγχο ταυτότητας, εγγραφή και λειτουργίες CRUD βάσης δεδομένων (Firestore)

Μπορείτε επίσης να κατεβάσετε τον πλήρη πηγαίο κώδικα από το Github εάν θέλετε να μεταβείτε κατευθείαν στον κώδικα.

Αυτό το σεμινάριο θα σας καθοδηγήσει στις λεπτομέρειες των ακόλουθων ενοτήτων:

  1. Δημιουργία έργου Firebase
  2. Δημιουργία και διαμόρφωση μιας νέας εφαρμογής React Native
  3. Ρύθμιση της δομής του φακέλου, των διαδρομών και της πλοήγησης
  4. Εφαρμογή του περιβάλλοντος εργασίας χρήστη για οθόνες σύνδεσης, εγγραφής και αρχικής οθόνης
  5. Εγγραφή στο Firebase Auth
  6. Συνδεθείτε με το Firebase Auth
  7. Διαπιστευτικά μόνιμης σύνδεσης
  8. Σύνταξη και ανάγνωση δεδομένων από το Firebase Firestore

Χωρίς άλλη παραλλαγή, ας αρχίσουμε να χτίζουμε το έργο React Native Firebase. Η τελική εφαρμογή για κινητά θα έχει την εξής μορφή:

αντιδρούν το φυσικό firebase

1. Δημιουργήστε ένα έργο Firebase

Μεταβείτε στο Firebase.com και δημιουργήστε έναν νέο λογαριασμό. Μόλις συνδεθείτε, θα μπορείτε να δημιουργήσετε ένα νέο έργο στο Firebase Console.

  • Δημιουργήστε έναν νέο λογαριασμό στο Firebase.com
  • Δημιουργήστε ένα νέο έργο στο Firebase Console
  • Ενεργοποίηση μεθόδου ελέγχου email και κωδικού πρόσβασης στο Firebase Console -> Authentication -> Μέθοδος σύνδεσης
  • Δημιουργήστε μια νέα εφαρμογή iOS, με το App ID com.reactnativefirebase
  • (Προαιρετικό) Δημιουργήστε μια νέα εφαρμογή Android με το όνομα πακέτου com.reactnativefirebase
  • Κατεβάστε το αρχείο διαμόρφωσης που δημιουργήθηκε στο επόμενο βήμα στον υπολογιστή σας ( GoogleService-Info.plist για iOS και google-services.json για Android)

Το Firebase σάς επιτρέπει να δημιουργείτε εφαρμογές χωρίς backend . Είναι ένα προϊόν που λειτουργεί πάνω από το Google Cloud και επιτρέπει στους προγραμματιστές να δημιουργούν εφαρμογές ιστού και κινητών χωρίς να χρειάζονται τους δικούς τους διακομιστές.

Αυτό εξοικονομεί πολύ χρόνο, καθώς δεν χρειάζεται να γράψετε κώδικα backend. Είναι επίσης εξαιρετικά επεκτάσιμο, υποστηριζόμενο από την υποδομή της Google.

Στο Firebase, θα μπορείτε να αποθηκεύετε όλα όσα χρειάζεστε για την εφαρμογή σας - χρήστες, δεδομένα, αρχεία, διακριτικά ειδοποίησης push κ.λπ. Όλες αυτές οι πληροφορίες διατίθενται στους πελάτες κινητής τηλεφωνίας μέσω των SDK Firebase, τα οποία είναι συμβατά με το React Native . Αυτό σημαίνει ότι όλες οι αλληλεπιδράσεις με το backend αφαιρούνται και ενσωματώνονται στο SDK, επομένως οι προγραμματιστές κινητής τηλεφωνίας δεν χρειάζεται να ανησυχούν για κλήσεις API, ανάλυση δεδομένων, διαχείριση πριζών και ούτω καθεξής.

2. Δημιουργήστε και διαμορφώστε μια νέα εφαρμογή Native React

Θα κάνουμε την εφαρμογή React Native Firebase συμβατή με το Expo CLI και το React Native CLI.

Θα χρησιμοποιήσουμε το Expo για τώρα, καθώς διευκολύνει τους νεοεισερχόμενους να κάνουν προεπισκόπηση των εφαρμογών τους. Αλλά δεν θα χρησιμοποιούμε συγκεκριμένες βιβλιοθήκες του Expo, οπότε ο κώδικας src μπορεί απλά να χρησιμοποιηθεί σε οποιαδήποτε εφαρμογή React Native, ανεξάρτητα από το ικρίωμα.

Θα χρησιμοποιήσουμε το Firebase Web SDK, το οποίο είναι συμβατό με το Expo και το React Native CLI, και υποστηρίζεται απευθείας από την Google.

Αν θέλετε να χρησιμοποιήσετε το react-native-firebase αντ 'αυτού, μη διστάσετε να το εγκαταστήσετε και να το διαμορφώσετε (ο κωδικός θα παραμείνει ο ίδιος). Ωστόσο, λάβετε υπόψη ότι δεν το συνιστούμε για μερικούς λόγους:

  • Δεν υποστηρίζεται άμεσα από την Google, οπότε η διατήρησή του θα είναι πολύ πιο δύσκολη, δεδομένου ότι είναι ένα επιπλέον επίπεδο που μπορεί να προκαλέσει σφάλματα και
  • Επίσης, δεν λειτουργεί με το Expo, το οποίο μπορεί να είναι μια λύση για πολλούς προγραμματιστές.

Τα παρακάτω βήματα καλύπτονται επίσης στην επίσημη τεκμηρίωση React Native σχετικά με τον τρόπο ρύθμισης του περιβάλλοντος προγραμματιστή σας.

  • Εγκαταστήστε το Expo CLI

Στο τερματικό σας, απλώς εκτελέστε

npm install -g expo-cli
  • Δημιουργήστε μια νέα εφαρμογή React Native εκτελώντας
expo init react-native-firebase 

Για το πρότυπο, επιλέξτε τη Διαχειριζόμενη ροή εργασίας  -  Κενή

  • Ξεκινήστε την εφαρμογή εκτελώντας
yarn ios // or yarn android 

Αυτό θα σας παρουσιάσει επίσης έναν κωδικό QR τον οποίο μπορείτε να σαρώσετε χρησιμοποιώντας την εφαρμογή Κάμερα σε iOS ή την εφαρμογή Expo σε Android.

Αυτό είναι υπέροχο. Τώρα έχουμε μια νέα εφαρμογή React Native, που λειτουργεί τόσο σε iOS όσο και σε Android. Ας αρχίσουμε να το συνδέουμε με το Firebase backend.

  • Προσθέστε το Firebase SDK στο έργο React Native
yarn add firebase 
  • Προσθέστε τη βιβλιοθήκη React Native Navigation εκτελώντας
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
  • Προσθέστε διάφορα στοιχεία και πακέτα διεπαφής χρήστη για χρήση στο έργο
yarn add react-native-keyboard-aware-scroll-view base-64 

Δημιουργήστε ένα αρχείο διαμόρφωσης Firebase

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

Προσθέστε τη διαμόρφωση του firebase στο src / firebase / config.js:

You can get all this information from Firebase Console -> Project Settings

3. Create the Folder Structure and Set Up Routes and Navigation

  • Create the folder structure by running
mkdir src/screens src/screens/LoginScreen src/screens/RegistrationScreen src/screens/HomeScreen
  • Create the files structure by running
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
  • Add this code to 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' 

Don’t worry if the project is broken! Everything will make sense in a little while.

  • Set up the routes & navigators

Override App.js file with the following code snippet:

4. Implement the UI

Now that we have the scaffold of the app, let’s go ahead and implement the UI components of all screens. We’re not going into the details of flex layout and React Native styling, since that is outside the scope for this tutorial. We’re going to focus mostly on React Native Firebase integration.

Simply override the files as follows:

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

At this point, your app should run properly and display the following screens (UI only):

αντιδράστε εγγενή εντολή firebase

You can switch between the two screens by tapping the links buttons in the footer.

Now that we have a beautiful UI for login and sign up, let’s see how we can integrate our React Native (and Expo) app with Firebase.

5. React Native Firebase — Registration

Let’s start with creating a new account with Firebase Auth, since naturally login comes after. For this, we are going to add the Firebase logic for creating a new account with email & password in RegistrationScreen.js, by implementing the onRegisterPress method as follows:

In the account creation flow above, we do a few important things:

  • We call Firebase Auth’s createUserWithEmailAndPassword API (line 13), which creates a new account that will show up in Firebase Console -> Authentication table.
  • If the account registration was successful, we also store the user data in Firebase Firestore (line 24). This is necessary for storing extra user information, such as full name, profile photo URL, and so on, which cannot be stored in the Authentication table.
  • If registration was successful, we navigate to the Home Screen, by passing in the user object data as well.
  • If any error occurs, we simply show an alert with it. Errors can be things such as no network connection, password too short, email invalid, and so on.

Reload your app and test the registration. If you successfully created one account, check that it shows up in Firebase Console ->Authentication:

6. React Native Firebase — Login

Now that we are able to create new accounts, let’s implement the login functionality. Firebase SDK takes care of all the authorization and authentication steps needed for a secure login.

Open LoginScreen.js, import firebase and complete the onLoginPress method:

Reload your app and go ahead and login with an existing account. The app should take you to the home screen if the credentials were correct, or it will alert you with an error if anything went wrong.

7. Persist Login Credentials

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.

Αν σας άρεσε αυτό το σεμινάριο, δώστε μου ένα αστέρι στο Github repo και μοιραστείτε το με την κοινότητά σας. Μπορείτε να δείτε ακόμα περισσότερα δωρεάν έργα React Native στο Instamobile. Στην υγειά σας!