# مشخصات درس‌نامه: ابزارهای مرورگری (Lovable و Bolt) (Browser-Based Builders)
- **شناسه در سیلابس:** `L3.5`
- **فصل:** فصل ۳: راه‌اندازی محیط کار (Ch 3)
- **نوع محتوا:** 📘 درس‌نامه متنی
- **زمان تقریبی مطالعه:** ۱۲ دقیقه
- **پیش‌نیازهای مستقیم:** `L3.4` (ابزارهای خط فرمان و ایجنت‌های ترمینال)

---

## ۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy)
دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند:
- [ ] **درک کند (Understand):** ابزارهای سازنده مبتنی بر مرورگر (مانند Lovable.dev و Bolt.new و v0.dev) چگونه بدون نیاز به هیچ‌گونه نصب یا پیکربندی محلی، نرم‌افزارهای کامل را مستقیماً درون مرورگر اجرا می‌کنند.
- [ ] **به‌کار ببندد (Apply):** حساب کاربری رایگان در پلتفرم Lovable یا Bolt ایجاد کرده و تور رابط کاربری (باکس پرامپت، پیش‌نمایش زنده و ادیتور داخلی) را بشناسد.
- [ ] **به‌کار ببندد (Apply):** پل ارتباطی «انتقال به گیت‌هاب (Export to GitHub)» را پیاده کند؛ یاد بگیرد چگونه کد ساخته‌شده در مرورگر را به ریپازیتوری شخصی خود منتقل کرده و برای ادامه مهندسی در Cursor محلی فراخوانی (Clone) کند.
- [ ] **تحلیل/ارزیابی کند (Evaluate):** محدودیت‌های سهمیه‌های رایگان ابزارهای ابری و زمان خروج مناسب از مرورگر به سمت ابزارهای محلی را ارزیابی کند.

---

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

### آنچه باید پوشش داده شود (In-Scope):
1. **انقلاب سازنده‌های ابری تحت وب:**
   * چرا این ابزارها برای تست سریع ایده‌ها، ساخت پروتوتایپ‌های اولیه و ارائه به مشتری یا سرمایه‌گذار در کمتر از ۱۵ دقیقه بی‌رقیب هستند.
2. **معرفی دو پلتفرم پیشتاز:**
   * **Lovable.dev:** تمرکز بر ساخت وب‌اپلیکیشن‌های کامل با طراحی فوق‌العاده زیبا، اتصال آسان به دیتابیس Supabase و هماهنگی کم‌نظیر با گیت‌هاب.
   * **Bolt.new:** بر پایه فناوری نوآورانه WebContainers (اجرای کامل محیط Node.js درون تب مرورگر شما بدون نیاز به سرور واسط).
   * اشاره کوتاه به **v0.dev** (ساخت شرکت Vercel، متخصص کامپوننت‌های فرانت‌اند شیک).
3. **تور رابط کاربری یک سازنده ابری:**
   * نوار ورودی پرامپت (چت با ایجنت).
   * پنجره پیش‌نمایش زنده (Live Preview) که بلافاصله تغییرات را شبیه‌سازی می‌کند.
   * پنل دسترسی به کدهای تولیدشده و تاریخچه نسخه‌ها.
4. **پل استراتژی دو مسیره: از وب به محیط کار محلی (The Export Bridge):**
   * آموزش گام‌به‌گام اتصال اکانت GitHub به پلتفرم Lovable یا Bolt.
   * زدن دکمه Sync / Export to GitHub و ایجاد یک ریپازیتوری جدید با یک کلیک.
   * راهنمای چندسکویی کلون کردن پروژه روی سیستم شخصی در ۳ منوی کشویی جداگانه:
     * `<details><summary>دستور فراخوانی در ویندوز (Windows)</summary> ... </details>`: `git clone [آدرس ریپازیتوری]` و باز کردن در Cursor.
     * `<details><summary>دستور فراخوانی در مک‌اواس (macOS)</summary> ... </details>`: دستورات ترمینال و ورود به پوشه.
     * `<details><summary>دستور فراخوانی در لینوکس (Linux)</summary> ... </details>`: اجرای کلون و بازگشایی.
5. **کال‌اوت‌های Quera:**
   * `<details class="violet">`: سازوکار پشت پرده فناوری WebContainers؛ چطور یک سیستم‌عامل کوچک در دل مرورگر شما جا می‌گیرد؟
   * `<details class="green">`: پل فرار از زندانی شدن در ابر؛ با کلیک دکمه Export to GitHub، صاحب ۱۰۰٪ تمام کدهای تولیدشده در سیستم خود هستید.

### آنچه نباید وارد آن شویم (Out-of-Scope):
- مبانی تفصیلی دستورات گیت (کامیت، برنچ، مرج و ...) که درس بعدی ۳.۶ به آن اختصاص دارد.
- اتصال واقعی به دیتابیس خارجی یا درگاه پرداخت (در فصول ۷ و ۱۰ آموزش داده خواهد شد).

