פיתוח אפליקציית Windows Phone 8 בעזרת PhoneGap/Cordova

15 בדצמבר 2013

5 תגובות

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

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

במאמר זה אתמקד בפלטפורמת הפיתוח למובייל Cordova או בשמה הפופולארי PhoneGap, ואראה כיצד לפתח בעזרת Visual Studio 2013 אפליקציות מבוססות HTML/CSS/JavaScript עבור מערכת ההפעלה Windows Phone 8. לבסוף אסביר כיצד ניתן ליצור Build שונה של אותה אפליקציה, עם אותו קוד מקור עבור מכשירים מבוססי מערכת הפעלה שונה.

PhoneGap או Cordova?

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

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

אז מה ההבדל?

נגדיר את זה בפשטות: PhoneGap הינה גרסת הפצה חינמית של Apache Cordova, שנתרמה בתאריך 2011/Oct לקרן Apache Software Foundation כקוד פתוח. אפשר להתייחס לקשר בין PhoneGap, Cordova כהקשר בין WebKit לדפדפנים Safari או Chrome.

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

בהמשך המאמר אתייחס ל- Apache Cordova, אלא אם כן אציג שירות מיוחד של PhoneGap.

איך Apache Cordova עוזרת לנו?

במקום להכיר ולהתמחות בארכיטקטורה, כלי הפיתוח, שפת הפיתוח, והאילוצים של כל פלטפורמה בנפרד, Apache Cordova מגשרת בין הפלטפורמות השונות בעזרת פקד web (מבוסס על Internet Explorer ב- Windows Phone ועל WebKit בפלטפורמות אחרות), עליו תרוץ האפליקציה שלנו, וספרייה שכתובה בשפת JavaScript שחושפת שכבת API's אחידה לכל הפלטפורמות, המאפשרת הרצת שירותים של המכשירים השונים, כגון GPS, Camera, File וכו', בעזרת קוד JavaScript סטנדרטי.

במילים פשוטות, Apache Cordova מאפשרת לנו להריץ אפליקצייתWeb סטנדרטית, מבוססת HTML/CSS/JS, על מספר גדול של פלטפורמות מובייל כגון Windows Phone, Windows 8, Android, iPhone, BlackBerry ועוד.

באתר של Apache Cordova בקטגורית Platform Support ישנה טבלה עדכנית המתארת מערכות הפעלה נתמכות, והשירותים הנתמכים בכל מערכת.

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

אז איך או איפה מתחילים?

המקום הכי טוב להתחיל בו זה אתר הבית של Apache Cordova בכתובת http://cordova.apache.org. האתר מציע דוקומנטציה, Wiki, אפשרות להוריד גרסה עדכנית, ועוד.

image

מומלץ להוריד גרסה עדכנית ישירות מהלינק הבא: http://archive.apache.org/dist/cordova.

מאמר זה מבוסס על גרסה: cordova-3.2.0-src.zip.

הורדתי גרסה אחרונה, מה עכשיו?

פרויקט מסוג זה הינו פרויקט לוקאלי מאחר ואנו דואגים להתקנת סביבת הפיתוח המתאימה, במקרה שלנו, Visual Studio 2013. במקרה של פיתוח עבור Android, צריך להתקין ADT Bundle שכולל Eclipse, Android SDK, Emulator. כדי לפתח על iOS, צריך מערכת הפעלה iOS, Xcode, IOS SDK.

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

כדי ליצור פרויקט לוקאלי עבור Windows Phone 8, יש להצטייד תחילה במערכת הפעלה Windows 8, ובגרסת Visual Studio 2013 או Visual Studio 2013 + Windows Phone 8 SDK. ניתן להוריד גרסאת Express בחינם מהאתר של מיקרוסופט בכתובת http://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx.

פרויקט Apache Cordova Windows Phone 8 לוקאלי

