###### tags: `ionic`
# 🌝[T]Ionic

## 介紹
### 釐清Cordova、Ionic、Angular的關係

> 假設小A只會HTML+CSS+JavaScript，但她需要在短時間內開發出一個APP，在她正在苦惱的時候，這時候小I出現了，她告訴小A說: 你想要用HTML+CSS+JavaScript就可以開發APP的話，可以透過我找小C一起協助妳開發哦!
>
> 總結一下，Angular(小A)開發者，可以安裝Ionic(小I)撰寫程式實現頁面架構，並安裝Cordova(小C)的套件來實現頁面包裝、原生功能應用，實現APP的開發。


[Cordova](https://cordova.apache.org/docs/en/latest/guide/overview/index.html)
[Ionic](https://ionicframework.com/docs/v3/intro/installation/)
[Angular](https://angular.io/docs)

## 環境
<!-- [Cordova文件](https://cordova.apache.org/docs/en/latest/) -->
在WEB開發完成後，如果想在手機上測試專案，又沒有Android或是IOS，就必須使用模擬器來測試，下面是模擬環境的準備步驟。

### Android
[Android Platform Guide](https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html)
#### ==JDK(Java Development Kit)==
* 下載完JDK後，還要設定JAVA_HOME環境變數
1. 控制台\系統及安全性\系統\進階系統設定\環境變數
2. 系統設定>新增:JAVA_HOME | C:\Program Files\Java\jdk1.8.0_211
#### ==Gradle==
* 若是不想裝Android Sutdio的人可以到官網下載.gradle檔，自己設定環境變數
1.Download> Binary-only(下載二進位的，不知道為什麼要下載二進位看著文件下載的)
2.系統設定>PATH>新增: C:\Program Files\Gradle\gradle-2.10\bin
#### ==Android SDK==
* 安裝[Android Studio](https://developer.android.com/studio/index.html)，並設定好確認可執行(最好將模擬器執行起來)。
#### ==Environment variables==
* JAVA_HOME
1. C:\Program Files\Java\jdk1.8.0_211
* ANDROID_HOME / ANDROID_SDK_ROOT
1. C:\Users\smile\AppData\Local\Android\Sdk
* PATH
1. C:\Users\[your user]\AppData\Local\Android\Sdk\platform-tools
2. C:\Users\[your user]\AppData\Local\Android\Sdk\tools

### IOS
==Xcode==
* 不確定安裝Xcode前後需不需要在準備什麼東西，使用部門的MAC測試時就已經是安裝好的了。

### 錯誤集
#### #1 [ps1檔案未經數位簽署](https://dotblogs.com.tw/gelis/2010/10/23/18532)
* 以系統管理者開啟 Windows PowerShell
* 輸入

    Set-ExecutionPolicy RemoteSigned

* 您要變更執行原則嗎? Y

#### #2 Build Failed
* 確認檔案路徑是否有中文，若有中文看是要換資料夾名稱還是將專案搬家。

## 應用
### 訊息推播 notification
[🌝[T]OneSignal](https://hackmd.io/@Ru/S1vibrQmP)
> 一開始嘗試使用FCM來用，但他版本相容的問題實在太多，所以我們改使用onesignal