Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

打造你的第一個 iOS App

5,382 views

Published on

1.為什麼要做iOS App
2.認識iOS App和iDevice
3 開發前
開發環境的準備
開發帳號的申請
開發團隊的打造
從Idea到App的設計
4.開發中
開發語言的選擇
開發工具Xcode的使用
App的名字,Icon和開頭畫面
利用storyboard製作電子書App
頁面設計:圖片文字
多頁面管理:tab bar & navigation bar
無上限內容的捲動表格
網頁地圖和電話聯絡
美麗的毛玻璃
5.開發後
上架App Store 流程簡介
App的審核與宣傳,排名和獲利

Published in: Mobile
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

打造你的第一個 iOS App

  1. 1. 打造你的第⼀一個  App  -­‐  iOS   講師:彼得潘   [1/17]
  2. 2. 彼得潘簡介 博客來2012百⼤大電腦類 Top 6 App程式設計⼊入⾨門:iPhone.iPad 作家,專欄作家,⼯工程師,
 講師,顧問,家教,創業家
  3. 3. 新書預告 Swift程式設計⼊入⾨門 (暫定)
  4. 4. 2015 App預告
  5. 5. 相關教學資源 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
  6. 6. 為什麼要做App 因為美麗⼈人⽣生
  7. 7. App⼯工作的美麗⼈人⽣生 • 跟不同圈⼦子的⼈人合作交朋友,甚⾄至是偶像, Model • 多彩多姿的⼈人⽣生: 出書,寫專欄,當講師, 進錄⾳音室 • 任何地⽅方皆可⼯工作,咖啡廳,家裡都可以 • 睡到⾃自然醒 • ⾃自由的⼯工作環境,無打卡 • ⽼老闆就像朋友,無階級 • 可以⾃自⼰己創業作⽼老闆 • ⽩白吃⽩白喝,甚⾄至⽩白住
  8. 8. 彼得潘App的美麗⼈人⽣生 mini.Hana Penny V.K克
  9. 9. 為什麼要做iOS App? • 0.99的誘惑 (不易受不景氣影響) • 全球市場 • iPhone, iPod touch, iPad, iPad mini,Apple Watch, Mac, iTV • 虛擬房租 • ⼀一個⼈人創業做⽼老闆 • 熱賣的iDevice • 穩賺不賠, 賣143套就賺了( 99 / 0.7 / 0.99 = 142.85 ) • 年年更新SDK產⽣生新的應⽤用
  10. 10. 認識iOS App和iDevice
  11. 11. iOS和iDevice的特⾊色 • 無線上網 • GPS定位 • 加速度感應計和陀螺儀 • 相機 • OpenGL ES 2.0 • bluetooth • ⽣生動動畫 • Apple Map • In App Purchase • 資料庫 • HTML 5網⾴頁 • 多點觸碰 • 多⼯工
  12. 12. iOS和iDevice的特⾊色 • 社群整合 • iAD • iCloud • passbook • ⾏行事曆 • iMessage • Retina Display • 電⼦子羅盤 • game center • 書報攤 • 提醒事項 • Siri • 軟硬整合
  13. 13. 軟硬整合: ⾎血壓計
  14. 14. 軟硬整合: ⼿手沖咖啡秤 https://www.youtube.com/watch?v=umZvzuyMyHI
  15. 15. iOS 8的新特⾊色 https://developer.apple.com/ios8/
  16. 16. iOS App的限制 • 記憶體 • 螢幕⼤大⼩小 • 強制中斷 • 有條件的多⼯工 • 強制結束⽣生命
  17. 17. 開發前
  18. 18. 開發環境的準備
  19. 19. 硬體上的準備: Mac • Apple電腦 • PC上裝破解的Mac作業系統 (不建議) 記憶體愈多愈好 最便宜: $15900
  20. 20. Macbook Air / Pro 咖啡廳,書局都是我的辦公室 11/13/15吋, 最貴$79900 創作App要靈感
  21. 21. iDevices iPhone , iPod touch, iPad, iPad mini,Apple Watch ( iTV?) 測試
  22. 22. iDevice功能⽐比較 http://en.wikipedia.org/wiki/List_of_iOS_devices
  23. 23. 作業系統 10.10 10.9 免費升級
  24. 24. Xcode App Store Free Apple ID
  25. 25. 從開發網站搶先下載機密 的Xcode和iOS https://developer.apple.com/devcenter/ios 付費開發者才能下載
  26. 26. 開發帳號的申請
 Apple Developer https://developer.apple.com/register Apple ID Apple Developer 免費
  27. 27. 輸⼊入認證碼
  28. 28. 免費會員的iOS開發網站畫⾯面 https://developer.apple.com/devcenter/ios/
  29. 29. 付費會員好處 • 上架App Store
 ~ 不上架,為善不欲⼈人知 ? • 安裝App⾄至實體機器 (1000個測試帳號) • 搶先測試和開發最新版的iOS App • Apple Developer Forums
 臥⻁虎藏⻯⿓龍的討論區
  30. 30. TestFlight測試 https://developer.apple.com/testflight
  31. 31. Apple Developer Forums https://devforums.apple.com/community/ios
  32. 32. 付費帳號申請 https://developer.apple.com/programs/ios/
  33. 33. Individual & Company DUNS⼀一樣$99
  34. 34. Enterprise https://developer.apple.com/programs/ios/enterprise/
  35. 35. 付費會員的iOS開發網站畫⾯面 https://developer.apple.com/devcenter/ios/
  36. 36. 開發團隊的打造 • 分⼯工
 App⼯工程師, 美術設計, PM, Server後端⼯工程師, 網⾴頁前端⼯工程師,⽼老闆,測試,⾏行銷,業務 • 兩⼈人⼩小組
 App⼯工程師 + 美術設計 • 三⼈人⼩小組
 App⼯工程師 + App流程功能設計 + 美術設計 • 強⼤大的⼀一個⼈人
 ios/Android(Windows) PHP/RoR/Python/ASP/Node.js HTML / CSS/ JavaScript photoshop/ illustrator/ sketch
  37. 37. 開發團隊 Wealthy記帳 英⽂文單字 三個臭⽪皮匠,勝過⼀一個諸葛亮
  38. 38. 從Idea到App的設計
  39. 39. 傳統開發App⽅方法 問題1 2 創新解答 3 宣傳⽂文案 開始設計App (prototype) 開發App App上架
  40. 40. 新時代的App發想六步驟 問題1 2 創新解答 3 研究市場上類似App 4 ⽂文案 5 開始設計App6 市場調查 宣傳⽂文案開發App App上架
  41. 41. Prototyping • 利⽤用紙和筆或軟體畫出每⼀一個畫⾯面 • ⼤大家⼀一起討論,決定App畫⾯面的流程 axure Balsamiq http://www.balsamiq.comhttp://www.axure.com POP https://popapp.in
  42. 42. 畫⾯面設計 • 設計師針對每個畫⾯面,做出美美的設計 • 主要利⽤用photoshop , illustrator ,Sketch http://www.teehanlax.com/tools http://bohemiancoding.com/sketch/
  43. 43. iOS Human Interface Guidelines https://developer.apple.com/library/ios/documentation/ UserExperience/Conceptual/MobileHIG/
  44. 44. 開發中
  45. 45. 開發語⾔言的選擇 Objective-C
  46. 46. Objective-C的剩餘利⽤用價值 • 台灣⺫⽬目前⼤大部分的App都是以Objective-C開發 • 台灣⺫⽬目前⼤大部分的公司仍然採⽤用Objective-C • 找⼯工作,上班
 ⾯面試考題主要為Objective-C • 許多第三⽅方套件以Objective-C開發
  47. 47. Swift的優點 • 更快的開發速度 & 效能 • 更簡潔,更容易學習的語法 ( 特別是寫過javascript的⼈人) • 更安全,App更不容易crash,bug更少 • 結合各家語⾔言優點,更多Objective-C做不到的功能 • 完美結合iOS SDK
 (SDK: 實現App裡的功能,⽐比⽅方打電話,顯⽰示地圖) • 相容Objective-C • 相容iOS 7
  48. 48. 無與倫⽐比的快
  49. 49. ⼆二分天下的iOS 7 & iOS 8 https://developer.apple.com/support/appstore/
  50. 50. 開發⼯工具Xcode的使⽤用
  51. 51. 1. 建⽴立App專案
  52. 52. 2. 選擇SingleView Application
  53. 53. 3. 設定專案資訊 必填
  54. 54. 開發語⾔言設定
  55. 55. Devices設定
  56. 56. Universal App • 產⽣生的App同時⽀支援iPhone和iPad • 好處: 使⽤用者省錢,不⽤用買兩個版本 • 壞處: • Size變⼤大 • 開發者賺的錢變少 • 開發時間較⻑⾧長
  57. 57. 4. 選擇專案儲存位置 git版本管理
  58. 58. Xcode主畫⾯面的基本操作 1. Toolbar 2. 瀏覽區塊 3. 編輯區塊 2 3 1
  59. 59. 8種navigator Find Navigator Project Navigator
  60. 60. 編輯檔案 ViewController.swift Main.storyboard
  61. 61. 執⾏行App 模擬器上初現⾝身
  62. 62. 選擇App安裝的對象 iPhone 5s模擬器 實機
  63. 63. 執⾏行App 終⽌止App
  64. 64. 模擬器桌⾯面和App Icon
  65. 65. 設定App名稱
  66. 66. 準備App Icon圖⽚片 • png • 正⽅方形 (iOS會⾃自動切圓⾓角) • 120 * 120 ( pixel) -> retina • 180 * 180 (pixel) -> retina HD
  67. 67. 預覽程式(Preview) 編輯圖⽚片尺⼨寸和格式
  68. 68. 設定App Icon
  69. 69. 設定App Icon
  70. 70. 準備開頭畫⾯面圖⽚片 • png • 3.5吋: 640 * 960 • 4吋: 640 * 1136
  71. 71. 設定開頭畫⾯面 清空Launch Screen File
  72. 72. 設定開頭畫⾯面 640 * 960 640 * 1136
  73. 73. iPhone 6 & 6 plus • Scale Mode • ⾃自動縮放 (⽐比例和4吋⼀一致) • Full Screen Mode • 另外提供6 & 6 plus的圖⽚片 • 解析度最好 • 較花時間
 ⽅方法⼀一: 使⽤用Launch Screen File ⽅方法⼆二: 設定5.5 & 4.7吋圖⽚片
  74. 74. 利⽤用storyboard製作 電⼦子書App
  75. 75. Storyboard的絕招 ⼀一個Storyboard檔可同時定義多個App⾴頁⾯面 Storyboard檔可設定不同⾴頁⾯面間的切換 流程,甚⾄至包含切換的動畫效果。 這次你不是主 ⾓角啦
  76. 76. App畫⾯面 - Scene - View Controller 物件列表
 Outline View 設計UI的畫布開頭畫⾯面後的第⼀一個畫⾯面
  77. 77. 什麼是MVC
  78. 78. iOS App的三個核⼼心 User Interface Core Logic Data Model View Controller (MVC)
  79. 79. 資料 畫⾯面,和使⽤用者互動 控制,邏輯 MVC model view controller
  80. 80. MVC範例mini.Hana model: view: controller: 圖⽚片資料( 檔名,圖⽚片說明) 圖⽚片 圖⽚片如何排列 點選圖⽚片的反應
  81. 81. 設定畫⾯面背景顏⾊色
  82. 82. Xcode的四分天下 瀏覽區塊 編輯區塊 Utility Debug區塊
  83. 83. Inspector Pane 查詢, 設定屬性的名偵探 Library Pane 資源豐富的寶庫 Object Library (元件清單) 收藏物件,⼤大部份是UI物件 Utility Attributes Inspector 查詢, 設定UI元件屬性
  84. 84. Disable Size Classes File inspector 設定不同size畫⾯面的進階技術
  85. 85. Disable Size Classes 有size 沒size
  86. 86. 1. 從物件列表選擇⺫⽬目標
  87. 87. 2. 設定Background RGB & 透明度
  88. 88. 輔助視窗
 Assistant editor
  89. 89. 預覽畫⾯面
  90. 90. Page One
 顯⽰示⽂文字 將元件加到畫⾯面上
  91. 91. 1. 從Object Library挑選物件 顯⽰示⽂文字的label ~ 不能點選的⽂文字
  92. 92. 2. 拖曳到View上 對⿑齊的藍線 可直接輸⼊入⽂文字
  93. 93. 怎麼定義UI元件的 ⼤大⼩小和位置 以⻑⾧長⽅方形定義
  94. 94. iOS的座標系統 (30, 60) (0, 0) (x, y) 單位Points not retina: 1 pixel retina: 2 * 2 pixel retina HD: 3 * 3 pixel point
  95. 95. 調整⼤大⼩小位置的⽅方法 ⽅方法2. 從Size inspector ⽅方法1. 以滑⿏鼠移動縮放 ⽅方法3. auto layout
  96. 96. 設定label ⽂文字顏⾊色 字型 置左,置中,置右 ⽂文字
  97. 97. 設定多⾏行⽂文字 1: 顯⽰示1⾏行⽂文字 2: 顯⽰示2⾏行⽂文字 0: 顯⽰示多⾏行⽂文字
  98. 98. control + enter換⾏行
  99. 99. 像堆積⽊木的畫⾯面排版
  100. 100. Page Two 顯⽰示圖⽚片
  101. 101. 1. 將圖⽚片加⼊入專案 Images.xcassets 圖⽚片集合列表 圖⽚片清單 1x, 2x, 3x
  102. 102. 2. Page Two的controller
  103. 103. 顯⽰示圖⽚片的Image View
  104. 104. 控制圖⽚片縮放⽐比例 勾選Clip Subviews
  105. 105. 建⽴立多⾴頁⾯面App
  106. 106. 2個畫⾯面,2個controller
  107. 107. 可點選的UIButton 以顏⾊色區分
  108. 108. 以圖⽚片做button
  109. 109. UINavigationController
  110. 110. UINavigationController
  111. 111. UINavigationController
  112. 112. UINavigationController push & pop,幾層都可以 加上標題 segue
  113. 113. bar button item
  114. 114. 改變bar的顏⾊色 點選navigation controller下的navigation bar
  115. 115. 縮放畫布 ⽅方法1. 觸控版縮放 ⽅方法2. 雙擊左鍵 ⽅方法3. 畫布上右鍵選單 ⽅方法4. Menu的Editor -> Canvas -> Zoom
  116. 116. UITabBarController
  117. 117. UITabBarController
  118. 118. 第⼆二個tab ⽅方法1. 從畫布連線 ⽅方法2. 從Outline View連線 連接controller
  119. 119. tab標題和圖⽚片 tab bar item http://www.iconbeast.com/free/
  120. 120. tab個數上限: 5個 UINavigationController 可拖曳調整tab順序
  121. 121. 顯⽰示千⾔言萬語的Text View 可捲動
  122. 122. 網⾴頁,地圖,電話
  123. 123. 表格⾴頁⾯面
  124. 124. 表格⾴頁⾯面
  125. 125. 設定表格 section cell
  126. 126. 設計cell 先設計⼀一個cell,
 其它cell依樣畫葫蘆
  127. 127. 點選表格
  128. 128. 美麗的⽑毛玻璃 blur vibrancy
  129. 129. 圓⾓角 圓形: cornerRadius = 正⽅方形寬度/2
  130. 130. 開發後 躺著賺 ?
  131. 131. 上架App Store https://itunesconnect.apple.com
  132. 132. 設定App資訊
  133. 133. 設定App名稱 1. 顯⽰示在App Store上, 不同於Icon下的名稱 2. 不同語⾔言可有不同名稱 3. 獨⼀一無⼆二,先搶先贏 4. 影響搜尋 5. 改版可換名稱
  134. 134. App設定⾴頁⾯面
  135. 135. 設定價錢 最⾼高999.99
  136. 136. 設定上架國家
  137. 137. 付費App需設定帳⼾戶
  138. 138. 設定App資訊 影⽚片預覽(30s) 螢幕截圖 ⽂文字介紹 關鍵字搜尋 主要類別,次要類別 分級 版本 Icon 審核資訊
  139. 139. 從Xcode上傳App送審 需選擇device才能打開Archive
  140. 140. Apple Store的審核 退件理由 • 程式有bug • UI介⾯面不合Apple標準 (iOS Human Interface Guidelines) • 內容不宜 • 使⽤用private API • 莫名的理由
  141. 141. App Store Review Guidelines for iOS Apps https://developer.apple.com/appstore/resources/ approval/guidelines.html
  142. 142. 退件實例
  143. 143. App的宣傳, 評論, 訪問 • ⾃自⼰己經營
 Blog, 官⽅方網站,粉絲團 • App的操作影⽚片 • 社群分享
 FB,Instagram,twitter FB分享 https://www.youtube.com/watch?v=_iC8jnx32ho
  144. 144. App的宣傳, 評論, 訪問 • 達⼈人於blog發表⼼心得 • 媒體訪問App開發公司,開發者 • 參加⽐比賽 • PTT,各⼤大論壇 ⽐比賽 達⼈人blog 數位時代訪問
  145. 145. App的宣傳, 評論, 訪問 每⼀一版50組的Promo Code 免費下載
  146. 146. App宣傳, 評論, 訪問 App評測網站雜誌 App Store評價
  147. 147. 上排⾏行榜的⽅方法 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
  148. 148. App的排名和下載 App Annie iTunes Connect App Store http://www.appannie.com https://itunes.apple.com/tw/app/appstatics-track-iphone-ipad/id533547308 Appstatics
  149. 149. App的獲利 • free vs. 0.99
 台灣付費單⽇日前三名
 不到100套 • in-app purchase • 固定房租 • 廣告
 ⼀一個⽉月破⼗十萬 • 合作⾏行銷
  150. 150. App開發的扣稅 • 外國不會扣 • 只有台灣這裡會扣 • 國內所得 + 國外所得 < 600萬: 免稅
  151. 151. App的更新改版 新功能: 得來全不費⼯工夫, 使⽤用者主動告訴我們
  152. 152. ~ END ~   http://alphacamp.tw

×