Op LoRa gebaseerd visueel bewakingssysteem voor landbouw Iot - Een fronted applicatie ontwerpen met Firebase & Angular: 10 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:14

In het vorige hoofdstuk hebben we het gehad over hoe de sensoren werken met de loRa-module om de Firebase Realtime-database te vullen, en we hebben het diagram op zeer hoog niveau gezien hoe ons hele project werkt. In dit hoofdstuk zullen we het hebben over hoe we die gegevens in een webapplicatie kunnen invullen.

Stap 1: Angular instellen op uw computer

Angular is een van de meest populaire op javascript (dat eigenlijk typoscript is) gebaseerde frameworks die meestal worden gebruikt in de software-industrie, omdat we firebase gebruiken als onze backend (backend als server). Het enige dat we nodig hebben, is een frontend om deze backend te manipuleren. Dus laten we eens kijken hoe we al die noodzakelijke dingen vanaf het begin kunnen installeren.

overweeg dat deze hele tutorial gebaseerd is op de Windows 10-omgeving en in de hoop dat je basiskennis hebt over angular en firebase.

Installeer node.js en NPM op Windows

Ga eerst naar de officiële website van Node.js node.js en download de nieuwste versie van node.js, node is een runtime-omgeving om alle javascript-codes uit te voeren. NPM staat voor node package manager die je helpt om alle andere benodigde software te installeren via de opdrachtregeltool, dat is het basisidee over het knooppunt en NPM als je dieper wilt gaan, er zijn talloze websites en video's waar je meer kennis kunt opdoen over node. (Zorg ervoor dat u node.js globaal op uw computer hebt geïnstalleerd).

controleer of je node succesvol hebt geïnstalleerd voordat je verder gaat.

Hoekig installeren

Open uw opdrachtregelprogramma en voer onderstaande opdracht uit, npm install -g @angular/cli

zorg er nu voor dat je angular met succes hebt geïnstalleerd, je kunt meer leren over angular voor deze tutorial angular officiële website.

Stap 2: Stel uw projectstructuur in

Ga naar waar je je project wilt maken, voor de mijne heb ik D:\Angular-Projects op deze locatie gebruikt. Open de opdrachtregelprompt op die locatie. Typ onderstaande opdracht.

ng nieuw landbouwmonitoringsysteem

dan zal hoekig alle noodzakelijke dingen creëren die we in onze front-end willen hebben. voordat we frontend en backend met elkaar verbonden. laten we een beetje leren over hoekig en vuurbasis.

hoekig

Laten we het hebben over hoe de typische webarchitectuur eruit ziet, er is een front-end of client-side back-end of server-side, client-side betekent dat het is waar de HTML, CSS bevat, maar in hoekig hoeven we geen aparte webpagina's te maken voor onze bevat zoals home.html, about.hml, index.html…etc. er is slechts één enkele pagina voor de hele applicatie, het is index.html wanneer de gebruiker door andere pagina's gaat of andere bevat index.html wordt weergegeven met de inhoud van die pagina's die html- en css-weergave van de bepaalde pagina betekenen. dus onze hele applicatie bevat slechts één enkele.html-pagina. Dit is wat we SPA noemden. Dus laten we onze applicatie maken. open de CMD in hetzelfde directorytype onder de opdracht.

ng component home genereren.

dit genereert de inhoud van uw startpagina, vervolgens ziet u een home.ts-bestand en home.html-bestand en home.css in het home.html-bestand waar u gaat definiëren hoe uw startpagina structuur en in de home. css waar u uw stijlen voor de startpagina gaat toevoegen, en ten slotte home.ts-bestand waar u uw typoscript of javascript-code gaat coderen om met onze backend te werken.

Stap 3: Bootstrap 4. installeren

Zoals we in de vorige stap hebben besproken, hebben we nu ons project stap en nu hebben we een duidelijk idee over hoe de hoek werkt. nu gaan we voor het stylingdoel bootstrap 4 gebruiken om bootstrap te installeren naar ons projecttype onder de opdracht in het projectpad.

npm installeer bootstrap@3

nu hoef je je geen zorgen te maken over hoe we onze webpagina's kunnen structureren, bootstrap zal het doen.

Stap 4: Routes definiëren

In ons IOT-project gaan we header, footer, temperatuur, vochtigheid, Co2-percentage, vocht van de bodem verzamelen. dus we gaan 4 webpagina's maken, wat betekent dat we in hoekig 4 componenten gaan maken voor elk van deze indexen.

importeer hoekroutermodule in de AppModule-component.

definieer de routes in een apart bestand.

