ThingsBoard 前端打包成 App 的方法
ThingsKit物联网平台：基于ThingsBoard开发，面向中小型企业开箱即用的低代码物联网平台 ：ThingsKit物联网平台
ThingsKit物联网平台演示环境 ：https://docs.thingskit.com/thingskit-link/getting-started
欢迎加入ThingsBoard技术交流群
这里可复制Q群号：69998183
关注“云腾五洲”：获取二开ThingsBoard物联网平台演示
TK物联网平台：ThingsKit物联网平台
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实现，具体代码如下：
```java
$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以上系统。
