المحتوى

• هل أحتاج إلى معرفة سويفت؟
• إعداد Apple ID Xcode
• الشروع في العمل: إنشاء مشروع Xcode جديد
• فريق التطوير المطلوب؟
• فهم Apple Xcode IDE
• AppleDelegate: فحص ملف مصدر Swift
• 1. إنشاء نقطة دخول
• 2. تحديد AppDelegate الخاص بك
• 3. تحديد خاصية النافذة
• 4. تطبيقات كعب متنوعة
• اختبار مشروعك: تشغيل iOS Simulator
• إنشاء واجهة مستخدم باستخدام Interface Builder
• الوصول إلى مكتبة كائنات iOS
• تخصيص الكائنات باستخدام Attributes Inspector
• معاينة واجهة المستخدم الخاصة بك
• ربط واجهة المستخدم الخاصة بك إلى شفرة المصدر الخاصة بك
• خلق طريقة العمل
• 1. تشير إلى هذا الأسلوب هو عمل
• 2. أعلن الطريقة
• 3. تحديد بعض المعلمات
• تحقق من الاتصال
• إنشاء مربع حوار تنبيه
• 1. أعلن ثابت
• 2. قم بتعيين محتوى
• 3. تعيين النمط
• 4. إضافة إجراء
• 5. عرض التنبيه
• اختبار تطبيق iOS المكتمل
• تغليف

قد يكون Android أحد أكثر أنظمة التشغيل شيوعًا في العالم ، لكنه بعيد عن نظام التشغيل المحمول الوحيد!

إذا كنت تريد أن يصل تطبيق هاتفك المحمول إلى أوسع جمهور ممكن ، فستحتاج إلى استهداف منصات متعددة. بينما أنت استطاع اختر أداة تطوير مشتركة بين الأنظمة الأساسية مثل Flutter ، كما يمكنك إنشاء قواعد تشفير متعددة تتيح لك تقديم تجربة مستخدم مصممة ومصممة خصيصًا لكل منصة متنقلة.

ربما تريد إصدار أحدث تطبيق للجوال على Android و iOS ، ربما كنت تفكر في القفز إلى Apple ، أو ربما كنت مجرد فضول لمعرفة كيفية تطوير iOS مقارنة بالتطور في Android. مهما كانت دوافعك ، فسأريك في هذا المقال كيفية البدء في تطوير نظام التشغيل iOS من خلال إنشاء تطبيق بسيط لأجهزة iPad و iPhone.

على طول الطريق ، سأقدم مقدمة للمفاهيم الأساسية للغة برمجة Swift من Apple ، وسأرشدك إلى المناطق الرئيسية في بيئة التطوير المتكاملة لـ Xcode ، وأريك كيف يمكنك اختبار مشاريعك في iOS Simulator - فقط في حال كنت لم تلتزم بشراء جهاز iPad أو iPhone حتى الآن!

إليك ما تحتاج إلى معرفته لبدء التطوير لنظام iOS.

هل أحتاج إلى معرفة سويفت؟

عند بدء التطوير لنظام التشغيل iOS ، سيكون لديك عادةً خياران من لغتي البرمجة: Objective-C أو Swift. تم إطلاق Swift في عام 2014 ، وهي اللغة الأكثر حداثة ، بالإضافة إلى أن Apple يبدو أنها تدفع Swift over Objective-C لتطوير iOS ، لذلك سأستخدم Swift طوال هذا البرنامج التعليمي.

إذا كنت أحد لاعبي Swift المحترفين ، فستكون لديك نقطة انطلاق. ومع ذلك ، حتى لو لم تفعل ذلك مطلقًا رأيت سطر واحد من Swift من قبل ، ستظل قادرًا على المتابعة ، وبحلول نهاية هذه المقالة ستكون قد قمت بإنشاء تطبيق يعمل بنظام iOS ، مكتوب بالكامل في Swift.

أثناء إنشاء تطبيق iOS الخاص بنا ، سنشرح المفاهيم الأساسية للغة البرمجة هذه ، وبالتالي ستحصل على نظرة عامة أساسية عن Swift وسوف تفهم بالضبط ما يحدث في كل سطر من التعليمات البرمجية ، حتى لو كنت جديد تمامًا في Swift.

لسوء الحظ ، لم تكن تتقن لغة برمجة جديدة تمامًا بحلول الوقت الذي تصل فيه إلى أسفل هذه الصفحة ، ولكن إذا قررت متابعة تطوير iOS ، فنوصيك بمراجعة تطبيق Swift Playgrounds. يحتوي هذا التطبيق على تمارين Learn To Code ، يتم تقديمها كألغاز تفاعلية ستساعد في التعرف على أساسيات Swift التي ستحتاج إليها ، من أجل مواصلة استكشاف تطوير iOS.

