103 lines
11 KiB
Markdown
103 lines
11 KiB
Markdown
# مشخصات درس‌نامه: فهرست تسک و ترتیب ساخت (Task Breakdown & Sequencing)
|
||
- **شناسه در سیلابس:** `L4.9` (`L4.10` در شیت)
|
||
- **فصل:** فصل ۴: از ایده تا محصول (Ch 4)
|
||
- **نوع محتوا:** 📘 درس‌نامه متنی
|
||
- **زمان تقریبی مطالعه:** ۱۵ دقیقه
|
||
- **پیش‌نیازهای مستقیم:** `L4.8` (نوشتن PRD با AI)
|
||
|
||
---
|
||
|
||
## ۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy)
|
||
دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند:
|
||
- [ ] **درک کند (Understand):** چرا حتی با داشتن یک سند PRD عالی، فرستادن کل سند به یک‌باره به ایجنت باعث خفگی مدل و تولید کدهای آشفته می‌شود و چرا نیازمند فایل نقشه اقدام (`tasks.md`) هستیم.
|
||
- [ ] **تحلیل/ارزیابی کند (Evaluate):** تفاوت روش سنتی لایه‌بندی افقی (Horizontal Layering: ساخت تمام دیتابیس، سپس تمام بک‌اند، سپس فرانت‌اند) با روش مدرن وایب کدینگ یعنی برش عمودی (Vertical Slicing: ساخت تک‌تک بخش‌های کارآمد از ظاهر تا داده) را درک کند.
|
||
- [ ] **به‌کار ببندد (Apply):** فازبندی منطقی و ترتیب صحیح ساخت پروژه محوری (پورتفولیوی پویا) را در ۷ فاز استاندارد پیاده‌سازی کند.
|
||
- [ ] **به‌کار ببندد (Apply):** ساختار استاندارد یک تسک اتمیک (شامل شناسه، هدف، فایل‌های درگیر، و شرط راستی‌آزمایی) را در فایل `tasks.md` تدوین نماید.
|
||
- [ ] **به‌کار ببندد (Apply):** از هوش مصنوعی برای تبدیل سند `PRD.md` به فهرست تسک‌های مهندسی‌شده با معیارهای راستی‌آزمایی صریح بهره‌برداری کند.
|
||
|
||
---
|
||
|
||
## ۲. محدوده و مرزهای محتوا (Scope & Boundaries)
|
||
|
||
### آنچه باید پوشش داده شود (In-Scope):
|
||
1. **پل میان نقشه محصول (PRD) و اجرای ایجنت (Execution):**
|
||
* سند PRD می‌گوید «چه چیزی می‌خواهیم»، اما فایل تسک‌ها (`tasks.md`) مشخص می‌کند «به چه ترتیبی و با چه گام‌های کوچکی ساخته شود».
|
||
* جلوگیری از انفجار مگاپرامپت با اجرای دانه‌به‌دانه تسک‌ها.
|
||
2. **استراتژی برش عمودی (Vertical Slicing):**
|
||
* چرا نباید ابتدا ۲ هفته دیتابیس بسازیم بدون اینکه چیزی روی صفحه دیده شود؟
|
||
* در وایب کدینگ، هر گام باید یک خروجی زنده در مرورگر داشته باشد که انگیزه و امکان تست فوری را فراهم کند.
|
||
3. **توالی هفت‌گانه فازهای ساخت پروژه پورتفولیوی پویا:**
|
||
* **فاز ۱: فونداسیون و اسکلت (Scaffold):** راه‌اندازی پروژه، سیستم رنگ و لی‌اوت پایه.
|
||
* **فاز ۲: ویترین عمومی با داده تستی (Public Showcase):** هدر، کارت‌های پروژه و پنجره جزئیات با Mock Data.
|
||
* **فاز ۳: پایگاه داده و زیرساخت (Database):** راه‌اندازی جداول پروژه‌ها و تنظیمات در Supabase.
|
||
* **فاز ۴: احراز هویت ادمین (Auth & Protection):** صفحه ورود، کوکی امن و محافظت از روت `/admin`.
|
||
* **فاز ۵: پنل مدیریت پروژه‌ها (Admin CRUD):** فرم‌های افزودن، ادیت، آپلود تصویر و حذف با تاییدیه.
|
||
* **فاز ۶: پنل تنظیمات سئو (SEO Controls):** فرم مدیریت متاتگ‌ها، اتصال به متادیتای پویا و تست تگ‌های OG.
|
||
* **فاز ۷: پولیش، بهینه‌سازی و انتشار (Ship):** چک‌لیست ریسپانسیو، تست لایت‌هاوس و استقرار نهایی.
|
||
4. **کالبدشکافی آناتومی یک تسک اتمیک در `tasks.md`:**
|
||
* **شناسه و باکس تیک:** `[ ] Task 2.1: ساخت کامپوننت کارت پروژه`
|
||
* **هدف و دامنه:** نمایش عکس، عنوان، تگ‌های مهارت و دکمه مشاهده.
|
||
* **فایل‌های درگیر:** `src/components/ProjectCard.tsx`
|
||
* **گام راستی‌آزمایی (Verification):** اجرای `npm run dev` و دیدن رندر شدن صحیح کارت با داده نمونه.
|
||
5. **چرخه پیشروی مهندسی (The Check-and-Commit Loop):**
|
||
* تسک را به ایجنت بسپارید $\rightarrow$ خروجی را بررسی و تایید کنید $\rightarrow$ تیک تسک را در `tasks.md` بزنید $\rightarrow$ یک کامیت در گیت ثبت کنید $\rightarrow$ سپس سراغ تسک بعد بروید!
|
||
6. **کال‌اوت‌های Quera:**
|
||
* `<details class="violet">`: مزیت جادویی برش عمودی (Vertical Slicing) در حفظ انگیزه و دیدن مداوم پیشرفت زنده.
|
||
* `<details class="green">`: قانون طلایی تیک و کامیت؛ هرگز تسک جدید را شروع نکنید تا زمانی که تسک قبلی تست و ذخیره نشده باشد.
|
||
|
||
### آنچه نباید وارد آن شویم (Out-of-Scope):
|
||
- نرم‌افزارهای اسکرام و جیرا در تیم‌های بزرگ سازمانی.
|
||
- شروع اجرای کدنویسی این تسک‌ها (این تسک‌ها در فصول ۵ تا ۱۴ به ترتیب اجرا خواهند شد).
|
||
|
||
---
|
||
|
||
## ۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms)
|
||
|
||
| اصطلاح انگلیسی | معادل فارسی مصوب | توضیح یک‌خطی ساده |
|
||
| :--- | :--- | :--- |
|
||
| Task Breakdown | شکستن تسک‌ها / ساختار شکست کار | تجزیه سند بزرگ نیازمندی‌ها به اقدامات کوچک، مشخص، مستقل و قابل‌اجرا |
|
||
| Vertical Slicing | برش عمودی | توسعه یک ویژگی کامل از رابط کاربری تا پایگاه داده به صورت هم‌زمان به جای لایه‌بندی افقی |
|
||
| Atomic Task | تسک اتمیک / دانه‌بندی‌شده | وظیفه‌ای تک‌هدفه که معمولاً در کمتر از چند دقیقه توسط ایجنت پیاده و تست می‌شود |
|
||
| Verification Step | گام راستی‌آزمایی | عملی مشخص و آزمودنی برای اطمینان از صحت انجام تسک پیش از رفتن به مرحله بعد |
|
||
| tasks.md | فایل فهرست تسک‌ها | چک‌لیست مارک‌داون در ریشه پروژه که پیشرفت مرحله‌به‌مرحله را رصد می‌کند |
|
||
|
||
---
|
||
|
||
## ۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders)
|
||
> **راهنمای ایجنت نویسنده:** تمام تصاویر باید در پوشهٔ `images/` قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند:
|
||
|
||
1. **تصویر کاور درس:** `images/cover.png`
|
||
* **موضوع:** کاور مدرن با تم تیره و یک چک‌لیست دیجیتال سه‌بعدی با تیک‌های نئونی سبز که پله‌های ساخت یک آسمان‌خراش نرم‌افزاری را نشان می‌دهد.
|
||
2. **برش افقی در برابر برش عمودی:** `images/horizontal-vs-vertical-slicing.png`
|
||
* **موضوع:** مقایسه دو رویکرد: لایه‌بندی افقی سنتی (هفته‌ها کار بدون دیدن خروجی) در برابر برش عمودی وایب کدینگ (دیدن یک فیچر زنده و کامل در هر گام).
|
||
3. **توالی هفت‌گانه ساخت پورتفولیوی پویا:** `images/portfolio-build-phases.png`
|
||
* **موضوع:** اینفوگرافیک گام‌به‌گام فازهای ۷ گانه: ۱. فونداسیون $\rightarrow$ ۲. ویترین $\rightarrow$ ۳. دیتابیس $\rightarrow$ ۴. احراز هویت $\rightarrow$ ۵. پنل ادمین $\rightarrow$ ۶. پنل سئو $\rightarrow$ ۷. انتشار.
|
||
4. **آناتومی یک تسک استاندارد در `tasks.md`:** `images/atomic-task-structure.png`
|
||
* **موضوع:** تصویر کادر تسک شامل باکس تیک، عنوان تسک، نام فایل و کادر شرط راستی‌آزمایی سبز.
|
||
5. **چرخه تیک زدن و کامیت در گیت:** `images/check-and-commit-loop.png`
|
||
* **موضوع:** فلوچارت دایره‌ای: پرامپت تسک $\rightarrow$ اجرای ایجنت $\rightarrow$ تست مرورگر $\rightarrow$ زدن تیک $\rightarrow$ گیت کامیت.
|
||
|
||
---
|
||
|
||
## ۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (`README.md`)
|
||
|
||
1. **تیتر اصلی:** `# فهرست تسک و ترتیب ساخت: تبدیل نقشه به گام‌های عملیاتی`
|
||
2. **مقدمه:** چرا بدون شکستن کارها به تسک‌های اتمیک، بزرگ‌ترین PRDها هم در دست ایجنت متلاشی می‌شوند؟
|
||
3. **جدول کاور درس**
|
||
4. **چرا نیازمند فایل `tasks.md` هستیم؟:** تفکیک نقشه کلان از برنامه اقدام اجرایی.
|
||
5. **روش مهندسی برش عمودی (Vertical Slicing):** چرا وایب کدینگ با برش عمودی جان می‌گیرد؟
|
||
6. **باکس نکته Quera (`<details class="violet">`):** نجات از باتلاق توسعه با دیدن مداوم نتایج زنده.
|
||
7. **نقشه راه ۷ فاز ساخت پورتفولیوی پویا:** تشریح گام‌به‌گام از اسکلت اولیه تا پنل سئو و دیپلوی.
|
||
8. **کالبدشکافی یک تسک استاندارد:** فرمول نگارش تسک با فایل‌های درگیر و شرط تایید.
|
||
9. **همکاری با هوش مصنوعی در تولید `tasks.md`:** پرامپت تبدیل PRD به چک‌لیست اجرایی.
|
||
10. **باکس قانون طلایی Quera (`<details class="green">`):** چرخه تیک زدن و ثبت کامیت در گیت.
|
||
11. **جمع‌بندی فصل چهارم:** اعلام تکمیل فاز طراحی و آماده‌سازی برای ورود به فصل ۵ (طراحی تجربه کاربری و هویت بصری).
|
||
|
||
---
|
||
|
||
## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
|
||
- [ ] ضرورت شکستن PRD به تسک‌های اتمیک با دلایل محکم تشریح شده باشد.
|
||
- [ ] مفهوم برش عمودی (Vertical Slicing) به صورت بصری و مستند آموزش داده شود.
|
||
- [ ] توالی ۷ فاز ساخت پروژه پورتفولیوی پویا به روشنی دسته‌بندی و معرفی گردد.
|
||
- [ ] فرمت استاندارد تسک در `tasks.md` همراه با شرط راستی‌آزمایی در متن لحاظ شود.
|