Module: ماژول ۰۴ — هوش مصنوعی در برنامه‌نویسی (AI in Coding)

Part 1: Video Scenario & Screen Actions

[Camera on Host] Hook and intro: Contrast old-school Stack Overflow hunting and basic IntelliSense autocomplete with modern AI Pair Programming; tease what viewers will learn (comparing Cursor, Copilot, and Windsurf, 6 developer workflows, 15+ prompt templates, and building a full React Expense Tracker).
[Show Slide 1 / README Overview] Display the module title “ماژول ۰۴: هوش مصنوعی در برنامه‌نویسی” and the AI Pair Programming / DevOps toolchain diagrams.
[Show Slide 2 / Coding Tools Comparison Table] Display the comprehensive comparison table of GitHub Copilot, Cursor, Windsurf / Codeium, Amazon Q Developer, Gemini Code Assist, Cody (Sourcegraph), and Claude (Projects).
[Screen Record] Deep Dive Demo—GitHub Copilot vs. Cursor IDE: In VS Code, demonstrate keeping related files open in tabs so Copilot reads them as context. Then switch to Cursor IDE and demonstrate Cmd+K inline editing, Composer multi-file feature creation, and @Codebase repository indexing.
[Show Slide 3 / 6 Core Coding Workflows] Display the 6 core software engineering workflows with AI: 1. Writing new code from specs (AST diagram), 2. Complex debugging with stack traces, 3. Code review & performance bottlenecks, 4. TDD & unit test generation (Test Pyramid diagram), 5. JSDoc & README documentation, 6. Legacy code refactoring (callback hell to async/await).
[Screen Record] Live Demo (Good vs. Bad Login Prompt & Debugging): Compare the output of “یک تابع لاگین بنویس” against the detailed Node.js + Express + bcrypt + PostgreSQL + JWT prompt, and show how pasting a full stack trace isolates a bug immediately.
[Show Slide 4 / 15+ Developer Prompt Templates] Scroll through and highlight the 15+ ready-to-use engineering prompts in the README (Next.js 14 architecture, RESTful API design, PostgreSQL Top-5 query, Python IPv4 Regex, PHP SQL-injection audit, C++ to Rust translation, React Class to Hooks, Bash S3 backup script, non-root Docker setup, Git history API-key purge, Tailwind CSS Grid, A* algorithm explanation, WCAG 2.1 a11y, strict TypeScript conversion, and 10GB CSV chunked pandas processing).
[Screen Record] Step-by-Step Tutorial—Building a React Expense Tracker with AI (Phases 1 to 5):
Phase 1: Run npx create-react-app expense-tracker and prompt AI for dependencies (lucide-react, recharts, tailwindcss).
Phase 2: Generate the component architecture (Header.jsx, ExpenseForm.jsx, ExpenseList.jsx, Dashboard.jsx).
Phase 3: Prompt AI to write useState and localStorage persistence via useEffect in App.js.
Phase 4: Build controlled inputs in ExpenseForm.jsx.
Phase 5: Highlight the whole file and use Cmd+K in Cursor to style a clean blue Tailwind dashboard.
[Show Slide 5 / Security & Best Practices] Display the compiler verification pipeline diagram and highlight the 5 engineering rules: 1. Trust, but Verify (watch out for hallucinated packages), 2. Security Context (never leak PII or production keys), 3. Avoid “Prompt and Dump” (break 1,000-line monoliths into small functions), 4. Understand the “Why” before merging, 5. Keep static analysis tools (ESLint, SonarQube, Dependabot).
[Screen Record] Hands-on Workshop Challenge (server.log Python Analyzer): Generate the Python script to count HTTP status codes (200, 404, 500), intentionally break a variable name inside the loop to trigger NameError, paste the error into AI to fix it, and upgrade the script to output an HTML bar chart with matplotlib / plotly.
[Show Slide 6 / Common Pitfalls] Highlight the 3 developer traps: The Context Cliff (stuffing 10 huge files into one prompt), Over-reliance (treating AI as an outsourcing agency instead of a mentor), and Outdated Patterns (always specify framework versions like React 19 or Next.js App Router).
[Camera on Host] Outro and call to action: Recap the main takeaways, invite viewers to complete the server.log challenge and share their favorite IDE setup in the comments, remind them to like and subscribe, and tease Module 05 (Automation & Data Analysis).

Part 2: Teleprompter Transcript (Persian)

[Action 1] سلام به همه برنامه‌نویس‌ها و رفقایی که می‌خوان وارد دنیای کدنویسی بشن! یادش بخیر تا همین دو سه سال پیش، نصف عمر برنامه‌نویس‌ها توی تب‌های Stack Overflow می‌گذشت و تازه بعد از دو ساعت گشتن، یکی زیر سوالمون می‌نوشت «سوال تکراریه، تاپیک بسته شد!» اما امروز هوش مصنوعی رسماً شده هم‌تیمی دوقلوی ما (AI Pair Programmer). توی ماژول چهارم می‌خوایم ببینیم چطوری ابزارهایی مثل Cursor و Copilot سرعت کدنویسی رو چند برابر می‌کنن، چطوری باهاشون قدم‌به‌قدم یه اپلیکیشن React کامل بسازیم و چطوری حواسمون باشه کدهای پر از باگ و حفره امنیتی رو چشم‌بسته نذاریم روی سرور!

[Action 2] همون‌طور که توی نمای کلی ماژول می‌بینین، هوش مصنوعی دیگه اون تکمیل خودکار (Autocomplete) ساده قدیمی نیست که فقط اسم متغیر رو حدس بزنه. دستیارهای مدرن کل ساختار پوشه‌های پروژه، چندین فایل باز و کامنت‌های شما رو با هم می‌خونن تا به جای اینکه وقتتون پای سینتکس و کدهای تکراری (Boilerplate) تلف بشه، تمرکزتون رو بذارین روی معماری سیستم و منطق اصلی محصول.

[Action 3] بیاین توی جدول مقایسه، ۷ تا از پیشگامان فعلی کدنویسی هوش مصنوعی رو کنار هم ببینیم:
۱. GitHub Copilot: استاندارد صنعت با قیمت ۱۰ دلار در ماه (و رایگان برای دانشجوها).
۲. Cursor: ادیتور مستقلی که بر پایه VS Code ساخته شده و با ترکیب Claude 3.5 Sonnet و GPT-4o الان محبوب‌ترین ابزار توسعه‌دهنده‌هاست.
۳. Windsurf (Codeium): رقیب فوق‌العاده قوی و رایگان برای افراد، با حالت هوشمند Flow و Cascade.
۴. Amazon Q Developer: مخصوص تیم‌هایی که روی کلود AWS کار می‌کنن یا می‌خوان کدهای قدیمی جاوا رو ارتقا بدن.
۵. Gemini Code Assist: با پنجره زمینه عظیم ۱ تا ۲ میلیون توکنی برای تحلیل کل کدبیس‌های غول‌پیکر.
۶. Cody (Sourcegraph): عالی برای گشتن توی مخازن کد سازمانی بزرگ و ناآشنا.
۷. و Claude (Projects + Artifacts): که روی وب برای طراحی سریع UI و حل الگوریتم‌های پیچیده بی‌نظیره.

[Action 4] حالا بیاین روی صفحه دو تا نکته طلایی از Copilot و Cursor رو ببینیم:
اگه از GitHub Copilot توی VS Code استفاده می‌کنین، این ترفند رو یادتون نره: همیشه فایل‌های مرتبط پروژه‌تون (مثلاً فایل مدل دیتابیس و فایل اینترفیس‌ها) رو توی تب‌های کنار دستتون باز بذارین! کوپایلت از محتوای تب‌های باز به عنوان پنجره زمینه استفاده می‌کنه تا قشنگ بفهمه متغیرهای شما چه شکلی هستن.
و اما چرا همه عاشق Cursor IDE شدن؟ چون سه تا سلاح مخفی داره: اول کلید میانبر Cmd+K (یا Ctrl+K توی ویندوز) که هر تیکه از کد رو هایلایت کنین، همون‌جا درجا براتون ویرایشش می‌کنه؛ دوم قابلیت Composer که بهش می‌گین «یه دکمه دارک‌مود به برنامه اضافه کن» و خودش همزمان فایل CSS، کامپوننت‌های React و منطق localStorage رو با هم آپدیت می‌کنه؛ و سوم تگ @Codebase توی چت که کل پروژه شما رو ایندکس می‌کنه و جواب رو دقیقاً بر اساس فایل‌های خودتون می‌ده!

[Action 5] حالا چطوری برای ۶ تا وظیفه اصلی مهندسی نرم‌افزار به هوش مصنوعی پرامپت بدیم؟
۱. نوشتن کد جدید از روی توضیحات: با جزییات کامل فریم‌ورک، دیتابیس و مدیریت خطا.
۲. دیباگ کردن پیچیده: ایزوله کردن خطا و دادن کل Stack Trace به همراه تابع و نوع ورودی.
۳. کد ریویو و بهینه‌سازی: مثلاً گشتن دنبال رندرهای اضافه (Re-renders) و هوک‌های جامونده useCallback و useMemo توی React.
۴. توسعه مبتنی بر تست (TDD): تولید مجموعه تست‌های Jest شامل ورودی‌های استاندارد، موارد لبه (Edge cases) مثل تخفیف منفی یا آرایه خالی، و Mock کردن سرویس‌های خارجی.
۵. مستندسازی و آنبوردینگ: نوشتن خودکار کامنت‌های JSDoc و جدول‌های README.
۶. و ریفکتور کردن کدهای قدیمی (Legacy Code): تبدیل اون بلوک‌های کثیف و تودرتوی if-else (یا همون Callback Hell) به ساختار تمیز async/await با early returns!

[Action 6] بیاین روی صفحه فرق یه پرامپت بد و خوب رو برای نوشتن تابع لاگین ببینیم. اگه فقط بنویسین «یک تابع لاگین بنویس»، یه کد آموزشی ده خطی ناامن تحویل می‌گیرین. اما وقتی می‌نویسین: «یک تابع async لاگین در Node.js با استفاده از Express و bcrypt بنویس که email و password را از request body بگیرد، دیتابیس PostgreSQL را با pg-promise کوئری کند، توکن JWT معتبر برای ۲۴ ساعت برگرداند و خطاهای سرور را مدیریت کند»، کدی می‌گیرین که واقعاً در سطح پروداکشنه!

[Action 7] توی فایل README این ماژول، یه گنجینه از ۱۵ قالب پرامپت پیشرفته مخصوص برنامه‌نویس‌ها براتون گذاشتیم که حتماً ذخیره‌شون کنین:
از راه‌اندازی معماری Next.js 14 و Tailwind و Supabase (قالب ۱)، طراحی RESTful API (قالب ۲)، کوئری‌های سنگین PostgreSQL (قالب ۳) و استخراج IPv4 با Regex در پایتون (قالب ۴) بگیر تا ممیزی امنیتی اسکریپت PHP برای بستن راه SQL Injection و XSS با PDO (قالب ۵)، ترجمه کلاس C++ به Rust (قالب ۶)، تبدیل کامپوننت کلاسی React به هوک (قالب ۷)، نوشتن اسکریپت Bash برای بکاپ خودکار روی AWS S3 (قالب ۸)، نوشتن Dockerfile امن با کاربر غیر روت (قالب ۹)، و شاهکار قالب ۱۰: وقتی به اشتباه کلیدهای حساس API رو توی ۳ کامیت قبلی روی گیت پوش کردین و می‌خواین دستورات دقیق Git برای پاک کردن کاملش از تاریخچه رو بگیرین! به علاوه قالب‌های CSS Grid، الگوریتم مسیریابی A*، استاندارد دسترس‌پذیری WCAG 2.1 AA، تبدیل جاوااسکریپت به TypeScript سخت‌گیرانه بدون any، و پردازش فایل CSV ده گیگابایتی در پایتون با chunksize بدون ترکیدن رم!

[Action 8] حالا بریم سراغ پروژه عملی گام‌به‌گام ماژول: ساخت وب‌اپلیکیشن ردیاب هزینه‌ها (Expense Tracker) با React در ۵ فاز!
فاز ۱ (راه‌اندازی): توی ترمینال دستور npx create-react-app expense-tracker رو می‌زنیم و از چت Cursor می‌پرسیم چه پکیج‌هایی برای آیکون و نمودار و استایل نصب کنیم که دستور npm install lucide-react recharts tailwindcss رو بهمون می‌ده.
فاز ۲ (معماری کامپوننت‌ها): ساختار فایل‌های Header.jsx، ExpenseForm.jsx، ExpenseList.jsx و Dashboard.jsx رو ازش می‌گیریم.
فاز ۳ (مدیریت State در App.js): بهش می‌گیم آرایه هزینه‌ها و توابع addExpense و deleteExpense رو با useState بنویسه و با یه هوک useEffect اطلاعات رو توی localStorage ذخیره و بازیابی کنه تا وقتی صفحه رو رفرش می‌کنیم، هزینه‌ها نپرن!
فاز ۴ (ساخت فرم): توی ExpenseForm.jsx ورودی‌های کنترل‌شده برای عنوان، مبلغ، منوی کشویی دسته‌بندی (غذا، حمل‌ونقل، قبوض، سرگرمی) و تاریخ رو می‌سازیم.
فاز ۵ (استایل‌دهی نهایی): کل فایل رو انتخاب می‌کنیم، Cmd+K رو می‌زنیم و می‌گیم با کلاس‌های Tailwind CSS تبدیلش کنه به یه داشبورد مدرن با سایه‌های نرم و تم آبی!

[Action 9] اما قبل از اینکه کدهاتون رو ببرین روی سرور، این ۵ اصل امنیتی و حرفه‌ای رو جدی بگیرین:
۱. اعتماد کنید، اما بررسی کنید (Trust, but Verify): مدل‌ها گاهی پکیج یا متدی رو اختراع می‌کنن که اصلاً وجود نداره!
۲. زمینه امنیتی: هرگز کلیدهای API پروداکشن، اسرار تجاری شرکت یا اطلاعات شخصی مشتریان (PII) رو وارد ابزارهای رایگان نکنین.
۳. پرهیز از Prompt and Dump: از مدل نخواین یه‌ضرب یه فایل ۱۰۰۰ خطی بنویسه؛ مسئله رو به توابع کوچیک و قابل تست بشکنین.
۴. درک «چرایی»: کدی رو که نمی‌فهمین خط‌به‌خط چیکار می‌کنه هرگز Merge نکنین؛ چون فردا ساعت ۲ نصفه‌شب این شمایین که باید باگش رو رفع کنین، نه چت‌جی‌پی‌تی!
۵. و حفظ ابزارهای تحلیل استاتیک: هوش مصنوعی جایگزین لینترهایی مثل ESLint، SonarQube و Dependabot نیست؛ مکملشونه.

[Action 10] برای تمرین کارگاهی آخر ویدیو هم چالش تحلیلگر فایل server.log با پایتون رو داریم:
بخش اول: به هوش مصنوعی می‌گیم اسکریپتی بنویسه که فایل server.log رو بخونه و تعداد کدهای وضعیت HTTP (مثل 200, 404, 500) رو بشماره و جدول چاپ کنه.
بخش دوم: عمداً اسم یه متغیر داخل حلقه رو خراب می‌کنیم تا خطای NameError بده، ارور رو کپی می‌کنیم توی چت تا ببینیم چطور باگ رو شکار می‌کنه.
بخش سوم: ازش می‌خوایم اسکریپت رو طوری آپدیت کنه که به جای چاپ توی کنسول، با matplotlib یا plotly یه گزارش HTML همراه با نمودار میله‌ای برامون بسازه!

[Action 11] در نهایت حواستون به ۳ تا اشتباه رایج هم باشه: اول، صخره زمینه (The Context Cliff)—اگه ۱۰ تا فایل سنگین رو یه‌جا بریزین توی پرامپت، مدل دستورات اولتون رو فراموش می‌کنه. دوم، اتکای بیش از حد—از هوش مصنوعی به عنوان مربی استفاده کنین تا رشد کنین، نه اینکه فکر کردن رو کامل بهش برون‌سپاری کنین. و سوم، الگوهای قدیمی (Outdated Patterns)—اگه با نسخه جدیدی مثل React 19 یا Next.js App Router کار می‌کنین، حتماً نسخه دقیق فریم‌ورک رو توی پرامپت بنویسین تا کدهای منسوخ‌شده قدیمی رو بهتون نده!

[Action 12] دمتون گرم که تا پایان ماژول چهارم همراه من بودین! حتماً پروژه Expense Tracker یا چالش server.log رو اجرا کنین و توی کامنت‌ها بگین الان بین Cursor، Copilot و Windsurf کدوم رو بیشتر می‌پسندین. لایک و سابسکرایب یادتون نره، و بریم سراغ ماژول پنجم که می‌خوایم با اتوماسیون و تحلیل داده، کارهای تکراری و اکسل‌بازی‌های خسته‌کننده رو برای همیشه خودکار کنیم!