<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>ĐẠI HỌC XÂY DỰNGKHOA CÔNG NGHỆ THƠNG TIN</b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b>NgàyCơng việc đã kiểm traCơng việc giao buổi sau^Ghi_chú</b>

 Giới thiệu đề tài, hướng dẫn làm báo cáo về

 Đồ án Đồ họa Máy tính

Các nội dung khác như: sản phẩm nếu có: Gửi riêng vào thư mục

 Nộp bản thảo đồ án đểthầy xem hướng dẫn chỉnh sửa

Hoàn thiện đề tài, nộp báo và sản phẩm (nếu có sản phẩm)

11/12/2020

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

Ảnh 1. Cảm biến nhiệt độ độ ẩm DHT11Ảnh 2. Modern Wifi ESP8266Ảnh 3. Dây data

Ảnh 4. BoardẢnh 5. Dây nốiẢnh 6. Lắp đặt thiết bịẢnh 7. Code ArduinoẢnh 8. Chọn boardẢnh 9 Chọn cổngẢnh 10. Kết nối HiveMQẢnh 11. Tạo testtopicẢnh 12. Upload codeẢnh 13. Serial MonitorẢnh 14. Dữ liệu đẩy lên testtopicẢnh 15. Dữ liệu trên firebaseẢnh 16. Chi tiết dữ liệu trên firebaseẢnh 17. Giao diện khởi độngẢnh 18. Giao diện xem nhiệt độ, độ ẩmẢnh 19. Giao diện dữ liệu

Ảnh 20. Giao diện chi tiết dữ liệu

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

<b>I TỔNG QUAN ĐỀ TÀI1. ĐẶT VẤN ĐỀ</b>

Thứ nhất: Hiện nay hiện tượng cháy nổ diễn ra rất thường xuyên, phức tạp và gây hậuquả rất nghiêm trọng. Hiện tượng này gây ra thiệt hại nghiêm trọng về người, tài sản kéotheo nhiều hệ lụy cho môi trường và xã hội gây hoang mang trong dư luận. Đặc biệt việccháy nổ hình thành do những ngun nhân có thể rất nhỏ, tuy nhiên do không được pháthiện kịp thời dẫn đến bùng phát gây hậu quả nghiêm trọng. Điều này đặt ra nhu cầu vềmột cơng cụ có thể cảnh báo trước những nguy cơ cháy nổ, để có phương án kịp thờiphịng tránh. Và một ứng dụng theo dõi nhiệt độ từ xa có thể đáp ứng nhu cầu này. Nógiúp chúng ta cập nhật liên tục nhiệt độ tại bất kì đâu chúng ta muốn theo dõi, đặc biệt lànhững nơi có nguy cơ cháy nổ cao. Nếu có sự tăng bất thường của nhiệt độ tức là có nguycơ xảy ra cháy nổ. Khi nắm được thông tin cập nhật, chúng ta sẽ kịp thời đưa ra được giảipháp để khắc phục.

Thứ hai: Với sự thay đổi thất thường của khí hậu hiện nay, việc nắm được chính xácnhiệt độ và độ ẩm của môi trường sống giúp chúng ta chủ động được cách thức sinh hoạtphù hợp để dáp ứng nhu cầu của cơ thể trong các điều kiện môi trường khác nhau. Ví dụnhư vào một ngày khơ hanh chúng ta có thể nắm được và chủ động cung cấp đủ nước chocơ thể... Điều này thực sự quan trọng khi bạn cần để chăm sóc trẻ em hoặc người già. Như vậy, với ứng dụng theo dõi nhiệt độ chúng ta đã giải quyết được cả hai vấn đề nêutrên. Nó thực sự là một ứng dụng cần thiết cho bất kì người dùng nào bỏi tính thực tế vàhiệu quả nó mang lại.

<b>2. ĐỊNH HƯỚNG THIẾT KẾ</b>

Quá trình xây dựng ứng dụng sẽ không đi sâu về lắp đặt thiết bị phần cứng và bộ vi điều khiển mà chỉ quan tâm đến việc xây dựng ứng dụng giao tiếp với người dùng và các thiết bị cảm biến nhiệt ( Đặc biệt là phần giao diện đồ họa của ứng dụng ).

