سلسة تطوير تطبيقات الايفون – ابدأ مشروعك الاول.

اليوم باذن الله سنبدأ خطوة بخطوة كي تبدأ بمشروعك الاول في برمجة تطبيقات الايفون

ولكي نبدأ يجيب علينا اولا ان نجهز بيئة العمل الخاصة بنا

اولا يجب ان نثبت برنامج ال Xcode

في حال لم تقم بتحميله الى الان فيمكنك فعل ذلك بشكل مجاني من موقع الشركة الرسمي
https://developer.apple.com/download

قم بتحميله وبعد الانتهاء يمكننا ان نباشر باولى خطوات العمل

(ملاحظة: في حال عدم توافر جهاز ماك يمكنك الاطلاع على المقال الذي اشرح فيه كيف تقوم بتثبيت نظام الماك على نظام الوندوز من كيف تثبت نظام macOS high sierra على virtualbox في نظام الويندوز)

سنقوم الان بالبدء بكتابة اول مشروع لنا والذي سيكون عبارة عن اظهار رسالة تحوي جملة ترحيبية

الغاية من هذا المشروع:

  1. التعرف على بيئة العمل  Xcode
  2. التعرف بشكل بسيط على لغة البرمجة Swift
  3. كيف نقوم بتشغيل مشروعنا على المحاكي وجهاز الايفون

قبل ان نبدأ فلنلقي نظرة على النتيجة النهائية التي سنسعى لتنفيذها :

فلنبدأ بالتنفيذ !

اولا قم بتشغيل الاكس كود ستظهر لك الشاشة التالية

قم باختيار الخيار الثاني لانشاء مشروع جديد
Create a new Xcode Project

الان سيكون عليك اختيار نوع المشروع حيث سنختار مشروع بواجهة واحدة وسيكون هذا هو خيارنا دائما

الان سندخل المعلومات الخاصة بمشروعنا

  1. الخانة الاولى ندخل اسم المشروع وهذا اسم اختياري
  2. الخانة الثانية يتم اختيار حساب المطور الخاص بك (يمكنك عدم اختيار شي الان)
  3. الخانة الثالثة اختيارية وتدل على اسم مؤسستك
  4. الخانة الرابعة تدل على معرف مشروعك ويجب ان يكون فريدا لانه يمثل مشروعك عندما يتم رفعه الى المتجر
  5. اختر لغة البرمجة Swift
  6. ودع باقي الخيارات كما هي

مبروك قمت بانشاء مشروعك الاول 🙂

الان سنتعرف على القوائم والواجهات الاساسية في الاكس كود

  1. هذه القائمة تحوي ملفات ومجلدات المشروع كاملة
  2. هذه الواجهة هي واجهة التصميم الخاصة بمشروعك
  3. قائمة الخصائص وتحوي كافة الخصائص لكافة العناصر
  4. قائمة المكونات ويمكنك اختيار ما شئت وسحبه الى الواجهة ٢
  5. هذه القائمة هي الخاصة بعملية التنقيح ويتم طباعة كافة رسائل الخطأ والمتغيرات في هذه الواجهة
  6. قائمة التشغيل ومن هنا يتم تشغيل واختيار نوع الجهاز المراد تشغيل التطبيق عليه
  7. هذه القائمة تحوي كافة المكونات الموجودة في واجهة التصيميم ٢
  8. واخيرا يمكنك اظهار واخفاء كل من هذه القوائم من الازرار في اعلى اليمين حيث يشير السهم

الان يجب علينا ان نصمم واحهتنا الاولى

من القائمة رقم ١ قم باختيار Main.storyboard هيث هذا هو الملف الذي يحوي الوجهات المصممة والخاصة بمشروعنا

سنجد ان هناك نافذة بشكل تلقائي نقوم من القائمة رقم ٤ باختيار زر وسحبه الى منتصف هذه النافذة

ومن ثم من القائمة رقم ٢ ومن خانة الخصائص نقوم بتغير النص في الزر الى “Hello to Zero To hero”

وبهذا نكون قد انهينا تصميم واجهتنا 🙂

علينا الان ان نقوم بربطها بالكود الخاص بالنافذة

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

في مثالنا هذا يوجد بشكل تلقائي ملف يدعي ViewController.swift تم انشائه بشكل تلقائي عندما قمنا بانشاء المشروع

الان يجب ان نقوم بربطه بالنافذة المعنية (ايضا هذه الخطوة قام بها الاكس كود بالنيابة عنا )

من القائمة اليمينية نختار الملف المرتبط بالنافذة (يمكننا ان نضغط على الزر الاصفر في النافذة ليتم فتح قائمة الخصائص )
الان اصبح بامكاننا ان نربط الواجهة بالكود

اضغط على الزر في القائمة اليمنية العليا ليفتح نافذة الكود جنبا لجنب مع واجهة التصميم

الان بالزر اليمني للماوس اضغط واسحب الى نافذة الكود في مكان فارغ (او بالزر اليساري للماوس مع الضغط على زر control )

يمكننا ان نعرف علاقتين بالكود :

  1. ان نربط المكونات بالكود واعطائها معرف خاص ليتم التعامل مع هذا المكون عن طريق الكود
  2. اختيار حدث معين للتعامل مع هذا المكون ( مثل الضغط على الزر في حالتنا)

سنختار من القائمة الظاهرة : 

ومن ثم اعطي الحدث اسم واختر connect

الان بقي ان نضع الكود الخاص باظهار الرسالة ضمن هذا التابع

لهذا قم بنسخ الكود التالي

  let alert = UIAlertController(title: "Welcome To Zero To Hero", message: "Hello World!", preferredStyle: .alert)
        
        let okAction = UIAlertAction(title: "Ok", style: .default, handler: nil)
        alert.addAction(okAction)
        self.present(alert, animated: true, completion: nil)

الان اصبح كل شيئ جاهز ويمكنك ان تجرب مشروعك الاول 🙂

الان من الواجهة رقم ٦ قم باختيار نوع المحاكي او يمكنك ان تقوم بتوصيل جهاز الايفون الخاص بك ( ستحتاج الى وجود حساب مجاني لتقوم بتجربته على جهاز ايفون)

ومن ثم اضغط على زر التشغيل لتكون هذه هي النتيجة

مبروك انتهينا من كتابة وتصميم المشروع الاول وبهذا نكون قد تعرفنا على اغلب الاساسيات في بيئة العمل

في حال وجود اي استفسار يمكنك ان تضع تعليق هنا او ان تضع سوال في قسم سؤال وجواب الخاص بالمدونة لتجد اجابتك فورا

ويمكنك دوما في حال وجود اي طلب او خدمة التواصل معي على صفحة المدونة او صفحتي الشخصية على الفيس بوك

في المقال القادم سنتعرف اكثر على لغة البرمجة سويفت ومن ثم نبدأ بتنفيذ مشاريع اكثر تعقيداً

يمكنك متابعة الدرس الاول من السلسة من هنا

و كذلك قراءة مقال كيف ابدأ من هنا

Leave a Reply

Your email address will not be published.