Web Development

Blazor + Web API

استفاده از Blazor Web Assembly و Web API درکنار هم

پیشرفتهطول دوره 29 ساعتتعداد جلسات دوره 164در حال برگزاری
Blazor + Web API
دوستان عزیز با توجه به شرایط اینترنت، جلسات پایانی فصل نهم در یکی از سایت های ایرانی آپلود و آماده استفاده هستند

Blazor WebAssembly یک فریم‌ورک از شرکت مایکروسافت است



که به توسعه‌دهندگان اجازه می‌دهد تا برنامه‌های وب تعاملی با استفاده از زبان سی‌شارپ (C#) و .NET بنویسند. این فریم‌ورک مزایای بسیاری دارد که در زیر به برخی از مهم‌ترین آن‌ها اشاره شده است

1. استفاده از زبان مشترک: توسعه‌دهندگان می‌توانند از سی‌شارپ برای نوشتن کد سمت سرور و سمت کلاینت استفاده کنند، که باعث کاهش نیاز به یادگیری زبان‌های مختلف مانند جاوااسکریپت می‌شود.

2. عملکرد بالا: برنامه‌های Blazor WebAssembly به صورت مستقیم در مرورگر کاربر اجرا می‌شوند، بدون نیاز به واسطه‌گری مانند ماشین مجازی جاوااسکریپت، که منجر به عملکرد بهینه و تجربه کاربری بهتر می‌شود.

3. استقلال از پلتفرم: Blazor WebAssembly بر روی هر مرورگری که از WebAssembly پشتیبانی می‌کند، قابل اجرا است، بنابراین برنامه‌ها می‌توانند بر روی سیستم‌عامل‌های مختلف بدون نیاز به تغییرات عمده اجرا شوند.

4. یکپارچگی با اکوسیستم .NET: توسعه‌دهندگان می‌توانند از ابزارها، کتابخانه‌ها، و فریم‌ورک‌های موجود در اکوسیستم .NET استفاده کنند. این موضوع زمان توسعه را کاهش داده و کیفیت نرم‌افزار را افزایش می‌دهد.

5. تعامل با جاوااسکریپت: Blazor امکان تعامل با کد جاوااسکریپت را فراهم می‌کند. بنابراین، توسعه‌دهندگان می‌توانند از کتابخانه‌ها و فریم‌ورک‌های جاوااسکریپت در پروژه‌های Blazor استفاده کنند.

6. قابلیت استفاده مجدد کد: با استفاده از Blazor، توسعه‌دهندگان می‌توانند کدهای مشترکی بین برنامه‌های وب، دسکتاپ، و موبایل ایجاد کنند، که موجب کاهش زمان توسعه و نگهداری می‌شود.

7. توسعه سمت کلاینت و سمت سرور یکپارچه: Blazor به توسعه‌دهندگان این امکان را می‌دهد تا برنامه‌های سمت کلاینت را با استفاده از همان مدل برنامه‌نویسی سمت سرور توسعه دهند، که می‌تواند موجب کاهش پیچیدگی‌های توسعه و نگهداری شود.

8. پشتیبانی از PWA: Blazor از برنامه‌های وب پیشرفته (PWA) پشتیبانی می‌کند، که به کاربران اجازه می‌دهد تا برنامه‌های وب را به عنوان برنامه‌های نصب‌شده بر روی دستگاه‌های خود اجرا کنند. این مزایا Blazor WebAssembly را به یک گزینه جذاب برای توسعه‌دهندگان تبدیل کرده است که به دنبال راه‌حل‌های مدرن و کارآمد برای توسعه برنامه‌های وب هستند.

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

فصل اول - Blazor WebAssembly20 جلسه
01 بررسی اولیه ساختار پروژه Blazor WebAssembly
02 معرفی مفهوم Component ها در Blazor
03 بررسی مثال های پیش فرض پروژه Blazor
04 استفاده از Delay برای شبیه سازی زمان لودینگ
05 معرفی و کاربرد MarkupString
06 معرفی و کاربرد انواع Binding
07 کار با رویداد onclick و نکات مهم آن
08 بازنویسی جلسه قبل و استفاده از تگ button و bootstrap
09 نوشتن Component دلخواه – بدون ورودی و خروجی
10 نوشتن Component دلخواه – با امکان دریافت ورودی از طریق Parameter
11 نوشتن Component دلخواه – معرفی Scoped CSS File
12 نوشتن Component دلخواه – با امکان دریافت وبرگرداندن اطلاعات از طریق Event Call Back
13 معرفی و بررسی Cascading Parameter ها
14 بررسی یک مثال کامل از Cascading Parameter
15 مثالی برای شبیه سازی کردن Cascading Parameter
16 مثالی برای درک بیشتر Cascading Parameter
17 بررسی رویداد های اصلی Blazor و ترتیب اجرای آنها
18 تعریف Route برای page ها – معرفی و کاربرد NavigationManager
19 انواع روش ارسال اطلاعات برای page ها از طریق Parameter
20 بررسی عدم استفاده از Attribute Parameter
فصل دوم - Http Client9 جلسه
01 بررسی مثال پیش فرض Blazor از HttpClient
02 لود کردن اطلاعات بدون HttpClinet و مرور مباحث مهم
03 افزودن HttpClientService برای مدیریت کردن عملیات
04 بازنویسی HttpClientService و استفاده از ارث بری
05 بازنویسی HttpClientService و استفاده از اینترفیس
06 بازنویسی HttpClientService و استفاده از کلاس Response Wrapper
07 تکمیل متد های HttpService – نکته NumberHandling
08 استاندارد سازی متد ها و نوشتن متد های POST
09 مقدمه ای بر پروژه Web API – آشنایی اولیه با Swagger
فصل سوم - CQRS - MediatR15 جلسه
01 استارت مقدمات پروژه نهایی – بررسی معماری Clean – ایجاد پروژه Domain
02 ایجاد پروژه Application – استفاده از Generic Repository و Unit of Work
03 معرفی CQRS Pattern – پیاده سازی اینترفیس IRequest برای عملیات Create
04 پیاده سازی اینترفیس IRequestHandler – معرفی و استفاده از AutoMapper
05 معرفی و استفاده از Fluent Validation
06 پیاده سازی عملیات Delete
07 پیاده سازی عملیات Update
08 استفاده از Custom Exception ها
09 پیاده سازی عملیات GetById
10 پیاده سازی عملیات GetAll
11 افزودن لایه Persistence به پروژه
12 Config کردن موجودیت ها با استفاده از IEntityTypeConfiguration
13 پیاده سازی متدهای Generic Repository
14 Double check کردن متدها ، تغییرات نهایی و نوشتن کامنت برای آنها
15 پیاده سازی متدهای UnitOfWork
فصل چهارم- WEB API13 جلسه
01 افزودن پروژه WebAPI به Solution – پیاده سازی Action های CRUD با استفاده از MediatR
02 ایجاد Migration و رفع چالش های پیش آمده – تست کردن عملکرد Action ها با استفاده از Swagger
03 تکمیل کردن کد ها پس از بررسی های قسمت قبل
04 افزودن یک Custom Middleware برای مدیریت Exception ها
05 مدیریت ResponseType ها به شکل حرفه ای تر
06 مدیریت ResponseType ها به شکل حرفه ای تر - قسمت دوم
07 مرور تمامی مراحل و تکمیل موجودیت Category
08 بررسی تمامی موجودیت های مرتبط با Course
09 Config کردن تمامی موجودیت های مرتبط با Course
10 بررسی Repository های مرتبط با موجودیت Course
11 بررسی Command های مرتبط با موجودیت Course
12 بررسی Query های مرتبط با موجودیت Course
13 بررسی پروژه Web API و تست کردن عملکرد Action ها با استفاده از Swagger
فصل پنجم - Front-End18 جلسه
01 چه زمانی از قالب های آماده استفاده کنیم ؟
02 ساخت پروژه Blazor برای میزبانی بخش فرانت - افزودن کد های صفحه ایندکس در MainLayout
03 ایجاد Blazor Component برای نگه داری Section های مختلف صفحه index
04 تغییرات لازم جهت لود شدن فایل های js جهت هندل کردن بخش های مختلف سایت
05 ایجاد Blazor Component برای نگه داری Section های مختلف صفحه index - قسمت دوم
06 ارتباط بین پروژه فرانت و پروژه بک اند به چه شکل باید برقرار شود؟
07 ایجاد یک پروژه جدید برای برقراری ارتباط بین پروژه Blazor و پروژه Web API - آماده سازی زیرساخت آن
08 ایجاد یک پروژه جدید برای برقراری ارتباط بین پروژه Blazor و پروژه Web API - تعریف کلاسی برای مدیریت سرویس های Course
09 اعمال تغییرات لازم و حل چالش های موجود در پروژه Blazor برای استفاده از سرویس ایجاد شده برای Course و داینامیک شدن دیتاهای Component نمایش اطلاعات دوره ها
10 معرفی مفهوم بسیار مهم CORS و فعال کردن آن در جهت گرفتن اطلاعات از پروژه Web API و نمایش آن در پروژه Blazor
11 پیاده سازی کامپوننت Page Header
12 پیاده سازی Page های درباره ما و تماس با ما
13 پیاده سازی Page جزییات درس - قسمت اول
14 پیاده سازی Page جزییات درس - قسمت دوم
15 پیاده سازی Page جزییات درس - قسمت سوم
16 پیاده سازی کامپوننت نمایش لیست درس ها در منوی سایت
17 پیاده سازی کامپوننت نمایش لیست درس ها در صفحه اصلی سایت
18 پیاده سازی کامپوننت نمایش اسلایدر ها در صفحه اصلی سایت
فصل ششم - Authentication / Authorization10 جلسه
01 ایجاد صفحه ثبت نام و لاگین
02 افزودن Identity به پروژه . ایجاد کلاس دلخواه برای کاربر و نقش . کانفیگ کردن جداول Identity
03 ایجاد Dto های مربوط به ثبت نام و لاگین در جایگاه مناسب . تعریف کنترلر اکانت برای پیاده سازی ثبت نام و لاگین . ایجاد یک اینترفیس برای سرویس های مربوط به پیاده سازی ثبت نام و ورود
04 پیاده سازی اینترفیس تعریف شده در قسمت قبل . معرفی و بررسی JWT و استفاده از آن جهت تکمیل سرویس ثبت نام و لاگین . معرفی و استفاده از IOptions
05 معرفی HttpFile جهت فراخوانی متد های WebApi بدون نیاز به ابزاری مانند PostMan
06 تکمیل قسمت های مربوط به پروژه Blazor . معرفی و کاربرد EditContext و ValidationMessageStore . تکمیل کردن نکات مربوط به CORS
07 معرفی و استفاده از AuthenticationStateProvider و استفاده از LocalStorage در پروژه Blazor
08 استفاده از AuthorizeView و AuthorizeRouteView و attribute [Authorize] برای مدیریت دسترسی به صفحات Blazor .
09 نمایش مقادیر Claim های ارسال شده در پیج پروفایل جهت تست و آموزش
10 معرفی و استفاده از UserClaimsPrincipalFactory جهت تکمیل شدن لیست Claim ها . معرفی و استفاده از متغیر context در پیج های Blazor
فصل هفتم - Admin Panel21 جلسه
01 مقدمه ای بر استفاده از پنل ادمین . خودمان بنویسیم یا از قالب های آماده استفاده کنیم
02 اضافه کردن ادمین پنل آماده به قالب سایت
03 معرفی و کاربرد متد OnAfterRenderAsync
04 بررسی مبحث لود کردن داینامیک فایل های css و js . تعریف یک چالش برای شما
05 دسترسی به صفحات ادمین بر اساس نقش RoleBased - بررسی عمیق تر کدهای قبلی و تغییر آن برای دسترسی به این هدف - تغییر کوچکی در نحوه نمایش صفحه لاگین و ثبت نام
06 افزودن صفحه Add Slider برای مدیر جهت مدیریت کردن اسلایدر های سایت ، ایجاد،ویرایش،مشاهده و حذف - افزودن متد Put در زیر ساخت پروژه جهت داشتن امکان ویرایش
07 ایجاد یک کامپوننت جدید برای نمایش Category ها در یک DropDown List
08 بررسی انواع سناریو های مختلف برای ذخیره کردن یک موجودیت سنگین و پیچیده . بررسی Dto مربوط به ایجاد یک آبجکت از موجودیت Course
09 معرفی و استفاده از Builder Design Pattern جهت ساخت آبجکت Course
10 افزودن دو تا Modal Component جهت دریافت اطلاعات فصل ها و تاپیک های هر فصل . مروری بر امکانات و قابلیت های Blazor
11 اجرا کردن برنامه و تست دریافت اطلاعات از کاربر و ذخیره آن در دیتابیس
12 بررسی چند نکته مهم در مورد IRepository ها و داشتن یا نداشتن Generic Repository . بررسی مسئله داشتن کلمه کلیدی تکراری در تعریف درس های مختلف . چک کردن کلمات کلیدی موجود در دیتابیس و استفاده از همان رکورد ها در تعریف یک درس جدید . افزودن متد های مورد نیاز به IKeywordRepository
13 بررسی تغییرات پروژه Blazor برای عملیات حذف و به روز رسانی موجودیت Course . شامل تغییرات کامپوننت نمایش دسته بندی ها و تعریف کامپوننت جدید برای گرفتن تایید حذف در قالب یک مودال
14 بررسی تغییرات پروژه Web API برای عملیات حذف و به روز رسانی موجودیت Course . افزودن Action های مورد نیاز در Course Controller
15 بررسی تغییرات پروژه Client Services برای عملیات حذف و به روز رسانی موجودیت Course .
16 بررسی تغییرات پروژه Persistence برای عملیات حذف و به روز رسانی موجودیت Course . افزودن DbSet های مورد نیاز و متد های مورد نیاز به Repositorty های مرتبط
17 بررسی تغییرات پروژه Application برای عملیات حذف و به روز رسانی موجودیت Course . تغییر نحوه Mapping ، نوشتن کلاس و متد دلخواه برای انجام Mapping و جایگزین کردن آن بجای استفاده از AutoMapper
18 بررسی تغییرات پروژه Application برای عملیات حذف موجودیت Course . بررسی کد Delete Course Command Handler
19 بررسی تغییرات پروژه Application برای عملیات به روز رسانی موجودیت Course . بررسی کد Update Course Command Handler
20 اجرا کردن پروژه و تست بخش حذف یک درس به صورت کامل
21 اجرا کردن پروژه و تست بخش به روز رسانی یک درس به صورت کامل
فصل هشتم - Refactoring23 جلسه
01 بررسی تغییرات پروژه Domain
02 بررسی تغییرات پروژه Application
03 بررسی تغییرات پروژه Persistence
04 بررسی تغییرات پروژه Client Service
05 بررسی تغییرات پروژه Blazor
06 اجرای برنامه و تست کردن تغییرات داده شده
07 بررسی تغییرات جدید برای پروژه Domain
08 بررسی تغییرات جدید برای پروژه Persistence
09 افزودن پیاده سازی سرویس Keyword در پروژه Persistence
10 بررسی تغییرات جدید برای پروژه Application - تغییر در Mapping ها
11 بررسی تغییرات جدید برای پروژه Application - تغییر در Dto ها
12 بررسی تغییرات جدید برای پروژه Application - تغییر در Command Handler ها
13 اجرای برنامه و تست کردن تغییرات داده شده - قسمت اول
14 اجرای برنامه و تست کردن تغییرات داده شده - قسمت دوم
15 طرح یک سوال ! چرا زمانی که کاربر لاگین میکند ما نمیتوانیم در Back-end آن را شناسایی کنیم ؟ . در قالب یک مثال متوجه داستان خواهیم شد
16 بررسی تغییرات پروژه Web API برای داشتن Authorize در Back-end
17 بررسی تغییرات پروژه Blazor برای داشتن Authorize در Back-end
18 Refactor کردن پروژه Blazor ، افزودن AppConfigLoader و Extension Method برای IServiceCollection
19 Refactor کردن پروژه Web API ، افزودن JwtBearerEvents و AssemblyLoad برای مشاهده دقیق تر روند اجرای برنامه . استفاده از ILogger برای ثبت وقایع
20 Ignore کردن جداولی از Identity Entities که نیازی به آنها نداریم . افزودن نقش دانشجو به کاربرانی که ثبت نام میکنند .
21 مرور دقیق تر تغییرات جلسه قبل و Commit کردن آنها
22 چند تغییر در پروژه Blazor و افزودنRoles به AuthorizeView و افزودن Context به Authorized
23 یکی از مهم ترین تغییرات این فصل در این قسمت اتفاق افتاد . بررسی مفهوم Leaky Abstraction و Composition Over Inheritance
فصل نهم - Shopping Basket35 جلسه
01 مدل سازی نیازمندی های داشتن سبد خرید و تخفیف با رویکرد Domain-Driven Design
02 کانفیگ کردن مدل ها با IEntityTypeConfiguration
03 بررسی Repository های مورد نیاز
04 بررسی Command ها و Query های مورد نیاز
05 بررسی BasketController و BasketServices
06 افزودن دکمه ، Add To Basket به صفحه درس
07 بررسی تغییرات Header Component و MainLayout و Login و همچنین افزودن سرویس LoginStatus . معرفی و استفاده از Blazored Toast
08 بررسی کامپوننت سبد خرید و عملکرد BasketNotifier
09 بررسی تغییرات bootstrap و js
10 اجرا کردن پروژه و تست عملکرد سبد خرید
11 اجرا کردن برنامه و دموی اصلاحات و تغییرات جدید
12 بررسی تغییرات در پروژه Blazor WebAssembly - قسمت اول معرفی و کاربرد - افزودن BaseComponent
13 بررسی تغییرات در پروژه Blazor WebAssembly - قسمت دوم معرفی و کاربرد - افزودن CartService
14 بررسی تغییرات در پروژه Blazor WebAssembly - قسمت سوم معرفی و کاربرد - افزودن CartService
15 بررسی تغییرات در تمامی پروژه ها و کامیت کردن آنها
16 اجرا کردن مجدد برنامه بررسی Local Storage ، پیدا شدن یک چالش جدید و بررسی آن
17 حل کردن چالش قسمت قبل با ایجاد تغییراتی در BaseComponent
18 افزودن قابلیت Loading به BaseComponent در راستای تغییر قسمت قبل
19 اجرای پروژه و نمایش جزییات بیشتری از اطلاعات پرداخت و همچنین بررسی وضعیت رکوردهای سبد خرید و سفارش زمانی که سفارش ثبت میشود اقلام سبد خرید حذف میشود
20 بررسی کد های زده شده دموی قسمت قبل
21 بررسی کدهای مربوط به تخفیف روی درس ها
22 بررسی کدهای مربوط به تخفیف روی کل سفارش
23 بررسی تغییرات پروژه Domain در جهت داشتن امکان دانلود فایل توسط کاربر
24 بررسی تغییرات پروژه Application در جهت داشتن امکان دانلود فایل توسط کاربر
25 بررسی تغییرات پروژه Application در جهت داشتن امکان دانلود فایل توسط کاربر بخش دوم
26 بررسی تغییرات پروژه Persistence در جهت داشتن امکان دانلود فایل توسط کاربر ( بررسی Download Token Service (
27 بررسی تغییرات پروژه API در جهت داشتن امکان دانلود فایل توسط کاربر ( بررسی File Storage Service و File Management Controller )
28 بررسی تغییرات پروژه API در جهت داشتن امکان دانلود فایل توسط کاربر ( بررسی ساختار فولدرها و فایل ها و نحوه مدیریت فایل های موقت )
29 بررسی تغییرات پروژه Blazor بخش اول در جهت داشتن امکان دانلود فایل توسط کاربر
30 بررسی تغییرات پروژه Client Service در جهت داشتن امکان دانلود فایل توسط کاربر
31 بررسی یک شرایط نامطلوب و بهبود کد برای برطرف شدن آن . Refactor کردن کلاس های CustomAuthenticationStateProvider و JwtAuthorizationMessageHandler
32 اجرا کردن پروژه و بررسی حالت های مختلف دسترسی داشتن یا نداشتن دانلود فایل
33 بررسی دقیق تر بخش های مرتبط با Download Token در زمان دانلود فایل ( دیباگ کردن پروژه )
34 بررسی نحوه آپلود شدن فایل و مشاهده یک حالت استثنا برای برخی از پسوند فایل ها
35 پایان فصل : بررسی حالت استثنا و برطرف کردن آن