LoRa-alapú vizuális mezőgazdasági monitoring rendszer Iot - Előlapi alkalmazás tervezése Firebase és Angular használatával: 10 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:39

Az előző fejezetben arról beszéltünk, hogy az érzékelők hogyan dolgoznak a loRa modullal a firebase Realtime adatbázis feltöltésében, és láttuk a nagyon magas szintű diagramot, hogyan működik az egész projektünk. Ebben a fejezetben arról fogunk beszélni, hogyan tölthetjük fel ezeket az adatokat a webalkalmazásban.

1. lépés: Az Angular beállítása a számítógépen

Az Angular az egyik legnépszerűbb javascript (ami valójában gépíró) alapú keretrendszer, amelyet leginkább a szoftveriparban használnak, mivel a firebase -t használjuk háttérként (háttérként kiszolgálóként), amire csak szükségünk van, hogy kezelőfelületet kezeljünk a háttérben. Lássuk tehát, hogyan kell a nulláról telepíteni az összes szükséges elemet.

fontolja meg, hogy ez az oktatóanyag a Windows 10 környezetre épül, és reméljük, hogy rendelkezik alapvető ismeretekkel a szögletről és a tűzbázisról.

Telepítse a node.js és az NPM programokat a Windows rendszerre

Először nyissa meg a Node.js hivatalos webhelyét, a node.js -t, és töltse le a node.js legújabb verzióját, a node egy futásidejű környezet az összes javascript -kód futtatásához. Az NPM a csomópont -csomagkezelőt jelenti, amely segíti az összes többi szükséges szoftver telepítését a parancssori eszközön keresztül, ez az alapötlet a csomópontról és az NPM -ről, ha mélyebbre szeretne menni, rengeteg webhely és videó található, amelyekkel több tudást szerezhet csomópontról. (Győződjön meg arról, hogy a számítógépen globálisan telepítette a node.js fájlt).

mielőtt továbblép, ellenőrizze, hogy sikeresen telepítette -e a csomópontot.

Telepítse az Angular -t

Nyissa meg a parancssori eszközt, és futtassa az alábbi parancsot, npm install -g @angular/cli

most győződjön meg arról, hogy sikeresen telepítette az angular -t, és többet megtudhat az angular -ról ezen az oktatóanyagon, a szögletes hivatalos webhelyen.

2. lépés: A projekt szerkezetének beállítása

Menjen oda, ahol létre szeretné hozni a projektjét, az enyémhez ezt a helyet használtam: D: / Angular-Projects. Nyissa meg a parancssori parancssort az adott helyen. Írja be az alábbi parancsot.

új mezőgazdasági felügyeleti rendszer

akkor az angular létrehozza az összes szükséges dolgot, amit szeretnénk, ha a front-endünkben lennénk. mielőtt összekötöttük volna a frontendet és a backendet. tanuljunk meg egy kicsit az angularról és a firebase -ről.

Szögletes

Beszéljünk arról, hogyan néz ki a tipikus webes architektúra, van frontend vagy kliens oldali háttér vagy szerver oldal, az ügyféloldal azt jelenti, hogy itt található minden HTML, CSS, de szögletesen nem kell sperate weboldalakat létrehoznunk a például: home.html, about.hml, index.html … stb. csak egyetlen oldal létezik az egész alkalmazáshoz, ez az index.html, ha a felhasználó más oldalakon böngészik, vagy más index.html tartalmat jelenít meg azoknak az oldalaknak a tartalmával, amelyek az adott oldal html és css nézetét jelentik. így az egész alkalmazásunk csak egyetlen.html oldalt tartalmaz. Ezt neveztük SPA -nak. Tehát hozzuk létre alkalmazásunkat. nyissa meg a CMD parancsot az alábbi könyvtártípusban.

ng komponens létrehozása home.

ez létrehozza a kezdőlap tartalmát, majd megjelenik a home.ts fájl és a home.html fájl és a home.css a home.html fájlban, ahol meghatározza a kezdőlap szerkezetét és a kezdőlapon. css, ahol hozzáadja a stílusokat a kezdőlaphoz, és végül a home.ts fájlt, ahol kódolni fogja a gépi vagy javascript kódot, hogy működjön a háttérrendszerünkkel.

3. lépés: A Bootstrap telepítése 4

Amint azt az előző lépésben megbeszéltük, most megvan a projektünk lépése, és most világos elképzelésünk van a szög működéséről. most a stílus céljaira a bootstrap 4 -et fogjuk használni, hogy telepítsük a bootstrap -ot az alábbi projekttípusunk parancsához a projekt elérési útjában.

npm telepítse a bootstrap@3 parancsot

most nem kell aggódnia, hogy hogyan tudjuk felépíteni a weboldalainkat, a bootstrap megcsinálja a dolgot.

4. lépés: Útvonalak meghatározása

Az IOT projektben összegyűjtjük a fejlécet, a láblécet, a hőmérsékletet, a páratartalmat, a Co2 százalékot, a talaj nedvességtartalmát. így 4 weboldalt fogunk létrehozni, ami azt jelenti, hogy szögletesen 4 összetevőt fogunk létrehozni mindegyik indexhez.

importálja a szögletes útválasztó modult az AppModule összetevőbe.

határozza meg az útvonalakat külön fájlban.

const útvonalak: Útvonalak = [{útvonal: 'első komponens', összetevő: HomeComponent}, {elérési út: 'második komponens', összetevő: HumiComponent},];

adja hozzá ezeket a kódsorokat az AppMoodule importcímkéjébe.

@NgModule ({import: [RouterModule.forRoot (útvonalak)], export: [RouterModule]})