const routes: Routes = [{ pad: 'first-component', component: HomeComponent}, { pad: 'tweede component', component: HumiComponent},];

voeg deze coderegels toe aan de importtag in AppMoodule.

@NgModule({ importeert: [RouterModule.forRoot(routes)], exporteert: [RouterModule] })

Laten we de bootstrap-navigatiestreepjescode toevoegen aan ons header.html-bestand en onze componenten koppelen,

Stap 5: Firebase

Firebase is een van de coolste services die Google aan hun gebruikers biedt. Dus een van de functies die we voor dit project hebben gebruikt, is de realtime database en hosting van Firebase. laten we een firebase-account maken en ons project verbinden met de realtime database van firebase.

stap 01: Log in op uw gamil-account

stap 02: typ firebase console in je zoekbalk

stap 03: nu ben je klaar.

Stap 6: Firebase in Angular installeren

Om met firebase te werken, hebben we die helpende bibliotheek geïnstalleerd of toegevoegd om firebase en hoekig met elkaar te verbinden. ga naar je projectpad en open CMD en typ onderstaande code.

npm installeer firebase @angular/fire --save

Stap 7: Ons hoekproject verbinden met Firebase

nu moeten we ons project toevoegen aan firebase. druk op projectpictogram toevoegen aan uw firebase-account en geef een projectnaam die u leuk vindt en ga verder met andere twee totdat u het blauwe mooie dashboard van uw firebase-account ziet, u kunt zien dat in de linkerkolom we de volledige lijst met firebase kunnen zien diensten, zodat we elk van deze diensten kunnen gebruiken. nu is alles klaar om te gaan. voeg in je console een app toe om aan de slag te gaan en klik op het pictogram. om alle configuratiedetails te krijgen om onze hoekige applicatie te verbinden met firebase-account. Deze details zijn uniek voor ons project. kopieer nu die details en ga naar je hoekproject, zoek de environment.ts voeg onderstaande code toe en plak die details daar.

export const omgeving = {

productie: waar, vuurbasis: {

uw configuratiegegevens hier…

}

};

en voeg ook onderstaande codes toe aan de app.module.ts

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

Stap 8: NgxCharts-bibliotheek installeren in uw hoekproject

Ga naar het projectpad zoals we in de vorige stappen hebben gedaan, typ onderstaande code in je CMD.

npm ik @swimlane/ngx-charts --save

NgxChart Officiële site ga naar deze site en pak de grafiek die je wilt. Ik gaf de voorkeur met lijndiagram. ga naar deze url en pak de code en voeg deze toe aan de bijbehorende componenten.

Stap 9: Maak een serviceklasse en realtime database

Ga naar de projectmap en open CMD en typ een geldig pad en de gewenste klassenaam voor de service samen met de opdracht ng Genereer. Voordat we ingaan op de code, wil ik een klein idee geven over de realtime database van Firebase. Het is niet zoals elke andere relationele modeldatabase. We kunnen geen tabelstructuur zien in deze verscheidenheid aan databases. Dit wordt NOSQL-database genoemd, we kunnen een tekstbasis of documentbasisgegevensstructuur zien. Dat heet JSON, dus als we gegevens in zo'n database willen opslaan, moeten we die doorgeven als JSON-objecten. In de bovenstaande afbeelding kunt u zien dat er in onze database een knooppunt of rand is met de naam apparaten, en onder dat knooppunt bevindt zich een ander knooppunt met de naam DeviceA en onder dat knooppunt kunt u boven elke index zien zoals vochtigheid, temperatuur … enz. onder de Hum-node kunt u de senorgegevens zien die periodiek zijn verzameld.

asynchrone getData() {

dit.items = ;

retourneer nieuwe belofte ((oplossen) => {

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

snapshot.forEach(element => {

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

deze.items.push({

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

});

}

});

oplossen (dit.items);

});

});

}

dit is de code van de serviceklasse om toegang te krijgen tot de gegevens die zijn opgeslagen onder het hum-knooppunt in de database, het enige dat u hoeft te doen is deze klasse getData()-functie aan te roepen waar u uw grafiek wilt vullen.

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

deze.multi = [{

naam: '%', serie: deze.items

}];

}

Hier binnen onze componentklasse ngOnInit-methode hebben we onze service de multi-array genoemd, die de array is die we de waarden voor de grafiek moeten doorgeven.

Stap 10: Stel uw project samen

Ga naar je projectmap en open CMD en typ ng server, dan wordt alle Typescript-code omgezet in javascript. en typ de url die de CMD u gaat vragen, voor het bovenstaande project https://localhost:4200/home en u bent klaar.