كاليتي للملابس الرجالي

كاليتي مصنع في القاهرة يصنع ملابس رجالي يومية — جينز، وتيشرتات، وبنطلونات جبردين، وجاكيتات، وشورتات. كان لديه شعار، وصفحة فيسبوك بحوالي ١٬٩٠٠ متابع هدأت، ولا شيء غير ذلك: لا موقع، ولا صور منتجات، ولا هوية مكتوبة.

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

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

• الرئيسية، وكل المنتجات، وسبع صفحات أقسام، والمنتج، والسلة، وصفحة ٤٠٤ — كلها بالعربية (من اليمين، وهي الافتراضية) وبالإنجليزية
• صفحات منتجات بمنتقي لون ومقاس محكومين بالمخزون الفعلي لكل تركيبة، وتنبيه «باقي قطعتان»، وحالات التخفيض والنفاد، وشريط إضافة للسلة ثابت على الهاتف
• سلة لا تتجاوز المتاح في المخزون، وترسل الطلب كرسالة واتساب جاهزة تسرد كل صنف والإجمالي
• لوحة الإدارة: تسجيل دخول، ولوحة بقائمة ما يوشك على النفاد، وإنشاء المنتجات وتعديلها وحذفها، وشبكة مخزون لكل لون ومقاس، ورفع الصور مع إعادة ترتيبها، والإخفاء والنشر
• الحفظ من لوحة الإدارة يحدّث صفحات المتجر الثابتة — بلا إعادة بناء وبلا انتظار نشر
• نظام هوية مكتوب في ٦١٤ سطرًا: tokens، وسلّم خطوط، وجدول تباين مقيس، وقواعد حركة، وقواعد تصوير، ونبرة صوت

مسارًا

11مسارًا

مكوّنًا

24مكوّنًا

سطر TypeScript

5,100+سطر TypeScript

ملف مُسلَّم واحد، لم يُعَد رسمه

1ملف مُسلَّم واحد، لم يُعَد رسمه

سرد التقنيات المستخدمة لا يقول شيئًا. المفيد في دراسة الحالة هو القرارات التي كان لها بديل حقيقي — لذلك يذكر كل قرار هنا ثمنه، لا ما تم اختياره فحسب.

1. ٠١

   لون العلامة قيس، ولم يؤخذ من المستند

   ‏#F8C51C أُخذ من بكسلات الشعار نفسه وحلّ محل ‏#D9A900 المذكور في المواصفات.

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

   الثمن · وعلى الأبيض يقيس ‏1.6:1، فصارت القاعدة قاطعة — الذهبي لا يكون نصًا ولا خطًا رفيعًا على أرضية بيضاء أبدًا. وصياغتها بهذا الوضوح هي ما يُبقيها صحيحة مع نمو الموقع.

2. ٠٢

   الشعار لا يُعاد رسمه، فله سقف في الحجم

   العلامة تُستخدم كما وصلت تمامًا، بحدٍّ أقصى ٩٦ بكسل ارتفاعًا.

   المصدر الوحيد كان JPEG بعرض ٢٦٦ بكسل وصل على واتساب، والرسم بداخله ارتفاعه ٢٠٨ بكسل. واستخراجه إلى ملف شفاف كان مقبولًا. أما إعادة رسمه فلا — فالشعار المُعاد رسمه شعار آخر. وهذا يضع حدًا صارمًا: فوق مئة بكسل تقريبًا يصير مكبَّرًا على شاشة هاتف حديثة ويفقد حدّته.

   الثمن · طلب العميل شعارًا أكبر فحصل على ٩٦ بكسل. والحد يُرفع يوم يصل ملف متجهي، ولا يحتاج الكود أي تعديل عندها.

