ThingsBoard 前端打包成 App 的方法

大鹏一日同风起,扶摇直上九万里。这篇文章主要讲述ThingsBoard 前端打包成 App 的方法相关的知识,希望能为你提供帮助。
欢迎大家加入thingsboard 二次开发讨论群:121202538

ThingsBoard 前端打包成 App 的方法

文章图片

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中红色标识部分。
ThingsBoard 前端打包成 App 的方法

文章图片

 其中,CUSTOMHOST是自定义变量,指向真实服务器访问地址,如:
var CUSTOMHOST = " http://iot.yoxvtech.com:8080" ;
此外,修改一下response的Url来源判断,如图2红色标识部分,以及第167之后的一行相似位置需要添加相同代码。
ThingsBoard 前端打包成 App 的方法

文章图片

2. 修改uisrcappapi elemetry-websocket.service.js,使前端的websocket服务器地址指向真实服务器,修改内容见图3。
ThingsBoard 前端打包成 App 的方法

文章图片

二、打包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以上系统。
【ThingsBoard 前端打包成 App 的方法】来源:https://www.iotschool.com/topics/247

    推荐阅读