ساخت اولین اپ iOS توسط شما!

قراره چیکار کنیم؟

پس از معرفی زبان برنامه نویسی Swift در سال 2014 توسط شرکت اپل ، روز به روز شاهد ارائه بروزرسانی ها و افزونه های خفن تر و جذاب تر برای این زبان هستیم ، در مورد زبان برنامه نویسی Swift و سایر اطلاعات تکمیلی مربوط به اون مقاله جداگانه ای منتشر خواهم کرد، در اینجا ، ما قصد داریم یک مینی اپ تمرینی ساده رو برای آیفون بسازیم و اجراش کنیم...

بیشتر در مورد سویفت...

سویفت خیلی حرف واسه گفتن داره و از زبان های مورد علاقه من هم هست ، اما در این مقاله تنها به بخشی از گفتاورد معرفی اون میپردازیم:

سویفت یک زبان برنامه‌نویسی چند شیوه‌ای و از نوع کامپایلریه که برای توسعهٔ iOS، macOS، watchOS و tvOS توسط شرکت اپل ساخته‌شده‌است، بدین منظور شما باهاش براحتی میتونی برای آیفون ، آیپد ، آیپاد ، اپل واچ ، آیمک ، مک بوک و مک پرو برنامه نویسی انجام بدی! سویفت برای کار با فریمورک‌های Cocoa و Cocoa Touch اپل و تعامل با حجم عظیمی از کدهای Objective-C نوشته شده برای محصولات اپل طراحی شده‌است. سویفت می‌خواهد جلوی خطاهای برنامه‌نویسی را بیشتر بگیرد و امنیت بیشتری نسبت به Objective-C داشته باشد و در عین حال نگارش مختصرتر و کوتاه‌تری داشته باشد. این زبان توسط کامپایلر LLVM که درون برنامهٔ Xcode قرار دارد (و برای لینوکس به صورت برنامهٔ جدا در دسترس است) ساخته می‌شود و سپس از ران تایم از زبان Objective-C بهره می‌برد که اجازه می‌دهد کدهای سویفت کنار کدهای C، C++ و Objective-C در کنار هم در یک برنامه اجرا شود.

سویفت از مفاهیم پایه‌ای پشتیبانی می‌کند که زبان Objective-C را انعطاف‌پذیر (مخصوصا در dynamic dispath و late binding) و قابل گسترش نموده است. این امکانات به عنوان تعادل کارایی و امنیت معروف هستند و سویفت برای حل آن طراحی شده‌است. برای امنیت، سویفت یک سیستم معرفی کرده که به رفع خطاهای رایج برنامه‌نویسی مانند اشاره‌گرهای خالی، کمک می‌کند، همچنین نگارش‌های ساده‌تر برای سهولت در خواندن کد نیز معرفی شده‌است. برای مشکلات کارایی، اپل تلاش قابل توجهی برای بهینه‌سازی انجام داده که سربار فراخوانی متدها را از بین می‌برد و فرایند را ساده‌تر می‌کند. اساساً سویفت مفهوم گسترش قراردادی (protocol extensibility) را دربرمی‌گیرد که به تایپ‌ها، ساختارها و کلاس‌ها می‌توان افزود. اپل این قابلیت را به عنوان یک تغییر جدی در شیوهٔ برنامه‌نویسی می‌داند و به عنوان «برنامه‌نویسی قرارداد محور» از آن یاد می‌کند.

سویفت در کنفرانس جهانی توسعه‌دهندگان اپل (WWDC) در سال ۲۰۱۴ معرفی شد. در سال ۲۰۱۴ با یک بروزرسانی به نسخه ۱٫۲ ارتقاء پیدا کرد و با یک بروزرسانی بزرگ، در WWDC سال ۲۰۱۵ به نسخه ۲ بروز شد. در نسخهٔ ۲٫۲ متن باز شد و تحت لیسانس آپاچی ۲٫۰ در ۳ دسامبر ۲۰۱۵ برای پلتفرم‌های اپل و لینوکس عرضه شد. IBM هم سایت شبیه‌ساز سویفت خود را معرفی نمود که در آن توسعه‌دهندگان می‌توانند در یک سمت کد سویفت بنویسند و در سمت دیگر خروجی آن را مشاهده کنند.

