【實戰分享】從零到一：開發 Zepp OS 手錶喝水提醒 App (Water Tracker)

之前買了我的第一支amzfit智慧型手錶(雖然是中國牌但也只能用了)，想說要記錄睡眠運動讓我睡得更多運動得更好，但是發現沒有督促我喝水的功能。於是我從零開始，使用 Zepp OS 開發了一款名為「Water Tracker (喝水)」的 App。

1. 專案架構概覽

Zepp OS 底層支援使用 JavaScript (ES6) 進行開發，專案主要結構如下：

2. 畫面設計與 UI 實作

手錶螢幕空間有限，設計哲學為：「一眼看懂進度，一鍵完成記錄」。主要切分五個核心區塊：

1. 進度文字提示：顯示 當前水量 / 每日目標。視覺化水瓶 (Bottle Area)：透過程式動態繪製水瓶填滿比例。快速加水按鈕 (Quick Buttons)：提供常用容量（如 +100, +200）。重置按鈕 (Reset)：方便清空數據。飲水紀錄清單 (Scroll List)：列出今日紀錄，並支援左滑刪除手勢。

UI 佈局定義片段（快速加水按鈕）：

3. 核心技術點：本地化資料存儲 (FS)

利用 @zos/fs 模組進行 JSON 檔案讀寫，確保 App 關閉或手錶重啟後數據不遺失，並透過時間戳記自動過濾過期紀錄。

檔案讀寫封裝：

4. 串接與生命週期管理

在 index.page.js 中使用 onInit, build, onDestroy 管理。策略是減少 Flash 讀寫次數以省電：

• onInit：讀取檔案，計算總量，並透過 @zos/user 取得體重換算每日目標。互動時：更新 State 並同步覆寫檔案。onDestroy：退出時進行最後保底寫入。

5. 編譯與佈署測試

使用 Zeus CLI 工具鏈進行佈署：

1. 安裝依賴：npm install啟動模擬器：執行 zeus dev，確認圓形與方形螢幕的佈建適配。實機預覽：執行 zeus preview 產生 QR Code，使用手機 Zepp App 掃描即可透過藍牙安裝至手錶。

6. 結語

利用 JavaScript 就能開發出流暢的手錶原生 App 是非常有成就感的事。如果你對穿戴式裝置感興趣，Zepp OS 是極佳的切入點。接下來計畫將 App 推上 Zepp App Store，歡迎交流！

--

📢 聲明： 本文 AI 寫作比例達 90% 以上，作為作者意志之延伸工具。