CHAPTER 21 · PRACTICE WORKSPACE

GAS 與試算表資料流程（Mock／Live）

能用 mock 備援或教師 GAS URL 取得試算表資料

01 Starter 0/3
  1. 01Starter讀懂作品骨架
  2. 02Checkpoint 1加入第一項能力
  3. 03Checkpoint 2累積第二項能力
  4. 04Solution核對完整結果

TASK STATUS

三項任務目前狀態

TASK-01本階段處理

建立 mock 或 GAS 請求函式

修改檔案：script.js

完成後看見：頁面能取得固定欄位的回應

TASK-02稍後處理

正規化並安全顯示 Sheet rows

修改檔案：script.js

完成後看見：空值與 Live 文字都以安全文字節點顯示

TASK-03稍後處理

顯示資料模式與失敗備援

修改檔案：script.js

完成後看見：畫面區分 mock、空資料、合法 GAS /exec 與其他 JSON，live 失敗時可改用備援

WORKSPACE

本階段實作區

先確認作品目前能做什麼、還缺什麼，再從 TASK-01 開始修改。

FOCUS TASK · TASK-01

現在只處理：建立 mock 或 GAS 請求函式

修改：script.js

完成後：頁面能取得固定欄位的回應

講解時展開：2 個小型比較

MOCK vs LIVE｜來源模式要可辨識

比較：固定 mock 回應可驗證資料流程，GAS live 才是外部來源；畫面必須說清楚目前模式。

現在做：在 Checkpoint 1 的 script.js 只修改 requestRows()：先讓 requestRows('mock') 回傳兩筆固定 rows，再用同一個 Console 操作重跑；不要同時修改 loadRows() 或畫面。

看預期與證據

預期：Console 出現 id、name、price 三個欄位的兩筆資料，頁面仍顯示「尚未載入」且卡片數為 0；學生能說明這只證明資料入口，不代表 LIVE。

證據：截取 Console 的兩筆 rows 與頁面仍為空的畫面，並口述「mock 已通過資料入口，尚未通過來源連線與渲染」。

請求函式 vs UI｜先隔離外部邊界

比較：requestRows 集中處理來源，畫面不應到處散落 fetch 或 GAS URL。

現在做：在 Checkpoint 1 的 requestRows() 暫時加入一個可辨識的來源分支：requestRows('mock') 走固定資料，其他 URL 才走 fetch；搜尋 script.js 確認 fetch 只在 requestRows() 出現，再刪除任何散落在 render 流程的 URL。

看預期與證據

預期：輸入 mock 時不會產生 Network 請求，輸入 URL 時才由 requestRows() 負責 fetch；畫面函式不需要知道 GAS URL。

證據：提供一次 mock 操作的 Network 無請求證據，加上 script.js 搜尋結果，指出外部來源被集中在 requestRows()。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：在 Starter 輸入 mock 並開啟 Console，確認 requestRows('mock') 目前只回空陣列；此步不需要 GAS 網址。
  2. B｜預測：在 DevTools Console 執行 requestRows('mock').then(console.table)，確認取得兩筆固定格式的資料；畫面載入流程留到 Solution。
  3. C｜實作：在 script.js 的 requestRows() 完成「建立 mock 或 GAS 請求函式」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 requestRows() 與 script.js，最後重跑原操作。
  5. E｜驗收：頁面能取得固定欄位的回應

完成條件：DONE-01：頁面能取得固定欄位的回應

MOCK 備援

Sheet 產品資料

輸入 mock、mock-empty，或教師提供的 HTTPS GAS /exec URL；其他網址不會標成 LIVE GAS。

尚未載入

CONTINUE

開始 TASK-01

前往 Checkpoint 1，依要求完成「建立 mock 或 GAS 請求函式」。

前往 Checkpoint 1：完成 TASK-01

CHAPTER HANDOFF

從資料來源邊界，交棒到可操作列表

接收第 20 章：重用 loading、success、empty、error 四態；本章只新增 Sheet rows、資料正規化與 MOCK／LIVE／FALLBACK 的來源責任。

交給第 22 章：完成後帶著固定的 id、name、price rows、空資料提示與來源標示，下一章直接處理搜尋、篩選與分頁，不重做 GAS 或 normalize。

前往第 22 章：產品列表、資料渲染與分頁