News

Disclaimer
Postings are provided 'As Is' with no warranties and confer no rights.

follow me on Twitter

Navigation

Articles

Introduction to Validation Application Block integration with Windows Communication Foundation (WCF)
Write a Custom Validator for VAB using Application Block Software Factory

Blogs I Read

הכירות עם AppHarbor: פלטפורמה כשירות (PaaS) לאפליקציות NET. ו- Node.JS

AppHarbor ASP.NET node.js

AppHarbor היא פלטפורמה כשירות (Platform-as-a-Service) עבור אפליקציות NET. ו- Node.JS. למעשה מדובר בפלטפורמת ענן מבוססת Windows שיכולה להריץ אפליקציות ושירותים הכתובים ב- NET. ו- Node.JS ולגדול איתם (to scale) לאורך זמן. פשוט “דוחפים” קוד ל- AppHarbor ע”י שימוש ב- Git, הקוד נבנה, מורצים Unit Tests והפרוייקט מוכן לרוץ.

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

רישום ל- AppHarbor

ניכנס לעמוד הראשי של AppHarbor בכתובת: http://appharbor.com:

AppHarbor ASP.NET node.js

לצורך הרישום, נלחץ על הכפתור Sign Up בפינה הימנית העליונה של האתר.

AppHarbor ASP.NET node.js

נזין את כתובת המייל שלנו, שם המשתמש שנרצה להשתמש בו וסיסמא, נאשר את תנאי השימוש ונלחץ על Sign Up.

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

לאחר הלחיצה על הקישור במייל האישור, נגיע לעמוד האפליקציות שלנו באתר AppHarbor, בכתובת https://appharbor.com/applications.

AppHarbor ASP.NET node.js

כרגע רשימת האפליקציות שלנו ריקה, אך במרכז העמוד ניתן ליצור אפליקציה חדשה.
נזין את שם האפליקציה שנרצה ליצור (לדוגמא appharborsample ונלחץ על Create New).

AppHarbor ASP.NET node.js

לאחר יצירת האפליקציה, נגיע למסך פרטי האפליקציה המאפשר לנו לחבר בין פלטפורמת ה- Source Control שלנו לבין AppHarbor, להוסיף תוספים לאפליקציה ועוד. אולי אקדיש פוסטים בהמשך לנושאים האלה.

AppHarbor ASP.NET node.js

בעמוד האפליקציה שלנו, נלחץ על הכפתור Repository Url כדי להעתיק ל- Clipboard את הנתיב ל- Repository המרוחק. כאן השימוש ב- Repository של Git לא יהיה למטרת Source Control, אלא שימוש ב- Git לצורך Deployment.

במקרה הזה, הכתובת שהועתקה היא:

https://guyburstein@appharbor.com/appharborsample.git

דוגמא: העלאת אפליקציית ASP.NET ל- AppHarbor

ניצור פרוייקט ASP.NET בתוך Visual Studio 2010. במקרה הזה בחרתי באפליקציית ASP.NET Web Forms אבל התהליך זהה לחלוטין עבור ASP.NET MVC.

נסמן את ה- Solution ב- Solution Explorer, נלחץ על הכפתור הימני ונבחר באפשרות Open Folder in Windows Explorer.

AppHarbor ASP.NET node.js

תיפתח ספריית ה- Solution ב- Windows Explorer המכילה את הפרוייקטים השונים ואת קובץ ה- sln.

נבחר באחת מספריות הפרוייקטים (במקרה הזה יש פרוייקט אחד ב- Solution), נלחץ על הכפתור הימני של העכבר ונבחר באפשרות Git Bash Here (דורש התקנת msysgit: ה- Git Client ל- Windows).

AppHarbor ASP.NET node.js

יפתח חלון ה- Git Bash בתוך ספריית הפרוייקט:

AppHarbor ASP.NET node.js

נעלה רמה אחת למעלה בעץ התיקיות כדי לההיע לתיקיית ה- Solution ע”י הפקודה

cd ..

AppHarbor ASP.NET node.js

