差異處

這裏顯示兩個版本的差異處。

連向這個比對檢視

兩邊的前次修訂版 前次修改
下次修改		 前次修改
tech:owntrack [2025/04/08 13:52] – 增加管理端畫面 jonathantech:owntrack [2026/03/03 14:26] (目前版本) – 3. 匯出特定 user 或 device 在特定日期區間的軌跡資料作法 jonathan
行 5: 行 5:
   * GitHub - https://github.com/owntracks   * GitHub - https://github.com/owntracks
  
 +===== 架構圖 =====
 +
 +<mermaid>
 +graph TB
 +    %% External Components
 +    Mobile[📱 OwnTracks Mobile App<br/>MQTT + WebSocket]
 +    Browser[🌐 Web Browser]
 +    External[🌍 External MQTT Clients]
 +    WebApp[📱 Mobile Web App<br/>WebSocket Only]
 +    
 +    %% Docker Services
 +    subgraph "Docker Environment"
 +        subgraph "Mosquitto MQTT Broker"
 +            MQTT[Eclipse Mosquitto<br/>Port: 1883, 9001]
 +        end
 +        
 +        subgraph "OwnTracks Recorder"
 +            Recorder[OwnTracks Recorder<br/>Port: 8083<br/>HTTP API]
 +        end
 +        
 +        subgraph "Frontend Web Interface"
 +            Frontend[OwnTracks Frontend<br/>Port: 80<br/>Nginx Web Server]
 +        end
 +    end
 +    
 +    %% Storage
 +    subgraph "Data Storage"
 +        MosquittocConf[(Mosquitto Config<br/>./mosquitto/config)]
 +        MosquittoData[(Mosquitto Data<br/>./mosquitto/data)]
 +        MosquittoLog[(Mosquitto Logs<br/>./mosquitto/log)]
 +        RecorderStore[(Location Data<br/>./store)]
 +        AuthFile[(Authentication<br/>./auth/users.auth)]
 +    end
 +    
 +    %% Data Flow - Location Publishing
 +    Mobile -.->|MQTT Publish<br/>Location Data<br/>Port 1883| MQTT
 +    Mobile -.->|WebSocket Publish<br/>Location Data<br/>Port 9001| MQTT
 +    External -.->|MQTT Publish<br/>Location Data<br/>Port 1883| MQTT
 +    WebApp -.->|WebSocket Publish<br/>Location Data<br/>Port 9001| MQTT
 +    
 +    %% Internal MQTT Subscription
 +    MQTT -->|MQTT Subscribe<br/>Location Topics| Recorder
 +    
 +    %% Data Storage Flow
 +    Recorder --> RecorderStore
 +    MQTT --> MosquittoData
 +    MQTT --> MosquittoLog
 +    
 +    %% Web Interface Flow
 +    Browser -->|HTTP Request<br/>Port 80| Frontend
 +    Frontend -->|HTTP API Calls<br/>Port 8083| Recorder
 +    Recorder -->|JSON Response<br/>Location Data| Frontend
 +    Frontend -->|HTML/JS/CSS| Browser
 +    
 +    %% Configuration and Authentication
 +    MQTT -.-> MosquittocConf
 +    Recorder -.-> AuthFile
 +    
 +    %% WebSocket for Real-time (optional)
 +    MQTT -.->|WebSocket<br/>Port 9001| Browser
 +    
 +    %% Styling
 +    classDef service fill:#e1f5fe,stroke:#01579b,stroke-width:2px
 +    classDef storage fill:#f3e5f5,stroke:#4a148c,stroke-width:2px
 +    classDef external fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px
 +    
 +    class MQTT,Recorder,Frontend service
 +    class MosquittoData,MosquittoLog,RecorderStore,AuthFile,ConfigFile storage
 +    class Mobile,Browser,External external
 +</mermaid>
 ===== 安裝服務 ===== ===== 安裝服務 =====
 ==== Server 端 ==== ==== Server 端 ====
 +  * 安裝與設定目錄檔案配置 <code>
 +.
 +├── auth
 +│   └── users.auth
 +├── docker-compose.yml
 +├── .env
 +└── mosquitto
 +    └── config
 +        ├── mosquitto.conf
 +        └── passwd
 +</code>
   * {{repo>https://raw.githubusercontent.com/tryweb/docker-compose/refs/heads/main/owntracks/docker-compose.yml | docker-compose.yml}}   * {{repo>https://raw.githubusercontent.com/tryweb/docker-compose/refs/heads/main/owntracks/docker-compose.yml | docker-compose.yml}}
-  * 到 .env 內設定你的存取帳號密碼 +  - 到 .env 內設定 recoder 存取 MQTT 的帳號密碼<cli>vi .env</cli> 
-  * {{repo>https://raw.githubusercontent.com/tryweb/docker-compose/refs/heads/main/owntracks/.env.example | .env}}+    * {{repo>https://raw.githubusercontent.com/tryweb/docker-compose/refs/heads/main/owntracks/.env.example | .env}} 
 +  - 產生 MQTT 的設定檔 mosquitto/config/mosquitto.conf <cli> 
 +mkdir -p mosquitto/config/ 
 +vi mosquitto/config/mosquitto.conf 
 +</cli> 
 +    * {{repo>https://raw.githubusercontent.com/tryweb/docker-compose/refs/heads/main/owntracks/mosquitto/config/mosquitto.conf | mosquitto/config/mosquitto.conf}}  
 +  - 產生可存取 MQTT 的帳號密碼檔<cli> 
 +touch mosquitto/config/passwd 
 +chmod 0770 mosquitto/config/passwd 
 +</cli> 
 +  - 設定直接存取 OTRecorder 的帳號密碼檔 auth/users.auth (不透過 MQTT 直接存取) <cli> 
 +mkdir -p auth 
 +vi auth/users.auth 
 +</cli> 
 +    * {{repo>https://raw.githubusercontent.com/tryweb/docker-compose/refs/heads/main/owntracks/auth/users.auth | auth/users.auth}}  
 +  - 第一次啟動服務 <cli> 
 +docker compose pull 
 +docker compose up -d 
 +</cli> 
 +  - 查看相關紀錄 
 +    * docker compose 紀錄 <cli>docker compose logs -f</cli> 
 +    * MQTT 紀錄 <cli>tail -f mosquitto/log/mosquitto.log</cli> 
 +  - 建立 Recoder 存取 MQTT 的帳號密碼(定義在 .env 內) Exp. recorder / recorderpass<cli> 
 +docker compose exec mosquitto chown root:root /mosquitto/config/passwd 
 +docker compose exec mosquitto mosquitto_passwd /mosquitto/config/passwd recorder 
 +</cli>輸入兩次密碼 recorderpass 即可  
 +  - 建立 jonathan 存取 MQTT 的帳號密碼 Exp. jonathan / mypassword<cli> 
 +docker compose exec mosquitto mosquitto_passwd /mosquitto/config/passwd jonathan 
 +</cli>輸入兩次密碼 mypassword 即可 
  
 ==== 手機端 ==== ==== 手機端 ====
-  * Connection 要選 HTTP \\ {{:tech:screenshot_20250408-090124.jpg?400|}}+=== 直接連 OTRecoder === 
 +  * Connection 要選 HTTP  
 +    * ++看畫面|{{:tech:screenshot_20250408-090124.jpg?400|}}++
   * 設定 Endpoint 的 URL Exp. http://192.168.11.200:8083**/pub** **一定要加上 /pub 才可以**   * 設定 Endpoint 的 URL Exp. http://192.168.11.200:8083**/pub** **一定要加上 /pub 才可以**
-  * 設定 Credentials 的 Username 與 Password **要和 .env 內設定的相同** \\ {{:tech:screenshot_20250408-090134.jpg?400|}}+  * 設定 Credentials 的 Username 與 Password **要和 auth/users.auth 內設定的相同**  
 +    * ++看畫面|{{:tech:screenshot_20250408-090134.jpg?400|}}++
  
-===== 透過 Cloudflare Tunnel 設定對外服務 ===== +=== 連 MQTT (才可看到 Friends) === 
-  * 以 Endpoint 的 URL Exp. http://192.168.11.200:8083/pub 為例, 預計對應成 https://rec-track.ichiayi.com \\ {{:tech:螢幕擷取畫面_2025-04-08_134422.png?800|}}+  * Connection 要選 MQTT  
 +    * ++看畫面|{{:tech:screenshot_20250526-170934.png?400|}}++ 
 +  * 設定 Endpoint  
 +    * Host/Port Exp. 192.168.11.200 / 9001 (WebSocket) 
 +    * Client ID Exp. jonathan (建議和 Credentials 的 Username 相同  
 +    * Use WebSockets : 啟用 
 +    * ++看畫面|{{:tech:screenshot_20250526-180420.png?400|}}++ 
 +  * 設定 Identification 
 +    * Device ID Exp. pixel9 
 +    * Tracker ID Exp. jt (會顯示在 Android 的地圖上) 
 +      * ++看畫面|{{:tech:screenshot_20250526-172824.png?400|}}++ 
 +  * 設定 Credentials (設定在 mosquitto/config/passwd) 
 +    * Username Exp. jonathan 
 +    * Password Exp. mypassword 
 +  * TLS 關閉 
 +  * Parameters 
 +    * Keepalive : 3600 
 +    * Clean Session : 啟動 
 +  * ++看設定畫面|{{:tech:screenshot_20250526-171046.png?400|}}++
  
 ===== 管理端可以看到畫面 ===== ===== 管理端可以看到畫面 =====
-  * Frontend - http://192.168.11.200 \\ {{:tech:螢幕擷取畫面_2025-04-08_134912.png|}} +  * Frontend - http://192.168.11.200 \\ {{:tech:螢幕擷取畫面_2025-05-26_181739.png|}} 
-  * OTRecorder - http://192.168.11.200:8083 \\ {{:tech:螢幕擷取畫面_2025-04-08_135120.png|}} \\ +  * OTRecorder - http://192.168.11.200:8083 \\ {{:tech:螢幕擷取畫面_2025-05-26_183252.png|}} 
 + 
 +===== 設定 Reverse Proxy 方式 ===== 
 +  * 這樣的設定好處是, 手機連上哪個網路都可以立即回報, 不用等回到可連上內網的網路才統一回報 
 + 
 +==== 透過 Cloudflare Tunnel 設定 OTRecorder 對外服務 ==== 
 +<note>目前 MQTT + WebSocket 服務還無法成功透過 Cloudflare Tunnel 設定方式提供對外服務</note> 
 +  * 以 Endpoint 的 URL Exp. http://192.168.11.200:8083/pub 為例, 預計對應成 https://rec-track.ichiayi.com \\ {{:tech:螢幕擷取畫面_2025-04-08_134422.png?800|}} 
 + 
 +==== 透過 Nginx Proxy Manager 設定 MQTT + WebSocket 對外服務 ==== 
 +  * 以 Endpoint 的 Host: mqtt.ichiayi.com Port:80 為例, 預計對應成 http://192.168.11.200:9001 \\ {{:tech:螢幕擷取畫面_2025-05-26_182730.png?800|}}  
 + 
 + 
 + 
 +===== 常見問題 ===== 
 +==== 1. 合併兩個 rec 作法 ==== 
 +  * 因為在相同裝置 Exp. Android, 修改設定中的 Device ID, Username 就會在主機端自動建立不同的目錄 Exp. Device ID : pixel9 , Username : jonathan 就會在 store/rec 與 store/last 都會建立出 jonathan/pixel9 的目錄 
 +  * 如果想要將 store/rec 內的紀錄檔 Exp. 2025-05.rec 進行合併 Exp. jonathan/jonathan/2025-05.rec -> jonathan/pixel9/2025-05.rec  
 +    - 備份與合併 2025-05.rec <cli> 
 +cd store/rec/jonathan/pixel9 
 +cp 2025-05.rec 2025-05.rec.bak 
 +cat ../jonathan/2025-05.rec >> 2025-05.rec 
 +</cli> 
 +    - 將合併後的檔案依照資料時間進行排序 <cli> 
 +sort -s -k 1 2025-05.rec -o 2025-05.rec 
 +</cli> 
 +    - 刪除 data.mdb 資料檔<cli> 
 +cd 
 +rm -f store/ghash/data.mdb 
 +</cli> 
 +    - 重起 otrecorder 服務<cli> 
 +docker compose restart otrecorder 
 +docker compose logs -f otrecorder 
 +</cli> 
 + 
 +==== 2. 刪除特定 user 或 device 作法 ==== 
 +  * 因為在相同裝置 Exp. Android, 修改設定中的 Device ID, Username 就會在主機端自動建立不同的目錄 Exp. Device ID : jonathan , Username : jonathan 就會在 store/rec 與 store/last 都會建立出 jonathan/jonathan 的目錄 
 +  - 針對這檔案型的作法就是直接刪除檔案 Exp. 刪除 jonathan/jonathan <cli> 
 +cd 
 +rm -rf store/rec/jonathan/jonathan/ 
 +rm -rf store/last/jonathan/jonathan/ 
 +rm -f store/ghash/data.mdb 
 +</cli> 
 +  - 重起 otrecorder 服務<cli> 
 +docker compose restart otrecorder 
 +</cli> 
 +  - 刪除 MQTT 的資料後, 重起服務<cli> 
 +rm mosquitto/data/mosquitto.db 
 +docker compose restart mosquitto 
 +</cli> 
 +  - 在 Android 需要進入 Friends-> 點選要刪除的項目 Exp. jt -> 將畫面底下訊息上拉 -> 點選 CLEAR  
 +    * ++看畫面|{{:tech:screenshot_20250526-191959.png?400|}}++ 
 + 
 +==== 3. 匯出特定 user 或 device 在特定日期區間的軌跡資料作法 ==== 
 +  * 語法 : <code>http://{your-recorder-ip}:8083/api/0/locations?user={user}&device={device}&from={start_dt}&to={end_dt}&format=[geojson|gpx]</code> 
 +  * Exp. Device ID : pixel9 , Username : jonathan 在 2026-02-05 ~ 2026-02-23 的 gpx 軌跡資料<cli> 
 +curl -o mytrack_20260205-0223.gpx "http://owntracks-api.my.ichiayi.com/api/0/locations?user=jonathan&device=pixel9&from=2026-02-05T00:00:00Z&to=2026-02-23T23:59:59Z&format=gpx" 
 +</cli>
  
 ===== 參考網址 ===== ===== 參考網址 =====
  • tech/owntrack.1744091554.txt.gz
  • 上一次變更: 2025/04/08 13:52
  • 由 jonathan