[Thực hành] Tái cấu trúc giao diện và lịch sử dự án

Mục tiêu

Sau khi hoàn thành bài thực hành này, học viên có khả năng:

• Giải thích được ý nghĩa của các Semantic tags (<header>, <main>, <article>, <section>, <footer>) đối với SEO; trình bày được 3 trạng thái của Git (Modified, Staged, Committed).

• Chuyển đổi mã HTML "div-soup" (chỉ dùng thẻ div) sang Semantic HTML. Thực hiện quy trình git add, git commit chia nhỏ theo từng tính năng (Atomic commits) thay vì gom tất cả vào một commit duy nhất.

• Phân tích và thiết kế chiến lược commit (Commit Strategy) tuân thủ chuẩn Conventional Commits (ví dụ: feat:, fix:, refactor:).

Mô tả

Bối cảnh dự án:

• Trang Landing Page của công ty đang bị rớt hạng SEO thê thảm trên Google. Nguyên nhân do Developer cũ xây dựng trang web bằng cách lạm dụng toàn thẻ <div> lồng nhau vô tội vạ, khiến bot của Google không hiểu được cấu trúc nội dung. Tồi tệ hơn, Developer cũ đã nghỉ việc và để lại một lịch sử Git thảm họa với một commit duy nhất: "update code done", khiến team không thể khôi phục lại các phiên bản trước đó.

Vai trò trong dự án:

• Vai trò Học viên: Frontend Developer & Git Maintainer (Người dọn dẹp và cứu hộ dự án).

• Vai trò Giảng viên: Tech Lead / Product Owner (Người duyệt mã nguồn và kiểm tra log lịch sử).

• Vai trò AI: Senior SEO Expert (Tư vấn cấu trúc HTML) & Git Mentor (Hỗ trợ xử lý xung đột/lệnh Git).

Quy tắc sử dụng AI:

• Được phép sử dụng AI giải thích sự khác biệt giữa các thẻ (Ví dụ: <b> vs <strong>), tạo nội dung chữ giả (Lorem Ipsum) hoặc ảnh Placeholder để trang web sinh động hơn, giải nghĩa các thông báo lỗi trên Terminal của Git.

• Không được copy toàn bộ file code lỗi cho AI với câu lệnh "Hãy sửa lại bằng Semantic tags cho tôi". Không yêu cầu AI sinh ra toàn bộ chuỗi lệnh Terminal Git từ A đến Z.

• Học viên phải tự gõ từng lệnh git commit và giải thích được ý nghĩa của tham số -m.

Hướng dẫn triển khai

Bước 1: Xây dựng ý tưởng

Thời gian: 5 phút.

Nhiệm vụ của Học viên: Đọc file index.html cũ (div-soup). Nhận diện các khối nội dung để xác định đâu là thanh điều hướng, đâu là nội dung chính, đâu là chân trang.

Vai trò của AI (Đối tác Brainstorm): Tư vấn về tác động của Semantic tags lên SEO. (Ví dụ: "Tại sao Google lại thích thẻ <main> hơn thẻ <div>?").

Sản phẩm đầu ra: Bản nháp chia vùng Layout (Wireframe).

Mã HTML mẫu: 

Bước 2: Thiết kế

Thời gian: 5 phút

Nhiệm vụ của Học viên: Phân bổ các thẻ Semantic (<nav>, <section>, <aside>) vào bản nháp. Thiết kế Commit Strategy bằng cách lên danh sách các thay đổi cần commit riêng biệt.

Vai trò của AI (Người phản biện Logic): Góp ý về lựa chọn thẻ. (Ví dụ: "Giữa thẻ <article> và <section>, tôi nên dùng thẻ nào cho danh sách sản phẩm?").

Sản phẩm đầu ra: Sơ đồ cấu trúc HTML và danh sách 4 thông điệp Commit dự kiến chuẩn quy tắc.

Gợi ý nhiệm vụ cho Học viên (Áp dụng chiến lược Git Commit):

• Commit 1 (refactor: semantic header and navigation): Chuyển khối .header-area thành <header>, khối .navigation thành <nav>, thay các .nav-item bằng danh sách <ul>, <li> và <a>.

• Commit 2 (refactor: semantic main and hero section): Bọc vùng nội dung giữa trang bằng <main>. Sửa .hero-title thành <h1>, .hero-desc thành <p>.

• Commit 3 (refactor: semantic services section): Đổi .services-container thành <section>, .section-title thành <h2>. Đổi từng .service-box thành <article> và .service-name thành <h3>.

• Commit 4 (refactor: semantic footer): Thay thế .footer-area bằng <footer>. Tối ưu lại cấu trúc thông tin liên hệ.

Bước 3: Triển khai

Thời gian: 10 phút

Nhiệm vụ của Học viên: Khởi tạo git init. Viết lại mã HTML sạch. Cứ xong một phần (ví dụ: xong Header), thực hiện git add và git commit -m "refactor: update header to semantic tags".

Vai trò của AI (Mentor / Pair-Programming): Giải thích lỗi Git. (Ví dụ: "AI giải thích giúp lỗi 'Untracked files' khi tôi gõ git status và cách xử lý").

Sản phẩm đầu ra: Phiên bản HTML hoàn chỉnh và Local Git Repository có lịch sử rõ ràng.

Bước 4: Vận hành

Thời gian: 5 phút

Nhiệm vụ của Học viên: Kiểm tra lại cấu trúc bằng W3C Validator. Kiểm tra lịch sử Git bằng lệnh git log --oneline. Đẩy code lên GitHub.

Vai trò của AI (Kiểm thử - QA): Đóng vai W3C Validator đọc code của học viên để tìm lỗi thiếu thẻ đóng, hoặc soi các lỗi sai chuẩn Conventional Commits trong lịch sử dự kiến.

Sản phẩm đầu ra: Link GitHub Repo vượt qua mọi tiêu chuẩn kỹ thuật.

Cơ chế đánh giá

• Chấm điểm sản phẩm (50%): Thay thế thành công ít nhất 80% các thẻ <div> vô nghĩa bằng các thẻ Semantic với cấu trúc lồng nhau hợp lý. Lịch sử git log có tối thiểu 4 commits, chia theo từng khối tính năng/refactor, không có commit nào mang tên vô nghĩa.

• Bảo vệ mã nguồn (30%): Giảng viên (Tech Lead) sẽ chất vấn các câu hỏi như tại sao lại tách việc sửa Header và Footer ra làm 2 commits khác nhau thay vì gộp chung, hoặc điều gì sẽ xảy ra với các file vừa sửa nếu chỉ dùng git commit mà quên lệnh git add trước đó.

• Nhật ký Prompt (20%): Học viên nộp lịch sử Chat. Đánh giá cao các câu hỏi thể hiện tư duy thiết kế, ví dụ như nhờ AI kiểm tra nguyên nhân cấu trúc chưa chuẩn SEO thay vì xin giải pháp và code trực tiếp.

Hướng dẫn nộp bài:

Học viên nộp các tài liệu sau (Github):

• Link Github Repository: (Bắt buộc) Để giảng viên có thể xem network branch (sơ đồ nhánh) và kiểm tra quá trình commit.

• File index.html: Chứa sản phẩm cuối cùng sau khi đã commit thành công.

• File ai_prompt_log.md: Lưu lại toàn bộ lịch sử các câu lệnh (prompts) đã trao đổi với AI, kèm theo giải thích ngắn gọn về lý do dùng câu lệnh đó.