[Open Source] ایجاد یک صفحه پشتیبان در پنج دقیقه: مقایسه طراحی کم‌کد مبتنی بر هوش مصنوعی با روش‌های سنتی

مثال‌های تولید شده توسط هوش مصنوعی بر اساس حاشیه‌نویسی‌های تصویر صفحه PRD

ابزار: فاندامجس

پیش نمایش

تکامل رویکردهای پیاده سازی کم کد

0. غیر AI – Json Schema Generation

ساخت UI

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

Builder Basic Layout

Table Column Configuration

این مقاله در درجه اول بر توضیح اجرای سازنده تمرکز ندارد، اما در اینجا چند نکته کلیدی وجود دارد:

1. برای ساده‌ترین ساختار رابط کاربری با کشیدن و رها کردن، انباشتن عمودی بدون موارد تو در تو ممکن است برای سناریوهای اساسی کافی باشد. با این حال، برای موارد پیچیده‌تر، مانند گروه‌بندی در یک فرم به صورت مدال با عناوین مختلف، باید انواع مؤلفه‌های رابط کاربری (کانتینر در مقابل مؤلفه‌های غیر کانتینری) و سازگاری آن‌ها را برنامه‌ریزی کنید (مثلاً بخش اضافی کارت نمی‌تواند حاوی جدول باشد) .
2. بسیاری از ویژگی‌های مؤلفه ویژگی‌های مشترکی دارند، مانند فیلدهای لازم و عرض برچسب برای موارد فرم، و پیکربندی‌های کانتینر رایج مانند ردیف‌های گسترش جدول یا محتوای Modal. این ویژگی ها را از قبل برنامه ریزی کنید.
3. ترکیبات اجزای رایج را می توان الگوسازی کرد، مانند یک الگوی کارت فیلتر با یک کارت، محفظه فرم، یک مورد فرم نمونه، و یک گروه دکمه (تنظیم مجدد + پرس و جو).
4. ترکیبات اجزای صفحه معمولی را نیز می توان الگوسازی کرد، مانند یک صفحه CRUD با یک کارت فیلتر، کارت لیست، دکمه نمونه، و مدال، از پیش پیکربندی شده با روابط.

پیکربندی تعامل

محرک های فعال

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

محرک های غیرفعال

این یک رویکرد رایج در برنامه نویسی تابعی است. صفحه فهرستی را در نظر بگیرید که در آن پرس‌و‌جوها، بازنشانی‌ها، افزودن‌ها، حذف‌ها و ویرایش‌های مودال همگی نیازمند به‌روزرسانی فهرست هستند. پیکربندی هر دکمه برای بازخوانی مستقیم جدول ناکارآمد است. در عوض، از یک فیلد پنهان یا فیلد پرس و جو در سطح سیستم استفاده کنید. بر اساس نوع عمل انتزاعی (که بعداً مورد بحث قرار خواهد گرفت)، تعیین کنید که آیا نیاز به بازخوانی داده‌های صفحه است یا خیر، و فیلد سیستم (مانند آخرین زمان به‌روزرسانی) را برای نظارت و بازخوانی جدول به‌روزرسانی کنید.

اکشن کپسوله سازی

برای دستیابی به ساخت کد صفر در سازنده، کپسوله کردن اقدامات مختلف بسیار مهم است. در برنامه های کاربردی وب مدرن، توابع متعددی را می توان به اقدامات رایج انتزاع کرد، مانند:

• به روز رسانی پارامترهای URL
• واکشی و نمایش داده های راه دور
• ارسال داده های راه دور
• عملیات مودال
• روش های تایید
• بازشوهای تایید
• تسویه فرم
• بازنشانی فرم
• پاک کردن ردیف های جدول انتخاب شده
• و بیشتر…

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

🔔 این ایده ها نه تنها برای ساخت بک اند بلکه برای صفحات وب، برنامه های کوچک و حتی برنامه ها نیز کاربرد دارند.

استخر داده – بهینه سازی محرک های غیرفعال و تعامل

