打造你的第一個iphone app
Post on 24-Jan-2017
1.101 Views
Preview:
TRANSCRIPT
iPhoneApp( )
2015/12/12
https://www.youtube.com/watch?v=o2tlr49GmJ4
App :iPhone.iPad
Swift
: : App
App
20 APP
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
iOSwiki
medium https://medium.com/@apppeterpan
http://eepurl.com/bJhct9
http://apppeterpan.strikingly.com
iOS APP
App
https://www.youtube.com/watch?v=xr5JQdcqWyM
App• , Model
• : ,
••••••
App
mini.Hana Penny V.Khttps://www.youtube.com/watch?v=_sQSXwdtxlY
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
iOS App Apple device
• 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)
• iAD
• iCloud
• passbook
• &
• iMessage
• Retina Display (Retina HD)
•
• game center
• &
• (Newsstand)
• Siri
•
• , & FaceTime
• &
• AirDrop
• Game Controller
• Peer-to-Peer Connectivity
iOS Apple Device
:
https://www.youtube.com/watch?v=umZvzuyMyHI
iOS 9
https://developer.apple.com/ios/
• ( iPhone 6 1G , 6s 2G)
•
• ( ex: )
•
• -
•
•
iOS App
• Mac
• PC Mac ( )
CPU
Macbook Air / Pro
:
App
Mac Mini
: 15,900
iMac & Mac Pro
iMac: App
Mac Pro:
iPhone , iPod touch, iPad Air, iPad mini, iPad Pro, Apple Watch,
Apple TV, CarPlay
Apple Device
••• iOS
• (ex: )
•
Device
http://en.wikipedia.org/wiki/List_of_iOS_devices
• 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 pixelRetina: 1 point = 2 * 2 pixelnon-Retina: 1 point = 1 pixel
http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
iPhone 3.5 : 0.66
iPhone 4 4.7 5.5 : 0.56
iPhone : 4
iPhone App iPad 3.5
:
iPad: 0.75
10.10
10.11
XcodeApp StoreFree
Apple ID
https://itunes.apple.com/app/xcode/id497799835
Xcode beta
https://developer.apple.com/xcode/downloads/
beta
• (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/
(ex: )
App (UI)User Interface Interface Builder
App Debug navigator
App Instruments
Continuous Integration• build App
• simulator
• OS X Server
••• on commit ( )
• periodically ( )
https://www.youtube.com/watch?v=tU82vcYSF9Q
Continuous Integration
continuous integration
OS X Server
https://itunes.apple.com/app/os-x-server/id883878097
Apple
https://developer.apple.com
App
https://developer.apple.com/platforms/
https://developer.apple.com/library/
Apple ID
https://appleid.apple.com
Apple Developer
https://developer.apple.com
Free
https://developer.apple.com/membercenter/
• App Store ( iOS App, Mac App, Apple Watch App, tvOS App) ~ ?
• beta
• App (1000 ) ( Xcode 7 but )
https://developer.apple.com/programs/whats-included/
TestFlight
https://developer.apple.com/testflight
https://developer.apple.com/programs/enroll/
99( )
299
•• 99
• App
• App Store App seller name
device 100
2000
•• 99 299
• DUNS
• App Store App seller name
•• 299 :
•• App ( )
https://developer.apple.com/support/D-U-N-S/
App Seller Name
https://developer.apple.com/membercenter/
• App , , PM, Server ,
• App +
• App + App +
•
ios/Android(Windows) PHP/RoR/Python/ASP/Node.js
HTML / CSS/ JavaScript
photoshop/ illustrator/ sketch
Parse
https://www.parse.com
App
server
Wealthy
!
Idea App
App1
2
3App
(prototype)
App App
App1 2
3 App
4 5
App6
App App
Prototyping•• App
axure Balsamiq
http://www.balsamiq.comhttp://www.axure.com
POP
https://popapp.in
other: OmniGraffle InVision
•• photoshop illustrator Sketch
http://www.teehanlax.com/toolshttp://bohemiancoding.com/sketch/
ZEPLIN
https://zeplin.io
iOS Human Interface Guidelines
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/
Apple Watch Human Interface Guidelines
https://developer.apple.com/watch/human-interface-guidelines/
Apple TV Human Interface Guidelines
https://developer.apple.com/tvos/human-interface-guidelines/
OS X Human Interface Guidelines
https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/
Swift
https://blog.alphacamp.co/2015/07/27/for-swift-beginners/
Swift• &
• ( javascript )
• : Playground
• App crash bug
• Objective-C
• iOS SDK (SDK: App )
• Objective-C
• iOS 7
playground
iOS 9 & iOS 8
https://developer.apple.com/support/appstore/
Objective-C !
Objective-C
App Objective-C
Objective-C
App Objective-C
App
https://blog.alphacamp.co/2015/08/10/how-to-learn-app-in-an-efficient-way/
App
https://blog.alphacamp.co/2014/12/23/beautiful-app-life/
Xcode
1. App
iOS watchOS tvOS OS X
2. template
Single View Application
3.
Language
Devices
• App iPhone iPad iPhone iPad
• : App iPad
• :
• Size
•
• App
Universal App
4.
?
https://www.youtube.com/watch?v=MKNrnSsIwf8
Xcode
Xcode1. 2. 3.
2
3
1
navigator areaproject
navigatorfind
navigator
8 navigator
editor area
ViewController.swift
Main.storyboard
App
1. App
( USB )
App
App
App Icon
App
Info Bundle Name
App Icon• png
• (iOS )
• 120 * 120 ( pixel) -> retina
• 180 * 180 (pixel) -> retina HD
(Preview)
App Icon
App Icon
1x, 2x, 3x
1x: retina 2x: retina 3x: retina HD
20*20 point
20 20 40 40 60 60 pixel
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
*
Launch Screen File
utility
App
storyboard App
Storyboard
Storyboard App
Storyboard
App - Scene - View Controller
Outline View
UI
UI
UI
document outline
What is View Controller ?
What is View ?
What is ?
• : (attribute & method)
• ( instance):
App
class & object
• (attribute) ,
• (method)
attribute:value
ex:
method:method
ex:
•
• method App
•
App
• UI
•
• UI
• UI UIView ( )
View
Monkey
People
( )(
Monkey People
MVC
iOS App
User Interface
CoreLogicData
Model View Controller (MVC)
MVC
model view
controller
MVC mini.Hana
model:
view:
controller:
(
• model view
• bug
• UI view
• controller
• model UI
• view controller
ex: controller, tab bar controller
MVC
Tab Bar Controller Table Controller
controller
• controllercontroller
• controller controllercontroller
controller
controller
App controller
Xcode
Utility
Debug
Inspector Pane,
Library Pane
Object Library (UI
Utility
Attributes Inspector, UI
Disable Size ClassesFile inspector
size
Disable Size Classes
size size
iPhone
iPhone
View ControllerAttributes inspector Simulated Matrics Size
:
size iPhone size
UI
attributes inspector
controller view
Attributes Inspector
UI
View
opacity:
Assistant editor
(Preview)
Page One
1. Object Library
label~
2. View
UI
iOS
(30, 60)
(0, 0)
(x, y)
Points
not retina: 1 pixelretina: 2 * 2 pixelretina HD: 3 * 3 pixel
point
2. Size inspector
1.
3. auto layout
label
1: 12: 20:
control + enter
Page Two
1.
Assets.xcassets
1x, 2x, 3x
2. Page Two controller
Image View
Clip Subviews
App
2 2 controller
UIButton
button
UINavigationController
UINavigationController
UINavigationController
UINavigationController
push & pop
segue
bar button
barnavigation controller navigation bar
1. 2. 3. 4. Menu Editor -> Canvas -> Zoom
UITabBarController
UITabBarController
tab bar & navigation bar
tab
1. 2. Outline View
controller
tabtab bar item
tab
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
tab
tab
tab
delete
tab : 5
tab
5 5 tab more 5, 6, … tab
Edit tab tab
Text View
EditableSelectable
Detection Region
sectioncell
cell
cell cell
UI
copy paste storyboardUI controller
blurvibrancy
: cornerRadius = /2clip subviews
App iPhone
Xcode
Xcode App ( Apple Developer )
App iPhone
App -> -> ->Apple ID ->
App Store
https://itunesconnect.apple.com
App
App
1. App Store , Icon2. 3. 4. 5.
App
App
?
App(30 )
Icon
Xcode App
deviceArchive
Xcode App
• (bug)
• App Apple
•
• private API(Application Programming Interface)
•
•
Apple Store
App Store Review Guidelines
https://developer.apple.com/appstore/resources/approval/guidelines.html
躲得了一時，躲不了一世
App
… FHM
App , , •
Blog,
• App
• FB Instagram twitter
FB
https://www.youtube.com/watch?v=_iC8jnx32ho
App , , • blog
• App
•• PTT blog
Promo Code
50 Promo Code
App , ,
App
App Store
Apple
http://www.vogue.com.tw/feature/travel/content-13130.html
http://deeploveapple.blogspot.tw/2014/03/wealthy-best-new-apps.htmlhttp://deeploveapple.blogspot.tw/2014/05/wealthy.html
AppApp Annie
iTunes Connect
App Store
http://www.appannie.com
https://itunes.apple.com/tw/app/appstatics-track-iphone-ipad/id533547308
Appstatics
App• free vs. 0.99
100
• in-app purchase
••
•• App
App
App: 3
PTT App:
App
•
•
• + < 600 :
App
:
Swift ?
Swift 2
http://learnswift.strikingly.com
iOS APP
?
http://yourappmentor.strikingly.com
top related