香港超市價格比較 App 專案計劃
利用 AI 影像識別與網頁爬蟲技術，解決市民格價難題。
React Native
Python Crawler
Google Vision API
系統架構圖 (System Architecture)
下圖展示了數據如何從用戶手機端流向後端，以及我們如何從各大超市網站獲取數據。
graph TD
%% 定義樣式
classDef client fill:#e1f5fe,stroke:#01579b,stroke-width:2px;
classDef backend fill:#fff3e0,stroke:#e65100,stroke-width:2px;
classDef data fill:#e8f5e9,stroke:#1b5e20,stroke-width:2px;
classDef external fill:#f3e5f5,stroke:#4a148c,stroke-width:2px;
%% 用戶端
subgraph Client_Side [📱 用戶端 Mobile App]
User((用戶)) -->|1. 拍攝/掃描| Camera[相機模組]
User -->|查詢| SearchUI[搜尋介面]
Camera -->|上傳圖片| AppLogic[App 邏輯層]
AppLogic -->|API 請求| APIGateway[API Gateway]
end
%% 後端服務
subgraph Backend_Services [☁️ 後端服務 Backend]
APIGateway -->|分發| ImageService[📷 影像識別/條碼]
APIGateway -->|比價| PriceService[💰 比價引擎]
ImageService -->|解析數據| ExtractedData(商品 ID)
ExtractedData --> PriceService
end
%% 數據管道
subgraph Data_Pipeline [🔄 數據管道 Data Pipeline]
Crawler[🕷️ 爬蟲系統] -->|3. 定時抓取| TargetSites
Crawler -->|清洗| DataCleaner[數據標準化]
DataCleaner -->|寫入| Database[(📦 資料庫 Postgres)]
PriceService <-->|4. 讀取價格| Database
end
%% 外部來源
subgraph External_Sources [🌐 超市來源]
TargetSites[百佳 / 惠康 / HKTV]
end
%% 連線樣式
class Client_Side client;
class Backend_Services backend;
class Data_Pipeline data;
class External_Sources external;
核心技術模組
1. 網頁爬蟲 (Crawler)
目標： 百佳 (PNS)、惠康、HKTVMall
- 使用 Python (Selenium/Playwright) 處理動態網頁。
- 每日凌晨執行 Cron Job 更新價格。
- 建立 Proxy Pool 應對反爬蟲機制。
2. 影像識別 (AI Vision)
策略： 條碼優先，影像為輔
- Barcode： 掃描 EAN-13 條碼（最準確）。
- OCR： 使用 Google Vision API 讀取包裝文字。
- Fallback： 識別失敗時允許用戶手動輸入。
3. 資料庫設計 (Database)
技術： PostgreSQL
- Products Table： 儲存商品名、條碼、圖片。
- Prices Table： 儲存歷史價格，用於繪製價格走勢圖。
4. 用戶端 App
技術： React Native / Flutter
- 支援 iOS 與 Android。
- 相機權限調用與即時預覽。
- 簡潔的價格比較列表介面。
協作與功能許願池
目前階段：規劃中這是我們目前的開發路線圖。如果你有新的想法，或者你想認領某個功能進行開發，請在下方留言或填寫需求單！
🚀 待加入功能列表 (Wishlist)
基礎架構設計
已完成
價格下跌提醒 (Price Alert)
高優先級
當收藏的商品低於設定價格時，發送推播通知。
用戶回報價格 (Crowdsourcing)
社群功能
允許用戶手動上傳小店或藥房的價格，補充爬蟲爬不到的數據。
購物車總價計算機
將多樣商品加入購物車，計算去哪一間超市買總價最便宜。