روشی هوشمندانه برای ساخت فرم‌های پویا در React

بسیاری از شرکت‌ها و سازمان‌ها برای جمع‌آوری اطلاعات کاربران یا مدیریت داده‌ها، نیاز دارند فرم‌های متنوعی طراحی کنند. اگر این فرم‌ها به‌صورت استاتیک طراحی شوند، یعنی به‌صورت دستی ساخته شده و ثابت باقی بمانند، نگهداری و توسعه آن‌ها در آینده دردسرساز خواهد بود. این مشکل به‌ویژه در وب‌سایت‌هایی که با خودرو سروکار دارند بیشتر دیده می‌شود، چراکه خودروها مدل‌ها و ویژگی‌های مختلفی دارند. بنابراین، فرم‌ها باید پویا بوده و بتوانند خود را با این ویژگی‌ها تطبیق دهند.

ما در کارنامه با همین چالش مواجه بودیم. به سیستمی نیاز داشتیم که بتواند فرم‌های مرتبط با انواع خودروها را در سمت فرانت‌اند به‌صورت خودکار ایجاد کند. از آنجا که هر خودرو ویژگی‌های خاص خودش را دارد، باید فرمی متناسب با آن نیز تولید شود. به‌جای طراحی فرم جداگانه برای هر مدل خودرو، به‌دنبال راه‌حلی خودکار و مقیاس‌پذیر بودیم.

راه‌حل ما استفاده از JSON Schema Form در React بود. این روش به ما اجازه می‌دهد با استفاده از یک JSON Schema، فرم‌های پویا تولید کنیم. دیگر نیازی نیست برای هر خودرو یک فرم جداگانه طراحی شود. فقط کافی‌ست برای هر خودرو یک JSON داشته باشیم تا خودش فرم مناسب را بسازد.

در واقع JSON Schema یک استاندارد برای توصیف ساختار داده‌هاست که مشخص می‌کند هر فیلد در فرم باید چه نوع داده‌ای دریافت کند، چه محدودیت‌هایی داشته باشد و چگونه نمایش داده شود. با کمک کتابخانه‌هایی مانند react-jsonschema-form، این اسکیما مستقیماً به یک فرم قابل استفاده در React تبدیل می‌شود.

در این مقاله، قرار است با JSON Schema Form آشنا شویم، نحوه پیاده‌سازی آن در پروژه‌های React را بررسی کنیم و ببینیم چرا این روش در برخی سناریوها می‌تواند راه‌حلی کارآمد و هوشمندانه باشد.

ساختار JSON Schema چیه؟

ساختار JSON Schema کمک میکنه داده های ساختاریافته ای که تو JSON داریم رو تعریف، توصیف و اعتبارسنجی کنیم. به زبون ساده، مشخص میکنه که داده ها چه شکلی باید باشن، چه محدودیت هایی داشته باشن و چطور به هم مرتبط باشن. این استاندارد تضمین میکنه که اطلاعات ورودی (چه از طرف کاربرا، چه از سیستم های دیگه) دقیقاً مطابق انتظارات ما باشه و جلوی ورود داده های نامعتبر رو میگیره.

یه مثال ساده بزنیم. فرض کن میخوای مشخصات یه ماشین رو تو سیستم ذخیره کنی. میتونی این کارو با یه JSON Schema مثل زیر انجام بدی:

{
    'type': 'object',
    'properties': {
        'brand': {
            'type': 'string',
            'description': 'نام سازنده خودرو'
        },
        'model': {
            'type': 'string',
            'description': 'مدل خودرو'
        },
        'year': {
            'type': 'integer',
            'description': 'سال تولید',
            'minimum': 1900,
            'maximum': 2024
        },
        'color': {
            'type': 'string',
            'description': 'رنگ خودرو',
            'enum': ['قرمز', 'آبی', 'سفید', 'مشکی']
        }
    },
    'required': ['brand', 'model', 'year']
}

توضیح این JSON Schema:

• مقدار type: object مشخص می‌کند که این اسکیما یک شیء (Object) را توصیف می‌کند.
• کلید properties ویژگی‌های مختلف آن شیء (در اینجا، ویژگی‌های ماشین) را تعریف می‌کند.
• کلید های brand, model, year, color: مشخصات مختلف ماشین رو تعیین میکنن.
• مقدار type نوع هر ویژگی را مشخص می‌کند (مثل عدد، رشته و …).
• مقدار description توضیح مختصری از هر ویژگی ارائه می‌دهد که اجباری نیست.
• مقادیر minimum و maximum برای ویژگی year، بازه مجاز را تعیین می‌کنند.
• مقادیر enum برای ویژگی color، رنگ‌های مجاز را لیست می‌کنند.
• مقادیر required تعیین می‌کنند که کدام فیلدها حتماً باید مقدار داشته باشند.

