EP-34｜翻車啦，本想幫智慧卡路里追蹤器做簡易的前端，居然搞了 8 小時以上，用 Google試算表當後端的問題在哪？
分享卡路里追蹤器升級成家庭版的8小時踩雷之旅！從GAS檔案分離失敗、Cursor開發困擾、Google Cloud權限設定，到AI除錯的慘痛教訓。最大心得：用 AI 除錯不如重寫
翻車了翻車了。
上週我做了一個智慧卡路里追蹤器，很陽春，只有一個 Google 表單以及Google 試算表，然後讓AI幫我寫簡單的小程式，放在 Google 試算表的 Google App Script(GAS) 內。
因為在功能上只能寫入 Google 試算表，我希望能夠展現今天、昨天吃了什麼的記錄，以及一週的熱量記錄。
又考量到這支程式只有我個人使用太可惜了，乾脆讓我家人也一起用。
於是我開始規劃新功能。
從下午 1 點開始動工，本來想說很快就搞定了。
沒想到一改就改到晚上 9 點！足足改了 8 個小時啊！！！
這過程中踩的雷實在太多了，讓我來跟你們分享一下這場「災難」。
本次修改目標
介面改造
直接放棄 Google 表單，改在 GAS 裡面自己寫 index.html，然後嵌入到 Google 協作平台
這樣才能做到 RWD 響應式設計，在手機、平板、電腦上都能正常使用
功能升級
除了原本的上傳食物照片功能，還加了：
基礎代謝率計算器：填入性別、年齡、身高、體重、活動量等資料，系統會自動計算基礎代謝率，記住我最後一次輸入的資料
營養摘要查詢：自動載入今天和昨天的三餐記錄。如果資料不夠的話，就顯示最接近的兩天記錄
近七日熱量統計：顯示最近 7 天的每日熱量攝取狀況，還會搭配我的基礎代謝率，讓我知道有沒有吃太多或太少
權限設定
因為有用到大型語言模型的 API，加上我也沒打算靠這個賺錢，所以設定成只給家人使用。這就需要在 Google Cloud Console 那邊設定權限。
看起來好像很簡單，實際做起來卻不容易。
修改心得分享
好了，現在來分享一下我踩過的那些雷，希望大家不要重蹈覆轍！
1. 部署網頁嵌入 Google 協作平台
首先說說網頁部署的部分。因為這個 App 會用到相機功能，所以最適合在手機上使用。當然做成真正的手機 App 是最理想的，但那又是另一個等級的挑戰了。
我這邊只是用 GAS 簡單處理，還沒打算真的上架，所以只要能做到響應式設計就夠了。
做法其實很簡單：在 GAS 裡加上 index.html，然後按右上角的「部署」，系統就會給你一個網址。
這裡我踩到了第 1 個雷： 如果你想直接在 index.html 裡加響應式的 CSS 語法，基本上是沒用的（我親身試過）。如果有人成功過，拜託告訴我怎麼做！
最後我的解決方案是：另外在 Google 雲端硬碟建立 Google 協作平台，然後把上面的網址嵌入進去，這樣就能在手機上正常瀏覽了。
感謝 Threads 上的網友提供這個方法！
2. 採用 Cursor 修改 GAS 程式有點麻煩
在上週，我是用 Gemini 網頁版來生成程式。可是這次要多做一些功能，所以我就用 Cursor 來協助我編輯程式。
如果你不知道 Cursor 是什麼，簡單說就是一個有 AI 功能的程式編輯器，可以顯示語法高亮、協助排版，還能跟 AI 對話。
可是用 Cursor 寫程式也是挺麻煩的，因為原本在 GAS 內只有兩個檔案，
index.html
可是這次檔案有點大，行數已經破千了，所以我只好拆開成 7 個檔案。
這次程式變大了，行數破千，所以我拆成了 7 個檔案。每次在 Cursor 改完，就要回到 GAS 手動複製貼上對應的程式碼，有時還會貼錯檔案⋯⋯
然後在這裡我踩到了第 2 個雷。
有網頁設計經驗的人都知道，你可以把 JavaScript 和 HTML 分開放，比如 index.html 和 script.js，然後在 HTML 裡引用 JS 檔案。
例如把檔名命名為 index.html 與 script.js ，在 index.html 指定加入 script.js 。
但是在 GAS 內該怎麼做？
Claude 和 ChatGPT 都說，在 GAS 可以建立 index.html 和 javascript.html，然後在 code.gs 加上這個函數：
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
然後在 index.html 裡呼叫這個函數來載入 JavaScript。
AI 說的是對的，因為我查 Google 官方文件也是這樣寫。
問題是我就不行，為什麼啊！
我試了很久，累了就看 YouTube 發呆，睡一覺起來再試，還是不行。
最後我的土砲解決方案：在 Cursor 這邊分開寫（避免 AI 一次讀太多程式碼會精神錯亂，真的會！），但要部署時就把 HTML 和 JavaScript 全部塞在 index.html 裡。很土砲，但有用！
3. 權限設定的地獄之旅
因為程式會用到大型語言模型的 API（要花錢的），我當然不能把網址公開讓所有人使用。
我的需求是：
只有指定的帳號才能登入使用
每個使用者登入後，要能看到自己的歷史資料（白名單機制）
比如我之前算過基礎代謝率，登入後系統就應該顯示我之前的數據和飲食紀錄。
這部分我搞了超久，真的是欲哭無淚。不過搞懂之後就比較簡單了。
首先在 GAS 選擇專案設定（齒輪圖示），找到「Google Cloud Platform (GCP) 專案」，點擊「變更專案」。
系統會提醒你：
變更 Google Cloud Platform 專案
步驟 1.
請在[這裡](https://console.cloud.google.com/home/)選擇或新建 Google Cloud Platform 專案。建立專案後，請記得設定 OAuth 範圍。
步驟 2.
在下方輸入 Google Cloud Platform 專案編號。設定新專案時，請注意下列事項：• 您所有舊專案的使用者驗證都會永久撤銷。• 原始專案不會遭到刪除。• 您必須在新 Cloud 專案中開啟相應的進階服務 API。接下來：
到 Google Cloud Platform 建立新專案
選擇「API 和服務」→「已啟用的 API 和服務」，加入 Google Drive 和 Google Sheets API
找到「目標對象」→「測試使用者」，把要使用的帳號都加進去
因為只是內部使用，不用發佈應用程式，保持測試狀態就好
複製專案編號，回到 GAS 貼上並點擊「設定專案」
程式端的白名單我就直接寫一個常數陣列，讓系統判斷登入者是否在名單內，符合就顯示對應的資料。
4. 與其除錯，還不如回溯
我犯了一個 AI Coding 的大錯，叫 AI 除錯。
一開始覺得程式不大，有問題就直接叫 AI 改。但我應該先用 Git commit 存個備份檔才對。
為什麼呢？
叫 AI 改程式就像叫 ChatGPT 修圖，第一次生成有點問題，後續要它改，常常是越改越糟。還不如重新生成。
AI 除錯也是一樣，有機率出錯，尤其是反覆出錯時，AI 可能已經不知道卡在哪裡了。還不如回到存檔點重新來過。
但這次我沒這樣做，一直叫它改下去，出錯就找問題，再叫它改。
千萬別這麼做！
最後，要除錯記得要善用 GAS 內的執行項目，以及瀏覽器的開發者工具，要請 AI 幫忙寫一些能夠記錄資料的程式，又叫 log ，把流程顯示出來，這樣要除錯才知道問題出在哪裡。
本次的分享就到這裡，不足的部分請各位看影片。
另外我創了一個 Line 社群 上面也有不少厲害的人，如果有進一步想跟我討論的內容，歡迎加入！
如果你有任何想要我幫你研究的 AI 相關題材，歡迎留言，我會依照我的能力與時間排入行程。
如果你想贊助本報，我也是非常歡迎！
2025/06/23後記：
這篇文章是在週六（6/21）寫的。然後今天我發現有個工具叫 Clasp（Command Line Apps Script Projects） ，它是 Google 官方開源的指令列工具，讓開發者能在本機撰寫、版控、測試並部署 Google Apps Script 專案，我們就不用在那邊複製貼上，煩死了。
使用方法很簡單，依照下面的步驟，安裝在本機端，然後在 Cursor 或任何你喜歡的 AI IDE 上開發，開發後參考下面指令，直接上傳部署。
先決條件
安裝 Node.js LTS（含 npm）。
在 Google App Script → 設定 → 開啟 Google App Script API
1. 安裝與登入
打開 Cursor ，在 Cursor 的終端機輸入
npm install -g @google/clasp # 全域安裝
clasp --version # 確認版本
clasp login # 預設以本機瀏覽器 OAuth
# 若遭防火牆或無 GUI，改用
clasp login --no-localhost
登入後後在根目錄出現 ~/.clasprc.json ，保存 access token。
2. 在 Cursor AI IDE 建立或匯入專案的指令
建立全新獨立腳本：
clasp create --title "ai-calorie-tracker" --type standalone產生
appsscript.json、.clasp.json
建立與試算表/文件綁定腳本：
clasp create --title "Tracker-Sheet" --type sheets--type支援 sheets / docs / slides / forms
匯入既有腳本：
clasp clone <SCRIPT_ID>SCRIPT_ID 來自 script.google.com URL ， projects/ 後面那串
.clasp.json 範例（放在專案根目錄）：
{
"scriptId": "1AbC…XYZ",
"rootDir": "src" // 若欲將原始碼放在 src/
}
在 Cursor 中操作
建議把
.clasp-local.json加入.gitignore，其他檔案照常版控。
3. 常用工作流程
取得雲端最新版本到本地：
clasp pull將本地修改推回雲端：
clasp pushclasppush --force#強制覆寫
監聽檔案變動自動推送：
clasp push --watch查看日誌：
clasp logs --watch在瀏覽器開啟 Apps Script 編輯器：
clasp open建立版本：
clasp version "v1.0 初始"部署 Web App／Addon：
clasp deploy --description "v1.0" -i <VERSION_NUMBER>
範例：
git clone https://github.com/yourname/ai-calorie-tracker.git
cd ai-calorie-tracker
npm install # 若有前端編譯流程
clasp create --type standalone
clasp push # 首次上傳
clasp version "init"
clasp deploy 1 "prod"
4. 專案結構與 VS Code／Cursor 整合建議
ai-calorie-tracker/
├─ .clasp.json
├─ appsscript.json # GAS manifest，設定時間驅動器與 OAuth scope
├─ src/ # 建議使用
│ ├─ Code.gs
│ ├─ api/vision.gs
│ └─ ui/index.html
└─ README.md
rootDir：在
.clasp.json指定src，可保持專案整潔，並支援 TypeScript/Babel 轉譯後輸出到dist再推送。Cursor Tasks：新增
npm run deploy腳本，包裝clasp push && clasp version -r && clasp deploy -i $(clasp versions | tail -1 | cut -d' ' -f1)，一鍵發佈。Git Hooks：用 Husky pre-push 執行
npm test && clasp push，避免忘記同步。
5. 常見錯誤排除
403 Apps Script API has not been usedCloud Console：未啟用 Apps Script API。啟用後等 1-2 分鐘再試。
Access blocked: clasp request is invalid：多帳號衝突或 Workspace 管理員限制。改用
clasp login --no-localhost並換隱私模式瀏覽器。
push attempted to overwrite newer remote files：雲端有更新。先
clasp pull確認差異，手動合併後再clasp push --force。