DabaDigital — منصة وكالة رقمية

المشروع

DabaDigital هي منصة رقمية لوكالة متخصصة في تطوير المنتجات الرقمية، وتطبيقات الويب والحلول التقنية المخصصة.

يجمع المشروع بين تجربتين أساسيتين:

• موقع عام للعملاء المحتملين؛
• مساحة إدارة خاصة بالفريق.

يعرض الموقع الوكالة وخدماتها ومشاريعها وفريقها، كما يسمح للزوار بإرسال طلب مشروع.

التحدي

كان الهدف هو تجاوز مفهوم موقع الوكالة التقليدي الذي يعتمد على صفحات ثابتة فقط.

كان يجب أن تستطيع المنصة:

• عرض هوية العلامة التجارية؛
• عرض المشاريع؛
• إدارة الخدمات؛
• تقديم الفريق؛
• استقبال طلبات العملاء؛
• تعديل المحتوى دون تغيير الكود؛
• تقديم تجربة أكثر ذكاءً لاكتشاف احتياجات العميل.

الهوية البصرية

يعتمد التصميم على أسلوب داكن، مستقبلي وبسيط.

تبدأ الصفحة الرئيسية بالرسالة:

Build. Launch. Grow.

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

الصفحة الرئيسية

تعرض الصفحة الرئيسية مساراً واضحاً للزائر:

• تعريف الوكالة؛
• المشاريع المميزة؛
• الخدمات؛
• معلومات عن DabaDigital؛
• الفريق؛
• CTA؛
• نموذج طلب المشروع.

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

Portfolio

تعرض المنصة المشاريع التي أنجزتها DabaDigital.

يتم التحكم في المشاريع من لوحة الإدارة، ويتم نشر المحتوى من Supabase.

وهذا يسمح بإضافة المشاريع وتعديلها دون الحاجة إلى تغيير الكود.

الخدمات

تعرض المنصة عدة مجالات، مثل:

• Websites & Web Apps؛
• E-commerce؛
• AI Integration؛
• Mobile Apps.

الفريق

يوجد قسم مخصص لتقديم الأشخاص خلف DabaDigital.

يمكن أن يحتوي كل Profile على:

• الاسم؛
• الدور؛
• وصف قصير؛
• رابط Portfolio.

طلب المشروع

يمكن للزائر إرسال Brief منظم للمشروع.

يمكن للنموذج جمع معلومات مثل:

• نوع المشروع؛
• الميزانية؛
• الموعد النهائي؛
• التقنيات؛
• الوصف؛
• معلومات التواصل.

المساعد الصوتي

من أهم خصائص المشروع إمكانية وصف المشروع بالصوت.

بدلاً من ملء كل حقل يدوياً، يمكن للمستخدم التحدث عن فكرته.

يقوم النظام باستخراج معلومات مثل:

• نوع المشروع؛
• الميزانية؛
• Deadline؛
• Technologies؛
• Description.

ثم يراجع المستخدم النتيجة قبل الإرسال.

حماية تعديلات المستخدم

إذا قام المستخدم بتعديل أحد الحقول يدوياً، يصبح هذا التعديل هو المصدر الرئيسي للحقل.

لا يمكن للمساعد الصوتي استبداله بشكل تلقائي.

يمكنه فقط اقتراح قيمة جديدة.

وبذلك تبقى السيطرة دائماً بيد المستخدم.

مستوى الثقة

تعتمد القيم المستخرجة من الصوت على Confidence.

إذا كانت المعلومة موثوقة بدرجة كافية يمكن إدخالها.

أما إذا كانت غير مؤكدة فتظهر كاقتراح يمكن قبوله أو رفضه.

تعدد اللغات

تدعم المنصة:

• الفرنسية؛
• الإنجليزية؛
• العربية.

تستخدم النسخة العربية RTL بشكل كامل.

كما تم تصميم تجربة الصوت لتدعم عدة لغات وحالات مزج الفرنسية مع الدارجة المغربية.

لوحة الإدارة

توفر /admin إدارة:

• المشاريع؛
• فئات المشاريع؛
• الخدمات؛
• الشبكات الاجتماعية؛
• بيانات التواصل؛
• رسائل العملاء.

كما يمكن تحرير المحتوى بالفرنسية والإنجليزية والعربية.

المصادقة والنشر

تعتمد لوحة الإدارة على Supabase Authentication.

الوصول محمي بقواعد مخصصة للمسؤولين.

كما يدعم المحتوى حالتي:

• Draft؛
• Published.

صندوق رسائل العملاء

يتم إرسال نموذج التواصل مباشرة إلى Inbox خاص داخل لوحة الإدارة.

وهذا يجعل الموقع جزءاً من سير العمل اليومي للفريق، وليس مجرد واجهة تعريفية.

البنية التقنية

تم بناء Frontend باستخدام Angular 20 وStandalone Components.

تتضمن البنية:

• Angular Signals؛
• Reactive Forms؛
• RxJS؛
• HttpClient؛
• Tailwind CSS؛
• Lazy Loading.

إمكانية الوصول

تم الاهتمام بإمكانية الوصول من خلال:

• التنقل الكامل بلوحة المفاتيح؛
• Focus واضح؛
• حالات أزرار يمكن لقارئ الشاشة فهمها؛
• aria-live؛
• RTL؛
• دعم prefers-reduced-motion؛
• استهداف WCAG 2.2 AA.

العمل عند فشل الذكاء الاصطناعي

المساعد الصوتي إضافة إلى النموذج، وليس شرطاً لاستخدامه.

إذا فشل الميكروفون أو الاتصال أو خدمة الصوت، يبقى النموذج اليدوي متاحاً بالكامل.

لا يجب أن يؤدي فشل AI إلى منع العميل من إرسال طلب مشروع.

الاختبارات

يشمل المشروع:

• Unit Tests؛
• Component Tests؛
• Playwright E2E.

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

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

• Angular 20
• TypeScript
• Angular Signals
• Reactive Forms
• RxJS
• Tailwind CSS
• Supabase
• Supabase Authentication
• Playwright
• Vitest
• OpenAI Realtime
• WebRTC

النتيجة

DabaDigital ليست مجرد واجهة لوكالة رقمية.

المنصة تجمع بين الهوية، وPortfolio، وإدارة المحتوى، وجذب العملاء والذكاء الاصطناعي في منتج واحد.

يمكن للزائر اكتشاف أعمال الوكالة ثم تحويل فكرته إلى طلب منظم، بينما يدير الفريق المحتوى والرسائل من مساحة إدارة واحدة.