מדריך זה ילמד אותך כיצד ליצור אפליקציה היברידית באמצעות פלטפורמה פופולרית לבניית אפליקציות PhoneGap. מה שאנחנו הולכים לעשות הוא להפוך את האתר שלך לקובץ .apk (אפליקציית Android) הניתן להתקנה וניתן להתקנה בכל טלפון אנדרואיד. עם הפעלת האפליקציה היא פשוט תפתח את אתר האינטרנט שלך בדפדפן ה- WebView המקורי של אנדרואיד, אך היא תופיע כאפליקציה במסך מלא - ללא סרגל ניווט של כתובות אתרים או כל רמז אחר שהאתר שלך פשוט מוצג בדפדפן.
דרישות
אתר משלך (לצורך ביצוע מדריך זה, תוכל לפתוח בלוג וורדפרס בחינם)
חשבון GitHub
חשבון PhoneGap
פנקס רשימות ++ (או תוכנת עריכת טקסט דומה שיכולה לזהות קוד)
תוכנת עריכת תמונות ליצירת אייקוני אפליקציות (Photoshop, GIMP וכו ')
תבניות קידוד
אלה תבניות קוד שתוכלו להשתמש בהן לצורך המדריך הזה - הן מהאפליקציה שלי שפותחה עם PhoneGap, אך ביטלתי את המידע האישי שלי. הגדרת אלה מאפס עם כל הפרמטרים הנכונים לקחה לי ימים רבים של פתרון בעיות, ולכן אני מספק אותם לנוחיותך. בבקשה!
> Config.XML
> אינדקס. HTML
מתחילים
צור תיקיה על שולחן העבודה שלך וקרא לה ' www: ' ללא הצעות המחיר. זו תהיה הספריה הראשית של הפרויקט, שם בונה PhoneGap יצפה למצוא את כל הקבצים עבור הפרויקט שלך. עכשיו ניצור אייקון לאפליקציה שלך.
פתח את תוכנת עריכת התמונות שלך וצור תמונה חדשה בפורמט PNG. הגדרות התמונה שלך צריכות להיראות כך:
ועכשיו תוכלו לצייר את הסמל שלכם, למשל אני פשוט אעשה כפתור קטן:
גודל התמונה תלוי במסך הטלפון האישי שלכם, אך אם בכוונתכם לפתח אפליקציה למספר מכשירים, כמובן שתכינו מספר גדלים של אותו אייקון. הנה טבלה של גדלי התמונה המשמשים:
36 × 36 (120dpi / LDPI)
48 × 48 (160dpi / MDPI)
72 × 72 (240 dpi / HDPI)
96 × 96 (320dpi / XHDPI)
144 × 144 (480dpi / XXHDPI)
192 × 192 (640dpi / XXXHDPI)
אני לא רוצה להשקיע יותר מדי זמן בדיבורים על גדלי מסך ו- DPI, רק דעי ש- DPI די מתואם לרזולוציית המסך. טלפון המשתמש ברזולוציית מסך של 1080 × 1920 ישתמש ב -480 דפי, אך זה לא בהכרח לתאם בדיוק את גודל המסך. לטלפון יכול להיות מסך 5.2 אינץ 'או מסך 6 'ובעל רזולוציית 1080 × 1920. אבל המדריך הזה לא עוסק במסכי סמארטפונים, אז בואו נמשיך.
לאחר שתצייר את הסמל שלך, שמור אותו כ icon.png והעביר אותו לתיקיית www: שלך. זה יהפוך ל בְּרִירַת מֶחדָל סמל לאפליקציה שלך. אם ברצונך ליצור אייקונים בגדלים שונים שיתאימו לרזולוציית המסך של המשתמש, היית שומר את הסמל בגדלים ובשמות שונים, למשל Icon144.png, Icon192.png, Icon96.png וכן הלאה. ואז היית עורך את Config.xml קובץ כדי להצביע על כל סמל בודד. בוא נמשיך הלאה.
אז עכשיו שיש לך אייקון לאפליקציה שלך, אתה צריך תמונת סנסציה. זהו בעצם מסך טעינה, כמו טפט שמוצג לפני טעינת האפליקציה. גדלי תמונות Splash עובדים על אותו עיקרון כמו אייקונים, אך הם מעט גדולים יותר. הנה הטבלה:
- LDPI:
- דְיוֹקָן: 200x320px
- נוֹף: 320x200px
- MDPI:
- דְיוֹקָן: 320x480 פיקסלים
- נוֹף: 480x320px
- HDPI:
- דְיוֹקָן: 480x800px
- נוֹף: 800x480 פיקסלים
- XHDPI:
- דְיוֹקָן: 720px1280px
- נוֹף: 1280x720px
- XXHDPI:
- דְיוֹקָן: 960 פיקסלים 1600 פיקסלים
- נוֹף: 1600x960px
- XXXHDPI:
- דְיוֹקָן: 1280 פיקסלים 1920 פיקסלים
- נוֹף: 1920x1280px
אז צור את תמונת הפתיחה שלך ברזולוציה למכשיר שלך, שמור אותה כ Splash.png ואז העבר אותו לתיקיית הפרויקט שלך. נהדר, עכשיו יש לך את הסמל של האפליקציה שלך ואת התמונה המתיזה, בוא נעבור להגדרת קבצי התצורה וההוספה לאינדקס.
הסבר על Index.HTML ו- Config.XML
הקובץ config.xml הוא שמגדיר את סביבת הבנייה (אנדרואיד, אייפון, Windows Phone), את הסמל ואת מיקומי הסנסציה ואת התוספים של Apache Cordova שאתה רוצה להשתמש באפליקציה שלך.
פתח את התבנית שסיפקתי ב- Notepad ++ ותראה שורות אלה למעלה:
עדכן את השדות האלה במידע שלך, אך השאר את שדות 'העדפה' לבד. שאר קובץ התצורה מסביר את עצמו אם רק מסתכלים על הערכים. שם העדפה = 'מסך מלא' למשל אומר לאפליקציה להפעיל את עצמה כאפליקציה עם מסך מלא. השאר הכל בשקט, למעט הערך האחרון בתחתית הקובץ:
שנה אותו לכתובת האתר שלך בפועל. זה יאפשר למשתמש האפליקציה לנווט לחלוטין באתר שלך, ורק באתר שלך - הם לא יכולים לעזוב את האתר שלך בזמן השימוש באפליקציה שלך. כמובן שלאפליקציה לא יהיה סרגל ניווט של כתובות אתרים, זה אפילו לא באמת דאגה, אלא גם מוודא שהמשתמש יכול לגשת לכל הדפים באתר שלך. ה- * אחרי כתובת האתר הוא תו כללי , שמשמעותו בז'רגון קידוד היא שתקבל כל דבר שיוזן במקום הסימן *.
כמובן שאם ברצונך להגביל את המשתמש לדפים מסוימים באתרך בלבד, היית מוסיף ערכים נפרדים כמו זה:
בוא נעבור ל אינדקס.html הקובץ, זה הלחם והחמאה שגורמים ליישום לעבוד בפועל. פתח אותו בתוך Notepad ++ והעבר את שפת המסמך ל- HTML. מה ש index.html בעצם עושה הוא לומר לדפדפן אנדרואיד כיצד להציג את אתר האינטרנט שלך - בתבנית שסיפקתי יש תגים להסרת סרגל הניווט של כתובת האתר מהדפדפן, לאפשר לכפתור 'חזרה' של הטלפון לצאת מהאפליקציה ולהפעיל האפליקציה לאחר שמוצג מסך הפתיחה. השורה שתרצה לשנות נמצאת כאן:
var url = ‘http://yourwebsite.com’
בניית האפליקציה ב- PhoneGap Build
אז היכנס לחשבון GitHub שלך ונווט אל הדף הראשי של המאגר שלך. תחת שם המאגר, לחץ על 'העלה קבצים' וגרור את תיקיית הפרויקט שלך למסך עץ הקבצים. כעת הקלד הודעת התחייבות בתחתית, כמו “ ניסיון האפליקציה הראשון שלי ” . לבסוף לחץ על התחל שינויים.
עכשיו לך אל בניית PhoneGap עמוד והיכנס. כעת לחץ על כפתור 'יישום חדש' בדף הבנייה. פעולה זו תבקש ממך להזין את הנתיב למאגר ה- GitHub שלך, אז עשה זאת, ואז לחץ על 'משיכה ממאגר .git'.
כעת חזור לדף הבנייה הראשי, לחץ על 'עדכן קוד' ועל 'משוך אחרון'.
לבסוף, לחץ על 'בנה'. זה ירכיב את האפליקציה שלך לקובץ .apk ואז יציג בפניך את האפשרות להוריד את .apk. כעת אתה יכול להוריד את קובץ ה- apk הזה למחשב שלך ולהעביר אותו לטלפון שלך, ואז להתקין אותו משם. לחלופין, אתה יכול להשתמש בטלפון שלך כדי לסרוק את קוד ה- QR על מסך המחשב שלך כדי להתקין באופן אוטומטי את קובץ ה- .apk במכשיר ה- Android שלך.
זהו זה! עכשיו, כדי להסביר לך כמה דברים חשובים:
- זה היה מדריך מאוד פשוט שהנחה אותך בבניית האפליקציות ההיברידיות הבסיסיות ביותר. אנשים בדרך כלל לא מסתובבים בעטיפת אתרי האינטרנט שלהם בדפדפן מקורי ומעבירים אותו כאפליקציית Android בחנות Google Play. אבל עכשיו, כשתדעו לעשות זאת, תוכלו להתחיל לקרוא את התיעוד של PhoneGap כיצד להתאים אישית את האפליקציה שלכם ולהוסיף לה הרבה טעם, כך שתוכלו בתקווה ליצור אפליקציה שימושית בפועל.
- שנית, גוגל פליי אוסרת שיטה כזו לבניית אפליקציות ליצירת אפליקציות לתכנית קישורים למטרת ההכנסות הבלעדית. כך שלא תוכלו ליצור אפליקציה בשם 'הרוויחו כסף היום!' שפותח אתר מלא לחלוטין במודעות ומגדיר הכנסות ממודעות. ייאסר עליך מחנות Google Play.
