سلسلة دروس برمجة تطبيقات الآيفون

الدرس الأول :

بداية نسأل الله العظيم أن يوفقنا لكل مايحب ويرضى وأن ينفع بهذه السلسلة من الدروس والتي هي عبارة عن مواضيع مترجمة من محاضرات جامعة ستانفورد لبرمجة تطبيقات الآيفون والآيبود تش ويمكن الحصول على هذه المحاضرات من برنامج iTunes .

ولا يشترط في الوقت الحالي أن يكون لديك آيفون أو آيبود تتش لأن هناك محاكٍ لهما في نفس البرنامج الذي سنعمل عليه.

وللاستزادة والتوسع في هذا المجال يمكن زيارة هذين الموقعين:

- iOS Dev Center

http://developer.apple.com/devcenter/ios/index.action


Dev Forum .

https://daw.apple.com/cgi-bin/WebObj...th=/login.jspa


نبدأ بسم الله الرحمن الرحيم في الدرس الأول:

في سلسلة هذه الدروس سنتعلم عن:

- الأدوات المستخدمة: xcode ‪- interface builder

- الهياكل التي تبنى عليها البرامج: Foundation ‪- UIKit

- اللغة المستخدمة: Objective-c‪

سوف ندخل قليلاً في نظام الآيفون وطبقات النظام الموجودة في الجهاز وهي:



كما تشاهدون في الصورة كل طبقة وماتحتوي ونحن سنعمل على الطبقات الأخيرة ولن ندخل إلى أعماق النظام في الوقت الحالي.

سنأخذ الآن نبذة سريعة عن الكائنات Objects قبل بداية الدرس:

كما نشاهد من الاسم Objective-C وهذا يعني أن هذه اللغة معتمدة في أساسها على الكائنات وكما هو الحال مع جميع لغات التي تأخذ مبدأ Object Oriented ، فالكائنات بطبيعة الحال تتكون من ثلاثة أشياء:

‫- اسم الكائن .

‫-المتغيرات state .

- الأساليب behaviors or functions .

فلكل كائن اسم وهذا الكائن يحتوي على متغيرات والتي تقوم بحفظ القيم سواء حرفية أو رقمية وتتغير هذه المتغيرات من خلال الأساليب أو function والتي يمكن من خلالها التحكم بهذه المتغيرات.

بعد هذه المقدمة عن الآيفون وطبقاته والكائنات ومتغيراتها سندخل في أول تطبيق للآيفون.


في البداية عليك تنزيل برنامج xcode من موقع Apple Developer :

http://developer.apple.com/devcenter/ios/index.action

- يكون لديك حساب لدى Apple Developer

- نظام Mac OSX .

بعد ذلك ، نبدأ في الخطوات :




نختار منها create a new xcode project ، و ستخرج لنا نافذة جديدة :



سنختار من قائمة iOS Application الخيار الأخير Window-based Application ، وستظهر لنا نافذه لنقوم بحفظ الملف بعد ذلك ستخرج لنا نافذة أخرى:



وكل مايهمنا من هذه النافذة الآن هو ملف MainWindow.xib ومن هذا الملف نستطيع إنشاء الواجهة الرسومية للبرنامج بعد الضغط مرتين على هذا الملف سيفتح برنامج آخر interface builder :



في القائمة على اليسار library والتي تحتوي على :

- objects كــ input and output objects المدخلات والمخرجات لواجهة البرنامج.

- classes للكائنات المستخدمة “object ” والتي تحتوي على المتغيرات والأساليب ‪”variable and behavior or function‪”

- أيضا هناك نافذة window وهي التي تحتوي على الكائنات لواجهة البرنامج والتي سوف تظهر للمستخدم.

- نافذة Inspector وفيها معلومات عن أي كائن والربط بين التعريفات والكائنات وغيرها.

- نافذة MainWindow.xib وهي الملف الرئيس للواجهة بما يحوي من كل شيء سواء واجهة أو كائنات ولن نستطيع استخدام أي object إلا بعد أن نضعه في هذه النافذة.

إن لم تكن ظاهرة لك هذه القوائم يمكن إظهارها من قائمة الــ Tool‪

الآن نسحب من:

Library ‪-> Object ‪->Slider

ونضعه في نافذة window

وأيضا نسحب اثنين من:

Library ‪-> Object ‪->Label

ونضعهم على الـ window

ويمكن تغيير مقاس كل من هذين الكائنين، وأيضًا بالنقر مرتين على label يمكننا تغيير الكتابة الموجودة كما هو واضح في الصورة :

This image has been resized. Click this bar to view the full image. The original image is sized 1024x720.

بعد ذلك من قائمة Library ->Object نسحب object إلى النافذة MainWindow.xib بعد مانحدد هذا الكائن ننتقل على قائمة Inspector ومن Identity نعمل على تغيير اسم class إلى Controller أو أي اسم آخر تريده.

بعد ذلك ننتقل إلى قائمة Library -> Classes ومن هذه القائمة نحدد الكائن Controller وفي أسفل القائمة من القائمة المنسدلة نختار Action ، و ثم نضيف Action إلى هذا Controller Object ونسميه SliderChange.

ثم من نفس القائمة المنسدلة نختار Outlets ونضيف قيمتين وهما:

- slider والـ type لها UISlider

- label والـ type لها UILabel

كما هو واضح في هذه الصورة :

This image has been resized. Click this bar to view the full image. The original image is sized 1024x720.

بعد ذلك من قائمة Inspector نختار Connections ، ونعمل على ربط Slider بـ Slider الموجودة في نافذة الـ Window من خلال الضغط على الدائرة وتوصيلها إلى Slider .

ونفس العمل يتم على Label ويربط مع الـ 0

This image has been resized. Click this bar to view the full image. The original image is sized 766x520.

آخر ماسنقوم به هو متى ماتغيرت قيمة الـSlider تتغير قيمة الـ Value ، نحدد slider في نافذة الـ window ومن قائمة Inspector نختار Attributes نغير الـ values من 0 إلى 100.

ومن nspector ‪-> connections ‪->events ‪-> value changed

نضغط على الدائرة مع الإمساك بها ونوصلها بالـ Controller Object ثم نضغط enter

This image has been resized. Click this bar to view the full image. The original image is sized 1024x672.

ثم نذهب إلى File‪-> write class files

ونعمل حفظ للملف وأيضًا نضيفه للواجهة من خلال تحديد SliderTest من النافذة الثانية ونضغط على Add

ثم ننتقل إلى الـ xcode ونلاحظ أن هناك ملفين قد أضيفا إلى القائمة وهما :

-Controller‪.h

- Controller‪.m

This image has been resized. Click this bar to view the full image. The original image is sized 890x640.

في ملف Controller.h سطر :

@interface Controller
نضيف إليه NSObject بحيث يكون بهذا الشكل

@interface Controller : NSObject
ومن ملف Controller.m نضيف هذا السطر :

label.text = [NSString stringWithFormat:@"%.1f", slider.value];
بحيث يكون بهذا الشكل :

This image has been resized. Click this bar to view the full image. The original image is sized 880x329.

ثم من قائمة xcode نضغط على build and run وبعد ذلك سيخرج لنا المحاكي :

This image has been resized. Click this bar to view the full image. The original image is sized 1024x669.

وبذلك والحمدلله انتهينا من أول درس في برمجة تطبيقات الآيفون.