「不用背英文、不用下載 Git、不會弄壞真正專案；在情境中完成一次團隊協作。」
「GitHub 協作練習場」是一套專為商管學院與非理工科系學生設計的互動式 Git/GitHub 網頁模擬器。我們將軟體開發的版本控制概念，轉換為學生熟悉的 「校園企劃分組報告」 情境，讓學習者在安全的模擬環境中，親手完成一次完整的團隊線上協作。
- 🛡️ 完全安全沙盒：純網頁模擬，無需安裝 Git 或終端機指令（CLI），隨意操作也不會弄壞真實專案。
- 💼 商管情境代入：以「校園市集競品分析企劃書」取代程式碼修改，學習最有感的文檔協作。
- 🗺️ 心智模型地圖：將抽象名詞（Commit, Branch, PR, Merge, Issue, Project）融合於操作當下，搭配即時中文說明與生活類比。
- 🔄 三段式學習模式：
- 看一次（自動演示）：自動播映游標移動與元件聚焦，建立初步印象。
- 跟著做（引導模式）：提示下一個可點擊區域與做錯時的情境化提醒。
- 自己做（任務挑戰）：移除提示，完成實際目標並以協作歷程進行評分。
本練習場只保留適合零基礎學習者的 GitHub 網頁操作路線：從瀏覽器建立與上傳檔案，理解 Commit、Branch、Pull Request、Review、Merge、Issue 與 Project。終端機 Git 指令不屬於本教材的學習內容。
💡 Web-only 路線：本教材專注 GitHub 網頁操作，不安排終端機或 Push 指令練習；學生會用 Repository、Branch、Commit、Pull Request、Review、Merge、Issue 與 Project 完成一次小組協作。
本練習場是一個以五階段串起的學習 SPA，帶學生從真實情境逐步走到能判斷完整協作流程：
| 階段 | 學習目的 |
|---|---|
| Stage 1．真實情境 | 從團隊對話中辨認協作問題，理解為什麼需要 GitHub。 |
| Stage 2．引導思考 | 把模糊的合作困難對應到適合的協作能力與 GitHub 功能。 |
| Stage 3．完整示範 | 觀看從建立任務、修改內容到審查合併的完整示範。 |
| Stage 4．引導練習 | 在提示與回饋下，親手完成一次 GitHub 網頁協作流程。 |
| Stage 5．綜合回顧 | 透過題組與排序題，確認能把七個協作環節串成可實際使用的流程。 |
五個階段共同圍繞一條標準的團隊協作故事線進行設計：
| 協作環節 | 協作情境 | 學習行為與名詞 | 成功條件 |
|---|---|---|---|
| 1. 任務建立 | 小組需要把模糊的工作說清楚並找出負責人 | Issue / Assignee / Project |
建立包含可執行條件與負責人的任務，並反映進度 |
| 2. 安全修改 | 你需要補上目標客群分析，但不能影響正式版 | Branch / Edit |
不直接動到 main，在個人 branch 完成修改 |
| 3. 版本紀錄 | 修改完成後需要留下可追蹤的版本紀錄 | Commit / History |
完成一次有清楚說明的 commit |
| 4. 提出修改 | 完成了「競品分析」段落，準備請團隊採納 | Pull Request (PR) / Diff |
建立 PR 並寫清楚修改內容與原因 |
| 5. 團隊審查 | 隊友檢查修改內容，提出建議或確認可以採用 | Review / Comment / Approve |
看懂變更、處理修正要求，並完成審查決定 |
| 6. 正式合併 | 修改通過團隊確認後，放入正式版本 | Merge / main |
將確認過的 Branch 修改合併進 main |
| 7. 進度追蹤 | 完成後需要讓團隊看見任務目前的狀態 | Project Board / Status |
將任務卡片更新至正確的進度狀態 |
| Git / GitHub 名詞 | 一句話白話定義 | 分組報告生活類比 |
|---|---|---|
| Repository (Repo) | 放置專案所有檔案與紀錄的總工作區 | 存放小組企劃案的總雲端資料夾 |
| main | 被小組採納、正式對外發布的主版本 | 已經印出來要交給教授的正式企劃書 |
| Branch | 從主版本複製出來的個人安全工作副本 | 自己下載一份企劃書副本，在裡面自由塗鴉修改 |
| Commit | 留下一次帶有時間與說明的「版本存檔」 | 在文件修改處蓋上個人專屬的日期與備註印章 |
| Pull Request (PR) | 向團隊提出「請審核並採納我的修改」的申請 | 在群組中 tag 隊友：「我寫好了競品分析，大家確認沒問題就放進正式檔」 |
| Review | 隊友檢查 PR 變更並給予修改建議或通過 | 隊友幫忙看報告、抓錯字並決定要不要採用 |
| Merge | 將通過審核的 Branch 修改合併進 main |
把確認無誤的個人段落正式複製黏貼進要交給教授的企劃書 |
| Issue | 一張包含負責人與完成條件的任務卡 | 任務分工清單上的小卡（如：「小明在週五前完成問卷統計」） |
| Project | 將所有 Issue 與 PR 視覺化管理的看板 | 貼在討論室白板上的任務進度貼紙（待處理 / 進行中 / 已完成） |
本專案採用 單一檔案 HTML 零依賴設計，無需安裝 Node.js 或建置工具。
-
直接開啟： 下載本專案後，直接雙擊
index.html即可在瀏覽器中體驗完整教學 SPA。 -
本地 Preview (可選)： 使用 VS Code 的 Live Server 擴充功能開啟
index.html。 -
線上發布： 可直接將專案上傳至 GitHub 並開啟 GitHub Pages 服務，即可獲得免費的線上教學網址。
若您為教學導師，建議在 40 分鐘的課程中安排以下節奏：
- 00-05 mins: 開場心智圖介紹（Git vs. GitHub 分工觀念）
- 05-10 mins: Stage 1 — 真實情境
- 10-16 mins: Stage 2 — 引導思考
- 16-23 mins: Stage 3 — 完整示範
- 23-34 mins: Stage 4 — 引導練習
- 34-40 mins: Stage 5 — 綜合回顧
本專案採用 MIT 授權條款，歡迎自由教學、修改與推廣。