Stephen 的戰地筆記

業務拜訪紀錄工具：陌生開發 Check-in 從點子到實作

工具開發#ai#technology#productivity#business#software-development

軟體開發過程往往充滿挑戰，一個看似簡單的概念從構思到實際上線，可能經歷多次架構調整與技術選型的轉折。本文分享一個解決業務人員陌生開發記錄問題的小工具開發過程，從需求分析、技術選型到實際落地的完整歷程。

Image generated using ChatGPT and DALL·E

專案背景與動機

本專案源於公司技術顧問 Spencer 的熱情分享。透過他的引導，我初次體驗到 AI Agent 結合 MCP (Machine Cognition Protocol) 的強大功能，這撬動了我思考如何利用技術工具為業務團隊賦能的契機。

在開發過程中，我使用了 Visual Studio Code 與 Claude 模型（透過 VSCode Claude 擴充功能）進行程式碼輔助開發，以及 Gemini-2.5-Pro-Exp-03–25 協助解決部分技術問題。這些 AI 工具的輔助進一步驗證了本專案的核心理念 — AI 技術應用於輔助而非取代開發者，讓人類專注於更具創造性的工作。

  • 首次對話時間：2025年4月10日 下午 4:20 左右
  • 目前對話時間：2025年4月14日 晚上 9:51 左右

體驗這些工具後，產生了一個關於技術價值的核心觀點：科技應當賦能人類，而非取代人類。具體而言，技術工具應協助團隊成員減少重複性工作，使其能專注於更具價值的思考與人際互動。

公司業務團隊今年初才開始進行地面陌生開發工作。現有的工作流程中，業務人員在拜訪餐廳時使用手機錄音，待返家後再重聽錄音並手動記錄拜訪資訊。此方法雖然可行，但效率低下且容易出錯，分散了業務人員應專注的客戶互動精力。

此專案旨在簡化資料登記流程，讓業務團隊能將更多時間與精力用於與客戶建立關係，而非耗費在後續的資料整理工作上。

需求分析

深入了解業務團隊的工作流程後，發現當前拜訪記錄方式存在以下問題：

  1. 時間效率低：業務人員每次拜訪後需花費 5–10 分鐘整理錄音和筆記
  2. 資料完整性差：現場快速記錄的資訊常不完整或難以辨識
  3. 格式不統一：團隊成員使用不同方式記錄（紙本、電子表格、即時通訊）
  4. 資訊分散：管理者難以即時掌握團隊動態和拜訪成效
  5. 難以數據化：缺乏標準化資料結構，難以進行後續分析和策略調整

對於剛開始進行地面開發的團隊，這些問題尤其明顯。當每位業務人員每天拜訪 8–10 家餐廳時，低效的記錄方式累計起來會顯著影響團隊整體效率和士氣。

解決方案設計

根據分析結果，確立了核心需求：

  • 簡化資料記錄流程，減少業務人員的文書負擔
  • 實現資料自動整合，便於管理和分析
  • 提供直覺化介面，確保使用門檻低
  • 優化業務人員的時間分配，使其能更專注於客戶互動

考量到業務人員多在戶外工作的特性，決定開發一個行動網頁應用程式(PWA)，無需安裝即可使用，同時確保操作流程簡潔高效。

技術選型考量

初期技術方案計劃充分利用 Google 生態系統：

  • 前端：HTML/CSS/JavaScript 建構輕量級網頁
  • 後端：Google App Script 作為 Web API
  • 資料儲存：Google Sheets 作為結構化資料庫
  • 媒體檔案：Google Drive 儲存照片

此方案看似理想：技術門檻低、整合性高且開發速度快。然而實際部署時，卻遇到了跨域資源共用(CORS)問題，導致架構需要重新評估。

技術挑戰與解決方案

CORS 問題與架構調整

本地開發階段一切順利，但當前端部署到 Zeabur 平台後，出現標準 CORS 錯誤：

Access to fetch at 'https://script.google.com/...' from origin '...' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present...

嘗試了多種解決方案：

  1. 在 App Script 中實現 doOptions(e) 函數處理預檢請求
  2. 修改 App Script 部署設定的執行身份和存取權限
  3. 簡化前端請求，移除不必要的標頭

多次嘗試後，決定重新設計架構，採用 Node.js 作為後端：

前端 PWA → Node.js 後端 (on Zeabur) → Google API

此架構變更具有多項優勢：

  • 完全控制 CORS 設定
  • 使用官方 googleapis 套件提高穩定性
  • 標準化錯誤處理與日誌記錄

實施後的技術架構：

  • 前端：HTML/CSS/JavaScript + Google Maps API
  • 後端：Node.js + Express
  • 資料儲存：Google Sheets + Google Drive
  • 部署：Zeabur 平台

前端設計優化

前端設計方面，最初計劃是讓後端搜尋附近地點，前端僅顯示列表供選擇。實際測試發現，Google Places API 的 nearbySearch 結果準確度有時不盡理想，可能無法識別地圖上明顯可見的店家。

