Yêu cầu người dùng đầu tiên đã phát hiện ra một lỗi cấu trúc "dở khóc dở cười" trong DeskFlow

Tôi vừa mới ra mắt DeskFlow, một công cụ mô phỏng setup bàn làm việc trực quan. Chỉ vài ngày sau khi ra mắt, tôi đã nhận được yêu cầu đầu tiên từ một người dùng muốn thêm một thiết bị mới!

Người dùng này yêu cầu bổ sung màn hình Kuycon P27D 4K 27" 144Hz. Đặc biệt, họ còn rất tỉ mỉ khi tự tay cấu hình các cổng kết nối trong ứng dụng trước khi gửi yêu cầu (3 USB-C, 1 HDMI, 1 DP). Đây thực sự là một khoảnh khắc khiến tôi cảm thấy vô cùng tự hào với tư cách là một lập trình viên độc lập (solo dev).

Xác minh thông số kỹ thuật

Trước khi đẩy bản cập nhật lên môi trường production (sản xuất thực tế), tôi đã truy cập website chính thức của Kuycon để xác thực lại các cổng kết nối. Người dùng đã làm rất tốt, nhưng vẫn có một số điểm nhỏ khác biệt so với thông số chính thức:

• USB-C: Người dùng điền là 3 -> Thực tế là 2 (một cổng 100W PD, một cổng thường).
• HDMI: Người dùng điền là 1 -> Thực tế là 2 (HDMI 2.1).
• DP: Người dùng điền là 1 -> Thực tế là 1 (Chính xác!).
• Thiếu sót: Cổng nguồn AC và jack âm thanh 3.5mm.

Tôi đã chỉnh sửa dữ liệu dựa trên thông số chính thức và chèn thẳng vào cơ sở dữ liệu Supabase của mình.

Bí ẩn của chiếc màn hình biến mất

Tôi chạy câu lệnh SQL, nhìn thấy dòng dữ liệu trong Supabase và tự tin thực hiện lệnh hard-refresh (tải lại cứng) trên ứng dụng (Cmd+Shift+R).

Tuy nhiên, chiếc màn hình hoàn toàn không xuất hiện trong tab "Monitors" (Màn hình).

Ban đầu, tôi đổ lỗi cho cơ chế lưu trữ tạm (caching). Tôi liên tục làm mới trang nhưng màn hình Kuycon P27D vẫn bặt vô âm tín.

Nguyên nhân gốc rễ: Sự đoán mò được viết cứng (Hardcoded)

Tôi đã đào sâu vào code và tìm ra thủ phạm: hàm equipmentCategory(). Hàm này chịu trách nhiệm quyết định một mục dữ liệu sẽ thuộc tab nào.

Kinh hoàng thay, nó hoàn toàn bỏ qua cột category trong cơ sở dữ liệu Supabase của tôi. Thay vào đó, nó đang thực hiện thao tác sau:

String equipmentCategory(Equipment e) {
  final n = e.name.toLowerCase();
  if (n.contains('monitor') || n.contains('display') || n.contains('odyssey')) {
    return 'Monitors';
  }
  // ...
}

Ứng dụng của tôi đang đoán danh mục sản phẩm bằng cách đọc tên của chúng! Các thiết bị trước đây vốn dĩ hoạt động bình纯粹 vì tên của chúng có chứa các từ khóa như "Monitor", "Display" hay "Odyssey".

Nhưng tên "Kuycon P27D" không kích hoạt bất kỳ từ khóa nào, nên ứng dụng đã vô tư vứt nó vào tab "Others" (Khác).

Tệ hơn nữa, tôi nhận ra mô hình dữ liệu Equipment của mình thậm chí không có trường category. Ứng dụng chưa bao giờ thực sự cố gắng lấy thông tin này từ cơ sở dữ liệu.

Khắc phục sự cố

Tôi đã sửa ngay lập tức hai vấn đề:

1. Thêm trường category vào mô hình dữ liệu để nó thực sự đọc từ cơ sở dữ liệu.

class Equipment {
  final String? category;  // Cuối cùng cũng có ở đây!
  // ...
}

factory Equipment.fromJson(Map<String, dynamic> json) {
  return Equipment(
    category: json['category'] as String?,
    // ...
  );
}

2. Cập nhật logic để ưu tiên giá trị từ cơ sở dữ liệu, sử dụng bảng ánh xạ (mapping table) để chuyển đổi giá trị DB thành tên tab UI. Logic đoán mò tên cũ giờ chỉ đóng vai trò là phương án dự phòng (fallback).

const _dbCategoryMap = {
  'monitor': 'Monitors',
  'laptop':  'Laptops',
  // ...
};

String equipmentCategory(Equipment e) {
  if (e.category != null && e.category!.isNotEmpty) {
    return _dbCategoryMap[e.category!.toLowerCase()] ?? 'Others';
  }
  // Fallback: đoán dựa trên tên
  final n = e.name.toLowerCase();
  // ...
}

Bài học kinh nghiệm

Nếu không phải vì yêu cầu cụ thể của người dùng này về một chiếc màn hình không có từ "monitor" trong tên, lỗi này có thể đã ẩn giấu suốt nhiều tháng qua.

Cảm ơn người dùng đầu tiên của tôi đã giúp phát hiện và sửa chữa một lỗi cấu trúc cốt lõi. DeskFlow v1.1.1 đã chính thức ra mắt và việc sắp xếp thiết bị giờ đây cuối cùng đã mang tính xác định (deterministic)!

Một lời cảm ơn lớn gửi đến ai đó đã yêu cầu chiếc màn hình Kuycon P27D 🙏

Các bạn hãy thử trải nghiệm và cho tôi phản hồi nhé! --> DeskFlow