Phần 5: Thiết kế dashboard web responsive

1. Giới thiệu về HTML, CSS và JavaScript

Trong việc xây dựng một dashboard web, HTML, CSS và JavaScript là ba công nghệ cốt lõi mà bạn cần nắm vững:

HTML (HyperText Markup Language): Là ngôn ngữ đánh dấu được sử dụng để cấu trúc nội dung trên web. HTML cho phép bạn định nghĩa các phần tử như tiêu đề, đoạn văn, hình ảnh, và các liên kết.
CSS (Cascading Style Sheets): Là ngôn ngữ dùng để mô tả cách thức hiển thị của các phần tử HTML. CSS giúp bạn tạo ra giao diện đẹp mắt và thân thiện với người dùng.
JavaScript: Là ngôn ngữ lập trình cho phép bạn tạo ra các tương tác động trên web. Với JavaScript, bạn có thể xử lý sự kiện, cập nhật nội dung mà không cần tải lại trang, và giao tiếp với server thông qua AJAX hoặc WebSocket.

2. Tạo giao diện dashboard cơ bản

Để bắt đầu, chúng ta cần tạo một tệp HTML với cấu trúc cơ bản cho dashboard. Dưới đây là một ví dụ đơn giản về giao diện dashboard:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard GPIO</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Dashboard Điều Khiển GPIO</h1>
        <div id="gpio-status"></div>
        <button id="toggle-gpio">Bật/Tắt GPIO</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

Trong ví dụ trên, chúng ta tạo một tiêu đề cho dashboard, một khu vực để hiển thị trạng thái GPIO và một nút để bật hoặc tắt GPIO.

3. Kết nối dashboard với REST API để hiển thị trạng thái GPIO

Để kết nối dashboard với REST API, chúng ta sẽ sử dụng JavaScript để thực hiện các yêu cầu HTTP. Dưới đây là một đoạn mã mẫu để lấy trạng thái GPIO từ server:

function fetchGPIOStatus() {
    fetch('http://<your-raspberry-pi-ip>/api/gpio/status')
        .then(response => response.json())
        .then(data => {
            document.getElementById('gpio-status').innerText = 'Trạng thái GPIO: ' + data.status;
        })
        .catch(error => console.error('Lỗi:', error));
}

// Gọi hàm để lấy trạng thái ban đầu
fetchGPIOStatus();

Trong đoạn mã này, chúng ta sử dụng phương thức fetch để gửi một yêu cầu GET đến REST API và hiển thị trạng thái GPIO trong phần tử div có ID là gpio-status.

4. Sử dụng WebSocket để cập nhật trạng thái theo thời gian thực

Để cập nhật trạng thái GPIO theo thời gian thực, chúng ta sẽ sử dụng WebSocket. Dưới đây là cách thiết lập kết nối WebSocket trong JavaScript:

const socket = new WebSocket('ws://<your-raspberry-pi-ip>/ws');

socket.onopen = function() {
    console.log('Kết nối WebSocket đã mở');
};

socket.onmessage = function(event) {
    const data = JSON.parse(event.data);
    document.getElementById('gpio-status').innerText = 'Trạng thái GPIO: ' + data.status;
};

socket.onclose = function() {
    console.log('Kết nối WebSocket đã đóng');
};

Trong đoạn mã trên, chúng ta thiết lập một kết nối WebSocket đến server và lắng nghe các thông điệp từ server. Khi nhận được thông điệp, chúng ta sẽ cập nhật trạng thái GPIO trong dashboard.

5. Tối ưu hóa giao diện cho thiết bị di động

Để đảm bảo dashboard hoạt động tốt trên các thiết bị di động, chúng ta cần sử dụng CSS để tạo kiểu responsive. Dưới đây là một ví dụ về cách sử dụng CSS để tối ưu hóa giao diện:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

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

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

@media (max-width: 600px) {
    h1 {
        font-size: 24px;
    }

    button {
        width: 100%;
        font-size: 14px;
    }
}

Trong đoạn CSS này, chúng ta sử dụng @media để điều chỉnh kích thước chữ và nút cho phù hợp với màn hình nhỏ hơn. Điều này giúp người dùng có trải nghiệm tốt hơn khi truy cập dashboard từ điện thoại di động.

Lưu ý: Hãy kiểm tra tính khả dụng của dashboard trên nhiều loại thiết bị khác nhau để đảm bảo rằng nó hoạt động tốt trên tất cả các nền tảng.

Với những bước trên, bạn đã hoàn thành việc thiết kế một dashboard web responsive cho dự án IoT của mình. Bây giờ bạn có thể điều khiển GPIO từ xa và theo dõi trạng thái của nó một cách thuận tiện và hiệu quả.