مطالب پیشنهادی از سراسر وب

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

دسته بندی ها: آموزش های ویژه ، دات نت (NET.) ، آموزش جاوا اسکریپت (Javascript) ، آموزش ری اکت (React) ، آموزش ASP.NET ، دات نت کور (NET Core.) ، آموزش طراحی وب ، آموزش های یودمی (Udemy)

راهنمای کامل برای ساخت اپلیکیشن از شروع تا پایان با استفاده از ASP.NET Core، ری اکت (با تایپ اسکریپت) و Mobx

آخرین تاریخ آپدیت:  8/2020

آنچه یاد خواهید گرفت:

  • بیاموزید که چگونه از ابتدا اپلیکیشن را با (.Net Core (v2.2.، ری اکت (با تایپ اسکریپت) و Mobx ایجاد کنید و منتشر کنید
  • نحوه ساخت Web API در Net Core. با Clean Architecture با استفاده از الگوی CQRS + Mediator
  • نحوه استفاده از بسته های AutoMapper و MediatR در پروژه های .Net
  • نحوه ساخت یک راه حل چند پروژه ای با Net Core.
  • نحوه استفاده از Entity Framework Core به عنوان Object Relational Mapper
  • نحوه ادغام ASPNET Core SignalR در یک اپلیکیشن برای ارتباط وب در زمان واقعی
  • نحوه افزودن هویت و احراز هویت با استفاده از .Net Core Identity
  • نحوه ساخت یک برنامه سمت کلاینت برای API با React
  • نحوه استفاده از MobX به عنوان کتابخانه مدیریت state 
  • چگونه ویجت آپلود عکس خود را با Dropzone و Cropper برای تغییر اندازه تصاویر بسازیم

الزامات دوره:

  • برخی از تجربه های توسعه مورد نیاز است (3 تا 6 ماه)
  • رایانه ای با Mac OSX ، Windows یا Linux نصب شده است
  • علاقه به یادگیری نحوه ساخت برنامه های وب

توضیحات:

این دوره برای Net Core 3.0. آپدیت شده است. 

آیا اصول ASP.NET Core و React را یاد گرفته اید؟ مطمئن نیستید گام بعدی شما چیست؟ این دوره باید بتواند به شما کمک کند. در این دوره یاد می گیریم که چگونه یک راه حل ASP.NET Core چند پروژه ای بسازیم که با استفاده از Clean Architecture و الگوی CQRS و Mediator ساخته شده است که درک، استدلال و گسترش کد ما را آسان می کند.

ASP.NET Core و React موضوعات داغی هستند و این دوره به سادگی با ساختن یک برنامه کاربردی از ابتدا تا انتها ، دانش شما را در مورد هر دو افزایش می دهد. در هر ماژول، در حالی که ویژگی ها را به تدریج به برنامه اضافه می کنیم ما نکات جدیدی یاد می گیریم. ساخت یک برنامه به طور قابل توجهی پاداش بیشتری نسبت به ساختن یک Todo List دیگر از مستندات دارد!

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

در اینجا برخی از مواردی که در این دوره یاد خواهید گرفت:

  • راه اندازی محیط توسعه
  • ایجاد یک راه حل چند پروژه ای با استفاده از ASP.NET Core WebAPI و برنامه React با استفاده از DotNet CLI و ابزار create-react-app 
  • معماری تمیز و الگوی CQRS + Mediator
  • تنظیم و پیکربندی هویت ASP.NET Core برای احراز هویت
  • استفاده از React با Typescript
  • اضافه کردن عملکرد ورود به سیستم و ثبت نام در سمت کلاینت به اپلیکیشن React
  • استفاده از React Router
  • استفاده از AutoMapper در ASP.NET Core
  • ساخت یک UI زیبا با استفاده از Semantic UI
  • افزودن Photo Upload widget و ایجاد صفحات پروفایل کاربر
  • استفاده از React Final Form برای ایجاد ورودی های فرم قابل استفاده مجدد با اعتبار سنجی
    صفحه بندی ، مرتب سازی و فیلتر کردن
  • استفاده از SignalR برای فعال کردن ارتباط وب در زمان واقعی با ویژگی چت در اپلیکیشن 
  • انتشار برنامه در IIS و Linux
  • دریافت رتبه "A" برای امنیت از یک سایت اسکن امنیتی شناخته شده
  • خیلی چیزهای دیگر...

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

در این دوره تمام دروس با استفاده از ویژوال استودیو کد که یک ویرایشگر کد چندسکویی رایگان (و خارق العاده) است نشان داده می شود. مطمئناً می توانید از ویرایشگر کدی که دوست دارید و هر سیستم عاملی که دوست دارید استفاده کنید به شرطی که Windows ،Linux یا Mac باشد.

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

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

در این دوره، ما یک نمونه برنامه شبکه اجتماعی خواهیم ساخت که به کاربران امکان می دهد کاملاً از ابتدا در رویدادهایی (مشابه MeetUp یا Facebook) ثبت نام کنند. تمام آنچه که ما با آن شروع می کنیم یک terminal window خالی یا command prompt است.

برای شروع کار فقط یک رایانه با سیستم عامل مورد علاقه خود و علاقه به یادگیری ساخت یک برنامه با استفاده از ASP.NET Core و React نیاز دارید.

این دوره برای چه کسانی است:

  • افراد مبتدی Net Core.، ری اکت یا Typescript که می خواهند بیاموزند چگونه با این ابزارها چیزی بسازند
  • دانش آموزانی که رویکرد عملی را به یادگیری ترجیح می دهند تا یادگیری با تئوری

مباحث دوره:

  • مقدمه
    • مقدمه دوره
    • راه اندازی محیط توسعه
    • اکستنشن های Visual Studio Code
    • کد منبع و منابع برای این دوره
  • اسکلت متحرک قسمت 1 - API
    • مقدمه بخش 2
    • ایجاد پروژه ها و راه حل های ASP.NET Core با استفاده از DotNet CLI
    • ایجاد مراجع پروژه با DotNet CLI
    • بررسی فایل های پروژه
    • اجرای اپلیکیشن
    • ایجاد Domain entity
    • ایجاد DbContext و سرویس
    • افزودن اولین مهاجرت Entity Framework code
    • ایجاد پایگاه داده
    •  seed کردن داده‌ با استفاده از پیکربندی Entity Framework fluent
    • استفاده از تزریق وابستگی
    • معرفی Postman
    • ذخیره تغییرات در Source control با استفاده از گیت
    • خلاصه بخش 2
  • اسکلت متحرک قسمت 2 - کلاینت
    • مقدمه بخش 3
    • استفاده از create-react-app برای ایجاد اپلیکیشن ری اکت
    • بررسی فایل های پروژه ری اکت
    • مقدمه ری اکت - مفاهیم
    • مقدمه ری اکت - کامپوننت ها
    • مقدمه Typescript
    • دموی مبانی Typescript 
    • استفاده از Typescript با React
    • افزودن ابزارهای React dev
    • کامپوننت های کلاس React 
    • استفاده از React State
    • واکشی داده از API
    • افزودن پشتیبانی CORS به API
    • افزودن Semantic UI به اپلیکیشن
    • تمیز کردن و ذخیره کد در source control
    • خلاصه بخش 3
  • ساخت اپلیکیشن CRUD در Net Core. با استفاده از CQRS + Mediator
    • مقدمه بخش 4
    • افزودن Activity entity
    • Seed کردن داده Activity
    • فرمان ها و کوئری ها - CQRS
    • معرفی MediatR
    • ایجاد Query handler
    • ایجاد API Controller اکتیویتی ها
    • افزودن Details Handler
    • توکن های Cancellation 
    • افزودن Create handler
    • کار با boilerplate code در handlers
    • افزودن Edit handler
    • افزودن Delete handler
    • خلاصه بخش 4
  • ساخت اپلیکیشن CRUD در React
    • مقدمه بخش 5
    • معرفی React Hooks
    • ساختار پوشه در React
    • دریافت لیست اکتیویتی ها از API
    • افزودن رابط Activity در تایپ اسکریپت
    • ریفکتورینگ کامپوننت کلاس برای استفاده از React Hooks
    • افزودن نوار ناوبری
    • استایل دادن به کامپوننت های ری اکت
    • افزودن Activity Dashboard
    • ایجاد Activity List
    • ایجاد کامپوننت Activity Details
    • ایجاد کامپوننت Activity Form
    • انتخاب کردن individual Activity
    • افزودن edit mode برای نمایش فرم
    • افزودن create activity mode
    • شروع فرم با داده
    • کامپوننت های کنترل شده در React
    • رسیدگی به ارسال فرم
    • رفع مسائل با تاریخ ها در فرم
    • افزودن قابلیت حذف
    • خلاصه بخش 5
  • Axios
    • مقدمه بخش 6
    • راه اندازی فایل agent.ts
    • لیست کردن اکتیویتی ها
    • به روزرسانی Activity
    • افزودن تاخیر به متدهای API 
    • افزودن بارگیری کامپوننت 
    • افزودن loading indicator برای ارسال داده
    • ایزوله شدن loading indicator در دکمه حذف
    • خلاصه بخش 6
  • MobX
    • مقدمه بخش 7
    • معرفی MobX
    • راه اندازی MobX store
    • ریفکتور کردن activity list برای استفاده از store
    • ریفکتور کردن تابع select activity
    • استفاده از Async Await در متدهای ما
    • ریفکتور کردن متد create activity
    • properties محاسبه شده MobX
    • استفاده از Observable Map
    • افزودن edit activity action
    • افزودن delete activity action
    • تمیز کردن کد
    • فعال سازی MobX strict mode
    • افزودن ابزارهای MobX dev 
    • خلاصه بخش 7
  • React Router
    • مقدمه بخش 8
    • راه اندازی React Router
    • راه اندازی مسیرها
    • افزودن لینک ها و NavLinks
    • افزودن Details link
    • دریافت Activity از API
    • استفاده از Route params
    • ناوبری از طریق کد
    • مسیریابی به سمت edit form
    • استفاده از کامپوننت کاملا بدون کنترل با کلیدی برای ریست کردن component state
    • ناوبری بعد از ارسال
    • حرکت صفحه اصلی خارج از مسیرهای ناوبری
    • تمیزکاری کد بیشتر
    • خلاصه بخش 8
  • افزودن استایل
    • معرفی بخش 9
    • استایل دادن به activity list
    • گروه بندی اکتیویتی ها با تاریخ
    • استایل دادن به آیتم های activity list
    • ایجاد Activity Details page
    • استایل دادن به Activity Detailed Page Header
    • استایل دادن به Activity Detailed Info
    • استایل دادن به Activity Detailed Chat و کامپوننت های سایدبار
    • استایل دادن به Activity Form
    • استایل دادن به Home page
    • خلاصه بخش 9
  • مدیریت رویداد و اعتبارسنجی
    • معرفی بخش 10
    • معرفی اعتبارسنجی در API
    • افزودن اعتبار سنجی در API با استفاده از حاشیه نویسی داده ها
    • اضافه کردن اعتبار سنجی در API با استفاده از Fluent Validation
    • مفاهیم مدیریت خطا در اپلیکیشن
    • استراتژی مدیریت خطا
    • ایجاد یک کلاس استثنایی مشتق شده برای سایر موارد استثنا
    • افزودن میان افزار مدیریت خطا
    • استفاده از میان افزار مدیریت خطا
    • استفاده از Axios interceptors برای گرفتن خطا ها
    • مدیریت GUID نامعتبر در get request
    • افزودن نوتیفیکیشن های toast
    • مدیریت خطاهای شبکه در Axios
    • خلاصه 10
  • فرم ها
    • معرفی بخش 11
    • راه اندازی React Final Form
    • راه اندازی Text input field قابل استفاده مجدد
    • ریفکتور کردن فرم برای استفاده از React Final Form
    • ایجاد Text Area Input field قابل استفاده مجدد
    • ایجاد Select input field قابل استفاده مجدد
    • راه اندازی React Widgets
    • ایجاد Date Input field قابل استفاده مجدد
    • فرمت کردن تاریخ ها با Date-FNS
    • ایجاد فیلدهای تاریخ و زمان جداگانه
    • ترکیب ورودی های تاریخ و زمان
    • استفاده از فرم با داده
    • ارسال داده به سرور
    • مدیریت خطا فرم
    • اعتبارسنجی فرم
    • خلاصه بخش 11
  • ASP.NET Core Identity
    • معرفی بخش 12
    • ASP.NET Core Identity
    • افزودن Identity User Entity
    • پیکربندی Identity در کلاس startup 
    • Seed کردن کاربران در پایگاه داده
    • افزودن Login Handler
    • افزودن Base API controller
    • افزودن User API controller
    • افزودن User object
    • معرفی توکن های JSON Web
    • افزودن پروژه زیرساخت
    • افزودن کلاس و رابط JWT Generator
    • تولید JWT Token
    • بازگشت  JWT Token در لاگین موفقیت آمیز
    • ایمن سازی اپلیکیشن با احراز هویت
    • رازهای کاربر دات نت
    • افزودن سیاست احراز هویت
    • افزودن Register Handler
    • تست کردن رجیستر کاربر
    • افزودن اکستنشن برای اعتبارسنجی پسوورد
    • بازیابی نام کاربری از توکن در Http Context
    • در حال دریافت کاربر وارد شده در حال حاضر
    • خلاصه بخش 12
  • رجیستر و لاگین سمت کلاینت
    • معرفی بخش 13
    • ایجاد رابط های Typescript و متدهای Axios 
    • ایجاد Mobx user store
    • ایجاد MobX root store
    • ایجاد Login form
    • اتصال فرم ورود به سیستم به API
    • برخورد با خطاهای ارسال
    • افزودن صفحه اصلی و اطلاعات کاربر NavBar 
    • ایجاد MobX common store
    • استفاده از Axios request interceptor برای ارسال خودکار JWT token
    • ورود مداوم در رفرش کردن
    • افزودن Modals به اپلیکیشن
    • افزودن پیام های بهتر خطا به فرم
    • افزودن Register form
    • نمایش خطاهای اعتبارسنجی سرور در فرم
    • خلاصه بخش 13
  • روابط Entity Framework Core
    • معرفی بخش 14
    • افزودن کلاس برای پیوستن کاربران و اکتیویتی ها
    • به روزرسانی Create Activity handler
    • تست کردن در Postman
    • لود کردن داده مرتبط با Eager loading
    • افزودن DTOs برای شکل دهی داده
    • افزودن AutoMapper
    • افزودن پروفایل های AutoMapper 
    • پیکربندی AutoMapper mappings
    • استفاده از Lazy Loading برای لود کردن داده مرتبط
    • افزودن Join activity feature
    • افزودن remove attendance feature
    • ایجاد custom Auth policy
    • به روزرسانی Seed data
    • خلاصه بخش 14
  • افزودن attendees سمت کلاینت
    • معرفی بخش 15
    • افزودن attendees به آیتم های لیست
    • افزودن attendees به Detailed view sidebar
    • افزودن IsGoing properties و IsHost properties به Activity interface
    • رندر کردن شرطی دکمه های activity detailed header 
    • افزودن تابع cancel attendance
    • همه اینها را به API متصل کنید
    • Loose ends
    • خلاصه بخش 15
  • Photo Upload - بخش 1 - API
    • معرفی بخش 16
    • تنظیمات Cloudinary 
    • افزودن کلاس و رابط کاربری به Photo Accessor
    • افزودن AddPhoto handler
    • افزودن Domain Entity
    • افزودن Add Photo Handler
    • افزودن Photo API Controller
    • افزودن User Profiles feature
    • افزودن Delete photo handler
    • افزودن set main photo functionality
    • افزودن پیکربندی Mapping Profileبرای تصاویر کاربر
    • خلاصه بخش 16
  • Photo Upload - بخش 2 - کلاینت
    • معرفی بخش 17
    • افزودن لینک ها و کامپوننت صفحه پروفایل
    • افزودن Profile Header component
    • افزودن Profile content component
    • دریافت داده پروفایل از API
    • نمایش تصاویر کاربر بر روی صفحه پروفایل
    • رندر شرطی Photo Upload Widget
    • ایجاد Photo Upload Widget
    • React Dropzone
    • استایل دادن به Dropzone
    • React Cropper - بخش 1
    • React Cropper - بخش 2
    • افزودن متدهای Photo Upload به store
    • افزودن photo upload functionality به کامپوننت پروفایل
    • افزودن set main photo functionality
    • ایزوله شدن loading indicators
    • افزودن Delete photo functionality
    • خلاصه بخش 17
  • چالش
    • معرفی چالش
    • راه حل چالش 
    • SignalR
    • معرفی بخش 19
    • افزودن Comment entity
    • افزودن Comment DTO و mapping
    • افزودن Create comment handler
    • افزودن SignalR hub
    • پیکربندی Auth برای SignalR
    • افزودن اتصال SignalR hub به کلاینت
    • اتصال SignalR hub از کلاینت
    • افزودن Comment functionality به کلاینت
    • فرمت تاریخ ها در کلمات با Date-FNS
    • استفاده از SignalR Groups در API
    • استفاده از SignalR Groups در کلاینت
    • خلاصه بخش 19
  • فیچر فالوور و فالوئینگ
    • ​​​​​​​​​​​​​​معرفی بخش 20
    • افزودن UserFollower Entity
    • افزودن Add Follower handler
    • افزودن Delete Following handler
    • افزودن Following API Controller
    • افزودن کلاس و رابط Profile reader helper
    • دریافت لیستی از فالوئینگ ها برای کاربر
    • افزودن Custom value resolver برای AutoMapper
    • افزودن کامپوننت های UI برای نمایش کاربران فالو شده
    • افزودن متدهای Follow / Unfollow
    • افزودن کامپوننت های رابط کابری Follow / Unfollow
    • دریافت لیست فالوئینگ ها از API
    • استفاده از MobX reactions برای دریافت فالوورها و فالوئینگ ها در tab change
    • خلاصه بخش 20
  • صفحه بندی، مرتب سازی و فیلتر کردن
    • ​​​​​​​معرفی بخش 21
    • صفحه بندی Activity list
    • ریفکتورکردن متد Activity store list برای صفحه بندی
    • افزودن صفحه بندی عمودی به activity dashboard
    • افزودن infinite scrolling به activity dashboard
    • به روزرسانی داشبورد با Filter component
    • فیلتر کردن Activity List در API
    • افزودن متدهای Filtering در کلاینت
    • به روزرسانی Activity Filters UI برای اجازه داده به filtering
    • افزودن User Activities filter در API
    • افزودن User Activities filter در کلاینت
    • خلاصه بخش 21
  • Final touches و انتشار
    • ​​​​​​​معرفی بخش 22
    • Swap کردن loading indicator برای Placeholders
    • افزودن loading indicator در index.html
    • افزودن private routes در کلاینت
    • افزودن logout برای token expiry
    • Safari bug fix
    • آماده سازی اپلیکیشن کلاینت برای انتشار
    • ساخت نسخه تولید اپلیکیشن ری اکت
    • سرو کردن تولید اپلیکیشن ری اکت از API server
    • افزودن MySQL و پیکربندی یک کاربر
    • افزودن additional DB providers برای Entity Framework
    • Swap کردن DB برای MySQL
    • انتسار اپلیکیشن در لینوکس - بخش 1
    • انتسار اپلیکیشن در لینوکس - بخش 2 
    • پیکربندی Apache برای استفاده HTTPS SSL certificate
    • افزودن Security headers در API
    • افزودن Content Security Policy برای API
    • دریافت امتیازدهی A از SecurityHeaders site scan
    • راه اندازی Azure برای انتشار اپلیکیشن
    • انتشار App در Azure
    • Tweak کردن توسعه Azure
    • پایان خلاصه دوره
  • جایزه - هویت کتاب آشپزی
    • ​​​​​​​معرفی بخش جایزه
    • FB Login - راه اندازی اپلیکیشن در Facebook
    • FB Login - ایجاد Git branch در work from
    • FB Login - افزودن Facebook login button در client app
    • FB Login - افزودن API configuration در user secrets
    • FB Login - افزودن facebook accessor service در infrastructure project
    • FB Login - افزودن Facebook login handler
    • FB Login - افزودن متد API Controller و امتحان کردن ان با هم  با کلاینت
    • FB Login - افزودن loading indicator و ادغام تغییرات با master branch
    • Refresh Tokens - معرفی
    • Refresh Tokens - به روزرسانی دامنه و افزودن مهاجرت
    • Refresh Tokens - به روزرسانی Token Validation Expriry
    • Refresh Tokens - به روزرسانی Application layer classes
    • Refresh Tokens - افزودن Refresh Token Handler
    • Refresh Tokens - افزودن API Endpoint
    • Refresh Tokens - تست کردن در Postman
    • Refresh Tokens - به روزسانی MobX Stores
    • Refresh Tokens - تست هایی که کار می کند
    • تایید ایمیل - معرفی
    • تایید ایمیل - راه اندازی SendGrid
    • تایید ایمیل - شناسایی تنظیمات
    • تایید ایمیل - به روزرسانی register handler
    • تایید ایمیل - افزودن confirm email handler
    • تایید ایمیل - تست کردن تایید ایمیل در postman
    • تایید ایمیل - ارسال مجدد verification email handler
    • تایید ایمیل - متدهای Client agent
    • تایید ایمیل - ایجاد register success component
    • تایید ایمیل - ایجاد verify email component
    • تایید ایمیل - مطمئن باشید کار می کند
  • جایزه - به روزرسانی بسته های کلاینت ری اکت به آخرین نسخه
    • ​​​​​​​به روزرسانی بسته های کلاینت

ویدئوهای دیگر دوره:

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

 

اکستنشن های ویژوال استودیو کد

 

کد منبع و منابع برای این دوره

آیا این نوشته را دوست داشتید؟
Udemy Complete guide to building an app with .Net Core and React Publisher:Udemy Author:Neil Cummings Duration:37.5 hours Level:Advanced

The complete guide to building an app from start to finish using ASP.NET Core, React (with Typescript) and Mobx

What you'll learn

  • Learn how to build an application from start to publishing with .Net Core (v2.2), React (with Typescript) and Mobx
  • How to build a Web API in .Net Core with Clean Architecture using the CQRS + Mediator pattern
  • How to use AutoMapper and MediatR packages in the .Net projects
  • How to build a multi-project solution with .Net Core
  • How to use Entity Framework Core as the Object Relational Mapper
  • How to integrate ASPNET Core SignalR into an application for real time web communication
  • How to add Identity and Authentication using .Net Core Identity
  • How to build a Client side application for the API with React
  • How to use MobX as a state management library
  • How to build our own Photo upload widget with a Dropzone and a Cropper to resize images

Requirements

  • Some development experience required (3 -6 months)
  • A computer with Mac OSX, Windows or Linux installed
  • A passion for learning how to build web applications

Description

***Course has now been updated for .Net Core 3.0***

Have you learnt the basics of ASP.NET Core and React? Not sure where to go next? This course should be able to help with that. In this course we learn how to build a multi-project ASP.NET Core solution that is built using Clean Architecture and the CQRS and Mediator pattern that makes our code easy to understand, reason about and extend.

Both ASP.NET Core and React are hot topics and this course will enhance your knowledge of both, simply by building an application from start to finish. In each module we learn something new, whilst incrementally adding features to the application. Building an application is significantly more rewarding than building yet another Todo List from the documentation!

Every line of code is demonstrated and explained and by the end of this course you will have the skills and knowledge to build your own application using the techniques taught in this course.

Here are some of the things you will learn about in this course:

  • Setting up the developer environment
  • Creating a multi-project solution using the the ASP.NET Core WebAPI and the React app using the DotNet CLI and the create-react-app utility.
  • Clean Architecture and the CQRS + Mediator pattern
  • Setting up and configuring ASP.NET Core identity for authentication
  • Using React with Typescript
  • Adding a Client side login and register function to our React application
  • Using React Router
  • Using AutoMapper in ASP.NET Core
  • Building a great looking UI using Semantic UI
  • Adding Photo Upload widget and creating user profile pages
  • Using React Final Form to create re-usable form inputs with validation
  • Paging, Sorting and Filtering
  • Using SignalR to enable real time web communication to a chat feature in our app
  • Publishing the application to both IIS and Linux
  • Getting an ‘A’ rating for security from a well known security scanning site.
  • Many more things as well

Tools you need for this course

In this course all the lessons are demonstrated using Visual Studio Code, a free (and fantastic) cross platform code editor. You can of course use any code editor you like and any Operating system you like... as long as it's Windows, Linux or Mac

Is this course for you?

This course is very practical, about 90%+ of the lessons will involve you coding along with me on this project. If you are the type of person who gets the most out of learning by doing, then this course is definitely for you.

On this course we will build an example social network application that allows users to sign up to events (similar to MeetUp or Facebook), completely from scratch. All we start with is an empty terminal window or command prompt.

All you will need to get started is a computer with your favourite operating system, and a passion for learning how to build an application using ASP.NET Core and React

Who this course is for:

  • Beginners to .Net Core or React or Typescript who want to learn how to build something with these tools
  • Students who prefer the practical approach to learning rather than learning by theory

Course content

  • Introduction
    • Course Introduction
    • Setting up the dev environment
    • Visual Studio Code extensions
    • Source code and resources for this course
  • Walking Skeleton Part 1 - API
    • Section 2 introduction
    • Creating the ASP.NET Core solutions and projects using the DotNet CLI
    • Creating the project references using the DotNet CLI
    • Reviewing the Project files
    • Running the application
    • Creating a Domain entity
    • Creating the DbContext and service
    • Adding our first Entity Framework code first migration
    • Creating the database
    • Seeding data using Entity Framework fluent configuration
    • Using Dependancy Injection
    • Introduction to Postman
    • Saving our changes into Source control using Git
    • Section 2 summary
  • Walking Skeleton Part 2 - Client
    • Section 3 introduction
    • Using create-react-app to create our React application
    • Reviewing the React project files
    • Introduction to React - Concepts
    • Introduction to React - Components
    • Introduction to Typescript
    • Typescript basics demo
    • Using Typescript with React
    • Adding React dev tools
    • React Class Components
    • Using React State
    • Fetching data from the API
    • Adding CORS support to the API
    • Adding Semantic UI to our app
    • Clean up and saving our code to source control
    • Summary of section 3
  • Building a CRUD application in .Net Core using the CQRS + Mediator pattern
    • Section 4 introduction
    • Adding the Activity entity
    • Seeding Activity data
    • Commands and Queries - CQRS
    • Introduction to MediatR
    • Creating our first Query handler
    • Creating the Activities API Controller
    • Adding the Details Handler
    • Cancellation Tokens
    • Adding the Create handler
    • Dealing with boilerplate code in our handlers
    • Adding an Edit handler
    • Adding a Delete handler
    • Summary of section 4
  • Building a CRUD application in React
    • Section 5 introduction
    • Introduction to React Hooks
    • Folder structure in React
    • Getting a list of activities from the API
    • Adding an Activity interface in Typescript
    • Refactoring our class component to use React Hooks
    • Adding the Navigation bar
    • Styling React components
    • Adding the Activity Dashboard
    • Creating the Activity List
    • Adding the Activity Details component
    • Adding the Activity Form component
    • Selecting an individual Activity
    • Adding an edit mode to display the form
    • Adding a create activity mode
    • Initialising the form with data
    • Controlled components in React
    • Handling form submission
    • Fixing issues with the dates in the form
    • Adding the delete functionality
    • Summary of section 5
  • Axios
    • Section 6 introduction
    • Setting up the agent.ts file
    • Listing our activities
    • Updating an Activity
    • Adding a delay to our API methods
    • Adding a loading component
    • Adding a loading indicator for submitting data
    • Isolating the loading indicator on the delete button
    • Summary of section 6
  • MobX
    • Section 7 introduction
    • Introduction to MobX
    • Setting up a MobX store
    • Refactoring the activity list to use the store
    • Refactoring the select activity function
    • Using Async Await in our methods
    • Refactoring the create activity method
    • MobX computed properties
    • Using an Observable Map
    • Adding the edit activity action
    • Adding the delete activity action
    • Cleaning up our code
    • Enabling MobX strict mode
    • Adding MobX dev tools
    • Summary of section 7
  • React Router
    • Section 8 introduction
    • Setting up React Router
    • Setting up our Routes
    • Adding Links and NavLinks
    • Adding the Details link
    • Getting an Activity from the API
    • Using Route params
    • Navigating via code
    • Routing to the edit form
    • Using a Fully Uncontrolled Component with a key to reset component state
    • Navigating after submission
    • Moving the home page outside of our navigation routes
    • Scrolling to the top of the page on navigation
    • More code clean up
    • Summary of section 8
  • Adding some style
    • Section 9 introduction
    • Styling the activity list
    • Grouping activities by date
    • Styling the activity list items
    • Creating the Activity Details page
    • Styling the Activity Detailed Page Header
    • Styling the Activity Detailed Info
    • Styling the Activity Detailed Chat and Sidebar components
    • Styling the Activity Form
    • Styling the Home page
    • Section 9 summary
  • Error handling and validation
    • Section 10 introduction
    • Introduction to validation in the API
    • Adding validation in the API using Data Annotations
    • Adding validation in the API using Fluent Validation
    • Error handling concepts in our application
    • Error handling strategy
    • Creating a derived Exception class for Rest exceptions
    • Adding Error handling middleware
    • Using our Error handling middleware
    • Using Axios interceptors to catch errors
    • Throwing errors in the client
    • Adding routing functionality to Axios
    • Handling an invalid GUID on a get request
    • Adding toast notifications
    • Handling network errors in Axios
    • Summary of section 10
  • Forms
    • Section 11 introduction
    • Setting up React Final Form
    • Creating a reusable Text input field
    • Refactoring the form to use React Final Form
    • Creating a reusable Text Area Input field
    • Creating a reusable Select input field
    • Setting up React Widgets
    • Creating a reusable Date Input field
    • Formatting the dates using Date-FNS
    • Creating separate Date and Time fields
    • Combining Date and Time inputs
    • Initialising the form with data
    • Submitting data to the server
    • Form error handling
    • Form validation
    • Summary of section 11
  • ASP.NET Core Identity
    • Section 12 introduction
    • Introduction to ASP.NET Core Identity
    • Adding the Identity User Entity
    • Configuring Identity in our startup class
    • Seeding users to the database
    • Adding a Login Handler
    • Adding a Base API controller
    • Adding a User API controller
    • Adding a User object
    • JSON Web Tokens introduction
    • Adding the Infrastructure project
    • Adding the JWT Generator interface and class
    • Generating a JWT Token
    • Returning the JWT Token on successful login
    • Securing our app with Authorization
    • Dotnet user secrets
    • Adding an authorisation policy
    • Adding a Register Handler
    • Testing user registration
    • Adding a Fluent Validator extension for password validation
    • Retrieving the Username from the token in the Http Context
    • Getting the currently logged in user
    • Summary of section 12
  • Client side login and register
    • Section 13 introduction
    • Creating the Typescript interfaces and Axios methods
    • Creating a Mobx user store
    • Creating a MobX root store
    • Creating the Login form
    • Hooking up the Login form to the API
    • Dealing with submission errors
    • Adding home page and NavBar user information
    • Creating a MobX common store
    • Using Axios request interceptor to automatically send the JWT token
    • Persisting login on refresh
    • Adding Modals to our application
    • Adding better error messages to our form
    • Adding a Register form
    • Displaying server validation errors in our form
    • Summary of section 13
  • Entity Framework Core Relationships
    • Section 14 introduction
    • Adding a class to join our Users and Activities
    • Updating the Create Activity handler
    • Testing in Postman
    • Loading related data using Eager loading
    • Adding DTOs to shape our data
    • Adding AutoMapper
    • Adding AutoMapper profiles
    • Configuring AutoMapper mappings
    • Using Lazy Loading to load related data
    • Adding the Join activity feature
    • Adding the remove attendance feature
    • Creating a custom Auth policy
    • Updating our Seed data
    • Section 14 summary
  • Adding Client side attendances
    • Section 15 introduction
    • Adding attendees to our list items
    • Adding attendees to the Detailed view sidebar
    • Adding the IsGoing and IsHost properties to the Activity interface
    • Conditionally rendering the activity detailed header buttons
    • Adding the cancel attendance function
    • Hooking it all up to the API
    • Loose ends
    • Summary of section 15
  • Photo Upload Part 1 - API
    • Section 16 introduction
    • Cloudinary settings
    • Adding the interface and class for our Photo Accessor
    • Adding the AddPhoto handler
    • Adding the Domain Entity
    • Adding the Add Photo Handler
    • Adding the Photo API Controller
    • Adding User Profiles feature
    • Adding the Delete photo handler
    • Adding the set main photo functionality
    • Adding the Mapping Profile configuration for User images
    • Summary of section 16
  • Photo Upload Part 2 - Client
    • Section 17 introduction
    • Adding links and a profile page component
    • Adding the Profile Header component
    • Adding the Profile content component
    • Getting the profile data from the API
    • Displaying User images on the profile page
    • Conditionally rendering the Photo Upload Widget
    • Creating a Photo Upload Widget
    • React Dropzone
    • Styling our Dropzone
    • React Cropper Part 1
    • React Cropper Part 2
    • Adding the Photo Upload methods to the store
    • Adding the photo upload functionality to the Profile component
    • Adding the set main photo functionality
    • Isolating our loading indicators
    • Adding Delete photo functionality
    • Summary of section 17
  • Challenge
    • Challenge Introduction
    • Challenge Solution
    • SignalR
    • Section 19 Introduction
    • Adding the Comment entity
    • Adding the Comment DTO and mapping
    • Adding the Create comment handler
    • Adding a SignalR hub
    • Configuring Auth for SignalR
    • Adding the SignalR hub connection to the client
    • Connecting to the SignalR hub from our client
    • Adding the Comment functionality to the client
    • Formatting Dates in words using Date-FNS
    • Using SignalR Groups in the API
    • Using SignalR Groups in the client
    • Section 19 summary
  • Following/Follower feature
    • Section 20 introduction
    • Adding the UserFollower Entity
    • Adding the Add Follower handler
    • Adding the Delete Following handler
    • Adding a Following API Controller
    • Adding a Profile reader helper class and interface
    • Getting a List of Followings for a user
    • Adding a Custom value resolver for AutoMapper
    • Adding the UI components to show followed users
    • Adding the Follow / Unfollow methods
    • Adding the Follow / Unfollow UI components
    • Getting a list of followings from the API
    • Using MobX reactions to get followers or followings on tab change
    • Section 20 summary
  • Paging, Sorting and Filtering
    • Section 21 introduction
    • Paging our Activity list
    • Refactoring the Activity store list method for paging
    • Adding vertical paging to our activity dashboard
    • Adding infinite scrolling to our activity dashboard
    • Updating the dashboard with Filter component
    • Filtering our Activity List in the API
    • Adding the Filtering methods in the client
    • Updating the Activity Filters UI to allow filtering
    • Adding User Activities filter in the API
    • Adding User Activities filter in the client
    • Summary of section 21
  • Final touches and publishing
    • Section 22 introduction
    • Swapping our loading indicator for Placeholders
    • Adding a loading indicator to index.html
    • Adding private routes on the client
    • Adding logout for token expiry
    • Safari bug fix
    • Preparing the client application for publishing
    • Building a production version of the React app
    • Serving the production React app from the API server
    • Adding MySQL and configuring a user
    • Adding additional DB providers for Entity Framework
    • Swapping the DB for MySQL
    • Publishing the app to Linux - Part 1
    • Publishing the app to Linux - Part 2
    • Configuring Apache to use an HTTPS SSL certificate
    • Adding Security headers to our API
    • Adding Content Security Policy to our API
    • Getting an A rating from a SecurityHeaders site scan
    • Setting up Azure for publishing our app
    • Publishing our App to Azure
    • Tweaking the Azure deployment
    • End of course summary
  • Bonus - Identity Cookbook
    • Intro to the bonus section
    • FB Login - Setting up the app in Facebook
    • FB Login - Creating a new Git branch to work from
    • FB Login - Adding a Facebook login button to the client app
    • FB Login - Adding the API configuration to user secrets
    • FB Login - Adding a facebook accessor service to the infrastructure project
    • FB Login - Adding the Facebook login handler
    • FB Login - Adding the API Controller method and tying it together with the clien
    • FB Login - Adding loading indicator and merging changes with master branch
    • Refresh Tokens - Introduction
    • Refresh Tokens - Updaing the Domain and adding a new Migration
    • Refresh Tokens - Updating the Token Validation Expriry
    • Refresh Tokens - Updating the Application layer classes
    • Refresh Tokens - Adding the Refresh Token Handler
    • Refresh Tokens - Adding the API Endpoint
    • Refresh Tokens - Testing in Postman
    • Refresh Token - Updating the MobX Stores
    • Refresh Tokens - Testing it works
    • Email Verification - Introduction
    • Email Verification - Setting up SendGrid
    • Email verification - Identity settings
    • Email verification - Updating the register handler
    • Email verification - Adding a confirm email handler
    • Email verification - Testing email verification in postman
    • Email verification - Resend verification email handler
    • Email verification - Client agent methods
    • Email Verification - Create a register success component
    • Email verification - creating a verify email component
    • Email verification - making sure it works
  • Bonus - Updating the React client packages to latest versions
    • Updating the client packages

پیشنهاد آموزش مرتبط در فرادرس

خرید لینک های دانلود
  • حجم فایل: 16.45GB
  • زبان: انگلیسی
  • زیرنویس انگلیسی: دارد
  • قیمت: 8000 تومان
  • راهنمای کامل ساخت اپلیکیشن با Net Core. و React یک محصول ویژه است و دریافت لینک های دانلود آن با پرداخت هزینه امکان پذیر است. اطلاعات بیشتر