考量使用者體驗，改採用 Google Maps JavaScript API，在前端實現互動式地圖：

  1. 以使用者 GPS 位置為地圖中心點
  2. 直接在前端執行 PlacesService.nearbySearch
  3. 將結果以標記(Marker)顯示於地圖上
  4. 點擊標記後顯示資訊視窗，包含店家資訊和操作按鈕

此設計使業務人員能直觀地查看周圍餐廳位置，顯著提升了使用體驗和定位準確性。

部署時的模組載入問題

Node.js 後端部署到 Zeabur 平台時，遇到了非預期的模組載入錯誤：

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'googleapis'

此錯誤令人費解，因為部署日誌顯示 npm install 已成功執行並安裝了所有依賴項。

經過多次測試後發現，暫時移除 googleapis 相關程式碼後的簡化版本能成功部署，而後再重新部署完整版本時，錯誤消失。推測可能與 Zeabur 首次部署或快取機制有關。

此經驗展示了軟體開發中不可預見問題的處理思路：關注核心功能，隔離問題區域，通過漸進式測試確定解決方案。

功能實現

最終實現的工具包含三個核心功能模組：

地圖定位 Check-in

  • 基於 GPS 自動定位當前位置
  • 地圖視圖顯示周邊可能拜訪的店家
  • 點選標記進行 Check-in，自動記錄店名、地址和開始時間
  • 使用 Google Maps Places API 確保位置數據準確性

結構化 Check-out 表單

  • 拜訪結束時填寫簡化表單
  • 照片上傳功能，直接拍攝店面或名片
  • 以下拉選單標準化接觸對象類別（店員/店長/老闆）
  • 條件式表單邏輯：「是否再訪」選項決定後續欄位顯示
  • 自動計算拜訪時長，減少人工計算錯誤

後台數據整合

  • 資料自動存入 Google Sheets 指定工作表
  • 照片統一管理於 Google Drive 特定資料夾
  • 結構化數據格式便於後續分析與報表生成
  • 管理者可即時查看團隊動態與拜訪成效

實施成果與效益

工具上線一週後的效益評估：

時間效率提升

  • 每次拜訪後的記錄時間從 5–10 分鐘縮減至不到 1 分鐘
  • 團隊整體每日節省約 40–80 分鐘，可增加 1–2 家有效拜訪

資料品質改善

  • 位置資訊準確度大幅提升（直接來自 Google Maps）
  • 時間記錄精確化，不再依賴記憶或估算
  • 照片佐證增強資料可信度與完整性

管理透明度增加

  • 管理層可實時掌握團隊活動與拜訪進度
  • 視覺化證據提供遠端監督可能性
  • 標準化數據便於績效評估與策略調整

值得注意的是，團隊接受度遠超預期，未出現預想的使用抗拒。分析原因在於工具確實解決了實際痛點，且操作簡便直覺，整合入現有工作流程自然順暢。

反思與經驗總結

技術選型的重要性

本專案最大的教訓在於技術選型的重要性。最初選擇 Google App Script 看似合理 — 與現有生態系統整合度高、開發門檻低。然而實際實施過程中，CORS 問題成為難以逾越的障礙，最終導致架構重組。

這一過程證明，技術選型應考慮：

  • 實際部署環境的限制與挑戰
  • 跨系統整合可能出現的問題
  • 技術棧的穩定性與標準合規性
  • 擴展性與長期維護難度

技術評估時花費的時間通常能節省後期開發中數倍的時間成本。

專注於核心問題解決

專案成功的關鍵在於始終關注核心問題 — 提升業務人員拜訪效率，減少非核心工作負擔。每個設計決策都回歸到一個問題：這是否能讓業務人員更專注於客戶互動？

實用性勝於複雜性的原則貫穿整個開發過程。最終產品雖功能簡潔，但準確解決了真實痛點，因此獲得使用者的積極採用。

技術賦能而非取代的理念

本專案體現了科技賦能而非取代人類的理念。工具價值在於：

  • 減少重複性文書工作，釋放業務人員時間
  • 標準化流程，提高整體效率
  • 集中化資料，優化管理決策
  • 支持而非限制人員的創造性工作

在科技快速發展的環境中，理解技術的真正價值在於如何支持人類專注於高價值活動尤為重要。

結語

本專案證明，有效的技術解決方案不必複雜或昂貴，關鍵在於精確理解問題核心並選擇適當技術路徑。透過打造這個簡單卻實用的 Check-in 工具，成功提升了業務團隊的工作效率，讓他們能專注於高價值的客戶互動。

在技術快速發展的今日，科技的根本價值在於賦能而非取代。開發者應聚焦於如何透過技術工具減少人員在重複性工作上的耗費，使其能將時間與精力投入更具創造性和價值的活動中。

本專案的成功在於其實用性與整合性，在技術選型上的挑戰與調整過程，亦為類似專案提供了寶貴經驗。希望這些心得能對面臨類似業務效率問題的團隊有所啟發。

GitHub Repo: https://github.com/keweikao/coldvisit_checkin_tool

作者：高克瑋 — iCHEF 營運總監

*本文由作者與 AI 助手 Claude 合作撰寫*