پیش نمایش برنامه شما

Project IDX به شما امکان می دهد با ارائه یک نمای زنده از برنامه خود در کنار ویرایشگر کد، پیش نمایش کار خود را مشاهده کنید. پیش نمایش های وب IDX یک فریم درون خطی (iFrame) از وب سرور برنامه و یک شبیه ساز اندروید مبتنی بر ابر ارائه می دهد.

محیط پیش نمایش خود را فعال و پیکربندی کنید

برای پیش نمایش برنامه خود در فضای کاری خود، باید محیط پیش نمایش خود را پیکربندی کنید.

  1. پیش نمایش ها را در فایل پیکربندی .idx/dev.nix خود فعال کنید. IDX هنگامی که یک فضای کاری جدید ایجاد می کنید به طور خودکار این فایل را تولید می کند و شامل هر محیط پیش نمایش قابل اجرا بر اساس الگوی انتخابی شما می شود. اگر فایل در مخزن کد IDX شما نیست، آن را ایجاد کنید. مشخصه idx.previews را روی true تنظیم کنید و ویژگی های پیکربندی را اضافه کنید، همانطور که در مثال زیر نشان داده شده است:

    { pkgs, ... }: {

# NOTE: This is an excerpt of a complete Nix configuration example.
# For more information about the dev.nix file in IDX, see
# https://developers.google.com/idx/guides/customize-idx-env

# Enable previews and customize configuration
idx.previews = {
  enable = true;
  previews = {
    # The following object sets web previews
    web = {
      command = [
        "npm"
        "run"
        "start"
        "--"
        "--port"
        "$PORT"
        "--host"
        "0.0.0.0"
        "--disable-host-check"
      ];
      manager = "web";
    };
    # The following object sets Android previews
    # Note that this is supported only on FLutter workspaces

    android = {
      manager = "flutter";
    };
  };
};

    برای فهرست کامل ویژگی‌های Nix در IDX، به Nix + IDX مراجعه کنید.

  2. محیط خود را بازسازی کنید:

    • دستور Project IDX: Hard restart را از پالت فرمان ( Cmd+Shift+P / Ctrl+Shift+P ) اجرا کنید.
    • از اعلان به روز شده تنظیمات محیط، روی بازسازی محیط کلیک کنید.

    هنگامی که پس از اصلاح فایل dev.nix خود، محیط را بازسازی می‌کنید، پانل پیش‌نمایش در فضای کاری شما ظاهر می‌شود که بسته به آنچه فعال کرده‌اید، تب‌های اندروید و وب را نشان می‌دهد. با این حال، ممکن است لازم باشد مدتی صبر کنید تا محیط بازسازی شود. سعی کنید فضای کاری را ببندید و سپس آن را از داشبورد IDX دوباره باز کنید.

از پیش نمایش برنامه ها استفاده کنید

IDX پیش‌نمایش‌های وب را در شبیه‌سازهای Chrome و Android (در فضاهای کاری flutter) ارائه می‌کند که برنامه شما را در محیط پیش‌نمایش نصب می‌کنند، بنابراین می‌توانید آن را به طور کامل، از انتهای تا انتها، مستقیماً از فضای کاری خود آزمایش کنید.

بازخوانی پیش نمایش ها برای وب و اندروید

IDX به قابلیت‌های بارگذاری مجدد داغ فریمورک‌های زیرین (مانند npm run start و flutter hot-reload ) متصل می‌شود تا یک حلقه توسعه درونی فشرده را به شما ارائه دهد. این بخش انواع مختلف بارگیری‌ها را پوشش می‌دهد تا به شما کمک کند اگر رفتار پیش‌فرض در IDX برای مورد استفاده شما خوب کار نمی‌کند، عیب‌یابی کنید.

  • بارگذاری مجدد خودکار : بارگذاری مجدد داغ به طور خودکار هنگامی که یک فایل را ذخیره می کنید انجام می شود. گاهی اوقات به عنوان Hot Module Replacement (یا HMR) شناخته می شود، یک بارگذاری مجدد داغ برنامه شما را بدون بارگیری مجدد صفحه (برای برنامه های وب) یا بدون راه اندازی مجدد یا نصب مجدد برنامه (برای شبیه سازها) به روز می کند. این رویکرد برای حفظ حالت زنده برنامه شما عالی است، اما ممکن است گاهی اوقات آنطور که در نظر گرفته شده کار نکند.

  • بارگذاری مجدد دستی کامل : این گزینه معادل به روز رسانی صفحه (برای برنامه های وب) یا راه اندازی مجدد برنامه (برای شبیه سازها) است. توصیه می کنیم از یک بارگذاری مجدد کامل برای ثبت تغییرات قابل توجه در کد منبع خود استفاده کنید، مانند زمانی که تکه های بزرگی از کد را دوباره فاکتور می کنید.

  • راه اندازی مجدد دستی سخت : این گزینه یک راه اندازی مجدد کامل سیستم پیش نمایش IDX را انجام می دهد که شامل توقف و راه اندازی مجدد وب سرور برنامه شما می شود.

همه گزینه‌های بارگیری مجدد با استفاده از نوار ابزار پیش‌نمایش یا پالت فرمان ( Cmd+Shift+P در Mac یا Ctrl+Shift+P در ChromeOS، Windows یا Linux)، در دسته IDX در دسترس هستند.

برای استفاده از نوار ابزار پیش نمایش، مراحل زیر را دنبال کنید:

  1. برای بازخوانی صفحه، روی نماد بارگذاری مجدد کلیک کنید. این یک بارگیری کامل را مجبور می کند. برای نوع دیگری از تازه‌سازی، روی فلش کنار نماد بارگیری مجدد کلیک کنید تا منو بزرگ شود.

  2. گزینه refresh مورد نظر خود را از منو انتخاب کنید: Hot Reload ، Full Reload یا Hard Restart .

    نوار ابزار پیش نمایش در بالای پانل پیش نمایش قرار دارد

ذخیره خودکار و بارگذاری مجدد داغ را پیکربندی کنید

به طور پیش‌فرض، IDX کار شما را یک ثانیه پس از توقف تایپ ذخیره می‌کند و بارگذاری مجدد خودکار را آغاز می‌کند. اگر می خواهید IDX کار شما را در فاصله زمانی متفاوت ذخیره کند، تنظیمات ذخیره خودکار را تغییر دهید. همچنین می توانید ذخیره خودکار را خاموش کنید.

ذخیره خودکار را پیکربندی کنید

  1. Project IDX را باز کنید.
  2. روی نماد تنظیمات کلیک کنید. پنجره تنظیمات ظاهر می شود.
  3. جستجوی فایل‌ها: ذخیره خودکار و بررسی اینکه فیلد روی «afterDelay» تنظیم شده است.
  4. جستجوی فایل‌ها: تأخیر ذخیره خودکار قسمت Auto Save Delay ظاهر می شود.
  5. یک بازه تأخیر ذخیره خودکار جدید، که بر حسب میلی ثانیه بیان می شود، وارد کنید. تغییرات کار شما اکنون به طور خودکار بر اساس تنظیم تأخیر ذخیره خودکار جدید ذخیره می شود.

ذخیره خودکار را خاموش کنید

  1. Project IDX را باز کنید.
  2. روی نماد تنظیمات کلیک کنید. پنجره تنظیمات ظاهر می شود.
  3. جستجو برای فایل ها: ذخیره خودکار .
  4. روی منوی کشویی کلیک کنید و خاموش را انتخاب کنید. ذخیره خودکار اکنون غیرفعال است.