Ứng dụng có thể sử dụng trên các thiết bị Android có kết nối mạng.- Cơng nghệ sử dụng

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

- Tác nhân: Người sử dụng ứng dụng.- Các chức năng cơ bản:

● Xem nhiệt độ và độ ẩm hiện tại.

● Cảnh báo sự bất thường của dữ liệu đo được.● Xem dữ liệu đã được đo và thống kê theo thời gian.- Mô tả chức năng:

● Xem nhiệt độ, độ ẩm: Người dùng lựa chọn chức năng xem nhiệt độ, đồ ẩm. Lúc này giao diện xem nhiệt độ độ ẩm sẽ được bật và dữ liệu đo được tại thời điểm hiện tại được tải lên trên giao diện.

● Cảnh báo: Kho nhiệt độ tăng quá mức giới hạn, ứng dụng sẽ gửi một cảnh báo chongười dùng ngay trên giao diện xem nhiệt độ độ ẩm.

● Thống kê dữ liệu: Toàn bộ giá trị nhiệt độ độ ẩm đã đo sẽ được lưu lại và thống kê theo thời gian. Khi người dùng chọn chức năng xem sẽ chuyển đến giao diện lưu trữ. Tại đây người dùng có thể xem dữ liệu được lưu bằng cách lựa chọn ngày cần xem.Khi người dùng lựa chọn ngày bất kì, tồn bộ dữ liệu nhiệt độ, độ ẩm được đongày hơm đó sẽ được mở ra.

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

- Dây Data

<small>nh 3. Dây dataẢ</small>- Board

<small>nh 4. BoardẢ</small>

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

- Dây nối

<small>nh 5. Dây nốếiẢ</small>

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

<b>III. CHẠY THIẾT BỊ1. CODE ADUINO</b>

+ Tiến hành mở file main.ino có đường dẫn

<small>nh 7. Code ArduinoẢ</small>

Tại đây chúng ta thay đổi tên và mật khẩu wifi theo wifi chúng ta sử dụng:

char ssid[] = "matkhauwifi"; // Tên wifi

char pass[] = "12345679"; // Mật khẩu

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

+ Chọn Tools Board NodeMCU 1.0(ESP Module)� �

<small>nh 8. Ch n board</small>

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

+ Chọn Tools Port COM5 //� � Việc chọn cổng phụ thuộc vào cổng bạn đang sử dụng

<small>nh 9 Ch n c ng</small>

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

<b>3. UPLOAD CODE</b>

Chọn để upload code lên thiết bị đã được kết nối

<small>nh 12. Upload codeẢ</small>

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

+ Chờ cho quá trình upload code hồn tất

Chúng ta có thể mở Serial Monitor để xem kết quả chạy code

<small>nh 13. Serial MonitorẢ</small>

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

+ Lúc này dữ liệu nhiệt độ, độ ẩm đo được sẽ được đẩy lên testtopic chúng ta đã tạo ở bước trước

<small>nh 14. D li u đ y lến testtopic</small>

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

+ Đồng thời dữ liệu được đẩy lên Firebase

Đường dẫn Firebase lưu dữ liệu nhiệt độ, độ ẩm phục vụ ứng dụng này

<small> Tài kho n và c s d li u đảơ ở ữ ệượ ạc t o b i hai thành viến Lế Vắn Th c và Phan Quốếc Nh tởụậ</small>+ Dữ liệu trên Firebase được lưu trữ như sau

<small>nh 15. D li u trến firebase</small>

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

+ Chi tiết dữ liệu trên Firebase

<small>nh 16. Chi tiếết d li u trến firebase</small>

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

<b>IV. GIAO DIỆN ỨNG DỤNG VÀ HƯỚNG DẪN SỬ DỤNG1. GIAO DIỆN KHỞI ĐỘNG</b>

- Tại giao diện khởi động, người dùng có 2 lựa chọn:

● Chuyển tới giao diện xem nhiệt độ, độ ẩm. Người dùng có hai cách thực hiện điều này. Người dùng click vào “ Sensor ”hoặc chọn censor để thực hiện chức năng này.

● Chuyển tới giao diện xem dữ liệu nhiệt độ độ ẩm đã được lưu lại theo thời gian cụ thể. Người dùng click vào “Data” hoặc chọn data để thực hiện chức năng này.

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

