آموزش Full Stack React Bootcamp با NET API [2023] [10 پروژه]

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

معرفی Introduction

• خوش آمدی Welcome

• چرا باید یاد بگیرید که واکنش نشان دهید؟ Why should you learn react?

• نسخه ی نمایشی زنده - پروژه نهایی Live Demo - Final Project

• بازخورد Feedback

• منابع اضافی Additional Resources

• آنچه که ما قسمت 1 خواهیم ساخت What we will build Part 1

• آنچه که ما قسمت 2 خواهیم ساخت What we will build Part 2

• پیش نیازهای دوره Course Prerequisites

• چگونه می توان کمک گرفت؟ How to get Help?

• منابع پروژه Project Resources

• ابزار مورد نیاز Tools Needed

• لینک ابزار Tools Link

• برنامه های افزودنی کد ویژوال استودیو Visual Studio Code Extensions

معرفی Introduction

• خوش آمدی Welcome

• چرا باید یاد بگیرید که واکنش نشان دهید؟ Why should you learn react?

• نسخه ی نمایشی زنده - پروژه نهایی Live Demo - Final Project

• بازخورد Feedback

• منابع اضافی Additional Resources

• آنچه که ما قسمت 1 خواهیم ساخت What we will build Part 1

• آنچه که ما قسمت 2 خواهیم ساخت What we will build Part 2

• پیش نیازهای دوره Course Prerequisites

• چگونه می توان کمک گرفت؟ How to get Help?

• منابع پروژه Project Resources

• ابزار مورد نیاز Tools Needed

• لینک ابزار Tools Link

• برنامه های افزودنی کد ویژوال استودیو Visual Studio Code Extensions

React Fundamentals React Fundamentals

• HTML اولیه را راه اندازی کنید و React CDN را اضافه کنید Setup basic HTML and add React CDN

• اولین React Code First React Code

• تکلیف 1 - نوشتن اولین کد React Assignment 1 - Writing first React Code

• ایجاد عنصر و رندر در React Creating Element and rendering in React

• JSX چیست؟ What is JSX?

• راه بهتری برای ایجاد React Projects Better way to create React Projects

• ایجاد پروژه Create Project

• پروژه را اجرا کنید Run the Project

• پروژه پاکسازی CleanUp Project

• پروژه را دوباره کاربردی کنید Make project functional again

• اولین React Component First React Component

• تکلیف 2 - React Component Assignment 2 - React Component

• تکلیف 3 - مولفه فرزند والدین Assignment 3 - Parent Child Component

• راه حل تکلیف 3 - مولفه فرزند والدین Assignment 3 Solution - Parent Child Component

• قوانین JSX Rules of JSX

React Fundamentals React Fundamentals

• HTML اولیه را راه اندازی کنید و React CDN را اضافه کنید Setup basic HTML and add React CDN

• اولین React Code First React Code

• تکلیف 1 - نوشتن اولین کد React Assignment 1 - Writing first React Code

• ایجاد عنصر و رندر در React Creating Element and rendering in React

• JSX چیست؟ What is JSX?

• راه بهتری برای ایجاد React Projects Better way to create React Projects

• ایجاد پروژه Create Project

• پروژه را اجرا کنید Run the Project

• پروژه پاکسازی CleanUp Project

• پروژه را دوباره کاربردی کنید Make project functional again

• اولین React Component First React Component

• تکلیف 2 - React Component Assignment 2 - React Component

• تکلیف 3 - مولفه فرزند والدین Assignment 3 - Parent Child Component

• راه حل تکلیف 3 - مولفه فرزند والدین Assignment 3 Solution - Parent Child Component

• قوانین JSX Rules of JSX

React Components React Components

• با سبک ها کار کنید Work with styles

• اضافه کردن کلاس های بوت استرپ Adding Bootstrap Classes

• کار با کلاس ها قسمت 1 Work with Classes Part 1

• متغیر در JSX Variable in JSX

• تکلیف 3 - اضافه کردن Const Assignment 3 - Adding Const

• راه حل تکلیف 3 - اضافه کردن Const Assignment 3 Solution - Adding Const

• عنصر HTML در JSX HTML Element in JSX

• جزء دانشجویی Student Component

• جزء صادرات و واردات Export and Import Component

• تکلیف 4 - جداسازی جزء دانش آموز Assignment 4 - Separating Student Component

• حل تکلیف 4 - جداسازی جزء دانش آموز Assignment 4 Solution - Separating Student Component

• لوازم و قطعات Props and Components

• کتابخانه ها و تصاویر شخص ثالث را نصب کنید Install third party libraries and Images

• وارد کردن تصویر و طراحی هدر Import Image and Header Design

• پاورقی و جزء اصلی بدنه Footer and Main Body Component

• تکلیف 5 - رفع خطا و طراحی Assignment 5 - Fix Error and Designing

• گذراندن مولفه ها در کودکی Passing Components as Children

• سلسله مراتب نهایی Final Hierarchy

• تابع پیکان Arrow Function

• اجزای عملکردی در مقابل کلاس functional vs class components

• اجزای کلاس Class Components

• تکلیف 6 - MainBody را به جزء کلاس تبدیل کنید Assignment 6 - Convert MainBody to Class Component

React Components React Components

• با سبک ها کار کنید Work with styles

• اضافه کردن کلاس های بوت استرپ Adding Bootstrap Classes

• کار با کلاس ها قسمت 1 Work with Classes Part 1

• متغیر در JSX Variable in JSX

• تکلیف 3 - اضافه کردن Const Assignment 3 - Adding Const

• راه حل تکلیف 3 - اضافه کردن Const Assignment 3 Solution - Adding Const

• عنصر HTML در JSX HTML Element in JSX

• جزء دانشجویی Student Component

• جزء صادرات و واردات Export and Import Component

• تکلیف 4 - جداسازی جزء دانش آموز Assignment 4 - Separating Student Component

• حل تکلیف 4 - جداسازی جزء دانش آموز Assignment 4 Solution - Separating Student Component

• لوازم و قطعات Props and Components

• کتابخانه ها و تصاویر شخص ثالث را نصب کنید Install third party libraries and Images

