الصفحة الرئيسية>المتعلقة بالبرمجة>كود الذكاء الاصطناعي
تنزيل

Build NextJS Ecrommerce Website مثل Amazon

  • Tech: NextJS 13 ، Auth 4 التالي
  • واجهة المستخدم: Tailwind ، chart.js ، React-Chartjs
  • DB: Mongodb ، mongoose
  • الدفع: PayPal ، شريط
  • استضافة المحتوى: Clobinary
  • نشر: Github ، Vercel ، Mongodb Atlas

التالي الأمازونا

موارد

  • فيديو يوتيوب: https://youtu.be/_iblyr5mrza
  • الموقع التجريبي: https://next-tailwind-amazona.vercel.app
  • رمز المصدر: https://github.com/basir/next-tailwind-amazona
  • الدورة الكاملة: Basir.Thinkific.com

ماذا ستتعلم

  • أساسيات NextJS مثل إعداد المشروع ، والتنقل بين الصفحات والبيانات جلب
  • مواضيع متقدمة NextJS مثل التوجيه الديناميكي ، تحسين الصور ، SSG و SSR
  • Tailwind CSS Framework لبناء موقع على شبكة الإنترنت مستجيبة باستخدام موضوع مخصص والرسوم المتحركة والزواج
  • ReactJs بما في ذلك المكونات المتحللة ، واجهة برمجة تطبيقات السياق والسنانير
  • حزمة المصادقة التالية لمصادقة العملاء ومستخدمي المسؤولين
  • MongoDB و Mongoose لحفظ واسترداد البيانات مثل المنتجات والأوامر والمستخدمين
  • PayPal Developer API لإجراء الدفع عبر الإنترنت
  • نشر تطبيقات الويب على خوادم مثل Vercel و NetLify

مسار كامل

احصل على هذا الدورة بخصم 90 ٪ على Thinkific: https://basir.thinkific.com/courses/build-ecommerce-website-like-amazon-by-next-js؟coupon=save90

تشغيل محليا

  1. استنساخ repo 

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

  2. إنشاء ملف .env

    • مكرر .env.example وقم بإعادة تسميته إلى .env

  3. إعداد mongodb

    • Mongodb المحلي
    • تثبيته من هنا
    • في. env تحديث ملف mongodb_uri = mongodb: // localhost/amazona
    • أو Atlas Cloud Mongodb
    • إنشاء قاعدة بيانات على https://cloud.mongodb.com
    • في .ENV File Update Mongodb_uri = mongodb+srv: // your-db-connection

  4. تثبيت وتشغيل 

      npm install
  npm run dev

  5. بيانات البذور

    • قم بتشغيل هذا على المتصفح: http: // localhost: 5000/api/seed
    • يقوم بإرجاع البريد الإلكتروني وكلمة المرور للمسؤول و 6 عينة من المنتجات

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

    • تشغيل http: // localhost: 3000/تسجيل الدخول
    • أدخل البريد الإلكتروني للمسؤول وكلمة المرور وانقر فوق تسجيل الدخول