כדי שנוכל ליצור פרויקט לוקאלי עבור Windows Phone 8 בעזרת Visual Studio 2013, יש ליצור Project Template בעזרת קובץ batch שמגיע עם החבילה.

1. פריסת קובץ cordova-3.2.0-src.zip, שהורדנו קודם לכן.

2. בתוך התיקייה תמצאו קובץ בשם cordova-wp8.zip, יש לפרוס גם אותו.

3. בתוך תיקיית cordova-wp8 יש להפעיל את הקובץ createTemplates.bat.

4. יש להעתיק את הקובץ שנוצר, בשם: CordovaWP8_3_2_0.zip אל תיקיית Project Templates של Visual Studio 2013.

· אני שיניתי את שם ה- Template ע"י עריכת קובץ MyTemplate.vstemplate, והעתקתי לאחר מכן את הקובץ CordovaWP8_3_2_0.zip לתיקייה (יש ליצור אם לא קיימת):

%UserProfile%\Documents\Visual Studio 2013\Templates\ProjectTemplates\Visual C#\Windows Phone

5. בהנחה שהעתקתם את הקובץ למקום שציינתי מעלה, ולא שיניתם את שם התבנית, יש לפתוח את Visual Studio 2013 וליצור פרויקט חדש מסוג:Visual C# -> Windows Phone -> CordovaWP8_3_2_0.

image

imageimageimageהשם שנתתי לפרויקט במאמר זה הוא: WhereMI_WP8.

לאחר לחיצה על כפתור OK, Visual Studio ייצור פרויקט Windows Phone 8 חדש, מבוסס C#. בתוכו קבצים ותיקיות של Cordova שמהווים מעטפת, סביבת אינטגרציה, ומקום לכתוב את אפליקציית ה- web שלנו.

לחיצה מהירה על F5 תזניק את האמולטור של Windows Phone 8 ובתוכו תרוץ אפליקציית Apache Cordova בסיסית שכבר מתקשרת עם המכשיר כדי לדעת שהוא מוכן (device is ready).

כדי להתקין ולהריץ את האפליקציה על Windows Phone 8 Device ולא על האמולטור שמגיע עם Visual Studio, יש צורך ליצור חשבון מפתח ב- Windows Phone Dev Center בכתובת http://developer.windowsphone.com/en-us. חשבון זה אינו חינמי, ומקנה אפשרות לפתוח את המכשיר לפיתוח, בכך ניתן יהיה להתקין עליו אפליקציות ישירות דרך Visual Studio. וכמו כן זכות להעלות אפליקציות ל- Windows Store ו- Windows Phone Store.

תיקיית www

רוב העבודה, או יותר נכון, הקוד של האפליקציה שלנו ייכתב בשלמותו בעזרת HTML/CSS/JS, והכל תחת התיקייה www. כחלק מהתבנית הבסיסית נוכל למצוא שם את התיקיות css, img, js, קובץ index.html וקבצים נוספים. אם אתם מפתחי web מבנה התיקיות והקבצים אינו זר לכם פרט לתכולתן.

נתחיל בקובץ index.html, קובץ זה מייצג את דף ה- HTML הראשון שירוץ מיד לאחר הצגת ה- Splash Screen. אם נציץ בתוכו, נראה מבנה HTML5 סטנדרטי לחלוטין, עם קישור ל- css/index.css, js/index.js ומספר אלמנטי HTML. כשהדף נטען לראשונה הוא מפעיל את app.initialize() שמוגדר בתוך הקובץ js/index.js.

הקובץ js/index.js מכיל JSON בסיסי, שמייצג את אובייקט האפליקציה. בתוכו נמצא את פונקציית האתחול, initialize (זו שמופעלת מתוך index.html), ורישום לאירוע deviceready. כפי שניתן לראות, כשהאירוע מופעל משנים את ה- style של האלמנט deviceready (מוגדר כ- div בתוך index.html).

