سيرني ستور

كان لدى العميل موقع قائم خلفه مشروع Supabase ميت، وكتالوج فارغ، واسم يريد تغييره. أما الموجود فعلًا فكان ملف PDF من ٨٠ صفحة: قائمة أسعار المحل نفسها، صفوف بضاعة بصورها وأسعارها المكتوبة يدويًا بالجنيه المصري.

المطلوب كان متجرًا يُقرأ كمستورد حقيقي لا كقالب جاهز — ويمكن عرضه على الناس بلا قاعدة بيانات ولا تسجيل دخول للوحة تحكم ولا مكالمة دعم حين ينام خادم تجريبي.

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

• الرئيسية، والمتجر، والمنتج، والسلة، وإتمام الشراء، والدفع، وتأكيد الطلب، ولوحة الإدارة، وصفحة ٤٠٤
• ‏٢١٣ منتجًا في ١١ قسمًا، مع بحث وتصفية بالعلامة وسقف سعري وأربعة ترتيبات
• سلة بمؤشر تقدُّم للشحن المجاني، وحدود كمية مربوطة بالمخزون الفعلي
• إتمام شراء بتحقق من صيغة الموبايل المصري، ولكل المحافظات الـ٢٧
• أربعة مسارات دفع: فودافون كاش، وإنستاباي، وتحويل بنكي، والدفع عند الاستلام
• لوحة الإدارة: مراجعة الطلبات مع معاينة الإيصال، وتصفية بالحالة، وإجمالي مبيعات محدَّث
• ‏٢٢١ صفحة مُولّدة وقت البناء، وصفر متغيرات بيئة لتشغيل أي منها
• مسار اختبار Playwright من ١٠ خطوات يغطي السلة والتحقق والدفع والتأكيد ومراجعة الإدارة — ينجح على النسخة المنشورة بلا أخطاء في الكونسول

منتجًا

213منتجًا

صفحة مُولّدة مسبقًا

221صفحة مُولّدة مسبقًا

صورة منتج، ولا واحدة مُرخّصة

287صورة منتج، ولا واحدة مُرخّصة

متغيّر بيئة لتشغيله

0متغيّر بيئة لتشغيله

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

1. ٠١

   بلا خادم خلفي إطلاقًا

   الكتالوج وحدة TypeScript؛ والطلبات تعيش في المتصفح.

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

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

2. ٠٢

   صور المنتجات مُولّدة، لا مُرخّصة

   ‏١١١ صورة استوديو مرسومة بـ CSS ثلاثي الأبعاد ومُلتقَطة بـ Playwright.

   مكتبات الصور الجاهزة لا تملك صورة للكيسة المحددة التي يبيعها هذا المحل. والبديل صور غير مطابقة — كيسة بيضاء بأربع مراوح ARGB تمثّلها كيسة سوداء لشخص آخر. وبدلًا من ذلك يحمل كل منتج مواصفة رسم — لون الجسم، وعدد المراوح، والزجاج، والشبك، والانحناء، والعرض الفائق — ويرسمه سكريبت كصندوق ثلاثي الأبعاد حقيقي على خلفية مُضاءة ويصوّره بمقاس ١٢٠٠×٩٠٠.

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

3. ٠٣

   ملف العميل صار نصف الكتالوج

   ‏١٧٦ منتجًا استُخرجت من قائمة أسعار من ٨٠ صفحة، بصورها.

   كان ملف PDF هو بيانات المخزون الحقيقية الوحيدة الموجودة. وخط معالجة من ثلاث مراحل يقرؤه، ويطابق كل صورة مضمَّنة بصفّها حسب موضعها الرأسي في الصفحة، ويستعيد النص العربي — الذي خزّنه الملف بترتيب بصري معكوس — ويستنتج القسم، ويُخرج مدخلات كتالوج مُنمَّطة.

   الثمن · الأسماء آتية من مصدر إملاؤه غير متسق، فبعض الـ١٧٦ يُقرأ بشكل ركيك ويحتاج تحريرًا يدويًا. وخط المعالجة محفوظ في المستودع، فتشغيله على قائمة أسعار أحدث أمر واحد لا إعادة كتابة.

4. ٠٤

   صور المحل نُقلت إلى خلفية الكتالوج

   ‏١٥٤ من أصل ١٧٦ صورة أُزيل بياض خلفيتها بالتعبئة الفيضية.

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

   الثمن · والتعبئة ترفض نفسها حين تلتهم أكثر من ٨٢٪ من الإطار — فالمنتج الأبيض على أبيض كان سيفقد حوافه. وتلك الـ٢٢ صورة تحتفظ بخلفيتها الأصلية خلف لوح مستدير مُخفَّف، فتُقرأ كصورة صادقة «مأخوذة في المحل» لا كقصّ فاشل.

