Hệ thống giám sát trực quan dựa trên LoRa cho nông nghiệp Iot - Thiết kế ứng dụng Fronted bằng Firebase & Angular: 10 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:30

Trong chương trước, chúng ta nói về cách các cảm biến đang hoạt động với mô-đun loRa để đưa vào cơ sở dữ liệu Thời gian thực của firebase và chúng ta đã thấy sơ đồ cấp rất cao về cách toàn bộ dự án của chúng ta đang hoạt động. Trong chương này, chúng ta sẽ nói về cách chúng ta có thể đưa những dữ liệu đó vào ứng dụng web.

Bước 1: Thiết lập Angular trong máy tính của bạn

Angular là một trong những khung công tác dựa trên javascript (thực ra là typecript) phổ biến nhất được sử dụng chủ yếu trong ngành công nghiệp phần mềm, vì chúng tôi sử dụng firebase làm chương trình phụ trợ (backend như một máy chủ), điều duy nhất chúng tôi cần là giao diện người dùng để thao tác với phần phụ trợ này. Vì vậy, hãy xem cách cài đặt tất cả những thứ cần thiết này từ đầu.

Hãy coi toàn bộ hướng dẫn này dựa trên môi trường windows 10 và hy vọng bạn có kiến thức cơ bản về angle và firebase.

Cài đặt node.js và NPM trên windows

Trước hết, hãy truy cập trang web chính thức của Node.js node.js và tải xuống phiên bản mới nhất của node.js, node là một môi trường thời gian chạy để chạy tất cả các mã javascript. NPM là viết tắt của trình quản lý gói nút giúp bạn cài đặt tất cả các phần mềm cần thiết khác thông qua công cụ dòng lệnh, đó là ý tưởng cơ bản về nút và NPM nếu bạn muốn đi sâu hơn, có rất nhiều trang web và video mà bạn có thể có thêm kiến thức về nút. (Đảm bảo rằng bạn đã cài đặt node.js trên toàn bộ máy tính của mình).

vui lòng kiểm tra xem bạn đã cài đặt thành công nút chưa trước khi tiếp tục.

Cài đặt Angular

Mở công cụ dòng lệnh của bạn và chạy lệnh bên dưới, npm install -g @ angle / cli

bây giờ hãy đảm bảo rằng bạn đã cài đặt angle thành công, bạn có thể tìm hiểu thêm về angle trên trang web chính thức của hướng dẫn angle này.

Bước 2: Thiết lập cấu trúc dự án của bạn

Đi đến nơi bạn muốn tạo dự án của bạn, đối với tôi, tôi đã sử dụng D: / Angular-Projects vị trí này. Mở dấu nhắc dòng lệnh ở vị trí đó. Gõ lệnh dưới đây.

hệ thống giám sát nông nghiệp mới

thì góc cạnh sẽ tạo ra tất cả những thứ cần thiết mà chúng ta muốn có trong giao diện người dùng của mình. trước khi chúng tôi kết nối giao diện người dùng và phụ trợ với nhau. chúng ta hãy tìm hiểu một chút về góc cạnh và cơ sở lửa.

Angular

Hãy nói về cách kiến trúc web điển hình trông như thế nào, có giao diện người dùng hoặc phụ trợ phía máy khách hoặc phía máy chủ, phía máy khách có nghĩa là nó là nơi chứa tất cả HTML, CSS, nhưng về góc độ chúng ta không phải tạo các trang web riêng cho phần chứa của chúng ta như, home.html, about.hml, index.html… vv. chỉ có một trang duy nhất cho toàn bộ ứng dụng đó là index.html khi người dùng đi qua các trang khác hoặc trang khác chứa index.html sẽ hiển thị với nội dung chứa các trang đó có nghĩa là chế độ xem html và css của trang nhất định. vì vậy toàn bộ ứng dụng của chúng tôi chỉ chứa một trang.html duy nhất. Đây là những gì chúng tôi gọi là SPA. Vì vậy, hãy tạo ứng dụng của chúng tôi. mở CMD trong cùng loại thư mục bên dưới lệnh.