إعداد Apple ID Xcode

لتطوير أجهزة iPhone و iPad ، ستحتاج إلى جهاز كمبيوتر يعمل بنظام التشغيل MacOS 10.11.5 أو أعلى. إذا كنت غير متأكد من إصدار نظام التشغيل MacOS الذي تستخدمه حاليًا ، فقم بما يلي:

• حدد شعار "Apple" في شريط قوائم جهاز Mac الخاص بك.
• حدد "حول هذا Mac."
• تأكد من تحديد علامة التبويب "نظرة عامة" ؛ يجب أن يظهر إصدار macOS الخاص بك في هذه النافذة.

ستحتاج أيضًا إلى Xcode ، وهي بيئة التطوير المتكاملة (IDE) من Apple. يحتوي Xcode على جميع الأدوات والميزات المطلوبة لتصميم وتطوير وتصحيح التطبيقات لنظام التشغيل macOS و watchOS و tvOS - و دائرة الرقابة الداخلية.

لتنزيل أحدث إصدار من Xcode:

• قم بتشغيل App Store على جهاز Mac الخاص بك.
• في حقل "البحث" ، أدخل "Xcode".
• عندما يظهر تطبيق Xcode ، حدد "Get" متبوعًا بـ "تثبيت التطبيق".
• عند المطالبة ، أدخل معرف Apple وكلمة المرور. إذا لم يكن لديك معرف Apple ، فيمكنك إنشاء واحد مجانًا. سيتم تنزيل Xcode الآن إلى مجلد "التطبيقات" على جهاز Mac.
• بمجرد انتهاء تنزيل Xcode ، قم بتشغيله. اقرأ الشروط والأحكام ، وإذا كنت سعيدًا بالمتابعة ، فانقر فوق "موافق".
• إذا طلب منك Xcode تنزيل بعض البرامج الإضافية ، فاتبع الإرشادات التي تظهر على الشاشة لتنزيل هذه المكونات المفقودة.

الشروع في العمل: إنشاء مشروع Xcode جديد

على غرار Android Studio ، يأتي Xcode بعدد من القوالب للفئات الشائعة من تطبيقات iOS ، مثل التنقل المستندة إلى علامات التبويب والألعاب. تتضمن هذه القوالب رمزًا وملفًا يمكن أن يساعد في بدء مشروعات iOS الخاصة بك. في هذه المقالة ، سنستخدم أحد هذه القوالب الجاهزة.

لإنشاء مشروع Xcode جديد:

• قم بتشغيل Xcode IDE ، إذا لم تقم بذلك بالفعل.
• بعد لحظات قليلة ، ستظهر شاشة "Welcome to Xcode" ؛ حدد "إنشاء مشروع Xcode جديد". إذا لم تظهر شاشة الترحيب ، فحدد "ملف> جديد> مشروع" من شريط قائمة Xcode.
• في نافذة "اختيار قالب لمشروعك الجديد" ، تأكد من تحديد علامة التبويب "iOS".
• حدد قالب "تطبيق عرض واحد" ، ثم انقر فوق "التالي".
• في "اسم المنتج" ، أدخل "HelloWorld". سيستخدم Xcode هذا لتسمية مشروعك وتطبيقك.
• إذا رغبت في ذلك ، أدخل "اسم المنظمة" اختياريًا.
• أدخل "معرف المؤسسة". إذا لم يكن لديك معرف ، فيمكنك استخدام "com.example". لاحظ أن "Bundle Identifier" يتم إنشاؤه تلقائيًا استنادًا إلى اسم المنتج ومعرف المؤسسة ، لذلك لا بحاجة للقلق بشأن هذا.
• افتح القائمة المنسدلة "اللغات" ، واختر "سويفت".
• ابحث عن مربع الاختيار "استخدام البيانات الأساسية" ، وتأكد من ذلك ليس المحدد.
• حدد مربع الاختيار "تضمين اختبارات الوحدة".
• ابحث عن مربع الاختيار "تضمين اختبارات واجهة المستخدم" ، وتأكد من ذلك ليس المحدد.
• انقر فوق التالي."
• في مربع الحوار التالي ، حدد الموقع الذي تريد حفظ مشروعك فيه ، ثم انقر فوق "إنشاء".

سيقوم Xcode الآن بتحميل المشروع الخاص بك في نافذة مساحة العمل الخاصة به.

فريق التطوير المطلوب؟

في هذه المرحلة ، قد يعرض Xcode الخطأ التالي "يتطلب توقيع HelloWorld فريق تطوير".

