آموزش راهنمای کامل ساخت اپلیکیشن با Net Core و React

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

معرفی Introduction

• معرفی دوره Course introduction

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

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

• کد منبع و منابع استفاده شده در این دوره Source code and Resources used on this course

Walking Skeleton قسمت 1 - API Walking Skeleton Part 1 - API

• معرفی Introduction

• ایجاد پروژه ها و مراجع .Net Creating the .Net projects and references

• بررسی فایل های پروژه و راه اندازی Reviewing the project files and startup

• کنترلر API و استفاده از پستچی The API controller and using postman

• ایجاد یک موجودیت دامنه Creating a domain entity

• افزودن یک Entity Framework Db Context Adding an Entity Framework Db Context

• ایجاد یک کد Entity Framework برای اولین بار مهاجرت Creating an Entity Framework code first migration

• ایجاد پایگاه داده Creating the database

• انتقال داده ها به پایگاه داده Seeding data to the Database

• اضافه کردن یک کنترلر API Adding an API controller

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

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

اسکلت راه رفتن قسمت 2 - مشتری Walking Skeleton Part 2 - Client

• معرفی Introduction

• ساخت پروژه React Creating the React project

• بررسی فایل های پروژه React Reviewing the React project files

• چرا واکنش نشان دهیم؟ Why React?

• React Components React Components

• مفاهیم تایپ اسکریپت Typescript concepts

• نسخه ی نمایشی تایپ اسکریپت Typescript demo

• استفاده از Typescript با React Using Typescript with React

• React dev tools React dev tools

• واکشی داده ها از API Fetching data from the API

• سیاست CORS CORS Policy

• Semantic UI React Semantic UI React

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

ایجاد یک برنامه CRUD با استفاده از الگوی CQRS + Mediator Creating a CRUD application using the CQRS + Mediator pattern

• معرفی Introduction

• معماری پاک Clean Architecture

• CQRS CQRS

• ایجاد اولین کنترل کننده Query ما Creating our first Query handler

• کنترلرهای نازک در API Thin controllers in the API

• اضافه کردن یک کنترل کننده جزئیات Adding a Details handler

• اضافه کردن یک کنترل کننده ایجاد Adding a Create handler

• افزودن کنترل کننده ویرایش Adding an Edit handler

• اضافه کردن AutoMapper Adding AutoMapper

• اضافه کردن یک کنترل کننده حذف Adding a Delete handler

• خانه داری کلاس استارتاپی Startup class housekeeping

• نشانه های لغو Cancellation tokens

• استفاده از دیباگر در VS Code Using the debugger in VS Code

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

ایجاد یک برنامه CRUD در React Creating a CRUD application in React

• معرفی Introduction

• ساختار پوشه در React Folder structure in React

• افزودن رابط Activity Adding an Activity interface

• افزودن نوار Nav Adding a Nav bar

• اضافه کردن سبک به نوار ناوبری Adding some style to the nav bar

• ایجاد داشبورد فعالیت Creating an activity dashboard

• ایجاد لیست فعالیت Creating an activity list

• ایجاد نمای جزئیات Creating a details view

• ایجاد فرم فعالیت Creating an Activity form

• انتخاب یک فعالیت برای مشاهده Selecting an activity to view

• نمایش فرم ایجاد/ویرایش Displaying the create/edit form

• ویرایش یک اکتیویتی و اصول اولیه فرم در React Editing an activity and form basics in React

• ایجاد و ویرایش ارسال را مدیریت کنید Handle create and edit submission

• استفاده از GUID برای شناسه فعالیت Using a GUID for the activity id

• حذف یک فعالیت Deleting an activity

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

Axios Axios

• معرفی Introduction

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

• انواع Axios Axios types

• اضافه کردن نشانگرهای بارگذاری Adding loading indicators

• ارسال اطلاعات به سرور Posting data to the server

• حذف فعالیت در سرور Deleting activity on the server

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

MobX MobX

• معرفی Introduction

• MobX چیست؟ What is MobX?

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

• اقدامات MobX MobX actions

• بازسازی برنامه برای استفاده از MobX Refactoring the app to use MobX

• حالت سخت MobX MobX strict mode

• انتخاب یک فعالیت با استفاده از MobX Selecting an Activity using MobX

• ایجاد یک فعالیت با استفاده از MobX Creating an Activity using MobX

• حذف یک فعالیت با استفاده از MobX Deleting an activity using MobX

• استفاده از یک شی نقشه جاوا اسکریپت برای ذخیره فعالیت ها Using a Javascript map object to store the activities

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

مسیریابی Routing

• معرفی Introduction

• نصب روتر React Installing React Router

• اضافه کردن مسیرها Adding routes

