c shopping
Minimum MVP Publishing
أهلا بالجميع! مرحبًا بكم في C-Shopping ، وهي رحلة إلى عالم التجارة الإلكترونية التي تكشف عن العجائب التكنولوجية. أنا "Ji Xiaopeng" ، المؤلف المفتوح المصدر لـ C-Shopping ، واليوم ، سأقدم لك منصة للتجارة الإلكترونية مفتوحة المصدر تعتمد على أحدث التقنيات. دعونا نستكشف معا!
روابط العرض التجريبي المباشر:
Project Gateway: https://github.com/huanghanzhilian/c-shopping.
رد فعل تطبيق تطبيق الهاتف المحمول الأصلي:
Project Gateway: https://github.com/huanghanzhilian/c-shopping-rn.
إذا وجدت هذا مفيدًا ، فالرجاء إعطائي نجمة. سيكون تشجيعًا كبيرًا.
خلفية:
نية:
معالجة القضايا المذكورة في الخلفية.
موضوعي:
قم بإنشاء نظام بيئي كامل المصمم جيدًا مناسبًا للويب.
أولاً ، دعنا نتعمق في التكنولوجيا وراء التسوق C. لقد تبنت سلسلة من التقنيات المتطورة ، بما في ذلك Next.js ، و CSS Tailwind ، و UI ، و Redux-Toolkit-RTK Query ، و JWT ، و Docker ، من بين آخرين. هذا يضمن أن هذا المشروع ليس فعالًا فحسب ، بل أيضًا قابلاً للتطوير للغاية. نحن ملتزمون بمعالجة بعض نقاط الألم في منصات التجارة الإلكترونية التقليدية: عدم وجود جماليات ، والتكيف غير الكافي مع الأجهزة المختلفة ، وواجهة رتيبة ، من بين أمور أخرى. من خلال تبني أحدث التقنيات ومبادئ التصميم ، يخلق C-Shopping تجربة تطوير فنية مستجيبة تمامًا للمستخدمين.
يعطي تساقط C إلى تجربة المستخدم. الواجهة الخاصة بنا ليست جميلة فحسب ، بل تستجيب أيضًا ، مما يسمح للمستخدمين بالاستمتاع بالتسوق بسهولة على أي جهاز. وظائف المركز الشخصي وإدارة الطلبات تجعل تجربة التسوق الخاصة بك أكثر تخصيصًا ومريحة.
واحدة من أبرز الأحداث في C-Skopping هي اعتماد سلسلة من التقنيات المتقدمة ، بما في ذلك Next.js ، CSS Tailwind ، واجهة المستخدم ، Redux-Toolkit-RTK ، وما إلى ذلك ، وتزويد المستخدمين بأداء وخبرة نهائية. نحن لا نركز فقط على جماليات ولكن أيضًا نسعى جاهدين للتميز في التكنولوجيا.
next.js تجربة البرق بسرعة
يستخدم C-Shopping Next.js ، مما يعني أنه لا يقتصر الأمر على سرعة تحميل صفحة الويب بسرعة بشكل لا يصدق ، ولكنها تدعم أيضًا تقديم جانب الخادم ، مما يوفر مستوى غير مسبوق من النعومة.
؟ تصميم الأنيق CSS Tailwind
باستخدام CSS Tailwind ، فإن C-Skopping يحقن إحساسًا بالأناقة. كل واجهة رائعة ، مما يجعل التسوق وليمة بصرية.
؟ حرية واجهة المستخدم غير المطلوبة والمرونة
يختار C-Shopping نمط واجهة المستخدم بدون رأس ، مما يمنح المستخدمين مزيدًا من الحرية أثناء عملية التسوق. لم يعد يقتصر على أطر واجهة المستخدم التقليدية ، فإنه يفتح المزيد من الأبواب للتخصيص.
؟ JWT Security دون قلق
الأمن أمر بالغ الأهمية! يتم استخدام JWT لمصادقة المستخدم ، مما يوفر أقوى ضمان لسلوك التسوق الخاص بك ، مما يتيح لك التسوق بثقة.
؟ Docker النشر المثالي
يحتضن C-shopping Docker ، مما يجعل نشر المشروع بسيطًا بشكل لا يصدق. يتيح الحاويات للمشروع بأكمله تشغيله بسلاسة في بيئات مختلفة.
Redux Toolkit و RTK Query Management Management Art
يستخدم C-Shopping Redux Toolkit و RTK ، مما يجعل إدارة الدولة أكثر استرخاءً وممتعًا. يمكنك تتبع تدفق البيانات بشكل أفضل في التطبيق ، مما يضمن استقرار تجربة التسوق.
الآن ، دعونا نلقي نظرة على بعض الميزات الأساسية للتسوق C. من شاشات التنقل وعروض المنتجات الواضحة إلى ميزات عربة البحث والتسوق المريحة ، تم تصميم كل التفاصيل بعناية لتزويد المستخدمين بتجربة تسوق ممتعة.
جانب المستخدم
| الوحدة النمطية | أجهزة سطح المكتب | الأجهزة المحمولة |
|---|---|---|
| بيت | ||
| فئة ثانوية | ||
| فئة المستوى الثالث | ||
| تفاصيل المنتج | ||
| تسجيل الدخول | ||
| يسجل | ||
| يبحث | ||
| عربة التسوق | ||
| الدفع | ||
| ملف تعريف المستخدم | ||
| أوامري | ||
| مراجعاتي | ||
| إدارة العنوان | ||
| الزيارات الأخيرة |
جانب المسؤول
| الوحدة النمطية | أجهزة سطح المكتب | الأجهزة المحمولة |
|---|---|---|
| تسجيل الدخول | ||
| مركز المشرف | ||
| إدارة المستخدم | ||
| إدارة الفئات | ||
| شجرة إدارة الفئات | ||
| إدارة المواصفات | ||
| إدارة المنتج | ||
| إدارة الطلبات | ||
| مراجعة إدارة | ||
| إدارة شريط التمرير | ||
| إدارة اللافتات |
هيكل مشروع التسوق C:
شرح الهيكل الرئيسي:
؟ التطبيق : الرمز الرئيسي للتطبيق
؟ المكونات : مكونات رد الفعل القابلة لإعادة الاستخدام
؟ المساعدون : وظائف وأدوات المساعد
؟ السنانير : خطافات رد فعل مخصصة
؟ النماذج : تعريفات نموذج البيانات
؟ الجمهور : الموارد الثابتة ، مثل الصور ، الخطوط ، إلخ.
؟ المتجر : التكوين المتعلق بإدارة حالة Redux
؟ الأنماط : ملفات النمط
؟ utils : المرافق العامة
...
تم تصميم هذا الهيكل لجعل المشروع منظمًا وسهل الصيانة وقابل للتطوير. يتم تقسيم كل قسم على أساس
الوظائف والمسؤوليات ، مما يسهل على أعضاء الفريق فهم والتعاون.
بيئة التنمية
استنساخ أو قم بتنزيل المستودع عن طريق تشغيل الأمر التالي في المحطة:
git clone https://github.com/huanghanzhilian/c-shopping.git
تثبيت تبعيات المشروع باستخدام NPM أو الغزل:
npm install
أو
yarn
يرجى إنشاء ملف .env جديد من ملف .env.example في دليل جذر المشروع لتحديد متغيرات البيئة المطلوبة. هذه الخطوة مهمة (لتحميل الصورة إلى OSS):
NEXT_PUBLIC_ACCESS_TOKEN_SECRET=<your token secret>
NEXT_PUBLIC_ALI_REGION=<your ali endpoint>
NEXT_PUBLIC_ALI_BUCKET_NAME=<your ali bucket name>
NEXT_PUBLIC_ALI_ACCESS_KEY=<your ali access key>
NEXT_PUBLIC_ALI_SECRET_KEY=<your ali secret key>
NEXT_PUBLIC_ALI_ACS_RAM_NAME=<your ali acs:ram name>
NEXT_PUBLIC_ALI_FILES_PATH=<your ali files pathname>
تثبيت mongoDB على جهازك المحلي.
تشغيل المشروع:
npm run dev
تسجيل حساب:
http://localhost:3000/register
بعد إنشاء حساب ، ابحث عن حسابك في قاعدة البيانات وقم بتعديل حقل root إلى True وحقل role إلى المسؤول. هذا يمنحك الوصول إلى جميع ميزات لوحة معلومات المشرف:
mongo
use choiceshop
db.users.update({name:"admin"},{$set:{role:"admin"}})
db.users.update({name:"admin"},{$set:{root:true}})
مدخل المسؤول: http: // localhost: 3000/admin
في MongoDB ، قم بإنشاء فئة الجذر:
mongo
use choiceshop
db.categories.insert({
"name" : "Featured Items",
"slug" : "choiceshop",
"image" : "http://huanghanzhilian-test.oss-cn-beijing.aliyuncs.com/shop/upload/image//icons/zHle_bmdM_dhu2K938MMM.webp",
"colors" : {
"start" : "#EF394E",
"end" : "#EF3F55"
},
"level" : 0
})
نشر Docker
تم تكوين دليل جذر المشروع بالفعل مع Docker Compose. بعد تثبيت Docker ، ما عليك سوى تشغيل النشر:
docker compose up -d --build
أنا مستكشف تقنية ، ومتعلم متحمس ، ومحل المشكلات.
我是一个技术的探索者 ， 一个渴望学习的人 ， 一个解决问题的人。
اتبع حساب WeChat الرسمي لمزيد من المعلومات. لا تتردد في تقديم أي ملاحظات أو اقتراحات عن طريق فتح مشكلة أو ترك رسالة على الحساب الرسمي. اهلا وسهلا بكم أيضا لإضافتي على WeChat لمزيد من التواصل.
| حسابي الرسمي في WeChat | بلدي weChat |
|---|---|
معهد ماساتشوستس للتكنولوجيا
حقوق الطبع والنشر (C) 2024 Jipeng Huang
C-Shopping هو مشروع مفتوح المصدر ، ونحن نرحب بمزيد من المطورين للانضمام إلى مجتمعنا. يمكنك العثور على رمز مصدر المشروع على مستودع GitHub الخاص بنا ، أو اقتراح تحسينات ، أو المساهمة في التطوير.
إذا كنت مهتمًا بالمشروع ، فلا تتردد في الانضمام إلى مجتمعنا والمساهمة في نمو المشروع.
