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

Firebase Studio یک پیش نمایش ارائه می دهد که یک نمای زنده از برنامه شما در کنار ویرایشگر کد شما ارائه می دهد.

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

اگر از یک الگو استفاده می کنید، پیش نمایش ها اغلب از قبل برای شما پیکربندی شده اند. اگر پیش‌نمایش‌ها قبلاً در قالب شما تنظیم نشده‌اند، می‌توانید آنها را در فایل پیکربندی Nix پروژه پیکربندی کنید.

  1. از فضای کاری خود، .idx/dev.nix باز کنید.

    Firebase Studio به طور خودکار این فایل را هنگام ایجاد یک فضای کاری جدید تولید می کند و هر محیط پیش نمایش قابل اجرا را بر اساس الگوی انتخابی شما شامل می شود. اگر فایل در مخزن کد Firebase Studio شما نیست، آن را ایجاد کنید و سپس ویژگی idx.previews را روی true تنظیم کنید. سپس، همانطور که مثال زیر نشان می دهد، ویژگی های پیکربندی را اضافه کنید:

    { pkgs, ... }: {
    
      # NOTE: This is an excerpt of a complete Nix configuration example.
      # For more information about the dev.nix file in Firebase Studio, see
      # https://firebase.google.com/docs/studio/customize-workspace
    
      # 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";
            # Optionally, specify a directory that contains your web app
            # cwd = "app/client";
          };
          # The following object sets Android previews
          # Note that this is supported only on Flutter workspaces
          android = {
            manager = "flutter";
          };
        };
      };
    }
    

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

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

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

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

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

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

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

Firebase Studio به قابلیت‌های بارگذاری مجدد داغ چارچوب‌های زیرین (مانند npm run start و flutter hot-reload ) قلاب می‌کند تا یک حلقه توسعه داخلی ساده‌تر را به شما ارائه دهد. Firebase Studio انواع زیر را بارگذاری مجدد می کند:

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

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

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

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

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

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

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

پیش نمایش وب خود را با دیگران به اشتراک بگذارید

می‌توانید با فعال کردن دسترسی و سپس اشتراک‌گذاری پیوند مستقیم به پیش‌نمایش، پیش‌نمایش وب برنامه‌تان را برای بازخورد با دیگران به اشتراک بگذارید:

  1. در نوار ابزار پیش نمایش وب، روی تصویر یک لینک نماد نماد پیوند پیش‌نمایش را به اشتراک بگذارید ، در سمت راست نوار آدرس برای باز کردن منوی اشتراک‌گذاری.

  2. با استفاده از یکی از این گزینه‌ها به دیگران اجازه دسترسی به فضای کاری شما را بدهید:

    • عمومی کردن پیش‌نمایش : پیش‌نمایش فضای کاری خود را در دسترس عموم قرار دهید. این به هر کسی در اینترنت اجازه می‌دهد تا زمانی که فضای کاری شما فعال است و تا زمانی که دسترسی عمومی را خاموش نکنید، به سرور پیش‌نمایش در حال اجرا در فضای کاری شما دسترسی پیدا کند.

    • دسترسی به فضای کاری را مدیریت کنید فضای کاری خود را فقط با افرادی که می خواهید به آنها دسترسی داشته باشید به اشتراک بگذارید.

  3. برای کپی کردن پیوند مستقیم به پیش‌نمایش فضای کاری، کپی URL پیش‌نمایش را انتخاب کنید، سپس می‌توانید آن را برای کسانی که می‌خواهید بازخورد دریافت کنید ارسال کنید. همچنین می توانید از کد QR که به نظر می رسد برای باز کردن پیش نمایش خود در دستگاه تلفن همراه خود استفاده کنید.

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

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

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

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

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

  1. Firebase Studio باز کنید.
  2. روی نماد تنظیمات کلیک کنید.
  3. جستجو برای فایل ها: ذخیره خودکار .
  4. روی منوی کشویی کلیک کنید و خاموش را انتخاب کنید.

مراحل بعدی