<small>nh 17. Giao di n kh i đ ng</small>

<b>2. GIAO DIỆN XEM NHIỆT ĐỘ ĐỘ ẨM</b>

- Tại giao diện này, người dùng được cung cấp giá trị nhiệt độ độ ẩm được đo tại thời điểm này. Nếu dữ liệu đo được vượt qua mức giới hạn, người dùng sẽ nhận được cảnh báo ngay trên giao diện này để nắm bắt được vấn đề cần giải quyết.

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

<small>nh 18. Giao di n xem nhi t đ , đ m</small>

<b>3. GIAO DIỆN DỮ LIỆU</b>

- Tại giao diện này hiển thị danh sách các ngày liên tục từ lúc người dùng sử dụng ứng dụng. Đây chính là danh sách để người dùng có thể xem lại dữ liệu đo được từ các ngày

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

<small>nh 19. Giao di n d li u</small>

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

<b>4. GIAO DIỆN DỮ LIỆU NHIỆT ĐỘ, ĐỘ ẨM THEO NGÀY</b>

- Tại đây cung cấp đầy đủ từng mốc thời gian và dữ liệu nhiệt độ, độ ẩm đo được trong ngày được chọn.

<small>nh 20. Giao di n chi tiếết d li u</small>

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

<b>V. Source code1. Home.page.html</b>

<ion-toolbar text-center> <ion-title>Home</ion-title> </ion-toolbar>

<b>2. Sensor.page.html</b>

<ion-toolbar text-center> <ion-title>Sensor</ion-title> </ion-toolbar>

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

<divid="blik">

<pstyle="color: rgb(255, 0, 0)"> Nhiệt độ quá nóng!! Cần kiểm tra</p> </div>

</div> </div></ion-content>

<ion-list*ngFor="let date of uids; let i = index"> <ion-item-sliding>

<ion-item[href]="'/data-detail/' + date"routerDirection="forward"> <p>Dữ liệu ngày:&emsp;</p>

<ion-label>

<h3>{{date}}</h3> </ion-label> <br>

<p> <u>See details</u></p> </ion-item>

<ion-item-optionsside="end">

<ion-item-option color="danger"(click)="delete(date, i)">

<ion-iconslot="icon-only"name="trash"style="color: beige;"></ion-icon> </ion-item-option>

</ion-item-options> </ion-item-sliding> </ion-list>

</ion-content>

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

<ion-list*ngFor="let d of dataSnap; let i = index"> <ion-item-sliding>

<ion-label> ---

<ion-iconname="md-time"></ion-icon> </ion-label>

<ion-noteslot="end"> <h2>

<ion-iconslot="start"name="ios-water"style="color: aqua;"icon>Humidity: {{d.humidity}}% </h2>

<h2>

<ion-iconslot="start"name="ios-thermometer"style="color: brown;"></ion-icon>Temperature: {{d.temperature}}°C </h2>

</ion-note>

<ion-item-optionsside="end">

<ion-item-option color="danger"(click)="delete(d.timeKey, i)">

<ion-iconslot="icon-only"name="trash"style="color: beige;"></ion-icon> </ion-item-option>

</ion-item-options> </ion-item-sliding> </ion-list>

</ion-content>

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

<b>5. index.html</b>

<meta charset="utf-8" /> <title>Nhat&Thuc</title> <basehref="/" />

<meta name="viewport"content="viewport-fit=cover, width=device-width, scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<meta name="format-detection"content="telephone=no"/> <meta name="msapplication-tap-highlight"content="no" /> <linkrel="icon"type="image/png"href="assets/icon/favicon.png" /> <!-- add to homescreen for ios -->

<meta name="apple-mobile-web-app-capable"content="yes" /> <meta name="apple-mobile-web-app-status-bar-style"content="black" /></head>

<app-root></app-root></body>

<b>6. filebase.ts</b>

const config = {

apiKey:"AIzaSyCGS8Nj1R5ggnPwalFj0h3y1wFQcBpC3SI", authDomain:"temperature-be828.firebaseapp.com", databaseURL:"",

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

appId: "1:258374555341:web:1ff0dae85c95a7652bbb84", measurementId: "G-FNR0X6PXQN"

<b>VII. Tài liệu tham khảo </b>

webapp

</div>