واتساب دايركت | نظام إدارة متكامل للمتاجر الإلكترونية مع تكامل واتساب وسلة

واتساب دايركت – WhatsApp Direct

هو نظام إدارة متكامل مصمم خصيصًا للمتاجر الإلكترونية مثل سلة لربطها بواتساب وإدارة العملاء والمبيعات والحملات الترويجية من مكان واحد.

يتيح النظام لوحة تحكم احترافية تمكّن أصحاب المتاجر من التواصل الذكي مع العملاء، أتمتة الردود، جدولة الرسائل، وتتبع الأداء بشكل شامل.

️ صفحات النظام ووظائفها

1. الصفحة الرئيسية (Landing Page)

واجهة تسويقية جذابة توضح فكرة النظام، مميزاته، وخدماته. تحتوي على زر “اشترك الآن” وتحويل مباشر إلى نموذج التسجيل أو الاشتراك في الباقات.

2. صفحة التسجيل وتسجيل الدخول

تسجيل المستخدمين الجدد.

التحقق من البريد الإلكتروني عبر كود تأكيد يُرسل أوتوماتيكيًا.

تسجيل الدخول الآمن عبر JWT Tokens.

3. صفحات البريد الإلكتروني المرسلة (Emails)

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

4. صفحة الملف الشخصي (Profile Page)

تتيح للمستخدم تعديل بياناته الشخصية، إعدادات واتساب، بيانات الباقة الحالية، وتغيير كلمة المرور.

5. صفحة الباقات (Plans Page)

تُعرض فيها الباقات المتاحة للمستخدم (مجانية ومدفوعة) مع خصائص كل باقة وعدد العملاء المسموح بهم وعدد الرسائل الشهرية.

6. اللوحة الرئيسية (Dashboard Page)

تعرض نظرة شاملة على أداء المستخدم:

عدد العملاء.

الرسائل المرسلة.

الحملات الجارية.

الإحصاءات البيانية اليومية والشهرية.

7. صفحة قائمة العملاء (Customers Page)

تُعتبر من أقوى صفحات النظام، حيث يمكن للمستخدم:

رفع العملاء يدويًا أو عبر ملف Excel أو حتى عن طريق الرفع الآلى من واتساب.

استيراد العملاء مباشرة من واتساب.

تقسيم العملاء في مجموعات تلقائية أو يدوية حسب سلوكهم أو المنطقة.

البحث والتصفية باستخدام Select2 المتطور.

8. صفحة الحملات الترويجية (Campaigns Page)

إنشاء حملات جديدة.

تحديد العملاء المستهدفين.

جدولة الرسائل بتاريخ وساعة معينة.

متابعة حالة كل حملة (نشطة، مكتملة، مؤجلة).

9. صفحة القائمة السوداء (Blacklist Page)

تمنع إرسال الرسائل إلى أرقام محددة، وتُستخدم لحماية النظام من التكرار أو الأخطاء.

10. صفحة السلات المتروكة (Abandoned Carts Page)

تربط المتجر الإلكتروني بالنظام، وتسمح بإرسال رسائل تلقائية للعملاء الذين تركوا منتجاتهم في السلة دون إكمال الشراء.

11. صفحة ربط واتساب (QR Connection Page)

عرض QR Code لربط رقم واتساب بالنظام من خلال Zender API.

متابعة حالة الاتصال لحظيًا (Online / Offline).

12. صفحة القوالب الآلية (Automation Templates)

تحتوي على أكثر من 17 قالب جاهز لرسائل تلقائية مثل:

“رسالة عميل جديد بالمتجر.”

“رسالة طلب جديد.”

“شكرًا على الشراء.”

“تم استلام طلبك.”

“خصم خاص لك اليوم.”

“تذكير بالسلة المتروكة.”

ويتم تفعيلها تلقائيًا بناءً على الحدث (Event Trigger).

13. صفحة الرسائل المرسلة (Sent Messages Page)