5. ٠٥

   أرضية رملية فاتحة، لا المظهر الداكن المعتاد

   حجر جيري ‏#FDFBF7، وأزرق فاينس مصري ‏#1D4E89، وذهبي على الخطوط الرفيعة فقط.

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

   الثمن · أقل «لُعبية» من بناء نيوني للوهلة الأولى. وفي المقابل تصير المنتجات أغمق شيء في الصفحة، ويظل النص العربي الطويل مقروءًا.

6. ٠٦

   عربي أولًا، لكن الأسعار بأرقام غربية

   الواجهة عربية؛ و«2,950 ج.م» ليست «٢٩٥٠ ج.م».

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

   الثمن · نظاما ترقيم في صفحة واحدة يبدوان غير متسقين في لقطة شاشة. ويبدوان طبيعيين تمامًا لمن يشتري فعلًا.

7. ٠٧

   الدفع عند الاستلام مسار أصيل، لا بديل احتياطي

   أربع طرق دفع، وأكثرها اختيارًا لا تحتاج إيصالًا أصلًا.

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

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

8. ٠٨

   الكتالوج مُنمَّط، والنمط مفروض

   مصدران، وواجهة منتج واحدة، ومصفوفة واحدة.

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

   الثمن · ملف الكتالوج المُولّد عدة آلاف من الأسطر محفوظة في المستودع. وفي المقابل يمسك البناء أي منتج مشوّه وقت الترجمة لا وقت العرض، وكل صفحة منتج ثابتة.

مئتان وسبع وثمانون صورة منتج تُشحن مع هذا الموقع، ولا واحدة منها مُرخّصة.

الصور الـ١١١ للعتاد المستورد مرسومة داخل المتصفح. فالكيسة مبنية كصندوق CSS ثلاثي الأبعاد حقيقي — وجه أمامي وجانبي وعلوي لكلٍّ تدرّجه — مع طبقة زجاج مقوّى، ولوحة أم وكرت شاشة خلفها، ومراوح حلقاتها قوس قزح مخروطي حين يكون المنتج ARGB وداكنة حين لا يكون. والشاشات تستخدم قوسًا بـ clip-path فتنحني الشاشة المنحنية فعلًا: الطرفان أقرب للعين والمركز يبتعد. والشاشات العريضة مرسومة بنسبة ٢١:٩ لا مقصوصة إليها. ويحمّل Playwright كل مواصفة، وينتظر الرسم، ويصوّر إطارًا بمقاس ١٢٠٠×٩٠٠.

في المحاولة الأولى كانت كل الكيسات طائرة. كانت الكاميرا تحت الجسم، فكان الرسم يُظهر قاعها ويجلس ظل التماس في الهواء. وعكس دوران المحور السيني وتثبيت الظل على القاعدة المُسقَطة أصلح الاثنين. أما الماوسات فكانت أسوأ — مستطيلات مستديرة تُقرأ كبيض — فأُعيد بناؤها من ظلّ خارجي بـ clip-path بزرَّين أيمن وأيسر منفصلين، وعجلة تمرير غائرة، ومسند إبهام جانبي.

أما الصور الـ١٧٦ الآتية من المحل فسلكت الرحلة المعاكسة: من ملف العميل، عبر قصّ الحواف وإزالة الخلفية وإعادة التركيب، إلى الخلفية المُضاءة نفسها التي عليها كل شيء آخر. نصفا الكتالوج صُوّرا في عقدين مختلفين وعلى يد أشخاص مختلفين، وعلى الصفحة يبدوان جلسة تصوير واحدة.

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

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

لا شيء في هذا الموقع يحتاج هوية. والطلبات تُستدعى برقمها المرجعي.

بوابة دفع حقيقية

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

تعديل المنتجات من لوحة الإدارة

الكتالوج وحدة مُنمَّطة؛ وتعديله من المتصفح يعني شحن قاعدة بيانات.

نصوص التقييمات

أرقام التقييم قيم مزروعة كعيّنة. ونشر نصوص تقييم مختلقة على متجر يستقبل طلبات إعلان مضلل.

لغة ثانية

العملاء مصريون. وزر لغة إنجليزية سيكون نطاقًا إضافيًا لا وصولًا إضافيًا.

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