ניצור Repository מקומי בתיקייה הנוכחית:

git init

נוסיף את קבצי הפרוייקט ל- Staging:

git add .

כמובן שרצוי להגדיר קובץ ignore כפי שהסברתי כאן, כדי לא להעביר גם קבצים שאין להם חלק בתוצר הסופי כמו ספריית ה- obj וקבצי הגדרות אישיות של ה- user ב- Visual Studio.

ולבסוף נבצע Commit כדי להעביר הקבצים האלה ל- Repository המקומי.

git commit -m "initial commit"

AppHarbor ASP.NET node.js

נגדיר את הקישור ל- Repository המרוחק ונקרא לו AppHarbor: כזכור, את הקישור ל- Remote Repository קיבלנו מעמוד האפליקציה באתר AppHarbor כאשר לחצנו על הכפתור Repository Url.

git remote add appharbor https://guyburstein@appharbor.com/appharborsample.git

לבסוף, “נדחוף” את הקבצים מענף ה- master המקומי ל- Repository המרוחק המכונה appbarbor. במהלך התהליך נתבקש להזין סיסמא.

git push appharbor master

אתר AppHarbor קיבל את הקבצים, ומתחיל בבניית האפליקציה. נוכל לגשת לעמוד האפליקציה באתר (במקרה הזהhttps://appharbor.com/applications/appharborsample) ולראות את מהלך העדכונים.

בסיום התהליך, נקבל את העמוד הבא, שמראה לנו כי האפליקציה בגירסא שקראנו לה initial commit הועלתה וכרגע היא פעילה.

AppHarbor ASP.NET node.js

נלחץ על הקישור Go to your application כדי להגיע אל האפליקציה שלנו. הקישור לאפליקציה יהיה http://appharborsample.apphb.com (שם האפליקציה כ- sub domain בתוך הדומיין apphb.com).

AppHarbor ASP.NET node.js

ברכות! העלינו אפליקציית ASP.NET ראשונה לאתר AppHarbor תוך מספר דקות!

Posted: Jan 24 2012, 09:42 AM by גיא בורשטיין | with no comments

תגים:DEV, Cloud Services, AppHarbor

Git על Windows: יצירת Repository ב- GitHub והעלאת פרוייקט

Git על Windows: יצירת Repository ב- GitHub והעלאת פרוייקט בפוסטים הקודם במדריך Git על Windows עשינו את ההכנות הנדרשות: התקנו msysgit והגדרנו הגדרות ראשניות, וגם נרשמנו לאתר GitHub. בפוסט הזה ניצור Repository באתר GitHub ונעלה אליו פרוייקט לדוגמא.

יצירת Repository חדש באתר GitHub

כשהפרוייקט שלך נמצא ב- GitHub, הוא חי בתוך Repository. כדי שנוכל להעלות פרוייקטים ולשתף קוד באתר GitHub עלינו להתחיל ביצירת Repository חדש.

בעמוד הראשי של האתר, כאשר אנחנו מחוברים אליו, נראה שכרגע אין לנו שום Repository.

Git על Windows: יצירת Repository ב- GitHub והעלאת פרוייקט

נלחץ על הכפתור New Repository ליצירת Repository חדש.

Git על Windows: יצירת Repository ב- GitHub והעלאת פרוייקט

נמלא את שם הפרוייקט (לדוגמא: githubsample) והתיאור שלו ונלחץ על Create Repository.
נשים לב שקוד הפרוייקט שנשמור ב- Repository שיצרנו יהיו חשוף לכולם, כיוון שאנחנו עובדים בתוכנית חינמית באתר. במידה ואנחנו רוצים למנהל פרוייקט בו הקוד אינו חשוף לכולם, עלינו לשדרג את החשבון.

בסיום התהליך יווצר ה- Repository תחת המשתמש שלנו ונקבל מסך עם הנחיות להמשך.

Git על Windows: יצירת Repository ב- GitHub והעלאת פרוייקט

ניתן להגיע ל- Repository שלנו ע”י הקישור בראש העמוד, אך באופן כללי הוא יהיה תמיד בכתובת:

https://github.com/guyburstein/githubsample

כאשר השם guyburstein הוא שם היוזר ו- githubsample הוא שם הפרוייקט.

בעמוד הראשי שלנו (כאשר אנחנו מחוברים לאתר), נראה שיש לנו כבר Repository אחד.

Git על Windows: יצירת Repository ב- GitHub והעלאת פרוייקט

העלאת פרוייקט לאתר GitHub

באחד הפרקים הקודמים הדגמתי שימוש בסיסי ב- Git: יצרתי Console Application פשוט, יצרתי Git Repository מקומי והעברתי אליו את הקבצים ע”י שימוש בפקודות git add ו- git commit.

כעת נמשיך מאותה נקודה ונרצה להעלות את הפרוייקט מה- Repository המקומי ל- Repository המרוחק באתר GitHub.

כדי להגדיר את הקשר ביניהם נשתמש בפקודה git remote ונספק את הנתיד ל- Repository המרוחק שלנו. איפה נמצא אותו? בדיוק בדף למעלה, בו היו מפורטות הוראות ההתחברות ל- Repository שיצרנו.

למעשה, בדיוק בשורה הזאת:

Git על Windows: יצירת Repository ב- GitHub והעלאת פרוייקט

הכתובת ל- Repository המרוחק היא:

git@github.com:guyburstein/githubsample.git

הכתובת מתחילה בביטוי git@github.com, וממשיכה בשם היוזר ושם הפרוייקט ומסתיימת בסיומת git. למרות שזאת לא נראית כתובת אינטרנט רגילה, נשתמש בה ע”ג פרוטוקול SSH כדי לתקשר בצורה מאובטחת עם GitHub.

נשתמש בפקודה הבאה בשינוי שם המשתמש והפרוייקט כמובן:

git remote add origin git@github.com:guyburstein/githubsample.git

כדי להגדיר ל- Repository המקומי, מיהו ה- Repository המרוחק שנעבוד מולו. הפקודה git remote מקבלת את הפרמטר add שמשמעותו להוסיף קישור ל- Repository מרוחק שיהיה מכונה origin, ונמצא בנתיב כלשהו.

Git על Windows: יצירת Repository ב- GitHub והעלאת פרוייקט

מעתה והלאה כשנרצה להתייחס לאותו Repository מרוחק, נשתמש בשם origin.

כעת אנחנו סוף סוף מוכנים לבצע את ההעלאה של קבצי הפרוייקט ל- Reposirory המרוחק. נשתמש בפקודה git push כדי “לדחוף” את העדכונים האחרונים שעשינו להם Commit ל- Repository המקומי אל ה- Repository המרוחק ששמו origin.

git push origin master

Git על Windows: יצירת Repository ב- GitHub והעלאת פרוייקט

במידה ובמהלך התהליך אתם נשאלים: Are you sure you want to continue connecting? יש להקיש yes (שימו לב להקיש את המילה yes כולה ולא רק את האות y).

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

Git על Windows: יצירת Repository ב- GitHub והעלאת פרוייקט

ברכות! העלינו פרוייקט ראשון לאתר GitHub!

Posted: Jan 23 2012, 02:55 PM by גיא בורשטיין | with no comments

תגים:DEV, Git

הבטחות לעתיד: תכנות אסינכרוני ב- JavaScript עם Promises

תכנות אסינכרוני ב- JavaScript עם Promises תכנות אסינכרוני הופך פופולרי יותר ויותר באפליקציות ה- Web, אך מצד שני, ב- JavaScript הוא אינו קל לביצוע כיום. ספריות ה- JavaScript הפופולריות (כמו jQuery, Dojo ועוד) הוסיפו רמת אבסטרקציה בשם Promise (לפעמים נקראת deferred) כדי להפוך את התכנות האסינכרוני ב- JavaScript לפשוט יותר.
בפוסט זה נראה איך להשתמש ב- Promises באפליקציות Web. נדגים את השימוש ב- Promisses עם XMLHttpRequest2 (בקיצור XHR2).

תכנות אסינכרוני: למה זה כ”כ קשה?

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

כשמפתחים מבצעים קריאות אסינכרוניות, עליהם לטפל גם במצב שהפעולה הצליחה, וגם במצב בו הפעולה נכשלה. במידה והפעולה הצליחה נרצה לעיתים לקחת את התוצאה ולהשתמש בה לפעולה אסינכרונית נוספת (שימוש בשם nested callbacks), והמורכבות רק גדלה.

function searchTwitter(term, onload, onerror) {
    var xhr, results, url;
    url = 'http://search.twitter.com/search.json?rpp=100&q=' + term;
    xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onload = function (e) {
        if (this.status === 200) {
            results = JSON.parse(this.responseText);
            onload(results);
        }
    };

    xhr.onerror = function (e) {
        onerror(e);
    };
    xhr.send();
}

function handleError(error) {
    /* handle the error */
}

function concatResults() {
    /* order tweets by date */
}

function loadTweets() {
    var container = document.getElementById('container');

    searchTwitter('#IE10', function (data1) {
        searchTwitter('#IE9', function (data2) {

            /* Reshuffle due to date */
            var totalResults = concatResults(data1.results, data2.results);
            totalResults.forEach(function (tweet) {
                var el = document.createElement('li');
                el.innerText = tweet.text;
                container.appendChild(el);
            });
        }, handleError);
    }, handleError);
}

קל לראות בדוגמה, ששימוש ב- nested callbacks הופך את הקוד לקשה להבנה. כמו כן, קשה להפריד בין הקוד ששייך ללוגיקה של האפליקציה לעומת הקוד שמנהל את הקריאות האסינכרוניות.

הכירות עם Promises להקלת התכנות האסינכרוני ב- JavaScript

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

לדוגמא, נפנה לשירות כלשהו ברחבי האינטרנט שכתלות ברשת יכול לקחת זמן רב ולא תמיד להסתיים בהצלחה. במקום לעצור ולהמתין, האפליקציה ממשיכה בביצוע משימות נוספות. בגישת Promise נשתמש בפונקציה לרישום פוקציה המכילה את הפקודות לביצוע בעקבות שינוי ב- state של ה- Promise. פונקציה זו לרוב נקראת ()then.

var results = searchTwitter(term).then(filterResults);
displayResults(results);

בכל רגע נכון, Promise יכול להיות באחד משלושה מצבים: unfulfilled, resolved או rejected.

איך זה ממומש?

כדי להבין איך ממומש רעיון ה- Promise, נתחיל מ- CommonJS Promise/A. הפונקציה then של האובייקט Promise מוסיפה handlers לטיפול במצבי resolved ו- rejected. הפונקציה מחזירה Promise נוסף כדי לאפשר שרשור של Promises ובכך לאפשר למפתחים לשרשר קריאות אסינכרוניות בהן תוצאה של הקריאה הראשונה עוברת לשניה וכו’.

then(resolvedHandler, rejectedHandler);

פונקציית ה- callback ששמה resolvedHandler נקראת כאשר ה- Promise עובר למצב resolved והפונקציה rejectedHandler נקראת כאשר ה- Promise עובר למצב rejected.

כדי לממש Promise נתחיל באובייקט פשוט:

var Promise = function () {
    /* initialize promise */
};

כעת, נממש את פונקציית ה- then המקבלת פונקציות לטיפול במצבי ה- Promise ומאפשרת לשרשר Promises.

Promise.prototype.then = function (onResolved, onRejected) {
    /* invoke handlers based upon state transition */
};

נשמור גם את הפונקציות לטיפול בשני המצבים של ה- Promise:

Promise.prototype.resolve = function (value) {
    /* move from unfulfilled to resolved */
};

Promise.prototype.reject = function (error) {
    /* move from unfulfilled to rejected */
};

דוגמה לשימוש ב- Promises ליצירת קוד JavaScript אסינכרוני

נשנה את הדוגמה למעלה שפונה לשירות של טוויטר ומחפשת ציוצים עם התגית #IE10. הפונקציה searchTwitter משתמשת ב- XMLHttpRequest2 לטוויטר ועוטפת את הקריאה ב- Promise.
הפונקציה loadTweets קוראת לפונקציה searchTwitter, מקבלת בחזרה Promise ורושמת פונקציה להמשך ביצוע כאשר התוצאות חוזרות.

function searchTwitter(term) {
    var url, xhr, results, promise;
    url = 'http://search.twitter.com/search.json?rpp=100&q=' + term;
    promise = new Promise();
    xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);

    xhr.onload = function (e) {
        if (this.status === 200) {
            results = JSON.parse(this.responseText);
            promise.resolve(results);
        }
    };

    xhr.onerror = function (e) {
        promise.reject(e);
    };
    xhr.send();
    return promise;
}

