انبارچین — پلتفرم اجاره انبار و پارکینگ

چالش اصلی

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

این پروژه برای ویاناسیستم توسعه داده شد و رابط کاربری آن با Nuxt.js، Vue.js و Vuetify پیاده‌سازی شد.

یکی از اهداف اصلی در این پروژه، آشنایی عمیق‌تر با نحوه ارتباط لحظه‌ای بین Client و Server و همچنین کار با داده‌های مکانی و مدیریت نقشه‌های پیچیده بود.

ارتباطات Real-Time و WebSocket

یکی از مهم‌ترین تجربیات این پروژه، آشنایی عملی با WebSocket و ارتباطات Real-Time و استفاده از آن در پیاده‌سازی سیستم چت بود.

در این پروژه، ارتباط Socket بین Client و Server برای ایجاد یک تجربه چت لحظه‌ای پیاده‌سازی شد؛ به‌گونه‌ای که پیام‌های ارسال‌شده بدون نیاز به Refresh یا درخواست‌های مکرر HTTP در اختیار طرف مقابل قرار می‌گرفتند.

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

این تجربه همچنین درک بهتری از تفاوت میان درخواست‌های معمول HTTP و ارتباطات دائمی و دوطرفه WebSocket ایجاد کرد و نحوه مدیریت داده‌های Real-Time و به‌روزرسانی وضعیت رابط کاربری بر اساس رویدادهای دریافتی را به‌صورت عملی تجربه کردم.

کار با نقشه و داده‌های مکانی

یکی از بخش‌های اصلی انبارچین، کار با OpenLayers و vue3-openlayers بود. در این پروژه با مفاهیم Vector Data، Custom Styling، Layer Management، Clustering و Popup آشنا شدم و آن‌ها را در یک نقشه تعاملی پیاده‌سازی کردم.

همچنین نحوه مدیریت Zoom، Eventها و Interactionهای نقشه و هماهنگ‌سازی رفتار Map با تعاملات کاربر را تجربه کردم.

رابط کاربری

رابط کاربری پروژه با Vuetify 3 و Vue.js توسعه داده شد.

برای مدیریت State از Pinia و برای برخی قابلیت‌های کاربردی از VueUse استفاده شد.

همچنین در پروژه قابلیت‌هایی مانند آپلود و مدیریت فایل با FilePond، ویرایش محتوای متنی با TinyMCE، مرتب‌سازی داده‌ها با Vue Draggable و نمایش محتوای اسلایدی با Swiper نیز مورد استفاده قرار گرفتند.

نتیجه

انبارچین تجربه‌ای عملی در Real-Time Web Applications و Interactive Maps بود؛ از پیاده‌سازی ارتباطات WebSocket تا کار با OpenLayers، Vector Data، Layerها، Clustering، Popup و Map Interaction.