vibe-coding-college-specs/chapters/11-security-and-best-practices/01-lesson-pre-launch-checklist/spec.md

مشخصات درس‌نامه: چک‌لیست پیش از انتشار (Pre-Launch Checklist) و تست دود نهایی

• شناسه در سیلابس: L11.2
• فصل: فصل ۱۱: امنیت و استفاده مسئولانه (Ch 11)
• نوع محتوا: 📘 درس‌نامه متنی
• زمان تقریبی مطالعه: ۱۶ دقیقه
• پیش‌نیازهای مستقیم: L11.1 (اهداف فصل یازدهم)

---

۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy)

دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند:

• درک کند (Understand): چرا هیجان ناشی از اشتراک‌گذاری سریع پروژه در شبکه‌های اجتماعی بدون بازرسی نهایی می‌تواند باعث آبروریزی فنی یا هک شدن پروژه شود.
• تحلیل/ارزیابی کند (Evaluate): وضعیت آمادگی محصول را بر اساس ۵ ستون اصلی چک‌لیست انتشار (امنیت، کارایی، سئو و شبکه‌های اجتماعی، صفحات خطا، و داده‌های تمیز) ارزیابی کند.
• به‌کار ببندد (Apply): آزمون دود (Smoke Test) را در یک پنجره کاملاً ناشناس (Incognito) مرورگر اجرا کرده و تمام مسیرهای حیاتی پورتفولیو را تست نماید.
• ایجاد کند (Create): کارت پیش‌نمایش شبکه‌های اجتماعی (Open Graph Image) و صفحات خطای سفارشی شکیل (Custom 404 & 500) را با ابزارهای مدرن Next.js پیاده‌سازی کند.

---

۲. محدوده و مرزهای محتوا (Scope & Boundaries)

آنچه باید پوشش داده شود (In-Scope):

1. استعاره پرواز هواپیما و چک‌لیست خلبان:
   • خلبان‌ها هزاران ساعت پرواز دارند، اما هرگز بدون بررسی فیزیکی بال‌ها و موتورها تیک‌آف نمی‌کنند.
2. کالبدشکافی ۵ ستون چک‌لیست طلایی پیش از انتشار:
   • ستون ۱: امنیت پایه (نبود کلید در کدهای گیت، بسته بودن روت‌های /admin و فعال بودن RLS).
   • ستون ۲: سرعت و کارایی (امتیاز لایت‌هاوس بالای ۹۰، تبدیل فرمت عکس‌ها با next/image به WebP).
   • ستون ۳: سئو و کارت‌های شبکه‌های اجتماعی (تنظیم متا تگ‌ها، تگ‌های Open Graph و تصویر og:image برای لینک‌های تلگرام، توییتر و لینکدین).
   • ستون ۴: صفحات خطای اختصاصی و تجربه کاربری (صفحه ۴۰۴ با لینک بازگشت به خانه، دکمه تلاش مجدد در صفحه خطا).
   • ستون ۵: پاک‌سازی داده‌های ساختگی (حذف پروژه‌های تستی "Lorem Ipsum" و تست ادمین‌های با رمز 123456).
3. اجرای تست دود (Smoke Test) در مرورگر:
   • سناریوی گام‌به‌گام: ورود کارفرما در حالت ناشناس \rightarrow چت با دستیار هوش مصنوعی \rightarrow ارسال پیامک تماس \rightarrow تست درگاه پرداخت تستی \rightarrow بازبینی واکنش‌گرایی در عرض ۳۶۰ پیکسل.
4. دستورات چندسکویی برای بیلد پروداکشن و بازرسی اندازه باندل:
   • دستورات اجرای تست ساخت نهایی در ویندوز، مک و لینوکس:
     • npm run build
5. کال‌اوت‌های آموزشی و هشدار کوئرا:
   • کال‌اوت بنفش (<details class="violet">): نحوه کار ربات‌های تلگرام و واتس‌اپ در خواندن تگ‌های Open Graph برای ساخت پیش‌نمایش‌های شیک لینک.
   • کال‌اوت سبز (<details class="green">): ابزارهای رایگان تولید فاوآیکون (Favicon) و متاتگ‌های مدرن.
   • کال‌اوت قرمز (<details class="red">): تله باقی ماندن دیتای ساختگی؛ حتماً دیتابیس را پیش از انتشار با پروژه‌ها و متن‌های واقعی خود پر کنید.

آنچه نباید وارد آن شویم (Out-of-Scope):

• جزییات فنی کدنویسی Rate Limiting یا Zod (در درس‌های بعدی فصل ۱۱ به تفکیک ارائه می‌شوند).
• خرید دامنه و تنظیمات DNS ابری (فصل ۱۲).

---

۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms)

اصطلاح انگلیسی	معادل فارسی مصوب	توضیح یک‌خطی ساده
Pre-Launch Checklist	چک‌لیست پیش از عرضه	جدول الزامات اساسی که قبل از در دسترس عموم قرار گرفتن سایت باید تیک بخورند
Smoke Test	تست دود	آزمون سریع و کلی برای اطمینان از اینکه عملکردهای حیاتی سیستم بدون دود کردن و انفجار کار می‌کنند
Open Graph (OG)	پروتکل گراف باز	استانداردی برای تعیین عنوان، توضیحات و تصویر پیش‌نمایش سایت در زمان اشتراک‌گذاری در شبکه‌های اجتماعی
Custom 404 Page	صفحه خطای اختصاصی ۴۰۴	صفحه‌ای زیبا و سازگار با تم سایت برای راهنمایی کاربرانی که به آدرس‌های اشتباه سر می‌زنند
Bundle Analyzer	تحلیل‌گر اندازه باندل	ابزاری برای نمایش حجم فایل‌های جاوااسکریپت و کشف کتابخانه‌های سنگین و زاید

---

۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders)

راهنمای ایجنت نویسنده: تمام تصاویر باید در پوشهٔ images/ ذخیره شده و در جدول تک‌خانه‌ای وسط‌چین درج شوند:

1. تصویر کاور درس: images/cover.png
   • موضوع: تابلوی پرتاب موشک با چک‌لیست دیجیتالی تیک‌خورده و شمارش معکوس پرتاب محصول روی نمایشگر ادیتور.
2. اینفوگرافیک ۵ ستون چک‌لیست پیش از انتشار: images/pre-launch-five-pillars.png
   • موضوع: نمایش ستون‌های ۵ گانه: امنیت، کارایی، سئو/OG، صفحات خطا، و دیتای واقعی با آیکون‌های جذاب.
3. پیش‌نمایش کارت اشتراک‌گذاری در شبکه‌های اجتماعی: images/open-graph-social-card-preview.png
   • موضوع: مقایسه یک لینک زشت بدون پیش‌نمایش در تلگرام با یک پیش‌نمایش لوکس شامل تصویر کاور پورتفولیو، نام سازنده و توضیحات کوتاه.
4. صفحه خطای ۴۰۴ سفارشی طراحی‌شده: images/custom-404-design-preview.png
   • موضوع: صفحه ۴۰۴ مدرن با تم تاریک، گرافیک فضایی جذاب، و دکمه بازگشت به صفحه اصلی.

---

۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (README.md)

1. تیتر اصلی: # چک‌لیست پیش از انتشار (Pre-Launch Checklist) و تست دود نهایی
2. مقدمه: چرا یک انتشار شتاب‌زده می‌تواند آبروی مهندسی شما را زیر سوال ببرد و چطور با یک چک‌لیست ۱۵ دقیقه‌ای سربلند شویم؟
3. جدول کاور درس
4. استعاره پرواز تجاری و مسئولیت خلبان:
   • اهمیت چک‌لیست قبل از فشردن دکمه استارت.
5. ستون‌های ۵ گانه چک‌لیست پیش از انتشار (با جزئیات پروژه پورتفولیو):
   • امنیت، پرفورمنس، سئو و شبکه‌های اجتماعی، هندل کردن ارورها و پاک‌سازی دیتای تست.
6. ساخت صفحات اختصاصی خطا (not-found.tsx و error.tsx) در Next.js:
   • چرا نباید کاربر با صفحه پیش‌فرض زشت خاکستری مواجه شود؟
7. پیکربندی تگ‌های Open Graph و تصویر اشتراک‌گذاری اجتماعی:
   • تعریف metadata در app/layout.tsx برای تولید کارت‌های شکیل در تلگرام و توییتر.
8. جعبه پرامپت طلایی: اجرای تست دود و ساخت صفحات خطا با ایجنت:
   • پرامپت دقیق:

     «من می‌خواهم پروژه را برای انتشار عمومی آماده کنم. لطفاً ۱) یک صفحه not-found.tsx فوق‌العاده مدرن با تم دارک و دکمه بازگشت به صفحه اصلی بساز، ۲) متاتگ‌های Open Graph شامل عنوان، توضیحات و تصویر og-image.png را به layout.tsx اضافه کن، و ۳) یک چک‌لیست سریع تست دود از تمام فیچرها بنویس تا در پنجره ناشناس تست کنم.»

9. دستورات چندسکویی برای بررسی بیلد نهایی:
   • منوی کشویی سه‌گانه برای ویندوز، مک و لینوکس:
     • Windows (PowerShell):

       npm run build
       

     • macOS (Terminal):

       npm run build
       

     • Linux (Bash):

       npm run build
       

10. باکس نکته Quera (<details class="violet">): استفاده از ابزارهای آنلاین رایگان مانند OpenGraph.xyz برای دیدن پیش‌نمایش لینک قبل از انتشار.
11. باکس هشدار Quera (<details class="red">): حتماً پسوردهای ساده یا اکانت‌های ادمین تستی را پیش از انتشار حذف کنید.
12. باکس رضایت‌بخش Quera (<details class="green">): ارسال لینک تستی به دوست یا همکار نزدیک و شنیدن اولین بازخورد مثبت.
13. جمع‌بندی درس‌نامه: گذر از چک‌لیست مقدماتی؛ ورود به مبحث مرگبار نشت اطلاعات محرمانه و مدیریت کلیدها در درس بعدی.

---

۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)

• ستون‌های پنج‌گانه چک‌لیست پیش از انتشار به صورت کامل و کاربردی ارائه گردند.
• نحوه پیاده‌سازی صفحات خطای اختصاصی Next.js (not-found.tsx) آموزش داده شود.
• تنظیم تگ‌های Open Graph برای پیش‌نمایش جذاب در شبکه‌های اجتماعی تشریح شود.
• دستورات ترمینالی بیلد پروداکشن در تب‌های چندسکویی قرار گیرند.