Guy Burstein's Blog

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

גיא בורשטיין — Tue, 24 Jan 2012 07:42:05 GMT

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:

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

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

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

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

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

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

בעמוד האפליקציה שלנו, נלחץ על הכפתור 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.

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

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

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

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

cd ..

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

git init

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

git add .

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

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

git commit -m "initial commit"

נגדיר את הקישור ל- 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 הועלתה וכרגע היא פעילה.

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

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

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

גיא בורשטיין — Mon, 23 Jan 2012 12:55:08 GMT

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

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

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

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

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

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

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

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

https://github.com/guyburstein/githubsample

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

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

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

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

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

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

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

הכתובת ל- 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, ונמצא בנתיב כלשהו.

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

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

git push origin master

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

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

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

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

גיא בורשטיין — Mon, 12 Dec 2011 07:13:26 GMT

תכנות אסינכרוני הופך פופולרי יותר ויותר באפליקציות ה- 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 לנוחה ופשוטה ליישום.

תהנו!

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

גיא בורשטיין — Wed, 02 Nov 2011 12:57:32 GMT

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

הכירות עם GitHub

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

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

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

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

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

רישום ויצירת משתמש ב- GitHub

נתחיל מהעמוד הראשי של אתר GitHub בכתובת: http://GitHub.com

במרכז העמוד (לפחות נכון ליום כתיבת הפוסט) יש כפתור בשם “Plans, Pricing and Signup” למעבר לעמוד הרישום.

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

נזין את הפרטים לצורך הרישום: שם משתמש, כתובת אימייל וסיסמא וניצור את החשבון באתר.

בסיום התהליך, נגיע ל- Dashboard בו אפשר לבצע פעולות בסיסיות כמו יצירת Repository, שכפול Repository ועוד.

הגדרות ראשוניות לעבודה עם GitHub

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

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

נבחר בקישור SSH Public Keys כדי לעבור לעמוד ניהול מפתחות ה- SSH עבור התקשורת המאובטחת.

עמוד זה מציג את מפתחות ה- SSH הציבוריים המשוייכים לחשבון שלנו. נלחץ על הקישור Add another public key כדי להוסיף מפתח חדש:

איפה נמצא מפתח ה- SSH?

את מפתח ה- SSH יצרנו בחלק הקודם במדריך Git על Windows. אם לא קראתם את הפרק הקודם, הוא מומלץ מאד.

לאחר יצירת מפתחות ה- SSH נוצרו לנו בספריית המשתמש (אצלי: c:\users\guyb\.ssh) שני קבצים. אחד מהם הוא המפתח הפרטי (id_rsa) והשני הוא המפתח הציבורי (id_rsa.pub) בו נשתמש כעת כדי להגדיר תקשורת מאובטחת עם Git Repository מרוחק.

אם נפתח את הקובץ id_rsa.pub עם עורך טקסט כלשהו (Notepad), נראה שהתוכן שלו דומה לתוכן הבא:

נעתיק את התוכן בדיוק כמו שהוא ומדביק אותו במקום המתאים במסך הזנת מפתח ה- SSH (נשים לב לא להוסיף בטעות רווחים או תוים מיותרים) ונלחץ על Add Key.

המפתח יבדק ובסוף התהליך יתווסף לרשימה.

הגדרות מקומיות לצורך התחברות ל- GitHub

לאחר שהגדרנו את המפתח שלנו באתר GitHub, עלינו להגדיר אצלנו Token שאתר GitHub נותן לנו כדי שהשירות יוכל לוודא שרק מישהו מורשה מתקשר עם Repositories באתר.

כדי למצוא את ה- Token, נלחץ על הקישור Account Admin באיזור ה- Account Settings.

בעמוד זה נמצא ה- API Token שאותו נרצה להגדיר במחשב האישי לצורך תקשורת מאובטחת עם GitHub.

כדי לבצע את ההגדרה, נפתח חלון Git Bash עם הוא עדיין לא פתוח, ונכתוב את הפקודות הבאות שמגדירות את התקשורת עם GitHub (בהחלפת שם המשתמש וה- Token כמובן):

git config --global github.user username
git config --global github.token 0123456789yourf0123456789token

לא אמור להתקבל פלט מיוחד עבור ביצוע ההגדרות האלה:

כדי לבדוק שיש לנו תקשורת מאובטחת מול GitHub, נשתמש בפקודה:

ssh -T git@github.com

למרות שאתר GitHub לא מאפשר תקשורת ב- SSH, נשתמש בפקודה הזאת כדי לבדוק שההזדהות הינה תקינה.

במהלך הריצה, נקבל הודעה שהתקשורת לא הצליחה, ונישאל האם אנחנו רוצים להמשיך. נקליד yes והתהליך יסתיים בהודעה שאומרת שתהליך ההזדהות עבר בהצלחה.

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

מדריך Git על Windows: התקנה, הגדרות ראשוניות ושימוש בסיסי

גיא בורשטיין — Tue, 01 Nov 2011 10:37:00 GMT

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

התקנת Git בסביבת חלונות

הדרך המומלצת לעבודה עם Git בסביבת חלונות היא ע”י ה- Client ששמו msysgit. בעמוד הפרוייקט נחפש את הגירסא העדכנית ביותר של Gitברשימה (Full installer for official Git for Windows) ונלחץ על הקישור כדי להגיע לעמוד ההורדה.

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

לאחר סיום ההורדה, נתחיל בתהליך ההתקנה.

בעמוד ה- Welcome נלחץ על Next.

נאשר את תנאי השימוש ונמשיך הלאה.

נקבע / נאשר את מיקום ההתקנה של Git על חלונות ונמשיך הלאה.

במסך הגדרות ההתקנה נבצע מספר התאמות: נבחר האם להוסיף קיצורי דרך על ה- Desktop או בשורת ה- Quick Launch, וכן נסמן את האפשרויות של הוספת הפקודות ל- Context Menu בעת לחיצה ימנית על קבצים. זה יעזור לנו מאד בעבודה עם Git בסביבת חלונות בהמשך.

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

במסך הגדרות סביבת ההפעלה נבחר באפשרות “Use Git Bash only”.

כידוע, מערכות הפעלה שונות מקודדות תוים באופן שונה, ואחד ההבדלים הבולטים הוא התו CRLF (תו המציין מעבר שורה) ששונה באופן שהוא מיוצג בין Windows למערכות הפעלה אחרונות. כדי לא להתקל בבעיות בעת עבודה על פרוייקטים שלאו דווקא נוצרו בסביבת חלונות נבחר באפשרות: Checkout as-is, commit as-is.

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

הפעלה ראשונית והגדרות ראשוניות

לאחר ההתקנה נפעיל את Git Bash מתפריט התוכניות.

Git Bash הוא ממשק Console לעבודה מול Git. נשתמש בו לצורך אינטראקציה עם Git דרך פקודות.

בחלק העליון של חלון ה- Git Bash נראה את הגרסה איתה אנחנו עובדים (מסומן באדום) וכן נראה את שורת הפקודה המציינת את שם המשתמש ואת שם המחשב.

הגדרת שם המשתמש וכתובת המייל

כל פקודה בשימוש ב- Git מתחילה במילה git, ולאחריה הפקודה עצמה והארגומנטים. לדוגמא כדי להגדיר הגדרות נשתמש בפקודה git config.

נגדיר מספר הגדרות גלובליות עבור השימוש שלנו ב- Git ונתחיל בהגדרת שם המשתמש וכתובת המייל. נשתמש בפקודה הבא בשינוי השם המלא שלכם:

git config --global user.name ‘Guy Burstein’

והגדרת כתובת המייל:

git config --global user.email guyb@microsoft.com

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

יצירת מפתחות SSH לתקשורת מאובטחת מול מאגר הקוד

SSH (ראשי תיבות של Secure Shell) הוא פרוטוקול לתקשורת מאובטחת בין מחשבים, ומאפשרת להתחבר למחשב מרוחק ולבצע מולו פקודות.

כדי שנוכל לעבוד מול שרת Git באופן מאובטח, עלינו להגדיר מפתח SSH ייחודי לנו. כדי לעשות זאת, נשתמש בפקודה הבא (בשינוי כתובת המייל כמובן):

ssh-keygen –C ‘guyb@microsoft.com’ –t rsa

לאחר הקשת הפקודה נישאל איפה לשמור את הקובץ המכיל את מפתח ה- SSH. אפשר להקיש שם של קובץ או פשוט לאשר ע”י לחיצה על אנטר את מיקום ברירת המחדל (בתיקיית ה- User תיווצר תיקיית ssh. ובתוכה ישמרו הקבצים הרלוונטים).

