簡單學會 iOS 開發

Slide 1

Slide 1 text

簡單學會 iOS 開發 Tuesday, August 13, 13

Slide 2

Slide 2 text

前⾔言 • 這是我在離開前公司前辦的 TOI 所作的投影⽚片 • 對象是三個專精於 Android 開發的⼯工程師 • 所講的內容涵蓋從⼀一開始的⼊入⾨門，編寫範例程式，然後到如何上架等等。⽤用的名詞是希望原先熟悉 Java/C++ 的⼯工程師能夠理解為主 • 內容基於 iOS6 以上 Tuesday, August 13, 13

Slide 3

Slide 3 text

上架開發註冊 •developer.apple.com •apple ID 開發者帳號 •XCode •Bundle ID •Provision Profile •XCode •Testflight •⽂文件 •Stackoverflow •XCode •developer.apple.com •iTunes Connect (ITC) Tuesday, August 13, 13

Slide 4

Slide 4 text

ADN: Apple Developer Network • developer.apple.com • ⽂文件、軟體下載、論壇、問題回報 • ⾦金鑰管理、Certiﬁcation、Bundle ID、管理裝置、Provisioning Tuesday, August 13, 13

Slide 5

Slide 5 text

XCode • 程式編譯執⾏行、專案管理、版本控管(git) • 裝置管理 • 模擬裝置 (Simulator) • Provision，app 散佈 Tuesday, August 13, 13

Slide 6

Slide 6 text

什麼是 Objective-C • ⼀一個物件導向式的程式語⾔言 • 是⼀一個有 20 年歷史的程式語⾔言，⼤大概跟 C++ 同⼀一年代 • ⻑⾧長得有點像 C ，但不是 C ，但相容 C+ + / C • 雖然舊，但每年 Apple 仍不斷的改善它 • 有 GC，但是 iOS 沒有實作 GC，⽽而是改⽤用效能更好的 ARC Tuesday, August 13, 13

Slide 7

Slide 7 text

什麼是 Objective-C • 物件導向，幾乎都是由物件構成，也經常套⽤用常⾒見的⼀一些物件導向的設計模式 • 有封裝、繼承、多型、成員函式、成員變數、成員覆寫等等物件導向特性 • 但是沒有多重繼承，也沒有 private 、 protected 成員，也沒有 java 中的 interface (virtual class)等東⻄西，也沒有 package 跟 namespace Tuesday, August 13, 13

Slide 8

Slide 8 text

• .h 跟 .m 檔 • .h 檔宣告物件類別 • .m 檔實作物件 • .xib Interface Builder 檔案 • .storyboard storyboard 檔案 Tuesday, August 13, 13

Slide 9

Slide 9 text

宣告類別名稱繼承類別成員函式宣告成員變數宣告描述⼦子型別變數名稱 Tuesday, August 13, 13

Slide 10

Slide 10 text

實作類別實作的類別函式實作 + 代表類別函式 - 代表成員函式 Tuesday, August 13, 13

Slide 11

Slide 11 text

類別名稱呼叫類別函式呼叫成員函式物件呼叫函式 (send message) 參數1 參數2 Tuesday, August 13, 13

Slide 12

Slide 12 text

幾個關鍵字 • nil : 代表空物件，所有變數在宣告還沒指定物件之前都是 nil • NSNull 是物件 • YES / NO / True / False • self : 在物件內代表⾃自⼰己。例如： self.age = 20; 或者 [self callMyFather]; • id : 代表物件型態，通常⽤用來作多型 Tuesday, August 13, 13

Slide 13

Slide 13 text

還有⼀一些常⾒見的物件表⽰示 • @”Hello World”; 代表⼀一個 NSString 物件。但是，“Hello World” 這是⼀一個 c string • @[@”Hello”, @”World”]; 代表⼀一個 NSArray 陣列物件。 • @{@”key”: @(123)} 代表⼀一個 NSDictionary 雜湊表物件 • @(23) @(YES), @(NO) 或者 @(32.23) 代表⼀一個 NSNumber 物件 Tuesday, August 13, 13

Slide 14

Slide 14 text