הקובץ css/index.css מכיל מספר styles בסיסיים לאפליקציית Cordova. את חלקם נרצה לשנות, כמו צבע הרקע הגרדיינטי המתקבל ב- body.

וכמובן הקובץ החשוב cordova.js, מייצג API's ואובייקטי Cordova בסיסיים לתפעול ה- device בעזרת JavaScript. לדוגמה, את האירוע 'deviceready' הפעילה ספריית Cordova ע"י קריאה ל- document.dispatchEvent(evt);.

לאחר שסקרנו את המבנה הבסיסי של אפליקציית Cordova, נעבור לחלק הבא במאמר שעוסק בפיתוח אפליקציית web בעזרת Cordova.

פיתוח בעזרת Apache Cordova

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

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

כדי להשיג את המיקום הגיאוגרפי שלנו, נפנה לשירותים של Cordova: geolocation.getCurrentPosition ו- geolocation.watchPosition.

ניתן לקרוא על שירותים אלו ועל שירותים נוספים, באתר הבית של Apache Cordova בכתובת: http://cordova.apache.org/docs/en/3.2.0 (שימו לב למספר הגרסה, 3.2.0 בשורת, הכתובת).

כדי להציג את מיקומנו על המפה, נשתמש ברכיב מפה Bing Maps AJAX Control, Version 7.0, עליו ניתן לקרוא באתר בכתובת: http://msdn.microsoft.com/en-us/library/gg427610.aspx. כמובן שאפשר להשתמש ברכיבי מפה שונים, מבוססי JS, כגון Google Maps JavaScript API v3.

תשתיות

מאחר ומדובר בפיתוח אפליקציית web, ניתן להיעזר בספריות ותשתיות JavaScript, ויש המון כאלה! קחו לדוגמה את תשתית AngularJS של גוגל, או את Durandal שעוטפת בצורה מרשימה מספר תשתיות שימושיות כגון Knockout, Require.JS, jQuery.

למען הפשטות, במאמר זה אעשה שימוש בתשתית jQuery כדי שיהיה יותר קל לבצע פעולות DOM, ובתשתית jQuery Mobile ליצירת ממשק משתמש מותאם לאפליקציית מובייל.

החלק היפה

נתחיל עם ממשק המשתמש. את ה- UI נבנה בעזרת HTML/CSS ובעזרת jQuery Mobile. ניתן להתרשם מהתשתית ולקרוא על פיתוח בעזרת jQM בכתובת http://jquerymobile.com.

להלן קטע קוד שכתבתי בתוך index.html שנעזר בתשתית jQM (את האפליקציה המלאה המכילה Styles נוספים, ניתן להוריד דרך הקישור בסוף המאמר).

<html>

<head>

    ...

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />


    <title>Where am I?</title>

</head>

<body>

    <!-- page -->

    <div data-role="page" id="mapPage">

        <!-- header -->

        <div class="header" data-role="header" data-position="fixed">

            <h1>Where am I?</h1>

            <a class="ui-btn-right" href="#contactsPanel">share</a>

        </div>


        <!-- content -->

        <div data-role="content">

            <div class="map" id='map'></div>

        </div>


        <!-- footer -->

        <div class="footer">

            <label class="footer-content" id="lablePosition">current position</label>

        </div>

    </div>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
   1:

   2:     <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js">

</script>

    ...


</body>

</html>

אם נריץ את קטע הקוד הזה מתוך האמולטור (לחיצה על F5), נראה את התצוגה הבאה מיד אחרי מסך הפתיחה:

image

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

Cordova Plugins

Cordova Plugin הינו חבילת קוד, מותאם למכשיר ספציפי, שמאפשר ל- Cordova WebView לתקשר עם המכשיר. מטרת ה- Plugin לספק לפקד ה- WebView גישה לפונקציונליות של המכשיר שאותה נפעיל בעזרת קוד JavaScript. החל מגרסה 3.0, כל ה-API's הבסיסיים של Cordova שמדברים עם המכשיר הפכו להיות Plugins. כמו כן ניתן לחפש בגוגל ולמצוא אוסף נכבד של Plugins שנכתבו ע"י אנשים מהקהילה.

