LoRa დაფუძნებული ვიზუალური მონიტორინგის სისტემა სოფლის მეურნეობის Iot - ფრონტალური პროგრამის შემუშავება Firebase & Angular გამოყენებით: 10 ნაბიჯი

2024 ავტორი: John Day | [email protected]. ბოლოს შეცვლილი: 2024-01-30 10:15

წინა თავში ჩვენ ვსაუბრობთ იმაზე, თუ როგორ მუშაობენ სენსორები loRa მოდულთან, რათა შეავსონ firebase Realtime მონაცემთა ბაზა და ჩვენ ვნახეთ ძალიან მაღალი დონის დიაგრამა, თუ როგორ მუშაობს ჩვენი მთელი პროექტი. ამ თავში ჩვენ ვისაუბრებთ იმაზე, თუ როგორ შეგვიძლია შეავსოთ ეს მონაცემები ვებ პროგრამაში.

ნაბიჯი 1: დააინსტალირეთ Angular თქვენს კომპიუტერში

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

ახლა დარწმუნდით, რომ წარმატებით დააინსტალირეთ angular, შეგიძლიათ გაიგოთ მეტი angular ამ სამეურვეო კუთხის ოფიციალური ვებსაიტისთვის.

ნაბიჯი 2: შექმენით თქვენი პროექტის სტრუქტურა

გადადით იქ, სადაც გსურთ შექმნათ თქვენი პროექტი, ჩემით მე გამოვიყენე D: / Angular-პროექტები ამ ადგილას. გახსენით ბრძანების სტრიქონი იმ ადგილას. ჩაწერეთ ქვემოთ მითითებული ბრძანება.

სოფლის მეურნეობის მონიტორინგის ახალი სისტემა

მაშინ კუთხოვანი შექმნის ყველა საჭირო ნივთს, რაც გვსურს გვქონდეს ჩვენს ფრონტ-ენდში. სანამ ჩვენ შევაერთებდით frontend და backend ერთად. მოდით ვისწავლოთ ცოტა კუთხის და firebase- ის შესახებ.

კუთხოვანი

მოდით ვისაუბროთ იმაზე, თუ როგორ გამოიყურება ტიპიური ვებ – არქიტექტურა, არის frontend ან კლიენტის მხარის უკანა მხარე ან სერვერის მხარე, კლიენტის მხარე ნიშნავს იმას, რომ იქ არის ყველა HTML, CSS, მაგრამ კუთხეში ჩვენ არ გვჭირდება შევქმნათ კონკრეტული ვებ გვერდები ჩვენი შინაარსისთვის მოსწონს, home.html, about.hml, index.html… და ა.შ. მთელი განაცხადისათვის არის მხოლოდ ერთი გვერდი, ეს არის index.html როდესაც მომხმარებელი გადის სხვა გვერდებზე ან სხვა შეიცავს index.html აპირებს იმ გვერდების შემცველობას, რაც ნიშნავს გარკვეული გვერდის html და css ნახვას. ასე რომ, ჩვენი მთელი პროგრამა შეიცავს მხოლოდ ერთ.html გვერდს. ეს არის ის, რასაც ჩვენ SPA- ს ვუწოდებთ. მოდით შევქმნათ ჩვენი პროგრამა. გახსენით CMD იმავე დირექტორიაში, ბრძანების ქვემოთ.

ng შექმენით კომპონენტი სახლში.

ეს გამოიმუშავებს თქვენი მთავარი გვერდის შემცველობას, შემდეგ ნახავთ home.ts ფაილს და home.html ფაილს და home.css home.html ფაილს, სადაც თქვენ აპირებთ განსაზღვროთ თქვენი სახლის გვერდის სტრუქტურა და სახლი. 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]})

მოდით დავამატოთ ჩატვირთვის ნავიგაციის ბარი კოდი ჩვენს header.html ფაილში და დავუკავშიროთ ჩვენი კომპონენტები,

ნაბიჯი 5: Firebase

Firebase არის ერთ -ერთი ყველაზე მაგარი სერვისი, რომელსაც Google აწვდის მათ მომხმარებლებს. ამრიგად, ერთ -ერთი მახასიათებელი, რომელიც ჩვენ გამოვიყენეთ ამ პროექტში არის firebase რეალურ დროში მონაცემთა ბაზა და ჰოსტინგი. მოდით შევქმნათ firebase ანგარიში და დავუკავშიროთ ჩვენი პროექტი firebase რეალურ დროში მონაცემთა ბაზას.

ნაბიჯი 01: შედით თქვენს gamil ანგარიშზე

ნაბიჯი 02: ჩაწერეთ firebase კონსოლი თქვენს საძიებო ზოლში

ნაბიჯი 03: ახლა თქვენ დასრულდით.

ნაბიჯი 6: დააინსტალირეთ Firebase Angular- ში

სახანძრო ბაზასთან მუშაობისთვის ჩვენ გვაქვს დამონტაჟებული ან ჩართული ბიბლიოთეკა, რომელიც დაკავშირებულია სახანძრო და კუთხის ერთმანეთთან. გადადით თქვენი პროექტის გზაზე და გახსენით CMD და ჩაწერეთ ქვემოთ კოდი.

npm დააინსტალირეთ firebase @angular/fire -შენახვა

ნაბიჯი 7: ჩვენი კუთხის პროექტის დაკავშირება 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– ში. და ჩაწერეთ url, რომელიც CMD მოგთხოვთ, ზემოთ მოყვანილი პროექტისთვის https:// localhost: 4200/home და თქვენ დასრულებული ხართ.