打造你的第⼀一個  App  -­‐  iOS  講師：彼得潘  

[1/17]

彼得潘簡介

博客來2012百⼤大電腦類 Top 6App程式設計⼊入⾨門:iPhone.iPad

作家，專欄作家，⼯工程師，講師，顧問，家教，創業家

新書預告

Swift程式設計⼊入⾨門(暫定)

2015 App預告

相關教學資源http://www.facebook.com/iphone.peterpan

http://deeploveapple.blogspot.tw

apppeterpan@gmail.com

http://apppeterpan.blogspot.tw

FB粉絲團

blog

中⽂文wiki

討論區http://peterpan.uservoice.com

http://deeploveiossdk.tumblr.com英⽂文wiki

email

medium https://medium.com/@apppeterpan

為什麼要做App

因為美麗⼈人⽣生

App⼯工作的美麗⼈人⽣生• 跟不同圈⼦子的⼈人合作交朋友，甚⾄至是偶像, Model

• 多彩多姿的⼈人⽣生: 出書，寫專欄，當講師, 進錄⾳音室

• 任何地⽅方皆可⼯工作，咖啡廳，家裡都可以• 睡到⾃自然醒• ⾃自由的⼯工作環境，無打卡• ⽼老闆就像朋友，無階級• 可以⾃自⼰己創業作⽼老闆• ⽩白吃⽩白喝，甚⾄至⽩白住

彼得潘App的美麗⼈人⽣生

mini.Hana Penny V.K克

為什麼要做iOS App？• 0.99的誘惑 (不易受不景氣影響)

• 全球市場• iPhone, iPod touch, iPad, iPad mini, Apple Watch, Mac, iTV

• 虛擬房租

• ⼀一個⼈人創業做⽼老闆• 熱賣的iDevice

• 穩賺不賠, 賣143套就賺了( 99 / 0.7 / 0.99 = 142.85 )

• 年年更新SDK產⽣生新的應⽤用

認識iOS App和iDevice

iOS和iDevice的特⾊色• 無線上網• GPS定位

• 加速度感應計和陀螺儀• 相機• OpenGL ES 2.0

• bluetooth

• ⽣生動動畫

• Apple Map

• In App Purchase

• 資料庫• HTML 5網⾴頁

• 多點觸碰• 多⼯工

iOS和iDevice的特⾊色• 社群整合

• iAD

• iCloud

• passbook

• ⾏行事曆• iMessage

• Retina Display

• 電⼦子羅盤• game center

• 書報攤• 提醒事項• Siri

• 軟硬整合

軟硬整合: ⾎血壓計

軟硬整合: ⼿手沖咖啡秤

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

iOS 8的新特⾊色

https://developer.apple.com/ios8/

iOS App的限制

• 記憶體• 螢幕⼤大⼩小• 強制中斷• 有條件的多⼯工• 強制結束⽣生命

開發前

開發環境的準備

硬體上的準備: Mac

• Apple電腦

• PC上裝破解的Mac作業系統 (不建議)

記憶體愈多愈好

最便宜: $15900

Macbook Air / Pro

咖啡廳，書局都是我的辦公室

11/13/15吋，最貴$79900

創作App要靈感

iDevicesiPhone , iPod touch, iPad, iPad mini, Apple Watch ( iTV?)

測試

iDevice功能⽐比較

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

作業系統

10.10

10.9

免費升級

XcodeApp Store

Free

Apple ID

從開發網站搶先下載機密的Xcode和iOS

https://developer.apple.com/devcenter/ios

付費開發者才能下載

開發帳號的申請Apple Developer

https://developer.apple.com/register

Apple ID Apple Developer

免費

輸⼊入認證碼

免費會員的iOS開發網站畫⾯面

https://developer.apple.com/devcenter/ios/

付費會員好處• 上架App Store

~ 不上架，為善不欲⼈人知 ?

• 安裝App⾄至實體機器 (1000個測試帳號)

• 搶先測試和開發最新版的iOS App

• Apple Developer Forums臥⻁虎藏⻯⿓龍的討論區

TestFlight測試

https://developer.apple.com/testflight

Apple Developer Forums

https://devforums.apple.com/community/ios

付費帳號申請

https://developer.apple.com/programs/ios/

Individual & Company

DUNS⼀一樣$99

