บทที่ 8 การพัฒนา Dashboard ด้วย JavaScript

      <!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IoT Sensor Dashboard</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f2f2f2;
            text-align: center;
            margin: 0;
            padding: 30px;
        }
        h1 {
            margin-bottom: 30px;
        }
        .dashboard {
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
        }
        .card {
            background: white;
            width: 250px;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.15);
        }
        .title {
            font-size: 20px;
            margin-bottom: 15px;
        }
        .value {
            font-size: 42px;
            font-weight: bold;
        }
        .unit {
            font-size: 20px;
        }
        #device {
            margin-top: 30px;
            font-size: 18px;
        }
        #time {
            margin-top: 10px;
            color: gray;
        }
        #status {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>IoT Sensor Dashboard</h1>

    <div class="dashboard">
        <!-- Temperature -->
        <div class="card">
            <div class="title">Temperature</div>
            <div class="value">
                <span id="temperature">--</span>
                <span class="unit">°C</span>
            </div>
        </div>

        <!-- Humidity -->
        <div class="card">
            <div class="title">Humidity</div>
            <div class="value">
                <span id="humidity">--</span>
                <span class="unit">%</span>
            </div>
        </div>
    </div>

    <div id="device">Device: --</div>
    <div id="time">Last Update: --</div>
    <div id="status">กำลังเชื่อมต่อ Server...</div>

    <script>
        // ==========================================
        // อ่านข้อมูล Sensor ล่าสุด
        // ==========================================
        async function loadSensorData() {
            try {
                const response = await fetch("http://127.0.0.1:8000/sensor/latest");

                // ตรวจสอบ HTTP Status
                if (!response.ok) {
                    throw new Error("HTTP Error: " + response.status);
                }

                // แปลง JSON เป็น JavaScript Object
                const data = await response.json();

                // ==================================
                // นำข้อมูลมาแสดงบนหน้าเว็บ
                // ==================================
                document.getElementById("temperature").textContent = data.temperature;
                document.getElementById("humidity").textContent = data.humidity;
                document.getElementById("device").textContent = "Device: " + data.device_id;
                document.getElementById("time").textContent = "Last Update: " + data.timestamp;
                document.getElementById("status").textContent = "เชื่อมต่อ Server สำเร็จ";
            }
            catch (error) {
                console.error(error);
                document.getElementById("status").textContent = "ไม่สามารถเชื่อมต่อ Server ได้";
            }
        }

        // ==========================================
        // เรียกข้อมูลครั้งแรก
        // ==========================================
        loadSensorData();

        // ==========================================
        // อ่านข้อมูลใหม่ทุก 5 วินาที
        // ==========================================
        setInterval(loadSensorData, 5000);
    
</body>
</html>

    

 from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
import psycopg

# -------------------------
# FastAPI
# -------------------------

app = FastAPI()

# -------------------------
# CORS
# -------------------------

app.add_middleware(

    CORSMiddleware,

    allow_origins=["*"],

    allow_credentials=True,

    allow_methods=["*"],

    allow_headers=["*"]

)

# -------------------------
# PostgreSQL
# -------------------------

conn = psycopg.connect(

    host="localhost",
    dbname="iot_database",
    user="postgres",
    password="***********",
    port=5432

)

print("เชื่อมต่อ PostgreSQL สำเร็จ")

# -------------------------
# JSON Model
# -------------------------

class Device(BaseModel):

    device_id: str
    device_name: str
    location: str
    ip_address: str


# ==========================================================
# POST : เพิ่มข้อมูลอุปกรณ์
# ==========================================================

@app.post("/device")
def add_device(device: Device):

    try:

        with conn.cursor() as cur:

            cur.execute(
                """
                INSERT INTO device
                (
                    device_id,
                    device_name,
                    location,
                    ip_address
                )

                VALUES
                (%s,%s,%s,%s)
                """,

                (
                    device.device_id,
                    device.device_name,
                    device.location,
                    device.ip_address
                )

            )

        conn.commit()

        print("บันทึกข้อมูลสำเร็จ")

        return {

            "status":"OK",
            "message":"บันทึกข้อมูลสำเร็จ"

        }

    except Exception as e:

        conn.rollback()

        print(e)

        return {

            "status":"ERROR",
            "message":str(e)

        }


# ==========================================================
# GET : อ่านข้อมูลทั้งหมด
# ==========================================================

@app.get("/device")
def get_device():

    try:

        with conn.cursor() as cur:

            cur.execute(
                """
                SELECT

                    device_id,
                    device_name,
                    location,
                    ip_address

                FROM device

                ORDER BY device_id
                """
            )

            rows = cur.fetchall()

        device_list = []

        for row in rows:

            device_list.append({

                "device_id": row[0],
                "device_name": row[1],
                "location": row[2],
                "ip_address": row[3]

            })

        return device_list

    except Exception as e:

        print(e)

        return {

            "status":"ERROR",
            "message":str(e)

        }


# ==========================================================
# GET : อ่านค่า Temperature และ Humidity ล่าสุด
# ==========================================================

@app.get("/sensor/latest")
def get_latest_sensor():

    try:

        with conn.cursor() as cur:

            cur.execute(
                """
                SELECT
                    data_id,
                    device_id,
                    temperature,
                    humidity,
                    recorded_at
                FROM sensor_data
                ORDER BY recorded_at DESC
                LIMIT 1
                """
            )

            row = cur.fetchone()

        if row is None:

            return {
                "status": "ERROR",
                "message": "ไม่พบข้อมูล Sensor"
            }

        return {

            "data_id": row[0],

            "device_id": row[1],

            "temperature": float(row[2]),

            "humidity": float(row[3]),

            "recorded_at": row[4]

        }

    except Exception as e:

        print("Database Error:", e)

        return {

            "status": "ERROR",

            "message": str(e)

        }