1. iPhone/iPad APP
Development
101
Ryan Chung!
APP 1HR 1 http://MobileDev.TW

2. Ryan Chung (Ryan@iii.org.tw)
• 現任 • 經歷
• 資策會中壢中心課程研發經理 • 工研院電通所嵌入式網站開發
• 資策會中壢中心專任講師 • 經濟部工業局自由軟體推動計畫
• 資策會行動開發學院負責人 • 宜蘭縣政府自由軟體講師
• 學歷 • 平鎮陸軍通訊學校講師
• 台灣科技大學資工所碩士 • 龍潭陸軍總部講師
• 元智大學資訊工程系學士 • 資策會資訊技術訓練中心講師
• 資策會資技中心行動開發導師
• 教授科目
• 資策會資技中心數位學習網管理
• iOS App開發 – Objective-C
• Web App開發 – HTML5/CSS3
APP 1HR 2 http://MobileDev.TW

3. 學習、分享與成長
APP 1HR 3 http://MobileDev.TW

4. 智慧型手機即將比傳統手機還要多
APP 1HR 4 http://MobileDev.TW

5. 多數人的選擇已偏向智慧型手機
APP 1HR 5 http://MobileDev.TW

6. 我要智慧型手機幹嘛？
APP 1HR 6 http://MobileDev.TW

7. App生態圈
Cloud Service Provider
Customer
Training Center
ADs Seller
Developer Designer
Funder
Platform Holder Incubation Center
Network Admin
APP 1HR 7 http://MobileDev.TW

8. App 開發團隊角色
提出
需求
使用者經驗
架構師
圖像設計師
客戶
設計
專案經理
研發
內部
提案
跨平台開發者
企劃
iOS 開發者
Android 開發者
APP 1HR 8 http://MobileDev.TW

9. What is App?
行銷手法 趣味娛樂
提供功能 資訊提供
APP 1HR 9 http://MobileDev.TW

10. Native App
APP 1HR 10 http://MobileDev.TW

11. Web App
APP 1HR 11 http://MobileDev.TW

12. Hybrid App
APP 1HR 12 http://MobileDev.TW

13. Web App or Native App?
功能 Web App Native App
靜態圖片、文字展示
Ｏ
Ｏ
內容可直接線上更新
O
X
可上架販售
X
O
離線閱覽
X
O
加入主畫面螢幕
O
O
顯示自定啓動圖片
O
O
APP 1HR 13 http://MobileDev.TW

14. App1.0
• 將資訊以適合手機瀏覽的方式進行呈現
• 資訊來源可以是網路或是App中
• 例如：
• 百大小吃介紹
• 百大古蹟介紹
• 百大文化介紹 Content
• 百大活動介紹
APP 1HR 14 http://MobileDev.TW

15. App2.0
• 結合手機特性與既有資訊，以互動方式提供使用者
內容
• 例如：
• 最近的小吃
• 古蹟合成照相機
Content Device
APP 1HR 15 http://MobileDev.TW

16. App3.0
• 將App結合社群平台，提供使用者間的互動橋梁
• 例如：
• 用Facebook登入的聊天室App
• 美食心得分享App
Social
Content Device
APP 1HR 16 http://MobileDev.TW

17. App1.0 用 Web App也OK
APP 1HR 17 http://MobileDev.TW

18. Hybrid App – 網站內容＋App的殼
APP 1HR 18 http://MobileDev.TW

19. How to develop them?
APP 1HR 19 http://MobileDev.TW

20. Native App
APP 1HR 20 http://MobileDev.TW

21. Web App
APP 1HR 21 http://MobileDev.TW

22. Hybrid App
APP 1HR 22 http://MobileDev.TW

23. Any other alternatives?
APP 1HR 23 http://MobileDev.TW

24. App Inventor
http://www.appinventorbeta.com/
APP 1HR 24 http://MobileDev.TW

25. PhoneGap
APP 1HR 25 http://MobileDev.TW

26. Titanium
APP 1HR 26 http://MobileDev.TW

