[Thực hành] Chiến dịch Tái thiết Portal TechBugs

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:

• Vận dụng được kỹ thuật phân nhánh (Branching) và hợp nhất (Merging): Quản lý mã nguồn bằng Git, phân chia tính năng trên các nhánh riêng biệt để tránh xung đột mã nguồn khi làm việc nhóm.

• Sử dụng được thẻ HTML cơ bản và Semantic tags: Cấu trúc lại giao diện (layout) bằng các thẻ ngữ nghĩa (<header>, <nav>, <section>, <article>, <footer>) thay vì lạm dụng thẻ <div>.

• Sử dụng được Danh sách (<ul>/<ol>): Xây dựng cấu trúc thanh điều hướng (Navigation bar) chuẩn xác và hỗ trợ SEO tốt.

Mô tả

Bối cảnh dự án: 

• Trang thông tin nội bộ của công ty TechBugs đang gặp khủng hoảng. Lập trình viên cũ đã xây dựng toàn bộ trang web bằng thẻ <div> (còn gọi là "Div-soup"), khiến điểm SEO tụt dốc, các trình đọc màn hình cho người khiếm thị không thể hoạt động. Tệ hơn, mọi thành viên trong team hiện tại đều đang "code chung" trên nhánh main của Git, dẫn đến việc code chép đè lên nhau, gây mất code và xung đột (conflict) liên tục mỗi buổi chiều.

Vai trò trong dự án:

• Vai trò của bạn (Học viên): Frontend Developer được giao nhiệm vụ chuẩn hóa cấu trúc HTML theo chuẩn Semantic và thiết lập lại luồng làm việc trên Git một cách chuyên nghiệp.

• Vai trò của Giảng viên: Tech Lead - Người nghiệm thu Pull Request (PR), kiểm tra lịch sử Git và chất vấn về tư duy phân nhánh.

• Vai trò của AI: Mentor & Git Assistant.

Quy tắc sử dụng AI:

• Được dùng AI để giải thích ý nghĩa các thẻ Semantic (VD: "Sự khác nhau giữa <section> và <article> là gì?").

• Được dùng AI để gỡ rối các thông báo lỗi của Git (VD: "Lỗi merge conflict này nghĩa là gì và cách giải quyết ra sao?").

• Không được yêu cầu AI "Viết toàn bộ trang HTML bằng Semantic tags cho tôi".

• Không được yêu cầu AI thực hiện các lệnh Git hộ mình mà không hiểu ý nghĩa của lệnh đó.

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 và phân tích đoạn mã HTML cũ (Legacy Code).

• Nhận diện các khối <div> nào cần chuyển thành <header>, <nav>, <section>, <footer>.

• Lên kế hoạch tạo 2 nhánh Git riêng biệt: một nhánh cho phần Menu, một nhánh cho phần Nội dung chính.

Vai trò của AI (Đối tác Brainstorm): 

• Dùng AI để làm rõ các khái niệm. Gợi ý Prompt: "Giải thích cho tôi tại sao dùng thẻ <ul> <li> cho thanh điều hướng lại tốt hơn việc dùng nhiều thẻ <a> đặt cạnh nhau?"

Sản phẩm đầu ra: Bảng sơ đồ tư duy (hoặc nháp trên giấy) về cấu trúc thẻ HTML mới và tên các nhánh Git cần tạo.

Đoạn mã nguồn mẫu (Legacy Code):

Bước 2: Thiết kế

Thời gian: 5 phút.

Nhiệm vụ của Học viên:

• Tạo một Git Repository nội bộ trên máy (hoặc Github).

• Tạo file index.html, dán đoạn code gốc (Legacy Code) vào.

• Thực hiện git add và git commit mã nguồn ban đầu này vào nhánh main. Đây là bước bắt buộc để tạo "điểm neo" gốc cho các nhánh khác dựa vào.

• Vẽ sơ đồ nhánh: Từ main rẽ ra 2 nhánh song song: feature/nav-bar và feature/semantic-content.

Vai trò của AI (Người phản biện logic): Nhờ AI đánh giá luồng Git. Gợi ý Prompt: "Nếu tôi đang làm việc trên nhánh feature/nav-bar mà sếp yêu cầu tôi phải sửa gấp một lỗi chính tả ở nhánh main, tôi nên dùng lệnh Git gì để tạm cất code đang làm dở?"

