ระบบตรวจสอบด้วยภาพที่ใช้ LoRa เพื่อการเกษตร Iot - การออกแบบ Fronted Application โดยใช้ Firebase & Angular: 10 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:02

ในบทที่แล้ว เราพูดถึงวิธีที่เซ็นเซอร์ทำงานกับโมดูล loRa เพื่อเติมฐานข้อมูลเรียลไทม์ของ firebase และเราเห็นไดอะแกรมระดับสูงมากว่าโปรเจ็กต์ทั้งหมดทำงานอย่างไร ในบทนี้เราจะพูดถึงวิธีที่เราสามารถเติมข้อมูลเหล่านั้นในเว็บแอปพลิเคชัน

ขั้นตอนที่ 1: ตั้งค่า Angular ในคอมพิวเตอร์ของคุณ

Angular เป็นหนึ่งในเฟรมเวิร์กที่ใช้จาวาสคริปต์ (ซึ่งจริง ๆ แล้วเป็น typescript) ที่ได้รับความนิยมมากที่สุดซึ่งส่วนใหญ่ใช้ในอุตสาหกรรมซอฟต์แวร์ เนื่องจากเราใช้ firebase เป็นแบ็กเอนด์ของเรา (แบ็กเอนด์เป็นเซิร์ฟเวอร์) สิ่งเดียวที่เราต้องการคือส่วนหน้าเพื่อจัดการแบ็กเอนด์นี้ มาดูวิธีการติดตั้งทั้งหมดที่จำเป็นตั้งแต่เริ่มต้น

พิจารณาบทช่วยสอนทั้งหมดนี้อิงตามสภาพแวดล้อมของ windows 10 และหวังว่าคุณจะมีความรู้พื้นฐานเกี่ยวกับเชิงมุมและ firebase

ติดตั้ง node.js และ NPM บน windows

ก่อนอื่นให้ไปที่เว็บไซต์อย่างเป็นทางการของ Node.js node.js และดาวน์โหลด node.js เวอร์ชันล่าสุด node เป็นสภาพแวดล้อมรันไทม์เพื่อเรียกใช้โค้ดจาวาสคริปต์ทั้งหมด NPM ย่อมาจาก node package manager ซึ่งช่วยให้คุณติดตั้งซอฟต์แวร์ที่จำเป็นอื่น ๆ ทั้งหมดผ่านเครื่องมือบรรทัดคำสั่ง นั่นคือแนวคิดพื้นฐานเกี่ยวกับโหนดและ NPM หากคุณต้องการเจาะลึกลงไป มีเว็บไซต์และวิดีโอมากมายที่คุณสามารถรับความรู้เพิ่มเติม เกี่ยวกับโหนด (ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง node.js ทั่วโลกในคอมพิวเตอร์ของคุณ)

โปรดตรวจสอบว่าคุณได้ติดตั้งโหนดสำเร็จก่อนที่จะดำเนินการต่อ

ติดตั้งเชิงมุม

เปิดเครื่องมือบรรทัดคำสั่งของคุณและเรียกใช้คำสั่งด้านล่าง

npm ติดตั้ง -g @angular/cli

ตอนนี้ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง angular สำเร็จแล้ว คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ angular สำหรับเว็บไซต์ทางการของ angular กวดวิชานี้

ขั้นตอนที่ 2: ตั้งค่าโครงสร้างโครงการของคุณ

ไปที่ที่คุณต้องการสร้างโครงการ สำหรับฉันฉันใช้ D:\Angular-Projects ตำแหน่งนี้ เปิดพรอมต์บรรทัดคำสั่งในตำแหน่งนั้น พิมพ์คำสั่งด้านล่าง

ระบบเฝ้าระวังการเกษตรแบบใหม่

