אריזת יישומי אינטרנט כיישומים מקוריים להתקנים ניידים (CS5.5)

השילוב של Dreamweaver עם jQuery Mobile ו-PhoneGap עוזר לך ליצור ולארוז יישומי אינטרנט לפריסה בהתקנים המבוססים על Android‎™‎ ו-iOS. Dreamweaver משתמש בערכות SDK של PhoneGap כדי ליצור את החבילות (קובץ ‎.apk עבור Android/קובץ ‎.xcodeproj עבור iPhone/‏iPad)

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

הערה:

היישום הנייד שארזת עם Dreamweaver הוא יישום למטרות ניפוי שגיאות בלבד. היישום יפעל במדמי Android ו-iOS או בהתקן הנייד האישי שלך אם תבצע את ההעברה, אך לא תוכל להעלות את היישומים הניידים לניפוי שגיאות לחנויות של Apple ו-Android.‏ כדי להעלות יישומים של iOS או Android, עליך לבצע את השלב הנוסף של החתימה עליהם מחוץ ל-Dreamweaver. למידע נוסף על העלאת יישומים לחנויות Apple ו- Android, ראה את תיעוד Android או את המדריך למשתמש של התוכנית בפורטל המשאבים של Apple iOS. (לפני שתוכל לגשת לפורטל המשאבים של Apple iOS עליך להירשם לתוכנית המפתחים של Apple [בחינם] ולהירשם לתוכנית המפתחים של iOS [בתשלום שנתי].)

יצירת יישום אינטרנט באמצעות דף ראשוני

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

הדף הראשוני jQuery Mobile ‏(PhoneGap) מכיל את הקובץ phonegap.js בנוסף לקבצים האחרים של jQuery Mobile. הקובץ phonegap.js מכיל את ממשקי ה-API הדרושים לעבודה עם תכונות ניידות מקוריות כגון GPS, מד-תאוצה, מצלמה וכן הלאה.

  1. בחר File >‏ ‏New.

  2. בחר Page From Sample >‏ ‏Mobile Starters >‏ ‏jQuery Mobile (PhoneGap)‎.

  3. לחץ על Create.

  4. בחלונית Insert ‏(Window >‏ ‏Insert), בחר jQuery Mobile. הרכיבים שניתן להוסיף ליישום האינטרנט מוצגים.

  5. בתצוגת Design, הצב את הסמן במיקום שברצונך להוסיף את הרכיב ולחץ על הרכיב בחלונית Insert. בתיבת הדו-שיח שמופיעה, התאם אישית את הרכיבים באמצעות האפשרויות.

    הערה:

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

הצג את הדף בתצוגה מקדימה בתצוגת Live. כמה ממחלקות CSS חלות רק בתצוגת Live.

דרישות המערכת לאריזת יישומים

עליך לוודא שאתה עומד בדרישות המערכת הבאות לפני שתמשיך באריזת יישומים.

MAC OS - ‏iOS

  • Mac OS X Snow Leopard גרסה ‎10.6.x ומעלה

  • Xcode 3.2.x עם iOS SDK (הוראות ההתקנה בהמשך.)

MAC OS - ‏Android

  • Mac OS X 10.5.8 ומעלה (x86 בלבד)

  • Android SDK (הוראות ההתקנה בהמשך.)

Windows - ‏iOS

  • iOS זמין למשתמשים עם מחשב Apple בלבד

Windows - ‏Android

  • Windows XP ‏(32 סיביות), Vista ‏(32 או 64 סיביות) או Windows 7 ‏(32 או 64 סיביות)

  • Android SDK (הוראות ההתקנה בהמשך.)

יצירת חבילת יישומים (Windows)

