Development Solution
Frontend Development Solution
The Ubases IoT frontend consists of three main projects: the web-based Cloud Management Platform, the web-based Open Platform, and the App. The two web platforms provide product development, OEM App development, marketing, and related configuration, while the App communicates with devices. This section describes their architecture, technology stacks, and data flows.
App Architecture
The App uses a native + H5 hybrid approach. The native App mainly provides a shell for local phone features, push, third-party services, splash screens, and more. Most functional pages are implemented in H5.
H5 features are split into two parts: common features and personalized device control pages.
H5 page data interaction with each end:
- H5 ↔ native App
Native App and H5 exchange data through Cordova plugins.
H5 calling native App APIs: H5 invokes native interfaces to access phone features, permissions, and information, such as device provisioning, the current Wi-Fi SSID, App permissions, QR-code scanning, and the camera.
Native App calling H5 methods: The native App also needs to call H5 in some scenarios, such as when a cloud message is pushed to the App and the native side must notify H5 to respond or navigate.
- App ↔ cloud
The App sends HTTP requests to the cloud server, and the cloud returns data via HTTP responses. Data exchange is implemented through defined APIs.
- App ↔ device
The App first completes device provisioning. After provisioning succeeds, it prefers LAN communication. If LAN communication is unavailable, it automatically switches to remote MQTT communication through the cloud: the App sends messages to the cloud over MQTT, the cloud forwards them to the device, and device reports follow the reverse path.
Feature implementation is shown below:
App Tech Stack
.png)
- App Android native
Language: Java;
Cordova plugins: data interaction with H5;
czxing: barcode/QR scanning;
commons-compress: file compression;
Integrates JPush and various third-party SDKs.
- App iOS native
Language: Objective-C;
Cordova plugins: data interaction with H5;
FMDB: database operations;
NVHTarGzipV2: file compression;
Integrates JPush and various third-party SDKs.
- App H5:
Languages: HTML, CSS, Less, JavaScript;
Framework: Vue 2.x;
Mobile UI library: VantUI;
Charts: antv/f2;
vue-router: routing;
vuex: state management;
vue-axios: HTTP requests to the backend for data exchange;
mqtt.js: MQTT client library used for messaging among the App, cloud, and devices;
vue-i18n: internationalization;
vue-touch: mobile gesture plugin;
animate: CSS3 animation plugin;
postcss-px-to-viewport: mobile adaptation.
Web Cloud Management Platform & Open Platform Architecture
There are two web apps: Cloud Management Platform and Open Platform.
The web side exchanges data with the cloud via axios HTTP APIs. The Open Platform also uses MQTT to communicate with the MQTT server for virtual and real device debugging.
Web Cloud Management Platform & Open Platform Tech Stack
Languages: HTML, CSS, Less, JavaScript;
Scaffolding: Ant Design Pro Vue;
Framework: Vue 2.x;
UI component library: Ant Design Vue;
Charts: antv/G2;
vue-router: routing;
vuex: state management;
vue-axios: HTTP requests to the backend for data exchange;
mqtt.js: MQTT client library used for messaging among the App, cloud, and devices;
vue-i18n: internationalization;
mock.js: data mocking;
Backend Development Solution
Backend Language
All backend APIs and microservices are developed in Golang. The backend also integrates a small number of third-party services written in other languages—for example, the open-source distributed job scheduler xxl-job is written in Java.
The backend uses gRPC as the microservice communication protocol. gRPC features include:
Based on HTTP/2, providing connection multiplexing, body/header compression, and more—saving bandwidth, reducing TCP connections, and lowering CPU usage.
Supports mainstream languages (C, C++, Python, PHP, Ruby, NodeJS, C#, Objective-C, Golang, Java)
Uses Protocol Buffers at the IDL (Interface Definition Language) layer, which works well for team API design
Given these characteristics, gRPC is not limited to one language. Developers can choose a language based on team preferences for customization or integration.
Framework Overview
The backend uses go-micro as the microservice foundation. go-micro is a well-known Golang microservice framework that provides core building blocks for distributed systems, including RPC and event-driven communication. The backend currently uses the latest v4. The backend does not restrict languages, but for Go-familiar teams, go-micro is recommended. A brief overview follows.
Go-micro features:
Registry
The registry provides a pluggable service discovery library to find running services. Current implementations include Consul, etcd, in-memory, and Kubernetes. If you prefer something else, the interface is easy to implement.
Selector
The selector provides load balancing by choosing a node. When a client requests a server, it first queries the service registry, which usually returns a list of running nodes. The selector picks one node for the query. Repeated calls enable balancing algorithms. Current approaches include round-robin, random hash, and blacklist.
Broker
Broker is a pluggable publish/subscribe interface. Microservices are event-driven, and publishing/subscribing to events should be first-class. Current implementations include NATS, RabbitMQ, and HTTP (for development).
Transport
Transport is a pluggable interface for point-to-point message delivery. Current implementations include HTTP, RabbitMQ, and NATS. This abstraction allows transport to be swapped seamlessly.
Client
The client provides a way to make RPC queries. It combines registry, selector, broker, and transport, and also provides retries, timeouts, context usage, and more.
Server
The server is the interface for building a running microservice. It provides a way to serve RPC requests.
Plugins
go-micro plugins are provided via micro/go-plugins.
Integration Overview
The backend supports extending custom APIs and custom microservices. The current extension model is shown below:
The orange parts in the diagram describe custom APIs and custom microservices. Custom services can exchange and integrate data with the IoT cloud platform via gRPC or shared databases. For examples, see related repositories at https://github.com/ubases.
App Development Solution
Ubases IoT Android App, iOS App, and OEM App all use hybrid development with Cordova. The H5 frontend uses Vue. Native custom features are provided as Cordova plugins. Android native language is Java; iOS native language is Objective-C.
Android App
For Android third-party libraries available on Maven, import via Gradle. If not on Maven but source is available, import as a Module. If only Java files are provided, add them to the App Module.
Cordova base library native code is imported as a Module named CordovaLib. Base library JS code is placed under App Module assets > www.
Cordova plugin native code is imported into the App Module java directory based on the plugin config; plugin JS goes under App Module assets > www > plugins.
Under the www directory, aside from cordova_plugins.js, cordova-js-src, cordova.js, and plugins, everything else is H5 frontend files. You can replace those with code developed by your frontend team.
iOS App
For iOS third-party libraries available via Pods, import with Pods. If not available via Pods, import source into the project.
Cordova base library native code is imported as an xcodeproj named CordovaLib; JS code goes under the project www directory.
Cordova plugin native code is imported into the project Plugins directory based on the plugin config; plugin JS goes under project Staging > www > plugins.
Under the www directory, aside from cordova_plugins.js, cordova-js-src, cordova.js, and plugins, everything else is H5 frontend files. You can replace those with code developed by your frontend team.