Enterprise

https://developer.apple.com/programs/ios/enterprise/

付費會員的iOS開發網站畫⾯面

https://developer.apple.com/devcenter/ios/

開發團隊的打造• 分⼯工

App⼯工程師, 美術設計, PM, Server後端⼯工程師, 網⾴頁前端⼯工程師，⽼老闆，測試，⾏行銷，業務

• 兩⼈人⼩小組App⼯工程師 + 美術設計

• 三⼈人⼩小組App⼯工程師 + App流程功能設計 + 美術設計

• 強⼤大的⼀一個⼈人

ios/Android(Windows) PHP/RoR/Python/ASP/Node.js

HTML / CSS/ JavaScript

photoshop/ illustrator/ sketch

開發團隊

Wealthy記帳 英⽂文單字

三個臭⽪皮匠，勝過⼀一個諸葛亮

從Idea到App的設計

傳統開發App⽅方法問題1

2 創新解答3

宣傳⽂文案

開始設計App(prototype)

開發App App上架

新時代的App發想六步驟問題1 2 創新解答

3 研究市場上類似App

4 ⽂文案 5

開始設計App6

市場調查

宣傳⽂文案開發App App上架

Prototyping• 利⽤用紙和筆或軟體畫出每⼀一個畫⾯面• ⼤大家⼀一起討論，決定App畫⾯面的流程

axure Balsamiq

http://www.balsamiq.comhttp://www.axure.com

POP

https://popapp.in

畫⾯面設計• 設計師針對每個畫⾯面，做出美美的設計• 主要利⽤用photoshop ， illustrator ，Sketch

http://www.teehanlax.com/toolshttp://bohemiancoding.com/sketch/

iOS Human Interface Guidelines

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

開發中

開發語⾔言的選擇

Objective-C

Objective-C的剩餘利⽤用價值

• 台灣⺫⽬目前⼤大部分的App都是以Objective-C開發

• 台灣⺫⽬目前⼤大部分的公司仍然採⽤用Objective-C

• 找⼯工作，上班⾯面試考題主要為Objective-C

• 許多第三⽅方套件以Objective-C開發

Swift的優點• 更快的開發速度 & 效能

• 更簡潔，更容易學習的語法 ( 特別是寫過javascript的⼈人)

• 更安全，App更不容易crash，bug更少

• 結合各家語⾔言優點，更多Objective-C做不到的功能

• 完美結合iOS SDK(SDK: 實現App裡的功能，⽐比⽅方打電話，顯⽰示地圖)

• 相容Objective-C

• 相容iOS 7

無與倫⽐比的快

⼆二分天下的iOS 7 & iOS 8

https://developer.apple.com/support/appstore/

開發⼯工具Xcode的使⽤用

1. 建⽴立App專案

2. 選擇Single View Application

3. 設定專案資訊

必填

開發語⾔言設定

Devices設定

Universal App

• 產⽣生的App同時⽀支援iPhone和iPad

• 好處: 使⽤用者省錢，不⽤用買兩個版本

• 壞處:

• Size變⼤大

• 開發者賺的錢變少• 開發時間較⻑⾧長

4. 選擇專案儲存位置

git版本管理

Xcode主畫⾯面的基本操作1. Toolbar 2. 瀏覽區塊 3. 編輯區塊

2

3

1

8種navigator

Find Navigator

Project Navigator

編輯檔案ViewController.swift

Main.storyboard

執⾏行App 模擬器上初現⾝身

選擇App安裝的對象

iPhone 5s模擬器

實機

執⾏行App

終⽌止App

模擬器桌⾯面和App Icon

設定App名稱

準備App Icon圖⽚片• png

• 正⽅方形 (iOS會⾃自動切圓⾓角)

• 120 * 120 ( pixel) -> retina

• 180 * 180 (pixel) -> retina HD

預覽程式(Preview) 編輯圖⽚片尺⼨寸和格式

設定App Icon

設定App Icon

準備開頭畫⾯面圖⽚片

• png

• 3.5吋: 640 * 960

• 4吋: 640 * 1136

設定開頭畫⾯面

清空Launch Screen File

設定開頭畫⾯面

640 * 960640 * 1136

iPhone 6 & 6 plus• Scale Mode

• ⾃自動縮放 (⽐比例和4吋⼀一致)

