كيف يُبنى موقع إلكتروني لمؤسسة: ملاحظات من موقعنا

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

لذلك لم نبنِ الموقع كأنه كتيّب تعريفي، بل كمنتج صغير. أكتب أدناه القرارات التي اتخذناها، ولماذا، وأين أخطأنا.

التوليد الثابت

كُتب الموقع باستخدام Next.js. في الإصدار الأول كانت الصفحات تُولَّد من جديد على الخادم مع كل طلب. والسبب سطر بريء: التخطيط الجذري كان يقرأ ترويسة الطلب لمعرفة اللغة. وNext يعدّ كل صفحة يرى فيها ذلك صفحة ديناميكية.

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

كان الحل استخراج اللغة من العنوان لا من الطلب. لكل لغة تخطيطها الجذري الخاص، وتُعرف اللغة من المجلد الذي تقع فيه الصفحة. واليوم تُولَّد الصفحات كلها، وعددها نحو ثلاثمئة، مرة واحدة أثناء البناء.

سبع لغات والاتساق

الموقع منشور بالتركية والإنجليزية والفرنسية والبرتغالية والألمانية والإسبانية والعربية. الترجمة نفسها هي الجزء السهل. الصعب أن يتغير النص في سبعة أماكن معًا حين يتغير.

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

أغلقنا هذا الباب بدالة مساعدة. كل موضع يختار نصًا ملزم بتقديم اللغات السبع كلها معًا. إذا نقصت لغة لا تُبنى الشيفرة. ويُكتشف الخطأ قبل النشر.

وكان اللقب الأكاديمي مشكلة مشابهة. في إحدى الترجمات تحوّل لقب «Doç. Dr.» إلى أستاذ. اللقب الآن لا يُترجم في أي لغة، بل يؤخذ من السجل التركي، واختبار يتحقق من ذلك مع كل push.

الاختبارات

لم نبنِ إطار اختبار ثقيلًا. كتبنا تسعة اختبارات بوحدة الاختبار المدمجة في Node. كل واحد منها يلتقط خطأً وقعنا فيه فعلًا من قبل.

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

مع كل push إلى GitHub يعمل فحص الأنواع، والـ lint، وهذه الاختبارات، وبناء الإنتاج. إذا فشل أي منها لا يُنشر الإصدار.

الأمان

سياسة أمان المحتوى صارمة. لا يمكن تحميل نص برمجي أو خط أو صورة من نطاق خارجي. الخطوط تأتي من خادمنا، ولذلك لا يرسل متصفح الزائر أي طلب إلى طرف ثالث حين يفتح الصفحة. ولا يُحمَّل Google Analytics إلا إذا وافق الزائر.

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

النشر

الشيفرة موجودة على GitHub. على الخادم في Hetzner يعمل Coolify، ومع كل push إلى الفرع الرئيسي يعيد بناء الموقع كصورة Docker وينشره. يستغرق النشر نحو دقيقتين ونصف.

وأمامه يقف Cloudflare. بعد الانتقال إلى التوليد الثابت صار HTML نفسه قابلًا للتخزين المؤقت، وتبقى الصفحات هناك حتى ساعة.

أين أخطأنا

كانت ذاكرة التخزين المؤقت مصدرًا للسرعة، وكانت أيضًا مصدرًا لوهم. نشرنا إصدارًا جديدًا، وقال Coolify إن العملية نجحت، لكن الصفحة الرئيسية كانت تظهر بنسختها القديمة. السبب بسيط. لم يكن Cloudflare يطلب النسخة الجديدة قبل أن تنتهي مدة النسخة التي لديه.

الحل الصحيح هو مسح ذاكرة التخزين المؤقت تلقائيًا في نهاية كل نشر. لا تُعدّ عملية النشر منتهية حين تنتهي على الخادم، بل حين تنتهي حيث يراها الزائر.

وهناك أيضًا إمكانية الوصول. لم يجد الفحص الآلي أخطاء في الصفحات. لكن الوسوم الصغيرة في الصفحة الرئيسية كانت فوق صورة شبه شفافة، وأداة الفحص لا تستطيع قياس التباين فوق الصورة. قسنا البكسلات خلف الوسوم بشكل منفصل، فكانت النسبة نحو 3:1. حين خففنا الصورة قليلًا وجعلنا الوسوم أغمق بدرجة، تجاوزت النسبة 5:1. حتى حين تقول الأداة «لا أخطاء» يجب أن تنظروا بأنفسكم.

لماذا نروي هذا

من السهل أن نقول لعميل «نسلّم برمجيات تعمل». وحين نكتب بوضوح ما فعلناه في هذا الموقع، يصبح من السهل أيضًا أن تروا على ماذا تستند هذه الجملة.