LoRa pagrįsta vizuali žemės ūkio stebėjimo sistema Iot - Priekinės programos kūrimas naudojant „Firebase & Angular“: 10 žingsnių

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:44

Ankstesniame skyriuje kalbėjome apie tai, kaip jutikliai veikia su „loRa“moduliu, kad užpildytų „Firebase Realtime“duomenų bazę, ir pamatėme labai aukšto lygio diagramą, kaip veikia visas mūsų projektas. Šiame skyriuje kalbėsime apie tai, kaip galime užpildyti šiuos duomenis žiniatinklio programoje.

1 žingsnis: nustatykite „Angular“savo kompiuteryje

„Angular“yra viena iš populiariausių „JavaScript“(kuri iš tikrųjų yra mašinraščio) pagrindu sukurta sistema, dažniausiai naudojama programinės įrangos pramonėje, nes kaip „backbase“(„backend“kaip serverį) naudojame „Firebase“- vienintelis dalykas, kurio mums reikia, yra sąsaja, skirta manipuliuoti šia vidine programa. Taigi pažiūrėkime, kaip įdiegti visus reikalingus elementus nuo nulio.

Apsvarstykite, kad visa ši pamoka yra pagrįsta „Windows 10“aplinka ir tikisi, kad turite pagrindinių žinių apie kampinį ir „firebase“.

Įdiekite „node.js“ir „NPM“„Windows“

Pirmiausia eikite į oficialią „Node.js“svetainę node.js ir atsisiųskite naujausią „node.js“versiją, mazgas yra vykdymo aplinka, skirta paleisti visus „JavaScript“kodus. NPM reiškia mazgų paketų tvarkyklę, kuri padeda jums įdiegti visą kitą reikalingą programinę įrangą per komandinės eilutės įrankį, tai yra pagrindinė idėja apie mazgą ir NPM, jei norite eiti giliau, yra daugybė svetainių ir vaizdo įrašų, kuriuos galite įgyti daugiau žinių apie mazgą. (Įsitikinkite, kad kompiuteryje įdiegėte „node.js“visame pasaulyje).

prieš eidami į priekį, patikrinkite, ar sėkmingai įdiegėte mazgą.

Įdiekite „Angular“

Atidarykite komandų eilutės įrankį ir paleiskite žemiau esančią komandą, npm įdiegti -g @angular/cli

Dabar įsitikinkite, kad sėkmingai įdiegėte „Angular“, daugiau apie „Angular“galite sužinoti šioje oficialioje „Angular“pamokoje.

2 žingsnis: nustatykite projekto struktūrą

Eikite ten, kur norite sukurti savo projektą, mano vietoje naudojau D: / Angular-Projects. Atidarykite komandų eilutės eilutę toje vietoje. Įveskite žemiau esančią komandą.

nauja žemės ūkio stebėsenos sistema

tada kampinis sukurs visus būtinus dalykus, kuriuos norime turėti savo priekinėje pusėje. prieš sujungdami priekinę ir galinę sistemas. šiek tiek sužinokime apie kampinę ir ugnies bazę.

Kampinis

Pakalbėkime apie tai, kaip atrodo tipinė žiniatinklio architektūra, yra priekinė arba kliento pusės vidinė arba serverio pusė, kliento pusė reiškia, kad čia yra visas HTML, CSS, tačiau kampiniu būdu mes neprivalome kurti specialių tinklalapių kaip, home.html, about.hml, index.html … ir t.t. yra tik vienas puslapis visai programai, jis yra index.html, kai vartotojas eina per kitus puslapius arba kitas turinys index.html ketina pateikti su tų puslapių turiniu, kuris reiškia tam tikro puslapio html ir css vaizdą. taigi visoje mūsų programoje yra tik vienas.html puslapis. Tai mes vadinome SPA. Taigi sukurkime savo programą. atidarykite CMD to paties katalogo tipo komandą žemiau.

ng generuoti komponentą namo.

tai sugeneruos jūsų pagrindinio puslapio turinį, tada pamatysite failą home.ts ir home.html bei home.css faile home.html, kuriame ketinate apibrėžti savo pagrindinio puslapio struktūrą ir pagrindinį puslapį. css, kur ketinate pridėti savo pagrindinio puslapio stilius, ir galiausiai home.ts failą, kuriame ketinate koduoti mašinraštį arba „JavaScript“kodą, kad galėtumėte dirbti su mūsų vidine programa.

3 žingsnis: „Bootstrap“diegimas 4

Kaip jau aptarėme ankstesniame žingsnyje, mes turime savo projekto žingsnį ir dabar turime aiškią idėją, kaip veikia kampinis. dabar stiliaus tikslais mes naudosime „bootstrap 4“, kad įdiegtume „bootstrap“į mūsų projekto tipo komandą žemiau projekto kelyje.

npm įdiegti „bootstrap@3“

dabar jums nereikia jaudintis, kaip mes galime struktūrizuoti savo tinklalapius, „bootstrap“tai padarys.

4 žingsnis: Maršrutų nustatymas

Vykdydami IOT projektą, mes surinksime antraštę, poraštę, temperatūrą, drėgmę, CO2 procentą, dirvožemio drėgmę. Taigi mes ketiname sukurti 4 tinklalapius, o tai reiškia, kad kampu ketiname sukurti 4 komponentus kiekvienam iš šių indeksų.

importuokite kampinį maršrutizatoriaus modulį į „AppModule“komponentą.

apibrėžti maršrutus atskirame faile.

konst maršrutai: Maršrutai = [{kelias: 'pirmasis komponentas', komponentas: NamųKomponentas}, {kelias: 'antrasis komponentas', komponentas: HumiComponent},];

