# ( Windows ) Cordova + Vue Cli 環境建置與安裝指南 ( 20210429 更新)
###### tags: `Cordova`

[Cordova官網](https://cordova.apache.org/)

## 此次建置規格
### 環境
* Node.js
* JDK => version 1.8.x
* Android SDK => Platform 28
* Gradle => version 7.0-all
### Cordova 安裝平台
* iOS
* Android
### Cordova 使用套件
* 低功率藍芽連線 => cordova-plugin-bluetoothle
* FB Login => cordova-plugin-facebook4
* 允許白名單 ( 預設安裝 ) => cordova-plugin-whitelist

---

## 安裝 JDK ( 1.8.x )
### 下載
[Java SE Development Kit 8 Downloads](https://www.oracle.com/tw/java/technologies/javase/javase-jdk8-downloads.html)
### 環境配置

---

## 安裝 Android SDK
### 下載
1. 下載 [Android Studio](https://developer.android.com/studio?gclid=Cj0KCQjwsqmEBhDiARIsANV8H3bYODQTCmE0PXnI32sVaYxM1FW5382iXH8LYah-8fKOQuC--anauNwaAoHxEALw_wcB&gclsrc=aw.ds) ( 可避免掉一些環境配置 & 提供模擬器，但資源很大 )
2. 下載 [Command line tools ( 進入網頁後搜尋Command line tools )](https://developer.android.com/studio?gclid=Cj0KCQjwsqmEBhDiARIsANV8H3bYODQTCmE0PXnI32sVaYxM1FW5382iXH8LYah-8fKOQuC--anauNwaAoHxEALw_wcB&gclsrc=aw.ds) -> **這次安裝是使用這個**
### 安裝(建置)
1. 將 cmdline-tools 解壓縮放至

C:\Android\cmdline-tools

2. 在進入至

C:\Android\cmdline-tools\latest\bin

3. 開啟 Cmd
4. 使用 sdkmanager.bat 安裝對應的 SDK 版本 ( API Level )
[sdkmanager 指令參考](https://developer.android.com/studio/command-line/sdkmanager)

**※ Cordova 支援版本**
**※ Android 版本歷史**

### 環境配置 ( 應該只有 sdk-tools-windows 要配置(?) )

---

## 安裝 Gradle
### 下載
[Gradle-Releases](https://gradle.org/releases/)
### 環境配置

---

## 安裝 Cordova

npm install -g cordova

### 建立 Cordova 資料夾
* 建立資料夾 => hello
* PackageName => com.example.hello ( 可在 config.xml 修改 )
* App 名稱 => HelloWorld ( 可在 config.xml 修改 )

cordova create hello com.example.hello HelloWorld

---

## 開始下指令 ( 在建立好的 Cordova 資料夾開啟 cmd )
[官方指令集](https://cordova.apache.org/docs/zh-tw/10.x/guide/cli/)

### 安裝平台

cordova platform add ios

cordova platform add android

---

### FB Login => [cordova-plugin-facebook4](https://github.com/jeduan/cordova-plugin-facebook4)
1. 安裝 FB Login 套件

cordova plugin add cordova-plugin-facebook4 --save --variable APP_ID="270555104487540" --variable APP_NAME="i-Care"

2. FB Developer 設置應用程式
3. 手動新增一個 build.json 檔 並將剛剛產出的雜湊碼檔案丟入 Cordova 資料夾( 聽說 Mac 可略過此步驟，我用 Windows 建置安卓時會抓不到正確的雜湊碼導致 FB 無法登入 )

**※ build.json 檔內容**

{
     "android": {
         "debug": {
             "keystore": "./debug.keystore",
			"storePassword": "android",
			"alias": "androiddebugkey",
			"password" : "android",
			"keystoreType": ""
         },
         "release": {
             "keystore": "./debug.keystore",
			"storePassword": "android",
			"alias": "androiddebugkey",
			"password" : "android",
			"keystoreType": ""
         }
     }
 }

**※ 如何產生雜湊碼？快速入門有教學 => 操作到 4.新增您的「開發金鑰雜湊」和「發行金鑰雜湊」**
#### 快速說明 ( 簡單來說就是使用 keytool 加上 OpenSSL 去產生 debug.keystore 這個檔案 )
1. 下載 OpenSSL
2. 到 jre 的 bin 中開啟 cmd 執行以下指令

keytool -exportcert -alias androiddebugkey -keystore "%USERPROFILE%\.android\debug.keystore" | "C:\Users\user\Desktop\新增資料夾\bin\openssl" sha1 -binary | "C:\Users\user\Desktop\新增資料夾\bin\openssl" base64

3. 執行後會要輸入密碼，輸入 android

---

### 安裝 連接低功率藍芽套件 => [cordova-plugin-bluetoothle](https://github.com/randdusing/cordova-plugin-bluetoothle)
1. 安裝套件

cordova plugin add cordova-plugin-bluetoothle

2. 查看測試頁面的 Code

**※ 特別注意，使用此藍芽套件時，手機必須開啟定位功能 和 允許應用程式使用位置權限**

---

### 將 Vue Cli 建置至 Cordova/www
1. 在 vue.config.js 中配置一些參數

module.exports = {
    publicPath: './',
    //這個值也可以被設置為空字符串('') 或是相對路徑('./')，這樣所有的資源都會被鏈接為相對路徑，這樣打出來的包可以被部署在任意路徑，也可以用在類似Cordova hybrid 應用的文件系統中。
    outputDir: '../cordova-project/www',
    //將打包目錄指向/cordova-projec下的www
    productionSourceMap: false,
    //如果你不需要生產環境的 source map，可以將其設置為 false 以加速生產環境構建。
}

2. 安裝專案使用套件 ( Project Setup )

npm install

3. 建置專案

npm run build

**※ 參考**
=> [Configuration Reference](https://cli.vuejs.org/config/).

### 執行 android

#### run 的時候將 app 裝至模擬器 or 可 USB 偵錯的手機

cordova run android --device

#### 普通 run or build 會在 "Cordova資料夾\platforms\android\app\build\outputs\apk" 中找到建置好的 apk 檔

cordova build android

[安卓手機開啟 USB 偵錯方法](https://blog.xuite.net/yh96301/blog/539578941)