Phần 3: Xây dựng giao diện người dùng

1. Giới thiệu về các tùy chọn giao diện (web/app)

Trong dự án "Máy Đo Chất Lượng Không Khí PM2.5", việc xây dựng giao diện người dùng là một phần quan trọng để người dùng có thể theo dõi và tương tác với dữ liệu chất lượng không khí. Có hai tùy chọn chính cho giao diện người dùng: giao diện web và ứng dụng di động.

Giao diện web: Dễ dàng truy cập từ bất kỳ thiết bị nào có trình duyệt web, không cần cài đặt thêm phần mềm. Giao diện web có thể được xây dựng bằng HTML, CSS và JavaScript.
Ứng dụng di động: Cung cấp trải nghiệm người dùng tốt hơn, có thể hoạt động ngoại tuyến. Tuy nhiên, việc phát triển ứng dụng di động yêu cầu kiến thức về các nền tảng như Android hoặc iOS.

Trong hướng dẫn này, chúng ta sẽ tập trung vào việc xây dựng giao diện web cơ bản.

2. Lập trình giao diện web cơ bản bằng HTML/CSS/JavaScript

Để bắt đầu, chúng ta sẽ tạo một file HTML đơn giản để hiển thị dữ liệu chất lượng không khí. Dưới đây là mã nguồn cho giao diện cơ bản:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Máy Đo Chất Lượng Không Khí</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Theo Dõi Chất Lượng Không Khí</h1>
        <div id="data-display"></div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Trong đoạn mã trên, chúng ta đã tạo một cấu trúc HTML cơ bản với một tiêu đề và một khu vực để hiển thị dữ liệu.

Tiếp theo, chúng ta sẽ thêm một file CSS để làm cho giao diện trở nên đẹp mắt hơn. Dưới đây là mã nguồn cho file styles.css:

.container {
    width: 80%;
    margin: auto;
    text-align: center;
    padding: 20px;
}

h1 {
    color: #4CAF50;
}

#data-display {
    margin-top: 20px;
    font-size: 1.5em;
    color: #333;
}

3. Kết nối giao diện với ESP32 để nhận dữ liệu

Để giao diện web có thể nhận dữ liệu từ ESP32, chúng ta cần sử dụng AJAX trong JavaScript. Dưới đây là mã nguồn cho file script.js:

function fetchData() {
    fetch('http://<ESP32_IP_ADDRESS>/data') // Thay <ESP32_IP_ADDRESS> bằng địa chỉ IP của ESP32
        .then(response => response.json())
        .then(data => {
            document.getElementById('data-display').innerHTML = 
                `PM1.0: ${data.pm1}, PM2.5: ${data.pm25}, PM10: ${data.pm10}, CO2: ${data.co2}, VOC: ${data.voc}`;
        })
        .catch(error => console.error('Lỗi:', error));
}

setInterval(fetchData, 5000); // Lấy dữ liệu mỗi 5 giây

Trong đoạn mã trên, hàm fetchData sẽ gửi yêu cầu đến ESP32 để nhận dữ liệu chất lượng không khí và cập nhật nội dung của #data-display mỗi 5 giây.

4. Hiển thị dữ liệu chất lượng không khí theo thời gian thực

Với mã nguồn đã được thiết lập, giao diện sẽ tự động cập nhật dữ liệu chất lượng không khí theo thời gian thực. Bằng cách sử dụng hàm fetchData, chúng ta có thể dễ dàng lấy dữ liệu từ ESP32 và hiển thị nó trên giao diện web.

Lưu ý: Đảm bảo rằng ESP32 đang hoạt động và có địa chỉ IP đúng để giao diện web có thể kết nối và nhận dữ liệu.

5. Thêm biểu đồ và đồ thị để minh họa dữ liệu

Để trực quan hóa dữ liệu chất lượng không khí, chúng ta có thể sử dụng thư viện charting như Chart.js. Dưới đây là cách tích hợp Chart.js vào dự án của chúng ta.

Đầu tiên, thêm liên kết đến Chart.js trong file HTML:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Tiếp theo, chúng ta sẽ tạo một biểu đồ trong file HTML:

<canvas id="airQualityChart"></canvas>

Chúng ta sẽ cập nhật mã trong script.js để vẽ biểu đồ:

const ctx = document.getElementById('airQualityChart').getContext('2d');
let airQualityChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [], // Nhãn thời gian
        datasets: [{
            label: 'PM2.5',
            data: [],
            borderColor: 'rgba(75, 192, 192, 1)',
            fill: false
        }]
    },
    options: {
        scales: {
            x: {
                type: 'linear',
                position: 'bottom'
            }
        }
    }
});

function fetchData() {
    fetch('http://<ESP32_IP_ADDRESS>/data')
        .then(response => response.json())
        .then(data => {
            document.getElementById('data-display').innerHTML = 
                `PM1.0: ${data.pm1}, PM2.5: ${data.pm25}, PM10: ${data.pm10}, CO2: ${data.co2}, VOC: ${data.voc}`;
            
            // Cập nhật biểu đồ
            airQualityChart.data.labels.push(new Date().toLocaleTimeString());
            airQualityChart.data.datasets[0].data.push(data.pm25);
            airQualityChart.update();
        })
        .catch(error => console.error('Lỗi:', error));
}

setInterval(fetchData, 5000);

Trong đoạn mã trên, chúng ta đã thêm một biểu đồ dạng đường để hiển thị PM2.5 theo thời gian. Mỗi khi dữ liệu mới được lấy, biểu đồ sẽ được cập nhật với giá trị mới.

Kết luận

Qua hướng dẫn này, bạn đã học cách xây dựng một giao diện web cơ bản cho dự án "Máy Đo Chất Lượng Không Khí PM2.5". Bạn đã tìm hiểu cách sử dụng HTML, CSS, JavaScript và Chart.js để hiển thị dữ liệu chất lượng không khí theo thời gian thực. Hãy tiếp tục cải thiện giao diện của bạn và thêm nhiều tính năng hữu ích khác!