Xây dựng giao diện Website hiển thị dữ liệu từ một cảm biến nhiệt độ và độ ẩm.

Xây dựng giao diện Website hiển thị dữ liệu từ một cảm biến nhiệt độ và độ ẩm.Xây dựng giao diện Website hiển thị dữ liệu từ một cảm biến nhiệt độ và độ ẩm.Xây dựng giao diện Website hiển thị dữ liệu từ một cảm biến nhiệt độ và độ ẩm.Xây dựng giao diện Website hiển thị dữ liệu từ một cảm biến nhiệt độ và độ ẩm.Xây dựng giao diện Website hiển thị dữ liệu từ một cảm biến nhiệt độ và độ ẩm.

HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG KHOA KỸ THUẬT ĐIỆN TỬ BÁO CÁO BÀI TẬP LỚN MÔN HỌC: MẠNG CẢM BIẾN Đề tài: Xây dựng giao diện Website hiển thị liệu từ cảm biến nhiệt độ độ ẩm Giảng viên hướng dẫn Nhóm lớp học Nhóm tập lớn Thành viên nhóm : Trần Thị Thanh Thủy : 01 : 06 : Nguyễn Quang Hưng - B20DCDT098 : Trần Quang Hữu - B20DCDT100 : Đặng Ngọc Khánh - B20DCDT108 : Nguyễn Đăng Khoa - B20DCDT110 : Đỗ Trung Kiển - B20DCDT105 Hà Nội - 2023 HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG KHOA KỸ THUẬT ĐIỆN TỬ BÁO CÁO BÀI TẬP LỚN MÔN HỌC: MẠNG CẢM BIẾN Đề tài: Xây dựng giao diện Website hiển thị liệu từ cảm biến nhiệt độ độ ẩm Giảng viên hướng dẫn Nhóm lớp học Nhóm tập lớn Thành viên nhóm : Trần Thị Thanh Thủy : 01 : 06 : Nguyễn Quang Hưng - B20DCDT098 : Trần Quang Hữu - B20DCDT100 : Đặng Ngọc Khánh - B20DCDT108 : Nguyễn Đăng Khoa - B20DCDT110 : Đỗ Trung Kiển - B20DCDT105 Hà Nội - 2023 BẢNG PHÂN CÔNG CÔNG VIỆC Họ tên Nhiệm vụ Đánh giá Nguyễn Quang Hưng (Nhóm trưởng) Trần Quang Hữu Đặng Ngọc Khánh Nguyễn Đăng Khoa Đỗ Trung Kiển - Tìm hiểu Front-end - Tìm hiểu Back-end - Xây dựng Web Dashboard - Xây dựng Web Server - Tìm hiểu giao thức MQTT - Xây dựng MQTT Broker - Tìm hiểu Front-end - Xây dựng Web Dashboard - Tìm hiểu MySQL - Xây dựng Database - Tìm hiểu vi điều khiển ESP32 - Tìm hiểu cảm biến DHT11 - Xây dựng phần cứng Hồn thành cơng việc Hồn thành cơng việc Hồn thành cơng việc Hồn thành cơng việc Hồn thành cơng việc NHẬN XÉT CỦA GIẢNG VIÊN MỤC LỤC BẢNG PHÂN CÔNG CÔNG VIỆC NHẬN XÉT CỦA GIẢNG VIÊN .2 MỤC LỤC DANH MỤC HÌNH ẢNH LỜI MỞ ĐẦU .8 CHƯƠNG 1: TỔNG QUAN VỀ IOT, WEBSITE VÀ GIAO DIỆN IOT 1.1: Khái niệm IoT 1.1.1: Định nghĩa 1.1.2: IoT kỹ thuật 10 1.1.3: Đặc tính hệ thống IoT 10 1.1.4: Yêu cầu hệ thống IoT 11 1.1.5: Mơ hình hệ thống IoT 12 1.2: Khái niệm Website 13 1.2.1: Định nghĩa .13 1.2.2: Phân loại 14 1.3: Khái niệm giao diện IoT 16 CHƯƠNG 2: KIẾN TRÚC WEBSITE VÀ .17 CÔNG NGHỆ SỬ DỤNG 17 2.1: Thiết kế kiến trúc Website 17 2.2: Giao thức MQTT 17 2.2.1: Khái niệm 17 2.2.2: Mục đích 18 2.2.3: MQTT Broker MQTT Client 18 2.2.4: Cách thức hoạt động giao thức MQTT 20 2.2.5: Nguyên tắc hoạt động MQTT 21 2.2.6: Tầm quan trọng giao thức MQTT 21 2.2.7: Một số ứng dụng MQTT triển khai 22 2.3: Ngôn ngữ JavaScript Node.js .22 2.3.1: Ngôn ngữ JavaScript 22 2.3.2: Node.js .24 2.4: Hệ quản trị sở liệu MySQL 27 2.4.1: Khái niệm 27 2.4.2: Thuật ngữ thường gặp MySQL 28 2.4.3: Ưu, nhược điểm MySQL 28 2.4.4: Phương thức hoạt động MySQL 29 2.4.5: Quy trình thiết kế sở liệu 30 CHƯƠNG 3: XÂY DỰNG HỆ THỐNG PHẦN CỨNG, 31 MQTT BROKER, CƠ SỞ DỮ LIỆU VÀ GIAO DIỆN .31 WEB DASHBOARD 31 3.1: Xây dựng hệ thống phần cứng 31 3.1.1: Vi điều khiển ESP32 31 3.1.2: Cảm biến nhiệt độ, độ ẩm DHT11 33 3.1.3: Chương trình thu thập gửi liệu cảm biến 35 3.2: Xây dựng MQTT Broker 36 3.2.1: HiveMQ MQTT Broker 36 3.2.2: Tạo MQTT Broker 37 3.3: Xây dựng sở liệu 37 3.3.1: Phần mềm XAMPP 37 3.3.2: Tạo sở liệu 38 3.4: Xây dựng giao diện Web Dashboard 39 3.4.1: Xây dựng giao diện Website hiển thị giá trị cảm biến 39 3.4.2: Xây dựng giao diện Website hiển thị liệu thu thập .41 CHƯƠNG 4: SẢN PHẨM THỰC TẾ, KIỂM THỬ VÀ 42 KẾT LUẬN .42 4.1: Sản phẩm thực tế .42 4.1.1: Phần cứng 42 4.1.2: Giao diện Web Dashboard .42 4.2: Kiểm thử 43 4.2.1: Kiểm thử phần cứng 43 4.2.2: Kiểm thử giao diện Web Dashboard 44 4.3: Kết luận 44 4.3.1: Kết đạt 44 4.3.2: Những hạn chế tồn .44 4.3.3: Phương hướng phát triển 45 TÀI LIỆU THAM KHẢO 46 DANH MỤC HÌNH ẢNH Số Tên hình ảnh Trang Hình 1: Kết nối vạn vật Hình 2: Giao tiếp hệ thống IoT 10 Hình 3: Mơ hình hệ thống IoT 13 Hình 4: Mơ hình Website 13 Hình 5: Mơ hình trang web 14 Hình 6: Mơ hình Website tĩnh 15 Hình 7: Mơ hình Website động 15 Hình 8: Một số IoT Dashboard 16 Hình 9: Kiến trúc Website 17 10 Hình 10: Giao thức MQTT 18 11 Hình 11: MQTT Broker 18 12 13 Hình 12: Mơ hình giao thức MQTT Hình 13: Mã JavaScript dùng để hiển thị danh sách ngày tuần 20 23 14 Hình 14: Node.js 25 15 Hình 15: MySQL 27 16 Hình 16: Kiến trúc MySQL 29 17 Hình 17: KIT NodeMCU-ESP32 31 18 Hình 18: Sơ đồ chân KIT ESP32 33 19 Hình 19: Cảm biến DHT11 33 20 Hình 20: Điện trở nhiệt NTC 34 21 Hình 21: Cảm biến độ ẩm 34 22 23 Hình 22: Sơ đồ chân cảm biến DHT11 Hình 23: Chương trình thu thập gửi liệu cảm biến 35 35 24 Hình 24: HiveMQ MQTT Broker 36 25 Hình 25: Giao diện HiveMQ Cloud 37 26 Hình 26: Phần mềm XAMPP 38 27 Hình 27: Cơ sở liệu 38 28 Hình 28: Front-end Website 39 29 Hình 29: Các module Node.js sử dụng 40 30 Hình 30: Kỹ thuật AJAX 41 31 Hình 31: Sản phẩm phần cứng 42 32 33 34 Hình 32: Giao diện Website hiển thị giá trị cảm biến Hình 33: Giao diện Website hiển thị liệu thu thập Hình 34: Cơ sở liệu lưu trữ giá trị cảm biến thu thập 42 43 43 LỜI MỞ ĐẦU Trong lịch sử phát triển loài người, nhân loại đạt thành tựu khoa học công nghệ đáng kinh ngạc Từ việc tạo công cụ đá để săn bắt, hái lượm, việc nghiên cứu, chế tạo vi mạch tích hợp với kích thước siêu nhỏ, chứa bên hàng tỉ bóng bán dẫn, người minh chứng cho sức mạnh tri thức, sáng tạo Hiện nay, chứng kiến phát triển nhanh bao giờ hết khoa học công nghệ, đặc biệt lĩnh vực trí tuệ nhân tạo, thực tế ảo, điện toán đám mây, Internet of Things, việc áp dụng thành tựu khoa học lĩnh vực, đời sống làm thay đổi hoàn toàn cách loài người sinh sống, làm việc tương tác với Trong số lĩnh vực tiêu biểu đó, khơng thể khơng nhắc đến phát triển, tầm quan trọng Internet of Things, hay Internet vạn vật - lĩnh vực tạo hệ thống thiết bị thông minh kết nối với với Internet, có khả thu thập, chia sẻ xử lý liệu cách tự động, nhanh chóng xác Nhờ có hệ thống IoT, thu thập liệu môi trường thông qua cảm biến để điều khiển, giám sát, vận hành thiết bị thơng minh sinh hoạt q trình sản xuất nơng nghiệp cơng nghiệp Chúng ta ứng dụng IoT vào hệ thống nhà thông minh, điều khiển thiết bị thông qua ứng dụng cài đặt điện thoại di động qua thơng số thiết lập, mơ hình trí tuệ nhân tạo, giúp nâng cao chất lượng sống người IoT ứng dụng vào nông nghiệp cơng nghiệp cịn giúp gia tăng sản lượng, chất lượng sản phẩm, tối ưu hố kinh phí sản xuất trình vận chuyển, Logistics Các mơ hình IoT đa phần sử dụng nhiều loại cảm biến khác nhau, với số lượng lớn Mỗi cảm biến lại liên tục đo trả giá trị theo thời gian thực Điều đặt toán cho doanh nghiệp hộ gia đình phải có giải pháp thu thập, theo dõi quản lý liệu cách hiệu Nhờ đời giao diện IoT (Web Dashboard), người dùng dễ dàng trực quan hố liệu thu thập từ cảm biến theo thời gian thực Để thuận tiện cho người sử dụng truy cập thiết bị khác nhau, phù hợp với lực nhóm, chúng em chọn đề tài “Xây dựng giao diện Website hiển thị liệu từ cảm biến nhiệt độ độ ẩm.” CHƯƠNG 1: TỔNG QUAN VỀ IOT, WEBSITE VÀ GIAO DIỆN IOT 1.1: Khái niệm IoT 1.1.1: Định nghĩa Công nghệ IoT, hay Internet Of Things hệ thống thiết bị trang bị nhiều loại cảm biến, có khả thu thập, xử lý trao đổi liệu thông tin với thiết bị hệ thống khác thông qua mạng Internet mạng truyền thông Bằng cách kết nối “Things” khái niệm vật lý lẫn mạng liên kết, công