3. ٠٣

   المخزون يُتتبَّع لكل لون ومقاس، في صفٍّ واحد

   كل منتج صفٌّ واحد في قاعدة البيانات؛ والألوان والمقاسات والمخزون والصور في أعمدة JSON.

   المصنع يحتفظ بالكحلي مقاس ٣٢ منفصلًا عن البيج مقاس ٣٢، فالمخزون شبكة لا رقم. وإبقاء تلك الشبكة داخل صف المنتج يعني أن لوحة الإدارة تحفظ المنتج كاملًا في كتابة واحدة، وأن المتجر يقرأ المنتج في استعلام واحد.

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

4. ٠٤

   صفحات ثابتة، تُحدَّث من لوحة الإدارة

   المتجر مُولَّد مسبقًا؛ وحفظ منتج يُبطِل صلاحيته.

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

   الثمن · أول زائر بعد التعديل ينتظر إعادة بناء صفحة واحدة. وفي المقابل يحصل كل زائر آخر على HTML ثابت من الحافة، وهي المقايضة الصحيحة على اتصال هاتف مصري.

5. ٠٥

   الطلب يخرج على واتساب، عن قصد

   الزر الأساسي في السلة يفتح واتساب والطلب مكتوب كاملًا.

   الدفع مجدول للمرحلة الأخيرة. ونصف نظام شراء يأخذ البيانات ثم يفقدها أسوأ من لا شيء، فتفعل السلة الشيء المفيد الوحيد الممكن: تؤلّف رسالة فيها كل صنف ولونه ومقاسه وكميته والإجمالي، موجَّهة للمحل.

   الثمن · هو حل مؤقت، والواجهة تقول ذلك — فالإجمالي مكتوب عليه «قبل الشحن»، ولا يُنشأ سجل طلب حتى يُبنى نظام الشراء.

6. ٠٦

   لوحة الإدارة ترفض العمل بلا قاعدة بيانات حقيقية

   على منصة الاستضافة، وبلا قاعدة بيانات متصلة، يُمنع الدخول برسالة واضحة.

   محليًا يعمل المشروع على Postgres داخل العملية نفسها فلا يحتاج أي إعداد. أما على مضيف بلا خوادم دائمة فكان البديل نفسه سيعطي كل نسخة تشغيل نسختها المؤقتة: فيبدو الحفظ ناجحًا ثم يختفي. لذلك تتحقق لوحة الإدارة من هذه الحالة بالذات وترفض أن تُفتح.

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

7. ٠٧

   سبعة أقسام كسرت الترويسة، فتغيّر شكل الترويسة

   على سطح المكتب انتقلت الأقسام إلى صفّها الخاص موسَّطًا تحت الشعار.

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

   الثمن · ترويسة أطول — ١٦٦ بكسل تنكمش إلى ١٢٢ عند التمرير — مقابل تخطيط لن يكسره القسم الثامن.

8. ٠٨

   الصور تُصغَّر مرتين — مرة عندنا، ومرة في متصفح المالك

   الصور المُسلَّمة أُعيد ترميزها للويب، ورفع الصور من لوحة الإدارة يُصغَّر قبل أن يغادر الجهاز.

   وصلت الصور المُسلَّمة بحجم اثنين إلى ثلاثة ميجابايت للصورة؛ وبعد إعادة الترميز نزلت من ١٩٫٤ ميجابايت إلى ١٫٠٧ ميجابايت إجمالًا. والقاعدة نفسها مبنية داخل لوحة الإدارة: صورة الهاتف تُصغَّر إلى ١٬٦٠٠ بكسل ويُعاد ترميزها في المتصفح قبل الرفع، فلا يستطيع المالك أن ينشر صورة بحجم ٨ ميجابايت بالخطأ.

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

9. ٠٩

   لا شيء في الصفحة يدّعي ما لم يُؤكَّد

   الحقائق غير المؤكَّدة تُخزَّن كـ«غير معروف» وتخفيها الواجهة.

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

   الثمن · صفحة أقل امتلاءً مما يعطيه قالب جاهز. والقيمة الثانية المعلنة للعلامة هي الصدق، والوعد بتوصيل مختلق عطل لا ميزة.

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

