Sistem Pemantauan Visual Berasaskan LoRa untuk Pertanian Iot - Merancang Aplikasi Berhadapan Menggunakan Firebase & Angular: 10 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:06

Pada bab sebelumnya kita membincangkan bagaimana sensor berfungsi dengan modul loRa untuk mengisi pangkalan data Firebase Realtime, dan kami melihat gambarajah tahap yang sangat tinggi bagaimana keseluruhan projek kami berfungsi. Dalam bab ini kita akan membincangkan bagaimana kita dapat mengisi data tersebut dalam aplikasi web.

Langkah 1: Siapkan Sudut di Komputer Anda

Angular adalah salah satu kerangka berasaskan javascript (yang sebenarnya adalah jenis tulisan) yang paling banyak digunakan dalam industri perisian, kerana kami menggunakan firebase sebagai backend kami (backend sebagai pelayan) satu-satunya perkara yang kami perlukan adalah frontend untuk memanipulasi backend ini. Oleh itu, mari kita lihat bagaimana memasang semua yang diperlukan ini dari awal.

pertimbangkan keseluruhan tutorial ini berdasarkan persekitaran windows 10 dan berharap anda mempunyai pengetahuan asas mengenai sudut dan firebase.

Pasang node.js dan NPM pada windows

Mula-mula pergi ke laman web rasmi Node.js node.js dan muat turun versi terbaru dari node.js, node adalah persekitaran masa untuk menjalankan semua kod javascript. NPM bermaksud pengurus pakej nod yang membantu anda memasang semua perisian lain yang diperlukan melalui alat baris perintah, itulah idea asas mengenai simpul dan NPM jika anda ingin pergi lebih mendalam terdapat banyak laman web dan video yang anda dapat memperoleh lebih banyak pengetahuan mengenai nod. (Pastikan anda memasang node.js secara global komputer anda).

sila periksa sama ada anda berjaya memasang nod sebelum anda meneruskannya.

Pasang Sudut

Buka alat baris arahan anda dan jalankan di bawah arahan, npm pasang -g @ angular / cli

sekarang pastikan bahawa anda berjaya memasang angular, anda boleh mengetahui lebih lanjut mengenai sudut untuk laman web rasmi sudut ini.

Langkah 2: Siapkan Struktur Projek Anda

Pergi ke tempat anda ingin membuat projek anda, kerana saya telah menggunakan D: / Angular-Projects lokasi ini. Buka arahan baris arahan di lokasi tersebut. Taipkan arahan di bawah.

ng sistem pemantauan pertanian baru

maka sudut akan mewujudkan semua perkara yang diperlukan yang kita mahu ada di bahagian depan kita. sebelum kita menghubungkan frontend dan backend bersama. mari belajar sedikit mengenai sudut dan firebase.

Sudut

Mari kita bincangkan bagaimana seni bina web yang khas, ada backend depan atau sisi pelanggan atau sisi pelayan, sisi pelanggan bermaksud ia adalah tempat di mana semua HTML, CSS mengandung, tetapi dari sudut kita tidak perlu membuat laman web sperate untuk isi kita seperti, home.html, about.hml, index.html … dll. hanya ada satu halaman untuk keseluruhan aplikasi itu adalah index.html ketika pengguna melalui halaman lain atau yang lain mengandungi index.html akan dibuat dengan isi halaman-halaman tersebut yang bermaksud html dan pandangan css dari halaman tertentu. jadi keseluruhan aplikasi kami hanya mengandungi satu halaman.html tunggal. Inilah yang kami namakan SPA. Oleh itu, mari buat aplikasi kami. buka CMD dalam arahan jenis yang sama di bawah arahan.

ng menjana rumah komponen.

ini akan menghasilkan isi dari halaman rumah anda, maka anda akan melihat fail home.ts dan home.html dan home.css dalam fail home.html di mana anda akan menentukan bagaimana struktur halaman rumah anda dan di rumah. css di mana anda akan menambahkan gaya anda untuk halaman utama, dan terakhir file home.ts di mana anda akan membuat kod taip atau javascript anda untuk berfungsi dengan backend kami.

Langkah 3: Memasang Bootstrap 4

Seperti yang telah kita bincangkan pada langkah sebelumnya sekarang kita telah melangkah projek kita dan sekarang kita mempunyai idea yang jelas tentang bagaimana sudut berfungsi. sekarang untuk tujuan penggayaan kami akan menggunakan bootstrap 4, untuk memasang bootstrap ke jenis projek kami di bawah perintah di jalan projek.

npm pasang bootstrap @ 3

sekarang anda tidak perlu bimbang bagaimana kami dapat menyusun laman web kami, bootstrap akan melakukan perkara tersebut.

Langkah 4: Menentukan Laluan

Dalam projek IOT keluar kita akan mengumpulkan header, footer, suhu, kelembapan, peratusan Co2, kelembapan tanah. jadi kita akan membuat 4 halaman web yang bermaksud dalam sudut kita akan membuat 4 komponen untuk setiap indeks ini.

import modul penghala sudut dalam komponen AppModule.

tentukan laluan dalam fail berasingan.

const const: Routes = [{path: 'first-komponen', komponen: HomeComponent}, {jalan: 'komponen kedua', komponen: HumiComponent},];

tambahkan baris kod ini di dalam tag import di AppMoodule.

