Day 30：【高階商務計算機】不到 100 行程式碼進級到精品級 Google AI 商務引擎—30 天極客復盤與開源展望

18th鐵人賽

shaoan_1211

2026-10-03 18:39:10

49 瀏覽

分享至

專案正式上線體驗與開源倉庫

線上體驗 Live Demo：https://410355-collab.github.io/Premium-Business-Calculator/
(強烈建議使用 iPhone Safari 或 Android 手機開啟體驗！)

GitHub 開源倉庫：https://github.com/410355-collab/Premium-Business-Calculator
歡迎提出建議與指導
(開發環境：Google Antigravity IDE + Google Gemini 協同開發)

歷經整整 30 天不間斷的極客開發與文字記錄，這款「高階商務計算機」終於迎來了最終的完賽里程碑。最初想打造這款計算機的初衷，是因為市面上的計算機工具大多格局死板且功能單一，一旦出國旅遊或跨國商務出差，面對複雜的異幣換算、動態稅率與繁雜的發票對帳時，往往只能在計算機與記帳 App 之間頻繁切換。我們希望打造一款兼具自由鍵盤佈局、視覺美學與 AI 智慧對帳的終極商務工具。從最開始一顆按鈕、一個簡單的運算式解析，到如今切割並構建為高度模組化（包含 script.js 核心計算、ai-scan.js 視覺辨識、firebase-sync.js 雲端同步、i18n.js 多國語系與專屬 CSS 樣式集）的模組化架構，整專案已從原本的不到 100 行 HTML 的計算機成長為包含超過 15,000 行純原生 JavaScript、CSS 與 HTML 等多份檔案組合成的精品級商務引擎。

這不僅僅是一次個人技術挑戰，更是一次探索人機協同開發極限的實驗。在沒有依賴任何龐大前端框架（如 React、Vue 或 Angular）的前提下，我們完全依靠 Vanilla JS 與現代 Web API，打造出一個兼具極致性能、奢華視覺與實用商務價值的 PWA Web 應用。

30 天技術演化與架構復盤

回首這 30 天的開發歷程，專案經歷了四個主要的演進階段，每一個階段都解決了商務計算與記帳領域中的核心痛點：

第一階段：基礎算術引擎與極客 UI 研發（Day 1 ~ Day 10）
自建安全運算式解析器與高精度小數處理機制，搭配自訂 CSS 擬物晶體視覺與 Haptic 震動反饋。首創「可拖曳排版」與「動態替換快照」的自由鍵盤，徹底打破傳統計算機固定的按鍵格局。
第二階段：視訊串流、影像處理與地端黑科技（Day 11 ~ Day 20）
導入高科技雷射掃描動畫與 MediaStream 記憶體安全釋放機制；研發 200% 特化多重 Canvas 二值化演算法，結合地端 JavaScript 77 字元台灣發票解碼，實現 0 秒免 Token 瞬間對帳。
第三階段：Gemini AI 雲端視覺與語意深度整合（Day 21 ~ Day 26）
打造三模型容錯降級鏈（gemini-3.5-flash-lite → gemini-3.6-flash → gemini-3.5-flash），並透過結構化 Prompt 工程過濾非記帳雜物；結合 contenteditable 就地修改與即時匯率換算，讓異國發票辨識精準又高可用。
第四階段：體驗極致化、分類演算法與雲端鏡像（Day 27 ~ Day 29）
研發雙維度「即時用餐 vs 藥妝購物」分類判定演算法與手風琴發票聚合面板；建立 Firebase Auth 雲端登入與覆寫 localStorage 攔截器，搭配 HTTP Referrer 金鑰限制，達成全防護的跨裝置無感熱同步。

Antigravity IDE 與 Google Gemini 協同開發心得

