[Cordova] 在 Mac 裡將網站轉成可上架的 Andorid App

2016-07-01

Google Play 圖書合作夥伴中心一直都不開放註冊 真是阿砸

只好暫時轉為做成 Android App 使用

直接將 GitBook 的線上閱讀版本網站 使用 Cordova 轉成 Android App

因為這是事後才記錄轉換步驟 所以可能會有遺漏 未來有機會再做一次流程的話會再補充

還有這是在 Mac 作業系統下的步驟 Windows 跟 Linux 應該也大同小異吧 我想

▼ 安裝 Android Studio

因為還是需要 Android 開發相關的 SDK

所以首先要把 Android Studio 裝起來

裝起來後 可以先開一個專案 並用模擬器跑一遍

這樣可以將需要的 SDK (還有什麼 JDK )與模擬器需要的 AVD 都先裝起來 (這部份可能會花點時間下載)

Android Studio 預設要求安裝的 SDK 可能跟 Cordova 要求的版本不同 目前前者要求 24 而後者只要 23 的就好

如果電腦硬碟空間夠的話 就都裝了省事

** 接著以下的指令都要打開終端機執行 **

▼ 安裝 Cordova

使用 npm 來安裝 Cordova (沒有 npm 的要先裝)

sudo npm install -g cordova

▼ 建立 Cordova 專案

找到要建立專案的位置後 建立一個新的專案

cordova create swiftgo tw.hsin.swiftgo SwiftGo

cordova create 指令後面依序為 建立目錄名稱, 專案識別碼, 專案名稱

▼ 增加支援的平台

建立好專案後 接下來的指令都是在 swiftgo 目錄下執行

這邊只要 android 的 所以只加入一個 其他 ios 等等平台就是一樣的指令

cordova platform add android

▼ 加入內容

swiftgo 目錄下有一個 www 的目錄 就是放網站的地方

將原先預設的內容都刪掉 並把做好的網站放進 www 目錄下即可

▼ 設定應用程式

swiftgo 目錄下有一個 config.xml 檔案 是用來設定應用程式的基本資訊

其內可以將預設的 name, description, author, content 標籤內容改成應用程式的資訊

還有依照 Cordova 的文件 你還可以在 config.xml 中設置應用程式的圖示

如果是以 android 來說 需要下列六種尺寸的 icon


    
    
    
    
    
    
    

上述的路徑 是以專案路徑為根目錄 所以如果要依照上面寫的圖示路徑

就要在 swiftgo 目錄下新增 res/android 目錄

並把六個檔案放在 res/android 目錄裡

另外要上架的話 還需要準備一個 512×512 的圖示檔案

▼ 在模擬器中測試

在 swiftgo 目錄下執行以下指令來測試

cordova emulate android

這時有可能會缺少 SDK 檔案

就照他提示的把 android SDK manager 打開 並安裝缺少的 SDK 即可 (這部份可能會花點時間下載)

▼ 生成可以在 google play 上架的 apk 檔案

以下指令可以生成 release build 的 apk

cordova build --release android

但生成的 apk 檔案是未 sign 過 會無法安裝

所以還需要在 platforms/android 目錄下

建立一個名為 release-signing.properties 的文字檔 內容如下

storeFile=/Users/joefeng/Documents/swiftgo.keystore
storeType=jks
keyAlias=androidkeystore

三行依序為:

storeFile :稍後會建立的 keystore 檔案路徑 ( joefeng 為 Mac 使用者名稱)

storeType :keystore 類型

keyAlias :keystore 使用的別名

▼ 建立 keystore 檔案

如果尚未有 keystore 檔案的話要先建立

先到上述設置好的目錄 /Users/joefeng/Documents/ 下

使用 keytool 建立一個 keystore 指令如下

keytool -genkey -v -keystore swiftgo.keystore -alias androidkeystore -keyalg RSA -keysize 2048 -validity 10000

keytool -genkey -v 後的指令參數依序為:

-keystore swiftgo.keystore :keystore 名稱 必須與前述 release-signing.properties 中的 storeFile 相同

-alias androidkeystore : keystore 使用的別名 必須與前述 release-signing.properties 中的 keyAlias 相同

-keyalg RSA : keystore 的加密格式

-keysize 2048 : keystore 的長度

-validity 10000 :keystore 的有效天數 單位為日

建立過程中會向你詢問設置基本資訊以及密碼

建立完後再執行前一個步驟 release build 的指令 就可以開始建立

這過程中會詢問建立 keystore 時設置的密碼

建立成功後 會在 swiftgo 目錄下的 platforms/android/build/outputs/apk/android-release.apk 找到這個 apk 檔案

就可以拿來到 google play 上架了

ref :
http://ephrain.pixnet.net/blog/post/61172941
http://ephrain.pixnet.net/blog/post/61242961
http://blog.twtnn.com/2014/08/apache-cordova-35-keystoreapk.html
http://www.inote.tw/create-android-keystore-on-macos