aboutsummaryrefslogtreecommitdiff
path: root/content/posts/2017-08-11-simple-iot-application.md
diff options
context:
space:
mode:
authorMitja Felicijan <mitja.felicijan@gmail.com>2023-05-26 00:40:40 +0200
committerMitja Felicijan <mitja.felicijan@gmail.com>2023-05-26 00:40:40 +0200
commit43b0708769eb61392050045b881f8e6ba39c5b66 (patch)
tree3939579a13b8325325d5ebb8e05324a41ed78a6d /content/posts/2017-08-11-simple-iot-application.md
parent49e7e7d555a6cd9810d81561fa3e98e3d64502be (diff)
downloadmitjafelicijan.com-43b0708769eb61392050045b881f8e6ba39c5b66.tar.gz
Massive update to posts, archetypes
Added a archetypes for creating notes and posts so it auto-populates fields. Fixed existing posts so they align with the rule of 80 columns now.
Diffstat (limited to 'content/posts/2017-08-11-simple-iot-application.md')
-rw-r--r--content/posts/2017-08-11-simple-iot-application.md223
1 files changed, 168 insertions, 55 deletions
diff --git a/content/posts/2017-08-11-simple-iot-application.md b/content/posts/2017-08-11-simple-iot-application.md
index b34fe6b..a0ac4be 100644
--- a/content/posts/2017-08-11-simple-iot-application.md
+++ b/content/posts/2017-08-11-simple-iot-application.md
@@ -1,21 +1,40 @@
1--- 1---
2title: Simple IOT application supported by real-time monitoring and data history 2title: Simple IOT application supported by real-time monitoring and data history
3url: simple-iot-application.html 3url: simple-iot-application.html
4date: 2017-08-11 4date: 2017-08-11T12:00:00+02:00
5draft: false 5draft: false
6--- 6---
7 7
8## Initial thoughts 8## Initial thoughts
9 9
10I have been developing these kind of application for the better part of my last 5 years and people keep asking me how to approach developing such application and I will give a try explaining it here. 10I have been developing these kind of application for the better part of my last
11 115 years and people keep asking me how to approach developing such application
12IOT applications are really no different than any other kind of applications. We have data that needs to be collected and visualized in some form of tables or charts. The main difference here is that most of the times these data is collected by some kind of device foreign to developer that mainly operates in web domain. But fear not, it's not that different than writing some JavaScript. 12and I will give a try explaining it here.
13 13
14There are many devices able to transmit data via wireless or wired network by default but for the sake of example we will be using commonly known Arduino with wireless module already on the board → [Arduino MKR1000](https://store.arduino.cc/arduino-mkr1000). 14IOT applications are really no different than any other kind of applications.
15 15We have data that needs to be collected and visualized in some form of tables
16In order to make this little project as accessible to others as possible I will try to make it as inexpensive as possible. And by this I mean that I will avoid using hosted virtual servers and will be using my own laptop as a server. But you must buy Arduino MKR1000 to follow steps below. But if you would want to deploy this software I would suggest using [DigitalOcean](https://www.digitalocean.com) → smallest VPS is only per month making this one of the most affordable option out there. Please notice that this software will not run on stock web hosting that only supports LAMP (Linux, Apache, MySQL, and PHP). 16or charts. The main difference here is that most of the times these data is
17 17collected by some kind of device foreign to developer that mainly operates in
18_But before we begin please take notice that this is strictly experimental code and not well optimized and there are much better ways in handling some aspects of the application but that requires much deeper knowledge of technology that is not needed for an example like this._ 18web domain. But fear not, it's not that different than writing some JavaScript.
19
20There are many devices able to transmit data via wireless or wired network by
21default but for the sake of example we will be using commonly known Arduino
22with wireless module already on the board → [Arduino MKR1000](https://store.arduino.cc/arduino-mkr1000).
23
24In order to make this little project as accessible to others as possible I will
25try to make it as inexpensive as possible. And by this I mean that I will avoid
26using hosted virtual servers and will be using my own laptop as a server. But
27you must buy Arduino MKR1000 to follow steps below. But if you would want to
28deploy this software I would suggest using
29[DigitalOcean](https://www.digitalocean.com) → smallest VPS is only per month
30making this one of the most affordable option out there. Please notice that
31this software will not run on stock web hosting that only supports LAMP
32(Linux, Apache, MySQL, and PHP).
33
34But before we begin please take notice that this is strictly experimental code
35and not well optimized and there are much better ways in handling some aspects
36of the application but that requires much deeper knowledge of technology that
37is not needed for an example like this.
19 38
20**Development steps** 39**Development steps**
21 40
@@ -23,23 +42,33 @@ _But before we begin please take notice that this is strictly experimental code
232. Prototype C++ code that will read "sensor data" and transmit it to API. 422. Prototype C++ code that will read "sensor data" and transmit it to API.
243. Data visualization with charts → extends Python web application. 433. Data visualization with charts → extends Python web application.
25 44
26Step 1. and 3. will share the same web application. One route will be dedicated to API and another to serving HTML with chart. 45Step 1. and 3. will share the same web application. One route will be dedicated
46to API and another to serving HTML with chart.
27 47
28Schema below represents what we will try to achieve and how different parts correlates to each other. 48Schema below represents what we will try to achieve and how different parts
49correlates to each other.
29 50
30![Overview](/assets/iot-application/simple-iot-application-overview.svg) 51![Overview](/assets/iot-application/simple-iot-application-overview.svg)
31 52
32## Simple Python API 53## Simple Python API
33 54
34I have always been a fan of simplicity so we will be using [Bottle: Python Web Framework](https://bottlepy.org/docs/dev/). It is a single file web framework that seriously simplifies working with routes, templating and has built-in web server that satisfies our need in this case. 55I have always been a fan of simplicity so we will be using [Bottle: Python Web Framework](https://bottlepy.org/docs/dev/).
56It is a single file web framework that seriously simplifies working with routes,
57templating and has built-in web server that satisfies our need in this case.
35 58
36First we need to install bottle package. This can be done by downloading ```bottle.py``` and placing it in the root of your application or by using pip software ```pip install bottle --user```. 59First we need to install bottle package. This can be done by downloading
60```bottle.py``` and placing it in the root of your application or by using
61pip software ```pip install bottle --user```.
37 62
38If you are using Linux or MacOS then Python is already installed. If you will try to test this on Windows please install [Python for Windows](https://www.python.org/downloads/windows/). There may be some problems with path when you will try to launch ```python webapp.py``` so please take care of this before you continue. 63If you are using Linux or MacOS then Python is already installed. If you will
64try to test this on Windows please install [Python for Windows](https://www.python.org/downloads/windows/).
65There may be some problems with path when you will try to launch
66```python webapp.py``` so please take care of this before you continue.
39 67
40### Basic web application 68### Basic web application
41 69
42Most basic bottle application is quite simple. Paste code below in ```webapp.py``` file and save. 70Most basic bottle application is quite simple. Paste code below in
71```webapp.py``` file and save.
43 72
44```python 73```python
45# -*- coding: utf-8 -*- 74# -*- coding: utf-8 -*-
@@ -67,29 +96,60 @@ if __name__ == "__main__":
67 ) 96 )
68``` 97```
69 98
70To run this simple application you should open command prompt or terminal on your machine and go to the folder containing your file and type ```python webapp.py```. If everything goes ok then open your web browser and point it to ```http://0.0.0.0:5000```. 99To run this simple application you should open command prompt or terminal on
100your machine and go to the folder containing your file and type
101```python webapp.py```. If everything goes ok then open your web browser and
102point it to ```http://0.0.0.0:5000```.
71 103
72If you would like change the port of your application (like port 80) and not use root to run your app this will present a problem. The TCP/IP port numbers below 1024 are privileged ports → this is a security feature. So in order of simplicity and security use a port number above 1024 like I have used port 5000. 104If you would like change the port of your application (like port 80) and not
105use root to run your app this will present a problem. The TCP/IP port numbers
106below 1024 are privileged ports → this is a security feature. So in order of
107simplicity and security use a port number above 1024 like I have used port
1085000.
73 109
74If this fails at any time please fix it before you continue, because nothing below will work otherwise. 110If this fails at any time please fix it before you continue, because nothing
111below will work otherwise.
75 112
76We use 0.0.0.0 as default host so that this app is available over your local network. If you find your local ip ```ifconfig``` and try accessing this site with your phone (if on same network/router as your machine) this should work as well (example of such ip ```http://192.168.1.15:5000```). This is a must have because Arduino will be accessing this application to send it's data. 113We use 0.0.0.0 as default host so that this app is available over your local
114network. If you find your local ip ```ifconfig``` and try accessing this site
115with your phone (if on same network/router as your machine) this should work
116as well (example of such ip ```http://192.168.1.15:5000```). This is a must
117have because Arduino will be accessing this application to send it's data.
77 118
78### Web application security 119### Web application security
79 120
80There is a lot to be said about security and is a topic of many books. Of course all this can not be written here but to just establish some basic security → you should always use SSL with your application. Some fantastic free certificates are available by [Let's Encrypt - Free SSL/TLS Certificates](https://letsencrypt.org). With SSL certificate installed you should then make use of HTTP headers and send your "API key" via a header. If your key is send via header then this key is encrypted by SSL and send encrypted over the network. Never send your api keys by GET parameter like ```http://example.com/?api_key=somekeyvalue```. The problem that this kind of sending presents is that this key is visible in logs and by network sniffers. 121There is a lot to be said about security and is a topic of many books. Of course
122all this can not be written here but to just establish some basic
123security → you should always use SSL with your application. Some fantastic free
124certificates are available by [Let's Encrypt - Free SSL/TLS Certificates](https://letsencrypt.org).
125With SSL certificate installed you should then make use of HTTP headers and
126send your "API key" via a header. If your key is send via header then this
127key is encrypted by SSL and send encrypted over the network. Never send your
128api keys by GET parameter like ```http://example.com/?api_key=somekeyvalue```.
129The problem that this kind of sending presents is that this key is visible in
130logs and by network sniffers.
81 131
82There is a fantastic article describing some aspects about security: [11 Web Application Security Best Practices](https://www.keycdn.com/blog/web-application-security-best-practices/). Please check it out. 132There is a fantastic article describing some aspects about security: [11 Web Application Security Best Practices](https://www.keycdn.com/blog/web-application-security-best-practices/). Please check it out.
83 133
84### Simple API for writing data-points 134### Simple API for writing data-points
85 135
86We will now be using boilerplate code from example above and extend it to be able to write data received by API to local storage. For example use I will use SQLite3 because it plays well with Python and can store quite large amount of data. I have been using it to collect gigabytes of data in a single database without any corruption or problems → your experience may vary. 136We will now be using boilerplate code from example above and extend it to be
137able to write data received by API to local storage. For example use I will
138use SQLite3 because it plays well with Python and can store quite large amount
139of data. I have been using it to collect gigabytes of data in a single database
140without any corruption or problems → your experience may vary.
87 141
88To avoid learning SQLite I will be using [Dataset: databases for lazy people](https://dataset.readthedocs.io/en/latest/index.html). This package abstracts SQL and simplifies writing and reading data from database. You should install this package with pip software ```pip install dataset --user```. 142To avoid learning SQLite I will be using [Dataset: databases for lazy people](https://dataset.readthedocs.io/en/latest/index.html).
143This package abstracts SQL and simplifies writing and reading data from
144database. You should install this package with pip software
145```pip install dataset --user```.
89 146
90Because API will use POST method I will be testing if code works correctly by using [Restlet Client for Google Chrome](https://chrome.google.com/webstore/detail/restlet-client-rest-api-t/aejoelaoggembcahagimdiliamlcdmfm). This software also allows you to set headers → for basic security with API_KEY. 147Because API will use POST method I will be testing if code works correctly by
148using [Restlet Client for Google Chrome](https://chrome.google.com/webstore/detail/restlet-client-rest-api-t/aejoelaoggembcahagimdiliamlcdmfm).
149This software also allows you to set headers → for basic security with API_KEY.
91 150
92To quickly generate passwords or API keys I usually use this nifty website [RandomKeygen](https://randomkeygen.com/). 151To quickly generate passwords or API keys I usually use this nifty website
152[RandomKeygen](https://randomkeygen.com/).
93 153
94Copy and paste code below over your previous code in file ```webapp.py```. 154Copy and paste code below over your previous code in file ```webapp.py```.
95 155
@@ -144,31 +204,53 @@ if __name__ == "__main__":
144 ) 204 )
145``` 205```
146 206
147To run this simply go to folder containing python file and run ```python webapp.py``` from terminal. If everything goes ok you should have simple API available via POST method on /api route. 207To run this simply go to folder containing python file and run
208```python webapp.py``` from terminal. If everything goes ok you should have
209simple API available via POST method on /api route.
148 210
149After testing the service with Restlet Client you should be able to view your data in a database file ```data.db```. 211After testing the service with Restlet Client you should be able to view
212your data in a database file ```data.db```.
150 213
151![REST settings example](/assets/iot-application/iot-rest-example.png) 214![REST settings example](/assets/iot-application/iot-rest-example.png)
152 215
153You can also check the contents of new database file by using desktop client for SQLite → [DB Browser for SQLite](http://sqlitebrowser.org/). 216You can also check the contents of new database file by using desktop client
217for SQLite → [DB Browser for SQLite](http://sqlitebrowser.org/).
154 218
155![SQLite database example](/assets/iot-application/iot-sqlite-db.png) 219![SQLite database example](/assets/iot-application/iot-sqlite-db.png)
156 220
157Table structure is as simple as it can be. We have ts (timestamp) and value (value from Arduino). As you can see timestamp is generated on API side. If you would happen to have atomic clock on Arduino it would be then better to generate and send timestamp with the value. This would be particularity useful if we would be collecting sensor data at a higher frequency and then sending this data in bulk to API. 221Table structure is as simple as it can be. We have ts (timestamp) and
222value (value from Arduino). As you can see timestamp is generated on API
223side. If you would happen to have atomic clock on Arduino it would be then
224better to generate and send timestamp with the value. This would be
225particularity useful if we would be collecting sensor data at a higher
226frequency and then sending this data in bulk to API.
158 227
159If you will deploy this app with uWSGI and multi-threaded, use DSN (Data Source Name) url with ```?check_same_thread=False```. 228If you will deploy this app with uWSGI and multi-threaded, use
229DSN (Data Source Name) url with ```?check_same_thread=False```.
160 230
161Ok, now that we have some sort of a working API with some basic security so unwanted people can not post data to your database can we proceed further and try to program Arduino to send data to API. 231Ok, now that we have some sort of a working API with some basic security
232so unwanted people can not post data to your database can we proceed further
233and try to program Arduino to send data to API.
162 234
163## Sending data to API with Arduino MKR1000 235## Sending data to API with Arduino MKR1000
164 236
165First of all you should have MKR1000 module and microUSB cable to proceed. If you have ever done any work with Arduino you should know that you also need [Arduino IDE](https://www.arduino.cc/en/Main/Software). On provided link you should be able to download and install IDE. Once that task is completed and you have successfully run blink example you should proceed to the next step. 237First of all you should have MKR1000 module and microUSB cable to proceed.
238If you have ever done any work with Arduino you should know that you also
239need [Arduino IDE](https://www.arduino.cc/en/Main/Software). On provided link
240you should be able to download and install IDE. Once that task is completed
241and you have successfully run blink example you should proceed to the next step.
166 242
167In order to use wireless capabilities of MKR1000 you need to first install [WiFi101 library](https://www.arduino.cc/en/Reference/WiFi101) in Arduino IDE. Please check before you install, you may already have it installed. 243In order to use wireless capabilities of MKR1000 you need to first install
244[WiFi101 library](https://www.arduino.cc/en/Reference/WiFi101) in Arduino IDE.
245Please check before you install, you may already have it installed.
168 246
169Code below is a working example that sends data to API. Before you try to test your code make sure you have run Python web application. Then change settings for wifi, api endpoint and api_key. If by some reason code bellow doesn't work for you please leave a comment and I'll try to help. 247Code below is a working example that sends data to API. Before you try to test
248your code make sure you have run Python web application. Then change settings
249for wifi, api endpoint and api_key. If by some reason code bellow doesn't work
250for you please leave a comment and I'll try to help.
170 251
171Once you have opened IDE and copied this code try to compile and upload it. Then open "Serial monitor" to see if any output is presented by Arduino. 252Once you have opened IDE and copied this code try to compile and upload it.
253Then open "Serial monitor" to see if any output is presented by Arduino.
172 254
173```c 255```c
174#include <WiFi101.h> 256#include <WiFi101.h>
@@ -225,7 +307,6 @@ void setup() {
225} 307}
226 308
227void loop() { 309void loop() {
228
229 WiFiClient client; 310 WiFiClient client;
230 311
231 if (client.connect(server, port)) { 312 if (client.connect(server, port)) {
@@ -251,32 +332,54 @@ void loop() {
251 332
252 // waits for x seconds and continue looping 333 // waits for x seconds and continue looping
253 delay(timeout); 334 delay(timeout);
254
255} 335}
256``` 336```
257 337
258As seen from example you can notice that Arduino is generating random integer between [ 0 .. 1000 ]. You can easily replace this with a temperature sensor or any other kind of sensor. 338As seen from example you can notice that Arduino is generating random integer
339between [ 0 .. 1000 ]. You can easily replace this with a temperature sensor
340or any other kind of sensor.
259 341
260Now that we have API under the hood and Arduino is sending demo data we can now focus on data visualization. 342Now that we have API under the hood and Arduino is sending demo data we can
343now focus on data visualization.
261 344
262## Data visualization 345## Data visualization
263 346
264Before we continue we should examine our project folder structure. Currently we only have two files in our project: 347Before we continue we should examine our project folder structure. Currently
348we only have two files in our project:
265 349
266_simple-iot-app/_ 350_simple-iot-app/_
267 351
268* _webapp.py_ 352* _webapp.py_
269* _data.db_ 353* _data.db_
270 354
271We will now add HTML template that will contain CSS and JavaScript code inline for the simplicity reason. And for the bottle framework to be able to scan root application folder for templates we will add ```bottle.TEMPLATE_PATH.insert(0, "./")``` in ```webapp.py```. By default bottle framework uses ```views/``` subfolder to store templates. This is not the ideal situation and if you will use bottle to develop web applications you should use native behavior and store templates in it's predefined folder. But for the sake of example we will over-ride this. Be careful to fully replace your code with new code that is provided below. Avoid partially replacing code in file :) Also new code for reading data-points is provided in Python example below. 355We will now add HTML template that will contain CSS and JavaScript code inline
272 356for the simplicity reason. And for the bottle framework to be able to scan root
273First we add new route to our web application. It should be trigger when browser hits root of application ```http://0.0.0.0:5000/```. This route will do nothing more than render ```frontend.html``` template. This is done by ```return bottle.template("frontend.html")```. Check code below to further examine how exactly this is done. 357application folder for templates we will add
274 358```bottle.TEMPLATE_PATH.insert(0, "./")``` in ```webapp.py```. By default bottle
275Now we will expand ```/api``` route and use different methods to write or read data-points. For writing data-point we will use POST method and for reading points we will use GET method. GET method will return JSON object with latest readings and historical data. 359framework uses ```views/``` subfolder to store templates. This is not the ideal
276 360situation and if you will use bottle to develop web applications you should use
277There is a fantastic JavaScript library for plotting time-series charts called [MetricsGraphics.js](https://www.metricsgraphicsjs.org) that is based on [D3.js](https://d3js.org/) library for visualizing data. 361native behavior and store templates in it's predefined folder. But for the sake
278 362of example we will over-ride this. Be careful to fully replace your code with
279Data schema required by MetricsGraphics.js → to achieve this we need to transform data from database into this format: 363new code that is provided below. Avoid partially replacing code in file :) Also
364new code for reading data-points is provided in Python example below.
365
366First we add new route to our web application. It should be trigger when browser
367hits root of application ```http://0.0.0.0:5000/```. This route will do nothing
368more than render ```frontend.html``` template. This is done by
369```return bottle.template("frontend.html")```. Check code below to further
370examine how exactly this is done.
371
372Now we will expand ```/api``` route and use different methods to write or
373read data-points. For writing data-point we will use POST method and for
374reading points we will use GET method. GET method will return JSON object
375with latest readings and historical data.
376
377There is a fantastic JavaScript library for plotting time-series charts
378called [MetricsGraphics.js](https://www.metricsgraphicsjs.org) that is
379based on [D3.js](https://d3js.org/) library for visualizing data.
380
381Data schema required by MetricsGraphics.js → to achieve this we need to
382transform data from database into this format:
280 383
281```json 384```json
282[ 385[
@@ -291,7 +394,9 @@ Data schema required by MetricsGraphics.js → to achieve this we need to transf
291] 394]
292``` 395```
293 396
294Web application is now complete and we only need ```frontend.html``` that we will develop now. If you would try to start web app now and go to root app this will return error because we don't have frontend.html yet. 397Web application is now complete and we only need ```frontend.html``` that we
398will develop now. If you would try to start web app now and go to root app
399this will return error because we don't have frontend.html yet.
295 400
296```python 401```python
297# -*- coding: utf-8 -*- 402# -*- coding: utf-8 -*-
@@ -372,7 +477,9 @@ if __name__ == "__main__":
372 ) 477 )
373``` 478```
374 479
375And now finally we can implement ```frontend.html```. Create file with this name and copy code below. When you are done you can start web application. Steps for this part are listed below the code. 480And now finally we can implement ```frontend.html```. Create file with this
481name and copy code below. When you are done you can start web application.
482Steps for this part are listed below the code.
376 483
377```html 484```html
378<!DOCTYPE html> 485<!DOCTYPE html>
@@ -465,9 +572,11 @@ Ok, lets now start application and start feeding it data.
4652. connect Arduino MKR1000 to power source 5722. connect Arduino MKR1000 to power source
4663. open browser and go to ```http://0.0.0.0:5000``` 5733. open browser and go to ```http://0.0.0.0:5000```
467 574
468If everything goes well you should be seeing new data-points rendered on chart every 5 seconds. 575If everything goes well you should be seeing new data-points rendered on
576chart every 5 seconds.
469 577
470If you navigate to ```http://0.0.0.0:5000``` you should see rendered chart as shown on picture below. 578If you navigate to ```http://0.0.0.0:5000``` you should see rendered chart
579as shown on picture below.
471 580
472![Application output](/assets/iot-application/iot-app-output.png) 581![Application output](/assets/iot-application/iot-app-output.png)
473 582
@@ -475,9 +584,12 @@ Complete application with all the code is available for [download](/assets/iot-a
475 584
476## Conclusion 585## Conclusion
477 586
478I hope this clarifies some aspects of IOT application development. Of course this is a minimal example and is far from what can be done in real life with some further dive into other technologies. 587I hope this clarifies some aspects of IOT application development. Of course
588this is a minimal example and is far from what can be done in real life with
589some further dive into other technologies.
479 590
480If you would like to continue exploring IOT world here are some interesting resources for you to examine: 591If you would like to continue exploring IOT world here are some interesting
592resources for you to examine:
481 593
482* [Reading Sensors with an Arduino](https://www.allaboutcircuits.com/projects/reading-sensors-with-an-arduino/) 594* [Reading Sensors with an Arduino](https://www.allaboutcircuits.com/projects/reading-sensors-with-an-arduino/)
483* [MQTT 101 – How to Get Started with the lightweight IoT Protocol](http://www.hivemq.com/blog/how-to-get-started-with-mqtt) 595* [MQTT 101 – How to Get Started with the lightweight IoT Protocol](http://www.hivemq.com/blog/how-to-get-started-with-mqtt)
@@ -485,3 +597,4 @@ If you would like to continue exploring IOT world here are some interesting reso
485* [Internet of Things (IoT) Tutorials](http://www.tutorialspoint.com/internet_of_things/) 597* [Internet of Things (IoT) Tutorials](http://www.tutorialspoint.com/internet_of_things/)
486 598
487Any comment or additional ideas are welcomed in comments below. 599Any comment or additional ideas are welcomed in comments below.
600