10 KiB
10 KiB
مشخصات درس‌نامه: ابزارهای مرورگری (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):
- انقلاب سازنده‌های ابری تحت وب:
- چرا این ابزارها برای تست سریع ایده‌ها، ساخت پروتوتایپ‌های اولیه و ارائه به مشتری یا سرمایه‌گذار در کمتر از ۱۵ دقیقه بی‌رقیب هستند.
- معرفی دو پلتفرم پیشتاز:
- Lovable.dev: تمرکز بر ساخت وب‌اپلیکیشن‌های کامل با طراحی فوق‌العاده زیبا، اتصال آسان به دیتابیس Supabase و هماهنگی کم‌نظیر با گیت‌هاب.
- Bolt.new: بر پایه فناوری نوآورانه WebContainers (اجرای کامل محیط Node.js درون تب مرورگر شما بدون نیاز به سرور واسط).
- اشاره کوتاه به v0.dev (ساخت شرکت Vercel، متخصص کامپوننت‌های فرانت‌اند شیک).
- تور رابط کاربری یک سازنده ابری:
- نوار ورودی پرامپت (چت با ایجنت).
- پنجره پیش‌نمایش زنده (Live Preview) که بلافاصله تغییرات را شبیه‌سازی می‌کند.
- پنل دسترسی به کدهای تولیدشده و تاریخچه نسخه‌ها.
- پل استراتژی دو مسیره: از وب به محیط کار محلی (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>: اجرای کلون و بازگشایی.
- کال‌اوت‌های 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/قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند:
- تصویر کاور درس:
images/cover.png- موضوع: کاور با تم تیره و لوگوهای جذاب Lovable و Bolt که از یک پنجره مدرن مرورگر با پیش‌نمایش زنده بیرون تابیده‌اند.
- کالبدشکافی رابط کاربری ابزارهای مرورگری:
images/browser-builder-ui.png- موضوع: اسکرین‌شات تمیز از محیط Lovable یا Bolt شامل نوار پرامپت، پنل فایل‌ها و قاب پیش‌نمایش اپلیکیشن زنده.
- پل انتقال پروژه از وب به ادیتور محلی:
images/export-bridge-diagram.png- موضوع: اینفوگرافیک گام‌به‌گام: ایده در Lovable
\rightarrowدکمه Export to GitHub\rightarrowریپازیتوری گیت‌هاب\rightarrowباز کردن و توسعه در Cursor روی سیستم کاربر.
- موضوع: اینفوگرافیک گام‌به‌گام: ایده در Lovable
- مقایسه Lovable در برابر Bolt و v0:
images/cloud-builders-matrix.png- موضوع: جدول شماتیک مقایسه ۳ سرویس در سرعت اولیه، کیفیت کد، اتصال به دیتابیس و مدیریت سهمیه ماهانه.
۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (README.md)
- تیتر اصلی:
# ابزارهای مرورگری: ساخت نرم‌افزار در چند دقیقه با Lovable و Bolt - مقدمه: تجربه جادویی ساخت نسخه اولیه یک نرم‌افزار بدون حتی یک خط نصب روی سیستم.
- جدول کاور درس
- جادوی سازنده‌های ابری تحت وب: معرفی پلتفرم‌های Lovable.dev، Bolt.new و v0.dev.
- تور کاربری Lovable و ساخت اولین صفحه: نحوه نگارش پرامپت و مشاهده خروجی زنده در مرورگر.
- باکس نکته فنی Quera (
<details class="violet">): فناوری WebContainers چگونه بدون سرور کار می‌کند؟ - شاه‌کلید استراتژی دوره: پل ارتباطی با GitHub:
- چرا نباید پروژه را برای همیشه در یک پلتفرم ابری حبس کنیم؟
- مراحل اکسپورت با یک کلیک.
- فراخوانی پروژه در سیستم محلی (دستورات چندسکویی):
- منوی کشویی ویندوز.
- منوی کشویی مک‌اواس.
- منوی کشویی لینوکس.
- باکس آرامش‌بخش Quera (
<details class="green">): مالکیت کامل کدها با گیت‌هاب و ادیتور محلی. - جمع‌بندی درس‌نامه: تکمیل زنجیره ابزارهای تولید سریع و آمادگی برای یادگیری زبان مشترک برنامه‌نویسان (Git).
۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
- نحوه کارکرد پلتفرم‌های Lovable و Bolt به همراه قابلیت‌های کلیدی آن‌ها تشریح شده باشد.
- آموزش انتقال پروژه به GitHub به عنوان پل پیوند دهنده استراتژی Dual-Track گام‌به‌گام توضیح داده شود.
- برای دستورات کلون و باز کردن در ادیتور، منوهای کشویی جداگانه برای Windows، macOS و Linux تعبیه شده باشد.
- مزایا و محدودیت‌های تکیه صرف بر ابزارهای ابری به شکلی منصفانه بیان شده باشد.