מבנה פרויקט ב-PhoneGap
no מספרי טלפון לא הופכים ללחיצים, ולכן הטלפון לא מחייג אוטומטית.user-scalable=no מונע זום בצביטה, כך שהדף נראה כמו אפליקציה ולא כמו אתר. initial-scale, maximum-scale ו-minimum-scale קובעים את רמות ההגדלה.cordova.js ולקובץ ה-JavaScript של האפליקציה. תגית script חייבת לכלול תגית פתיחה וסגירה, ולא להיות ריקה.input type="button" עם onclick שקורא לפונקציה ב-JavaScript.alert שמציג הודעה. ההודעה נראית לפי סגנון מערכת ההפעלה של הטלפון..min.js זהה בתוכנו לקובץ הרגיל, אבל קצר יותר בלי רווחים ותגובות. בפיתוח עדיף הרגיל, כי הוא קריא יותר.div עם data-role="page" שלושה חלקים: data-role="header", data-role="content" ובו הכפתור, ו-data-role="footer".פרקי ההרצאה: מבנה פרויקט ב-PhoneGap
תמלול ההרצאה: מבנה פרויקט ב-PhoneGap
הטקסט המלא של הדקות הראשונות בהרצאה «מבנה פרויקט ב-PhoneGap» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אז אחרי שראינו מהן הדרישות המוקדמות שצריכות להיות לנו במחשב בכדי לעבוד בפונגאפ, ואחרי שהתקנו את כל מה שצריך וסידרנו את כל מה שצריך, בואו נצלול פנימה ונראה מהו מבנה בסיסי של פרויקט בפונגאפ.
אז פתחתי פה פרויקט חדש, ואני מסתכל פה בסלושן אקספלורר, ואני רואה שיש לי פה את התיקייה המרכזית של הפרויקט www. זאת התיקייה המרכזית שאנחנו הולכים לעבוד איתה.
יש לנו פה תיקייה שנקראת CSS שמיועדת להחזיק את קבצי ה-CSS שלנו. יש לנו תיקייה שנקראת IMG שמיועדת להחזיק תמונות שאנחנו עובדים איתן.
יש לנו תיקייה שנקראת JS שמיועדת להחזיק את פונקציות ה-JavaScript שאנחנו אמורים לעבוד איתן. יש לנו קובץ שנקרא cordova.js. זה הקובץ, שהוא כתוב כמובן ב-JavaScript, שמחזיק את הפונקציות של פונגאפ.
פונגאפ זה בעצם מספר רב של פונקציות שאנחנו יכולים בג'אווה סקריפט לקרוא להן והן מתקשרות עם הטלפון הנייד ואמרות לו מה אנחנו רוצים לעשות לדוגמה להפעיל את המצלמה לצלם עם המצלמה להקליט סרטון וידאו לבדוק את המיקום של הטלפון כל מה שאנחנו רוצים לעבוד ולבצע עם הטלפון הנייד אנחנו עושים דרך פונקציות שנמצאות כאן אז הקובץ הזה הוא מאוד חשוב זה
הקובץ הבסיסי של פונגאפ והוא כמובן חייב להיות חלק מהפרויקט שלנו כן אנחנו רואים שיש לנו את קובץ האינדקס נקודה html שכבר ראינו אותו כאשר אתם לוחצים עליו דאבל קליק כמובן מופיע לכם הדיזיינר שאין לנו כל כך מה לעשות איתו לכן אנחנו יכולים פשוט לבוא לוויז'ל סטודיו לטולס אופשנס לגשת ל html דיזיינר פה בצד שמאל ולבטל את
הדיזיינר עצמו בואו נבצע אוקיי בואו נסגור את זה נלחץ עליו שוב ואנחנו רואים שאוטומטית בדאבל קליק הוא פותח לנו את הקוד של הקובץ אלה הקבצים המרכזיים שאנחנו הולכים לעבוד איתם עכשיו מה יש לנו בתוך קובץ האינדקס נקודה html זה קובץ html פשוט ובואו נראה שורה שורה מה אנחנו צריכים ומה אנחנו לא צריכים יש לנו
פה את הרישיון עבודה עם phone gap שווה פעם אחת לקרוא אותו לראות מה מותר מה אסור לבצע בואו ניפטר ממנו כרגע שיהיה לנו פחות קוד יש לנו תגית html תגית head תגית body ובואו נעבור ונראה אילו תגיות אנחנו הולכים לעבוד איתם דבר ראשון יש לנו פה תגית שנקראת מטא שזה קיצור של מטא דאטה כלומר נתונים על נתונים וזה בעצם הוראות עבור הדפדפן שמריץ לנו את הדף
יש לנו פה שלוש תגיות כאלה. אז בואו נסתכל מה הן אומרות. דבר ראשון יש לנו פה את התגית הראשונה שמציינת שאנחנו עובדים ב-utf-8.
utf-8 זה בעצם יוניקוד זה אומר שאנחנו יכולים להציג גם עברית ולכתוב גם עברית בסורס קוד הזה. התגית הבאה שאנחנו רואים זה תגית שהניים שלה זה format detection, גם כן תגית מטא, יש לה attribute name שווה format detection, contact שווה טלפון שווה no.
התגית הזאת מציינת שאנחנו לא רוצים שמספרי טלפון יהיו לחיצים כך שאוטומטית הטלפון יבצע חיוג עבורן כמו שמתבצע באתרי אינטרנט לדוגמה. אז ברגע שאנחנו מגדירים את זה כ-no, הם פשוט לא יהיו לחיצים והמשתמש לא יראה סתם מספר טלפון ויצליח ללחוץ עליו בשביל לחייג.
תגית מטא נוספת, תגית מאוד חשובה שמדברת על הממדים של היוזר אינטרפייס שלנו. בואו נסתכל מה היא אומרת. התגית נקראת viewport, תגית מטא שנקראת viewport ויש לה קונטנט שאומר קודם כל האם היוזר יכול לבצע סקיילינג כלומר פינצ'ינג על הטלפון ולעשות זומים זום אאוט כמו שהוא יכול לעשות באתרי אינטרנט.
אנחנו לא רוצים בעצם לבנות אפליקציה שנראית כמו אתר אינטרנט, אנחנו רוצים לבנות אפליקציה שנראית ומתנהגת כמו אפליקציית מובייל, ולכן אנחנו לא רוצים שיהיה לו אפשרות לבצע סקיילאבל.
אז יש לנו פה את ה-NOW. לאחר מכן, INITIAL SCALE, כמה על ההתחלה הוא רואה מבחינת היחסים של האפליקציה שאנחנו בונים. אחד, זה אומר, הוא רואה בדיוק את הממדים הראשוניים שאנחנו פיתחנו.
מקסימום SCALE, כמה זום אין הוא יכול לבצע. הערכים האלה שאנחנו רואים פה, ה-initial scale, המקסימום סקייל והמינימום סקייל, הם יכולים להינתן בין 0 ל-10, כאשר 0 עד 1 אומר ערך קטן, 1 עד 10 אומר אפשרות גדולה יותר, ואם אנחנו מגדירים 1 זה בעצם ה-default, וזה אומר שאנחנו לא מעוניינים כרגע שיהיה לנו פה במקרה הזה מקסימום סקייל, ובמקרה הזה מינימום סקייל.
זאת אומרת, אנחנו לא רוצים שהמשתמש יבצע לא זום אין ולא זום אאוט. מקסימום זה הזום אין שהוא יכול לבצע, המינימום זה הזום אאוט שהוא יכול לבצע.
וויד מציין לנו מה הרוחב של האפליקציה. דיווייס וויד מציין שאנחנו רוצים שהוויד יהיה בדיוק רוחב המכשיר. הייט מציין מה אנחנו רוצים שיהיה הגובה של היוזר אינטרפייס.
דיווייס הייט מציין שאנחנו רוצים שזה יתפוס בדיוק את גובה המכשיר. טארקט דנסיטי dpi מציין איזה רזולוציה אנחנו רוצים להשתמש, הגובה של הדוט פר אינץ' שאנחנו רוצים להשתמש ו-Device DPI אומר לנו שהאפליקציה שלנו הולכת להשתמש בדיוק בעוצמת הרזולוציה הקיימת בטלפון.
לאחר מכן אנחנו רואים את הלינק לקובץ ה-CSS שלנו, כאן בעצם מופיע העיצוב של האפליקציה. לאחר מכן אנחנו רואים את הטייטל, אבל אין לנו פה שום טייטל באפליקציה של מובייל ולכן אנחנו יכולים להיפרד מזה.
אנחנו יכולים גם להשאיר בכדי שלא יהיה לנו איזושהי הערה. אתם רואים כאן שיש לנו איזושהי הערה שאומר לנו שאין לנו טייטל, אבל זה רק בגלל שוויז'ל סטודיו מבקשת מאיתנו טייטל, אנחנו לא חייבים באמת את הטייטל הזה.
כאן למטה אנחנו רואים את קובץ הקישור לקורדובה. בואו נעלה אותו פה למעלה, שיהיה הכל במקום אחד. נשים אותו פה.
כאן יש לנו קישור לקובץ ה-JavaScript שלנו, בואו ניקח אותו וגם אותו נעלה פה למעלה. עושים אותם בדיוק ככה כאן יש לנו קובץ או יותר נכון סקריפט עבור פעילות שלנו שאנחנו יכולים לעשות אנחנו גם כן יכולים את זה לשים פה אם אנחנו רוצים פעילות שקשורה לדף הזה ולא בתוך קובץ javascript חיצוני בדרך כלל לא נהוג לעשות את זה בדרך כלל כל הפעילויות של javascript שלנו אמורות לשבת באיזשהו קובץ
javascript חיצוני עם הפניה אליו אנחנו כרגע נוציא את הזה מפה וכאן למטה אנחנו רואים את הממשק משתמש שיש לנו. זאת אומרת אנחנו כבר כאן יכולים ללכת ולכתוב כרגע input type שווה button נניח value שווה test phone gap onclick ולקרוא לאיזושהי פונקציה test phone gap שאנחנו כבר הולכים לבנות ויש לנו כרגע לחצן פשוט שזה
מה שהוא מתאר. עכשיו אם אנחנו מריצים את האפליקציה אנחנו אמורים לראות רק איזשהו לחצן אחד בלי שום user interface נוסף בואו נפגור כל אלה ופשוט ctrl f5 נריץ את האמולטור ואנחנו רואים שהאמולטור רץ ומראה לנו פה לחצן עכשיו שימו לב שבפעם הראשונה שאתם מריצים את האמולטור
לוקח לו די הרבה זמן לעלות ופשוט תנו לו את הזמן שלו תנו לו את הזמן שהוא צריך בשביל לעלות אלא אם כן הוא נותן לכם הודעת שגיאה כמו שראינו בסרטון הקודם ואז ראינו גם איך לטפל בה אבל אחרי שהוא עולה פעם אחת אתם לא צריכים יותר לכבות אותו עם ה-X הזה.
אם אתם מכבים אותו זה אומר שפעם הבאה עוד פעם ייקח לו הרבה הרבה זמן לעבוד. כל מה שצריך לעשות זה לבדוק את האפליקציה שלכם וכאשר אתם רוצים לשנות פשוט לחזור לוויז'ואל סטודיו, לשנות משהו באפליקציה, לדוגמה בואו נרשום פה שלושה סימני קריאה ופשוט קונטרול F5 בכדי להריץ עוד פעם את
האפליקציה. ואנחנו יכולים לראות שזה מופיע לנו פה, טסט פונג-אפ בצורה כזאת. אז לא לסגור את האמולטור, פשוט לחזור כל פעם מוויז'ואל סטודיו ולהריץ, והאמולטור תמיד תופס את הגרסה האחרונה שאנחנו בודקים.
עכשיו, איך אנחנו כותבים את הקוד של הפונקציה? בואו נחזור לוויז'ואל סטודיו סלושן אקספלורר, ונסתכל על קובץ ה-JavaScript הדיפולטי שקיים לנו פה.
כרגע ניפטר מכל מה שכתוב בו, ופשוט נכתוב את הפונקציה שלנו function ואני אחזור בחזרה ואני ארצה העתקה שלה. קראתי לה test phone gap ואני פשוט אציג הודעת אלרט כזאת.
בואו נריץ ctrl f5 שוב פעם עולה האמולטור נלחץ על הלרצן ונראה את ההודעה שמופיעה בהתאם לטלפון windows phone אם היינו בודקים את זה עבור טלפון נניח אייפון אז אז הראינו את ההודעה הזאת בכחול שתמיד מופיעה באייפון.
אם היינו בודקים אותו בטלפון אחר, כן, כל טלפון היה מציג לנו את ההודעה בשיטה שלו. כך, איך שאתם רואים כרגע, Windows Phone מציגה הודעות, כל מיני מסג'בוקס או אלרטים, ולכן זה מה שאנחנו רואים כאן.
כל טלפון יציג את זה כמובן בשיטה שלו. אז אנחנו רואים את ההודעה, Hello PhoneGap, פונקציה אוקיי, וחזרנו חזרה. אז כעת מה שעשינו זה פיתחנו בקבצים הנכונים מבחינת פרויקט פונגאפ.
אבל אם אנחנו מסתכלים על ממשק המשתמש, אנחנו רואים שהוא די נראה כמו איזה אתא אינטרנט עם לחצן מאוד פשוט. אנחנו לא רואים פה בעצם יוזר אינטרפייס מרשים של אפליקציית מובייל.
כאן נכנס לעזרה כל הנושא של jQuery Mobile. jQuery Mobile משתמש בספריית jQuery וכמובן jQuery Mobile זאת ספרייה בפני עצמה שהופכת לנו את ממשק המשתמש לכזה שנראה טוב על מובייל כאילו שזאת אפליקציית מובייל.
אז בואו נשלב עכשיו בפרויקט הזה בדיוק את הקבצים הדרושים. מה שאנחנו צריכים לעשות קודם כל זה להיכנס ולהוריד את הקבצים הדרושים עבור jQuery Mobile.
אז אנחנו צריכים להיכנס ל- jQueryMobile.com אוקיי, הגענו לאתר של jQuery Mobile, בואו נלך פה לאיזושהי גרסה Latest Stable, גרסה יציבה של jQuery Mobile, אנחנו רואים שהגרסה שלה זה 1.4.2 נכון ליום זה, ובואו נעשה איזשהו סייב.
וכובד סיפ, נשמור אותו בדסטופ, jQuery Mobile 1.4.2 סייב. בואו נחזור לדסטופ, נעשה לו Extract All, אז בואו נסתכל על אילו קבצים אנחנו צריכים בכדי להשתמש ב-JQuery מובייל.
סך הכל אנחנו צריכים שלושה קבצים. אנחנו צריכים את קובץ ה-CSS, אנחנו צריכים את קובץ JQuery, ואנחנו צריכים את קובץ JQuery מובייל. קובץ ה-CSS, הכוונה לקובץ ה-CSS של JQuery מובייל.
כאן אנחנו רואים את הקובץ של JQuery מובייל, CSS. כאן אנחנו רואים את הקובץ של JQuery מובייל, JavaScript. ואנחנו לא רואים פה את הקובץ של jQuery המקורי של ספריית jQuery.
את זה אנחנו צריכים להיכנס ולחפש אותו כאן איפשהו לדוגמה בדמוס. אפשר לראות אותו בתיקיית jth שאמורה להיות כאן, הנה הוא פה, ואנחנו יכולים פשוט להוריד אותו מהאתר של jQuery.
אז בואו נחזור בחזרה ונבין עוד דבר אחד לגבי