Thực Hành và Demo Git: Từ Cơ Bản Đến Nâng Cao Cho Developer

Giới Thiệu: Tại Sao Phải Thực Hành Git?

Git là công cụ không thể thiếu đối với mọi developer hiện đại. Tuy nhiên, chỉ đọc lý thuyết là chưa đủ - bạn cần thực hành thường xuyên để thành thạo. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn qua các bài thực hành Git từ cơ bản đến nâng cao, giúp bạn làm chủ công cụ này trong môi trường làm việc thực tế.

Chuẩn Bị Môi Trường

Trước khi bắt đầu, hãy đảm bảo bạn đã:

Cài đặt Git trên máy tính của bạn:
- Windows: Tải từ git-scm.com
- macOS: brew install git (nếu đã cài Homebrew) hoặc tải từ website chính thức
- Linux: sudo apt install git (Ubuntu/Debian) hoặc sudo yum install git (CentOS/Fedora)
Cấu hình thông tin cá nhân:

git config --global user.name "Tên Của Bạn"
git config --global user.email "email@example.com"

Tạo tài khoản GitHub (nếu chưa có): github.com

Bài Thực Hành 1: Khởi Tạo Và Làm Việc Với Local Repository

Bài tập: Tạo Project Quản Lý Công Việc Đơn Giản

Bước 1: Tạo repository

# Tạo thư mục project
mkdir task-manager
cd task-manager

# Khởi tạo Git repository
git init

Bước 2: Tạo file và commit đầu tiên

# Tạo file README
echo "# Task Manager" > README.md
echo "Ứng dụng quản lý công việc đơn giản" >> README.md

# Commit đầu tiên
git add README.md
git commit -m "Initial commit: Add README"

Bước 3: Tạo cấu trúc project và commit

# Tạo các thư mục và file cơ bản
mkdir src css js
touch index.html
touch src/app.js
touch css/style.css

# Thêm nội dung vào index.html
cat > index.html << EOF
<!DOCTYPE html>
<html>
<head>
    <title>Task Manager</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>Quản lý công việc</h1>
    <div id="app">
        <!-- Content will be loaded by JavaScript -->
    </div>
    <script src="src/app.js"></script>
</body>
</html>
EOF

# Add và commit các thay đổi
git add .
git commit -m "Tạo cấu trúc project cơ bản"

Bước 4: Xem lịch sử commit

git log
git log --oneline --graph

Bài Thực Hành 2: Làm Việc Với Branch

Bài tập: Phát triển tính năng mới trên branch riêng

Bước 1: Tạo branch mới cho tính năng "add-task"

git branch feature/add-task
git checkout feature/add-task
# Hoặc dùng lệnh rút gọn: git checkout -b feature/add-task

Bước 2: Phát triển tính năng

# Chỉnh sửa file app.js để thêm chức năng mới
cat > src/app.js << EOF
document.addEventListener('DOMContentLoaded', () => {
    const app = document.getElementById('app');
    
    // Tạo form thêm task
    const form = document.createElement('form');
    
    const input = document.createElement('input');
    input.type = 'text';
    input.placeholder = 'Nhập công việc mới...';
    
    const button = document.createElement('button');
    button.textContent = 'Thêm';
    
    form.appendChild(input);
    form.appendChild(button);
    app.appendChild(form);
});
EOF

# Commit thay đổi
git add src/app.js
git commit -m "Thêm form tạo task mới"

Bước 3: Cập nhật CSS

# Thêm style cho form
cat > css/style.css << EOF
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}

h1 {
    color: #333;
}

form {
    margin: 20px 0;
}

input {
    padding: 8px;
    width: 300px;
}

button {
    padding: 8px 15px;
    background: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}
EOF

# Commit thay đổi
git add css/style.css
git commit -m "Thêm style cho form tạo task"

Bước 4: Quay lại branch chính và merge

git checkout main  # hoặc git checkout master (tùy theo branch mặc định)
git merge feature/add-task

Bài Thực Hành 3: Xử Lý Conflict

Bài tập: Tạo và giải quyết conflict

Bước 1: Tạo branch "feature/task-list"

git checkout -b feature/task-list

Bước 2: Thêm chức năng hiển thị task

# Chỉnh sửa file app.js để thêm phần hiển thị task
cat > src/app.js << EOF
document.addEventListener('DOMContentLoaded', () => {
    const app = document.getElementById('app');
    
    // Tạo form thêm task
    const form = document.createElement('form');
    
    const input = document.createElement('input');
    input.type = 'text';
    input.placeholder = 'Nhập công việc mới...';
    
    const button = document.createElement('button');
    button.textContent = 'Thêm';
    
    form.appendChild(input);
    form.appendChild(button);
    
    // Tạo danh sách công việc
    const taskList = document.createElement('ul');
    taskList.id = 'task-list';
    
    app.appendChild(form);
    app.appendChild(taskList);
    
    // Xử lý sự kiện submit form
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        const taskText = input.value.trim();
        if (taskText) {
            addTask(taskText);
            input.value = '';
        }
    });
    
    function addTask(text) {
        const li = document.createElement('li');
        li.textContent = text;
        taskList.appendChild(li);
    }
});
EOF

git add src/app.js
git commit -m "Thêm chức năng hiển thị danh sách task"

Bước 3: Trở lại branch chính và tạo thay đổi khác

git checkout main  # hoặc master

Giờ hãy thay đổi cùng file app.js nhưng với nội dung khác:

