CHAPTER 21 · PRACTICE WORKSPACE

GAS 與試算表資料流程(Mock/Live)

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

03 Checkpoint 2 2/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-02;先核對可見結果,再前往 TASK-03。

FOCUS TASK · TASK-03

現在只處理:顯示資料模式與失敗備援

修改:script.js

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

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

fallback vs failure|備援不是假裝成功

比較:live 失敗時可以切回備援,但畫面仍要明確標示來源與失敗邊界。

現在做:在 Solution 先輸入一個刻意失敗的 HTTPS URL,觀察載入中→錯誤原因→兩筆 mock 卡片的完整流程;只檢查 loadRows() 的 catch 與模式標籤,不修改 requestRows() 來吞掉錯誤。

看預期與證據

預期:外部請求失敗後仍有可用畫面,但 mode 改成「MOCK 備援」、status 保留「Live 失敗,已切備援」與原因;不能只顯示成功卡片。

證據:留下失敗 URL、Network/Console 原因與 fallback 畫面三段證據,指出 fallback 是可見的降級,不是假裝 LIVE 成功。

來源標示|MOCK、LIVE、空資料要分開

比較:使用者看到的模式標籤應與實際資料路徑一致,不能把 mock 顯示成 live。

現在做:固定測四個輸入並逐一記錄 mode:mock、mock-empty、https://script.google.com/macros/s/demo/exec、https://example.test/products.json;再讓最後一個回傳格式錯誤,確認 catch 後 mode 變成 MOCK 備援。

看預期與證據

預期:四個輸入分別可辨識 MOCK 備援、MOCK 空資料、LIVE GAS、CUSTOM JSON(非 GAS);來源標籤跟著實際路徑與 fallback 結果變化,不能用「有卡片」推論 LIVE。

證據:用一張四列對照表記錄輸入、預期 mode、status 與卡片/空資料結果,並補一個格式錯誤後切回 MOCK 的畫面。

需要排錯時查看:任務循環(觀察 → 預測 → 實作 → 故障 → 驗收)
  1. A|觀察:在 Checkpoint 2 用含空價格與 HTML 字串的 row 驗證安全渲染,再確認頁面 loadRows 尚未標示來源、空資料或失敗備援。
  2. B|預測:依序輸入 mock、mock-empty 與非 GAS 的可用 JSON URL,確認顯示正確來源與空資料提示,而且只有合法 HTTPS GAS /exec 會標成 LIVE GAS;最後輸入 missing.json 確認切回 MOCK 備援並顯示原因。
  3. C|實作:在 script.js 的 loadRows() 完成「顯示資料模式與失敗備援」,一次只處理本任務責任。
  4. D|故障:若結果不一致,先依原操作重現,再檢查 loadRows() 與 script.js,最後重跑原操作。
  5. E|驗收:來源標示不冒充 LIVE GAS,空資料明確可讀,失敗時可改用備援

完成條件:DONE-03:畫面區分 mock、空資料、合法 GAS /exec 與其他 JSON,live 失敗時可改用備援;來源標示不冒充 LIVE GAS,空資料明確可讀,失敗時可改用備援

MOCK 備援

Sheet 產品資料

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

尚未載入

CONTINUE

繼續完成 TASK-03

前往 Solution,依要求完成「顯示資料模式與失敗備援」。

前往 Solution:完成 TASK-03

CHAPTER HANDOFF

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

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

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

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