سامانه‌ی مدیریت محتوای سازمانی
ایران فاوا گسترش · گروه صنعتی ایران‌خودرو
- React 19
- Vite
- Zustand
- React Hook Form
- CKEditor 5
- Highcharts
- SCSS Modules
- Docker
- Azure DevOps
پنل مدیریت ikcoglobal.com، وب‌سایت جهانی ایران‌خودرو، و پورتال گروه ایران‌خودرو، که به شکل دو نمونه‌ی جدا از یک بیلد واحد مستقر شده است؛ ikco.ir که هنوز طراحی قدیمی دارد، قرار است بعداً به آن منتقل شود. سیزده ماژول دارد: داشبورد، مدیریت منو و هدر و فوتر، مدیریت فایل، محتوا با دسته‌بندی و برچسب، پرسش‌های متداول، صفحه‌ساز، محصولات، صفحه‌ی تماس، کاربران سایت، کوتاه‌کننده‌ی لینک و رسیدگی به نظرات. هر رکورد - صفحه، منو، فوتر، محصول یا پرسش - برای هر زبان جداگانه ساخته می‌شود؛ پس سایت فارسی و انگلیسی از یک جا اداره می‌شوند، بی‌آنکه یکی لایه‌ی ترجمه‌ای روی دیگری باشد.
چالش
پنل مدیریت پشت ikcoglobal.com، وب‌سایت جهانی ایران‌خودرو، و پورتال گروه: صفحه‌سازی مبتنی بر بخش با ۲۳ نوع کامپوننت، مدیریت محصولات، محتوا و منو، رسیدگی به نظرات و کوتاه‌کننده‌ی لینک - سیزده ماژول که به تیم‌های غیرفنی اجازه می‌دهد سایت‌ها را بدون دیپلوی اداره کنند.
RFP شرکت دو چیز می‌خواست که در خلاف جهت هم می‌کشند. ویرایشگران باید بدون مهندس صفحه، محصول و منو بسازند - و نتیجه همچنان در خانواده‌ای از برندها، از ایران‌خودرو و ایران‌خودرو دیزل تا پژو، هایما، لونا، بستیون و آئولوس، شبیه یک شرکت به نظر برسد. یک ویرایشگر آزاد اولی را حل می‌کند و ظرف یک فصل در دومی شکست می‌خورد؛ یک قالب قفل‌شده دومی را حل می‌کند و هر لندینگ جدید را دوباره به صف توسعه برمی‌گرداند. به این‌ها اضافه کنید صفحه‌های محصول را که داده‌ی مهندسی واقعی دارند - مشخصات و تجهیزات هر تیپ، تصاویر داخلی و خارجی و ۳۶۰ درجه، مقایسه و کاتالوگ - و باید در ده‌ها خودرو و دو زبان یکدست بمانند.
کاری که کردم
- پروژه را راه‌اندازی کردم - React روی Vite، Zustand برای state، مسیریابی و چیدمانی که همه‌ی ماژول‌ها درون آن قرار می‌گیرند - و دو انتخابگری را ساختم که صفحه‌ساز روی آن‌ها می‌چرخد: انتخاب چیدمان بخش و کاتالوگ کامپوننت‌ها.
- هر صفحه را پشته‌ای از بخش‌ها مدل می‌کنیم؛ هر بخش یکی از چیدمان‌های ستونی آماده را که از بک‌اند می‌آید انتخاب می‌کند - نصف، یک‌سوم، یک‌چهارم، یک‌پنجم، یک‌ششم و ترکیب‌های نامتقارن و جابه‌جاشده‌ی آن‌ها - و هر ستون کامپوننت‌ها را در خود دارد. ویرایشگر کنترل واقعی روی چیدمان دارد، اما گرید زیرین همچنان گرید خود سایت است.
- به هر نوع کامپوننت فرم تنظیمات و store خودش را دادم، تا صفحه‌ساز فقط جای‌گذاری، جابه‌جایی، تکثیر، پنهان‌سازی و حذف کند؛ افزودن یک نوع یعنی افزودن یک ماژول مستقل و یک ردیف در کاتالوگ. حدود دوازده‌تا از ۲۳ کامپوننت را خودم ساختم - از جمله گالری، تاریخچه، آخرین مطالب، بنر، دکمه، تب‌ها، خدمات، دانلود فایل، اسلایدر پیوسته، تیتر و بلوک متن.
- به بخش‌ها و کامپوننت‌ها همه‌جا همان کنترل‌ها را دادیم - جمع کردن، ویرایش، تکثیر، نمایش یا پنهان‌سازی، حذف و کشیدن برای تغییر ترتیب - تا ساختن صفحه در هر سطح همان حرکت باشد و یک بخش آماده به‌جای ساخت دوباره، تکثیر شود.
- روی بخش محصولات کار کردم: فهرست محصولات و ویرایشگر محصول، تقسیم‌شده به همان تب‌هایی که صفحه‌ی عمومی محصول نشان می‌دهد - نمای کلی، مشخصات فنی، تجهیزات، گالری با مجموعه‌های خارجی، داخلی و ۳۶۰ درجه، مقایسه و کاتالوگ. مشخصات و تجهیزات از یک کتابخانه‌ی مشترک ویژگی‌ها می‌آیند؛ پس ویرایش یا کنار گذاشتن یک ویژگی، همه‌ی محصولاتی را که از آن استفاده می‌کنند تغییر می‌دهد.
- بخش زیادی از منوساز را ساختم: منو برای هر زبان، تودرتو تا سه سطح برای مگامنو، جابه‌جایی آیتم‌ها با کشیدن و رها کردن، و روشن و خاموش کردن آن‌ها بدون حذف. در هر زبان فقط یک منو فعال است و آخرین منوی فعال قابل حذف نیست؛ پس سایت هیچ‌وقت ناوبری‌اش را از دست نمی‌دهد.
- مدیریت فایل را ساختم - تصویر، ویدئو، سند و صوت در تب‌های جدا، با فیلتر بر اساس تاریخ بارگذاری و حجم - که هر فیلد «انتخاب از گالری» در پنل آن را به‌عنوان انتخابگر باز می‌کند؛ پس همه‌ی ماژول‌ها به یک مخزن واحد دارایی‌ها اشاره می‌کنند.
- همه‌ی صفحه‌های فهرست را یک جدول واحد کردیم - جست‌وجو برای هر ستون، فیلترهای چندانتخابی، فیلتر زبان، کلید فعال/غیرفعال درجا، همان عملیات ردیف و همان صفحه‌بندی؛ پس یاد گرفتن یک ماژول یعنی یاد گرفتن همه.
ویژگی‌های کلیدی
- ۱۳ ماژول: داشبورد، منو، هدر، فوتر، فایل، محتوا، پرسش‌های متداول، صفحه‌ها، محصولات، تماس، کاربران، لینک‌ها و نظرات.
- صفحه‌ساز مبتنی بر بخش با چیدمان‌های ستونی آماده و ۲۳ نوع کامپوننت - اسلایدر اصلی، اسلایدر ساده و پیوسته، پورتفولیوی محصول، گالری، تب‌ها، نمای شبکه‌ای، پرسش‌های متداول، iframe، بلوک متن و دیگر کامپوننت‌ها.
- کاتالوگ محصولات بر پایه‌ی کتابخانه‌ی مشترک ویژگی‌ها: مشخصات فنی و تجهیزات، رسانه‌ی خارجی، داخلی و ۳۶۰ درجه، مقایسه و کاتالوگ.
- چندزبانه از پایه: صفحه‌ها، منوها، هدرها، فوترها، پرسش‌ها، محصولات و صفحه‌ی تماس هر کدام برای هر زبان جداگانه ساخته می‌شوند، با یک منو و فوتر فعال در هر زبان.
- ویرایش متن غنی با CKEditor 5 و امکان بارگذاری؛ پیش‌نویس، اسلاگ، برچسب و توضیحات متا برای مطالب.
- ویرایشگر مشترک پس‌زمینه - رنگ یکدست، طیف رنگی یا تصویر - با پالتی از حداکثر ده رنگ ذخیره‌شده روی سرور.
- رسیدگی به نظرات: تنظیمات برای هر دسته‌بندی، فهرست کلمات ممنوعه که هر نظر حاوی آن‌ها را برای بررسی نگه می‌دارد، گزارش‌ها به تفکیک دلیل، و مجوزهای کاربران - لایک، ثبت نظر، گزارش - که می‌توانند تا تاریخ مشخصی تعلیق شوند.
- کوتاه‌کننده‌ی لینک با شمارش کلیک، و داشبورد تحلیلی بازدیدها بر اساس زبان، بازه‌ی زمانی، صفحه، دستگاه و مرورگر.
- یک بیلد که به شکل دو tenant مستقر شده: ikcoglobal.com و پورتال گروه ایران‌خودرو.
نتیجه
هر دو سایت را تیم‌های محتوا از پنل اداره می‌کنند، نه با تیکت به توسعه‌دهنده‌ها: یک لندینگ از بخش‌ها و کامپوننت‌های تأییدشده ساخته می‌شود، یک خودروی جدید یک رکورد در کتابخانه‌ی محصولات است، و تغییر منو یک کشیدن و رها کردن در منوساز. چون کامپوننت‌ها و چیدمان‌ها از خود سایت‌اند، آنچه ویرایشگران می‌سازند همچنان شبیه همان شرکت است.
صفحه‌ها
برای دیدن هر صفحه در اندازه‌ی کامل، رویش بزنید.