จากนั้น angular จะสร้างสิ่งจำเป็นทั้งหมดที่เราต้องการมีในส่วนหน้าของเรา ก่อนที่เราจะเชื่อมต่อส่วนหน้าและส่วนหลังเข้าด้วยกัน มาเรียนรู้กันเล็กน้อยเกี่ยวกับเชิงมุมและฐานไฟกัน

เชิงมุม

มาพูดถึงลักษณะของสถาปัตยกรรมเว็บทั่วไปกัน มีฟรอนท์เอนด์หรือฝั่งไคลเอ็นต์หรือฝั่งเซิร์ฟเวอร์ ฝั่งไคลเอ็นต์หมายถึงเป็นที่ที่ HTML ทั้งหมด CSS มี แต่ในเชิงมุม เราไม่จำเป็นต้องสร้างหน้าเว็บแบบแยกส่วนสำหรับคอนเทนเนอร์ของเรา เช่น home.html, about.hml, index.html…เป็นต้น มีเพียงหน้าเดียวสำหรับแอปพลิเคชันทั้งหมด นั่นคือ index.html เมื่อผู้ใช้ไปยังหน้าอื่น ๆ หรือหน้าอื่น ๆ ที่มี index.html กำลังจะแสดงผลพร้อมกับมีหน้าเหล่านั้นซึ่งหมายถึงมุมมอง html และ css ของหน้าบางหน้า ดังนั้นแอปพลิเคชันทั้งหมดของเราจึงมีหน้า.html เพียงหน้าเดียว นี่คือสิ่งที่เราเรียกว่าสปา มาสร้างแอปพลิเคชันของเรากันเถอะ เปิด CMD ในไดเรกทอรีประเภทเดียวกันด้านล่างคำสั่ง

ng สร้างส่วนประกอบหลัก

สิ่งนี้จะสร้างโฮมเพจของคุณ จากนั้นคุณจะเห็นไฟล์ home.ts และไฟล์ home.html และ home.css ในไฟล์ home.html ที่คุณจะกำหนดโครงสร้างโฮมเพจของคุณและในโฮม css ที่คุณจะเพิ่มสไตล์ของคุณสำหรับโฮมเพจ และสุดท้ายคือไฟล์ home.ts ที่คุณจะเขียนโค้ดให้คุณพิมพ์โค้ด typescript หรือ javascript เพื่อทำงานกับแบ็กเอนด์ของเรา

ขั้นตอนที่ 3: การติดตั้ง Bootstrap 4

ดังที่เราได้กล่าวไปแล้วในขั้นที่แล้ว ตอนนี้เราได้ขั้นตอนของโปรเจ็กต์ของเราแล้ว และตอนนี้เรามีแนวคิดที่ชัดเจนแล้วว่าเชิงมุมทำงานอย่างไร ตอนนี้สำหรับจุดประสงค์ในการจัดแต่งทรงผม เราจะใช้ bootstrap 4 เพื่อติดตั้ง bootstrap ให้กับประเภทโครงการด้านล่างคำสั่งในเส้นทางของโครงการ

npm ติดตั้ง bootstrap@3

ตอนนี้คุณไม่ต้องกังวลว่าเราจะจัดโครงสร้างหน้าเว็บของเราอย่างไร bootstrap จะทำสิ่งนั้น

ขั้นตอนที่ 4: การกำหนดเส้นทาง

ในโครงการ IOT เราจะรวบรวมส่วนหัว ส่วนท้าย อุณหภูมิ ความชื้น เปอร์เซ็นต์ Co2 ความชื้นของดิน ดังนั้นเราจะสร้างหน้าเว็บ 4 หน้า ซึ่งหมายความว่าเราจะสร้าง 4 องค์ประกอบสำหรับแต่ละดัชนีเหล่านี้

นำเข้าโมดูลเราเตอร์เชิงมุมในองค์ประกอบ AppModule

กำหนดเส้นทางในไฟล์แยกต่างหาก

เส้นทาง const: เส้นทาง = [{ เส้นทาง: 'องค์ประกอบแรก', ส่วนประกอบ: HomeComponent}, { เส้นทาง: 'ส่วนประกอบที่สอง', ส่วนประกอบ: HumiComponent},];

