Tricount Web：把現有帳本做成自己的報表工具

結論#

透過 GitHub Pages 負責操作介面與報表，再使用 Cloudflare Worker 串接 Tricount，可以延伸出新增支出、結算、統計與匯出等功能。

適合用在哪裡#

已經有 Tricount 帳本，希望繼續沿用原本資料。
想增加分類統計、支出趨勢、成員負擔等自訂報表。
前端希望維持 GitHub Pages 靜態部署。
可以接受使用非官方 API，並承擔 API 改版後需要調整的風險。

流程步驟#

1. 使用 Cloudflare Worker 串接 Tricount#

整體架構保持簡單：

1
GitHub Pages
2
    ↓ HTTPS
3
Cloudflare Worker
4
    ↓
5
Tricount API

前端只需要呼叫自己的 Worker：

1
const API_BASE = "https://example.workers.dev";
2

3
// 前端透過 Worker 取得帳本資料
4
const response = await fetch(`${API_BASE}/api/group`);
5
const data = await response.json();

Worker 主要負責：

呼叫 Tricount API。
處理必要的 Request Header。
控制允許的 API 操作。
避免敏感設定直接出現在前端程式碼。 Worker 不需要做成完整後端，只負責 API Proxy 即可。

2. 在前端實作記帳、結算與報表#

取得帳本資料後，大部分統計功能可以直接在瀏覽器處理。

功能	處理位置
讀取帳本	Worker → Tricount
新增／修改支出	Worker → Tricount
成員資料	Worker → Tricount
分類統計	Browser
每月支出趨勢	Browser
個人支付／負擔	Browser
結算建議	Browser
CSV 匯出	Browser

例如計算分類總額：

1
const totals = {};
2

3
expenses.forEach(item => {
4
  // 依分類累計支出
5
  totals[item.category] =
6
    (totals[item.category] ?? 0) + item.amount;
7
});

像圓餅圖、月支出趨勢與成員統計，都可以在前端計算後再交給 Chart.js 等圖表套件顯示。

3. 用 GitHub Actions 自動發布網站#

如果原始碼放在私人 Repository，而 GitHub Pages 放在另一個公開 Repository，可以使用 GitHub Actions 自動部署。

1
Private Repository
2
      ↓ git push
3
GitHub Actions
4
      ↓ build
5
Public Pages Repository
6
      ↓
7
指定子目錄
8
      ↓
9
GitHub Pages

部署用 Token 放在：

1
Settings
2
→ Secrets and variables
3
→ Actions
4
→ Repository secrets

例如：

1
TOOLS_DEPLOY_TOKEN = ********

Worker URL 這類非機密設定則放在 Repository Variables：

1
API_BASE = https://example.workers.dev

之後只需要：

1
git push

GitHub Actions 就會自動 Build 並更新 GitHub Pages。

流程圖#

1
flowchart TD
2
    A[使用者開啟 GitHub Pages] --> B[輸入 Tricount 分享連結]
3
    B --> C[前端呼叫 Cloudflare Worker]
4
    C --> D[Worker 呼叫 Tricount API]
5
    D --> E[取得帳本資料]
6
    E --> F[回傳 GitHub Pages]
7
    F --> G[記帳 / 結算]
8
    F --> H[報表 / 統計]

補充#

非官方 API 有維護風險：Tricount 改版後，原本使用的 Endpoint 或 Header 可能需要調整。
不要把 Token 放進前端：送到瀏覽器的 JavaScript 基本上都能被查看。
Worker 要限制 API 行為：不要直接做成任意 URL 都能代理的公開 Proxy。

指令 / 範例整理#

Click to expand

1
# 前端
2
GitHub Pages
3
→ 呼叫 API_BASE
4

5
# API Proxy
6
Cloudflare Worker
7
→ 呼叫 Tricount API
8

9
# GitHub Actions Secret
10
TOOLS_DEPLOY_TOKEN
11

12
# GitHub Actions Variable
13
API_BASE=https://example.workers.dev
14

15
# 發布
16
git push

收尾#

這個架構的核心很單純：Tricount 負責帳本資料，GitHub Pages 負責操作與報表，Cloudflare Worker 負責 API 串接。

各做各的，乾淨很多，也比較不會一路長成後端巨獸 ( ˘ω˘ )