کورس یادگیری Angular از پایه : طراحی تا انتشار

چارچوب جلوی زاویه ای کارشناسی ارشد و یادگیری ساخت یک برنامه کامل مدرن مدرن از طراحی برای استفاده از Firestore

عنوان اصلی : Angular App From Scratch - Complete Guide Design to Deploy

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

به دوره خوش آمدید:
تبلیغ دوره
مقدمه
نمایش برنامه (نمای جلویی)
نمایش برنامه (داشبورد پشتیبان)
ساختار دوره (مبانی)
ساختار دوره (طراحی و توسعه)
نحوه دریافت بیشتر دوره
به‌روزرسانی‌های دوره
تنظیم محیط توسعه:
معرفی بخش (تنظیم محیط)
2. راه اندازی ویرایشگر کد (Vscode)
نگاه اول Vscode
تنظیم تم Vscode
تنظیم فونت Vscode
افزونه های مفید Vscode
نصب Nodejs و NPM
پایان بخش (تنظیم محیط)
طراحی و نمونه سازی. :
معرفی بخش (طراحی و نمونه اولیه)
Figma چیست
مزایای طراحی و نمونه سازی
با Figma شروع کنید
قاب های Figma
ابزارهای شکل Figma
ابزار متن Figma
رنگ های Figma
محدودیت های Figma
اجزای Figma
ساخت اجزای مادر Figma
ویرایش اجزای Figma
لوگوی سرصفحه طراحی
ناوبر دسته بندی طراحی
طراحی قسمت پاورقی
منطقه پست ویژه را طراحی کنید
کارت پستال را طراحی کنید
جدیدترین ناحیه پست را طراحی کنید
وظیفه !!! (طراحی فرم اشتراک)
راه حل (طراحی فرم اشتراک)
استفاده از اجزای Figma
صفحه تک دسته را طراحی کنید
صفحه تک پست را طراحی کنید
فرم نظر را طراحی کنید
منطقه پیش نمایش نظرات را طراحی کنید
صفحه درباره ما را طراحی کنید
صفحه شرایط و ضوابط را طراحی کنید
وظیفه!!!! (طراحی صفحه تماس با ما)
راه حل (طراحی صفحه تماس با ما)
با Prototype در Figma شروع کنید
اتصالات نمونه اولیه صفحه اصلی.
اتصال نمونه اولیه صفحه تک دسته.
گزینه های نمونه اولیه در FIgma
نمونه اولیه همه صفحات دیگر قسمت اول
نمونه اولیه همه صفحات دیگر قسمت دوم
پایان (بخش طراحی و نمونه اولیه.)
اصول بوت استرپ:
معرفی بخش (اصول بوت استرپ)
به روز رسانی Bootstrap V5
بوت استرپ چیست؟
وارد کردن بوت استرپ قسمت اول
ورود بوت استرپ قسمت دوم
وارد کردن بوت استرپ قسمت سوم
کانتینر بوت استرپ
Bootstrap Container-Fluid
سیستم شبکه بوت استرپ
ستون های بوت استرپ
ستون های پاسخگو بوت استرپ
تایپوگرافی بوت استرپ
بوت استرپ رنگ های متنی
جداول بوت استرپ
تصاویر بوت استرپ
دکمه های بوت استرپ
بوت استرپ اسپینر
کارت های بوت استرپ
ورودی های بوت استرپ
کلاس های ابزار بوت استرپ.
پایان (اصول بوت استرپ)
با Angular & Angular CLI شروع کنید:
معرفی بخش (Angular & Angular CLI)
Angular Cli چیست
تنظیم CLI زاویه ای
اولین برنامه Angular
ساختار فایل زاویه ای قسمت اول
ساختار فایل زاویه ای قسمت دوم
ساختار فایل زاویه ای قسمت سوم
پایان (Angular & Angular CLI)
قطعات زاویه ای:
معرفی بخش (جزء زاویه ای)
یک کامپوننت زاویه ای ایجاد کنید
نحوه بارگیری مولفه ها در داخل مرورگر
خواص اجزای قالب و سبک
رویکرد بهتر برای الگو و سبک
با استفاده از Angular CLI کامپوننت Angular ایجاد کنید
قلاب چرخه حیات NgOnInit
Data Binding
به اشتراک گذاری داده ها بین اجزا
روابط فرزند والدین در مؤلفه ها
@Input Decorator
وظیفه !!!
راه حل!!!
@ViewChild Decorator
@Output Decorator & Event Emitter
پایان بخش (اجزای زاویه ای)
پیوند داده و مدیریت رویدادها:
معرفی بخش (پیوند داده ها و مدیریت رویدادها)
درون یابی رشته ای
صحافی اموال
صحافی کلاس
Style Binding
صحافی رویداد
فیلتر کردن رویداد
متغیر الگو
اتصال داده دو طرفه
اتصال داده دو طرفه در مقابل یک طرفه
وظیفه !!!
راه حل I
راه حل II
پایان (پیوند داده و مدیریت رویداد)
دستورالعمل های زاویه ای:
معرفی بخش (دستورالعمل ها)
Directive چیست
ngFor Directive
واکشی آرایه شی با استفاده از NgFor
تشخیص تغییر زاویه ای
ngFor Directive Index
دستورالعمل ngIF
ngTemplate
دستورالعمل ngSwitchCase
دستورالعمل ngStyle
دستورالعمل ngClass
دستورالعمل ساختاری در مقابل دستورالعمل ویژگی
وظیفه راهنمای !!!
راه حل I
راه حل II
انتهای بخش (دستورالعمل ها)
لوله های زاویه ای:
معرفی بخش (لوله ها)
لوله زاویه ای چیست و انواع لوله ها
لوله با حروف بزرگ
لوله شماره
لوله ارز
لوله خرما
JSON Pipe
درصد لوله
لوله برش
Custom Pipe I
Custom Pipe II
با استفاده از Angular CLI Pipe سفارشی ایجاد کنید
لوله سفارشی با آرگومان
سرویس انگولار:
معرفی بخش (سرویس زاویه ای)
Angular Service چیست
ایجاد سرویس Angular (دستی)
تزریق وابستگی
ارائه دهندگان تزریق وابستگی و دکوراتور تزریقی
سرویس Angular را با استفاده از Angular CLI ایجاد کنید
استفاده از خدمات انگولار
رابط زاویه ای
پایان (سرویس زاویه ای)
فرم های زاویه ای I (فرم مبتنی بر الگو):
معرفی بخش (Template Driven Forم)
انواع فرم های زاویه ای
ایجاد فرم بوت استرپ
دستورالعمل NgForm
NgForm Explained & FormGroup Class
کلاس NgModel و FormControl
اعتبار سنجی فرم
استایل دادن به ورودی های نامعتبر
انواع اعتبارسنجی فرم
در حال تایید فیلد ورودی ایمیل
اعتبار سنجی ناحیه متن
رفع سریع خطای مورد نیاز یافت نشد
طراحی همه فیلدهای ورودی نامعتبر خطای اعتبارسنجی
ارسال فرم
غیرفعال کردن دکمه ارسال در صورت نامعتبر بودن فرم
پایان بخش (فرم مبتنی بر الگو)
فرم های زاویه ای II (فرم های واکنشی):
معرفی بخش (فرم های زاویه ای II (فرم های واکنشی))
تنظیم فرم واکنشی
ایجاد کنترل های فرم واکنشی به صورت برنامه ای
اعتبار سنجی اولیه فرم واکنشی
فرم واکنشی افزودن اعتبارسنجی های متعدد
تمام اعتبارسنجی ها را کامل کنید
ارسال فرم واکنشی و دریافت مقادیر فرم
گروه‌های فرم تودرتو
آرایه فرم واکنشی
فرم ساز واکنشی
افزودن اعتبارسنجی سفارشی I
افزودن اعتبارسنجی سفارشی II
انتهای بخش (فرم های زاویه ای II (فرم های واکنشی))
مسیریابی و ناوبری زاویه ای:
1. بخش معرفی (مسیریابی و ناوبری زاویه ای)
Angular Routing & Navigation چیست
نحوه پیاده سازی Angular Routing & Navigation
برنامه Angular جدید ایجاد کنید
روتر زاویه ای را پیکربندی کنید
خروجی روتر زاویه ای
لینک روتر زاویه ای
URL پایه زاویه ای
روتر پایه زاویه ای
روتر در مقابل Href
Angular RouterLinkActive
متغیرهای پارامتر روتر
دریافت پارامترهای روتر
آنچه قابل مشاهده است
اشتراک قابل مشاهده
بعدی قابل مشاهده
توابع قابل مشاهده در مقابل
برنامه نویسی همزمان در مقابل برنامه نویسی ناهمزمان
اشتراک و لغو اشتراک قابل مشاهده
چند پارامتر روتر
پارامترهای پرس و جو
ماژول جداگانه برای مسیریابی زاویه ای
پیمایش برنامه ریزی شده
روترهای Wild Card
انتهای بخش (مسیریابی و ناوبری زاویه ای)
طراحی وبلاگ Front End I - آماده سازی:
معرفی بخش (طراحی صفحه اول وبلاگ - آماده سازی)
برنامه ریزی اجزای برنامه وبلاگ
ایجاد اپلیکیشن Angular جدید
تولید مولفه های I
تولید اجزای II
مسیریابی و ناوبری ایستا
Bootstrap را نصب و پیوند دهید
متغیرهای CSS جهانی تم مشترک
اعلان متغیرهای CSS
سبک های جهانی را تعریف کنید
پایان بخش (طراحی قسمت اول وبلاگ - آماده سازی)
Design The Front End View II - اجزای اصلی اصلی:
معرفی بخش (طراحی نمای جلویی II - اجزای اصلی اصلی)
جزء هدر طراحی
مولفه نوار ناوبری دسته طراحی
قطعه پاورقی طراحی
طراحی کارت پستال جزء I
طراحی کارت پستال Component II
مولفه I کارت اشتراک طراحی
طراحی کارت اشتراک مولفه II
رفع خطای طراحی ورودی کارت اشتراک
بخش انتهایی (طراحی نمای جلویی II - اجزای مشترک اصلی)
Design The Front End View III - طراحی همه صفحات:
معرفی بخش (طراحی نمای جلویی III - طراحی همه صفحات)
جزء برنامه را آماده کنید
طراحی صفحه اصلی I - منطقه ویژه
طراحی صفحه اصلی II - منطقه آخرین پست
طراحی صفحه تک دسته
طراحی صفحه پست تک
اجزای فرم نظرات طراحی
جزء فهرست فرم نظر طراحی
طراحی صفحه درباره ما
صفحه شرایط و ضوابط طراحی
بخش انتهایی (طراحی نمای جلویی III - طراحی همه صفحات)
با Admin Area و Firebase Firestore شروع کنید:
معرفی بخش
داشبورد باطن را به عنوان یک برنامه Angular جداگانه طراحی کنید،
طراحی پس زمینه و اجزای آن
Bootstrap را وصل کنید
وارد کردن سبک های جهانی
کامپوننت هدر را طراحی کنید
کامپوننت پاورقی را طراحی کنید
مولفه Backend Dashboard را طراحی کنید
Firebase چیست؟
Cloud Firestore چیست؟
Firestore را با Angular App I وصل کنید
Firestore را با Angular App II وصل کنید
پایان بخش
منطقه مدیریت - عملیات CRUD I (دسته CRUD):
معرفی بخش (منطقه مدیریت - عملیات CRUD I (رده CRUD))
مؤلفه دسته را تنظیم کنید
فرم افزودن دسته جدید را طراحی کنید
فرم را به عنوان یک فرم مبتنی بر الگو بسازید
وظیفه !!!
راه حل!!!
ذخیره دسته‌ها در Cloud Firestore PT I
ذخیره دسته‌ها در Cloud Firestore PT II
ویژگی های Firestore توضیح داده شده است
ذخیره برنامه‌ای مجموعه فرعی در Cloud Firestore
ساده سازی پرس و جوی سطح مجموعه های فرعی Firestore
اعتبار سنجی فرم
یک سرویس جداگانه راه اندازی کنید
تنظیم رابط برای شی دسته
تنظیم پیام توستر
خواندن و بازیابی دسته‌ها از Cloud Firestore I
دسته‌ها را از Cloud Firestore II بخوانید و بازیابی کنید
به‌روزرسانی دسته‌ها در فضای ابری Firestore I
به‌روزرسانی دسته‌ها در فضای ابری Firestore II
حذف دسته ها
به روز رسانی و حذف پرس و جو ساده سازی با مسیر پرس و جو
انتهای بخش (منطقه مدیریت - عملیات CRUD I (رده CRUD))
منطقه مدیریت - CRUD Operation II (POST CRUD):
بخشn معرفی (20. منطقه مدیریت - CRUD Operation II (POST CRUD))
برنامه ریزی مؤلفه پست
طراحی اجزای همه پست ها
طراحی فرم پست جدید را اضافه کنید
پیوند ثابت چیست؟
پیوند ثابت را خودکار کنید
پیش‌نمایش تصویر پست را تنظیم کنید
بار کردن دسته‌های پست
ورودی ناحیه متنی را به ویرایشگر wsywig تبدیل کنید
فرم HTML را به Angular Reactive Form تبدیل کنید
اعتبار سنجی فرم I
اعتبار سنجی فرم II
فرم را ارسال کنید و مقادیر را دریافت کنید
ایجاد رابط پست
دریافت شناسه دسته و نام دسته
تصویر را در Firebase Cloud Storage I آپلود کنید
تصویر را در Firebase Cloud Storage II آپلود کنید
تصویر را در Firebase Cloud Storage III آپلود کنید
درج پست در Cloud Firestore I
درج پست در Cloud Firestore II
بارگیری پست ها I
Post II را بارگیری کنید
فرم پست جدید را برای ویرایش پست ها آماده کنید
پاک کردن برخی از سوالات
یک درخواست Firestore یک سند را بارگیری کنید
SanpshotChanges در مقابل ValueChanges
سند پست را برای ویرایش بارگیری کنید
پست را به روز کنید
خطای مقداردهی اولیه گروه فرم ساز (رفع)
ذخیره پست خطای فرم ساز
پست I را حذف کنید
پست II را حذف کنید
ایجاد یک پست ویژه و بدون ویژه I
ایجاد پست ویژه و هیچ کدام II
پایان بخش (20. ناحیه مدیریت - CRUD Operation II (POST CRUD))
تأیید هویت و مجوز:
معرفی بخش‌ها (تأیید هویت و مجوز)
ایجاد مؤلفه ورود و راه اندازی روترها
مؤلفه ورود را طراحی کنید
فرم ورود را مبتنی بر الگو بسازید
اعتبار سنجی فرم را اضافه کنید
مقادیر فرم ها را بگیرید
احراز هویت Firebase چیست و چگونه از آن استفاده کنیم
تنظیم ماژول Angular FIreauth
عبارت ورود به سیستم را بنویسید
عبارت Login Query II را بنویسید
دریافت اطلاعات کاربر Loggedin I
دریافت اطلاعات کاربر Loggedin II
پرسش خروج
حذف دکمه ایمیل و خروج از ورود به سیستم I
دکمه ایمیل و خروج را از نمای ورود به سیستم II حذف کنید
رفتار موضوع توضیح داده شده است
Router Guard چیست
Router Guard I را پیاده سازی کنید
Router Guard II را پیاده سازی کنید
روتر گارد را به همه روترهای دیگر اضافه کنید
پایان بخش (احراز هویت و مجوز)
نمایش وبلاگ Fornt End را پویا کنید:
معرفی بخش (نمایش وبلاگ Fornt End را پویا کنید)
برنامه را به Firebase وصل کنید
بارگذاری دسته‌های I
بارگذاری دسته‌های II
بارگذاری پست های ویژه
بند WHERE در پرس و جو Firestore
نمایش کارت پست های ویژه در مرورگر
داده های پست را به مؤلفه فرزند کارت پستال ارسال کنید
LIMIT پرسش Firestore
بارگیری آخرین پست و ORDERBY فیلتر I
بارگیری آخرین پست و ORDERBY Filter II
صفحه تک دسته را پویا I کنید
صفحه تک دسته را Dynamic II بسازید
صفحه تک دسته را Dynamic III بسازید
صفحه تک دسته را پویا IV کنید
صفحه کامپوننت تک پست را پویا کنید
صفحه کامپوننت تک پست را Dynamic II بسازید
صفحه کامپوننت تک پست را Dynamic III بسازید
بارگذاری پست های مشابه
شمارش تعداد بازدید از پست ها (افزایش فیلد)
نشان دادن برچسب ویژه به صورت مشروط
پایان بخش (نمایش وبلاگ Fornt End را پویا کنید)
اشتراک کاربر:
معرفی بخش (اشتراک کاربر)
فرم اشتراک را به عنوان یک فرم مبتنی بر الگو بسازید
اعتبار سنجی فرم اشتراک
مقادیر فرم های اشتراک را بگیرید
رابط داده اشتراک
پرسمان ذخیره داده اشتراک
جلوگیری از تکرار ایمیل I
جلوگیری از تکرار ایمیل II
مدیریت پیام خطا و پیام موفقیت
بارگیری کاربران مشترک در داخل داشبورد Backend I
کاربران مشترک را در داخل داشبورد Backend II بارگیری کنید
کاربران مشترک را در داخل داشبورد Backend III بارگیری کنید
پایان بخش (اشتراک کاربر)
ساخت و استقرار:
معرفی بخش
برنامه را برای مراحل نهایی آماده کنید
ساخت برنامه برای تولید (وبلاگ فرانتند)
میزبان و پیکربندی Firebase
برنامه Angular را در میزبان firebase I اجرا کنید
برنامه Angular را در میزبان firebase II مستقر کنید
برنامه Backend Dashboard را در Firebase Host I استقرار دهید
برنامه Backend Dashboard را در Firebase Host II مستقر کنید