במדריך זה נלמד כיצד בונים אפליקציה פשוטה לאייפון, באמצעות טרסוס.
המדריך משתמש בגרסה ישנה של טרסוס - כאן ניתן למצוא גרסה חדשה יותר (באנגלית)
טרסוס הינה פלטפורמה לפיתוח של אפליקציות באמצעות תכנות ויזואלי – בניה של אפליקציות ע"י שרטוט תרשימים במקום כתיבת קוד.
היתרונות של שימוש בטרסוס לפיתוח באייפון הם בעיקר פיתוח קל ומהיר, עקומת למידה נוחה (אין צורך ללמוד Objective C ...) ואחידות בפיתוח לפלטפורמות שונות (כיום web ואייפון, ובעתיד גם אנדרואיד, פאלם, בלקברי, סימביאן).
טרסוס מתאימה במיוחד ליישומים עסקיים, ונכון להיום אינה מתאימה ליישומים עתירי גרפיקה.
האפליקציה שנבנה, שתיקרא "Rentals", מאפשרת למישהו שמחפש דירה לאסוף פרטים ותמונות של הדירות שראה – כך שיוכל אח"כ להשוות את האופציות השונות טרם ההחלטה לשכור.
האפליקציה משתמשת במצלמה. כדי לנסות אותה במלואה יש צורך במכשיר אייפון, במחשב מק, ובמנוי ב iPhone Developer Program של אפל. בהעדר אייפון (או אפילו מק), אפשר לנסות את האפליקציה ע"י סימולציה בכלים של טרסוס.
הכנות
-
יש להוריד (ללא תשלום) את סביבת הפיתוח של טרסוס ,בגרסה 1.3.38 לפחות:
- בסביבת מק, ניתן להוריד את הגרסה היציבה האחרונה ישירות מכאן
- בסביבת חלונות, ניתן להוריד את הגרסה מכאן (או גרסת 64 ביט)
- בסביבת לינוקס, יש להוריד את הגרסה הרשמית כפי שמוסבר בדף זה, ואח"כ לבצע עדכון כלהלן:
- בחר מהתפריט Help -> Software Update
- עבור ללשונית Available Software
- נקה את הסימון Include items that have already been installed בתחתית העמוד
- לחץ על Add Site .. והוסף את אתר העדכונים האחרונים של טרסוס - http://updates.tersus.com/latest.
- עבור ללשונית Installed Software, ולחץ על Update.. כדי להתחיל את תהליך העדכון (המשך בהתאם להוראות על המסך).
-
לבעלי מק, רצוי להוריד את ה iPhone SDK של אפל ולהרשם לתוכנית המפתחים של אפל (אולם הרישום לוקח ימים עד שבועות ועולה $99). ה-SDK ישמש לקומפילציה סופית של האפליקציה ולהעברתה למכשיר.
-
למשתמשי Windows, מומלץ להתקין את ספארי (הדפדפן של אפל), אולם זה לא חיוני. ניתן לעבוד גם עם Firefox או Internet Explorer (גרסא 8).
שלבי הפיתוח
במאמר המשך למאמר זה נראה כיצד לבנות שרות web שמנהל את פרטי הדירות, כך שאפשר יהיה לגשת אליהם גם מהמחשב בבית (או ממכשירים ניידים נוספים).
שלב 1 - יצירת האפליקציה ומסך הזנת פרטי דירה
-
הפעל את טרסוס ( בWindows - Tersus Visual Programming Platform; במק - Tersus). אם זו הפעם הראשונה בה הפעלת את הכלי, יש לסגור את מסך הכניסה ע"י לחיצה על x בלשונית Welcome.
-
בחר מהתפריט File->New->Tersus Project
-
בחר שם לאפליקציה – Rentals
-
בחר את הtemplate Native iPhone Application
-
לחץ על "Finish”. ייווצר פרוייקט חדש, וייפתח התרשים הראשי של האפליקציה, שמראה מסך בודד – iPhone View. מימין לתרשים נמצאת ה-Palette, שמכילה את אבני הבניין בהן נתשמש בהמשך לצורך בניית האפליקציה. משמאל לתרשים נמצא ה Repository, בו כל נמצאים כל רכיבי האפליקציה.
-
התמקד ב iPhone View ע"י לחיצה כפולה.
-
הוסף כותרת עליונה ע"י לחיצה ימנית ובחירת Header.
-
האפליקציה עדיין אינה מכילה הרבה, אך ניתן כבר לראותה. שמור את האפליקציה ולחץ על המשולש הירוק בסרגל הכלים שמעל לתרשים. האפליקציה תופעל בתוך הדפדפן, במסך שמדמה את האייפון.
-
כפי שאנו רואים, הכותרת העליונה("Header" בתרשים) מכילה כותרת גנרית "Title" וכפתור גנרי "Header Button". אם נתמקד ב "Header" (שוב - לחיצה כפולה), נוכל לראות את הייצוג שלהם בתרשים, ולשנותם (בחירה של אלמנט בתרשים ולחיצה F2 תפתח מסך שמאפשר לשנות את שמו). שנה את Title ל Rentals ואת Header Button ל New.
- שמור את השינויים וחזור לדפדפן. האפליקציה תיטען מחדש ויוצגו השמות החדשים.
- אם נלחץ כעת על הכפתור "New", דבר לא יקרה (התרשים של הכפתור ריק - עדיין לא הגדרנו התנהגות). הוסף מסך פנימי "Dialog" לכפתור, באופן הבא:
- התמקד בכפתור "New"
- לחץ על הכותרת "iPhone" ב-Palette, לקבלת רשימת רכיבים יחודיים ל iPhone.
- לחץ על "Dialog"
- לחץ בתוך "New" כדי להוסיף את ה-Dialog. שנה את שם האלמנט שנוצר ל-
Apartment Dialog
- שמור את השינויים וחזור לדפדפן. לאחר שהאפליקציה תיטען מחדש, לחץ על "New". המסך יתחלף למסך חדש ובו, כרגע, כותרת "Title" וכפתורים "Cancel" ו "OK". הכפתור "Cancel" מוכן מראש, ופשוט סוגר את ה-Dialog. הכפתור OK לא עושה כלום בשלב זה.
- שנה את שם הכותרת מ Title ל Apartment Details
- כעת נוסיף רשימת שדות לדירה:
- הוסף את ל Body של ה Dialog רשימת שדות (לחיצה ימנית -> Add Element -> List) . קרא לרשימה Apartment Details
- בחר את הרשימה והוסף לה שדה קלט טקסטואלי (לחיצה ימנית -> Add Element -> Text Field). שנה את שם השדה ל Description ואת ה Label שבתוכו ל Description:
- הוסף שדה נוסף (Price) עבור המחיר. הפעם, בחר בשדה מספרי (Number Field). שנה את ה Label ל Price:
- שמור את השינויים וחזור לדפדפן. בלחיצה על New נראה את שדות הקלט:
- הוספת תמונות והפעלת המצלמה:
- הוסף כפתור ל-Body (מה-Palette בחר Display / Button ) וקרא לו Add Picture
הוסף תמונה ל-Body (מה-Palette, בחר Display / Image ) וקרא לה Picture
כדי לאפשר הצגה של מספר תמונות, הפוך את התמונה ל Repetitive: בחר אותה, לחץ על כפתור ימני, ובחר Repetitive. יופיע חיווי של ריבוי לתמונה.
כעת נבנה את תהליך הוספת התמונה:
- התמקד בכפתור Add Picture
- הוסף את אבן הבניין Take Picture (מה-Palette, בחר iPhone/Take Picture )
- הוסף Action (מה-Palette, בחר Basic/Action ) וקרא לו Create Image Display.
- הוסף לAction החדש Trigger (כניסה לקלט ) ו Exit (יציאת פלט )
- הוסיף חץ (Flow) מהיציאה (<Data URL> ) של Take Picture ל Trigger החדש.
- את התמונה שניצור נרצה להכניס לתוך ה Body של ה Dialog. כדי "לשתול" את התמונה במסך, הוסף לכפתור reference ל Body (בחר את הכפתור, לחץ על כפתור ימני -> Add Ancestor Refences -> Body), והוסף חץ מהיציאה של Create Image Display אל האלמנט Pictures ב Body.
- כדי לבנות את אלמנט התצוגה מתוך המידע שמגיע מ Take Picture, יש להוסיף את "Picture" כ Data Element (משתנה מקומי) בתוך Create Image Display, ולאכלס את ה <Path> בנתונים (<Path> מכיל וֹURL של תמונה, ובמקרה שלנו DATA URL שמגיע מהמצלמה):
- סמן את האלמנט Picture בBody, לחץ על הכפתור הימני של העכבר, ובחר Copy.
- סמן את Create Image Display, לחץ על הכפתור הימני ובחר Paste (Reuse).
- חבר בחיצים את הכניסה אל ה <Path> של התמונה ואת התמונה עצמה אל היציאה.
- אם נבדוק כעת את האפליקציה באמצעות הסימולטור, לא נוכל להפעיל מצלמה אמיתית, אולם הסימולטור יציע לנו להשמתש בתמונה לדוגמא, לצורך בדיקה:
- אם נבחר OK התמונה לדוגמא תופיע במסך (תזכורת - משתמשי Internet Explorer צריכים גרסה 8):
להורדת עותק של הפרוייקט בסוף שלב זה, לחץ כאן
עבור לשלב 2 - העברת האפליקציה למכשיר האייפון