ECOWORKEfficient, Economical IT Works

This document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

蘇彥碩 michaelsu@ecoworkinc.com 益科股份有限公司 Ecowork Inc.

iOS App 開發入門

1

2

This document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

ECOWORK益科股份有限公司

2005 年成立於台北，資本額新台幣 1200 萬，目前員工人數 16 人，核心成員擁有 15 年以上富媒體網路、行動應用服務（RIA、Rich-Media Internet & Mobile Application）的產品設計、開發、維運經驗

我們擅長 使用者經驗分析 和 使用者介面設計我們專精 雲端網路技術 提供 高階網路服務

3

ECOWORKEfficient, Economical IT Works

工作機會：goo.gl/Jh9k9iOS、Android、Web 正職或暑期實習

4

ECOWORK

Mobile Application

今天的主角

5

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

http://www.flickr.com/photos/cocoarmani/1315402174/

人手一隻手機 ...

6

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

但是當手機不再是手機 ...

iPhone 4 Blackberry Nokia 5800 Windows Mobile Android Nesus One

7

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

不再只是打電話或是聽音樂？

8

ECOWORK

Application Commerce

商業運作的環境

9

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

交易管道

http://blog.oxagile.com/2010/05/21/android-has-defeated-apple-in-the-fight-for-the-u-s-market/

Apple AppStore

Android Market

10

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

7-ELEVEN App 的下載量參考

http://www.slideshare.net/ecowork/7eleven-app-for-iphone-ipad-ipod-touch-appnext-contest-2011

82% 18%

0

25

50

75

100

推播通知到達率

200,000+ 次 50,000+ 次

11

ECOWORK

Write an iOS Application?

動筆寫嗎？

12

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

I. 需求發想

http://www.outsightinteractive.com/blog/outsights_award_winning_phizzpop_design_process

13

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

2. 介面設計

14

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

3. 程式撰寫

15

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

4. AppStore 發行

16

ECOWORK

Touch & Mobile Device

先談談行動裝置

17

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

http://www.turbophoto.com/Free-Stock-Images/People.htm

熟悉的 KVM，一樣好好坐著使用 ...

18

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

http://www.flickr.com/photos/kansirnet/220008638/

當然可以自己做個行動電腦 ...

19

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

http://theopticalvisionsite.com/lenses/computer-lenses-do-we-need-them/

也有很多不同的設計 ...

20

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

http://www.flickr.com/photos/dalelane/2042548563/

最終還是得找張桌子坐下來使用它 ...

21

會在一個可被預期的場所坐下來使用

22

會在一個可被預期的場所坐下來使用

螢幕可視範圍很大，很方便可以同時進行多個工作

22

會在一個可被預期的場所坐下來使用

螢幕可視範圍很大，很方便可以同時進行多個工作

使用鍵盤和滑鼠作為輸入介面

22

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

http://technabob.com/blog/2009/06/18/kyle-bean-mobile-phone-evolution-papercraft/

行動電話一路發展過來 ...

23

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

http://www.flickr.com/photos/tim_peters/3963105969/

原本只是為了可以隨時隨地講電話 ...

24

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

http://www.gd-wholesale.com/chinaproduct/mf66d/av3205to1bv/mobile-phone-keypad-m140833.html

所以按鍵也和傳統電話差不多...

25

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

http://www.flickr.com/photos/cocoarmani/1315402174/

但是現在呢？

26

多樣化的使用情境，使用的場所也各不相同

27

多樣化的使用情境，使用的場所也各不相同

很小的螢幕、很不容易輸入文字

27

多樣化的使用情境，使用的場所也各不相同

很小的螢幕、很不容易輸入文字

大部份應用的使用者介面會占掉整個螢幕

27

多樣化的使用情境，使用的場所也各不相同

很小的螢幕、很不容易輸入文字

大部份應用的使用者介面會占掉整個螢幕

不易同時進行多個工作、也很容易在介面中迷路

27

28

ECOWORK

Preparation

準備工作

29

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

開始著手設計前 ...

30

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

開始著手設計前 ...

先要擁有一台

30

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

開始著手設計前 ...

先要擁有一台 融入使用文化

30

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

開始著手設計前 ...

先要擁有一台 融入使用文化 進入渾沌世界

30

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

行動裝置擅長在 ...

31

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