• NSString *str1 =@”Hello”; • NSString *str2 = @”World”; • if ([str1 isEqaulWithString:str2]) {} Tuesday, August 13, 13

Slide 15

Slide 15 text

• NSDictionary *dict = @{@”key”: @”value”}; • NSLog(@”Value is %@”, dict[@”key”]); • dict.keys; dict.values; • NSMutableDictionary *dict = [NSMutableDictionary dictWithDictionary:@{@”key”: @”value”}]; • dict[@”key2”] = @”Value2”; Tuesday, August 13, 13

Slide 16

Slide 16 text

物件名稱傳統表⽰示法新的表⽰示法 NSArray NSArray * array = [NSArray arrayWithObjects: @”hello”, @”world”, nil]; [array objectAtIndex:12]; NSArray * array = @[@”hello”, @”world”]; array[12]; NSDictionary NSDictionary *dict = [NSDictionary dictionaryWithObjects: @”value1”, @”value2”, nil forKeys: @”key1”, @”key2”, nil]; [dict objectForKey:@”key2”]; NSDictionary *dict = @{@”key1”: @”value1”, @”key2”: @”value2”}; dict[@”key2”]; NSNumber NSNumber *intNum = [NSNumber numberWithInt:12]; NSNumber *boolNum = [NSNumber numberWithBool: NO]; NSNumber *intNum = @(12); NSNumber *boolNum = @(YES); Tuesday, August 13, 13

Slide 17

Slide 17 text

ARC • Auto Reference Counting • Obj-C 記憶體管理是採⽤用 Reference Count 原則，當 Reference Count == 0 時，物件就會被釋放 • Before ARC: [obj retain]; [obj release]; • After ARC: [obj retain]; [obj release] • Compile time 技術，Runtime 不卡卡 Tuesday, August 13, 13

Slide 18

Slide 18 text

ARC • Before ARC: • @property (retain) UITableView *tableView; • After ARC: • @property (strong) UITableView *tableView • @property (weak) UITableView *tableView; • @property (assign) UIInteger age; Tuesday, August 13, 13

Slide 19

Slide 19 text

Auto Synthesis • XCode 4.4 之後，不再需要為你的 property 宣告 @synthesize • 所有 property 會⾃自動幫你宣告 setter 跟 getter • @property (strong) UITableView *tbView; • -(UITableView*)tbView; // getter • -(void)setTbView:(UITableView *tbView); // setter • _tbView; // 物件本⾝身 Tuesday, August 13, 13

Slide 20

Slide 20 text

Block • iOS4 之後新增加的語法 • Block 是⼀一段程式碼 (實際上是⼀一個物件) • 類似其他語⾔言中 closure 的概念 • 所有在 block 裡⽤用到的物件會⾃自動被 retain • Block 在 stack 中被建⽴立，運作於 heap 裡 • 常⽤用來作 Callback 函式 Tuesday, August 13, 13

Slide 21

Slide 21 text

Block 宣告 Block 實作呼叫 Block Callback 的⽤用法 Tuesday, August 13, 13

Slide 22

Slide 22 text

Block 也可以是 property 記得⽤用 copy 描述⼦子 http://blog.refractalize.org/post/10476042560/copy-vs-retain-for- objective-c-blocks 指定 onOpenHandler 的內容 Tuesday, August 13, 13

Slide 23

Slide 23 text

Multi-threads • 很少直接 fork thread • ⽐比較常⽤用 Queue 的概念管理 thread • NSFoundation: NSOperationQueue • GCD (Grand Central Dispatch) • Concurrent / Serial • Main thread 負責所有 UI 的 update Tuesday, August 13, 13

Slide 24

Slide 24 text

NSOperationQueue • 可以設定 Queue size (Concurrent / Serial) • 可以放⼊入⼀一堆 NSOperation 物件，依序執⾏行 • 可以 Cancel • 可以知道⺫⽬目前還有多少 Operation 尚未執⾏行 Tuesday, August 13, 13

Slide 25

Slide 25 text

NSBlockOperation • ⼀一個簡單的 NSOperation 物件 • 讓你可以在 block 裡編寫你想要執⾏行的程式碼 Tuesday, August 13, 13

Slide 26

Slide 26 text

