LoRa- ի վրա հիմնված գյուղատնտեսության տեսողական մոնիթորինգի համակարգ Iot - Նախագծված դիմումի ձևավորում Firebase- ի և անկյունայինի միջոցով. 10 քայլ

2024 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2024-01-30 09:45

Նախորդ գլխում մենք խոսում ենք այն մասին, թե ինչպես են սենսորները աշխատում loRa մոդուլի հետ ՝ հրակայուն բազայի Realtime տվյալների բազան համալրելու համար, և մենք տեսանք շատ բարձր մակարդակի դիագրամ, թե ինչպես է աշխատում մեր ամբողջ նախագիծը: Այս գլխում մենք կխոսենք այն մասին, թե ինչպես կարող ենք այդ տվյալները համալրել վեբ ծրագրում:

Քայլ 1: Տեղադրեք անկյունային ձեր համակարգչում

Angular- ը javascript- ի (որն իրականում տպագիր է) վրա հիմնված շրջանակներից մեկն է, որը հիմնականում օգտագործվում է ծրագրային ապահովման ոլորտում, քանի որ մենք օգտագործում ենք firebase- ը որպես մեր հետնապահ (backend որպես սերվեր): Այսպիսով, եկեք տեսնենք, թե ինչպես զրոյից տեղադրել բոլոր անհրաժեշտները:

հաշվի առեք, որ այս ձեռնարկը հիմնված է Windows 10 միջավայրի վրա և հուսով եք, որ հիմնական գիտելիքներ ունեք անկյունային և բուխարիի մասին:

Տեղադրեք node.js և NPM պատուհանների վրա:

Նախևառաջ գնացեք Node.js պաշտոնական կայք ՝ node.js և ներբեռնեք node.js- ի վերջին տարբերակը, node- ը գործարկման միջավայր է ՝ բոլոր javascript կոդերը գործարկելու համար: NPM- ը նշանակում է հանգույցների փաթեթի կառավարիչ, որն օգնում է ձեզ տեղադրել մյուս բոլոր անհրաժեշտ ծրագրակազմը հրամանի տողի միջոցով, դա հանգույցի և NPM- ի հիմնական գաղափարն է, եթե ցանկանում եք ավելի խորանալ, կան բազմաթիվ կայքեր և տեսանյութեր, որոնցով կարող եք ավելի շատ գիտելիքներ ձեռք բերել: հանգույցի մասին: (Համոզվեք, որ ձեր համակարգիչը գլոբալ կերպով տեղադրել եք node.js- ը):

խնդրում ենք ստուգել, թե արդյոք հաջողությամբ տեղադրել եք հանգույցը առաջ գնալուց առաջ:

Տեղադրեք Angular:

Բացեք ձեր հրամանի տողի գործիքը և գործարկեք հրամանի ներքևում, npm տեղադրել -g @angular/cli

այժմ համոզվեք, որ դուք հաջողությամբ տեղադրել եք անկյունագիծը, կարող եք ավելին իմանալ անկյունայինի մասին այս ձեռնարկի համար անկյունային պաշտոնական վեբ կայքի համար:

Քայլ 2: Ստեղծեք ձեր ծրագրի կառուցվածքը

Գնացեք այնտեղ, որտեղ ցանկանում եք ստեղծել ձեր նախագիծը, իմի համար ես օգտագործել եմ D: / Angular- Նախագծում է այս վայրը: Բացեք հրամանի տողի հուշումը այդ վայրում: Մուտքագրեք ստորև նշված հրամանը:

գյուղատնտեսության մոնիտորինգի նոր համակարգ

ապա անկյունայինը կստեղծի բոլոր անհրաժեշտ բաները, որոնք մենք ցանկանում ենք ունենալ մեր առջևի հատվածում: նախքան մենք միացնեինք frontend- ը և backend- ը: եկեք մի փոքր սովորենք անկյունային և բուխարիի մասին:

Անկյունային

Եկեք խոսենք այն մասին, թե ինչ տեսք ունի տիպիկ վեբ ճարտարապետությունը, կա առջևի կամ հաճախորդի կողմի հետնամաս կամ սերվերի կողմ, հաճախորդի կողմից նշանակում է, որ այնտեղ է, որտեղ պարունակում է ամբողջ HTML- ը, CSS- ը, բայց անկյունային տեսանկյունից մենք չպետք է ստեղծենք մեր բովանդակության համար հատուկ վեբ էջեր: ինչպես, home.html, about.hml, index.html… և այլն: ամբողջ դիմումի համար կա միայն մեկ էջ, այն ինդեքս է: Այսպիսով, մեր ամբողջ դիմումը պարունակում է միայն մեկ.html էջ: Սա այն է, ինչ մենք անվանում էինք SPA: Այսպիսով, եկեք ստեղծենք մեր ծրագիրը: բացեք CMD- ն նույն դիրեկտորիայի ներքևի հրամանում:

ng առաջացնում բաղադրիչ տուն:

