Quy Trình Làm Việc Từ Local đến GitHub với Sự Hỗ Trợ của AI Gemini

Trong bối cảnh ngành công nghệ thông tin tại Việt Nam ngày càng cạnh tranh, việc làm chủ các công cụ và quy trình làm việc hiện đại là yếu tố sống còn để các lập trình viên nâng cao năng lực và giá trị bản thân. Hai trong số những công cụ mạnh mẽ nhất hiện nay là Git/GitHub để quản lý phiên bản và các mô hình AI tạo sinh như Google Gemini để tăng tốc độ viết và phân tích mã nguồn.

Bài viết này sẽ cung cấp một hướng dẫn chi tiết, từng bước một, về một quy trình làm việc cụ thể và thực tế:

1. Đưa dự án từ máy tính lên GitHub: Sử dụng GitHub Desktop để thêm một thư mục dự án có sẵn trên máy tính (local repository) và xuất bản nó lên GitHub.
2. Phân tích code với AI: Sử dụng giao diện web của Gemini để “đọc” và phân tích kho mã nguồn vừa đẩy lên, từ đó yêu cầu AI đưa ra các gợi ý chỉnh sửa.
3. Áp dụng và đồng bộ hóa: Chỉnh sửa thủ công các tệp trên máy tính theo gợi ý của AI và dùng GitHub Desktop để ghi nhận (commit) và đẩy (push) các thay đổi đó trở lại GitHub.

Để dễ hình dung, chúng ta sẽ thực hành trên một ví dụ quen thuộc với các lập trình viên web: chỉnh sửa các tệp style.css và functions.php của một theme WordPress.

Phần 1: Thiết Lập Nền Tảng – Từ Thư Mục Cục Bộ đến Kho Chứa GitHub

Trước khi có thể nhờ AI phân tích, chúng ta cần đưa mã nguồn của mình vào một hệ thống quản lý phiên bản và lưu trữ nó trên đám mây.

1.1. Cài Đặt và Xác Thực GitHub Desktop

GitHub Desktop là một ứng dụng miễn phí giúp bạn tương tác với Git và GitHub thông qua một giao diện đồ họa trực quan, thay vì phải dùng các dòng lệnh phức tạp.

• Tải và Cài đặt:
  1. Truy cập trang tải về chính thức: https://desktop.github.com/.
  2. Tải xuống phiên bản phù hợp với hệ điều hành của bạn (Windows 64-bit hoặc macOS) và tiến hành cài đặt.
• Xác thực tài khoản:
  1. Sau khi cài đặt, mở ứng dụng và bạn sẽ được yêu cầu đăng nhập. Nhấp vào “Sign in to GitHub.com”.
  2. Thao tác này sẽ mở trình duyệt để bạn đăng nhập vào tài khoản GitHub của mình và cấp quyền cho ứng dụng.

1.2. Đưa Dự Án Cục Bộ (Local Project) Lên GitHub

Đây là bước cốt lõi để bắt đầu quy trình. Giả sử bạn đã có một thư mục chứa mã nguồn của theme WordPress trên máy tính.

a. Thêm Kho chứa Cục bộ (Add Local Repository):

• Trong ứng dụng GitHub Desktop, vào menu File > Add Local Repository....
• Nhấp vào nút Choose... và điều hướng đến thư mục gốc của dự án theme WordPress trên máy tính của bạn.
• Nhấp Add Repository.

b. Tạo Kho chứa Git (Create a Repository):

• Nếu thư mục của bạn chưa phải là một kho chứa Git, GitHub Desktop sẽ hiển thị thông báo và một nút “Create a repository here”. Hãy nhấp vào đó.
• Trong cửa sổ “Create a New Repository” hiện ra:
  • Name: Tên kho chứa (thường sẽ tự động lấy theo tên thư mục).
  • Description: Mô tả ngắn về dự án.
  • .gitignore: Một bước rất quan trọng. Từ danh sách thả xuống, hãy chọn WordPress. Thao tác này sẽ tự động tạo một tệp .gitignore để bỏ qua các tệp không cần thiết của WordPress, giúp kho chứa của bạn gọn gàng.
  • License: Chọn một giấy phép nếu cần (ví dụ: GNU GPL v3 cho theme WordPress).
• Nhấp Create repository.

c. Thực hiện Commit Đầu tiên:

