آموزش MERN Stack E-Commerce App با استفاده از React Native و Redux Toolkit

سرفصل ها و درس ها

معرفی Introduction

• معرفی Introduction

• نسخه نمایشی برنامه App Demo

React Native Basics React Native Basics

• راهنمای دوره Course Guide

• کد منبع Source Code

• نصب برنامه Installing the App

• React Native Basics React Native Basics

• راه اندازی ناوبری Navigation Setup

• یک ظاهر طراحی پایه Basic Styling

ساخت صفحه اصلی Building Home Screen

• ایجاد صفحه اصلی Creating Home Screen

• کامپوننت هدر Header Component

• دکمه جستجو Search Button

• جزء دسته ها Categories Component

• کامپوننت جستجو Search Component

• جزء کارت محصول Product Card Component

• ایجاد پاورقی Creating Footer

صفحه نمایش جزئیات محصول Product Details Screen

• ایجاد چرخ فلک Creating Carousel

• طراحی طرح بندی جزئیات محصول Designing Product Details Layout

• دکمه افزودن به سبد خرید Add to Cart Button

• پیام نان تست Toast Message

صفحه نمایش سبد خرید Building Cart Screen

• عنوان سبد خرید Cart Heading

• طرح بندی سبد خرید Cart Layout

• جزء کالای سبد خرید Cart Item Component

• کنترل کننده پرداخت Checkout Handler

• صفحه تایید سفارش Confirm Order Screen

• مؤلفه مورد سفارش را تأیید کنید Confirm Order Item Component

• صفحه پرداخت Payment Screen

رابط کاربری احراز هویت Authentication UI

• صفحه ورود به سیستم Building Login Screen

• صفحه رمز عبور را فراموش کنید Forget Password Screen

• صفحه ثبت نام Sign-up Screen

رابط کاربری مسیرهای پروفایل Profile Routes UI

• صفحه نمایه ساختمان Building Profile Screen

• کامپوننت جعبه دکمه Button Box Component

• کامپوننت لودر Loader Component

• کنترل کننده پیمایش نمایه Profile Navigation Handler

• ویرایش رابط کاربری نمایه Edit Profile UI

• تغییر صفحه رمز عبور Change Password Screen

صفحه نمایش سفارشات ساختمان Building Orders Screen

• ایجاد صفحه سفارشات Creating Orders Screen

• سفارش جزء آیتم Order Item Component

ایجاد رابط کاربری مسیرهای مدیریت Building Admin Routes UI

• ایجاد پنل مدیریت Creating Admin Panel

• جزء آیتم لیست محصولات Product List Item Component

• ایجاد نمودار در React Native Creating Chart in React Native

• مدیریت ناوبری مدیریت Admin Navigation Handler

• صفحه نمایش دسته بندی مدیریت ساختمان Building Manage Category Screen

• صفحه سفارشات ادمین Admin Orders Screen

• رابط کاربری محصول را به‌روزرسانی کنید Update Product UI

• صفحه نمایش محصول جدید New Product Screen

• مدیریت تصاویر محصول Manage Product Images

صفحه نمایش دوربین ساختمان Building Camera Screen

• ایجاد صفحه دوربین و دسترسی به عکس های گالری Creating Camera Screen & Accessing Gallery Photos

• با استفاده از دوربین عکس بگیرید Capture Image Using Camera

• استفاده از دوربین در گوشی واقعی Using Camera in Actual Phone

راه اندازی Backend Backend Setup

• راه اندازی Backend Setting Up Backend

• ایجاد اولین مسیر Creating First Route

• راه اندازی پایگاه داده Setting Up Database

• اتصال به Atlas Cloud Connecting To Atlas Cloud

ایجاد Backend کاربر Creating User Backend

• ایجاد طرحواره کاربری Creating User Schema

• Post Man برای تست API Post Man for API Testing

• ثبت نام کاربر API Register User API

• ورود و هش کردن رمز عبور Login & Hashing Password

رسیدگی به خطا Error Handling

• میان افزار کنترل کننده خطا Error Handler Middleware

• کنترل کننده خطای همگام سازی Async Error Handler

احراز هویت Backend Backend Authentication

• پیاده سازی JWT Implementing JWT

• ذخیره JWT در Cookie Saving JWT in Cookie

• میان افزار معتبر Authentic Middleware

• دریافت نمایه من Get My Profile

• گزینه های کوکی Cookie Options

• API خروج Logout API

به روز رسانی مسیرهای نمایه Update Profile Routes

• به روز رسانی نمایه و تغییر API رمز عبور Update Profile & Change Password API

API آپلود تصویر Image Upload API

• راه اندازی مولتر Setting Up Multer

• آپلود در کلودیناری Uploading On Cloudinary

• به‌روزرسانی API Profile Pic Update Profile Pic API

تنظیم مجدد رمز عبور API Resetting Password API

• API رمز عبور را فراموش کنید Forget Password API

• ارسال ایمیل API Sending Email API

• تنظیم مجدد رمز عبور API Reset Password API

پشتیبان محصول Product Backend

• ایجاد طرح واره محصول Creating Product Schema

• API های محصول را دریافت کنید Get Product APIs

• ایجاد API محصول جدید Create New Product API

• به روز رسانی محصول و افزودن تصاویر Update Product & Add Images

• حذف محصول و تصاویر Delete Product & Images

دسته باطن Category Backend

• Add, Get, Delete Category API Add, Get, Delete Category API

Admin Middleware Admin Middleware

• Admin Middleware Admin Middleware

جستجو و فیلتر محصول Search & Filter Product

• جستجو و فیلتر کردن API Search & Filter API

سفارش Backend Order Backend

• ایجاد طرح سفارش Creating Order Schema

• Place Order API Place Order API

• Orders Remaining API Orders Remaining API

Stripe Integration Backend Stripe Integration Backend

• پردازش API پرداخت Process Payment API

گسترش Deployment

• اصلاح قبل از استقرار Correction Before Deployment

• استفاده از Cors در سرور Using Cors in Server

• استقرار روش سرور 1 Deploying Server Method 1

• استقرار سرور روش 2 Deploying Server Method 2

ادغام با Redux Integration with Redux

• پیاده سازی Redux Toolkit Implementing Redux Toolkit

کاهش دهنده کاربر User Reducer

• ایجاد کاربر کاهنده Creating User Reducer

• استفاده از Axios In Login Action Using Axios In Login Action

• مدیریت پیام و خطا Handling Message & Error

• ایجاد هوک سفارشی Creating Custom Hook

• داده های کاربر ماندگار Persisting User Data

• خروج از عملکرد کاربر Logout User Action

• کنترل کننده ثبت نام Sign Up Handler

کاهش دهنده پروفایل Profile Reducer

• نمایش داده های نمایه Showing Profile Data

• کنترل کننده رمز عبور را تغییر دهید Change Password Handler

• رفع خطای به‌روزرسانی نمایه Fixing Update Profile Error

• به روز رسانی کنترل کننده پروفایل Update Profile Handler

• به روز رسانی کنترل کننده عکس نمایه Update Profile Picture Handler

کاهش دهنده محصول Product Reducer

• ایجاد کاهش دهنده محصول Creating Product Reducer

• دریافت اقدام محصولات Get Products Action

• useSetCategories Hook useSetCategories Hook

• جستجوگر پرس و جو Search Query Handler

• واکشی جزئیات محصول Fetching Product Details

کاهنده سبد خرید Cart Reducer

• ایجاد کاهنده سبد خرید Creating Cart Reducer

• واکشی اقلام سبد خرید از Redux Fetching Cart Items From Redux

• افزودن به سبد خرید Add To Cart Handler

• تغییر مقدار محصول در سبد خرید Change Product Quantity In Cart

• تغییر استایل Changing The Styling

• واکشی تأیید جزئیات سفارش Fetching Confirm Order Details

کنترل کننده پرداخت Payment Handler

• کنترل کننده سفارش Place Order Handler

• ثبت سفارش با COD Placing Order With COD

• روش پرداخت Stripe را اجرا کنید Implement Stripe Payment Method

واکشی سفارشات Fetching Orders

• ایجاد قلاب useGetOrders Creating useGetOrders Hook

• واکشی سفارشات Fetching Orders

• پردازشگر سفارش Process Order Handler

مدیریت کننده ها Admin Handlers

• واکشی محصولات مدیریت Fetching Admin Products

• افزودن و حذف دسته بندی Handler Add & Delete Category Handler

• راهنمای محصول جدید New Product Handler

• مدیریت کننده محصول را به روز کنید Update Product Handler

• مدیریت تصاویر محصول Manage Product Images Handler

• حذف کننده محصول Delete Product Handler

بازنشانی کنترل کننده رمز عبور Reset Password Handler

• بازنشانی رمز عبور Resetting Password

پایان The End

• خداحافظ Good Bye

• اضافه کردن ویژگی های بیشتر Add more features