airiot-frontend

AIRIOT 前端開發技能為工程師與 AI Agent 提供了一套完整的框架指南，旨在構建高效能、即時的工業應用程式。透過 React 與 TypeScript 架構，本技能將 AIRIOT 平台的複雜整合需求簡化為易於管理的 Hooks 與元件。開發者可以利用預設的 shadcn/ui 樣式維持專業設計標準，同時存取一套強大的狀態管理、資料綁定與 API 通訊工具。本工具適用於前端開發者、全端工程師與物聯網應用架構師，協助其高效介接 AIRIOT 後端、處理即時 WebSocket 訂閱，並以最少的樣板程式碼實現複雜的 CRUD 操作。

• 精簡的 API 客戶端：提供如 createAPI 等高階抽象，輕鬆處理 RESTful 操作、分頁、篩選與資料轉換。

• 整合式身份驗證：內建 useLogin、useLogout 與 useUser 等 Hooks，無縫管理使用者工作階段與平台安全上下文。

• 進階表單處理：整合 react-hook-form 與 JSON Schema，支援動態表單建構、驗證與欄位狀態管理。

• 基於 Jotai 的狀態管理：利用 Model 與 TableModel 模式，確保應用程式狀態在複雜的儀表板元件間保持同步。

• 即時訂閱功能：透過 useTag 與 useTableData 實現基於 WebSocket 的資料更新，為 IoT 儀表板與事件系統提供即時監控能力。

• 全面性 Page Hooks：管理頁面級變數與資料來源，包括 usePageVar 與 useDatasourceValue，實現響應式 UI 更新。

• 事件系統：實作基於事件驅動的架構，使用 useEvents 與 useEvent 解耦業務邏輯與 UI 互動。

• 在初始化開發環境前，請確保 AIRIOT CLI 已正確設定基本 URL 與專案 ID。

• 請遵循定義的專案結構 (src/pages, src/blocks, src/components)，以維護團隊協作中的可擴展性與一致性。

• 針對所有資料模型使用 TypeScript 介面，確保 API 回應與狀態物件的型別安全。

• 在實作即時資料串流時，務必呼叫 useSubscribeContext，以確保良好的記憶體管理與生命週期處理。

• 本工具需要 Node.js 環境並支援 Vite，且已針對 React 18/19 相容性進行最佳化。