• افزودن پیوندهای ناو Adding nav links

• افزودن لینک جزئیات Adding a details link

• گرفتن یک فعالیت فردی Getting an individual activity

• استفاده از پارامترهای مسیر Using route parameters

• افزودن مسیر فعالیت ویرایش Adding the edit activity route

• اضافه کردن کلید به مسیر Adding a key to the route

• پس از ارسال تغییر مسیر دهید Redirect after submission

• انتقال صفحه اصلی به خارج از nav Moving the home page outside of nav

• پاک کردن کدهای استفاده نشده Cleaning up unused code

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

سبک دادن به رابط کاربری Styling the User Interface

• معرفی Introduction

• شکل دادن به لیست فعالیت ها Styling the activity list

• گروه بندی فعالیت ها بر اساس تاریخ Grouping the activities by date

• سبک دادن به موارد فهرست Styling the list items

• صفحه جزئیات فعالیت Activity details page

• پر کردن اجزای دقیق Populating the detailed components

• افزودن جزء فیلتر فعالیت Adding the activity filter component

• استایل دادن به صفحه اصلی Styling the home page

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

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

• معرفی Introduction

• اعتبار سنجی با حاشیه نویسی داده ها Validation with data annotations

• اعتبار سنجی روان Fluent Validation

• مدیریت پاسخ های خطای API Handling API Error responses

• مدیریت پاسخ های خطای API قسمت 2 Handling API Error responses part 2

• مدیریت پاسخ های خطای API قسمت 3 Handling API Error responses part 3

• مدیریت پاسخ های خطای API قسمت 4 Handling API Error responses part 4

• رسیدگی به استثنائات Handling exceptions

• آماده‌سازی برای راه‌اندازی رسیدگی به خطا در برنامه مشتری Preparing for setting up error handling in the client app

• استفاده از یک رهگیر برای رسیدگی به پاسخ های خطای API Using an interceptor to handle API error responses

• افزودن یک مؤلفه یافت نشد Adding a not found component

• رسیدگی به 400 خطا Handling 400 errors

• رسیدگی به 500 خطا روی مشتری Handling 500 errors on the client

• رسیدگی به خطای اعتبارسنجی از یک GUID نامعتبر Handling the validation error from an invalid GUID

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

تشکیل می دهد Forms

• معرفی Introduction

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

• فرمیک با کد کمتر Formik with less code

• اعتبار سنجی در فرمیک Validation in Formik

• ایجاد یک ورودی متنی قابل استفاده مجدد Creating a reusable text input

• ایجاد یک ناحیه متنی قابل استفاده مجدد Creating a reusable text area

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

• ایجاد یک ورودی تاریخ قابل استفاده مجدد Creating a reusable date input

• استراتژی تاریخ The date strategy

• با استفاده از Date-FNS Using Date-FNS

• اتصال فرم ارسالی به فرمیک Hooking up the form submission to Formik

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

هویت Identity

• معرفی Introduction

• افزودن یک موجودیت کاربری Adding a user entity

• افزودن IdentityDbContext Adding an IdentityDbContext

• پیکربندی هویت در کلاس Startup Configuring Identity in the Startup class

• افزودن کاربران بذر Adding seed users

• ایجاد DTOهای کاربر Creating the user DTOs

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

• JSON Web Tokens JSON Web Tokens

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

• احراز هویت در برنامه Authenticating to the app

• ذخیره اسرار در توسعه Storing secrets in development

• ایجاد یک خط مشی احراز هویت Creating an auth policy

• ثبت کاربران جدید Registering new users

• اعتبار ثبت نام کاربران Validating the registration of users

• دریافت کاربر فعلی Getting the current user

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

ورود و ثبت نام سمت مشتری Client side login and registration

• معرفی Introduction

• ایجاد فرم ورود Creating a login form

• ایجاد رابط ها و روش ها Creating the interfaces and methods

• ایجاد فروشگاه کاربری Creating a user store

• نمایش خطاها در فرم Displaying errors in the form

• تنظیم توکن هنگام ورود Setting the token upon login

• به روز رسانی صفحه اصلی و نوار ناوبری Updating the home page and nav bar

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

• ارسال توکن همراه با درخواست Sending up the token with the request

• اضافه کردن مدال ها Adding Modals

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

• رسیدگی به خطاهای اعتبارسنجی در فرم ثبت نام Handling validation errors in the register form

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

روابط چارچوب نهاد Entity Framework Relationships

• معرفی Introduction

• پیکربندی رابطه جدید Configuring the new relationship

• افزودن پروژه زیرساختی Adding an infrastructure project

• در حال به‌روزرسانی کنترل‌کننده فعالیت ایجاد Updating the create activity handler

