PracticU

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

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › ריאקט - העלאת אתר לענן - Firebase - חלק 1
מילון מושגים:
Firebase - פלטפורמת ענן של גוגל לפיתוח אפליקציות, הכוללת מסד נתונים, אימות, אחסון ושירותים נוספים.
React - ספריית JavaScript לבניית ממשקי משתמש מבוססי רכיבים, שפותחה על ידי פייסבוק.
צד לקוח - החלק של היישום שרץ בדפדפן ומולו המשתמש מתקשר, הכולל את התצוגה והאינטראקציה.
HTML - שפת הסימון שבה בונים את מבנה ותוכן דפי האינטרנט, באמצעות תגיות שמגדירות כותרות, פסקאות, קישורים ועוד.
JavaScript - שפת תכנות שרצה בעיקר בדפדפן ומוסיפה אינטראקטיביות לדפי אינטרנט. רצה גם בצד השרת באמצעות Node.js.
CSS - שפת עיצוב שקובעת את המראה של דפי אינטרנט: צבעים, גופנים, מיקום וסידור הרכיבים.
צד שרת - החלק של היישום שרץ בשרת ואחראי על הלוגיקה, מסדי הנתונים והעיבוד שמאחורי הקלעים.
Northwind - מסד נתונים לדוגמה של מיקרוסופט, המדמה חברת מסחר ומשמש ללימוד ולהדגמת שאילתות SQL.

ריאקט - העלאת אתר לענן - Firebase - חלק 1
אחרי שבנינו מערכת שלמה ב-React, השלב האחרון הוא להעלות אותה לשרת מרוחק כדי שכל גולש באינטרנט יוכל לפתוח אותה. ההרצאה מציגה את האפשרות הפשוטה ביותר, Firebase של גוגל, ופותחת בה פרויקט.
השלבים העיקריים
1. בחירת שיטת אירוח: אפשר להשתמש בחברת אחסון, בשירותי קלאוד או בשרת פיזי. כאן משתמשים ב-Firebase, שמארח Frontend שנבנה ב-React, ב-Angular או ב-HTML, JavaScript ו-CSS.
2. מגבלה: Firebase לא מאפשר להעלות Backend משלנו. לכן ה-Backend המקומי נשאר במחשב, והקורס עוסק רק בהעלאת ה-React.
3. כניסה ל-console: מי שיש לו חשבון Gmail כבר יש לו חשבון Firebase. מחפשים firebase console ולוחצים על Go to console, שהוא לוח הבקרה לניהול הפרויקטים.
4. יצירת פרויקט: לוחצים על Create a Project ונותנים שם, כאן Northwind Traders. Firebase מציע שם לאתר, ואם השם תפוס מוסיפים לו מספרים ואותיות. כדי לקבל שם קריא בוחרים שם אחר שפנוי. אפשר לחבר אחר כך כתובת משלכם.
5. Google Analytics: מכבים אותו, כי הוא לא נחוץ כאן, ואז לוחצים Create project. הפרויקט החינמי נוצר בשרתי גוגל.
6. הכרת הקונסול: מוצגים השירותים, ובהם Authentication, Firestore, Realtime Database, Storage, Functions ו-Hosting. אנחנו צריכים את Hosting, שהוא אירוח אתר.
הפרויקט ב-Firebase מוכן, ובהרצאה הבאה מעלים אליו את הקבצים.
השיעור הבא בקורס: ריאקט - העלאת אתר לענן - Firebase - חלק 2

פרקי ההרצאה: ריאקט - העלאת אתר לענן - Firebase - חלק 1

  1. 00:00

    העלאת האתר לאוויר

  2. 00:43

    טכניקות אחסון ושירותי קלאוד

  3. 01:20

    הכרת Firebase של גוגל

  4. 01:58

    Firebase מספק Backend משלו

  5. 02:37

    פתיחת פרויקט ב-Firebase

  6. 03:14

    כניסה ל-Firebase Console

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

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

  1. 00:02

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

  2. 00:28

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

  3. 00:54

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

  4. 01:13

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

  5. 01:45

    אם בניתם את זה בריאקט או בניתם את זה באנגולר או בניתם את זה סתם ב-HTML ו-JavaScript ו-CSS הוא אומר לכם בואו תעלו אלינו את המערכת שלכם.

  6. 01:55

    הוא לא מאפשר לכם לבנות Backend ולהעלות את ה-Backend אליו כי הוא נותן לכם Back-end משלו. לנו יש כאן את ה-Back-end, ואנחנו לא יכולים לקחת את ה-Back-end הזה ולהעלות אותו ל-Firebase, כי הוא לא מאפשר להעלות Back-end משלנו. אם היינו רוצים, היינו יכולים אולי

  7. 02:18

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

  8. 02:45

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

  9. 03:18

    של firebase זה הסמל שלהם ויש לנו פה go to console בהקשר הזה זה פשוט מאוד לוח הבקרה שלהם אפשר לקרוא לזה גם דשבורד, איזשהו לוח בקרה שמאפשר לנו לנהל את הפרויקטים שלנו בתוך פיירבייס.

  10. 03:34

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

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

ההרצאה הקודמת: הודעות שגיאה בריאקט

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

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

  • העלאת אתר Wordpress לאירוח
  • מבוא לענן פרטי עם OpenStack
  • לוגין לענן - az login
  • אתר Netcraft

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

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