Building Desktop Apps with Electron for Xiaomi

Smart apps designed to make our lives easier are becoming increasing popular. These range from fitness trackers to lightbulb controls. When designing these apps, you may find you need to improve the user experience. Or you need to access the raw data, but setting up a full stack project would be overkill for this purpose. That is when Electron comes into play.

Electron is a new way to develop modern desktop apps with all the power of Node.js, HTML, and CSS. You can easily complete a functional app in a short time frame, which could solve 80% of your day-to-day needs.

In this example, we are going to explore the Electron universe by creating a simple app that will give us access to the IoT world. Integrating scales from Xiaomi, we will build a “Smart Scale” app that will show the user’s weight in real time. With Electron, the data will be collected and presented in a nice, clean format.

STEP 1: SETUP

First, we need to make sure the setup is done properly. Many templates are available for this step, but we are going to simplify this process by starting with a basic setup:

bash

1# Clone this repository
2git clone https://github.com/electron/electron-quick-start
3# Go into the repository
4cd electron-quick-start
5# Install dependencies
6npm install
7# Run the app
8npm start

Once you have completed this step, you will have something like this:

bash

1├── README.md
2├── index.html
3├── main.js
4├── node_modules
5├── package.json
6└── renderer.js

* index.html is the app’s main view.

* main.js is the app’s entry point.

* renderer.js is where all the Node.js staff is available.

STEP 2: DIVIDE THE PROCESS INTO 3 PARTS

In order to build our app, we need to split it into 3 parts:

GUI and UX
Data service
Integration of data & UI

Our Smart Scale is built on BLE (Bluetooth Low Energy), which is a very nice protocol. In NPM land, the https://github.com/sandeepmistry/noble project provides us low-level API for basic Bluetooth interaction.

But we can go even further. A quick search on github will give us a ready-to-use

NPM package for our Smart Scale (https://github.com/perillamint/node-xiaomi-scale):

bash

1% npm i node-xiaomi-scale --save

If you have problems building these native extensions, you can check this discussion:

(https://github.com/opensprints/opensprints-electron/issues/5).

STEP 3: ENTER DATA/CODE

Now we are ready get our first real data into the app.

Our UI will be pretty simple:

text

1<!DOCTYPE html>
2<html>
3 <head>
4	<meta charset="UTF-8">
5	<title>Smart Scale App</title>
6 </head>
7 <body>
8	<h1>Smart Scale App</h1>
9	<div id="weight">No Data</div>
10 </body>
11 <script>
12   require('./renderer.js')
13 </script>
14</html>

We can get sample code from the node-xiaomi-scale package and put it, as well as our data layer, into the renderer.js file, and we are good to go:

javascript

1const MiScale = require('node-xiaomi-scale');
2let miscale = new MiScale();
3miscale.startScanning();
4miscale.on('data', function (scale) {
5 console.log(scale);
6});

STEP 4: START YOUR APP

Here’s what we need to start our app:

bash

1$ npm start

STEP 5: MAKE YOUR APP COMPATIBLE WITH ALL PLATFORMS

Now we just need to polish our app and build it for all available platforms.

To get a nice, clean UI, we are going to use https://ignitersworld.com/lab/radialIndicator.html:

bash

1$ wget https://raw.githubusercontent.com/s-yadav/radialIndicator/master/radialIndicator.min.js

Here is our UI:

css

1<!DOCTYPE html>
2<html>
3 <head>
4	<meta charset="UTF-8">
5	<title>Smart Scale App</title>
6	<style>
7 	#container {
8   	display: flex;
9   	align-items: center;
10       justify-content: center;
11 	}
12	</style>
13 </head>
14 <body>
15	<div id="container">
16 	<div id="weight"></div>
17	</div>
18 </body>
19 <script>
20   require('./renderer.js')
21 </script>
22</html>

Here is our data layer:

typescript

1const radialIndicator = require('./radialIndicator.min.js')
2const MiScale = require('node-xiaomi-scale');
3const miscale = new MiScale();
4miscale.startScanning();
5const radialObj = radialIndicator('#weight' , {
6 radius: 150,
7 minValue: 0,
8 fontWeight: 'normal',
9 roundCorner: true,
10 barWidth: 8,
11 maxValue: 250,
12 barColor: {
13	200: '#FF0000',
14	100: '#FFFF00',
15	80: '#0066FF',
16	50: '#33CC33',
17 },
18 format: function (value) {
19	return `${value.toFixed(2)} kg`;
20 },
21});
22miscale.on('data', function (scale) {
23 radialObj.animate(scale.weight)
24 console.log(scale);
25});

STEP 6: CREATE AN EXECUTABLE FILE

Now our app is just about ready. We need to start here:

Then we can further build on our app:

bash

1$ npm i electron-builder --save-dev

We can also add some sections to our package.json:

json

1{
2 ...
3 "scripts": {
4	"start": "electron .",
5	"pack": "build --dir",
6	"dist": "build"
7 },
8 "build": {
9	"appId": "smart.scale.app",
10	"mac": {
11     "category": "smart.scale.app.ble"
12	}
13 },
14 ....
15}

Now we can run our app:

bash

1$ npm run dist

Electron is a great platform for building desktop apps in a matter of minutes. It allows you to jump right into development with minimal platform-specific knowledge. You don’t have to be familiar with edge cases or various languages to set up a simple app that will work on MacOS, Windows, and Linux. You just need to have experience with JavaScript and CSS. Plenty of tutorials and great starting materials are also available. So, if you are interested in Desktop App development, you can now get started.

This application can be found on github at

https://github.com/SphereSoftware/smart-scale-app