فرمی را در نظر بگیرید که در آن انتخاب A در یک دکمه رادیویی یک فیلد ورودی را نشان می دهد، در حالی که انتخاب B آن را پنهان می کند. چگونه این را در سازنده پیکربندی کنیم؟ ممکن است به یک رویکرد فعال مانند فرم ساز فکر کنید. اما اگر با انتخاب A در رادیو یک درخواست از راه دور ارسال شود و پاسخ، میزان دید را تعیین کند، چه؟

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

نام مستعار

برای اینکه انتخاب مؤلفه‌های تعاملی و وابستگی‌های داده در سازنده بصری‌تر باشد، به جای نمایش شناسه‌های منحصر به فرد کمتر قابل خواندن، نام مستعار را برای هر مؤلفه، شی درخواست و غیره پیکربندی کنید.

طرحواره نمونه

در این مرحله، هر تعاملی را می توان از طریق مخزن داده پیکربندی کرد. در اینجا یک نمونه طرحواره وجود دارد:

{
  "GnarButton_fYfcaz": {
    // Globally unique ID, name of the Field object in the data pool
    "$id": "GnarButton_fYfcaz",
    // Alias, directly select this alias when configuring interaction in the builder
    "$alias": "Filter Form Reset Button",
    // Permission control
    "$auth": false,
    // Component used
    "$component": "GnarButton",
    "$slot": {},
    // props configuration
    "$componentProps": {
      "title": "Reset",
      "block": false,
      "danger": false,
      "disabled": false,
      "ghost": false,
      "type": "default"
    },
    // Triggers - two actions are triggered in series here
    "$triggers": [
      {
        // Common properties of all actions
        // Trigger method
        "condition": "onClick",
        // Action type
        "action": "FORM_RESET",
        // Observe data in the data pool, not observing here, can also trigger when observed value changes
        "observe": [],
        // Execution rule, data in the data pool or a js expression. If the result is false, this action will not be executed
        "rule": "",

        "external": {
          // FORM_RESET specific properties, specify which forms to reset, can reset multiple forms at once
          "components": [
            "GnarForm_XhzQBB"
          ]
        }
      },
      {
        "condition": "onClick",
        // Update the query in the address bar
        "action": "QUERY_SUBMIT",
        "observe": [],
        "rule": "",
        "external": {
          // Parameters to be updated - sourced from the data pool
          "params": [
            {
              // With a key, the value obtained by wrapping valuePath is an object
              "key": "",
              // Data pool value path
              "valuePath": "GnarForm_XhzQBB.form.values"
            }
          ],
          // Input/output parameter conversion, can add some extra parameters for remote requests, query updates, etc., and rewrite some parameters returned by remote
          "pipe": {
            "params": {
              // Reset to the first page after reset
              "pageNum": 1
            }
          }
        }
      }
    ]
  }
}

نمایش پیکربندی وابستگی استخر داده

پیکربندی بالا ممکن است پیچیده به نظر برسد اما فقط چند انتخاب در سازنده است.

1. غیر AI – تولید کد JS/TSX

توضیح

هر کسی که روی صفحات/کامپوننت‌های ایجاد شده توسط طرحواره یا مستقیماً از نسل طرحواره Json در بالا کار کرده باشد، می‌داند: ایجاد یک طرحواره برای یک صفحه CRUD نسبتاً پیچیده می‌تواند بسیار بزرگ‌تر از کد باشد. این موضوع برخی از مسائل را ایجاد می کند:

1. آیا پلتفرم سازنده باید کل چرخه عمر کامپوننت، صفحه و ساخت پروژه (ساخت اولیه، تکرارهای بعدی، بازسازی و غیره) را مدیریت کند یا فقط یک بار JSON/کد تولید کند؟ اگر سازنده نتواند برخی از نیازها را برآورده کند چه؟ (نکات: اگر کل چرخه عمر را مدیریت می کنید، برای سناریوهای برآورده نشده، به عنوان مثال، طراحی برنامه ریزی کنید Scope اشیاء شامل مؤلفه‌ها/روش‌های نوشته‌شده توسط کاربر، نشان دادن جای‌بانی در سازنده).
2. تولید شده Json Schema خیلی خوانا نیست و درک آن را برای کاربران جدید سخت می کند. بدون پذیرش اجباری، کسانی که همه مفاهیم را درک می کنند ممکن است کارایی را بهبود بخشند، اما کسانی که در برابر فناوری های جدید مقاوم هستند ممکن است از سازنده اجتناب کنند و طرحواره کدگذاری دستی را دشوار بدانند.

