Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

打造你的第一個iPhone APP

1,447 views

Published on

想用最短的時間內,透過實做,體驗 APP 的開發流程,學習最重要的基本概念嗎?【打造你的第一個iPhone APP】課程,以淺顯易懂的 storyboard 工具,教你打造小王子電子故事書 APP ,讓你第一次寫 APP 就輕鬆上手!由暢銷電腦書《 Swift程式設計入門》作者彼得潘帶領,不管你是想要和工程師溝通的更順暢的 PM、設計,或是想接觸 iOS 開發的新手,由老師親自帶著你,一步一步實際操作,幫助你更快進入iOS的世界!

Published in: Mobile
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

打造你的第一個iPhone APP

  1. 1. iPhone App
 ( ) 2015/12/12
  2. 2. https://www.youtube.com/watch?v=o2tlr49GmJ4
  3. 3. App :iPhone.iPad Swift : : App App
  4. 4. 20 APP
  5. 5. http://www.facebook.com/iphone.peterpan http://deeploveapple.blogspot.tw apppeterpan@gmail.com https://github.com/AppPeterPan/It-s-all-about-App/ wiki/It's-all-about-App FB blog iOS wiki medium https://medium.com/@apppeterpan http://eepurl.com/bJhct9 http://apppeterpan.strikingly.com iOS APP
  6. 6. App https://www.youtube.com/watch? v=xr5JQdcqWyM
  7. 7. App • , Model • : , • • • • • •
  8. 8. App mini.Hana Penny V.K https://www.youtube.com/watch?v=_sQSXwdtxlY
  9. 9. iOS App • 0.99 ( ) • • iPhone, iPod touch, iPad, iPad mini, 
 Apple Watch, Apple TV, Mac, CarPlay • • • Apple Device • , 143 ( 99 / 0.7 / 0.99 = 142.85 ) • SDK
  10. 10. iOS App Apple device
  11. 11. • 4G, WiFi • GPS • • & • OpenGL ES 2.0 • bluetooth • iOS Apple Device • Apple Map • In App Purchase buy from store Apple Pay • ( sqlite & Core Data) • HTML 5 • & 3D Touch • • (FB,Twitter,Weibo)
  12. 12. • iAD • iCloud • passbook • & • iMessage • Retina Display (Retina HD) • • game center • & • (Newsstand) • Siri • • email • , & FaceTime • & • AirDrop • Game Controller • Peer-to-Peer Connectivity iOS Apple Device
  13. 13. : https://www.youtube.com/watch?v=umZvzuyMyHI
  14. 14. iOS 9 https://developer.apple.com/ios/
  15. 15. • 
 ( iPhone 6 1G , 6s 2G) • • ( ex: ) • • - • • iOS App
  16. 16. • Mac • PC Mac ( ) CPU
  17. 17. Macbook Air / Pro : App
  18. 18. Mac Mini : 15,900
  19. 19. iMac & Mac Pro iMac: App Mac Pro:
  20. 20. iPhone , iPod touch, iPad Air, iPad mini, iPad Pro, Apple Watch, Apple TV, CarPlay Apple Device
  21. 21. • • • iOS • (ex: ) •
  22. 22. Device http://en.wikipedia.org/wiki/List_of_iOS_devices
  23. 23. • iPhone 3.5 : 320 * 480 points ( 320 * 480 pixels) • iPhone Retina : 320 * 480 points (640 * 960 pixels 3.5 ) 
 320 * 568 points (640 * 1136 pixels 4 ) 
 375 * 667 points (750 * 1334 pixels 4.7 ) • iPhone Retina HD: 414 * 736 points (1242 * 2208 pixels 5.5 ) • iPad iPad mini : 768 * 1024 points ( 768 * 1024 pixels ) • iPad Retina iPad mini Retina: 768 * 1024 points (1536 * 2048 pixels ) • iPad Pro (Retina) : 1024 * 1366 points (2048 * 2732 pixels ) • Apple Watch (Retina): 
 38mm: 136 * 170 points (272 x 340 pixels )
 42mm: 156 * 195 points (312 x 390 pixels ) Retina HD: 1 point = 3 * 3 pixel Retina: 1 point = 2 * 2 pixel non-Retina: 1 point = 1 pixel
  24. 24. http://www.paintcodeapp.com/news/ultimate-guide-to-iphone- resolutions
  25. 25. iPhone 3.5 : 0.66 iPhone 4 4.7 5.5 : 0.56 iPhone : 4 iPhone App iPad 3.5 : iPad: 0.75
  26. 26. 10.10 10.11
  27. 27. Xcode App Store Free Apple ID https://itunes.apple.com/app/xcode/id497799835
  28. 28. Xcode beta https://developer.apple.com/xcode/downloads/ beta
  29. 29. • (ex: ) • App (UI) • (debug) • • (build) App • App • App • App Store Xcode IDE
 (Integrated Development Environment) • App • (Unit Test ) • 
 (continuous integration) • App 
 (User Interface Testing) • • App 
 https://developer.apple.com/xcode/
  30. 30. (ex: )
  31. 31. App (UI) User Interface Interface Builder
  32. 32. App 
 Debug navigator
  33. 33. App Instruments
  34. 34. Continuous Integration • build App • simulator • OS X Server • • • on commit ( ) • periodically ( ) https://www.youtube.com/watch?v=tU82vcYSF9Q
  35. 35. Continuous Integration
  36. 36. continuous integration
  37. 37. OS X Server https://itunes.apple.com/app/os-x-server/id883878097
  38. 38. Apple https://developer.apple.com
  39. 39. App https://developer.apple.com/platforms/
  40. 40. https://developer.apple.com/library/
  41. 41. Apple ID https://appleid.apple.com
  42. 42. Apple Developer https://developer.apple.com Free
  43. 43. https://developer.apple.com/membercenter/
  44. 44. • App Store ( iOS App, Mac App,Apple Watch App, tvOS App)
 ~ ? • beta • App (1000 )
 ( Xcode 7 
 but ) https://developer.apple.com/programs/whats-included/
  45. 45. TestFlight https://developer.apple.com/testflight
  46. 46. https://developer.apple.com/programs/enroll/ 99 ( ) 299
  47. 47. • • 99 • App • App Store App seller name
  48. 48. device 100 2000
  49. 49. • • 99 299 • DUNS • App Store App seller name • • 299 : • • App ( )
 https://developer.apple.com/support/D-U-N-S/
  50. 50. App Seller Name
  51. 51. https://developer.apple.com/membercenter/
  52. 52. • 
 App , , PM, Server , • 
 App + • 
 App + App + • 
 ios/Android(Windows) PHP/RoR/Python/ASP/Node.js HTML / CSS/ JavaScript photoshop/ illustrator/ sketch
  53. 53. Parse https://www.parse.com App server
  54. 54. Wealthy !
  55. 55. Idea App
  56. 56. App 1 2 3 App (prototype) App App
  57. 57. App 1 2 3 App 4 5 App6 App App
  58. 58. Prototyping • • App axure Balsamiq http://www.balsamiq.comhttp://www.axure.com POP https://popapp.in other: OmniGraffle InVision
  59. 59. • • photoshop illustrator Sketch http://www.teehanlax.com/tools http://bohemiancoding.com/sketch/
  60. 60. ZEPLIN https://zeplin.io
  61. 61. iOS Human Interface Guidelines https://developer.apple.com/library/ios/documentation/UserExperience/ Conceptual/MobileHIG/
  62. 62. Apple Watch Human Interface Guidelines https://developer.apple.com/watch/human-interface-guidelines/
  63. 63. Apple TV Human Interface Guidelines https://developer.apple.com/tvos/human-interface-guidelines/
  64. 64. OS X Human Interface Guidelines https://developer.apple.com/library/mac/documentation/ UserExperience/Conceptual/OSXHIGuidelines/
  65. 65. Swift https://blog.alphacamp.co/2015/07/27/for-swift-beginners/
  66. 66. Swift • & • ( javascript ) • : Playground • App crash bug • Objective-C • iOS SDK
 (SDK: App ) • Objective-C • iOS 7
  67. 67. playground
  68. 68. iOS 9 & iOS 8 https://developer.apple.com/support/appstore/
  69. 69. Objective-C !
  70. 70. Objective-C App Objective-C Objective-C App Objective-C
  71. 71. App https://blog.alphacamp.co/2015/08/10/how-to-learn-app-in-an-efficient-way/
  72. 72. App https://blog.alphacamp.co/2014/12/23/beautiful-app-life/
  73. 73. Xcode
  74. 74. 1. App
  75. 75. iOS watchOS tvOS OS X 2. template SingleView Application
  76. 76. 3.
  77. 77. Language
  78. 78. Devices
  79. 79. • App iPhone iPad iPhone iPad • : App iPad • : • Size • • App Universal App
  80. 80. 4.
  81. 81. ? https://www.youtube.com/watch?v=MKNrnSsIwf8
  82. 82. Xcode
  83. 83. Xcode 1. 2. 3. 2 3 1
  84. 84. navigator area project navigator find navigator 8 navigator
  85. 85. editor area ViewController.swift Main.storyboard
  86. 86. App
  87. 87. 1. App ( USB )
  88. 88. App App
  89. 89. App Icon
  90. 90. App Info Bundle Name
  91. 91. App Icon • png • (iOS ) • 120 * 120 ( pixel) -> retina • 180 * 180 (pixel) -> retina HD
  92. 92. (Preview)
  93. 93. App Icon
  94. 94. App Icon
  95. 95. 1x, 2x, 3x 1x: retina 2x: retina 3x: retina HD 20*20 point 20 20 40 40 60 60 pixel
  96. 96. Launch Image (pixel) iPhone Retina 3.5 640 * 960 iPhone Retina 4 640 * 1136 iPhone Retina 4.7 750 * 1334 iPhone Retina HD 5.5 1242 * 2208 , 2208 * 1242 iPad (iPad mini) 768 * 1024 ,1024 * 768 iPad (iPad mini) Retina 1536 * 2048 , 2048 * 1536 PNG *
  97. 97. Launch Screen File
  98. 98. utility App
  99. 99. storyboard App
  100. 100. Storyboard Storyboard App Storyboard
  101. 101. App - Scene - View Controller 
 Outline View UI
  102. 102. UI
  103. 103. UI
  104. 104. document outline What is View Controller ? What is View ? What is ?
  105. 105. • : 
 (attribute & method)
 • ( instance):
 
 
 App
 class & object
  106. 106. • (attribute) , • (method)
  107. 107. attribute: value ex: method: method ex: 

  108. 108. • • method 
 App • 
 
 App
  109. 109. • UI • • UI 
 • UI UIView ( ) View
  110. 110. Monkey 
 People 
 
 
 ( ) ( 
 Monkey People
  111. 111. MVC
  112. 112. iOS App User Interface Core Logic Data Model View Controller (MVC)
  113. 113. MVC model view controller
  114. 114. MVC mini.Hana model: view: controller: (
  115. 115. • model view • bug • UI view • controller • model UI • view controller
 
 ex: controller, tab bar controller MVC
  116. 116. Tab Bar Controller Table Controller controller
  117. 117. • controller
 controller • controller controller
 controller 
 controller controller App controller
  118. 118. Xcode Utility Debug
  119. 119. Inspector Pane , Library Pane Object Library ( UI Utility Attributes Inspector , UI
  120. 120. Disable Size Classes File inspector size
  121. 121. Disable Size Classes size size iPhone
  122. 122. iPhone View Controller Attributes inspector Simulated Matrics Size : size iPhone size
  123. 123. UI attributes inspector controller view
  124. 124. Attributes Inspector UI
  125. 125. View opacity:
  126. 126. 
 Assistant editor
  127. 127. (Preview)
  128. 128. Page One

  129. 129. 1. Object Library label ~
  130. 130. 2. View
  131. 131. UI
  132. 132. iOS (30, 60) (0, 0) (x, y) Points not retina: 1 pixel retina: 2 * 2 pixel retina HD: 3 * 3 pixel point
  133. 133. 2. Size inspector 1. 3. auto layout
  134. 134. label
  135. 135. 1: 1 2: 2 0:
  136. 136. control + enter
  137. 137. Page Two
  138. 138. 1. Assets.xcassets 1x, 2x, 3x
  139. 139. 2. Page Two controller
  140. 140. Image View
  141. 141. Clip Subviews
  142. 142. App
  143. 143. 2 2 controller
  144. 144. UIButton
  145. 145. button
  146. 146. UINavigationController
  147. 147. UINavigationController
  148. 148. UINavigationController
  149. 149. UINavigationController push & pop segue
  150. 150. bar button
  151. 151. bar navigation controller navigation bar
  152. 152. 1. 2. 3. 4. Menu Editor -> Canvas -> Zoom
  153. 153. UITabBarController
  154. 154. UITabBarController tab bar & navigation bar
  155. 155. tab 1. 2. Outline View controller
  156. 156. tab tab bar item tab
  157. 157. tab If you’re designing a custom tab bar icon, you should provide two versions—one for the unselected appearance and one for the selected appearance. The selected appearance is often a filled-in version of the unselected appearance, but some designs call for variations on this approach. https://icons8.com
  158. 158. tab tab
  159. 159. tab delete
  160. 160. tab : 5 tab 5 5 tab more 5, 6, … tab Edit tab tab
  161. 161. Text View
  162. 162. Editable Selectable Detection Region
  163. 163. section cell
  164. 164. cell cell 
 cell
  165. 165. UI copy paste storyboard UI controller
  166. 166. blur vibrancy
  167. 167. : cornerRadius = /2 clip subviews
  168. 168. App iPhone
  169. 169. Xcode Xcode App ( Apple Developer )
  170. 170. App iPhone App -> -> -> Apple ID ->
  171. 171. App Store https://itunesconnect.apple.com
  172. 172. App
  173. 173. App 1. App Store , Icon 2. 3. 4. 5.
  174. 174. App
  175. 175. App ?
  176. 176. App (30 ) Icon
  177. 177. Xcode App device Archive
  178. 178. Xcode App
  179. 179. • (bug) • App Apple • • private API
 (Application Programming Interface) • • Apple Store
  180. 180. App Store Review Guidelines https://developer.apple.com/appstore/resources/ approval/guidelines.html
  181. 181. 躲得了一時,躲不了一世 App
  182. 182. … FHM
  183. 183. App , , • 
 Blog, • App • 
 FB Instagram twitter FB https://www.youtube.com/watch?v=_iC8jnx32ho
  184. 184. App , , • blog • App • • PTT blog
  185. 185. Promo Code 50 Promo Code
  186. 186. App , , App App Store
  187. 187. Apple http://www.vogue.com.tw/feature/travel/content-13130.html http://deeploveapple.blogspot.tw/2014/03/wealthy-best-new-apps.html http://deeploveapple.blogspot.tw/2014/05/wealthy.html
  188. 188. App App Annie iTunes Connect App Store http://www.appannie.com https://itunes.apple.com/tw/app/appstatics-track-iphone-ipad/id533547308 Appstatics
  189. 189. App • free vs. 0.99
 
 100 • in-app purchase • • 
 • • App
  190. 190. App App: 3 PTT App:
  191. 191. App • • • + < 600 :
  192. 192. App :
  193. 193. Swift ?
  194. 194. Swift 2 http://learnswift.strikingly.com
  195. 195. iOS APP ? http://yourappmentor.strikingly.com

×