כעת נתבקש להזין passphrase, וגם כאן נוכל לאשר ע”י הקשה על אנטר פעמיים.

בסיום התהליך אמור להיראות הפלט כך:

התהליך ייצור שני קבצים בתיקיית המשתמש שלי (אצלי: c:\users\guyb\.ssh). אחד מהם הוא המפתח הפרטי (id_rsa) והשני הוא המפתח הציבורי (id_rsa) בו נשתמש כדי להרשם וליצור remote repositories מאוחר יותר.

חשוב! כדאי לשמור את הקבצים האלה במקום מאובטח כדי שנוכל לשחזר אותם בכל זמן לצורך תקשורת עם שרתי ה- Git המרוחקים גם ממחשבים אחרים / אחרי פורמט וכו’.

עד כאן ההגדרות הנדרשות לעבודה עם Git בסביבת חלונות.

שימוש בסיסי ב- Git

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

לאחר ביצוע פעולת Build לפרוייקט (היוצרת את ספריות ה- Bin וה- Obj), נפתח את הספרייה בה יושב הפרוייקט, נלחץ על הכפתור הימני של העכבר ונבחר באפשרות Git Bash Here.

יצירת Git Repository

כעת, ניצור Git Repository עבור ה- Console Application שיצרנו. לאחר פתיחת Git Bash בספריית הפרוייקט נקבל את החלון הבא:

כדי ליצור Repository מהתיקייה הנוכחית נשתמש בפקודה:

git init

זה הכל? כן! התיקייה הנוכחית היא כרגע Repository מקומי, ונקבל את הפלט הבא:

נשים לב כי המילה master נוספה לשורת המיקום שלנו. השם master מציין את ה- branch שלנו בעץ הגירסאות של הפרוייקט, והענף הראשון שנוצר עבור פרוייקט הוא master. נדבר יותר על branches בפוסט מאוחר יותר.

עוד נשים לב כי בתיקיית הפרוייקט נוצרה לנו תקייה מוסתרת חדשה בשם git.:

בדיקת סטטוס ניהול הקבצים (git status)

כדי לבדוק את סטטוס ניהול הקבצים ב- repository נריץ את הפקודה:

git status

ונקבל את הפלט הבא:

הפלט הזה מציג מספר קבצים בצבע בורדו, שהם הקבצים שקיימים בתיקייה, אך לא משוייכים ל- Repository (זה מסביר את הכותרת Untracked files). בין הקבצים ניתן לראות קבצים חיוניים לפרוייקט כמו program.cs, תיקיית Properties ועוד, אך גם תיקיות וקבצים שלא נרצה לשמור אותם ב- Repository (כמו התיקיות Bin ו- Obj שדאגנו ליצור קודם). אלו קבצים שמפתח אחר בפרוייקט לא צריך אותם כדי לעבוד על הפרוייקט, לבנות אותו ולהריץ אותו.

שימוש בקובץ git ignore כדי להתעלם מקבצים מסויימים

כדי לציין למערכת Git כי ישנם קבצים שלא נרצה לנהל אותם, עלינו ליצור קובץ בשם gitignore. (קובץ ללא שם, ועם סיומת gitignore).

כדי ליצור קובץ ignore כזה נשתמש בפקודה touch שיוצרת קובץ ריק לפי שם נתון:

touch .gitignore

לא נקבל כאן פלט מסויים, אך בתיקיית הפרוייקט נוצר לנו קובץ חדש:

נערוך את הקובץ עם כל עורך טקסט (Notepad לדוגמא) כדי להזין בו את השמות של הקבצים והספריות זמהן נרצה להתעלם. למשל:

obj
bin
*.csproj.user

לסיום, נשמור את הקובץ. נוכל תמיד לערוך אותו ולהוסיף קבצים בשלב מאוחר יותר.

אם כעת נציג סטטוס (ע”י שימוש בפקודה git status), נראה שרשימת הקבצים קטנה. היא מכילה אמנם את קובץ ה- ignore אך לא מכילה את רשימת הקבצים שביקשנו לא להוסיף.

העברה ל- Staging

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

בשלב ראשון, יש לי קבצים בספריית העבודה שלי אותם אני עורך ומשנה. בשלב מסויים, אני רוצה לקבץ אוסף של קבצים ששונו / התווספו לתוך קבוצה שבעתיד תעבור לשלב הבא.

כדי להוסיף קבצים לסביבת ה- Staging, נשתמש בפקודה git add עם שמות הקבצים. לדוגמא, נשתמש בפקודה הבאה כדי להוסיף את כל הקבצים תחת הספרייה המקומית:

git add .

אם נציג כרגע את סטטוס ניהול הקבצים שלנו ע”י git status נראה את הפלט הבא:

הקבצים בספרייה הנוכחית ובספריות המשנה התווספו ומוצגת הכותרת: “Changes to be committed”. כלומר, הקבצים נמצאים בסביבת ה- Staging ומוכנים להעברה ל- Repository המקומי.
הם מסומנים בירוק ומצויין ליד כל אחד מהם new file. במהלך העבודה נוכל להוסיף עוד קבצים וספריות.

להעברת הקבצים האלה ל- Repository המקומי, נשתמש בפקודה git commit בצירוף label כלשהו שיתן תיעוד כלשהו לפעולה. למשל:

git commit -m "my first commit to git"

הרצת הפקודה תציג לנו את הפלט הבא.

אם נציג כרגע את הסטטוס נראה שאין קבצים חדשים / ששונו וכו’ שניתן להוסיף ל- Repository.

אם נשנה קובץ בספרייה המקומית (למשל את Program.cs) ונציג שוב סטטוס, נראה שהוא מופיע כקובץ ששונה. אנחנו יכולים להעביר אותו לסביבת ה- Staging ע”י git add, או להשאיר אותו כרגע בסביבת העבודה.

ע”י שימוש בפקודה git log נוכל להציג את לוג השינויים שיש לנו ב- Repository:

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

סיכום

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

מדריך jQuery Mobile - רשימות

גיא בורשטיין — Wed, 19 Oct 2011 19:29:39 GMT

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

בסוף הפוסט תמצאו את ה- HTML המלא של הדוגמא.

רשימה פשוטה

נתחיל מרשימה פשוטה של הכינויים בטוויטר של מספר אנשי מיקרוספוט מוכרים וכן מספר MVP’s, הבנוייה מתגיות HTML סטנדרטיות.

<div data-role="content">
  <ul>
    <li>@bursteg</li>
    <li>@maordp</li>
    <li>@scottgu</li>
    <li>@shanselman</li>
    <li>@shai_rai</li>
    <li>@gilfink</li>
    <li>@arikpoz</li>
  </ul>
</div>

בגלישה לדף הזה נקבל את התוצאה הבאה:

הגדרת הרשימה ("data-role="listview)

כדי להפוך את הרשימה הפשוטה לתצוגת רשימה ב- jQuery Mobile נוסיף את ההגדרה "data-role="listview:

<ul data-role="listview">
  ...
</ul>

ונקבל את התוצאה הבאה:

תוכן פריטים ברשימה

כל פריט ברשימה מצויין ע”י תגית li שיכולה להכיל תוכן נוסף מלבד טקסט פשוט. נוסיף לכל פריט כותרת וטקסט עם שם המשתמש:

<ul data-role="listview">
  <li>
    <h3>Guy Burstein</h3>
    <p>@bursteg</p>
  </li>
  <li>
    <h3>@maordp</h3>
    <p>Maor David-Pur</p>
  </li>
  ...
</ul>

ונקבל את התוצאה הבאה:

נוסיף לכל משתמש גם את מספר האנשים שהוא עוקב אחריהם, ונצמיד את המספר הזה לימין. ישנן 2 דרכים לעשות זאת: ע”י שימוש ב- class ששמו ui-li-count עבור מספר המציין מספר, וע”י ה- class ששמו ul-li-aside עבור כל טקסט אחר שנרצה להציג בצד.

<ul data-role="listview">
  <li>
    <h3>Guy Burstein</h3>
    <p>@bursteg</p>
    <p class="ui-li-count">729</p>
  </li>
  <li>
    <h3>@maordp</h3>
    <p>Maor David-Pur</p>
    <p class="ui-li-aside">533</p>
  </li>
  ...
</ul>

ונקבל:

נוסיף גם תמונה עבור כל משתמש – תמונת פרופיל הטוויטר שלו, בתור Icon לאיבר ברשימה, ונוסיף את ה- class ששמו ui-li-icon.

