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/” 这样的路径，会去访问当前页面说在主机的路径，而实际访问的完整路径应该是如 “” 的形式。而 app 里面，js 运行在本地，但服务 url 在远程， 因此按默认的路径就无法访问实际服务。修改位置和内容如图 1 中红色标识部分。
其中，customhost 是自定义变量，指向真实服务器访问地址，如：
var customhost = "";
此外，修改一下 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 请求中的内容，修复了该问题，修复的代码见：
因此，整个打包过程可以选择使用 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 以上系统。
来源：