ng tạo nhà thành phần.

điều này sẽ tạo ra phần chứa trang chủ của bạn, sau đó bạn sẽ thấy tệp home.ts và tệp home.html và home.css trong tệp home.html, nơi bạn sẽ xác định cách cấu trúc trang chủ và trong trang chủ. css nơi bạn sẽ thêm các kiểu của mình cho trang chủ và cuối cùng là tệp home.ts, nơi bạn sẽ viết mã cho bạn đoạn mã hoặc mã javascript để làm việc với chương trình phụ trợ của chúng tôi.

Bước 3: Cài đặt Bootstrap 4

Như chúng ta đã thảo luận ở bước trước, bây giờ chúng ta đã thực hiện dự án của mình và bây giờ chúng ta đã có ý tưởng rõ ràng về cách hoạt động của góc cạnh. bây giờ cho mục đích tạo kiểu, chúng ta sẽ sử dụng bootstrap 4, để cài đặt bootstrap cho loại dự án của chúng tôi dưới đây lệnh trong đường dẫn dự án.

npm cài đặt bootstrap @ 3

bây giờ bạn không phải lo lắng về cách chúng tôi có thể cấu trúc các trang web của mình, bootstrap sẽ làm điều đó.

Bước 4: Xác định các tuyến đường

Trong dự án IOT, chúng tôi sẽ thu thập đầu trang, chân trang, nhiệt độ, độ ẩm, tỷ lệ phần trăm Co2, độ ẩm của đất. vì vậy chúng tôi sẽ tạo 4 trang web có nghĩa là chúng tôi sẽ tạo 4 thành phần cho mỗi chỉ mục này.

nhập mô-đun bộ định tuyến góc trong thành phần AppModule.

xác định các tuyến đường trong tệp riêng biệt.

const route: Routes = [{path: 'first-component', component: HomeComponent}, {path: 'second-component', component: HumiComponent},];

thêm các dòng mã này vào bên trong thẻ nhập trong AppMoodule.

@NgModule ({nhập: [RouterModule.forRoot (các tuyến)], xuất: [RouterModule]})

Hãy thêm mã vạch điều hướng bootstrap bên trong tệp header.html của chúng tôi và liên kết các thành phần của chúng tôi,

Bước 5: Firebase

Firebase là một trong những dịch vụ thú vị nhất mà google đang cung cấp cho người dùng của họ. Vì vậy, một trong những tính năng mà chúng tôi đã sử dụng cho dự án này là lưu trữ và cơ sở dữ liệu thời gian thực firebase. hãy tạo tài khoản firebase và kết nối dự án của chúng tôi với cơ sở dữ liệu thời gian thực của firebase.

bước 01: Đăng nhập vào tài khoản gamil của bạn

bước 02: nhập bảng điều khiển firebase vào thanh tìm kiếm của bạn

bước 03: bây giờ bạn đã hoàn tất.

Bước 6: Cài đặt Firebase trong Angular

Để làm việc với firebase, chúng tôi đã cài đặt hoặc bao gồm thư viện trợ giúp đó để kết nối firebase và angle với nhau. chuyển đến đường dẫn dự án của bạn và mở CMD và nhập mã bên dưới.

npm cài đặt firebase @ angle / fire --save

Bước 7: Kết nối dự án Angular của chúng tôi với Firebase

