אם אתם בונים אפליקציה עם React או React Native ורוצים להוסיף פרטי התחברות, מסד נתונים בזמן אמת, או פשוט להפסיק לדאוג לגבי ה-backend, Firebase היא אחת האפשרויות הנוחות והחזקות ביותר הזמינות כרגע . היא מאפשרת לכם אימות, מסד נתונים, אחסון קבצים ועוד הרבה יותר מבלי ליצור ממשק API אחד משלכם.
במאמר זה, נראה, שלב אחר שלב, כיצד לחבר אפליקציית React (וגם React Native/Expo) ל-Firebase , כיצד לבנות את הפרויקט, להגדיר אימות דוא"ל וגוגל, לשמור על סשנים של משתמשים, ולקרוא/לכתוב נתונים גם ל-Firestore וגם למסד הנתונים בזמן אמת. נעשה זאת באמצעות דוגמאות מהעולם האמיתי וקוד עם הערות, ונסביר זאת בשפה קלה להבנה כך שתוכלו לעקוב גם אם אינכם מומחי טכנולוגיה.
מה זה Firebase ולמה הוא משתלב כל כך טוב עם React?
Firebase הוא פלטפורמת Backend כשירות של גוגל המספקת מגוון שירותים מוכנים לשימוש: אימות, מסד נתונים בזמן אמת, Firestore (מסד נתונים של מסמכים NoSQL), אחסון קבצים, ניתוח נתונים, כלי צמיחה, מונטיזציה ועוד. הוא התחיל כמסד נתונים בזמן אמת, אך לאחר מספר איטרציות, הוא התפתח לפלטפורמת backend מקיפה.
במקום להקים שרת משלכם, לתכנן את ה-API שלכם, לנהל את התשתית ולהרחיב אותה, בעזרת Firebase תוכלו לחבר את אפליקציית React שלכם ישירות לשרת האחורי באמצעות ה-SDK הרשמי שלה . משמעות הדבר היא שמשימות רבות בשרת האחורי (אימות, CRUD, כללי אבטחה, התראות וכו') מצטמצמות למספר קטן של קריאות לפונקציות JavaScript מתועדות היטב.
האינטגרציה עם React היא טבעית מאוד מכיוון ש- Firebase חושף את הנתונים שלו בפורמט JSON , וערכות ה-SDK שלו נועדו לעבוד בצד הלקוח. עם React, פשוט קוראים את הנתונים, ממלאים את מצב הרכיבים ומאפשרים לספרייה לטפל ברינדור הכל בכל פעם שמשהו משתנה. כאשר משתמשים במאזינים בזמן אמת, כל עדכון מסד נתונים מפעיל רינדור מחדש אוטומטי, שמתאים בצורה מושלמת למודל ההצהרתי של React.
יצירה והגדרה של פרויקט Firebase
לפני שאתם מתחילים לכתוב קוד של React, עליכם להכין את סביבת Firebase שלכם. התהליך דומה מאוד בין אם אתם משתמשים בו מאפליקציית אינטרנט של React, React Native או Expo. בכל המקרים, הצעד הראשון הוא יצירת הפרויקט בקונסולת Firebase.
עבור אל https://firebase.google.com/ , התחבר באמצעות חשבון גוגל שלך, וגש לקונסולה. משם, צור פרויקט חדש , תן לו שם מוכר (לדוגמה, "react-firebase" או "auth-firebase-react"), ובחר את האזור שהכי הגיוני עבור קהל היעד של האפליקציה שלך.
לאחר יצירת הפרויקט, Firebase ייקח אתכם ללוח המחוונים הראשי. תראו מספר אפשרויות להוספת אפליקציות: iOS, Android ו-Web. עבור אפליקציית אינטרנט של React, עליכם לבחור את סמל האינטרנט, בעוד שעבור React Native, תוכלו לרשום אפליקציות iOS ו/או Android לפי הצורך. המטרה בכל המקרים היא להשיג תצורת Firebase עם מפתחות כגון apiKey, authDomain, projectId ודומיו.
הקונסולה תציג לכם קטע קוד שנראה בערך כך:
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);ב-React Web, אתם באמת צריכים רק את אובייקט התצורה ואת הקריאה לאתחול האפליקציה באמצעות ה-SDK המודולרי הנוכחי. תראו כיצד להתאים זאת למבנה הפרויקט שלכם בהמשך.
בחירת מסד נתונים: מסד נתונים בזמן אמת לעומת Firestore
Firebase מציעה שני סוגים עיקריים של מסדי נתונים: מסד נתונים בזמן אמת ו- Cloud Firestore . שניהם NoSQL, אך יש ביניהם הבדלים חשובים במודל הנתונים, בשאילתות ובחיוב.
מסד נתונים בזמן אמת הוא מסד נתונים ענק של JSON שבו הכל מאורגן במבנה עץ יחיד. זה אידיאלי כשאתם צריכים עדכונים מהירים מאוד וסנכרון קל בזמן אמתהמבנה מבוסס על צמתים ונתיבים, ואתה ניגש אליהם באמצעות הפניות כגון firebase.database().ref('object/name')זוהי האפשרות הקלאסית אם אתם רוצים משהו כמו צ'אט, נוכחות משתמשים או נתונים פשוטים מאוד.
Firestore, לעומת זאת, מארגן מידע לאוספים ולמסמכים . לכל מסמך יש שדות, וניתן לקנן בתוכו אוספים משניים. זה מאפשר שאילתות מורכבות יותר, אינדקסים מורכבים, מיון ומסננים משולבים. זה מושלם עבור יישומים גדולים יותר שבהם אתם זקוקים לשאילתות גמישות, גמישות וכללי אבטחה אקספרסיביים יותר.
ניתן להשתמש בשני מסדי הנתונים בצורה חלקה בתוך React, אפילו באותה אפליקציה. לדוגמה, ניתן לאחסן משתמשים, פוסטים או משימות ב-Firestore ולמנף את מסד הנתונים בזמן אמת עבור נתונים דינמיים ביותר שרוצים לנטר באופן רציף. המסקנה המרכזית היא שב-React, פשוט מקשיבים לשינויים ומעדכנים את המצב ; Firebase מטפל בשאר.
יצירת אפליקציית React Native / Expo עם Firebase
אם אתם עובדים עם React Native, תוכלו לשלב את Firebase באמצעות Firebase Web SDK , התואם במלואו לפרויקטים שנוצרו באמצעות Expo או ממשק שורת הפקודה הרשמי של React Native. בדרך זו, אינכם קשורים לספריות ביניים ונשארים במסגרת התמיכה הרשמית של גוגל.
כדי להתחיל עם Expo, התקינו את ממשק שורת הפקודה Expo באופן גלובלי מהטרמינל באמצעות npm install -g expo-cliלאחר מכן, צור פרויקט React Native חדש עם expo initבחר תבנית בסיסית (לדוגמה, "ריקה" עם זרימת עבודה מנוהלת) והפעל את האפליקציה עם yarn ios o yarn androidExpo יציג לכם קוד QR שתוכלו לסרוק באמצעות המצלמה ב-iOS או באמצעות אפליקציית Expo באנדרואיד כדי לצפות בפרויקט שלכם במכשיר.
לאחר שהאפליקציה הבסיסית שלך פועלת, הוסף את התלויות הדרושות: ראשית, את ערכת פיתוח התוכנה Firebase עצמה, עם yarn add firebaseלאחר מכן ניתן לשלב ספריות ניווט כגון @react-navigation/native y @react-navigation/stack, יחד עם החבילות הנוספות שהם צריכים ב-React Native (gesture-handler, reanimated, screens, safe-area-context וכו') כדי לנהל את הזרימות בין התחברות, רישום ומסכי הבית.
כמו כן, כדאי מאוד להתקין כמה רכיבי עזר עבור ממשק המשתמש הנייד, כגון react-native-keyboard-aware-scroll-view כדי לטפל כראוי במקלדת בטפסים, וספריות כמו base64 כדי לספק פונקציות גלובליות שחסרות בחלק מזמני הריצה של המכשירים הניידים (btoa, atob וכו'). כל זה נוסף באמצעות פקודת התקנה אחת באמצעות yarn בפרויקט שלך.
הגדר את Firebase ב-React / React Native
תרכז את תצורת Firebase שלך בקובץ יחיד, כך ששאר האפליקציה תצטרך לייבא רק מופע אותחל מראש. צור, לדוגמה, תיקייה מקור/בסיס אש ובתוך קובץ תצורה, כמו config.js (o config.ts ב-TypeScript).
בקובץ זה, ייבאו את הפונקציות הדרושות מ-Firebase SDK והגדירו את אובייקט התצורה שלכם עם הערכים המסופקים על ידי קונסולת Firebase. בפרויקטים של React Native המשתמשים ב-SDK הישן יותר, ייתכן שתראו משהו כזה:
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 };פרויקטים של אינטרנט המשתמשים ב-Vite ו-TypeScript משתמשים בדרך כלל בגרסה המודולרית של Firebase SDK 9, ומומלץ למקם ערכים רגישים במשתני סביבהלדוגמה, ניתן ליצור קובץ .env בשורש ולהגדיר מפתחות כ VITE_FIREBASE_API_KEY, VITE_FIREBASE_AUTH_DOMAINוכו'. לאחר מכן, בקובץ התצורה, אתה בונה את האובייקט מ import.meta.env['VITE_FIREBASE_API_KEY'] ו דומה.
לא משנה מה הגישה, הדפוס זהה: אתם מאתחלים את אפליקציית Firebase פעם אחת בלבד ומייצאים את המופע הזה (או מייצאים אובייקטים ספציפיים כמו FirebaseAuth , Firestore או Realtime Database ) לשימוש קל בשאר הפרויקט.
ארכיטקטורת מסך בסיסית: כניסה, רישום ודף הבית
כשמשלבים אימות באפליקציית React Native, מבנה נפוץ מאוד הוא שלושה מסכים עיקריים: התחבר, רישום y ביתבנוסף, ניתן לרכז את לוגיקת הניווט ברכיב שורש יחיד, בדרך כלל App.js.
ב-React Native עם React Navigation, הדבר האופייני לעשות הוא ליצור תיקייה src/screens עם תיקיות משנה לכל מסך (LoginScreen, RegistrationScreen, HomeScreen) וקובץ אינדקס שמייצא כל אחת מהן. לאחר מכן, ב App.jsאתה יוצר נווט מחסנית שמציג מסך אחד או אחר בהתאם לשאלה האם יש משתמש מאומת או לא.
הרעיון הוא לשמור את מצב הרכיב. App un המשתמש (או ריק) ודגל של טועןבזמן שסטטוס האימות נבדק, ניתן להציג מסך ריק או טוען. לאחר שתדעו אם המשתמש מחובר, תוכלו להחליט אילו מסלולים להציג: אם יש משתמש, הצג את מסך הבית; אם לא, הצג את מסכי ההתחברות והרישום.
מבחינה ויזואלית, מסכי הכניסה והרישום הם טפסים פשוטים עם שדות כגון דוא"ל, סיסמה, ובמקרה של רישום, שם מלא או אישור סיסמה. כדי לשפר את חוויית המובייל, הכל בדרך כלל עטוף ב- KeyboardAwareScrollView כך שהמקלדת לא מכסה את שדות הקלט. מסך הבית, לעומת זאת, יכול להתחיל כתצוגה מינימלית (טקסט פשוט) ובהמשך להתפתח לחלק באפליקציה שבו קוראים וכותבים נתונים מ-Firestore.
עיצוב וניהול טפסים בעזרת Hooks ב-React
ביישום אינטרנט של React עם TypeScript, דרך נקייה לטפל בטפסי אימות היא לכלול את הלוגיקה בתוך וו מותאם אישיתלדוגמה, ניתן ליצור useForm.tsx בתוך תיקייה src/hooks, שמקבל מצב התחלתי כללי (אובייקט עם המאפיינים של הטופס) ומחזיר גם את הערכים וגם פונקציה לטיפול בשינויים.
הקרס הזה יכול להשתמש useState באופן פנימי כדי לאחסן את הטופס ולחשוף פונקציה handleChange שמקבל את אירוע הקלט, קורא את התכונה שם של האלמנט ולעדכן את המאפיין המתאים ב-state. בדרך זו, יהיו לך את השמות הנכונים בקלטים (לדוגמה, name="email" y name="pass") הוא המפתח לגרום להכל לעבוד.
ברכיב הכניסה, לדוגמה, היית קורא ל- useForm({ email: '', pass: '' }) ותקבלו את האימייל, הסיסמה, אובייקט הטופס והפונקציה handleChange. לכל קלט יהיה קלט משלו. ערך y על שינוי מקושר לערכים אלה ולפונקציית ה-hook. בעת שליחת הטופס, יהיה לך handleSubmit מה עושה e.preventDefault() ולאחר מכן קורא ללוגיקת האימות באמצעות Firebase.
אותו הדבר חל על טופס ההרשמה; ניתן אפילו לחלץ רכיב טופס רב פעמי, מכיוון שלעתים קרובות רק טקסט הכפתור והקריאה החוזרת שבוצעה בעת השליחה משתנים, בעוד שהמבנה הבסיסי נשאר זהה.
הגדרת אימות ב-Firebase
כדי לאפשר ל-React לבצע אימות עם Firebase, עליך להפעיל ספקי אימות בקונסולת Firebase. במקטע אימות , עבור ללשונית שיטות כניסה והפעל דוא"ל/סיסמה , ואם תרצה, אימות גוגל.
עבור ספק הדוא"ל/סיסמה, פשוט הפעל אותו ושמור. עבור גוגל, בנוסף להפעלתו, תצטרך לבחור את כתובת הדוא"ל שתשמש כברירת מחדל. מאותו רגע, הפרויקט שלך יהיה מוכן לקבל כניסות באמצעות שתי השיטות.
בכרטיסייה משתמשים באותו מדור, תראה כיצד נרשמים חשבונות חדשים שנוצרו דרך האפליקציה שלך, באמצעות דוא"ל וסיסמה או דרך גוגל. זהו מקום טוב לוודא שהשילוב בין שדות פועל כהלכה.
תכונות אימות עם Firebase ב-React
באפליקציית אינטרנט המשתמשת ב-React ו-TypeScript, מומלץ לקבץ את כל לוגיקת האימות בקובץ services, לדוגמה, src/firebase/services.ts . שם ניתן להגדיר פונקציות ספציפיות לכל פעולה: כניסה עם גוגל, כניסה עם פרטי גישה, רישום, יציאה ומנטר סטטוס אימות.
כדי להשתמש בספק גוגל, הצעד הראשון הוא ליצור מופע של ספק אימות גוגל (או ספק מקביל בהתאם למקרה שלך), ולאחר מכן להגדיר פונקציה אסינכרונית שקוראת signInWithPopup(FirebaseAuth, provider)אם קריאה זו תצליח, תקבלו אובייקט עם המשתמש המאומת, שממנו תוכלו לחלץ uid, שם תצוגה, כתובת URL של תמונה ושדות אחרים. לעתים קרובות, אתה רק צריך לעבוד עם ה-UID ולהחזיר אותו כדי ליצור את הסשן הגלובלי.
לאימות באמצעות דוא"ל וסיסמה, ישנן שתי פונקציות עיקריות: צור משתמש עם דוא"ל וסיסמה y כניסהעםדוא"לוסיסמהשניהם מחכים להזדמנות... אימות Firebaseנדרשים כתובת דוא"ל וסיסמה. הראשון יוצר משתמשים חדשים, השני מאמת את קיומם ומאמת אותם. באופן פנימי, Firebase מטפל באימות פורמט הדוא"ל, אורך הסיסמה וגורמים אחרים, ומחזיר שגיאות ברורות שניתן ליירט בבלוק. נסה לתפוס ולהראות בעזרת דרך פשוטה alert או עם מערכת ההתראות שלך.
כדי להתנתק, פשוט השתמשו בפונקציה signOut(FirebaseAuth) , אותה תוכלו גם לאגד בפונקציה של השירות שלכם כדי לשמור על ניקיון ועקביות יותר של ה-API של הקוד.
התבוננות בשינויים בסשן באמצעות onAuthStateChanged
בעיה נפוצה מאוד בתחילת תהליך האימות היא שלמרות שהכניסה עובדת, כשאתם מטפלים מחדש בדף אפליקציית React או סוגרים ופותחים מחדש את האפליקציה לנייד, נראה כאילו הסשן אבד . עם זאת, ל-Firebase יש שמירה על מצב אימות כברירת מחדל: אתם פשוט לא קוראים אותו נכון.
הפתרון הוא להשתמש בפונקציה onAuthStateChanged מתוך Firebase Auth SDK. פונקציה זו מקבלת את מופע האימות וקריאה חוזרת שתבוצע בכל פעם שהמצב משתנה: כאשר המשתמש מתחבר, כאשר הוא מתנתק, או כאשר האפליקציה מאותחלת ו-Firebase מאחזר את האישורים השמורים.
באפליקציית React, הדבר הרגיל לעשות הוא ליצור פונקציה, לדוגמה observeAuthState, שמקבל קובע מצבים (כגון setSession) ושיחה פנימית onAuthStateChanged(FirebaseAuth, user => { ... })באותו קריאה חוזרת, אם המשתמש ריק או לא מוגדראתה מגדיר את הסשן הגלובלי כלא מאומת; אם יש משתמש, אתה שומר את שם המשתמש שלו. uid וסמן את הסטטוס כמאומת.
צופה זה מופעל בדרך כלל בתוך useEffect ברמה הגבוהה ביותר של האפליקציה (לדוגמה, בתוך הקשר) כך שהוא יפעל רק פעם אחת כאשר האפליקציה מופעלת. זה מבטיח שגם אם המשתמש יטען מחדש את הדפדפן, אם Firebase זוכר את הסשן, המצב הגלובלי שלך יעודכן אוטומטית ונשלח ישירות לחלק הפרטי של האפליקציה מבלי לבקש שוב אישורים.
הקשר אימות גלובלי ב-React
כדי להימנע מהעברת props מקומפוננט אחד לאחר, אסטרטגיה נוחה מאוד ב-React היא ליצור Context API ייעודי לאימות . בדרך זו, כל חלק באפליקציה יכול לקבוע אם המשתמש אומת, את ה-UID שלו, ואילו פונקציות זמינות לו (התחברות, התנתקות וכו') ללא prop drilling.
התחל על ידי יצירת תיקייה src/context ובתוך קובץ, למשל authContext.tsxשם אתה מגדיר ממשק שמתאר מה ההקשר שלך יחשוף: ה- מצב של ההפעלה (לדוגמה, 'בדיקה', 'מאומת', 'לא מאומת'), ה- תעודת זהות של המשתמש (או null אם אין משתמש) והפונקציות להתחברות או התנתקות.
לאחר מכן, הגדירו מצב התחלתי, עם סטטוס ב'בדיקה' ו-userId ב-null, וליצור הקשר עם createContextלאחר מכן, בנו רכיב ספק אישור שמקבל ילדים, להשתמש useState לנהל את הסשן ולקרוא לפונקציה שלך observeAuthState ב useEffect עם ההרכבה.
בתוך ספק זה, כדאי שיהיו פונקציות עזר: אחת ליציאה שקוראת לשירות logoutFirebase שלך ומשאירה את המצב כלא מאומת, אחרת לאלץ את המצב לבצע 'בדיקה' בעת הפעלת זרימת אימות, ואחרת לאימות תוצאת הכניסה/הרשמה (אם אתה מקבל uid, סמן אותו כמאומת; אם לא, קרא לפונקציית היציאה כדי לנקות שאריות של הפעלה).
בעזרת זה, ניתן ליישם שלוש פעולות ציבוריות בהקשר: כניסה עם גוגל, handleLoginWithCredentials y handleRegisterWithCredentialsכל אחד מהם יתחיל את ה"בדיקה", יפעיל את פונקציית השירות המתאימה, ויעביר את ההחלטה הסופית לאימות המשותף שיצרת. בסופו של דבר, ה- AuthContext.Provider זה יחשוף גם את המצב (status, userId) וגם את הפונקציות הללו, ותעטוף את האפליקציה שלך ב- ספק אישור בקובץ הבסיס (לדוגמה, ב- src/main.tsx).
שימוש בהקשר ברכיבי התחברות, רישום ודף הבית
ברגע שההקשר של האימות מוכן, השימוש בו ברכיבים שלך הוא פשוט מאוד. כניסה.tsxזה משנה useContext, גישה אל הקשר אימות ומחלץ, למשל, את הפונקציות handleLoginWithCredentials y כניסה עם גוגלבשליחת טופס ההתחברות, תתקשרו לראשון, ותעבירו את האימייל והסיסמה מה-hook שלכם. useFormבעוד שכפתור "התחברות באמצעות גוגל" הבלעדי ישיק את הגרסה השנייה שלו באירוע שלו onClick.
עבור רכיב Register.tsx , תעשו משהו דומה מאוד, אבל רק באמצעות handleRegisterWithCredentials . הטופס יבקש את אותם שדות (אימייל וסיסמה), או עוד כמה אם תרצו, ועם השליחה, לוגיקת ההקשר תהיה אחראית על יצירת המשתמש ועדכון הסטטוס הגלובלי.
ברכיב App.tsx הראשי , תצרוך גם את ההקשר כדי לקרוא את ה- status ואת ה-userId . בזמן שהסטטוס הוא 'בדיקה', תוכל להציג הודעת טעינה קטנה או מסך מעבר. כאשר הסטטוס משתנה, אם המשתמש אומת ויש לו userId תקף, תציג רכיב HomePage המציג תוכן רק עבור משתמשים מחוברים (לדוגמה, userId שלהם וכפתור יציאה שקורא ל-handleLogOut ). אם הסטטוס מציין שהמשתמש אינו אומת, תעבד רכיב AuthPage המכיל את טפסי ה-Login וה-Registration שלך.
הרשמה וכניסה עם Firebase Auth ב-React Native
ב-React Native, למרות שהמבנה הטכני שונה מה-web, הדפוס הקונספטואלי זהה. במסך הרישום (RegistrationScreen), יהיה לך מצב מקומי עבור שם מלא, אמייל, סיסמא y אישור סיסמהכשאתם לוחצים על כפתור יצירת חשבון, אתם בודקים שהסיסמאות תואמות, ואם הכל נראה תקין, אתם מתקשרים firebase.auth().createUserWithEmailAndPassword(email, password).
לאחר ש-Firebase יוצר את החשבון, תוכלו לשמור מידע נוסף על המשתמש ב חנות האש, באוסף usersעל ידי הגדרת מזהה המסמך ל-UID המוחזר על ידי Firebase. זה נותן לך מיקום מרכזי לאחסון הנתונים. שם מלא, תמונת פרופיל או מידע אישי אחר שלא מתאימים לטבלת האימות הסטנדרטית. אם המחרוזת כולה פועלת, עליך לנווט למסך הבית על ידי העברת אובייקט המשתמש כפרמטר.
במסך ההתחברות (LoginScreen), אתם גם מייבאים את Firebase ומשתמשים ב- firebase.auth().signInWithEmailAndPassword(email, password)לאחר קבלת התגובה עם המשתמש, תוכל לקרוא את הנתונים המורחבים שלו מ-Firestore באמצעות ה-UID, ואם מסמך זה קיים, נווט לדף הבית עם משתמש זה בסרגל הניווט. אם השאילתה לא מחזירה דבר מכיוון שהמשתמש נמחק מ-Firestore, תודיע למשתמש ותמנע עיבוד נוסף.
התמדה של סשן ב-React Native עם onAuthStateChanged
בדיוק כמו ברשת, ב-React Native זה מאוד מעצבן שהמשתמש צריך להתחבר בכל פעם שהוא פותח את האפליקציה. Firebase Auth גם דואג לזכור את פרטי ההתחברות ומאפשר לך לאחזר את המשתמש הנוכחי באמצעות אותם פרטי התחברות. במצבAuthChangedבסביבה זו, הלוגיקה בדרך כלל ממוקמת ברכיב App או בהקשר דומה לזה של האינטרנט.
אתה משתמש ב- useEffect אשר פועל רק פעם אחת בעת הרכבת הרכיב ובתוכו אתה קורא firebase.auth().onAuthStateChangedאם אתה מקבל משתמש בקריאה חוזרת, אתה מחפש את המסמך המתאים לו באוסף. users מ-Firestore, וכאשר אתה מקבל את זה, אתה מעדכן את הסטטוס המשתמש ובטל את הסימון של דגל הטעינה. אם אין משתמש מאומת, פשוט הגדר את הטעינה כ-false והשאר את המשתמש כ-null, מה שיגרום לעץ הניווט להציג את המסכים הציבוריים.
דפוס זה מבטיח שאם המשתמש פתח את האפליקציה לפני זמן מה והשאיר אותה ברקע, או אם הוא סוגר אותה ופותח אותה מחדש, היא תמשיך להופיע ישירות במסך הבית כל עוד אסימון הסשן שלו נשאר בתוקף, מה שמשפר מאוד את חוויית המשתמש מבלי שתצטרכו לנהל ידנית את האסימונים.
קריאה וכתיבה של נתונים ל-Firestore מ-React Native
לאחר שהאימות הסתיים, הגיע הזמן לעשות משהו מועיל עם מסד הנתונים. דוגמה אופיינית מאוד היא יצירת מסך בית המאפשר למשתמש להוסיף פריטי טקסט לאוסף ולפרט אותם בזמן אמת . דמיינו שהפריטים הללו הם משימות, הערות או פוסטים מהירים, ואתם רוצים שהמשתמש יראה רק את שלו.
במסך הבית, עליך להצהיר על מצב עבור הטקסט הנוכחי (entityText) ועוד אחד עבור רשימת הישויות (entitiesאתה גם יוצר הפניה לאוסף Firestore, לדוגמה entityRef = firebase.firestore().collection('entities'), ואתה שומר את המזהה של המשתמש המאומת (לדוגמה. userID = props.extraData.id).
בתוך א useEffectאתה מגדיר מאזין בזמן אמת עם entityRef.where('authorID', '==', userID).orderBy('createdAt', 'desc').onSnapshot(...)קריאה חוזרת זו מופעלת בכל פעם שמשהו משתנה במסמכים העומדים בתנאי זה. אתה עובר על המסמכים בתמונת המצב, בונה מערך עם התוכן של כל ישות, כולל את מזהה המסמך ומעדכן את המצב. ישויות עם המערך החדש הזה. הודות לכך, ה-FlatList בו תשתמש כדי להציג את הישויות יוצג עם הנתונים העדכניים ביותר.
כדי להוסיף אלמנטים חדשים, עליך ליצור פונקציה onAddButtonPress אשר מאמת את זה entityText לא ריק, צור חותמת זמן של שרת עם firebase.firestore.FieldValue.serverTimestamp() ולהתקשר entityRef.add({ text: entityText, authorID: userID, createdAt: timestamp })אם הפעולה מצליחה, ניתן לנקות את שדה הטקסט ולסגור את המקלדת; Firestore ידאג להפעלת תמונת מצב חדשה שתגרום לפריט החדש להופיע ברשימה.
בעת שימוש במסננים משולבים ומיון, Firestore עשוי לדרוש ממך ליצור אינדקס מורכבאם זה יקרה, תראה הודעה ביומנים עם קישור ישיר לקונסולת Firebase כדי ליצור את האינדקס הזה בלחיצה אחת. לאחר היצירה, שאילתות שמעורבות where y orderBy הם יעבדו בלי בעיות.
חיבור React web עם מסד נתונים בזמן אמת של Firebase
בנוסף ל-Firestore, ייתכן שתצטרכו לעבוד עם מסד הנתונים בזמן אמת של Firebase מאפליקציית אינטרנט שנבנתה עם React. התהליך הכללי הוא: אתם מאתחלים את Firebase עם תצורת הפרויקט שלכם, מייבאים את הספרייה של בסיס אש/מסד נתונים ואתה יוצר הפניות לצמתים שמעניינים אותך, כגון object/nameזה מאוד שימושי עבור תרחישים שבהם אתם רוצים לראות את השינויים משתקפים באופן מיידי בממשק..
דמיינו שבקונסולת Firebase אתם יוצרים צומת (node) object עם נכס name שערכו הוא "קרלוס". באפליקציית React שלך אתה מגדיר מצב מקומי name עם ערך התחלתי, לדוגמה "פפה", ואתה מעבד א <h1>{this.state.name}</h1> (אם אתם משתמשים ברכיבי מחלקה) או המקבילה עם ווים.
בשיטת מחזור החיים componentDidMount (או ב useEffect עם תלות ריקה ברכיבים פונקציונליים), אתה יוצר הפניה עם firebase.database().ref().child('object').child('name') ואתה מוסיף מאזין מסוג on('value', snapshot => { ... })בכל פעם שאירוע הערך מופעל, תקבלו תמונת מצב של הערך הנוכחי של הצומת; אתם מבצעים setState עם snapshot.val() ריאקט מטפלת ברינדור מחדש של הטקסט. אתם משנים את השם בקונסולת Firebase ורואים אותו באופן מיידי בדפדפן שלכם.
כדי שזה יעבוד ללא אימות, עליך להתאים את כללי האבטחה בחלונית Realtime Database כדי לאפשר גישת קריאה וכתיבה ציבורית במהלך הפיתוח (לדוגמה, על ידי הגדרת `read` ו-`write` ל-`true`). עם זאת, חיוני להגביל כללים אלה בסביבת הייצור, בדרך כלל על ידי דרישת אימות משתמש או החלת תנאים המבוססים על הנתיב או ה-UID כדי למנוע את פתיחת מסד הנתונים שלך לציבור.
שיקולים אחרונים
בעזרת תבנית בסיסית זו ניתן לבנות אינספור מקרי שימוש: אינדיקטורים של נוכחות, מונים משותפים, לוחות מחוונים בזמן אמת או אפליקציות הדגמה קטנות שבהן האינטראקטיביות בין לקוחות צריכה להיות מיידית.
כפי שניתן לראות, שילוב React (גם באינטרנט וגם במובייל) עם Firebase מאפשר לכם לבנות במהירות פרויקטים עם אימות בזמן אמת, מסדי נתונים ולוגיקה, תוך מינוף ווים , הקשרים ומאזינים בזמן אמת כדי לסנכרן את המצב הוויזואלי עם מה שקורה ב-backend המנוהל על ידי גוגל. שילוב זה של פיתוח מהיר וגמישות פירושו שעבור פרויקטים רבים, אין היגיון להמציא מחדש את כל שכבת השרת כאשר ניתן להתמקד בחוויית המשתמש ולתת ל-Firebase לטפל בשאר.