این JSON Schema یک ساختار مشخص برای اطلاعات ماشین ایجاد می‌کند که می‌توان از آن برای اعتبارسنجی ورودی‌ها، ساخت فرم‌های داینامیک و حتی مستندسازی API استفاده کرد.

برای مثال، JSON زیر با JSON Schema بالا مطابقت دارد:

{
    'brand': 'BMW',
    'model': '7 series',
    'year': 2020,
    'color': 'قرمز'
}

اما JSON زیر مطابقت نداره چون که مقدار "نوک مدادی" توی enum اسکیما وجود نداره:

{
    'brand': 'MW',
    'model': '7 series',
    'year': 2020,
    'color': 'نوک مدادی'
}

برای مطالعه ی بیشتر JSON Schema این لینک رو مطالعه کنید.

استفاده از JSON Schema Form در React:

حالا که با JSON Schema آشنا شدیم، می‌توانیم از آن برای ساخت فرم‌های داینامیک در React استفاده کنیم. یکی از محبوب‌ترین کتابخانه‌هایی که این کار را انجام می‌دهد، @rjsf/core (که نسخه قبلی‌اش به نام react-jsonschema-form شناخته می‌شد) است.
برای استفاده از این کتابخانه، کافی است که کامپوننت Form را از این کتابخانه وارد کرده و JSON Schema خود را به آن پاس بدهیم

import React from 'react';
import Form from '@rjsf/core';

const schema = {
    // ... JSON Schema of previous example
};

const MyForm = () => {
    const  changeHandler= ({ formData }) => {
        console.log('Data submitted: ', formData);
        // do anything you want with data
    };

    return (
        <Form schema={schema} ={changeHandler} />
    );
};

export default MyForm;

توضیح کد:

• کامپوننت Form از @rjsf/core مسئول تبدیل JSON Schema به یک فرم React است.
• مقدار schema: در اینجا JSON Schema مورد نظر را به کامپوننت Form می‌دهیم.
• تابع changeHandler: یک تابع ایجاد می‌کنیم که هنگام ارسال فرم (submit) اجرا می‌شود و داده‌های ورودی را پردازش می‌کند.

با این روش، فرم‌های React به‌صورت خودکار ساخته می‌شوند و نیازی نیست برای هر مدل خودرو یک فرم جداگانه طراحی کنیم. کامپوننت @rjsf/core خودش ورودی‌های مناسب (مانند input، select، textarea و …) را بر اساس نوع داده‌های JSON Schema ایجاد می‌کند و همچنین اعتبارسنجی‌ها (مثل minimum، maximum، enum و …) را به‌طور خودکار اعمال می‌کند.
نتیجه‌ی مثال بالا رو توی تصویر میتونید ببینید که توی صفحه ی دمو وبسایت اصلی این کتابخانه ساخته شده:

سفارشی‌سازی فرم‌ها

اما این فقط آغاز ماجراست و این ابزار خیلی فراتر از ساخت یک فرم ساده است! شما می‌توانید در این پکیج، فرم‌ها و ویجت‌های سفارشی بسازید، استایل‌ها را تغییر دهید و حتی رفتار فرم را با استفاده از UISchema کنترل کنید. برای مثال، در مرحله “وضعیت بدنه” در صفحه‌ی ثبت آگهی کارنامه، تمام فرم با همین روش، یعنی JSON Schema Form، مدیریت می‌شود که تصویر آن را می‌توانید در زیر مشاهده کنید. برای آشنایی بیشتر با پکیج JSON Schema Form، این لینک را مطالعه کنید.

جمع‌بندی

استفاده از JSON Schema Form در React یک راهکار فوق‌العاده برای ساخت فرم‌های داینامیک و مقیاس‌پذیر است. به‌جای اینکه برای هر فرم به‌صورت دستی کامپوننت‌های مختلف طراحی کنیم، می‌توانیم از JSON Schema برای تعریف ساختار فرم و از کتابخانه‌هایی مثل @rjsf/core برای تولید خودکار آن استفاده کنیم. اگر دنبال یک روش بهینه برای ساخت فرم‌های پویا در پروژه‌های React هستید، JSON Schema Form می‌تواند انتخاب عالی‌ای باشد.