ThingsBoard 前端打包成 App 的方法

Posted 2021-03-03 Yunteng.com 云腾

欢迎大家加入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. 修改文件uisrcappglobal-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. 修改uisrcappapi elemetry-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以上系统。

来源：https://www.iotschool.com/topics/247