跳轉到

App 設計概要

本章定義 Fugu 團隊負責的 App 開發範圍：使用 React Native 開發跨平台 App，包含 BLE 設備整合、本地資料管理、以及 API Client 實作。

📚 本章節文件結構

App 架構

  • React Native 技術堆疊 (TypeScript, react-native-ble-plx)
  • App 分層架構 (UI Layer / Service Layer / Data Layer)
  • 核心模組：WorkoutEngine, BLEManager, APIClient, StorageService
  • 狀態管理方案 (Redux Toolkit / Zustand)
  • 開發環境設定

藍牙裝置整合

  • 支援設備 (SolidFocus Bike 含阻力控制, Rower 僅讀取)
  • FTMS v1.0.1 GATT Services & Characteristics
  • BLE 連線狀態機 (Disconnected → Scanning → Connecting → Ready)
  • 資料解析 (Indoor Bike Data, Rower Data) 含 TypeScript 範例
  • 控制指令 (Resistance Control Point) 使用 react-native-ble-plx
  • 權限處理 (iOS & Android)

參考文件：SolidFocus FTMS v1.0.1 整合規範

流程與同步策略

  • 設計原則：Offline-First, Mobile Data First
  • 資料來源定義：Local DB vs Server DB
  • 完整 Flow 定義：
    • Flow 1: App 啟動流程（何時讀 Local / 何時呼叫 API）
    • Flow 2: 登入與資料同步（Login 後如何處理 Local 與 Server 資料）
    • Flow 3: 開始運動流程（完全 Local，不使用網路）
    • Flow 4: 運動結束與上傳（背景非阻塞上傳）
    • Flow 5: 查看歷史記錄（從 Local 立即顯示）
    • Flow 6: 登出流程（處理 Pending Sessions）
    • Flow 7: 課程列表顯示（快取策略）
    • Flow 8: Token Refresh（自動重試）
  • 錯誤處理與 Retry 策略

App 端資料庫結構

  • 技術選型：為何選擇 WatermelonDB
  • Schema 設計：5 個 Tables (users, sessions, trainings, training_videos, sync_queue)
  • Models 定義：完整的 TypeScript Model 範例
  • 使用範例：CRUD 操作、React 整合、自動更新 UI
  • 同步策略：上傳 Pending Sessions、下載 Server Sessions