打造你的第一個iphone app

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

[email protected]

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

•

• email

• , & 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/

1. App

iOS watchOS tvOS OS X

2. template

Single View Application

Language

Devices

• App iPhone iPad iPhone iPad

• : App iPad

• :

• Size

•

• App

Universal App

?

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

Xcode1. 2. 3.

2

3

1

navigator areaproject

navigatorfind

navigator

8 navigator

editor area

ViewController.swift

Main.storyboard

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

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

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

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

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

1: 12: 20:

control + enter

Page Two

1.

Assets.xcassets

1x, 2x, 3x

2. Page Two controller

Image View

Clip Subviews

2 2 controller

UIButton

button

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

1. App Store , Icon2. 3. 4. 5.

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