Observable
פרקי ההרצאה: Observable
תמלול ההרצאה: Observable
הטקסט המלא של הדקות הראשונות בהרצאה «Observable» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
שלום לכולם בהרצאה הזאת אנחנו הולכים להתחבר לשרת Web API ולהוריד ממנו נתונים לחלוט שלנו את רשימת המוצרים לשם כך בואו נבנה סרוויס שייתן את השירות הזה להתחבר לשרת ולהחזיק את הנתונים וכל קומפוננטה שרוצה נתונים מהשרת תתחבר לסרוויס הזה תשתמש בשירות הזה נקרא לו product.service נלחץ קונטרול רווח אני יוצר סרוויס רגיל לגמרי בינתיים כמו שעשינו
לפני כן עד עכשיו שום דבר לא חדש NG2 קונטרול רווח הנה הוא התעורר קונטרול רווח NG2 סרוויס זה סניפט מוכן שהתקנתי והוא כותב לי את כל הקוד הזה אני קורא לו product service ושם פה שטרודל כאן מתכנת של סניפט שכח לשים לי פה שטרודל ויש לי סרוויס מוכן איך שאני יוצר סרוויס אני חייב לרוץ לפני שאני שוכח להכריז עליו גם במודול שהוא קיים לרשום את הסרוויס הזה
במודול איפה כותבים אותו במודול כאן בפרוביידרס בפרוביידרס אני כותב אותו כאן אבל הוא לא יודע מה זה הקובץ הזה אתם רואים הוא לא יודע מה זה אז הוא אומר לי מה לעשות אימפורט פרום אפ סרוויס פרוביידרס בוא ננסה הנה הוא כמעט מצליח אני לא אוהב שהוא כותב ככה אני אוהב נקודה סרוויסס נקודה זה אומר תיקייה נוכחית שתי נקודות זה אומר תיקייה מעלי בתיקייה הנוכחית שלי תמצא לי תיקיית סרוויסס
ככה אני רגיל אבל כל אחד איך שהוא רוצה אז עשיתי פה אימפורט של סרוויסס והכרזתי עליו בפרוביידר ויש לי סרוויס שאפשר להשתמש בו בואו נתחיל לכתוב את הקוד שלו מה הוא צריך לעשות אני עושה לו פה פונקציה get product list תביא לי רשימת מוצרים זאת תהיה פונקציה שמתחברת לשרת ומביאה לי רשימת מוצרים הפונקציה הזאת צריכה להתחבר לשרת ולעשות לו htp get כדי לעשות את
זה יש באנגולר משהו מוכן ספרייה מוכנה באנגולר שנקראת htp בדיוק מה שאני צריך ואני הולך להשתמש בסרוויס שיש לו מוכן, סרוויס של HTTP. עכשיו בגלל שזה סרוויס של אנגולר אני צריך שהוא יביא לי את זה לתוך הקומפוננטה שיזריק לי את הסרוויס הזה. איך אומרים לו תזריק לי את הסרוויס? כמו שהלקוחות של הסרוויס
שלי מבקשים ואני כותב קונסטרקטור בסוגריים אני אומר לו בסוגריים להביא לי את הסרוויס לתוך משתנה כף תחתון http זה יזריק לי את הסרוויס של http מתוך המודול הראשי אבל מי אמר לך שבמודול הראשי יש את הסרוויס הזה שאני הולך עוד שנייה להשתמש בו דרך אגב ב-http הזה אם אתם תסתכלו יש לו פונקציות פה אוי לא כתבתי את זה נכון http יש לו פונקציות כמו the east צריך כמובן כי
זה ברמת הקלאס אתם רואים יש לו פה גט ועוד מעט אנחנו חוזרים לגט הזה אבל לפני שאני ממשיך ואני שוכח אני בכלל צריך לוודא שיש לי בכלל את הסרוויס הזה במודול הראשי מי אמר לי שיש לי את הסרוויס הזה במודול הראשי אז אני הולך למודול הראשי ואני רוצה להביא סרוויס אבל את הסרוויס הזה אני לא כותב פה כי אני לא זה שיוצר אותו הוא לא שלי מי שעושה אותו ויוצר
אותו זה החבר'ה של אנגולר וחבר'ה של אנגולר עשו עבורי מודול מוכן שיש בו כבר את הסרוויס אז אני מייבא את המודול מתוך אנגולר למעשה הם כתבו מודל כמו שהם כתבו לי מודול של בראוזר מודל כמו ראוטינג שהוא במודול נפרד אתם רואים הראוטינג אצלי במודול נפרד כל הסרוויס של http הוא במודול נפרד אז אני עושה לו אימפורט ומייבא אותו כמודול
עוד פעם מודול זה מיני תוכנה מוכנה מה זה התוכנה של המודול שלי במודול שלי אם מישהו אחר מייבא אותו הוא מקבל את כל הסרוויסים שלי שזה כל הסרוויסים שלי והוא מקבל את כל הקומפוננטות שלי מישהו אחר יכול לקחת את המודול שלי את תיקייה שלי ולעשות לה אימפורט ולייבא אותו אליו ולקבל את הקומפוננטות שלי ואת הסרוויסים
שלי אני יכול לקחת את המודולים של אחרים ולייבא אותם אליי ולרשום אותם כאן כאן אני כותב שאני רוצה לייבא מודול של מישהו אחר לדוגמה יש לי פה מודול של ראוטינג אני אזכיר לכם שכל הראוטינג הולך אצלי כמודול נפרד ובתוך המודול הזה של ראוטינג יש לו פה רק בעצם רק מה שקשור
לראוטינג יפה מאוד אז אני מייבא את המודול של http ועכשיו בתוכו יש לי גם את הסרוויץ של http אז הבנו עשיתי את השורה הזאת ועשיתי את השורה הזאת זה הביא לי את הסרוויץ של http ועכשיו אצלי אני יכול להזריק את הסרוויץ הזה של http ולהתחיל להשתמש בו ופה בסוגריים אני נותן לו url כתובת של url איפה הurl שלי אם אני אלך ל-web api
בפרופרטיז על סולושן אני אמצא איפה הוא רץ הנה זאת הכתובת שלו, אני אומר לו בוא לפה, בוא נעשה לזה סטארט ונראה שזה באמת עובד, הוא בכלל לא עובד לי, שכחתי להפעיל אותו.
עכשיו שימו לב מה שקורה זה דבר כזה, אני רוצה פה לבטל את השורה הזאת שלא סיימתי לכתוב אותה, ואני רוצה שבו זמנית יעבוד גם הפרויקט הזה וגם הפרויקט הזה, שתיהם יעשו סטארט בו זמנית.
אז אני הולך ל-properties, למאפיינים, ובמאפיינים שלו אומר לא single start-up project אלא multiple start-up project, שני הפרויקטים יעלו, כאשר בהתחלה עולה הפרויקט של שרת עד שרת ורק אחרי זה את ה-MVC אבל תעלה את שניהם. זאת אומרת שאני לצורך הפתרון שלי צריך את הכל.
כל פרויקט זה למעשה תוכנת .exe או אתר Web, תוכנה נפרדת ו-Solution זה משהו תיאורטי, לוגי, זה למעשה קובץ טקסט שמאחד אותם ליחידה לוגית אחת. אין באמת סולושן כקובץ, זה סתם קובץ טקסט שמתאר לי את הפתרון הכולל שלי, כמו קובץ וורד כזה, כדי שהם כולם יהיו פה.
כאשר כל פרויקט זה למעשה תוכנה אמיתית כבר שאפשר להפעיל אז אי אפשר להפעיל סולושן, אפשר להפעיל רק פרויקטים שזה התוכנות האמיתיות וסולושן זה איזושהי מסגרת לכמה פרויקטים ביחד ברגע שאמרתי לו שיפעיל גם את זה וגם את זה, אני אעשה פה סטארט והוא מפעיל לי את שניהם כאילו עשיתי דאבל קליק על שתי תוכנות אז יש לי פה אנגולר שרץ ויש לי פה צד שרת,
יפה מאוד אצלי אני רואה שזה עובד ככה, אבל אני מעדיף לרשום את הנתיב המלא זה הדבר הזה api/products לא להשתמש ב-default שעשיתי בניסויים בואו נראה שזה web api רגיל ואני רואה שהוא לא עובד לי למה הוא לא עובד לי כי שיחקנו פה בחוקים של ראוטינג בואו נחזיר חזרה את החוקים של ראוטינג
ל-default כדי שיהיה לכם כאילו לא שיחקנו בכלום זה ה-default שלו api/controller/id לא נגענו יופי ואז עכשיו זה אמור לעבוד להם כאילו עשיתי את הקונטרולר הזה מ-0 את כל הפרויקט הזה מ-0, אתם יודעים מה? כדי להסיר ספק אני אעשה אותו זריז מ-0, רק כדי שלא יהיה לכם ספק על מה שעשינו שם במשחקים האלו כשהסברתי לכם את זה, אני רק מעתיק את השם שלו, מוחק לגמרי את הפרויקט הזה, אני גם הולך לתיקייה של
הסולושן ומוחק אותו מהתיקייה הזאת של הסולושן, ממש משמיד אותו, אז אין לי את הפרויקט הזה, יש לי סולושן ופייקג'ים שהוא צריך וחנות, אנגולר, ואני עושה פרויקט חדש מאפס, זריז, רק כדי שיהיה לנו ככה הכל נקי New Project, בוחר C-Sharp Web, שימו לב לא Core, אלא Web API מלא, נותן לו את השם שלי, עושה אוקיי, אומר לו שזה פרויקט ריק, אני
לא צריך שיהיה לי כבר הכל מלא, רק תעשה לי הכנות קטנות ל-Web API, עושה אוקיי, ההכנות האלו זה למעשה ה-Routing שהוא עושה לי, הנה כאן אנחנו יכולים לראות שזה ההכנות האלו שהוא עשה, אם לא הייתי עושה V של הכנות, לא היה עושה את הקובץ הזה והייתי צריך לעשות אותו ידנית אני לא משנה כלום הולך למודל ועושה אייטם חדש מסוג entity framework קורא לו מודל
אחד שימו לב אני לא כותב אף שורת קוד ומתחבר לשרת sql שלי מי זה שרת sql שלי זה זה אני עושה סלאש לא רואה פה דאטאבייסים בוא נעשה sql management studio ssms הנה הוא sql server management studio ssms הוא אומר שהוא לא מצליח להתחבר כי לשרת יש לא רק שם אלא גם שם של אינסטאנס אתם רואים שם של מחשב סלאש שם של אינסטאנס אני צריך להעתיק את כל השם הזה ורק אז אני אוכל להתחבר אליו כי יכול להיות שיש לי כמה sqlים שרצים על אותה
מכונה כמה סרוויסים של sql מי שזה לא מתחבר לו שיבדוק שיש לו סרוויס של sql שרץ זאת אומרת פה כותבים סרוויסס ורואים שיש לי פה sql סרוור שהוא בראנינג ואוטומטית זה אומר אחרי הריסטרט הוא גם יעבוד ועכשיו אני צריך פה לרשום לא ככה אלא ככה אקספרס ולבחור דאטה בייס נורפיד אוקיי נקסט אני בוחר גרסה 6 לפני כן אני אומר לו לשמור את כל החיבור הזה לsql את השם והסיסמה והשם של השרת בקובץ webconfig שזה הקובץ הזה פה
מה שזה ייתן לי שאם יום אחד אני אעביר את זה לשרת אחר לא צריך לשנות את הקוד יש קובץ עם כל ההגדרות שנמצא בwebconfig זה קובץ טקסט עם כל ההגדרות ואחת ההגדרות שתהיה שמה זה שם של שרת שלי אז אם אני אני יום אחד מעביר את זה לשרת אחר SQL Database אני לא צריך לחפש בקוד של האתר שלי אלא הכל נמצא ב-Web Config כל ההגדרות אז הוא שומר את זה ב-Web Config בוחר גרסה
אחרונה של Entity Framework אומר לו שאני לא רוצה Store Procedures לייבא אני לא רוצה מפתחות קשרים בין הטבלאות יחיד רבים תעשה לי כמו שצריך באנגלית אחרת הוא יעשה לי במקום רבים מילת Set אני רוצה שיעשה לי מילת Products בקיצור תשאירו את ה-V הזה פרודקטס ואני מייבא רק טבלה אחת של פרודקטס עושה פיניש והוא הולך עכשיו להתחבר לדאטאבייס
לייבא משם את המבנה של הטבלה ולבנות אצלי העתק עם כל המבנה הזה כקלאס בתוך ויז'ואל סטודיו בתוך שרת הווב שלי למעשה שרת הווב שלי יהיה העתק של מבנה נתונים כמו שיש בשרת sql ואנחנו חייבים לעשות לו ריבילד זה מה שעושה אנטיטי פריימורק אנטיטי פריימורק למעשה לוקח שורות בטבלת sql והופך אותם לאובייקטים בc-sharp שאפשר לעבוד
איתם הנה נוצר לי ה-dll ואני יכול לראות אפילו את ה-class product שהוא יצר לי שזה יהיה אובייקטים במקום השורות בטבלה כל שורה יהיה למעשה אובייקט יפה מאוד יש לנו הרצאות נפרדות על אנטיטי פריימורק אחרי שסיימנו לעשות ויש לנו עכשיו נתונים אנחנו צריכים להתחבר אליהם דרך קונטרולר
אני עושה קונטרולר חדש ובוחר קונטרולר עם אנטיטי פריימורק אד ואומר לו לאיזה אנטיטי פריימורק להתחבר ולאיזה טבלה להתחבר סיימתי לעשות את זה רק נבדוק שזה באמת עובד שאפשר באמת לגלוש לאנטיטי פריימורק שלי אני הולך לסולושן אומר לו תריץ את שני הפרויקטים גם את הפרויקט של השרת וגם את
האנגולר ואני אגלוש ישירות לקונטרולר הזה לבדוק שבאמת שרת Web API יודע להתחבר ל-SQL ולהביא לי את כל הנתונים יש לי פה שני פרויקטים שעשו סטארט גם זה וגם זה עלה לי האנגולר ועלה לי השארת Web API אני עושה סלאש וגולש לתוך קונטרולר שימו לב קונטרולר למעשה זה כמו לגלוש לטבלה מסוימת או ליחידה לוגית מסוימת ואני רואה שזה באמת עובד
והכל בסדר עשינו קונטרולר מאפס זריז כדי לוודא שהוא אצלנו נקי שימו לב לא כתבתי אף שורת קוד ב-C-Sharp ואנחנו חוזרים לעולם של אנגולר ואומרים לו לעשות גט ל-URL יפה מאוד ועכשיו אנחנו רוצים להכריז על איזשהו מערך של פרודקטס אבל יש פה בעיה זה לא יעבוד נניח סתם product list מסוג array של product הנה הוא רואה מאיפה לעשות import אל תעשו ככה תמיד תעשו עם נתיב יחסי כי אחרי
זה יש בעיות אחרות שבזמן פרסום האפליקציה אני חייב שיהיו לי נתיבים יחסיים כי אני אכווץ את כל הקוד ואני אזיז אותו בתיקיות למקום אחר בקיצור אל תעשו אף פעם נתיב אבסולוטי מוחלט אלא תמיד נתיב יחסי בסוף הקורס כשנגיע לפרסום של האתר על שרת ווב אמיתי אנחנו נראה שזה מאוד מאוד חשוב,
ואני מכריז עליו כ-aray מסוג product. יפה מאוד. עכשיו, הייתם אומרים לי, יוני, מה הבעיה? תעשה ככה, שווה new, אתם יודעים מה? אפילו לא צריך new. תעשה דבר כזה, ש-product list שווה לזה.
זה נקרא תכנות סינכרוני, ומה הוא כותב לי פה? שהוא לא יכול להפוך משהו שנקרא observables לפרודקט. מה זה observable הזה?
אז זהו, ככה אי אפשר, ככה זה לא יעבוד לכם. למה? כי זה תכנות סינכרוני רגיל. מה זה תכנות סינכרוני? זה אומר שאנחנו מחכים לתשובה מהשרת.
סינכרוני זה אומר שאחד אחרי השני, ואנחנו מחכים לאחד אחרי השני. לפקודה הבאה, הפקודה הבאה בחכה לפקודה הקודמת. ואנחנו לא רוצים לחכות לפקודה הקודמת, למה?
כי אם השרת עובד לאט, כל התוכנה תהיה תקועה. אנחנו רוצים שהממשק הגרפי ימשיך לעבוד, אפשר יהיה לעשות קליקים, אפשר יהיה לעשות כל מיני פעולות אחרות, עד שהשרת מביא לי מידע. אני רוצה שזה יהיה אסינכרוני, שזה יהיה בתרד נפרד שלכן בנו משהו שמטפל בכל הנושא של תרדים וזה נקרא Observables ואם אני עושה פה F12 אני רואה שהגט הזה שמקבל URL וגם מקבל איזה שם אופצ'יינס הוא מחזיר
לי Observables. Observables הזה בדיוק בא לטפל בפקודות אסינכרוניות וזה מה שאנחנו הולכים בדיוק עכשיו ללמוד. שימו לב, אבזורבאבלס הזה, כל הפקודות, גם גט מחזיר אותו.
גם פוסט לשרת מחזיר אותו. שימו לב, פוסט, הוא מקבל גם URL וגם באדי. יש לו את הבאדי. לדוגמה, אני אשתמש בפוסט שאני אשלח רשימת ההזמנות לשרת, מה המוצרים שהלקוח הזמין. אז שניהם, גם גט וגם פוסט, שולחים בקשה לשרת, רק פוסט מצרף לבקשה עוד משהו בבאדי.
לדוגמה, רשימת מוצרים. גט שולח בקשה בלי לצרף עוד משהו. ושניהם מקבלים תשובה חזרה. החזרה הזאת נקראת ריספונס תגובה של השרת והתגובה הזאת של השרת זה למעשה קלאס שיש בו כל מיני שדות ואנחנו נראה את זה אנחנו רואים שיש פה Observable שזה למעשה משתנה שמטפל בכל הטיפול
הסינכרוני אנחנו הולכים לדבר עליו ומסוג ריספונס עכשיו איפה כל זה נמצא אם אנחנו נעמוד עם העכבר אנחנו נראה שאנחנו נמצאים בתוך תיקיית מודולס אנחנו יכולים לעשות פה Open Container ולראות שהדבר הזה הוא חלק מנוד מודולס של אנגולר זה למעשה בתוך האנגולר זה הקוד של אנגולר אז האבזורבאבל הזה לעומת זאת אם אני אלחץ עליו Go to Definition
אנחנו נראה שהוא נמצא לא בתיקייה של אנגולר תראו טוב טוב הוא נמצא בתיקייה שנקראת RxGS RxGS מה זה הדבר הזה ומה זה האבזורבאבל הזה ואיך עובדים איתו המתכנתים של אנגולר משתמשים ב-JavaScript Library חיצוני במחלקה חיצונית שהיא לא שלהם בשביל האבזורבאבל הזה ואנחנו צריכים ללמוד את זה כי אנחנו רוצים להשתמש בגט של האנגולר ולהביא