دليل المبتدئين لتطوير دائرة الرقابة الداخلية - الجزء الأول
تعد شركة Apple صناعة رائدة في عالم الهواتف المحمولة منذ سنوات من خلال سلسلة أجهزة iPhone و iPad. على الرغم من الضجيج الذي يمكن أن يخلقه مع كل الإصدارات الرسمية ، إلا أنه يحتفظ بنسبة كبيرة من حصص السوق في منصة الأجهزة المحمولة ، وربما هذا هو السبب في أن معظم العملاء يريدون أن يكون تطبيقهم موجودًا في متجر تطبيقات Apple ؛ وبالتالي أصبح السبب للمطورين للتعلم وبناء تطبيق iPhone.
والخبر السار هو أن تطوير تطبيق iPhone ليس صعباً كما تعتقد ، وهذا المنشور موجود كدليل شامل لإرشادك خلال العملية الكاملة لبناء تطبيق لجهاز iPhone.
سنناقش الأسباب والمراحل والأدوات اللازمة لتطوير التطبيق ، وفي النهاية ستتبع برنامجًا تعليميًا سهلاً لتصميم تطبيق iPhone الأساسي باستخدام Xcode.
لذلك سواء كنت تتعلم للعمل أو لديك فكرة تطبيق مذهلة قد تجعلك مليونيرا ، فلنبدأ في إنشاء أول تطبيق iPhone لك!
ملاحظة: ستحتاج إلى جهاز كمبيوتر يعمل بنظام تشغيل Macintosh (Mac OS) لتثبيت Xcode وتطوير التطبيقات وتقديم التطبيقات ، لا توجد طريقة يمكنك القيام بها على Windows بشكل قانوني.
لماذا تطوير لشركة أبل?
أرى أن هذا السؤال تم طرحه بشكل متكرر لذلك أريد أن أشرح لماذا يجب أن تكون مهتمًا بتطوير iPhone. تماما كما ذكرت في المقدمة ، iPhone حاليا يحمل جزء كبير من حصص السوق في منصة المحمول.
أعتقد أن هذا السبب يجب أن يكون كافياً لتتعلم كيفية تطوير تطبيق iPhone ، سواء كنت تتطور لنفسك أو لعملائك ، ربما يأمل معظم الناس في أن يتمكن تطبيقك من الوصول إلى التطبيق الخاص بهم من قبل العديد من الأشخاص في العالم..
من وجهة نظر التنمية, آبل تحب الأشياء البسيطة, وهذا ينطبق على منتجاتها وأطرها. iOS هو نظام التشغيل الذي يشغل جميع أجهزة Apple المحمولة. وتشمل هذه أجهزة iPod Touch و iPhone و iPad. لذا ضع في اعتبارك عندما تقوم بتطوير تطبيقات لـ iPhone ، فقد تكون كذلك تطوير لجميع الأجهزة الأخرى التي تعمل بنظام iOS!
علاوة على ذلك ، ما يجعل الميزة أعلاه أكبر هو مقدار حفظ عمل الترميز. عندما تكتب رمز لتطبيق iPhone أنت باستخدام لغة البرمجة نفسها لجميع أجهزة الحوسبة أبل. هذا يعني أنه عندما تقوم بتطوير تطبيق iPhone ، يمكن دمج التطبيق لاحقًا في iPad وحتى Mac.
ج موضوعية هي لغة البرمجة الأساسية التي تشغل جميع أطرها. جنبا إلى جنب مع الهدف- C ، سوف تقوم أيضًا بتطوير تطبيق iPhone باستخدام كاكاو تاتش, إطار البرمجة التي تقود تفاعل المستخدم على نظام التشغيل iOS.
كل هذا مجرد القليل من المعلومات لتبدأ تطوير تطبيق iPhone. التطوير عملية معقدة للغاية ولكن الاسترخاء ، خذها ببطء. لذا فإن الأسباب موجودة هنا ، والقرار لك. سواء كانت الإجابة بنعم أم لا ، يمكنك دائمًا الانتقال مباشرة إلى الموضوع التالي: تصميم تطبيقات آيفون.
تخطيط بنية تطبيق iPhone الخاص بك
في الأيديولوجية القياسية لإنشاء تطبيق iPhone ، فأنت تريد تذهب من خلال بضع مراحل. المرحلة الأولى تشمل التخطيط والرسم.
بادئ ذي بدء ، تحتاج إلى أن يكون لديك فكرة عن ما سيفعله تطبيقك. لماذا يريد الناس تنزيله? و ما هي الميزات التي تريد تضمينها? هذه هي المرحلة الأكثر أهمية كما لو كنت تفعل ذلك بشكل صحيح ، عليك انقاذ الكثير من الارتباك والمتاعب في مرحلة الترميز.
والأسوأ من ذلك ، أنه يعيدك إلى لوحة الرسم.
أنا أوصي ل ارسم بعض الأفكار التقريبية لبضع صفحات (أو المشاهدات) من التطبيق الخاص بك. ما عليك سوى رسم شكل مستطيل ، أو ربما 5 أو 6 أشكال على ورقة ، ثم ارسم الميزات التي تريدها في كل طريقة عرض لتطبيقك.
يمكنك التفكير في وجهات النظر مثل صفحات مختلفة في موقع على شبكة الإنترنت. سيقدم كل عرض وظائف مختلفة مثل نموذج تسجيل الدخول أو قائمة جهات الاتصال أو جدول البيانات.
أدناه قمت ببناء مجموعة موجزة من عناصر شريط واجهة المستخدم المختلفة:
- شريط الحالة - يعرض مستوى البطارية الحالي للجهاز ، واتصال الجيل الثالث 3G ، وأشرطة الاستقبال ، وحامل الهاتف ، وغير ذلك الكثير. يوصى دائمًا بتضمين هذه العناصر.
- شريط التنقل - يتيح للمستخدمين خيار التنقل بين التسلسلات الهرمية للصفحة. يتضمن هذا غالبًا زرًا على الجانب الأيسر من الشريط لتمكين المستخدم من العودة إلى عرض التطبيق السابق.
- شريط الأدوات - يظهر في الجزء السفلي من تطبيق iPhone. سيحتوي هذا على بعض الرموز المرتبطة ببعض الوظائف مثل شارك, تحميل, حذف, إلخ.
- شريط التبويب - يشبه إلى حد بعيد شريط الأدوات ، إلا أنك تعمل الآن مع علامات التبويب. عندما ينقر المستخدم على أيقونة علامة تبويب ، سيتم تمييزه تلقائيًا ، وسيعرض حالة تحوم لامعة. يتم استخدام هذا الشريط للتبديل بين طرق العرض بدلاً من تقديم وظائف مباشرة.
تحتوي هذه القائمة فقط على أشرطة الأدوات التي يمكنك العثور عليها في معظم التطبيقات. هناك بعض طرق العرض والأنماط الأخرى التي يجب مراعاتها ، والتي يمكنك العثور عليها في إرشادات استخدام iOS UI Element من Apple. أوصي بشدة بالرجوع إلى هذه الوثائق عندما تكون لديك شكوك حول عناصر واجهة المستخدم الخاصة بـ iPhone.
لمصلحة الوقت لن أصف كل عنصر واجهة المستخدم. هناك العديد من العناصر التي يجب مراعاتها ، ولن ينتهي بك الأمر إلى استخدام كل هذه العناصر في تطبيقك الفردي. ولكن كما يمكنك رسم وجهات نظرك ، يمكنك استلهم الإرشادات المقترحة أعلاه وتطبيقات iPhone الأخرى لقد استمتعت باستخدامها.
تصميم فوتوشوب نماذج بالحجم الطبيعي
أفترض أن معظمكم مرتاح للعمل مع Adobe Photoshop. إنه البرنامج الأول لإنشاء رسومات لموقع الويب ولافتات وشعارات ونماذج بالحجم الطبيعي. يعد تصميم الرسومات على الويب عملية بسيطة إلى حد ما ، ولكنه أكثر تعقيدًا عندما يتعلق الأمر بتصميم تطبيقات iPhone.
إذا كنت تتطلع إلى إنشاء تطبيق ، فعليك فعل ذلك إنشاء تصاميم نموذج بالحجم الطبيعي بكسل الكمال من البداية.
للبدء ، يجب أن نناقش إعدادات Photoshop. نظرًا لأننا نصمم لأجهزة iPhone ، فإننا نحتاج إلى التفكير في تصميمين مختلفين. ال عرض iPhone العادي هو 320 × 480 بكسل. لكن iPhone 4 يتضمن عرض شبكية العين الذي يضاعف كمية البكسل في نفس حجم الشاشة. لذلك يجب عليك ضاعف القرار إلى 640 × 960 بكسل وتصميم التصميمات الخاصة بك لهذا المعيار.
هذا يعني أنك سوف تحتاج أيضا إلى إنشاء 2 مجموعات من الرموز لنماذج بالحجم الطبيعي الخاص بك. سيكون في الأصل الرموز تعيين إلى 163ppi ولكن سوف تحتاج إلى تشمل الرموز مع 326ppi لفون 4. يتم تمييز الرموز تقليديا مع @ 2X في نهاية اسم ملفهم ، مثل “[email protected]“.
الآن ، دعونا نحسن إعدادات المستندات الجديدة الخاصة بنا. سنحتاج أولاً إلى تحرير بعض التفضيلات ، لذلك الوصول إلى Photoshop> تحرير> تفضيلات> أدلة ، الشبكة والشرائح. سيكون وضع شبكة لدينا كل 20px مع التقسيمات الفرعية في 2. عند تصميم لعرض شبكية العين خط 2px سيعرض 1 نقطة على الشاشة. هذه قاعدة مهمة تحتاج إلى وضعها في الاعتبار لتقليل تطبيقك.
إنني أميل إلى العثور على تصميم تصميمي بدقة أكبر ، ثم قم بتقليص حجمها ، ولكن يمكنك ذلك جرب كلتا الطريقتين ونرى ما يناسبك. نحن نستخدم 640 × 960 بكسل على 326ppi - احفظ هذا كإعداد مسبق مخصص إذا كنت تعتقد أنك ستستخدمه بشكل متكرر.
بناء مع عناصر القالب
يمكنك الآن استخدام Photoshop لإنشاء تخطيط مثالي للبكسل وحدك ، ولكن هذا يثبت أنه عمل مرهق ومجهد للغاية.
هذا ملف ضخم يحتوي على عناصر كثيرة جدًا. لتسهيل الأمور ، يمكنك الضغط على v تنشيط أداة نقل وانقر على “اختيار آلي” على شريط الخيارات الخاص به ، ثم حدد “طبقة” عوضا عن “مجموعة”. باستخدام الإعدادات ، يمكنك النقر فوق أي عنصر وسيقودك Photoshop إلى الطبقة المقابلة!
لا تتردد في اللعب مع نموذج بالحجم الطبيعي, أو يمكنك حتى إنشاء النموذج الأولي للتطبيق الخاص بك من نموذج بالحجم الطبيعي. بناءً على تطبيقك ، يمكنك تضمين مجموعة كبيرة من الميزات داخل المنطقة الأساسية ، والتي يمكنك العثور على الكثير منها في ملف PSD هذا. من الممكن أيضًا الانتقال إلى طبقات هذه العناصر وتحرير الخطوط والألوان المتدرجة وأنماط التصميم الأخرى أيضًا. مجرد تأكد من عدم تغيير حجم أي شيء منذ أن تم تعيين جميع الأشرطة وعناصر واجهة المستخدم إلى الأحجام القياسية الافتراضية.
تطوير التطبيقات في Xcode
يدعى أداة المطور لبرمجة iOS و Mac OS X باسم Xcode. إذا كنت تقوم بتشغيل OS X Lion ، فيمكنك العثور على Xcode وجميع الحزم المطبقة مجانًا في متجر تطبيقات ماك.
بعد اكتمال التثبيت ، قم بتشغيل Xcode وستظهر شاشة الترحيب الخاصة به. من هنا ، يمكنك تحميل مشروع قديم أو اختيار إنشاء مشروع جديد. الآن تحتاج إلى النقر “إنشاء مشروع Xcode جديد“, ثم نافذة القالب سوف تأتي مع عدد قليل من الخيارات. ضمن iOS> التطبيق ، انقر فوق “تطبيق عرض واحد” وضرب “التالى”. يمكنك إعطاء التطبيق الجديد اسما, مثل اختبار (يفضل عدم وجود مسافات) ، ثم على معرف شركة, اكتب في أي كلمة مثل شركتي, وأخيرا اختيار الدليل وضرب “حفظ”.
سيقوم Xcode بإنشاء دليل الملف وإرسالك إلى نافذة جديدة للعمل. يجب أن تشاهد الكثير من خيارات الملفات المدرجة ، ولكن المجلد الذي يدعى بعد طلبك هو التركيز الرئيسي.
مع Xcode لديك خياران لتصميم عناصر الواجهة الأمامية. الكلاسيكية xib / بنك الاستثمار القومي التنسيق قياسي في تطبيقات Mac OS X و iOS ، مما يتطلب منك تصميم عرض صفحة جديد في كل مرة. ومع ذلك ، نظرًا لأنك تقوم بإنشاء المزيد من المشاهدات في تطبيق واحد ، يمكن أن تصبح كمية ملفات nib هائلة للغاية ، لذلك القصة المصورة يحتفظ الملف بكافة طرق عرض بنك الاستثمار القومي في جزء محرر واحد. من هنا ، يمكنك إزالة وإضافة عناصر وميزات واجهة المستخدم بسهولة.
بالإضافة إلى أنك سوف تأتي عبر .ح و .م الملفات في نفس المجموعة المجلد. هذه هي أسماء قصيرة ل رأس و التنفيذ الشفرة. هذه الملفات هي المكان الذي تكتب فيه جميع وظائف Objective-C والمتغيرات المطلوبة لتشغيل التطبيق. قد تكون فكرة جيدة شرح كيفية عمل Xcode MVC (نموذج ، عرض ، تحكم), وهذا هو السبب في أننا بحاجة إلى 2 ملفات لكل وحدة تحكم.
MVC برمجة التسلسل الهرمي
لفهم كيفية عمل التطبيق ، ستحتاج إلى فهم بنية البرمجة الخاصة به. مع نموذج ، عرض ، تحكم (MVC) كأساس, يمكن أن يفصل Xcode جميع شاشات العرض ورمز الواجهة عن وظائف المنطق والمعالجة ، ولا يوجد بالفعل خيار آخر للاختيار. قد يبدو MVC مربكًا في البداية ، ولكن إذا حاولت فهمه وبدء إنشاء بعض التطبيقات الأساسية ، فستعجبك البنية.
لتسهيل الفهم ، قدمت كل كائن في القائمة أدناه:
- نموذج - يحمل كل من المنطق والبيانات الأساسية. ويشمل ذلك المتغيرات ، وصلات لخلاصات أو صور آر إس إس الخارجية ، وظائف مفصلة ، وعدد الأرقام. هذه الطبقة منفصلة تمامًا عن طرق العرض الخاصة بك بحيث يمكنك بسهولة تغيير طرق العرض وتظل تعمل نفس البيانات.
- رأي - شاشة أو نمط عرض في التطبيق الخاص بك. قائمة الجدول ، صفحة الملف الشخصي ، صفحة ملخص المقالة ، مشغل الصوت ، مشغل الفيديو ، هذه كلها أمثلة على طرق العرض. يمكنك تغيير أنماطها وإزالة العناصر ولكنك ستظل تعمل مع نفس البيانات في النموذج الخاص بك.
- مراقب - يعمل كوسيط بين اثنين آخرين. تقوم بتوصيل الكائنات في طريقة العرض الخاصة بك إلى ViewController الذي يمرر المعلومات من وإلى النموذج الخاص بك. لذلك بهذه الطريقة ، يمكن أن يكون لديك نقرة على زر وتسجيل ذلك في النموذج الخاص بك. ثم قم بتشغيل وظيفة تسجيل الخروج ومن خلال وحدة تحكم نفس تمرير رسالة “تسجيل الخروج بنجاح!”.
لذلك أساسا الخاص بك نموذج يحمل جميع المعلومات والوظائف التي ستحتاج إلى عرضها في مكان ما على الشاشة. لكن النماذج لا يمكن أن تتفاعل مع الشاشة ، فقط المشاهدات يمكن. تكون طرق العرض في الغالب كل العناصر المرئية ، ويمكنها فقط سحب البيانات من خلال ViewController. ال يعتبر جهاز التحكم في الواقع طريقة أكثر دقة لإخفاء بيانات النهاية الخلفية من تصميم الواجهة الأمامية. وبهذه الطريقة يمكنك تجديد التصميم عدة مرات مع عدم فقدان أي وظيفة.
مع هذه المعرفة ، لن يكون من الصعب البدء في إنشاء تطبيقاتك القليلة الأولى. كما ذكر آنفا, ج موضوعية هي لغة البرمجة الأساسية التي ستستخدمها لتطوير التطبيق. إنها مبنية على لغة C مع بناء جملة محدث وبعض النماذج الإضافية. ستحتاج إلى الكثير من الوقت للتعرف على اللغة ، لكن بالنسبة إلى الدرس للمبتدئين أوصي بسلسلة البرنامج التعليمي من Mobiletuts+.
عرض التصميم مع القصص المصورة
الآن وبعد أن نظرنا في الجوانب التقنية للتطبيق ، يجب أن نقضي بعض الوقت في تصميم الواجهة. أنا أفترض أنك حافظت على “القصة المصورة” اختيار فحص عند إنشاء المشروع ، مما يعني أنه يمكنك العثور على واحد MainStoryboard_iPhone.storyboard ملف في مكان ما في مجموعة المجلدات الموجودة على الجانب الأيسر من النافذة. انقر فوق الملف لتحديده وفتح العرض.
يجب أن يظهر شريط جانبي جديد مباشرة على يمين مجموعة المجلدات. وهذا ما يسمى مخطط المستند وهو نوع من طريقة المعاينة السريعة لفحص جميع المشاهدات المتاحة في لوحة العمل هذه.
نريد أن نبدأ بإضافة عناصر قليلة من الصفحة إلى وحدة التحكم في طريقة العرض الخاصة بنا. نحتاج إلى عنصرين مختلفين: شريط التنقل و شريط التبويب. قبل الاستيلاء عليها ، والوصول إلى سمات المفتش (عرض> أدوات مساعدة> إظهار مفتش السمات) على الجانب الأيمن من النافذة ، ثم ابحث عن شريط الحالة ضع الكلمة المناسبة. بشكل افتراضي ، يتم ضبطه على مستنتج الذي يستخدم لون حالة iPhone القياسية ، ولكن يمكنك أيضًا اختيار أسود أو أسود شفاف إذا كان تصميم التطبيق الخاص بك يناسب اللون بشكل أفضل.
مكتبة الكائنات
إذا كان خدمات جزء على الجانب الأيمن من النافذة غير مرئي ، يمكنك تمكينه عن طريق الوصول إلى View> Utilities> Show Utilities. في جزء "الأدوات المساعدة" ، انظر إلى الجزء السفلي من لوحة تسمى مكتبة الكائنات. حصلت على قائمة منسدلة مع “شاء” كعنصر أول من القائمة. إذا لم تتمكن من العثور عليه ، يمكنك تحديد View> Utilities> Show Object Library.
من القائمة المنسدلة لمكتبة الكائنات ، ابحث عن وحدده النوافذ والبارات. الآن انقر على شريط التنقل, اسحبه في نافذة العرض وضعه مباشرة أسفل الأسود شريط الحالة (مع رمز البطارية). يمكننا تخصيص وصف شريط العنوان الآن. انقر مرتين على النص الذي يقرأ حاليا “عنوان“, وسترى تسمية اسمه “عنوان” في جزء الأدوات المساعدة ، والتي يمكنك تغيير وصف العنوان إلى “اختبار” من هناك. نجاح “أدخل” ليشهدوا التغيير.
مرة أخرى في لوحة Windows & Bars ، قم بالتمرير لأسفل للعثور على شريط التبويب, ثم اسحبه إلى نافذة العرض وضعه في أسفل التطبيق. افتراضيا هذه العناصر 2 تبدو رائعة.
الآن ربما تريد أن يتطابق التدرج اللوني في شريط التنقل مع شريط علامات التبويب في الأسفل ، وللقيام بذلك ، يمكنك النقر على شريط التنقل والانتقال إلى اليمين في سمات لوحة في جزء الأدوات المساعدة. الخيار الأول للغاية يسمى قلم المدقة, الذي تم تعيينه إلى الافتراضي. تغيير النمط من الافتراضي إلى أسود غير شفاف وسيكون لدينا مجموعة لون مطابقة!
لنقم أيضًا بإضافة زر علامة تبويب أخرى في الشريط السفلي للتطبيق. حرك مؤشر الماوس إلى لوحة Windows & Bars مرة أخرى وانتقل لأسفل إلى عنصر شريط علامة التبويب, مباشرة تحت Tab Bar. اسحب هذا إلى نافذة التطبيق ووضعه في منتصف زري شريط Tab الحاليين. إذا قمت بالنقر نقرًا مزدوجًا فوق هذا الزر الجديد ، يمكنك رؤية بعض الخيارات الإضافية في جزء الأدوات المساعدة ، فيمكنك تغيير العنصر صورة و عنوان من هناك. على سبيل المثال ، لقد غيرت العنوان إلى “المرجعية” بالنسبة لعنصر Tab Bar المضافة حديثًا.
لذلك هذا هو برنامج تعليمي موجز حول تصميم وجهات النظر داخل Xcode. إنها ليست عملية صعبة للغاية ، ولكنها ستتطلب مزيدًا من الوقت لتعتاد على الواجهة. العب مع بعض العناصر الإضافية إذا كنت تشعر بالراحة ، كما يمكنك التوجه إلى موارد تطوير iOS من Apple للحصول على مزيد من موارد التعلم ، وليس من الجيد اكتشاف المزيد!
ترقبوا الجزء الثاني
بهذا نختتم الجزء الأول من دليل تصميم وتطوير تطبيق iPhone. في الجزء التالي ، سنتعمق أكثر في Objective-C و Cocoa Touch ، وستتعلم في نهاية المطاف إنشاء تطبيق iPhone فعال ، تابعونا!
معرض تصميم iOS
بالنسبة للمصممين الموجودين هناك ، آمل أيضًا أن أحضر لك بعض الإلهام ، لذلك قمت بتضمين قائمة بمشاهد رائع لتطبيق iPhone أدناه. تحتوي القائمة على مجموعة كبيرة ومتنوعة من عناصر التطبيق الملهمة التي ربما لم تلاحظها من قبل. لا تتردد في مشاركة أفكارك أو مشاهدات التطبيق أو الأسئلة في قسم التعليقات أدناه ، شكرًا لك!
سباق الفاصل
الارتياح عن بعد
سقسقة ل iPhone
ريدر
شخصيات قصص الابطال الخارقين
ميل تشيمب
إينستاجرام
Joystiq
Piictu
ظلام