تُظهر سجلًا كاملًا بجميع الرسائل المرسلة مع حالتها (تم الإرسال – قيد الإرسال – فشل).

14. صفحة بوت الرد الآلي (Auto-Reply Bot Page)

تتيح إنشاء ردود ذكية بناءً على كلمات مفتاحية أو استفسارات محددة.

مثلًا: إذا كتب العميل “العروض”، يرسل له البوت رسالة تحتوي على أحدث الخصومات.

التكامل مع Zender و WhatsApp

تم استخدام Zender API لربط النظام بحسابات واتساب.

يدعم النظام إرسال واستقبال الرسائل، واستقبال Webhooks للأحداث المختلفة.

نظام Webhook Signature للتحقق من مصدر الطلب.

? الواجهة الأمامية (Front-End)

تم بناء واجهة المستخدم بعناية لتحقيق تجربة استخدام مريحة وسريعة الاستجابة عبر مختلف الأجهزة (Responsive Design):

HTML5 / CSS3 / JavaScript (ES6) – الأساس لبناء واجهة متقدمة وسريعة.

Bootstrap 5 – لتصميم واجهات متجاوبة وأنيقة تدعم RTL.

jQuery – لتحسين التفاعلية وسرعة تنفيذ المهام في DOM.

Select2 – لتخصيص القوائم المنسدلة وعرض العملاء والمجموعات بطريقة احترافية.

DataTables.js – لعرض الجداول الديناميكية مع البحث، التصفية، والتصفح السلس.

Chart.js – لعرض الإحصاءات والرسوم البيانية في صفحة الـDashboard.

SweetAlert2 و Toastify.js – لتنبيهات تفاعلية وجميلة (مثل تأكيدات الحذف أو نجاح العملية).

Font Awesome / Bootstrap Icons – لاستخدام أيقونات خفيفة وسريعة التحميل.

Animate.css – لإضافة حركات انتقال سلسة بين العناصر.

AOS (Animate On Scroll) – لإضافة تأثيرات بصرية أثناء التمرير في الـLanding Page.

Responsive Meta Tags – لتوافق النظام مع الهواتف الذكية والتابلت.

Lazy Loading – لتحسين سرعة تحميل الصور والمحتوى في الصفحة الرئيسية.

LocalStorage / SessionStorage – لتخزين بيانات مؤقتة وتحسين تجربة المستخدم.

Axios – لإجراء الطلبات إلى الـAPI بشكل منظم وسلس.

?(Back-End)

تم بناء الخادم باستخدام تقنيات حديثة تضمن الأداء العالي، الأمان، وسهولة التوسع:

Node.js + Express.js – الهيكل الأساسي لبناء RESTful API قابل للتوسع.

PHP Laravel

MySQL Database – قاعدة بيانات قوية وسريعة.

Sequelize ORM – للتعامل مع قاعدة البيانات بلغة برمجية واضحة دون كتابة SQL يدوي.

JWT (JSON Web Token) – لتأمين الجلسات والمصادقة على المستخدمين.

bcrypt.js – لتشفير كلمات المرور وتأمين الحسابات.

Nodemailer – لإرسال البريد الإلكتروني التلقائي (تأكيد التسجيل، إعادة التفعيل، التنبيهات).

dotenv – لإدارة المفاتيح والمتغيرات السرية في بيئة آمنة.

Multer – لمعالجة رفع الملفات (مثل ملفات Excel الخاصة بالعملاء).

XLSX / csv-parser – لمعالجة واستيراد بيانات العملاء من ملفات Excel أو CSV.

cron-jobs – لجدولة المهام (مثل إرسال حملات أوتوماتيكية).

express-rate-limit + helmet + cors – لتعزيز الأمان ومنع الطلبات الزائدة أو الهجمات.

morgan – لتسجيل الطلبات والأنشطة أثناء التطوير.

compression – لضغط الاستجابات وتحسين سرعة التحميل.

winston logger – لتتبع الأخطاء والأنشطة في السرفر بطريقة منظمة.

zod / joi validation – للتحقق من صحة بيانات الإدخال.

API Versioning – لتقسيم واجهات الـAPI وضمان قابلية التطوير مستقبلاً.

Webhooks Management – لإدارة إشعارات الأحداث القادمة من Zender وWhatsApp.

Dynamic Route Loading – لتحميل المسارات تلقائيًا من المجلدات لسهولة التنظيم.

(Server & Infrastructure)

تم إعداد المشروع وتشغيله على بيئة إنتاج مستقرة وسريعة باستخدام VPS من Hostinger:

Ubuntu Server (Linux-based)

Nginx Reverse Proxy – لتوزيع الطلبات بين المنفذ الداخلي والخارجي وتوجيهها بدقة.

PM2 Process Manager – لإدارة وتشغيل الخادم وضمان استمراره حتى بعد إعادة التشغيل.

Let’s Encrypt SSL – لتفعيل اتصال HTTPS الآمن بين المستخدم والخادم.

PuTTY / SSH – للتحكم بالسيرفر وتنفيذ الأوامر.

Firewall Configuration (ufw) – لتأمين المنافذ وحماية الخادم.

Auto Backup Scripts – لحفظ نسخ احتياطية دورية من قاعدة البيانات والملفات.

Git + GitHub – لإدارة النسخ والتحديثات وإرسال التحديثات إلى الخادم مباشرة.

System Monitoring ( netstat) – لمتابعة أداء الخادم واستهلاك الموارد.

Log Rotation – لتنظيم ملفات السجلات (logs) وتجنب امتلاء المساحة.

التكامل مع Zender وWhatsApp

Zender API Integration – ربط مباشر مع نظام Zender لإرسال واستقبال الرسائل عبر واتساب.

QR Authentication System – لإنشاء اتصال بين النظام ورقم واتساب المستخدم عبر كود QR.

Webhook Signature Validation – للتحقق من صحة الأحداث القادمة من Zender.

Auto Message Handling – استقبال ردود العملاء وتحليلها وربطها بالبريد أو الحملة المناسبة.

Real-time Updates – متابعة حالة الرسائل مباشرة (Delivered / Seen / Failed).

Multi-instance Support – لدعم أكثر من حساب واتساب في نفس الوقت.

? خصائص إضافية صغيرة لكنها مهمة

دعم اللغة العربية بالكامل واتجاه RTL.

تصميم متجاوب لجميع الشاشات (موبايل / تابلت / ديسكتوب).

نظام إشعارات فوري (real-time alerts).

تقسيم الصلاحيات (Admin / User).

? أدوات مساعدة أخرى

Postman لاختبار الـAPIs.

VS Code كبيئة تطوير رئيسية.

Figma / Adobe XD/Canva لتصميم الواجهات قبل التطوير.

Notion لإدارة المهام.

Google Fonts / Cairo Arabic Font لتوحيد الخطوط في الواجهة.

Responsive Testing Tools لاختبار التجاوب على الأجهزة المختلفة.

️ الاستضافة والنشر (Deployment & Hosting)

VPS Hosting (Hostinger )

Continuous Deployment via Git

Environment Variables Management

MySQL Remote Connection (Secure)

Automated SSL Renewal (Certbot)

Custom Domain Configuration

Reverse Proxy Load Balancing

Email Domain Authentication (SPF)

ختامًا

مشروع واتساب دايركت ليس مجرد لوحة تحكم، بل نظام ذكي متكامل لإدارة التواصل والمبيعات عبر واتساب، مصمم بعناية ليخدم التجار ويُسهّل إدارة عملائهم بطريقة احترافية وفعّالة.

تم تطويره وتصميمه بالكامل بواسطة Mohamed Elcici – Fullstack Developer &AI Engineer.