<ul data-role="listview">
  <li>
    <img src="http://a2.twimg.com/profile_images/1461601398/twitter_normal.JPG" 
      alt="Guy Burstein" class="ui-li-icon" />
    <h3>Guy Burstein</h3>
    <p>@bursteg</p>
    <p class="ui-li-count">729</p>
  </li>
  <li>
    <img src="http://a2.twimg.com/profile_images/1239419922/TechEd2008_normal.jpg" 
      alt="Maor David-Pur" class="ui-li-icon" />
    <h3>@maordp</h3>
    <p>Maor David-Pur</p>
    <p class="ui-li-count">533</p>
  </li>
  ...
</ul>

כעת, נקבל את התוצאה הבאה:

ניתן לראות שלא קיבלנו את התוצאה הרצויה. Icon ב- jQuery Mobile מוגדר להיות בגודל ברירת מחדל של 32x32 ותמונת הפרופיל בטוויטר היא 48x48, ולכן היא מסתירה חלק מהטקסט. כדי לפתור זאת, נציג את הדף בדפדפן Desktop ונשתמש בכלי הפיתוח של אינטרנט אקספלורר כדי לתחקר את ה- css שמשפיע על מיקום התמונה.

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

במקרה שלנו, נוסיף לדף את הגדרת ה- css הבאה, המשנה את העיצוה לפריטים ברשימה שיש להם Icon.

<style type="text/css">
  .ui-li-has-icon.ui-li-static
  {
    padding-left: 60px;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }
</style>

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

הגדרת רשימה מעוצבת פנימה (inset)

ניתן לשנות את עיצוב הרשימה כולה כך שלא תתפוס את כל שטח המסך, אלא יהיו לה גבולות, וזה ע”י הוספת התכונה "data-inset=”true להצהרת הרשימה.

<ul data-role="listview" data-inset="true">
  ...
</ul>

כעת תיראה הרשימה כך:

הוספת קטגוריות / מפרידים לרשימה (list-divider)

הרשימה מכילה משתמשים בשתי קטגוריות – אנשי מיקרוסופט ו- MVP’s. נוסיף לרשימה אלמנטים נוספים ונתייג אותם כמפרידים:

<ul data-role="listview" data-inset="true">
  <li data-role="list-divider">Microsoft</li>
  <li>
    <img src="http://a2.twimg.com/profile_images/1461601398/twitter_normal.JPG" 
      alt="Guy Burstein" class="ui-li-icon" />
    <h3>Guy Burstein</h3>
    <p>@bursteg</p>
    <p class="ui-li-count">729</p>
  </li>
  ...
  <li data-role="list-divider">MVP's</li>
  <li>
    <img src="http://a0.twimg.com/profile_images/57280018/Untitled_normal.jpg" 
      alt="Shai Raiten" class="ui-li-icon" />
    <h3>Shai Raiten</h3>
    <p>@shai_rai</p>
    <p class="ui-li-count">194</p>
  </li>
  ...
</ul>

עם המפרידים, הרשימה תיראה עתה כך:

חיפוש ברשימה (data-filter)

jQuery Mobile מאפשרת להוסיף חיפוש ברשימה באופן פשוט ביותר, ע”י הוספת המאפיין "data-filter="true להצהרת הרשימה:

<ul data-role="listview" data-inset="true" data-filter="true">
  ...
</ul>

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

שינוי עיצוב הרשימה ל- Theme אחר

jQuery Mobile תומכת במספר Themes לעיצוב האפליקציות, ששמן a עד d. ניתן להגדיר לרשימה את סגנון העיצוב ע”י הוספת המאפיין data-theme להצהרת הרשימה:

<ul data-role="listview" data-inset="true" data-filter="true" data-theme="a">
  ...
</ul>

עם ה- Theme ששמו a, תיראה כעת הרשימה כך:

ה- HTML המלא של הדוגמא הנ”ל הוא:

<!DOCTYPE html>
<html>
<head>
  <title>Twitter Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="Scripts/jquery-1.6.4.js" type="text/javascript"></script>
  <script src="Scripts/jquery.mobile-1.0rc1.js" type="text/javascript"></script>
  <link href="Content/jquery.mobile-1.0rc1.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
    .ui-li-has-icon.ui-li-static
    {
      padding-left: 60px;
      padding-top: 0.5em;
      padding-bottom: 0.5em;
    }
  </style>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Twitter Mobile</h1>
    </div>
    <div data-role="content">
    <ul data-role="listview" data-inset="true" data-filter="true" data-theme="a">
      <li data-role="list-divider">Microsoft</li>
      <li>
        <img src="http://a2.twimg.com/profile_images/1461601398/twitter_normal.JPG" 
          alt="Guy Burstein" class="ui-li-icon" />
        <h3>Guy Burstein</h3>
        <p>@bursteg</p>
        <p class="ui-li-count">729</p>
      </li>
      <li>
        <img src="http://a2.twimg.com/profile_images/1239419922/TechEd2008_normal.jpg" 
          alt="Maor David-Pur" class="ui-li-icon" />
        <h3>@maordp</h3>
        <p>Maor David-Pur</p>
        <p class="ui-li-count">533</p>
      </li>
      <li>
        <img src="http://a0.twimg.com/profile_images/565139568/redshirt_normal.jpg" 
          alt="Scott Guthrie" class="ui-li-icon" />
        <h3>Scott Guthrie</h3>
        <p>@scottgu</p>
        <p class="ui-li-count">729</p>
      </li>
      <li>
        <img src="http://a2.twimg.com/profile_images/1463303502/image_normal.jpg"
          alt="Scott Hanselman" class="ui-li-icon" />
        <h3>Scott Hanselman</h3>
        <p>@shanselman</p>
        <p class="ui-li-count">49,061</p>
      </li>
      <li data-role="list-divider">MVP's</li>
      <li>
        <img src="http://a0.twimg.com/profile_images/57280018/Untitled_normal.jpg" 
          alt="Shai Raiten" class="ui-li-icon" />
        <h3>Shai Raiten</h3>
        <p>@shai_rai</p>
        <p class="ui-li-count">194</p>
      </li>
      <li>
        <img src="http://a1.twimg.com/profile_images/1311002472/GilFink100_150_normal.jpg"
          alt="Gil Fink" class="ui-li-icon" />
        <h3>Gil Fink</h3>
        <p>@gilfink</p>
        <p class="ui-li-count">90</p>
      </li>
      <li>
        <img src="http://a0.twimg.com/profile_images/1152201658/new-main-smaller_normal.jpg"
          alt="Arik Poznanski" class="ui-li-icon" />
        <h3>Arik Poznanski</h3>
        <p>@arikpoz</p>
        <p class="ui-li-count">59</p>
      </li>
    </ul>
    </div>
    <div data-role="footer">
      Copyright 2011
    </div>
  </div>
</body>
</html>

תהנו!

מדריך jQuery Mobile - ניווט וכפתורים

גיא בורשטיין — Sat, 15 Oct 2011 16:57:44 GMT

בפרק הקודם במדריך jQuery Mobile יצרנו אפליקציה בסיסית המורכבת מדף בודד וראינו את המבנה הבסיסי שלו. בפרק הזה נרחיב את האפליקציה למספר דפים ונדבר על הניווט ביניהם.

ניווט בסיסי בין דפים באפליקציה

נוסיף לאפליקציה 3 דפים נוספים: products.html, services.html ו- about.html.

בתור תוכן לדפים האלה, נשתמש בתבנית הבסיסית של עמוד באפליקציית jQuery Mobile עם מעט תוכן, כדי שנוכל להבדיל בין הדפים (שינוי ה- title ותוכן ה- h1 באיזור ה- header). לדוגמא, תוכן עמוד ה- about יהיה:

<!DOCTYPE html>
<html>
<head>
  <title>About Us</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="Scripts/jquery-1.6.4.js" type="text/javascript"></script>
  <script src="Scripts/jquery.mobile-1.0rc1.js" type="text/javascript"></script>
  <link href="Content/jquery.mobile-1.0rc1.css" 
        rel="stylesheet" type="text/css" />
</head>
<body>
<div data-role="page">
  <div data-role="header">
    <h1>About Us</h1>
  </div>
  <div data-role="content">
    Here is some content for the "About Us" page.
  </div>
  <div data-role="footer">
    Copyright 2011
  </div>
</div>
</body>
</html>

כעת, בעמוד הראשי (index.html) נוסיף רשימת קישורים לדפים האחרים ע”י שימוש בתגיות HTML סטנדרטיות.

<div data-role="content">
  <a href="about.html">About Us</a><br />
  <a href="products.html">Products List</a><br />
  <a href="services.html">Services</a><br />
</div>

