行程管理 PWA — 拍照辨識會議通知，自動存進月曆

為什麼要做這個作品

把紙本通知單、LINE 訊息、ERP 截圖，用手機拍一下就自動變成行事曆，省掉每天重複手打行程的時間。

上班族的行程通知來自四面八方：主管在 LINE 群貼「明天 10 點開會」、行政發 ERP 截圖說「請參閱附件日期」、會議室張貼紙本活動時程——每一筆都要自己打進手機行事曆。

看起來不麻煩，但每天這樣重複三到五次，一週下來加起來其實不少時間。更麻煩的是，打錯時間或忘記打，行程就消失了，等到被同事問「你今天有空嗎」才發現根本沒記到。

這個 App 就是為了解決這個反覆重複又低價值的勞動。

用到的工具與架構

• Google Gemini AI：負責辨識照片或文字中的行程資訊（日期、時間、地點、會議名稱）
• PWA（Progressive Web App）：安裝到手機桌面，使用體驗和原生 App 相近
• IndexedDB：行程資料全存在本機瀏覽器，不上雲端，隱私由自己掌控
• Vercel：部署上線，域名 timetrack.yisuns.com

以前怎麼做／現在怎麼做

以前：看到通知 → 切換到行事曆 App → 手動打標題、日期、時間、地點 → 儲存 → 再切回來繼續工作。遇到英文或中文夾雜的通知，還要思考一下再打。遇到 PDF 則要先開檔、找到日期再手動抄。

現在：

flowchart TD
    A["開始：收到會議通知"] --> B{"選擇輸入方式"}
    B -->|紙本／截圖| C["開啟相機拍照"]
    B -->|PDF 或 Word| D["上傳 ERP 通知單"]
    B -->|同事分享 .ics| E["匯入日曆附檔"]
    B -->|LINE 複製文字| F["貼上文字解析"]
    C --> G["Gemini AI 辨識行程資訊"]
    D --> G
    F --> G
    E --> H["解析行程資料"]
    G --> H
    H --> I["確認行程內容、一鍵儲存"]
    I --> J{"後續應用"}
    J -->|匯出| K["下載 .ics 到 Outlook／Google"]
    J -->|分享給同事| L["複製分享連結"]
    J -->|跨裝置同步| M["下載備份檔傳到另一台"]
    K --> N["完成"]
    L --> N
    M --> N

flowchart TD
    A["開始：收到會議通知"] --> B{"選擇輸入方式"}
    B -->|紙本／截圖| C["開啟相機拍照"]
    B -->|PDF 或 Word| D["上傳 ERP 通知單"]
    B -->|同事分享 .ics| E["匯入日曆附檔"]
    B -->|LINE 複製文字| F["貼上文字解析"]
    C --> G["Gemini AI 辨識行程資訊"]
    D --> G
    F --> G
    E --> H["解析行程資料"]
    G --> H
    H --> I["確認行程內容、一鍵儲存"]
    I --> J{"後續應用"}
    J -->|匯出| K["下載 .ics 到 Outlook／Google"]
    J -->|分享給同事| L["複製分享連結"]
    J -->|跨裝置同步| M["下載備份檔傳到另一台"]
    K --> N["完成"]
    L --> N
    M --> N

整個流程最快三秒：拍照 → AI 解析 → 確認 → 存入月曆。

一次實際跑起來會發生什麼

以「主管在 LINE 發通知」這個最常見的情境為例：

1. 複製 LINE 上的那段文字
2. 打開 App，點「貼上文字解析」
3. 貼上，Gemini 自動把日期、時間、地點、會議名稱拆出來填好
4. 確認一下有沒有辨識錯誤，點「儲存」
5. 月曆上立刻出現這場會議，附帶 15 分鐘前提醒

遇到紙本通知單就改成拍照，遇到同事轉發的 .ics 附件就直接匯入——輸入方式不同，輸出都是月曆裡的一筆行程。

新增行程支援五種輸入方式，從紙本到 LINE 文字全包，不限格式。

現在的具體成果

App 已上線在 timetrack.yisuns.com，核心功能全部可用：