قبل أن تتمكن من تشغيل مشروعك على جهاز iOS فعلي ، ستحتاج إلى إعداد فريق صالح وتوقيع طلبك. نظرًا لأننا نختبر فقط نظام التشغيل iOS ، فلست بحاجة إلى إكمال عملية التوقيع الآن ، ولكن ستحتاج إلى توقيع التطبيق الخاص بك قبل أن يتم تشغيله على جهاز فعلي أو الوصول إلى خدمات معينة ، مثل Game Center أو In-App المشتريات.

فهم Apple Xcode IDE

مساحة عمل Xcode هي المكان الذي ستكتب فيه جميع التعليمات البرمجية المصدر للتطبيق الخاص بك ، وتصميم وبناء واجهة المستخدم الخاصة بك (UI) ، وإنشاء جميع الملفات والموارد الإضافية التي ستجتمع في النهاية لتشكيل تطبيق iOS المكتمل.

إن Xcode مليء بالميزات ، لكن كقادم جديد لتطوير iOS ، هناك بعض المناطق التي تحتاج إلى معرفتها:

• (1) منطقة الملاحة. توفر هذه المنطقة وصولاً سريعًا وسهلاً إلى جميع الملفات والموارد المختلفة التي تشكل مشروعك. يمكنك فحص محتويات الملف عن طريق تحديده في منطقة التنقل. لاحظ أنك تحتاج فقط إلى تحديد الملف المعني ؛ يؤدي النقر المزدوج فوق أحد الملفات إلى تشغيله في نافذة خارجية جديدة.
• (2) منطقة المحرر. اعتمادًا على الملف الذي تحدده في منطقة التنقل ، سيعرض Xcode واجهات مختلفة في منطقة المحرر. الأكثر شيوعًا ، ستستخدم منطقة محرر لكتابة التعليمات البرمجية المصدر للتطبيق الخاص بك وإنشاء واجهة المستخدم الخاصة به.
• منطقة المنفعة. هذه المنطقة مقسمة إلى قسمين. يعرض الجزء العلوي من منطقة الأدوات المساعدة (3) جزء المفتش ، حيث يمكنك عرض معلومات حول العنصر الذي حددته في منطقة التنقل أو المحرر ، وتعديل سماته. يعرض الجزء السفلي من منطقة الأدوات المساعدة (4) جزء المكتبة ، والذي يوفر الوصول إلى بعض عناصر واجهة المستخدم الجاهزة وأجزاء الأكواد البرمجية وغيرها من الموارد.

AppleDelegate: فحص ملف مصدر Swift

يتضمن قالب التطبيق المنفرد طريقة العرض جميع رموز Swift والموارد اللازمة لإنشاء تطبيق iOS بسيط ولكنه يعمل.

يمكنك رؤية كل هذه الملفات والمصادر التي تم إنشاؤها تلقائيًا في منطقة التنقل (نحو الجانب الأيسر من مساحة عمل Xcode).

إذا لم تكن منطقة التنقل مرئية ، فيمكنك اقناعها بالاختباء عن طريق تحديد "عرض> المستكشفات> إظهار Project Navigator" من شريط قائمة Xcode.

يقوم تطبيق Simple View Application تلقائيًا بإنشاء العديد من الملفات ، ولكن لنبدأ من خلال فحص "AppleDelegate.swift". حدد هذا الملف في منطقة التنقل ، ويجب تحديث منطقة المحرر لعرض محتويات الملف.

