יצירת שירות Web API
להורדת קוד מקור של כל הדוגמאות בקורס MVC – לחץ כאן
פרקי ההרצאה: יצירת שירות Web API
תמלול ההרצאה: יצירת שירות Web API
הטקסט המלא של הדקות הראשונות בהרצאה «יצירת שירות Web API» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו עוברים לנושא מאוד מעניין שנקרא Web API. Web API זהו סרוויס שאנחנו יכולים לבנות שקיים באתר שלנו כך שמישהו יכול לגלוש אלינו ולקבל בחזרה מידע.
הסרוויס לא מחזיר UI, לא מחזיר Views, הוא מחזיר רק מידע בהתאם לבקשות שהוא מקבל. הדבר הזה מקביל לטכנולוגיות יותר ראשונות כמו Web Service או WCF, כלומר Windows Communication Foundation, אבל מה שמיוחד ב-Web API זה שא' הוא בנוי על טכנולוגיית רסט, כלומר על ורב שאנחנו שולחים לסרדיס.
מה זה ורב? ורב זאת מילה שנמצאת בתוך הרקווסט ומתארת מה ברצוננו לעשות. כמה מילים שבטח נפלתם בהן זה גט ופוסט, אבל יש גם put ויש delete.
מה זה אומר המילים האלה? אם אנחנו שולחים לשירות גט ואומר שאנחנו רוצים לקבל משהו בחברה, אם אנחנו שולחים לשירות פוסט, זה אומר שאנחנו רוצים להוסיף משהו לדאטאבייס.
אם אנחנו שולחים put, זה אומר שאנחנו רוצים לעדכן מידע. אם אנחנו שולחים delete, זה אומר שאנחנו רוצים למחוק מידע. הקונספט הזה שהפעולה בצד של השרת מתבצעת בהתאם לאותה מילה שנקראת ורב, הקונספט הזה נקרא REST או RESTful Service.
ה-Web API בנוי על כל הקונספט הזה. בואו נראה איך אנחנו בדיוק יכולים להרים סרוויץ לאווירי. יש לנו כאן קודם כל קונטרולר שאנחנו צריכים להוסיף.
קונטרולר, נקרא לו product api controller, מפני שזה לא קונטרולר רגיל, זה קונטרולר עבור שירות Web API. עכשיו הקונטרולר הזה קודם כל אמור לרשת מ-api controller.
פה אנחנו כותבים פונקציה, פונקציה לא מחזירה Action Result, היא תחזיר לנו List של Product. כלומר הפונקציה מחזירה מידע טהור. עכשיו, השם של הפונקציה הוא מאוד חשוב.
השם של הפונקציה צריך להתחיל במילה המיוחדת שנקראת ורד, כלומר בגט או בפוסט או בגילית או בפו. אז יש לנו כאן גט, לא נקרא לה גט אינטקסט, נקרא לה גט פרודקטס.
כאן אנחנו רוצים להיכנס למסד הנתונים, בואו נעשה פה טריי קאץ', במידה והייתה שגיאה כלשהי בשרת נחזיר נ"ל ואז נוכל לדעת בצד של הלקוח אם יש לנו נתונים או שלא קיבלנו שום דבר, זה בטראי מה שנעשה וניגש לביזנס לוג'יק שלנו ונחזיר את רשימת המוצרים.
פה סיימנו לבנות את הפונקציה בצד של השרת ששייכת לקונטרולר של Web API. עכשיו, איך בדיוק לקוח גולש לקונטרולר הזה? בואו נסתכל רגע על פתיעת אפ סטארט ונזכר שיש לנו פה ראוטס.
הראוטס הזה שנמצא במחלקה ראוט קונפיג ונרשם בפונקציה רג'יסטר ראוטס, בנוי לקונטרולרים רגילים ולא לקונטרולרים של Web API. לכן אנחנו רואים פה קונטרולר, אנחנו רואים פה Action ואנחנו רואים פה ID.
אבל יש כאן עוד קובץ שנקרא Web API Config. כאן גם כן יש רישום של ראוטס, אבל אנחנו רואים פה משהו טיפה שונה. קודם כל הרישום מתחיל ב-API. האמת הוא יכול להתחיל בכל מכרזת אחרת אבל נהוג שהוא יתחיל בתחילית API. זאת אומרת שעל הלקוח קודם כל לרשום את המילה API.
לאחר מכן סלאש, לאחר מכן שם של קונטרולר. יכול להיות שיש לנו בשירות שאנחנו בונים מספר קונטרולרים. אחד שאחראי על מוצרים, אחד של לקוחות, אחד של ספקים.
כל אחד כזה נחשב מעין סרוויס בפני עצמו שמקפל בתחום נפרד במערכת שלנו. אז כאן הוא צריך לרשום את הקונטרולר, לאחר מכן הוא רושם את ה-ID שהוא רוצה לשלוח.
משהו חסר פה, אין פה בעצם את האקשן שהלקוח אמור לרשום לנו. למה אין את האקשן? למה הלקוח לא אמור לציין לנו לאיזה פונקציה הוא רוצה להיכנס בשירות?
אז התשובה היא בגלל המילה הראשונה שהפונקציה מתחילה בה. ה-API הזה, ה-Web API הולך לגלות לבד איזה אקשן להפעיל לפי התחילית של הפונקציה ולפי הפרמטרים שהיא מקבלת.
זאת אומרת שאם לקוח גולש לשירות הזה ושולח לנו את ה-verb כגט בלי שום פרמטרים, אוטומטית זאת הפונקציה שתתבצע. אם הוא שולח לנו פרמטר, אז המערכת תחפש פונקציה אחרת שמקבלת את הפרמטר הזה.
אז בואו נסתכל קודם איך אנחנו מסוגלים לגלוש. אם אנחנו נריץ את האתר, אנחנו כמובן לא נגיע לשום מקום, נגדיר פה API ואת השם של ה-products API, שזה השם של ה-controller, אז אנחנו הולכים לקבל מידע XMLי, דפדפן מציג אותו כ-XML ואנחנו רואים את כל רשימת המוצרים.
אנחנו כמובן רוצים לבצע קריאה מצד לקוח על ידי איזשהו לחצן או משהו, תכף אנחנו נטפל בזה. וקודם כל אנחנו רואים שקיבלנו את כל המוצרים.
למה בעצם קיבלנו XML? Web API מצליח לזהות מה הבקשה שדורשים ואיזה סוג מידע דורשים, ואוטומטית הופך את המידע לפורמט הרצוי. דרדפן פועל ב-XML ולכן דרדפן אומר לו אני רוצה לראות את המידע כ-XML ואז ה-Web API הופך את המידע שלו למידע XMLי ומחזיר קובץ XML עם כל הנתונים.
אם אנחנו גולשים מהלקוח אולי עדיף לנו לבקש את המידע ב-JSON ואז אנחנו נקבל את כל המידע בפורמט JSON. אז בואו נראה איך אנחנו גולשים לשירות הזה מקונטרולר רגיל ומקבלים את המידע בצד הקליינט ומציגים אותו.
לצורך כך בואו נוסיף עוד קונטרולר נקרא לו ohm יש לנו פה פונקציית אינדקס נגדיר עבורה view זאת אומרת שאנחנו יכולים בגלישה פשוטה לגלוש למשהו שיש לו view בעת מה שאנחנו רוצים לעשות זה לבצע איזשהו לחצן ובלחצן להציג את הנתונים לגלוש מהלחצן לשרת ישירות לשירות הזה לקבל את כל הנתונים ולהציג אותם בואו נרשום פה בעצם בואו נוריד את הדבר הזה נגדיר פה
input type שווה בחן value שווה get all products יש לנו פה סגירה נגדיר כאן סקשן של scripts ונתחיל לעבוד בעזרת jQuery בכדי להירשם ללחצן ולקרוא ב-ajax לשירות נגדיר פה ID נקרא לו btn get all products נירשם בדוקימנט רדי צריך להיות קודם כל בתוך script בשביל שזה יעבוד נירשם בדוקיומנט רדי לאירוע הלחצן,
נאתר פה את הלחצן, נירשם לאירוע קליק שלו, בתוך אירוע קליק נבצע קריאת אג'אקס ישיבות לסרוויס. אוקיי, אז אנחנו צריכים קודם כל לתאר מהי המילה של הוורד שאנחנו מעוניינים בה, זה יהיה גט.
לאחר מכן מהו ה-URL ה-URL יהיה API מפני שהראוט מתחיל ב-API, לאחר מכן השם של הקונטרולר. פרודקטס API. לאחר מכן מה הפעולה שאנחנו רוצים לבצע כאשר יש סקסס.
זה יהיה פונקצ'ן שמקבלת את הדאטה בחזרה ועושה איתו משהו, תכף נעשה איתו משהו. במידה והייתה שגיאה אנחנו רוצים לקבל את השגיאה ולהציג אותה באלרט.
נציג פה ארור סטטוס. אפשר לנו רק לכתוב את הפונקציה בצד של הקליינט שתתבצע כאשר נקבל את המידע אם הכל היה בסדר. מה נעשה בפונקציה?
בואו נייצר כאן למעלה Unordered List. ניתן ל-Unordered List ID, נגדיר אותה כ-Product List, נרוץ בלולאה על כל הנתונים, מפני שאנחנו הולכים לקבל מערך שלם, ומה שנעשה פה זה על כל פריט במערך שאנחנו קיבלנו, כמובן המידע יגיע אוטומטית ב-JSON בצד של הלקוח, אנחנו ב-JQuery נבנה הוספה ל-Unordered
List. מה אנחנו רוצים להוסיף לתוך ה-Unordered List? כמובן בליסט אייטם בואו ניגש לכל אחד מהפריטים