נריץ ונראה את האפליקציה בדפדפן הסלולרי, ונראה את רשימת הקישורים מוצגת באופן בסיסי.

איך jQuery Mobile מטפלת בניווט בין דפים?

אם נריץ את האפליקציה בדפדפן Desktop ולא בדפדפן מובייל, ונלחץ על הקישור About נקבל אמנם את התוצאה הרצויה, אך נשים לב שבשורת הכתובת לא קיבלנו את הכתובת אותה ציפינו לקבל:

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

שימוש בכפתורים

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

כדי להפוך קישור פשוט לכפתור, נוסיף את ההגדרה "data-role=”button לקישורים:

<div data-role="content">
  <a href="about.html" data-role="button">About Us</a><br />
  <a href="products.html" data-role="button">Products List</a><br />
  <a href="services.html" data-role="button">Services</a><br />
</div>

ונקבל את התוצאה הבאה, שהיא הרבה יותר ידידותית למגע:

הוספת Icons לכפתורים

לכפתורים ב- jQuery Mobile ניתן להוסיף אייקונים ולמקם אותם במיקומים שונים, ע”י שימוש בהגדרה "data-icon="delete כאשר "delete" מציין את שם האייקון לכפתור.

jQuery מגיעה עם רשימת אייקונים בסיסית אותם ניתן להוסיף לאפליקציה בצורה הזאת, כאשר שמות הכפתורים (משמאל לימין) הם:

arrow-l, arrow-r, arrow-u, arrow-d
delete, plus, minus, check
gear, refresh, forward, back
grid, star, alert, info
home, search

מיקום ה- Icon ע”ג הכפתור

ניתן למקם את האייקון ע”ג הכפתור במספר מקומות ע”י שימוש בהגדרה data-iconpos וציון המיקום.

לדוגמא תוכן הדף הבא:

<div data-role="content">
  <a href="about.html" data-role="button" 
     data-icon="arrow-l" data-iconpos="left">About Us</a>
  <a href="products.html" data-role="button" 
     data-icon="star" data-iconpos="top">Products List</a>
  <a href="services.html" data-role="button" 
     data-icon="home" data-iconpos="right">Services</a>
</div>

יביא לתוצאה הזאת:

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

<a href="/" data-role="button" data-icon="home" data-iconpos="notext">Home</a>

תביא להוספת הכפתור העליון:

תהנו!

מדריך jQuery Mobile - צעדים ראשונים

גיא בורשטיין — Fri, 14 Oct 2011 16:18:52 GMT

jQuery Mobile מאפשרת ליצור אפליקציות מובייל בטכנולוגיות Web עם HTML ו- JavaScript. התשתית, בקוד פתוח, המבוססת על ספריית ה- JavaScript הפופולרית jQuery, הופכת את יצירת אפליקציות מובייל התומכות במגוון פלטפורמות המובייל הקיימות היום למשהו פשוט, נוח ויפה.

במדריך jQuery Mobile זה, לאורך מספר פרקים, נכיר את התשתית משלב יצירת אתר חדש ועד לקבלת אפליקציית מובייל עשירה.

יצירת פרוייקט חדש

נתחיל ביצירת אתר ריק חדש. ב- Visual Studio 2010 ניצור Web Site חדש (לא New Project, אלא New Site):

במסך ה- New Web Site שנפתח, נבחר בתבנית של אתר ריק (ASP.NET Empty Web Site), ובמיקום האתר (Web Location בחלק התחתון) נבחר ב- HTTP.

נלחץ על Browse כדי ליצור אתר חדש תחת IIS Express. אם אתם עוד לא מכירים את IIS Expres - הגיע הזמן!

במסך שנפתח נבחר ב- Node של IIS Express ונלחץ על הכפתור Create New Site.

נזין את שם האתר החדש שנרצה ליצור (בדוגמא – jqm) ונלחץ על Open.

לסיום, נאשר את יצירת האתר החדש בחלון ה- New Web Site.

נקבל אתר ריק ללא שום דף HTML.

נוסיף דף HTML לאתר, בשם index.html.

לצורך בדיקה בלבד, נוסיף לדף ה- HTML תוכן כלשהו, לדוגמא:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test Title</title>
</head>
<body>
  <h1>This is a test content.</h1>
</body>
</html>

הרצה ובדיקה בדפדפן

בדיקת האתר בדפדפן יכולה להתבצע בשתי דרכים:

1. שימוש בדפדפן Desktop

נריץ את האתר שלנו בדפדפן. ונוודא שאנחנו מקבלים את התוצאה הרצויה.

נפעיל את כלי הפיתוח של אינטרנט אקספלורר 9 (ע”י לחיצה על F12), ובתפריט Tools נבחר באפשרות Resize ואז Custom.

במסך שנפתח, נוסיף את גודל הדפדפן של הטלפון הסלולרי, לדוגמא, במקרה של Windows Phone: רוחב 480, גובה 800 פיקסלים.

נזין את הרוחב והגובה ונלחץ על Add.

כעת נבחר את הרזולוציה ברשימה ונלחץ על Resize כדי לשנות את גודל הדפדפן לגודל דפדפן סלולרי.

2. שימוש באמולטור של Windows Phone

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

נפעיל את האמולטור מתפריט ההתחל.

נפעיל את אינטרנט אקספלורר באמולטור של Windows Phone. כאשר ננסה להזין כתובת ע”י שימוש במקלדת נגלה שכברירת מחדל אנחנו לא יכולים לעשות זאת, ועלינו להשתמש במקלדת של הטלפון באמולטור.

כדי בכל זאת לאפשר שימוש במקלדת של המחשב נשתמש בקיצור המקשים Ctrl + PgUp.

