الانتقال إلى المحتوى الرئيسي
كل المشاريع
AI E-commerce

Giant Store

متجر إلكتروني مدعوم بالذكاء الاصطناعي، فيه مساعد تسوق بـGemini يستند إلى كتالوج المتجر نفسه عبر RAG محلي، ولا يقترح إلا منتجات حقيقية، بالعربية أو الإنجليزية.

جرّبه مباشرةالكودشاهد التشغيل
Giant Store
  • 0

    منتجات مختلقة: كل توصية يُعاد التحقق منها بالمعرّف

  • $977

    تجهيز مكتب بناه المساعد لميزانية 1,000 دولار

  • 4

    خطوات للدفع مع كوبونات وعناوين محفوظة

  • 45

    اختبارًا آليًا

من داخل المنتج

شاهده وهو يعمل

شاشات حقيقية وتسجيل لتشغيل فعلي، مأخوذة من المنتج نفسه.

Giant Store
رحلة شراء كاملة: الصفحة الرئيسية المتحركة، البحث بـCmd+K، الإضافة للسلة، طلب تجهيز مكتب بـ1,000 دولار من المساعد الذكي مع بطاقات منتجات حقيقية، كوبون SAVE20، الدفع بأربع خطوات، وتأكيد الطلب.
Giant Store
عرض بالحجم الكامل

شاشة ترحيب ثنائية اللغة تعرّف بالمنصة ووحداتها الرئيسية.

01 / 14

دوري

المهندس الوحيد على المشروع: المتجر، مساعد التسوق ومسار الاسترجاع الخاص به، الدفع، ولوحة المدير.

المشكلة

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

ما الذي بنيته

متجر متكامل مبني بـNext.js 16 وReact 19 وTailwind CSS 4 لا يحتاج قاعدة بيانات ولا إعداد واجهة خلفية. كل سؤال للمساعد يمر بالاسترجاع: يُقسم الكتالوج إلى مقاطع منتجات، وتُضمّن محليًا بتضمينات محلية سريعة قائمة على التجزئة (hashing)، ولا يُمرر إلى Gemini إلا المنتجات الأكثر صلة، مع تعليمات نظام صارمة ومرقمة الإصدار تمنع اختلاق المنتجات، وتطابق لغة المتسوق، وتعيد JSON منظمًا.

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

المعمارية

Next.js App Router مع Route Handlers وProxy. السلة والأمنيات والمقارنة في مخازن Zustand محفوظة، والمصادقة والطلبات في React Context، والكتالوج والحسابات والطلبات محفوظة في المتصفح فيعمل المتجر بأمر واحد. نقطة المحادثة محمية بالتحقق من نفس المصدر وحد لحجم الطلب وإدخال JSON فقط وتحقق Zod وحدود للطلبات. والمنتجات التي ينشئها المدير تظهر فورًا في المتجر والبحث الفوري وشرائط التوصيات وفهرس المساعد.

التحديات

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

القرارات الهندسية

استرجاع محلي بتضمينات محلية سريعة قائمة على التجزئة (hashing) بدل واجهة تضمين خارجية، فلا تكلفة ولا إعداد إضافي. تحقق من كل مخرجات النموذج على الخادم بدل الثقة بالتعليمات وحدها. وحركة مبنية بـFramer Motion تحترم إعداد تقليل الحركة.

النتائج والأثر

في تشغيلات حقيقية على نسخة الإنتاج، خطط المساعد لعدة تصوير بـ1,800 دولار حول كاميرا بـ1,199 دولار، واقترح ساعة ذكية بـGPS بسعر 199 دولار بعربية سلسة، وبنى تجهيز مكتب بـ977 دولار (شاشة 4K ومكتب وفأرة) لميزانية 1,000 دولار، وكلها كبطاقات منتجات حقيقية. وطلب من ثلاثة منتجات بـ1,707 دولار مع كوبون SAVE20 خصم 341.40 دولار وفعّل الشحن المجاني وحُفظ بإجمالي 1,474.85 دولار مع الضريبة، ومنتج أنشأه المدير ظهر فورًا بصفحة خاصة به. ويضم مسار اختبارات Vitest خمسة وأربعين اختبارًا في 13 ملفًا.

أبرز النقاط

  • مساعد تسوق ذكي ثنائي اللغة مع RAG محلي وبطاقات منتجات
  • تنظيف إجابات النموذج على الخادم ومستشار محلي بديل
  • فلاتر للكتالوج وترتيب وعرض شبكي أو قائمة ونظرة سريعة
  • بحث فوري بـCmd+K في المنتجات والفئات والاقتراحات
  • لوحة مقارنة مع استنتاج أعلى تقييم مقابل كل دولار
  • سلة بكوبونات وشريط تقدم للشحن المجاني، ودفع بأربع خطوات
  • حسابات بسجل الطلبات والأمنيات والمراجعات، ولوحة مدير حسب الصلاحيات مع المقاييس وإدارة المنتجات
  • واجهة متحركة ومتجاوبة بالكامل مع شريط تنقل سفلي للجوال