Welcome to join thingsboard secondary development discussion group: 121 202 538
ThingsBoard privatization deployment, there is inevitably view the needs of the dashboard on the phone. While on the phone browser can access the web site, but not enough for users of professional experience is poor, therefore there is a need to provide a dedicated App, to manage or viewing.
For this App, there are two options: First, develop new App, the API by calling ThingsBoard corresponding function, which is entirely Native development model; the second is the ThingsBoard the UI package, in the form of built-in Web App mode browsing. The former way of higher costs, cycle time is relatively long; the latter scenario is more appropriate as a contingency plan, and can continue to develop on this basis, while optimizing the performance of the PC and mobile phone terminals.
There are many websites such as AppCan able to generate a package Url App, but this way all resources are in remote, to be downloaded every time you visit a page when a lot of resources, not only on the network access speed is slower, will also affect its pages rendering speed, intuitive user experience may be more card. UI framework but also ThingsBoard realized separated front and rear ends, the front end can be compiled directly into the package to use App, Android and iOS. So you can put js / css / html and other resources on the front end App, the only remote access API, because the resources are in the local mobile phone, will load quickly. Now let local resource access remote services, it is necessary to modify the code Angular.js access path ui api, and then packaged App, the following steps:
First, the code modification ui
1. Modify the file ui \ src \ app \ global-interceptor.service.js Now let local resource access remote services, it is necessary to modify the path of issues angular api access.
This file is Angular.js global interceptors, Ajax request response common part here. The default Ajax request is to visit such as "/ API / " this path, will go to visit the current page in the path of said host, and the full path to the actual access should be as " http://192.168.1.222:8080/api/ " form. The App inside, js run locally, but the remote service Url, so by default path will not be able to access the actual service. Red modify the position identification section 1 and the content as shown in FIG.
Which, CUSTOMHOST is custom variables, pointing to the real server access address, such as:
var CUSTOMHOST = "http://iot.yoxvtech.com:8080";
In addition, sources Url modify the response judgment, the red identification portion 2, and the line 167 is similar to the first position after the need to add the same code.
2. Modify ui \ src \ app \ api \ telemetry-websocket.service.js, the distal end of the real server address points websocket server, the content shown in Figure 3.
Second, the packaging App
After the front-end UI to modify and compile and can not be directly dist file into App of assets and access to file way, because there will be problems with the way file cross-domain requests, access paths, etc. After Angular packaged in a better way App It built a simple http server, the root where your front-end UI file folder.
Built-in server has two modes: First, the use Nanohttpd project on Github write a simple http server, and set the appropriate directory in the App assets in the root directory, then to webbrowser load; the second is completely mixed use development mode, built-in httpd plug-in hybrid or service development.
The former approach still needs some development, though relatively simple. Fortunately, the latter have also been achieved counterparts, we have to be able to support a CorHttpd manner httpd web server in cordova framework. The plug-in has now stopped updating, there is a problem can not be loaded svg, I have a request based on the content merge in the original project, fix the problem, fix the code, see: https://github.com/lsyer/cordova-httpd
Therefore, the entire packaging process may be selected and used cordova CorHttpd achieve specific code as follows:
$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
In fact, the final step of the App is not possible, but the completion of the platform project cordova android generated by this command, you can see the complete project in App platforms / android, the Android Studio can import executed last compiled last the release package. Note that, the project generated App also need to add a privilege, to join in android application in AndroidManifest.xml label: supportsRtl = "true", to support more than 8.0 system Android.