行動裝置擅長在 ...

地理位置

31

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

行動裝置擅長在 ...

地理位置 三度空間

31

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

行動裝置擅長在 ...

地理位置 三度空間 現實事物

31

ECOWORK

Step 1

Consolidate Ideas

創意發想與整合

32

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

專心在「行動裝置」可以做到的事 ...

http://www.wantchinatimes.com/news-subclass-cnt.aspx?cid=1303&MainCatID=13&id=20110113000113

33

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

「技術」並不是重點 ...

http://blog.oxagile.com/2010/05/21/android-has-defeated-apple-in-the-fight-for-the-u-s-market/

34

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

注意「需求」和「解法」...

http://newkingdomsayshi.com/2008/12/28/go-broke-with-a-cassette-ipod/

35

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

設計成「隨時可中斷」和「不用太花力氣」...

http://www.londoncyclist.co.uk/cycling-accessories/iphone-bike-mount/

36

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

減少「認知的負擔」和「嘗試的時間」...

http://www.flickr.com/photos/40852554@N00/472111992

37

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

設計並實地體驗「使用者情境」

https://squareup.com/

38

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

畫出幾個「心裡想看的介面」

http://www.outsightinteractive.com/blog/outsights_award_winning_phizzpop_design_process

39

ECOWORK

Step 2

User Interface Design

使用者出發的介面

40

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

有好好設計嗎？

41

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

螢幕尺寸和人之間的關係

★ 和使用者互動的介面• Home Button

• 螢幕★ 手指頭點擊螢幕• 最適合的大小是 44pt x 44pt

• 大約是 6.86mm x 6.86mm

Portrait Landscape

iPad *

iPhone 4

Others

768x1024 1024x768

640x960 960x640

320x480 480x320

42

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

單點觸控手勢

★ Touch

★ Tap

★ Swipe/Flickr

★ Drag

43

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

多點觸控手勢

★ Scroll

★ Zoom/Pinch

★ Rotate

★ Special

44

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

是這樣嗎？

http://www.codinghorror.com/blog/2006/02/sometimes-a-word-is-worth-a-thousand-icons.html

45

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

Keynote on Mac OS X

46

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

Keynote on iPad ?

47

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

「操作」而不是「控制」...

http://www.wired.com/gadgetlab/2008/12/microsoft-surfa/

48

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

基本原則：一致性★ 一致性• 與內建 App 一致的操作流程• 同一個 App 內保持一致• 改版前後保持一致

★ 直接操作• 可以用 Pinch 就不要用 Button

• 可以用 Rotate 就不要用 Button

• 99% 會使用常用選項就不要提供自訂參數

49

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

基本原則：Metaphor 隱喻

★ 與真實物品結合• 行事曆• 記事本• 郵件

★ 與生活經驗連結• Switch

• Picker

• 照片翻頁

50

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

Keynote for iPad!

51

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

將畫面拆解開

http://inspirationfeed.com/2011/02/25-examples-of-wireframes-and-mockups-sketches/

52

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

拆開成不同的卡片

53

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

在不同的步驟間調整

54

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

方便的工具

55

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

可以實體模擬的方法

56

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

確定的基本流程後，再開始繪製成電子稿

57

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

Android 也有類似的 UI 元件可以使用

58

ECOWORK

Step 3

Coding & Authoring

動手實作

59

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

iOS Application 開發環境★ Mac OS X

• Mac Mini、MacBook/Pro/Air、iMac

★ Tool Chain

• XCode（Support Git、Subversion、Perforce、CVS）• iPhone Configuration Utility、iTunes

★ Language

• Objective C

• XML、C/C++

★ Testing for Special Feature

• A real iPhone / iPod / iPad

60

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

Objective-C

★ 以 C 語言的基礎• Pointer（指標）• 記憶體管理• Functional Programming 的方式

★ 物件導向語言的基礎• Java、Python、PHP 等

★ 預設命名方式• 以 Human Readable 的方式命名

61

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

Methods in Objective-C

-(void)insertObject:(id)anObject atIndex:(NSUInteger)index

★ Instance Method：使用減號 -

★ Class Method：使用加號 +

62

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

Methods in Objective-C

-(void)insertObject:(id)anObject atIndex:(NSUInteger)index

★ Return Type 和 C 語言的概念相同

