Hướng dẫn sử dụng GitLab + Bài học 3 + Thao tác tạo, sửa file, commit trực tiếp trên Web và sử dụng GitLab Web IDE

Trong quá trình làm việc thực tế, không phải lúc nào bạn cũng ngồi trước máy tính cá nhân đã cài sẵn môi trường lập trình để sửa một dòng cấu hình, cập nhật tài liệu README.md hay vá nhanh một lỗi nhỏ (hotfix). GitLab cung cấp 2 công cụ mạnh mẽ ngay trên trình duyệt: Web Editor (trình sửa nhanh từng file) và GitLab Web IDE (môi trường VS Code thu nhỏ chạy trực tiếp trên nền tảng đám mây).

1. Phân biệt Web Editor và GitLab Web IDE

Khi bấm vào một file bất kỳ trong Repository và nhấn nút Edit ở góc phải, GitLab sẽ cho bạn 2 lựa chọn:

2. Thực hành 1: Tạo mới và chỉnh sửa từng file với Web Editor

Hãy mở Project gitlab-mastery-50 đã tạo ở Bài 2 và thực hiện thao tác thêm file .gitignore chuẩn chỉnh ngay trên Web:

1. Mở menu tạo file mới:

   • Tại trang chính của Project (mục Code $\rightarrow$ Repository), nhìn vào thanh điều hướng nhánh (cạnh chữ main), bấm vào biểu tượng dấu cộng + $\rightarrow$ chọn New file.

2. Sử dụng bộ mẫu (Template) có sẵn của GitLab:

   • Tại ô File name, gõ tên file là .gitignore.

   • Ngay lập tức, một ô chọn Apply a template sẽ xuất hiện bên cạnh. Hãy bấm vào đó và chọn ngôn ngữ dự án của bạn (ví dụ: Node, Go, VisualStudioCode hoặc Laravel). GitLab sẽ tự động điền toàn bộ danh sách các thư mục rác cần loại trừ (như node_modules/, /vendor/, .env).

3. Đóng gói thay đổi (Commit Changes):

   • Kéo xuống cuối trang tại mục Commit message: Nhập nội dung mô tả ngắn gọn việc bạn vừa làm (ví dụ: Add default .gitignore template).

   • Tại ô Target Branch:

     • Nếu gõ main: Lưu thẳng vào nhánh chính.

     • Nếu gõ một tên mới (ví dụ: chore/add-gitignore): GitLab sẽ tự động tách ra nhánh mới và tích sẵn ô Start a new merge request with these changes (tạo yêu cầu duyệt code).

   • Nhấn nút Commit changes để hoàn tất.

3. Thực hành 2: Trải nghiệm sức mạnh của GitLab Web IDE

GitLab Web IDE là một điểm ăn tiền cực lớn khi hướng dẫn người xem, vì chỉ cần nhấn 1 phím tắt duy nhất, giao diện web bình thường sẽ biến thành trình soạn thảo VS Code chuyên nghiệp.

Cách mở nhanh Web IDE:

• Cách 1 (Khuyên dùng khi quay video vì rất chuyên nghiệp): Đứng tại trang bất kỳ trong Repository của Project, nhấn phím dấu chấm (.) trên bàn phím.

• Cách 2: Nhấn nút Edit ở góc trên bên phải màn hình $\rightarrow$ chọn Web IDE.

Quy trình làm việc nhiều file trên Web IDE:

1. Chỉnh sửa và tạo thêm nhiều file:

   • Ở cột Explorer bên trái (biểu tượng 2 trang giấy), nhấp chuột phải vào khoảng trống chọn New Folder $\rightarrow$ đặt tên là src.

   • Nhấp chuột phải vào thư mục src $\rightarrow$ chọn New File $\rightarrow$ đặt tên là index.html hoặc main.go và gõ một vài dòng code mẫu.

   • Mở tiếp file README.md có sẵn và bổ sung thêm dòng mô tả cấu trúc thư mục src vừa tạo.

2. Kiểm tra sự thay đổi (Source Control & Diff):

   • Nhìn sang thanh công cụ ngoài cùng bên trái, biểu tượng Source Control (nhánh Git) sẽ hiện số 2 (tương ứng với 2 file vừa bị thay đổi/thêm mới).

   • Bấm vào biểu tượng này và nhấp vào từng file, màn hình sẽ chia đôi (Split Diff View): Bên trái là code cũ (màu đỏ), bên phải là code mới (màu xanh lá), giúp kiểm tra chính xác từng dòng trước khi lưu.

3. Commit và Đẩy code lên Server:

   • Nhập lời nhắn vào ô Commit message (ví dụ: feat: init src folder and update README).

   • Nhấn nút Commit and push to 'main' (hoặc chọn Create new branch nếu nhánh main đang bị khóa bảo vệ).

   • Góc dưới bên phải hiện thông báo Success! Your changes have been committed nghĩa là code đã được cập nhật ngay lập tức lên kho chứa GitLab.

4. Mẹo thao tác nhanh trên Web UI (Dành cho bài giảng)

Khi làm video hướng dẫn, bạn có thể chỉ thêm cho học viên 3 thao tác rất thực tế sau trong phần xem file của GitLab:

• Nút Blame (Truy vết tác giả): Khi mở xem một file code trên Web, bấm nút Blame ở góc trên. GitLab sẽ chỉ rõ từng dòng code do ai viết, thuộc commit nào và viết cách đây bao lâu.

• Nút History (Lịch sử riêng của file): Chỉ lọc ra các lần chỉnh sửa của riêng file đang mở thay vì phải tìm trong hàng nghìn commit của cả dự án.

• Tải file lên từ máy tính (Upload file): Tại nút dấu cộng + ngoài trang Repository, chọn Upload file để kéo thả nhanh hình ảnh minh họa, file tài liệu PDF hoặc bộ khung code có sẵn từ máy tính lên thẳng trình duyệt.

Bài tập thực hành trên Web cho Bài 3

1. Mở Project gitlab-mastery-50, nhấn phím . trên bàn phím để khởi động GitLab Web IDE.

2. Tạo một thư mục tên docs, bên trong tạo 2 file là architecture.md và api-guide.md.

3. Sử dụng tab Source Control trên Web IDE để commit cả 2 file này cùng lúc lên nhánh develop (đã tạo ở Bài 2) với nội dung commit: docs: add initial documentation files.