به‌زودی
اجارنت
سامانهٔ جست‌وجو و اجارهٔ ملک در قم
اجارنت از ابتدا برای کاربران فارسی‌زبان طراحی شده و کارش را از قم شروع می‌کند. مسئولیت من، طراحی رابط و ساخت بخش وب است؛ بهنام هم بک‌اند را توسعه می‌دهد. برای هماهنگی این دو بخش، قرارداد OpenAPI را نوشته‌ایم تا ساختار داده‌ها و درخواست‌ها مشخص باشد و تغییرات API و وب با هم ثبت شوند.
تقسیم کار پروژه
- وب‌اپلیکیشن
- امیرحسین: رابط کاربری، نقشه‌ها و مسیرهای کاربر با Next.js
- API و داده
- بهنام: NestJS، PostgreSQL / PostGIS
- ارتباط وب و بک‌اند
- قرارداد دستی OpenAPI 3.1؛ کد ارتباط با API و نوع داده‌ها از روی آن تولید می‌شود
طراحی صفحهٔ اصلی
برای صفحهٔ اصلی، سه طرح اولیه را امتحان کردم. یکی از آن‌ها نمای سه‌بعدی شهر قم بود که با داده‌های واقعی OpenStreetMap ساخته می‌شد: مرز شهر، خیابان‌ها و محله‌ها دیده می‌شدند و دوربین به سمت یک آگهی حرکت می‌کرد.
بعد نسخهٔ سبک‌تری با SVG ساختم. با اسکرول، نقشه رسم می‌شود، نما به یک محله نزدیک می‌شود و تصویر آپارتمان با پنجره‌های روشن شکل می‌گیرد. انیمیشن با GSAP کنترل می‌شود و دیگر نیازی به Three.js در صفحهٔ اصلی نیست. برای کاربرانی که کاهش حرکت را فعال کرده‌اند هم نمای ثابت در نظر گرفته‌ام.
بخش‌هایی که ساخته‌ام
1جست‌وجو روی نقشه
آگهی‌ها بر اساس محدوده‌ای که روی نقشه می‌بینید نمایش داده می‌شوند. اگر تعداد نتایج زیاد باشد، سرور آن‌ها را گروه‌بندی می‌کند. برای گروه‌ها لینک مستقیم وجود دارد و اگر یکی از سرویس‌های نقشه در دسترس نباشد، سرویس جایگزین استفاده می‌شود.
2آگهی‌ها
تنظیمات جست‌وجو در آدرس صفحه ذخیره می‌شوند و نتایج به‌تدریج بارگذاری می‌شوند. شناسهٔ محله‌ها از API می‌آید. مبلغ‌ها به ریال و با BigInt پردازش می‌شوند تا خطای محاسبات اعشاری پیش نیاید.
3ثبت و مدیریت آگهی
فرم ثبت آگهی بر اساس نوع ملک تغییر می‌کند و بارگذاری تصویر و ویدیو سه مرحله دارد. مالک در پنل خود می‌تواند آگهی را منتشر یا متوقف کند، وضعیت آن را به اجاره‌رفته تغییر دهد، ویرایش کند یا حذف کند.
4حساب کاربری و پنل مدیریت
ورود با کد یک‌بارمصرف انجام می‌شود. حساب کاربری شامل مشخصات، نشست‌های فعال و جست‌وجوهای ذخیره‌شده است. پنل مدیریت هم بر اساس نقش کاربر دسترسی می‌دهد. ظاهر این بخش‌ها با بقیهٔ سایت هماهنگ است.
5طراحی برای کاربران فارسی‌زبان
چیدمان از ابتدا راست‌به‌چپ است و رنگ‌ها و اندازه‌ها در تمام صفحات از قواعد مشترک پیروی می‌کنند. برای نبود نتیجه، خطا و صفحهٔ پیدا‌نشده پیام مشخص نوشته‌ام. هدرهای امنیتی هم در نظر گرفته شده‌اند.