Sistem vizualnega spremljanja za kmetijstvo LoRa Iot - Oblikovanje sprednje aplikacije z uporabo Firebase & Angular: 10 korakov

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:02

V prejšnjem poglavju govorimo o tem, kako senzorji delajo z modulom loRa za polnjenje baze podatkov Firebase v realnem času, in videli smo zelo visok diagram, kako deluje celoten naš projekt. V tem poglavju bomo govorili o tem, kako lahko te podatke vnesemo v spletno aplikacijo.

1. korak: Nastavite Angular v računalniku

Angular je eden izmed najbolj priljubljenih okvirov, ki temelji na javascript (ki je pravzaprav tipkopis), ki se večinoma uporablja v industriji programske opreme, saj uporabljamo firebase kot svoj ozadje (backend kot strežnik), edino kar potrebujemo je prednja stran za manipulacijo tega backenda. Torej, poglejmo, kako vse, kar je potrebno, namestiti od začetka.

upoštevajte, da je celotna vadnica osnova za okolje Windows 10 in upamo, da imate osnovno znanje o kotni in ognjeni bazi.

Namestite node.js in NPM v okna

Najprej pojdite na uradno spletno mesto Node.js node.js in prenesite najnovejšo različico node.js, node je okolje za izvajanje vseh kod javascript. NPM pomeni upravitelj paketov vozlišč, ki vam pomaga namestiti vso drugo potrebno programsko opremo prek orodja ukazne vrstice, to je osnovna ideja o vozlišču in NPM, če želite iti globlje, obstaja veliko spletnih mest in videoposnetkov, na katerih lahko pridobite več znanja o vozlišču. (Prepričajte se, da imate v računalniku globalno nameščen node.js).

Preden nadaljujete, preverite, ali ste uspešno namestili vozlišče.

Namestite Angular

Odprite orodje ukazne vrstice in zaženite pod ukazom, npm install -g @angular/cli

zdaj se prepričajte, da ste uspešno namestili angular, za to vadnico lahko izveste več o uradnem spletnem mestu angular.

2. korak: Nastavite svojo projektno strukturo

Pojdite tja, kjer želite ustvariti svoj projekt, za moje sem uporabil D: / Angular-Projects to lokacijo. Odprite poziv ukazne vrstice na tem mestu. Vnesite ukaz spodaj.

nov sistem spremljanja kmetijstva

potem bo angular ustvaril vse potrebne stvari, ki jih želimo imeti v svojem sprednjem delu. preden smo skupaj povezali frontend in backend. Naučimo se malo o kotni in ognjeni bazi.

Kotni

Pogovorimo se o tem, kako izgleda tipična spletna arhitektura, obstaja prednja stran ali stran odjemalca ali stran strežnika, stran odjemalca pomeni, da je tam, kjer vse vsebuje HTML, CSS, vendar nam v kotu ni treba ustvarjati razpršenih spletnih strani, ki jih vsebuje na primer, home.html, about.hml, index.html … itd. Obstaja samo ena stran za celotno aplikacijo, in sicer index.html, ko uporabnik preide na druge strani ali pa vsebuje drugo, ki jo bo indeks.html upodobil z vsebino tistih strani, ki pomenijo pogled html in css določene strani. celotna naša aplikacija vsebuje samo eno stran.html. Temu smo rekli SPA. Ustvarimo torej našo aplikacijo. odprite CMD v isti vrsti imenika pod ukazom.

ng ustvari komponento home.

to bo ustvarilo vsebino vaše domače strani, nato pa boste v datoteki home.html videli datoteko home.ts in datoteko home.html ter home.css, kjer boste opredelili, kako bo struktura vaše domače strani in doma. css, kamor boste dodali svoje sloge za domačo stran, in nazadnje datoteko home.ts, kamor boste kodirali tipkovnico ali kodo javascript za delo z našim zaledjem.

3. korak: Namestitev Bootstrapa 4

Kot smo razpravljali v prejšnjem koraku, imamo zdaj korak našega projekta in zdaj imamo jasno predstavo o tem, kako deluje kotnik. zdaj bomo za namene stylinga uporabili bootstrap 4, da namestimo bootstrap v naš tip projekta pod ukazom na poti projekta.

npm install bootstrap@3

zdaj vam ni treba skrbeti, kako lahko strukturiramo naše spletne strani, bootstrap to naredil.

4. korak: Določanje poti

V našem projektu IOT bomo zbirali glavo, nogo, temperaturo, vlažnost, odstotek CO2, vlago v tleh. zato bomo ustvarili 4 spletne strani, kar pomeni, da bomo v kotu ustvarili 4 komponente za vsakega od teh indeksov.

uvozite kotni usmerjevalni modul v komponento AppModule.

določite poti v ločeni datoteki.

const routes: Routes = [{path: 'first-component', component: HomeComponent}, {pot: 'druga komponenta', komponenta: HumiComponent},];

