114 lines
11 KiB
Markdown
114 lines
11 KiB
Markdown
# مشخصات درس‌نامه: چک‌لیست پیش از انتشار (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):
|
||
```powershell
|
||
npm run build
|
||
```
|
||
- macOS (Terminal):
|
||
```bash
|
||
npm run build
|
||
```
|
||
- Linux (Bash):
|
||
```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 برای پیش‌نمایش جذاب در شبکه‌های اجتماعی تشریح شود.
|
||
- [ ] دستورات ترمینالی بیلد پروداکشن در تب‌های چندسکویی قرار گیرند.
|