ריאקט - העלאת אתר לענן - Firebase - חלק 2

תמלול ההרצאה: ריאקט - העלאת אתר לענן - Firebase - חלק 2

הטקסט המלא של הדקות הראשונות בהרצאה «ריאקט - העלאת אתר לענן - Firebase - חלק 2» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

   מה שאנחנו רוצים לעשות בסרטון הזה זה ראשית לבנות את הקבצים הדרושים להעלאה לאוויר. כלומר להעלאה לפרויקט שמקודם פתחנו בfirebase. מה זאת אומרת לבנות את הקבצים?

2. 00:19

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

3. 00:44

   במילים אחרות בסופו של דבר אנחנו צריכים להעלות רק אינדקס html את ה css של הפרויקט שזה יכול להיות קובץ אחד או יותר ואת הג'אווה סקריפט של הפרויקט הסופי שזה יכול להיות קובץ אחד או יותר.

4. 00:58

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

5. 01:19

   הבאג הראשון הוא כאשר אנחנו מבצעים לוג-אין, בואו נבצע רגע מושיקו, כן, בסדר, יופי, הנה אנחנו רואים שזה עובד ואנחנו רואים פה הלו, זה השם בסדר והבאג הוא פשוט שכאשר אנחנו מרפרשים אז הוא עף החוצה זה הבאג ובואו נטפל בבאג הזה ובעוד באג קטן ואז נוכל לעשות עוד איזשהו

6. 01:45

   סטאפ ולייצר את הקבצים הסופיים אז הבאג הזה נמצא פשוט באוט מניו הוא נמצא פה ומה שקורה זה שאוט מניו פשוט לא מציג התפריט הזה לא מציג את היוזר כשעושים רפרש. למה?

7. 02:04

   כי ComponentDidMount כשעושים רפרש מתבצע כמובן פעם אחת וכל מה שהוא עושה זה סאבסקרייב סאבסקרייב אומר אם יהיה שינוי ברידאקס סטייט אז אני אקרא לפונקציה הזאת אבל אין שום שינוי אנחנו רק עשינו רפרש.

8. 02:25

   לכן אנחנו רוצים כאן לכתוב עוד איזה שורה שבלי קשר ל-subscribe גם מעדכנת את ה-user. אז כל מה שאנחנו רוצים זה this.setState, האמת יש לי את זה כאן, this.setState ואנחנו רוצים לקבל מ-outService את ה-user הנוכחי.

9. 02:50

   זו השורה שפותרת לנו את הבגון הקטן הזה שבמקרה מצאתי ואז כשהפונקציה הזאת מתבצעת אז גם אנחנו מיד מעדכנים את ה-user אם יש או אם אין, לא משנה וגם אנחנו נרשמים לשינויים עתידיים.

10. 03:04

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

11. 03:22

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

12. 03:53

    היא רצה בפרודקשן כמובן זה לא יעבוד דברים לא יעבדו מפני שהפונקציה הזאת חייבת שהיוזר שגולש באתר יהיה לו את התוסף הזה ReduxDevTools זה בסדר.

13. 04:07

    מה שעשיתי פה זה בדיקה האם אנחנו ב-Development כן תן לי את זה וזה עבד כי אנחנו היינו ב-Development ואם אנחנו לא ב-Development כלומר Production אז תן לי Undefined וזה הבאג אנחנו לא יכולים לשלוח לפה Undefined בשום מקרה הוא פשוט יקרוס.

14. 04:26

    בואו פשוט נבצע דבר כזה, ניקח כרגע את אובייקט ה-Store עם let, ונכניס לתוכו את כל האובייקט בלי כל מה שקשור ל-Enhancer הזה.

15. 04:40

    נוריד רגע את ה-Enhancer, ואז נבדוק פה האם אנחנו ב-Development. אם אנחנו ב-Development, אז אנחנו בעצם רוצים לגשת ל-Store ולהכניס משהו קצת אחר.

16. 04:55

    אפשר לבנות את זה בצורה קצת אחרת אבל זה מאוד סימפל וזה אומר לנו תשמע כנראה אתה אמור להיות בפרודקשן קח את זה קודם כל אם אתה בדבלופמנט בעצם תן לי גם את הדב טולס הזה כאשר לא חייבים תמיד להתעסק עם זה אפשר תמיד לשים את זה בהערה ורק אם באמת אנחנו רוצים לדבק את הפרויקט

17. 04:56

    עם הדב טולס אז מחזירים את זה אבל נשאיר את זה ככה בכדי לראות שזה עובד גם עבור ה-Development וגם עבור ה-Production.