打造你的第一個 iOS App

打造你的第⼀一個
App
-‐
iOS

講師：彼得潘

[1/17]

彼得潘簡介
博客來2012百⼤大電腦類 Top 6
App程式設計⼊入⾨門:iPhone.iPad
作家，專欄作家，⼯工程師， 
講師，顧問，家教，創業家

新書預告
Swift程式設計⼊入⾨門
(暫定)

相關教學資源
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和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要靈感

iDevices
iPhone , iPod touch, iPad, iPad mini,Apple Watch ( iTV?)
測試

iDevice功能⽐比較
http://en.wikipedia.org/wiki/List_of_iOS_devices

作業系統
10.10
10.9
免費升級

從開發網站搶先下載機密
的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記帳英⽂文單字
三個臭⽪皮匠，勝過⼀一個諸葛亮

傳統開發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/tools
http://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的使⽤用

2. 選擇SingleView
Application

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 Icon圖⽚片
• png
• 正⽅方形 (iOS會⾃自動切圓⾓角)
• 120 * 120 ( pixel) -> retina
• 180 * 180 (pixel) -> retina HD

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

準備開頭畫⾯面圖⽚片
• png
• 3.5吋: 640 * 960
• 4吋: 640 * 1136

設定開頭畫⾯面
清空Launch Screen File

設定開頭畫⾯面
640 * 960
640 * 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的畫布開頭畫⾯面後的第⼀一個畫⾯面

iOS App的三個核⼼心
User
Interface
Core
Logic
Data
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 Classes
File 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 pixel
retina: 2 * 2 pixel
retina HD: 3 * 3 pixel
point

調整⼤大⼩小位置的⽅方法
⽅方法2. 從Size inspector
⽅方法1. 以滑⿏鼠移動縮放
⽅方法3. auto layout

設定label
⽂文字顏⾊色
字型
置左，置中，置右
⽂文字

設定多⾏行⽂文字
1: 顯⽰示1⾏行⽂文字
2: 顯⽰示2⾏行⽂文字
0: 顯⽰示多⾏行⽂文字

像堆積⽊木的畫⾯面排版

1. 將圖⽚片加⼊入專案
Images.xcassets
圖⽚片集合列表
圖⽚片清單
1x, 2x, 3x

顯⽰示圖⽚片的Image View

控制圖⽚片縮放⽐比例
勾選Clip Subviews

2個畫⾯面，2個controller

可點選的UIButton
以顏⾊色區分

UINavigationController
push & pop，幾層都可以
加上標題
segue

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

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

第⼆二個tab
⽅方法1. 從畫布連線
⽅方法2. 從Outline View連線
連接controller

tab標題和圖⽚片
tab bar item
http://www.iconbeast.com/free/

tab個數上限: 5個
UINavigationController
可拖曳調整tab順序

顯⽰示千⾔言萬語的Text View
可捲動

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

美麗的⽑毛玻璃
blur
vibrancy

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

上架App Store
https://itunesconnect.apple.com

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

設定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

• 達⼈人於blog發表⼼心得
• 媒體訪問App開發公司，開發者
• 參加⽐比賽
• PTT，各⼤大論壇
⽐比賽
達⼈人blog
數位時代訪問

每⼀一版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.html
http://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

打造你的第一個 iOS App

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a 打造你的第一個 iOS App

Similar a 打造你的第一個 iOS App (20)

打造你的第一個 iOS App