Frontend website

[chunhui1110]

建立前端框架架構

• 建立環境及初始化Next.js框架架構

設定專案目錄結構

• pages：頁面內容。
• components： 可重複使用的 UI 元件 (如按鈕、輸入框等)。
• styles：全域與局部樣式。
• public：靜態資源 (如圖示、圖片、SVG)。

製作初階HTML架構

• Main.html： 系統主頁面，提供各功能入口。
• lock.html： 智慧鎖控制頁面，含解鎖與鎖定功能。
• camera.html： 監視器畫面預覽與錄影控制。
• humidity.html： 濕度數據顯示與設定警報。
• light.html： 照明控制開關與亮度調整。
• air.html： 空氣品質監測與空氣清淨機控制。
• furniture.html： 智慧家具控制，例如電動窗簾與插座。

設計全域版面與佈局 (Layout)

• Header / Navbar：提供頁面間的切換導航。
• Sidebar（可選）：放置額外功能按鈕或狀態顯示。
• Footer：顯示系統資訊或版權聲明。

連結後端

• 設計 API 介面與請求處理
• 狀態管理與數據快取，使用 useState 或 useReducer 來管理狀態。
• 處理 API 連線與錯誤提示

連結物聯網模組

• 與 WebSocket 連線，確保即時控制
• 模擬與測試設備控制 UI
• 處理 MQTT / WebSocket 數據格式

測試與優化

• 前端 UI 測試，確保所有按鈕、輸入框、切換功能皆可正常使用。