Đây là bài 3 của chương 8: Dự án ứng dụng công việc, thuộc khóa demo JavaScript. Nội dung được dùng để trải nghiệm cấu trúc chương trình học; hãy thực hành trên dữ liệu và môi trường thử nghiệm riêng. Trong dự án xuyên suốt, bạn sẽ xây dựng ứng dụng danh sách công việc có tìm kiếm, lọc và lưu trạng thái trên trình duyệt.
Mục tiêu cụ thể
Ứng dụng hoàn chỉnh cần các trạng thái giao diện rõ ràng, cách cập nhật dữ liệu nhất quán và khả năng khôi phục sau tải lại. Mỗi tính năng nên có điều kiện chấp nhận trước khi triển khai.
Đề bài thực hành
Hoàn thiện ứng dụng với thêm, sửa, xóa, lọc, tìm kiếm và lưu cục bộ; viết một hướng dẫn thao tác ngắn.
Quy trình từng bước
- Xác định đầu vào, đầu ra và trạng thái trước khi bắt đầu. Với dự án ứng dụng công việc, hãy ghi lại kết quả bạn mong muốn trước khi chạy ví dụ.
- Tạo bản thử nhỏ nhất trong một thư mục hoặc môi trường riêng. Chỉ dùng dữ liệu giả; không sao chép token, tài khoản hoặc dữ liệu cá nhân vào bài tập.
- Thực hiện yêu cầu: Hoàn thiện ứng dụng với thêm, sửa, xóa, lọc, tìm kiếm và lưu cục bộ; viết một hướng dẫn thao tác ngắn.
- Quan sát kết quả và so sánh từng điều kiện chấp nhận. Khi chưa đạt, thay đổi một yếu tố mỗi lần để biết thay đổi nào tạo ra tác động.
- Lưu kết quả cùng ghi chú giải thích quyết định. Người khác cần tái hiện được thao tác mà không phải đoán cấu hình hoặc dữ liệu ban đầu.
Điểm khởi đầu
const state = { tasks: [], filter: "all", query: "" };
function visibleTasks(state) {
return state.tasks.filter(task =>
(state.filter !== "done" || task.done) &&
task.title.toLowerCase().includes(state.query.toLowerCase())
);
}Đối chiếu kết quả
- Tìm kiếm kết hợp được bộ lọc
- Không mất dữ liệu khi render lại
- Có empty state và thông báo lỗi
Nếu kết quả khác dự kiến
Giữ nhiều bản sao danh sách đã lọc khiến trạng thái lệch nhau. Ưu tiên giữ nguồn dữ liệu và suy ra phần hiển thị.
Chụp hoặc ghi lại đầu vào và đầu ra trước khi sửa. Xác nhận tệp đã lưu, đúng môi trường đang chạy và dữ liệu thử vẫn giữ nguyên. Sau khi sửa, chạy lại cả trường hợp ban đầu lẫn một trường hợp biên để tránh sửa được một nhánh nhưng làm hỏng nhánh khác.
Sản phẩm cần lưu
- Mã nguồn hoặc sơ đồ của bản thử.
- Dữ liệu đầu vào có thể dùng lại.
- Ba kết quả kiểm tra kèm giải thích.
- Một ghi chú về điều bạn sẽ làm khác nếu triển khai cho người dùng thật.