te vrstice kode dodajte v uvozno oznako v AppMoodule.

@NgModule ({uvozi: [RouterModule.forRoot (poti)], izvozi: [RouterModule]})

Dodajmo črtno kodo za zagon zagona v datoteko header.html in povežimo naše komponente,

5. korak: Firebase

Firebase je ena najbolj kul storitev, ki jih google ponuja svojim uporabnikom. Tako je ena od funkcij, ki smo jih uporabili pri tem projektu, baza podatkov Firebase v realnem času in gostovanje. ustvarimo račun za firebase in svoj projekt povežemo z bazo podatkov v realnem času firebase.

korak 01: Prijavite se v svoj gamil račun

korak 02: v iskalno vrstico vnesite firebase console

korak 03: zdaj ste končali.

6. korak: Namestite Firebase v Angular

Za delo z firebase imamo namestitev ali vključitev te knjižnice za pomoč pri povezovanju firebase in angular skupaj. pojdite na pot projekta in odprite CMD ter vnesite spodnjo kodo.

npm install firebase @angular/fire --save

7. korak: Povežite naš kotni projekt s Firebase

zdaj moramo svoj projekt dodati v firebase. pritisnite ikono za dodajanje projekta na svojem računu firebase, dajte imenu projekta, ki vam je všeč, in nadaljujte še dve, dokler ne vidite tiste modre čudovite nadzorne plošče vašega računa firebase, lahko vidite, da v levem stolpcu vidimo celoten seznam firebase storitev, zato lahko uporabljamo vsako od teh storitev. zdaj je vse pripravljeno. v konzoli dodajte aplikacijo za začetek in kliknite ikono. da dobite vse podrobnosti o konfiguraciji za povezavo naše kotne aplikacije z računom firebase. Te podrobnosti so edinstvene za naš projekt. zdaj kopirajte te podrobnosti in pojdite na svoj kotni projekt, poiščite environment.ts dodajte spodnjo kodo in prilepite te podrobnosti tja.

izvoz const okolje = {

produkcija: res, ognjena baza: {

podrobnosti o konfiguraciji tukaj …

}

};

in dodajte spodnje kode v app.module.ts

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

8. korak: Namestitev knjižnice NgxCharts v vaš projekt Angular

Pojdite na pot projekta, kot smo to storili v prejšnjih korakih, vnesite spodnjo kodo v svoj CMD.

npm i @swimlane/ngx-charts --save

Uradna stran NgxChart pojdite na to spletno mesto in vzemite želeni grafikon. Raje z linijskim grafikonom. pojdite na ta url in vzemite kodo ter jo dodajte v ustrezne komponente.

9. korak: Ustvarite razred storitev in bazo podatkov v realnem času

Pojdite v mapo projekta in odprite CMD ter vnesite veljavno pot in ime želenega razreda za storitev skupaj z ukazom ng generated. Preden se lotimo kode, bi rad malo povedal o bazi podatkov firebase v realnem času. Ni kot katera koli druga podatkovna baza relacijskih modelov. V tej raznolikosti baz podatkov ne vidimo strukture tabel. To se imenuje baza podatkov NOSQL, vidimo lahko besedilno bazo ali strukturo podatkovne baze dokumentov. To se imenuje JSON, zato, če želimo podatke shraniti v takšno bazo podatkov, jih moramo posredovati kot objekte JSON. Na zgornji sliki lahko vidite: V naši zbirki podatkov je vozlišče ali rob, imenovan naprave, pod tem vozliščem pa drugo vozlišče, imenovano DeviceA, pod njim pa nad vsakim indeksom, kot so vlažnost, temperatura … itd. pod vozliščem Hum lahko vidite periodično zbrane podatke senzorja.

async getData () {

this.items = ;

vrni novo obljubo ((razreši) => {

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

snapshot.forEach (element => {

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

this.items.push ({

ime: moment (element.payload.val () ['datum'], 'LLLL-M-DD hh: mm: ss'). format ('LLLL-MM-DD hh: mm'), vrednost: element.payload.val () ['vrednost']

});

}

});

razreši (this.items);

});

});

}

to je koda razreda storitev za dostop do podatkov, ki so shranjeni pod vozliščem hum v bazi podatkov, vse kar morate storiti je, da pokličete to funkcijo getData (), kamor želite zapolniti svoj grafikon.

async ngOnInit () {this.items = počakajte this.humService.getData ();

this.multi = [{

ime: '%', serija: this.items

}];

}

Tukaj v naši komponentni razredni metodi ngOnInit smo poklicali našo storitev, naseljeno z več matrikami, ki jim niz, ki naj posredujemo vrednosti grafa.

10. korak: sestavite svoj projekt

Pojdite v mapo svojega projekta in odprite CMD ter vnesite ng server, nato se bo vsa koda Typescript pretvorila v javascript. in vnesite url, na katerega vas bo CMD pozval, za zgornji projekt https:// localhost: 4200/home in končali ste.