آموزش جامع انگولار با هوش مصنوعی (همراه با Claude Code) - آخرین آپدیت
دانلود Angular AI In Depth (With Claude Code)
خلاصه این دوره
هوش مصنوعی در چند سال اخیر نقش توسعهدهندگان نرمافزار را به طور کامل تغییر داده است، تا جایی که امروزه بسیاری از نرمافزارهای تجاری را میتوان با متد vibe-coding تولید کرد.
نقش ما به عنوان توسعهدهنده دیگر صرفاً نوشتن کد نیست. هوش مصنوعی ما را به سمت نقش معمار نرمافزارسوق داده است، جایی که وظیفه اصلی ما اکنون طراحیسیستم است.
تصمیمات مربوط به طراحی معماری، انتخاب کتابخانهها و تقسیم پروژه به تسکهای کوچک برای اینکه AI بتواند آنها را به گونهای انجام دهد که توسط انسان قابل تایید باشد؛ این نقش جدید ماست.
هوش مصنوعی بهرهوری ما را به شدت افزایش میدهد - اما فقط برای کسانی که میدانند چگونه بیشترین استفاده را از آن ببرند.
در مورد ابزارها، تکمیل خودکار کد در IDEها تقریباً بیاهمیت شده است. اکنون زمان ایجنتهای کدنویس AI مانند Claude Codeاست که میتوانند تسکهای متوسط تا بزرگ را در یک مرحله انجام دهند.
اما این موضوع چگونه با انگولار سازگار میشود؟ با انتقال به signals و کامپوننتهای standalone و اختیاری شدن RxJs، هوش مصنوعی گاهی چندین انتخاب برای تولید کد دارد.
هدف این دوره این است که به شما نشان دهد چگونه ایجنت کدنویس مورد علاقه خود را به درستی پیکربندی کنیدتا کدهای مدرن، تمیز، مبتنی بر سیگنال و zoneless تولید کند.
برای این منظور، ما Claude Code را انتخاب کرده و آن را از صفر مطابق نیازهایمان پیکربندی میکنیم. توصیههای کدنویسی برای Angular، Node و Typescript را تنظیم کرده و سرور Angular MCP را راهاندازی میکنیم.
سرور MCP به هوش مصنوعی اجازه میدهد تا به بهروزترین مستندات، مثالها و بهترین روشهای انگولار که دقیقاً با نسخه پروژه شما مطابقت دارد دسترسی پیدا کند.
پس از تنظیمات اولیه، از Claude Code برای ساخت یک چتبات OpenAI با انگولار از صفر، با استفاده از Node و OpenAI API استفاده خواهیم کرد.
این شامل تولید کامل تمام HTML و CSS در فرانتاند با استفاده از اسکرینشاتهای Figma است.
این چتبات قادر خواهد بود به هر سوال انگولاری پاسخ دهد، اما دارای محدودیتهایی خواهد بود تا از سوءاستفاده آن برای کارهای دیگر جلوگیری شود.
تمامی پرامپتهای استفاده شده در اختیار شما قرار میگیرد تا بتوانید به راحتی در پروژههای خود از آنها استفاده کنید.
ما به شما نشان میدهیم چگونه بیشترین بهره را از AI ببرید - چه سطحی از جزئیات در پرامپتها استفاده کنید، چگونه خروجی را تایید کنید، چگونه از تکرار اشتباهات جلوگیری کنید و غیره.
علاوه بر چتبات، نحوه پیادهسازی سیستم احراز هویت مبتنی بر رمز عبور را نیز از صفر آموزش میدهیم.
مرور کلی دوره
این دوره بر محوریت vibe coding یک اپلیکیشن کامل Full-stack با انگولار و نود از صفر ساختار یافته است.
این اپلیکیشن یک رابط کاربری چت AI است که بر پایه signals و zoneless ساخته شده و بکاِندی با Node و Express دارد که با OpenAI API ادغام شده است. ما هر دو بخش فرانتاند و بکاِند را با هم میسازیم و هیچ بخشی حذف یا سادهسازی نمیشود.
ابتدا با راهاندازی Claude Code و یادگیری نحوه کار صحیح با آن شروع میکنیم: ارائه کانتکست درست، بررسی خروجیها، بهبود نتایج و زمان به چالش کشیدن یا تغییر مسیر پیشنهادات AI.
سپس به قلب اپلیکیشن میرویم: رابط کاربری چت. یک سایدبار تاشو با تاریخچه گفتگو، صفحه خوشآمدگویی شکیل، نمای گفتگوهای زنده با نشانگرهای تایپ (typing indicators) و جریان کامل پیامها متصل به API واقعی OpenAI را میسازیم.
در ادامه، سیستم کامل احراز هویت را پیاده میکنیم: ثبتنام، ورود، مدیریت نشستها بر پایه JWT، محافظت از روتها و ذخیرهسازی امن رمزهای عبور با استفاده از Hash و Salt.
فرانتاِند و بکاِند را گام به گام متصل میکنیم و مباحثی چون طراحی API، میانافزارهای (Middleware) احراز هویت، ذخیرهسازی دادهها در حافظه، مدیریت پرامپتها و نحوه خصوصی و امن نگه داشتن سیستم پرامپتها را پوشش میدهیم.
در طول دوره، بهترین روشهای مدرن انگولار را به کار میبریم: کامپوننتهای Standalone، سیگنالها، Signal Forms، معماری zoneless، لودینگ تنبل (Lazy Loading)، تشخیص تغییرات OnPush و جداسازی تمیز مسئولیتها بین سرویسها، کامپوننتها و مدلها.
سرفصلهای course
این دوره موضوعات زیر را پوشش میدهد:
راهاندازی Claude Code و یادگیری استفاده موثر از آن
ساختاربندی پروژه Angular + Node برای توسعه با کمک هوش مصنوعی
ساخت اپلیکیشن انگولار zoneless و مبتنی بر سیگنال از صفر
توسعه بکاِند با Node، Express و TypeScript
ادغام OpenAI API با استفاده از درخواستهای HTTP ساده
مدیریت امن سیستم پرامپتها در سرور
ساخت رابط کاربری چت: سایدبار، تاریخچه گفتگو و صفحه خوشآمدگویی
ایجاد سایدبار تاشو با ردیابی گفتگوهای فعال
الگوی دوگانه Start / Continue برای تکمیل چتهای AI
نمایش پاسخهای AI با نشانگرهای تایپ
نشانگرهای لودینگ سراسری در مقابل محلی و زمان استفاده از هر کدام
ذخیرهسازی دادهها در حافظه با دادههای آزمایشی واقعگرایانه
میانافزار احراز هویت و روتهای محافظتشده
لاگینگ ساختاریافته در بکاِند با استفاده از Pino
مدیریت متغیرهای محیطی با dotenv
احراز هویت: ثبتنام، ورود، نشستهای JWT، رمزهای عبور هش شده
طراحی سرویس AI مستقل از ارائهدهنده (Provider-agnostic)
استفاده از Angular Signal Forms برای صفحات احراز هویت
سازماندهی تمیز مدلها، سرویسها و کامپوننتها
در این دوره چه خواهید آموخت؟
در پایان این دوره، شما میدانید چگونه یک اپلیکیشن کامل چتبات AI را با استفاده از انگولار و نود بسازید و این کار را در کنار یک دستیار کدنویس AI انجام دادهاید تا کاملاً درک کنید که این گردش کار در پروژههای حرفهای واقعی چگونه عمل میکند.
یاد میگیرید چگونه APIهای OpenAI را به صورت امن در بکاِند ادغام کنید، چگونه رابط کاربری سریع و صیقلخوردهای طراحی کنید و چگونه الگوهای معماری مدرن انگولار را به درستی در یک اپلیکیشن واقعی پیاده کنید.
همچنین درک روشنی از نحوه استفاده از Claude Code به عنوان یک ابزار مهندسی حرفهای به دست میآورید: چه کارهایی را واگذار کنید، چه مواردی را با دقت بررسی کنید، چگونه آن را به سمت معماری مورد نظرتان هدایت کنید و چگونه اشتباهات را قبل از تبدیل شدن به بدهی فنی شناسایی کنید.
این یک دوره عملی و کد-محور است که بر اساس اپلیکیشنهای واقعی، تصمیمات مهندسی واقعی و Trade-offهای واقعی ساخته شده است - نه اسلاید، مثالهای ساده یا درسهای صرفاً تئوری.
مقدمه Introduction
-
نسخههای نرمافزاری توصیه شده Recommended Software Versions
-
تنظیم محیط توسعه 00 Setting Up Your Development Environment
-
راهاندازی سرور Angular MCP برای Claude Code 01 Setting Up the Angular MCP Server For Claude Code
-
تنظیم .mcp.json و مهارت انگولار 98 - Setting Up .mcp.json and the Angular Skill
-
تنظیم .claudeignore 02 Setting Up .claudeignore
-
درک سلسلهمراتب CLAUDE.md 03 Understand The CLAUDE.md hierarchy
-
درک مفهوم MEMORY 04 Understanding MEMORY
-
تنظیم کانتکست Claude Code 05 Setting up the context of Claude Code
-
تنظیم CLAUDE.md برای کدهای سرور 06 Setting up a CLAUDE.md for your Server code
-
تنظیم CLAUDE.md برای کدهای انگولار 07 Setting up CLAUDE.md for Angular code
-
درک CLAUDE.local 08 Understanding CLAUDE.local
-
بررسی رابط کاربری چتبات AI که خواهیم ساخت 09 Reviewing the UI of the AI ChatBot We Will Build
-
تولید رابط کاربری اصلی چتبات AI 10 Generating the Main UI of our AI ChatBot
-
بررسی رابط کاربری تولید شده 11 Reviewing the Generated UI Chat
-
رفع تکراری مشکلات UI با Puppeteer 12 Fix UI Issues Iteratively With Pupeteer
-
رفع مشکلات UI از طریق اسکرینشات 14 Fix UI Issues Via Screenshot
-
استخراج تم ریسپانسیو و قابل استفاده مجدد 15 Extract Reusable Responsive Theme
-
ایجاد اسکلت سرور Node Express 16 Setting the Skeleton of a Node Express Server
-
تولید Endpoint بازیابی تاریخچه چت 17 Generating the Retrieve Chat Historry Endpoint
-
تولید Endpoint دریافت گفتگو 18 Generating the Get Conversation Endpoint
-
الگوی Start-Continue برای راهکار چت AI امن 19 The Start Continue Pattern For a Secure AI Chat Solution
-
پیادهسازی Endpoint شروع گفتگو 20 Implementing The Start Conversation Endpoint
-
Endpoint بکاِند ادامه گفتگو 21 The Continue Conversation Backend Endpoint
-
افزودن لاگینگ مناسب در بکاِند 22 Adding Appropriate Backend Logging
-
اتصال Endpointهای تاریخچه چت به فرانتاِند 23 Connect Chat History EndPoints to Frontend
-
اتصال Endpointهای شروع و ادامه گفتگو 24 Connect The Start and Continue Conversation Endpoints
پیادهسازی احراز هویت مبتنی بر JWT 25 New Section - Implementing JWT-based Authentication
-
پیادهسازی احراز هویت مبتنی بر JWT 25 New Section - Implementing JWT-based Authentication
-
بازنویسی صفحات ورود و ثبتنام به Signal Forms 26 Refactoring Sign In and Sign Up Screens into Signal Forms
-
تولید Endpoint بکاِند ورود 27 Generating the Sign In Backend Endpoint
-
تولید Endpoint بکاِند ایجاد کاربر 28 Generating the Create User Backend Endpoint
پیادهسازی احراز هویت در فرانتاند 29 New Section - Implementing Authentication In The Frontend
-
پیادهسازی احراز هویت در فرانتاند 29 New Section - Implementing Authentication In The Frontend
-
نشانگرهای لودینگ قابل استفاده مجدد 30 Reusable Loading Indicators
-
اتصال صفحه ورود به بکاِند 31 Connecting the Sign In Screen To the Backend
-
اینترسپتور HTTP برای نشانگر لودینگ سراسری 32 Global Loading Indicator HTTP Interceptor
-
اینترسپتور HTTP برای احراز هویت 33 Authention HTTP Interceptor
-
پیادهسازی صفحه ایجاد کاربر در فرانتاِند 34 Implement Frontend User Creation Screen
-
پیادهسازی خروج از حساب (Logout) 35 Implementing Logout
-
پیادهسازی Middleware احراز هویت در بکاِند 36 Implementing a Backend Authentication Middleware
-
پیادهسازی Authentication Guard 37 Implementing an Authentication Guard
-
درس جایزه (آپدیت اوت 2026) Bonus Lecture (Updated August 2026)
-
جمعبندی و نکات کلیدی 38 Conclusions and Key Takeaways
https://donyad.com/d/53a0bd
Angular University
پرفروش ترین دوره های انگولار | بیش از 100 هزار دانش آموز | 16 دوره
نمایش نظرات