התראות והודעות שגיאה בריאקט
React Notifications

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

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

1. 00:02

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

2. 00:24

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

3. 00:52

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

4. 01:06

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

5. 01:28

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

6. 01:39

   אלרט תוקע את הכל, שום דבר לא מתבצע. אולי היוזר לא כל כך רואה שהוא צריך ללחוץ, אולי זה בדיוק באותו הצבע של הרקע של האתר וקשה לראות את זה. מה זה בדיוק ה-localhost 3000 סייז הזה?

7. 01:55

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

8. 02:10

   פחות חמורה של מה זה בדיוק request failed with status code 401, קוד בכלל או הודעת שגיאה בכלל לא מובנת. זאת ההודעה שאני רואה, אבל זה לא אומר שזאת ההודעה שהשרת באמת שלח לי.

9. 02:24

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

10. 02:52

    אני אשתמש בחבילה מאוד פשוטה שנקראת נוטיף שימו לב נוטיף עם y אז npm i נוטיף go והוא מתקין לנו את החבילה הזאת ומה שאנחנו רוצים לעשות זה לבנות לעצמנו איזשהו סרוויס כי יש לנו פה טיפה קוד לא הרבה ממש טיפה קוד להתעסק עם החבילה הזאת ואנחנו לא רוצים כל פעם שאנחנו מציגים הודעה לכתוב יותר מדי קוד אנחנו רוצים פשוט לקרוא לפונקציה

11. 03:23

    שתציג לנו את ההודעה. אז בואו ניגש לסרוויסים שלנו ונבנה לעצמנו Notification Service. בואו נקרא לזה Notify Service, יותר קל, נקודה ES. בואו נבנה פה Class Notify Service, מיד קונסט Notify, New Notify Service ו-Export בצורת דיפולט Notify את האובייקט.

12. 03:58

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

13. 04:23

    אנחנו רוצים להגדיר Duration.