function loadTweets() {
    var container = document.getElementById('container');
    searchTwitter('#IE10').then(function (data) {
        data.results.forEach(function (tweet) {
            var el = document.createElement('li');
            el.innerText = tweet.text;
            container.appendChild(el);
        });
    }, handleError);
}

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

Promise.when = function () {
    /* handle promises arguments and queue each */
};

ועכשיו, אנחנו יכולים סוף סוף לבצע מספר קריאות אסינכרוניות בו זמנית. למשל, נחפש בטוויטר גם את התגית #IE10 וגם את התגית #IE9, ונשתמש בפונקציה ()when.

function loadTweets() {
    var container, promise1, promise2;
    container = document.getElementById('container');
    promise1 = searchTwitter('#IE10');
    promise2 = searchTwitter('#IE9');
    Promise.when(promise1, promise2).then(function (data1, data2) {
        /* Reshuffle due to date */
        var totalResults = concatResults(data1.results, data2.results);
        totalResults.forEach(function (tweet) {
            var el = document.createElement('li');
            el.innerText = tweet.text;
            container.appendChild(el);
        });
    }, handleError);
}

דוגמא: שימוש ב- Promises ב- jQuery

המימוש ב- jQuery מעט שונה מהמימוש ב- CommonJS, ונקרא Deferred. ב- jQuery הפונקציה then מקבלת 2 handlers: גם את זה של ההצלחה וגם את זה של הכשלון. לדוגמא:

