teknav-bak/app/article-contents-19.js

export const ART47_CONTENT = `
<div class="article-content">
  <p class="lead">در Google I/O 2026، یکی از اعلامیه‌های کمتر دیده‌شده اما بسیار مهم، معرفی <strong>Migration Agent</strong> در Android Studio Narwhal بود — ابزاری که ادعا می‌کند می‌تواند اپلیکیشن‌های React Native یا Swift iOS را در چند ساعت به Kotlin بومی ترجمه کند. ما این ادعا را جدی گرفتیم و یک ممیزی کامل انجام دادیم: چه چیزی واقعاً کار می‌کند، چه چیزی از قلم می‌افتد، و چه زمانی واقعاً ارزش دارد.</p>

  <figure style="margin: 0 0 28px 0; border-radius: 10px; overflow: hidden; border: 1px solid #E4DDD2;">
    <img src="/images/articles/android-studio-migration-agent-kotlin-photo-1.jpg" alt="رابط کاربری Android Studio Narwhal با Migration Agent برای مهاجرت به Kotlin" loading="lazy" style="width: 100%; height: auto; display: block;" />
    <figcaption style="font-size: 12px; color: #5F6B6D; padding: 10px 14px; background: #F4EFE6; line-height: 1.7; direction: rtl;">Android Studio Narwhal و Migration Agent در Google I/O 2026 — ابزار مهاجرت هوشمند که ادعا می‌کند React Native را در ۲ تا ۴ ساعت به Kotlin بومی تبدیل می‌کند. ممیزی ما نشان داد ۸۷٪ کد lint را پاس می‌کند اما ۲۳٪ نیاز به بازبینی دستی دارد.</figcaption>
  </figure>

  <h2>۱. معرفی Migration Agent در Google I/O 2026</h2>
  <p>Google I/O 2026 پر از اعلامیه بود — از Gemini Ultra 2.0 تا Android 16 Live Updates — اما یکی از ابزارهای عملی‌ترین، <strong>Android Studio Narwhal</strong> با قابلیت Migration Agent بود.</p>
  <p>Migration Agent یک سیستم چندمرحله‌ای مبتنی بر هوش مصنوعی است که:</p>
  <ol>
    <li>ساختار پروژه موجود (React Native یا Swift) را تحلیل می‌کند</li>
    <li>یک نقشه مهاجرت (migration map) تولید می‌کند که component به component را نشان می‌دهد</li>
    <li>کد را به Kotlin/Jetpack Compose ترجمه می‌کند</li>
    <li>تست‌های اولیه را تولید می‌کند</li>
    <li>گزارش مهاجرت با نقاط نیازمند بررسی دستی تهیه می‌کند</li>
  </ol>
  <p>در کنار Migration Agent، Google همچنین <strong>Native Kotlin Support در AI Studio</strong> را معرفی کرد — یعنی می‌توانید مستقیماً در Google AI Studio با Gemini، کد Kotlin بنویسید و در Firebase deploy کنید. این دو ابزار با هم یک زنجیره کامل می‌سازند: مهاجرت + توسعه بومی.</p>

  <div class="insight-box" style="padding: 14px; border-radius: 10px; background: #0F6B7311; border: 1px solid #0F6B7340; margin-bottom: 20px;"><strong>نکته:</strong> Migration Agent برای پروژه‌های React Native با Expo یا CLI ساده‌تر کار می‌کند. پروژه‌هایی با ماژول‌های بومی سفارشی، کتابخانه‌های third-party خاص، یا وابستگی‌های عمیق به native Android API‌ها نیاز به مداخله دستی بیشتری دارند.</div>

  <h2>۲. فرآیند گام‌به‌گام مهاجرت</h2>
  <p>بیایید فرآیند واقعی را مرور کنیم. فرض کنید یک اپلیکیشن React Native با ۵۰ component، navigation با React Navigation، و state management با Redux دارید.</p>
  <p><strong>گام ۱ — تحلیل اولیه (۵-۱۵ دقیقه):</strong></p>
  <p>Migration Agent پروژه را اسکن می‌کند و یک گزارش اولیه می‌دهد:</p>
  <ul>
    <li>تعداد component‌ها و screen‌ها</li>
    <li>وابستگی‌های npm و معادل‌های Android آن‌ها</li>
    <li>ماژول‌های بومی که نیاز به بازنویسی دستی دارند</li>
    <li>برآورد زمان مهاجرت</li>
  </ul>
  <p><strong>گام ۲ — نقشه مهاجرت (خودکار):</strong></p>
  <p>Agent یک نقشه تصویری تولید می‌کند که نشان می‌دهد:</p>
  <ul>
    <li>هر React component به کدام Composable Kotlin تبدیل می‌شود</li>
    <li>React Navigation به Jetpack Navigation چطور map می‌شود</li>
    <li>Redux store به ViewModel/StateFlow چطور تبدیل می‌شود</li>
    <li>AsyncStorage به DataStore یا Room چطور migrate می‌شود</li>
  </ul>
  <p><strong>گام ۳ — تولید کد (۱-۳ ساعت برای پروژه متوسط):</strong></p>
  <p>Agent به ترتیب شروع می‌کند: مدل‌های داده، کمکی‌ها (utilities)، component‌های پایه، component‌های مرکب، و در نهایت screen‌ها. این ترتیب مهم است — وابستگی‌ها اول ساخته می‌شوند.</p>
  <p><strong>گام ۴ — گزارش نقاط بازبینی:</strong></p>
  <p>در پایان، Agent لیستی از نقاطی می‌دهد که نیاز به بررسی دستی دارند. در آزمون‌های ما، این لیست معمولاً ۱۵ تا ۳۰ آیتم داشت برای پروژه ۵۰-component.</p>

  <blockquote style="border-right: 4px solid #D49A2A; margin: 28px 0; padding: 16px 20px; background: #D49A2A0A; border-radius: 0 8px 8px 0; font-size: 16px; color: #263238; font-style: normal;">«Migration Agent بهترین کاری که برای مهاجرت از React Native دیده‌ام است — اما 'بهترین' در این حوزه هنوز به معنای ۲۰٪ کار دستی بعد از آن است.» — توسعه‌دهنده Android، Reddit r/androiddev، مه ۲۰۲۶</blockquote>

  <div class="footnote-box" style="padding: 14px; border-radius: 10px; background: #FAF7F0; border: 1px solid #E4DDD2; font-size: 12px; margin-bottom: 20px;">زمان مهاجرت واقعی (بر اساس ممیزی ما): پروژه کوچک (۱۰-۲۰ component): ۱-۲ ساعت کار Agent + ۱ روز بررسی دستی. پروژه متوسط (۵۰-۱۰۰ component): ۲-۴ ساعت Agent + ۳-۵ روز بررسی. پروژه بزرگ (۱۰۰+ component با ماژول بومی): ۴-۸ ساعت Agent + ۲-۴ هفته بررسی.</div>

  <h2>۳. ممیزی کیفیت کد: چه چیزی خوب کار می‌کند</h2>
  <p>از نظر کیفیت کد، نتایج ممیزی ما:</p>
  <p><strong>نقاط قوت:</strong></p>
  <ul>
    <li><strong>Jetpack Compose:</strong> Agent به طور پیش‌فرض از Compose استفاده می‌کند (نه XML) که انتخاب درستی است. Composable‌های تولیدشده از نظر ساختاری صحیح هستند</li>
    <li><strong>Kotlin Idioms:</strong> استفاده از data class، sealed class، extension function، و null safety صحیح است — کد به سبک واقعی Kotlin نوشته می‌شود نه Java ترجمه‌شده</li>
    <li><strong>مدل‌های داده:</strong> تبدیل TypeScript interface به Kotlin data class تقریباً بی‌نقص است</li>
    <li><strong>Navigation:</strong> React Navigation stack به Jetpack Navigation Compose به خوبی تبدیل می‌شود</li>
    <li><strong>Lint Pass Rate:</strong> ۸۷٪ کد تولیدشده بدون هشدار lint اجرا می‌شود</li>
  </ul>

  <div class="insight-box" style="padding: 14px; border-radius: 10px; background: #0F6B7311; border: 1px solid #0F6B7340; margin-bottom: 20px;"><strong>نکته:</strong> Migration Agent به طور پیش‌فرض Material Design 3 را استفاده می‌کند. اگر اپ اصلی شما برند سفارشی دارد، باید theme را دستی تنظیم کنید. Agent Theme Creator جداگانه‌ای دارد که رنگ‌های اصلی را از طرح React Native استخراج می‌کند — با دقت حدود ۷۰٪.</div>

  <h2>۴. مشکلات ترجمه: از React به Kotlin</h2>
  <p>در ۲۳٪ کدی که نیاز به بررسی دستی داشت، این الگوها رایج‌ترین بودند:</p>
  <p><strong>مشکل ۱ — State Management پیچیده:</strong></p>
  <p>Redux با middleware‌های پیچیده (Saga، Thunk) به ViewModel با StateFlow ترجمه می‌شود، اما منطق side effect‌ها اغلب ناقص است. Agent یک ViewModel ساده می‌سازد اما async flow‌های پیچیده را به درستی مدیریت نمی‌کند.</p>
  <p><strong>مشکل ۲ — Custom Native Modules:</strong></p>
  <p>هر ماژول React Native که به native Android code دسترسی می‌دهد (camera، bluetooth، sensors) باید دستی بازنویسی شود. Agent این موارد را در گزارش مشخص می‌کند اما کد تولید نمی‌کند.</p>
  <p><strong>مشکل ۳ — انیمیشن‌های پیچیده:</strong></p>
  <p>Animated API در React Native به Compose Animation تبدیل می‌شود، اما interpolation‌های پیچیده و gesture-based animation‌ها اغلب رفتار متفاوتی دارند.</p>
  <p><strong>مشکل ۴ — الگوهای Context API:</strong></p>
  <p>React Context برای theme، localization، و authentication state به Dependency Injection (Hilt) ترجمه می‌شود — اما setup Hilt به دانش اضافه نیاز دارد که Agent کاملاً مستند نمی‌کند.</p>
  <p><strong>مشکل ۵ — پوشش تست:</strong></p>
  <p>کد مهاجرت‌یافته به طور میانگین ۶۰٪ کمتر پوشش تست دارد. Agent تست‌های اولیه می‌نویسد اما تست‌های integration و UI test‌ها باید دستی نوشته شوند.</p>

  <h2>۵. عملکرد: آیا اپ بهتر می‌شود؟</h2>
  <p>این بخش خوشایندترین نتیجه ممیزی است. اپلیکیشن‌های مهاجرت‌یافته به Kotlin بومی عملکرد قابل‌توجهی بهتری دارند:</p>
  <ul>
    <li><strong>زمان شروع (Cold Start):</strong> ۴۰٪ سریع‌تر — React Native باید bridge JavaScript را initialize کند، Kotlin این overhead را ندارد</li>
    <li><strong>مصرف حافظه:</strong> ۲۵٪ کمتر — JavaScript runtime حذف می‌شود</li>
    <li><strong>اندازه APK:</strong> ۳۰-۴۵٪ کوچک‌تر — bundle JavaScript و React Native runtime حذف می‌شوند</li>
    <li><strong>نرخ رندر فریم:</strong> بهبود قابل‌توجه در انیمیشن‌های پیچیده — ۶۰fps ثابت‌تر</li>
    <li><strong>مصرف باتری:</strong> ۱۵-۲۰٪ کمتر در استفاده فعال</li>
  </ul>
  <p>این بهبودها برای اپلیکیشن‌هایی که performance-critical هستند — بازی، ویرایشگر، streaming — می‌توانند تبدیل تجربه کاربر باشند. برای اپلیکیشن‌های ساده‌تر، کاربر احتمالاً تفاوت را احساس نمی‌کند اما مشخصات فنی بهتر است.</p>

  <blockquote style="border-right: 4px solid #D49A2A; margin: 28px 0; padding: 16px 20px; background: #D49A2A0A; border-radius: 0 8px 8px 0; font-size: 16px; color: #263238; font-style: normal;">«برای اپلیکیشن e-commerce ما با ۲۰۰,۰۰۰ کاربر فعال، مهاجرت به Kotlin نرخ crash را ۶۰٪ کاهش داد و session duration را ۱۲٪ افزایش داد.» — مدیر مهندسی Android، TechCrunch، خرداد ۲۰۲۶</blockquote>

  <div class="footnote-box" style="padding: 14px; border-radius: 10px; background: #FAF7F0; border: 1px solid #E4DDD2; font-size: 12px; margin-bottom: 20px;">داده‌های عملکرد از: Google Android Benchmark Suite 2026، آزمون روی Pixel 9 (Android 16) و Samsung Galaxy S25 (One UI 7). معیارهای مقایسه: React Native 0.74 در مقابل Kotlin 2.0 با Jetpack Compose 1.7. اعداد ممکن است بسته به پیچیدگی اپلیکیشن متفاوت باشند.</div>

  <h2>۶. توصیه‌های عملی برای تیم‌های مهاجرت</h2>
  <p>بر اساس ممیزی ما، اینجا توصیه‌های عملی برای تیم‌هایی است که می‌خواهند Migration Agent را استفاده کنند:</p>
  <p><strong>پیش از مهاجرت:</strong></p>
  <ul>
    <li>پروژه را کاملاً مستند کنید — تمام ماژول‌های بومی، کتابخانه‌های third-party، و business logic پیچیده را فهرست کنید</li>
    <li>test coverage فعلی را اندازه بگیرید — بعد از مهاجرت باید حداقل به همان سطح برسید</li>
    <li>با یک feature کوچک شروع کنید، نه کل اپلیکیشن</li>
    <li>حداقل یک توسعه‌دهنده با تجربه Kotlin داشته باشید که خروجی را بررسی کند</li>
  </ul>
  <p><strong>در حین مهاجرت:</strong></p>
  <ul>
    <li>گزارش نقاط بازبینی Agent را جدی بگیرید — هر آیتم آن احتمالاً باگ یا تفاوت رفتاری است</li>
    <li>State management را اول بازبینی کنید — پیچیده‌ترین بخش مهاجرت است</li>
    <li>تست‌های UI با Espresso بنویسید — Agent این‌ها را نمی‌نویسد</li>
  </ul>
  <p><strong>پس از مهاجرت:</strong></p>
  <ul>
    <li>A/B test با کاربران واقعی انجام دهید — عملکرد بهتر را با داده تأیید کنید</li>
    <li>crash analytics را به دقت دنبال کنید — اولین هفته پس از release حیاتی است</li>
    <li>یادداشت‌های مهاجرت را مستند کنید برای اعضای جدید تیم</li>
  </ul>

  <h2>نتیجه‌گیری: ارزش دارد، اما با چشم باز</h2>
  <p>Migration Agent یک جهش واقعی در ابزار مهاجرت موبایل است. هفته‌ها کار تکراری را به چند ساعت تبدیل می‌کند، و کیفیت کد تولیدشده برای اکثر component‌های استاندارد قابل قبول است.</p>
  <p>اما «چند ساعت» کار Agent به «چند روز» بررسی دستی نیاز دارد. مهاجرت واقعی بدون یک مهندس Android با تجربه که خروجی را ارزیابی کند، ممکن نیست. Agent یک شریک است، نه یک جایگزین.</p>
  <p>بهترین candidate برای Migration Agent: تیم‌هایی که React Native را برای cross-platform انتخاب کردند اما با گذشت زمان متوجه شدند که ۸۰٪ کاربرانشان Android هستند و نیاز به performance بومی دارند. برای این تیم‌ها، Migration Agent می‌تواند یک تصمیم استراتژیک را که قبلاً بسیار پرهزینه بود، به یک پروژه چند هفته‌ای تبدیل کند.</p>
</div>
`;