เพิ่มบรรทัดโค้ดเหล่านี้ภายในแท็กนำเข้าใน AppMoodule

@NgModule ({ นำเข้า: [RouterModule.forRoot (เส้นทาง)] ส่งออก: [RouterModule] })

มาเพิ่มบาร์โค้ดการนำทางบูตสแตรปภายในไฟล์ header.html ของเราและเชื่อมโยงส่วนประกอบของเรา

ขั้นตอนที่ 5: Firebase

Firebase เป็นหนึ่งในบริการที่ยอดเยี่ยมที่สุดที่ Google มอบให้กับผู้ใช้ หนึ่งในคุณสมบัติที่เราใช้ในโปรเจ็กต์นี้คือฐานข้อมูลเรียลไทม์ของ firebase และโฮสติ้ง มาสร้างบัญชี firebase และเชื่อมต่อโครงการของเรากับฐานข้อมูลเรียลไทม์ของ firebase

ขั้นตอนที่ 01: เข้าสู่ระบบบัญชี gamil ของคุณ

ขั้นตอนที่ 02: พิมพ์คอนโซล firebase ในแถบค้นหาของคุณ

ขั้นตอนที่ 03: ตอนนี้คุณทำเสร็จแล้ว

ขั้นตอนที่ 6: ติดตั้ง Firebase ใน Angular

ในการทำงานกับ firebase เราได้ติดตั้งหรือรวมที่ช่วยให้ไลบรารีเชื่อมต่อ firebase และเชิงมุมเข้าด้วยกัน ไปที่เส้นทางโครงการของคุณและเปิด CMD แล้วพิมพ์รหัสด้านล่าง

npm ติดตั้ง firebase @angular/fire --save

ขั้นตอนที่ 7: เชื่อมต่อโครงการเชิงมุมของเรากับ Firebase

ตอนนี้เราต้องเพิ่มโครงการของเราลงใน firebase กดเพิ่มไอคอนโปรเจ็กต์บนบัญชี firebase ของคุณ และระบุชื่อโปรเจ็กต์ที่คุณชอบและดำเนินการต่ออีกสองรายการจนกว่าคุณจะเห็นแดชบอร์ดที่สวยงามสีน้ำเงินของบัญชี firebase ของคุณ คุณจะเห็นว่าคอลัมน์ด้านซ้ายเราจะเห็นรายการ firebase ทั้งหมด บริการต่างๆ เพื่อให้เราสามารถใช้บริการเหล่านี้ได้ ตอนนี้ทุกอย่างพร้อมที่จะไป ในคอนโซลของคุณให้เพิ่มแอปเพื่อเริ่มต้นและคลิกที่ไอคอน เพื่อรับรายละเอียดการกำหนดค่าทั้งหมดเพื่อเชื่อมต่อแอปพลิเคชันเชิงมุมของเรากับบัญชี firebase รายละเอียดเหล่านี้เป็นเอกลักษณ์ของโครงการของเรา ตอนนี้คัดลอกรายละเอียดเหล่านั้นและไปที่โครงการเชิงมุมของคุณ ค้นหา environment.ts เพิ่มโค้ดด้านล่างแล้ววางรายละเอียดเหล่านั้นที่นั่น

ส่งออกสภาพแวดล้อม const = {

การผลิต: จริง firebase: {

รายละเอียดการกำหนดค่าของคุณที่นี่…

}

};

และยังเพิ่มโค้ดด้านล่างใน app.module.ts

การนำเข้า: [AngularFireModule.initializeApp(environment.firebase), ….],

ขั้นตอนที่ 8: การติดตั้งไลบรารี NgxCharts ในโครงการเชิงมุมของคุณ

ไปที่เส้นทางของโครงการตามที่เราทำในขั้นตอนก่อนหน้านี้ พิมพ์โค้ดด้านล่างใน CMD ของคุณ