function loadTweets() {
    $.ajax({
        url: 'http://search.twitter.com/search.json',
        dataType: 'jsonp',
        data: { q: '#IE10', rpp: 100 }
    }).then(function (data) {
        /* handle data */
    }, function (error) {
        /* handle error */
    });
}

סיכום

בעזרת Promises, מפתחים יכולים לפתח אפליקציות Web מורכבות יותר המספקות חווית משתמש טובה יותר.אימוץ הגישה ע”י ספריות ה- JavaScript הפופולריות הופכות את השימוש ב- Promises לנוחה ופשוטה ליישום.

תהנו!

Posted: Dec 12 2011, 09:13 AM by גיא בורשטיין | with no comments

תגים:DEV, jQuery, HTML5, JavaScript, IE10

Git על Windows: רישום ל- GitHub והגדרות ראשוניות

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

הכירות עם GitHub

מדריך Git על Windows: מדריך ל- GitHub בעוד Git הוא “שיטה” לניהול תצורת קבצי הפרוייקט שלנו ומאפשר לנו ליצור Repositiroes מקומיים, להעביר לסביבת Staging מקומית וכו’, מתישהו במהלך התהליך נרצה לפרסם את הפרוייקט שלנו ל- Repository מרוחק. זה יכול להיות כחלק מפרוייקט רב משתמשים, לצורך ניהול הגירסאות של פרוייקט שרק אנחנו עובדים עליו או לצורך Deployment של אפליקציות (עוד על הנושא הזה בפוסט מאוחר יותר).

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

בעבודה עם GitHub משתמשים לרוב כדי:

להעלות קוד כדי לנהל את הגירסאות שלו
ליצור עותק של פרוייקט כדי לבצע בו שינויים (clone, fork)
לעקוב אחרי פרוייקטים מעניינים

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