شرح پروژه: سیستم حاشیه‌نویسی فرامین

2022توسعه‌دهنده فرانت‌اند
JavaScriptjQueryAjax DataTablesDjango TemplatePDF & Excel Export

فرامین، سیستم حاشیه‌نویسی و بازبینی متن

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

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

صفحه حاشیه‌نویسی متن برای پژوهشگران

نقش من

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

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

چالش اصلی: سیستم حاشیه‌نویسی متن

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

  • بخش‌های متن قابل انتخاب باشند و موقعیت آن‌ها در میان تگ‌های HTML حفظ شود
  • انتخاب‌ها به‌صورت بصری هایلایت شده و به متادیتای خود متصل باشند
  • چند حاشیه‌نویسی بتوانند با یکدیگر همپوشانی، تودرتویی یا تقاطع جزئی داشته باشند
  • حاشیه‌نویسی‌ها بعداً قابل ویرایش، بازبینی و رندر مجدد باشند
  • تعاملی بودن فرم و هایلایت‌ها و روان بودن UI/UX تضمین شود
  • وضعیت‌های مختلف مانند پیش‌نویس، رد شده، تأیید شده یا قفل شده به‌درستی مدیریت شوند
  • متن اصلی همواره دست‌نخورده باقی بماند
صفحه بازبینی سرپرست

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

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

سایر قابلیت‌ها

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

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

این سیستم همچنین دارای نمودارهای تجسم داده بود که من آن‌ها را پیکربندی و پیاده‌سازی کردم.

گزارش‌ها و نمودارهای فرامین

جمع‌بندی

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

کار من متمرکز بود و احتمالاً کمتر از ۱۰۰ ساعت طول کشید، اما به من کمک کرد مهارت‌های فرانت‌اند خودم را بهبود دهم، درک بهتری از نحوه کارکرد چیزها پیدا کنم و به‌طور مؤثر در یک تیم کوچک همکاری کنم.

LinkedIn
Telegram