Atos Portal

مهندس برمجيات متدرب — مشروع التخرج · VOID Agency · February 2026 — July 2026

  • Drupal 10
  • PHP 8.2
  • JSON:API
  • Next.js
  • React
  • Tailwind CSS
  • Redis
  • MySQL
  • Docker
  • Nginx

Atos مجموعة خدمات تقنية حاضرة في أكثر من سبعين بلدًا. صار تحديث موقعها العمومي مستحيلًا دون تدخل مطور، فأعادت الوكالة التي التحقت بها بناءه من الصفر. سلّمت ثلاثة من أنظمة المحتوى السبعة — وصححت في الطريق ثلاثة أخطاء في إطار العمل الخاص بالوكالة.

المهمة

Atos مجموعة دولية لخدمات التقنية حاضرة في أكثر من سبعين بلدًا بما يقارب مائة ألف موظف — الشريك المعلوماتي العالمي للألعاب الأولمبية والبارالمبية. بوابتها المؤسسية هي الواجهة العمومية أمام الزبناء والمستثمرين والشركاء والمترشحين. أوكلت Atos إعادة البناء الكاملة لوكالة VOID، وأنجزت جزءًا منها كمشروع تخرج امتد ستة أشهر ضمن فريق مرن من ثمانية أشخاص.

لماذا وجب التخلص من البوابة القديمة

كانت المنصة القديمة كتلة واحدة مبنية على ووردبريس، تعاني من أربعة أعطاب بنيوية:

  • شلل تحريري. كل تغيير في التصميم، وكل قسم جديد، وكل تفصيل إقليمي كان يستلزم مطورًا. فرق تحريرية موزعة على عدة قارات كانت تتعثر أمام مهام بسيطة كنشر بيان صحفي.
  • نموذج محتوى مسطح. البيانات الصحفية والجوائز وإعلانات الفعاليات وتقارير البحث كلها كانت تعيش في بنية واحدة غير مميزة — بلا حقول متمايزة ولا دلالة واضحة، مما جعل الترشيح الدقيق والاستهداف الإقليمي مستحيلين.
  • تحسين محركات بحث دولي معطوب. وسوم hreflang كانت دومًا مشوهة: رموز مناطق خاطئة، غياب x-default، وروابط غير قانونية. كان الزوار الناطقون بالإنجليزية يتلقون صفحات بالعربية. وعبر سبعين سوقًا، تراكم الضرر.
  • سقوف أداء يتعذر بلوغها. توليد PHP لكل صفحة عند الطلب جعل عتبات Core Web Vitals بعيدة المنال.

البنية المفصولة

كان الحل بنية بلا واجهة (headless). تحول Drupal 10 إلى مستودع محتوى صرف، معزول خلف شبكة خاصة ولا يُصل إليه إلا عبر نقاط JSON:API مُرشّحة — ما يزيل سطح الهجوم العمومي كليًا. يتولى Next.js عرض الموقع العمومي، فيولّد الصفحات مسبقًا وبشكل ثابت (SSG) ويجدّدها في الخلفية عند كل تغيير في المحتوى (ISR)، فيما يمتص Redis ضغط القراءة. تعمل المنظومة كاملة عبر حاويات Docker Compose محليًا، و Easypanel في بيئة الاختبار، و AWS في الإنتاج.

وتقوم هذه المنظومة على Vactory، إطار العمل المؤسسي الخاص بوكالة VOID والمبني على مبدأ خط إنتاج البرمجيات، بما يتيح تقاسم الوحدات بين بوابات المجموعة الثلاث — Atos Groupe (المنشورة بالفعل)، و Atos (هذا المشروع)، و Eviden (المقبلة).

ما توليته

تضم البوابة سبعة أنظمة محتوى تحريري موزعة على عائلتين. ثلاثة منها كانت من إنجازي الكامل — Case Studies و Research Reports و Events & Webinars — من نمذجة كيانات Drupal ومحوّلات JSON:API وصولًا إلى مكونات React. ثم دققت وصححت الأنظمة الأربعة التي أنجزها بقية الفريق قبل التسليم النهائي.

وسلّم سبرينت ثانٍ نظام Featured: سبع أدوات تتيح للمسؤولين اختيار المحتوى الأولوي يدويًا في أي صفحة قوائم، يُعرض كبطاقة رئيسية لعائلة Insights أو كعارضة متحركة لعائلة Newsroom.

محرك Insights

ثلاثة من أنظمة المحتوى السبعة في البوابة، من إنجازي الكامل: Case Studies (مرتبطة تشابكيًا بالتقارير والكتب البيضاء)، وResearch Reports (تحميل ملفات PDF محمية عبر Adobe Marketo)، وEvents & Webinars (متحدثون ديناميكيون مبنيون على واجهة Paragraphs في Drupal، مع زر دعوة للتسجيل لا يظهر إلا ما دام الحدث لم يقع بعد).

نظام Featured

سبع أدوات موزعة على عائلتين تحريريتين، تعتمد جميعها على طبقة عرض مشتركة واحدة — بطاقة رئيسية لعائلة Insights، وعارضة تتقدم تلقائيًا كل سبع ثوانٍ مع مؤشرات تقدم وإيقاف عند المرور بالمؤشر وسحب باللمس لعائلة Newsroom. أداة ثامنة لن تحتاج سوى ملف إعداد.

المنطقة واللغة

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

تدقيق أنظمة الفريق

