Monaco: פיתוח בענן באמצעות Visual Studio Online

25 בנובמבר 2013

תגיות: , , ,
אין תגובות

ההכרזה הרשמית של מיקרוסופט על Visual Studio 2013 באה יחד עם השקת מוצר חדש ומעניין בשם Visual Studio Online. מוצר זה, שבעצם בא לשמש תחליף לסביבת Visual Studio בכל דפדפן על Azure, נותן לנו גישה לפיתוח כמעט מלא בענן. בפוסט זה נלמד איך להשתמש בכלי זה ממשיכת הפרוייקט מ Git, עבודה ופיתוח על הדפדפן דרך "מונקו" ומעבר לפרודקשן.

התקנה

נתחיל בפתיחת פרויקט web חדש וביצוע push ל GitHub. אפשר כמובן להשתמש ב TFS, DrobBox, CodePlex וכו. אבל נתמקד בעבודה מול GitHub במאמר זה.

1

השלב הבא הוא להיכנס לחשבון שלנו ב Azure Portal ולפתוח אתר חדש.

1

לאחר שיצרנו אתר, נבחר “Set up deployment from source control” מהמסך פתיחה.

1

נבחר ב GitHub, נכניס שם וסיסמא ונבחר את ה repository שלנו.

1

1

מה שיקרה אחרי השלב הזה הוא בעצם יצירת deployment מהקוד ב GitHub ו publish מלא של האתר. אפשר יהיה לראות את ה deployment הפעיל ברשימה ולגלוש לאתר שלנו בכתובת שקבענו לו.

1

כיום, "מונקו" נותן לנו לעבוד על קוד של אפליקציות הנמצאות תחת Azure Websites בלבד. לכן, אנו חייבים שהקוד שלנו יהיה תחת אתר. אנחנו יכולים לעבוד על הקוד באתר שיצרנו כרגע, אבל זהו בעצם אתר production ואם נעדכן את הקוד בו ונשבור משהו נהיה בבעיה. כמו כן, כל שינוי פה לא ישתקף בקוד העבודה האמיתי שלנו ולא יסונכרן ל source control שלנו. כדי לעבוד על הקוד שלנו אנו נייצר אתר חדש ונמשוך אליו את הקוד מ GitHub.

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

1

ניכנס ללשונית Configure ונאפשר שם עבודה עם "מונקו".

1

לאחר שמירה נוכל למצוא לינק לעריכת הקוד של האתר בדשבורד.

1

לחיצה על הלינק תביא אותנו ל Visual Studio Online “Monaco”

1

ניכנס ללשונית Git, נזין את הכתובת של ה repository שלנו ונלחץ על "Clone from a git URL".

1

"מונקו" ימשוך את הקוד ויכניס אותו לספריית ה root של האתר. את כל הפעילות הזאת יהיה אפשר לראות ב console.

1

אם אנחנו רוצים לראות איך נראה אתר הפיתוח שלנו, יש לבצע כמה פעולות פשוטות. תחילה יש להפנות את ה root של האתר לספרייה של הפרויקט web שלנו. ככה נוכל לפתח כמה פרויקטים תומכים באותו solution ולראות את התוצר באתר. את ההפניה הזאת אפשר לבצע בלשונית configure בממשק האתר שלנו ב Azure Portal.

1

עכשיו מה שנשאר לעשות הוא לבצע build. ניכנס בממשק של "מונקו" ל console, ננווט לספרייה בה נמצא ה solution שלנו ונריץ msbuild.

1

עכשיו האתר שלנו בנוי ואפשר לראות אותו פועל בכתובת שנתנו כשהגדרנו אותו בהתחלה. פה בעצם סיימנו את החלק של ההתקנה. עכשיו אנחנו יכולים לעבוד על הקוד, לראות מה עשינו, לבצע push ו Visual Studio Online ייצר לנו deployment חדש לאתר הפעיל.

עבודה עם עורך הקוד

העבודה ב"מונקו" דומה לעבודה ב VS2013. תודות ל TypeScript עליו מבוסס העורך, יש לנו Intellisense מלא לקבצי JS. בקבצי CSS ו LESS יש לנו השלמות אוטומטיות ל styles ובקבצי HTML העורך סוגר בשבילנו תגיות.

1

ישנם עוד המון פיצ'רים מלבד אלו שהזכרתי. יהיה קשה לזכור את כולם ולכן הכי קל להתחיל בחלונית ה”Quick Open”. לחיצה על CTRL+E תפתח לנו את החלונית. לחיצה על “?” תראה לנו את כל הפעולות שניתן לבצע ולחיצה על "$" תציג לנו את כל קיצורי הדרך של המקלדת. רשימת הפקודות די מרשימה. מ “find and replace” עד “go to type”, אי אפשר שלא להתפעל מהאפשרויות הפתוחות לפנינו בעבודה מתוך הדפדפן.

1

עורך התוכן מאפשר לנו לעבוד עם כמה קבצים בו זמנית. סימון הקובץ ולחיצה על CTRL+ENTER תפתח את הקובץ ליד הקובץ הקודם שהיה פתוח. אפשר להגדיל ולהקטין את גודל החלונות וליצור לעצמנו סביבה נוחה לעבודה. בתמונה הבאה אנו יכולים לראות קובץ CSHTML ליד קובצי CSS ו JS לצורך המחשה.

1

עבודה עם שני קבצים בו זמנית מאפשרת לנו להשוות בין גרסאות. כדי להשוות לגירסה קודמת של קובץ מסוים יש להיכנס ללשונית Git, ללחוץ לחיצה ימנית על הקובץ ששונה ולבחור “Open Change”. זה יפתח לנו את הקובץ המקורי ליד השינויים שלנו. מחיקה תסומן באדום, קוד חדש יסומן בכחול ושינוי קוד יסומן בירוק. אנחנו יכולים להמשיך לעבוד במצב הזה ולהוסיף שינויים.

1

"מונקו" מחביא בתוכו פיצ'רים רבים. מ “Peek Definition” ו “Find All References” עד לעריכה עם multiple cursors ו snippets. אני ממליץ לעבור על קטעי הוידאו ב Channel9 המדברים על Visual Studio Online “Monaco”. הם לא ארוכים ומראים את כל היכולות הטמונות בכלי הזה.

סיום עבודה

לאחר שסיימנו לעבוד על הקוד כל מה שנשאר לעשות הוא לעשות commit ו/או לבצע push. את כל פעולות אלו ועוד ניתן לבצע תחת לשונית Git. האייקון של הלשונית יראה לנו כמה שינויים מחכים ל commit. אנו יכולים להכניס את כולם או כל קובץ בנפרד. אנו יכולים לבצע undo או כל פעולת Git אחרת. דברים יותר מתקדמים, כמו Git branch, אפשר לבצע ישירות מה console. יש לנו כאן רמת שליטה די גבוהה ומרשימה בהחלט.

1

ברגע שביצענו push אתר ה production שלנו יקבל deployment חדש ויריץ את הקוד העדכני שלנו.

סיכום

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

 

eyal alenbugenהפוסט נכתב על ידי איל אלנבוגן, יועץ בחברת CodeValue בעל ניסיון של מעל 10 שנים בתחום הפיתוח. איל צבר ידע וניסיון עשירים בפיתוח בתחום client  ובתחום server וכן בבניה של עשרות אפליקציות web.

חברת CodeValue מתמחה ביישום והטמעת פתרונות תוכנה מבוססי מיקרוסופט ובכללן פתרונות מבוססי Azure, הענן של מיקרוסופט.

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

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *