الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

موقع التجارة الإلكترونية أمازونا

أمازون

البرنامج التعليمي React & Node - التجارة الإلكترونية الكاملة في 9 ساعات [2021]

مرحبًا بك في البرنامج التعليمي React and Node الخاص بي لإنشاء موقع ويب للتجارة الإلكترونية كامل الوظائف تمامًا مثل أمازون. افتح محرر التعليمات البرمجية الخاص بك وتابعني خلال الساعات القادمة لإنشاء موقع ويب للتجارة الإلكترونية باستخدام مكدس MERN (MongoDB وExpressJS وReact وNode.JS).

موقع تجريبي

  • هيروكو: https://react-amazona.herokuapp.com

  • مرآة هيروكو: https://react-amazona-mirror.herokuapp.com

سوف تتعلم

  • HTML5 وCSS3: العناصر الدلالية، شبكة CSS، Flexbox

  • الرد: المكونات، الدعائم، الأحداث، الخطافات، جهاز التوجيه، أكسيوس

  • الإعادة: المتجر، المخفضات، الإجراءات

  • Node & Express: Web API، Body Parser، File Upload، JWT

  • MongoDB: النمس، التجميع

  • التطوير: ESLint، بابل، جيت، جيثب،

  • النشر: هيروكو

  • شاهد البرنامج التعليمي لـ React & Node

تشغيل محليا

1. استنساخ الريبو 

$ git clone [email protected]:basir/amazona.git
$ cd amazona

2. إعداد MongoDB

  • MongoDB المحلي

    • قم بتثبيته من هنا

    • قم بإنشاء ملف .env في المجلد الجذر

    • قم بتعيين MONGODB_URL=mongodb://localhost/amazona

  • أطلس كلاود MongoDB

    • قم بإنشاء قاعدة بيانات على https://cloud.mongodb.com

    • قم بإنشاء ملف .env في المجلد الجذر

    • قم بتعيين MONGODB_URL=mongodb+srv://your-db-connection

3. تشغيل الواجهة الخلفية 

$ npm install
$ npm start

4. تشغيل الواجهة الأمامية 

# open new terminal
$ cd frontend
$ npm install
$ npm start

5. مستخدمو البذور ومنتجاتها

  • قم بتشغيل هذا على الكروم: http://localhost:5000/api/users/seed

  • يقوم بإرجاع البريد الإلكتروني للمشرف وكلمة المرور

  • قم بتشغيل هذا على الكروم: http://localhost:5000/api/products/seed

  • يقوم بإنشاء 6 عينات من المنتجات

6. تسجيل دخول المشرف

  • قم بتشغيل http://localhost:3000/signin

  • أدخل البريد الإلكتروني وكلمة المرور للمشرف وانقر فوق تسجيل الدخول

يدعم

  • سؤال/ج: https://webacademy.pro/amazona

  • اتصل بالمدرب: بصير

دروس

  1. مقدمة لهذه الدورة

    1. ما سوف تبنيه

    2. ما سوف تتعلم

    3. من هم الجماهير

  2. أدوات التثبيت

    1. محرر الكود

    2. متصفح الويب

    3. ملحق كود VS

  3. قالب الموقع

    1. إنشاء مجلد أمازون

    2. إنشاء مجلد القالب

    3. إنشاء ملف Index.html

    4. إضافة كود HTML الافتراضي

    5. رابط إلى style.css

    6. إنشاء رأس، الرئيسي والتذييل

    7. عناصر النمط

  4. عرض المنتجات

    1. قسم إنشاء المنتجات

    2. إضافة سمات المنتج

    3. إضافة الرابط والصورة والاسم والسعر

  5. إنشاء تطبيق رد فعل

    1. npx الواجهة الأمامية لتطبيق رد الفعل

    2. بداية npm

    3. إزالة الملفات غير المستخدمة

    4. انسخ محتوى Index.html إلى App.js

    5. انسخ محتوى style.css إلى ملف Index.css

    6. استبدل الفئة بـ className

  6. شارك الكود على جيثب

    1. تهيئة مستودع git

    2. ارتكاب التغييرات

    3. إنشاء حساب جيثب

    4. إنشاء الريبو على جيثب

    5. ربط الريبو المحلي بجيثب الريبو

    6. دفع التغييرات إلى جيثب

  7. إنشاء التصنيف ومكون المنتج

    1. إنشاء مكونات/Rating.js

    2. إنشاء تصنيف div

    3. أسلوب div. rating، والامتداد، والامتداد الأخير

    4. إنشاء مكون المنتج

    5. استخدم مكون التقييم

  8. بناء شاشة المنتج

    1. قم بتثبيت رد فعل جهاز التوجيه دوم

    2. استخدم BrowserRouter وRoute للشاشة الرئيسية

    3. إنشاء HomeScreen.js

    4. أضف رمز قائمة المنتجات هناك

    5. إنشاء ProductScreen.js

    6. أضف مسارًا جديدًا من تفاصيل المنتج إلى App.js

    7. قم بإنشاء 3 أعمدة لصورة المنتج والمعلومات والإجراءات

  9. إنشاء خادم Node.JS

    1. قم بتشغيل npm init في المجلد الجذر

    2. تحديث package.json نوع المجموعة: الوحدة النمطية

    3. أضف .js إلى الواردات

    4. تثبيت npm السريع

    5. إنشاء server.js

    6. أضف أمر البدء كواجهة خلفية للعقدة/server.js

    7. تتطلب صريحة

    8. إنشاء مسار ل/ العودة الخلفية جاهزة.

    9. نقل Products.js من الواجهة الأمامية إلى الواجهة الخلفية

    10. إنشاء مسار لـ /api/products

    11. إرجاع المنتجات

    12. تشغيل بداية npm

  10. تحميل المنتجات من الخلفية

    1. تحرير HomeScreen.js

    2. تحديد المنتجات والتحميل والخطأ.

    3. إنشاء تأثير الاستخدام

    4. قم بتعريف fetchData غير المتزامن واستدعائه

    5. تثبيت أكسيوس

    6. الحصول على البيانات من /api/products

    7. أظهرهم في القائمة

    8. إنشاء مكون التحميل

    9. إنشاء مكون صندوق الرسائل

    10. استخدامها في الشاشة الرئيسية

  11. قم بتثبيت ESlint لفحص التعليمات البرمجية

    1. تثبيت ملحق VSCode eslint

    2. تثبيت npm -D eslint

    3. تشغيل ./node_modules/.bin/eslint --init

    4. قم بإنشاء ./frontend/.env

    5. أضف SKIP_PREFLIGHT_CHECK=صحيح

  12. أضف Redux إلى الشاشة الرئيسية

    1. تثبيت npm ريدوكس رد فعل ريدوكس

    2. إنشاء store.js

    3. initState= {المنتجات:[]}

    4. المخفض = (الحالة، الإجراء) => تبديل LOAD_PRODUCTS: {المنتجات: action.payload}

    5. تصدير createStore الافتراضي (المخفض، initState)

    6. تحرير HomeScreen.js

    7. اسم المحل = useSelector(state=>state.products)

    8. إرسال ثابت = useDispatch()

    9. useEffect(()=>dispatch({type: LOAD_PRODUCTS, payload: data})

    10. إضافة متجر إلى Index.js

  13. إضافة Redux إلى شاشة المنتج

    1. إنشاء تفاصيل المنتج والثوابت والإجراءات والمخفضات

    2. إضافة المخفض إلى store.js

    3. استخدم الإجراء في ProductScreen.js

    4. أضف /api/product/:id إلى الواجهة الخلفية لواجهة برمجة التطبيقات

  14. التعامل مع زر إضافة إلى عربة التسوق

    1. تعامل مع الإضافة إلى عربة التسوق في ProductScreen.js

    2. قم بإنشاء CartScreen.js

  15. تنفيذ إجراء الإضافة إلى سلة التسوق

    1. إنشاء ثوابت وإجراءات ومخفضات addToCart

    2. إضافة المخفض إلى store.js

    3. استخدم الإجراء في CartScreen.js

    4. تقديم cartItems.length

  16. بناء شاشة العربة

    1. قم بإنشاء عمودين لعناصر سلة التسوق وإجراءات سلة التسوق

    2. طول العربة === 0 ؟ العربة فارغة

    3. إظهار صورة العنصر والاسم والكمية والسعر

    4. انتقل إلى زر الخروج

    5. تنفيذ إجراء الإزالة من سلة التسوق

  17. تنفيذ إجراء الإزالة من سلة التسوق

    1. إنشاء ثوابت وإجراءات ومخفضات لـ RemoveFromCart

    2. إضافة المخفض إلى store.js

    3. استخدم الإجراء في CartScreen.js

  18. إنشاء عينة من المستخدمين في MongoDB

    1. npm تثبيت النمس

    2. الاتصال بمونجودب

    3. إنشاء config.js

    4. تثبيت npm dotenv

    5. تصدير MONGODB_URL

    6. إنشاء نماذج/userModel.js

    7. إنشاء مخطط المستخدم ونموذج المستخدم

    8. إنشاء مسار المستخدم

    9. بيانات عينة البذور

  19. إنشاء نماذج من المنتجات في MongoDB

    1. إنشاء نماذج/productModel.js

    2. إنشاء مخطط المنتج ونموذج المنتج

    3. إنشاء مسار المنتج

    4. بيانات عينة البذور

  20. إنشاء الواجهة الخلفية لتسجيل الدخول

    1. إنشاء / تسجيل الدخول API

    2. التحقق من البريد الإلكتروني وكلمة المرور

    3. توليد رمز مميز

    4. تثبيت رمز الويب json

    5. قم بتثبيت dotenv

    6. رمز العودة والبيانات

    7. اختباره باستخدام ساعي البريد

  21. تصميم شاشة تسجيل الدخول

    1. إنشاء شاشة تسجيل الدخول

    2. تقديم حقول البريد الإلكتروني وكلمة المرور

    3. إنشاء ثوابت وإجراءات ومخفضات تسجيل الدخول

    4. تحديث الرأس بناءً على تسجيل دخول المستخدم

  22. تنفيذ إجراء تسجيل الدخول

    1. إنشاء ثوابت وإجراءات ومخفضات تسجيل الدخول

    2. إضافة المخفض إلى store.js

    3. استخدم الإجراء في SigninScreen.js

  23. إنشاء شاشة التسجيل

    1. إنشاء واجهة برمجة التطبيقات لـ /api/users/register

    2. إدراج مستخدم جديد إلى قاعدة البيانات

    3. إرجاع معلومات المستخدم والرمز المميز

    4. إنشاء شاشة التسجيل

    5. أضف الحقول

    6. حقول النمط

    7. إضافة شاشة إلى App.js

    8. إنشاء إجراء التسجيل والمخفض

    9. التحقق من التحقق من الصحة وإنشاء المستخدم

  24. إنشاء شاشة الشحن

    1. إنشاء مكون CheckoutSteps.js

    2. إنشاء حقول الشحن

    3. تنفيذ ثابت الشحن والإجراءات والمخفضات

  25. إنشاء شاشة الدفع

    1. إنشاء حقول الدفع

    2. تنفيذ ثابت الشحن والإجراءات والمخفضات

  26. تصميم شاشة ترتيب المكان

    1. حقول ملخص أمر التصميم

    2. عمل أمر التصميم

  27. إنشاء واجهة برمجة تطبيقات طلب المكان

    1. واجهة برمجة تطبيقات الطلب

    2. إنشاء نموذج الطلب

    3. إنشاء أمرRouter

    4. إنشاء طريق آخر للطلب

  28. تنفيذ إجراء PlaceOrder

    1. التعامل مع زر وضع الطلب انقر

    2. إنشاء ثوابت ترتيب المكان والفعل والمخفض

  29. إنشاء شاشة الطلب

    1. بناء واجهة برمجة تطبيقات الطلب لـ /api/orders/:id

    2. إنشاء OrderScreen.js

    3. إرسال تفاصيل الإجراء قيد الاستخدامEffect

    4. تحميل البيانات باستخدام useSelector

    5. إظهار البيانات مثل شاشة طلب المكان

    6. إنشاء تفاصيل الطلب ثابتة، وإجراءات، ومخفضة

  30. إضافة زر باي بال

    1. الحصول على معرف العميل من باي بال

    2. قم بتعيينه في ملف .env

    3. إنشاء نموذج مسار /api/paypal/clientId

    4. قم بإنشاء getPaypalClientID في api.js

    5. إضافة البرنامج النصي الخروج باي بال في OrderScreen.js

    6. إظهار زر باي بال

  31. تنفيذ أمر الدفع

    1. تحديث الطلب بعد الدفع

    2. إنشاء payOrder في api.js

    3. قم بإنشاء مسار لـ /:id/pay في orderRouter.js

    4. إعادة العرض بعد أمر الدفع

  32. عرض سجل الطلبات

    1. إنشاء واجهة برمجة تطبيقات طلبات العملاء

    2. إنشاء واجهة برمجة تطبيقات لـ getMyOrders

    3. إظهار الطلبات في شاشة الملف الشخصي

    4. أوامر النمط

  33. عرض ملف تعريف المستخدم

    1. إنشاء تفاصيل المستخدم API

    2. إظهار معلومات المستخدم

  34. تحديث ملف تعريف المستخدم

    1. إنشاء واجهة برمجة تطبيقات تحديث المستخدم

    2. تحديث معلومات المستخدم

  35. إنشاء عرض المشرف

    1. إنشاء قائمة المسؤول

    2. إنشاء برنامج وسيط للإدارة في الواجهة الخلفية

    3. إنشاء طريق المسؤول في الواجهة الأمامية

  36. قائمة المنتجات

    1. شاشة إنشاء قائمة المنتجات

    2. أضف المخفض إلى المتجر

    3. عرض المنتجات على الشاشة

  37. إنشاء المنتج

    1. بناء إنشاء واجهة برمجة تطبيقات المنتج

    2. بناء زر إنشاء المنتج

    3. تحديد المنتج، إنشاء ثابت، عمل ومخفض

    4. استخدام الإجراء في شاشة قائمة المنتجات

  38. إنشاء شاشة تحرير المنتج

    1. إنشاء شاشة التحرير

    2. تحديد الدولة

    3. إنشاء الحقول

    4. تحميل تفاصيل المنتج

    5. إضافة إلى الطرق

  39. تحديث المنتج

    1. تحديد واجهة برمجة التطبيقات للتحديث

    2. تحديد ثابت تحديث المنتج، والعمل، والمخفض

    3. استخدم الإجراء في شاشة تحرير المنتج

  40. تحميل صورة المنتج

    1. تثبيت npm مولتر

    2. تحديد جهاز التوجيه التحميل

    3. إنشاء مجلد التحميلات

    4. التعامل مع الواجهة الأمامية

  41. حذف المنتج

    1. إنشاء حذف API في الخلفية

    2. إنشاء حذف الثوابت والعمل والمخفض

    3. استخدامه في شاشة قائمة المنتجات

  42. قائمة الطلبات

    1. إنشاء قائمة الطلبات API

    2. إنشاء شاشة قائمة الطلبات

    3. أضف المخفض إلى المتجر

    4. عرض المنتجات على الشاشة

  43. حذف الطلب 2. إنشاء إجراء حذف الطلب والمخفض 3. إضافة إجراء حذف الطلب إلى قائمة الطلبات

  44. تسليم الطلب

    1. إنشاء إجراءات ثابتة ومخفضات لتسليم الطلب

    2. إضافة طلب تسليم الإجراء إلى شاشة تفاصيل الطلب

  45. النشر إلى Heroku

    1. إنشاء مستودع جيت

    2. إنشاء حساب هيروكو

    3. تثبيت Heroku CLI

    4. تسجيل الدخول هيروكو

    5. تطبيقات Heroku: إنشاء أمازون

    6. تحرير package.json لبناء البرنامج النصي

    7. إنشاء ملف تعريف

    8. إنشاء قاعدة بيانات أطلس mongodb

    9. قم بتعيين اتصال قاعدة البيانات في متغيرات Heroku Env

    10. الالتزام والدفع

  46. قائمة المستخدمين

    1. بناء واجهة برمجة التطبيقات لمستخدمي القائمة

    2. إنشاء شاشة قائمة المستخدمين

    3. إنشاء تفاصيل الطلب ثابتة، وإجراءات، ومخفضة

  47. حذف المستخدمين

    1. بناء واجهة برمجة التطبيقات لحذف المستخدمين

    2. إنشاء تفاصيل الطلب ثابتة، وإجراءات، ومخفضة

    3. استخدم الإجراء في UserListScreen

  48. تحرير المستخدم

    1. بناء واجهة برمجة التطبيقات لمستخدمي التحديث

    2. إنشاء واجهة مستخدم لشاشة التحرير

  49. تنفيذ عرض البائع

    1. إضافة قائمة البائع

    2. إنشاء طريق البائع

    3. قائمة المنتجات للبائع

    4. قائمة أوامر للبائع

    5. إضافة البائع إلى قائمة المنتجات وشاشة التفاصيل

  50. إنشاء صفحة البائع

    1. إنشاء صفحة البائع

    2. تحديث مكون المنتج وشاشة المنتج

    3. تحديث مسارات المنتج

  51. أضف كاروسيل البائع الأعلى

    1. تثبيت دائري التفاعل

    2. تنفيذ الإجراءات والمخفضات لكبار البائعين

    3. استخدم دائري التفاعل مع البيانات في الشاشة الرئيسية

  52. فرض طلب العناصر من بائع واحد

    1. قم بتحديث إجراء addToCart للشراء من بائع واحد عند الطلب

  53. إنشاء مربع البحث وشاشة البحث

    1. إنشاء شريط بحث في Header.js

    2. إضافة نمط

    3. التعامل مع نموذج الإرسال

    4. تحرير عنوان URL للتحليل للحصول على سلسلة الاستعلام

    5. تحديث قائمة المنتجات API للبحث بالاسم

  54. أضف مرشح البحث المتقدم 1. قم بالتصفية حسب الفئة 2. قم بالتصفية حسب النطاق السعري 3. قم بالتصفية حسب متوسط ​​التقييم

  55. إكمال البحث المتقدم 1. التصفية حسب السعر 2. التصفية حسب التصنيف 3. الترتيب حسب السعر والتصنيف ...

  56. تقييم ومراجعة المنتجات 1. تقييم المنتجات 2. إنشاء الإجراءات والمخفضات

  57. اختر عنوانًا على خريطة Google 1. أنشئ بيانات اعتماد خريطة Google 2. قم بتحديث ملف .env باستخدام مفتاح Google Api 3. أنشئ واجهة برمجة التطبيقات لإرسال google api إلى الواجهة الأمامية 4. أنشئ شاشة خريطة 5. جلب google api 6. getUserLocation 7. قم بتثبيت @react- google-maps/api 8. استخدمه في شاشة الشحن 9. قم بتطبيق الخريطة على شاشة الخروج

  58. BugFix: التشغيل محليًا بدون مشكلة

    1. إضافة معلومات البائع إلى data.js

    2. بيانات المنتج البذور مع معلومات المسؤول كبائع

    3. إصلاح isSeller وisAdmin عند تحديث المستخدم

    4. إزالة المصادقة من تفاصيل المستخدم

  59. تنفيذ ترقيم الصفحات

    1. إضافة ترقيم الصفحات إلى جهاز توجيه المنتج في الواجهة الخلفية

    2. تطبيق رقم الصفحة على الإجراءات والمخفضات في الواجهة الأمامية

    3. إظهار أرقام الصفحات في شاشة البحث

  60. إيصال الطلب عبر البريد الإلكتروني بواسطة mailgun 1. إنشاء حساب mailgun 2. إضافة المجال الخاص بك والتحقق منه إلى mailgun 3. تثبيت mailgun-js 4. تعيين مفتاح API في ملف env 5. تغيير أمر الدفع في OrderRouter 6. إرسال البريد الإلكتروني

  61. إنشاء شاشة لوحة المعلومات

    1. إنشاء بيانات المخطط في الخلفية

    2. بناء شاشة الرسم البياني

  62. تنفيذ الدردشة المباشرة مع العملاء

    1. استخدم مقبس io لإنشاء الواجهة الخلفية

    2. إنشاء مكون مربع الدردشة

    3. إنشاء شاشة الدعم

  63. الترقية إلى React 17 وRouter 6 وMongoose 6

    1. الخلفية

    2. إلغاء تثبيت كافة الحزم وتثبيتها

    3. إزالة الخيارات في اتصال النمس

    4. التفاف mailgun في محاولة الصيد في orderRouter

    5. الواجهة الأمامية

    6. إلغاء تثبيت كافة الحزم وتثبيتها

    7. إزالة في مربع البحث

    8. التفاف كل شيء في

    9. استبدل بـ <Route element={}>

    10. استبدل بـ <Route element={ }/>

    11. استبدال وأيضا

    12. قم بتحديث PrivateRoute وAdminRoute وSellerRoute

    13. استبدل Push () بالتنقل () من useNavigate

    14. استبدل Props.match.params.id بـ const params = useParams();

    15. استبدل Props.location.search بـ const { search } = useLocation(); وURLSearchParams

    16. استبدل Props.match.path بـ const {pathname} = useLocation();

    17. ضع معلومات المستخدم في useEffect في ChatBox وSupportScreen

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل