PracticU

יצירת User Mode בריאקט

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › יצירת User Mode בריאקט
מילון מושגים:
מודל - רכיב שמייצג את הנתונים ואת הלוגיקה העסקית באפליקציה. גם ייצוג מופשט של מערכת או תהליך.
טוקן - פיסת מידע שמשמשת לאימות או להרשאה, שהמערכת מנפיקה ללקוח ומוצגת בבקשות הבאות במקום סיסמה.
טופס - אזור בממשק שבו המשתמש מזין נתונים בשדות ושולח אותם, למשל טופס הרשמה או התחברות.
ממשק - נקודת מגע בין רכיבים: ממשק משתמש שבו אדם מפעיל תוכנה, או ממשק תכנותי שמגדיר אילו פעולות רכיב אחד חושף לאחר.
מחלקה - תבנית בתכנות מונחה עצמים שמגדירה אילו נתונים ופעולות יהיו לאובייקטים שנוצרים ממנה.
מחרוזת - סוג נתונים שמייצג רצף של תווים, כלומר טקסט, ומשמש לאחסון מילים, משפטים או כל רצף סימנים.
שם משתמש - מזהה ייחודי שמשתמש מזין כדי להזדהות במערכת, לרוב יחד עם סיסמה.
צד שרת - החלק של היישום שרץ בשרת ואחראי על הלוגיקה, מסדי הנתונים והעיבוד שמאחורי הקלעים.

יצירת User Mode בריאקט
התחלת הבנייה של מנגנון ההרשמה והכניסה: מגדירים מודל שמייצג את המשתמש לפני שבונים את הטפסים.
סדר העבודה במודול
1. המודל: קודם תשתית לשמירת מידע המשתמש (המידע שמגיע מהטוקן והשרת).
2. טופס הרשמה: אחר כך שילובו באפליקציה.
3. טופס כניסה: אחריו.
4. לוג אאוט: ולבסוף יציאה מהמערכת, ועוד נושאים קשורים.
המודל
יוצרים קובץ UserModel.ts עם interface (אפשר גם class) ומייצאים אותו כ-export default. הוא כולל את id (מספר), firstName, lastName (מחרוזות), username ו-password.
שימו לב
השמות חייבים להתאים בדיוק למה שהשרת מצפה לקבל ולהחזיר, כולל אותיות גדולות וקטנות. את השדות לוקחים מהדוקומנטציה של ה-Backend. בשרת בדוגמה יש לינקים נפרדים להרשמה ולכניסה, והשדות האלה הם אלה שהוא עובד איתם.
אחרי ההרצאה יש מודל משתמש שאפשר להשתמש בו בטפסים ובשירותים הבאים.
השיעור הבא בקורס: יצירת Redux AuthState

פרקי ההרצאה: יצירת User Mode בריאקט

  1. 00:00

    שלבי בניית מנגנון ההרשמה

  2. 00:37

    בניית ה-UserModel

  3. 01:14

    שדות ה-UserModel מהשרת

  4. 01:52

    לינקים של register ו-login בשרת

תמלול ההרצאה: יצירת User Mode בריאקט

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

  1. 00:02

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

  2. 00:22

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

  3. 00:33

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

  4. 00:46

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

  5. 01:11

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

  6. 01:27

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

  7. 01:41

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

  8. 01:52

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

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

ההרצאה הקודמת: אימות משתמשים בריאקט - Authentication & Authorization

ההרצאה הבאה: יצירת Redux AuthState

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

  • User Controls
  • USER MODULE
  • Swarm - Global Mode
  • Get User Location

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

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