100 lines
10 KiB
Markdown
100 lines
10 KiB
Markdown
# مشخصات درس‌نامه: ابزارهای مرورگری (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 تعبیه شده باشد.
|
||
- [ ] مزایا و محدودیت‌های تکیه صرف بر ابزارهای ابری به شکلی منصفانه بیان شده باشد.
|