Vizuálny monitorovací systém pre poľnohospodárstvo založený na LoRa - Navrhovanie čelnej aplikácie pomocou platformy Firebase & Angular: 10 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:55

V predchádzajúcej kapitole hovoríme o tom, ako senzory pracujú s modulom loRa na naplnenie databázy Realtime databázou firebase, a videli sme diagram veľmi vysokej úrovne, ako celý náš projekt funguje. V tejto kapitole si povieme, ako tieto údaje naplniť vo webovej aplikácii.

Krok 1: Nastavte uhlové uhly vo svojom počítači

Angular je jedným z najpopulárnejších rámcov založených na javascripte (čo je vlastne strojopis), ktorý sa väčšinou používa v softvérovom priemysle, pretože ako backend (backend ako server) používame firebase. Jediné, čo potrebujeme, je frontend na manipuláciu s týmto backendom. Pozrime sa teda, ako nainštalovať všetky potrebné položky od začiatku.

zvážte, že celý tento návod je založený na prostredí Windows 10 a dúfate, že máte základné znalosti o uhlovej a firebase.

Nainštalujte do okien uzol.js a NPM

Najprv choďte na oficiálnu webovú stránku Node.js node.js a stiahnite si najnovšiu verziu node.js, node je runtime prostredie na spustenie všetkých kódov JavaScript. NPM je skratka pre správcu balíkov uzlov, ktorý vám pomôže nainštalovať všetok ďalší potrebný softvér pomocou nástroja príkazového riadka. To je základná myšlienka o uzle a NPM, ak chcete ísť hlbšie, existuje veľa webových stránok a videí, pomocou ktorých môžete získať ďalšie znalosti. about node. (Uistite sa, že máte globálne nainštalovaný node.js do svojho počítača).

skôr, ako budete pokračovať, skontrolujte, či ste úspešne nainštalovali uzol.

Nainštalujte uhlové

Otvorte nástroj príkazového riadka a spustite príkaz pod

npm install -g @angular/cli

Teraz sa uistite, že ste úspešne nainštalovali uhlové, môžete sa dozvedieť viac o uhlovom pre tento tutoriál oficiálnych webových stránok pre uhlové.

Krok 2: Nastavte štruktúru projektu

Prejdite na miesto, kde chcete vytvoriť projekt, pre môj som použil D: / Angular-Projects toto umiestnenie. Na tomto mieste otvorte príkazový riadok. Zadajte príkaz nižšie.

nový poľnohospodársky monitorovací systém

potom uhlové vytvorí všetky potrebné veci, ktoré chceme mať v našom klientskom rozhraní. predtým, ako sme spojili frontend a backend dohromady. poďme sa dozvedieť niečo o uhlovej a firebase.

Uhlové

Poďme sa porozprávať o tom, ako vyzerá typická webová architektúra. Existuje frontend alebo klientsky backend alebo serverový server, klientský server znamená, že obsahuje všetky HTML, CSS, ale v uhlovom pohľade nemusíme vytvárať rôzne webové stránky pre naše ako home.html, about.hml, index.html … atď. pre celú aplikáciu je len jedna stránka, ktorou je index.html, keď používateľ prechádza inými stránkami alebo iné stránky obsahujú index.html sa vykreslí s obsahom týchto stránok, ktoré znamenajú zobrazenie html a css na konkrétnu stránku. takže celá naša aplikácia obsahuje iba jednu jedinú stránku.html. Tomu sme hovorili SPA. Vytvorme teda našu aplikáciu. otvorte príkaz CMD v tom istom type adresára, ako je uvedené nižšie.

generovanie domovských komponentov.

Tým sa vygeneruje obsah vašej domovskej stránky, potom uvidíte súbor home.ts a súbor home.html a home.css v súbore home.html, kde definujete štruktúru domovskej stránky a domovskú stránku. css, kam chcete pridať svoje štýly na domovskú stránku, a nakoniec súbor home.ts, v ktorom budete kódovať svoj strojopisný alebo javascriptový kód, aby fungoval s naším backendom.

Krok 3: Inštalácia bootstrapu 4

Ako sme diskutovali v predchádzajúcom kroku, teraz sme krokovali náš projekt a teraz máme jasnú predstavu o tom, ako funguje uhlové. teraz na účely štýlu použijeme bootstrap 4 na nainštalovanie bootstrapu na príkaz nášho typu projektu nižšie v ceste projektu.

npm install bootstrap@3

teraz sa už nemusíte starať o to, ako môžeme štruktúrovať naše webové stránky, bootstrap to urobí.

Krok 4: Definovanie trás

V rámci nášho projektu IOT budeme zbierať záhlavie, päty, teplotu, vlhkosť, percento CO2, vlhkosť pôdy. vytvoríme teda 4 webové stránky, čo znamená, že v uhlovom formáte vytvoríme 4 komponenty pre každý z týchto indexov.

importujte modul uhlového smerovača do komponentu AppModule.

definujte trasy v samostatnom súbore.

cesty: Routes = [{cesta: 'prvá zložka', súčasť: HomeComponent}, {cesta: 'druhý komponent', komponent: HumiComponent},];

pridajte tieto riadky kódu do značky importu v AppMoodule.