GCD • Grand Central Dispatch (名字來源於紐約中央⾞車站) • 系統⽐比較底層的呼叫，讓你可以善⽤用多核 CPU 的好處 • 缺點是，⼀一旦 dispatch 出去，無法取消，你也無法知道⺫⽬目前有多少 task 尚未執⾏行 • dispatch_async / dispatch_sync • dispatch_get_main_queue() Tuesday, August 13, 13

Slide 27

Slide 27 text

GCD 最常看的⽤用法 • UI 的變動其實需要在 Main Thread 上執⾏行 • 如果在 background thread ，想要變動 UI 的話 •經常會⽤用 dispatch_async(dispatch_get_main_queue() ....) Tuesday, August 13, 13

Slide 28

Slide 28 text

什麼是 Cocoa Framework • Apple 封裝的 SDK Framework Library • 提供各式各樣的 API ，包含 UI、存取裝置、multithread、資料庫、網路等等 • 除了 Cocoa 外，還有其他許許多多的 Framework • 開發 iOS ⼤大部分都是與 Cocoa 奮戰，但是很多時候也會⽤用到 OpenSource 或者 3rdParty 的 Library Tuesday, August 13, 13

Slide 29

Slide 29 text

開發時常⽤用的套件管理 • cocoapods : 第三⽅方的套件管理程式，⽤用來讓開發者簡易的引⼊入第三⽅方套件 • 安裝： http://cocoapods.org/ • 使⽤用： • 在⺫⽬目錄下建⽴立跟編輯 Podﬁle • 執⾏行 pod install 命令安裝想要的套件 • 以後 xcode 都必須開啟 FavClient- iOS.xcworkspace 來修改程式 Tuesday, August 13, 13

Slide 30

Slide 30 text

IDE 說明 Tuesday, August 13, 13

Slide 31

Slide 31 text

檔案⺫⽬目錄結構 Editor Debug Console Symbols Tabs (Command + t) Breakpoints Editor 模式切換中斷程式，單步中斷 Tuesday, August 13, 13

Slide 32

Slide 32 text

Source Control Tuesday, August 13, 13

Slide 33

Slide 33 text

Tuesday, August 13, 13

Slide 34

Slide 34 text

Instrument - Debug and Performance Tuning Tuesday, August 13, 13

Slide 35

Slide 35 text

可疑的 peak ! 兇⼿手 Tuesday, August 13, 13

Slide 36

Slide 36 text

iOS UI 設計理念 Tuesday, August 13, 13

Slide 37

Slide 37 text

• MVC: Model / View / Controller • View 絕⼤大多數都是繼承於 UIView • Controller 是控制 UI 的核⼼心，絕⼤大多數都是繼承於 UIViewController Tuesday, August 13, 13

Slide 38

Slide 38 text

iOS Cocoa Framwork 內建的 Views Tuesday, August 13, 13

Slide 39

Slide 39 text

常⽤用的 Controllers • UIViewController • UINavigationController • UITableViewController • UITapBarController Tuesday, August 13, 13

Slide 40

Slide 40 text

製作⾃自⼰己的 ViewController • New Cocoa-Touch ﬁle • Subclass UIViewController • Create XIB ﬁle Tuesday, August 13, 13

Slide 41

Slide 41 text

ViewController ⽣生命週期 • loadView • viewDidLoad • viewWillAppear • viewDidAppear • viewWillDisappear • viewDidDisappear • dealloc Tuesday, August 13, 13

Slide 42

Slide 42 text

ViewController ⽣生命週期 • 通常覆寫 viewDidLoad ，並在這 function 裡初始化你要⽤用到的物件跟 view • 如果有動畫要顯⽰示，在 viewDidAppear 中作 Tuesday, August 13, 13

Slide 43

Slide 43 text

• 如何從⼀一個 ViewController 彈出另外⼀一個 ViewController • -(void)presentViewController:(UIViewController*)viewController animated: (BOOL)ﬂag completion:(void (^)(void))completion; • transition styles: Cover vertical, Flipping, Cross Dissolve, Partial Curl • Dismiss ⺫⽬目前的 ViewController: • -(void)dismissViewControllerAnimated:(BOOL)ﬂag completion:(void (^) (void))completion Tuesday, August 13, 13

