آموزش با ANGULAR و ASP.NET Core REST API برنامه های شگفت انگیز بسازید

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

معرفی Introduction

• معرفی دوره Introduction to the course

• معرفی دوره Introduction to the course

• پیش نیازها Prerequisites

• پشته فنی استفاده شده است Tech stack used

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

• Visual Studio 2019 را دانلود و نصب کنید Download and Install Visual Studio 2019

• Visual Studio 2019 را دانلود و نصب کنید Download and Install Visual Studio 2019

• NET SDK و NET Runtime را نصب کنید Install .NET SDK and .NET Runtime

• NET SDK و NET Runtime را نصب کنید Install .NET SDK and .NET Runtime

• کد ویژوال استودیو را نصب کنید Install Visual Studio Code

• SQL Server Management Studio را نصب کنید Install SQL Server Management Studio

• SQL Server Management Studio را نصب کنید Install SQL Server Management Studio

• NodeJs را نصب کنید Install NodeJs

• Angular CLI را نصب کنید Install Angular CLI

• کمک گرفتن Getting help

• کد منبع و مخزن GITHUB - کد منبع کامل Source Code and GITHUB Repository - Complete Source Code

• کد منبع و مخزن GITHUB - کد منبع کامل Source Code and GITHUB Repository - Complete Source Code

معرفی Introduction

• پیش نیازها Prerequisites

• پشته فنی استفاده شده است Tech stack used

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

• کد ویژوال استودیو را نصب کنید Install Visual Studio Code

• NodeJs را نصب کنید Install NodeJs

• Angular CLI را نصب کنید Install Angular CLI

• کمک گرفتن Getting help

ساخت API با استفاده از ASP.NET CORE Building APIs using ASP.NET CORE

• معرفی Introduction

• در حال افزودن برنامه ما به Git Adding our application to Git

• ایجاد ASP.NET Core API با استفاده از Visual Studio Creating a ASP.NET Core API using Visual Studio

• ایجاد ASP.NET Core API با استفاده از Visual Studio Creating a ASP.NET Core API using Visual Studio

• درک و ساخت مدل ها Understanding and building the Models

• درک و ساخت مدل ها Understanding and building the Models

• افزودن Entity Framework Core (EF Core) Adding Entity Framework Core (EF Core)

• افزودن Entity Framework Core (EF Core) Adding Entity Framework Core (EF Core)

• ایجاد DbContext Creating the DbContext

• افزودن اتصال به پایگاه داده Adding Connection to the database

• پیکربندی DbContext و استفاده از Dependency Injection از Startup.cs Configuring DbContext and using Dependency Injection from Startup.cs

• پیکربندی DbContext و استفاده از Dependency Injection از Startup.cs Configuring DbContext and using Dependency Injection from Startup.cs

• ایجاد پایگاه داده با استفاده از EF Core migrations Create database using EF Core migrations

• ایجاد پایگاه داده با استفاده از EF Core migrations Create database using EF Core migrations

• کاشت پایگاه داده Seeding the database

• کاشت پایگاه داده Seeding the database

• ایجاد مخزن دانش آموز - الگوی مخزن Creating student repository - Repository pattern

• ایجاد کنترلر API Students Creating the Students API Controller

• ایجاد کنترلر API Students Creating the Students API Controller

• API را اجرا کنید و با استفاده از Swagger UI تست کنید Run the API and test using Swagger UI

• API را اجرا کنید و با استفاده از Swagger UI تست کنید Run the API and test using Swagger UI

• مدل های دامنه و مدل های داده Domain Models and Data Models

• افزودن ویژگی های پیمایش آدرس و جنسیت Adding Navigation Properties Address and Gender

• Automapper را نصب و استفاده کنید Install and Use Automapper

• کد ما را ناهمزمان کنیم Making Our Code Asynchronous

• کد ما را ناهمزمان کنیم Making Our Code Asynchronous

• در حال ذخیره تغییرات شما در Git Saving your changes to Git

ساخت API با استفاده از ASP.NET CORE Building APIs using ASP.NET CORE