استيراد UIKit @ UIApplicationMain class AppDelegate: UIResponder، UIApplicationDelegate {var window: UIWindow؟ // في Swift ، تقوم بتعريف طريقة باستخدام تطبيق "func" للكلمات الرئيسية // func (_ application: UIApplication، didFinishLaunchingWithOptions launchOptions:؟) -> Bool {return true} // تعريف معلمة "application" مع النوع "UIApplication" "// func applicationWillResignActive (_ application: UIApplication) {} func applicationDidEnterBackground (_ application: UIApplication) {} func applicationWillEnterForeground (_ application: UIApplication) {} func applicationDidBecomeActive (_ application: UIApplication) {} application ) {}}

دعونا نلقي نظرة فاحصة على ما يحدث في هذا الملف:

1. إنشاء نقطة دخول

تنشئ السمةUIApplicationMain نقطة إدخال في التطبيق وحلقة تشغيل ، وهي حلقة معالجة حدث تتيح لك جدولة العمل وتنسيق أحداث الإدخال داخل التطبيق الخاص بك.

UIApplicationMain

2. تحديد AppDelegate الخاص بك

يعرّف ملف AppDelegate.swift فئة AppleDelegate ، التي تنشئ النافذة التي يتم فيها رسم محتوى التطبيق الخاص بك وتوفر مكانًا للرد على انتقالات الحالة ، مثل وقت انتقال التطبيق إلى الخلفية أو نقله إلى المقدمة.

class AppDelegate: UIResponder، UIApplicationDelegate {

في التعليمة البرمجية أعلاه ، نعتمد أيضًا بروتوكول UIApplicationDelegate ، الذي يحدد عدة طرق يمكنك استخدامها لإعداد تطبيقك ، والتعامل مع مختلف أحداث مستوى التطبيق.

3. تحديد خاصية النافذة

تحتوي فئة AppDelegate على خاصية "window" ، والتي تخزن مرجعًا إلى نافذة التطبيق. تمثل هذه الخاصية جذر التسلسل الهرمي لعرض التطبيق الخاص بك ، وهي المكان الذي سيتم فيه سحب محتوى التطبيق بالكامل.

فار النافذة: UIWindow؟

4. تطبيقات كعب متنوعة

تحتوي فئة AppDelegate أيضًا على تطبيقات كعب الروتين للعديد من أساليب المفوض ، مثل:

تطبيق funcDidEnterBackground (_ application: UIApplication) {

هذه الطرق تمكن كائن التطبيق من التواصل مع مفوض التطبيق. في كل مرة يتم فيها تغيير حالة التطبيق الخاص بك ، سيتصل كائن التطبيق بالطريقة المفوضة المقابلة ، على سبيل المثال عندما ينتقل التطبيق إلى الخلفية ، فسوف يتصل بالطريقة المذكورة أعلاه applicationDidEnterBackground.

لكل طريقة من طرق التفويض هذه سلوك افتراضي ، ولكن يمكنك تحديد السلوكيات المخصصة عن طريق إضافة التعليمات البرمجية الخاصة بك. على سبيل المثال ، يمكنك عادةً توسيع تطبيق كعب الروتين applicationDidEnterBackground عن طريق إضافة تعليمة برمجية لإطلاق أي موارد مشتركة. طريقة applicationDidEnterBackground هي المكان الذي يجب أن تخزن فيه معلومات حالة كافية لاستعادة تطبيقك إلى حالته الحالية ، فقط في حالة إنهاء تطبيقك أثناء وجوده في الخلفية.

بالإضافة إلى applicationDidEnterBackground ، يحتوي AppleDelegate.swift على الطرق التالية:

• didFinishLaunchingWithOptions. يبلغ المفوض بأن عملية الإطلاق قد اكتملت تقريبًا وأن تطبيقك جاهز للتشغيل تقريبًا. يجب عليك استخدام هذه الطريقة لإكمال تهيئة التطبيق وإجراء أي تعديلات نهائية ، قبل تقديم واجهة المستخدم للتطبيق للمستخدم.
• applicationWillResignActive. يخبر المفوض أن التطبيق الخاص بك على وشك الانتقال من حالة نشطة إلى حالة غير نشطة. يمكن تشغيل هذه الطريقة عن طريق انقطاع مؤقت ، مثل مكالمة هاتفية واردة ، أو عندما يبدأ تطبيقك في الانتقال إلى حالة الخلفية. عندما يكون التطبيق الخاص بك في حالة غير نشطة ، يجب أن يؤدي الحد الأدنى من العمل ، لذلك يجب عليك استخدام applicationWillResignActive لإيقاف المهام المستمرة مؤقتًا وتعطيل أي أجهزة توقيت. يجب أيضًا أن تغتنم هذه الفرصة لحفظ أي بيانات غير محفوظة ، لذلك لن تضيع إذا اختار المستخدم إنهاء طلبك أثناء وجوده في الخلفية.
• applicationWillEnterForeground. في نظام التشغيل iOS 4.0 والإصدارات الأحدث ، تُسمى هذه الطريقة كجزء من انتقال تطبيقك من الخلفية إلى حالة مقدمة نشطة. يجب عليك استخدام هذه الطريقة للتراجع عن أي تغييرات قمت بها عند إدخال التطبيق في الخلفية.
• applicationDidBecomeActive. هذا يخبر المفوض أن تطبيقك قد انتقل من حالة غير نشطة إلى حالة نشطة. عادةً ما يحدث هذا عندما يقوم المستخدم أو النظام بتشغيل التطبيق الخاص بك ، ولكن يمكن أن يحدث أيضًا إذا اختار المستخدم أن يتجاهل مقاطعة توقف تطبيقك إلى حالة غير نشطة مؤقتة ، مثل مكالمة هاتفية واردة أو رسالة نصية قصيرة. يجب عليك استخدام الأسلوب applicationDidBecomeActive لإعادة تشغيل أي مهام تم إيقافها مؤقتًا أثناء وجودك في حالة غير نشطة.
• applicationWillTerminate. هذه الطريقة تبلغ المفوض أن طلبك على وشك الانتهاء. يجب عليك استخدام هذه الطريقة لإجراء أي تنظيف ضروري ، مثل حفظ بيانات المستخدم أو تحرير الموارد المشتركة. فقط عليك أن تدرك أن هذه الطريقة لديها ما يقرب من خمس ثوان لأداء مهامها والعودة ، وإذا تجاوز هذا الحد الزمني ، فقد يقرر النظام إنهاء العملية بالكامل.

اختبار مشروعك: تشغيل iOS Simulator

نظرًا لأننا استخدمنا تطبيق Single View App ، يحتوي مشروعنا بالفعل على رمز كافٍ لتشغيله على نظام التشغيل iOS.

يمكنك وضع مشروع iOS الخاص بك على المحك ، باستخدام iOS Simulator الذي يأتي مزودًا مسبقًا بـ Xcode. على غرار محاكي Android Studio ، يسمح لك iOS Simulator باختبار كيف سيبدو تطبيقك ويعمل من خلال مجموعة من الأجهزة ، بما في ذلك الأجهزة ذات الأحجام المختلفة للشاشة والدقة.

لنشغل مشروعنا في iOS Simulator:

• حدد "تعيين المخطط النشط" (حيث يتم وضع المؤشر في لقطة الشاشة التالية).

• اختر الجهاز الذي تريد محاكاته ، مثل "iPhone 8" أو "iPad Air 2" أو "iPhone X". يقوم Simulator بمحاكاة iPhone 8 Plus افتراضيًا.
• في الجزء العلوي الأيسر من شريط أدوات Xcode ، حدد الزر "تشغيل" (حيث يتم وضع المؤشر في لقطة الشاشة التالية).

• إذا كانت هذه هي المرة الأولى التي تختبر فيها تطبيق iOS ، فسوف يسأل Xcode عما إذا كنت تريد تمكين وضع مطور البرامج. يسمح وضع المطور لـ Xcode بالوصول إلى بعض ميزات تصحيح الأخطاء دون طلب كلمة المرور الخاصة بك في كل مرة ، لذلك ما لم يكن لديك سبب محدد لعدم القيام بذلك ، فعادة ما تريد تمكين وضع مطور البرامج.

بمجرد انتهاء Xcode من إنشاء مشروعك ، سيتم تشغيل iOS Simulator وبدء تحميل التطبيق. على غرار محاكي Android ، قد تكون هذه عملية بطيئة في بعض الأحيان ، لذلك قد تحتاج إلى التحلي بالصبر (ربما تستخدم هذه كفرصة للحصول على قهوة!)

بمجرد تحميل التطبيق الخاص بك ، ستواجه شاشة بيضاء واضحة. قد يكون قالب التطبيق المنفرد عرض تطبيق يعمل بنظام iOS ، لكنه ليس بالضبط مثير التطبيق ، لذلك دعونا نضيف بعض عناصر واجهة المستخدم.

إنشاء واجهة مستخدم باستخدام Interface Builder

يوفر Xcode’s Interface Builder طريقة مرئية لك لتصميم وبناء واجهة المستخدم للتطبيق ، على غرار طريقة عمل Layout Editor في Android Studio.

إذا ألقيت نظرة على منطقة التنقل ، فسترى أن قالب تطبيق العرض المفرد قد أنشأ بالفعل ملف "Main.storyboard" ، وهو القصة المصورة ملف. لوحة العمل عبارة عن تمثيل مرئي لواجهة المستخدم الخاصة بالتطبيق ، والتي يمكنك تعديلها في Interface Builder.

لإلقاء نظرة على لوحة العمل الخاصة بالتطبيق لدينا ، حدد ملف Main.storyboard في منطقة التنقل. يجب أن يفتح Interface Builder تلقائيًا ويعرض واجهة المستخدم الخاصة بالتطبيق ، والتي تتكون حاليًا من شاشة واحدة.

تحتوي هذه الشاشة على طريقة عرض واحدة ، مع توجيه السهم نحو الجانب الأيسر من الشاشة. يمثل هذا السهم نقطة دخول لوحة العمل ، وهي أول شاشة يراها المستخدم عند تشغيل التطبيق.

الوصول إلى مكتبة كائنات iOS

أسهل طريقة لإنشاء واجهة مستخدم ، هي استخدام عناصر من Xcode مكتبة الكائنات. تحتوي هذه المكتبة على كائنات لها وجود مرئي على الشاشة ، مثل طرق عرض الصور وأشرطة التنقل ومفاتيح التبديل ، والكائنات التي تحدد السلوك ولكن ليس لها وجود مرئي ، مثل أدوات التعرف على الإيماءات وطرق حاوية.

سنقوم بإنشاء زر يعرض التنبيه عند النقر عليه. دعنا نبدأ بالضغط على زر من مكتبة الكائنات وإضافته إلى تطبيقنا:

• نحو أسفل يمين مساحة عمل Xcode ، حدد زر "إظهار مكتبة الكائنات". بدلاً من ذلك ، يمكنك تحديد "عرض> أدوات مساعدة> إظهار مكتبة الكائنات" من قائمة Xcode.

• يجب أن تعرض مكتبة الكائنات الآن قائمة بجميع العناصر المختلفة التي يمكنك إضافتها إلى واجهة المستخدم الخاصة بك. قم بالتمرير خلال هذه القائمة لمعرفة الخيارات المتاحة.
• نريد إضافة زر ، لذلك اكتب "زر" في حقل النص "تصفية" ، ثم حدد الزر عندما يظهر في القائمة.
• اسحب كائن الزر على قماش الخاص بك. أثناء السحب ، ستظهر مجموعة من الأدلة الأفقية والرأسية لمساعدتك في وضع الزر. عندما تكون راضيًا عن موضعه ، حرر الماوس لإضافة الزر إلى واجهة المستخدم الخاصة بك.

تخصيص الكائنات باستخدام Attributes Inspector

بعد ذلك ، نحتاج إلى إضافة بعض النص إلى الزر. يمكنك تخصيص الكائنات ، وذلك باستخدام Xcode’s Attributes Inspector:

• حدد "عرض> أدوات مساعدة> إظهار سمات المفتش" من شريط أدوات Xcode ؛ يجب أن يظهر "مفتش السمات" الآن في الجهة اليمنى من مساحة عمل Xcode.

• في لوحة الرسم القماشية الخاصة بك ، حدد كائن الزر.
• في "مفتش السمات" ، ابحث عن قسم "العنوان" واستبدل نص "الزر" الافتراضي بنص خاص بك.
  اضغط على مفتاح "Return" الموجود على لوحة المفاتيح ، وسيعمل "Interface Builder" على تحديث الزر لعرض النص الجديد.

في هذه المرحلة ، قد ترغب في تجربة بعض السمات الأخرى للزر ، على سبيل المثال ، يمكنك تغيير لون خلفية الزر أو الخط المستخدم في النص.

معاينة واجهة المستخدم الخاصة بك

على الرغم من أنه يمكنك اختبار تطبيقاتك عن طريق تشغيلها على iOS Simulator ، إلا أن هذه ليست الطريقة الأسهل دائمًا لمراقبة كيفية تشكيل التطبيق الخاص بك.

عندما تقوم ببناء واجهة المستخدم الخاصة بك ، يمكنك توفير بعض الوقت عن طريق معاينة تغييراتك في نافذة "معاينة" في Xcode ، والتي تعد بمثابة محرر ثانوي يتم عرضه كجزء من مساحة عمل Xcode المعتادة.

• حدد "عرض> تحرير> إظهار مساعد المحرر" من شريط قوائم Xcode.
• في شريط قوائم مساعد المحرر ، حدد "تلقائي".

• حدد "معاينة> Main.storyboard (معاينة)". سيعرض "مساعد التحرير" الآن معاينة لواجهة مستخدم التطبيق إلى جانب منطقة المحرر المعتادة.
• لمعاينة واجهة المستخدم الخاصة بالتطبيق في اتجاهات مختلفة ، قم بالتمرير إلى أسفل نافذة المعاينة وحدد الزر "تدوير".

ربط واجهة المستخدم الخاصة بك إلى شفرة المصدر الخاصة بك

في تطوير iOS ، يكون رمز التطبيق وواجهة المستخدم منفصلين ، لدرجة أننا أنشأنا واجهة مستخدم أساسية دون الحاجة إلى كتابة سطر واحد من التعليمات البرمجية. ومع ذلك ، هناك جانب سلبي للاحتفاظ برمز و UI منفصلين: تحتاج إلى إنشاء علاقة واضحة بين شفرة المصدر وواجهة المستخدم الخاصة بك ، من خلال الخوض في فئتي UIViewController و ViewController في مشروعك.

UIViewController هي لبنة أساسية في تطبيقات iOS ، وهي مسؤولة عن الاحتفاظ بعناصر واجهة المستخدم مثل الأزرار ومنزلقات وحقول النصوص. بشكل افتراضي ، لدى UIViewController طريقة عرض فارغة ، لذلك نحن بحاجة إلى إنشاء فئة مخصصة تمتد UIViewController ، والمعروفة باسم وحدة تحكم العرض.

إذا قمت بفتح ملف "ViewController.swift" في مشروعك ، فسترى أن قالب تطبيق العرض المفرد قد أنتج بالفعل وحدة تحكم في طريقة العرض:

الطبقة ViewController: UIViewController {

حاليًا ، ترث فئة ViewController هذه ببساطة كل السلوك المحدد بواسطة UIViewController ، ولكن يمكنك توسيع وتخصيص هذا السلوك الافتراضي عن طريق تجاوز الأساليب المحددة بواسطة UIViewController.على سبيل المثال ، يتجاوز ملف ViewController.swift حاليًا طريقة viewDidLoad () ، لكنه لا يتعارض مع الواقع فعل أي شيء باستثناء استدعاء إصدار UIViewController من هذه الطريقة:

تجاوز func viewDidLoad () {super.viewDidLoad () // نفذ أي إعداد إضافي بعد تحميل العرض //}

على الرغم من أنه يتجاوز نطاق هذا البرنامج التعليمي ، إلا أنه يمكنك تخصيص استجابة "مراقب العرض" لهذا الحدث عن طريق إضافة الكود الخاص بك إلى طريقة viewDidLoad () ، على سبيل المثال هذا هو المكان الذي عادةً ما تقوم فيه بإجراء أي إعداد إضافي يتطلبه تطبيقك.

خلف الكواليس ، قام قالب تطبيق العرض المفرد تلقائيًا بإنشاء اتصال بين فئة ViewController.swift و Main.storyboard. في وقت التشغيل ، ستقوم لوحة العمل الخاصة بك بإنشاء مثيل لـ ViewController وستظهر محتويات لوحة العمل الخاصة بك على الشاشة.

هذا يعطينا بداية ، ولكن ما زلنا بحاجة إلى ربط العناصر الفردية في لوحة العمل الخاصة بنا ، بملف ViewController.swift الخاص بنا ، بحيث يمكن أن يتواصل الكود المصدري مع هذه العناصر الفردية.

تتمثل مهمتنا في إنشاء اتصال بين زرنا والقسم المناسب من الكود المصدري الخاص بنا ، بحيث يعرض تطبيقنا تنبيهًا في كل مرة ينقر فيها المستخدم على الزر.

خلق طريقة العمل

النقر على زر هو حدث ، لذلك نحن بحاجة إلى إنشاء طريقة العمل، وهو عبارة عن قسم من التعليمات البرمجية يحدد كيفية استجابة التطبيق لحدث معين.

لإنشاء طريقة عمل:

• في منطقة التنقل ، تأكد من تحديد ملف Main.storyboard الخاص بك.
• افتح محرر مساعد Xcode ، عن طريق تحديد "عرض> مساعد محرر> إظهار مساعد محرر".
• في شريط محدد المحرر ، انقر فوق "تلقائي" ثم حدد "تلقائي> ViewController.swift."
• في هذه المرحلة ، يجب أن يكون كل من ملف ViewController.swift و Storyboard مرئيًا على الشاشة. في ملف ViewController.swift ، ابحث عن السطر التالي وأضف بضعة أسطر من المساحة الفارغة تحته:

الطبقة ViewController: UIViewController {

• في لوحة العمل الخاصة بك ، حدد زر عنصر واجهة المستخدم بحيث يتم تمييزه باللون الأزرق.
• التحكم - اسحب الزر إلى المساحة الفارغة التي أنشأتها للتو في ملف ViewController.swift. يجب أن يظهر خط أزرق ، يشير إلى مكان إنشاء طريقة الإجراء.

• عندما تكون راضيًا عن موضع هذه الطريقة ، حرر الزر وسيظهر إطار منبثق.
• في النافذة المنبثقة ، افتح القائمة المنسدلة "اتصال" وحدد "الإجراء".
• بعد ذلك ، افتح القائمة المنسدلة "Event" وحدد "Touch Up Inside" ، وهو حدث سيتم تشغيله عندما يرفع المستخدم إصبعه داخل الزر.
• أطلق على هذا الإجراء اسم "alertController".
• انقر فوق "الاتصال".

سيقوم Xcode الآن بإنشاء طريقة "alertController" التالية:

IBAction func alertController (_ المرسل: أي) {}

لنفصل بالضبط ما يحدث هنا:

1. تشير إلى هذا الأسلوب هو عمل

تعرض السمة "IBAction" هذه الطريقة إلى Interface Builder كإجراء ، مما يسمح لك بتوصيل هذه الطريقة بكائنات واجهة المستخدم:

IBAction

2. أعلن الطريقة

في Swift ، نعلن عن طريقة تستخدم الكلمة الأساسية "func" ، متبوعة باسم الطريقة:

alertc alertControlle ()

3. تحديد بعض المعلمات

بعد ذلك ، نحدد بعض المعلمات الاختيارية داخل مجموعة من الأقواس ، والتي ستستخدمها طريقتنا كمدخلات.

يجب أن يكون لكل مجموعة من المعلمات اسم ونوع ، مفصولة بنقطتين (:).

alertc alertController (_ المرسل: أي) {

هنا ، تقبل الطريقة معلمة "المرسل" ، والتي تشير إلى الكائن المسؤول عن تحريك الإجراء ، أي زرنا. نذكر أيضًا أن هذه المعلمة يمكن أن تكون من النوع "Any".

الآن ، عندما ينقر المستخدم على الزر ، فسيقوم التطبيق لدينا باستدعاء طريقة alertController (_ المرسل :).

تحقق من الاتصال

بعد إنشاء طريقة "alertController" الخاصة بنا ، يمكننا التحقق من أنها متصلة بشكل صحيح بالزر:

• في منطقة التنقل ، حدد ملف "Main.storyboard".
• في شريط قوائم Xcode ، حدد "View> Utilities> Show Connections Inspector". يجب أن يفتح Connections Inspector الآن على الجانب الأيسر من مساحة عمل Xcode.
• في منطقة محرر ، حدد الزر الخاص بك.

يجب أن يعرض Connections Inspector الآن بعض المعلومات حول هذا الزر ، بما في ذلك قسم "الأحداث المرسلة" ، والذي يحتوي على قائمة بالأحداث المتاحة والطريقة المقابلة التي سيتم استدعاؤها كلما حدث كل حدث.

يمكننا أن نرى أن حدث "Touch Up Inside" متصل بطريقة "alertController" الخاصة بنا ، لذلك نعلم أنه في كل مرة يتفاعل فيها المستخدم مع هذا الزر ، سيتم استدعاء طريقة "alertController".

ومع ذلك ، هناك مشكلة: لم نحدد فعليًا ما يجب أن يحدث عند استدعاء طريقة "alertController"!

إنشاء مربع حوار تنبيه

في نظام التشغيل iOS ، يمكنك إنشاء تنبيه باستخدام UIAlertController ، وهو ما يعادل تقريبا AlertDialog لنظام Android.

افتح ملف ViewController.swift وأضف ما يلي:

class ViewController: UIViewController {IBAction func showAlert (_ المرسل: أي) {let alertController = UIAlertController (title: "Title"،: "Hello، world!"، preferentStyle: .alert) alertController.addAction (UIAlertAction (title: "Cancel" "، style: .default)) self.present (alertController، animated: true، complet: nil)}

دعونا نلقي نظرة فاحصة على ما يحدث بالضبط هنا:

1. أعلن ثابت

في Swift ، تعلن عن ثوابت بكلمة "let" ، لذلك نبدأ بإعلان ثابت يسمى alertController:

واسمحوا alertController

2. قم بتعيين محتوى

يمكننا الآن تحديد عنوان التنبيه و:

اسمحوا alertController = UIAlertController (العنوان: "العنوان" ،: "مرحبا ، العالم!")

3. تعيين النمط

نظرًا لأن هذا التنبيه ، فأنا أستخدم نمط "التنبيه":

واسمحوا alertController = UIAlertController (title: "Title"،: "Hello، world!"، favoriteStyle: .alert)

4. إضافة إجراء

بعد ذلك ، نقوم بإضافة زر إجراء باستخدام طريقة addAction ():

alertController.addAction (UIAlertAction (العنوان: "إلغاء" ، النمط: .default))

5. عرض التنبيه

بمجرد قيامنا بتكوين كائن UIAlertController الخاص بنا ، نحن على استعداد لعرضه على المستخدم. في المقتطف التالي ، نطلب من ViewController تقديم كائن alertController مع رسم متحرك:

self.present (alertController ، متحرك: صحيح ، إكمال: لا شيء)}

اختبار تطبيق iOS المكتمل

حان الوقت الآن لوضع مشروعنا قيد الاختبار:

• حدد زر "تشغيل" في شريط أدوات Xcode.
• بمجرد ظهور التطبيق الخاص بك في محاكي iOS ، امنح الزر الخاص به نقرة - يجب أن يظهر التنبيه الآن على الشاشة!

تغليف

في هذا البرنامج التعليمي ، حصلنا على بعض الخبرة العملية في تطوير نظام التشغيل iOS. لقد أنشأنا تطبيقًا بسيطًا ، يتكون من زر وتنبيه ، بينما نتعرف على Xcode IDE ولغة برمجة Swift.

هل لديك أي خطط لبدء تطوير تطبيقات لأجهزة iPhone و iPad؟ أو هل تفضل أدوات تطوير الأنظمة الأساسية مثل Flutter؟ اسمحوا لنا أن نعرف في التعليقات أدناه!