PracticU

יצירת מחלקה עם כל ההגדרות - Config Class - חלק 2

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › יצירת מחלקה עם כל ההגדרות - Config Class - חלק 2
מילון מושגים:
מחלקה - תבנית בתכנות מונחה עצמים שמגדירה אילו נתונים ופעולות יהיו לאובייקטים שנוצרים ממנה.
Localhost - שם המפנה למחשב המקומי עצמו (כתובת 127.0.0.1), המשמש לבדיקת שירותים הרצים על אותו מחשב.
דומיין - תחום ניהולי משותף של מחשבים ומשתמשים ברשת ארגונית, המנוהל מרכזית. גם שם ייחודי של אתר באינטרנט.
API - ממשק תכנותי שמגדיר כיצד תוכנה אחת פונה לאחרת ומחליפה איתה נתונים ופעולות.
באג - תקלה או שגיאה בקוד שגורמת לתוכנה להתנהג בניגוד למצופה.
URL - הכתובת שמזהה משאב באינטרנט, למשל דף אתר, וכוללת פרוטוקול, שם מארח ונתיב.
בנאי - מתודה מיוחדת שמופעלת אוטומטית בעת יצירת אובייקט ממחלקה, ומאתחלת את ערכיו ההתחלתיים.
משתנה סביבה - ערך בעל שם שמוגדר במערכת ההפעלה ומשמש תוכנות להגדרות, כמו נתיבים או מפתחות תצורה.

יצירת מחלקה עם כל ההגדרות - Config Class - חלק 2
שינוי ידני של כתובות השרת לפני כל העלאה לאוויר הוא שיטה שבירה. ההרצאה מראה איך לבנות קובץ הגדרות שמזהה לבד אם האפליקציה רצה בסביבת פיתוח או בפרודקשן ובוחר את הכתובות המתאימות.
הרעיון
1. הבעיה: הכתובות שנכתבו (localhost) מתאימות רק למחשב הפיתוח. בשרת אמיתי הכתובת תהיה אחרת, למשל דומיין עם api/products. אפשר לשנות אותן ידנית רגע לפני העלאה, אבל אנחנו ממשיכים לפתח, לתקן באגים ולהעלות שוב ושוב, וקל לשכוח לשנות.
2. שתי סביבות: יש סביבת פיתוח וסביבת פרודקשן, ולעיתים גם סביבת טסטינג שלא עוסקים בה כאן. חלק מהתצורות שונות ביניהן.
3. מחלקה אבסטרקטית ושתי יורשות: Config הופכת ל-abstract, כך שאי אפשר לבנות ממנה אובייקט. ממנה יורשות DevelopmentConfig ו-ProductionConfig, וכל אחת מכילה רק את מה שמיוחד לסביבה שלה. אפשר לחלק לקבצים נפרדים, כאן הכול בקובץ אחד.
4. בייס URL: ההתחלה המשותפת של כל הכתובות (עד api) חוזרת על עצמה. ב-Config מגדירים urls עם שדות ריקים, למשל products ו-employees, ו-constructor שמקבל baseUrl ומשרשר אליו את השדות. כדאי לסיים כל כתובת ב-/, כי בהמשך משרשרים אליה עוד דברים.
5. שליחת בייס URL: ב-constructor של כל מחלקה יורשת קוראים ל-super עם ה-baseUrl של אותה סביבה (כתובת מקומית בפיתוח, כתובת האתר האמיתי בפרודקשן).
6. תצורה משותפת: הגדרה שזהה בשתי הסביבות, כמו אימייל תמיכה כללי של החברה, נכתבת ב-Config הבסיסית.
7. בחירה אוטומטית: משתמשים במשתנה הסביבה process.env.NODE_ENV. אם הערך הוא development יוצרים DevelopmentConfig, אחרת (כשהוא production) יוצרים ProductionConfig. השרת שמריץ את האפליקציה מגדיר בפרודקשן את המחרוזת production בעצמו.
פקודות והגדרות
- process.env.NODE_ENV: מכיל development, ‏production או test לפי הסביבה
- משתני סביבה אפשר להגדיר במחשב עצמו (ב-Windows: חיפוש של Environment Variables)
- ביצוע הבדיקה: בפיתוח הכתובת שנגלשה היא הכתובת המקומית, והסלאש בסוף הכתובות חשוב
אחרי ההרצאה יש לכם קובץ הגדרות אחד לכל האפליקציה שמתאים את עצמו לסביבה.
השיעור הבא בקורס: הצגת מידע באתר בצורת כרטיסיות

פרקי ההרצאה: יצירת מחלקה עם כל ההגדרות - Config Class - חלק 2

  1. 00:00

    בעיית הכתובות בסביבת הפיתוח

  2. 00:58

    מבנה כתובת REST API אמיתית

  3. 02:11

    תחזוקה והעלאות חוזרות לאוויר

  4. 03:05

    סביבות Development ו-Production

  5. 03:59

    הוספת סביבת Testing

  6. 04:33

    מחלקה אבסטרקטית ומחלקות יורשות

  7. 05:32

    זיהוי ה-Base URL החוזר

תמלול ההרצאה: יצירת מחלקה עם כל ההגדרות - Config Class - חלק 2

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

  1. 00:02

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

  2. 00:24

    לשרת אמיתי. אז אתם יכולים להגיד לי, טוב, מה הבעיה? כשסיימת לתכנת, שנייה לפני שאתה מעלה את זה לשרת אמיתי, בוא נניח שכתובת השרת האמיתי זה, בוא נניח הכתובת, נרשום אותה פה רגע, http://www.mysite.com זאת הכתובת האמיתית.

  3. 00:49

    אם זאת הכתובת האמיתית אז בתוכה כנראה יהיה API/Products כי ברגע שאנחנו חושפים מערכת מ-Restful Service, REST API אז נהוג זה יהיה api ובתוכו הדברים השונים שאנחנו חושפים, מוצרים, עובדים, לקוחות, ספקים, זה משהו שהוא מאוד מקובל. אז אם זה השרת הזה מקומית חושף את הנתיבים האלה פה ככה ב-localhost 3030 כאשר

  4. 01:19

    אנחנו בשרת מרוחק בואו נגיד שהשרת הזה נקרא נורפרינג. נניח קנינו את הדומיין נורפרינג אז יהיה לנו שרת שנקרא נורפרינג.com כנראה שבתוכו יהיה api/products זה השרת האמיתי שאנחנו נעלה אליו את המידע.

  5. 01:37

    מה הבעיה? שנייה לפני שאתה מעלה את זה לאוויר, קח את זה, שים פה, תשנה ותעלה לאוויר. נראה פשוט.

  6. 01:50

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

  7. 02:15

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

  8. 02:39

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

  9. 02:54

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

  10. 03:14

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

  11. 03:31

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

  12. 03:50

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

  13. 04:10

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

  14. 04:28

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

  15. 04:59

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

  16. 05:19

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

  17. 05:38

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

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

ההרצאה הקודמת: יצירת מחלקה עם כל ההגדרות - Config Class - חלק 1

ההרצאה הבאה: הצגת מידע באתר בצורת כרטיסיות

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

  • מחלקה מסוג Static Class
  • The R Class
  • יצירת מחלקה ואובייקטים ב-TypeScript
  • יצירת קבצי הגדרות - NodeJS config files

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

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