החל מגרסה 3.0, כל ה- Plugins הרשמיים נרשמים בתוך Cordova's Plugin Registry, בכתובת http://plugins.cordova.io. כדי להתקין Pluginבאפליקציה שלנו, נשתמש בתוסף שנקרא Plugman, כפי שנראה בהמשך.

ניתן לקרוא אודות Plugman בכתובת:

http://cordova.apache.org/docs/en/3.2.0/plugin_ref_plugman.md.html#Using%20Plugman%20to%20Manage%20Plugins.

ניתן לקרוא אודות יצירת Cordova Plugins בכתובת:

http://cordova.apache.org/docs/en/3.2.0/guide_hybrid_plugins_index.md.html#Plugin%20Development%20Guide.

התקנת Cordova Plugins

בפרויקט הסטנדרטי שיצרנו בעזרת Visual Studio Template, לא מותקנים Plugins, ויש להתקין אותם בנפרד.

כדי לעשות זאת, יש לבצע את השלבים הבאים:

1. יש להוריד ולהתקין את NodeJS מהכתובת http://nodejs.org.

2. לאחר התקנה, יש להפעיל את ה- Command Line שמגיע עם NodeJS. ניתן למצוא אותו בתפריט Apps.

3. בתוך החלון שנפתח, יש להתקין את Cordova בעזרת הפקודה: npm install -g cordova

4. לאחר מכן, יש להתקין את plugman בעזרת הפקודה: npm install plugman

5. לבסוף ניתן להתקין את ה- plugin הרלוונטי מתוך ה- Plugin Registry, במקרה שלנו geolocation בעזרת הפקודה הבאה: plugman install –platform wp8 –project <wp8-cproj-folder> –plugin org.apache.cordova.geolocation

חשוב: יש להחליף את <wp8-cproj-folder> במיקום המדויק בו נמצא פרויקט ה- WP8 שלכם, שמכיל את קובץ הפרויקט בעל סיומת csproj.

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

1. התווספה תיקייה חדשה בשם Plugins לפרויקט שלכם, ותחתיה תיקיה org.apache.cordova.geolocation עם קובץ Geolocation.cs. זהו בעצם קובץ C# שמממש את ה- Cordova Plugin עבור geolocation אל מול Windows Phone 8 SDK.

2. תחת www התווסף קובץ בשם cordova_plugins.js, שמתאר את כל ה- plugins שאמורים להטען ושאפשר להתחיל לעבוד איתם.

3. במקרה של Windows Phone, התווספה הרשאה לקובץ WMAppManifest.xml, מסוג ID_CAP_LOCATION שמאפשרת גישה להתקן ה- Location של מכשיר ה- Windows Phone.

באותו אופן נוסיף להמשך גם את org.apache.cordova.contacts. בהמשך נתקין Plugin נוסף שאינו רשמי בכתובת https://github.com/katzer/cordova-plugin-email-composer.git, שכן תחילה יש להתקין git.

כעת, כשהכול מוכן, אפשר לתשאל את שירותי המיקום, ואת זה נעשה עפ"י התיאור בקישור הבא:

http://msdn.microsoft.com/en-us/library/gg427624.aspx.

להלן השינויים שהכנסתי לקובץ index.js.

receivedEvent: function (id) {

     var options = {maximumAge: 3000, timeout: 5000, enableHighAccuracy: true};

     navigator.geolocation.watchPosition(

         function (position) {

                 // Here we will update the map.

  },

         function (error) {

                 console.log('Failed to watch geo-position: ' + error.message);

  },

         options

     );

}

שימו לב: הפרמטר הבא: enableHighAccuracy: true חיוני כדי לקבל עדכוני מיקום בעזרת האמולטור של Windows Phone.