pridėkite šias kodo eilutes importo žymoje „AppMoodule“.

@NgModule ({importas: [RouterModule.forRoot (maršrutai)], eksportas: [RouterModule]})

Įtrauksime „bootstrap“naršymo brūkšninį kodą į failą header.html ir susiesime komponentus,

5 veiksmas: „Firebase“

„Firebase“yra viena nuostabiausių paslaugų, kurią „Google“teikia savo vartotojams. Taigi viena iš funkcijų, kurią mes panaudojome šiam projektui, yra realaus laiko „firebase“duomenų bazė ir priegloba. susikurkime „Firebase“paskyrą ir prijunkime savo projektą prie „Firebase“realaus laiko duomenų bazės.

01 žingsnis: Prisijunkite prie savo „Gamil“paskyros

02 veiksmas: paieškos juostoje įveskite „firebase“konsolę

03 žingsnis: dabar baigsite.

6 veiksmas: įdiekite „Firebase“į „Angular“

Norėdami dirbti su „Firebase“, turime įdiegti arba įtraukti tą pagalbos biblioteką, kad sujungtų „Firebase“ir „Angular“. eikite į savo projekto kelią ir atidarykite CMD ir įveskite žemiau esantį kodą.

npm įdiegti firebase @angular/fire --save

7 veiksmas: mūsų kampinio projekto prijungimas prie „Firebase“

dabar turime įtraukti savo projektą į „firebase“. paspauskite pridėti projekto piktogramą savo „Firebase“paskyroje, nurodykite jums patinkantį projekto pavadinimą ir tęskite kitus du, kol pamatysite tą mėlyną gražų „Firebase“paskyros prietaisų skydelį, ir pamatysite, kad kairiajame stulpelyje matome visą „Firebase“sąrašą paslaugas, todėl galime naudotis kiekviena iš šių paslaugų. dabar viskas paruošta eiti. Norėdami pradėti, konsolėje pridėkite programą ir spustelėkite piktogramą. gauti visą konfigūracijos informaciją, kad mūsų kampinė programa būtų sujungta su „Firebase“paskyra. Šios detalės būdingos tik mūsų projektui. dabar nukopijuokite šią informaciją ir eikite į savo kampinį projektą, suraskite aplinką. pridėkite žemiau esantį kodą ir įklijuokite šią informaciją.

eksportuoti konst aplinką = {

gamyba: tiesa, firebase: {

čia rasite išsamią konfigūracijos informaciją …

}

};

taip pat pridėkite žemiau esančius kodus app.module.ts

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

8 veiksmas: „NgxCharts“bibliotekos diegimas jūsų kampiniame projekte

Eikite į projekto kelią, kaip ir mes atlikome ankstesnius veiksmus, įveskite žemiau esantį kodą savo CMD.

npm i @swimlane/ngx-charts-išsaugoti

„NgxChart“oficiali svetainė eikite į šią svetainę ir paimkite norimą diagramą. Man labiau patiko linijinė diagrama. eikite į šį URL ir paimkite kodą ir pridėkite jį prie atitinkamų komponentų.

9 veiksmas: sukurkite paslaugų klasę ir realaus laiko duomenų bazę

Eikite į projekto aplanką ir atidarykite CMD ir įveskite galiojantį paslaugos kelią ir pageidaujamą klasės pavadinimą kartu su komanda ng generuoti. Prieš pradėdami nagrinėti kodą, norėčiau šiek tiek įsivaizduoti apie „Firebase“realaus laiko duomenų bazę. Tai nėra kaip bet kuri kita santykių modelių duomenų bazė. Mes nematome lentelės struktūros šioje duomenų bazių įvairovėje. Tai vadinama NOSQL duomenų baze, matome teksto ar dokumentų bazės duomenų struktūrą. Tai vadinama JSON, taigi, jei norime išsaugoti duomenis tokios rūšies duomenų bazėje, turime perduoti juos kaip JSON objektus. Aukščiau esančiame paveikslėlyje galite pamatyti: Mūsų duomenų bazėje yra mazgas arba kraštas, vadinamas įrenginiais, o po tuo mazgu yra kitas mazgas, vadinamas „DeviceA“, ir po tuo mazgu galite pamatyti virš kiekvieno indekso, pvz., Drėgmės, temperatūros ir kt. po „Hum“mazgu galite matyti periodiškai surinktus senatoriaus duomenis.

async getData () {

this.items = ;

grąžinti naują pažadą ((išspręsti) => {

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

snapshot.forEach (elementas => {

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

this.items.push ({

pavadinimas: momentas (elementas.payload.val () ['data'], 'YYYY-M-DD hh: mm: ss'). formatas ('YYYY-MM-DD hh: mm'), value: element.payload.val () ['vertė']

});

}

});

išspręsti (this.items);

});

});

}

tai yra paslaugų klasės kodas, leidžiantis pasiekti duomenis, kurie yra saugomi duomenų bazėje po hum mazgu. Viskas, ką jums reikia padaryti, tai iškviesti šią klasės funkciją getData (), kur norite užpildyti diagramą.

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

tai.multi = [{

vardas: '%', serija: this.items

}];

}

Čia, mūsų komponentų klasės ngOnInit metodo viduje, mes iškviečiame savo paslaugą, užpildytą daugybe masyvo, kurį masyvas turėtų perduoti diagramos reikšmėms.

10 žingsnis: surinkite savo projektą

Eikite į savo projekto aplanką ir atidarykite CMD ir įveskite ng server, tada visas „Typescript“kodas bus paverstas „javascript“. ir įveskite URL, kurį CMD ketina paraginti, aukščiau pateiktam projektui https:// localhost: 4200/home ir viskas.