Sản phẩm đầu ra: Kho lưu trữ Git đã được khởi tạo, có sẵn 1 commit gốc chứa Legacy Code trên nhánh main.

Bước 3: Triển khai

Thời gian: 15 phút.

Nhiệm vụ của Học viên: 

• Phát triển tính năng Menu (Luồng 1): 

  • Đảm bảo đang ở nhánh main, tiến hành tạo và rẽ sang nhánh mới: git checkout -b feature/nav-bar. 

  • Tại file index.html, cấu trúc lại khối .menu sử dụng thẻ <nav>, <ul> và <li>. 

  • Lưu lại phiên bản: Thực hiện lệnh git add và git commit.

• Phát triển tính năng Semantic (Luồng 2):

  • QUAN TRỌNG: Phải chuyển vùng làm việc quay ngược trở lại nhánh gốc (git checkout main) để trả file index.html về trạng thái ban đầu chưa có Menu.

  • Từ main, tiếp tục tạo và rẽ sang nhánh thứ hai: git checkout -b feature/semantic-content.

  • Tiến hành thay thế các khối .top-bar, .main-content, .news-block, .bottom-bar thành <header>, <main>, <section>, <article>, <footer>.

  • Lưu lại phiên bản: Thực hiện lệnh git add và git commit.

Vai trò của AI (Mentor / Pair-Programming): Gợi ý Prompt: "Tôi đã tạo xong nhánh feature/nav-bar và muốn tạo thêm nhánh feature/semantic-content từ main. Tại sao tôi bắt buộc phải gõ lệnh git checkout main trước khi tạo nhánh mới? Nếu không gõ thì hậu quả là gì?"

Sản phẩm đầu ra: Kho lưu trữ hiện tại có 3 nhánh (main, feature/nav-bar, feature/semantic-content). Trong đó, 2 nhánh tính năng chứa các đoạn code đã được nâng cấp độc lập và hoàn toàn không dính dáng đến nhau.

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

Thời gian: 5 phút.

Nhiệm vụ của Học viên: 

• Chuyển về nhánh main và thực hiện lệnh Merge lần lượt 2 nhánh feature/nav-bar và feature/semantic-content vào main.

• Kiểm tra toàn bộ file index.html sau khi hợp nhất xem đã đúng chuẩn đầu ra chưa.

Vai trò của AI (Tester / Kẻ phá hoại): Gợi ý Prompt: "Hãy đưa ra một tình huống giả định khiến việc Merge 2 nhánh của tôi bị Conflict (xung đột). Làm thế nào để tôi nhận biết code đang bị conflict và cách giải quyết thủ công?"

Sản phẩm đầu ra: File HTML hoàn thiện trên nhánh main kết hợp đầy đủ tính năng và Lịch sử Git (Log) sạch sẽ.

Cơ chế đánh giá

Điểm bài thực hành (Thang 10) được chấm dựa trên 3 tiêu chí sau:

Chất lượng Sản phẩm (40%):

• Git: Lịch sử git log --graph thể hiện rõ ràng việc tạo rẽ nhánh (branching) và hợp nhất (merging). Không code trực tiếp 100% trên nhánh main.

• HTML: Biến mất hoàn toàn tình trạng Div-soup. Hệ thống menu sử dụng đúng cấu trúc <ul> > <li> > <a>. Các thành phần bao bọc dùng đúng chuẩn <header>, <main>, <article>, v.v.

Bảo vệ Mã nguồn - Vấn đáp (40%): Giảng viên sẽ đóng vai Tech Lead chất vấn. Học viên phải trả lời được:

• "Sự khác biệt giữa việc dùng thẻ <ul> và <ol> trong điều hướng là gì? Tại sao ở đây em chọn <nav> bọc ngoài <ul>?"

• "Khi em thực hiện Merge nhánh feature/nav-bar vào main, lệnh Git nào thực sự chạy ngầm bên dưới? Em xử lý ra sao nếu hai nhánh cùng sửa một dòng code ở file index.html?"

Kỹ năng tương tác AI - Prompt Log (20%):

• Đánh giá qua lịch sử chat với AI. Điểm cao cho các prompt hỏi về bản chất tư duy (ví dụ: xin ví dụ về Git Conflict, hỏi sự khác biệt semantic). Trừ điểm nếu dùng prompt: "Viết lại hộ đoạn code trên dùng Semantic tag".

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, merge.

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

• 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 đó.