در این تسک، صفحه دارایی‌های شهروند در نسخه Next.js متاورس رنگ به‌صورت کامل توسعه یافته و به API متصل خواهد شد. هدف از این توسعه، جایگزینی کامل اطلاعات استاتیک با داده‌های داینامیک، استانداردسازی ساختار صفحه، بهبود کیفیت کدنویسی، افزایش قابلیت توسعه در آینده و آماده‌سازی صفحه برای اتصال کامل به زیرساخت Backend است.
در این مرحله طراحی رابط کاربری جدید انجام نخواهد شد و از طراحی موجود استفاده می‌شود. تمرکز اصلی بر روی توسعه Front-End، اتصال به API، تست کامل اطلاعات دریافتی، بهینه‌سازی ساختار کامپوننت‌ها و رعایت استانداردهای پروژه است.
وظایف
-
اتصال کامل صفحه دارایی‌های شهروند به API.
-
دریافت و نمایش اطلاعات دارایی‌ها به‌صورت داینامیک.
-
پیاده‌سازی فیلترهای زمانی.
-
پیاده‌سازی منطق نمایش تغییرات دارایی‌ها.
-
توسعه ساختار کامپوننتی صفحه.
-
بررسی کامل API و اعلام هرگونه کمبود یا مغایرت.
-
رعایت استانداردهای پروژه متاورس رنگ.
-
رعایت اصول SEO و Schema.
بخش‌های اجرایی
اتصال کامل به API
-
اتصال تمامی بخش‌های صفحه به API.
-
دریافت اطلاعات دارایی‌ها به‌صورت داینامیک.
-
حذف داده‌های Mock و استاتیک.
-
مدیریت حالت‌های Loading، Empty State و Error.
-
بررسی کامل مستندات API قبل از توسعه.
-
در صورت مشاهده هرگونه نقص یا کمبود در API، موارد مستندسازی شده و جهت اصلاح به تیم Backend اعلام گردد.
اطلاعات صفحه
اطلاعات زیر باید از API دریافت و نمایش داده شوند:
-
نام دارایی
-
نوع دارایی
-
مقدار دارایی
-
واحد دارایی
-
میزان افزایش یا کاهش دارایی
-
درصد تغییرات
-
اطلاعات مربوط به بازه زمانی انتخاب شده
تمام اطلاعات باید کاملاً داینامیک باشند.
فیلتر زمانی
فیلترهای زیر پیاده‌سازی شوند:
-
روزانه
-
هفتگی
-
ماهانه
-
سالانه
رفتار فیلترها
-
به‌صورت پیش‌فرض فیلتر سالانه انتخاب شده باشد.
-
در اولین ورود کاربر، اطلاعات سالانه نمایش داده شود.
-
در این مرحله فیلترها به‌صورت Client Side روی اطلاعات دریافتی اعمال شوند.
-
با تغییر فیلتر، اطلاعات صفحه بدون نیاز به طراحی مجدد بروزرسانی گردد.
نمایش تغییرات دارایی
صفحه باید تغییرات دارایی‌های شهروند را نمایش دهد.
نمونه تغییرات شامل:
-
افزایش دارایی بر اثر دریافت سود
-
افزایش دارایی پس از خرید
-
کاهش دارایی پس از مصرف یا خرید زمین
-
نمایش درصد رشد یا کاهش نسبت به بازه زمانی انتخاب شده
تست عملکرد
تیم Front-End موظف است پس از اتصال صفحه، عملکرد API را نیز بررسی نماید.
موارد تست شامل:
-
دریافت صحیح اطلاعات
-
افزایش موجودی پس از دریافت سود
-
افزایش موجودی پس از خرید دارایی
-
کاهش موجودی پس از خرید یا مصرف دارایی
-
صحت درصد تغییرات
-
صحت اطلاعات در تمامی فیلترهای زمانی
در صورت مشاهده هرگونه مغایرت میان داده‌های واقعی و اطلاعات نمایش داده شده، موضوع باید مستندسازی و به تیم Backend اعلام گردد.
ساختار کامپوننت‌ها
-
تمامی بخش‌های صفحه باید به Componentهای مستقل تبدیل شوند.
-
از ایجاد کدهای تکراری جلوگیری گردد.
-
ساختار توسعه باید به گونه‌ای باشد که در صفحات آینده قابل استفاده مجدد باشد.
-
تمامی Componentها مطابق استاندارد Design System پروژه توسعه یابند.
بهبود ساختار پروژه
در این توسعه لازم است:
-
ساختار پروژه بازبینی گردد.
-
بخش‌هایی که قبلاً به‌صورت دستی توسعه یافته‌اند، در صورت نیاز Refactor شوند.
-
تمامی Componentها استانداردسازی شوند.
-
از ایجاد بدهی فنی (Technical Debt) جلوگیری گردد.
-
هیچ بخشی برای توسعه آینده رها نشود و تمامی اصلاحات لازم همزمان انجام گردد.
طراحی
در این تسک طراحی جدید انجام نخواهد شد.
از طراحی فعلی استفاده شده و تنها در صورت مشاهده ایرادات جزئی در پیاده‌سازی، اصلاحات لازم انجام شود.
SEO
صفحه باید مطابق استانداردهای SEO پروژه توسعه یابد.
موارد زیر رعایت شوند:
-
Metadata مناسب
-
Semantic HTML
-
Schema مربوط به صفحه دارایی‌ها
-
قابلیت Index شدن صفحه
-
بهبود ساختار فنی سئو نسبت به نسخه فعلی
خروجی مورد نظر
-
اتصال کامل صفحه دارایی‌های شهروند به API
-
نمایش اطلاعات کاملاً داینامیک
-
پیاده‌سازی فیلترهای زمانی
-
نمایش صحیح افزایش و کاهش دارایی‌ها
-
نمایش درصد تغییرات در بازه‌های زمانی مختلف
-
ساختار کامپوننتی استاندارد و قابل توسعه
-
Refactor بخش‌های غیراستاندارد موجود
-
رعایت کامل اصول Clean Code و Performance
-
رعایت استانداردهای SEO و Schema
-
تست کامل عملکرد API و مستندسازی هرگونه مغایرت یا نقص
-
صفحه دارایی‌های شهروند به‌صورت کامل و پایدار به Backend متصل باشد.
-
تمامی اطلاعات دارایی‌ها و تغییرات آن‌ها به‌صورت صحیح و لحظه‌ای نمایش داده شوند.
-
ساختار کدنویسی صفحه مطابق استانداردهای پروژه متاورس رنگ باشد.
-
Componentهای صفحه قابل استفاده مجدد در توسعه‌های آینده باشند.
-
تمامی نواقص احتمالی API در فرآیند توسعه شناسایی، مستندسازی و جهت اصلاح به تیم Backend اعلام شده باشند.
ویدیو توضیحات:
https://drive.google.com/file/d/1BuBCuq2s2RoissQCdOQyLN268vcIvwas/view?usp=sharing
فیگما
https://www.figma.com/design/qyvJ4Sjw4h5gRIrE9KotBY/ui-next?node-id=3334-6034&t=7EdcxH2zv2BwM6e5-1