This article describes an implementation of a full, functional commercial IoT product under a commercial-friendly Apache 2.0 license. It can be used as a reference for creating similar smart products.
This project implements a smart light. For the hardware, we use an ESP32 development board with an LED, which serves as a light. The devboard can be "shipped" to a customer. A customer provisions it using a mobile app. You, as a vendor, have full control over all "shipped" products, including device dashboard with OTA firmware updates, remote management and usage statistics.
Get an ESP32 board. If your board does not have a built-in LED, attach an LED to one of the IO pins. Connect your ESP32 device to your workstation via a USB cable.
Start Arduino IDE. Make sure it has mDash library installed. If not,
Clone Smart Light reference repository:
git clone https://github.com/cesanta/mdash-smart-light.git
mdash-smart-light/firmware/SmartLight.ino in the Arduino IDE.
Compile and upload the sketch to your device.
Notice that the sketch does not contain WiFi or cloud credentials. That means that a compiled sketch could be used to OTA (over-the-air) update multiple devices, since the credentials are not hardcoded into firmware code, but stored in a configuration file instead.
There two types of credentials stored on a device:
For this Smart Light project, we will set up the WiFi network credentials using
the mobile app. The Cloud credentials we set up right now via Serial console.
Both WiFi and cloud credentials are stored in the
file. Mobile app and serial console are just different methods in setting
values in the configuration file. If you decide to implement some other custom
method, for example via the NFC tag, just save the result
mdash.cfg - see
Login to https://mdash.net and register a new device. Click on device settings icon to see device ID and device password:
In Arduino IDE, start Serial Monitor. In the Serial monitor input field, type the following command to save the device ID and press enter:
set device.id DEVICE_ID
Save device password. Type the following and press enter:
set device.pass DEVICE_PASSWORD
Create end-user device access key. Whoever holds this key, has a limited (non-management) ability to control this device via mDash. Click on "Keys" mDash menu, enter the device ID, and click on the "Add device access key" button. A new key will appear. Click on it to copy to the clipboard:
Save device access key. In the Serial Monitor, type and press enter:
set device.accesskey DEVICE_ACCESS_KEY
Let us repeat: these cloud credentials are saved into the
configuration file on a device's filesystem. When a device boots, it looks for
WiFi and cloud credentials in that file. While all binary firmwares on all your
devices will be the same, the configuration files will be different.
In order to factory-reset a device, the WiFi credentials should be deleted
mdash.cfg. More on that below.
Now cloud credentials are set up, and your device is ready to be shipped to a customer. Customer gets a physical device and a mobile app to setup and control that device.
The mobile app in this reference project uses
i.e. it is a progressive web app. It is written using
Bootstrap and Preact.
mdash-smart-light/mobile-app/index.html file in your browser
to see how it looks like. You can modify it as you wish.
mdash-smart-light/mobile-app directory. On the mDash UI,
go to "MobileApp" tab and upload the .zip file. mDash will assign a unique
URL to your app, and start serving it:
If you would like to go with a native mobile application for Android / iPhone, take a look at the
mdash-smart-light/mobile-app/js/app.jslogic on how the device setup process works, and duplicate it in the native app.
For production, modify this PWA according to your needs, and upload to mDash or your own website. Share the URL / QR code with your customers.
Now we act as a customer. Open mDash "MobileApp" tab. You should see your uploaded app and a QR code:
It is now time to install the mobile app on your phone:
Install mobile app on iPhone
Install mobile app on Android
Initially, there are no devices in the list. Click on "Add device":
Then follow the instructions to add a device. That involves temporarily changing the phone's WiFi network to communicate directly with the device (will need to scan for the device Access Point using phone's options in Settings) then when back in the app you'll scan for the device and then enter your WLAN's network name (SSID) and password.
During that procedure, the app:
Once the device provisioning procedure is complete, you should see an added device as online:
Use the toggle button to turn device on and off. The LED on the board should correspondingly switch on and off. If an LED does not react, then probably the issue is with the LED pin, which should be set to a correct value.
Go to the mDash "Devices" tab, click on the device settings, choose "Shadow".
state.desired.app.pin in the shadow editor and save:
When done, the board should react on the toggle as expected. When you
toggle the LED, notice now the shadow changes. First, a mobile app changes
state.desired.app.on. Then mDash sends a delta to the device. A device
sets the LED and updates the shadow, changing
You have an end-to-end working implementation in front of your eyes now, which you can change iteratively. You can start implementing your own product, launch and sell it to your customers.
We suggest to concentrate on the most important pieces of your product: the physical device itself, and an end-user interface. If you have any questions, drop us an email at firstname.lastname@example.org, or simply use the online chat button below.
Let's launch together. Good luck!