2025 iThome 鐵人賽

DAY 8

自我挑戰組

30天 Git 版本控制實戰筆記系列第 8 篇

Day 8：Pull Request 工作流程與 Code Review

17th鐵人賽

sharon_peng

2025-09-22 20:42:34

23 瀏覽

分享至

今日目標
• 理解 Pull Request (PR) 的企業級工作流程
• 學習 Fork → 修改 → PR 的開源貢獻流程
• 體驗 Code Review 概念
• 建立專業的協作習慣
什麼是 Pull Request？
企業實際情況：
你不能直接 push 到 main 分支！
↓
必須通過 Pull Request
↓
讓資深同事 Code Review
↓
通過後才能合併
Pull Request 的好處：
• ✅ 程式碼品質控管：資深同事檢查
• ✅ 知識分享：團隊了解彼此的程式碼
• ✅ 錯誤預防：多人檢查減少 bug
• ✅ 學習機會：從 review 中學習更好的寫法
操作步驟
步驟1：建立新功能分支

確保在專案資料夾並拉取最新版本

cd company-website
git checkout main
git pull origin main

建立新功能分支（模擬開發新功能）

git checkout -b feature/team-page

查看分支狀態

git branch
步驟2：開發團隊介紹頁面
建立 team.html：

<h1>我們的專業團隊</h1>

<div class="team-container">
    <div class="team-member">
        <div class="member-photo">
            <div class="photo-placeholder">👨‍💻</div>
        </div>
        <h3>張執行長</h3>
        <p class="title">執行長 & 創辦人</p>
        <p class="description">
            15年軟體開發經驗，專精於企業數位轉型與技術策略規劃。
            曾任職於多家知名科技公司，致力於創新技術應用。
        </p>
    </div>
    
    <div class="team-member">
        <div class="member-photo">
            <div class="photo-placeholder">👩‍💻</div>
        </div>
        <h3>李技術長</h3>
        <p class="title">技術長 (CTO)</p>
        <p class="description">
            專精於雲端架構設計與大數據分析，擁有多項技術專利。
            帶領技術團隊開發創新解決方案，提升客戶營運效率。
        </p>
    </div>
    
    <div class="team-member">
        <div class="member-photo">
            <div class="photo-placeholder">🎨</div>
        </div>
        <h3>王設計師</h3>
        <p class="title">首席設計師</p>
        <p class="description">
            10年 UI/UX 設計經驗，擅長使用者體驗設計與品牌視覺規劃。
            作品曾獲得多項國際設計大獎，專注於人性化介面設計。
        </p>
    </div>
    
    <div class="team-member">
        <div class="member-photo">
            <div class="photo-placeholder">📊</div>
        </div>
        <h3>陳專案經理</h3>
        <p class="title">資深專案經理</p>
        <p class="description">
            8年專案管理經驗，精通敏捷開發與跨部門協調。
            成功管理過百萬級專案，確保專案如期高品質交付。
        </p>
    </div>
</div>

<div class="team-values">
    <h2>我們的核心價值</h2>
    <div class="values-grid">
        <div class="value-item">
            <h4>🚀 創新求進</h4>
            <p>持續探索新技術，提供創新解決方案</p>
        </div>
        <div class="value-item">
            <h4>🤝 團隊合作</h4>
            <p>重視團隊精神，共同達成目標</p>
        </div>
        <div class="value-item">
            <h4>💡 專業品質</h4>
            <p>堅持高品質標準，提供專業服務</p>
        </div>
        <div class="value-item">
            <h4>🎯 客戶導向</h4>
            <p>以客戶需求為中心，創造最大價值</p>
        </div>
    </div>
</div>

.team-member {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
}

.team-member:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.member-photo {
margin-bottom: 20px;
}

.photo-placeholder {
font-size: 60px;
width: 100px;
height: 100px;
background-color: #f0f0f0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
border: 3px solid #007bff;
}

.team-member h3 {
color: #333;
margin: 15px 0 5px 0;
font-size: 1.5em;
}

.team-member .title {
color: #007bff;
font-weight: bold;
margin-bottom: 15px;
font-size: 1.1em;
}

.team-member .description {
color: #666;
line-height: 1.6;
font-size: 0.95em;
}

