Xây dựng hệ thống thu thập phản hồi người dùng với Node.js và Express.js

Dự án này cho phép thu thập phản hồi của người dùng thông qua một biểu mẫu và lưu lại vào một tệp cục bộ. Trình thu thập phản hồi người dùng là một tính năng cơ bản trong nhiều ứng dụng — nó là một công cụ hoặc hệ thống được sử dụng để thu thập ý kiến từ người dùng về trải nghiệm của họ với sản phẩm hoặc dịch vụ. Công cụ này giúp các nhóm phát triển hiểu được người dùng nghĩ gì, cảm thấy thế nào hoặc cần gì, từ đó đưa ra các cải tiến hợp lý.

Yêu cầu trước khi bắt đầu

Có kiến thức cơ bản về JavaScript, Node.js và Express.
Máy tính đã cài đặt sẵn Node.js, Git và npm.

Các tính năng chính

Nhận phản hồi với các trường: tên, email, nội dung và một hình ảnh.
Kiểm tra tính hợp lệ của tất cả các trường, bao gồm định dạng email và độ dài thông điệp.
Chỉ chấp nhận hình ảnh định dạng .jpeg, .jpg, .png với dung lượng tối đa 10MB.
Lưu các tệp đã tải lên vào thư mục /uploads.
Lưu phản hồi người dùng vào tệp feedbacks.json trong máy.

Cấu trúc dự án

TC-Feedback-Collector/
├──controllers/       // Handles request logic
├──middleware/        // Custom middleware functions
├──model/
├──routes/            // API route definition
├──service/
├──utility/
├──app.js             // main application file
├──.gitignore         // gitignore file
├──package.json       // Project dependencies
└──README.md         //documentation file

Cài đặt dự án

Sao chép repository và điều hướng vào thư mục dự án

git clone https://github.com/Jerryemmanuel01/TC-Feedback-Collector.git
cd TC-Feedback-Collector

Khởi tạo dự án Node.js

npm init -y

Lệnh này sẽ tạo ra file package.json.

Cài đặt các dependencies

npm install express multer nodemon path

Trong đó:

express: Đơn giản hóa quá trình xây dựng server và API.
multer: Cho phép người dùng tải tệp lên qua form (ví dụ hình ảnh, tài liệu).
nodemon: Tự động khởi động lại ứng dụng khi có thay đổi file.
path: Cung cấp các công cụ làm việc với đường dẫn tệp theo cách đa nền tảng.

1. Cấu hình Server

Tệp app.js là tệp chính của server. Nó khởi tạo server Express.js, phục vụ các tệp tĩnh (hình ảnh đã tải lên), định tuyến các yêu cầu phản hồi đến /feedback và phân tích dữ liệu JSON và form URL-encoded được gửi lên.

2. Cấu hình chức năng lưu phản hồi

Một hàm được định nghĩa để lưu phản hồi của người dùng vào tệp feedbacks.json trên server.

3. Cấu hình Middleware

Thư mục middleware chứa hai tệp:

fileUpload.js: Thiết lập xử lý tải lên tệp bằng middleware Multer. Tệp được lưu an toàn, đặt tên duy nhất và áp dụng giới hạn về loại tệp & kích thước.
validateFeedback.js: Thực hiện kiểm tra tính hợp lệ phía server cho các trường phản hồi trước khi xử lý. Đảm bảo dữ liệu gửi lên đúng định dạng và tuân theo quy tắc yêu cầu.

4. Tạo route

Một route Express.js được tạo để xử lý yêu cầu gửi phản hồi. Điểm cuối POST / kiểm tra dữ liệu phản hồi và lưu vào tệp JSON.

5. Chạy ứng dụng

npm run start

6. Kiểm thử ứng dụng bằng Postman

Điểm cuối /feedback là nơi nhận phản hồi từ người dùng.

Các bước:

Mở Postman
Nhập URL: http://localhost:5000/feedback
Đặt loại body thành form-data
Thêm các cặp key-value sau:
Gửi yêu cầu. Nếu tất cả dữ liệu hợp lệ, bạn sẽ nhận phản hồi như sau:

{
  "status": 201,
  "message": "Feedback saved successfully.",
  "error": false
}

Kết luận

Dự án này là một giải pháp đơn giản nhưng hiệu quả để thu thập phản hồi người dùng kèm theo hình ảnh. Nó thể hiện các kỹ thuật phát triển backend quan trọng như kiểm tra form, xử lý file với Multer và cấu trúc định tuyến rõ ràng với Express.js.

development