歡迎大家加入thingsboard 二次開發討論群：121202538
ThingsBoard私有化部署之后，不免存在在手機上查看各儀表盤的需求。手機上雖然可以瀏覽器訪問網址，但對用戶而言不夠專業、體驗較差，因此有需要提供一個專門的App，來實現管理或查看功能。
對於這個App，存在兩種方案：一是開發全新的App，通過調用ThingsBoard的API實現相應功能，該方法是完全的Native開發模式；二是將ThingsBoard的UI打包，以App的形式內置網頁方式的瀏覽。前一種方式成本較高、周期也比較長；后一種方案作為應急方案比較合適，且可以在此基礎上持續開發，同時優化PC端和手機端的表現。
網絡上有很多如AppCan之類的網站能夠將Url封裝生成一個App，但此種方式所有資源都在遠程，每次瀏覽頁面時要下載的資源很多，不但訪問速度比較慢，也會影響其頁面渲染速度，用戶直觀體驗可能會更卡。不過也在ThingsBoard的UI框架已實現前后端分離，可以把前端編譯后直接打包成App來使用，支持Android 和iOS。這樣可以把前端的js/css/html等資源放在App中，只訪問遠程API，因為資源都在手機本地，加載會快點。既然要讓本地資源訪問遠程服務，就要修改ui代碼中Angular.js訪問api的路徑，而后打包App，有以下步驟：
一、修改ui代碼
1. 修改文件ui\src\app\global-interceptor.service.js 既然要讓本地資源訪問遠程服務，就要修改angular訪問api的路徑問題。
該文件是Angular.js的全局攔截器，Ajax請求響應 共同部分在這里。默認的Ajax請求是訪問如“/api/”這樣的路徑，會去訪問當前頁面說在主機的路徑，而實際訪問的完整路徑應該是如“http://192.168.1.222:8080/api/”的形式。而 App里面，js運行在本地，但服務Url在遠程， 因此按默認的路徑就無法訪問實際服務。修改位置和內容如圖1中紅色標識部分。
其中，CUSTOMHOST是自定義變量，指向真實服務器訪問地址，如：
var CUSTOMHOST = "http://iot.yoxvtech.com:8080";
此外，修改一下response的Url來源判斷，如圖2紅色標識部分，以及第167之后的一行相似位置需要添加相同代碼。
2. 修改ui\src\app\api\telemetry-websocket.service.js，使前端的websocket服務器地址指向真實服務器，修改內容見圖3。
二、打包App
前端UI修改並編譯之后，並不能直接將dist文件放入App的assets中並以file方式訪問，因為Angular打包之后以file方式會出現跨域請求、訪問路徑等問題，比較好的方式是在App中內置一個簡單的http服務器，將根目錄設定前端UI所在文件夾。
內置服務器有兩種模式：一是使用Github上的Nanohttpd項目寫一個簡單的http服務器，並在App中設置assets中的相應目錄為根目錄，而后以webbrowser加載；二是完全使用混合開發模式，使用混合開發的內置httpd插件或服務。
前一種方式仍需要一定的開發，雖然比較簡單。所幸，后一種也已經有同行實現，在cordova框架下有一個CorHttpd能夠支持以web方式實現httpd服務器。該插件目前已停止更新，存在不能加載svg的問題，筆者已根據原項目的merge請求中的內容，修復了該問題，修復的代碼見：https://github.com/lsyer/cordova-httpd
因此，整個打包過程可以選擇使用cordova以及CorHttpd實現，具體代碼如下：
$npm install -g cordova
$cordova create YoxvIoT
$cd YoxvIoT
$cordova platforms add android
$cordova plugin add https://github.com/lsyer/cordova-http.git
$mkdir www/htdocs //前端生成的UI放入該目錄，是CorHttpd的服務器根目錄
$touch www/index.html //使用CorHttpd建立http服務器，並使用全屏無邊框的iframe顯示UI，具體代碼參考cordova-httpd項目中的test文件夾，在服務啟動后將iframe的src重定向到UI界面
$touch www/loading.html //在CorHttpd完全啟動之前的預載入界面，作為應用可用前的Splash
$cordova build android //編譯生成App
實際上，最后一步生成的App不能直接安裝，但是通過該命令可以使cordova完成android的平台項目生成，在platforms/android中可以看到完整的App項目，能夠導入Android Studio中執行最后的編譯生成最后的release包。需要注意的是，生成的App項目還需要添加一個權限，在AndroidManifest.xml的application標簽中加入android:supportsRtl="true"，以支持Android 8.0以上系統。