iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 28
0
Modern Web

使用 Modern Web 技術來打造 Native App系列 第 28

Day 28:最後一哩路 Part I - iOS 上架

前言

如果使用者不能在 App Store 下載的到,那花了不少時間的 App 只能在模擬器或是少數的測試裝置上用得到,這樣非常可惜。不過上架實在不是簡單的事,除了很繁瑣的步驟、要支援很多不同解析度的裝置、放上一些截圖跟描述,如果違反了一些官方的條款或是設計原則的話很可能會被退件。而筆者也是第一次嘗試上架,跟同樣對於上架陌生的讀者能站在一樣的出發點來思考這個過程。

應用程式設定

一些應用程式相關的設定必須在 Xcode 裡面完成,而 React Native 的專案都會有一個 .xcodeproj 放在 ios 目錄裡面,例如 ios/IronGithub.xcodeproj

打開之後點擊左方的專案後會看到這個畫面:

Bundle Identifier

Bundle Identifier 用來識別,必須是全 App Store 唯一的,不能重複,上架後也不能修改,所以想改就要趁現在:

Deployment Info

Devices 的部分有三個選擇:

  • iPhone:只支援 iPhone
  • iPad:只支援 iPad
  • Universal:iPhone、iPad 都支援

選擇不同的支援對象也會需要準備不同的 Icon 和 Launch Image。

App Icon

先弄個 Icon 出來

時間真的是太有限了,所以打開 Photoshop 隨便先拉個圓圈和漸層,收工:

這邊可以存常用的 .psd.jpg 或是 .png

要注意的是 Apple 要求圖檔是填色的,不要搞出什麼背景是透明的圖檔出來。

搞定尺寸

在 Apple 的開發者文件上看得到 App 需要的 Icon 尺寸

光是準備這些尺寸到對應的檔名可能就會吐血身亡了。還好,我們可以用工具來產生這些格式,筆者推薦使用 MakeAppIcon 這個線上工具:

它支援 .psd.jpg 或是 .png 三種格式,上傳之後就可得到兩個平台的 Icon 預覽:


填寫之後就會寄到信箱囉,會出現一隻可愛的貓:

收到信與附件:

下載解壓縮後就有一堆的 Icon:


放進專案

ios/IronGuthub/Images.xcassets/AppIcon.appiconset 用解壓縮後的目錄中的 ios/AppIcon.appiconset 整個替換掉即可。就會出現滿滿的 Icon:

Launch Screen

Launch Screen 是指 App 還在載入時所顯示的畫面,而第一個畫面準備好時就會快速的取代掉 Launch Screen。

Guideline

下方這張圖是來自官方的 Guideline,左邊是 Launch Screen,右邊是第一個畫面:

可以發現左邊雖然都沒有內容,但是卻有跟右邊幾乎一樣的 Layout。Guideline 上建議做一個跟第一個畫面很接近的畫面,讓整個轉換過程很平滑,可以有比較好的使用者體驗。

除此之外,Guideline 上還明確的建議不要有下面三種狀況:

  • 不要有文字,因為 Launch Screen 是靜態的無法做多國語言
  • 不要吸引注意力,使用者可能會常常切換 App
  • 不要廣告,不要顯示 Logo,這不是介紹品牌的機會

很推薦看一下官方 Guideline 的原文。

製作的方式

Launch Screen 有兩種做法:

  1. 使用圖檔
  2. 用 Xcode Storyboard 來做

官方不推薦使用圖檔,又要處理螢幕寬度的問題也是個麻煩,要準備 5 種 Size:

所以筆者這邊打算使用 Xcode Storyboard 來做。

首先,先開一個新檔案,File → New → File...,然後選擇 Launch Screen

雖然 Guideline 說不要文字,但是時間有限,也只能將就一下,所以就只把 Facebook Copyright 給刪掉:

回去 Project 那邊看看 Launch Screen File 是不是剛剛建立的檔案,如果是就完成囉:

設計與製作 iOS Launch Image 這篇寫得相當不錯,推薦給大家。

設定 Release 版 Scheme

還有一件很重要的事,就是設定 Release 版 Scheme,如果不這麼做,在使用者搖晃手機時就會跳出開發者選單...。在 Product → Scheme → Edit Scheme 設定 Scheme:

Build Configuration 調成 Release,並把 Debug executable 的勾選取消:

筆者在處理這個步驟時有遇到一個 Apple Mach-o Linker (Id) 的 Error,後來參考這篇,在 Other Linker Flags 加上 -lc++ 後問題就解決了。

這篇官方教學也可以參考一下。

開發者帳號

Apple Developer 帳號必須登記 Apple Developer Program (美金 $99) 才能在真的裝置上測試 App 和上架 App,如果還沒有登記,但是想認真開發 iOS 上架的話,還是必須得投資下去。

可以在這裡登記:https://developer.apple.com/programs/enroll/

前面還沒有登入的時候是這樣:

登入開發者並選擇有登記 Apple Developer Program 的 Team 後是這樣:

在下個步驟之前,應該先試著把 App 透過 USB 建置到自己的 iOS 裝置上試一下,避免上傳有問題的程式。

上傳應用程式

建立 App

iTunes Connect 進行登入後,可以看到這個首頁:

先進到 My Apps,然後點左上角的 + 開一個 New App

開完後把資料都填一填:

需要特別注意的是 Bundle ID,如果還沒有註冊 ID,必須點擊 Register a new bundle ID

會被導到 Apple Developer 的頁面,必須在 Certificates, Identifier & Profiles 這邊來新增 App ID:


App ID、Bundle ID 要小心的填,Bundle ID 必須與 Xcode Project 上一致。

建構 Archive

接下來,再回到 Xcode 把建構目標改成 Generic iOS Device

然後選擇 Product → Archive

Build 成功後就會出現 Archive 的訊息,點擊 Upload to App Store... 即可上傳:

成功!

回到 iTunes Connect 選擇 `Activity → All Builds,就能看到剛剛上傳成功的 Build:

填寫上架資訊

接下來到 1.0 Prepare for Submission 來填寫剩下的資料:

截圖

大部分的資料都還算好填,唯一麻煩的是截圖的部分,5.5-Inch 可以用 iPhone 6s Plus 模擬器,Cmd + S 來截圖:

為了偷懶,其他的就直接沿用 5.5-Inch 的圖:

另一個要處理的是 12.1-Inch,可以用 iPad Pro 來截圖:

價格

定價的資訊在另一頁裡面,也必須要填,如果免費的話不用想太多:

Build

在前面的流程可能已經上傳了很多版的 Build,這篇要選一個適合的:

Beta 測試

可以用 TestFlight 來讓測試人員下載 Beta App,如此以來可以再上架前作最後檢查並得到回饋,也能避免發生一些很顯而易見的問題而上架過程被退回:

提交

都填妥後就可以點擊提交了:

如果有什麼問題會顯示錯誤,滑一滑應該看得到錯誤的地方會有提示:

一切 ok 後,App 就會變成 Waiting For Review 的狀態囉:

接下來就是慢慢等待好消息了。

結語

iOS 上架真不是普通的複雜,準備一堆圖的部分就已經有點折磨,偶而還會遇到一些奇怪的錯誤,重做一次可能就又好了。對於一個第一次上架的外行人來說,遇到錯誤真的是蠻挫折的,不過在這個過程中也漸漸搞清楚正確的流程和做法,寫了這樣一篇下次再弄應該能快很多,也希望能對讀者有點幫助!


上一篇
Day 27:React Native 除錯
下一篇
Day 29:最後一哩路 Part II - Android 上架
系列文
使用 Modern Web 技術來打造 Native App30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言