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

1. iPhone App
( )
2015/12/12

2. https://www.youtube.com/watch?v=o2tlr49GmJ4

3. App :iPhone.iPad
Swift
:
: App
App

4. 20 APP

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. App
https://www.youtube.com/watch?
v=xr5JQdcqWyM

7. App
• , Model
• : ,
•
•
•
•
•
•

8. App
mini.Hana Penny V.K
https://www.youtube.com/watch?v=_sQSXwdtxlY

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. iOS App Apple
device

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. • iAD
• iCloud
• passbook
• &
• iMessage
• Retina Display (Retina HD)
•
• game center
• &
• (Newsstand)
• Siri
•
• email
• , & FaceTime
• &
• AirDrop
• Game Controller
• Peer-to-Peer Connectivity
iOS Apple Device

14. :
https://www.youtube.com/watch?v=umZvzuyMyHI

15. iOS 9
https://developer.apple.com/ios/

16. •
( iPhone 6 1G , 6s 2G)
•
• ( ex: )
•
• -
•
•
iOS App

19. • Mac
• PC Mac ( )
CPU

20. Macbook Air / Pro
:
App

21. Mac Mini
: 15,900

22. iMac & Mac Pro
iMac: App
Mac Pro:

23. iPhone , iPod touch, iPad Air, iPad mini,
iPad Pro, Apple Watch,
Apple TV, CarPlay
Apple Device

24. •
•
• iOS
• (ex:
)
•

25. Device
http://en.wikipedia.org/wiki/List_of_iOS_devices

26. • 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

27. http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-
resolutions

28. iPhone 3.5 : 0.66
iPhone 4 4.7 5.5 : 0.56
iPhone : 4
iPhone App iPad 3.5
:
iPad: 0.75

29. 10.10
10.11

31. Xcode
App Store
Free
Apple ID
https://itunes.apple.com/app/xcode/id497799835

32. Xcode beta
https://developer.apple.com/xcode/downloads/
beta