@NgModule ({importy: [RouterModule.forRoot (trasy)], exporty: [RouterModule]})

Vložme navigačný čiarový kód bootstrap do nášho súboru header.html a prepojme naše komponenty,

Krok 5: Firebase

Firebase je jednou z najlepších služieb, ktoré Google poskytuje svojim používateľom. Jednou z funkcií, ktoré sme na tento projekt použili, je teda databáza a hosting v reálnom čase firebase. vytvorme si účet Firebase a prepojme náš projekt s databázou Firebase v reálnom čase.

krok 01: Prihláste sa do svojho gamil účtu

krok 02: Do vyhľadávacieho panela zadajte konzolu firebase

krok 03: Teraz ste hotoví.

Krok 6: Nainštalujte Firebase do uhla

Na prácu s firebase máme nainštalovanú alebo zahrnutú pomocnú knižnicu na prepojenie firebase a angular dohromady. choďte na cestu k projektu, otvorte CMD a zadajte nižšie uvedený kód.

npm install firebase @angular/fire --save

Krok 7: Prepojenie nášho uhlového projektu s platformou Firebase

teraz musíme pridať náš projekt do firebase. stlačte ikonu pridať projekt na svojom účte Firebase, zadajte názov projektu, ktorý sa vám páči, a pokračujte ďalšími dvoma, kým neuvidíte ten modrý, krásny informačný panel vášho účtu Firebase, v ľavom bočnom stĺpci uvidíte zoznam všetkých firebase služby, aby sme mohli využiť každú z týchto služieb. teraz je všetko pripravené. v konzole pridajte aplikáciu, aby ste mohli začať, a kliknite na ikonu. získať všetky konfiguračné detaily na prepojenie našej uhlovej aplikácie s účtom Firebase. Tieto detaily sú pre náš projekt jedinečné. teraz skopírujte tieto podrobnosti a prejdite na svoj uhlový projekt, nájdite environment.ts pridajte nižšie uvedený kód a prilepte ich tam.

exportné prostredie const = {

produkcia: true, firebase: {

podrobnosti o vašej konfigurácii tu …

}

};

a tiež pridať nižšie uvedené kódy do súboru app.module.ts

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

Krok 8: Inštalácia knižnice NgxCharts do vášho uhlového projektu

Prejdite na cestu projektu, ako sme urobili v predchádzajúcich krokoch, zadajte nižšie uvedený kód do svojho CMD.

npm i @swimlane/ngx-charts-uložte

NgxChart Oficiálna stránka choďte na túto stránku a chyťte požadovaný graf. Preferoval som čiarový graf. prejdite na túto adresu URL, uchopte kód a pridajte ho do zodpovedajúcich komponentov.

Krok 9: Vytvorte triedu služieb a databázu v reálnom čase

Prejdite do priečinka projektu a otvorte CMD a zadajte platnú cestu a názov preferovanej triedy pre službu spolu s príkazom ng generate. Predtým, ako sa dostaneme k kódu, by som chcel urobiť malú predstavu o databáze firebase v reálnom čase. Nie je to ako žiadna iná databáza relačných modelov. V tejto variabilite databáz nevidíme tabuľkovú štruktúru. Toto sa nazýva databáza NOSQL a môžeme vidieť textovú alebo dokumentovú základňu dokumentov. Nazýva sa to JSON, takže ak by sme chceli uložiť údaje do tohto druhu databázy, musíme ich odovzdať ako objekty JSON. Na obrázku vyššie vidíte, V našej databáze je uzol alebo hrana nazývaná zariadenia a pod týmto uzlom je ďalší uzol s názvom DeviceA a pod týmto uzlom vidíte nad každým indexom ako vlhkosť, teplota..atď. Pod uzlom Hum môžete vidieť údaje o senoroch, ktoré boli pravidelne zbierané.

async getData () {

this.items = ;

vrátiť nový sľub ((vyriešiť) => {

táto.databáza. list (`/devices/$ {this.sessionService.get (" DeviceA ")}/$ {" Hum "}`).snapshotChanges (). subscribe (snapshot => {

snapshot.forEach (element => {

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

this.items.push ({

názov: moment (element.payload.val () ['date'], 'RRRR-M-DD hh: mm: ss'). formát ('RRRR-MM-DD hh: mm'), hodnota: element.payload.val () ['hodnota']

});

}

});

vyriešiť (this.items);

});

});

}

toto je kód triedy služby na prístup k údajom, ktoré sú uložené v uzle hum v databáze, stačí zavolať tejto funkcii getData () funkciu, do ktorej chcete vyplniť svoj graf.

async ngOnInit () {this.items = await this.humService.getData ();

this.multi = [{

názov: '%', séria: toto.položky

}];

}

Tu v rámci našej metódy triedy ngOnInit metódy, ktorú sme zavolali, naša služba naplnila viacnásobné pole, ktoré pole, ktorému by sme mali odovzdať hodnoty pre graf.

Krok 10: Zostavte svoj projekt

Prejdite do priečinka projektu, otvorte CMD a zadajte príkaz ng server. Potom sa všetok strojopisný kód prevedie na javascript. a zadajte webovú adresu, na ktorú vás CMD vyzve, pre vyššie uvedený projekt https:// localhost: 4200/home a máte hotovo.