PracticU

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

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

יצירת מחלקה עם כל ההגדרות - Config Class - חלק 1
כתובות ה-URL של ה-Backend כתובות בקוד בכל קומפוננט שצריך אותן. ההרצאה פותרת זאת בכך שמרכזים את ההגדרות הכלליות של האתר במחלקה אחת.
איך בונים את זה
1. הבעיה: מוצרים נדרשים גם ב-Product List וגם ב-Product Details, וכך גם עובדים, קטגוריות, הרשמה, התחברות וצור קשר. שכפול הכתובת בכל מקום מחייב חיפוש בכל הפרויקט אם היא משתנה.
2. מחלקת שירות: משתמשים בקונספט ה-Services. יוצרים קובץ config.ts עם מחלקה Config שמכילה את התצורה הכללית של האתר.
3. שתי טכניקות: אפשר להגדיר משתנה לכל כתובת, למשל productsUrl ו-employeesUrl. המרצה מעדיף אובייקט urls בתוך המחלקה, שבו שדות כמו products ו-employees, ולכן אין צורך בסיומת url בשם כל שדה.
4. אובייקט יחיד: יוצרים const config = new Config() ומחצינים עם export default config. מחלקות מתחילות באות גדולה ואובייקטים באות קטנה. האובייקט קיים פעם אחת בכל האפליקציה.
5. שימוש בקומפוננט: ב-Product List מוחקים את המחרוזת, מייבאים את config מתיקיית services (ללא סוגריים מסולסלים כי זה default), ומשתמשים ב-config.urls.products.
6. מה עוד אפשר לשים שם: אימייל או טלפון כללי של האתר, מפתח כללי ועוד הגדרות.
שימו לב
הכתובות מצביעות על localhost, כלומר על המחשב המקומי. אחרי העלאה לשרת אמיתי בענן הן לא יהיו נכונות, וצריך כתובת אחרת. את זה פותרים בסרטון הבא.
אחרי ההרצאה אפשר לרכז הגדרות כלליות ו-URL של ה-Backend במקום אחד ולהשתמש בהן מכל האפליקציה.
השיעור הבא בקורס: יצירת מחלקה עם כל ההגדרות - Config Class - חלק 2

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

  1. 00:00

    בעיית כפילות הכתובות בפרויקט

  2. 01:14

    מחלקת Service מרכזית להגדרות

  3. 01:57

    בניית מחלקת config

  4. 02:39

    הגדרת כתובות כמשתנים

  5. 03:39

    ריכוז הכתובות באובייקט URLs

  6. 04:49

    יצירת האובייקט והחצנתו

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

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

  1. 00:02

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

  2. 00:21

    אנחנו רוצים לגלוש למוצרים אולי בקומפורנט הזה של ה-Product List, אבל גם ב-Product Details, בוא תביא לי פרטים של מוצר בודד, ואולי בעוד כל מיני מקומות, ומה עם עוד כל מיני לינקים שיש לנו?

  3. 00:36

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

  4. 00:51

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

  5. 01:14

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

  6. 01:38

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

  7. 02:07

    אם יש לנו מאפיינים כלליים כאלה, מאפייני תצורה כלליים, במקום לשים אותם בכל מיני מקומות באפליקציה, אנחנו פשוט שמים אותם במחלקה הזאת ומכל האפליקציה משתמשים בתצורה הזאת שנמצאת ב-classconfig שלנו.

  8. 02:24

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

  9. 03:01

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

  10. 03:21

    זאת טכניקה אחת, אני פחות אוהב את הטכניקה הזאת לגבי url'ים בגלל שיש הרבה מה שאני מעדיף לעשות זה אובייקט, אני קורא לו url's server url's addresses לא משנה מה ויש לי פה אובייקט שבאובייקט כולם מופיעים.

  11. 03:44

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

  12. 04:10

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

  13. 04:51

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

  14. 05:08

    אז מה שאנחנו רוצים לעשות זה לגשת ל-Componenta Products Area Product List ובמקום לרשום בכל מקום את כל הדבר הזה,

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

ההרצאה הקודמת: שליפת מידע עם Azios

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

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

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

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

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