למידע על יצירת יישומי אינטרנט, כולל קבצים לדוגמה, ראה ערכת לימוד זו בנושא Dreamweaver Developer Center.

  1. פתח את יישום האינטרנט שברצונך להמיר ליישום נייד. ודא שיישום האינטרנט מוגדר בתור אתר ב-Dreamweaver וגודל האתר קטן מ-‎25 MB.

    הערה:

    ודא שהיישום מכיל רק קבצים מסוג HTML5, ‏CSS ו-JavaScript.

  2. בחר Site >‏ ‏Mobile Applications >‏ ‏Configure Application Framework.

  3. לחץ על Easy Install כדי להתקין את Android SDK.

    הערה:

    אם Easy Install נכשל, ראה הערה טכנית 90408.

  4. בחר מיקום להתקנת קובצי ה-SDK ולחץ על Select. לאחר השלמת ההתקנה, לחץ על Save.

  5. בחר Site >‏ ‏Mobile Applications >‏ ‏Application Settings.

  6. עבור Bundle ID, הזן שם עבור החבילה באמצעות המידע בתיבת הדו-שיח.

  7. הזן שם עבור היישום ואת שם האדם שעיצב את היישום.

  8. ניתן לציין את האפשרויות הבאות:

    1. ב-Application Icon PNG, ציין קובץ PNG לשימוש בתור סמל היישום. Dreamweaver משנה את גודל הסמל לגודל הרגיל אם עדיין לא שינית את גודלו.

    2. ציין נתיב יעד עבור החבילה.

    3. כדי להוריד ולהתקין את רכיבי ה-SDK האחרונים מ-Google, לחץ על Manage AVDs. השתמש ב-Android SDK ו-AVD Manager לעדכון Android SDK. לקבלת מידע נוסף על שימוש במנהל, ראה http://developer.android.com/sdk/adding-components.html.

      הערה:

      בעת הלחיצה על Save, הקובץ phonegap.js מועתק לשורש האתר.

  9. בצע אחת מהפעולות הבאות:

    • אם אתה פורס את היישום ישירות בהתקן, בחר Site >‏ ‏Mobile Applications >‏ ‏Build. בחר פלטפורמה/התקן עבור גרסת ה-Build.

    • אם ברצונך לראות את מראה גרסת ה-Build במדמה לפני הבנייה, בחר Site >‏ ‏Mobile Applications >‏ ‏Emulate and Build.

יצירת חבילת יישומים (Mac OS)

לקבלת ערכת לימוד בנושא יצירת יישומי אינטרנט, כולל קבצים לדוגמה, ראה מאמר זה בנושא Dreamweaver Developer Center.

  1. פתח את יישום האינטרנט שברצונך להמיר ליישום נייד. ודא שיישום האינטרנט מוגדר בתור אתר ב-Dreamweaver וגודל האתר קטן מ-‎25 MB.

    הערה:

    ודא שהיישום מכיל רק קבצים מסוג HTML5, ‏CSS ו-JavaScript.

  2. בחר Site >‏ ‏Mobile Applications >‏ ‏Configure Application Framework.

  3. התקן את ה-SDK של iOS או Android בהתבסס על הדרישות שלך:

    • לחץ על הקישור של Apple iOS Dev Center כדי להוריד ולהתקין את xcode ו-iOS SDK. כברירת מחדל, היישום מותקן בספרייה OS <version number>/developer.

      היכנס ל-Dev Center באמצעות Apple ID. הרישום הוא בחינם. צור חשבון אם אינך משתמש רשום.

    הערה:

    באפשרותך להשתמש בחבילת SDK שאתה מוריד מ-Apple Dev Center לבדיקות. עם זאת, כדי להעלות את היישום לחנות של Apple, רשום את עצמך בתור מפתח של Apple לאחר תשלום דמי הרישום הדרושים.  

    • לחץ על Easy Install כדי להתקין את Android SDK.

    הערה:

    אם Easy Install נכשל, ראה הערה טכנית 90408.

  4. לחץ על Save.

  5. בחר Site >‏ ‏Mobile Applications >‏ ‏Application Settings.

  6. ב-Bundle ID, הזן שם עבור החבילה באמצעות המידע בתיבת הדו-שיח.

  7. הזן שם עבור היישום ואת שם האדם שעיצב את היישום.

  8. ניתן לבצע את הפעולות הבאות:

    • (Android) ב-Application Icon PNG, ציין קובץ PNG לשימוש בתור סמל יישום Android.‏ Dreamweaver משנה את גודל הסמל לגודל הרגיל אם עדיין לא שינית את גודלו.

    • (Mac® OS 10.6.x) ב-Startup Screen PNG, ציין קובץ PNG לשימוש בתור סמל יישום iOS.‏ Dreamweaver משנה את גודל הסמל לגודל הרגיל אם עדיין לא שינית את גודלו.

    • (Mac OS 10.6.x) בחר גרסה של iPhone/iPod Touch/iPad שעבורה אתה יוצר את החבילה.

    • הגדר נתיב יעד אחר עבור החבילה.

    הערה:

    בעת הלחיצה על Save, הקובץ phonegap.js מועתק לשורש האתר.

  9. בצע אחת מהפעולות הבאות:

    • אם אתה פורס את היישום ישירות בהתקן, בחר Site >‏ ‏Mobile Applications >‏ ‏Build. בחר פלטפורמה/התקן עבור גרסת ה-Build.

    • אם ברצונך לראות את מראה גרסת ה-Build במדמה לפני הבנייה, בחר Site >‏ ‏Mobile Applications >‏ ‏Emulate and Build.

עבודה זו בוצעה ברישיון של Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  הודעות המתפרסמות ב- Twitter™‎ ו- Facebook אינן מכוסות בתנאי Creative Commons.

הצהרות משפטיות   |   מדיניות פרטיות מקוונת