27. Corona
APP 1HR 27 http://MobileDev.TW

28. Flash
APP 1HR 28 http://MobileDev.TW

29. Things become easier….
APP 1HR 29 http://MobileDev.TW

30. Retain Count? Out!
APP 1HR 30 http://MobileDev.TW

31. Framework
• Framework
• 泛指能夠簡化開發程序的一堆類別、方法、函數與文件
的集合。
• Foundation Framework
• 提供一切基礎所需的framework，如數字、字串處理、
陣列、dictionary、日期時間、檔案系統等等。
• Application Kit Framework
• 用來開發互動的圖形化應用程式
• 提供文字、選單、工具列、表格等等。
APP 1HR 31 http://MobileDev.TW

32. Cocoa 與 Cocoa Touch
• Cocoa
• Foundation Framework
• Application Kit Framework
• Core Data
• Cocoa Touch
• Foundation Framework
• UIKit Framework
• Game Kit Framework
• iAD Framework
• Map Kit Framework
APP 1HR 32 http://MobileDev.TW

33. MVC
• Model
• 真正的程式核心架構
• View
• 使用者看到的程式界面
• Controller
• 將程式架構表達，並且控制界面
APP 1HR 33 http://MobileDev.TW

34. UIKIT FRAMEWORK
APP 1HR 34 http://MobileDev.TW

35. 1.按按鈕顯示文字
按下按鈕之後，上方顯示區出現文字
Clicked!
界面 邏輯
1. ⼀一個文字顯示區 當按鈕被按下時，
2. ⼀一個按鈕 在文字顯示區顯示
文字
Click Me !
APP 1HR 35 http://MobileDev.TW

36. 1.按按鈕顯示文字
1. File  New Project  選擇 iOS  Application
Single View Application  Next…
2. 輸入名稱ClickToShow  Save
3. 點選storyboard，拖曳一個label和一個button至
目前唯一的view上
4. 按住Alt，再點選xxViewController.h
5. 點選label--按住Ctrl--往右拉，設定為Outlet -
-命名為labelArea
6. 點選button--按住Ctrl--往右拉，設定為Action
--命名為buttonToClick
APP 1HR 36 http://MobileDev.TW

37. 1.按按鈕顯示文字
7. 到xxViewController.m --在buttonToClick方
法中-- labelArea.text=@Hello!;
8. command+R執行測試
APP 1HR 37 http://MobileDev.TW

38. Lab
• 修改範例讓文字顯示區顯示目前按了幾下
• 運用NSString的stringWithFormat方法
APP 1HR 38 http://MobileDev.TW

39. 2.View的切換
APP 1HR 39 http://MobileDev.TW

40. 2.View的切換
1. 使用storyboard增加一個ViewController
2. 在原先的ViewController上增加一個按鈕
3. 從按鈕連線到新的ViewController，選擇Modal
4. 在專案中新增檔案 -- iOS -- Cocoa Touch --
Objective-C class -- Next
5. 選擇Subclass of UIViewController -- 命名
為SecondViewController
6. 在Storyboard中，將第二個ViewController
的Custom Class設定為SecondViewController
APP 1HR 40 http://MobileDev.TW

41. 2.View的切換
7. 將兩個ViewController中間的Segue的Identifier
，設定為SecondViewController
8. 在第二個View上加入一顆按鈕，拉線
至SecondViewController.h
9. 選擇Action，命名為goBack
10. 在SecondViewController.m中的goBack()中
加入：
APP 1HR 41 http://MobileDev.TW

42. Lab
• 修改範例，加入另外一個View Controller，在第一
頁有兩個按鈕，可以選擇要去第二頁或是第三頁，
而第二頁或第三頁上面，都有一顆按鈕可以回第一頁
APP 1HR 42 http://MobileDev.TW

43. 更多課程請至
http://MobileDev.TW
APP 1HR 43 http://MobileDev.TW

44. Thank you
APP 1HR 44 http://MobileDev.TW