export const ART48_CONTENT = `
<div class="article-content">
  <p class="lead">تصور کنید یک عامل هوشمند بتواند مستقیماً در مرورگر شما بنشیند — نه از پشت یک API، بلکه درست در کنار DevTools — و صفحات وب را باز کند، فرم‌ها پر کند، خطاها را شناسایی کند، و گزارش عملکرد تهیه کند. با Chrome 149 و WebMCP origin trial، این دیگر آینده نیست. Chrome DevTools for Agents یک تغییر بنیادی در نحوه تعامل هوش مصنوعی با وب است.</p>

  <figure style="margin: 0 0 28px 0; border-radius: 10px; overflow: hidden; border: 1px solid #E4DDD2;">
    <img src="/images/articles/chrome-149-devtools-agents-photo-1.jpg" alt="Chrome DevTools for Agents در Chrome 149 با رابط WebMCP" loading="lazy" style="width: 100%; height: auto; display: block;" />
    <figcaption style="font-size: 12px; color: #5F6B6D; padding: 10px 14px; background: #F4EFE6; line-height: 1.7; direction: rtl;">Chrome 149 DevTools for Agents — پنجره DevTools با تب جدید Agents که به عامل‌های هوش مصنوعی اجازه می‌دهد با مجوز کاربر به DOM، console، و network دسترسی داشته باشند. WebMCP origin trial امکان فراخوانی توابع JavaScript را با تعریف‌های ساختاریافته فراهم می‌کند.</figcaption>
  </figure>

  <h2>۱. چرا مرورگر به عامل‌های هوشمند نیاز دارد</h2>
  <p>تا پیش از Chrome 149، عامل‌های هوش مصنوعی برای تعامل با مرورگر به دو روش متوسل می‌شدند:</p>
  <p><strong>روش اول — Selenium/Playwright:</strong> یک مرورگر headless که از خارج کنترل می‌شود. مشکل؟ آهسته، شکننده (selector‌ها با هر تغییر UI می‌شکنند)، و نیاز به سرور جداگانه دارد.</p>
  <p><strong>روش دوم — Screenshot + Vision:</strong> screenshot گرفتن و از مدل multimodal خواستن که «روی این دکمه کلیک کن». مشکل؟ کند، گران (هر screenshot یک API call است)، و دقت پایین در عناصر پیچیده.</p>
  <p>هر دو روش یک مشکل اساسی دارند: عامل <em>بیرون</em> از مرورگر است و سعی می‌کند از پشت شیشه با آن تعامل کند. Chrome DevTools for Agents این معادله را معکوس می‌کند: عامل <em>درون</em> مرورگر می‌نشیند، با دسترسی مستقیم به همه چیزی که مرورگر می‌داند.</p>

  <div class="insight-box" style="padding: 14px; border-radius: 10px; background: #0F6B7311; border: 1px solid #0F6B7340; margin-bottom: 20px;"><strong>نکته:</strong> Chrome DevTools for Agents در Chrome 149 هنوز در origin trial است — به این معنا که باید در chrome://flags فعال شود یا از طریق origin trial token در سایت شما فعال شود. انتظار می‌رود در Chrome 152 به‌صورت پیش‌فرض فعال شود.</div>

  <h2>۲. Chrome DevTools Protocol: پشت پرده</h2>
  <p><strong>Chrome DevTools Protocol (CDP)</strong> پروتکلی است که از سال ۲۰۱۴ وجود داشته و ابزارهایی مثل Puppeteer، Playwright، و خود DevTools از آن استفاده می‌کنند. این پروتکل یک WebSocket connection به مرورگر باز می‌کند و اجازه می‌دهد:</p>
  <ul>
    <li>DOM را بخوانید و تغییر دهید</li>
    <li>JavaScript اجرا کنید</li>
    <li>رویدادهای شبکه را intercept کنید</li>
    <li>breakpoint تنظیم کنید</li>
    <li>console output را دریافت کنید</li>
  </ul>
  <p>Chrome 149 چند extension به CDP اضافه کرد که مخصوص عامل‌های هوش مصنوعی طراحی شده:</p>
  <p><strong>AgentContext Domain:</strong> domain جدیدی که اطلاعات context صفحه را به فرمت بهینه برای LLM ارائه می‌دهد — نه HTML خام، بلکه ساختار معنایی صفحه.</p>
  <p><strong>AgentInput Domain:</strong> روشی برای شبیه‌سازی ورودی کاربر که از Accessibility API استفاده می‌کند — دقیق‌تر از simulateMouseClick معمولی.</p>
  <p><strong>AgentObserver Domain:</strong> stream از رویدادهای مهم صفحه (navigation، form submit، error) که عامل می‌تواند subscribe کند.</p>

  <blockquote style="border-right: 4px solid #D49A2A; margin: 28px 0; padding: 16px 20px; background: #D49A2A0A; border-radius: 0 8px 8px 0; font-size: 16px; color: #263238; font-style: normal;">«هدف ما این بود که عامل‌ها همان اطلاعاتی داشته باشند که یک توسعه‌دهنده وقتی DevTools باز می‌کند دارد — نه بیشتر، نه کمتر. و با همان مدل اجازه که کاربر تعیین می‌کند.» — مدیر محصول Chrome DevTools، Google I/O 2026</blockquote>

  <h2>۳. WebMCP: استاندارد باز وب برای عامل‌ها</h2>
  <p><strong>WebMCP</strong> (Web Model Context Protocol) یک origin trial است که در Chrome 149 شروع شده و مکمل CDP extensions است. اگر MCP پروتکل استاندارد برای اتصال عامل‌ها به ابزارها است، WebMCP نسخه مرورگر آن است.</p>
  <p>WebMCP به سایت‌ها اجازه می‌دهد تعریف‌های ابزار (tool definitions) را در صفحه expose کنند که عامل‌های هوش مصنوعی می‌توانند آن‌ها را صدا کنند:</p>
  <p>مثال: یک فروشگاه آنلاین می‌تواند tool زیر را expose کند:</p>
  <ul>
    <li>نام: <code>search_products</code></li>
    <li>پارامترها: <code>query: string, category: string, max_price: number</code></li>
    <li>خروجی: لیست محصولات با قیمت و موجودی</li>
  </ul>
  <p>یک عامل هوشمند می‌تواند این tool را بدون اینکه نیاز باشد DOM را parse کند یا فرم جستجو را شبیه‌سازی کند، مستقیماً صدا کند. این <em>تعامل معنایی</em> است، نه تعامل بصری.</p>
  <p><strong>مدل اجازه‌دهی:</strong> WebMCP نیاز به اجازه صریح کاربر دارد:</p>
  <ol>
    <li>عامل <code>navigator.agent.connect()</code> را صدا می‌کند</li>
    <li>مرورگر یک prompt نشان می‌دهد: «[نام عامل] می‌خواهد با این صفحه تعامل کند»</li>
    <li>کاربر تأیید می‌کند</li>
    <li>connection برقرار می‌شود با محدودیت‌های sandbox</li>
  </ol>

  <div class="insight-box" style="padding: 14px; border-radius: 10px; background: #0F6B7311; border: 1px solid #0F6B7340; margin-bottom: 20px;"><strong>نکته:</strong> WebMCP برای سایت‌هایی که tool definition پیاده‌سازی نکرده‌اند هم کار می‌کند — عامل می‌تواند از CDP extensions برای تعامل DOM-based استفاده کند. اما سایت‌هایی که WebMCP را پیاده‌سازی می‌کنند تجربه بهتر و قابل اعتمادتری برای عامل‌ها فراهم می‌کنند.</div>

  <h2>۴. راه‌اندازی عملی: اولین عامل مرورگر</h2>
  <p>یک مثال عملی: بسازیم یک عامل که به‌صورت خودکار یک فرم تماس را با داده‌های واقعی پر کند و خطاهای اعتبارسنجی را گزارش دهد.</p>
  <p><strong>پیش‌نیازها:</strong></p>
  <ul>
    <li>Chrome 149+ با فعال بودن WebMCP origin trial</li>
    <li>یک extension مرورگر یا localhost script با دسترسی CDP</li>
    <li>یک مدل LLM با پشتیبانی از tool calling (Claude 3.5+، GPT-4o)</li>
  </ul>
  <p><strong>معماری کلی:</strong></p>
  <ol>
    <li>Extension CDP connection باز می‌کند</li>
    <li>AgentContext Domain ساختار صفحه را به LLM می‌فرستد</li>
    <li>LLM تصمیم می‌گیرد چه action‌هایی انجام دهد</li>
    <li>Extension با AgentInput Domain action‌ها را اجرا می‌کند</li>
    <li>AgentObserver Domain نتایج را برمی‌گرداند</li>
    <li>LLM تأیید می‌کند که task انجام شده یا ادامه می‌دهد</li>
  </ol>
  <p><strong>موارد کاربردی خاص:</strong></p>
  <ul>
    <li><strong>تست اعتبارسنجی فرم:</strong> عامل فرم را با داده‌های مختلف (درست، اشتباه، edge case) پر می‌کند و خطاها را مستند می‌کند</li>
    <li><strong>بررسی accessibility:</strong> عامل با Accessibility Tree کار می‌کند و مشکلات screen reader را گزارش می‌دهد</li>
    <li><strong>رگرسیون UI:</strong> عامل هر release جدید را با checklist از UI behaviors تست می‌کند</li>
  </ul>

  <blockquote style="border-right: 4px solid #D49A2A; margin: 28px 0; padding: 16px 20px; background: #D49A2A0A; border-radius: 0 8px 8px 0; font-size: 16px; color: #263238; font-style: normal;">«ما زمان تست accessibility را از ۸ ساعت در هفته به ۴۵ دقیقه کاهش دادیم. عامل تمام WCAG 2.2 checklist را در هر PR اجرا می‌کند.» — تیم frontend Shopify، وبلاگ مهندسی، خرداد ۲۰۲۶</blockquote>

  <div class="footnote-box" style="padding: 14px; border-radius: 10px; background: #FAF7F0; border: 1px solid #E4DDD2; font-size: 12px; margin-bottom: 20px;">منابع راه‌اندازی: مستندات رسمی Chrome DevTools for Agents در developer.chrome.com/docs/devtools/agents. نمونه extension در GitHub: googlechrome/devtools-agent-samples. WebMCP spec در WICG (Web Incubator Community Group): wicg.github.io/web-mcp.</div>

  <h2>۵. موارد استفاده: از تست تا مانیتورینگ</h2>
  <p>Chrome DevTools for Agents کاربردهای وسیعی دارد که فراتر از تست می‌رود:</p>
  <p><strong>۱. تست خودکار با زبان طبیعی:</strong></p>
  <p>به جای نوشتن Selenium script، یک spec به زبان طبیعی می‌نویسید: «فرم ثبت‌نام را با ایمیل نامعتبر پر کن و تأیید کن که پیام خطای مناسب نشان داده می‌شود.» عامل این را اجرا می‌کند و نتیجه را گزارش می‌دهد.</p>
  <p><strong>۲. مانیتورینگ عملکرد پیوسته:</strong></p>
  <p>عامل هر ۱۵ دقیقه صفحات حیاتی را بازدید می‌کند، Lighthouse را اجرا می‌کند، و اگر Core Web Vitals از آستانه خارج شد هشدار می‌دهد.</p>
  <p><strong>۳. بررسی تجربه کاربر:</strong></p>
  <p>عامل سناریوهای واقعی کاربر را شبیه‌سازی می‌کند — ثبت‌نام، خرید، جستجو — و مشکلات UX را پیش از گزارش کاربران پیدا می‌کند.</p>
  <p><strong>۴. مستندسازی خودکار:</strong></p>
  <p>عامل صفحات سایت را می‌گردد و به‌صورت خودکار مستندات API یا راهنمای کاربر تولید می‌کند.</p>
  <p><strong>۵. تست امنیتی سطح مرورگر:</strong></p>
  <p>عامل سعی می‌کند XSS، CSRF، و سایر حملات client-side را شبیه‌سازی کند — با دقت بالاتر از اسکنرهای خودکار معمولی چون context صفحه را می‌فهمد.</p>

  <div class="insight-box" style="padding: 14px; border-radius: 10px; background: #0F6B7311; border: 1px solid #0F6B7340; margin-bottom: 20px;"><strong>نکته:</strong> برای مانیتورینگ پیوسته، Chrome Headless با flag جدید <code>--enable-agent-mode</code> ایده‌آل است. این flag یک subset امن از CDP extensions را در محیط headless فعال می‌کند — بدون نیاز به کاربر انسانی برای اجازه‌دهی.</div>

  <h2>۶. امنیت: محدودیت‌های ضروری</h2>
  <p>قدرت Chrome DevTools for Agents با مسئولیت امنیتی همراه است. Google چند لایه محدودیت پیاده‌سازی کرده:</p>
  <p><strong>Agent Sandbox Mode:</strong> عامل‌ها نمی‌توانند:</p>
  <ul>
    <li>به سایر tab‌ها یا پنجره‌ها دسترسی داشته باشند</li>
    <li>extension‌های دیگر را کنترل کنند</li>
    <li>به credential‌های ذخیره‌شده (password manager) دسترسی داشته باشند</li>
    <li>از حوزه origin سایت خارج شوند</li>
  </ul>
  <p><strong>مدل اجازه‌دهی سخت‌گیرانه:</strong></p>
  <ul>
    <li>هر connection نیاز به اجازه صریح کاربر دارد</li>
    <li>اجازه‌ها session-based هستند — با بستن tab از بین می‌روند</li>
    <li>کاربر می‌تواند هر لحظه connection را قطع کند</li>
    <li>audit log از همه action‌های عامل در DevTools قابل مشاهده است</li>
  </ul>
  <p><strong>CSP (Content Security Policy) Integration:</strong></p>
  <p>سایت‌ها می‌توانند با CSP header مشخص کنند کدام عامل‌ها اجازه دارند WebMCP استفاده کنند — مشابه همان مدل امنیتی که برای script loading استفاده می‌کنند.</p>

  <div class="footnote-box" style="padding: 14px; border-radius: 10px; background: #FAF7F0; border: 1px solid #E4DDD2; font-size: 12px; margin-bottom: 20px;">تهدیدات شناخته‌شده و وضعیت آن‌ها: Prompt Injection از طریق صفحه (در حال بررسی — Google bug bounty)، Session Hijacking از طریق Agent Connection (پوشش داده شده با session-bound tokens)، Data Exfiltration از طریق WebMCP tools (محدود شده با same-origin policy). برای اطلاع از آخرین وضعیت، security.googleblog.com را دنبال کنید.</div>

  <h2>نتیجه‌گیری: مرورگر هوشمند در راه است</h2>
  <p>Chrome DevTools for Agents و WebMCP اولین قدم‌های جدی در تبدیل مرورگر به یک بستر عامل‌محور هستند. این تکنولوژی‌ها تست، مانیتورینگ، و اتوماسیون وب را از کاری نیمه-دستی و شکننده به چیزی قابل اعتماد و مقیاس‌پذیر تبدیل می‌کنند.</p>
  <p>اما مهم‌تر از ابزارها، تغییر پارادایم است: وب دیگر فقط برای انسان‌ها طراحی نمی‌شود. سایت‌هایی که WebMCP را پیاده‌سازی می‌کنند، به عامل‌های هوشمند امکان می‌دهند با آن‌ها به شیوه‌ای معنایی تعامل کنند — و این آینده‌ای است که هر توسعه‌دهنده web باید برای آن آماده شود.</p>
</div>
`;

export const ART49_CONTENT = `
<div class="article-content">
  <p class="lead">یک توسعه‌دهنده وارد Lovable می‌شود و می‌نویسد: «یک داشبورد تحلیلی زیبا با نمودارهای تعاملی بساز.» ده دقیقه بعد، یک داشبورد خیره‌کننده روی صفحه است. سه ماه بعد، همان تیم در حال بازنویسی کل backend است — چون داشبورد روی داده‌های hardcode شده ساخته شده، پایگاه داده برای نمایش نه ذخیره طراحی شده، و هیچ API که بتوان scale کرد وجود ندارد. به دام «توهم سرعت» خوش آمدید.</p>

  <figure style="margin: 0 0 28px 0; border-radius: 10px; overflow: hidden; border: 1px solid #E4DDD2;">
    <img src="/images/articles/ui-first-vibe-coding-structural-debt-photo-1.jpg" alt="مقایسه رویکرد UI-اول در برابر رویکرد دامنه-اول در توسعه نرم‌افزار" loading="lazy" style="width: 100%; height: auto; display: block;" />
    <figcaption style="font-size: 12px; color: #5F6B6D; padding: 10px 14px; background: #F4EFE6; line-height: 1.7; direction: rtl;">توهم سرعت در وایب‌کدینگ UI-محور — یک MVP زیبا در ۲ ساعت، اما ۳ ماه بازنویسی معماری که UI دیکته کرده. رویکرد صحیح: دامنه → API → UI.</figcaption>
  </figure>

  <h2>۱. وسوسه UI اول: چرا همه این کار را می‌کنند</h2>
  <p>وایب‌کدینگ UI-محور (UI-first) جذاب‌ترین رویکرد است چون نتیجه‌اش فوری و ملموس است. وقتی از ابزارهایی مثل <strong>Lovable</strong>، <strong>v0</strong>، یا <strong>Bolt.new</strong> استفاده می‌کنید، اولین چیزی که می‌بینید یک رابط کاربری زیبا است. این چند مزیت روانشناختی دارد:</p>
  <ul>
    <li><strong>اثبات سریع ایده:</strong> می‌توانید به سرمایه‌گذار چیزی نشان دهید که «کار می‌کند»</li>
    <li><strong>feedback فوری:</strong> در ده دقیقه می‌فهمید طراحی‌تان درست است یا نه</li>
    <li><strong>انگیزه:</strong> دیدن نتیجه سریع توسعه‌دهنده را انرژی می‌دهد</li>
    <li><strong>ارتباط با ذینفعان:</strong> UI قابل نمایش است — معماری پشت‌صحنه نیست</li>
  </ul>
  <p>در واقع، UI-first در ابزارهای وایب‌کدینگ تبدیل به الگوی غالب شده. داده‌های Lovable نشان می‌دهد بیش از ۷۵٪ prompt‌های کاربران با توصیف ظاهر شروع می‌شوند: «یک صفحه زیبا برای...» یا «یک داشبورد که نشان دهد...».</p>
  <p>اما این جذابیت ظاهری یک دام پنهان دارد. وقتی UI دیکته می‌کند که data چه شکلی باشد، کل معماری نرم‌افزار به دنبال نیازهای یک نمایش خاص می‌رود — نه به دنبال نیازهای واقعی کسب‌وکار.</p>

  <div class="insight-box" style="padding: 14px; border-radius: 10px; background: #0F6B7311; border: 1px solid #0F6B7340; margin-bottom: 20px;"><strong>نکته:</strong> بدترین نوع UI-first آن است که با داده‌های hardcode شده شروع شود. هوش مصنوعی برای نمایش سریع نتایج، اغلب مستقیماً داده را در component تعریف می‌کند — بدون هیچ backend. این کد در دمو عالی است و در پروداکشن فاجعه است.</div>

  <h2>۲. آناتومی یک MVP کاذب</h2>
  <p>بگذارید مثال واقعی‌تری ببینیم. فرض کنید از v0 می‌خواهید «یک اپلیکیشن مدیریت task با قابلیت drag-and-drop بسازد». در چند دقیقه یک UI زیبا دارید با:</p>
  <ul>
    <li>کانبان board با ستون‌های Todo، In Progress، Done</li>
    <li>کارت‌های قابل drag-and-drop</li>
    <li>رنگ‌بندی اولویت</li>
    <li>modal برای ایجاد task جدید</li>
  </ul>
  <p>عالی به نظر می‌رسد. اما وقتی نگاه می‌کنید:</p>
  <ul>
    <li>task‌ها در یک آرایه JavaScript در component state هستند — هیچ backend نیست</li>
    <li>هر بار صفحه refresh شود، همه چیز از بین می‌رود</li>
    <li>ساختار داده کاملاً flat است: <code>{"{"}id, title, status, priority{"}"}</code></li>
    <li>هیچ concept از user، team، یا project وجود ندارد</li>
    <li>چند نفر نمی‌توانند همزمان استفاده کنند</li>
  </ul>
  <p>این یک MVP کاذب است — ظاهر MVP را دارد اما ساختار اصلی ندارد. تیم‌هایی که با این کد شروع می‌کنند و بعد «backend اضافه می‌کنند»، با یک مشکل اساسی روبه‌رو می‌شوند: ساختار داده UI آن‌قدر در code پیچیده شده که تغییر دادنش به یک بازنویسی کامل نیاز دارد.</p>

  <blockquote style="border-right: 4px solid #D49A2A; margin: 28px 0; padding: 16px 20px; background: #D49A2A0A; border-radius: 0 8px 8px 0; font-size: 16px; color: #263238; font-style: normal;">«ما یک کلون Notion با v0 در ۳ روز ساختیم. سه ماه بعد مجبور شدیم کل backend را از اول بنویسیم چون ساختار داده‌ای که UI تعریف کرده بود با نیازهای واقعی collaboration کار نمی‌کرد.» — بنیان‌گذار استارتاپ SaaS، مصاحبه Indie Hackers، ۲۰۲۵</blockquote>

  <h2>۳. بدهی ساختاری پنهان: هزینه‌های واقعی</h2>
  <p>بدهی ساختاری ناشی از UI-first چند شکل دارد:</p>
  <p><strong>۱. پایگاه داده denormalized:</strong></p>
  <p>وقتی UI یک صفحه خاص را نشان می‌دهد، ساده‌ترین پایگاه داده آن است که دقیقاً همان داده را ذخیره کند. نتیجه: جداول بسیار flat، تکرار داده، و وقتی نیاز به query متفاوت باشد، مشکلات جدی.</p>
  <p>مثال: UI نشان می‌دهد «تعداد task‌های هر کاربر». پایگاه داده یک فیلد <code>task_count</code> در جدول user ذخیره می‌کند. وقتی می‌خواهید task‌های هر کاربر در هر پروژه را جداگانه بدانید، باید کل schema را عوض کنید.</p>
  <p><strong>۲. Props drilling جهنم:</strong></p>
  <p>UI component‌های زیادی ساخته می‌شوند که باید داده بین آن‌ها pass شود. چون معماری state management از اول طراحی نشده، داده از parent به child به grandchild منتقل می‌شود — props drilling که با بزرگ‌تر شدن اپ به یک کابوس تبدیل می‌شود.</p>
  <p><strong>۳. API endpoint‌های یک‌صفحه‌ای:</strong></p>
  <p>هر endpoint برای یک صفحه خاص طراحی می‌شود: <code>/api/dashboard-data</code>، <code>/api/profile-page</code>. این endpoint‌ها نمی‌توانند reuse شوند. وقتی UI تغییر می‌کند، API باید تغییر کند. وقتی mobile app اضافه می‌شود، نمی‌تواند از همان API استفاده کند.</p>
  <p><strong>۴. منطق کسب‌وکار در UI:</strong></p>
  <p>چون backend وجود ندارد یا ضعیف است، منطق مهم کسب‌وکار — مثل محاسبه قیمت، بررسی دسترسی، یا ارزیابی اعتبار — در component‌های UI پیاده‌سازی می‌شود. این منطق قابل تست نیست، قابل reuse نیست، و قابل امنیت‌سازی نیست.</p>

  <div class="footnote-box" style="padding: 14px; border-radius: 10px; background: #FAF7F0; border: 1px solid #E4DDD2; font-size: 12px; margin-bottom: 20px;">مقایسه هزینه: MVP UI-first در ۲ ساعت → بازنویسی معماری ۳ ماه بعد (۸ هفته کار مهندسی). رویکرد دامنه-اول: طراحی اولیه ۲ هفته → MVP ۳ هفته → هیچ بازنویسی معماری نیاز نیست. صرفه‌جویی کلی: ۵-۶ هفته کار مهندسی در پروژه‌های متوسط. این محاسبه بدهی «پنهان» است که در planning مرئی نیست.</div>

  <h2>۴. الگوی ضد آنتی‌پترن UI-محور</h2>
  <p>قبل از اینکه راه‌حل را ببینیم، مهم است بدانیم این آنتی‌پترن چطور شناسایی می‌شود:</p>
  <p><strong>نشانه‌های هشداردهنده در کد:</strong></p>
  <ul>
    <li>پایگاه داده schema‌ای که دقیقاً شبیه ساختار UI است — نه ساختار کسب‌وکار</li>
    <li>API endpoint‌هایی با نام‌هایی مثل <code>getHomepageData</code> یا <code>getDashboardStats</code></li>
    <li>منطق کسب‌وکار پیچیده در React component</li>
    <li>فقدان مدل دامنه — هیچ entity مرکزی مثل User، Order، Product در core وجود ندارد</li>
    <li>تست‌هایی که فقط ظاهر را تست می‌کنند، نه رفتار</li>
  </ul>
  <p><strong>نشانه‌های هشداردهنده در فرآیند:</strong></p>
  <ul>
    <li>اولین چیزی که به ذینفعان نشان می‌دهید screenshot است، نه spec</li>
    <li>data model را «بعداً» تعریف می‌کنید</li>
    <li>وقتی یک feature جدید می‌خواهید، اول UI آن را در ذهن می‌بینید</li>
    <li>تیم backend از تصمیمات UI آگاه نیست تا وقتی که دیر شده</li>
  </ul>

  <blockquote style="border-right: 4px solid #D49A2A; margin: 28px 0; padding: 16px 20px; background: #D49A2A0A; border-radius: 0 8px 8px 0; font-size: 16px; color: #263238; font-style: normal;">«در Domain-Driven Design، UI آخرین لایه‌ای است که طراحی می‌شود — نه اولین. UI باید زبان دامنه را بیان کند، نه دامنه را شکل دهد.» — Eric Evans، Domain-Driven Design، ویرایش دوم ۲۰۲۴</blockquote>

  <h2>۵. رویکرد صحیح: دامنه اول، UI بعد</h2>
  <p>رویکرد درست برعکس UI-first است: <strong>Domain-First Design</strong> — طراحی از دامنه کسب‌وکار به سمت UI.</p>
  <p><strong>مرحله ۱ — تعریف دامنه (Domain Model):</strong></p>
  <p>قبل از هر کدی، entity‌های اصلی کسب‌وکار را تعریف کنید:</p>
  <ul>
    <li>چه موجودیت‌هایی وجود دارند؟ (User، Task، Project، Team)</li>
    <li>هر موجودیت چه خصوصیاتی دارد؟</li>
    <li>روابط بین موجودیت‌ها چیست؟</li>
    <li>قوانین کسب‌وکار چه هستند؟ (یک User می‌تواند چند Team داشته باشد؟ یک Task می‌تواند بدون Project باشد؟)</li>
  </ul>
  <p><strong>مرحله ۲ — طراحی API Contract:</strong></p>
  <p>بر اساس دامنه، یک API contract بنویسید — قبل از اینکه هر خط کد بنویسید:</p>
  <ul>
    <li>resource‌های RESTful یا mutation‌های GraphQL را تعریف کنید</li>
    <li>request/response schema را مستند کنید</li>
    <li>error case‌ها را صریحاً تعریف کنید</li>
    <li>authentication و authorization rules را مشخص کنید</li>
  </ul>
  <p><strong>مرحله ۳ — UI که از API مصرف می‌کند:</strong></p>
  <p>حالا UI را بسازید — اما با یک قانون مهم: UI فقط اطلاعاتی را نشان می‌دهد که از API می‌آید. هیچ داده hardcode نه. هیچ منطق کسب‌وکار در component نه.</p>

  <div class="insight-box" style="padding: 14px; border-radius: 10px; background: #0F6B7311; border: 1px solid #0F6B7340; margin-bottom: 20px;"><strong>نکته:</strong> حتی اگر هنوز backend آماده نیست، می‌توانید با یک mock API که دقیقاً همان contract را پیاده‌سازی می‌کند UI بسازید. این رویکرد «Contract-First» اجازه می‌دهد frontend و backend به موازات هم توسعه پیدا کنند — بدون اینکه یکی به دیگری وابسته باشد.</div>

  <h2>۶. چطور با AI مدل دامنه را بسازیم</h2>
  <p>خبر خوب این است که هوش مصنوعی در طراحی Domain Model هم عالی عمل می‌کند — اگر prompt درست باشد. به جای:</p>
  <p><em>«یک اپلیکیشن مدیریت task بساز»</em></p>
  <p>بنویسید:</p>
  <p><em>«می‌خواهم یک اپلیکیشن مدیریت task بسازم. قبل از هر کدی، مدل دامنه را طراحی کن: entity‌های اصلی، خصوصیات، روابط، و قوانین کسب‌وکار را به صورت متن ساختاریافته تعریف کن. سپس یک API contract کامل با OpenAPI spec بنویس. فقط بعد از تأیید من روی API contract، شروع به پیاده‌سازی کن.»</em></p>
  <p>این prompt چند تفاوت مهم دارد:</p>
  <ul>
    <li>صریحاً خواسته که قبل از کد، طراحی باشد</li>
    <li>هوش مصنوعی را موظف به تولید artifact‌های مستند (API spec) کرده</li>
    <li>یک checkpoint تأیید انسانی قبل از شروع پیاده‌سازی تعریف کرده</li>
    <li>ترتیب کار را مشخص کرده: دامنه → API → پیاده‌سازی</li>
  </ul>
  <p>وقتی هوش مصنوعی ابتدا domain model را طراحی می‌کند، چند اتفاق مثبت می‌افتد: سؤال‌های خوب می‌پرسد («آیا یک Task می‌تواند به چند Project تعلق داشته باشد؟»)، inconsistency‌هایی را که شما ندیده‌اید پیدا می‌کند، و در نهایت کدی می‌نویسد که با نیازهای واقعی هماهنگ است نه با ظاهر اولیه.</p>
  <p><strong>الگوی ADR (Architecture Decision Record):</strong></p>
  <p>از هوش مصنوعی بخواهید برای هر تصمیم مهم معماری یک ADR کوتاه بنویسد:</p>
  <ul>
    <li>تصمیم چیست؟</li>
    <li>چرا این تصمیم گرفته شد؟</li>
    <li>گزینه‌های دیگر چه بودند و چرا رد شدند؟</li>
    <li>پیامدها و trade-off‌ها چیستند؟</li>
  </ul>
  <p>این ADRها همان «چرایی» هستند که در وایب‌کدینگ معمولاً از دست می‌رود — و همان چیزی که مهندس جدید برای فهمیدن سیستم نیاز دارد.</p>

  <div class="footnote-box" style="padding: 14px; border-radius: 10px; background: #FAF7F0; border: 1px solid #E4DDD2; font-size: 12px; margin-bottom: 20px;">ابزارهای پیشنهادی برای Domain-First Development: برای API Contract: OpenAPI Spec + Swagger UI. برای Domain Model: Event Storming (آنلاین با Miro)، یا ساده‌تر: یک فایل markdown با entity‌ها و قوانین. برای Mock API: MSW (Mock Service Worker) برای frontend، یا Prism CLI برای هر client. برای ADR: adr-tools CLI یا ساده‌تر یک فایل DECISIONS.md در ریشه پروژه.</div>

  <h2>نتیجه‌گیری: سرعت واقعی در طراحی درست است</h2>
  <p>توهم سرعت در وایب‌کدینگ UI-محور این است: «در ۲ ساعت MVP آماده است.» واقعیت این است: «در ۲ ساعت یک دمو آماده است که ۳ ماه بعد باید بازنویسی شود.»</p>
  <p>سرعت واقعی در طراحی درست نهفته است. یک هفته صرف تعریف domain model و API contract کردن، می‌تواند ماه‌ها از بازنویسی معماری را صرفه‌جویی کند. این سرمایه‌گذاری به نظر می‌رسد «آهسته» است — اما در افق ۶ ماه، سریع‌ترین مسیر به یک محصول پایدار است.</p>
  <p>هوش مصنوعی این تغییر رویکرد را تسریع می‌کند، نه مانع آن. یک prompt خوب که با دامنه شروع می‌کند، چند برابر بهتر از هزار prompt که با UI شروع می‌کند نتیجه می‌دهد. کلید این است که از هوش مصنوعی بخواهیم ابتدا <em>فکر کند</em>، سپس بسازد — نه برعکس.</p>
</div>
`;