Slide 44

Slide 44 text

Navigation Controller Navigation Bar View Controller 1 View Controller 2 View Controller 3 Tuesday, August 13, 13

Slide 45

Slide 45 text

Navigation Controller • 設定 rootViewController (initWithRootViewController) • pushViewController:animated: • popViewControllerAnimated: • popToRootViewControllerAnimated: Tuesday, August 13, 13

Slide 46

Slide 46 text

Controller 與 View • 通常當你在新增新的 Controller 時， Xcode 會問你要不要順便產⽣生⼀一個 Interface • 意思就是說你可以透過 Interface Builder 來為你新的 Controller 設計 UI • Controller 會在 loadView 時，⾃自動載⼊入 Interface Builder 中所設計的 UI Tuesday, August 13, 13

Slide 47

Slide 47 text

Interface Builder • Apple 在 Xcode 裡提供的⼯工具，讓你所⾒見及所得去編輯設計 UI • 儲存下來的檔案實際上是⼀一個 XML 描述檔，附檔名為 xib • 所有 iOS 原⽣生的 UI Control 都可以從 Interface builder 中拖拉，決定屬性，跟⼤大⼩小顏⾊色等等 Tuesday, August 13, 13

Slide 48

Slide 48 text

Interface Builder • IB 幫助你設計 UI ，但是當你要針對 UI 元件去控制時，你必須告訴 Xcode ，在 UI 中這些元件是如何對應到你的程式碼 • 這時候會⽤用到 IBOutlet 跟 IBAction 兩個預設關鍵字 • ⽤用 IBOutlet 去宣告你要使⽤用的 UI 物件 • ⽤用 IBAction 去宣告你希望使⽤用者按下按鈕所要觸發的函式 Tuesday, August 13, 13

Slide 49

Slide 49 text

IBOutlet IBAction Tuesday, August 13, 13

Slide 50

Slide 50 text

連連看 • 在 Interface Builder 的 connection inspector 中，會看到 Reference Outlet 是⼀一個空⼼心的圓圈 • 點圓圈，按住左鍵，會拉出⼀一條線拉到 File’s Owner 上，這時候會出現⼀一個選單出現你可以連結的 IBOutlet，選擇你要的完成連線 • 如果是 Button ，通常我們要 hook “Touch Up Inside” event，這代表使⽤用者按下按鈕。你會在 Connection inspector 的 Touch Up inside 旁看到⼀一個空⼼心圓，⼀一樣把它拉到 File’s Owner，這時候會出現你有宣告的 IBAction ，完成連線 Tuesday, August 13, 13

Slide 51

Slide 51 text

• 連完之後，Xcode 就知道 Interface Builder 裡，UI 元件跟你程式碼間的關係了連線前連線後 Tuesday, August 13, 13

Slide 52

Slide 52 text

• storyboard 是在 iOS5 引⼊入的新功能 • 主要的作⽤用是可以讓你在同⼀一個檔案中編輯多個 ViewController 的介⾯面，並且描述他們之間的關係 • storyboard 有助於開發者眾觀整個 UI 的流程 • 附檔名就是 storyboard storyboard Tuesday, August 13, 13

Slide 53

Slide 53 text

storyboard • storyboard 操作⽅方式跟 Interface Builder ⼀一樣 • 當然，多了⼀一些東⻄西 ... Tuesday, August 13, 13

Slide 54

Slide 54 text

Table View • 相當常⾒見的元件 • View 與 Model 設計的標準範例 • delegate / datasource Tuesday, August 13, 13

Slide 55

Slide 55 text

⽤用程式加⼊入新的 View - (void) viewDidLoad { [super viewDidLoad]; CGRect newFrame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height); UITableView *tableView = [[UITableView alloc] initWithFrame:newFrame style:UITableViewStylePlain]; tableView.delegate = self; tableView.dataSource = self; [self.view addSubview: tableView]; } Tuesday, August 13, 13

Slide 56

Slide 56 text

⼀一個簡單的範例 Tuesday, August 13, 13

Slide 57

Slide 57 text

範例內容 • ⼀一個簡單的 app • 共有三個 View Controllers • 彼此之間⽤用 NavigationController 串起來 • TableView Tuesday, August 13, 13