والتفاصيل هي موضع الخطأ عادةً. فشارة تخفيض «‎-19%‎» كانت تظهر «‎19%-‎» داخل نص من اليمين لليسار حتى عُزلت كنص من اليسار لليمين. وللعربية ست صيغ جمع، فعدّاد المنتجات يقول «منتجين» للاثنين و«٦ منتجات» للستة بدل لصق رقم بكلمة واحدة. والأسعار بأرقام غربية — فالافتراضي في المنصة للعربية المصرية هو الأرقام العربية الهندية، ولا يستخدمها أي متجر مصري للأسعار.

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

قبل بناء أي واجهة، دُقِّقت الهوية مقابل القطعة الوحيدة الموجودة — الشعار. وسؤال مفتوح عن الاسم («Kalite» أم «K@lite») حُسم بتكبير الكلمة: الحرف الثاني حرف «a» هندسي عادي. والذهبي أُخذ من الملف. وأُعطي كل اقتران ألوان نسبة تباين محسوبة لا علامة صح.

والنتيجة مواصفات من ٦١٤ سطرًا يتبعها الكود حرفيًا: ستة ألوان لا غير، وخطان، ونصف قطر زاوية ببكسلين، ولا تدرّجات، ولا ظلال، ولا إيموجي، ومكتبة أيقونات واحدة. والحركة محصورة في ظهور واحد مدته ٣٠٠ مللي ثانية لكل كتلة، وتكبير بمقدار ١٫٠٣ عند المرور، وكلها معطَّلة لمن يطلب تقليل الحركة.

وجدول التباين هو الجزء الذي يستحق وجوده. فالأسود على الأبيض يقيس ‏19.6:1 والرمادي على الحجري ‏4.8:1، وكلاهما ناجح. والذهبي على الأسود، والأسود على الذهبي، يبلغان ‏12.3:1. أما الذهبي على الأبيض فيقيس ‏1.6:1 وهو مكتوب في المواصفات كممنوع — ولهذا يستخدم نص التحذير كهرمانيًا أغمق منفصلًا عند ‏5.1:1 بدل استعارة لون العلامة.

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

وخلفها لا يوجد جدول مستخدمين. فللمحل مشغّل واحد، فهناك كلمة مرور واحدة للمالك وجلسة موقَّعة تنتهي صلاحيتها — محصورة في HTTP ومقيّدة بمسار الإدارة، يُتحقق منها قبل عرض أي صفحة إدارة ويُتحقق منها مرة أخرى داخل كل كتابة وكل رفع، فلا يستطيع خطأ في التوجيه أن يكشف عملية حفظ. والبيانات موجودة في الإنتاج فقط؛ ونسخ المعاينة لا تستطيع تسجيل الدخول إطلاقًا. والأدوار وسجل التدقيق أول ما يُضاف يوم يبدأ شخص ثانٍ في استخدامها.

ضبط النطاق جزء من العمل. كل بند هنا دُرس ثم استُبعد لسبب مذكور.

الدفع وإدارة الطلبات

مجدولة كمرحلة أخيرة من العميل. وطلب الواتساب يغطي السلوك حتى ذلك الحين.

التكامل مع شركة الشحن

لا شحنة بلا طلب؛ فهو يتبع نظام الشراء.

حسابات العملاء

لا شيء يُعرض في الحساب قبل وجود الطلبات.

البحث

كتالوج صغير بتصفية أقسام لا يحتاجه؛ وأُزيلت الأيقونة بدل تركها زرًا ميتًا.

الوضع الداكن

قرار هوية — مظهر فاتح واحد، منصوص عليه في المواصفات.

الدفع بالبطاقة

سوق يدفع عند الاستلام؛ وهو اختياري بمجرد وجود نظام الشراء.

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