WebAPI - Post Params

תמלול ההרצאה: WebAPI - Post Params

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

1. 00:02

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

2. 00:26

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

3. 00:39

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

4. 01:07

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

5. 01:29

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

6. 01:41

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

7. 01:56

   אנחנו קודם כל שמים אותה מתחת לסל הקניות בפרודקליסט html יהיה לנו סל קניות מתחת לזה יהיה לנו את ה-checkout ורשימת המוצרים אחרי זה נעשה לזה גרפיקה אל תדאג עכשיו ב-checkout אני רוצה לשים כרגע רק באטן אחד ולכתוב לו submit order כאילו לסיים את ההזמנה וכשלוחצים על הבאטן הזה על הכפתור הזה על האירוע של קליק

8. 02:22

   הוא מפעיל פונקציה שנקראת checkout בוא נעשה את הפונקציה הזאת הכפתור יעשה לי את הפונקציה ואני עושה פה את הפונקציה הזאת והמטרה של כל הסיפור שלנו זה לשלוח נתונים לשרת אז איך אנחנו מתחילים את הסיפור הזה אנחנו צריכים קודם כל לשלוח נתונים לשרת אנחנו צריכים את הקומפוננטה של HTTP ואת סל הקניות אז בואו נתחיל מסל הקניות cart service אני רוצה את ה-cart service הזה שיזריק לי אותו אז אני

9. 02:53

   עושה פה cart service כף תחתון c קטן שיהיה cart service פסיק htp אני רוצה גם שיהיה htp אוקיי עכשיו הוא יגיד לי שcart service לא נמצא אני אומר לו תייבא אותו וגם זה לא נמצא רק נתיבים צריכים להיות יחסיים שני נקודות זה לכל הקומפוננטות שתי נקודות זה לרמה של הראשית ואז לסרוויס htp אני גם צריך לייבא אותו בואו נרשום import rom angular רגולר htp זה באג של ויז'ואל סטודיו שבפעם

10. 03:35

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

11. 03:56

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

12. 04:07

    url, זה יהיה משתנה עזר ריק. ה־seek השני זה body, בואו נעשה גם משתנה עזר שנקרא body. והמשתנה השלישי, options הוא בסוגריים מרובעים, זה אומר שהוא לא חובה.

13. 04:18

    אז אני אקרא לו body, ואני אעשה פה משתנה עזר body. וה-body הזה הולך להיות איזשהו אובייקט שאני שולח לשרת, לדוגמה, נשלח object name johnsick address, אני מניח שהוא גר בניו יורק.

14. 04:34

    אז אנחנו שולחים בעצם את האובייקט הזה לשרת, ומה הוא מחזיר לי? אם אתם תסתכלו טוב טוב מה הוא מחזיר לי, הפוסט הזה, אנחנו יכולים לעשות פה right click, go to definition, ולראות שהפוסט הזה, פונקציה מקבלת url, מקבלת body, אופציה שהוא לא חובה, סימן שאלה זה אומר שזה פרמטר שהוא לא חובה

15. 04:55

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

16. 05:20

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

17. 05:48

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

18. 06:12

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

19. 06:36

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

20. 06:51

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

21. 07:12

    אני עושה קונטרולר חדש ואני לא רוצה לחבר אותו ל-entity framework תשאלו אותי למה אתה לא רוצה לחבר אותו ל-entity framework כי הקוד שהוא יכתוב לי לא יעזור למה הוא לא יעזור לי כי הוא פה שואל אותי לאיזה דאטאבייס להתחבר ולאיזה טבלה.

22. 07:27

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

23. 07:39

    אז לא יעזור לי הקוד המוכן הזה, הוא לא באמת יעזור לי במשהו. בגלל זה אני מוותר על השירות הזה של קוד מוכן ואני אכתוב אותו לבד. ואני אבחר לי קונטרולר רק עם read-write actions.

24. 07:51

    שיעשה לי פונקציות ריקות, מספיק לי ואני אקרא לזה צ'ק אאוט, צ'ק אאוט קונטרולר, בסדר? בקונטרולר הזה יש לי פונקציות ריקות, אני לא צריך את ה-get, את הפוסט הזה, זה ככה אני הולך להשתמש בזה, זה הדבר שאני צריך, את ה-get הזה אני לא צריך אבל אני משאיר אותו לאיזה בדיקה, שאני אוכל

25. 08:09

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

26. 08:32

    ולקחת את ה-URL, אז בואו נבדוק שזה עובד, אני צריך את הצד של השרת לבדוק, API צ'קאוט, הנה קיבלתי ווליו 1, ווליו 2, הגלישה לקונטרולר הזה הצליחה, ואני לוקח את ה-URL שלו ומכניס אותו בתוך הקליינט שלי בתור API צ'קאוט, יפה מאוד, בוא נבדוק עכשיו אם הגלישה תצליח דרך הכפתור של צ'קאוט, זוכרים הרי עשינו כפתור,

27. 08:59

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

28. 09:21

    לקלאס הזה מכל אפליקציה אחרת ולא רק מהאפליקציה שלי ומאפשר מ-Origins כוכבית. יופי, פתרנו את הבעיה של Cross-Origin ובואו נבדוק עכשיו אם יש לנו בעיה.

29. 09:35

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

30. 09:49

    בתוך הפוסט שלחנו לו מידע בצורת אפליקיישן ג'ייסון זה ב-request header בבקשה והנה האובייקט שלנו name John ו-New York נשלח לנו כ-payload לשרת אבל השרת פה בואו נראה אם הוא מקבל את המידע עוד פעם מנקים את המסך ולוחצים לו submit הנה השרת קיבל את הבקשה תראו הוא נעצר פה לבד אבל ה-value ריק הוא לא קיבל כלום

31. 09:50

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

32. 10:22

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

33. 10:35

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

34. 10:57

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