Bing מפות

כדי לראות את מיקומנו על גבי מפה, נוסיף את פקד המפות של Bing עפ"י התיאור בקישור הבא:

https://developers.google.com/maps/documentation/javascript/tutorial.

להלן השינויים שהכנסתי לקובץ index.js.

receivedEvent: function (id) {


    // Create BING map.

    var map = new Microsoft.Maps.Map($('#map').get(0),

    {

        credentials: "Your Bing Maps Key",

        center: new Microsoft.Maps.Location(32.028, 34.75),

        mapTypeId: Microsoft.Maps.MapTypeId.road,

        zoom: 15

    });


    // Store map instance in app object.

    app.map = map;


    // Start watching for location changes.

    var options = {maximumAge: 3000, timeout: 5000, enableHighAccuracy: true};

    navigator.geolocation.watchPosition(

        function (position) {

            var map = app.map;

         // Center BING map to current position.

            map.setView({ center: new Microsoft.Maps.Location(position.coords.latitude, position.coords.longitude) });

         // Save current location in app instance for later use.

            app.coords = position.coords;

        },

        function (error) { /*Do something useful*/ },

        options);

}

אם נריץ את האפליקציה בעזרת האמולטור, נראה את פקד המפה, ונוכל לבחור את מיקומנו בעזרת כלי האמולטור:

imageimage

האמולטור של Windows Phone 8 מגיע מצויד עם סימולטור של מיקום. כדי להציג אותו, יש ללחוץ באמולטור על כפתור ">>" ואז לעבור ל- Location. בכתובת הבאה תוכלו למצוא הסבר קצר על אופן השימוש בשירות Location של האמולטור: http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh202933(v=vs.105).aspx.

אנשי קשר

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

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

index.html

<div data-role="page" id="mapPage">


        <div id="contactsPanel" data-role="panel" data-position="left" data-display="overlay" data-dismissible="true">

            <ul id="ulContacts" data-role="listview" data-inset="true" data-filter="true" data-autodividers="true"></ul>

        </div>

index.js

loadContacts: function () {

    // find all contacts.

    var contactOptions = new ContactFindOptions();

    contactOptions.filter = "";

    contactOptions.multiple = true;

    var filter = ["displayName", "emails"];

    navigator.contacts.find(

        filter,

        function (contacts) {

            var ulContacts = $('#ulContacts');


            // display the address information for all contacts.

            $.each(contacts, function(i1, contact) {

                $.each(contact.emails, function(i2, email) {

                    if (email != undefined) {

                        app.appendContact(contact, email);

                    }

                });

            });


            ulContacts.listview('refresh');

        },

        function (contactError) { /*Do something useful*/ },

        contactOptions);

},

appendContact: function(contact, email) {

    ulContacts.append(

    $('<li>')

        .data('email', email.value)

        .append(contact.displayName)

        .click(function () {

            var email = $(this).data('email');

            app.shareLocation(email);

            $("#contactsPanel").panel("close");

        })

    );

}


shareLocation: function(email) {

    // will share location with specified email later.

}

כדי לראות אנשי קשר, יש תחילה להגדיר מספר אנשי קשר בתוך האמולטור. ניתן להוסיף לדוגמה את ה- Microsoft Account או את חשבון ה- Gmail שלכם ולייבא אנשי קשר משם.

אם נריץ את האפליקציה בעזרת האמולטור ונלחץ על כפתור share, תופיע התצוגה הבאה:

imageimage

Plugin לא רשמי

ישנה אפשרות להתקין Cordova Plugin לא רשמי ממאגר git כלשהו, כל עוד וה- Plugin מממש מספר הגדרות סטנדרטיות.

כדי להתקין Plugin כזה, לדוגמה, https://github.com/katzer/cordova-plugin-email-composer.git, שמספק יכולת לשלוח דואר אלקטרוני דרך Cordova, יש לבצע את השלבים הבאים:

