====== 自建 OwnTrack 追蹤個人 GPS 軌跡服務 ======
  * 雖然 Google Map 有提供這功能, 不過很多人想記錄自己軌跡, 但又不想讓 Google 掌握自己的隱私, 就會有這個需求
  * 官網 - https://owntracks.org/
    * 手機 APP [[https://itunes.apple.com/us/app/mqttitude/id692424691?mt=8|iOS]] [[https://play.google.com/store/apps/details?id=org.owntracks.android|Android]]
  * 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 端 ====
  * 安裝與設定目錄檔案配置 <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}}
  - 到 .env 內設定 recoder 存取 MQTT 的帳號密碼<cli>vi .env</cli>
    * {{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 即可 

==== 手機端 ====
=== 直接連 OTRecoder ===
  * Connection 要選 HTTP 
    * ++看畫面|{{:tech:screenshot_20250408-090124.jpg?400|}}++
  * 設定 Endpoint 的 URL Exp. http://192.168.11.200:8083**/pub** **一定要加上 /pub 才可以**
  * 設定 Credentials 的 Username 與 Password **要和 auth/users.auth 內設定的相同** 
    * ++看畫面|{{:tech:screenshot_20250408-090134.jpg?400|}}++

=== 連 MQTT (才可看到 Friends) ===
  * 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-05-26_181739.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|}}++

===== 參考網址 =====
  * https://github.com/owntracks/docker-recorder
  * https://github.com/owntracks/recorder
  * https://www.youtube.com/watch?v=8K8qmPBq8ZU

{{tag>track}}