נזין את כתובת האתר שלנו (בדוגמא: http://localhost:47300), והדפדפן באמולטור יציג את האתר.

הורדה והתקנה של jQuery Mobile

הדרך הפשוטה ביותר להוריד ולהתקין את הגירסא העדכנית של jQuery Mobile היא להשתמש ב- NuGet.

ב- Visual Studio 2010, נסמן את האתר שלנו, נלחץ על הכפתור הימני של העכבר ונבחר באפשרות Manage Nuget Packages.

בחלון שנפתח, נבצע חיפוש לחבילה jQuery Mobile ונקבל את החבילות העונות לקריטריון החיפוש.

החבילה בה אנחנו מעוניינים היא jQuery Mobile 1.0. בדוגמא מופיעה גירסת RC שהיא הגירסא העדכנית של jQuery Mobile נכון ליום כתיבת המדריך.

נסמן את החבילה הזאת ונלחץ על Install. כיוון שהחבילה עושה שימוש ב- jQuery, ויז’ואל סטודיו יבצע את כל ההורדות וההתקנות הנדרשות עבורנו.

בסוף התהליך יראה האתר שלנו כך:

נוספה ספריית Content ובה קבצי ה- css של jQuery Mobile וכן מספר אייקונים. הספרייה Scripts מכילה את קבצי הספרייות של jQuery ו- jQuery Mobile.

דף בסיסי של jQuery Mobile

לאחר שהוספנו את הספריות jQuery ו- jQuery Mobile לאתר שלנו, ניתן להתחיל לבנות את האפליקציה.

נשנה את הדף index.html שבנינו קודם:

1. ה- Doctype

דף אפליקציית jQuery Mobile תמיד יתחיל ב- doctype של HTML5, כיוון שהתשתית עושה שימוש במגוון יכולות של HTML5.

<!DOCTYPE html>

2. Viewport meta tag

בתוך איזור ה- head נשים את הגדרת ה- Viewport המגדירה לדפדפן הסלולרי כיצד להתאים את מרחק התצוגה עבור תצוגת האתר. באופן ברירת מחדל הדפדפן הסלולרי מבצע zoom out כדי להציג אתר שלם לפי הגודל אליו הותאם.

<head>
  <title>Test Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

לדוגמא: האתר שלנו כרגע מוצג בדפדפן הסלולרי באופן הבא:

האתר כרגע ללא שימוש בתבית ה- viewport

האתר עם הגדרת ה- viewport

3. קישור לספריות jQuery ו- jQuery Mobile

עוד בתוך איזור ה- head נוסיף את הקישור לסקריפטים ל- CSS של ספריות ה- jQuery ו- jQuery Mobile ע”י גרירת הקבצים המתאימים מה- Solution Explorer לתוך עורך הקוד:

<head>
  <title>Test Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="Scripts/jquery-1.6.4.js" type="text/javascript"></script>
  <script src="Scripts/jquery.mobile-1.0rc1.js" type="text/javascript"></script>
  <link href="Content/jquery.mobile-1.0rc1.css" 
        rel="stylesheet" type="text/css" />
</head>

4. הגדרת דף בסיסי באפליקציה

באיזור ה- body, כל דף באפליקציה יזוהה ע”י תגית (בדר”כ div) עם התכונה: "data-role="page.

<body>
  <div data-role="page">
    ...
  </div>
</body>

תגיות ה- data מאפשרות להוסיף כל מידע חופשי לאלמנטים של HTML5 כדי שספריות JavaScript יוכלו לעשות בהם שימוש. מומלץ לקרוא את הפוסט בנושא HTML5: הוספת מידע חופשי לאלנטים עם data- attributes ו- datasets.

בתוך איזור ה- page, ניתן להשתמש בתגיות HMTL תקניות, אך דף טיפוסי ב- jQuery Mobile יכיל 3 איזורים בסיסיים: header, footer ו- content.

<div data-role="page">
  <div data-role="header">
    ...   
  </div>

  <div data-role="content">
    ...
   </div>

  <div data-role="footer">
    ...
  </div>
</div>

בסה”כ יראה הדף הבסיסי באפליקציית jQuery Mobile כך (מעתה, ניתן להעתיק את התוכן הזה לכל דף חדש שניצור):

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Mobile Application</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="Scripts/jquery-1.6.4.js" type="text/javascript"></script>
  <script src="Scripts/jquery.mobile-1.0rc1.js" type="text/javascript"></script>
  <link href="Content/jquery.mobile-1.0rc1.css"
          rel="stylesheet" type="text/css" />
</head>
<body>
<div data-role="page">
  <div data-role="header">
    <h1>jQuery Mobile</h1>
  </div>
  <div data-role="content">
    This is some content   </div>
  <div data-role="footer">
    Copyright 2011   </div>
</div>
</body>
</html>

נציג את הדף הזה בדפדפן הסלולרי שלנו ונקבל את התוצאה הבאה:

סיכום

בפרק זה במדריך jQuery Mobile יצרנו אפליקציה בסיסית וראינו את המבנה הבסיסי של דף באפליקציה. ראינו איך לסדר את סביבת העבודה כדי שנוכל לבדוק איך נראית האפליקציה שלנו בדפדפן ה- Desktop ובדפדפן הסלולרי.

בפרקים הבאים נמשיך בבניית אפליקצית ה- Web למובייל ונעשיר את הדוגמא עוד יותר.

בניית אפליקציות Offline ב- HTML5: שימוש ב- Application Cache (בקיצור AppCache)

גיא בורשטיין — Sun, 02 Oct 2011 08:00:00 GMT

עם עליית הפופולריות של התקנים ניידים (טלפונים חכמים, מחשבי לוח ועוד), אפליקציות Web התומכות בעבודה Offline הופכות נפוצות יותר ויותר. HTML5 מגדיר דרך סטנדרטית לשמירת משאבים (קבצים, תמונות וכו’) ב- Cache מקומי ע”י ה- Application Cache (בקיצור AppCache).

עם ה- HTML5 Application Cache ניתן לשפר את ביצועי האפליקציות ע”י הורדת כמות הפניות לרשת ולתמוך בעבודה Offline כאשר האתר או החיבור לרשת לא זמינים.

הכירות עם HTML5 AppCache

HTML5 Application Cache מאפשר לדפים לשמור משאבים (קבצים, תמונות) באופן מקומי. את המשאבים שנרצה לשמור נגדיר בתוך קובץ manifest אליו נפנה מכל דף באפליקציה שירצה לעשות שימוש במשאבים האלה כאשר האפליקציה במצב Offline. הדפדפן יקרא את קובץ ה- manifest, יוריד את המשאבים באופן אסינכרוני שלא פוגע בטעינת הדף, וישמור אותם לשימוש עתידי.

קובץ ה- manifest

קובץ ה- manifest הוא קובץ טקסט פשוט המגדיר את המשאבים שיש לשמור למצב offline. הרשימת יכולה להכיר תנאים לשמירת המשאבים, הוראות להתמודדות עם מצבים בהם אין גישה למשאבים כלשהם וכן רשימת משאבים שאין לשמור אותם ב- cache.

דוגמא לקובץ manifest:

CACHE MANIFEST
# This is a comment

CACHE:
style.css
script.js
index.htm
http://example.com/css/styles.css

FALLBACK:
/status.html /offline.html

NETWORK:
*

כל הוראה בקובץ ה- manifest מתחילה בשורה חדשה, כאשר הערות מתחילות בסימן #. השורה הראשונה CACHE MANIFEST מציינת לדפדפן שמדובר בקובץ manifest. השורות עם סינן הנקודותיים בסופן מציינות section של חוקים בקובץ.

ישנם מספר sections בקובץ ה- manifest:

CACHE – מציין את רשימת המשאבים שיש לשמור מקומית. בדוגמא יש 3 נתיבים יחסיים לכתובת השורש של האתר ועוד נתיב מפורש למשאב חיצוני לאתר. כאשר הדפדפן יקרא את קובץ ה- manifest, הוא יוריד את המשאבים האלה וישמור אותם ב- cache לשימוש עתידי.
FALLBACK – מה יש לעשות כאשר מנסים לגשת לקובץ שלא קיים ב- cache. כל שורה בסט החוקים הזה מכילה שני חלקים מופרדים בתו רווח. החלק הראשון מציין את המשאב שהאפליקציה תחפש והחלק השני את המשאב שיש להחזיר במידה והמשאב המבוקש לא שמור מקומית.
NETWORK – רשימת המשאבים שאין לשמור אותם מקומית וניתנים לגישה רק כאשר יש גישה לרשת.

קישור לקובץ ה- manifest

ניתן לקשר לקובץ ה- manifest בכל דף באפליקציה ע”י הוספת המאפיין manifest לתגית ה- <html> הראשית של הדף. הדפדפן ישמור ב- cache גם את הדף הנוכחי המפנה אל קובץ ה- manifest (בנוסף למשאבים המצויינים ב- manifest עצמו).

<!DOCTYPE html>

<html lang="en" manifest="manifest.appcache">  
    ...  
</html>

חשוב! לוודא ששרת ה- web יודע להחזיר קבצי manifest של HTML5 AppCache עם ה- mime-type הנכון. כדי להוסיף את ה- mime-type לאפליקציה, יש להוסיף את התוכן הבא לקובץ ה- web.config של האפליקציה, או לחילופין לערוך את קובץ הקונפיגורציה של ה- IIS כולו ובכך להחיל את השינוי על כל האפליקציות.

בדוגמא הזאת אני מראה קובץ web.config המגדיר את ה- mime-type מסוג text/cache-manifest לקבצי appcache שזו הסיומת המומלצת לקבצי HTML5 AppCache.

<configuration>  
  <system.webServer>  
    <staticContent>  
      <mimeMap fileExtension=".appcache" mimeType="text/cache-manifest" />  
    </staticContent>  
  </system.webServer>  
</configuration>

טיפים לשימוש ב- HTML5 Application Cache

1. התאמת משאבים מרובים באיזור ה- FALLBACK בקובץ ה- manifest

הזכרנו קודם שאיזור ה- FALLBACK בקובץ ה- manifest מכיל חוקים המורכבים משני חלקים. החלק הראשון מציין את חוק ההתאמה – לאילו משאבים האפליקציה תרצה לגשת והחלק השני את המשאב שיש להחזיר במידה והמשאב המבוקש לא קיים ב- cache. לדוגמא:

FALLBACK: 
/status.html /offline.html

במצב offline, כאשר האפליקציה תנסה לגשת לדף status.html שאינו נשמר ב- cache, הדפדפן יחזיר את הדף offline.html.

חוקי התאמת המשאבים בחלק ה- FALLBACK רלוונטי למשאב סצפיפי וכן לכל המשאבים שתחתיו. לכן, אם נרשום:

FALLBACK: 
/ /offline.html

חוק ההתאמה יתפוס פניה לכל דף באתר, בין אם בספריית השורש של האתר, כמו about.html/ או לדפים פנימיים כגון about/contact.html/.

2. עדכון ה- cache

כאשר הדפדפן הוריד את כל המשאבים המצויינים בקובץ ה- manifest ושמר אותם מקומית, הם ישמרו מקומית עד שהמשתמש ינקה את ה- cache או שהאפליקציה תעדכן את ה- manifest.

חשוב! עדכון המשאבים עצמם שקובץ ה- manifest עצמו מפנה אליהם לא מספיק כדי לגרום לאפליקציה לרענן את ה- cache.

עדכון יזום של ה- cache

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

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

CACHE MANIFEST

# Version 3

CACHE:
/css/main.css

סיכום

HTML5 Application Cache מאפשר לאפליקציה לחסוך בגישות לרשת וכן לתמוך בעבודה במצב offline, ע”י הגדרת חוקים פשוטים בקובץ manifest וקישור אליו מדפי האפליקציה.

HTML5 AppCache נתמך בין היתר בגירסת המפתחים השלישית של אינטרנט אקספלורר 10 הכלולה ב- Windows 8 Developer Preview, ומאפשרת לאפליקציות מטרו של Windows 8 לתמוך בעבודה offline.

תהנו!

HTML5: מבוא ל- HTML5 Web Workers ותכנות מקבילי ב- JavaScript

גיא בורשטיין — Sun, 07 Aug 2011 17:06:55 GMT

פיתוח ב- JavaScript, בהשוואה לסביבות פיתוח אחרות, סבל עד לאחרונה ממגבלה קשה: ביצוע של קוד ה- JavaScript היה מוגבל ל- Thread בודד בדפדפן.
לאור העובדה שמשתמשים דורשים כיום אפליקציות עשירות עם חווית משתמש טובה, וכן רוב המחשבים כוללים יותר ממעבד אחד – נדרשת כיום גישה שונה לפיתוח אפליקציות ב- JavaScript, העושה שימוש ביותר מ- Thead בודד.

לפני עידן ה- HTML5 Web Workers

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

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

ודוגמא נוספת מפיירפוקס 5:

מפתחים התמודדו עם נושא ביצוע פעולות אסינכרוניות ב- JavaScript במספר דרכים, ביניהן שימוש בפונקציות כמו ()setTimeout ו- ()setInterval, ביצוע קריאות HTTP בצורה אסינכרונית ע”י XMLHttpRequest וכו’, אך עדיין – הבעיה שסקריפט רץ על אותו Thread שבו משתמש הדפדפן כדי לצייר את האלמנטים ולהגיב לפעולות המשתמש לא נפתרה.

הכירו את Web Workers

Web Workers API, ספסיפיקציית JavaScript חדשה ב- HTML5 מאפשרת להריץ סקריפט ברקע, וע”י כך לבצע משימות מבלי להפריע ל- Thread שבו משתמש הדפדפן לציור האלמנטים ותגובה לקלט מהמשתמש.

חשוב לדעת! לא כל קטע קוד JavaScript יכול לרוץ ב- Web Workers.

יצירת ה- Web Workers הראשון שלי

בדוגמא הנוכחית ניצור דף HTML המפעיל Web Worker המבצע עבודה ברקע. במקרה שלנו, הדף הראשי ישלח ל- Worker מחרוזת, ה- Worker יבצע ברקע עיבוד כלשהו על המחרוזת ויחזיר אותה לדף הראשי. הדף הראשי יציג את התוצאה באלמנט ע”ג הדף.

1. קוד ה- JavaScript של WebWorker צריך להיות פיזית בקובץ נפרד. לכן ניצור קובץ JavaScript חדש, לדוגמא בשם helloworkers.js.

2. כדי לעבוד עם ה- Web Worker עלינו ליצור בתוך קוד JavaScript אובייקט חדש מסוג Worker ולהעביר אליו את שם הקובץ שבו נמצא הקוד שירוץ ברקע.

<script>
  var worker = new Worker('helloworkers.js');
</script>

3. ניתן ל- Worker סימן שהוא יכול להתחיל את ריצתו. הדפדפן יצור Thread חדש ויריץ את הסקריפט.

<script>
  var worker = new Worker('helloworkers.js');

  worker.postMessage();
</script>

4. התקשורת בין ה- Thread הראשי לבין ה- Worker היא באמצעות הודעות (messages) שיכולות להיות מחרוזות רגילות או אובייקטים ב- JSON. כדי להאזין להודעות המתקבלות מה- Worker, נירשום פונקציה לטיפול באירוע message.

<script>
  var worker = new Worker('helloworkers.js');
 
  worker.addEventListener("message", function (event) {
 
    // Do something with the message sent by the worker
 
  }, false);
 
  worker.postMessage("guy");
</script>

5. הפונקציה הזאת מקבלת אובייקט מסוג MessageEvent שמכיל את תוכן הודעה בשדה data. נוציא את הערך מתוך השדה data ונכתוב אותו לתוך אלמנט כלשהו ב- DOM.

<script>
  var worker = new Worker('helloworkers.js');
 
  worker.addEventListener("message", function (event) {
 
    // Create a new element that will show the message content
    // sent from the worker
    var span = document.createElement("span");
    span.innerHTML = event.data;
    document.body.insertBefore(span);
 
  }, false);
 
  worker.postMessage("guy");
</script>

6. כעת נממש את ה- Worker עצמו בקובץ helloworkers.js. כזכור, התוכנית הראשית יוצרת את ה- Worker ומעבירה לו את ההודעה הראשונה ע”י שימוש בפונקציה postMessage, שגורמת לו להתחיל לפעול.
לכן, השורה הראשונה שלנו בקובץ helloworkers.js תהיה רישום של פונקציה לטיפול באירוע message של הדף כדי שנהיה מסוגלים לקבל ממנו קלט ולרוץ בהתאם.

// helloworkers.js
 
// Defining the callback function raised when the main page will call us
this.addEventListener('message', messageHandler, false);

7. כעת נממש את הפונקציה messageHandler שבה למעשה יושב המימוש של ה- Worker. במימוש לדוגמא שאני מביא כאן, אנחנו מקבלים מחרוזת מהתוכנית הראשית, ומוסיפים לה את המילה Hello. את התשובה, אנחנו מחזירים לדף הראשי ע”י שליחת הודעה עם המחרוזת הסופית.

// helloworkers.js
 
// Defining the callback function raised when the main page will call us
this.addEventListener('message', messageHandler, false);
 
function messageHandler(event) {
 
  // Accessing to the message data sent by the main page
  var messageSent = event.data;
 
  // Preparing the message that we will send back
  var messageReturned = "Hello " + messageSent;
 
  // Posting back the message to the main page
  this.postMessage(messageReturned);
}

8. סיום פעולת ה- Worker. חשוב לדעת שה- Worker ירוץ וישאר בזיכרון עד שנפסיק את פעולתו. יש 2 דרכים להפסיק פעולת Worker:

מתוך העמוד הראשי, ע”י קריאה לפונקציה ()terminate באופן הבא:

// Terminate the worker
worker.terminate();

מתוך ה- Worker עצמו ע”י שימוש בפונקציה ()close:

// End this worker's work and free memory 
this.close();

נסו את ה- Web Workers API עם אינטרנט אקספלורר 10

גירסת המפתחים השניה של אינטרנט אקספלורר 10, ששוחררה לא מזמן, מכילה תמיכה ב- Web Workers.

עם אינטרנט אקספלורר 10 אפשר לראות את הדוגמא הסופית שהצגתי בפוסט בכתובת: http://html5demos.apphb.com/HTML5/WebWorkers/WebWorkersDemo.html

בנוסף, באתר הדמויים של אינטרנט אקספלורר, תוכלו למצוא דמו דמו מרהיב יותר העושה שימוש ב- Web Workers ומדגים את האפשרויות החדשות הזמינות מעתה למפתחים.

בפוסט הבא על Web Workers אציג כיצד ניתן להעביר הודעות מורכבות יותר בפורמט Json בין ה- Worker לדף הראשי.

תהנו!

HTML5: הוספת מידע חופשי לאלנטים עם data- attributes ו- datasets

גיא בורשטיין — Sat, 30 Jul 2011 10:35:53 GMT

מאפייני ה- *-data החדשים ב- HTML5 מאפשרים לנו לשמור מידע חופשי על אלמנטים ב- HTML ולעשות בהם שימוש בלוגיקה של האתר (לרוב ה- JavaScript). בפוסט הזה נראה איך עשינו את זה עד היום, נבין למה זה לא היה מוצלח ונבין לעומק את הפיתרון ב- HTML5.

איך אנחנו עושים את זה היום?

את האמת – נכון שיצא לכם פעם להשתמש ב- CSS Classes או במאפיינים לא סטנדרטים של אלמנטים כדי לשמור עליהם מידע ולהשתמש בו בקוד JavaScript?

לדוגמא, נניח שאנחנו רוצים להציג מאפיינים של רכב ב- div כלשהו, ולשמור מידע כלשהו על הרכב. עד היום היינו מוסיפים מאפיינים חופשיים לאלמנטי HTML:

<div id="car" brand="mazda" model="3">
  Guy is very happy with his Mazda 3.
</div>

או ע”י הוספת CSS Classes:

<div id="car" class="mazda">
  Guy is very happy with his Mazda 3.
</div>

הפיתרונות האלה עובדים, הם בעייתיים משתי סיבות:

ה- HTML אינו תקין מבחינת, ולא עובר ואלידציה של W3C.
CSS Classes נועדו להוספת סגנונות עיצוב ולא לשמירת מידע נוסף על אלמנטים.

איך עושים את זה ב- HTML5: הכירות עם מאפייני ה- *-data

HTML5 מאפשר לנו להוסיף מידע חופשי לכל אלמנט ע”י שימוש בקידומת –data. הצורה המדוייקת היא *-data כאשר * היא המאפיין אותו אנחנו רוצים להוסיף לאלמנט.

לדוגמא:

<div id="car" data-brand="mazda" data-model="3">
  Guy is very happy with his Mazda 3.
</div>

הקוד הזה הוא קוד תקין מבחינת תקן ה- HTML5 ויעבור ואלידציה.

איך ניגשים למאפיינים בקוד JavaScript?

עד היום, היינו ניגשים בקוד JavaScript למאפיינים של אלמנטים באופן הבא:

<script>
  // Get the cal element
  var mycar = document.getElementById('car');
 
  // Get the "data-brand" attribute value (returns "mazda")
  var brand = mycar.getAttribute("data-brand");
 
  // Change "data-brand" to "toyota"
  mycar.setAttribute("data-brand", "toyota");
 
  // Removes "data-brand" attribute entirely
  mycar.removeAttribute("data-brand");
</script>

בעוד הגישה הזאת עובדת, לא אליה התכוון המשורר. ב- HTML5 יש לאלמנטים מאפיין חדש בשם dataset מסוג DOMStringMap, שמכיל את רשימת כל מאפייני ה- data. נשתמש בו ונהנה מסינטקס יפה יותר:

<script>
  // Get the cal element
  var mycar = document.getElementById('car');
 
  // Get the "data-brand" attribute value (returns "mazda")
  var brand = mycar.dataset.brand;
 
  // Change "data-brand" to "toyota"
  mycar.dataset.brand = 'toyota';
 
  // Removes "data-brand" attribute entirely
  mycar.dataset.brand = null;
</script>

תמיכה בדפדפנים

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

<script>
  // Get the cal element
  var mycar = $('#car');
 
  // Get the "data-brand" attribute value (returns "mazda")
  var brand = mycar.data("brand");
 
  // Change "data-brand" to "toyota"
  mycar.data("brand", "toyota");
 
  // Removes "data-brand" attribute entirely
  mycar.data("brand", null);
</script>

תהנו!

מיקרוסופט מבטלת את התמיכה ב- Conditional Comments החל מאינטרנט אקספלורר 10

גיא בורשטיין — Tue, 26 Jul 2011 06:34:34 GMT

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

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

אינטרנט אקספלורר 6 שוחרר ב- 2001, אינטרנט אקספלורר 7 ב- 2006, כאשר האינטרנט היה שונה מאד ממה שהוא היום, ואי אפשר לצפות שדפדפן בן 10 שנים יציג אתרים באותו אופן כמו כרום 12, פיירפורס 5 ואקספלורר 9.

תזכורת – מהן Conditional Comments?

אחת הדרכים להתמודד עם גירסאות ישנות של אינטרנט אקספלורר (6 ו- 7) שעדיין בשימוש היא להשתמש ב- Conditional Comments, המאפשרות לכתוב קוד המיועד לגירסאות ספספציות של אינטרנט אקספלורר.

לדוגמא:

<!--[if IE 6]>
  <link type=”text/css” rel=”stylesheet” href=”css/ie6.css” />
<![endif]-->

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

למה מסירים את התמיכה?

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

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

אינטרנט אקספלורר 10 לא יתייחס יותר ל- Conditional Comments כיוון שאין בהן יותר צורך.

עוד פוסטים שכדאי לקרוא:

תהנו!

סקירה: מה חדש בפיירפוקס 5?

גיא בורשטיין — Tue, 26 Jul 2011 06:03:48 GMT

לא טעיתם… פוסט ריק…

פיתוח אתרי HTML5 מודרניים עם Modernizr

גיא בורשטיין — Mon, 25 Jul 2011 09:15:56 GMT

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

Feature Detection במקום Browser Detection

במשך שנים הדרך לזהות אילו יכולות נתמכות בדפדפן המשתמש הייתה לבדוק את ה- user agent של הדפדפן ולהוסיף קוד מתאים בהתאם. אבל כיום, כשקצב שיחרור הגירסאות של כל יצרני הדפדפנים הולך וגובר, ובמקביל אנחנו רוצים לתמוך בגולשים ממגוון מכשירים ניידים – הגישה הזו אינה טובה מספיק, ומומלץ לנקוט בגישה אחרת.

הכירו את Modernizr

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

תכונות מרכזיות:

Feature Detection של עשרות תכונות של HTML5 ו- CSS3.
API נוח דרך אובייקט מרכזי אחד
הוספת CSS Classes בהתאם לתמיכה או לאי תמיכה ביכולות
מהיר וקל לשימוש

הוספת Modernizr לאתר

הדרך הפשוטה ביותר להוסיף את Modernizr לאתר היא להוסיף את הספרייה כחבילת NuGet מתוך Visual Studio. פשוט הצביעו על הפרוייקט, בחרו באפשרות Manage Nuget Packages, חפשו את Modernizr הוסיפו לפרוייקט.

אפשרות אחרת היא להוריד את הספרייה מאתר הפרוייקט ולהוסיף אותה ידנית.

בכל מקרה, לפני השימוש נוסיף הפניה לקובץ ה- JavaScript בדפי ה- HTML שלנו.

<head>
  <title>Modernizr Demo</title>
  <script src="Scripts/modernizr-2.0.6.js" type="text/javascript"></script>
</head>

מה מקבלים כשמריצים?

אם נריץ דף עם הפניה לספריית Modernizr, אפילו מבלי שעשינו כל שימוש בה, כבר נוכל לראות מה היא עושה. כש- Modernizr נטענת, היא בודקת אילו תכונות נתמכות בדפדפן המשתמש ומוסיפה CSS Classes לאלמנט הראשי של הדף.

מבט זריז בכלי הפיתוח של הדפדפן, יראה לנו את התמונה הבאה:

הספרייה הוסיפה CSS Classes לאלמנט ה- HTML הראשי של הדף בהתאם לתכונות הנתמכות. לדוגמא, רואים שבאינטרנט אקספלורר 9 יש תמיכה ב- Canvas, איך אין תמיכה ב- WebGL וב- Touch.

שימוש 1 – תמיכה בתכונות CSS3

בדוגמא הזו נראה איך שימוש באותן CSS Classes שנוספו ע”י Modernizr עוזרות לנו כשאנחנו רוצים לעשות שימוש בתכונה כלשהי של CSS3. נניח שבעיצוב האתר שלנו אנחנו רוצים להשתמש ב- border-radius (תכונה חדשה ב- CSS3).

<div class="corners">
  <p>Hey, does your browser support this CSS3 feature?</p>
</div>

עד היום כדי לממש פינות עגולות היינו צריכים לכתוב את הקוד הבא:

<style>
  .corners {
    -moz-border-radius: 17px 17px 17px 17px;
    -webkit-border-radius: 17px 17px 17px 17px;
    border-radius: 17px 17px 17px 17px;
      
    width: 100px;
    height: 100px;
    background-color: blue;
    color: white;
    padding: 15px;
  }
</style>

בקוד הנ”ל יש 2 בעיות:

יש שימוש ב- Vendor Prefix (כגון moz- ו- webkit-) שגורם לשכפול הגדרת העיצוב מספר פעמים.
אין טיפול במצב בו אין לדפדפן תמיכה ב- border-radius.

השימוש ב- Modernizr פותח את 2 הבעיות האלה:

<style>
.borderradius .corners {
  border-radius: 17px 17px 17px 17px;
      
  width: 100px;
  height: 100px;
  background-color: blue;
  color: white;
  padding: 15px;
}
  
.no-borderradius .corners {
  background-image: url('Images/background.png');
      
  width: 100px;
  height: 100px;
  background-color: blue;
  color: white;
  padding: 15px;
}
</style>

הספרייה מבטלת את הצורך ב- Vendor Prefix ומאפשרת להשתמש בהגדרה בודדת ללא קידומת. הספרייה דואגת להגדרה המתאימה הנדרשת לכל הדפדפנים התומכים.
מאחר והספרייה מוסיפה את ה- CSS Classes המתאימים למצב תמיכה או אי תמיכה ביכולת, אנחנו יכולים לתת הגדרות עיצוב ל- 2 המצבים, ועבור מצב בו הדפדפן לא תומך בתכונה לתת עיצוב חלופי (למשל, לממש את הרקע באמצעות תמונה).

נסו להריץ את הדוגמא עצמכם וראו איך היא מוצגת על הדפדפן שלכם.

שימוש 2 – בדיקת תמיכה בתכונות HTML5 דרך JavaScript

HTML5 כולל מספר JavaScript API’s חדשים, כגון geolocation, File API, Web Sockets ועוד, וכמו מגוון רחב של אלמנטים ב- HTML5 הם אינם ממומשים באופן מלא בכל הדפדפנים, וכמובן לא בגירסאות קודמות שלהן שנמצאים בשימוש אצל המשתמשים.

בתור Best Practice לשימוש ביכולות האלה באתרים מודרניים, חובה עלינו לוודא שקיימת תמיכה לפני שאנחנו מנסים לעבוד עם ה- API’s החדשים.

Modernizr מכילה אובייקט גלובלי אחד בשם Modernizr (כמה מפתיע) שחושף מאפיינים בוליאנים שעוזרים לבדוק תמיכה באלמנט מסויים לפני השימוש בו.

לדוגמא, לפני השימוש ב- geolocation, נבדוק שאכן קיימת תמיכה. במידה ולא – נודיע למשתמש או לא נפעיל את הקוד הרלוונטי לשימוש בנתוני המיקום.

<script>
 
  // Check if there is support for geolocation
  if (Modernizr.geolocation) {
 
    // If there is support - get the current position
    navigator.geolocation.getCurrentPosition(
      function (position) {
        document.writeln(position.coords.latitude
          + " " + position.coords.longitude);
      });
    }
 
  // If no support - notify the user
  else {
    alert("Your Browser does not support GeoLocation.");
  }
</script>

נסו להריץ את הדוגמא עצמכם וראו איך היא מוצגת על הדפדפן שלכם.

שימוש 3 – תמיכה בתגיות הסמנטיות החדשות של HTML5

HTML5 כולל מספר תגיות סמנטיות חדשות כגון header, footer, nav, article ועוד שמוסיפות משמעות סמנטית לאלמנטים בדף, ועוזרת מגוון מכשירים, דפדפנים ומנועי חיפוש להבין טוב יותר את תוכן הדף.

לדוגמא, בדף הבא מוגדר אלמנט header לראש הדף, footer לתחתית הדף ואיזור הניווט מוגדר בתוך האלמנט nav.

<!DOCTYPE html>
 
<html>
<head>
  <title>Semantic Tags</title>
  <style>
    header { color: blue; }
  </style>
</head>
 
<body>
  <header>
    <h1>Semantic Header</h1>
  </header>
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
    </ul>
  </nav>
  <footer>All right reserved.</footer>
</body>
 
</html>

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

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

ע”י הוספת השימוש ב- Modernizr לדף, מבוצע קוד JavaScript שמייצר את התגיות הסמנטיות האלה ב- DOM ועוזר לדפדפנים הישנים להתמודד איתם בצורה טובה יותר. בנוסף, העיצובים ששמנו על התגיות הסמנטיות יעבדו.

סיכום

Modernizr מאפשרת לנו להשתמש במרכיבים של HTML5, CSS3 ו- JavaScripts API’s מודרניים כדי לבנות אפליקציות חדשניות, לזהות בצורה קלה אילו תכונות נתמכות בדפדפן של המשתמש ולתת את הטיפול המתאים.

תהנו!

HTML5: קריאת תוכן קובץ בצד הלקוח ב- JavaScript עם File API

גיא בורשטיין — Fri, 22 Jul 2011 08:50:25 GMT

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

קריאת תוכן הקובץ עם האובייקט FileReader

בפוסט הקודם, ראינו דוגמא שבה המשתמש בוחר קבצים מהמחשב המקומי, ובפונקציית הטיפול באירוע בחירת הקבצים קיבלנו גישה לאובייקטים מסוג File, שאפשר לנו ללמוד מספר פרטים בסיסיים על הקובץ הנבחר.

ברגע שיש לנו אובייקט מסוג File, אפשר ליצור מופע של אובייקט מסוג FileReader לצורך קריאת תוכן הקובץ באחת מארבע דרכים:

(FileReader.readAsBinaryString(File – קריאת תוכן הקובץ וקבלת ייצוג בינארי של הקובץ כמחרוזת בשדה result. כל תו במחרוזת מיוצג ע”י מספר בין 0 ל- 255.
(FileReader.readAsText(File, opt_encoding – קריאת תוכן הקובץ כטקסט, לפי הקידוד שמועבר כפרמטר. השדה result יכיל מחרוזת עם התוכן הטקסטואלי של הקובץ. קידוד ברירת המחדל הוא UTF8, והשדה הזה הוא אופציונאלי.
(FileReader.readAsDataURL(File – השדה result יכיל ייצוג של הקובץ כ- data URL (מחרוזת בסגנון: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA .
(FileReader.readAsArrayBuffer(File – השדה result יכיל את תוכן הקובץ כאובייקט ArrayBuffer.

אחראי שקראנו את תוכל הקובץ בכל אחת מהדרכים האלה, ניתן להשתמש באירועים onloadstart, onprogress, onload,onabort, onerror, ו- onloadend כדי לעקוב אחרי ההתקדמות ולבצע פעולות בהתאם.

דוגמא: קריאת תוכן קבצי תמונה והצגתם באתר

בדוגמא הבאה המשתמש בוחר מספר קבצי תמונה מהמחשב המקומי, וע”י שימוש ב- FileReader, קוראים את תוכן קובץ התמונה ומציגים אותו באתר. כל זה נעשה בצד הלקוח בלבד והקבצים אינם מועלים לשרת.

<!DOCTYPE html>
<html>
<head>
  <title>FileReader Sample</title>
</head>
<body>
  <input type="file" id="files" name="files[]" multiple="multiple" />
  <div id="list">
  </div>
  <script>
    function handleFileSelection(evt) {
      var output = [];
 
      // Go over the list of files
      var files = evt.target.files;
      for (var i = 0, f; f = files[i]; i++) {
 
        // Only process image files.
        if (!f.type.match('image.*')) {
          continue;
        }
 
        var reader = new FileReader();
 
        // Closure to capture the file information.
        reader.onload = function (e) {
 
          // Render the image
          var span = document.createElement('span');
          span.innerHTML = '<img src="' + e.target.result + '"/>';
          document.getElementById('list').insertBefore(span, null);
        };
 
        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
      }
    }
 
    // Check for the various File API support.
    if (window.File && window.FileReader && window.FileList && window.Blob) {
 
      // File API is supported.
      document.getElementById('files')
        .addEventListener('change', handleFileSelection, false);
 
    } 
    else {
      alert('File API is not supported.');
    }
  </script>
</body>
</html>

דף ה- HTML מכיל פקד לבחירת מספר קבצים וכן div ריק בשם list.
במידה והדפדפן תומך ב- File API, אנחנו רושמים את הפונקציה handleFileSelection לטיפול באירוע בחירת הקבצים. בפונקציה הזו אנחנו מקבלים רשימת אובייקטים מסוג File, מוודאים שהם מסוג קובץ תמונה וקוראים את תוכן הקובץ באופן הבא:

עבור כל קובץ, אנחנו יוצרים מופע של FileReader וקוראים לפונקציה readAsDataURL עם הקובץ לקריאה כפרמטר.
הפונקציה readAsDataURL קוראת את תוכן הקובץ באפון אסינכרוני, ובסיום הקריאה מפעילה את האירוע onload, ולכן אנחנו נרשמים לטיפול באירוע הזה.
כאשר טעינת הקובץ הסתיימה, בתור טיפול באירוע onload, אנחנו יוצרים span חדש עם תמונה בתוכו שמציגה את תוכן הקובץ, ומוסיפים אותו ל- div הריק בדף.

בהרצת הדוגמא – נבחר מספר קבצי תמונה במחשב האישי ואלה יוצגו בדף ה- HTML שלנו.

תמיכה בדפדפנים

אינטרנט אקספלורר 10 תומך ב- File API החל מגירסת המפתחים השניה, אותה ניתן להוריד מאתרwww.IETestDrive.com.
אם אתם רוצים לשחק ב- File API כבר באינטרנט אקספלורר 9, תוכלו להוסיף את התמיכה בקלות ע”יהתקנת תוספת מיוחדת מתוך HTML5 Labs.
כרום תומך ב- File API החל מגירסא 6, ופיירפוקס מגירסא 3.6.

תהנו!