יצירת אפליקציה עם חיבור למסד נתונים
GetProductName מקבלת מזהה מוצר ומחזירה את שמו, והפונקציה GetAllProducts מחזירה רשימה של מזהה, שם ומחיר.api/Northwind/1 מפעיל את הפונקציה שמקבלת פרמטר, והנתיב api/Northwind בלי פרמטר מפעיל את הפונקציה שמחזירה את כל המוצרים.cache: false כדי שהנתונים יהיו עדכניים.פרקי ההרצאה: יצירת אפליקציה עם חיבור למסד נתונים
תמלול ההרצאה: יצירת אפליקציה עם חיבור למסד נתונים
הטקסט המלא של הדקות הראשונות בהרצאה «יצירת אפליקציה עם חיבור למסד נתונים» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו מגיעים לבניית מערכת Client Server. מה זה אומר? זה אומר שאנחנו, מעבר לזה שאנחנו הולכים ליצור אפליקציית PhoneGap, שהולכת להיות מותקנת על איזשהו טלפון סלולרי, אנחנו רוצים שיהיה לנו גם צד שרת.
כלומר, איזושהי מערכת שקיימת בשרת מרוחק, ואנחנו רוצים שהאפליקציה שאנחנו בונים תוכל לתקשר עם השרת, תוכל לשלוח לשרת מידע ולקבל בחזרה מהשרת נתונים.
אז איפה הדבר הזה יכול לבוא לידי ביטוי או לעזור לנו במציאות? היום אם אתם בונים אפליקציה ואתם רוצים שהמידע שיהיה חלק מהאפליקציה יגיע משרת מרוחק, אתם חייבים שיהיה לכם את הצד שרת הזה.
אם אתם רוצים לדוגמה לתת נתונים לגבי, סתם אני זורק, מזג אוויר, הרי הנתונים לא נמצאים בצד של הלקוח. אם אתם רוצים לתת מידע לגבי שערי מטבעות או מניות בבורסה, או סתם תמונות שאתם רוצים לתת מהשרת או מילון.
היום המון אפליקציות שואבות את המידע שלהם מהשרת שמעודכן כל הזמן. אז כאן אנחנו הולכים להרים גם קליינט וגם סרבר. הסרבר יהיה המערכת שרצה בשרת מרוחק, הקליינט יהיה אפליקציית פונגאפ שמותקנת בצד של הלקוח, בטלפון שלו.
אני הולך לבנות את הסרבר במערכת הדוטנט. אני הולך להשתמש במערכת שנקראת sp.net/mvc4 כדי לבנות מעין שירות שנמצא באוויר ולאחר מכן מערכת של פונגאפ, אפליקציה שמותקנת כרגע על Windows 8 באמולטור, Windows Phone 8, תוכל לשלוח מידע לשרת, לקבל ממנו בחזרה נתונים ולהציג אותו על הטלפון.
בשביל לעשות את זה אנחנו צריכים להכיר המון דברים ולעשות המון דברים במהלך הפיתוח, אז בואו נשים לב טוב על כל מה שאנחנו צריכים לעשות. דבר ראשון, בכדי להצליח לעשות את ה-Server בוויז'ל סטודיו, אנחנו צריכים להריץ את ויז'ל סטודיו כאדמיניסטרטורים.
זה אומר שאנחנו לא יכולים סתם כך ללחוץ על הלינק של ויז'ל סטודיו, כי אחרת אנחנו לא נצליח להרים את האתר שיהיה באוויר, את השירות שיהיה באוויר.
יש כל מיני שיטות להריץ את ויז'ל סטודיו כאדמיניסטרטור, אבל בואו נראה איך אנחנו יכולים להגדיר שבצורה תמידית ויז'ל סטודיו תרוץ כאדמיניסטרטור.
אם אנחנו לוחצים מקש ימני על הלינק של Visual Studio אנחנו יכולים לראות כאן את הקישור עצמו של ההרצה. אם אנחנו לוחצים עליו גם מקש ימני אנחנו רואים שיש לנו פה open והוא מודגש בשחור run as administrator והוא לא מודגש.
קודם כל אנחנו יכולים ללחוץ על הלינק run as administrator וזה ירוץ באופן רגעי כאדמיניסטרטור. כלומר רק ההרצה הנוכחית הזאת תהיה אדמיניסטרטור.
אם אנחנו הופכים את ה-Run as Administrator למודגש אז כל הרצאה של Visual Studio אז Visual Studio תרוץ כ-Administrator. זה אומר שיהיה לנו הרבה זכויות לביצוע דרך Visual Studio על המחשב וזה משהו שאנחנו צריכים כרגע.
בכדי ש-Run as Administrator יהיה תמיד מודגש אנחנו הולכים ל-Properties ובכרטיסייה shortcut אנחנו ניגשים ל-Advanced ומסמנים Run as Administrator.
אני רוצה אוקיי, אוקיי, שוב מקש ימני, אנחנו רואים שה-run as Administrator עובר להיות מודגש.
זה אומר שאם אנחנו עכשיו לוחצים פשוט על הלינק, אנחנו כבר עכשיו מריצים את Visual Studio כאדמיניסטרטור, ואנחנו יכולים לראות את ההודעה הזאת שאומרת שאדמיניסטרטור מנסה להריץ את התוכנית, או אנחנו חייבים הרשאות כאדמיניסטרטור, ואם אנחנו מוכנים, כמובן.
כעת הרצנו את Visual Studio כאדמיניסטרטורים. הדבר הבא שאנחנו הולכים לעשות זה לא לפתוח פרויקט פון גאפט, אלא אנחנו רוצים שיהיה לנו שני פרויקטים.
אחד הסרבר ואחד הקליינט כאשר הקליינט הוא הפונגר. לכן מה שאנחנו הולכים לעשות, אנחנו הולכים לסגור פה את Visual C-Sharp, ללכת ל-Other Project Types ולבחור Visual Studio Solutions.
לבחור Blank Solution. בואו נבחר את התיקייה המתאימה, אנחנו ב-Web Access, Select Fold ובואו נקרא לכל הפרויקט הזה או ל-Solution יותר נכון Web.
אם אתם מריצים גרסה של Visual Studio, שנחשבת כאקספרס אז יכול להיות שלא יהיה לכם visual studio solution blank solution אם אין לכם דבר כזה זה אומר שכל מה שאתם צריכים לעשות זה לסמן תיקייה create directory for solution אתם רואים כאן אין לי כרגע יכולת לסמן אותה בגלל שאני בוחר רק את ה solution אבל כאשר אתם יוצרים פרויקט רגיל בפונגאפ אתם יכולים לסמן קריאייט דירקטורי פור
סלושן ואז לתת שם לתקייה של הסלושן וזה נותן לכם פחות או יותר את מה שקורה כרגע מבחינתי. אז בואו נצרף סלושן רק ומה שזה עושה הצירוף של הסלושן בוויז'ואל סטודיו אם אנחנו הולכים לopen folder in file explorer כל מה שזה עשה זה פתח תקייה נפרדת עבור הסלושן.
סלושן זה קובץ שאחראי על מספר פרויקטים ואנחנו לא רוצים שהקובץ הזה יהיה בתוך פקיעה של פרויקט מפני שהוא בכיר יותר לפרויקט. אם נניח נלך לאחד הפרויקטים שבנינו, לדוגמה מדיה, ניכנס לתוך פרויקט מדיה שבנינו, נראה שקובץ הסלושן יושב, הנה הוא כאן, ביחד עם הפרויקט עצמו, כל הפרויקט של פונגה.
וזאת לא תמונה נכונה. מתי עושים דבר כזה? רק אם אין לנו יותר פרויקטים אלא יש פרויקט אחד בלבד בכל המערכת. אם יש כמה פרויקטים במערכת, שזה בדרך כלל מה שיקרה לנו, אז זה לא נכון שקובץ ה-Solution יהיה ביחד עם קובץ של פרויקט.
אתם רואים כאן קובץ CS-ROG של Visual Studio. קובץ ה-SLN לא אמור לשבת באותה התיקייה, הוא אמור לשבת בתיקייה בכירה יותר.
אם אנחנו פותחים Create Directory for Solution, אנחנו יכולים לראות שנפתחה לנו פה תיקייה, ובתוכה יושב קובץ ה-SLN. לעת אם אנחנו מצרפים פרויקטים הפרויקטים לא ישבו ישירות כאן אלא בתיקייה נפרדת משלהם.
מה זה ייצור? זה ייצור שקובץ ה-SLN יושב תיקייה אחת מעל כל הפרויקטים שהוא אחראי להם. בואו נלחץ מקש ימני, נבצע Add ונלך ל-New Project והפרויקט הראשון שאנחנו רוצים להוסיף זה פרויקט לא Visual Basic אלא Visual C-Sharp Web בוחרים פה Visual סטודיו 2012 כי התבניות
האלה נבנו ב-2012 עבור ויז'ואל סטודיו 2012 אנחנו בוחרים ASP.NET MVC4 Web Application ואני נותן שם בעצם למערכת של הסרוויס שאני בונה ומה שאני הולך לבנות אני הולך לבנות מערכת ששואבת מידע ממסד נתונים אמיתי מסד נתונים שיושב ב-SQL Server מסד הנתונים הזה נקרא Northwind זה מסד נתונים חינמי של
מייקרוסופט שמכיל מידע לגבי יבוא וייצוא של מוצרי מזון ייחודיים מכל העולם. זה מסד נתונים מאוד קל לפיתוח, הוא חינמי והוא מיועד בכדי להדגים עליו ולנסות עליו דברים.
ואני כרגע בונה שירות שחושף נניח את המוצרים של Northwind ואני רוצה דרך אפליקציית פונגאפ לגשת ולקבל את המידע הזה ממסד הנתונים שנמצא בשרת.
אז אני אקרא לשירות Northwind Service בואו נבצע אוקיי והדבר הבא שהמערכת הולכת לשאול אותי זה איזה סוג פרויקט אני רוצה ב-MVC MVC קיצור של מודל View Controller זה בעצם מערכת ובית חדשה של מיקרוסופט שמאפשרת לבנות כל מיני דברים שרצים בשרת ונותנים שירות ללקוחות לדוגמה אתרי אינטרנט לדוגמה, שירותים, אני רואה כאן Web API.
Web API זה בעצם שירות שקיים באינטרנט, מיועד עבור פרוטוקול HTTP, ואנחנו יכולים להתחבר אליו מאפליקציית פונגה. יש לנו פה אינטרנט אפליקיישן, יש לנו פייסבוק אפליקיישן, אינטרנט עבור רשת פנימית של חברה, סינגל פייג' אפליקיישן, אפשר לבנות עם זה מובייל
אפליקיישן גם, כלומר, אתר שמותאם למובייל, שמשתמש ב-JQuery מובייל, אז אני בוחר Web API, בואו נבצע אוקיי, ובואו נראה מה הדבר הראשון שאנחנו צריכים לעשות.
הדבר הראשון שאנחנו צריכים לעשות זה לגרום לאתר הזה להיות באוויר. By default, כאשר אתם פותחים אתר אינטרנט או שירות אינטרנט בוויז'ל סטודיו, אז הוא רץ על איזושהי תוכנה שכביכול חושפת אותו מהמחשב אבל היא לא באמת חושפת אותו מחוץ למחשב.
זאת אומרת, התוכנה הזאת שנקראת IIS Express, כלומר Internet Application Services Express, זאת תוכנה שבעצם מסוגלת רק להריץ לכם את האתר מתוך Visual Studio, אבל אי אפשר לגלוש לאתר הזה מבחוץ.
עכשיו, אתם יכולים לשאול את עצמכם למה אני רוצה לגלוש לאתר שאני בונה מחוץ למחשב, הרי אני נמצא בתוך המחשב, אז התשובה היא כי האמולטור של PhoneGap, או יותר נכון האמולטור שאנחנו עובדים איתו של Windows Phone 8, נחשב מחשב חיצוני אחר, הוא ממש נחשב טלפון מובייל אמיתי לכל דבר, והוא לא קשור למחשב
הנוכחי שאנחנו רצים עליו. זה אומר שהאתר שלנו חייב להיות באוויר. אנחנו מבצעים את זה על ידי פרופרטיז. בתוך פרופרטיז אנחנו ניגשים לכרטיסייה Web, וכאן אנחנו רואים שהאתר רץ על IIS Express, Internet Information Services Express.
זה אומר שזה לא באמת חשוף מחוץ למחשב. כל מה שאנחנו צריכים לעשות זה לומר שאנחנו צריכים להריץ אותו על ה-local-iis או אם יש לכם אתר חיצוני מוכן על external host.
עכשיו אם אתם פותחים את הגלילה הזה, תתיבת גלילה הזאת ואין לכם local-iis זה אומר שלא מותקן לכם במחשב תוכנת iis שהתפקיד שלה זה לחשוף אתרי אינטרנט מחוץ למחשב ואם אין לכם תוכנת iis אתם עדיין יכולים לפתח אתרי אינטרנט בוויז'ל סטודיו
על ידי איי-אס אקספרס אבל אנחנו לא נצליח לחשוף אותם לאפליקציית פונגה זה אומר שאם אין לכם את הלוקל איי-אס כל מה שאתם צריכים לעשות זה לגשת לפרוגרם פיילס של המחשב שלכם לפתוח ולומר למחשב להתקין את איי-אס ברגע שעשיתם את זה מופיע לכם
לוקל איי-אס במחשב בואו נבחר את לוקל איי-אס וכעת אנחנו רואים שהולכת להיות לנו תיקייה ב־HTTP/Localhost/Northwind/Service ואנחנו צריכים ללחוץ על Create Virtual Directory. ברגע שאנחנו לוחצים על הדבר הזה אז המערכת יוצרת לנו תיקייה עבור האתר שאנחנו בונים כרגע
או השירות זה לא משנה זה אותו הדבר וכעת כל מה שאנחנו בונים אכן חשוף לעולם בואו נעשה סייב הוא שואל אותי פה איזושהי שאלה don't ask again yes סוגר ובעצם אני יכול לגשת ולפתח את הפרויקט שלי.
אם אתם רוצים לדעת איך להתקין את ה-IS אצלכם במחשב במידה ואין לכם אותו, מה שאתם צריכים לעשות זה לגשת לחיפוש Add Remove Programs, מפייל נעביר ל-Settings, יש לנו פה את Add or Remove Programs, ואתם צריכים ללכת ל-Tone Windows Features On or Off, בחלונית שמופיעה לכם אתם צריכים פשוט לסמן את כל מה שקשור ל-IIS כולל כל מה שיש בתוך.
בואו נחפש פה את "Internet Information Services" אתם רואים את זה כאן. יש לכם את ה-V הזה ואת ה-V מתחתיו, "Internet Information Services" פשוט לפתוח אותו ולסמן הכל כולל הכל.
עד עכשיו לא ממש הבנתי מה בדיוק אני צריך ומה אני לא צריך בשביל ש-IIS תעבוד כמו שצריך. רמת המורכבות פה היא מיותרת לחלוטין וגבוהה אז אני פשוט מסמן את הכל אומר למערכת אוקיי בוא תתקין לי את כל מה שצריך לגבי ה-IIS תודה רבה ווינדוס מתקינה פשוט את הכל ואז יהיה לכם את אותו הלינק שמקודם ראינו את אותה אופציה
בתיבת הגלילה local IIS לא לשכוח ללחוץ על create virtual directory וכעת האתר הזה נחשב באוויר. הדבר הבא שאני רוצה לעשות זה בגלל שאני רוצה להתחבר למסד נתונים אמיתי אז אני הולך בפרויקט ה-MVC לאזור של המודלס כאן בעצם אנחנו יכולים לצרף מה שקשור לדאטאבייס ואני מבצע add new item ואני רוצה להתחבר לדאטאבייס
יש לי פה דאטה ואני יכול לבחור adio.net entity data model שיטה של התחברות לדאטאבייס של מייקרוסופט מאוד מאוד נוחה אני קורא לקובץ Northwind, שזה השם של הדאטאבייס שלנו, Add, ופשוט מתחבר לדאטאבייס ומביא סכמה של כל הנתונים
שיש שם. בואו נלך Next. כאן אנחנו צריכים איזושהי קונקשן סטרינג, New Connection. לפעמים אתם רואים את החלון הזה בוויז'ל סטודיו.
אם אתם עובדים עם SQL Server, אתם צריכים לבחור Microsoft SQL Server ראשון. בחלון הזה אתם צריכים לתת את השם של המחשב שמכיל את מסד הנתונים. אצלנו זה נקודה סלאש sql express, נקודה אומר מחשב נוכחי.
מקודם בניתי איזשהו יוזר ופסוורד עבור מסד הנתונים Northwind, יש לי פה את היוזרניים הזה, פסוורד נתתי 1234, כאן אני אמור לבחור את המסד נתונים עצמו, ניתן לו למצוא אותו, זה יהיה Northwind.
טסט קונקשן תמיד טוב לעשות, לראות שהוא מצליח להתחבר למסד הנתונים, ונבצע אוקיי. כעת בעצם ביצענו התחברות למסד הנתונים מבחינת ה-Service שאנחנו בונים בצד של השרת.
עכשיו אנחנו רואים שהוא by default לא מראה לנו את הסיסמה בתוך ה-Connection String, במכרוזת ה-Connection String שלנו, אנחנו נגיד לו שכן, לצורך הדוגמה תשאיר לי את הסיסמה כאן, נבצע Next, Next ונאמר למערכת אלו טבלאות או Stored Procedures או VUs שקיימים בתוך ה-Database, אנחנו מעוניינים להשתמש איתה.
בואו ניתן לו לרוץ, יש לנו פה את הטבלאות, אנחנו יכולים לבצע בחירה של כל הטבלאות שנמצאות בתוך הדאטאבייס, אנחנו רואים פה את כל הטבלאות, או שאנחנו יכולים לבחור רק חלק מהן.
אני כרגע אבחר את כל הטבלאות, אני יכול לבחור גם Views שנמצאים בדאטאבייס, או Stored Procedures, יש לנו כאן את השלושת ה-Vs האלה שתמיד טוב שהם יהיו, ו-Finish.
ואנחנו רואים שהקישור לדאטאבייס הצליח, אנחנו רואים פה סכמה של כל הטבלאות, כאן אנחנו יכולים לטייל עם הסכמה, ניתן לו את הזמן שלו, יש לנו פה אפשרות לראות בדיוק במינימאפ כזה כל הטבלאות, כל טבלה מיוצגת על ידי איזושהי קלאספי שלה, בואו נעשה פה שמירה ונסגור את הסכמה הזאת, נסגור את זה ואנחנו יכולים לגשת ולבנות את הקוד בצד של השרת.
בפרויקט MVC הקוד עצמו מתבצע באזור של הקונטרולרים, קונטרולר זה פשוט מאוד מחלקה שמנהלת את העניינים, זה הבוס הגדול שנמצא בשרת והוא מנהל את העניינים.
אנחנו רואים בפרויקט מסוג Web API שיש לנו כאן, values controller, נתנו לנו פה איזשהו קונטרולר עבור כל מיני ערכים שהוא מסוגל להחזיר.
אני הולך לשנות לו את השם מ-values controller ל-northwind controller. בואו נשנה לו את השם, נגרום לו לשנות גם את השם בקלאס עצמה. נותנים פה Northwind Controller.
שימו לב שהוא יורש מ-API Controller ולא מקונטרולר רגיל. לא מהמחלקה קונטרולר, מפני שאנחנו לא בונים קונטרולר של אתר אינטרנט רגיל, אלא אנחנו בונים קונטרולר של סרוויס בכדי לגשת אליו מאפליקציית מובייל.
ניימספייס עדיף שהוא יהיה תמיד אותו השם בכל המקומות. בתוך הקונטרולר הזה אנחנו רואים שיש לנו כל מיני פונקציות והטריק ב-Web API זה שכל פונקציה חייבת למעשה להתחיל במילה שמציינת את סוג ה-request שמתבצע אם אנחנו רוצים לקבל נתונים מהטלפון הנייד כלומר
מהשרת לטלפון הנייד אז אנחנו בעצם רוצים לייצר request מסוג get ולכן אנחנו צריכים שהפונקציה תיקרא get או שתתחיל ב-get לדוגמה get product אם אנחנו רוצים שהפונקציה תוסיף מידע לדאטאבייס היא צריכה להיקרא פוסט או להתחיל במילה פוסט.
אם אנחנו רוצים לעדכן מידע מדאטאבייס על הפונקציה להיקרא פוט או להתחיל בפוט. ואם אנחנו רוצים למחוק מידע מדאטאבייס היא צריכה להיקרא delete או להתחיל במילה delete.
וזה משהו שהוא must ב-Web API. ואני כרגע הולך להיפטר מכל הפונקציות האלה כי אני הולך לבנות פונקציה משלי. בואו ניפטר מכל הפונקציות יש לנו פה את הקונטרולר הזה שהוא כרגע ריק לחלוטין ומה שאני רוצה לעשות אני רוצה לבנות סך הכל שתי פונקציות פונקציה אחת מקבלת קוד מוצר ומחזירה את השם שלו פונקציה אחרת מחזירה פשוט את כל המוצרים
אז בואו נבנה public string פונקציה חייבת להתחיל בגט כי אני מחזיר מידע get product name נקרא לה והיא מקבלת int product ID. כאן אני רוצה להתחבר ל-entity framework ולהחזיר השם של המוצר שהתקבל. בואו ניקח פה product, נחפש את המוצר שהproduct ID שלו זה הproduct
ID שנשלח לפונקציה. במידה ולא נמצא prod יהיה שווה ל-null אז נחזיר מחרוזת ריקה. אחרת, להחזיר את השם שלו, שזה בדיוק מה שהפונקציה אמורה לעשות.
בואו נשכפל את כל הפונקציה הזאת, ונבנה עוד פונקציה שנקראת get all products. הפונקציה לא אמורה לקבל שום דבר, ואנחנו אמורים פשוט להחזיר את כל המוצרים. בואו נפנה לעצמנו מקום לתכנות.
נבחר את כל המוצרים, אבל בואו נבחר מכל מוצר רק כמה דברים, בשביל להחזיר כמה שפחות מהשרת ללקוח. אני לא רוצה את כל מה שיש במוצר, אני רוצה ליצור אובייקט חדש שמפעיל product ID, product name ו-unit price.
נהפוך את זה לאיזושהי רשימת פריטים, ונחזיר את כל הרשימה לאשר הפונקציה צריכה להחזיר קולקשן ולא סטרינג. נחזיר iEnumerable, שזה ב-dotnet בסיס של קולקשנים.
נפטר מכל המרחבי שמות, כולו צריכים לראות. ויש לנו כרגע שתי פונקציות בצד של השרת שיכולות לקבל מידע, אחת מקבלת Product ID, השנייה לא מקבלת כלום למען האמת ומחזירות נתונים.
דבר ראשון אני רוצה לבדוק אותם. אני רוצה ממש לגלוש אליהם ולראות שאני אכן מקבל את המידע. אז איך אני גולש אליהם? אז בפרויקט ASP.NET MVC יש לנו משהו שנקרא Routes.
יש לנו פה את אקיית אפ סטארט ואנחנו רואים פה Route Config ו-Web API Config. ב-Web API Config אנחנו רואים שיש לנו איזשהו נתיב שמוגדר לגלישה עבור פונקציות באתר שלנו, פונקציות שנמצאות בתוך קונטרולר שהוא API קונטרולר ואנחנו צריכים אחרי שאנחנו גולשים לאתר לרשום
את המחרוזת API לאחר מכן אנחנו צריכים לרשום את השם של הקונטרולר בלי המילה קונטרולר שמסיימת אותו ולאחר מכן אנחנו צריכים לרשום את הפרמטר ID שמתקבל לפונקציה אוקיי אז בואו נבדוק את זה כל מה שאנחנו צריכים לעשות ולהריץ את האתר הזה בואו נריץ אותו על ידי ctrl f5 ואנחנו יכולים לראות שהגלישה הצליחה להתבצע לאיזשהו דף default שקיים לנו באתר ואנחנו רואים שאכן האתר
הזה נמצא באוויר מפני שאנחנו רואים http://localhost זה אומר סך הכל שהוא נמצא על המחשב המקומי על iis שחושפת אותו למחשב המקומי אז יש לנו את השם של האתר שבנינו, או של השירות שבנינו.
זה בדיוק השם של התיקייה הווירטואלית שיצרנו. עכשיו כל מה שאנחנו צריכים לעשות זה לרשום בדיוק את הנתיב שמקודם ראינו. api / שם הקונטרולר היה northwind / איזשהו ID, לדוגמה 1. אם אנחנו רושמים את כל הנתיב הזה, בעצם מה שקורה זה שהמערכת יודעת אוטומטית ב-Web API איזו פונקציה להפעיל.
איך זה יכול להיות? מפני שקודם כל רשמנו API. זה אומר שהמערכת יודעת שאנחנו רוצים את הנתיב של ה-Web APIs. לאחר מכן רשמנו שם של קונטרולר. תמיד מתייחסים לקונטרולרים, הפונקציות שמנהלות את העניינים בצד של השרת, בלי המילה קונטרולר.
לאחר מכן לא רשמנו איזו פונקציה אנחנו רוצים, אלא רק רשמנו את הפרמטרים. כרגע אני רוצה פרמטר שהוא אינטג'ר. עכשיו, כאשר אנחנו גולשים מתוך הדפדפן אז ה-request שמתבצע הוא get.
זאת הסיבה שב-Web API מתבצע request של get, אז המערכת יודעת לחפש פונקציות שמתחילות ב-get. בגלל שאנחנו שולחים פרמטר שהוא אינטג'ר, המערכת הולכת למצוא פונקציה אחת שמקבלת אינטג'ר, ואז היא יודעת בדיוק איזה פונקציה להפעיל.
אם לא היינו שולחים שום פרמטר אז המערכת הייתה מפעילה את הפונקציה הזאת get all products. בואו נראה את שני המקרים בואו נלחץ enter ונראה שהולכת להתבצע גלישה בדיוק לפונקציה שמקבלת פרמטר אחד והמערכת הולכת להחזיר לנו את התשובה מהפונקציה שהתשובה מהפונקציה סך הכל זה מחרוזת
ואנחנו רואים כאן שיש לנו בדיוק את התשובה הזאת והוא אומר לנו Do you want to open or save 1.json? By default המידע שמוחזר הוא Json שזה הגיוני שיהיה מפני שJson זה מידע מאוד מאוד מצומצם.
בואו נגיד לו save, נשמור אותו על הדסטופ, נסגור ונבקש לפני שנפתח אותו עוד אחד api northwind בלי שום דבר.
נרצה גלישה ואנחנו רואים שהוא מצליח להוריד בעצם את הגלישה לפונקציה השנייה. גם את זה נשמור, הוא אומר לנו נשמר בהצלחה נסגור את הדפדפן וניגש לדסטו.
אנחנו רואים כאן את one.json בואו ניגש ונפתח אותו עם visual studio לא נותן לנו אפשרות כזאת אז בואו פשוט נלחץ עליו double click הוא יפתח לנו מופע חדש של visual studio ואנחנו יכולים לראות את המידע שהגיע לגבי המוצר הזה product id 1 product name chai unit price וכולי למעשה אני רואה שהוא גם כן גלש כאן לפונקציה שמחזירה את הכל
בואו נראה את זה, אותו הדבר, בסדר, הוא גלש לפונקציה שמקבלת את הכל כי לא תיארנו לו בדיוק את הפרמטר כ-ID אבל זה לא באמת משנה כי אנחנו הולכים לתאר בדיוק את הפרמטר הזה ממובייל, מהמובייל עצמו היינו צריכים פשוט לקרוא לזה ID ואז כנראה שלא הייתה שום בעיה אבל אני לא רוצה לעשות את זה מפני שאני כן רוצה להשאיר את השם product ID
מפני שבפונגאפ אני הולך ממש לכתוב product ID בכדי שזה יהיה ברור. טוב, אז כרגע סיימנו בעצם לבנות את צד השרת. כל מה שאנחנו צריכים לעשות זה להוסיף כרגע את צד הלקוח ולקרוא לשרת.
בואו נסגור את הכל, נלך ל-solution. כאשר נענה על ה-solution אנחנו הולכים לבצע add new project. בגלל שעשינו את זה דרך סלושן אוטומטית הפרויקט החדש שלנו הולך להתווסף בתוך התיקייה של ה-solution, שנקראת Web Access.
פרויקט שאנחנו רוצים לפתוח עכשיו זה פרויקט PhoneGap. בואו נרד פה למטה, נבחר ב-PhoneGap ואנחנו בונים את Northwind App, אפליקציית Northwind.
בואו נבצע אוקיי וכעת אנחנו רואים שהתווסף לנו פרויקט נוסף ל-Solution וה-Solution עכשיו מכיל שני פרויקטים. אם אנחנו נכנסים לתיקייה של ה-Solution, בואו נלך ל-Open Folder in File Explorer, אנחנו יכולים לראות שיש כאן את הקובץ SLN ופרויקט אחד עבור תיקייה עבור פרויקט של מרסווינד
אפ שזה הפונגאפ פרויקט נוסף עבור השירות שקיים באוויר שבנינו ויש פה את הפאקג'ז שזה בעצם הדיאללים שקשורים לאנטיטי פריימורק ולפרויקט mvc אז גם את זה אנחנו צריכים בואו נחזור ונבנה את האתר בפונגאפ שלנו הדבר הראשון שאנחנו תמיד עושים ומצרפים את כל מה שקשור ל-JQuery מובייל.
פה אנחנו צריכים לגשת לאיזושהי תיקייה ששמרתי בה, את ה-CSS, לצרף את ה-CSS, אותו הדבר ב-JavaScript, נבצע Add, Existing Item, נבחר את שני הקבצים של ה-JQuery, מעולה.
יש לנו פה את ה-Index JavaScript, ניפטר ממנו, יש לנו את ה-Index HTML, ניפטר ממנו, ונגדיר בדיוק את התבנית שאנחנו תמיד היינו עובדים איתה.
כעת אנחנו יכולים לשים את שניהם סייד ביי סייד, ולהתחיל לעבוד על אפליקציית הפונג-אפ שלנו. קודם כל, שאני לא אשכח, שימו לב שהסלושן עכשיו מכיל שני פרויקטים:
השירות שחי באינטרנט, חשוף מחוץ למחשב גם, למעשה מי שיש לו את ה-IP של המחשב יכול לא שלבים בחוץ, ואת אפליקציית הפונג-אפ שלנו.
אם אנחנו מריצים עכשיו על ידי Control F5 את המערכת, אז פרויקט שרץ זה הפרויקט שמודגש בשחור, במושחר. אנחנו רוצים, כשאנחנו מריצים, שהפונגאפ ירוץ, ולכן מה שאני עושה, מקש ימני על הפרויקט של הפונגאפ ו-Set as Startup Project.
כעת הוא הפך להיות מודגש בשחור, ולכן הוא בעצם זה שרץ. כעת אני יכול לסגור את ה-Solution Explorer בשביל שיהיה לי יותר מקום לתכנת. כאן אני בונה אפליקציה של נורסווין ודבר ראשון מה שאני רוצה לעשות אני רוצה לקרוא לפונקציה הראשונה אני רוצה לקלוט מהמשתמש איזה שהוא שם או יותר נכון איי-די של מוצר ולהביא בעצם את הפרטים של המוצר עם האיי-די הזה או למעשה
יש לי רעיון יותר טוב תוך כדי זה שאני בונה איתכם פה את האפליקציה פשוט עלה לי רעיון אחר שאנחנו יכולים לבצע למה שלא פשוט נציג למשתמש כל המוצרים באיזשהו תיבת גלילה כזאת, תיבת סלק, כאשר מה שהוא רואה זה רק שם של מוצר, אבל מאחורה יושב הקוד של המוצר.
ואז, כשהמשתמש בוחר במוצר, מתבצעת ריצה לשרת, ואנחנו מביאים את כל הפרטים האחרים בנוגע למוצר. כמובן, גם את הרשימה הזאת של כל המוצרים אנחנו לא הולכים לשים hardcoded בתוך הטלפון, יכול להיות שמסד הנתונים שלנו כל הזמן משתנה במוצרים חדשים.
אז גם אותה אנחנו יכולים להביא מהפונקציה הזאת, אבל הפונקציה הזאת בעצם לא תחזיר לנו רק שם של המוצר, אלא תחזיר לנו פרטים נוספים. אז לצורך כך אני אעשה פה איזשהו שינוי קל בין הפונקציות האלה בשרת, ואני אגיד דבר כזה: הפונקציה שמחזירה את כל המוצרים, מחזירה רק את ה-ID ואת השם, בלי המחיר.
פונקציה שמחזירה מחרוזת כבר לא תחזיר מחרוזת, אלא היא תחזיר איזשהו אובייקט שתאר מוצר אחד ספציפי. נחזיר פה טיפוס dynamic מהפונקציה, בדרך כלל עושים את זה אם מתעסקים עם מערכות שהן לא Strongly Typed כמו JavaScript, ומה שאנחנו הולכים לעשות, אנחנו הולכים להחזיר אובייקט חדש שמכיל Product Name,
UnitPrice, בואו ניתן לו גם את ה-ID, קח את UnitInStock ו-UnitsInOrder, אז החזרנו בעצם אובייקט אחד שמכיל את כל הנתונים, זה בדיוק יסתדר לנו עם האפליקציה שאנחנו בונים.
אוקיי, בואו נחזור בחזרה, והדבר הראשון שאני רוצה לעשות, אני רוצה לבנות איזשהו לחצן ותיבת Select. כאשר אני לוחץ על הלחצן, רק אז אני רוצה לבצע גלישה לשרת ולהביא את כל המוצרים ולמלא אותם בתוך תיבת ה-select. כמובן שזה לא המצב שאני רוצה שיהיה באפליקציה.
אני רוצה שבאפליקציה, איך שהאפליקציה עולה, כבר כל המוצרים מופיעים מהשרת בתיבת ה-select. למה אני קודם כל בונה את זה על ידי לחצן? כי אני רוצה לשלוט על הביצוע של הגלישה לשרת.
אחר כך אני אוריד את זה מהלחצן ואני אעשה את זה כשהאפליקציה נטענת. אז יש לנו פה input שווה button value get all products, נקרא לה איזושהי פונקציה כזאת בנוסף אנחנו רוצים שיהיה לנו פה איזושהי תיבת סלקט אז אנחנו נמצאים בעולם הג'ייגוורי מובייל אם אנחנו ב-UI ואומר שהדאטה roll של הדיב הזאת זה field contain בתוכה יש לנו label for נמציא
פה איזשהו ID select products ויש לנו פה תיבת סלקט name כרגע אנחנו לא צריכים האמת כי אין לנו פה form יש לנו ID חייב להיות אותו איידי, פרודקטס, דאטה, נייטיב, מניו, פולס, יפה, לנו תיבה קצת יותר אסתטית, ואנחנו רוצים שכל המידע שנמצא בתוך ה-select יטען אוטומטית דרך השרת, בזמן שאנחנו לוחצים על הכפתור.
זה נמצא פה, בואו נחזור ונבנה את הקוד ב-JavaScript. ואנחנו בעצם צריכים את הפונקציה הזאת, get all products, ומה שאנחנו רוצים לעשות בפונקציה זה לייצר קריאה ב-ajax.
אג'קס מאפשרת לנו לגלוש לשרת מאחורי הקלעים ולשלוח מידע ולקבל מידע בחזרה כך שהיוזר בעצם לא רואה שום משהו שהתרפרש לו, שום גלישה לדף מחודשת, שום תאנה מחודשת של הדף אבל אכן התבצעה גלישה מאחורי הקלעים לשרת וקבלת מידע.
אג'קס, פונקציית אג'קס מקבלת אובייק, ג'ייסון, שיש לו את הערכים הבאים טייפ, מה בדיוק שיטת ה-request שאנחנו רוצים?
אנחנו רוצים לקרוא לפונקציה בשרת שמתחילה ב-get רושמים get url לאן בדיוק אנחנו רוצים לגלוש תכף נראה מה ה-url שאנחנו צריכים לכתוב data מה המידע שאנחנו רוצים לשלוח אם אין לנו מידע אז אני לא משתמש ב-data ואני לא רוצה לשלוח כרגע שום מידע לשרת כי אני רוצה לקרוא לה פונקציה שלא מקבלת נתונים אלא רק היא מתחילה ב-get ומחזירה לי את כל המוצרים success
ו-function שמקבלת בחזרה כל הערכים מהשרת error ו-function במידה והיה איזשהו כישלון קאש פולס מציין שאנחנו לא רוצים שמידע שהתבקש יישמר בקאש המקומי של הדפדפן של האפליקציה שלנו, אלא כל פעם שאנחנו מבקשים אותו שתתבצע קריאה לשרת והנתונים יחזרו מחדש.
אחרת האפליקציה יכולה להציג נתונים ישנים. פה נציג את הסטטוס, זה הסטטוס קוד, במידה והייתה איזושהי שגיאה. בפונקציה של הצלחה כרגע נציג באלרט את כל המוצרים שהתקבלו.
השאלה היא לאן אנחנו גולשים. בואו נזכר מה קרה כאשר אנחנו גלשנו לאתר. לצורך כך נחזיר את השליטה לאתר האינטרנט ונבצע גלישה מחודשת.
בואו נשים set a start-up project, נלחץ ctrl-f5 בכדי שהאתר ירוץ ונראה מה היינו צריכים לעשות בכדי להגיע בדיוק לפונקציה בצד של השרה.
אנחנו רואים שיש לנו פה את הנתיב הזה http://localhost כי אני נמצא במחשב מקומי ואז השם של התיקייה הווירטואלית שפתחנו לאחר מכן מה שהיינו צריכים לרשום זה api ולאחר מכן northwind בלי כלום ברגע שרשמנו את זה אז אוטומטית התבצעה גלישה לפונקציה המתאימה והוא נריץ ונראה שמתבצעת לנו גלישה לפונקציה
שמחזירה לנו את כל המוצרים ואנחנו רואים את זה פה אנחנו רואים שהוא הצליח והוא רוצה להוריד לנו את כל המוצרים כאובייקט צ'ייסון. בסדר, לא ניקח כרגע את המוצרים, אלא מה שהיה מעניין אותנו זה המחרובת שהיינו צריכים לכתוב.
בואו נחזיר את השליטה בחזרה לפרויקט הפונגה ונדביק את המחרובת שהעתקנו. אבל מה זה לוקלוסט? לוקלוסט בעצם זה המחשב המקומי. ברור שכאשר אנחנו גלשנו לאתר מוויז'ואל סטודיו אז הוא הראה לנו לוקלוסט אבל אם אנחנו עכשיו מריצים את המילה לוקלוסט מהקוד הזה זה כבר לא אותו מחשב
מקומי שעליו נמצאת ויז'ואל סטודיו אלא האמולטור אסור לנו לרשום פה לוקלוסט מפני שלוקלוסט זה האמולטור עצמו גם אם הייתם רושמים 127.0.0.1 זה לא היה עוזר לכם זה בעצם ה-IP המקביל ל-Localhost, מפני שזה גם אומר האמולטור, ובאמולטור אין שום אתר אינטרנט שחושף מידע.
מה אנחנו צריכים לרשום פה? אנחנו צריכים לרשום פה את ה-IP האמיתי של השרת. בגלל שהשרת שלנו אכן רץ על IIS, אם אנחנו משיגים את ה-IP של המחשב של השרת, אז אנחנו יכולים לגלוש אליו בצורה כזאת.
כל מה שאנחנו צריכים לעשות זה run cmd/ipconfig ולאתר כאן את אותו IP של השרת. אנחנו יכולים לראות אותו, נשים את זה בצורה כזאתי, הנה הוא פה.
מה שנעשה זה מכ"ש ימני מרק מסמן את ה-IP הזה, אנטר, בואו נסגור ונבוצע הדבקה, ויש לנו כרגע גלישה מדויקת לפונקציה של השרת.
אוקיי, בואו נריץ. יש לנו פה את get all products, בואו נלחץ עליה ונראה אם אנחנו מקבלים את המידע או אירור. ואנחנו רואים כרגע משהו שהוא מאוד מאוד משמח.
מה שאנחנו רואים זה את כל האובייקטים שהתקבלו מהשרת. אנחנו רואים שהתקבלו פה המון אובייקטים. בסדר, זה הצליח.
בואו שנייה לפני זה, לפני שנעשה איתה משהו, נציג json stringify