• Full Screen Mode

• 另外提供6 & 6 plus的圖⽚片

• 解析度最好

• 較花時間

⽅方法⼀一: 使⽤用Launch Screen File⽅方法⼆二: 設定5.5 & 4.7吋圖⽚片

利⽤用storyboard製作 電⼦子書App

Storyboard的絕招

⼀一個Storyboard檔可同時定義多個App⾴頁⾯面

Storyboard檔可設定不同⾴頁⾯面間的切換流程，甚⾄至包含切換的動畫效果。

這次你不是主⾓角啦

App畫⾯面 - Scene - View Controller

物件列表Outline View

設計UI的畫布開頭畫⾯面後的第⼀一個畫⾯面

什麼是MVC

iOS App的三個核⼼心User

Interface

CoreLogicData

Model View Controller (MVC)

資料 畫⾯面，和使⽤用者互動

控制，邏輯

MVC

model view

controller

MVC範例mini.Hana

model:

view:

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

1. 從物件列表選擇⺫⽬目標

2. 設定Background

RGB & 透明度

輔助視窗Assistant editor

預覽畫⾯面

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: 顯⽰示1⾏行⽂文字2: 顯⽰示2⾏行⽂文字0: 顯⽰示多⾏行⽂文字

control + enter換⾏行

像堆積⽊木的畫⾯面排版

Page Two 顯⽰示圖⽚片

1. 將圖⽚片加⼊入專案

Images.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 item

改變bar的顏⾊色點選navigation controller下的navigation bar

縮放畫布⽅方法1. 觸控版縮放⽅方法2. 雙擊左鍵⽅方法3. 畫布上右鍵選單⽅方法4. Menu的Editor -> Canvas -> Zoom

UITabBarController

UITabBarController

第⼆二個tab

⽅方法1. 從畫布連線⽅方法2. 從Outline View連線

連接controller

tab標題和圖⽚片tab bar item

http://www.iconbeast.com/free/

tab個數上限: 5個UINavigationController

可拖曳調整tab順序

顯⽰示千⾔言萬語的Text View

可捲動

網⾴頁，地圖，電話

表格⾴頁⾯面

表格⾴頁⾯面

設定表格

sectioncell

設計cell

先設計⼀一個cell，其它cell依樣畫葫蘆

點選表格

美麗的⽑毛玻璃

blurvibrancy

圓⾓角

圓形: cornerRadius = 正⽅方形寬度/2

開發後躺著賺 ？

上架App Store

https://itunesconnect.apple.com

設定App資訊

設定App名稱

1. 顯⽰示在App Store上, 不同於Icon下的名稱2. 不同語⾔言可有不同名稱3. 獨⼀一無⼆二，先搶先贏4. 影響搜尋5. 改版可換名稱

App設定⾴頁⾯面

設定價錢

最⾼高999.99

設定上架國家

付費App需設定帳⼾戶

設定App資訊影⽚片預覽(30s)

螢幕截圖⽂文字介紹

關鍵字搜尋主要類別，次要類別

分級

版本Icon

審核資訊

從Xcode上傳App送審

需選擇device才能打開Archive

Apple Store的審核

退件理由• 程式有bug

• UI介⾯面不合Apple標準 (iOS Human Interface Guidelines)

• 內容不宜• 使⽤用private API

• 莫名的理由

App Store Review Guidelines for iOS Apps

https://developer.apple.com/appstore/resources/approval/guidelines.html

退件實例

App的宣傳, 評論, 訪問• ⾃自⼰己經營

Blog, 官⽅方網站，粉絲團

• App的操作影⽚片

• 社群分享FB，Instagram，twitter

FB分享

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

App的宣傳, 評論, 訪問• 達⼈人於blog發表⼼心得

• 媒體訪問App開發公司，開發者

• 參加⽐比賽• PTT，各⼤大論壇

⽐比賽

達⼈人blog

數位時代訪問

App的宣傳, 評論, 訪問

每⼀一版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

App的排名和下載App 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開發的扣稅

• 外國不會扣

• 只有台灣這裡會扣

• 國內所得 + 國外所得 < 600萬: 免稅

App的更新改版

新功能:

得來全不費⼯工夫，使⽤用者主動告訴我們

~ END ~  

http://alphacamp.tw