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

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

بازطراحی گسترده فرانت‌اند؛ یک گام فراتر از تغییرات ظاهری

در مسیر توسعه و تکامل پلتفرم متاورس رنگ، مجموعه‌ای از تغییرات فنی و زیرساختی در بخش فرانت‌اند مبتنی بر Next.js تعریف و اجرا شده است که هدف آن‌ها صرفاً بهبود ظاهر صفحات نیست؛ بلکه بازنگری در ساختار رابط کاربری، یکپارچه‌سازی تجربه استفاده، افزایش پایداری، بهینه‌سازی بارگذاری محتوا و آماده‌سازی بستر فنی برای توسعه قابلیت‌های جدید را دنبال می‌کند.

این مجموعه توسعه‌ها، بخش‌های متعددی از سامانه را در بر می‌گیرد؛ از صفحات شهروندی، دارایی‌ها و املاک گرفته تا آموزش‌ها، ویدئوها، مقالات، اخبار، رویدادها، سطوح شهروندی و زیرساخت‌های عمومی رابط کاربری. در کنار این تغییرات، سیستم دیزاین متارنگ به‌روزرسانی شده و اصلاحات متعددی در معماری کد، مدیریت ترجمه، مسیریابی، ارتباط با APIها، نمایش محتوای سه‌بعدی و عملکرد صفحات انجام شده است.

نتیجه این رویکرد، حرکت به سمت یک فرانت‌اند منسجم‌تر، قابل نگهداری‌تر و آماده‌تر برای توسعه مداوم اکوسیستم متاورس رنگ است.

سه صفحه جدید برای مدیریت و مشاهده دارایی‌ها و املاک

یکی از بخش‌های مهم این توسعه، ایجاد سه صفحه مجزا برای تفکیک بهتر اطلاعات و تجربه کاربری مرتبط با دارایی‌ها و املاک است:

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

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

سیستم دیزاین جدید؛ زبان بصری یکپارچه در سراسر متارنگ

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

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

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

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

معماری Skeleton؛ آماده‌سازی تجربه کاربری پیش از بارگذاری محتوا

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

در این توسعه، کامپوننت Skeleton سراسری و اسکلت اختصاصی بخش‌های مختلف طراحی شده‌اند؛ از جمله:

• صفحه نخست و وضعیت باز و بسته منو
• آموزش‌ها، دسته‌بندی‌ها و زیردسته‌های آموزش
• صفحه تماشای تکی ویدئو
• مقالات، دسته‌بندی مقالات و اخبار
• فهرست شهروندان و مشخصات شهروندی
• صفحه رفرال و سطوح شهروندی
• صفحه هر سطح و صفحه درباره ما
• ورژن‌ها و صفحه تکی ورژن
• تقویم وقایع و صفحه تکی هر واقعه

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

مهاجرت فنی و بازآرایی کد؛ زیرساختی برای توسعه پایدارتر

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

همچنین اصلاح ساختار صفحات تو‌در‌تو در بخش ورژن‌ها، با انتقال صفحات ورژن و ورژن تکی به ساختاری مبتنی بر Layout و مسیرهای پویا، انجام شده است. در این بازآرایی، سه کامپوننت حذف و حدود ۵۰۰ خط از کد کاهش یافته است.

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

در کنار این موارد، زیرساخت ترجمه به ساختار جدید منتقل شده، مشکل مسیریابی و Locale نامعتبر در Next.js مورد اصلاح قرار گرفته و پیکربندی baseUrl و اتوماسیون API برای محیط‌های توسعه و پروداکشن در دامنه‌ها به‌روزرسانی شده است.

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

آموزشگاه‌یاب؛ ارتقای هماهنگی رابط کاربری و زیرساخت فرانت‌اند

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

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

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

از رفع اشکال تا بهینه‌سازی عمیق عملکرد صفحات

یکی از مهم‌ترین محورهای این مجموعه توسعه، شناسایی و رفع مشکلاتی بوده که می‌توانند بر سرعت بارگذاری، پایداری رابط کاربری و کیفیت تجربه استفاده تأثیر بگذارند.

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

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

در بخش ویدئوهای صفحه نخست نیز مشکل کشینگ با استفاده از Next.js Proxy و اضافه کردن کش سمت سرور برطرف شده است. مشکل کش SVGها و مسئله اسکرول صفحه ورژن نیز در فهرست اصلاحات قرار داشته‌اند.

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

بازبینی تخصصی صفحات؛ از SEO و Schema تا بررسی مخازن کد

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

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

علاوه بر این، مخازن زیر مورد بررسی قرار گرفته‌اند:

• مخزن Metaverse-Rang-Semi-intelligent-NPC
• مخزن Metaverse-Rang-World-3D-Multiverse

بخش React نیز دو مرتبه بازبینی شده است.

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

سئوی فنی؛ کنترل طول توضیحات و یکپارچه‌سازی عنوان صفحات

در بخش سئوی صفحات، محدودیت ۱۵۵ کاراکتری برای توضیحات متا در نظر گرفته شده و افزودن عبارت اختصاصی «متارنگ» به عنوان صفحات در برنامه اصلاحات قرار گرفته است.

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

در کنار این تغییر، بررسی صفحات FAQ و صفحات سه‌بعدی برای مشکلات SEO و Schema، بخشی از فرآیند بهبود ساختار فنی و داده‌های قابل‌درک برای موتورهای جست‌وجو بوده است.

توسعه کامپوننت‌های پویا و اصلاح تعاملات شهروندی

در بخش تعاملات رابط کاربری، کامپوننت Event Box به‌صورت پویا بازآرایی شده و امکان تنظیم متن، URL و تصویر، همراه با پشتیبانی از حالت روشن و تاریک از طریق Props، برای استفاده در چهار صفحه شهروندی فراهم شده است.

سیستم لایک و دیسلایک آموزش‌ها و تقویم نیز با API و سازوکار User Interaction به‌روزرسانی شده است تا تعاملات کاربر با زیرساخت داده هماهنگ‌تر باشند.

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

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

همچنین برای باکس ثبت نظر، بهبودهایی مانند پشتیبانی از ارسال با کلید Enter، افزایش ارتفاع متناسب با چندخطی شدن متن و بررسی امکان نمایش شمارنده کاراکترها در نظر گرفته شده است. این تغییرات با هدف ساده‌تر کردن ورود متن و ارائه بازخورد بهتر به کاربر دنبال می‌شوند.

رفع مشکل نمایش تصاویر و چیدمان محتوا

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

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

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

جمع‌بندی؛ حرکت به‌سوی فرانت‌اندی منسجم‌تر و آماده توسعه

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

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

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

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

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