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

אני מאמין שהבעיה העיקרית שמתכנת אייפון מתחיל נתקל בה היא חוסר ההכרה של סביבת העבודה. רוב האנשים נרתעים מתכנות לאייפון מכיוון שיש צורך במערכת הפעלה OS X (ולשם כך מחשב Macintosh) כדי לתכנת לאייפון. ייתכן והם צודקים (מי אני שאשפוט) אבל הנקודה העיקרית היא שרק כדי להגיע לתחילת הדרך יש לא מעט עבודה וסביבות חדשות שיש להכיר.

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

הכלים הראשונים אותם צריך להכיר הם שפת וסביבת הפיתוח.

שפת הפיתוח, Objective C, נראית מעט משונה למראית עין, אך לאחר מספר שעות עבודה נראית יותר נוחה וידידותית (אולי אחרי שבועיים...). לא ניכנס כאן יותר מדי לדקויות השפה מכיוון שאני מאמין ששפת פיתוח לומדים עם העבודה ואת התיאוריה... עדיף לחקור לאחר מכן. 

הפיתוח נעשה על גבי סביבת פיתוח הנקראת XCode (אפשר להקביל אותו ל - Visual Studio או Eclipse, תלוי מאיזה עולם מגיעים). מה שנחמד ב - XCode זה שניתן להורידו בחינם מאתר ההורדות של Apple (או לקבלו בחינם עם רכישת מערכת הפעלה Snow Leopard).

האנטומיה של אפליקציית אייפון מורכבת מהאלמנטים הבאים:

1. הקוד שנכתב ע"י התוכניתן, קוד שמקומפל ומורץ בשילוב של Frameworks שונים. 
2. קבצי NIB שבהסבר על רגל אחת, ניתן ליצור בהם אלמנטים של UI ויחסים בין האובייקטים ל - UI. (למי שמכיר את תבנית ה - MVC, קבצי ה - NIB מייצגים את ה - V. כלומר, את ה - View).

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

שלב ראשון - יצירת אפיליקציה חדשה לאייפון

ראשית, נתקין את גרסת ה - XCode ו - iPhone SDK העדכני ביותר. את XCode נוריד מהאתר הזה. את iPhone SDK נוריד מהאתר הזה.

נפעיל את XCode דרך ה - Finder או דרך Spotlight. נפתח פרוייקט חדש ב - XCode ע"י בחירה ב - File -> New Project... 

מהתפריט השמאלי נבחר באפשרות iPhone OS -> Application. 

מהתפריט בצד הימני נבחר ב - Window-Based Application. 

נלחץ על הכפתור Choose...

בחלון החדש שיפתח ניתן שם לאפליקציה החדשה שלנו ונקרא לה - FirstIphoneApp. וזהו, בזה סיימנו את החלק הראשון של התהליך. האפליקציה שלנו כרגע לא מכילה יותר מדי אבל עדיין ניתן להפעיל אותה. אם נלחץ על כפתור ה - Build And Go, תבוצע קומפילציה של הקוד שלנו וברגע שהתהליך יסיים את הריצה יפתח אוטומטית ה - iPhone Simulator ויראה לנו... מסך ריק / לבן.

הערה - סימולטור ה- iPhone הוא אפליקציה עצמאית, ממנה אפשר לצאת באמצעות Command+Q כמו מכל אפליקציית Mac אחרת.

שלב שני - יצירת UI לאפליקציה

בשלב זה נערוך את קובץ ה - NIB של הפרוייקט (שנוצר אוטומטית ביצירת אפליקצית אייפון חדשה) בעזרת כלי הפיתוח - Interface Buider . בסוף השלב הקודם, כאשר הפעלנו את האפליקציה שלנו ראינו מסך ריק ב - iPhone Simulator. המסך הריק הזה היה המסך העיקרי באפליקציה שלנו שאותו מסמל הקובץ -  MainWindow.xib. התוצאות של Interface Builder נשמרות בקובץ ה - Nib (שהוא קיצור ל - NeXT Interface Builder) או בצורתו העדכנית, קובץ xib.  קובץ זה מכיל את ה - UI של האפליקציה שלנו. באפליקציות יותר מורכבות יכולים להיות מספר קבצים מסוג זה אך כרגע נסתפק בו. על מנת לשנות אותו וליצור בו עוד אובייקטים נלחץ עליו Double Click. אוטומטית תפתח תוכנת ה - Interface Builder. כלי זה מאפשר לנו להוסיף אובייקטים של UI לאפליקציה שלנו שישבו בקובץ MainWindow.xib.

בצד ימין נראה את תפריט ה - Library שמכיל את האובייקטים השונים שאנחנו יכולים להשתמש בהם (מי שלא רואה אותו שיבחר ב - Tools -> Library).

בדוגמה זו, נשתמש באובייקט בשם Slider ונציג על המסך את השינויים המתרחשים בו ע"י הזזתו לימין / שמאל. יש לבחור ב - Cocoa Touch Plugin -> Inputs & Values ואז יש לבחור ב - Slider.

 

יש לגרור Slider לחלון ה - UI שנקרא Windows (אם לא ניתן לראות אותו יש לבחור ב - Window -> MainWindow.xib ובו יש ללחוץ Double Click על Window מהתפריט התחתון).

נלחץ על ה - Slider שגררנו למסך ומהתפריט נבחר ב - Tools -> Attribute Inspector. בחלון האפשרויות, נשנה את ערך ה - Initial של ה - Slider ל - 0.

בנוסף, יש לגרור Label למקום הרצוי בחלון ה - UI. אחרי שנמקם אותו נלחץ עליו Double Click ונשנה את התוכן שלו ל - "Slider Value:".

ולבסוף, נגרור עוד Label למקום הרצוי בחלון ה - UI. אחרי שנמקם אותו, נלחץ עליו Double Click ונשנה את התוכן שלו ל - "0".

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

בחלון ה - Library, נבחר Cocoa Touch Plugins -> Controllers. נגרור אובייקט בשם Object למסך ה - MainWindow.xib. בעודו מסומן, נבחר מהתפריט Tools -> Identity Inspector.

את השדה Class נמלא בערך - "Controller".

את השדה Name נמלא בערך "Controller".

ב - Class Actions, נלחץ על "+". נמלא במקום "myAction:", את הערך - "sliderChanged:".

ב - Class Outlet, יש להוסיף שני Outlets שלראשון נקרא - slider והוא יהיה מסוג UISlider.

לשני נקרא - label והוא יהיה מסוג UILabel.

כעת, נבצע את החיבור בין ה - Controller ל - UI. בזמן שה - Controller מסומן בחלון MainWindow.xib יש לבחור מהתפריט Tools -> Connections Inspector. בחלק של ה - Outlets יש לבצע את הפעולות הבאות:

מהעיגול שבשורה שבה כתוב slider (שימו לב שבמעבר העכבר העיגול הופך ל - "+") יש למתוח קו ל - Slider הממוקם ב - Window UI.

מהעיגול שבשורה שבה כתוב label יש למתוח קו ל - Label שבה מילאתם את הערך "0" (שימו לב לא להתבלבל עם ה - Label השני).

בחלק של ה - Received Actions יש לבצע את הפעולות הבאות:

מהעיגול שבשורה שבה כתוב sliderChanged: יש למתוח קו לכיוון ה - Slider הממוקם ב - Window UI. בחלון שנפתח יש לבחור ב - "Value Changed".

יש לדאוג ששמרנו את השינויים שבצענו עד עכשיו ורק אחריהם לבצע את הפעולות הבאות. בזמן שה - Controller מסומן בחלון MainWindow.xib יש לבחור מהתפריט - File -> Write Class Files...

בחלון החדש שנפתח, יש ללחוץ Save.

בחלון שנפתח יש לסמן את ה - Checkbox שליד שם האפליקציה שלנו וללחוץ Add.

זהו, כעת האפליקציה שלנו מוכנה לקוד האמיתי.

שלב שלישי - כתיבת הקוד המחבר בין ה - UI ל - Business Logic

את שלב זה נבצע דרך XCode. שימו לב שב - XCode נוצרו בשבילנו שני קבצים חדשים: Controller.h שמכיל את ההגדרות של ה - Class ו - Controller.m שמכיל את המימוש של ה - Class. ראשית, בקובץ Controller.h נסמן שהמחלקה Controller יורשת מ - NSObject ע"י החלפת ההערה "/* Specify a superclass (eg: NSObject or NSView) */" ב - NSObject. המחלקה NSObject הינה מחלקה ראשית שממנה ה - Controller שבנינו יורש את הפונקציות והאיברים הדרושים לפעולות הבסיסיות של האפליקציה.

נעבור לקובץ המימוש, Controller.m.

בקובץ זה עלינו רק לממש את הפונקציה "sliderChanged" ע"י הוספת שורת הקוד הבאה לתוך הפונקציה:

label.text = [NSString stringWithFormat:@"%.1f", slider.value];

מה שפקודה זו מבצעת, זה לכניס לערך ה - text של ה - label את הערך של ה - slider שעל המסך בפורמט הטקסט הרצוי שנקבע ע"י stringWithFormat.

נשמור את השינויים בקבצים.

שלב רביעי - קומפיצליה ובדיקות

כעת, כשסיימנו את תהליך הפיתוח, אנחנו נלחץ על כפתור ה - Build and Go ובמידה ואין שגיאות במהלך בניית האפליקציה יפתח iPhone Simulator ונוכל לראות את האפליקציה בפעולה.

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

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

להתראות עד המאמר הבא.

אודות הכותב: צחי וידס בן 26, מתכנת במקצועו. מתכנת אייפון בזמנו הפנוי.

Comments

[יוחאי]

סחטיין עליכם ועל ההשקעה... כל הכבוד, תמשיכו כך.
לכל מי שמעוניין ללמוד לפתח מבלי לשלם אלפי שקלים לחברות שסתם מעבירות את התוכן של אחרים אני ממליץ גם על http://www.edumobile.org/215.html
הם פשוט תותחים, שווה לנסות לכל מי ששוקל לפתח לאיייפון ורוצה להרגיש איך זה מבלי לקנות מק ולעשות קורס בעשרת אלפים שקל...

[לירן]

תודה על המאמר המושקע!
האם אחרי שקימפלתי והרצתי יש דרך בה אני יכול להעלות את האפליקציה לאייפון כדי לבדוק אותה עליה ולא על הסימולטור לפני שאני שולח אותה לאישור באפל?

[גיא שביב]

ודאי, אתה צריך להיות מפתח רשום (עולה 99$) ואז יש לעשות provisioning לאייפון שלך, יש מדריך באתר של אפל כאן. אם אתה לא מסתדר אם זה תגיד לנו, נכתוב מדריך מסודר בעברית בשביל זה. מעבר לזה הייתי אומר שחובה לבדוק על המכשיר ולא רק בסימולטור לפני שאתה מעלה לחנות. יש הרבה באגים שרק יתגלו על המכשיר ולא על הסימולטור.

[ירון]

תודה על ההשקעה, כל הכבוד!
כמפתח אייפון מתחיל, מצאתי כי תהליך ה-provisioning מסורבל משהו.
מצטרף לבקשה למדריך כחול לבן מסודר בעברית.
תודה!

[אריק]

מצטרף לבקשה למדריך מסודר יותר.

[דניאל]

כל הכבוד, אני שמח לראות שיש משקיענים שכותבים מדריכים בעברית לתכנות למק ,
גורם להרבה דברים להראות יותר ברורים (לפעמים באנגלית זה יותר מבלבל)

תודה רבה והמשיכו ככה.

[זיו]

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

[lev]

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

ואז בהמשך אחרי שאני בוחר אובייקט חסר לי בכלל חוץ מהשם חסר לי הקטע של ה
ב - Class Actions, נלחץ על "+". נמלא במקום "myAction:", את הערך - "sliderChanged:".
ב - Class Outlet, יש להוסיף שני Outlets שלראשון נקרא - slider והוא יהיה מסוג UISlider.
לשני נקרא - label והוא יהיה מסוג UILabel.
אין לי את האופציות האלו בכלל באובייקט ואז כשניסיתי לעשות קשרים כלום לא יצא
איפה הבעייה שלי
ושאלה נוספת האם מוכרת הבעייה ומה אפשר לעשות כידי לפתור אותה
Code Sign error: The identity ‘iPhone Developer: x Xxxxx’ doesn’t match any identity in any profile

תודה רבה מראש
אריה

[lev]

שלום
ציטוט

מהעיגול שבשורה שבה כתוב slider (שימו לב שבמעבר העכבר העיגול הופך ל - "+") יש למתוח קו ל - Slider הממוקם ב - Window UI.

מהעיגול שבשורה שבה כתוב label יש למתוח קו ל - Label שבה מילאתם את הערך "0" (שימו לב לא להתבלבל עם ה - Label השני).
סוף ציטוט

משום מה זה מאפשר לי רק לעשות קישורים מוצלבים כלומר סליידר ללייבל ומלייבל לסלידר אחרת הוא לא מאפשר לי למה זה כך?

[lev]

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

[dekel]

שלום,
מסיבה כלשהי בפקודה האחרונה אני מקבל את ההודעה -
"request for member "text" in something not a structure or union"

זה קורה כשאני מכניס את הפקודה-
<label.text = [NSSstring stringwithformat:@"%.1f",slider.value];>

[elihayc]

אריה, אתה עובד על 2.xcode 3.
המשתנים האלה עברו לחלונית Library.
בחלונית LIBRARY תבחר CLASSES, ברשימה תבחר את השם של הcontrol שלך. (בדוגמא קראו לזה Controller)
ואז תופיע לך למטה תיבת בחירה עם האפשרויות class actions ו class Outlet

בהצלחה.

[ziv]

זה לxcode 4?

[ziv]

אפשר להתאים את המדריך לxcode4 בבקשה?