.team-values {
background-color: white;
padding: 40px;
margin: 40px 0;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.team-values h2 {
text-align: center;
color: #333;
margin-bottom: 30px;
}

.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
}

.value-item {
text-align: center;
padding: 20px;
}

.value-item h4 {
color: #007bff;
margin-bottom: 10px;
font-size: 1.2em;
}

.value-item p {
color: #666;
line-height: 1.5;
}
步驟4：更新其他頁面的導航
更新所有頁面（index.html, about.html, contact.html, products.html）的導航：

加入所有修改

git add .

提交修改（寫詳細的 commit 訊息）

git commit -m "feat: 新增團隊介紹頁面

建立 team.html 展示團隊成員
新增團隊專用 CSS 樣式
更新所有頁面導航連結
包含團隊核心價值展示區域"

推送分支到 GitHub

git push origin feature/team-page
步驟6：在 GitHub 建立 Pull Request
在瀏覽器操作：

前往你的 GitHub repository
會看到「Compare & pull request」按鈕，點擊它
如果沒看到，點「New pull request」
填寫 PR 資訊：
Title（標題）:
新增團隊介紹頁面功能
Description（描述）:

📋 功能說明

新增團隊介紹頁面，展示公司核心團隊成員與企業價值觀

✨ 新增功能

[x] 團隊成員展示區域
[x] 響應式網格佈局
[x] 成員資訊卡片設計
[x] 企業核心價值展示
[x] 導航選單更新

🎨 技術實作

使用 CSS Grid 實現響應式佈局
新增 hover 互動效果
保持與現有設計風格一致
支援行動裝置瀏覽

📸 預覽

新增團隊頁面包含：

4位核心團隊成員介紹
企業核心價值觀展示
專業的視覺設計

🧪 測試項目

[x] 所有頁面導航連結正常
[x] 響應式設計在不同螢幕尺寸正常顯示
[x] CSS 樣式不影響其他頁面

📝 其他說明

此功能完成後，網站將具備完整的企業形象展示功能。
4. 點「Create pull request」
步驟7：模擬 Code Review 流程
在 GitHub PR 頁面：

查看 Files changed 分頁
o 檢視所有修改的檔案
o 查看新增和刪除的程式碼
模擬同事 Review（你可以自己加註解）:
o 點擊程式碼行數旁的 + 號
o 加入評論，例如：
建議：CSS 類別命名很清楚，良好的程式碼風格！
問題：是否考慮加入 alt 屬性給圖片？提升無障礙性。
回應 Review 意見:
o 根據建議修改程式碼
o 推送更新到同一分支
o PR 會自動更新
步驟8：合併 Pull Request
Review 通過後：
點「Merge pull request」
選擇合併方式（建議用預設的「Create a merge commit」）
點「Confirm merge」
點「Delete branch」清理遠端分支
步驟9：同步本地 repository

切換回 main 分支

git checkout main

拉取合併後的最新版本

git pull origin main

刪除本地功能分支

git branch -d feature/team-page

檢查最終狀態

git log --oneline --graph -5
Pull Request 最佳實踐
好的 PR 標題：
✅ feat: 新增團隊介紹頁面功能
✅ fix: 修復聯絡表單驗證錯誤
✅ style: 改善響應式設計效果
❌ 更新檔案
❌ 修改東西
❌ test
好的 PR 描述應包含：
• 🎯 功能說明：這個 PR 要解決什麼問題
• ✨ 變更內容：具體做了哪些修改
• 🧪 測試說明：如何驗證功能正常
• 📸 截圖或影片：視覺化展示變更
Code Review 重點：
• 功能性：程式是否正常運作
• 可讀性：程式碼是否容易理解
• 一致性：是否符合專案風格
• 效能：是否有優化空間
• 安全性：是否有安全漏洞
企業工作流程
典型的一天：

早上：git pull origin main （同步最新版本）
建立功能分支開始開發
完成功能後推送並建立 PR
等待同事 Code Review
根據建議修改程式碼
Review 通過後合併到 main
下班前清理本地分支
今日學習重點
• ✅ 理解 Pull Request 的企業級工作流程
• ✅ 學習撰寫專業的 PR 描述
• ✅ 體驗 Code Review 的價值
• ✅ 建立分支→開發→PR→合併的完整循環