6.5 KiB
6.5 KiB
توضیح مرحله‌به‌مرحلهٔ پروژه — فرم‌ساز (Form Builder)
هدف کلی
ساخت یک اپلیکیشن تک‌صفحه‌ای (SPA) به نام فرم‌ساز که کاربر بعد از ورود (لاگین) بتواند با کشیدن المان‌ها از یک پالت، فرم دلخواه بسازد، ذخیره کند و بعداً دقیقاً مثل چیدمان خودش دوباره ببیند.
مرحله ۱ — ورود کاربر (لاگین)
- یک صفحهٔ لاگین ساده (مثلاً نام کاربری / رمز یا فقط یک دکمه «ورود» برای تست).
- بعد از لاگین موفق، کاربر به داشبورد هدایت می‌شود.
- نیازی به بک‌اند نیست؛ می‌توان لاگین را فقط در فرانت و با state ساده یا Vuex شبیه‌سازی کرد.
مرحله ۲ — داشبورد و چیدمان کلی
- بعد از لاگین، داشبورد نمایش داده می‌شود.
- چیدمان پیشنهادی:
- سمت راست: پالت المان‌ها (پالت فرم‌ساز).
- وسط/چپ: پنل اصلی (بوم) که کاربر المان‌ها را اینجا می‌گذارد و فرم را می‌سازد.
- بهتر است پالت در سمت راست صفحه باشد.
مرحله ۳ — پالت المان‌ها (سمت راست)
پالت شامل المان‌هایی است که کاربر می‌تواند بکشد و روی بوم رها کند:
| المان | توضیح | اعتبارسنجی / تنظیمات |
|---|---|---|
| Input box | ورودی متن | نوع: رنگ / عدد / رشته / چک‌باکس / رادیو — اعتبارسنجی: اجباری (require)، min، max |
| Select box | انتخاب‌گر | نوع: تکی یا چندتایی — اعتبارسنجی: اجباری (Require) |
| Range slider | اسلایدر محدوده | اعتبارسنجی: اجباری، steps، min، max |
کاربر هر المان را که بخواهد از پالت برمی‌دارد و در موقعیت دلخواه روی پنل اصلی قرار می‌دهد.
مرحله ۴ — بوم فرم‌ساز (پنل اصلی)
- کاربر المان‌ها را از پالت کشیده و در این پنل رها می‌کند (Drag & Drop).
- برای هر المان باید بتوان مشخص کرد:
- موقعیت (مثلاً x, y یا چیدمان grid/flex).
- عرض و ارتفاع (طول و عرض المان).
- چیدمان نهایی باید قابل ذخیره باشد تا بعداً عیناً رندر شود.
مرحله ۵ — تنظیمات و اعتبارسنجی هر فیلد
- برای هر فیلد (Input، Select، Slider) کاربر باید بتواند:
- ولیدیشن‌ها را تعیین کند (مثلاً اجباری بودن).
- برای فیلدهای متنی: حداقل و حداکثر تعداد کاراکتر (min/max length).
- برای Slider: steps، min، max.
- برای Select: Require و در صورت نیاز گزینه‌های چندتایی.
مرحله ۶ — ذخیرهٔ فرم و خروجی JSON
- هر فرمی که ساخته می‌شود باید یک نام داشته باشد.
- ذخیره به صورت محلی (مثلاً در مرورگر یا در state/Vuex):
- در تسک گفته شده اگر فریمورک Vue.js باشد، در Vuex ذخیره شود.
- خروجی نهایی = یک فایل (ساختار) JSON که شامل همهٔ اطلاعات است:
- نوع و ترتیب المان‌ها
- موقعیت و اندازهٔ هر المان
- تنظیمات و ولیدیشن‌ها
مرحله ۷ — نمایش و بازسازی فرم از روی JSON
- بعد از ذخیره، باید بتوان از روی همان JSON فرم را دوباره رندر کرد.
- خروجی باید کاملاً دقیق مطابق چیدمان کاربر باشد (طول و عرض المان‌ها و مکان قرارگیری آن‌ها مهم است).
مرحله ۸ — جدول فرم‌های ذخیره‌شده
- جدولی که تمام فرم‌های ذخیره‌شده را نشان می‌دهد.
- قابلیت‌ها:
- صفحه‌بندی (Pagination).
- جستجو بر اساس نام فرم.
- داده‌ها از همان ذخیرهٔ محلی (مثلاً Vuex) خوانده می‌شوند؛ نیازی به بک‌اند نیست.
مرحله ۹ — ذخیرهٔ محلی اطلاعات پنل
- اطلاعات پنل (تعداد المان‌ها، تنظیمات گرفته‌شده از کاربر و …) هم به صورت محلی ذخیره شوند.
- در صورت استفاده از Vue.js، در Vuex ذخیره شود.
- هیچ نیازی به ارتباط با Back-end نیست.
مرحله ۱۰ — ظاهر و واکنش‌گرایی
- المان‌ها و رابط کاربری تا حد امکان زیبا و جذاب باشند.
- اگر اپ Responsive باشد، به عنوان یک نکتهٔ مثبت در نظر گرفته می‌شود.
جمع‌بندی مراحل به ترتیب پیاده‌سازی پیشنهادی
- لاگین → ورود به داشبورد
- داشبورد → چیدمان کلی (پالت راست + بوم وسط/چپ)
- پالت → تعریف المان‌ها (Input، Select، Slider) و قابلیت کشیدن
- بوم → Drag & Drop، قرار دادن المان، موقعیت و اندازه
- تنظیمات فیلد → ولیدیشن، min/max، steps و …
- ذخیره → نام فرم + ذخیره در Vuex و خروجی JSON
- بازسازی → رندر دقیق فرم از روی JSON
- جدول → لیست فرم‌ها + صفحه‌بندی + جستجو بر اساس نام
- پایداری → ذخیرهٔ محلی/Vuex برای پنل و فرم‌ها
- ظاهر و Responsive → زیبایی و واکنش‌گرایی
تکنولوژی‌های پروژه
- Vue 3 + TypeScript + Vite
- Vue Router — مسیریابی (لاگین / داشبورد)
- Vuex — state و ذخیرهٔ محلی فرم‌ها و اطلاعات پنل
- Tailwind CSS — استایل
- Ant Design Vue — کامپوننت‌های آماده (دکمه، جدول، فرم، Input و …)