սա կառաջացնի ձեր գլխավոր էջի պարունակությունը, այնուհետև home.html ֆայլում կտեսնեք home.ts ֆայլ և home.html ֆայլ և home.css, որտեղ դուք որոշելու եք, թե ինչպես է ձեր գլխավոր էջի կառուցվածքը և տանը: css, որտեղ դուք մտադիր եք ավելացնել ձեր ոճերը գլխավոր էջի համար, և վերջապես home.ts ֆայլը, որտեղ դուք պատրաստվում եք կոդավորել ձեր գրամեքենայի կամ javascript ծածկագիրը ՝ մեր հետևի հետ աշխատելու համար:

Քայլ 3: Տեղադրեք Bootstrap 4

Ինչպես մենք քննարկեցինք նախորդ քայլին, այժմ մենք քայլ ենք անում մեր նախագծի վրա, և այժմ մենք հստակ պատկերացում ունենք, թե ինչպես է աշխատում անկյունը: այժմ ոճավորման նպատակով մենք կօգտագործենք bootstrap 4 ՝ նախագծի ուղու ներքևի հրամանի ներքևում գտնվող bootstrap- ը տեղադրելու համար:

npm տեղադրեք bootstrap@3

այժմ պետք չէ անհանգստանալ, թե ինչպես կարող ենք կառուցել մեր վեբ էջերը, bootstrap- ը դա կանի:

Քայլ 4: Երթուղիների որոշում

IOT նախագծում մենք պատրաստվում ենք հավաքել վերնագիր, ստորոտ, ջերմաստիճան, խոնավություն, Co2 տոկոս, հողի խոնավություն: Այսպիսով, մենք պատրաստվում ենք ստեղծել 4 վեբ էջ, ինչը նշանակում է անկյունային, մենք կստեղծենք 4 բաղադրիչ այս ինդեքսներից յուրաքանչյուրի համար:

ներմուծեք անկյունային երթուղիչի մոդուլ AppModule բաղադրիչում:

սահմանել երթուղիները առանձին ֆայլում:

const երթուղիներ. Երթուղիներ = [{path: 'first-component', component: HomeComponent}, {ուղի ՝ «երկրորդ բաղադրիչ», բաղադրիչ ՝ HumiComponent},];

ավելացնել այս տողերը ծածկագրի ներսում ներմուծման պիտակի մեջ AppMoodule- ում:

@NgModule ({ներմուծում ՝ [RouterModule.forRoot (երթուղիներ)], արտահանում ՝ [RouterModule]})

Եկեք ավելացնենք bootstrap նավիգացիոն շտրիխ մեր header.html ֆայլի ներսում և կապենք մեր բաղադրիչները,

Քայլ 5: Firebase

Firebase- ը ամենաթեժ ծառայություններից մեկն է, որը Google- ը մատուցում է իրենց օգտվողներին: Այսպիսով, այս նախագծի համար օգտագործված առանձնահատկություններից մեկը firebase- ի իրական ժամանակի տվյալների բազան և հոստինգն է: եկեք ստեղծենք firebase հաշիվ և միացնենք մեր նախագիծը firebase իրական ժամանակի տվյալների բազային:

քայլ 01: Մուտք գործեք ձեր gamil հաշիվ

քայլ 02. մուտքագրեք firebase վահանակ ձեր որոնման տողում

քայլ 03: այժմ դուք ավարտված եք:

Քայլ 6: Տեղադրեք Firebase- ը անկյունայինում

Firebase- ի հետ աշխատելու համար մենք պետք է տեղադրենք կամ ներառենք այն օգնական գրադարանը `firebase- ն ու անկյունայինը միացնելու համար: գնացեք ձեր ծրագրի ուղին և բացեք CMD և մուտքագրեք ներքևի ծածկագիրը:

npm տեղադրել firebase @angular/fire -փրկել

Քայլ 7: Միացրեք մեր անկյունային նախագիծը Firebase- ի հետ:

այժմ մենք պետք է մեր նախագիծը ավելացնենք firebase- ում: սեղմեք ավելացնել ծրագրի պատկերակը ձեր firebase հաշվի վրա և տվեք ծրագրի անունը, որը ձեզ դուր է գալիս և շարունակեք ևս երկուսը, մինչև չտեսնեք ձեր firebase հաշվի այդ կապույտ գեղեցիկ վահանակը, կարող եք տեսնել, որ ձախ կողմի սյունակում մենք կարող ենք տեսնել firebase- ի ամբողջ ցուցակը ծառայություններ, այնպես որ մենք կարող ենք օգտագործել այս ծառայություններից յուրաքանչյուրը: հիմա ամեն ինչ պատրաստ է գնալ: ձեր վահանակում սկսելու համար ավելացրեք ծրագիր և կտտացրեք պատկերակին: կազմաձևման բոլոր մանրամասները ստանալու համար ՝ մեր անկյունային հավելվածը firebase հաշվի հետ միացնելու համար: Այս մանրամասները եզակի են մեր նախագծին: այժմ պատճենեք այդ մանրամասները և գնացեք ձեր անկյունային նախագիծը, գտեք միջավայրը:

արտահանման կոնստրուկտոր = {

արտադրություն ՝ ճշմարիտ, բազան ՝ {

Ձեր կազմաձևման մանրամասներն այստեղ…

}

};

ինչպես նաև ավելացնել app.module.ts- ի ներքևի կոդերը

ներմուծում ՝ [AngularFireModule.initializeApp (environment.firebase),….],

Քայլ 8. NgxCharts գրադարանի տեղադրում ձեր անկյունային նախագծում

Գնացեք նախագծի ուղի, ինչպես դա արեցինք նախորդ քայլերում, ձեր CMD- ում մուտքագրեք ներքևի ծածկագիրը:

npm i @swimlane/ngx-charts-պահպանել

NgxChart Պաշտոնական կայքը գնացեք այս կայք և գրավեք ձեր ուզած գծապատկերը: Ես նախընտրեցի գծային գծապատկերով: անցեք այս url- ին և վերցրեք ծածկագիրը և ավելացրեք այն համապատասխան բաղադրիչներին:

Քայլ 9. Ստեղծեք ծառայության դաս և իրական ժամանակի տվյալների շտեմարան:

Գնացեք նախագծի թղթապանակ և բացեք CMD և մուտքագրեք ծառայության համար վավեր ուղի և նախընտրելի դասի անուն ՝ ng generate հրամանի հետ միասին: Նախքան ծածկագրին անցնելը, ես կցանկանայի քիչ պատկերացում կազմել firebase- ի իրական ժամանակի տվյալների բազայի մասին: Այն նման չէ այլ մոդելային տվյալների բազայի: Մենք չենք կարող տեսնել աղյուսակի կառուցվածքը տվյալների բազաների այս բազմազանության մեջ: Սա կոչվում է NOSQL տվյալների բազա, մենք կարող ենք տեսնել տեքստային բազա կամ փաստաթղթերի բազայի տվյալների կառուցվածք: Որը կոչվում է JSON, ուստի, եթե մենք ուզում էինք տվյալ տվյալների պաշարները ներսում պահել, մենք պետք է դրանք փոխանցենք JSON օբյեկտների նման: Վերոնշյալ նկարում դուք կարող եք տեսնել. Մեր տվյալների բազայում կա մի սարք, որը կոչվում է սարքեր, և այդ հանգույցի տակ կա մեկ այլ հանգույց, որը կոչվում է DeviceA, և այդ հանգույցի տակ կարող եք տեսնել յուրաքանչյուր ցուցանիշից վերև `խոնավություն, ջերմաստիճան և այլն: Hum- ի հանգույցի տակ կարող եք տեսնել սենսորային տվյալները, որոնք պարբերաբար հավաքվում էին:

async getData () {

this.items = ;

վերադարձնել նոր Խոստումը ((լուծել) => {

սա. տվյալների շտեմարան: ցուցակ (`/devices/$ {this.sessionService.get (" DeviceA ")}/$ {" Hum "}`).snapshotChanges (). բաժանորդագրվեք (snapshot => {

snapshot.forEach (տարր => {

եթե (! element.key.startsWith ('current_hum')) {

this.items.push ({

անուն ՝ պահ (element.payload.val () [«ամսաթիվ»], «ՏՏՏԱ-Մ-օր ժ. մմ. սս»): ձևաչափ («ՏՏՏԱ-ԱՄ-ՕՀ ժ. մմ.»), արժեքը ՝ տարր.պահանջ.val () ['արժեքը']

});

}

});

լուծում (this.items);

});

});

}

սա ծառայության դասի կոդ է ՝ տվյալների բազայում պահվող տվյալների համար մուտք գործելու համար, այն ամենը, ինչ դուք պետք է անեք, զանգահարեք այս դասի getData () գործառույթ, որտեղ ցանկանում եք լրացնել ձեր գծապատկերը:

async ngOnInit () {this.items = սպասեք this.humService.getData ();

this.multi = [{

Անուն: '%', շարք. this.items

}];

}

Այստեղ մեր բաղադրիչ դասի ngOnInit մեթոդի մեջ մենք կանչել ենք մեր ծառայությունը `համալրված բազմազան զանգված, որը զանգվածը, որը մենք պետք է փոխանցենք գրաֆիկի արժեքները:

Քայլ 10: Կազմեք ձեր նախագիծը

Գնացեք ձեր ծրագրի թղթապանակ և բացեք CMD և մուտքագրեք ng սերվեր, այնուհետև Typescript- ի ամբողջ ծածկագիրը կվերածվի javascript- ի: և մուտքագրեք այն հասցեն, որը CMD- ն ձեզ հուշելու է, վերը նշված ծրագրի համար https:// localhost: 4200/home, և դուք ավարտված եք: