[ الموقـــــع ]اليــــــمن03:40:00 AM
[ دراسة حالة مختارة ]

SAAS Smart Shipment Tracking

منصة SaaS متكاملة لإدارة الخدمات اللوجستية، تم تطويرها باستخدام Next.js وNestJS وReact Native وPostgreSQL. تتيح لشركات الشحن إدارة الشحنات والاشتراكات وتتبعها بشكل لحظي عبر تطبيقات الويب والجوال والخدمات الخلفية.

01 / التقنيات المستعملة
Next.jsNestJSTypeScriptTailwind CSSTanStack React QueryReact Hook FormZodAxiosSocket.IO ClientPrisma ORMPostgreSQLJWT AuthenticationSocket.IONeonReact NativeExpoExpo Routerreact-i18nextExpo Secure Store
02 / المجال والمسار

هندسة الويب المتكاملة والتصميم التقني

SAAS Smart Shipment Tracking
[ التحليل التفصيلي والمعمارية ]

نظرة عامة

SAAS Smart Shipment Tracking هي منصة SaaS لوجستية متكاملة ومتعددة المستأجرين، صُممت لمساعدة شركات الشحن على إدارة عملياتها من خلال منظومة موحدة ومترابطة.

تتكون المنصة من ثلاثة تطبيقات رئيسية: لوحة تحكم ويب مبنية باستخدام Next.js، وتطبيق جوال باستخدام React Native وExpo، وواجهة خلفية مبنية باستخدام NestJS.

تمكّن المنصة الشركات من إدارة الشحنات والعملاء والمسارات والمستخدمين والاشتراكات والبيانات التشغيلية، إلى جانب توفير تجربة سلسة للعملاء لتتبع شحناتهم بشكل لحظي عبر بوابة تتبع عامة مخصصة.

Landing Page
شكل // Landing Page

لوحة التحكم

توفر تطبيقات الويب بيئة متكاملة لإدارة العمليات لمختلف الأدوار، بما في ذلك مسؤولي المنصة ومديري الشركات والموظفين.

يتم تخصيص الصلاحيات والوصول إلى الوحدات المختلفة لكل دور بما يتناسب مع مسؤولياته.

يمكن للمستخدمين إدارة:

  • الشحنات ومراحل التسليم.
  • بيانات العملاء ووسائل التواصل.
  • المسارات ونقاط التسليم.
  • مستخدمي الشركة والأدوار والصلاحيات.
  • خطط الاشتراك وحالة الشركة.
  • إحصائيات لوحة التحكم ومؤشرات العمليات.
  • الملاحظات والتواصل الداخلي.

تتميز لوحة التحكم بواجهة حديثة ومتجاوبة تدعم اتجاهي RTL وLTR.

Manager Dashboard
شكل // Manager Dashboard

إدارة الشحنات

توفر المنصة نظامًا متكاملًا لإدارة دورة حياة الشحنة منذ إنشائها وحتى اكتمال عملية التسليم.

يمكن للشركات:

  • إنشاء الشحنات وإدارتها.
  • تحديد المسارات.
  • تعيين السائقين.
  • إدارة محتويات الشحنات.
  • متابعة حالة الشحنة.
  • مراقبة تقدم عملية التسليم.
  • الاطلاع على تفاصيل الشحنات بشكل شامل.

يساعد ذلك فرق العمليات اللوجستية على إدارة أعمالهم اليومية من خلال نظام مركزي واحد.

Shipment Page
شكل // Shipment Page

التتبع اللحظي

يمكن للعملاء متابعة شحناتهم من خلال صفحة تتبع عامة دون الحاجة إلى إنشاء حساب.

توفر بوابة التتبع:

  • الحالة الحالية للشحنة.
  • مستوى تقدم الشحنة.
  • تفاصيل نقطة الانطلاق والوجهة.
  • معلومات المسار.
  • الموقع الحالي.
  • بيانات السائق.
  • الخط الزمني للشحنة.
  • مراحل عملية التسليم.

ويتم تحديث بيانات الشحنات بشكل لحظي باستخدام Socket.IO، مما يتيح ظهور التغييرات مباشرة دون الحاجة إلى إعادة تحميل الصفحة.

Client Shipment Tracking
شكل // Client Shipment Tracking

الخرائط والمسارات

تتضمن المنصة خصائص تفاعلية تعتمد على الخرائط لإدارة مسارات التوصيل ومواقع الشحنات.

يمكن للمستخدمين:

  • إنشاء وتعديل المسارات.
  • تحديد نقاط المسار.
  • متابعة حركة الشحنات على الخريطة.
  • مراقبة مسارات التوصيل.

وتتكامل المنصة مع تقنيات الخرائط لتقديم تجربة أكثر وضوحًا وكفاءة في إدارة العمليات اللوجستية وتتبع الشحنات.

Select Location For a Point
شكل // Select Location For a Point

تطبيق الجوال

يتضمن المشروع تطبيقًا متعدد المنصات مبنيًا باستخدام React Native وExpo، ليتيح الوصول إلى المنصة خارج بيئة الويب.

يوفر التطبيق تجربة استخدام متكاملة تشمل:

  • تنفيذ العمليات المتعلقة بالشحنات.
  • دعم تعدد اللغات.
  • الوضع الداكن.
  • التخزين المحلي الآمن.
  • إعدادات التطبيق وتفضيلات المستخدم.
  • واجهة متجاوبة ومهيأة للأجهزة المحمولة.

كما يعتمد التطبيق على نظام الترجمة نفسه المستخدم في منصة الويب.

Mobile Home Page
شكل // Mobile Home Page
Mobile Shipments
شكل // Mobile Shipments

دعم اللغات

تدعم المنصة 10 لغات مع توفير تجربة مترجمة بالكامل:

  • الإنجليزية
  • العربية
  • الصينية
  • الهندية
  • الإسبانية
  • الفرنسية
  • البنغالية
  • البرتغالية
  • الروسية
  • الأردية

ويشمل نظام الترجمة:

  • دعم اتجاه RTL للغتين العربية والأردية.
  • توجيه الصفحات بناءً على اللغة.
  • واجهات مستخدم مترجمة.
  • تجربة جوال متعددة اللغات.

الواجهة الخلفية

تم بناء النظام الخلفي باستخدام NestJS وفق بنية API قابلة للتوسع، ليكون الأساس الذي تعتمد عليه تطبيقات الويب والجوال.

تشمل أبرز وظائف النظام:

  • بناء واجهات RESTful API.
  • المصادقة باستخدام JWT.
  • إدارة الصلاحيات وفق أدوار المستخدمين.
  • إدارة قاعدة البيانات باستخدام Prisma ORM.
  • التكامل مع PostgreSQL.
  • الاتصال اللحظي باستخدام Socket.IO.
  • التحقق من صحة البيانات والطلبات.
  • توثيق واجهات API باستخدام Swagger.

التقنيات المستخدمة

الواجهة الأمامية

  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind CSS
  • TanStack React Query
  • React Hook Form
  • Zod
  • Axios
  • Socket.IO Client

الواجهة الخلفية

  • NestJS
  • Prisma ORM
  • PostgreSQL
  • JWT Authentication
  • Socket.IO
  • Swagger

تطبيق الجوال

  • React Native
  • Expo
  • Expo Router
  • react-i18next
  • Expo Secure Store

أبرز مميزات المشروع

  • بنية SaaS متكاملة Full-Stack.
  • نظام متعدد المستأجرين لدعم عدة شركات.
  • تكامل كامل بين الويب والجوال والخدمات الخلفية.
  • نظام صلاحيات قائم على الأدوار.
  • إدارة متكاملة لدورة حياة الشحنات.
  • إدارة الاشتراكات.
  • تتبع لحظي للشحنات.
  • خرائط تفاعلية وإدارة للمسارات.
  • إحصائيات ومؤشرات تشغيلية عبر لوحة التحكم.
  • بوابة عامة لتتبع الشحنات للعملاء.
  • نظام توطين يدعم 10 لغات.
  • دعم كامل لاتجاهي RTL وLTR.
  • تصميم متجاوب عبر مختلف المنصات.

دوري في المشروع

بصفتي Full-Stack Developer، توليت مسؤولية تصميم وتطوير البنية العامة للمنصة والمساهمة في بناء مختلف مكوناتها.

وشملت مسؤولياتي:

  • تطوير لوحة التحكم وبوابات التتبع باستخدام Next.js.
  • تطوير واجهات الـAPI الخلفية وربطها مع التطبيقات.
  • تنفيذ أنظمة المصادقة وإدارة الصلاحيات.
  • بناء لوحات تحكم مخصصة حسب أدوار المستخدمين.
  • تطوير سير عمل متكامل لإدارة الشحنات.
  • تنفيذ الخصائص اللحظية باستخدام Socket.IO.
  • تطوير مكونات واجهة مستخدم متجاوبة وقابلة لإعادة الاستخدام.
  • تطبيق ودعم نظام تعدد اللغات عبر تطبيقات الويب والجوال.
  • العمل على بنية قاعدة البيانات باستخدام Prisma وPostgreSQL.
  • تطوير وصيانة تطبيق الجوال باستخدام React Native وExpo.
استكشف المزيد من الأعمال

العودة إلى الأرشيف