@NgModule ({import: [RouterModule.forRoot (laluan)], eksport: [RouterModule]})

Mari tambahkan kod bar navigasi bootstrap di dalam fail header.html kami dan pautkan komponen kami,

Langkah 5: Firebase

Firebase adalah salah satu perkhidmatan terbaik yang disediakan oleh google kepada pengguna mereka. Oleh itu, salah satu ciri yang kami gunakan untuk projek ini adalah pangkalan data dan hosting firebase realtime. mari buat akaun firebase dan sambungkan projek kami ke pangkalan data masa nyata firebase.

langkah 01: Log masuk ke akaun gamil anda

langkah 02: taip konsol firebase di bar carian anda

langkah 03: sekarang anda sudah selesai.

Langkah 6: Pasang Firebase di Sudut

Untuk bekerja dengan firebase, kami telah memasang atau menyertakan perpustakaan yang membantu menghubungkan firebase dan sudut bersama-sama. pergi ke jalan projek anda dan buka CMD dan taip kod di bawah.

npm pasang firebase @ angular / fire - simpan

Langkah 7: Menghubungkan Projek Sudut Kami Dengan Firebase

sekarang kita perlu menambahkan projek kita ke firebase. tekan ikon tambah projek pada akaun firebase anda, dan berikan nama projek yang anda suka dan teruskan dua yang lain sehingga anda melihat papan pemuka biru yang indah dari akaun firebase anda, anda dapat melihat bahawa lajur sebelah kiri kami dapat melihat semua senarai firebase perkhidmatan, jadi kami boleh menggunakan setiap perkhidmatan ini. kini semuanya sudah siap untuk dilalui. di konsol anda tambahkan aplikasi untuk memulakan dan klik pada ikon. untuk mendapatkan semua butiran konfigurasi untuk menghubungkan aplikasi sudut kami dengan akaun firebase. Perincian ini unik untuk projek kami. sekarang salin butiran tersebut dan pergi ke projek sudut anda cari persekitaran. tambahkan kod di bawah dan tampal butiran tersebut di sana.

persekitaran const eksport = {

produksi: benar, firebase: {

maklumat konfigurasi anda di sini …

}

};

dan juga tambahkan kod di bawah dalam app.module.ts

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

Langkah 8: Memasang NgxCharts Library dalam Projek Sudut Anda

Pergi ke jalan projek seperti yang kita lakukan pada langkah sebelumnya, ketik kod di bawah di CMD anda.

npm i @ swimlane / ngx-charts - simpan

Laman rasmi NgxChart pergi ke laman web ini dan ambil carta yang anda mahukan. Saya lebih suka dengan carta garis. pergi ke url ini dan ambil kodnya dan tambahkan ke komponen yang sesuai.

Langkah 9: Buat Kelas Perkhidmatan dan Pangkalan Data Masa Nyata

Pergi ke folder projek dan buka CMD dan taipkan jalan yang sah dan nama kelas pilihan untuk perkhidmatan bersama dengan arahan ng menghasilkan. Sebelum kita memasuki kod, saya ingin memberikan sedikit idea mengenai pangkalan data masa nyata firebase. Ia tidak seperti pangkalan data model hubungan lain. Kami tidak dapat melihat struktur jadual dalam Varity pangkalan data ini, Ini disebut pangkalan data NOSQL kita dapat melihat struktur data asas teks atau asas dokumen. Yang disebut JSON, jadi jika kita ingin menyimpan data di dalam pangkalan data semacam itu, kita harus meneruskannya seperti Objek JSON. Dalam gambar di atas anda dapat melihat, Di pangkalan data kami terdapat simpul atau tepi yang disebut peranti, dan di bawah simpul itu terdapat nod lain yang disebut DeviceA dan di bawah nod itu, anda dapat melihat di atas setiap indeks seperti kelembapan, suhu..dll. di bawah simpul Hum anda dapat melihat data senor yang dikumpulkan secara berkala.

async getData () {

ini.item = ;

mengembalikan Janji baru ((tekad) => {

pangkalan data ini. list (`/ devices / $ {this.sessionService.get (" DeviceA ")} / $ {" Hum "}`).snapshotChanges (). melanggan (snapshot => {

snapshot.forEach (elemen => {

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

ini.items.push ({

nama: moment (element.payload.val () ['date'], 'YYYY-M-DD hh: mm: ss'). format ('YYYY-MM-DD hh: mm'), nilai: element.payload.val () ['nilai']

});

}

});

selesaikan (ini. item);

});

});

}

ini adalah kod kelas perkhidmatan untuk mengakses data yang disimpan di bawah node hum dalam pangkalan data, yang perlu anda lakukan ialah memanggil fungsi getData () kelas ini di mana anda ingin mengisi carta anda.

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

ini.multi = [{

nama: '%', siri: item ini

}];

}

Di sini di dalam kaedah komponen ngOnInit kelas kami, kami memanggil perkhidmatan kami mengisi pelbagai array yang mana array yang harus kami lalui nilai untuk grafik.

Langkah 10: Susun Projek Anda

Pergi ke folder projek anda dan buka CMD dan taip pelayan, Kemudian semua kod Typescript akan ditukar menjadi javascript. dan taip url yang akan diminta oleh CMD kepada anda, untuk projek di atas https:// localhost: 4200 / home dan anda sudah selesai.