تولید کد jsx/tsx

برای رسیدگی به مشکلات خوانایی و قابلیت استفاده، کد قالب عمل را انتزاع کردم و یک ویژگی برای پیکربندی فرم ها با کد تولید شده ایجاد کردم. این شامل تجزیه AST می شود که به سه حالت پیکربندی در سازنده اجازه می دهد: پیکربندی UI، پیکربندی فرم داده و تعامل و نوشتن کد.

اجرای دو عمل برای دکمه ریست

پس از پیکربندی دو عمل برای دکمه تنظیم مجدد در Interaction and Data بخش، دیگر JSON تولید نمی‌کند، بلکه مستقیماً یک قطعه کد js با ترکیب چندین عمل تولید می‌کند. این کد js را می توان تغییر داد و دوباره در فرم پیکربندی منعکس کرد.

2. هوش مصنوعی – Fundam Builder

با پیشرفت فناوری هوش مصنوعی، اکثر سازندگان با کد پایین/بدون کد در صنعت که جداول/مدل های داده، قالب ها/مدل های جلویی و غیره را تولید می کنند، به اندازه کافی «هوشمند» نیستند. این فناوری‌ها معمولاً طرح‌واره JSON سخت‌خوان، کد ترکیبی js+schema یا کد jsx/tsx سخت‌خوان را تولید می‌کنند که منجر به مشکل «ساخت آسان، نگهداری سخت» می‌شود.

Fundam برای استفاده از هوش مصنوعی برای تولید کدهای jsx/tsx قابل فهم، بسیار خوانا، ساده و قابل نگهداری ایجاد شده است.

مثال

AI
https://fundamjs.com/images/ai-page.gif

اینجا، AI فیلدهای فیلتر مشروح و فیلدهای درخواست از راه دور بر اساس PRD، صفحه ای با عملکرد 40٪ در عرض یک دقیقه ایجاد می کند. با توجه به محدودیت اندازه ضبط، می تواند گفتگو را برای تنظیمات کد، افزودن کد مدال و غیره ادامه دهد.

توجه: هدف Fundam استفاده از ساده‌ترین کد برای تولید قابلیت‌های مختلف است که ممکن است برای برخی از متخصصان غیر متعارف به نظر برسد و از شیوه‌های معمولی مدولارسازی کد پیروی نمی‌کند.

در حال حاضر، بر اساس درک من، هرچه یک AI کد بیشتری را برای یادگیری نیاز داشته باشد، هزینه، احتمال خطا و تغییرپذیری نتیجه بالاتر است. از این رو، اولین نسخه FundamGPT تنها با استفاده از سه مجموعه داده آموزشی (حدود 500 خط توضیحات و کد) ایجاد شد.

Fundam می تواند کد را از تصاویر طراحی، نمودارهای PRD، سایر اسکرین شات ها و توضیحات متن تولید کند. برای مثال های بیشتر به Fundam مراجعه کنید.

نتیجه

با عرض پوزش، تصاویر این مقاله و مستندات Fundam در حال حاضر فقط به زبان چینی موجود است. با این حال، نسخه انگلیسی آن به زودی در دسترس خواهد بود. خبر خوب این است که می توانید از هر زبانی برای مکالمه با FundamGPT و تولید کد از زبان داخل تصاویر استفاده کنید. توسط openAI قوی 🎉 تغذیه می شود

AI / Fundam کامل نیست. اگر کد تولید شده آن چیزی نیست که می خواهید، گفتگو را برای تنظیم ادامه دهید. در حال حاضر، FundamGPT داده های آموزشی محدودی دارد و اجزای Fundam خیلی غنی نیستند. مشارکت پذیرفته می شود، زیرا استفاده و داده بیشتر آن را قوی تر می کند.

اگر این مورد برای شما جالب بود، https://github.com/cdrslab/fundam را دنبال کنید.

اگر پیشنهادی دارید، در نظر بگیرید!