cat > src/app.js << EOF
document.addEventListener('DOMContentLoaded', () => {
    const app = document.getElementById('app');
    
    // Tạo form thêm task
    const form = document.createElement('form');
    
    const input = document.createElement('input');
    input.type = 'text';
    input.placeholder = 'Nhập công việc mới...';
    input.required = true;
    
    const prioritySelect = document.createElement('select');
    const options = ['Thấp', 'Trung bình', 'Cao'];
    options.forEach(option => {
        const opt = document.createElement('option');
        opt.value = option.toLowerCase();
        opt.textContent = option;
        prioritySelect.appendChild(opt);
    });
    
    const button = document.createElement('button');
    button.textContent = 'Thêm';
    
    form.appendChild(input);
    form.appendChild(prioritySelect);
    form.appendChild(button);
    
    app.appendChild(form);
});
EOF

git add src/app.js
git commit -m "Thêm chức năng chọn độ ưu tiên cho task"

Bước 4: Merge và giải quyết conflict

git merge feature/task-list

Bây giờ Git sẽ báo conflict, bạn cần mở file app.js và giải quyết:

# Giải quyết conflict trong editor
# Sau khi chỉnh sửa file để kết hợp cả 2 thay đổi

# Đánh dấu đã giải quyết conflict và commit
git add src/app.js
git commit -m "Merge feature/task-list: Kết hợp hiển thị danh sách và chức năng ưu tiên"

Bài Thực Hành 4: Làm Việc Với GitHub

Bài tập: Đẩy project lên GitHub và làm việc với remote repository

Bước 1: Tạo repository trên GitHub

Truy cập GitHub và tạo repository mới tên "task-manager"
Không khởi tạo với README, .gitignore, hoặc license

Bước 2: Kết nối và đẩy code lên GitHub

# Thêm remote
git remote add origin https://github.com/username/task-manager.git

# Đẩy code lên GitHub
git push -u origin main  # hoặc master

Bước 3: Sử dụng GitHub Flow

# Tạo branch mới
git checkout -b feature/delete-task

# Thêm chức năng xóa task
# Chỉnh sửa code...

git add .
git commit -m "Thêm chức năng xóa task"

# Đẩy branch lên GitHub
git push -u origin feature/delete-task

Bước 4: Tạo Pull Request

Truy cập GitHub repository
Chọn "Compare & pull request"
Điền thông tin và tạo Pull Request
Merge Pull Request (trong thực tế sẽ có người review)

So Sánh Các Mô Hình Quy Trình Git

Mô Hình	Đặc Điểm	Phù Hợp Với
Git Flow	- Branch master và develop<br>- Feature, release và hotfix branches<br>- Quy trình phức tạp	Dự án lớn, có lịch release cố định
GitHub Flow	- Một branch chính (main/master)<br>- Feature branches và Pull Requests<br>- Đơn giản	Phát triển web, CI/CD, deploy thường xuyên
GitLab Flow	- Kết hợp Git Flow và GitHub Flow<br>- Thêm environment branches	Dự án có nhiều môi trường (dev/staging/prod)
Trunk Based	- Phát triển trên trunk/main<br>- Branch ngắn hạn	Tích hợp liên tục, teams nhỏ

Bài Thực Hành 5: Sử Dụng Git Nâng Cao

Demo 1: Sử dụng git stash

# Đang làm việc trên tính năng mới
echo "// TODO: Implement filter feature" >> src/app.js

# Có yêu cầu khẩn cấp phải fix bug
git stash save "Đang làm tính năng lọc task"

# Chuyển sang branch hotfix
git checkout -b hotfix/urgent-bug

# Fix bug và commit
echo "// Bug fixed" >> src/app.js
git add src/app.js
git commit -m "Fix urgent bug"

# Quay lại task cũ và lấy lại code đang làm
git checkout feature/some-feature
git stash pop

Demo 2: Sử dụng git rebase

# Đang làm việc trên feature branch
git checkout feature/new-feature

# Cập nhật từ main nhưng giữ lịch sử commit sạch sẽ
git rebase main

# Xử lý conflict nếu có và tiếp tục
git add .
git rebase --continue

Demo 3: Sử dụng git cherry-pick

# Xem lịch sử commit
git log --oneline

# Giả sử cần áp dụng commit có ID abc1234 từ branch khác
git cherry-pick abc1234

Các Tình Huống Thực Tế Và Cách Xử Lý

Tình huống 1: Quay lại commit cũ

# Xem lịch sử commit
git log --oneline

# Quay lại commit cũ nhưng giữ thay đổi hiện tại
git reset --soft abc1234

# Quay lại commit cũ và loại bỏ thay đổi
git reset --hard abc1234

Tình huống 2: Sửa commit message gần nhất

git commit --amend -m "Message mới rõ ràng hơn"

Tình huống 3: Gộp nhiều commit

# Gộp 3 commit gần nhất
git rebase -i HEAD~3

# Trong editor, thay "pick" thành "squash" hoặc "s" cho các commit muốn gộp
# Lưu và đóng editor, sau đó chỉnh sửa message

Kết Luận

Thực hành là cách tốt nhất để làm chủ Git. Các bài tập và demo trong bài viết này giúp bạn tiếp cận Git từ cơ bản đến nâng cao một cách thực tế. Hãy áp dụng các bài thực hành này vào quy trình làm việc của bạn để trở thành một developer chuyên nghiệp hơn.

Nhớ rằng, mỗi team có thể có quy trình Git riêng - việc nắm vững các kỹ thuật cơ bản sẽ giúp bạn dễ dàng thích nghi với bất kỳ workflow nào.

Tài Liệu Tham Khảo

Git Official Documentation: https://git-scm.com/doc
Pro Git Book: https://git-scm.com/book/en/v2
Atlassian Git Tutorials: https://www.atlassian.com/git/tutorials
GitHub Learning Lab: https://lab.github.com/
Learn Git Branching (Interactive): https://learngitbranching.js.org/