Bài 6 · Vận dụng · 22 phút
Thêm tính năng & sửa khi hỏng
Biên soạn bởi Nguyễn Anh Tuấn
Lặp để sản phẩm lớn dần: yêu cầu thay đổi, đọc lướt diff để biết AI đổi gì, và khi AI làm hỏng thì khôi phục (rewind/checkpoint), gỡ lỗi bằng cách mô tả triệu chứng cho AI. Khi nào nên dừng và mô tả lại từ đầu thay vì chữa tiếp.
Đã có khung web bán hàng và một chỗ cất an toàn trên GitHub, giờ mèo con thêm tính năng - từng chút một. Mỗi tính năng là một vòng lặp vibe quen thuộc, và sau mỗi bước chạy ổn thì commit một mốc. Bước nhỏ, lưu thường, là cách đi xa mà không sợ ngã đau.
Bài này lo hai việc đi cùng nhau: thêm cái mới, và xử lý khi AI làm hỏng - vì vibe coding thì hỏng là chuyện thường, quan trọng là gỡ gọn.
Sau khi Claude sửa, nó cho mèo con xem diff - bản so sánh trước/sau: dòng thêm có dấu +, dòng bớt có dấu -.
diff minh hoạ: thêm một nút vào trang sản phẩm (không cần đọc từng dòng)
app/san-pham/page.tsx
<p>{ten}</p>
<p>{gia}đ</p>
+ <button>Thêm vào giỏ</button> Mèo con không cần hiểu từng dòng. Chỉ nhìn lướt: nó đụng đúng file mình nhờ chưa, và quy mô thay đổi có hợp lý không. Nhờ đổi một nút mà nó sửa cả chục file lạ thì nên hỏi lại trước khi đồng ý.
- ▸diff cho thấy AI đổi gì: dòng + là thêm, dòng - là bớt.
- ▸Nhìn lướt tên file và quy mô, không cần đọc từng dòng.
- ▸Đụng nhiều file lạ ngoài dự tính là dấu hiệu nên hỏi lại.
Sản phẩm hỏng là sẽ có. Cách gỡ nhanh nhất không phải nói "sửa đi" mà là mô tả triệu chứng: kể chính xác cái mèo con THẤY. Bấm nút nào? Màn hình hiện gì? Có dòng chữ đỏ nào? Dán luôn cả thông báo lỗi cho Claude.
hai cách báo lỗi cho Claude - cái dưới giúp nó tìm ra gấp nhiều lần
Mơ hồ: "trang sản phẩm không chạy, sửa đi"
Cụ thể: "Bấm 'Thêm vào giỏ' thì trang trắng xoá.
Console hiện: TypeError: cart is undefined" Triệu chứng càng cụ thể, Claude càng khoanh đúng chỗ. Mèo con đang đóng vai người báo bệnh: kể rõ đau ở đâu thì bác sĩ chẩn nhanh.
Nếu mô tả triệu chứng vài lần mà vẫn chưa xong, đừng cố vá thêm - hãy quay lui. Có ba nấc, chọn nấc nhẹ nhất đủ cứu:
Đây chính là lúc thói quen commit thường xuyên ở bài trước trả công: có nhiều mốc tốt thì luôn có chỗ để lùi về mà không mất bao nhiêu.
Trung thực
Có một cái bẫy: càng sửa càng rối. Dấu hiệu nhận ra: mèo con sửa hai ba lần mà mỗi lần lại hỏng một chỗ khác, hoặc Claude cứ đổi tới đổi lui quanh cùng một lỗi. Lúc đó tiếp tục chữa thường chỉ đào sâu cái hố.
Cách thoát: quay về mốc tốt gần nhất, rồi mô tả lại yêu cầu cho rõ hơn - tách nhỏ hơn, nói rõ kết quả mong muốn. Làm lại từ nền sạch gần như luôn nhanh hơn cố gỡ một mớ rối.
- ▸Sửa vài lần vẫn loanh quanh = tín hiệu nên dừng chữa.
- ▸Quay về mốc tốt rồi mô tả lại rõ hơn, tách nhỏ yêu cầu.
- ▸Làm lại từ nền sạch thường nhanh hơn vá một mớ rối.
Gom lại bốn thói quen: bước nhỏ, commit thường, đọc lướt diff, và quay lui sớm khi thấy loanh quanh. Bốn cái này giữ cho mèo con vibe nhanh mà không sợ làm hỏng không cứu được.
Bước tiếp theo
Câu hỏi thường gặp
diff là bản so sánh trước/sau khi sửa code: dòng được thêm có dấu +, dòng bị bớt có dấu -. Sau khi Claude sửa, nó cho bạn xem diff để biết chính xác nó đã đổi gì, ở file nào.
Bạn không cần hiểu từng dòng. Chỉ nhìn lướt hai thứ: nó đụng vào ĐÚNG file mình nhờ không, và quy mô thay đổi có hợp lý không. Nếu mèo con nhờ đổi nút mà nó sửa cả chục file lạ, đó là dấu hiệu nên hỏi lại trước khi đồng ý.
Là kể chính xác cái bạn THẤY khi lỗi xảy ra: bấm nút nào, màn hình hiện gì, có dòng chữ đỏ nào. Dán luôn cả thông báo lỗi cho Claude. "Bấm Mua thì trang trắng, hiện chữ Error: undefined" giúp nó tìm ra gấp nhiều lần so với "không chạy".
Tick những điều em tự tin làm được. Càng lên cao, em càng hiểu sâu.
Trả lời vài câu để chắc rằng em đã nắm bài.
Khi báo lỗi cho Claude, cách nào hiệu quả nhất?
- 1
Thêm một tính năng nhỏ
Nhờ Claude thêm nút "Thêm vào giỏ" ở trang sản phẩm của web bán hàng.
✅ Hoàn thành khi: Mở localhost thấy nút mới ở mỗi sản phẩm - một vòng thêm tính năng đã xong.
- 2
Đọc lướt diff
Sau khi Claude sửa, xem diff nó đưa ra; ghi lại nó đụng vào file nào và đại ý thêm/bớt gì.
✅ Hoàn thành khi: Bạn nêu được tên file bị đổi và mô tả một câu thay đổi, xác nhận đúng chỗ mình nhờ.
- 3
Commit một mốc
Nhờ Claude commit và push thay đổi vừa rồi lên GitHub.
✅ Hoàn thành khi: Tab Commits trên GitHub có thêm một mốc mới - điểm quay lui vừa được tạo.
- 4
Gỡ lỗi bằng triệu chứng
Gặp (hoặc tạo) một lỗi nhỏ, rồi mô tả TRIỆU CHỨNG cụ thể cho Claude để nó sửa - dán cả thông báo lỗi nếu có.
✅ Hoàn thành khi: Ghi lại câu mô tả triệu chứng của bạn và xác nhận lỗi đã hết sau khi Claude sửa.
- 5
Tập quay lui
Dùng rewind (hoặc quay về commit gần nhất) để bỏ một thay đổi vừa làm.
✅ Hoàn thành khi: Trang trở lại trạng thái trước khi thay đổi - mèo con đã dùng được tấm lưới an toàn.
- 6
Biết khi nào dừng
Nhớ lại một lần sửa cứ loanh quanh không xong, viết một câu vì sao lúc đó nên quay lui thay vì chữa tiếp.
✅ Hoàn thành khi: Câu của bạn nêu được dấu hiệu (sửa nhiều lần vẫn hỏng chỗ khác) và lựa chọn đúng: quay về mốc tốt rồi mô tả lại.