خلاصه که سویفت خیلی باحال و خفنه در موردش میتونید در ویکی پدیا مفصل تر بخونید...

شروع ساخت اولین برنامه

بگذریم... شاید از کاربرانی باشید که تجربه برنامه نویسی را پیش از این داشته اید ، شاید هم نداشته اید! مهم نیست! در اینجا میخواهیم اولین برنامه کامل iOSی خودمون رو بسازیم!

در ابتدا یک اپلیکیشن ساده با هم خواهیم ساخت که با کلیک بر روی دکمه عبارت دوست داشتنی Hello World رو به کاربر نشون میده ، اما این پایان ماجرا نخواهد بود و در ادامه با کار کردن و توسعه اپلیکیشن قابلیت های جالب تری بهش اضافه خواهیم کرد.

چرا این کار رو میکنیم؟

• ساخت برنامه های ساده و فانکشنال کردن اونها به افراد مبتدی و تازه کار خیلی کمک میکنه تا با فضای پروژه های واقعی بیشتر آشنا بشن.
• مفاهیم اولیه و پایه ای سویفت براتون تکرار و در ذهنتون تثبیت میشه ، همچنین ممکنه در طول مسیر آموزش در قسمت هایی بدفهمی و کج فهمی بوجود اومده باشه که با ساخت پروژه های کوچک و تمرینی این مشکلات حل میشه.
• کارکردن با قسمت های مختلف ابزار توسعه اپل (Xcode) براتون راحت تر میشه و دستتون در استفاده از قابلیت های این برنامه راه میفته و سرعتتون به شدت بیشتر میشه.
• درک ساز و کار و رویه های متفاوت سویفت با سایر زبان های برنامه نویسی بطور ملموس تر براتون رقم میخوره و بهتون کمک میکنه راحت تر و زودتر با این سینتکس آشنا بشید.
• نحوه بیلد (Build) و کامپایل (Compile) گرفتن صحیح از برنامه ها در iOS رو بطور کامل و عمیق می آموزید.
• و از همه مهم تر، برای شادابی پوست و تناسب اندامتون خیلی مفیده

داره دیر میشه!

خب بیاید شروع کنیم دوستان ، برنامه Xcode تون رو باز کنید (نسخه 12به بالا باشه اگه نیست از طریق Mac AppStore آپدیتش کنید) ، در اولین باز کردن اکس کد ، یک صفحه خوش آمد گویی به شما نمایش داده میشه.

با استفاده از گزینه Create a new Xcode project یک پروژه جدید میسازیم ، بعد از انتخاب این گزینه ، اکس کد یک سری تمپلیت (Templates) های آماده برای انواع و اقسام اپ های رایج در هر پلت فرم ارائه میده.

همونطور که میبینید با استفاده از اکس کد شما میتوانید برای پلت فرم های iOS ، macOS ، WatchOS ، tvOS و حتی اپ های Cross-Platform و IAB Appliance تولید کنید.(IAB = In-App Billing) ، در هر حال در این قسمت گزینه App رو انتخاب کنید ، این مورد یک پروژه خام فاقد تمپلیت های پیش ساخته براتون ایجاد میکنه و برای تولید تقریبا تمام اپ های آی او اسی مناسبه ، بر روی Next کلیک کنید.

خب در این قسمت یک سری اطلاعات راجع به پروژه ای که در حال ساخت اون هستید ازتون میپرسه که من یک یکشونو! براتون توضیح میدم:

Product Name - نام محصول / اپ :

در واقع این مورد ، همون نام برنامه یا محصول شما هستش.

Team - تیم(گروه) :

این برای زمانیه که میخواید بصورت گروهی یا میان سازمانی بر روی یک پروژه کار کنید ، خب خیلی توضیح این بخش مفصله ، اما خب مسلّماً ما در اولین اپی که میسازیم بصورت تیمی کار نخواهیم کرد! پس بر روی None تنظیمش کنید و ازش رد شید.

Organization Identifier - باندِل آیدِنتیفایِر(شناسه بسته):