1. להתקין את git, מהכתובת http://git-scm.com/downloads.

2. לאחר מכן, יש להגדיר את התיקייה בה הותקן git.exe (בד"כ <user>\ AppData\Local\GitHub\PortableGit_<some-guid>\bin) ב- Path Environment Variable, כדי ש- Plugman ימצא את git.exe.

3. לבסוף ניתן להתקין את ה- Plugin בעזרת הפקודה הבאה: plugman install –platform wp8 –project <wp8-cproj-folder> –plugin https://github.com/katzer/cordova-plugin-email-composer.git.

אם הצלחתם לבצע את שלושת השלבים, אתם אמורים לראות שהתווסף ה- Plugin הרלוונטי לתיקיית ה- Plugins של הפרויקט, בתוכה קוד C# שמממש את ה- Plugin אל מול ה- API הרלוונטי של Windows Phone. בנוסך, קובץ config.xml עודכן והתווסף ה- Plugin .js files לתיקייה המתאימה www\plugins\ de.appplant.cordova.plugin.email-composer.

כעת נעדכן את index.js עם קטע קוד קצר ששולח מייל לנמען הרלוונטי עם מיקומנו.

shareLocation: function(email) {

    window.plugin.email.open({

        to: [email],

        subject: "Here's my geo-location",

        body: "lat: " + app.coords.latitude + "\nlng: " + app.coords.longitude,

        isHtml: false

    });

}

האפליקציה המלאה מניבה את התוצאה הבאה:

imageimageimageimage

Debugging של אפליקציית Cordova

לצערנו, עדיין לא קיים פתרון שלם לבעיית ה- Debugging של אפליקציית Cordova, בשל הקושי לבצע סנכרון של ה- Debugger אל מול קוד JS שרץ בד"כ בתוך Web Browser, שרץ על גבי המכשיר או בתוך האמולטור. עם זאת המצב אינו אבוד, הוא אמנם קצת יותר מסורבל, אבל יש פתרונות.

בדיקה בתוך דפדפן Desktop

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

את הדפדפן המתאים בוחרים עפ"י סוג הפלטפורמה, לפי הטבלה הבאה:

Mobile Platform Mobile Browser Engine Compatible Desktop Browsers
Android WebKit Apple Safari, Google Chrome
iOS WebKit Apple Safari, Google Chrome
Windows Phone Internet Explorer Internet Explorer

image

כלי דיבאגינג נוספים

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

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

§ תוסף Ripple Emulator עבור דפדפן Chrome. https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc.

§ פרויקט PhoneGap Desktop, שמדמה ספריית PhoneGap. https://github.com/jxp/phonegap-desktop.

Ripple Emulator

כדי לנוכל לעבוד עם Ripple Emulator, יש להתקינו תחילה. לאחר מכן יש צורך להריץ את הפרויקט בעזרת IIS Express כי אחרת זה לא יעבוד.

טריק קטן שאני משתמש בו זה הרצת תכולת תיקיית www בעזרת IIS Express בצורה הבאה:

1. יש לפתוח cmd של Windows.

2. לעבור לתיקיית IIS Express שנמצאת תחת Program Files.

3. יש להפעיל את הפקודה: iisexpress.exe /path:your-cordova-www-folder-path.

כעת, כל מה שנותר זה להפעיל את Chrome עם הכתובת הלוקאלית של האתר שמורץ ע"יIIS Express ולהפעיל את Ripple Emulator.

imageimage

לאחר שהפעלתם את האמולטור בהצלחה, ניתן להזניק אירועים, כמו deviceready מפאנל "Events", כמו כן ניתן לבחור מיקום גיאוגרפי, לבחור פלטפורמה ומכשיר, לשחק עם ה- Accelerometer, Networking, ועוד. והכי חשוב ניתן להפעיל כלי Debugging של Chrome ולהתחיל לדבג.

image

ביצועים

בד"כ, אפליקציות web יותר איטיות מאפליקציות native מאחר ו- JavaScript היא שפה שלא מתקמפלת וה- browser צריך לעבוד קשה במונחי CPU כדי להריץ את השפה בצורה יעילה יחסית. כשמדובר במכשירים ניידים בפרט, כוח העיבוד שלהם חלש ביחס למחשבים שולחניים, ולכן אפליקציות Cordova מבוססות HTML/JS הן בעלות ביצועים פחותים בצורה משמעותית מאפליקציות native שמורצות על המכשיר ושנכתבו בעזרת כלים שמותאמים היטב לסביבה.

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

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

שירות PhoneGap Build

imageדי בתחילת המאמר, ציינתי שתי תצורות לבניית אפליקציית Cordova: לוקאלי ושרת Build חיצוני.

חברת Adobe מציעה שירות ענן, שנותן דרך פשוטה מאוד להעלות אפליקציית Cordova/PhoneGap, ובצורה אינטראקטיבית לקבל בחזרה קבצי Deployment שמתאימים לפלטפורמות שונות.

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

להלן הכתובת של השירות: https://build.phonegap.com.

בנית אפליקציה בעזרת PhoneGap Build

ניתן בקלות לקחת את האפליקציה שבנינו במאמר זה, להעלות אותה לשירות PhoneGap Build וליצור ממנה אפליקציה שתרוץ על פלטפורמות נוספות כגון Android, iOS.

כדי לעשות זאת, יש תחילה להירשם לשירות בחינם, לכווץ את ספריית ה- www של הפרויקט שבנינו בקובץ Zip פשוט, ולהעלות אותו.

אם כבר יצרתם פרויקט לוקאלי, במקרה שלנו עבור Windows Phone, יש לכווץ את תיקיית הפרויקט, ללא קבצי build/output, ולהעלות את הקובץ.

imageimage

לאחר שהעליתם את הקובץ, הוספתם תיאור קצר, ולחצתם ready to build, שירות PhoneGap Build יבנה עבורכם קובץ Deployment עבור מספר פלטפורמות במקביל, תוכלו להוריד את האפליקציה ולהתקין אותה על מכשירכם.

image

סיכום

פיתוח אפליקציות מובייל אינה משימה פשוטה מאחר וקיימות מספר פלטפורמות מובייל, ואין אחידות ביניהן. כל פלטפורמה מגיעה עם קונספט שונה, כלי פיתוח, סביבת פיתוח ושפת פיתוח שונים. כדי לגשר על הפער ולחסוך זמן יקר בפיתוח מיותר לכל פלטפורמה בנפרד, ניתן להיעזר בתשתית Apache Cordova או ב- PhoneGap שמאפשרות פיתוח אפליקציות Web למובייל, מבוססות HTML/CSS/JS, פעם אחת, למספר גדול של פלטפורמות.

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

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

ניתן להוריד את האפליקציה המלאה שהודגמה במאמר זה מכתובת SkyDrive הבאה:

http://sdrv.ms/1iD1iN7

 

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

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

כתיבת תגובה

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

5 תגובות

  1. שני שילב15 בדצמבר 2013 ב 20:46

    תומר אתה תותח…..

    הגב
  2. שלום זיכרי15 בדצמבר 2013 ב 20:47

    כל הכבוד מאמר מעולה……

    הגב
  3. דולפין15 בדצמבר 2013 ב 20:48

    יא כריש!!!

    הגב
  4. bios20109 בינואר 2014 ב 2:12

    איפה ניתן לראות סרטון של ההרצאה שעשית בנושא?

    הגב
    1. Eran Sharvit
      Eran Sharvit14 בינואר 2014 ב 11:35

      שי רייטן מסלע העביר הרצאה בנושא שצילמנו:
      http://blogs.microsoft.co.il/msdn/2013/12/16/unified-mobile-app-development-using-phonegap/

      הגב