כיצד לבנות אפליקציית Native React ולשלב אותה עם Firebase

תִכנוּת

במדריך זה אנו הולכים לבנות אפליקציית React Native המשולבת עם backend של Firebase. האפליקציה תומכת גם ב- CLI של React Native וגם ב- CLO Expo.

מדריך זה של 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. האפליקציה הסופית לנייד תיראה כך:

להגיב על בסיס האש המקורי

1. צור פרויקט Firebase

עבור אל Firebase.com וצור חשבון חדש. לאחר הכניסה, תוכל ליצור פרויקט חדש במסוף Firebase.

  • צור חשבון חדש ב- Firebase.com
  • צור פרויקט חדש ב- Firebase Console
  • אפשר את שיטת אימות הדוא"ל והסיסמה במסוף Firebase -> אימות -> שיטת כניסה
  • צור אפליקציית iOS חדשה עם מזהה אפליקציה com.reactnativefirebase
  • (אופציונלי) צור אפליקציית Android חדשה עם שם החבילה com.reactnativefirebase
  • הורד את קובץ התצורה שנוצר בשלב הבא למחשב שלך ( GoogleService-Info.plist עבור iOS ו- google-services.json עבור Android)

Firebase מאפשר לך לבנות אפליקציות ללא backend . זהו מוצר הפועל על גבי ענן גוגל ומאפשר למפתחים לבנות אפליקציות אינטרנט ומובייל ללא צורך בשרתים משלהם.

זה חוסך זמן רב, מכיוון שאינך צריך לכתוב קוד קוד אחורי. זה גם ניתן להרחבה, והוא מגובה בתשתית גוגל.

ב- Firebase, תוכל לאחסן את כל הדרוש לאפליקציה שלך - משתמשים, נתונים, קבצים, אסימונים לדחיפה וכו '. כל המידע הזה זמין ללקוחות הסלולריים באמצעות ערכות ה- SDK של Firebase, התואמות ל- React Native. . פירוש הדבר שכל האינטראקציות עם ה- backend מופשטות ונמצאות בתוכנת ה- SDK, כך שמפתחים ניידים אינם צריכים לדאוג לשיחות API, ניתוח נתונים, ניהול שקעים וכן הלאה.

2. צור והגדר אפליקציה חדשה של Native React

אנו הולכים להפוך את אפליקציית React Native Firebase לתואמת הן ל- Expo CLI והן ל- React Native CLI.

אנו נשתמש ב- Expo לעת עתה, מכיוון שזה מקל על החדשים להציג תצוגה מקדימה של האפליקציות שלהם. אך לא נשתמש בספריות ספציפיות של אקספו, ולכן ניתן להשתמש בקוד ה- src פשוט בכל אפליקציית React Native, ללא קשר לפיגומים שלה.

אנו הולכים להשתמש ב- SDK של Firebase, התואם הן ל- Expo והן ל- React Native CLI, ונתמך ישירות על ידי גוגל.

אם ברצונך להשתמש במקום זאת ב- react-native-firebase, אל תהסס להתקין ולהגדיר זאת (הקוד עדיין יהיה זהה). אך זכור כי איננו ממליצים על כך מכמה סיבות:

  • זה לא נתמך ישירות על ידי גוגל, כך שהתחזוקה שלו תהיה הרבה יותר קשה בהתחשב בכך שהיא שכבה נוספת שיכולה לגרום לבאגים, וכן
  • זה גם לא עובד עם אקספו, שיכולה להפסיק עסקאות עבור מפתחים רבים.

השלבים שלהלן מכוסים גם בתיעוד הרשמי של React Native כיצד להגדיר את סביבת ההתפתחות שלך.

  • התקן את אקספו CLI

במסוף שלך פשוט הפעל

npm install -g expo-cli
  • צור אפליקציית React Native חדשה על ידי הפעלה
expo init react-native-firebase

לתבנית בחר זרימת העבודה המנוהלת  -  ריקה

  • הפעל את האפליקציה על ידי הפעלה
yarn ios // or yarn android

זה גם יציג בפניכם קוד QR אותו תוכלו לסרוק באמצעות אפליקציית המצלמה ב- iOS, או אפליקציית האקספו באנדרואיד.

זה נהדר. כעת יש לנו אפליקציית React Native חדשה, הפועלת גם ב- iOS וגם ב- Android. בואו נתחיל לחבר אותו לגיבוי ה- Firebase שלך.

  • הוסף את ה- SDK של Firebase לפרויקט React Native
yarn add firebase
  • הוסף את ספריית הניווט של Native React על ידי הפעלה
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:

תוכלו לקבל את כל המידע הזה מסוף Firebase -> הגדרות הפרויקט

3. צור את מבנה התיקיה והגדר מסלולים וניווט

  • צור את מבנה התיקיות על ידי הפעלה
mkdir src/screens src/screens/LoginScreen src/screens/RegistrationScreen src/screens/HomeScreen
  • צור את מבנה הקבצים על ידי הפעלה
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
  • הוסף קוד זה ל- 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'

אל תדאג אם הפרויקט נשבר! הכל יהיה הגיוני תוך זמן קצר.

  • הגדר את המסלולים והנווטים

עקוף קובץ App.js עם קטע הקוד הבא:

4. יישם את ממשק המשתמש

עכשיו שיש לנו את הפיגום של האפליקציה, בואו נמשיך וניישם את רכיבי ממשק המשתמש של כל המסכים. אנו לא נכנסים לפרטים של פריסת Flex ו- React Native Styling, מכיוון שזה מחוץ לתחום של הדרכה זו. אנו נתמקד בעיקר בשילוב של React Native Firebase.

כל שעליך לעשות הוא לעקוף את הקבצים באופן הבא:

  • 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 ושתף את זה עם הקהילה שלך. אתה יכול לבדוק עוד יותר פרויקטים בחינם של React Native ב- Instamobile. לחיים!