聽說會寫web的人也能寫APP， 抱着嘗試的心態踏上路體驗一番
http://www.ionic.wang/start-index.html
0x00 框架環境介紹
ionic是什么?
https://ionicframework.com/docs/
Ionic(ionicframework)一款開源的Html5移動App開發框架
是AngularJS移動端解決方案,Ionic以流行的跨平台移動app開發框架phoengap為藍本，
讓開發者可以通過命令行工具快速生成android ios移動app應用
phonegap是什么？
https://phonegap.com/
Phonegap是一個用基於HTML，CSS和JavaScript的，創建移動跨平台移動應用程序的快速開發平台。
它使開發者能夠利用iPhone，Android，Palm，Symbian,WP7,WP8,Bada和Blackberry
智能手機的核心功能——包括地理定位，加速器，聯系人，聲音和振動
cordova是什么?
Cordova包裝你的HTML/JavaScript app到原生app容器中，可以做到一次編寫到處運行各個平台（android、ios、wp、bb、firefoxos、web等）
這些功能通過統一的JavaScript API提供，讓你輕松的編寫一組代碼運行在幾乎市面上的所有手機和平板上，
並可以發布到相應的app商城中。手上只有android手機，下面針對android 來弄
通俗的講：ionic是一款基於angularjs的html5移動app開發框架， 而 cordova / phonegap可以將代碼打包成apk文件
本文使用的是 cordova 打包工具進行打包，下面開始環境部署吧
0x01 安裝ionic和cordova
cordova 和 ionic 的命令行運行在Node.js 上面並且可以通過NPM安裝，因此我們需要先安裝一下NodeJs環境。
安裝時下圖四個全都選上
安裝好后，進入cmd測試一下是否安裝成功
C:\Users\yjc>node -v v8.11.4 C:\Users\yjc>npm -v 5.6.0
接着使用npm安裝ionic 和 cordova
npm install -g cordova ionic
0x02 創建第一個項目
$ ionic start myApp tabs
下面三個是官方給的模板
$ ionic start myApp blank #下方第一張圖 $ ionic start myApp tabs #下方第二張圖， 本次測試創建 $ ionic start myApp sidemenu #下方第三張圖
接着，運行項目
$ cd myApp $ ionic serve
運行成功后會打開8100端口服務，並自動彈出瀏覽器訪問該服務
然后將代碼打包成andriod平台
$ ionic build $ ionic cordova platform add android $ ionic cordova run android
當運行到 ionic cordova run android命令的時候，報出一個錯誤
(node:129252) UnhandledPromiseRejectionWarning: CordovaError: Failed to find 'ANDROID_HOME' environment variable. Try setting it manually.
Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to include path to valid SDK directory.
通過字面意思是缺少一個環境變量 ANDROID_HOME， 后面去查資料發現僅僅安裝 nodejs 和 ionic是不夠的，還需要安裝 android studio及java環境。
畢竟不管怎樣最終的APP生成，都需要依賴andriod sdk以及android 編譯工具
0x03 安裝java環境
java環境安裝的是 jdk8
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
這里也是全都選上
然后添加環境變量 JAVA_HOME, value就是jdk安裝的位置
設置完成后，在命令行里測試一下，輸入Java彈出用法就沒錯了
0x05 安裝 Android Studio IDE
這貨是Google出的，需要FQ，不過國內也有不少開發者做了鏡像，其實關於FQ沒有什么敏感不敏感的
只要不要給國家搗亂，好好學習，國家還是會支持的，Github就是一個例子。下面是andriod studio 官網
如果沒辦法FQ，推薦下面國內鏡像站，基本里頭工具很齊全。
http://www.androiddevtools.cn/
這里我下載的是第一個64位的，有一點需要說明一下， 下載的Android Studio IDE 里頭是包含了以下
1. SDK Tools (有sdkmanger adb等等)
2. SDK Platform-Tools (不同安卓版本的管理工具)
3. Build-Tools (編譯工具)
4. SDK (默認是8.+的版本，但是cordova 用的是8.0的，后面報錯我們需要改一下版本)
5. SDK System images (模擬器鏡像，虛擬機AVD創建需要用到，在PC上模擬app運行)
等等
所以說安裝一個IDE就夠了，其他不用裝 !!! 下載完成后解壓是免安裝的，基本文件如下圖
主程序在bin目錄下面，此時還沒有SDK， Gradle是一個基於Apache Ant和Apache Maven
概念的項目自動化構建開源工具。它使用一種基於Groovy的特定領域語言(DSL)來聲明項目設置，
拋棄了基於XML的各種繁瑣配置。
進入bin目錄下面運行 studio64.exe 首先彈出是否導入設置，默認不導入即可，點下一步IDE就會開始下載SDK
這里會彈出代理設置，點擊取消不設置代理也是能夠繼續下載和安裝的，因為我相信好好學習，國家還會幫你加速的
之后這里點擊自定義custom，把sdk默認安裝路徑更改一下，不改的話默認使用 Appdata 目錄有點煩人
選主題，夜貓子嘿嘿
下圖比較關鍵，這里勾選AVD安卓虛擬機，當然忘記勾后面也可以在IDE里頭安裝，下面路徑則是要安裝的SDK目錄
這個目錄不能和Android Studio IDE 同個目錄。新建一個空目錄就行。
下面設置虛擬機分配內存空間大小RAM的 ，默認即可
點擊確認，人品好的話，國家不會斷你的網，然后可以像運維人員那樣喝杯咖啡，抽個煙啥的慢慢等待
喝完咖啡回來看看，如果出現下面界面，那么恭喜你人品還不錯，因為sdk全是 dl.google.com 里下載的。
接着在主界面點configure ,選擇sdkmanager， 查看SDK是否ok
這里默認裝的是最新的SDK，Android 8.+ Level28 的SDK
也可以到我們安裝的目錄里頭看看
這里簡單說明一下， SDK 存放在platforms里頭，里面包含了你下載的所有android sdk版本
build-tools存放的是編譯工具， emulator則是用來創建虛擬機的工具。而虛擬機的鏡像存放於
system-images里頭, skins是主題風格， platform-tools工具集里我只認識 adb 和 sqlite3，
sdk源碼包存放在sources里頭，最后就是tools/bin下的avdmanager.bat 工具用於創建虛擬機AVD
后面會用到
到這里做了這么多，其實就為了一個環境變量 ANDROID_HOME，現在有了SDK就可以設置該變量了
好了之后，退出終端，重新開個command prompt 執行 ionic cordova run android
0x04 深入一步
初來乍到，遇到各種各樣問題是很正常的，不要怕報錯，解決錯誤的方法也很簡單，閱讀錯誤提示信息，在查詢
相關信息嘗試即可， 上面配置好ANDROID_HOME之后，重新運行 ionic cordova run android 提示新的錯誤
(node:110872) UnhandledPromiseRejectionWarning: CordovaError: Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio
翻譯一下字面意思，大概是找不到 grandle 這個東西，如果有的話需要將其加入到環境變量path里頭。在上面介紹Android Studio IDE目錄結構
的時候有提到Gradle，沒錯就是那玩意，我們在環境變量指明一下Gradle的位置即可，因為ANDROID_HOME變量只說了SDK位置，IDE的位置
信息還沒上報給系統環境。我的gradle在這里，把他添加到用戶環境變量中。
然后把終端關了重新運行。不重啟的話，終端不會動態更新環境變量。下面Git測試一下
可以之后重新運行ionic cordova run android
結果指明了gradle給他，人家不用，自己又跑去下載低點的版本，為何不一開始就去下載。。。
之后耐心等待他把編譯需要的依賴包全部下載完成。。。
下載完成后，又有一個新的錯誤。
File C:\Users\yjc\.android\repositories.cfg could not be loaded.
Checking the license for package Android SDK Platform 26 in F:\Android\SDK\licenses
Warning: License for package Android SDK Platform 26 not accepted.
FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring project ':CordovaLib'.
> You have not accepted the license agreements of the following SDK components: [Android SDK Platform 26].
Before building your project, you need to accept the license agreements and complete the installation of the missing components using the Android Studio SDK Manager. Alternatively, to learn how to transfer the license agreements from one workstation to another, go to http://d.android.com/r/studio-ui/export-licenses.html
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
* Get more help at https://help.gradle.org
重點是上圖藍字部分，想了老半天，后面才想到IDE默認安裝的SDK版本是 Level 28的，
而這里Cordova需要用到 SDK Level 26的，我們還沒有安裝26的版本，因此報錯了，
進入SDKManager安裝一下 sdk level 26的版本
下面網站(need FQ)可查看安卓版本和API level等級的對應
https://developer.android.com/studio/releases/platforms
完成后重新在運行一下命令 ionic cordova run android (好像已經敲了4遍了)， 不要感到心累
其實排錯就像破案一樣，通過線索和調查，一步一步把案情弄明白，還不錯，放點背景音樂更有氣氛
這話剛說完，又報了個錯誤，不過至少編譯成功了，就是虛擬機運行不起來
BUILD SUCCESSFUL in 38s
46 actionable tasks: 46 executed
Built the following apk(s):
C:\Users\yjc\Desktop\myApp\platforms\android\app\build\outputs\apk\debug\app-debug.apk
ANDROID_HOME=F:\Android\SDK
JAVA_HOME=C:\Java
No target specified and no devices found, deploying to emulator
(node:112612) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'semver' of null
編譯好的文件在藍字路徑，如果不想用電腦的虛擬機運行，可以無視這個錯誤，
電腦連上手機，進入apk目錄下運行下面命令，就可以在手機上安裝第一個demo app程序
adb install app-debug.apk
上圖是手機測試結果
但是以后頻繁的更改代碼測試的時候，總不可能老是到手機上安裝測試
要像web開發一樣，改好代碼，切換瀏覽器F5立刻顯示效果。
所以虛擬機模擬器問題還是需要解決
參考這個網址，大概原因是emulator版本的問題，
這里進入sdk manager 把最新的sdk 8.+刪除， 點擊Apply應用一下
刪除成功后重新運行一下命令.這次雖然沒有報錯了，但是卡在這個地方不動，提示說請定義ANDROID_STUDIO_ROOT
:app:assembleDebug UP-TO-DATE :app:cdvBuildDebug UP-TO-DATE BUILD SUCCESSFUL in 2s 46 actionable tasks: 1 executed, 45 up-to-date Built the following apk(s): C:\Users\yjc\Desktop\myApp\platforms\android\app\build\outputs\apk\debug\app-debug.apk ANDROID_HOME=F:\Android\SDK JAVA_HOME=C:\Java No target specified and no devices found, deploying to emulator No emulator specified, defaulting to Nexus_5X_API_28_x86 Waiting for emulator to start... PANIC: Cannot find AVD system path. Please define ANDROID_SDK_ROOT
下面是參考stackoverflow解決步驟操作，刪除舊的AVD，並創建新的AVD
參考鏈接
這里選擇並下載系統鏡像
模擬器運行測試一下。先不要關掉，放在一邊
接着在重新運行一下命令 ionic cordova run android (敲了第n遍了，這官網留下那么多坑啊)，
終於看到成功的界面，並且模擬器也及時的彈出了Ionic demo app程序
web安卓之路也算是上道了，踩坑無數，苦盡甘來，后面只需要在下圖的位置，編寫HTML代碼就可以生產APP啦，是不是很美滋滋啊
