Hành Trình Từ Biểu Mẫu Tĩnh Đến Configurator Động Trong PLM

Khi được giao nhiệm vụ xây dựng một biểu mẫu cấu hình sản phẩm, bạn có thể nghĩ rằng đó là một công việc đơn giản: chọn một mẫu, chọn vài tùy chọn, và xong. Nhưng điều gì sẽ xảy ra nếu sản phẩm đó có đến hàng ngàn sự kết hợp khác nhau? Đột nhiên, dropdown gọn gàng của bạn trở thành một cơn ác mộng với những logic rối rắm và những cập nhật vô tận.

Đó chính là tình huống mà chúng tôi đã gặp phải. Những gì bắt đầu như một biểu mẫu React đơn giản đã phát triển thành một configurator động, dựa trên quy tắc có thể mở rộng một cách dễ dàng và cung cấp phản hồi ngay lập tức cho người dùng. Đây là câu chuyện về cách chúng tôi đã thực hiện điều đó.

Tại Sao Biểu Mẫu Tĩnh Không Bền Vững

Phương pháp đầu tiên của chúng tôi trông như thế này:

<form>
  <label>Mẫu</label>
  <select>
    <option>Mẫu-A</option>
    <option>Mẫu-B</option>
  </select>
  <button type="submit">Áp Dụng Cấu Hình</button>
</form>

Nó hoạt động với hai tùy chọn. Nhưng khi độ phức tạp gia tăng, những vấn đề bắt đầu lộ diện:

• Quá tải mã cứng – mỗi sự lựa chọn mới đều yêu cầu chỉnh sửa mã frontend.
• Độ trễ xác thực – lỗi chỉ xuất hiện sau khi nhấn gửi.
• Luật lệ rải rác – logic bị phân tán giữa frontend và backend.
• Vấn đề mở rộng – hàng trăm tùy chọn phụ thuộc lẫn nhau trở nên khó quản lý.

Rõ ràng, điều này không thể duy trì.

Sự Chuyển Mình: Xây Dựng Động

Chúng tôi đã đặt ra bốn nguyên tắc cho hệ thống mới:

1. Biểu mẫu dựa trên schema – giao diện người dùng nên tự tạo ra từ một schema JSON.
2. Xác thực thời gian thực – lỗi nên xuất hiện ngay khi một tùy chọn sai được chọn.
3. Logic kinh doanh tập trung – quy tắc xác thực nằm ở backend, không được nhân đôi ở frontend.
4. Xem trước trực quan – người dùng nên thấy kết quả ngay lập tức, thậm chí trong 3D nếu có thể.

Công Nghệ Sử Dụng

• React cho giao diện người dùng
• @rjsf/core (React JSONSchema Form) cho việc tạo biểu mẫu dựa trên schema
• AJV cho xác thực JSON Schema
• Node.js cho việc thực thi quy tắc kinh doanh và tích hợp với hệ thống PLM
• Three.js cho các bản xem trước 3D tương tác

Cách Tất Cả Kết Hợp Lại

Giao diện phía trước động tạo ra các biểu mẫu và xử lý các kiểm tra đơn giản. Backend thực thi các quy tắc và trả về lỗi hoặc cấu hình hợp lệ. Bản xem trước sau đó cập nhật ngay lập tức.

JSON Schema: Trái Tim Của Hệ Thống

Ở trung tâm là một schema như sau:

{
  "title": "Cấu Hình Sản Phẩm",
  "type": "object",
  "properties": {
    "model": { "type": "string", "enum": ["A", "B"] },
    "color": { "type": "string", "enum": ["Đỏ", "Xanh", "Xanh lá"] },
    "size": { "type": "string", "enum": ["Nhỏ", "Vừa", "Lớn"] }
  },
  "required": ["model", "color"]
}

Và backend thực thi các quy tắc một cách sạch sẽ:

app.post("/validate", (req, res) => {
  const { model, color } = req.body;
  if (model === "A" && color === "Xanh") {
    return res.status(400).json({ error: "Mẫu A không hỗ trợ màu Xanh" });
  }
  res.json({ success: true });
});

Không có sự nhân đôi, không có sự đoán mò.

Triển Khai Giao Diện Người Dùng

Với RJSF và AJV, biểu mẫu gần như tự xây dựng:

import Form from "@rjsf/core";
import validator from "@rjsf/validator-ajv8";

const schema = { /* schema như trên */ };

const App = () => {
  const handleSubmit = ({ formData }) => {
    console.log("Đã gửi:", formData);
    // Gửi đến backend để xác thực
  };

  return (
    <Form schema={schema}
      validator={validator}
      onSubmit={handleSubmit}
    />
  );
};

export default App;

Các chỉnh sửa giao diện người dùng tùy chỉnh và thông điệp xác thực làm cho nó thân thiện với người dùng trong khi vẫn hoàn toàn động.

Trải Nghiệm Người Dùng

Dưới đây là những gì xảy ra khi ai đó cấu hình một sản phẩm:

1. Họ chọn: Mẫu A, Màu Đỏ, Kích thước Vừa.

2. Kiểm tra schema cục bộ thành công.

3. Giao diện hiển thị thông báo ngay lập tức.

4. Khi hợp lệ, bản xem trước trực tiếp cập nhật.

5. Họ chọn: Mẫu C, Màu Đỏ

6. Lời gọi API đánh dấu một lỗi:

   json Copy

   { "error": "Mẫu A không hỗ trợ màu Xanh" }

Kết quả: một quy trình làm việc mượt mà, hướng dẫn với ít sự thất vọng.

Tại Sao Cách Tiếp Cận Này Hiệu Quả

• Có thể mở rộng - xử lý hàng ngàn tùy chọn mà không cần viết lại giao diện người dùng.
• Dễ bảo trì - quy tắc nằm ở một nơi, backend.
• Đa nền tảng - cùng một schema có thể điều khiển web, di động hoặc desktop.
• Thân thiện với người dùng - xác thực và xem trước ngay lập tức giảm thiểu thử nghiệm và sai sót.

Kết Luận

Chúng tôi đã chuyển từ những biểu mẫu tĩnh, dễ gãy sang một configurator linh hoạt, dựa trên schema, dễ bảo trì và mang lại trải nghiệm tốt hơn cho người dùng.

Nếu biểu mẫu của bạn đang chìm trong logic mã cứng, có thể đã đến lúc để các schema và quy tắc tập trung làm công việc nặng.

“Bạn có muốn thử nghiệm không? Khám phá dự án trên GitHub. Chúng tôi rất hoan nghênh các đóng góp và phản hồi!”

Bạn đã từng đối mặt với sự hỗn loạn của các biểu mẫu tương tự chưa? Bạn đã tiếp cận việc xác thực và mở rộng như thế nào? Hãy chia sẻ suy nghĩ của bạn - tôi rất muốn trao đổi ý tưởng.