Đồ Án Về Ứng Dụng Quản Lý, Cảnh Báo Cháy Để Cảnh Báo Khi Phát Hiện Lửa.docx

back-end“1.Tải NodeJS Nếu Chưa Có” “Trước khi ta vào phần back-end hoặc front-end, ta cần phải tải Khi tải về xong, ta mở file vừa tải lên và cho chạy cài đặt Để kiểm tra ta đã có nodejs

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC HOA SEN KHOA CÔNG NGHỆ THÔNG TIN

Danh Mục Hình Ảnh 3

LỜI MỞ ĐẦU 4

I.Thiết Bị 5

1 yêu cầu thiết bị 5

2 Cách Cắm Thiết Bị 8

3 Yêu cầu chương trình, thư viện Arduino IDE 9

4.Code 11

II back-end 15

“1.Tải NodeJS Nếu Chưa Có” 15

2.TẠO “PROJECT” BẰNG PHẦN MỀM VISUAL STUDIO CODE 15

3.TẠO PROJECT VÀ DATABASE TRÊN MYSQL 18

4.Code 20

5 TEST API MÌNH VIẾT BẰNG POSTMAN 22

III Front-end 23

Lời Kết 30

Tài Liệu Tham Khảo 31

Hình 1:WemosD1 R1 6

Hình 2:DHT11 6

Hình3: Cảm Biến Lửa 6

Hình 4: Mạch Ghi Phát Âm Thanh 7

Hình 5: cách cắm wemos d1 với dht11 và cảm biến lửa 9

“Hình 7:Tìm Port Phù Hợp Với Wemos D1” 10

« Hình8 : kiểm tra phiên bản của node » 15

“Hình9: Phần mềm Visual Studio Code” 16

Hình10: Tạo Thư Mục Backend 16

Hình 13: Giao diện MySQL Workbench 18

Hình 14: Tạo database bằng New Querry trên MySQL 19

Hình16: Dữ liệu trong database 20

Hình18:chạy file myapi.js và dữ liệu xuất ra từ database 22

“Hình19:test các phương thức trên posman” 23

“Hình20:Tạo Thư Mục Front-end” 23

Hình21:Giao Diện Của Reactjs 24

“Hình22: Tải và cài các thư viện cần thiết cho thư mục Frontend” 24

Hình23: Thêm thông tin cảm biến trực tiếp trên trang Web 27

Hình24:Giao Diện Fritzing Cảm Biến Nhiệt Độ-Cảm Biến Lửa-Còi 28

Danh Mục Hình Ảnh

LỜI MỞ ĐẦU

“Lời nói đầu tiên em cảm ơn Cô Trần Thị Trường Thi vì đã cho em cơ hội để thử bài này.Tuy nó chỉ là “hệ thống nhỏ” “cho em rất nhiều kinh nghiệm” thực tiễn.

“Đồ án về ứng dụng quản lý, cảnh báo cháy để cảnh báo khi phát hiện lửa và chúng ta có thể xem được cả độ ẩm và nhiệt độ vì nhu cầu của cuộc cải tiến Cách Mạng 4.0 để phục vụ cho cuộc sống con người.Và đi xa hơn dù đây chỉ là mô hình nhỏ nhưng có thể phát triển thành một ứng dụng với quy mô lớn nếu muốn”

Em chân thành cảm ơn cô”

NỘI DUNG I.Thiết Bị

1 yêu cầu thiết bị

“Wemos D1 R1, DHT11(cảm biến nhiệt độ và độ ẩm)”

Hình

1:WemosD1 R1

Hình 2:DHT11

Hình3: Cảm Biến Lửa

3 Yêu cầu chương trình, thư viện Arduino IDE

“Tải thư viện board của wemos D1

“Với Dht11 ta tìm board”

“Hình 7:Tìm Port Phù Hợp Với Wemos D1”

4.Code

“Doancuoiky.ino”

II back-end

“1.Tải NodeJS Nếu Chưa Có”

“Trước khi ta vào phần back-end hoặc front-end, ta cần phải tải

Khi tải về xong, ta mở file vừa tải lên và cho chạy cài đặt

Để kiểm tra ta đã có nodejs hay chưa, ta nhấn nút window và

gõ PowerShell Sau đó ta gõ “node-v” để kiểm tra Nếu có hình dưới đây thì ta đã cài đặt thành công”

« Hình8 : kiểm tra phiên bản của node »

“Trong phần làm này, ta sẽ dùng NodeJS cho phần back-end và MySQL cho phần database”

2.TẠO “PROJECT” BẰNG PHẦN MỀM VISUAL STUDIO CODE