bây giờ chúng ta phải thêm dự án của mình vào firebase. nhấn thêm biểu tượng dự án trên tài khoản firebase của bạn và đặt tên dự án bạn thích và tiếp tục hai tên khác cho đến khi bạn nhìn thấy bảng điều khiển màu xanh lam tuyệt đẹp của tài khoản firebase, bạn có thể thấy cột bên trái, chúng ta có thể xem danh sách tất cả firebase các dịch vụ, vì vậy chúng tôi có thể sử dụng từng dịch vụ này. bây giờ mọi thứ đã sẵn sàng để đi. trong bảng điều khiển của bạn, hãy thêm một ứng dụng để bắt đầu và nhấp vào biểu tượng. để có được tất cả các chi tiết cấu hình để kết nối ứng dụng góc cạnh của chúng tôi với tài khoản firebase. Những chi tiết này là duy nhất cho dự án của chúng tôi. bây giờ sao chép các chi tiết đó và đi đến dự án góc cạnh của bạn tìm môi trường. thêm mã bên dưới và dán các chi tiết đó vào đó.

export const môi trường = {

production: true, firebase: {

chi tiết cấu hình của bạn tại đây…

}

};

và cũng thêm các mã bên dưới bên trong app.module.ts

nhập khẩu: [AngularFireModule.initializeApp (environment.firebase),….],

Bước 8: Cài đặt Thư viện NgxCharts trong Dự án Angular của bạn

Đi tới đường dẫn dự án như chúng ta đã làm trong các bước trước, nhập mã bên dưới vào CMD của bạn.

npm i @ poollane / ngx-chart --save

Trang web chính thức của NgxChart hãy truy cập trang web này và lấy biểu đồ mà bạn muốn. Tôi thích với biểu đồ đường. truy cập url này và lấy mã và thêm nó vào các thành phần tương ứng.

Bước 9: Tạo một lớp dịch vụ và cơ sở dữ liệu thời gian thực

Đi tới thư mục dự án và mở CMD và nhập một đường dẫn hợp lệ và tên lớp ưu tiên cho dịch vụ cùng với lệnh ng create. Trước khi chúng ta đi vào mã, tôi muốn đưa ra một số ý tưởng nhỏ về cơ sở dữ liệu thời gian thực của firebase. Nó không giống như bất kỳ cơ sở dữ liệu mô hình quan hệ nào khác. Chúng ta không thể thấy cấu trúc bảng trong cơ sở dữ liệu Varity này, Đây được gọi là cơ sở dữ liệu NOSQL, chúng ta có thể thấy một cơ sở văn bản hoặc cấu trúc dữ liệu cơ sở tài liệu. Cái được gọi là JSON, vì vậy nếu chúng ta muốn lưu trữ dữ liệu bên trong trong loại cơ sở dữ liệu đó, chúng ta phải chuyển những cái đó giống như Đối tượng JSON. Trong hình trên, bạn có thể thấy, Trong cơ sở dữ liệu của chúng ta có một nút hoặc cạnh được gọi là thiết bị, và dưới nút đó có một nút khác được gọi là DeviceA và dưới nút đó, bạn có thể thấy phía trên mỗi chỉ số như độ ẩm, nhiệt độ..vv.. dưới nút Hum, bạn có thể xem dữ liệu senor được thu thập định kỳ.

async getData () {

this.items = ;

trả về Lời hứa mới ((giải quyết) => {

this.database. 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 () ['giá trị']

});

}

});

giải quyết (this.items);

});

});

}

đây là mã lớp dịch vụ để truy cập dữ liệu được lưu trữ dưới nút hum trong cơ sở dữ liệu, tất cả những gì bạn phải làm là gọi hàm getData () của lớp này nơi bạn muốn điền biểu đồ của mình.

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

this.multi = [{

Tên: '%', loạt: this.items

}];

}

Ở đây, bên trong phương thức ngOnInit lớp thành phần của chúng tôi, chúng tôi đã gọi dịch vụ của chúng tôi đã điền vào đa mảng mà mảng mà chúng tôi nên chuyển các giá trị cho đồ thị.

Bước 10: Biên dịch dự án của bạn

Đi tới thư mục dự án của bạn và mở CMD và nhập máy chủ, Sau đó, tất cả mã Typecript sẽ chuyển đổi thành javascript. và gõ url mà CMD sẽ nhắc bạn cho dự án trên https:// localhost: 4200 / home và bạn đã hoàn tất.