🚛 Cải thiện Trải nghiệm Người Dùng trong Freight Tracker

Sau khi hoàn thiện giao diện người dùng cho ứng dụng Freight Tracker với bố cục sạch sẽ, điều hướng tốt hơn, kiểu dáng đẹp và thiết kế phản hồi, tôi tưởng rằng mình đã hoàn tất. Nhưng thực tế không phải vậy. Vẫn còn nhiều điều cần cải thiện bên trong ứng dụng.

Dưới đây là tổng quan về tất cả những gì tôi đã làm sau khi giao diện đã "hoàn tất", cũng như những bài học mà tôi đã rút ra trong quá trình này:

🔄 Tạo Cảm Giác Năng Động cho Ứng Dụng với Zustand và WebSockets

Tôi đã tích hợp Zustand trong giai đoạn 2, nhưng giờ đây tôi đã làm cho nó hữu ích hơn. Thay vì gọi API mỗi lần, tôi có thể lưu trữ và tái sử dụng thông tin lô hàng trong kho Zustand. Điều này giúp ứng dụng chạy nhanh hơn.

Sau đó, tôi bổ sung hỗ trợ WebSocket để cho phép cập nhật trực tiếp — nếu một lô hàng được cập nhật theo thời gian thực (ví dụ: trạng thái thay đổi thành "ĐÃ GIAO"), nó sẽ phản ánh ngay lập tức trong giao diện mà không cần làm mới trang. Điều này đã tạo ra cảm giác hiện đại hơn cho ứng dụng.

Những gì tôi đã học được:

• Zustand rất tuyệt vời cho trạng thái toàn cục mà không cần boilerplate như Redux.
• useShipmentStore.getState() cho phép truy cập bên ngoài các thành phần.
• WebSockets với STOMP và SockJS đã được thiết lập sẵn trong backend, vì vậy tôi chỉ cần kết nối và đăng ký vào chủ đề đúng.
• Kết hợp WebSockets và Zustand giúp dữ liệu của tôi luôn tươi mới và nhanh chóng.

🗺️ Làm Bản Đồ Thực Tế Hơn

Bảng điều khiển bản đồ trông cũng ổn, nhưng tốc độ tải chậm. Tại sao? Bởi vì tôi đã gọi API Geocode của Google cho mỗi thành phố — mỗi lần.

Vì vậy, tôi đã thêm một bộ nhớ đệm geocode sử dụng localStorage. Bây giờ nếu một thành phố đã được tìm kiếm trước đó, chúng tôi sẽ tái sử dụng tọa độ. Điều này giúp việc hiển thị lộ trình nhanh hơn rất nhiều.

Tôi cũng đã:

• Gán mỗi lộ trình một màu khác nhau dựa trên trạng thái lô hàng.
• Thêm chỉ báo tải trong khi geocoding.
• Làm cho bản đồ cập nhật trực tiếp khi có lô hàng mới được thêm qua WebSocket.

⚠️ Sửa Lỗi Tải Lại trên Netlify

Một trong những lỗi khó chịu nhất mà tôi gặp phải: khi tôi làm mới một lộ trình như /shipments/2, tôi nhận được lỗi "trang không tìm thấy". Hóa ra đây là một vấn đề phổ biến với các ứng dụng React được triển khai trên Netlify.

Giải pháp? Một tệp _redirects đơn giản trong thư mục public/:

/* /index.html 200

Điều này cho Netlify biết gửi tất cả các lộ trình đến index.html để React Router có thể hoạt động.

🌍 Triển Khai Frontend và Backend

Frontend được triển khai trên Netlify và backend (Spring Boot) được container hóa và triển khai trên Render sử dụng Docker.

Những bước chính tôi đã học được:

• Backend cần cấu hình CORS đúng cách (ví dụ: cho phép URL frontend).
• Thiết lập cơ sở dữ liệu PostgreSQL trên Render và kết nối qua biến môi trường.
• Xây dựng mặc định .mvnw của Render đã thất bại, vì vậy tôi đã chuyển sang Docker và viết một Dockerfile thay thế.
• Frontend cần biến môi trường cho API backend (VITE_API_URL).
• Tôi không cam kết application.properties thực sự của mình, mà sử dụng application.properties.example với các chỗ giữ như ${DB_URL} — và thiết lập những bí mật đó trong Render.

🎯 Những Bài Học Kinh Nghiệm

Tôi đã học rằng ngay cả khi ứng dụng của bạn "trông" như đã hoàn tất, vẫn còn rất nhiều điều cần hoàn thiện:

• Tối ưu hóa hiệu suất (bộ nhớ đệm geocode).
• Cải thiện trải nghiệm người dùng (cập nhật trực tiếp, trạng thái tải).
• Làm cho ứng dụng sẵn sàng cho sản xuất (cấu hình triển khai, sửa lỗi định tuyến).
• Gỡ lỗi trong môi trường sản xuất là một kỹ năng thực sự (CORS, 404s, phản hồi geocode sai).

Vẫn còn một số vấn đề tôi cần xử lý một cách chính xác. Một trong số đó là tìm cách giữ cho máy chủ hoạt động lâu hơn và một vấn đề về socket.

Dưới đây là ứng dụng trực tiếp: Freight Tracker

💡 Mẹo Thực Hành

• Kiểm tra WebSocket: Đảm bảo rằng bạn đã kết nối đúng với server WebSocket và đang lắng nghe các chủ đề cần thiết.
• Tối ưu hóa API: Sử dụng bộ nhớ đệm cho các API thường xuyên được gọi để giảm tải cho server.
• Chẩn đoán lỗi: Sử dụng công cụ kiểm tra lỗi để theo dõi các vấn đề trong môi trường sản xuất.

⚠️ Lưu Ý Quan Trọng

• Đảm bảo rằng cấu hình CORS trên backend cho phép các yêu cầu từ frontend.
• Kiểm tra các lỗi 404 và tìm cách khắc phục chúng trong quá trình triển khai.

❓ Câu Hỏi Thường Gặp

1. Tại sao ứng dụng của tôi không có phản hồi khi dùng WebSocket?

   • Kiểm tra xem bạn đã kết nối đúng với server WebSocket và đang lắng nghe các chủ đề cần thiết chưa.

2. Làm thế nào để tối ưu hóa tốc độ tải của bản đồ?

   • Sử dụng bộ nhớ đệm cho các tìm kiếm địa lý để giảm thiểu số lần gọi API.

3. Tôi nên sử dụng công cụ nào để gỡ lỗi trong môi trường sản xuất?

   • Sử dụng các công cụ như Sentry hoặc LogRocket để theo dõi lỗi trong ứng dụng của bạn.