PracticU

ריאקט - עדכון של Firebase

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › ריאקט - עדכון של Firebase
מילון מושגים:
עדכון - שינוי שמביא תוכנה או מערכת לגרסה חדשה יותר, כדי לתקן תקלות, לסגור חולשות אבטחה או להוסיף יכולות.
Firebase - פלטפורמת ענן של גוגל לפיתוח אפליקציות, הכוללת מסד נתונים, אימות, אחסון ושירותים נוספים.
דומיין - תחום ניהולי משותף של מחשבים ומשתמשים ברשת ארגונית, המנוהל מרכזית. גם שם ייחודי של אתר באינטרנט.
CSS - שפת עיצוב שקובעת את המראה של דפי אינטרנט: צבעים, גופנים, מיקום וסידור הרכיבים.
npm - מנהל החבילות של Node.js, המשמש להתקנה ולניהול ספריות JavaScript בפרויקט.
ניהול גרסאות - מערכת שעוקבת אחר שינויים בקבצים ובקוד לאורך זמן ומאפשרת לחזור לגרסאות קודמות ולעבוד במשותף.
באג - תקלה או שגיאה בקוד שגורמת לתוכנה להתנהג בניגוד למצופה.
React - ספריית JavaScript לבניית ממשקי משתמש מבוססי רכיבים, שפותחה על ידי פייסבוק.

ריאקט - עדכון של Firebase
אחרי שהאתר כבר באוויר ב-Firebase, ההרצאה מראה איך לראות את הקבצים בקונסול, איך לעדכן את האתר ואיך לחזור לגרסה קודמת.
מה עושים
1. הקבצים בקונסול: בלשונית Hosting רואים שהועלו 36 קבצים ואת הגרסה הנוכחית. יש כמה כתובות לאתר, ובהן webapp ו-firebaseapp.com.
2. דומיין משלכם: כפתור בקונסול מאפשר לחבר דומיין שקנינו לאתר, כך שהגולש לא יגיע לכתובות של Firebase.
3. עדכון בקוד: בדוגמה משנים את צבע הרקע ב-CSS הכללי, ובקומפוננטת ה-Header מחליפים את האייקון באייקון רקטה. השינויים נראים מקומית אבל לא באתר שבאוויר, כי תיקיית build עדיין מכילה את הגרסה הקודמת.
4. בנייה והעלאה: מריצים שוב npm run build ואחריו firebase deploy. אחרי רענון האתר שבאוויר מציג את העדכון.
5. ניהול גרסאות: Firebase לא מוחק את הגרסה הקודמת אלא שומר אותן זו לצד זו, ואפשר להגדיר כמה גרסאות לשמור. לפעמים לוקח כמה דקות עד שהגרסה החדשה מופיעה ברשימה.
6. Rollback: אם התגלה באג, חוזרים לגרסה הקודמת עם rollback בקונסול. הגרסה הנבחרת הופכת לנוכחית, ורענון האתר מראה שהכל חזר.
אפשר עכשיו לעדכן אתר React שפורסם ב-Firebase ולהחזיר אותו לגרסה קודמת בעת הצורך.

פרקי ההרצאה: ריאקט - עדכון של Firebase

  1. 00:00

    בדיקת הקבצים בקונסול

  2. 00:40

    הלינקים של האתר באוויר

  3. 01:13

    חיבור דומיין משלכם

  4. 01:53

    שינוי צבע ב-CSS

  5. 02:30

    הוספת אייקון לכותרת

תמלול ההרצאה: ריאקט - עדכון של Firebase

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

  1. 00:02

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

  2. 00:16

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

  3. 00:27

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

  4. 00:53

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

  5. 01:12

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

  6. 01:26

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

  7. 01:53

    משהו אחר בואו ניקח אולי dark yellow, מה ניקח? בואו ניקח כזה, זה נראה לי ממש מעניין. יאללה, לקחתי סוג של סגול, ובואו נסתכל רגע על הפרויקט שלנו מקומית, נרפרש, ויש לנו את הסוג של הסגול הזה.

  8. 02:16

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

  9. 02:40

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

  10. 02:58

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

  11. 03:25

    זה פרודקשן העלינו אותם פעם בכמה דקות

לקורס המלא: קורס ריאקט אונליין

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

ההרצאה הבאה: סיכום קורס ריאקט

הרצאות קשורות מקורסים אחרים

  • עדכון של Kali
  • עדכון נתונים ב-MongoDB
  • CLR - פונקצית עדכון
  • עדכון מוצר - קורס NodeJS

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס NodeJS