Dùng Claude Code tạo web mục tiêu cá nhân có sao lưu
Một ứng dụng mục tiêu cá nhân tốt cần trả lời ba câu hỏi: tôi đang theo đuổi điều gì, bước tiếp theo là gì và dữ liệu có còn khi mở lại không? Bạn có thể dùng Claude Code để tạo bản thử nhỏ, rồi kiểm từng hành vi trước khi thêm tính năng.
Mục tiêu của bài là một web app dùng cho một người, có sao lưu thủ công. Thời gian hoàn thành tùy môi trường và số lỗi cần xử lý; đừng xem “một buổi” là lời bảo đảm.
🧰 1. Chọn môi trường và cách chạy
Claude Code có nhiều cách sử dụng như terminal, phần mở rộng IDE, ứng dụng desktop và web; yêu cầu tài khoản tùy cách truy cập. Không nên mặc định mọi lựa chọn đều miễn phí hoặc không cần thiết lập. Tổng quan chính thức.
Với bài thực hành này, yêu cầu Claude Code làm việc trong một thư mục dự án riêng. Chọn một trang HTML với CSS và JavaScript thuần để giảm phần phụ thuộc. Nhờ công cụ hướng dẫn chạy bằng máy chủ web cục bộ; chỉ cài thêm thứ thật sự cần cho môi trường của bạn.
🎯 2. Chốt phạm vi bản đầu
Mỗi mục tiêu có id, tên, bước tiếp theo, ngày hạn và trạng thái. Ví dụ: “Hoàn tất bài giới thiệu sản phẩm”, bước tiếp theo “viết dàn ý”, hạn do bạn chọn.
Bản đầu chỉ cần thêm, sửa, hoàn tất, mở lại và xóa có hoàn tác. Bộ lọc gồm tất cả, đang làm, hoàn tất và quá hạn. Quy tắc quá hạn là chưa hoàn tất và ngày hạn trước ngày hiện tại theo lịch địa phương.
Tạm để biểu đồ, tài khoản và nhắc việc tự động sang giai đoạn sau. Bạn cần một luồng sử dụng đúng trước khi có nhiều màn hình.
💬 3. Prompt xây ứng dụng
Tạo web app mục tiêu cá nhân bằng HTML/CSS/JavaScript thuần trong thư mục dự án này, không dùng thư viện tải từ CDN. Trước khi viết, nêu cấu trúc tệp và cách chạy local server. Mỗi mục tiêu: id, title, nextAction, dueDate, completed. Có thêm/sửa/hoàn tất/mở lại/xóa với hoàn tác. Từ chối tên trống. Hiển thị nội dung nhập dưới dạng văn bản. Lọc tất cả/đang làm/hoàn tất/quá hạn. Ngày hạn dùng YYYY-MM-DD theo lịch địa phương. Lưu bằng localStorage; báo rõ nếu lưu thất bại. Có xuất và nhập JSON với schemaVersion. Trước khi nhập: kiểm định dạng, xem trước số mục tiêu, cho chọn hủy hoặc thay thế sau khi đã xuất bản sao lưu. Giao diện dùng được bằng bàn phím và trên màn hình nhỏ. Không thêm đăng nhập, thanh toán hay dịch vụ bên ngoài. Sau cùng báo tệp đã tạo và cách kiểm từng chức năng.
Yêu cầu công cụ báo những gì đã kiểm thực tế. Nếu chưa mở được giao diện, không ghi trạng thái “đã kiểm” chỉ vì code đã được viết.
💾 4. Hiểu đúng nơi lưu dữ liệu
localStorage lưu theo origin của trang và giữ dữ liệu qua các phiên trình duyệt. Dữ liệu trong phiên riêng tư bị xóa khi đóng tab riêng tư cuối cùng; hành vi với URL file: không được bảo đảm. Tài liệu MDN.
Trong thiết kế này không có cơ chế đồng bộ: mở cùng website trên điện thoại không tự mang theo mục tiêu từ laptop. Đưa ứng dụng lên hosting cũng không tự thêm đồng bộ hay đăng nhập.
Xuất bản sao lưu trước các thay đổi lớn. Giữ tệp ở nơi bạn tìm lại được; bản sao nằm ngoài trình duyệt mới hữu ích khi dữ liệu trình duyệt bị mất.
🧪 5. Kiểm theo một vòng sử dụng thật
Tạo ba mục tiêu thử: một mục hôm qua, một mục hôm nay và một mục không đặt hạn. Hoàn tất mục hôm qua: nó phải rời danh sách quá hạn. Mở lại mục đó: nó phải xuất hiện lại.
Sau đó thử tên trống, đổi bước tiếp theo, tải lại trang, xóa rồi hoàn tác. Dùng phím Tab để đi qua các nút và kiểm một màn hình nhỏ.
Cuối cùng xuất JSON, nhập thử tệp sai định dạng để chắc dữ liệu cũ không bị thay, rồi thử phục hồi bản hợp lệ. Các bước này là checklist người đọc cần chạy, không phải tuyên bố CYAN PRO đã xây và kiểm một ứng dụng cụ thể.
✅ 6. Cải thiện theo lỗi sử dụng
Khi có lỗi, mô tả hành động, kết quả mong đợi và kết quả thực tế. Ví dụ: “Mục đã hoàn tất vẫn nằm ở bộ lọc quá hạn sau khi tải lại”.
Sửa từng lỗi, kiểm lại cùng ca và lưu phiên bản hoạt động. Ứng dụng đáng dùng là ứng dụng giúp bạn tiếp tục công việc và giữ được dữ liệu, không chỉ có một ảnh giao diện đẹp.