63

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

Methods in Objective-C

-(void)insertObject:(id)anObject atIndex:(NSUInteger)index

★ Method Signature 方便溝通：insertObject:atIndex:

64

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

Methods in Objective-C

-(void)insertObject:(id)anObject atIndex:(NSUInteger)index

★ Parameter Type 和 Parameter Name與 C 語言的概念相同

65

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

Messaging in Objective-C

[myArray insertObject:anObject atIndex:0];[[myAppObject theArray] insertObject:[myAppObject objectToInsert] atIndex:0];

★ Messaging

• 傳送一個訊息給物件(呼叫 Method)

• A對著B說話

66

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

記憶體管理 in Objective-C

UIView *view = [[UIView alloc] init];[view retain];[view release];[view autorelease];

★ 透過 Retain Counter 管理記憶體• retain：Retain Counter + 1

• release：Retain Counter - 1

• Counter = 0 時釋放物件

67

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

Protocol/Delegate in Objective-C@interface MyClass:NSObject

<UIApplicationDelegate, AnotherProtocol> {BOOL flag;NSString *nameObject;

}@end

@protocol MyProtocol-(void)myProtocolMethod;@end

★ Protocol 類似 Java 的 Interface

• 使用 Protocol 定義出 Delegate 可以用來協助在 Event-based 的環境接收處理其它 Class 送過來的 Message

68

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

Property vs Variable in Objective-C

.h@property BOOL flag;@property (copy) NSString *nameObject; @property (readonly) UIView *rootView;

.m@synthesize flag;@synthesize nameObject;@synthesize rootView;

★ Property 比 Variable 多出一些功能• Accessor Method

• Getter：myArray = [myObj theArray];

• Setter：myObj.theArray = newArray;

• Key-Value Observation（KVO）• 進階記憶體管理

69

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

iOS Application 的基本 LifeCycle

70

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

Event Loop 中的流程

71

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

Model-View-Controller

72

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

多個 View 疊合的樣子

73

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

UIView Basic in iOS UIKit

★ 每個元件都是用繼承 UIView

• 全部只有一個 UIWindow

• UIImageView、UIButton ...

• 可當成另外一個 UIView 的 subview

★ View 的組成• CALayer

• Touch

★ 動畫效果• CATransition：標準的過場效果• Property Animation 及 Key Frame Animation

74

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

Location-based in iOS

★ 功能• 內建直接使用 MKMapView就可以開啟 Google

Map

• 可使用 GPS、WiFi、AGPS 定位• 可使用電子羅盤知道方位

★ 特殊功能• 加速規和陀螺儀

★ 擴增實境是怎麼作的？

75

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

Apple Push Notification Service

76

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

iOS 的多工概念★ iOS 4.0 版以後支援• 支援 iPhone 3Gs 、 iPod Touch 4 代、iPad 以後的所有機種

★ 標準多工的認知• Memory：在手機開 Swap？• Power：因為 CPU 的需求而大量消耗電力

★ iOS 的多工• Foreground：同一個時間還是只能有一個 App 在前景• Background：GPS、Audio Service、Voice Service ... etc.

• Application 隨時會因為 Memory 的需求被中止

77

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

iOS 多工的優缺點★ 優點• Application 可以盡量使用到所有的 Memory

• CPU 不會被其它應用程式搶走• 系統統一控管特定的背景服務，以節省電力

★ 缺點• 不能任意在使用者不想要開啟應用程式的時候做事• 在背景時，僅能處理少數系統提供的功能

78

ECOWORK

Step 4

Review & Publish to AppStore

送審和發行

79

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

iTunes Connect

80

ECOWORK

Reference

參考資料

81

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

開發參考資源★ Apple

• http://developer.apple.com/devcenter/ios/index.action

• http://developer.apple.com/videos/wwdc/2010

★ Forum / Objective-C Tutorial

• http://stackoverflow.com

• http://www.otierney.net/objective-c.html.zh-tw.big5

★ 電子書• O’Reilly Head First iPhone Development

★ 線上教學課程• iPhone Application Development (Stanford)

• http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewPodcast?

id=384233225

82

線上瀏覽本文件：http://www.slideshare.net/ecowork/

Ecowork 工作機會：goo.gl/Jh9k9iOS、Android、Web 正職或暑期實習

83