CHAPTER 27 · PRACTICE WORKSPACE

TODO B：Mock 同步、失敗復原與 GAS 延伸

完成可操作的 mock 同步原型；真實 GAS 串接列為有完整步驟的延伸

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

TASK STATUS

三項任務目前狀態

TASK-01本階段處理

將本機變更加入 mock 同步佇列

修改檔案：script.js

完成後看見：每筆變更顯示不同短 id，待同步數量增加且重整後仍保留

TASK-02稍後處理

驗證離線全批保留與線上全批移除

修改檔案：script.js

完成後看見：離線同步時全批保留，回到線上同步後全批移除

TASK-03稍後處理

提供重試與部署前檢核

修改檔案：script.js

完成後看見：離線重整不丟件；恢復模擬網路後成功移除並顯示 GAS 邊界

WORKSPACE

本階段實作區

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

FOCUS TASK · TASK-01

現在只處理：將本機變更加入 mock 同步佇列

修改：script.js

完成後：每筆變更顯示不同短 id，待同步數量增加且重整後仍保留

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

queue vs localStorage｜佇列與保存

比較：queue 描述待同步資料，localStorage 負責跨重新整理保存；兩者要分清楚。

現在做：在 Starter 清除 course-sync-queue，點擊 #change 兩次；檢查 #queue li 有 2 筆、兩個短 id 不同、#status 顯示待同步 2 筆，再重新整理確認仍有 2 筆。

看預期與證據

預期：queue 有兩筆資料，course-sync-queue 也保存兩筆；重新整理後畫面與資料數量一致。

證據：留下 #queue li 數量、兩個短 id、#status 文字、storage 陣列長度與重新整理後清單五項證據。

enqueue vs render｜加入資料與顯示數量

比較：enqueue 改變佇列，render 讓待同步數量與短 id 可見；畫面不是資料來源。

現在做：在 Checkpoint 1 清除 course-sync-queue，點擊 #change 一次；同時記錄 #queue li 的短 id、#status 的待同步數量與 course-sync-queue 的第一筆物件，重新整理後比對三者仍一致。

看預期與證據

預期：enqueue 先更新 queue 並保存，render 只負責把同一份資料的短 id 與數量呈現出來；畫面不是資料來源。

證據：留下新增前後的 queue 長度、同一個短 id、storage 第一筆物件與重新整理後畫面四項證據。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：清除 `course-sync-queue` 後開啟 Starter，確認線上、待同步 0 筆；按新增時目前 enqueue 不會改變 queue。
  2. B｜預測：按「新增一筆本機變更」兩次，確認每次都讓待同步數量增加，且清單顯示兩個不同 id 的變更。
  3. C｜實作：在 script.js 的 loadQueue()、saveQueue()、render()、enqueue() 完成「將本機變更加入 mock 同步佇列」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 loadQueue()、saveQueue()、render()、enqueue() 與 script.js，最後重跑原操作。
  5. E｜驗收：畫面顯示兩筆變更與兩個不同短 id，待同步數量為 2

完成條件：DONE-01：每筆變更顯示不同短 id，待同步數量增加且重整後仍保留；畫面顯示兩筆變更與兩個不同短 id，待同步數量為 2

MOCK SYNC

待辦事項 Mock 同步中心

待同步 0 筆

    尚未執行部署預檢

    CONTINUE

    開始 TASK-01

    前往 Checkpoint 1，依要求完成「將本機變更加入 mock 同步佇列」。

    前往 Checkpoint 1：完成 TASK-01

    CHAPTER HANDOFF

    第 26 章 → 第 27 章 → 第 28 章

    接收：第 26 章只提供本機 CRUD 的操作與保存證據；本章使用獨立的 course-sync-queue，不讀取或共用第 26 章的 course-todos runtime。

    交付：本章交給下一章的是 queue item id、離線失敗保留、線上 retry 與 mock preflight 證據；queue 歸零不等於 GAS 或 Sheet 已寫入。

    下一章：第 28 章另行驗證 Production URL、格式預檢與人工展示證據，不把本章 mock 結果當成正式部署證明。

    回到第 27 章成果證據