این در واقع یه چیزی تو مایه های همون پکیج نیم توی اندرویده ، در موردش کامل و مفصل اینجا بخونید ، در حد کار راه بینداز هم بخوام خدمتتون بگم شناسه تمایز اپلیکیشن تون هست که بصورت رشته معمولا سه تیکه ای با دو نقطه از هم جدا میشه و بصورت Reverse Domain-Name هست ، برای مثال دامنه بنده abolpv.com هست ، اولین پروژم باندل آیدیش به این شکل خواهد شد: com.abolpv.firstapp

Interface - رابط کاربری :

از قابلیت های جدید و کرک ریزون اکس کد اینه که شما اجازه دارید برای رابطه کاربری تون بین استوری برد و سویفت یو آی یکی رو انتخاب کنید ، در این پروژه ما از Storyboard استفاده خواهیم کرد، توصیه میکنم تعاریف و تفاوت های دقیق میان Storyboard و Swift UI رو حتما مطالعه کنید.

Life Cycle - چرخه حیات :

خب اپل اومده بطور پیشفرض UIKit رو برای چرخه حیات اپ قرار داده ، اگه هنوز نمیدونید چرخه حیات در اپ های iOS چه تعریفی داره و معنیش چیه ، خواهشا اون رو با چرخه حیات اکتیویتی در اندروید اشتباه نگیرید و به اینجا مراجعه کنید.

Language - زبان توسعه :

خب همونطور که مستحضر هستید اکس کد از دو زبان Swift و Objective-C (زین پس Obj-c عنوان میشود :/ ) بطور همزمان پشتیبانی میکند ، لذا لازم است که زبان توسعه پروژه در حال ساخت مشخص گردد ( که اگه خدا بخواد و یادتون مونده باشه قرار شد این اپ رو با Swift پیش ببریم! :/ )

Use Core Data - استفاده از ساختار هسته داده :

تیک این گزینه رو بردارید ، ما برای این پروژه ساده نیازی به کُر دیتا نداریم ، اگه نمیدونید Core Data چیه ، اینجا رو یه نگاه بندازید.

Include Tests - در بر داشتن نسخ تستی :

برای این پروژه نیازی به اعمال فایل های تست و آزمون برنامه نیست ، لذا تیک این گزینه رو هم بردارید!

خب روی Next کلیک کنید در اینجا یک مسیر برای ذخیره سازی پروژه ازتون میخواد که انتخاب میکنید.

خب اینجا یک گزینه خیلی مهم داریم تحت عنوان Source Control که در این پروژه نیازی بهش نداریم و تیکش رو باید بردارید ، اما در حالت کلی ، در صورتی که برنامه نویس هستید و یا میخواید که برنامه نویس بشید ، حتما و حتما این مقاله رو راجه به گیت و سورس کنترل بخونید.

بعد از انتخاب مسیر ذخیره سازی و برداشتن تیک سورس کنترل بر روی Create کلیک کنید و چند لحظه صبر کنید...

آغاز کار بر روی اولین اپ iOS

خب اگه همه مراحل رو درست پیش رفته باشید و بچه خوبی هم بوده باشید ، اکس کد بطور خودکار پروژه جدید رو در مسیر انتخابی میسازه و یه همچین پنجره ای رو بهتون نمایش میده:

آشنایی بیشتر با Xcode

بهتره قبل از اینکه بیایم درگیر طراحی و کدنویسی و سایر بخش های فنی کار بشیم کمی بیشتر با محیط اکس کد آشنا بشیم تا در ادامه کار بتونیم راحت تر و بدون دغدغه تر با اکس کد کار کنیم ، اکس کد در حالت Standard View-Navigator دارای سه بخش عمودی کلی (pane) هستش ، در قسمت سمت چپ یک نویگیتور شامل تمامی فایل ها و دایرکتوری های پروژه وجود داره که با انتخاب هر کدوم از اونها در بخش وسطی اطلاعات و تنظیمات و دسترسی ها و دادگان اون فایل برای ما به معرض نمایش در میاد ، در بخش سمت چپ هم یک سری آپشن ها و تنظیمات اختصاصی (معمولا برای تنظیم و تعیین دیفالت ها و صفت ها) برای هر فایل انتخاب شده وجود داره.

برای مثال وقتی شما در میان فایل های پروژه بر روی ViewController.swift دابل کلیک میکنید ، سورس کد مربوط به این فایل در پنجره وسطی و تنظیمات اون در سمت راست در اختیار شما قرار میگیره:

یا برای مثال اگه بر روی Main.storyboard دابل کلیک کنید ، اکس کد تنظیمات مربوط به رابط کاربری و گرافیکی رو بهتون نشون میده ، انصافا باید اعتراف کنم طراحی رابط گرافیکی اپلیکیشن های iOS علی رغم محدودیت هایی که داره خیلی جذاب تر از اندرویده (نظر شخصی :/ )

سه تا نکته بنا به احتیاط لازم!

• بعضی موقع ها ناحیه سمت چپی مخفی میشه و توسط اکس کد نمایش داده نمیشه ، در این حالت شما میتونید از دکمه تعبیه شده برای این منظور استفاده کنید تا به حالت قبلش برگرده و همه چیز اوکی شه ، حتی میتونید زمان هایی که این پنجره رو نیاز ندارید مخفی ش کنید.

• شاید ضروری باشه که بدونید ما در این آموزش از MacOS Big sur 11.0.1 استفاده کردیم و نسخه اکس کدمون هم 12 بوده ، با این حال طبق تجربه شخصی بنده ، موقعیت های دکمه ها و گزینه ها تا حدودی میتونه متفاوت باشه (حداقل در MacOS Catalina و High Sierra که به این شکل بود! )
• بعضی از دوستان هسند که سندروم پس زمینه روشن دارن! خب اکس کد برای این دوستان هم یه فکرایی کرده میتونید از مسیر زیر Dark Mode رو فعال و یا تنظیمات مربوط به تم برنامه رو نیز تغییر بدید:
  Xcode -> Preferences -> Themes

چک کردن آب و روغن!

بدک نیست که پیش از دست به کد شدن ، یک مرتبطه از پروژه خام خودمون اجرا (Run) بگیریم ، برای این منظور میتونید از دکمه های کنترلی بالا استفاده کنید.

یکی از برگ برنده های بی چون و چرای Xcode و بطور کلی کدنویسی Swift وجود شبیه ساز (Simulator) های قدرتمند و کاملا منعطف با مصرف منابع پایین هستش ، خوبی بزرگ این شبیه ساز ها این هستش که همه دیتا های مربوط به نصب و راه اندازی شون بصورت باندل داخل خود پکیج اکس کد هست و بهمراه همون براحتی نصب و اجرا میشه و همانند اندروید استودیو شما رو درگیر مراحل پیچیده نصب و پیکربندی SDK و JDK و NDK و SImage و SCore و.... و موارد مشابه این نمیکنه!

خب تبریک میگم ، این صفحه خالی و سفید خروجی پروژه شما تا اینجای کاره ، حالا بریم که با آشنایی نسبت به چند تعریف مهم ، ظاهر برنامه مون رو کمی از این سفیدی در بیاریم...

بررسی UIKit , Scene و Storyboard

این سه مورد از مهم ترین بخش های تبدیل و طراحی رابط کاربری هستش ، این موارد هر کدوم توضیحات و تفاسیر به شدت دقیق و طولانی دارند ، اما بطور کلی Scene ها ، نما ها(View هایی) هستند که داخل هر Storyboard قرار میگیرند و مابقی اجزا و عناصر گرافیکی-شمایی ، مثل دکمه ها ، تصاویر ، متون و... داخل این Scene ها قرار میگیرند و در نهایت به دید کاربر میرسند ، نکته قابل اهمیت در این بخش ، رعایت سلسله مراتب مربوط به قرار گیری و ترتیب این اجزا و عناصر هست بطوری که تمامی این عناصر در سر جای خود و در لایه درست قرار بگیرند تا در ویو های مختلف (ابعاد مختلف دستگاه های مختلف) نمای درستی از اپ به کاربر ارایه کنند یا به قول وب دیزاینر ها ، واکنشگرا (Responsive) باشند.

آغاز طراحی رابط کاربری

بیاید شروع کنیم! ابتدا میخوایم یک دکمه Hello World به مرکز صفحه برنامه مون اضافه کنیم ، در بالا سمت راست بر روی علامت مثبت + کلیک کنید تا آبجکت های قابل استفاده بسته به نوع رابط کاربری تون رو بهتون نمایش بده ، سپس به وسیله درگ اند دراپ اون رو به وسط صفحه منتقل کنید.