Slide 58

Slide 58 text

Localization Tuesday, August 13, 13

Slide 59

Slide 59 text

字串 • NSLocalizedString(@”Message to show”, @”Comment”); • Build 過⼀一次後，字串會⾃自動加⼊入到 Localizable.strings Tuesday, August 13, 13

Slide 60

Slide 60 text

字串 • NSLocalizedString(@”Message to show”, @”Comment”); • Build 過⼀一次後，字串會⾃自動加⼊入到 Localizable.strings Tuesday, August 13, 13

Slide 61

Slide 61 text

字串 • NSLocalizedString(@”Message to show”, @”Comment”); • Build 過⼀一次後，字串會⾃自動加⼊入到 Localizable.strings Tuesday, August 13, 13

Slide 62

Slide 62 text

字串 • NSLocalizedString(@”Message to show”, @”Comment”); • Build 過⼀一次後，字串會⾃自動加⼊入到 Localizable.strings 翻譯⼈人員要翻的字串 Tuesday, August 13, 13

Slide 63

Slide 63 text

xib 怎麼辦？ • 三個⽅方法 • 把元件拉出來，在程式裡替換要顯⽰示的字串 • xib 可以每個語⾔言⼀一份，各⾃自翻譯(缺點是 maintain 不容易) • ⽤用 3rd party module，例如：https:// github.com/angelolloqui/AGi18n Tuesday, August 13, 13

Slide 64

Slide 64 text

更改 App Name 跟 Icon Tuesday, August 13, 13

Slide 65

Slide 65 text

App Name • 變更 InfoPlist.name 檔案，有分不同語⾔言，所以不同語⾔言顯⽰示的 app name 可以不⼀一樣 Tuesday, August 13, 13

Slide 66

Slide 66 text

App Icon • 要上架的話，請準備 57x57(⾮非 retina) 跟 114x114(retina)，1024x1024 尺⼨寸的 icon • 先把圖檔加⼊入到 project 裡 (圖檔要 copy 進 project 的⺫⽬目錄下) • 然後打開 project 設定 > Summary • 把 icon (⾮非 retina 跟 retina) 拉進 App Icons Tuesday, August 13, 13

Slide 67

Slide 67 text

TestFlight Tuesday, August 13, 13

Slide 68

Slide 68 text

增加 Build Number • 打開 terminal • 在 project 的⺫⽬目錄下，例如 iOSFavUploader/ • 執⾏行 agvtool bump 命令 • git add . ; git commit -m bump Tuesday, August 13, 13

Slide 69

Slide 69 text

Testﬂight • Apple 對於 app 的散佈態度⽐比較嚴謹 • 單⼀一 app 會限制最多 100 台機器可以安裝 • 但是對於⼀一般⼈人(包含測試者)，安裝開發者開發出來的 beta build ⽐比較不容易 • 所以 Testﬂight 提供⼀一個⽐比較簡易的環境可以讓你散佈你的 beta build • 不過在 XCode 5.0，這件事情將有所改變 Tuesday, August 13, 13

Slide 70

Slide 70 text

1. 登⼊入 ADN (developer.apple.com) 2. 註冊 beta 使⽤用者裝置的 UDID (UDID 取得⽅方法請看 (http://howto.cnet.com/8301-11310_39-57506702-285/how-to-find-your-ios-devices-udid/ ) 3. 在 Device 新增加⼀一筆 UDID 4. 編輯你的 Provision Profile ，將該裝置涵蓋到你的 Provisioning Profile 當中 5. 下載 Provisioning Profile 到你的開發電腦上 Tuesday, August 13, 13

Slide 71

Slide 71 text

1. XCode: Product > Archive 2. XCode 會 clean build 你的 app 3. Organizer 會彈出來，點 Distribute 按鈕 4. 選擇 Save for Enterprise or Ad-Hoc Deployment 5. 選擇⼀一個正確的 Provisioning Proﬁle 6. 你會得到⼀一個 ipa 檔 Archive 你的 App Binary Tuesday, August 13, 13

Slide 72

Slide 72 text

上傳 Testflight 1. 右上⾓角 + 按鈕，選 Upload Build 2. 上傳 ipa 檔案，填寫 Change logs 3. 選擇要散佈的對象 (如果對⽅方有 testflight 帳號就會直接顯⽰示在上⾯面) 4. 對⽅方會收到信，或者直接上 testflight 網站就會看到他可以安裝的 build，按 install 即可完成安裝 Tuesday, August 13, 13

Slide 73

Slide 73 text

App Store 上架⼀一⼆二三 Tuesday, August 13, 13

Slide 74

Slide 74 text

簽發你的 App Binary 1) 登⼊入 ADN (developer.apple.com) 2) 簽發 Production Certificate 3) 簽發 App Store Distribution Provisioning Profile 4) 下載 Certificate 跟 Profile Tuesday, August 13, 13