33. • (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/

34. (ex: )

35. App (UI)
User Interface Interface Builder

36. App
Debug navigator

37. App Instruments

38. Continuous Integration
• build App
• simulator
• OS X Server
•
•
• on commit ( )
• periodically ( )
https://www.youtube.com/watch?v=tU82vcYSF9Q

39. Continuous Integration

40. continuous integration

41. OS X Server
https://itunes.apple.com/app/os-x-server/id883878097

43. Apple
https://developer.apple.com

44. App
https://developer.apple.com/platforms/

45. https://developer.apple.com/library/

47. Apple ID
https://appleid.apple.com

48. Apple Developer
https://developer.apple.com
Free

50. https://developer.apple.com/membercenter/

51. • App Store ( iOS App, Mac App,Apple Watch App, tvOS App)
~ ?
• beta
• App (1000 )
( Xcode 7
but )
https://developer.apple.com/programs/whats-included/

52. TestFlight
https://developer.apple.com/testflight

53. https://developer.apple.com/programs/enroll/
99
( )
299

54. •
• 99
• App
• App Store App seller name

55. device 100
2000

56. •
• 99 299
• DUNS
• App Store App seller name
•
• 299 :
•
• App ( )
https://developer.apple.com/support/D-U-N-S/

57. App Seller Name

58. https://developer.apple.com/membercenter/

60. •
App , , PM, Server ,
•
App +
•
App + App +
•
ios/Android(Windows) PHP/RoR/Python/ASP/Node.js
HTML / CSS/ JavaScript
photoshop/ illustrator/ sketch

61. Parse
https://www.parse.com
App
server

62. Wealthy
!

63. Idea App

64. App
1
2
3
App
(prototype)
App App

65. App
1 2
3 App
4 5
App6
App App

66. Prototyping
•
• App
axure Balsamiq
http://www.balsamiq.comhttp://www.axure.com
POP
https://popapp.in
other: OmniGraffle InVision

67. •
• photoshop illustrator Sketch
http://www.teehanlax.com/tools
http://bohemiancoding.com/sketch/

68. ZEPLIN
https://zeplin.io

69. iOS Human Interface Guidelines
https://developer.apple.com/library/ios/documentation/UserExperience/
Conceptual/MobileHIG/

70. Apple Watch Human
Interface Guidelines
https://developer.apple.com/watch/human-interface-guidelines/

71. Apple TV Human
Interface Guidelines
https://developer.apple.com/tvos/human-interface-guidelines/

72. OS X Human Interface
Guidelines
https://developer.apple.com/library/mac/documentation/
UserExperience/Conceptual/OSXHIGuidelines/

75. Swift
https://blog.alphacamp.co/2015/07/27/for-swift-beginners/

76. Swift
• &
• ( javascript )
• : Playground
• App crash bug
• Objective-C
• iOS SDK
(SDK: App )
• Objective-C
• iOS 7

78. playground

79. iOS 9 & iOS 8
https://developer.apple.com/support/appstore/

80. Objective-C !

81. Objective-C
App Objective-C
Objective-C
App Objective-C

82. App
https://blog.alphacamp.co/2015/08/10/how-to-learn-app-in-an-efficient-way/

83. App
https://blog.alphacamp.co/2014/12/23/beautiful-app-life/

84. Xcode

85. 1. App

86. iOS watchOS tvOS OS X
2. template
SingleView Application

87. 3.

88. Language

89. Devices

90. • App iPhone iPad iPhone iPad
• : App iPad
• :
• Size
•
• App
Universal App

91. 4.

92. ?
https://www.youtube.com/watch?v=MKNrnSsIwf8

93. Xcode

94. Xcode
1. 2. 3.
2
3
1

95. navigator area
project
navigator
find
navigator
8 navigator

96. editor area
ViewController.swift
Main.storyboard

97. App

98. 1. App
( USB )

99. App
App

100. App Icon

101. App
Info Bundle Name

102. App Icon
• png
• (iOS )
• 120 * 120 ( pixel) -> retina
• 180 * 180 (pixel) -> retina HD

103. (Preview)

104. App Icon

105. App Icon

106. 1x, 2x, 3x
1x: retina 2x: retina 3x: retina HD
20*20 point
20 20 40 40 60 60 pixel

107. 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
*

108. Launch Screen File

110. utility
App

111. storyboard
App

112. Storyboard
Storyboard App
Storyboard

113. App - Scene - View Controller
Outline View
UI

114. UI

115. UI

116. document outline
What is View Controller ?
What is View ?
What is ?

117. • :
(attribute & method)
• ( instance):
App
class & object

119. • (attribute) ,
• (method)

120. attribute:
value
ex:
method:
method
ex:

121. •
• method
App
•
App

122. • UI
•
• UI
• UI UIView ( )
View

123. Monkey
People
( )
(
Monkey People

124. MVC

125. iOS App
User
Interface
Core
Logic
Data
Model View Controller (MVC)

126. MVC
model view
controller

127. MVC mini.Hana
model:
view:
controller:
(

128. • model view
• bug
• UI view
• controller
• model UI
• view controller
ex: controller, tab bar controller
MVC

129. Tab Bar Controller Table Controller
controller

130. • controller
controller
• controller controller
controller
controller
controller
App controller

132. Xcode
Utility
Debug

133. Inspector Pane
,
Library Pane
Object Library (
UI
Utility
Attributes Inspector
, UI

134. Disable Size Classes
File inspector
size

135. Disable Size Classes
size size
iPhone

136. iPhone
View Controller
Attributes inspector Simulated Matrics Size
:
size iPhone size

137. UI
attributes inspector
controller view

138. Attributes Inspector
UI

139. View
opacity:

140.
Assistant editor

141. (Preview)

142. Page One

143. 1. Object Library
label
~

144. 2. View

145. UI

146. iOS
(30, 60)
(0, 0)
(x, y)
Points
not retina: 1 pixel
retina: 2 * 2 pixel
retina HD: 3 * 3 pixel
point

147. 2. Size inspector
1.
3. auto layout

148. label

149. 1: 1
2: 2
0:

150. control + enter

152. Page Two

153. 1.
Assets.xcassets
1x, 2x, 3x

154. 2. Page Two controller

155. Image View

156. Clip Subviews

157. App

158. 2 2 controller

159. UIButton

161. button

162. UINavigationController

163. UINavigationController

164. UINavigationController

165. UINavigationController
push & pop
segue

166. bar button

167. bar
navigation controller navigation bar

168. 1.
2.
3.
4. Menu Editor -> Canvas -> Zoom

169. UITabBarController

170. UITabBarController
tab bar & navigation bar

171. tab
1.
2. Outline View
controller

172. tab
tab bar item
tab

173. 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

174. tab
tab

175. tab
delete

176. tab : 5
tab
5 5 tab more
5, 6, … tab
Edit tab tab

177. Text View

178. Editable
Selectable
Detection
Region

181. section
cell

182. cell
cell
cell

184. UI
copy paste storyboard
UI controller

185. blur
vibrancy

186. : cornerRadius = /2
clip subviews

187. App iPhone

188. Xcode
Xcode App
( Apple Developer )

194. App
iPhone
App -> -> ->
Apple ID ->

196. App Store
https://itunesconnect.apple.com

197. App

198. App
1. App Store , Icon
2.
3.
4.
5.

199. App

202. App
?

203. App
(30 )
Icon

204. Xcode App
device
Archive

205. Xcode App

206. • (bug)
• App Apple
•
• private API
(Application Programming Interface)
•
•
Apple Store

207. App Store Review
Guidelines
https://developer.apple.com/appstore/resources/
approval/guidelines.html

208. 躲得了一時，躲不了一世
App

209. …
FHM

211. App , ,
•
Blog,
• App
•
FB Instagram twitter
FB
https://www.youtube.com/watch?v=_iC8jnx32ho

212. App , ,
• blog
• App
•
• PTT blog

213. Promo Code
50 Promo Code

214. App , ,
App
App Store

215. 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

216. App
App Annie
iTunes Connect
App Store
http://www.appannie.com
https://itunes.apple.com/tw/app/appstatics-track-iphone-ipad/id533547308
Appstatics

217. App
• free vs. 0.99
100
• in-app purchase
•
•
•
• App

218. App
App: 3
PTT App:

219. App
•
•
• + < 600 :

220. App
:

221. Swift ?

222. Swift 2
http://learnswift.strikingly.com

223. iOS APP
?
http://yourappmentor.strikingly.com