• معرفی Introduction

• در حال افزودن برنامه ما به Git Adding our application to Git

• ایجاد DbContext Creating the DbContext

• افزودن اتصال به پایگاه داده Adding Connection to the database

• ایجاد مخزن دانش آموز - الگوی مخزن Creating student repository - Repository pattern

• مدل های دامنه و مدل های داده Domain Models and Data Models

• افزودن ویژگی های پیمایش آدرس و جنسیت Adding Navigation Properties Address and Gender

• Automapper را نصب و استفاده کنید Install and Use Automapper

ایجاد اپلیکیشن UI با استفاده از Angular Creating the UI application using Angular

• مقدمه ای بر اپلیکیشن Angular Introduction to the Angular Application

• مقدمه ای بر اپلیکیشن Angular Introduction to the Angular Application

• پیش نیازهای ایجاد یک Angular App Prerequisites to create an Angular App

• شبیه سازی مخزن UI از GIT Cloning UI Repository From GIT

• شبیه سازی مخزن UI از GIT Cloning UI Repository From GIT

• ایجاد برنامه Angular با استفاده از CLI زاویه ای Creating Angular application using angular CLI

• افزودن پسوندهای کد ویژوال استودیو Adding visual studio code extensions

• افزودن پسوندهای کد ویژوال استودیو Adding visual studio code extensions

• کتابخانه Angular Material UI را نصب کنید Install Angular Material UI Library

• مرجع اجزای مواد زاویه ای در app.module Reference Angular Material Components in app.module

• مرجع اجزای مواد زاویه ای در app.module Reference Angular Material Components in app.module

• کتابخانه FlexBoxGrid را نصب کنید Install FlexBoxGrid Library

• کتابخانه FlexBoxGrid را نصب کنید Install FlexBoxGrid Library

• راه حل UI تمیز Clean UI Solution

• ایجاد مؤلفه ناوبری برتر Creating Top Navigation Component

• ایجاد جزء لیست دانش آموزان Creating Students List Component

• ایجاد جزء لیست دانش آموزان Creating Students List Component

• ایجاد یک مسیر Creating a Route

• ایجاد یک مسیر Creating a Route

• ایجاد سرویس دانشجویی Creating The Student Service

• افزودن پشتیبانی CORS در API Adding CORS support in the API

• افزودن پشتیبانی CORS در API Adding CORS support in the API

• ایجاد مدل های رابط کاربری Creating UI Models

• نمایش دانش آموزان واکشی Displaying Fetched Students

• پیاده سازی صفحه بندی روی میز Implementing Pagination on the Table

• پیاده سازی مرتب سازی روی میز Implementing Sorting on the Table

• پیاده سازی فیلترینگ روی میز Implementing Filtering on the Table

• پیاده سازی فیلترینگ روی میز Implementing Filtering on the Table

• در حال ذخیره تغییرات شما در Git Saving your changes to Git

• در حال ذخیره تغییرات شما در Git Saving your changes to Git

• خلاصه Summary

• خلاصه Summary

ایجاد اپلیکیشن UI با استفاده از Angular Creating the UI application using Angular

• پیش نیازهای ایجاد یک Angular App Prerequisites to create an Angular App

• ایجاد برنامه Angular با استفاده از CLI زاویه ای Creating Angular application using angular CLI

• کتابخانه Angular Material UI را نصب کنید Install Angular Material UI Library

• راه حل UI تمیز Clean UI Solution

• ایجاد مؤلفه ناوبری برتر Creating Top Navigation Component

• ایجاد سرویس دانشجویی Creating The Student Service

• ایجاد مدل های رابط کاربری Creating UI Models

• نمایش دانش آموزان واکشی Displaying Fetched Students

• پیاده سازی صفحه بندی روی میز Implementing Pagination on the Table

• پیاده سازی مرتب سازی روی میز Implementing Sorting on the Table

• در حال ذخیره تغییرات شما در Git Saving your changes to Git

بازیابی و نمایش جزئیات دانش آموز مجرد (خوانده شده در CRUD) Retrieving and Displaying Single Student Details (READ in CRUD)

• معرفی Introduction

• ایجاد یک روش کنترلر جدید Creating a New Controller Method

• ایجاد یک روش کنترلر جدید Creating a New Controller Method

• آزمایش روش جدید با استفاده از Swagger UI Testing the new method using Swagger UI

• آزمایش روش جدید با استفاده از Swagger UI Testing the new method using Swagger UI

• کامپوننت جدید در برنامه Angular UI ایجاد کنید Create New Component in the Angular UI Application

• کامپوننت جدید در برنامه Angular UI ایجاد کنید Create New Component in the Angular UI Application

• ایجاد مسیر برای مشاهده مولفه دانش آموز Creating Route for View Student Component

• واکشی داده های دانش آموز مجرد از API به UI Fetching Data Of Single Student From API into UI

• واکشی داده های دانش آموز مجرد از API به UI Fetching Data Of Single Student From API into UI

• تعریف پیوند بین جدول دانشجویان و مشاهده دانشجو در رابط کاربری Defining Link Between Students Table and View Student in UI

• ایجاد و پیاده سازی طراحی برای دانشجوی View Creating and Implementing Design For View Student

• ایجاد و پیاده سازی طراحی برای دانشجوی View Creating and Implementing Design For View Student

• اتصال داده های دانش آموز از API به UI Binding Student Data From API to UI

• اتصال داده های دانش آموز از API به UI Binding Student Data From API to UI

• در حال ذخیره تغییرات شما در GIT Saving your changes to GIT

بازیابی و نمایش جزئیات دانش آموز مجرد (خوانده شده در CRUD) Retrieving and Displaying Single Student Details (READ in CRUD)

• معرفی Introduction

• ایجاد مسیر برای مشاهده مولفه دانش آموز Creating Route for View Student Component

• تعریف پیوند بین جدول دانشجویان و مشاهده دانشجو در رابط کاربری Defining Link Between Students Table and View Student in UI

• در حال ذخیره تغییرات شما در GIT Saving your changes to GIT

به روز رسانی یک دانش آموز موجود - (به روز رسانی در CRUD) Updating an Existing Student - (UPDATE in CRUD)

• معرفی Introduction

• ایجاد متد GET برای کنترل کننده جنسیت Creating GET method for Gender Controller

• نمایش لیست جنسیت در کشویی Display Gender List In Dropdown

• ایجاد روش جدید API - به روز رسانی دانشجو Create New API Method - UPDATE Student

• ایجاد قابلیت Update در رابط کاربری Create Update Functionality in UI

• ایجاد قابلیت Update در رابط کاربری Create Update Functionality in UI

• نمایش اعلان ها در به روز رسانی Show Notifications On Update

• نمایش اعلان ها در به روز رسانی Show Notifications On Update

• در حال ذخیره تغییرات شما در GIT Saving your changes to GIT

به روز رسانی یک دانش آموز موجود - (به روز رسانی در CRUD) Updating an Existing Student - (UPDATE in CRUD)

• معرفی Introduction

• ایجاد متد GET برای کنترل کننده جنسیت Creating GET method for Gender Controller

• نمایش لیست جنسیت در کشویی Display Gender List In Dropdown

• ایجاد روش جدید API - به روز رسانی دانشجو Create New API Method - UPDATE Student

• در حال ذخیره تغییرات شما در GIT Saving your changes to GIT

حذف دانش آموز (DELETE در CRUD) Deleting a Student (DELETE in CRUD)

• معرفی Introduction

• ایجاد روش جدید API - DELETE Create New API Method - DELETE

• روش DELETE را در Swagger تست کنید Test DELETE method in Swagger

• روش DELETE را در Swagger تست کنید Test DELETE method in Swagger

• ایجاد دکمه حذف در صفحه جزئیات دانش آموز در UI Create Delete Button on Student Detail Page in UI

• روش DELETE را در Student Service در UI ایجاد کنید Create DELETE Method in Student Service in UI

• پیاده سازی روش OnDelete در رابط کاربری بر اساس کلیک دکمه حذف Implement OnDelete Method In UI based on Delete Button Click

• پیاده سازی روش OnDelete در رابط کاربری بر اساس کلیک دکمه حذف Implement OnDelete Method In UI based on Delete Button Click

• نمایش اعلان ها در مورد حذف و تغییر مسیر به دانش آموزان در UI Show Notifications On Delete and Redirect To Students in UI

• در حال ذخیره تغییرات شما در GIT Saving your changes to GIT

• در حال ذخیره تغییرات شما در GIT Saving your changes to GIT

حذف دانش آموز (DELETE در CRUD) Deleting a Student (DELETE in CRUD)

• معرفی Introduction

• ایجاد روش جدید API - DELETE Create New API Method - DELETE

• ایجاد دکمه حذف در صفحه جزئیات دانش آموز در UI Create Delete Button on Student Detail Page in UI

• روش DELETE را در Student Service در UI ایجاد کنید Create DELETE Method in Student Service in UI

• نمایش اعلان ها در مورد حذف و تغییر مسیر به دانش آموزان در UI Show Notifications On Delete and Redirect To Students in UI

• در حال ذخیره تغییرات شما در GIT Saving your changes to GIT

افزودن/ایجاد دانش آموز جدید (ایجاد در CRUD) Adding/Creating A New Student (CREATE in CRUD)

• معرفی Introduction

• روش Add Student API را ایجاد کنید Create Add Student API Method

• روش جدید افزودن دانش آموز را در Swagger تست کنید Test New Add Student Method In Swagger

• ایجاد دکمه افزودن در صفحه دانشجویی در رابط کاربری Create Add Button In Students Page In UI

• ایجاد دکمه افزودن در صفحه دانشجویی در رابط کاربری Create Add Button In Students Page In UI

• ساختن کامپوننت دانشجویی عمومی در UI Making Student Component Generic In UI

• ایجاد روش سرویس در UI Creating Service Method In UI

• ایجاد روش سرویس در UI Creating Service Method In UI

• فراخوانی روش Add Student API از UI Call Add Student API method From UI

• فراخوانی روش Add Student API از UI Call Add Student API method From UI

• نمایش اعلان و تغییر مسیر Show Notification and Redirect

• پاکسازی کامپوننت عمومی Cleaning Up Generic Component

• در حال ذخیره تغییرات شما در GIT Saving your changes to GIT

افزودن/ایجاد دانش آموز جدید (ایجاد در CRUD) Adding/Creating A New Student (CREATE in CRUD)

• معرفی Introduction

• روش Add Student API را ایجاد کنید Create Add Student API Method

• روش جدید افزودن دانش آموز را در Swagger تست کنید Test New Add Student Method In Swagger

• ساختن کامپوننت دانشجویی عمومی در UI Making Student Component Generic In UI

• نمایش اعلان و تغییر مسیر Show Notification and Redirect

• پاکسازی کامپوننت عمومی Cleaning Up Generic Component

• در حال ذخیره تغییرات شما در GIT Saving your changes to GIT

آپلود تصویر از Angular UI به Web API Upload Image From Angular UI to Web API

• معرفی Introduction

• ایجاد روش API برای آپلود تصویر Create API Method To Upload Image

• ایجاد روش API برای آپلود تصویر Create API Method To Upload Image

• روش آپلود تصویر را در Swagger آزمایش کنید Test Upload Image Method in Swagger

• روش آپلود تصویر را در Swagger آزمایش کنید Test Upload Image Method in Swagger

• ساختار رابط کاربری تصویر نمایه ایجاد کنید Create Profile Image UI Structure

• ساختار رابط کاربری تصویر نمایه ایجاد کنید Create Profile Image UI Structure

• اضافه کردن دکمه آپلود فایل در UI Add File Upload Button in UI

• ایجاد روش سرویس در UI To Call API Create Service Method In UI To Call API

• آپلود تصویر از رابط کاربری Upload Image From UI

• ذخیره تغییرات در GIT Saving Changes To GIT

آپلود تصویر از Angular UI به Web API Upload Image From Angular UI to Web API

• معرفی Introduction

• اضافه کردن دکمه آپلود فایل در UI Add File Upload Button in UI

• ایجاد روش سرویس در UI To Call API Create Service Method In UI To Call API

• آپلود تصویر از رابط کاربری Upload Image From UI

• ذخیره تغییرات در GIT Saving Changes To GIT

اعتبار سنجی سمت سرور و کلاینت Server and Client Side Validations

• معرفی Introduction

• اعتبار سنجی سمت سرور - بسته Nuget Validation Fluent را نصب کنید Server Side Validation - Install Fluent Validation Nuget Package

• اعتبار سنجی سمت سرور - بسته Nuget Validation Fluent را نصب کنید Server Side Validation - Install Fluent Validation Nuget Package

• تست اعتبارسنجی سمت سرور - اعتبارسنجی درخواست دانشجو را اضافه کنید Test Server Side Validation - Add Student Request Validation

• تست اعتبارسنجی سمت سرور - اعتبارسنجی درخواست دانشجو را اضافه کنید Test Server Side Validation - Add Student Request Validation

• اعتبار سنجی سمت سرور برای به روز رسانی عملکرد دانشجویی Server Side Validation For Update Student Functionality

• اعتبار سنجی سمت سرور برای به روز رسانی عملکرد دانشجویی Server Side Validation For Update Student Functionality

• اعتبار سنجی سمت سرور برای عملکرد آپلود تصویر Server Side Validation For Image Upload Functionality

• اعتبار سنجی سمت سرور برای عملکرد آپلود تصویر Server Side Validation For Image Upload Functionality

• اعتبار سنجی سمت مشتری Client Side Validations

• اعتبار سنجی سمت مشتری Client Side Validations

• رفع اعتبار آپلود تصویر Fixing Upload Image Validation

• در حال ذخیره تغییرات شما در GIT Saving your changes to GIT

• در حال ذخیره تغییرات شما در GIT Saving your changes to GIT

اعتبار سنجی سمت سرور و کلاینت Server and Client Side Validations

• معرفی Introduction

• رفع اعتبار آپلود تصویر Fixing Upload Image Validation

• در حال ذخیره تغییرات شما در GIT Saving your changes to GIT

آماده سازی راه حل ما و بهترین روش ها Making Our Solution Production Ready & Best Practices

آماده سازی راه حل ما و بهترین روش ها Making Our Solution Production Ready & Best Practices

• معرفی Introduction

• تغییر پیکربندی API در UI - با استفاده از Environment File Changing API Configuration in UI - Using Environment File

• تغییر پیکربندی API در UI - با استفاده از Environment File Changing API Configuration in UI - Using Environment File

استقرار/انتشار UI و API ما در اینترنت Deploy / Publish Our UI and API To The Internet

• معرفی Introduction

• NET CORE Web API را در Azure منتشر کنید Publish .NET CORE Web API To Azure

• رابط کاربری Angular را در Google Firebase منتشر کنید Publish Angular UI to Google Firebase

• CORS For Production Web API را فعال کنید Enable CORS For Production Web API

استقرار/انتشار UI و API ما در اینترنت Deploy / Publish Our UI and API To The Internet

• معرفی Introduction

• معرفی Introduction

• NET CORE Web API را در Azure منتشر کنید Publish .NET CORE Web API To Azure

• کاشت داده ها به پایگاه داده تولید Seeding Data To Production Database

• کاشت داده ها به پایگاه داده تولید Seeding Data To Production Database

• رابط کاربری Angular را در Google Firebase منتشر کنید Publish Angular UI to Google Firebase

• CORS For Production Web API را فعال کنید Enable CORS For Production Web API

بخش پاداش BONUS Section

• سخنرانی جایزه BONUS Lecture

بخش پاداش BONUS Section

• سخنرانی جایزه BONUS Lecture