• وارد کردن تصویر و طراحی هدر Import Image and Header Design

• پاورقی و جزء اصلی بدنه Footer and Main Body Component

• تکلیف 5 - رفع خطا و طراحی Assignment 5 - Fix Error and Designing

• گذراندن مولفه ها در کودکی Passing Components as Children

• سلسله مراتب نهایی Final Hierarchy

• تابع پیکان Arrow Function

• اجزای عملکردی در مقابل کلاس functional vs class components

• اجزای کلاس Class Components

• تکلیف 6 - MainBody را به جزء کلاس تبدیل کنید Assignment 6 - Convert MainBody to Class Component

React State - CounOPedia React State - CounOPedia

• CountOPedia را ایجاد کنید Create CountOPedia

• راه حل تکلیف 7 - راه اندازی CountOPedia Assignment 7 Solution - Setup CountOPedia

• دکمه های برنامه شمارنده Counter Application Buttons

• روی رویدادها کلیک کنید Click Events

• تنظیم و بازیابی وضعیت Setting and Retrieving State

• نسخه ی نمایشی - React State Demo - React State

• خلاصه ایالت State Summary

• نحو جدید SetState New SetState Syntax

• رابط کاربری CountoPedia CountoPedia UI

• پخش تصادفی و دکمه تنظیم مجدد Random play and Reset Button

• تکلیف 8 - وضعیت بازی و آخرین بازی Assignment 8 - Game Status and Last Play

• حل تکلیف 8 - وضعیت بازی و آخرین بازی Assignment 8 Solution - Game Status and Last Play

React State - CounOPedia React State - CounOPedia

• CountOPedia را ایجاد کنید Create CountOPedia

• راه حل تکلیف 7 - راه اندازی CountOPedia Assignment 7 Solution - Setup CountOPedia

• دکمه های برنامه شمارنده Counter Application Buttons

• روی رویدادها کلیک کنید Click Events

• تنظیم و بازیابی وضعیت Setting and Retrieving State

• نسخه ی نمایشی - React State Demo - React State

• خلاصه ایالت State Summary

• نحو جدید SetState New SetState Syntax

• رابط کاربری CountoPedia CountoPedia UI

• پخش تصادفی و دکمه تنظیم مجدد Random play and Reset Button

• تکلیف 8 - وضعیت بازی و آخرین بازی Assignment 8 - Game Status and Last Play

• حل تکلیف 8 - وضعیت بازی و آخرین بازی Assignment 8 Solution - Game Status and Last Play

ContactOPedia - عملیات CRUD ContactOPedia - CRUD Operations

• ایجاد پروژه - ContactOPedia Create Project - ContactOPedia

• افزودن کامپوننت ها Add Components

• اسکلت اجزا Skeleton of Components

• رابط کاربری مخاطب را اضافه کنید Add Contact UI

• ایالت تماس مورد علاقه و عمومی Favorite and General Contact State

• رابط کاربری تماس فردی Individual Contact UI

• با Opedia تماس بگیرید و احساس کنید Look and Feel ContactOPedia

• کنترل کننده تماس را اضافه کنید Add Contact Handler

• افزودن مخاطب در عمل Add Contact in Action

• افزودن اعتبارسنجی Add Validations

• نمایش اعلان اعتبار و موفقیت Display Validation and Success Notification

• موارد دلخواه را تغییر دهید Toggle Favorites

• تکلیف 10 - حذف مخاطب Assignment 10 - Delete Contact

• راه حل تکلیف 10 - حذف مخاطب Assignment 10 Solution - Delete Contact

• افزودن کاربر تصادفی به لیست مخاطبین Add Random User to Contact List

• Axios Call Axios Call

• نسخه ی نمایشی - اضافه کردن مخاطب تصادفی Demo - Adding Random Contact

• تکلیف 11 - حذف همه مخاطبین Assignment 11 - Remove All Contact

• راه حل تکلیف 11 - همه مخاطبین را حذف کنید Assignment 11 Solution - Remove all Contact

• کدام مخاطب باید به روز شود Which Contact has to be updated

• تغییر رابط کاربری بر اساس به‌روزرسانی Toggle UI Based on Update

• دکمه لغو در عمل Cancel Button in Action

• به روز رسانی تماس - قسمت 1 Update Contact- Part 1

• به روز رسانی تماس - قسمت 2 Update Contact - Part 2

ContactOPedia - عملیات CRUD ContactOPedia - CRUD Operations

• ایجاد پروژه - ContactOPedia Create Project - ContactOPedia

• افزودن کامپوننت ها Add Components

• اسکلت اجزا Skeleton of Components

• رابط کاربری مخاطب را اضافه کنید Add Contact UI

• ایالت تماس مورد علاقه و عمومی Favorite and General Contact State

• رابط کاربری تماس فردی Individual Contact UI

• با Opedia تماس بگیرید و احساس کنید Look and Feel ContactOPedia

• کنترل کننده تماس را اضافه کنید Add Contact Handler

• افزودن مخاطب در عمل Add Contact in Action

• افزودن اعتبارسنجی Add Validations

• نمایش اعلان اعتبار و موفقیت Display Validation and Success Notification

• موارد دلخواه را تغییر دهید Toggle Favorites

• تکلیف 10 - حذف مخاطب Assignment 10 - Delete Contact

• راه حل تکلیف 10 - حذف مخاطب Assignment 10 Solution - Delete Contact

• افزودن کاربر تصادفی به لیست مخاطبین Add Random User to Contact List

• Axios Call Axios Call

• نسخه ی نمایشی - اضافه کردن مخاطب تصادفی Demo - Adding Random Contact

• تکلیف 11 - حذف همه مخاطبین Assignment 11 - Remove All Contact

• راه حل تکلیف 11 - همه مخاطبین را حذف کنید Assignment 11 Solution - Remove all Contact

• کدام مخاطب باید به روز شود Which Contact has to be updated

• تغییر رابط کاربری بر اساس به‌روزرسانی Toggle UI Based on Update

• دکمه لغو در عمل Cancel Button in Action

• به روز رسانی تماس - قسمت 1 Update Contact- Part 1

• به روز رسانی تماس - قسمت 2 Update Contact - Part 2