• 五種輸入方式：拍照、相簿圖片（JPG/PNG）、PDF/Word（ERP 通知單）、.ics 日曆附檔、貼上文字
• 每日 10 次免費辨識：不需要 API Key 就能試用，伺服器雙 Key 自動備援；需要大量辨識時填入自己的 Gemini API Key 不限次數
• 月曆多種視角：月/週/列表/年，切換不同時間尺度瀏覽行程
• 匯出到 Outlook / Google 日曆：下載 .ics 附件，手機點開自動加入系統行事曆
• 分享功能：把單一行程分享連結給同事，對方點開 App 就能一鍵存入自己的月曆，不耗 AI 配額
• 跨裝置同步：下載備份檔傳到另一台裝置匯入，資料全程不經雲端
• 四種視覺主題：企業專業、紙本月曆、簡約清晰、繽紛色塊，可依個人喜好切換

API Key 設定：未填入時使用平台配額（每日 10 次），填入自己的 Gemini Key 即可不限次數辨識。

匯出目標可選 Outlook（公司）或 Google 日曆，行程提醒可依需求允許或封鎖。

跨裝置同步透過備份檔完成，A 裝置匯出 → B 裝置匯入，IndexedDB 本機儲存，不需帳號、不上雲端。

設計時做過哪些取捨與調整

不做雲端同步：最直覺的設計是資料上雲、帳號登入，但那代表要維護後端、資料庫、身份驗證——對個人 App 是過度工程。最後選擇 IndexedDB（本機儲存）+ 備份檔匯出/匯入的方式做跨裝置，隱私和維護成本都更低。

跨裝置同步靠備份檔：沒有自動同步，需要手動匯出再匯入。這是已知的限制，但對大多數用戶（把行程從手機同步到電腦）來說，一次匯出就解決，不需要即時同步。

分享連結設計是後來想到的亮點：同事點連結就能把你的行程存進自己的 App，不需要另外傳 .ics 檔，也不用雙方都有 Google 帳號，非常適合辦公室小規模分享。

五種輸入方式：一開始只做拍照，後來發現辦公室情境很多元——有人用 ERP 系統、有人轉傳 .ics、有人直接複製 LINE 文字——才逐步補上其他輸入方式。每一種都指向同一個輸出：月曆裡的一筆行程。

在 AI Agent 迷你課學到的事

上課前，我卡在哪裡

我知道重複打行事曆很浪費時間，也知道「AI 應該能幫我處理這件事」，但就是不知道從哪裡下手。以前試過幾個現成 App，功能不完全符合辦公室情境，又不知道自己能不能做一個。雷蒙的迷你課讓我相信：不需要懂程式底層，只要把問題描述清楚，Claude Code 可以幫你把想法跑起來。

運用中，改變我最多的一個觀念

「先定義問題，再交給 AI 執行。」

課程中有教一個 Skill：「AI 規劃模式 by 雷小蒙：讓 AI 先想清楚再動手（/brainstorm）」，這個功能非常好用。它有幾種模式可以選擇，我是初學者，就選了小白模式，讓 AI 用口語引導我，把發散的想法一步步整理成初步架構，再讓 Claude Code 動手寫程式，省掉了很多盲目踩雷的嘗試。從此每次有新專案想法，我都會先跑一遍 /brainstorm，把用戶情境想清楚再開始，Claude 產出的東西也更接近我要的。

做出來之後，工作方式的具體改變

• 遇到 LINE 通知，不再切換到行事曆手打，拍照或貼上文字三秒搞定
• 辦公室的 OA 系統有許多會議通知，以前會放著忘記，現在拍一下當場存進去
• 同事問「你有沒有空」，打開月曆馬上能回，不用憑印象猜
• 可以隨時知道下一場會議時間，也有溫馨的提示功能，讓我開會不遲到

進一步認識作者

Louis11，上班族，透過雷蒙Claude Code迷你課程學習用 Claude Code 從零開發 PWA。這個行程管理 App 是把工作中真實的摩擦點做成工具解決掉的嘗試——沒有等別人做，而是自己做一個剛好夠用的。更多作品可以在 evoleth.yisuns.com 找到。