التجارة الإلكترونية-المشرف-nextjs
لم يعد الموقع التجريبي يعمل بسبب توقف PlanetScale عن الخطة المجانية.
تاريخ البدء: 26 يوليو 2023.
وصف
تعد لوحة تحكم إدارة التجارة الإلكترونية مع Stripe Integration تطبيق ويب قويًا مصممًا لتبسيط وتعزيز إدارة موقع التجارة الإلكترونية. تم تطويره باستخدام تقنيات متطورة مثل Next JS، وTypeScript، وTailwind CSS، وShadcn UI، وPlanet Scale، وPrisma، وzustand، وclerk auth، وCloudinary، وStripe، وتوفر لوحة المعلومات الشاملة هذه للمسؤولين مجموعة أدوات قوية للإشراف على مختلف جوانب النظام وتحسينها. متجر على الانترنت.
الميزات الرئيسية
- تسمح لوحة تحكم المشرف لمسؤولي موقع الويب بإنشاء معلومات المتجر وتحديثها وحذفها.
- يمكن للمسؤولين إدارة اللوحات الإعلانية أو اللافتات التي تظهر على الصفحة الرئيسية للموقع بكفاءة. يمكنهم تحميل وتحديث وإزالة اللافتات الترويجية لجذب العملاء وتسليط الضوء على العروض أو المبيعات المستمرة.
- باستخدام لوحة تحكم المشرف، تصبح إدارة فئات المنتجات وأحجامها وألوانها أمرًا سهلاً. يمكن للمسؤولين إضافة الفئات والأحجام والألوان أو تحريرها أو حذفها، مما يمكّن موقع الويب من تنظيم المنتجات وعرضها بكفاءة.
- لتمكين الاتصال السلس بين تطبيق الويب الأمامي والواجهة الخلفية، تتضمن لوحة المعلومات مسارات واجهة برمجة التطبيقات (API). ويضمن ذلك جلب معلومات المنتج وعرضها بسلاسة على موقع الويب الذي يتعامل مع العملاء.
- تستخدم لوحة تحكم المشرف مصادقة Clerk للمصادقة الآمنة، مما يضمن أن الموظفين المصرح لهم فقط هم من يمكنهم الوصول إلى المعلومات الحساسة وإدارتها.
- من خلال التكامل بين Planet Scale وPrisma، يستفيد التطبيق من قاعدة بيانات قوية وقابلة للتطوير، وقادرة على التعامل مع مخزونات المنتجات المتزايدة وزيادة حركة المرور على موقع الويب.
- يكمن جوهر أي موقع للتجارة الإلكترونية في قدراته على إدارة المنتجات. تعمل لوحة تحكم المشرف على تمكين المسؤولين من إضافة منتجات جديدة، وتحديث المنتجات الحالية، وأرشفة المنتجات غير المتوفرة في المخزون، ووضع علامة على المنتجات كمنتجات مميزة، وإزالة المنتجات التي لم تعد متوفرة. يمكنهم تعيين تفاصيل المنتج مثل الاسم والفئة والسعر والصور والسمات الأخرى الخاصة بالمنتج.
- تعد إدارة الطلبات الفعالة أمرًا بالغ الأهمية لأي موقع ويب للتجارة الإلكترونية. توفر لوحة المعلومات أدوات شاملة لعرض الطلبات الواردة ومعالجتها وإدارتها.
- قم بدمج Stripe بسلاسة كبوابة للدفع، مما يسمح للعملاء بإجراء دفعات آمنة ومريحة عبر الإنترنت. يمكن للمسؤولين عرض سجل المعاملات وضمان تجربة دفع سلسة للمتسوقين.
اختبار المشروع
لاختبار المشروع، قم بتنزيل الملف المضغوط وافتحه في المحرر الذي تختاره. ثم قم بتشغيل npm install في الجهاز لتثبيت التبعيات.
بعد تثبيت التبعيات المطلوبة، سيتعين عليك إنشاء ملف .env في جذر مجلد المشروع الخاص بك. متغيرات البيئة المطلوبة هي كما يلي.
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
DATABASE_URL=
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
STRIPE_API_KEY=
FRONTEND_STORE_URL=
STRIPE_WEBHOOK_SECRET=
اتبع الخطوات الواردة في الوثائق الرسمية لكل من Clerk وPlanet Scale وCloudinary وStripe للحصول على قيم متغير البيئة. بعد إكمال الخطوات المذكورة أعلاه، قم بتشغيل npm run dev لاختبار المشروع.
إذا كنت لا ترغب في مواجهة كل المشاكل، فيمكنك دائمًا اختبار الموقع التجريبي لهذا المشروع.