CyclOPedia - اجزای کلاس روش های چرخه زندگی CyclOPedia - Lifecycle Methods Class Components

• ایجاد پروژه - Cyclopedia Create Project - Cyclopedia

• راه اندازی Random API Setup Random API

• مربی نمایش Display Instructor

• کامپوننت به روز رسانی شد Component Did Update

• جزء کنترل شده Controlled Component

• ذخیره در LocalStorage Saving in LocalStorage

• جدا کردن مربی Separating out Instructor

• کامپوننت Unmount می شود Component will UnMount

• لیست دانش آموزان را بارگیری کنید Load Student List

• زمان اشکال Bug time

CyclOPedia - اجزای کلاس روش های چرخه زندگی CyclOPedia - Lifecycle Methods Class Components

• ایجاد پروژه - Cyclopedia Create Project - Cyclopedia

• راه اندازی Random API Setup Random API

• مربی نمایش Display Instructor

• کامپوننت به روز رسانی شد Component Did Update

• جزء کنترل شده Controlled Component

• ذخیره در LocalStorage Saving in LocalStorage

• جدا کردن مربی Separating out Instructor

• کامپوننت Unmount می شود Component will UnMount

• لیست دانش آموزان را بارگیری کنید Load Student List

• زمان اشکال Bug time

WatchOPedia - Hooks in React WatchOPedia - Hooks in React

• WatchOPedia را ایجاد کنید Create WatchOPedia

• راه اندازی شمارنده Setup Counter

• UseState در عمل UseState in Action

• Gotchas با useState Gotchas with useState

• اشیاء و حالت Objects and State

• یک Gotcha دیگر با useState Another Gotcha with useState

• چیزی هیجان انگیز Something Exciting

• راه اندازی فیلم WatchoPedia WatchoPedia Movie Setup

• راه حل تکلیف 12 - نمایش لیست فیلم Assignment 12 Solution - Display Movie List

• تکلیف 13 راه حل - اضافه کردن فیلم برای تماشا Assignment 13 Solution - Add Movie to watch

WatchOPedia - Hooks in React WatchOPedia - Hooks in React

• WatchOPedia را ایجاد کنید Create WatchOPedia

• راه اندازی شمارنده Setup Counter

• UseState در عمل UseState in Action

• Gotchas با useState Gotchas with useState

• اشیاء و حالت Objects and State

• یک Gotcha دیگر با useState Another Gotcha with useState

• چیزی هیجان انگیز Something Exciting

• راه اندازی فیلم WatchoPedia WatchoPedia Movie Setup

• راه حل تکلیف 12 - نمایش لیست فیلم Assignment 12 Solution - Display Movie List

• تکلیف 13 راه حل - اضافه کردن فیلم برای تماشا Assignment 13 Solution - Add Movie to watch

CyclOPedia - اجزای عملکردی روش های چرخه زندگی CyclOPedia - Lifecycle Methods Functional Components

• پروژه اولیه Initial Project

• فیلدهای ورودی نام و بازخورد Name and Feedback Input fields

• مروری بر UseEffect UseEffect Overview

• UseEffect - فقط اولین رندر UseEffect - First Render Only

• UseEffect - Unmount در عمل UseEffect - Unmount in Action

• تکلیف 14 - استفاده از اثر Assignment 14 - Use Effect

• تکلیف 14 راه حل - اثر استفاده Assignment 14 Solution - Use Effect

• بارگیری دانش‌آموز در به‌روزرسانی پیشخوان Load Student on Counter Update

• useRef و مقادیر قبلی useRef and previous values

• از Ref در تعداد دانشجو استفاده کنید Use Ref on Student Count

• استفاده رایج تر از useRef More common use of useRef

• هوک استفاده کرد useld Hook

CyclOPedia - اجزای عملکردی روش های چرخه زندگی CyclOPedia - Lifecycle Methods Functional Components

• پروژه اولیه Initial Project

• فیلدهای ورودی نام و بازخورد Name and Feedback Input fields

• مروری بر UseEffect UseEffect Overview

• UseEffect - فقط اولین رندر UseEffect - First Render Only

• UseEffect - Unmount در عمل UseEffect - Unmount in Action

• تکلیف 14 - استفاده از اثر Assignment 14 - Use Effect

• تکلیف 14 راه حل - اثر استفاده Assignment 14 Solution - Use Effect

• بارگیری دانش‌آموز در به‌روزرسانی پیشخوان Load Student on Counter Update

• useRef و مقادیر قبلی useRef and previous values

• از Ref در تعداد دانشجو استفاده کنید Use Ref on Student Count

• استفاده رایج تر از useRef More common use of useRef

• هوک استفاده کرد useld Hook

RouteOPedia - مسیریابی در React RouteOPedia - Routing in React

• راه اندازی RouteOPedia Setup RouteOPedia

• کامپوننت های بیشتری ایجاد کنید Create More Components

• مسیر اول First Route

• کامپوننت پیوند Link Component

• تکلیف 15 - مسیرهای محصول Assignment 15 - Product Routes

• تکلیف 15 - راه حل مسیرهای محصول Assignment 15 - Product Routes Solution

• مسیرهای تو در تو Nested Routes

• فهرست در مسیر تودرتو Index in Nested Route

• پیدا نشد Not Found

• پارامترها در URL Parameters in URL

• تکلیف 16 - پارامترها در URL Assignment 16 - Parameters in URL

• کامپوننت NavLink NavLink Component

• با استفاده از UseNavigate Hook حرکت کنید Navigate using useNavigate Hook

• استفاده از کامپوننت پیوند برای پیمایش Using Link Component to Navigate

• روش ناوبری دیگر Another Navigation Method

• به عقب پیمایش کنید Navigate back

RouteOPedia - مسیریابی در React RouteOPedia - Routing in React

• راه اندازی RouteOPedia Setup RouteOPedia

• کامپوننت های بیشتری ایجاد کنید Create More Components

• مسیر اول First Route

• کامپوننت پیوند Link Component

• تکلیف 15 - مسیرهای محصول Assignment 15 - Product Routes

• تکلیف 15 - راه حل مسیرهای محصول Assignment 15 - Product Routes Solution

• مسیرهای تو در تو Nested Routes

• فهرست در مسیر تودرتو Index in Nested Route

• پیدا نشد Not Found

• پارامترها در URL Parameters in URL

• تکلیف 16 - پارامترها در URL Assignment 16 - Parameters in URL

• کامپوننت NavLink NavLink Component

• با استفاده از UseNavigate Hook حرکت کنید Navigate using useNavigate Hook

• استفاده از کامپوننت پیوند برای پیمایش Using Link Component to Navigate

• روش ناوبری دیگر Another Navigation Method

• به عقب پیمایش کنید Navigate back

ReduxOPedia - Redux and React ReduxOPedia - Redux and React

• ReduxOPedia را راه اندازی کنید Setup ReduxOPedia

• فروشگاه Redux را اضافه کنید Add Redux Store

• اولین Reducer و Actions را ایجاد کنید Create first Reducer and Actions

• Log State و Dispatch Action Log State and Dispatch Action

• مقدار را از حالت بازیابی کنید Retrieve value from state

• Dispatching Action از React Component Dispatching Action from React Component

• تکلیف 17 - ضریب شمارنده Assignment 17 - Counter Multiplier

• حل تکلیف 17 - ضریب شمارنده Assignment 17 Solution - Counter Multiplier

• برش مقصد را اضافه کنید Add Destination Slice

• نمایش مقاصد Display Destinations

• مقصد را انتخاب کنید Select Destination

• نمایش مقصد انتخاب شده Display selected destination

• شمارنده و مقصد را بازنشانی کنید Reset counter and destination

• به عملکرد یک کاهش دهنده متفاوت گوش دهید Listen to action of a different Reducer

• به رشته های جادویی نه بگویید Say NO to magic strings

• اقدامات سفارشی Custom Actions

• رویکرد جایگزین برای واردات و صادرات Alternative Approach for import and export

ReduxOPedia - Redux and React ReduxOPedia - Redux and React

• ReduxOPedia را راه اندازی کنید Setup ReduxOPedia

• فروشگاه Redux را اضافه کنید Add Redux Store

• اولین Reducer و Actions را ایجاد کنید Create first Reducer and Actions

• Log State و Dispatch Action Log State and Dispatch Action

• مقدار را از حالت بازیابی کنید Retrieve value from state

• Dispatching Action از React Component Dispatching Action from React Component

• تکلیف 17 - ضریب شمارنده Assignment 17 - Counter Multiplier

• حل تکلیف 17 - ضریب شمارنده Assignment 17 Solution - Counter Multiplier

• برش مقصد را اضافه کنید Add Destination Slice

• نمایش مقاصد Display Destinations

• مقصد را انتخاب کنید Select Destination

• نمایش مقصد انتخاب شده Display selected destination

• شمارنده و مقصد را بازنشانی کنید Reset counter and destination

• به عملکرد یک کاهش دهنده متفاوت گوش دهید Listen to action of a different Reducer

• به رشته های جادویی نه بگویید Say NO to magic strings

• اقدامات سفارشی Custom Actions

• رویکرد جایگزین برای واردات و صادرات Alternative Approach for import and export

TravelOPedia - Redux Toolkit، Query، Mutations and Slice TravelOPedia - Redux Toolkit, Query, Mutations and Slice

• راه اندازی TravelOPedia Setup TravelOPedia

• راه اندازی اجزای مقصد Setup Destination Components

• سرور JSON را راه اندازی کنید Setup JSON Server

• API مقصد ایجاد کنید Create Destination API

• واکشی سوابق از API Fetch Records from API

• افزودن مؤلفه کنترلر مقصد Add Destination Controller Component

• جهش ها را اضافه کنید Add Mutations

• POST Mutation را فراخوانی کنید Call POST Mutation

• پرس و جو در مقابل جهش query vs mutation

• ذخیره سازی با پرس و جوی RTK Caching with RTK Query

• برچسب ها در عمل TAGS in Action

• تکلیف 18 - حذف مقصد Assignment 18 - Delete Destination

• راه حل تکلیف 18 - حذف مقصد Assignment 18 Solution - Delete Destination

• پاسخ از Query و Parameters Response from Query and Parameters

• تفکیک مقصد فردی Separating out Individual Destination

• تکلیف 19 - کارکرد ویرایش Assignment 19 - Edit Functionality

• حل تکلیف 19 - قابلیت ویرایش Assignment 19 Solution - Edit Functionality

• پرس و جو RTK را با فروشگاه Redux یکپارچه کنید Integrate RTK Query with Redux Store

• API دیگری را فراخوانی کنید Call Another API

• نمایش مقصد تصادفی Show Random Destination

• ProjectOPedia ProjectOPedia

TravelOPedia - Redux Toolkit، Query، Mutations and Slice TravelOPedia - Redux Toolkit, Query, Mutations and Slice

• راه اندازی TravelOPedia Setup TravelOPedia

• راه اندازی اجزای مقصد Setup Destination Components

• سرور JSON را راه اندازی کنید Setup JSON Server

• API مقصد ایجاد کنید Create Destination API

• واکشی سوابق از API Fetch Records from API

• افزودن مؤلفه کنترلر مقصد Add Destination Controller Component

• جهش ها را اضافه کنید Add Mutations

• POST Mutation را فراخوانی کنید Call POST Mutation

• پرس و جو در مقابل جهش query vs mutation

• ذخیره سازی با پرس و جوی RTK Caching with RTK Query

• برچسب ها در عمل TAGS in Action

• تکلیف 18 - حذف مقصد Assignment 18 - Delete Destination

• راه حل تکلیف 18 - حذف مقصد Assignment 18 Solution - Delete Destination

• پاسخ از Query و Parameters Response from Query and Parameters

• تفکیک مقصد فردی Separating out Individual Destination

• تکلیف 19 - کارکرد ویرایش Assignment 19 - Edit Functionality

• حل تکلیف 19 - قابلیت ویرایش Assignment 19 Solution - Edit Functionality

• پرس و جو RTK را با فروشگاه Redux یکپارچه کنید Integrate RTK Query with Redux Store

• API دیگری را فراخوانی کنید Call Another API

• نمایش مقصد تصادفی Show Random Destination