Đầu tiên ta cần mở phần mềm Visual Studio để tiến hành tạo thư mục để chứa server Sau đó ta chọn chỗ để lưu thư mục

“Hình9: Phần mềm Visual Studio Code”

Để tạo được file back-end ta vào phần mềm và tạo folder back-end

Hình10: Tạo Thư Mục Backend

“Tiếp đến để có thể sử dụng được project này ta tiến hành cài các thư viện cần thiết

“npm install express” , “npm install cors”, “npm install body-parser”, “npm install

nodemon””

Hình 11: Các thư viện cần thiết của thư mục back-end

“Tiếp theo để có thể sử dụng được MySQL thì ta cần cài thư viện liên quan bằng lệnh “npm install mysql” hoặc “npm install mysql2” tùy phiên bản.”

Hình 12: Thư viện để liên kết back-end với database

3.TẠO PROJECT VÀ DATABASE TRÊN MYSQL

“Đầu tiên ta cần truy cập vào phần mềm MySQL Workbench và có thể vào trang web này để tải phần mềm https://dev.mysql.com/downloads/mysql/ ”

“Sau khi truy cập vào phần mềm sẽ có giao diện như thế này”

Hình 13: Giao diện MySQL Workbench

Để tạo database mới mọi người nhấn vào “New Querry” để tiến hành viết chương trình tạo database và dữ liệu

Hình 14: Tạo database bằng New Querry trên MySQL

Ta tiến hành viết code để tạo ra database

Hình15: Viết code để tạo database và dữ liệu

Sau khi viết xong mọi người tiến hành chạy để có thể thấy được dữ liệu trong database của mình

Hình16: Dữ liệu trong database

4.Code

“Đầu tiên ta cần phải tạo thêm file để phục vụ việc code backend

myapi.js Bằng cách tạo trực tiếp trong thư mục”

Hình17: Tạo file myapi.js trong thư mục back-end

Ta vô file myapi.js và tiến hành ghi code

5 TEST API MÌNH VIẾT BẰNG POSTMAN

“Ta khởi động server bằng lệnh “npx nodemon nhietdo.js” ở trong PowerShell”

Hình18:chạy file myapi.js và dữ liệu xuất ra từ database

“Sau đó ta test các phương thức như get,post,…”

“Hình19:test các phương thức trên posman”

III Front-end

“Đối với Front-end, ta dùng ReactJS để khởi tạo”

“Đầu tiên ta truy cập vào folder chưa file back-end và cài đặt reactJS vào folder Front-end bằng lệnh“npm install -g create-react-app” Sau đó ta tạo project bằng lệnh “npx create-react- app <projectname>”

“Hình20:Tạo Thư Mục Front-end”

“Để khởi động file Front-end ta vào file Front-end vừa tạo và chạy lệnh “npm start” và sẽ hiện giao diện như thế này”

Hình21:Giao Diện Của Reactjs

“Và để có thể chạy được và liên kết với back-end và database ta sẽ tải thêm những thư viện cần thiết như”

“npm install axios”, “npm install express”, “npm body-parser”

“Hình22: Tải và cài các thư viện cần thiết cho thư mục Frontend”

“Ta vô file App.js để tiến hành ghi code để nhận dữ liệu từ back-end và database

Ta sẽ làm khung của frontend, ta chia thành 2 phần là thêm thông tin cảm ứng từ bên ngoài

và Cảm Biến Lửa+ nhiệt độ + độ ẩm”

“Và sau khi tạo xong file Front-end và trang trí ta sẽ có website như thế này”

Hình23: Thêm thông tin cảm biến trực tiếp trên trang Web

Hình24:Giao Diện Fritzing Cảm Biến Nhiệt Độ-Cảm Biến Lửa-Còi

Ảnh Mô Hình

Lời Kết

“Trong xã hội 4.0 ngày nay, được phát triển bởi công nghệ, chúng

ta không thể không nhận ra tầm quan trọng của các thiết bị công nghệ” “Hàng ngày, có rất nhiều thứ mới xuất hiện với mục đích chính là phục vụ cuộc sống con người Như tôi đã nói, tôi quyết định tập hợp các mô hình nhỏ từ những gì tôi đã học được Qua việc thực hành này, tôi đã thu thập được nhiều bài học, Cảm ơn các bạn đã đồng hành cùng tôi trong 15V tuần vừa qua, tôi hy vọng rằng có lẽ trong tương lai tôi sẽ đồng hành cùng các bạn trong các môn học khác hoặc cùng nhau làm việc Tôi xin chân thành cảm

ơn cô Thi”

Tài Liệu Tham Khảo