物連網WebAPP(含前端Web與後台管理程式)

需求說明

用於哪個行業：Iot 細節說明：外包軟體 - 產品需求明細 產品名稱 聯網信息機管理系統（WebApp） 產品簡介 本系統是一套提供內容上架、審核與排程播放的聯網信息機管理平台，使用者可登入後選擇位於不同地點的聯網信息機，編輯並提交內容，經過審核流程後於指定時間點推送至設備。系統支援不同角色權限、地圖介面選點、遠端管理、點數計費等功能, 並支援中英文版本。 ________________________________________ 目標使用者 • 系統管理員（系統管理與營運） • 內容編輯人員 • 內容審核人員 • 個人/公司內容上架者 • 安裝工程人員 ________________________________________ 🧩 主要功能模組 1. 使用者管理與權限控制 • 帳號登入/註冊機制 • 身份驗證（建議：JWT 或 OAuth2） • 角色權限分層： o 管理員（擁有所有權限） o 編輯人員（上傳內容、設定播放時間） o 審核人員（核准內容） o 安裝工程人員（設備初始化） ________________________________________ 2. 設備地圖管理與選擇 • 地圖顯示 o 整合 Google Maps 顯示安裝設備位置 o 設備以圖示標註，點選進入編輯畫面 • 位置選擇 o 提供地圖選點方式 o 提供地區下拉式選單（國家 / 城市 / 街道） ________________________________________ 3. 信息機識別管理 • 每台設備有唯一識別碼（例如 UUID） • 設備綁定地點座標與狀態 • 支援設備搜尋與篩選 ________________________________________ 4. 內容編輯與上架排程 • 文字編輯器 • 上架與下架時間設定功能 • 內容提交後進入審核流程 • 支援定時上架、定時下架 ________________________________________ 5. 點數系統 • 每次提交內容時扣除點數 • 顯示剩餘點數、點數消費紀錄 ________________________________________ 6. 內容審核流程 • 審核人員會收到通知並查看內容 • 所有審核人員皆需點選「通過」後內容才可上架 • 審核記錄保存（時間、審核人、結果） • 退回原因備註功能 • 顯示審核進度百分比或狀態標記 ________________________________________ 7. 遠端管理與監控 • 發布內容至設備（支援排程） • 查看設備狀態（設備上限為五萬台） • 支援遠端切換或停止播放內容 • 設備健康檢查功能（網路、記憶體、版本） ________________________________________ 8. 日誌與報表系統 • 系統操作日誌（登入、編輯、審核、上架等） • 每週/月上架內容時間統計 ________________________________________ 9. 安全與資料保護 • HTTPS、Token驗證 • 角色限制與權限控管 • 內容與帳號資料加密儲存 • 防止非法資料注入與攻擊 ________________________________________ 公共法規與內容規範 文字內容要求 • 禁止誤導、誇張、不實內容 • 禁止違法、宗教、政治等敏感話題 • 提醒上架者注意不得侵害隱私權 緊急訊息插播 • 管理後台具備緊急訊息輸入與即時插播功能 • 能夠中斷既定排程，插入高優先訊息（例如天災、政府公告） • 符合當地政府對於緊急廣播的相關規定 ________________________________________ 工程人員小App功能模組 • 設備與手機透過 WiFi 連線 • 顯示設備狀態與 ID 驗證 • 安裝完成確認按鈕 • 傳送回報紀錄與拍照上傳 ________________________________________ 技術建議（可選擇性實作） ________________________________________ Web 前端 Vue.js / React + Framework7 手機小App Flutter / Capacitor + Vue.js 地圖模組 Google Maps API / Leaflet 後端系統 Node.js / PHP（例如 Yii2） 資料庫 MySQL / PostgreSQL 即時訊息 WebSocket / MQTT（可擴展） 審核通知 Email 資料庫規劃（MySQL） 以下是主要資料表設計： 1. users（使用者） 欄位名稱 資料型別 描述 id INT PK AI 使用者 ID username VARCHAR 使用者名稱（帳號） password VARCHAR 加密密碼 email VARCHAR 電子郵件 role ENUM('admin', 'editor', 'reviewer', 'installer') 使用者角色 nickname VARCHAR 顯示名稱 points INT 剩餘點數 created_at DATETIME 註冊時間 ________________________________________ 2. machines（信息機） 欄位名稱 資料型別 描述 id INT PK AI 設備 ID name VARCHAR 機器名稱 uuid VARCHAR 唯一識別碼 latitude DECIMAL 緯度 longitude DECIMAL 經度 address TEXT 地址描述 city VARCHAR 城市名稱 status ENUM('online', 'offline', 'idle') 機器狀態 created_at DATETIME 安裝時間 ________________________________________ 3. contents（上架內容） 欄位名稱 資料型別 描述 id INT PK AI 內容 ID user_id INT FK 上傳者 ID machine_id INT FK 指定機器 ID title VARCHAR 內容標題 type ENUM('text', 'image', 'video') 媒體類型 body TEXT 內容資料（文字或檔案路徑） schedule_start DATETIME 上架時間 schedule_end DATETIME 下架時間 status ENUM('pending', 'approved', 'rejected', 'scheduled', 'published') 狀態 created_at DATETIME 建立時間 ________________________________________ 4. reviews（審核紀錄） 欄位名稱 資料型別 描述 id INT PK AI 審核紀錄 ID content_id INT FK 關聯內容 ID reviewer_id INT FK 審核人 ID decision ENUM('approved', 'rejected') 結果 comment TEXT 備註 reviewed_at DATETIME 審核時間 ________________________________________ 5. transactions（點數交易） 欄位名稱 資料型別 描述 id INT PK AI 交易 ID user_id INT FK 使用者 ID type ENUM('purchase', 'deduct') 類型 amount INT 點數變動量 description VARCHAR 描述（如購買、內容上架） created_at DATETIME 發生時間 ________________________________________ 6. logs（操作記錄） 欄位名稱 資料型別 描述 id INT PK AI 日誌 ID user_id INT FK 操作者 action VARCHAR 動作名稱 description TEXT 詳細描述 created_at DATETIME 發生時間 ________________________________________ Web APP UI 規劃 以下為 Web App 頁面架構與主要功能模組： ________________________________________ 1. 登入/註冊頁（Login/Register） 功能： • 使用者登入/註冊帳號 • 忘記密碼（寄信驗證） • 表單驗證 ________________________________________ 2. 儀表板首頁（Dashboard） 依照使用者角色顯示不同資訊 • 編輯者： o 點數餘額顯示 o 快速進入「新增內容」 o 最近的審核進度 • 審核者： o 待審內容列表（含簡要內容與快捷審核按鈕） • 管理者： o 機器總數、使用者數、平台統計 o 異常機器提示（離線過久） ________________________________________ 3. 地圖管理頁（Map View） 功能： • 顯示所有機器在地圖上的分佈 • 點擊圖示：彈出機器詳細資訊與快捷按鈕（編輯、查看內容） • 支援搜尋、篩選（城市、關鍵字） ________________________________________ 4. 機器列表頁（Machine List） 功能： • 檢視所有設備與其狀態（地點 / ID / 名稱 / 線上狀態） • 新增 / 編輯 / 刪除設備（限管理員） • 設定緯經度或地址 ________________________________________ 5. 新增/編輯內容頁（Content Editor） 功能： • 選擇要上架的機器（地圖/下拉式選單） • 選擇上架與下架時間 • 預估扣除點數 • 提交審核按鈕 ________________________________________ 6. 審核管理頁（Review Panel） 功能： • 顯示所有待審核內容列表（包含標題、上架機器、排程） • 每筆內容可「通過」或「退回」並附備註 • 顯示其他審核人是否已同意 ________________________________________ 7. 點數與交易紀錄頁（Points & Billing） 功能： • 點數餘額顯示 • 購買點數表單 • 顯示所有交易紀錄 ________________________________________ 8. 操作日誌與報表頁（Logs & Reports） 功能： • 搜尋與篩選日誌（使用者、動作、時間區間） • 自動生成每週/月上架報告 • 各地點的播放總時數與效益評估圖表 ________________________________________ 9. 緊急訊息插播頁（Emergency Broadcast） 功能： • 輸入緊急訊息標題與內容 • 選擇插播地點（全部或選擇機器） • 設定插播時間（立即或定時） • 插播日誌顯示 ________________________________________ 10. 安裝人員 App 頁面（Mobile Web / PWA） 功能： • 掃描設備碼或手動輸入 • WiFi 測試與連線確認 • 顯示設備連線與認證結果 • 提交「已安裝完成」報告 • 拍照上傳現場安裝照片 ________________________________________