• ProjectOPedia ProjectOPedia

12. NET API - راه اندازی اولیه 12 .NET API - Basic Setup

• API اختیاری است و می توانید از API در اینجا استفاده کنید API is optional and you can use the API right here

• راه اندازی حساب ذخیره سازی برای تصاویر در Azure Setup Storage Account for Images on Azure

• ایجاد پروژه API Create API Project

• بسته های NuGet را نصب کنید Install NuGet Packages

• رشته اتصال و DBContext را راه اندازی کنید Setup Connection String and DBContext

• جداول SQL ایجاد کنید و Migrations را فشار دهید Create SQL Tables and push Migrations

• نام را به AspNetUsers اضافه کنید Add Name to AspNetUsers

• ایجاد جدول آیتم های منو Create Menu Item Table

• آیتم های منوی دانه Seed Menu Items

• دریافت آیتم منو و پاسخ API Get Menu Item and API Response

• آیتم منوی فردی را دریافت کنید Get Individual Menu Item

• رشته اتصال حساب ذخیره سازی را اضافه کنید Add Storage Account Connection String

• سرویس Blob را پیاده سازی کنید Implement Blob Service

12. NET API - راه اندازی اولیه 12 .NET API - Basic Setup

• API اختیاری است و می توانید از API در اینجا استفاده کنید API is optional and you can use the API right here

• راه اندازی حساب ذخیره سازی برای تصاویر در Azure Setup Storage Account for Images on Azure

• ایجاد پروژه API Create API Project

• بسته های NuGet را نصب کنید Install NuGet Packages

• رشته اتصال و DBContext را راه اندازی کنید Setup Connection String and DBContext

• جداول SQL ایجاد کنید و Migrations را فشار دهید Create SQL Tables and push Migrations

• نام را به AspNetUsers اضافه کنید Add Name to AspNetUsers

• ایجاد جدول آیتم های منو Create Menu Item Table

• آیتم های منوی دانه Seed Menu Items

• دریافت آیتم منو و پاسخ API Get Menu Item and API Response

• آیتم منوی فردی را دریافت کنید Get Individual Menu Item

• رشته اتصال حساب ذخیره سازی را اضافه کنید Add Storage Account Connection String

• سرویس Blob را پیاده سازی کنید Implement Blob Service

NET API - مورد منو .NET API - Menu Item

• ایجاد آیتم منو Create Menu Item

• ایجاد آیتم منو در عمل Create Menu Item In Action

• به روز رسانی مورد منو Update Menu Item

• حذف آیتم منو Delete Menu Item

• کد وضعیت صحیح و پرچم موفقیت Correct Status Code and Success Flag

NET API - مورد منو .NET API - Menu Item

• ایجاد آیتم منو Create Menu Item

• ایجاد آیتم منو در عمل Create Menu Item In Action

• به روز رسانی مورد منو Update Menu Item

• حذف آیتم منو Delete Menu Item

• کد وضعیت صحیح و پرچم موفقیت Correct Status Code and Success Flag

NET API - احراز هویت و مجوز .NET API - Authentication and Authorization

• ورود و ثبت نام DTO را اضافه کنید Add Login and Register DTOs

• Auth Controller و Dependency Injection Auth Controller and Dependency Injection

• ثبت نام در عمل Register in Action

• وارد اکشن شوید Login in Action

• توکن JWT JWT Token

• نقاط پایانی احراز هویت و مجوز را اضافه کنید Add Authentication and Authorization Endpoints

• راه اندازی API برای احراز هویت Setup API for Authentication

• امنیت را به Swagger اضافه کنید Add Security to Swagger

NET API - احراز هویت و مجوز .NET API - Authentication and Authorization

• ورود و ثبت نام DTO را اضافه کنید Add Login and Register DTOs

• Auth Controller و Dependency Injection Auth Controller and Dependency Injection

• ثبت نام در عمل Register in Action

• وارد اکشن شوید Login in Action

• توکن JWT JWT Token

• نقاط پایانی احراز هویت و مجوز را اضافه کنید Add Authentication and Authorization Endpoints

• راه اندازی API برای احراز هویت Setup API for Authentication

• امنیت را به Swagger اضافه کنید Add Security to Swagger

NET API - سبد خرید و سفارش .NET API - Shopping Cart and Order

• اضافه کردن مدل های سبد خرید Add Shopping Cart Models

• کنترلر و منطق سبد خرید Shopping Cart Controller and Logic

• نقطه پایانی سبد خرید را به روز کنید Update Shopping Cart Endpoint

• تست نقطه پایانی سبد خرید Test Shopping Cart Endpoint

• دریافت سبد خرید Get Shopping Cart

• مدل سرصفحه و جزئیات سفارش Order Header and Details Model

• سفارش DTO ها Order DTOs

• سفارش بگیرید Get Order

• ایجاد نظم در عمل Create Order in Action

• به روز رسانی جزئیات سفارش Update Order Details

• نقطه پایان پرداخت خطی Stripe Payment Endpoint

• Stripe Client Secret در عمل Stripe Client Secret in Action

• به روز رسانی API سبد خرید Shopping Cart API Update

• استقرار API Deploy API

NET API - سبد خرید و سفارش .NET API - Shopping Cart and Order

• اضافه کردن مدل های سبد خرید Add Shopping Cart Models

• کنترلر و منطق سبد خرید Shopping Cart Controller and Logic

• نقطه پایانی سبد خرید را به روز کنید Update Shopping Cart Endpoint

• تست نقطه پایانی سبد خرید Test Shopping Cart Endpoint

• دریافت سبد خرید Get Shopping Cart

• مدل سرصفحه و جزئیات سفارش Order Header and Details Model

• سفارش DTO ها Order DTOs

• سفارش بگیرید Get Order

• ایجاد نظم در عمل Create Order in Action

• به روز رسانی جزئیات سفارش Update Order Details

• نقطه پایان پرداخت خطی Stripe Payment Endpoint

• Stripe Client Secret در عمل Stripe Client Secret in Action

• به روز رسانی API سبد خرید Shopping Cart API Update

• استقرار API Deploy API

16 انبه قرمز - صفحه اصلی 16 Red Mango - Home Page

• تایپ اسکریپت مقدمه Typescript Introduction

• ایجاد اپلیکیشن با تایپ اسکریپت Create App with Typescript

• پکیج Json Package Json

• پاکسازی فایل File CleanUp

• آیکون های Bootstrap و Bootstrap را نصب کنید Install Bootstrap and Bootstrap Icons

• کامپوننت هدر و پاورقی Header and Footer Component

• رابط کاربری سرصفحه Header UI

• واکشی آیتم ها و رابط های منو در TS Fetch Menu Items & Interfaces in TS

• ساختار بهتر Better Structure

• جزء کارت Card Component

• رابط کاربری صفحه اصلی Home Page UI

• Routing and Not Found را اضافه کنید Add Routing and Not Found

• صفحه جزئیات آیتم منو Menu Item Details Page

16 انبه قرمز - صفحه اصلی 16 Red Mango - Home Page

• تایپ اسکریپت مقدمه Typescript Introduction

• ایجاد اپلیکیشن با تایپ اسکریپت Create App with Typescript

• پکیج Json Package Json

• پاکسازی فایل File CleanUp

• آیکون های Bootstrap و Bootstrap را نصب کنید Install Bootstrap and Bootstrap Icons

• کامپوننت هدر و پاورقی Header and Footer Component

• رابط کاربری سرصفحه Header UI

• واکشی آیتم ها و رابط های منو در TS Fetch Menu Items & Interfaces in TS

• ساختار بهتر Better Structure

• جزء کارت Card Component

• رابط کاربری صفحه اصلی Home Page UI

• Routing and Not Found را اضافه کنید Add Routing and Not Found

• صفحه جزئیات آیتم منو Menu Item Details Page

17 Redux و RTK را راه اندازی کنید 17 Setup Redux and RTK

• Redux و Tedux Toolkit را به Project اضافه کنید Add Redux and Tedux Toolkit to Project

• پرس و جو را به موارد واکشی منو اضافه کنید Add Query to Fetch Menu Items

• برای واکشی داده ها با Slice تماس بگیرید Call Slice to Fetch Data

• نمایش متن در حال بارگذاری Display Loading Text

• تکلیف 20 - بارگذاری جزئیات آیتم منو Assignment 20 - Load Menu Item Details

• راه حل تکلیف 20 - بارگذاری جزئیات آیتم منو Assignment 20 Solution - Load Menu Item Details

• مدیریت مقدار در جزئیات آیتم منو Manage Quantity on Menu Item Details

17 Redux و RTK را راه اندازی کنید 17 Setup Redux and RTK

• Redux و Tedux Toolkit را به Project اضافه کنید Add Redux and Tedux Toolkit to Project

• پرس و جو را به موارد واکشی منو اضافه کنید Add Query to Fetch Menu Items

• برای واکشی داده ها با Slice تماس بگیرید Call Slice to Fetch Data

• نمایش متن در حال بارگذاری Display Loading Text

• تکلیف 20 - بارگذاری جزئیات آیتم منو Assignment 20 - Load Menu Item Details

• راه حل تکلیف 20 - بارگذاری جزئیات آیتم منو Assignment 20 Solution - Load Menu Item Details

• مدیریت مقدار در جزئیات آیتم منو Manage Quantity on Menu Item Details

سبد خرید Shopping Cart

• شناسه کاربری برای سبد خرید User ID for Shopping Cart

• پرس و جو و جهش سبد خرید را راه اندازی کنید Setup Shopping Cart Query and Mutation

• افزودن به سبد خرید در عمل Add to Cart in Action

• تکلیف 21 - افزودن به سبد خرید صفحه اصلی Assignment 21 - Add to Cart Home Page

• راه حل تکلیف 21 - افزودن به سبد خرید صفحه اصلی Assignment 21 Solution - Add to Cart Home Page

• مینی لودر را در صفحه اصلی اضافه کنید Add Mini Loader on Home Page

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

• لودر اصلی Main Loader

• لودر در صفحه افزودن به سبد خرید در جزئیات Loader on Add to Cart in Details Page

• رابط سبد خرید Shopping Cart Interface

• سبد خرید را دریافت کنید و در Slice ذخیره کنید Get Shopping Cart and Store in Slice

• صفحه سبد خرید Shopping Cart Page

• خلاصه سبد خرید Shopping Cart Summary

• کاهش دهنده ها را به برش سبد خرید اضافه کنید Add Reducers to Shopping Cart Slice

• سبد خرید عملکردی Shopping Cart Functional

• نمایش اقلام متمایز در سبد خرید Show Distinct Items in Cart

• نمایش جزئیات پیکاپ Display Pickup Details

• روش کمکی جزء کنترلر Controller Component Helper Method

• در حال بارگذاری کامپوننت Loading Component

سبد خرید Shopping Cart

• شناسه کاربری برای سبد خرید User ID for Shopping Cart

• پرس و جو و جهش سبد خرید را راه اندازی کنید Setup Shopping Cart Query and Mutation

• افزودن به سبد خرید در عمل Add to Cart in Action

• تکلیف 21 - افزودن به سبد خرید صفحه اصلی Assignment 21 - Add to Cart Home Page

• راه حل تکلیف 21 - افزودن به سبد خرید صفحه اصلی Assignment 21 Solution - Add to Cart Home Page

• مینی لودر را در صفحه اصلی اضافه کنید Add Mini Loader on Home Page

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

• لودر اصلی Main Loader

• لودر در صفحه افزودن به سبد خرید در جزئیات Loader on Add to Cart in Details Page

• رابط سبد خرید Shopping Cart Interface

• سبد خرید را دریافت کنید و در Slice ذخیره کنید Get Shopping Cart and Store in Slice

• صفحه سبد خرید Shopping Cart Page

• خلاصه سبد خرید Shopping Cart Summary

• کاهش دهنده ها را به برش سبد خرید اضافه کنید Add Reducers to Shopping Cart Slice

• سبد خرید عملکردی Shopping Cart Functional

• نمایش اقلام متمایز در سبد خرید Show Distinct Items in Cart

• نمایش جزئیات پیکاپ Display Pickup Details

• روش کمکی جزء کنترلر Controller Component Helper Method

