آموزش ساخت فروشگاه تجارت الکترونیک با Net، React و Redux

Learn to build an e-commerce store with .Net, React & Redux

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: نحوه ساخت یک برنامه دنیای واقعی با استفاده از برخی از محبوب‌ترین و پر تقاضاترین فریم ورک‌ها، React و Net. با استفاده از Net برای کد پشتیبان استفاده از React برای برنامه مشتری یا فرانت‌اند استفاده از Redux برای مدیریت حالت سمت مشتری با استفاده از Material چارچوب استایل UI برای React با استفاده از زبان TypeScript استفاده از زبان C# استفاده از Entity Framework استفاده از ASPNETCore Identity برای احراز هویت قبلا کد شده

***این دوره در فوریه 2023 برای استفاده از .Net 7، React 18 و React Router 6 به روز شد***

آیا می خواهید یاد بگیرید که چگونه با استفاده از Net، React و Redux یک برنامه دنیای واقعی بسازید؟ در این دوره ما از هیچ شروع می‌کنیم و با استفاده از این چارچوب‌ها/کتابخانه‌ها، فروشگاه تجارت الکترونیکی را اثبات می‌کنیم.

در این دوره ما یک برنامه کامل از ابتدا تا انتها می سازیم و هر خط کد نشان داده شده و توضیح داده می شود.

در اینجا مواردی وجود دارد که در این دوره در مورد آنها خواهید آموخت:

  • تنظیم محیط توسعه دهنده

  • ایجاد یک برنامه Net WebAPI با استفاده از dotnet CLI

  • ایجاد یک برنامه تک صفحه ای React در سمت مشتری برای رابط کاربری فروشگاه ها

  • استفاده از Entity Framework برای نوشتن کدی که پایگاه داده را جستجو و به روز می کند

  • استفاده از ASP.NET Identity برای ورود و ثبت نام

  • استفاده از React Router برای پیمایش بین مسیرها در سرویس گیرنده

  • استفاده از Automapper.

  • ایجاد رابط کاربری عالی با استفاده از طراحی متریال

  • ساخت اجزای فرم قابل استفاده مجدد با استفاده از React hook form

  • صفحه‌بندی، مرتب‌سازی، جستجو و فیلتر کردن

  • ایجاد سفارشات از سبد خرید

  • پذیرش پرداخت از طریق Stripe با استفاده از استانداردهای جدید اتحادیه اروپا برای امنیت سه بعدی

  • انتشار برنامه در Heroku

  • خیلی چیزهای دیگر نیز

ابزارهایی که برای این دوره نیاز دارید

در این دوره، تمام دروس با استفاده از Visual Studio Code، یک ویرایشگر کد متقابل پلت فرم رایگان، نشان داده می شوند. البته می توانید از هر IDE که دوست دارید و هر سیستم عاملی که دوست دارید استفاده کنید... البته تا زمانی که ویندوز، لینوکس یا مک باشد.

آیا این دوره برای شماست؟

این دوره بسیار کاربردی است، بیش از 90٪ از درس ها شامل کدنویسی شما با من در این پروژه می شود. اگر شما از آن دسته افرادی هستید که با انجام کار بیشترین بهره را از یادگیری می برید، این دوره قطعا برای شما مناسب است.

مهم: هدف این دوره برای مبتدیان است، اما این انتظار وجود دارد که شما قبلاً کدی نوشته اید - برای کسانی که قبلاً هرگز کدنویسی نکرده اند مناسب نیست.

در این دوره، ما یک فروشگاه تجارت الکترونیک نمونه را به طور کامل از ابتدا با استفاده از ابزار DotNet CLI و ابزار Create-React-App برای کمک به شروع کار خواهیم ساخت. تنها چیزی که برای شروع نیاز دارید یک کامپیوتر با سیستم عامل مورد علاقه خود و اشتیاق به یادگیری نحوه ساخت یک برنامه با استفاده از Net و React است.


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

معرفی Introduction

  • معرفی Introduction

  • راه اندازی محیط توسعه دهنده Setting up the dev environment

  • دارایی های دوره و کد منبع Course assets and source code

معرفی Introduction

  • معرفی Introduction

  • راه اندازی محیط توسعه دهنده Setting up the dev environment

  • دارایی های دوره و کد منبع Course assets and source code

  • کمک گرفتن Getting help

  • کمک گرفتن Getting help

مبانی API API Basics

  • بخش 2 مقدمه Section 2 Introduction

  • ایجاد راه حل .Net و پروژه API Creating the .Net solution and API project

  • ایجاد یک کلاس C# جدید برای محصول Creating a new C# class for the Product

  • Entity Framework چیست؟ What is Entity Framework

  • ایجاد یک مهاجرت چارچوب موجودیت Creating an Entity Framework Migration

  • ایجاد یک کلاس برای بذر کردن داده ها در پایگاه داده Creating a class to seed data into the database

  • استفاده از متدهای async هنگام پرس و جو از پایگاه داده. Using async methods when querying a database.

  • خلاصه بخش 2 Summary of section 2

مبانی API API Basics

  • بخش 2 مقدمه Section 2 Introduction

  • ایجاد راه حل .Net و پروژه API Creating the .Net solution and API project

  • افزودن پسوندهای VS Code Adding VS Code extensions

  • افزودن پسوندهای VS Code Adding VS Code extensions

  • آنچه در قالب Web API وجود دارد What’s in the Web API template

  • آنچه در قالب Web API وجود دارد What’s in the Web API template

  • ایجاد یک کلاس C# جدید برای محصول Creating a new C# class for the Product

  • Entity Framework چیست؟ What is Entity Framework

  • اضافه کردن کلاس DbContext Adding the DbContext class

  • اضافه کردن کلاس DbContext Adding the DbContext class

  • ایجاد یک مهاجرت چارچوب موجودیت Creating an Entity Framework Migration

  • ایجاد یک کلاس برای بذر کردن داده ها در پایگاه داده Creating a class to seed data into the database

  • استفاده از کلاس Program.cs برای انتقال داده ها و ذخیره کردن آن ها در راه اندازی برنامه Using the Program.cs class to migrate and seed the data on app startup

  • استفاده از کلاس Program.cs برای انتقال داده ها و ذخیره کردن آن ها در راه اندازی برنامه Using the Program.cs class to migrate and seed the data on app startup

  • ایجاد یک کنترلر API برای بازگرداندن لیستی از محصولات Creating an API controller to return a list of products

  • ایجاد یک کنترلر API برای بازگرداندن لیستی از محصولات Creating an API controller to return a list of products

  • استفاده از متدهای async هنگام پرس و جو از پایگاه داده. Using async methods when querying a database.

  • ذخیره کد ما در کنترل منبع Saving our code into source control

  • ذخیره کد ما در کنترل منبع Saving our code into source control

  • خلاصه بخش 2 Summary of section 2

React Basics React Basics

  • بخش 3 مقدمه Section 3 Introduction

  • آنچه در قالب React وجود دارد What's in the React template

  • اصول اولیه کامپوننت واکنش React component basics

  • استفاده از React Hook - useEffect Using react hooks - useEffect

  • افزودن رابط Typescript برای محصول Adding a Typescript interface for the product

  • سازماندهی فایل و پوشه File and folder organisation

  • افزودن کامپوننت های React Adding React components

  • افزودن AppBar Adding an AppBar

  • افزودن کارت برای محصولات فردی ما Adding cards for our individual products

  • با استفاده از تم UI Material Using Material UI Theme

  • خلاصه بخش 3 Section 3 Summary

React Basics React Basics

  • بخش 3 مقدمه Section 3 Introduction

  • ساخت اپلیکیشن react Creating the react application

  • ساخت اپلیکیشن react Creating the react application

  • آنچه در قالب React وجود دارد What's in the React template

  • اصول اولیه کامپوننت واکنش React component basics

  • استفاده از React Hook - useState Using react hooks - useState

  • استفاده از React Hook - useState Using react hooks - useState

  • استفاده از React Hook - useEffect Using react hooks - useEffect

  • افزودن پیکربندی CORS به API Adding CORS configuration to the API

  • افزودن پیکربندی CORS به API Adding CORS configuration to the API

  • تایپ اسکریپت در مقابل جاوا اسکریپت در React Typescript vs javascript in React

  • تایپ اسکریپت در مقابل جاوا اسکریپت در React Typescript vs javascript in React

  • افزودن رابط Typescript برای محصول Adding a Typescript interface for the product

  • سازماندهی فایل و پوشه File and folder organisation

  • افزودن کامپوننت های React Adding React components

  • افزودن چارچوب استایل UI Material Adding the Material UI styling framework

  • افزودن چارچوب استایل UI Material Adding the Material UI styling framework

  • افزودن اجزاء برای لیست محصولات و کارت Adding components for the ProductList and Card

  • افزودن اجزاء برای لیست محصولات و کارت Adding components for the ProductList and Card

  • نصب و استفاده از ابزار React dev Installing and using React dev tools

  • نصب و استفاده از ابزار React dev Installing and using React dev tools

  • افزودن AppBar Adding an AppBar

  • افزودن کارت برای محصولات فردی ما Adding cards for our individual products

  • مدل دادن به کارت محصول Styling the product card

  • مدل دادن به کارت محصول Styling the product card

  • با استفاده از تم UI Material Using Material UI Theme

  • راه حل چالش و تنظیم رنگ bg Challenge solution and setting bg color

  • راه حل چالش و تنظیم رنگ bg Challenge solution and setting bg color

  • خلاصه بخش 3 Section 3 Summary

روتر واکنش React Router

  • راه اندازی React Router Setting up React Router

  • افزودن پیوندهای Nav به AppBar Adding Nav Links to the AppBar

  • چسباندن نوار ناوبری Stying the nav bar

روتر واکنش React Router

  • بخش 4 مقدمه Section 4 Introduction

  • بخش 4 مقدمه Section 4 Introduction

  • راه اندازی React Router Setting up React Router

  • افزودن پیوندهای Nav به AppBar Adding Nav Links to the AppBar

  • چسباندن نوار ناوبری Stying the nav bar

  • واکشی محصول در بار جزء Fetching a product on component load

  • واکشی محصول در بار جزء Fetching a product on component load

  • افزودن محتوای صفحه جزئیات محصول Adding the product detail page content

  • افزودن محتوای صفحه جزئیات محصول Adding the product detail page content

  • خلاصه بخش 4 Summary of section 4

  • خلاصه بخش 4 Summary of section 4

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

  • راه اندازی یک کنترل کننده خطا Setting up an error controller

  • افزودن میان افزار رسیدگی به استثناها Adding exception handling middleware

  • متمرکز کردن درخواست های axios Centralising the axios requests

  • ایجاد یک کامپوننت react برای آزمایش پاسخ های خطا Creating a react component to test the error responses

  • افزودن اعلان‌های نان تست Adding toast notifications

  • با استفاده از react debugger Using the react debugger

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

  • بخش 5 مقدمه Section 5 Introduction

  • بخش 5 مقدمه Section 5 Introduction

  • راه اندازی یک کنترل کننده خطا Setting up an error controller

  • افزودن میان افزار رسیدگی به استثناها Adding exception handling middleware

  • متمرکز کردن درخواست های axios Centralising the axios requests

  • ایجاد یک کامپوننت react برای آزمایش پاسخ های خطا Creating a react component to test the error responses

  • استفاده از رهگیرهای Axios Using Axios interceptors

  • استفاده از رهگیرهای Axios Using Axios interceptors

  • افزودن اعلان‌های نان تست Adding toast notifications

  • رسیدگی به خطاهای اعتبارسنجی Handling validation errors

  • رسیدگی به خطاهای اعتبارسنجی Handling validation errors

  • ایجاد یک جزء خطای سرور Creating a server error component

  • ایجاد یک جزء خطای سرور Creating a server error component

  • ایجاد یک مؤلفه یافت نشد Creating a not found component

  • ایجاد یک مؤلفه یافت نشد Creating a not found component

  • اضافه کردن نشانگرهای تاخیر و بارگیری به برنامه Adding a delay and loading indicators to the app

  • اضافه کردن نشانگرهای تاخیر و بارگیری به برنامه Adding a delay and loading indicators to the app

  • با استفاده از ابزار اشکال زدایی dotnet Using the dotnet debugging tool

  • با استفاده از ابزار اشکال زدایی dotnet Using the dotnet debugging tool

  • با استفاده از react debugger Using the react debugger

  • خلاصه بخش 5 Section 5 summary

  • خلاصه بخش 5 Section 5 summary

افزودن ویژگی سبد خرید Adding the shopping cart feature

  • ایجاد موجودیت سبد Creating the basket entity

  • منطق نقطه پایانی مورد سبد را اضافه کنید Add basket item endpoint logic

  • شکل دادن به داده ها برای بازگشت Shaping the data to return

  • با استفاده از CreatedAtRoute Using CreatedAtRoute

  • ایجاد یک جزء سبد Creating a basket component

  • افزودن قابلیت حذف آیتم Adding the remove item functionality

  • چالش - خلاصه سبد Challenge - Basket Summary

  • چالش - راه حل Challenge - Solution

  • افزودن صفحه پرداخت Adding a checkout page

افزودن ویژگی سبد خرید Adding the shopping cart feature

  • بخش 6 مقدمه Section 6 introduction

  • بخش 6 مقدمه Section 6 introduction

  • ایجاد موجودیت سبد Creating the basket entity

  • روابط EF EF Relationships

  • روابط EF EF Relationships

  • یک کنترلر سبد ایجاد کنید Create a basket controller

  • یک کنترلر سبد ایجاد کنید Create a basket controller

  • منطق نقطه پایانی مورد سبد را اضافه کنید Add basket item endpoint logic

  • با استفاده از دیباگر برای بررسی منطق افزودن آیتم Using the debugger to check the add item logic

  • با استفاده از دیباگر برای بررسی منطق افزودن آیتم Using the debugger to check the add item logic

  • شکل دادن به داده ها برای بازگشت Shaping the data to return

  • خارج کردن یک کالا از سبد Removing an item from the basket

  • خارج کردن یک کالا از سبد Removing an item from the basket

  • با استفاده از CreatedAtRoute Using CreatedAtRoute

  • افزودن متدهای axios برای سبد Adding the axios methods for the basket

  • افزودن متدهای axios برای سبد Adding the axios methods for the basket

  • ایجاد یک جزء سبد Creating a basket component

  • حالت دادن به صفحه سبد با جدول Styling the basket page with a table

  • حالت دادن به صفحه سبد با جدول Styling the basket page with a table

  • استفاده از زمینه React برای متمرکز کردن حالت Using React context to centralise state

  • استفاده از زمینه React برای متمرکز کردن حالت Using React context to centralise state

  • راه اندازی برنامه - واکشی سبد در شروع برنامه App initialisation - fetching the basket on app start

  • راه اندازی برنامه - واکشی سبد در شروع برنامه App initialisation - fetching the basket on app start

  • به روز رسانی هدر با تعداد اقلام سبد Updating the header with the basket item count

  • به روز رسانی هدر با تعداد اقلام سبد Updating the header with the basket item count

  • افزودن قابلیت حذف آیتم Adding the remove item functionality

  • اضافه کردن نشانگرهای بارگذاری خاص برای دکمه ها Adding specific loading indicators for the buttons

  • اضافه کردن نشانگرهای بارگذاری خاص برای دکمه ها Adding specific loading indicators for the buttons

  • چالش - خلاصه سبد Challenge - Basket Summary

  • چالش - راه حل Challenge - Solution

  • به روز رسانی جزء جزئیات محصول برای افزودن موارد به سبد خرید قسمت 1 Updating the product detail component to add items to cart part 1

  • به روز رسانی جزء جزئیات محصول برای افزودن موارد به سبد خرید قسمت 1 Updating the product detail component to add items to cart part 1

  • به روز رسانی جزء جزئیات محصول برای افزودن موارد به سبد خرید قسمت 2 Updating the product detail component to add items to cart part 2

  • به روز رسانی جزء جزئیات محصول برای افزودن موارد به سبد خرید قسمت 2 Updating the product detail component to add items to cart part 2

  • افزودن صفحه پرداخت Adding a checkout page

  • خلاصه بخش 6 Section 6 Summary

  • خلاصه بخش 6 Section 6 Summary

Redux Redux

  • بخش 7 مقدمه Section 7 Introduction

  • ایجاد یک برش سبد Creating a basket slice

  • استفاده از توابع async در redux قسمت 2 Using async functions in redux part 2

  • استفاده از آداپتورهای Entity Using Entity Adapters

  • رسیدگی به خطا در برش سبد Error handling in the basket slice

  • خلاصه بخش 7 Section 7 summary

Redux Redux

  • بخش 7 مقدمه Section 7 Introduction

  • نصب و استفاده از Redux Installing and using Redux

  • نصب و استفاده از Redux Installing and using Redux

  • اقدامات Redux Redux actions

  • اقدامات Redux Redux actions

  • اکشن سازندگان Action Creators

  • اکشن سازندگان Action Creators

  • با استفاده از Redux Toolkit Using Redux Toolkit

  • با استفاده از Redux Toolkit Using Redux Toolkit

  • استفاده از ابزار redux dev Using redux dev tools

  • استفاده از ابزار redux dev Using redux dev tools

  • ایجاد یک برش سبد Creating a basket slice

  • بازسازی برنامه برای استفاده از فروشگاه redux Refactoring the app to use the redux store

  • بازسازی برنامه برای استفاده از فروشگاه redux Refactoring the app to use the redux store

  • استفاده از توابع async در ردوکس قسمت 1 Using async functions in redux part 1

  • استفاده از توابع async در ردوکس قسمت 1 Using async functions in redux part 1

  • استفاده از توابع async در redux قسمت 2 Using async functions in redux part 2

  • استفاده از توابع async در redux قسمت 3 Using async functions in redux part 3

  • استفاده از توابع async در redux قسمت 3 Using async functions in redux part 3

  • چالش - راه حل Challenge - Solution

  • استفاده از آداپتورهای Entity Using Entity Adapters

  • با استفاده از انتخابگرهای آداپتور موجودیت Using entity adapter selectors

  • با استفاده از انتخابگرهای آداپتور موجودیت Using entity adapter selectors

  • واکشی یک محصول واحد Fetching a single product

  • واکشی یک محصول واحد Fetching a single product

  • رسیدگی به خطا در کاهنده ها Error handling in the reducers

  • رسیدگی به خطا در کاهنده ها Error handling in the reducers

  • رسیدگی به خطا در برش سبد Error handling in the basket slice

  • خلاصه بخش 7 Section 7 summary

صفحه بندی، مرتب سازی، فیلتر کردن Paging, Sorting, Filtering

  • بخش 8 مقدمه Section 8 Introduction

  • اضافه کردن مرتب سازی به API Adding sorting to the API

  • افزودن قابلیت جستجو به API Adding search functionality to the API

  • ایجاد کلاسی که لیست ما را به یک PagedList گسترش دهد Creating a class that extends our List into a PagedList

  • دریافت مارک ها و فیلترهای منحصر به فرد به عنوان لیست از API Getting the unique brands and filters as lists from the API

  • دریافت لیست فیلترها از API و ذخیره در حالت Redux Getting the filter lists from the API and storing in Redux state

  • طراحی صفحه کاتالوگ Catalog page design

  • افزودن پارامترهای محصول به حالت redux Adding the product params to redux state

  • تنظیم صفحه بندی روی مشتری Setting up pagination on the client

  • اضافه کردن یک جزء صفحه بندی Adding a pagination component

  • خلاصه بخش 8 Section 8 Summary

صفحه بندی، مرتب سازی، فیلتر کردن Paging, Sorting, Filtering

  • بخش 8 مقدمه Section 8 Introduction

  • اضافه کردن مرتب سازی به API Adding sorting to the API

  • افزودن قابلیت جستجو به API Adding search functionality to the API

  • افزودن فیلترها به API Adding filters to the API

  • افزودن فیلترها به API Adding filters to the API

  • اضافه کردن کلاس های کمکی صفحه بندی Adding a pagination helper classes

  • اضافه کردن کلاس های کمکی صفحه بندی Adding a pagination helper classes

  • ایجاد کلاسی که لیست ما را به یک PagedList گسترش دهد Creating a class that extends our List into a PagedList

  • تست صفحه بندی ما در swagger Testing our pagination in swagger

  • تست صفحه بندی ما در swagger Testing our pagination in swagger

  • دریافت مارک ها و فیلترهای منحصر به فرد به عنوان لیست از API Getting the unique brands and filters as lists from the API

  • دریافت لیست فیلترها از API و ذخیره در حالت Redux Getting the filter lists from the API and storing in Redux state

  • طراحی صفحه کاتالوگ Catalog page design

  • افزودن پارامترهای محصول به حالت redux Adding the product params to redux state

  • راه اندازی درخواست دریافت axios برای استفاده از پارامترهای ما Setting up the axios get request to use our params

  • راه اندازی درخواست دریافت axios برای استفاده از پارامترهای ما Setting up the axios get request to use our params

  • افزودن قابلیت جستجو به مشتری Adding the search functionality to the client

  • افزودن قابلیت جستجو به مشتری Adding the search functionality to the client

  • اضافه کردن مرتب سازی به مشتری Adding sort to the client

  • اضافه کردن مرتب سازی به مشتری Adding sort to the client

  • افزودن فیلتر به مشتری Adding filtering to the client

  • افزودن فیلتر به مشتری Adding filtering to the client

  • تنظیم صفحه بندی روی مشتری Setting up pagination on the client

  • اضافه کردن یک جزء صفحه بندی Adding a pagination component

  • راه حل چالش Challenge solution

  • تمیز کردن نشانگرهای بارگیری در کاتالوگ Cleaning up the loading indicators in the catalog

  • تمیز کردن نشانگرهای بارگیری در کاتالوگ Cleaning up the loading indicators in the catalog

  • خلاصه بخش 8 Section 8 Summary

هویت Identity

  • بخش 9 مقدمه Section 9 Introduction

  • تنظیم هویت Setting up identity

  • افزودن پیکربندی موجودیت و مهاجرت Adding the entity configuration and migration

  • اضافه کردن یک کنترل کننده حساب Adding an account controller

  • توکن های JWT JWT Tokens

  • ایجاد یک سرویس رمزی Creating a token service

  • با استفاده از جزء کنترل شده Using controlled component

  • با استفاده از اعتبار سنجی فرم قلاب React Using React hook form validators

  • تداوم ورود Persisting the login

  • افزودن اعتبار سنجی ثبت نام Adding the registration validators

  • تست سمت مشتری و کد انتقال سبد Client side testing and code for basket transfer

  • راه حل چالش Challenge solution

هویت Identity

  • بخش 9 مقدمه Section 9 Introduction

  • تنظیم هویت Setting up identity

  • افزودن پیکربندی موجودیت و مهاجرت Adding the entity configuration and migration

  • اضافه کردن یک کنترل کننده حساب Adding an account controller

  • تست روش های ورود و ثبت نام Testing the login and register methods

  • تست روش های ورود و ثبت نام Testing the login and register methods

  • توکن های JWT JWT Tokens

  • ایجاد یک سرویس رمزی Creating a token service

  • با استفاده از سرویس توکن Using the token service

  • با استفاده از سرویس توکن Using the token service

  • اعتبار سنجی توکن روی سرور Validating the token on the server

  • اعتبار سنجی توکن روی سرور Validating the token on the server

  • در حال پیکربندی swagger برای ارسال رمز تأیید Configuring swagger to send the auth token

  • در حال پیکربندی swagger برای ارسال رمز تأیید Configuring swagger to send the auth token

  • ایجاد اجزای ورود و ثبت نام Creating Login and Register components

  • ایجاد اجزای ورود و ثبت نام Creating Login and Register components

  • یک فرم ورود ایجاد کنید Create a login form

  • یک فرم ورود ایجاد کنید Create a login form

  • با استفاده از جزء کنترل شده Using controlled component

  • افزودن فرم قلاب React Adding React hook form

  • افزودن فرم قلاب React Adding React hook form

  • با استفاده از اعتبار سنجی فرم قلاب React Using React hook form validators

  • افزودن برش حساب Adding an account slice

  • افزودن برش حساب Adding an account slice

  • ایجاد یک منوی کشویی Creating a dropdown menu

  • ایجاد یک منوی کشویی Creating a dropdown menu

  • تداوم ورود Persisting the login

  • پاک کردن کد init برنامه Cleaning up the app init code

  • پاک کردن کد init برنامه Cleaning up the app init code

  • افزودن فرم ثبت نام Adding a register form

  • افزودن فرم ثبت نام Adding a register form

  • افزودن اعتبار سنجی ثبت نام Adding the registration validators

  • سبد را به کاربر وارد شده منتقل کنید Transfer the basket to logged in user

  • سبد را به کاربر وارد شده منتقل کنید Transfer the basket to logged in user

  • تست سمت مشتری و کد انتقال سبد Client side testing and code for basket transfer

  • راه حل چالش Challenge solution

  • راه حل چالش Challenge solution

  • افزودن یک جزء مسیر خصوصی Adding a private route component

  • افزودن یک جزء مسیر خصوصی Adding a private route component

  • خلاصه بخش 9 Section 9 Summary

  • خلاصه بخش 9 Section 9 Summary

افزودن قابلیت پرداخت Adding the checkout feature

  • Refactoring هویت برای استفاده از int Refactoring identity to use an int

  • اضافه کردن روش سفارش ایجاد Adding the create order method

  • تست ایجاد سفارش Testing the order creation

  • شکل دادن به داده های سفارش Shaping the order data

  • ایجاد جزء پرداخت Creating the checkout component

  • افزودن یک ورودی متن سفارشی Adding a custom text input

  • ایجاد یک چک باکس قابل استفاده مجدد Creating a reusable check box

  • افزودن کتابخانه اعتبارسنجی Adding a validation library

  • به روز رسانی فرم پرداخت Updating the payment form

  • در حال ارسال سفارش Submitting the order

  • ایجاد صفحه سفارشات Creating the orders page

  • چالش - جزئیات سفارش Challenge - Order detail

  • چالش - راه حل Challenge - Solution

افزودن قابلیت پرداخت Adding the checkout feature

  • بخش 10 مقدمه Section 10 Introduction

  • بخش 10 مقدمه Section 10 Introduction

  • ایجاد نهادهای سفارش Creating the order entities

  • ایجاد نهادهای سفارش Creating the order entities

  • Refactoring هویت برای استفاده از int Refactoring identity to use an int

  • ایجاد یک کنترل کننده سفارشات Creating an orders controller

  • ایجاد یک کنترل کننده سفارشات Creating an orders controller

  • اضافه کردن روش سفارش ایجاد Adding the create order method

  • تست ایجاد سفارش Testing the order creation

  • شکل دادن به داده های سفارش Shaping the order data

  • ایجاد جزء پرداخت Creating the checkout component

  • افزودن یک ورودی متن سفارشی Adding a custom text input

  • با استفاده از زمینه فرم قلاب واکنش Using react hook form context

  • با استفاده از زمینه فرم قلاب واکنش Using react hook form context

  • ایجاد یک چک باکس قابل استفاده مجدد Creating a reusable check box

  • افزودن کتابخانه اعتبارسنجی Adding a validation library

  • به روز رسانی مؤلفه بررسی Updating the review component

  • به روز رسانی مؤلفه بررسی Updating the review component

  • به روز رسانی فرم پرداخت Updating the payment form

  • در حال ارسال سفارش Submitting the order

  • واکشی یک آدرس ذخیره شده برای فرم Fetching a saved address for the form

  • واکشی یک آدرس ذخیره شده برای فرم Fetching a saved address for the form

  • ایجاد صفحه سفارشات Creating the orders page

  • چالش - جزئیات سفارش Challenge - Order detail

  • چالش - راه حل Challenge - Solution

  • چالش - راه حل Challenge - Solution

  • خلاصه بخش 10 Section 10 Summary

  • خلاصه بخش 10 Section 10 Summary

مبلغ پرداختی Payments

  • بخش 11 مقدمه Section 11 Introduction

  • راه اندازی راه راه Setting up stripe

  • ایجاد یک سرویس پرداخت Creating a payment service

  • آزمایش اهداف پرداخت با استفاده از swagger Testing the payment intents using swagger

  • استفاده از ورودی های پرداخت خطی Using stripe payment inputs

  • افزودن تابع قصد پرداخت Adding the payment intent function

  • تست پرداخت کارت Testing card payments

  • اضافه کردن یک وب هوک Adding a webhook

مبلغ پرداختی Payments

  • بخش 11 مقدمه Section 11 Introduction

  • راه اندازی راه راه Setting up stripe

  • ایجاد یک سرویس پرداخت Creating a payment service

  • ایجاد یک کنترل کننده پرداخت Creating a payments controller

  • ایجاد یک کنترل کننده پرداخت Creating a payments controller

  • آزمایش اهداف پرداخت با استفاده از swagger Testing the payment intents using swagger

  • اضافه کردن نوار به مشتری Adding stripe to the client

  • اضافه کردن نوار به مشتری Adding stripe to the client

  • استفاده از ورودی های پرداخت خطی Using stripe payment inputs

  • اعتبار سنجی ورودی های نواری قسمت 1 Validating the stripe inputs part 1

  • اعتبار سنجی ورودی های نواری قسمت 1 Validating the stripe inputs part 1

  • اعتبار سنجی ورودی های نواری قسمت 2 Validating the stripe inputs part 2

  • اعتبار سنجی ورودی های نواری قسمت 2 Validating the stripe inputs part 2

  • افزودن تابع قصد پرداخت Adding the payment intent function

  • افزودن تابع پرداخت ارسال Adding the submit payment function

  • افزودن تابع پرداخت ارسال Adding the submit payment function

  • تست پرداخت کارت Testing card payments

  • اضافه کردن یک وب هوک Adding a webhook

  • اسرار کاربر User secrets

  • اسرار کاربر User secrets

  • خلاصه بخش 11 Section 11 Summary

  • خلاصه بخش 11 Section 11 Summary

انتشار Publishing

  • بخش 12 مقدمه Section 12 Introduction

  • ایجاد یک بیلد تولید واکنش Creating a react production build

  • ارائه برنامه مشتری از API Serving the client app from the API

  • استقرار - اتصال به postgres در docker Deployment - connecting to the postgres in docker

  • استقرار - ایجاد پیکربندی راه اندازی fly io Deployment - Creating fly io launch config

  • استقرار - افزودن یک عمل github Deployment - Adding a github action

  • راه اندازی heroku Setting up heroku

  • عیب یابی هروکو Heroku troubleshooting

انتشار Publishing

  • بخش 12 مقدمه Section 12 Introduction

  • طراحی صفحه اصلی Home page design

  • طراحی صفحه اصلی Home page design

  • ایجاد یک بیلد تولید واکنش Creating a react production build

  • ارائه برنامه مشتری از API Serving the client app from the API

  • تغییر به سرور DB تولیدی Switching to a production DB Server

  • تغییر به سرور DB تولیدی Switching to a production DB Server

  • استقرار - داکر کردن برنامه ما Deployment - Dockerising our app

  • استقرار - داکر کردن برنامه ما Deployment - Dockerising our app

  • استقرار - اتصال به postgres در docker Deployment - connecting to the postgres in docker

  • استقرار - ایجاد پیکربندی راه اندازی fly io Deployment - Creating fly io launch config

  • استقرار - افزودن اسرار fly io Deployment - Adding the fly io secrets

  • استقرار - افزودن اسرار fly io Deployment - Adding the fly io secrets

  • استقرار - افزودن یک عمل github Deployment - Adding a github action

  • استقرار - استقرار خودکار با اکشن github و fly io Deployment - Automated deployment with github action and fly io

  • استقرار - استقرار خودکار با اکشن github و fly io Deployment - Automated deployment with github action and fly io

  • Heroku دیگر خدمات رایگان ارائه نمی دهد Heroku no longer providing a free service

  • Heroku دیگر خدمات رایگان ارائه نمی دهد Heroku no longer providing a free service

  • راه اندازی heroku Setting up heroku

  • در حال اعزام به هروکو Deploying to Heroku

  • در حال اعزام به هروکو Deploying to Heroku

  • عیب یابی هروکو Heroku troubleshooting

  • خلاصه بخش 12 Section 12 Summary

  • خلاصه بخش 12 Section 12 Summary

نقش ها و عملیات CRUD Roles and CRUD operations

  • اتصال Github به Heroku Connecting Github to Heroku

  • افزودن نقطه پایانی محصول ایجاد Adding a create product endpoint

  • افزودن نقشه‌بردار خودکار Adding automapper

  • افزودن نقطه پایانی حذف Adding a delete endpoint

  • افزودن سرویس تصویر Adding an image service

  • به روز رسانی و حذف تصاویر Updating and deleting images

  • افزودن فرم محصول Adding a product form

  • ورودی های متنی و عددی قابل استفاده مجدد Reusable textarea and number inputs

  • اعتبار سنجی فرم محصول Validating the product form

  • ارسال داده های فرم Submitting the form data

  • حذف یک محصول از لیست Deleting a product from the list

  • انتشار تغییرات در FlyIO Publishing changes to FlyIO

  • خلاصه پایان دوره End of course summary

نقش ها و عملیات CRUD Roles and CRUD operations

  • بخش 13 مقدمه Section 13 Introduction

  • بخش 13 مقدمه Section 13 Introduction

  • اتصال Github به Heroku Connecting Github to Heroku

  • افزودن نقطه پایانی محصول ایجاد Adding a create product endpoint

  • افزودن نقشه‌بردار خودکار Adding automapper

  • ویرایش یک محصول Editing a product

  • ویرایش یک محصول Editing a product

  • افزودن نقطه پایانی حذف Adding a delete endpoint

  • افزودن سرویس تصویر Adding an image service

  • با استفاده از سرویس تصویر Using the image service

  • با استفاده از سرویس تصویر Using the image service

  • به روز رسانی و حذف تصاویر Updating and deleting images

  • افزودن صفحه موجودی Adding an inventory page

  • افزودن صفحه موجودی Adding an inventory page

  • افزودن فرم محصول Adding a product form

  • ایجاد یک لیست انتخابی قابل استفاده مجدد Creating a reusable select list

  • ایجاد یک لیست انتخابی قابل استفاده مجدد Creating a reusable select list

  • ورودی های متنی و عددی قابل استفاده مجدد Reusable textarea and number inputs

  • افزودن یک دراپ زون Adding a drop zone

  • افزودن یک دراپ زون Adding a drop zone

  • یک ظاهر طراحی شده به منطقه افت Styling the drop zone

  • یک ظاهر طراحی شده به منطقه افت Styling the drop zone

  • اعتبار سنجی فرم محصول Validating the product form

  • ارسال داده های فرم Submitting the form data

  • حذف یک محصول از لیست Deleting a product from the list

  • استخراج نقش ها از نشانه Extracting the roles from the token

  • استخراج نقش ها از نشانه Extracting the roles from the token

  • استفاده از نقش ها در برنامه مشتری Using roles in the client app

  • استفاده از نقش ها در برنامه مشتری Using roles in the client app

  • انتشار تغییرات در FlyIO Publishing changes to FlyIO

  • خلاصه پایان دوره End of course summary

به روز رسانی به Net 6 Updating to .Net 6

به روز رسانی به Net 6 Updating to .Net 6

  • پروژه را از .Net 5 به .Net 6 به روز کنید Update the project from .Net 5 to .Net 6

  • پروژه را از .Net 5 به .Net 6 به روز کنید Update the project from .Net 5 to .Net 6

  • Net 6 ویژگی های پروژه جدید .Net 6 new project features

  • Net 6 ویژگی های پروژه جدید .Net 6 new project features

به روز رسانی به .Net 7، React 18 و React Router 6 Updating to .Net 7, React 18 and React Router 6

  • به روز رسانی به Net 7 Updating to .Net 7

  • به روز رسانی به React Router v6 Updating to React Router v6

به روز رسانی به .Net 7، React 18 و React Router 6 Updating to .Net 7, React 18 and React Router 6

  • به روز رسانی به Net 7 Updating to .Net 7

  • به روز رسانی پروژه Net برای استفاده از مدل میزبانی حداقل Updating the .Net project to use the minimal hosting model

  • به روز رسانی پروژه Net برای استفاده از مدل میزبانی حداقل Updating the .Net project to use the minimal hosting model

  • به روز رسانی به React Router v6 Updating to React Router v6

  • به روز رسانی به React 18 Updating to React 18

  • به روز رسانی به React 18 Updating to React 18

نمایش نظرات

آموزش ساخت فروشگاه تجارت الکترونیک با Net، React و Redux
جزییات دوره
31.5 hours
225
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
6,652
4.7 از 5
دارد
دارد
دارد
Neil Cummings
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Neil Cummings Neil Cummings

توسعه دهنده نرم افزار آزاد حرفه ای