零基礎前端課程

CHAPTER 21 · 180 MINUTES

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

試算表像倉庫，GAS doGet 是出餐口；標準練習用 mock 保持可驗證，只有教師 live URL 才代表外部服務。

2種資料模式
3個明確任務
1份固定契約

LEARNING GOALS

本章結束時，你能做出什麼

01

說明三方分工

能指出 Sheet、GAS Web App 與前端各自負責哪一段。

02

固定資料欄位

把空值與原始 rows 正規化成 id、name、price。

03

誠實標示模式

分清 MOCK、LIVE 與 LIVE-FALLBACK，不以卡片出現冒充連線成功。

進場檢核與作品接力

可觀察目標：頁面能取得固定欄位的回應；空值與 Live 文字都以安全文字節點顯示；來源標示不冒充 LIVE GAS，空資料明確可讀，失敗時可改用備援。

  • 具備第 20 章成果：能顯示遠端資料及 loading、success、empty、error 四態：不看答案，展示或口述第 20 章成果，並說出一項可見證據。 需要補強時從這裡接回
  • 能從 Starter、Checkpoint 與 Solution 中辨識目前工作階段：開啟本章主講義，指出 TASK-01 的修改檔案、可見結果與第一個 Checkpoint。 需要補強時從這裡接回
  • 能用「操作後看見什麼」描述驗收證據：閱讀三個任務後，選一題說出操作條件與預期可見結果。 需要補強時從這裡接回

輸入：第 20 章產物：能顯示遠端資料及 loading、success、empty、error 四態

本章輸出：能用 mock 備援或教師 GAS URL 取得試算表資料

產物類型：prototype；後續用途：第 22 章

PROBLEM & ANALOGY

看見產品，不等於連到 Sheet

第 20 章會接資料；本章把 Sheet 當備料表、doGet 當出餐流程、ContentService 當 JSON 外帶盒、部署後的 /exec URL 當對外窗口。

本章要解決：外部授權或網路失敗時，課堂仍要有 mock 可練；但畫面必須說清楚資料究竟從哪裡來。

合回共同作品：正規化後的產品資料會交給第 22 章列表與分頁。

把名詞對回畫面與程式

MOCK / LIVE / FALLBACK
分別代表教學資料、真實服務與失敗備援。
/exec
部署後可被前端呼叫的 GAS Web App 入口。
rows
GAS 或 Sheet 回傳的資料列集合。
normalize
在資料入口統一欄位與空值格式。
部署版本
GAS 更新後需重新部署才成為可呼叫版本。

SCOPE

今天的學習邊界

必會

能自己完成

辨識 doGet、ContentService、部署 URL、row、normalize 與 fallback。

辨識

看得懂即可

執行身分、存取權限與部署版本會影響誰能呼叫。

不教

刻意延後

OAuth token、正式會員權限、複雜 Sheet 查詢與公開敏感資料。

Live Extension（選修）：GAS GET 正式環境操作與 Network 證據不影響 Mock 必修主線。開啟安全操作手冊

CORE IDEAS

外部服務與課堂備援要分開說

  1. 流程固定為 Sheet → doGet → JSON → fetch → normalize → render。
  2. /exec 是部署後入口；編輯內容更新不代表部署版本已更新。
  3. normalize 在資料入口統一欄位，不讓每張卡各自處理 undefined。
  4. mock 是可控教學資料，不是 live；fallback 發生時必須留在畫面證據中。

DEBUGGING

先單獨打開服務，再查前端

課堂刻意錯誤：貼錯部署 URL，或讓 GAS 回傳 {data:[...]}、前端卻直接期待陣列。

  1. 直接在瀏覽器開 /exec，確認不是 /dev，而且回應是 JSON。
  2. 檢查部署版本、執行身分與存取權限。
  3. 到 Network 看 status 與實際回應內容，再確認前端模式設定。
  4. 確認 rows 是陣列，逐筆比對 normalize 前後欄位。
  5. 外部服務阻塞時切回 mock，並清楚顯示 fallback，不能靜默冒充 live。
症狀 01

/exec 不是 JSON

先查：直接開服務 URL，確認部署、權限與回應格式。

症狀 02

卡片出現 undefined

先查：檢查 rows 是否為陣列，再比對 normalize 前後欄位。

症狀 03

失敗卻顯示 LIVE

先查：確認 fallback 分支更新模式標籤，不能冒充 live。

PRACTICE CONTRACT

Starter 到 Solution 共用同一個資料服務

開始前先確認這四件事

  • 我已確認目前資料模式與可接受證據。
  • 我能說出 Sheet → GAS → JSON → normalize → render。
  • 我不會放 token、私人 URL 或敏感資料。
  • 我會測試 live 失敗的 fallback。
TASK-01

建立 mock 或 GAS 請求函式

檔案：script.js

位置：requestRows()

結果：頁面能取得固定欄位的回應

TASK-02

正規化並安全顯示 Sheet rows

檔案：script.js

位置：normalizeRows()、createRowCard()、renderRows()

結果：空值與 Live 文字都以安全文字節點顯示

TASK-03

顯示資料模式與失敗備援

檔案：script.js

位置：loadRows()

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

  1. 先讀任務 Starter 保留 service 函式骨架。 累積完成 0／3 個任務 開始練習
  2. 完成第一項 Checkpoint 1 完成 TASK-01。 累積完成 1／3 個任務 繼續第一步
  3. 累積第二項 Checkpoint 2 再完成 TASK-02。 累積完成 2／3 個任務 繼續第二步
  4. 核對完成品 Solution 只補 TASK-03，不寫死私人 URL。 累積完成 3／3 個任務 查看完整結果

網頁版答案位置對照卡住時先完成 Checkpoint 2，再查看每個 TASK 對應的檔案與位置。

EVIDENCE

成果證據與檢核

30 秒說法可以直接照這個句型練習：

目前是 ______ 模式；資料從 ______ 經過 ______ 後顯示；失敗時畫面寫 ______。

MOCK 成功不等於 GAS 成功；live 證據必須包含實際 URL、回應與前端模式。

截圖需同時包含資料筆數與 MOCK／LIVE／FALLBACK 標籤；若宣稱 live，另附瀏覽器直接開 /exec 的 JSON 與 Network 證據。

交件前自我檢核 4 項 · 點選每一列完成自評

下一章：把同一批產品依頁碼切成每頁三筆。

下一步：前往第 22 章「產品列表、資料渲染與分頁」，帶著本章輸出繼續累積作品。