• در حال بارگذاری کامپوننت Loading Component

19 احراز هویت و مجوز 19 Authentication and Authorization

• ورود و ثبت نام UI Login and Register UI

• نحوه عملکرد ورود و ثبت نام How Login and Register will work

• Auth API را اضافه کنید Add Auth API

• بخش احراز هویت و رابط کاربری Authentication Slice and User Interface

• اجزای کنترل کننده در رجیستر Controller Components in Register

• رابط API پاسخ Response API Interface

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

• فیلدهای ورود کنترلر Controller Login Fields

• وارد اکشن شوید Login in Action

• Token را به LocalStorage اضافه کنید Add Token to LocalStorage

• رمزگشایی JWT Token Decode JWT Token

• دکمه ورود و خروج را تغییر دهید Toggle Login and Logout button

• ورود و خروج در عمل Login and Logout in Action

• اشکال کوچک با احراز هویت Small Bug with Authentication

• Toastify Notifications Toastify Notifications

• اضافه کردن Loader در ثبت نام Add Loader on Register

• اجزای آزمایشی را برای احراز هویت و مجوز اضافه کنید Add Test Components for Authentication and Authorization

• احراز هویت با HOC Authentication with HOC

• مجوز با HOC Authorization with HOC

• فقط کاربر تایید شده می تواند به سبد خرید اضافه کند Only Authenticated User can Add to Cart

• شناسه کاربری پویا Dynamic User ID

• اجزای تست پاکسازی Cleanup test Components

19 احراز هویت و مجوز 19 Authentication and Authorization

• ورود و ثبت نام UI Login and Register UI

• نحوه عملکرد ورود و ثبت نام How Login and Register will work

• Auth API را اضافه کنید Add Auth API

• بخش احراز هویت و رابط کاربری Authentication Slice and User Interface

• اجزای کنترل کننده در رجیستر Controller Components in Register

• رابط API پاسخ Response API Interface

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

• فیلدهای ورود کنترلر Controller Login Fields

• وارد اکشن شوید Login in Action

• Token را به LocalStorage اضافه کنید Add Token to LocalStorage

• رمزگشایی JWT Token Decode JWT Token

• دکمه ورود و خروج را تغییر دهید Toggle Login and Logout button

• ورود و خروج در عمل Login and Logout in Action

• اشکال کوچک با احراز هویت Small Bug with Authentication

• Toastify Notifications Toastify Notifications

• اضافه کردن Loader در ثبت نام Add Loader on Register

• اجزای آزمایشی را برای احراز هویت و مجوز اضافه کنید Add Test Components for Authentication and Authorization

• احراز هویت با HOC Authentication with HOC

• مجوز با HOC Authorization with HOC

• فقط کاربر تایید شده می تواند به سبد خرید اضافه کند Only Authenticated User can Add to Cart

• شناسه کاربری پویا Dynamic User ID

• اجزای تست پاکسازی Cleanup test Components

20 پرداخت 20 Payments

• بارگیری جزئیات کاربر کاربر وارد شده Load User Details of Logged in User

• Stripe and React Stripe and React

• ایجاد API پرداخت Create Payment API

• Calling Payment API Calling Payment API

• از وضعیت موقعیت مکانی استفاده کنید Use Location State

• نسخه ی نمایشی کارت راه راه Stripe Card Demo

• سفارش خلاصه UI Order Summary UI

• رابط های محلی Local Interfaces

• خلاصه سفارش پویا Dynamic Order Summary

• پردازش نواری Stripe Processing

• شیء موفقیت راه راه Stripe success object

20 پرداخت 20 Payments

• بارگیری جزئیات کاربر کاربر وارد شده Load User Details of Logged in User

• Stripe and React Stripe and React

• ایجاد API پرداخت Create Payment API

• Calling Payment API Calling Payment API

• از وضعیت موقعیت مکانی استفاده کنید Use Location State

• نسخه ی نمایشی کارت راه راه Stripe Card Demo

• سفارش خلاصه UI Order Summary UI

• رابط های محلی Local Interfaces

• خلاصه سفارش پویا Dynamic Order Summary

• پردازش نواری Stripe Processing

• شیء موفقیت راه راه Stripe success object

21 سفارش 21 Order

• سفارش API Order API

• برای ایجاد سفارش، شیء سفارش ایجاد کنید Create Order Object to Create Order

• ایجاد سفارش Create Order

• منطق تایید شده را سفارش دهید Order Confirmed Logic

• صفحه تایید سفارش Order Confirmation Page

• دریافت نقاط پایانی سفارش در API Get Order Endpoints in API

• رابط کاربری سفارشات من My Orders UI

• سفارشات من پویا Dynamic My Orders

• اشکال در سفارشات من Bug with my orders

• یک جزء جدید برای فهرست سفارش بسازید Make a new component for Order List

• 12 جزئیات سفارش 12 Order Details

• 13 تکلیف 22 - حل اشکال داده 13 Assignment 22 - Solve Data Bug

• 14 سربرگ سفارش ها را بر اساس نقش مدیریت کنید 14 Manage Orders Header based on Role

• 15 روش کمکی رنگ وضعیت 15 Status Color Helper Method

• 16 نشان برای وضعیت سفارش نمایش دهید 16 Display Badge for Order Status

• 17 دکمه بازگشت به سفارش 17 Back to Order Button

• 18 دکمه برای وضعیت Nest 18 Buttons for Nest Status

• 19 نشان وضعیت سفارش در فهرست سفارش 19 Order Status Badge on Order List

• 20 Order API - PUT Endpoint 20 Order API - PUT Endpoint

• 21 به روز رسانی وضعیت سفارش 21 Update Order Status

• 22 دکمه لغو و تکمیل شده 22 Cancel & Completed Buttons Condition

• 23 صفحه همه سفارشات 23 All Orders Page

21 سفارش 21 Order

• سفارش API Order API

• برای ایجاد سفارش، شیء سفارش ایجاد کنید Create Order Object to Create Order

• ایجاد سفارش Create Order

• منطق تایید شده را سفارش دهید Order Confirmed Logic

• صفحه تایید سفارش Order Confirmation Page