• Sau khi tạo kho chứa, GitHub Desktop sẽ hiển thị tất cả các tệp trong dự án của bạn ở tab “Changes”.
• Ở góc dưới bên trái, nhập một thông điệp commit đầu tiên vào ô “Summary”, ví dụ: Initial commit hoặc Bắt đầu dự án.
• Nhấp vào nút Commit to main.

d. Xuất bản Kho chứa (Publish Repository):

• Bây giờ, kho chứa của bạn mới chỉ tồn tại trên máy tính. Để đẩy nó lên GitHub.com, hãy nhấp vào nút Publish repository ở thanh công cụ trên cùng.
• Trong hộp thoại hiện ra, bạn có thể chọn giữ kho chứa ở chế độ riêng tư (private) hoặc công khai (public).
• Nhấp Publish Repository. Sau vài giây hoặc vài phút, dự án của bạn đã có mặt trên GitHub.

Phần 2: Vòng Lặp Tương Tác AI – Sử Dụng Gemini Web để Phân Tích Code

Khi mã nguồn đã ở trên GitHub, chúng ta có thể bắt đầu quy trình “trò chuyện” với AI để nhận các gợi ý chỉnh sửa.

2.1. Bước 1: Kết nối Gemini với Kho chứa GitHub

Giao diện web của Gemini cho phép bạn nhập (import) một kho chứa từ GitHub để làm ngữ cảnh cho cuộc trò chuyện.

1. Truy cập gemini.google.com trên trình duyệt máy tính.
2. Ở ô nhập liệu, nhấp vào nút Add file > Import code.
3. Dán URL của kho chứa GitHub bạn vừa xuất bản vào ô nhập liệu và nhấp Import.
4. Nếu đây là lần đầu tiên hoặc bạn đang nhập một kho chứa riêng tư, Gemini sẽ yêu cầu bạn cấp quyền truy cập vào tài khoản GitHub. Hãy làm theo hướng dẫn trên màn hình để hoàn tất việc liên kết.

Lưu ý quan trọng: Tích hợp này hiện tại là chỉ đọc (read-only). Gemini có thể đọc và phân tích mã nguồn của bạn nhưng không thể ghi lại các thay đổi trực tiếp vào kho chứa. Ngoài ra, nó chỉ phân tích trạng thái của kho chứa tại thời điểm bạn nhập. Nếu có các commit mới được đẩy lên, bạn sẽ cần bắt đầu một cuộc trò chuyện mới để phân tích phiên bản mới nhất.

2.2. Bước 2: “Trò chuyện” với Gemini để Yêu cầu Chỉnh sửa

Đây là lúc sức mạnh của AI được phát huy. Bằng cách đưa ra những câu lệnh (prompt) rõ ràng, bạn có thể yêu cầu Gemini thực hiện các tác vụ phức tạp.

Demo 1: Chỉnh sửa style.css

Giả sử chúng ta muốn thay đổi màu nền của trang web và tăng kích thước phông chữ cho các tiêu đề H1.

Prompt mẫu:

Hãy đóng vai một lập trình viên WordPress chuyên nghiệp. Dựa trên kho chứa tôi đã nhập, hãy xem xét tệp style.css.

