دقیقاً چه کاری باید انجام شود؟
یک اپلیکیشن/وب‌اپ فروشگاهی حرفه‌ای طراحی و پیاده‌سازی کن.
تصویر پیوست‌شده، تصویر مرجع اصلی برند و هویت بصری برنامه است.
از لوگو، فضای نئونی، رنگ‌های آبی/فیروزه‌ای/بنفش، حس تکنولوژی و سبک مدرن آن برای طراحی رابط کاربری استفاده کن؛ اما رابط کاربری باید تمیز، ساده، امروزی و حرفه‌ای باشد و از شلوغی تصویر تبلیغاتی تقلید نکند.
هدف برنامه: یک فروشگاه اینترنتی شبیه ساختار کلی فروشگاه‌های بزرگ مثل مطرح، اما کاملاً اختصاصی برای فروش کانفیگ اینترنت و پنل‌های اینترنتی.
شعار: «همیشه آنلاین، همیشه با شما»
ظاهر و رابط کاربری
- طراحی کاملاً مدرن و Responsive برای موبایل، تبلت و دسکتاپ
- رابط کاربری بسیار ساده و روان
- تم تاریک و تکنولوژیک
- استفاده هوشمندانه از رنگ‌های آبی نئونی، فیروزه‌ای و بنفش
- کارت‌های محصول با طراحی زیبا
- انیمیشن‌های بسیار ظریف و سریع
- فونت فارسی خوانا و مدرن
- پشتیبانی کامل از RTL و زبان فارسی
- صفحه اصلی حرفه‌ای با بنر نت‌باز
- جستجوی محصولات
- دسته‌بندی محصولات
- فیلتر و مرتب‌سازی
- سبد خرید
- حساب کاربری
- تاریخچه سفارش‌ها
- وضعیت سفارش
- طراحی Mobile First
محصولات
دو دسته اصلی ایجاد کن:
فروش پنل
- پنل پاسارگاد
- پنل سنایی
- حجم‌ها از 1 ترابایت تا 5 ترابایت
- امکان اضافه کردن حجم‌های جدید از پنل مدیریت
- هر محصول دارای:
- نام
- توضیحات
- حجم
- قیمت
- وضعیت موجودی
- تصویر
- برچسب محصول
فروش کانفیگ محصولات کانفیگ از 10 گیگابایت تا 1000 گیگابایت ارائه شوند.
حجم‌های مختلف به‌صورت محصول یا Variant قابل انتخاب باشند.
مثلاً: 10GB 20GB 50GB 100GB 200GB 500GB 1000GB
امکان تغییر، حذف و اضافه کردن حجم‌ها و قیمت‌ها فقط از پنل مدیریت وجود داشته باشد.
صفحه محصول
برای هر محصول:
- تصویر محصول
- نام محصول
- قیمت
- توضیحات
- حجم
- نوع سرویس
- وضعیت موجودی
- انتخاب حجم/نوع در صورت وجود
- دکمه «افزودن به سبد خرید»
- دکمه «خرید فوری»
فرآیند خرید
کاربر محصول را انتخاب کند → وارد سبد خرید شود → اطلاعات سفارش را وارد کند → وارد مرحله پرداخت شود.
بعد از ثبت/پرداخت سفارش، یک صفحه تأیید سفارش بسیار واضح نمایش داده شود.
اگر پرداخت به روش کارت‌به‌کارت است: شماره کارت فروشنده در صفحه پرداخت نمایش داده شود و کاربر بتواند مبلغ را مشاهده و پرداخت کند.
بعد از پرداخت، کاربر باید بتواند تصویر رسید پرداخت را ارسال کند.
دو گزینه واضح برای ارسال رسید قرار بده:
- «انتخاب عکس از گالری»
- «گرفتن عکس با دوربین»
پس از انتخاب یا گرفتن عکس:
- پیش‌نمایش تصویر نمایش داده شود
- کاربر بتواند تصویر را تأیید کند
- دکمه «ارسال رسید» داشته باشد
- آپلود با Progress واقعی انجام شود
- بعد از موفقیت، پیام واضح «رسید با موفقیت ارسال شد» نمایش داده شود
- سفارش در وضعیت «در انتظار بررسی پرداخت» قرار بگیرد
- از نمایش پیام اشتباه مثل «ناموفق» در صورت موفقیت جلوگیری شود
- خطاهای واقعی نیز به زبان ساده و قابل فهم به کاربر نمایش داده شوند
- اگر آپلود قطع شد، امکان تلاش مجدد وجود داشته باشد
- رسید به سفارش مربوطه متصل شود
پنل مدیریت اختصاصی
یک پنل مدیریت کاملاً جداگانه بساز که فقط مدیر اصلی بتواند به آن دسترسی داشته باشد.
امنیت پنل مدیریت بسیار مهم است:
- ورود امن مدیر
- احراز هویت
- Session امن
- محافظت از Routeهای مدیریت
- کاربران عادی هرگز نتوانند وارد بخش مدیریت شوند
- اطلاعات حساس در سمت کاربر قرار نگیرد
امکانات پنل مدیریت:
داشبورد:
- تعداد سفارش‌ها
- سفارش‌های جدید
- سفارش‌های در انتظار بررسی
- فروش
- محصولات
- کاربران
مدیریت محصولات:
- افزودن محصول
- ویرایش محصول
- حذف محصول
- تغییر قیمت
- تغییر موجودی
- تغییر تصویر
- ایجاد Variant
- فعال/غیرفعال کردن محصول
مدیریت سفارش‌ها:
- مشاهده تمام سفارش‌ها
- مشاهده اطلاعات مشتری
- مشاهده محصول خریداری‌شده
- مشاهده مبلغ
- مشاهده رسید پرداخت
- تغییر وضعیت سفارش
وضعیت‌های سفارش:
- پرداخت نشده
- در انتظار بررسی رسید
- پرداخت تأیید شد
- در حال آماده‌سازی
- تکمیل شد
- لغو شد
مدیر بتواند رسید پرداخت را مشاهده و سفارش را تأیید یا رد کند.
طراحی تجربه کاربری
هیچ صفحه‌ای شلوغ نباشد.
کاربر باید در کمترین تعداد کلیک بتواند محصول را پیدا کند و سفارش دهد.
در صفحه اصلی:
- هدر نت‌باز
- لوگو
- جستجو
- دسته‌بندی‌ها
- بنر اصلی
- محصولات پرفروش
- محصولات جدید
- دسته‌بندی پنل پاسارگاد
- دسته‌بندی پنل سنایی
- دسته‌بندی کانفیگ
- بخش مزایا
مزایا:
- سرعت بالا
- قیمت مناسب
- پایداری بالا
- دسترسی سریع
نکات فنی بسیار مهم
برنامه را به‌صورت واقعی و قابل استفاده پیاده‌سازی کن، نه صرفاً یک Mockup.
- Frontend و Backend واقعی داشته باشد.
- دیتابیس واقعی داشته باشد.
- احراز هویت واقعی داشته باشد.
- مدیریت سفارش واقعی باشد.
- آپلود تصویر رسید واقعاً کار کند.
- وضعیت سفارش‌ها در دیتابیس ذخیره شود.
- پنل مدیریت به دیتابیس متصل باشد.
- اعتبارسنجی فرم‌ها انجام شود.
- Loading State داشته باشد.
- Error State داشته باشد.
- Success State داشته باشد.
- از ارسال دوباره سفارش در اثر چند بار کلیک جلوگیری شود.
- در صورت Refresh شدن صفحه، اطلاعات سفارش از بین نرود.
- طراحی برای اینترنت و موبایل ضعیف نیز تا حد امکان بهینه باشد.
- کد تمیز، ساختاریافته و قابل توسعه باشد.
- هیچ اطلاعات حساس مثل رمز عبور یا کلیدهای خصوصی در Frontend قرار نگیرد.
- دسترسی‌های سمت Backend نیز بررسی شوند و فقط مخفی کردن دکمه‌ها کافی نباشد.
- قبل از تحویل، تمام مسیرهای اصلی کاربر و مدیر تست شوند.