Sustav vizualnog praćenja poljoprivrede temeljen na LoRa Iot - Dizajniranje prednje aplikacije pomoću Firebase & Angular: 10 koraka

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:32

U prethodnom smo poglavlju govorili o tome kako senzori rade s modulom loRa kako bi napunili bazu podataka u stvarnom vremenu Firebase, a vidjeli smo i dijagram vrlo visoke razine kako cijeli naš projekt funkcionira. U ovom poglavlju govorit ćemo o tome kako možemo unijeti te podatke u web aplikaciju.

Korak 1: Postavite Angular na računalu

Angular je jedan od najpopularnijih okvira temeljenih na javascript -u (koji je zapravo strojopis) koji se uglavnom koristi u softverskoj industriji, jer koristimo firebase kao pozadinu (pozadina kao poslužitelj) jedino što nam treba je sučelje za manipulaciju ovim pozadinom. Pa da vidimo kako sve od nule instalirati.

smatrajte da je cijeli ovaj vodič temeljen na Windows 10 okruženju i nadamo se da imate osnovno znanje o angular i firebase.

Instalirajte node.js i NPM na Windows

Prije svega idite na službenu web stranicu Node.js node.js i preuzmite najnoviju verziju node.js, čvor je okruženje za izvršavanje svih javascript kodova. NPM označava upravitelja paketa čvorova koji vam pomaže da instalirate sav drugi potrebni softver putem alata naredbenog retka, to je osnovna ideja o čvoru i NPM -u, ako želite ići dublje, postoji mnoštvo web stranica i videozapisa na kojima možete steći više znanja o čvoru. (Provjerite imate li globalno instalirano node.js na svom računalu).

prije nego što nastavite, provjerite jeste li uspješno instalirali čvor.

Instalirajte Angular

Otvorite alat naredbenog retka i pokrenite naredbu ispod, npm install -g @angular/cli

sada provjerite jeste li uspješno instalirali angular, možete saznati više o angularu za ovu uputu angular službenoj web stranici.

Korak 2: Postavljanje strukture projekta

Idite na mjesto gdje želite stvoriti svoj projekt, za moj sam koristio D: / Angular-Projects ovo mjesto. Otvorite redak naredbenog retka na tom mjestu. Upišite naredbu ispod.

novi sustav za praćenje poljoprivrede

tada će angular stvoriti sve potrebne stvari koje želimo imati u svom front-endu. prije nego što smo spojili sučelje i pozadinu. naučimo malo o angular i firebase.

Kutni

Razgovarajmo o tome kako izgleda tipična web arhitektura, postoji stražnja strana ili strana poslužitelja, strana klijenta ili strana poslužitelja, strana klijenta znači da je to mjesto gdje se nalazi sav HTML, CSS, ali u kutu ne moramo stvarati sperate web stranice za naše sadržaje poput, home.html, about.hml, index.html … itd. postoji samo jedna stranica za cijelu aplikaciju, to je index.html kada korisnik prolazi kroz druge stranice ili druga sadrži index.html će se prikazati sa sadržajem onih stranica koje znače html i css prikaz određene stranice. tako da cijela naša aplikacija sadrži samo jednu.html stranicu. To smo zvali SPA. Pa kreirajmo našu aplikaciju. otvorite CMD u istoj vrsti direktorija ispod naredbe.

ng generirati komponentu home.

ovo će generirati sadržaj vaše početne stranice, tada ćete vidjeti datoteku home.ts i datoteku home.html te datoteku home.css u datoteci home.html gdje ćete definirati kako struktura vaše početne stranice i u kući. css gdje ćete dodati svoje stilove za početnu stranicu, i na kraju datoteku home.ts u koju ćete kodirati svoj tipkarski ili javascript kôd za rad s našom pozadinom.

Korak 3: Instaliranje Bootstrapa 4

Kao što smo raspravljali u prethodnom koraku, sada imamo korak našeg projekta i sada imamo jasnu ideju o tome kako kutni radi. sada ćemo u svrhu stylinga koristiti bootstrap 4, za instaliranje bootstrapa na naš tip projekta ispod naredbe u putanji projekta.

npm install bootstrap@3

sada ne morate brinuti o tome kako možemo strukturirati naše web stranice, bootstrap će to učiniti.

Korak 4: Definiranje ruta

U našem IOT projektu prikupljat ćemo zaglavlje, podnožje, temperaturu, vlažnost, postotak CO2, vlažnost tla. pa ćemo stvoriti 4 web stranice što znači da ćemo u kutu stvoriti 4 komponente za svaki od ovih indeksa.

uvezite modul kutnog usmjerivača u komponentu AppModule.

definirajte rute u zasebnoj datoteci.

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

dodajte ove retke koda unutar oznake za uvoz u AppMoodule.

@NgModule ({uvoz: [RouterModule.forRoot (rute)], izvoz: [RouterModule]})