1. Hãy viết mã CSS để đổi màu nền (background-color) của thẻ body thành một màu xám nhạt (#f0f2f5).
2. Tăng kích thước phông chữ (font-size) của tất cả các thẻ h1 lên 2.5rem.

Vui lòng cung cấp cho tôi đoạn mã CSS hoàn chỉnh để tôi có thể thêm vào cuối tệp style.css.

Gemini sẽ phân tích yêu cầu và có thể trả về một đoạn mã tương tự như sau:

CSS

body {
    background-color: #f0f2f5;
}

h1 {
    font-size: 2.5rem;
}

Demo 2: Chỉnh sửa functions.php

Bây giờ, hãy thử một tác vụ phức tạp hơn: thêm một hàm PHP để ẩn thanh công cụ quản trị (Admin Bar) cho tất cả người dùng, ngoại trừ quản trị viên. Đây là một yêu cầu tùy chỉnh rất phổ biến.

Prompt mẫu:

Tiếp tục với vai trò chuyên gia WordPress. Bây giờ, hãy xem xét tệp functions.php.

Tôi muốn ẩn thanh công cụ quản trị (Admin Bar) ở phía frontend cho tất cả người dùng không phải là quản trị viên.

Hãy viết một đoạn mã PHP hoàn chỉnh sử dụng hook after_setup_theme và hàm current_user_can('administrator') để thực hiện việc này.

Gemini có thể tạo ra một đoạn mã chính xác như sau:

PHP

add_action('after_setup_theme', 'remove_admin_bar_for_non_admins');
function remove_admin_bar_for_non_admins() {
    if (!current_user_can('administrator') &&!is_admin()) {
        show_admin_bar(false);
    }
}

Phần 3: Áp Dụng và Đồng Bộ Hóa Thay Đổi

Sau khi nhận được các đoạn mã gợi ý từ Gemini, bước cuối cùng là áp dụng chúng vào dự án và cập nhật lại lên GitHub.

3.1. Bước 1: Chỉnh sửa Code trên Máy tính

Đây là bước thủ công nhưng rất quan trọng.

1. Mở thư mục dự án của bạn bằng một trình soạn thảo mã nguồn (ví dụ: Visual Studio Code).
2. Đối với thay đổi CSS: Mở tệp style.css. Sao chép đoạn mã CSS mà Gemini đã cung cấp và dán nó vào cuối tệp.
3. Đối với thay đổi PHP: Mở tệp functions.php. Sao chép đoạn mã PHP về việc ẩn admin bar và dán nó vào cuối tệp.
4. Lưu lại tất cả các tệp bạn vừa chỉnh sửa.

3.2. Bước 2: Ghi nhận và Đẩy Code bằng GitHub Desktop

Bây giờ, hãy quay lại GitHub Desktop để hoàn tất quy trình.

1. Xem lại Thay đổi (Review):
   • Mở ứng dụng GitHub Desktop. Bạn sẽ thấy các tệp style.css và functions.php xuất hiện trong tab “Changes”.
   • Nhấp vào từng tệp để xem bản so sánh trực quan (diff). Các dòng bạn vừa thêm sẽ được tô màu xanh lá, giúp bạn kiểm tra lại lần cuối.
2. Ghi nhận Thay đổi (Commit):
   • Đảm bảo các tệp bạn muốn ghi nhận đã được tích chọn.
   • Ở góc dưới bên trái, điền thông điệp commit vào ô “Summary”. Một thông điệp tốt nên ngắn gọn và mô tả rõ ràng thay đổi, ví dụ: feat(theme): Customize styles and hide admin bar.
   • Bạn có thể thêm mô tả chi tiết hơn vào ô “Description” nếu cần.
   • Nhấp vào nút Commit to main.
3. Đẩy Thay đổi lên GitHub (Push):
   • Sau khi commit, một nút Push origin sẽ xuất hiện ở thanh công cụ trên cùng. Nút này cho biết bạn có những thay đổi trên máy tính cần được đồng bộ lên máy chủ GitHub.
   • Nhấp vào Push origin. Các thay đổi của bạn sẽ được tải lên kho chứa trên GitHub.

Bây giờ, kho chứa từ xa của bạn đã được cập nhật với những chỉnh sửa do AI gợi ý. Bạn đã hoàn thành một vòng lặp phát triển hoàn chỉnh!

Kết Luận

Quy trình làm việc “GitHub Desktop -> Gemini Web -> Local Editor -> GitHub Desktop” là một phương pháp mạnh mẽ và dễ tiếp cận để kết hợp quản lý phiên bản chuyên nghiệp với sức mạnh phân tích của AI. Mặc dù có bước áp dụng thủ công, quy trình này vẫn giúp bạn:

• Tổ chức code một cách có hệ thống: Mọi thay đổi đều được ghi lại và có thể truy vết.
• Tận dụng AI để giải quyết vấn đề: Nhận được các gợi ý về mã nguồn cho các tác vụ từ đơn giản đến phức tạp, giúp tiết kiệm thời gian nghiên cứu và gỡ lỗi.
• Làm quen với các công cụ hiện đại: Xây dựng thói quen làm việc chuyên nghiệp, một kỹ năng được các nhà tuyển dụng đánh giá cao.

Hãy bắt đầu áp dụng quy trình này vào các dự án của bạn. Bằng cách thực hành thường xuyên, bạn sẽ nhanh chóng làm chủ được một trong những kỹ năng quan trọng nhất của một lập trình viên hiện đại.