---

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

| اصطلاح انگلیسی | معادل فارسی مصوب | توضیح یک‌خطی ساده |
| :--- | :--- | :--- |
| In-Browser Builder | سازنده تحت مرورگر | پلتفرمی که به شما امکان نوشتن پرامپت، تولید کد و دیدن نتیجه را در یک تب مرورگر می‌دهد |
| Live Preview | پیش‌نمایش زنده | پنجره تعاملی درون وب‌سایت که خروجی کار را مانند یک وب‌سایت واقعی هم‌زمان نشان می‌دهد |
| WebContainers | کانتینرهای تحت وب | فناوری اجرای موتور Node.js و خط فرمان به طور مستقیم درون تب مرورگر کاربر |
| Export to GitHub | انتقال به گیت‌هاب | قابلیت فرستادن کل پروژه ساخته‌شده در پلتفرم ابری به حساب گیت‌هاب شخصی جهت کنترل کامل |
| Git Clone | فراخوانی / همگام‌سازی مخزن | دانلود کدهای پروژه از گیت‌هاب روی هارد سیستم کاربر برای کار در ادیتور محلی |

---

## ۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders)
> **راهنمای ایجنت نویسنده:** تمام تصاویر باید در پوشهٔ `images/` قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند:

1. **تصویر کاور درس:** `images/cover.png`
   * **موضوع:** کاور با تم تیره و لوگوهای جذاب Lovable و Bolt که از یک پنجره مدرن مرورگر با پیش‌نمایش زنده بیرون تابیده‌اند.
2. **کالبدشکافی رابط کاربری ابزارهای مرورگری:** `images/browser-builder-ui.png`
   * **موضوع:** اسکرین‌شات تمیز از محیط Lovable یا Bolt شامل نوار پرامپت، پنل فایل‌ها و قاب پیش‌نمایش اپلیکیشن زنده.
3. **پل انتقال پروژه از وب به ادیتور محلی:** `images/export-bridge-diagram.png`
   * **موضوع:** اینفوگرافیک گام‌به‌گام: ایده در Lovable $\rightarrow$ دکمه Export to GitHub $\rightarrow$ ریپازیتوری گیت‌هاب $\rightarrow$ باز کردن و توسعه در Cursor روی سیستم کاربر.
4. **مقایسه Lovable در برابر Bolt و v0:** `images/cloud-builders-matrix.png`
   * **موضوع:** جدول شماتیک مقایسه ۳ سرویس در سرعت اولیه، کیفیت کد، اتصال به دیتابیس و مدیریت سهمیه ماهانه.

---

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

1. **تیتر اصلی:** `# ابزارهای مرورگری: ساخت نرم‌افزار در چند دقیقه با Lovable و Bolt`
2. **مقدمه:** تجربه جادویی ساخت نسخه اولیه یک نرم‌افزار بدون حتی یک خط نصب روی سیستم.
3. **جدول کاور درس**
4. **جادوی سازنده‌های ابری تحت وب:** معرفی پلتفرم‌های Lovable.dev، Bolt.new و v0.dev.
5. **تور کاربری Lovable و ساخت اولین صفحه:** نحوه نگارش پرامپت و مشاهده خروجی زنده در مرورگر.
6. **باکس نکته فنی Quera (`<details class="violet">`):** فناوری WebContainers چگونه بدون سرور کار می‌کند؟
7. **شاه‌کلید استراتژی دوره: پل ارتباطی با GitHub:**
   * چرا نباید پروژه را برای همیشه در یک پلتفرم ابری حبس کنیم؟
   * مراحل اکسپورت با یک کلیک.
8. **فراخوانی پروژه در سیستم محلی (دستورات چندسکویی):**
   * منوی کشویی ویندوز.
   * منوی کشویی مک‌اواس.
   * منوی کشویی لینوکس.
9. **باکس آرامش‌بخش Quera (`<details class="green">`):** مالکیت کامل کدها با گیت‌هاب و ادیتور محلی.
10. **جمع‌بندی درس‌نامه:** تکمیل زنجیره ابزارهای تولید سریع و آمادگی برای یادگیری زبان مشترک برنامه‌نویسان (Git).

---

## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
- [ ] نحوه کارکرد پلتفرم‌های Lovable و Bolt به همراه قابلیت‌های کلیدی آن‌ها تشریح شده باشد.
- [ ] آموزش انتقال پروژه به GitHub به عنوان پل پیوند دهنده استراتژی Dual-Track گام‌به‌گام توضیح داده شود.
- [ ] برای دستورات کلون و باز کردن در ادیتور، منوهای کشویی جداگانه برای Windows، macOS و Linux تعبیه شده باشد.
- [ ] مزایا و محدودیت‌های تکیه صرف بر ابزارهای ابری به شکلی منصفانه بیان شده باشد.