Ethio Coffee Store
منصة تجارة إلكترونية سعودية تعمل فعليًا، تقبل مدى وApple Pay، وتشحن عبر Torod بنقرة واحدة، وتحدّث حالة الطلب تلقائيًا من إشعارات الدفع والتوصيل.
السياق
مركز تجاري مسجّل في جدة يبيع القهوة الإثيوبية والبهارات والمنتجات الجلدية، إلى جانب منتجات من تركيا ودول أخرى، لعملاء في أنحاء السعودية. احتاج متجرًا يقبل وسائل الدفع التي يستخدمها العميل السعودي فعلًا، ويحجز الشحنات مع شركات محلية، ويُبقي العميل على اطلاع، دون أن ينسخ الموظفون أرقام الطلبات بين اللوحات.
ما بنيته
- واجهة متجر عربية أولًا مع خيار الإنجليزية، مبنية بـ Next.js، بمسارات منتجات وسلة ودفع صحيحة الاتجاه من اليمين لليسار.
- واجهة برمجية بـ NestJS تدير دورة حياة الطلب عبر آلة حالات واضحة (قيد الانتظار ← مدفوع ← قيد التجهيز ← مشحون ← مُسلَّم)، على PostgreSQL (Neon) مع Drizzle ORM.
- مدفوعات Moyasar بمدى وVisa/Mastercard وApple Pay. يُتحقق من توقيع كل إشعار دفع، ويُمنع تكراره، ويُؤكَّد بجلب الدفعة من Moyasar قبل تغيير الطلب.
- لوحة إدارة بـ Next.js يشحن منها الموظفون الطلب عبر Torod: البحث عن مدينة التوصيل، ومقارنة أسعار شركات الشحن، وشراء البوليصة في خطوة واحدة.
- إشعارات Torod تحدّد الطلب «مُسلَّمًا» تلقائيًا، ورسائل بريد للعميل (عبر Resend) عند الدفع وعند الشحن.
- بيئة إنتاج على Vercel (المتجر ولوحة الإدارة) وRender (الواجهة البرمجية)، تُنشر تلقائيًا مع كل تحديث.
البنية التقنية
- المستخدمون
- برمجتي
- خدمات
- واجهات خارجية
- البيانات
مرّر المؤشر أو انتقل إلى أي عنصر لترى ما يتصل به.
مشكلات صعبة حللتها
دورة حياة رمز الوصول وإعادة المحاولة
يصدر Torod رموز وصول تنتهي صلاحيتها. يخزّن العميل البرمجي الرمز ويجدّده قبل انتهائه بخمس دقائق، ويتشارك طلب رمز واحد بين الطلبات المتزامنة، ويعيد المصادقة مرة واحدة إذا ألغى Torod الرمز مبكرًا.
عدم تكرار معالجة الإشعارات وآلة حالات الطلب
يُتحقق من إشعارات الدفع أولًا، ويُمنع تكرارها بمعرّف الحدث لدى البوابة، ثم تُؤكَّد مع Moyasar. أما تحديثات Torod فتعيد جلب الشحنة بدل الوثوق بمحتوى الإشعار، فلا يُشحن طلب مرتين ولا يرجع إلى حالة سابقة.
توثيق نطاق Apple Pay
لا يظهر Apple Pay على الويب إلا على نطاق تاجر موثّق. يقدّم المتجر ملف توثيق النطاق الخاص بـ Apple، فيظهر زر Apple Pay لعملاء Safari وiPhone عند الدفع.
تجربة شراء عربية من اليمين لليسار
العربية هي اللغة الافتراضية. تختلط الأسعار وأرقام الجوال والعناوين وأرقام الطلبات بين العربية واللاتينية، لذلك تستخدم الواجهة خصائص CSS المنطقية في كل مكان، وتحافظ على اتجاه الأرقام والرموز من اليسار لليمين داخل التخطيط العربي.
التقنيات
- Next.js
- NestJS
- TypeScript
- PostgreSQL
- Neon
- Drizzle ORM
- Moyasar
- Apple Pay
- Mada
- Torod
- Resend
- Vercel
- Render
النتيجة
المتجر يعمل ويستقبل مدفوعات حقيقية من عملاء في السعودية. تتأكد المدفوعات تلقائيًا، وشحن الطلب نقرة واحدة في لوحة الإدارة، وتصل تحديثات التوصيل وحدها، فيتفرغ الفريق للعملاء بدل نسخ أرقام التتبع.
تحتاج شيئًا مشابهًا؟
حدّثني عن نشاطك والأنظمة التي تستخدمها حاليًا، وسأخبرك بصراحة بما يتطلبه الأمر.
احجز مكالمة