Adjunk hozzá bootstrap navigációs vonalkódot a header.html fájlunkhoz, és kapcsoljuk össze összetevőinket,

5. lépés: Firebase

A Firebase az egyik legmenőbb szolgáltatás, amelyet a Google nyújt a felhasználóknak. Tehát az egyik funkció, amelyet ehhez a projekthez használtunk, a valós idejű firebase adatbázis és tárhely. hozzunk létre egy firebase fiókot, és csatlakoztassuk projektünket a firebase valós idejű adatbázisához.

lépés: Jelentkezzen be gamil -fiókjába

02. lépés: írja be a firebase konzolt a keresősávba

03. lépés: most már kész.

6. lépés: Telepítse a Firebase -t Angularban

A firebase használatához telepítenünk vagy be kell építenünk azt a segítő könyvtárat, amely összekapcsolja a firebase -t és az angular -ot. menjen a projekt útvonalához, nyissa meg a CMD -t, és írja be az alábbi kódot.

npm firebase telepítése @angular/fire --save

7. lépés: Szögletes projektünk összekapcsolása a Firebase -rel

most hozzá kell adnunk a projektünket a firebase -hez. nyomja meg a projekt hozzáadása ikont a Firebase -fiókján, és adja meg a kívánt projektnevet, és folytassa a másik kettőt is, amíg meg nem jelenik a Firebase -fiók kék, gyönyörű irányítópultja, és láthatja, hogy a bal oldali oszlopban láthatjuk a firebase összes listáját szolgáltatásokat, így e szolgáltatások mindegyikét használhatjuk. most minden készen áll az indulásra. a kezdőképernyőn adjon hozzá egy alkalmazást, majd kattintson az ikonra. hogy megkapja az összes konfigurációs adatot, hogy összekapcsolhassuk szögletes alkalmazásunkat a firebase fiókkal. Ezek a részletek egyedülállóak a projektünkben. most másolja le ezeket a részleteket, és menjen a szögletes projektjéhez, keresse meg a környezetet. adja hozzá az alábbi kódot, és illessze be ezeket a részleteket.

export const környezet = {

produkció: igaz, firebase: {

konfigurációs adatait itt …

}

};

és adja hozzá az alábbi kódokat az app.module.ts -hez

import: [AngularFireModule.initializeApp (environment.firebase),….],

8. lépés: Az NgxCharts könyvtár telepítése a szögprojektbe

Lépjen a projekt útvonalára, mint az előző lépésekben, írja be az alábbi kódot a CMD -be.

npm i @swimlane/ngx-charts-mentés

Az NgxChart hivatalos webhelye lépjen erre az oldalra, és ragadja meg a kívánt diagramot. Inkább vonaldiagrammal. menjen erre az URL -re, és ragadja meg a kódot, és adja hozzá a megfelelő összetevőkhöz.

9. lépés: Hozzon létre egy szolgáltatási osztályt és valós idejű adatbázist

Lépjen a projektmappába, nyissa meg a CMD -t, és írja be a szolgáltatás érvényes elérési útját és előnyben részesített osztálynevét az ng create paranccsal együtt. Mielőtt belekezdenénk a kódba, kevés ötletet szeretnék adni a firebase valós idejű adatbázisáról. Ez nem olyan, mint bármely más relációs modell adatbázis. Ebben az adatbázis -változatban nem látunk táblázatstruktúrát. Ezt NOSQL -adatbázisnak nevezzük, láthatunk szöveges vagy dokumentum -alapú adatstruktúrát. Ezt JSON -nak hívják, tehát ha adatokat akarunk tárolni az ilyen típusú adatbázisban, akkor azokat úgy kell továbbadnunk, mint a JSON -objektumokat. A fenti képen láthatja, hogy adatbázisunkban van egy csomópont vagy él, amelyet eszközöknek hívnak, és e csomópont alatt van egy másik csomópont, amelyet DeviceA -nak hívnak, és a csomópont alatt az egyes indexek felett láthatók, mint például a páratartalom, a hőmérséklet stb. A Hum csomópont alatt láthatja a rendszeresen gyűjtött érzékelő adatokat.

async getData () {

this.items = ;

return new Promise ((feloldás) => {

ez.adatbázis. list (`/devices/$ {this.sessionService.get (" DeviceA ")}/$ {" Hum "}`).snapshotChanges (). subscribe (snapshot => {

snapshot.forEach (elem => {

if (! element.key.startsWith ('current_hum')) {

this.items.push ({

név: pillanat (element.payload.val () ['date'], 'YYYY-H-DD hh: mm: ss'). formátum ('YYYY-MM-DD hh: mm'), value: element.payload.val () ['érték']

});

}

});

megoldani (this.items);

});

});

}

ez a szolgáltatásosztály kódja az adatbázis hum -csomópontja alatt tárolt adatokhoz való hozzáféréshez, mindössze annyit kell tennie, hogy meghívja ezt az osztály getData () függvényt, ahol fel szeretné tölteni a diagramot.

async ngOnInit () {this.items = várja ezt.humService.getData ();

ez.multi = [{

név: '%', sorozat: this.items

}];

}

Itt az ngOnInit komponensosztályunkon belül a szolgáltatásunk által feltöltött többszörös tömböt hívjuk meg, amelyet a tömbnek át kell adnunk a gráf értékeinek.

10. lépés: Fordítsa össze a projektet

Lépjen a projekt mappájába, nyissa meg a CMD -t, és írja be az ng server parancsot, majd az összes Typescript -kód javascript -re konvertálódik. és írja be azt az URL -t, amelyet a CMD kérni fog, a fenti https:// localhost: 4200/home projekthez, és kész.