وقتی که یک آبجکت گرافیکی رو به استوری برد منتقل میکنید خطوط راهنما برای گرید و حاشیه بطور خودکار نمایش داده میشن و پیدا کردن وسط و منتها الیه رو بصورت طولی (Horizental) و عرضی (Vertical) براتون خیلی راحت میکنن ، طراحی رابط کاربری iOS خیلی آرامش بخشه (اگه قبلا طراحی UI برای اندروید و وب و ویندوز رو تجربه کرده باشید باشید با پوست و خونتون درک میکنید منظورم رو!) المنت ها و عناصر دیگه ای رو بررسی کنید ، برای اینکار میتونید اونها رو هم به صفحه اصلی اضافه کنید ، با دابل کلیک کردن روشون ، متن و تنظیماتشون رو تغییر بدید و به روشی که بالا گفته شد ازشون خروجی بگیرید تا با خروجی خام هر کدوم آشنایی کامل پیدا کنید...

متن Button رو به Hello World تغییر بدید و عرض اون رو افزایش دهید ، برای این منظور هم میتونید از نوار حاشیه متن استفاده کنید و هم اگه موفق به اینکار نشیدید از کلید های ترکیبی Command + = استفاده کنید.

خب تا اینجای کار تونستیم عرض این دکمه بهمراه نوشته اون رو تغییر بدیم و به عرض مورد نظر خودمون برسونیمش ، حالا میتونیم از اپلیکیشنمون اجرا بگیریم (!!!) بله درسته ، تعجب نکنید! این یکی از ویژگی ها و زیبایی های برنامه نویسی برای iOS هست که طراحی رابط کاربری هیچ ربطی به کدنویسی برنامه داره و در حدی تفکیک و از هم جدا شده اند که شما میتونید بدون حتی نوشتن یک خط کد و فقط با طراحی رابط کاربری خام از برنامه خودتون خروجی بگیرید و اون رو روی شبیه ساز اجرا کنید.

این هم از خروجی گرافیکی فایل استوری بردمون که بهش عنصر گرافیکی هم اضافه کردیم ، بریم که عملگر های این دکمه رو به اکسکد معرفی کنیم...

آغاز کدنویسی دکمه Hello World

باید توجه کنید که ما در این مقاله قصد آموزش زبان Swift رو نداریم و بنابر این لازمه یک آشنایی کلی از این زبان داشته باشید ، در غیر اینصورت ، توصیه میکنم این مطلب مفید رو یه نگاه بندازید.

در هر پروژه سویفتی که ایجاد میکنید ، یک فایل مهم تحت عنوان Viewcontroller.swift خواهید داشت ، این به این دلیل است که ما در مرحله ساخت و ایجاد پروژه تمپلیت App رو انتخاب کردیم و این فایل ، از ویژگی های بنیادین یک پروژه در قالب تمپلیت App هستش ، این فایل رو انتخاب کنید تا شروع کنیم...

در صورتی که قبلا آبجکتیو-سی کار کردید ، احتمالا به دنبال فایل های معروف هدر (Header) و ایمپلمنتیشن (Implementation) میگردید تا کدنویسی رو شروع کنید ، اما در پروژه های سویفتی این دو فایل که با فرمت های .h و .m یافت میشدن ، همگی ادغام (Combine) و در یک فایل با فرمت .swift جا گرفتن!

فایل ویوکنترلر رو باز کنید و کد های زیر رو در کلاس ViewController درج کنید:

@IBAction func showMessage(sender: UIButton) {
let alertController = UIAlertController(title: &quotWelcome to My First App&quot, message: &quotHello World&quot, preferredStyle: UIAlertController.Style.alert)
alertController.addAction(UIAlertAction(title: &quotOK&quot, style: UIAlertAction.Style.default, handler: nil))
present(alertController, animated: true, completion: nil)
}

انصافا یه تایمی بزارید و کد ها رو خودتون تایپ کنید ، با کپی پیست هیچ چیز عایدتون نخواهد شد :/

در نهایت کد های داخل فایل ViewController.swift شما باید به همچین شکلی در بیاد:

import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
@IBAction func showMessage(sender: UIButton) {
let alertController = UIAlertController(title: &quotWelcome to My First App&quot, message: &quotHello World&quot, preferredStyle: UIAlertController.Style.alert)
alertController.addAction(UIAlertAction(title: &quotOK&quot, style: UIAlertAction.Style.default, handler: nil))
present(alertController, animated: true, completion: nil)
}
}

همونطور که میدونید مشابه خیلی از زبان های دیگه ، در سویفت هم از // برای کامنت کردن یک خط و از /* و */ برای کامنت کردن چندین خط کد استفاده میشه.

در صورتی که از برنامه خروجی بگیرید باز هم نتیجه مشابه خروجی قبل خواهد بود ، دلیل این امر هم واضحه ، این مهم به این خاطره که هنوز یک مرحله مهم از کار باقی مونده...

درگیر کردن موتور و گیربکس!

خوب شما با موفقیت موتور(کدنویسی) و گیربکس(رابط کاربری) خودرو تون رو ساختید ، اما هنوز اونها رو درگیر نکردید! برای درگیر کردن این دو باید چیکار کنید؟؟ بله ، درسته... ، باید پاتون رو از روی کلاج بردارید ، اما خبر خوبی براتون دارم ، بر خلاف Android Studio ، در اینجا Xcode کاملا دنده اتوماته! و موقع درگیر کردن این دو اصلا تقه و تکون نداره!

در واقع در برنامه نویسی iOS اتصال رابط کاربری با کد های شما راحت تر از چیزی که فکر میکنید و یا در توسعه اپ های دیگه دیدید انجام میشه! برای اینکار ، کافیه فایل استوری بوردتون رو (Main.storyboard) باز کنید ، بعدش کلید Key از روی کیبورد رو فشار بدید و پس از انتخاب دکمه هلو ورلدی که از قبل ساختیم ، اون رو به علامت ویو کنترلر (سمت چپ) درگ کنید، خب با این کار یک لیست براتون باز میشه و شما باید showMessageWithSender رو انتخاب کنید:

اپلیکیشن خود را تست کنید

حالا وقتشه که اپلیکیشن خودمون رو تست کنیم ، بدین منظور از قسمت Run میتونید براحتی این کار رو انجام بدید ، اگر همه مراحل رو درست پیش برده باشیم ، در هنگام لانچ اپلیکیشن ، هنگامی که بر روی Hellow World کلیک میکنید ، باید عبارت Welcome to My First App برای کاربر نمایش داده بشه:

هر چند که مبتندی باشید ، اما خب میتونید بدون انجام کد نویسی هم رابط کاربری رو در iOS تغییر بدید و اپلیکیشن خودتون رو شکیل ترش کنید ، تصویر زیر یک راهنمایی فوق العاده در رابطه با نحوه چگونگیه تغییر ویژگی ها و صفات عناصر در Xcode هستش:

یکم باهاش بازی کنید (با رابط کاربری! :/) بعدش از اپ خروجی بپیرید و نتیجه رو ببینید تا قلق این بخش دستتون بیاد...

نوبت شماست!

حالا وقتشه بعنوان یک تمرین ، بیاید با ابزاری های گرافیکی Xcode بیشتر درگیر بشید ، سعی کنید که نمای رابط کاربری اپ خودتون رو به شکل زیر دربیارید:

لازمه که تعدادی دکمه بسازید و هر دکمه کال تو اکشن داشته باشه و به ازای کلیک روی هر کدوم متون متفاوتی نمایش داده بشه ، همچنین از ریزه کاری های طراحی رابط کاربری و المنت های شماتیک هم نباید غافل بشید

یک تمرین سخت تر اینه که شما تعدادی متن آماده تعیین کنید که به ازای کلیک بر روی هر دکمه یکی از متون بطور رندوم انتخاب بشه و سپس به کاربر نمایش داده بشه ( لزومی نداره از پایگاه داده استفاده بشه از یک آرایه استفاده کنید و برای فراخوانی بطور رندوم هم متد های بسیار زیادی وجود داره )

سخن پایانی

این مطلب تازه آغاز کارتون برای برنامه نویسیه سویفت خواهد بود ، هر وقت که به آخرش رسیدید انشالله یک سخن پایانی هم شما با ما داشته باشید ، ممنون از توجه تون که تا آخر این مقاله رو مطالعه کردید :)