A hostolt webalkalmazás linkje
A Weather Tracker nevű weboldal egy egyszerű és letisztult felhasználói felületet biztosít arra, hogy az általunk birtokolt szenzorok adatait követni tudjuk és értesüljünk esetleges vészhelyezetekről.
1. ábra – Az alkalmazás kezdőoldala
A webalkalmazás sokféle tehnológiát ötvözve jött létre.
2. ábra – Használt Frontend, Backend, sensor scripting és hosztolást elősegítő tehnológiák
- HTML - az alkalmazás elemeinek jelölőnyelve
- CSS - az alkalmazás stílusának jelölőnyelve
- Sass - a CSS irásának dinamizálására használt jelölőnyelv
- Bootstrap - a dizájn hatékonyabb létrehozására használt CSS keretrendszer
- JavaScript - az alkalmazás elemeinek dinamizálására használt programozási nyelv
- jQuery - JavaScript könyvtár a szerverrel való komunikálásra AJAX tehnológiával
- Chart.js - JavaScript könyvtár a grafikonok létrehozására
- PHP - az alkalmazás szerveloldali részének programozási nyelve
- Laravel framework - PHP keretrendszer a hatékonyság növelére
- MySQL - az alkalmazás adatbázisát képezi, adatbázis hoszt: remotemysql.com
- GIT - verziókezelő rendszer, ami a kódot a GitHub-al szinkronizálja
- GitHub - az alkalmazás verzióinak tárhelye, a szerver innen kapja meg a fájlokat
- Heroku - az alkalmazást hosztoló szerver heroku.com
- C++ - a szenzor adat leolvasó és küldő scriptjére használt programozási nyelv
3. ábra – Az alkalmazás szolgáltatásai
- 24/7 elérés - az oldal bármikor, bármilyen eszközről elérhető.
- Az adatok védelme - A saját adataid védve vannak a felhasználói azonosításnak köszönhetően.
- Változatos adatok - a szenzorok hőmérsékletet, páratartalnmat és légnyomást is mérnek.
- Grafikonok - az adatok látványos grafikonokon is megtakinthetők.
- Valós idejű adatok - ha egy adat bekerül az adatbázisba máris elérhetővé válik az oldalon.
- Vészhelyzeti értékek - a beállított határokon kívül eső értékek ki vannak emelve.
4. ábra – Az alkalmazás regisztrációs és bejelentkezési űrlapja
- Összes adat monitorizálása
- Felhasználók szenzorainak kezelése
- Szenzorok bellálításainak és tulajdonosának módosítása.
5. ábra – Az összes szenzor összes adata kilistázva, mindig a legutolsó
adattal legfelül. Az oldalon lapozni is lehet
A "View Details" gombra kattintva pedig részletesebben megnézhetjük az adott mérést.
6. ábra – A mérés részletes áttekintője
7. ábra – Az összes felhasználó kilistázva a szenzoraiknak a számával.
A "View" gombra kattintva a kiválasztott felhasználó szenzorait tekinthetjük meg.
8. ábra – Az összes szenzor kilistázva
Az "Add Sensors" gombra kattintva új senzort adhatunk hozzá az adatbázishoz
9. ábra – A szenzor hozzáadásának űrlapja
A "View Details" gombra kattintva pedig a kiválasztott szenzor beállításait és legutóbbi adatait tekinthetjük meg.
10. ábra – A szenzor beállításai és legutóbbi adatai.
Az "Edit Settings" gombra kattintva a kiválasztott szenzor beállításait módosíthatjuk.
11. ábra – A szenzor beállításait módosító űrlap
Az admin itt módosíthatja a szenzor tulajdonosát.
- A saját adatok monitorizálása
- A saját szenzorok bellálításainak módosítása.
- A saját adatok grafikonos áttekintése
12. ábra – A felhasználók által látott oldal belépéskor
13. ábra – A saját adatok kilistázva, mindig a legutolsó adattal
legfelül. Az oldalon lapozni is lehet
A "View Details" gombra kattintva pedig részletesebben megnézhetjük az adott mérést hasonlóan az adminokhoz.
14. ábra – A saját szenzorok kilistázva
A "View Details" gombra kattintva pedig részletesebben megnézhetjük a senzor beállításait és onnan pedig az "Edit sensors" menüpont a beállításokat modosító űrlapra irányít minket.
15. ábra – A szenzor adatait módosÍtó űrlap.
A felhasználó ternmészetesen nem tudja a szenzor tulajdonosát módosítani. Megfigyelhető, hogy beállíthatőak határok amik azt jelzik, hogy számunkra milyen skálán mozgó értékek a megfelelőek. A nem megfelelő adatok kiemelve jelennek meg. (Lásd. 5. ábra, 6. ábra, 13. ábra) Az itt beállított szín a grafikonon való megjelenéshez szükséges.
Ennél a menüpontnál kiválaszthatjuk, hogy milyen napi adatokat és ezeket melyik szenzorainkról szerentnénk látni.
16. ábra – A grafikonok adatainak módosítását biztosító űrlap
17. ábra – A hőmérséklet-változást mutató grafikon a kiválasztott napra
Az oldalon tekinthető meg a kiválasztott napi páratartalom- és légnyomás-változást mutató grafikon is.
A wabalkalmazás a BME280-as szenzorral felszerelt NodeMCU ESP8266 WiFi modul küldi az adatokat.
18. ábra – A BME280-as senzorral felszerelt WiFi modul
Az adatok 10 percenként vannak mérve és egy internetes adatbáziba lementve.