Dodajmo bootstrap navigacijski bar kod u našu datoteku header.html i povežimo naše komponente,

Korak 5: Firebase

Firebase je jedna od najhladnijih usluga koje google nudi svojim korisnicima. Dakle, jedna od značajki koje smo koristili za ovaj projekt je firebase baza podataka u stvarnom vremenu i hosting. napravimo firebase račun i povežimo naš projekt s firebase bazom podataka u stvarnom vremenu.

korak 01: Prijavite se na svoj gamil račun

korak 02: U traku za pretraživanje upišite firebase konzolu

korak 03: sada ste gotovi.

Korak 6: Instalirajte Firebase u Angular

Za rad s firebaseom moramo instalirati ili uključiti tu knjižnicu za pomoć da poveže firebase i angular zajedno. idite na svoj projektni put i otvorite CMD i upišite ispod koda.

npm install firebase @angular/fire --save

Korak 7: Povezivanje našeg kutnog projekta s Firebaseom

sada moramo dodati naš projekt u firebase. pritisnite dodaj ikonu projekta na svom firebase računu, dajte nazivu projekta koji vam se sviđa i nastavite druga dva također dok ne vidite tu plavu lijepu nadzornu ploču vašeg firebase računa, možete vidjeti da u lijevom stupcu možemo vidjeti cijeli popis firebase usluge, pa možemo koristiti svaku od ovih usluga. sada je sve spremno za rad. na konzoli dodajte aplikaciju za početak i kliknite ikonu. kako biste dobili sve pojedinosti o konfiguraciji za povezivanje naše kutne aplikacije s Firebase računom. Ti su detalji jedinstveni za naš projekt. sada kopirajte te detalje i idite na svoj kutni projekt, pronađite environment.ts dodajte ispod kod i zalijepite te detalje tamo.

izvoz const okruženja = {

produkcija: true, firebase: {

Vaši detalji o konfiguraciji ovdje …

}

};

i također dodajte donje kodove unutar aplikacije.module.ts

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

Korak 8: Instaliranje knjižnice NgxCharts u vaš kutni projekt

Idite na putanju projekta kao što smo učinili u prethodnim koracima, upišite donji kod u svoj CMD.

npm i @swimlane/ngx-charts --sačuvaj

NgxChart Službena web stranica Idite na ovu stranicu i uhvatite grafikon koji želite. Više sam volio s linijskim grafikonom. idite na ovaj url i zgrabite kôd te ga dodajte odgovarajućim komponentama.

Korak 9: Stvorite klasu usluge i bazu podataka u stvarnom vremenu

Idite u mapu projekta i otvorite CMD te upišite valjanu putanju i željeni naziv klase za uslugu zajedno s naredbom ng generiranje. Prije nego što pređemo na kôd, želio bih dati malu ideju o firebase bazi podataka u stvarnom vremenu. To nije poput bilo koje druge baze podataka relacijskih modela. Ne možemo vidjeti strukturu tablice u ovoj raznolikosti baza podataka. To se zove NOSQL baza podataka, možemo vidjeti tekstualnu bazu ili strukturu baze podataka. To se zove JSON, pa ako želimo pohraniti podatke u takvu bazu podataka, moramo ih proslijediti kao JSON objekte. Na gornjoj slici možete vidjeti: U našoj bazi podataka postoji čvor ili rub koji se zovu uređaji, a ispod tog čvora nalazi se još jedan čvor koji se zove DeviceA, a ispod tog čvora možete vidjeti iznad svakog indeksa poput vlažnosti, temperature … itd.. ispod čvora Hum možete vidjeti senzorske podatke koji su se povremeno prikupljali.

async getData () {

this.items = ;

vratiti novo obećanje ((riješiti) => {

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

snapshot.forEach (element => {

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

this.items.push ({

name: moment (element.payload.val () ['date'], 'YYYY-M-DD hh: mm: ss'). format ('YYYY-MM-DD hh: mm'), value: element.payload.val () ['vrijednost']

});

}

});

riješiti (this.items);

});

});

}

ovo je kôd klase usluge za pristup podacima koji su pohranjeni pod hum čvorom u bazi podataka, sve što trebate učiniti je pozvati ovu klasu getData () funkciju u koju želite popuniti svoj grafikon.

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

ovo.multi = [{

Ime: '%', serija: this.temms

}];

}

Ovdje unutar naše klase komponente ngOnInit metodu koju nazivamo našom uslugom popunjen je višestruki niz kojem niz koji bismo trebali proslijediti vrijednosti za grafikon.

Korak 10: Sastavite svoj projekt

Idite u mapu projekta i otvorite CMD i upišite ng server, a zatim će se sav kod Typescripta pretvoriti u javascript. i upišite url koji će vas CMD zatražiti za gornji projekt https:// localhost: 4200/home i gotovi ste.