اكتشاف المتجر حسب الموقع
يمكن للعميل البحث عن عنوان، أو تحديد نقطة مباشرة على Google Maps، أو استخدام موقعه الحالي. يتم التحقق من الإحداثيات عبر الـBackend لربط المستخدم بأقرب محل مؤهل ومنع الطلب من خارج نطاقات التوصيل المحددة.
تجارة إلكترونية متعددة المتاجر · السعودية
زهور شمس
منصة متعددة المتاجر للزهور في السعودية تربط العميل بأقرب محل متاح، وتوفر تجربة شراء متكاملة تشمل الباقات الجاهزة وتصميم باقات مخصصة مع معاينة مولدة بالذكاء الاصطناعي.
- الدور
- مطور واجهات أمامية · ربط API · اختبار وضمان الجودة
- نوع المشروع
- منصة تجارة إلكترونية متعددة المتاجر
- السوق
- المملكة العربية السعودية
- الحالة
- متاح حاليًا
- السنة
- 2026
التقنيات
- AI Image Generation
- Google Maps
- Next.js
- Online Payments
- Responsive Design
تجربة المنصة
نظرة على واجهات المتجر المتجاوبة، وتجربة التسوق المعتمدة على الموقع، وتصميم الباقات المخصصة، والمعاينة بالذكاء الاصطناعي، والدفع، والحساب، وأبرز رحلات المستخدم داخل المنصة.
زهور شمس
زهور شمس
زهور شمس
زهور شمس
زهور شمس
زهور شمس
زهور شمس
زهور شمس
زهور شمس
زهور شمس
نظرة على واجهات المتجر المتجاوبة، وتجربة التسوق المعتمدة على الموقع، وتصميم الباقات المخصصة، والمعاينة بالذكاء الاصطناعي، والدفع، والحساب، وأبرز رحلات المستخدم داخل المنصة.
تم تصميم زهور شمس لتكون أكثر من مجرد متجر إلكتروني تقليدي للزهور، إذ تجمع عدة محلات ضمن منصة موحدة مع الحفاظ على نطاقات التوصيل وتوفر المنتجات بناءً على موقع العميل. تبدأ تجربة المستخدم بتحديد موقعه من خلال البحث، أو اختيار نقطة على الخريطة، أو استخدام موقعه الحالي. يتم إرسال الإحداثيات إلى الـBackend لتحديد أقرب محل مؤهل، وفي حال كان الموقع خارج نطاقات الخدمة المحددة تظهر للمستخدم رسالة واضحة قبل متابعة التسوق. بعد ذلك يستطيع المستخدم تصفح الباقات الجاهزة واستخدام الفلاتر الديناميكية وحفظ المنتجات في المفضلة وإضافة الخيارات الإضافية وتصميم باقة خاصة وإرسال طلبات تنسيق المناسبات وإتمام الدفع وتتبع حالة الطلب. كما تعتمد واجهة المتجر بدرجة كبيرة على محتوى ديناميكي تديره الإدارة، بما يشمل المحتوى الترويجي والصور والأقسام والفلاتر والعروض ومحتوى الهيدر والفوتر، مما يسمح بتحديث تجربة المنصة دون الحاجة إلى تعديل الواجهة برمجيًا في كل مرة.
دوري ومسؤولياتي
كنت مسؤولًا عن تنفيذ الواجهة الأمامية الكاملة الموجهة للعملاء وربطها مع واجهات الـAPI. عملت بالتعاون مع مطور الـBackend، وحولت تصاميم Figma المقدمة إلى واجهات إنتاجية متجاوبة، إلى جانب تنفيذ تحسينات إضافية على التصميم وتجربة المستخدم بناءً على طلبات العميل أثناء التطوير. كما كنت مسؤولًا عن توافق الموقع مع مختلف أحجام الشاشات وعن اختبار الجودة الشامل، سواء لتجربة العميل أو للوحات الإدارة وأصحاب المحلات المبنية باستخدام Laravel Blade.
- تطوير الواجهة الأمامية الكاملة الموجهة للعملاء انطلاقًا من تصاميم Figma وتنفيذ التحسينات التي طلبها العميل أثناء مراحل التطوير.
- ربط الواجهة الأمامية مع REST APIs والتنسيق المستمر مع مطور الـBackend أثناء تطوير الطرفين بالتوازي.
- تنفيذ تجربة التسوق المعتمدة على الموقع باستخدام Google Maps والبحث عن المواقع والدبوس والموقع الحالي والتحقق من نطاق التوصيل عبر الـBackend.
- تطوير رحلات متقدمة تشمل تصميم الباقات المخصصة، والمعاينة بالذكاء الاصطناعي، والسلة والدفع، والمحفظة، ونقاط الولاء، والإشعارات، والمفضلة، وتتبع الطلبات.
- ضمان توافق الموقع بالكامل مع شاشات الموبايل والتابلت وسطح المكتب.
- تنفيذ اختبارات جودة شاملة للموقع ولوحات الإدارة وأصحاب المحلات المبنية باستخدام Laravel Blade.
أبرز تجارب وميزات المنصة
تجمع المنصة بين اكتشاف المنتجات حسب الموقع، وتخصيص الباقات، والتجارة الإلكترونية، والدفع، والمكافآت، وخدمات ما بعد الشراء ضمن رحلة مستخدم مترابطة.
تصميم الباقات بمساعدة الذكاء الاصطناعي
رحلة متعددة الخطوات تتيح اختيار أنواع الزهور وألوانها والحجم والعدد والتغليف والمناسبة وبطاقة تهنئة اختيارية، ثم توليد صورة بالذكاء الاصطناعي لمعاينة الباقة قبل الانتقال إلى بيانات التوصيل والدفع.
تجربة شراء ودفع متكاملة
يمكن للمستخدم تصفح الباقات واختيار الإضافات وإدارة السلة واستخدام أكواد الخصم وإدخال بيانات التوصيل وإتمام الدفع عبر Moyasar أو رصيد المحفظة.
المحفظة ونقاط الولاء
واجهات مخصصة تعرض الرصيد وسجل الحركات بالتفصيل، مع إمكانية تحويل نقاط الولاء إلى رصيد في المحفظة وفق معدل تحويل تحدده الإدارة.
تتبع الطلبات والإشعارات
يمكن للعميل متابعة الطلب عبر مراحله المختلفة واستقبال إشعارات حول حالة الطلب والمحفظة ونقاط الولاء والعروض والإعلانات العامة.
واجهة متجر ديناميكية
تتم إدارة أجزاء واسعة من واجهة المتجر من خلال نظام الإدارة، بما يشمل محتوى الهيرو والصور والأقسام الترويجية والفلاتر والعروض ومحتوى الهيدر والفوتر.
البحث والفلاتر الديناميكية
يمكن تصفية المنتجات حسب معايير مثل النوع والسعر والمستلم والمناسبة، مع إمكانية إدارة أنواع الفلاتر وقيمها من خلال نظام الإدارة.
طلبات تنسيق المناسبات
توفر المنصة نموذجًا مخصصًا لإرسال متطلبات خدمات تنسيق الزهور والحفلات والمناسبات ليتم التواصل مع العميل ومتابعة الطلب.
التقنيات والتكاملات
تعتمد الواجهة الأمامية على Next.js وTypeScript مع إدارة مركزية للحالة، وربط REST APIs، وGoogle Maps، والدفع الإلكتروني، والواجهات المتجاوبة، وتوليد معاينات الباقات باستخدام الذكاء الاصطناعي.
الواجهة الأمامية
- Next.js
- TypeScript
- Tailwind CSS
- Zustand
- Axios
- AOS Animation
التكاملات
- REST APIs
- Google Maps
- AI Image Generation
- Moyasar Payments
أنظمة المنتج
- Responsive Design
اختبار وضمان الجودة
نفذت اختبارات شاملة لرحلات المستخدم والواجهات المتجاوبة وربط الـAPIs والمصادقة والتحقق من الموقع وتصميم الباقات والسلة والدفع والخصومات والمحفظة ونقاط الولاء والإشعارات وتتبع الطلبات. كما شملت الاختبارات لوحات الإدارة وأصحاب المحلات المبنية باستخدام Laravel Blade، مع توثيق المشكلات والتنسيق مع مطور الـBackend لمعالجتها ثم إعادة اختبار التدفقات المتأثرة.
- اختبار رحلات المستخدم الأساسية من تسجيل الدخول وتحديد الموقع وحتى الدفع وتتبع الطلب.
- اختبار توافق الواجهات مع شاشات الموبايل والتابلت وسطح المكتب.
- اختبار حالات التحميل والنجاح والأخطاء والحالات الطرفية لعمليات ربط الـAPI.
- اختبار نطاقات التوصيل وتصميم الباقات وتوليد الصور والسلة والخصومات والدفع والمحفظة ونقاط الولاء والإشعارات.
- اختبار لوحات الإدارة وأصحاب المحلات المبنية باستخدام Laravel Blade وتوثيق المشكلات وإعادة الاختبار بعد الإصلاح.
نتائج المشروع
- تقديم واجهة متجر إنتاجية ومتجاوبة تدعم رحلة شراء متكاملة ضمن منصة زهور متعددة المتاجر.
- دمج التسوق والدفع والمحفظة ونقاط الولاء والخصومات والإشعارات وتتبع الطلب ضمن تجربة مستخدم مترابطة.
- دعم واجهة متجر ديناميكية يمكن للإدارة التحكم في محتواها وعروضها وفلاترها وصورها وأقسام رئيسية منها.
01 / 01