Slide 75

Slide 75 text

iTunes Connect • iTunes Connect 跟 iTunes 無關 • 專⾨門⽤用來管理 app 的 submission 跟 marketing 資訊 • https://itunesconnect.apple.com/ WebObjects/iTunesConnect.woa • 有個 iTunes Connect 的 app 可以讓你透過⼿手機管理 Tuesday, August 13, 13

Slide 76

Slide 76 text

先在 iTC 註冊你的 App Tuesday, August 13, 13

Slide 77

Slide 77 text

1 2 Tuesday, August 13, 13

Slide 78

Slide 78 text

3 Tuesday, August 13, 13

Slide 79

Slide 79 text

準備好你的 App Description, keywords, icons, screenshots(⻑⾧長貓、短貓都要), 測試帳號 (App Reviewer 需要知道怎麼測試你的 app) 基本資料分級 Tuesday, August 13, 13

Slide 80

Slide 80 text

Tuesday, August 13, 13

Slide 81

Slide 81 text

1) XCode: Product > Archive 2) XCode 會 clean build 你的 app 3) Organizer 會彈出來，點 Distribute 按鈕 4) 選擇 Submit to App Store 5) 選擇⼀一個正確的 Provisioning Proﬁle 6) 驗證 app binary 是否合乎規定，如果不合動作需重來 7) 會直接上傳到 iTunes Connect Archive 你的 App Binary Tuesday, August 13, 13

Slide 82

Slide 82 text

Tuesday, August 13, 13

Slide 83

Slide 83 text

怎麼下架?! • 選擇你要下架的 app • 點選 Rights and Pricing • Deselect 所有國家的 app store • Save Tuesday, August 13, 13

Slide 84

Slide 84 text

追蹤下載情況 • 點 Sales and Trends • 基本上很陽春, 提供基本功能⽽而已 • 其他 tracking 的 3rd-party ⼯工具 (都可以⽤用 cocoapods 安裝): • Google Analytics • Flurry (http://www.ﬂurry.com) Tuesday, August 13, 13

Slide 85

Slide 85 text

Crash Report • app 送出去 crash 了怎麼辦？ • 可以透過 Crashlytics 的服務來收 crash report ，進⽽而改進程式穩定度 • Crashlytics 現在隸屬於 twitter ，是⼀一個漂亮好⽤用的 crash report ⼯工具 Tuesday, August 13, 13

Slide 86

Slide 86 text

其他資源 Tuesday, August 13, 13

Slide 87

Slide 87 text

• Stanford CS193p 課程 • https://itunes.apple.com/us/course/coding- together-developing/id593208016 • 教學: http://www.raywenderlich.com/tutorials • 歷年 WWDC 影⽚片: • https://developer.apple.com/wwdc/videos/ • https://developer.apple.com/videos/wwdc/2012/ Tuesday, August 13, 13

Slide 88

Slide 88 text

• Cocoa Design Patterns: http://www.amazon.com/Cocoa-Design-Patterns- Erik-Buck/dp/0321535022/ref=sr_1_1? ie=UTF8&qid=1376278359&sr=8-1&keywords=cocoa+design+patterns • iOS Programming - The Big Nerd Ranch Guides: http://www.amazon.com/ iOS-Programming-Ranch-Edition-Guides/dp/0321821521/ref=sr_1_3? ie=UTF8&qid=1376278374&sr=8-3&keywords=cocoa+design+patterns Tuesday, August 13, 13