• آزمایش فعالیت ایجاد Testing the create activity

• بارگیری داده های مرتبط Loading related data

• شکل دادن به داده های مرتبط Shaping the related data

• پیکربندی نمایه های AutoMapper Configuring AutoMapper profiles

• افزودن کنترل کننده حضور و غیاب Adding the attendance handler

• افزودن یک خط مشی احراز هویت سفارشی Adding a custom auth policy

• رفع اشکال با ویرایشگر Resolving the bug with with the edit handler

• به روز رسانی داده های بذر Updating the seed data

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

ویژگی - حضور و غیاب مشتری Feature - Client side attendance

• معرفی Introduction

• اضافه کردن مؤلفه شرکت کنندگان Adding the attendees component

• به روز رسانی جزء جزئیات Updating the details component

• رندر کردن مشروط دکمه ها Conditionally rendering the buttons

• افزودن روش های فروشگاه برای حضور Adding the store methods to attend

• به روز رسانی روش های ایجاد و ویرایش Updating the create and edit methods

• افزودن روش لغو فعالیت Adding a cancel activity method

• اضافه کردن پاپاور برای شرکت کنندگان Adding a popover for attendees

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

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

• معرفی Introduction

• افزودن ابری Adding Cloudinary

• افزودن رابط های ابری Adding the Cloudinary interfaces

• اضافه کردن منطق اضافه کردن عکس Adding the add photo logic

• افزودن موجودیت عکس Adding the Photo entity

• افزودن کنترل کننده عکس افزودن Adding the Add photo handler

• اضافه کردن یک کنترلر عکس Adding a photos controller

• حذف عکس ها Deleting photos

• تنظیم عکس اصلی Setting the main photo

• بازگرداندن نمایه های کاربر Returning user profiles

• به روز رسانی پیکربندی نقشه برداری Updating the mapping configuration

• بازگرداندن DTO شرکت کننده Returning an attendee DTO

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

آپلود تصویر مشتری Client image upload

• معرفی Introduction

• ایجاد صفحه پروفایل Creating a profile page

• اضافه کردن هدر پروفایل Adding a profile header

• افزودن محتوای پروفایل Adding the profile content

• دریافت اطلاعات نمایه Getting the profile data

• دریافت اطلاعات نمایه قسمت 2 Getting the profile data part 2

• نمایش عکس ها Displaying the photos

• رندر کردن ویجت عکس مشروط Conditionally rendering the photo widget

• ایجاد ویجت آپلود عکس Creating a photo upload widget

• افزودن Dropzone Adding a Dropzone

• سبک دادن به Dropzone Styling the Dropzone

• افزودن یک برش دهنده واکنش Adding a react cropper

• افزودن روش آپلود عکس Adding the photo upload method

• تنظیم عکس اصلی Setting the main photo

• حذف عکس ها Deleting photos

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

چالش Challenge

• معرفی چالش Challenge introduction

SignalR SignalR

• معرفی Introduction

• تنظیم نهاد نظر Setting up the comment entity

• افزودن یک نظر DTO و نقشه برداری Adding a comment DTO and mapping

• اضافه کردن کنترل کننده ایجاد Adding the create handler

• اضافه کردن کنترل کننده لیست Adding a list handler

• اضافه کردن یک SignalR Hub Adding a SignalR Hub

• احراز هویت به SignalR Authenticating to SignalR

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

• اتصال به هاب Connecting to the hub

• ارسال نظرات Sending comments

• افزودن اعتبارسنجی و رفع مشکلات Adding validation and fix issues

• حل و فصل تاریخ های UTC Resolving UTC dates

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

فالوورها/قابلیت دنبال کردن Followers / Following feature

• معرفی Introduction

• افزودن یک موجودیت پیوست Adding a join entity

• افزودن یک کنترل کننده برای دنبال کردن Adding a handler for following

• اضافه کردن کنترلر Adding the controller

• کلاس پروفایل را به روز کنید Update the profile class

• لیستی از دنبال کنندگان را برگردانید Return a list of followers

• افزودن ویژگی زیر به پیکربندی نقشه برداری Adding the following property to the mapping configuration

• به روز رسانی سایر کنترل کننده ها با ویژگی زیر Updating the other handlers with the following property

• افزودن رابط کاربری برای فالوورها Adding the UI for followers

• افزودن روش هایی برای دنبال کردن و لغو فالو کردن Adding methods to follow and unfollow

• تبدیل کردن دکمه فالو به یک جزء Making the follow button a component

• دریافت لیستی از موارد زیر Getting a list of followings

• با استفاده از MobX Reactions Using MobX Reactions

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

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

• معرفی Introduction