• دریافت نقاط پایانی سفارش در API Get Order Endpoints in API

• رابط کاربری سفارشات من My Orders UI

• سفارشات من پویا Dynamic My Orders

• اشکال در سفارشات من Bug with my orders

• یک جزء جدید برای فهرست سفارش بسازید Make a new component for Order List

• 12 جزئیات سفارش 12 Order Details

• 13 تکلیف 22 - حل اشکال داده 13 Assignment 22 - Solve Data Bug

• 14 سربرگ سفارش ها را بر اساس نقش مدیریت کنید 14 Manage Orders Header based on Role

• 15 روش کمکی رنگ وضعیت 15 Status Color Helper Method

• 16 نشان برای وضعیت سفارش نمایش دهید 16 Display Badge for Order Status

• 17 دکمه بازگشت به سفارش 17 Back to Order Button

• 18 دکمه برای وضعیت Nest 18 Buttons for Nest Status

• 19 نشان وضعیت سفارش در فهرست سفارش 19 Order Status Badge on Order List

• 20 Order API - PUT Endpoint 20 Order API - PUT Endpoint

• 21 به روز رسانی وضعیت سفارش 21 Update Order Status

• 22 دکمه لغو و تکمیل شده 22 Cancel & Completed Buttons Condition

• 23 صفحه همه سفارشات 23 All Orders Page

22 مورد منو 22 Menu Items

• صفحه فهرست آیتم های منو ایجاد کنید Create Menu Item List Page

• تکلیف 23 - فهرست آیتم های منوی پویا Assignment 23 - Dynamic Menu Item List

• آیتم منو Upsert UI Menu Item Upsert UI

• آیتم منوی اجزای کنترلر Controller Components Menu Item

• آپلود تصویر در React Upload Image in React

• جهش های API مورد منو Menu Item API Mutations

• ایجاد آیتم منو Create Menu Item

• طراحی به روز رسانی Update Designing

• آیتم منو را برای به روز رسانی بارگیری کنید Load Menu Item to Update

• به روز رسانی مورد منو Update Menu Item

• کشویی دسته Category Dropdown

• اشکال کوچک Small Bug

• حذف آیتم منو Delete Menu Item

• تکلیف 25 - داده ها با به روز کردن از بین می روند Assignment 25 - Data goes away on refresh

• تکلیف 25 - حل اشکال Assignment 25 - Bug Solution

22 مورد منو 22 Menu Items

• صفحه فهرست آیتم های منو ایجاد کنید Create Menu Item List Page

• تکلیف 23 - فهرست آیتم های منوی پویا Assignment 23 - Dynamic Menu Item List

• آیتم منو Upsert UI Menu Item Upsert UI

• آیتم منوی اجزای کنترلر Controller Components Menu Item

• آپلود تصویر در React Upload Image in React

• جهش های API مورد منو Menu Item API Mutations

• ایجاد آیتم منو Create Menu Item

• طراحی به روز رسانی Update Designing

• آیتم منو را برای به روز رسانی بارگیری کنید Load Menu Item to Update

• به روز رسانی مورد منو Update Menu Item

• کشویی دسته Category Dropdown

• اشکال کوچک Small Bug

• حذف آیتم منو Delete Menu Item

• تکلیف 25 - داده ها با به روز کردن از بین می روند Assignment 25 - Data goes away on refresh

• تکلیف 25 - حل اشکال Assignment 25 - Bug Solution

23 رابط کاربری صفحه اصلی 23 Home UI

• بنر Banner

• تغییر نام پوشه Renaming Folder

• ارزش جستجوی فروشگاه در Redux Store Search Value in Redux

• جستجو در بنر Search in Banner

• نمایش همه دسته برای فیلتر Show all Category for Filter

• دسته بندی فیلترها در عمل Category Filters in Action

• مرتب سازی در عمل Sorting in Action

• از دریافت سبد خرید صرفنظر کنید Skip Getting Shopping Cart

• نقاط پایانی احراز هویت و مجوز Authentication and Authorization End Points

• به Azure مستقر شوید Deploy to Azure

23 رابط کاربری صفحه اصلی 23 Home UI

• بنر Banner

• تغییر نام پوشه Renaming Folder

• ارزش جستجوی فروشگاه در Redux Store Search Value in Redux

• جستجو در بنر Search in Banner

• نمایش همه دسته برای فیلتر Show all Category for Filter

• دسته بندی فیلترها در عمل Category Filters in Action

• مرتب سازی در عمل Sorting in Action

• از دریافت سبد خرید صرفنظر کنید Skip Getting Shopping Cart

• نقاط پایانی احراز هویت و مجوز Authentication and Authorization End Points

• به Azure مستقر شوید Deploy to Azure

صفحه بندی و فهرست ترتیب جستجو Pagination and Search Order List

• معرفی Introduction

• جستجو را به سفارشات در API اضافه کنید Add search to orders in API

• صفحه بندی را به سفارشات در API اضافه کنید Add pagination to orders in API

• افزودن فیلترهای رابط کاربری Add UI Filters

• اجزای کنترلر Controller Components

• فیلترهای محلی در عمل Local Filters in Action

• فیلترهای API در عمل API Filters in Action

• اشکال کوچک Small Bug

• کل رکوردها را دریافت کنید Get Total Records

• صفحه بندی در عمل Pagination in Action

• اندازه صفحه در عمل Page Size in Action

صفحه بندی و فهرست ترتیب جستجو Pagination and Search Order List

• معرفی Introduction

• جستجو را به سفارشات در API اضافه کنید Add search to orders in API

• صفحه بندی را به سفارشات در API اضافه کنید Add pagination to orders in API

• افزودن فیلترهای رابط کاربری Add UI Filters

• اجزای کنترلر Controller Components

• فیلترهای محلی در عمل Local Filters in Action

• فیلترهای API در عمل API Filters in Action

• اشکال کوچک Small Bug

• کل رکوردها را دریافت کنید Get Total Records

• صفحه بندی در عمل Pagination in Action

• اندازه صفحه در عمل Page Size in Action

دوره های بیشتر More Courses

• DotNetMastery DotNetMastery

دوره های بیشتر More Courses

• DotNetMastery DotNetMastery