npm i @swimlane/ngx-charts --save

เว็บไซต์อย่างเป็นทางการของ NgxChart ไปที่ไซต์นี้แล้วคว้าแผนภูมิที่คุณต้องการ ฉันชอบแผนภูมิเส้น ไปที่ url นี้แล้วหยิบโค้ดแล้วเพิ่มลงในส่วนประกอบที่เกี่ยวข้อง

ขั้นตอนที่ 9: สร้างคลาสบริการและฐานข้อมูลแบบเรียลไทม์

ไปที่โฟลเดอร์โครงการและเปิด CMD แล้วพิมพ์เส้นทางที่ถูกต้องและชื่อคลาสที่ต้องการสำหรับบริการพร้อมกับคำสั่ง ng generate ก่อนที่เราจะพูดถึงโค้ด ฉันขอเสนอแนวคิดเล็กน้อยเกี่ยวกับฐานข้อมูลเรียลไทม์ของ firebase ไม่เหมือนกับฐานข้อมูลโมเดลเชิงสัมพันธ์อื่นๆ เราไม่เห็นโครงสร้างตารางในฐานข้อมูลที่หลากหลาย ซึ่งเรียกว่าฐานข้อมูล NOSQL เราสามารถเห็นโครงสร้างข้อมูลฐานข้อความหรือฐานข้อมูลเอกสาร ซึ่งเรียกว่า JSON ดังนั้นหากเราต้องการเก็บข้อมูลไว้ในฐานข้อมูลประเภทนั้น เราต้องส่งผ่านข้อมูลเหล่านั้นเหมือนกับ JSON Objects ในภาพด้านบนคุณจะเห็นว่า ในฐานข้อมูลของเรามีโหนดหรือขอบที่เรียกว่าอุปกรณ์ และภายใต้โหนดนั้นจะมีโหนดอื่นที่เรียกว่า DeviceA และภายใต้โหนดนั้น คุณจะเห็นแต่ละดัชนีด้านบน เช่น ความชื้น อุณหภูมิ.. เป็นต้น. ภายใต้โหนด Hum คุณสามารถดูข้อมูล senor ที่รวบรวมเป็นระยะ

async getData () {

this.items = ;

คืนสัญญาใหม่ ((แก้ไข) => {

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

snapshot.forEach (องค์ประกอบ => {

ถ้า (!element.key.startsWith('current_hum')) {

this.items.push({

ชื่อ: moment(element.payload.val()['date'], 'YYYY-M-DD hh:mm:ss').format('YYYY-MM-DD hh:mm'), ค่า: element.payload.val()['ค่า']

});

}

});

แก้ไข (this.items);

});

});

}

นี่คือรหัสคลาสบริการเพื่อเข้าถึงข้อมูลที่เก็บไว้ภายใต้โหนด hum ในฐานข้อมูล สิ่งที่คุณต้องทำคือเรียกใช้ฟังก์ชันคลาส getData() ที่คุณต้องการสร้างแผนภูมิของคุณ

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

this.multi = [{

ชื่อ: '%', ซีรีส์: this.items

}];

}

ที่นี่ภายในวิธีการคลาสคอมโพเนนต์ ngOnInit เราได้เรียกใช้บริการของเราที่มีหลายอาร์เรย์ซึ่งอาร์เรย์ที่เราควรส่งผ่านค่าสำหรับกราฟ

ขั้นตอนที่ 10: รวบรวมโครงการของคุณ

ไปที่โฟลเดอร์โครงการของคุณและเปิด CMD แล้วพิมพ์เซิร์ฟเวอร์ ng จากนั้นรหัส Typescript ทั้งหมดจะถูกแปลงเป็นจาวาสคริปต์ และพิมพ์ url ที่ CMD จะแจ้งให้คุณทราบสำหรับโครงการด้านบน https://localhost:4200/home และคุณทำเสร็จแล้ว