• افزودن کلاس PagedList Adding a PagedList class

• اضافه کردن منطق صفحه‌بندی لایه برنامه Adding application layer pagination logic

• اضافه کردن هدر صفحه بندی Adding a pagination header

• افزودن صفحه بندی سمت مشتری Adding client side pagination

• افزودن پارامترهای صفحه بندی Adding pagination parameters

• افزودن صفحه بندی عمودی Adding vertical paging

• اضافه کردن اسکرول بی نهایت Adding infinite scrolling

• افزودن فیلتر در API Adding filtering in the API

• فیلتر سمت مشتری Client side filtering

• به روز رسانی جزء فیلتر Updating the filter component

• اضافه کردن متغیرهایی Adding placeholders

• افزودن مولفه فعالیت های پروفایل کاربری + چالش Adding a user profile activities component + challenge

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

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

کارهای پایانی و انتشار Finishing touches and publishing

• معرفی Introduction

• افزودن اسکرول به بالا برای مسیرهای ما Adding Scroll to top for our routes

• اضافه کردن مسیرهای خصوصی Adding private routes

• آماده سازی اپلیکیشن مشتری برای تولید Prepping the client app for production

• ساخت بیلد تولید اپلیکیشن react Building the production build of the react app

• اجرای برنامه کلاینت بر روی سرور dotnet Kestrel Running the client app on the dotnet Kestrel server

• اضافه کردن PostGresQL Adding PostGresQL

• تغییر به PostGresQL Switching to PostGresQL

• استقرار در flyio - برنامه را Dockerise کنید Deployment to flyio - Dockerise the app

• استقرار در flyio - به روز رسانی پیکربندی برای استفاده از docker postgres Deployment to flyio - updating the config to use docker postgres

• استقرار در flyio - استفاده از fly launch برای ایجاد پیکربندی استقرار Deployment to flyio - using fly launch to create deploy config

• استقرار به flyio - ایجاد متغیرهای پیکربندی و اسرار Deploy to flyio - creating the config variables and secrets

• استقرار به flyio - ایجاد یک عمل github Deployment to flyio - creating a github action

• استقرار به flyio - استقرار خودکار با اقدامات github Deployment to flyio - Automatic deployment with github actions

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

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

• استقرار برنامه در Heroku Deploying the app to Heroku

• تشدید امنیتی Security tightening

• سیاست های امنیتی محتوا Content security policies

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

بخش پاداش - کتاب آشپزی هویت Bonus section - Identity Cookbook

• معرفی Introduction

• راه اندازی ورود به فیس بوک Setting up Facebook login

• افزودن Facebook JS SDK Adding the Facebook JS SDK

• اضافه کردن روش های مشتری برای ورود به FB Adding the client methods for FB Login

• پیکربندی نقطه پایانی API Configuring the API endpoint

• اشکال زدایی اطلاعات فیس بوک Debugging the Facebook info

• استقرار مجدد برنامه در Flyio Redeploying the app to Flyio

• مقدمه ای بر Refresh Tokens Introduction to Refresh Tokens

• افزودن موجودیت دامنه نشانه Refresh Adding the Refresh token domain entity

• به روز رسانی پارامترهای توکن JWT Updating the JWT token parameters

• به روز رسانی کنترل کننده حساب Updating the account controller

• تست در پستچی Testing in Postman

• پیکربندی سمت مشتری Client side configuration

• تست نشانه رفرش در مشتری Testing the refresh token in the client

• استقرار مجدد برنامه در Flyio Redeploying the app to Flyio

• مقدمه ای بر تایید ایمیل Introduction to Email verification

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

• برای ورود به سیستم به ایمیل تایید شده نیاز دارید Require a confirmed email to sign in

• به روز رسانی روش ثبت نام Updating the register method

• افزودن نقطه پایانی ایمیل تایید Adding the confirm email endpoint

• تست در پستچی Testing in Postman

• تنظیم مشتری برای تایید ایمیل Setting up the client for email confirmation

• افزودن مؤلفه تأیید ایمیل Adding a verify email component

• در حال اتمام و آزمایش Finishing up and testing

• استقرار مجدد برنامه در Flyio Redeploying the app to Flyio

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

• به روز رسانی پروژه برای استفاده از Net 6 Updating the project to use .Net 6

• Net 6 ویژگی های جدید و نحوه به روز رسانی پروژه برای استفاده از آنها .Net 6 new features and how to update the project to use them

• به روز رسانی بسته های مشتری Updating the client packages

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

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

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

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

• رفع هرگونه خطای تایپی Fixing any typescript errors

محتوای قدیمی Legacy content

• کجا می توان محتوای قدیمی را پیدا کرد Where to find the legacy content