將 angular 專案變成 android app (使用cordova) -- 工具安裝設定篇

預設環境: Windows10 !!請注意，目前只有 APK 版

影片連結

openJDK 為 GPL license 為比較需要注意的事項。如要採用請詳加考慮喔。
我個人比較推薦影片使用的 openJDK，因為文章中的 openJDK 編譯的時候會有 https 下載問題
也就是它的 JDK 裡面似乎沒有 https license 的樣子
build apk 的時候會要下載 gradle 。那時候會失敗。也就是文章介紹的 openJDK 我沒成功安裝過。
會用以上圖片是因為我之前安裝 java ，後來換掉了，
但是我發現下載後的 gradle 暫存檔會存在 C:\Users\orange-cat\.gradle 資料夾裡 ，
但是後來我把 C:\Users\orange-cat\.gradle 資料夾整個刪掉要重 build 的時候就失敗了
是後來換了 Zulu OpenJDK 才成功的。所以建議可以下載 Zulu OpenJDK
如果之前安裝過 java ，要換 openJDK 記得換掉 JDK 後也要把 C:\Users\orange-cat\.gradle 全部刪掉再重新 build apk
官方網址 https://www.azul.com/downloads/zulu-community/?package=jdk

1.安裝 Open JDK

step1. 可到官網 JDK8 下載 openJDK

step2. 下載版本號 8

step3. 下載openJDK

step4. 下載openJDK完後解壓縮，資料夾內容如下

step5. 複製取代
在 C:\Program Files 底下建立 Java\jdk1.8.0_221，
並將下載來的openJDK內容複製到 C:\Program Files\Java\jdk1.8.0_221裡

!! 請注意 ，資料夾可任意名稱與任何位置，只是此範例安裝在 C:\Program Files\Java\jdk1.8.0_221 。

差別在之後的 JAVA_HOME 路徑設定。

2.安裝 Android Studio

可到官網下載 Android Studio

3.下載相關的 Android API

step1. 到剛剛下載 Android Studio 的資料夾，開啟應用程式

step2.在右上方選單捩點選 [SDK Manager] 圖示

step3. 點選 Create Virtual Device...

step4. 隨便選一個虛擬裝置

step5. 選一個喜歡的Android API ，最好不要太新也不要太舊

step6. 挑選放置 API tool 位置
這時候系統會讓你挑選放置 API tool 的位置，通常不能跟安裝的資料夾相同
可以隨便選擇預設，或如此範例選在 C:\android sdk 裡

step7. 加入 gradle
新安裝的 Android Studio 如果沒有 gradle 會無法 build apk 檔案
可到這裡下載 Gradle

step8. 範例直接下載 Binary-only 即可

step9. 解壓縮完直接丟入安裝資料夾 C:\Program Files\Android\Android Studio 即可。如圖

4.安裝 NodeJS

如果要開發 angular 專案是必須的。 可到官網下載 nodejs

5.安裝 Cordova

執行以下安裝

    npm install -g cordova
    

6.設定使用者變數，系統變數

step1. 隨意開啟一個資料夾，對著左邊欄位的 [本機] 選項按右鍵出現選單，
選擇最後一個選項 [內容(R)]。

step2. 在新出現的選單後，選擇 [進階系統設定] 。

step3. 在出現的 [系統內容] 選單裡，選擇 [進階] ，點選 [環境變數(N)] 。

step4. 在上方 [使用者變數(U)] 添加以下變數 :
圖中(1)ANDROID_SDK_ROOT C:\android sdk
圖中(2)JAVA_HOME C:\Program Files\Java\jdk1.8.0_221
圖中(5)
C:\android sdk\platform-tools
C:\android sdk\build-tools
C:\android sdk\tools
添加完成記得按 [確定] 儲存設定。

以上設定完成。
環境設定完成後，可參考下一篇，如何建置專案。
將 angular 專案變成 android app (使用cordova) -- 專案建置篇