دققت الأنظمة الأربعة التي بناها زملائي وأصلحت صنفين من الأعطاب: غياب معايير الترشيح الإقليمي من طلبات JSON:API (ظهور محتوى في أسواق خاطئة)، وثغرات معيار WCAG 2.1 AA في المكونات التفاعلية — أدوار ARIA، معالم دلالية، تسميات شرائح مترجمة، وإيقاف الحركة عند المرور بالمؤشر أو اللمس.

مساهمات في إطار العمل الأساسي

ظهرت ثلاث محدوديات في Vactory نفسه أثناء البناء. وفي كل مرة كان الخيار إصلاح إطار العمل بدل الالتفاف حوله محليًا — فدُمجت الإصلاحات الثلاثة في نسخة التثبيت الخاصة بالوكالة، لتفيد اليوم كل مشاريع VOID، الماضية والمقبلة.

  1. 01

    إعادة بناء NodeQueueElement

    المشكلة
    كانت أداة اختيار المقالات في إطار العمل مجرد حقل نصي واحد تُكتب فيه عناوين المقالات مفصولة بفواصل. كان ذلك يصمد في مشاريع سابقة بعناوين قصيرة. عناوين Atos تمتد بين 150 و200 حرف، وتحتاج عارضة Newsroom إلى ثلاثة منها بترتيب محكم — فصار الحقل غير قابل للاستعمال، وعطّل تسليم وحدة Featured Newsroom بأكملها.
    ما قمت به
    أعدت بناء المكون بالكامل: حقل بحث بالإكمال التلقائي لكل خانة، إضافة وحذف عبر AJAX بلا إعادة تحميل الصفحة، عداد حي، وحد أقصى يُقرأ بشكل تصريحي من ملف إعداد الأداة نفسه بدل أن يكون مكتوبًا يدويًا في الشيفرة. يحترم الإكمال التلقائي المنطقة النشطة، بحيث لا يستطيع المحرر اختيار محتوى من سوق آخر عن طريق الخطأ.
    لماذا كان ذلك مهمًا
    صار ترتيب العارضة مضمونًا الآن من البداية إلى النهاية — يستمر ترتيب السحب والإفلات بفضل فرز مستقر عند الحفظ، وخطوة إعادة ترتيب في جانب Next.js تستعيده بعد الجلب، لأن JSON:API لا يضمن أي ترتيب للإرجاع. وكل أداة اختيار مقالات مستقبلية في الوكالة ترث كل هذا مجانًا.
  2. 02

    خلل في دمج المصفوفات بلغة PHP

    المشكلة
    كانت إعدادات الأدوات لا تُحفظ. يختار المحرر خيارًا في قائمة منسدلة أو خانة اختيار أو زر راديو، يحفظه، يعيد فتح النموذج — ليجد القيمة الافتراضية من ملف الإعداد قد عادت. صار أي تخصيص دائم لأداة ما مستحيلاً.
    ما قمت به
    كان السبب هو return $element_defaults + $element;. عامل دمج المصفوفات في PHP يبقي على القيمة من الجهة اليسرى عند تعارض المفاتيح، فكانت #default_value المكتوبة يدويًا في YAML تتغلب دومًا على القيمة المحمّلة من قاعدة البيانات. يزيل الإصلاح ذلك المفتاح من المصفوفة اليسرى — لكن فقط حين توجد فعلاً قيمة محفوظة، بحيث تحصل الأدوات الجديدة حقًا على قيمها الافتراضية.
    لماذا كان ذلك مهمًا
    انحدار صامت في الاستمرارية طال كل حقل غير نصي في منشئ الصفحات، حُلّ في أسطر قليلة وشُورك مع كل الفرق على تلك النسخة من إطار العمل.
  3. 03

    توطين التواريخ من جانب الخادم

    المشكلة
    كانت التواريخ تُنسّق وتُترجم في واجهة Next.js الأمامية. في مشاريع سابقة بثلاث لغات كان ذلك محتملاً، وأخطاء مثل تاريخ فرنسي يظهر كـ 05/17/2026 بدل 17 mai 2026 كانت تمر دون ملاحظة. مع تسع لغات صار ذلك مشكلة صيانة لا تكف عن التضخم.
    ما قمت به
    بنيت AtosaiDateEnhancer، إضافة JSON:API Field Enhancer تتصل بخط تسلسل البيانات في Drupal. تعترض الطابع الزمني الخام وتستبدله بسلسلة نصية منسقة ومترجمة مسبقًا عبر خدمات التاريخ والترجمة الخاصة بـ Drupal نفسه، مأخوذة من لغة الطلب. يسرد نموذج إداري كل صيغة تاريخ معلنة في الواجهة الخلفية، بحيث يصبح ربط صيغة بحقل نقرة واحدة بلا أي كتابة يدوية.
    لماذا كان ذلك مهمًا
    غادرت منطق التواريخ الواجهة الأمامية كليًا، حاملة معها مكتبات معالجة التواريخ خارج حزمة جافاسكريبت، وصارت التواريخ متعددة اللغات صحيحة ببنيتها عبر اللغات التسع جميعًا.

ما تعلمته

كانت هذه أول مرة أبني فيها على مقياس مؤسسي حقيقي، والدرس المستفاد أن الهندسة المعمارية هي في جوهرها مسألة من سيعيش معها. عشرون منطقة عبر تسع لغات تعني أن كل قرار في نموذج المحتوى يتضاعف قبل أن يراه أي محرر — وثلاثمائة شخص يحررون في آنٍ واحد قيد لا يمكن إضافته لاحقًا. العمل عبر مالك منتج بدل التعامل المباشر مع الزبون علّمني أن أدافع عن الخيارات التقنية بلغة الأعمال.

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