CHAPTER 14 · PRACTICE WORKSPACE

Git、GitHub、README 與版本交付

具備清楚 README、可檢查 commit history 與可核對遠端版本的作品 repo

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

TASK STATUS

三項任務目前狀態

TASK-01已完成

寫清楚作品用途與目標讀者

修改檔案：README.md

完成後看見：README 說明作品用途，第一筆 commit 只包含作品骨架與定位，git status --short 顯示乾淨

TASK-02本階段處理

列出真實功能與本機開啟方式

修改檔案：README.md

完成後看見：陌生人能依 README 開啟作品，第二筆 commit 只處理功能與開啟方式，且 git status --short 顯示乾淨

TASK-03稍後處理

記錄排錯流程並驗證 commit 切分

修改檔案：README.md

完成後看見：排錯紀錄可重現，git log 顯示三筆範圍清楚且可說明的 commit，git status --short 顯示乾淨

WORKSPACE

本階段實作區

已完成 TASK-01；先核對可見結果，再前往 TASK-02。

FOCUS TASK · TASK-02

現在只處理：列出真實功能與本機開啟方式

修改：README.md

完成後：陌生人能依 README 開啟作品，第二筆 commit 只處理功能與開啟方式，且 git status --short 顯示乾淨

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

開啟方式 vs 實際證據｜陌生人要能重現

比較：README 的指令不能只是描述，必須真的能讓陌生人開啟作品並看到結果。

現在做：先在「主要功能／如何開啟」與第二筆 commit 做一次最小對照：只改這個責任並重新整理／操作，接著依「依 README 實際開啟作品後，執行 git add README.md、git commit -m "補上功能與本機開啟方式"，再執行 git show --stat --oneline HEAD、git log --oneline -2 與 git status --short。」重跑，記下前後差異。

看預期與證據

預期：完成後能觀察到「陌生人能依 README 開啟作品，第二筆 commit 只處理功能與開啟方式，且 git status --short 顯示乾淨」，並說出 README 的指令不能只是描述，必須真的能讓陌生人開啟作品並看到結果。

證據：用前後截圖或口述比較「陌生人能依 README 開啟作品，第二筆 commit 只處理功能與開啟方式，且 git status --short 顯示乾淨」，指出這個小型實驗如何證明 README 的指令不能只是描述，必須真的能讓陌生人開啟作品並看到結果。

功能文件 commit｜一筆提交一個目的

比較：功能與文件可以連續交付，但每筆 commit 都應能說明自己的責任，而不是混成一大筆。

現在做：先在「主要功能／如何開啟」與第二筆 commit 做一次最小對照：只改這個責任並重新整理／操作，接著依「依 README 實際開啟作品後，執行 git add README.md、git commit -m "補上功能與本機開啟方式"，再執行 git show --stat --oneline HEAD、git log --oneline -2 與 git status --short。」重跑，記下前後差異。

看預期與證據

預期：完成後能觀察到「陌生人能依 README 開啟作品，第二筆 commit 只處理功能與開啟方式，且 git status --short 顯示乾淨」，並說出功能與文件可以連續交付，但每筆 commit 都應能說明自己的責任，而不是混成一大筆。

證據：用前後截圖或口述比較「陌生人能依 README 開啟作品，第二筆 commit 只處理功能與開啟方式，且 git status --short 顯示乾淨」，指出這個小型實驗如何證明功能與文件可以連續交付，但每筆 commit 都應能說明自己的責任，而不是混成一大筆。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：留在教材 repo 外的個人練習資料夾，先執行 git status，確認只包含本次 README 修改。
  2. B｜預測：依 README 實際開啟作品後，執行 git add README.md、git commit -m "補上功能與本機開啟方式"，再執行 git show --stat --oneline HEAD、git log --oneline -2 與 git status --short。
  3. C｜實作：在 README.md 的 「主要功能／如何開啟」與第二筆 commit 完成「列出真實功能與本機開啟方式」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 「主要功能／如何開啟」與第二筆 commit 與 README.md，最後重跑原操作。
  5. E｜驗收：陌生人能依 README 開啟作品，第二筆 commit 只處理功能與開啟方式，且 git status --short 顯示乾淨

完成條件：DONE-02：陌生人能依 README 開啟作品，第二筆 commit 只處理功能與開啟方式，且 git status --short 顯示乾淨

VERSION DELIVERY LAB

Git 到 GitHub 交付板

  1. 工作目錄確認路徑與修改
  2. 暫存區git add 後用 status 驗證
  3. 本機版本git commit 建立快照
  4. 遠端倉庫git push 後到 GitHub 檢查
查看本階段 README 靜態對照

README.html 是靜態對照，不會隨 README.md 編輯同步；請用 VS Code Markdown Preview 驗證自己的修改。

CHAPTER HANDOFF

第 13 章 → 第 14 章 → 第 15 章

接收：沿用第 13 章已驗證的 index.html、style.css 與回歸證據；本章只在教材 repo 外的個人資料夾建立 README 與 Git 版本證據。

交給第 15 章：保留同一份 index.html、style.css、README 與三筆可說明的 history；下一章直接新增 script.js 與 DOM 事件，不重做本章骨架。

CONTINUE

繼續完成 TASK-02

前往 Checkpoint 2，依要求完成「列出真實功能與本機開啟方式」。

前往 Checkpoint 2：完成 TASK-02