在這次 30 天的挑戰中，Google Antigravity IDE 與 Gemini AI 扮演了不可或缺的雙手靈魂。在傳統開發模式下，獨立切割並寫出高達 15,000 行純原生 JavaScript/CSS 並確保無記憶體洩漏與跨裝置相容性，往往需要耗費數個月的試錯成本。

透過 Antigravity 的 agentic AI 協同開發，開發流程產生了質的飛躍：

模組化架構決策與代碼審查：當專案規模迅速擴張時，Gemini 能協助進行優雅的檔案切割（如獨立出 ai-scan.js 與 firebase-sync.js），並在如「發票辨識失敗時模型如何無縫降級」或「如何覆寫 localStorage.setItem 進行 Debounce 同步」等場景中給出具備高度設計模式美感的架構建議。
重構與記憶體防爆測試：在處理 Canvas 高解析度影像採樣時，Gemini 協助設計了硬性 4000px 防爆上限，成功防範了 Safari 瀏覽器的記憶體崩潰問題。
開發效率倍增：AI 扮演了最強大的 pair programmer，負責處理繁瑣的 DOM 操作與跨瀏覽器相容性細節，讓開發者能將 100% 的精力專注在商務邏輯與視覺體驗的雕琢上。

極客美學與金融級商務應用的融合

我們始終相信，工具類軟體不應該是冰冷而單調的。這款高階商務計算機證明了：強大的商務功能與華麗的極客美學完全可以完美共存。

我們在專案中融合了毛玻璃玻璃擬態（Glassmorphic UI）、霓虹雷射掃描光束、FLIP 像素對調動畫以及 Haptic 觸覺反饋。當使用者按下計算或掃描發票時，每一次微動畫與觸控反饋都能帶來儀式感般的流暢體驗。這打破了大眾對「計算機與記帳軟體都很醜陋」的刻板印象。

未來開源路線圖與深度技術展望

30 天鐵人賽的結束，標誌著本專案正式邁入社群共建與技術演進的新里程。我們已將所有程式碼 100% 開源於 GitHub，未來將針對以下五大核心領域進行深度升級與技術探索：

WebGPU 與 WebAssembly 地端端側 AI 模型（On-Device WebLLM）
目前影像辨識依賴 Gemini 雲端 API，若在飛機上或極端弱網環境下無法使用。未來計劃導入 WebGPU 與 Wasm 跑輕量化 Vision-Language 小模型（如 SmolVLM 或 Florence-2），達成完全不需要網路、0 延遲且 100% 隱私保護的本地端影像發票解析。
WebAuthn Passkey 生物辨識與零知識加密（Zero-Knowledge Encryption）
為符合金融級安全標準，規劃導入 WebAuthn（Touch ID / Face ID）免密碼指紋解鎖，並在前端將 bCalc_history 以 AES-GCM 金鑰加密後才上傳至 Firebase，確保伺服器端永遠無法讀取使用者的敏感記帳明細。
企業報稅與政府電子發票載具 API 整合（Tax & E-Invoice Integration）
預計開放串接財政部電子發票整合服務平台 API 與企業 ERP 系統（如 QuickBooks、Xero），讓掃描匯入的收據與明細能直接一鍵產生標準化 XML/CSV 扣抵憑證，大幅簡化財務人員與自由職作者的報帳流程。
開放式外掛腳本與客製化公式生態（Plugin Engine & Custom Formula）
設計微型 Plugin 架構，允許社群開發者自行撰寫 JS 擴充腳本（例如：自動對算各國消費稅退稅率、外幣虛擬貨幣動態即時報價、房貸分期還款試算模組），並透過外掛商店（Marketplace）讓使用者自由載入。
多裝置即時協同與 WebSocket 共享算盤（Multi-Device Live Sync）
運用 WebRTC 或 WebSocket 技術建立「多人即時商務會議視訊算盤」，讓遠端團隊在進行跨國採訪、招標比價時，雙方能實時在各自的手機螢幕上共用同一張動態鍵盤與計算螢幕，異動毫秒級同步呈現在眼前。