الدروس

  1. مقدمة
  2. تثبيت الأدوات
  3. إنشاء التطبيق التالي
  4. نشر إلى جيثب
  5. إنشاء تخطيط موقع
    1. إنشاء مكون تخطيط
    2. إضافة رأس
    3. أضف القسم الرئيسي
    4. أضف تذييل
    5. أضف فصول Tailwind
  6. قائمة المنتجات
    1. إضافة data.js
    2. أضف الصور
    3. تقديم المنتجات
  7. إنشاء تفاصيل المنتج
    1. إنشاء صفحة المنتج
    2. إنشاء 3 أعمدة
    3. عرض الصورة في العمود الأول
    4. إظهار معلومات المنتج في العمود الثاني
    5. عرض إضافة إلى عمل العربة في العمود الثالث
    6. أضف أنماط
  8. مقبض إضافة إلى العربة
    1. تحديد السياق رد الفعل
    2. تحديد عناصر العربة الحالة
    3. إنشاء ADDD إلى عمل العربة
    4. إضافة المخفض
    5. إنشاء مزود المتجر
    6. التعامل مع زر العربة
  9. إنشاء صفحة عربة
    1. إنشاء cart.js
    2. استخدم السياق للحصول على عناصر العربة
    3. قائمة العناصر في عناصر العربة
    4. إعادة توجيه إلى الشاشة العربة بعد إضافة إلى عربة
  10. تحديث الكمية في العربة
    1. إضافة مربع تحديد للكمية
    2. مقبض تحديد مربع تغيير
  11. حفظ عناصر العربة
    1. تثبيت حزمة JS-Cookie
    2. احفظ وعناصر العربة المستقيمة في ملفات تعريف الارتباط
  12. إنشاء نموذج تسجيل الدخول
    1. تثبيت نموذج ربط رد الفعل
    2. إنشاء مربعات الإدخال
    3. إضافة زر تسجيل الدخول
  13. الاتصال بـ MongoDB
    1. تثبيت mongoose
    2. تثبيت mongodb أو استخدم أطلس mongodb
    3. حفظ عنوان URL للاتصال في ملف .env
    4. إنشاء ملف db utils
    5. إنشاء عينة مستخدمين
  14. إنشاء تسجيل الدخول إلى واجهة برمجة تطبيقات تسجيل الدخول
    1. تثبيت Next-Auth
    2. إنشاء nextauth.js
    3. تنفيذ علامة
    4. استخدم Signin في نموذج تسجيل الدخول
  15. أضف قائمة المستخدم
    1. تحقق من مصادقة المستخدم
    2. تثبيت Headlessui
    3. إظهار قائمة المستخدم
  16. إنشاء شاشة الشحن
    1. حقول عنوان العرض
    2. حفظ العنوان في السياق
  17. إنشاء شاشة طريقة الدفع
    1. أساليب الدفع dispale
    2. حفظ طريقة الدفع في السياق
  18. منتجات عينة البذور
    1. إنشاء نموذج منتج في mongoose
    2. أدخل عينة منتجات إلى mongodb
  19. تحميل المنتجات mongodb
    1. تحميل المنتجات في الصفحة الرئيسية من MongoDB
    2. تحميل المنتجات في صفحة المنتج من MongoDB
    3. استخدم واجهة برمجة تطبيقات المنتج للتحقق من العد في الأسهم في الإضافة إلى العربة
  20. إنشاء شاشة طلب المكان
    1. عرض عنوان الشحن
    2. طريقة الدفع
    3. عرض عناصر الطلب
    4. تنشئ ترتيب
  21. إنشاء شاشة الطلب
    1. تنفيذ واجهة برمجة تطبيقات الخلفية للحصول على تفاصيل الطلب
    2. تحميل بيانات الطلب من الخلفية
    3. عرض تفاصيل الطلب
  22. إنشاء شاشة التسجيل
    1. إضافة api الاشتراك
    2. إنشاء صفحة التسجيل
    3. استدعاء API عند إرسال النموذج
  23. أمر الدفع من قبل PayPal
    1. أضف زر PayPal
    2. التعامل مع الدفع
    3. إنشاء واجهة برمجة تطبيقات الخلفية
    4. تحديث حالة الطلب
  24. إنشاء شاشة تاريخ الطلب
    1. إنشاء واجهة برمجة تطبيقات الطلب الخاص بي
    2. إنشاء مكون سجل الطلب
    3. جلب الطلبات وعرضها
  25. نشر على Vercel
    1. إنشاء حساب Vercel
    2. الاتصال بـ Github
    3. قم بتعيين Auth و Mongodb DB التالي في Env Vars
    4. رمز الدفع إلى جيثب
  26. تحديث ملف تعريف المستخدم
    1. إنشاء شاشة ملف تعريف
    2. إظهار معلومات المستخدم
    3. التعامل مع تحديث معلومات المستخدم
  27. إنشاء لوحة معلومات المسؤول
    1. إنشاء قائمة المسؤول
    2. إنشاء شاشة لوحة القيادة
    3. تنفيذ واجهة برمجة تطبيقات ملخص المسؤول
  28. قائمة أوامر المسؤول
    1. إنشاء صفحة أوامر
    2. إنشاء أوامر API
    3. استخدم API في الصفحة
  29. تسليم طلب المسؤول
    1. إنشاء تسليم API
    2. أضف زر تسليم
    3. تنفيذ معالج النقر
  30. قائمة المنتجات للمسؤول
    1. إنشاء صفحة منتجات
    2. إنشاء منتجات API
    3. استخدم API في الصفحة
  31. إنشاء صفحة تحرير المنتج
    1. إنشاء صفحة تحرير
    2. إنشاء API للمنتج
    3. إظهار بيانات المنتج في النموذج
  32. تحميل صورة المنتج
    1. إنشاء حساب تافهة
    2. احصل على مفاتيح تافهة
    3. إنشاء تحميل واجهة برمجة التطبيقات
    4. تحميل الملفات في صفحة تحرير
  33. إنشاء وحذف المنتجات
    1. إضافة زر إنشاء المنتج
    2. بناء واجهة برمجة تطبيقات منتج جديد
    3. إضافة معالج للحذف
    4. تنفيذ حذف API
  34. قائمة المستخدمين للمسؤول
    1. إنشاء صفحة المستخدمين
    2. إنشاء API المستخدمين
    3. استخدم API في الصفحة
  35. أضف كاروسيل
    1. إنشاء منتجات مميزة
    2. تغذية بيانات الكاروسيل
    3. عرض المنتجات الشعبية
  36. إنشاء صفحة بحث
    1. إنشاء مرشحات
    2. قائمة المنتجات
    3. عرض المرشحات
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل