فروشگاه اینترنتی یونیتک

چالش اصلی

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

برای حل این مسئله، ساختار پروژه بر پایه Atomic Design و تفکیک مسئولیت‌ها طراحی شد.

معماری Atomic Design

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

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

این رویکرد باعث شد:

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

جداسازی UI از Logic

یکی دیگر از اصول اصلی پروژه، جدا کردن رابط کاربری از منطق برنامه بود.

کامپوننت‌های UI تا حد امکان مسئول نمایش و تعاملات مربوط به رابط کاربری بودند و منطق مربوط به دریافت داده، مدیریت وضعیت، درخواست‌های سرویس و رفتارهای قابل استفاده مجدد در بخش‌های جداگانه، به‌خصوص Composableها، قرار می‌گرفت.

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

مدیریت پنل‌های مختلف

با توجه به وجود سه فضای اصلی شامل:

• پنل کاربری: مدیریت اطلاعات و فعالیت‌های مربوط به مشتری
• پنل مدیریت: مدیریت بخش‌های مختلف فروشگاه و کنترل داده‌ها
• پنل فروشندگان: مدیریت فعالیت‌ها و اطلاعات مربوط به فروشندگان

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

رویکرد فنی

پروژه با Nuxt 4 و Vue 3 توسعه داده شد و برای مدیریت وضعیت از Pinia و برای ایجاد رابط کاربری از ترکیب Tailwind CSS و DaisyUI استفاده شد.

در کنار معماری کامپوننتی، مجموعه‌ای از ابزارهای اکوسیستم Nuxt برای بهبود کیفیت، عملکرد و سئوی پروژه مورد استفاده قرار گرفت؛ از جمله Nuxt Image، Nuxt SEO، Schema.org، Sitemap، Robots و OG Image.

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