Podgląd aplikacji

Firebase Studio udostępnia kilka sposobów na wyświetlanie podglądu i testowanie aplikacji podczas jej tworzenia. Obejmuje to korzystanie z App Prototyping agentoraz wbudowanego podglądu w przeglądarce, a także podglądów w przeglądarce i na Androida dostępnych w obszarach roboczych Firebase Studio.

Włączanie i konfigurowanie środowiska podglądu

Jeśli używasz szablonu lub generujesz aplikację za pomocą App Prototyping agent, podglądy są często już skonfigurowane. Jeśli podglądy nie są jeszcze skonfigurowane w szablonie, możesz je skonfigurować w pliku konfiguracyjnym Nix projektu.

  1. W obszarze roboczym otwórz .idx/dev.nix.

    Firebase Studio automatycznie generuje ten plik podczas tworzenia nowego obszaru roboczego i zawiera on wszystkie odpowiednie środowiska podglądu na podstawie wybranego szablonu. Jeśli pliku nie ma w Firebase Studiorepozytorium kodu, utwórz go, a potem ustaw atrybut idx.previews na true. Następnie dodaj atrybuty konfiguracji, jak pokazano w tym przykładzie:

    { 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";
      };
    };
  };
}

    Pełną listę atrybutów Nix w Firebase Studio znajdziesz w artykule Nix + Firebase Studio.

  2. Odbuduj środowisko:

    • Na palecie poleceń (Cmd+Shift+P/Ctrl+Shift+P) uruchom polecenie Firebase Studio: Hard restart.
    • W powiadomieniu Zaktualizowano konfigurację środowiska kliknij Przebuduj środowisko.

    Gdy po zmodyfikowaniu pliku dev.nix ponownie utworzysz środowisko, w obszarze roboczym pojawi się panel podglądu z kartami Android i Web lub z jedną z nich, w zależności od tego, co zostało włączone.

Korzystanie z podglądów aplikacji

Firebase Studio oferuje podgląd w internecie w emulatorach Chrome i Androida w przestrzeniach roboczych Fluttera, które instalują aplikację w środowisku podglądu. Dzięki temu możesz w pełni przetestować aplikację od początku do końca bezpośrednio w obszarze roboczym.

Odświeżanie podglądów w przypadku internetu i Androida

Firebase Studio korzysta z funkcji szybkiego przeładowania podstawowych platform (takich jak npm run start i flutter hot-reload), aby zapewnić Ci usprawniony wewnętrzny cykl rozwoju. Firebase Studio oferuje następujące typy doładowań:

  • Automatyczne szybkie przeładowanie: szybkie przeładowanie jest wykonywane automatycznie po zapisaniu pliku. Czasami nazywa się to Hot Module Replacement (HMR). Szybkie przeładowanie aktualizuje aplikację bez ponownego wczytywania strony (w przypadku aplikacji internetowych) lub bez ponownego uruchamiania lub instalowania aplikacji (w przypadku emulatorów). To podejście jest przydatne do zachowania stanu aplikacji, ale nie zawsze działa zgodnie z oczekiwaniami.

  • Ręczne pełne ponowne wczytanie: ta opcja jest odpowiednikiem odświeżenia strony (w przypadku aplikacji internetowych) lub ponownego uruchomienia aplikacji (w przypadku emulatorów). Zalecamy używanie pełnego ponownego wczytywania, aby rejestrować istotne zmiany w kodzie źródłowym, np. podczas refaktoryzacji dużych fragmentów kodu.

  • Ręczne twarde ponowne uruchomienie: ta opcja powoduje całkowite ponowne uruchomienie systemu podglądu Firebase Studio, co obejmuje zatrzymanie i ponowne uruchomienie serwera WWW aplikacji.

Wszystkie opcje ponownego wczytywania są dostępne na pasku narzędzi podglądu lub na palecie poleceń (Cmd+Shift+P na Macu lub Ctrl+Shift+P na urządzeniach z ChromeOS, Windows lub Linux) w kategorii Firebase Studio.

Aby użyć paska narzędzi podglądu:

  1. Aby odświeżyć stronę, kliknij ikonę Ponownie załaduj. Spowoduje to pełne ponowne załadowanie. Aby wybrać inny typ odświeżania, kliknij strzałkę obok ikony ponownego ładowania, aby rozwinąć menu.

  2. Wybierz w menu opcję odświeżania: Hot Reload, Full Reload lub Hard Restart.

Udostępnianie podglądu internetowego innym osobom

Możesz udostępnić podgląd internetowy aplikacji innym osobom, aby uzyskać od nich opinię. W tym celu włącz dostęp, a następnie udostępnij bezpośredni link do podglądu:

  1. Na pasku narzędzi podglądu w przeglądarce kliknij ikonę obraz ikony linku, Udostępnij link do podglądu po prawej stronie paska adresu, aby otworzyć menu udostępniania.

  2. Zezwól innym użytkownikom na dostęp do Twojej przestrzeni roboczej, korzystając z jednej z tych opcji:

    • Udostępnij podgląd publicznie: udostępnij podgląd obszaru roboczego publicznie. Dzięki temu każdy użytkownik internetu może uzyskać dostęp do serwera podglądu działającego w Twoim obszarze roboczym dopóki obszar roboczy jest aktywny i dopóki nie wyłączysz dostępu publicznego.

    • Zarządzanie dostępem do obszaru roboczego Udostępniaj obszar roboczy tylko osobom, którym chcesz przyznać dostęp.

  3. Kliknij Skopiuj URL podglądu, aby skopiować bezpośredni link do podglądu przestrzeni roboczej. Możesz go następnie wysłać do osób, od których chcesz uzyskać opinię. Możesz też użyć wyświetlanego kodu QR, aby otworzyć podgląd na urządzeniu mobilnym.

Konfigurowanie automatycznego zapisywania i szybkiego ponownego wczytywania

Domyślnie Firebase Studio automatycznie zapisuje Twoją pracę sekundę po tym, jak przestaniesz pisać, co powoduje automatyczne gorące przeładowania. Jeśli chcesz zapisywać pracę w innych odstępach czasu, zmień ustawienie automatycznego zapisywania.Firebase Studio Możesz też wyłączyć automatyczne zapisywanie.

Konfigurowanie automatycznego zapisywania

  1. Otwórz Firebase Studio.
  2. Kliknij ikonę Ustawienia.
  3. Wyszukaj Files: Auto Save i sprawdź, czy pole jest ustawione na `afterDelay`.
  4. Wyszukaj Pliki: automatyczne zapisywanie Opóźnienie.
  5. Wpisz nowy interwał opóźnienia automatycznego zapisywania w milisekundach. Zmiany w Twojej pracy są teraz automatycznie zapisywane na podstawie nowego ustawienia opóźnienia automatycznego zapisywania.

Wyłącz automatyczne zapisywanie

  1. Otwórz Firebase Studio.
  2. Kliknij ikonę Ustawienia.
  3. Wyszukaj Pliki: automatyczne zapisywanie.
  4. Kliknij menu i wybierz wyłączone.

Podgląd backendu został odłączony

Możesz zignorować komunikat „Podgląd backendu odłączony”.

Dalsze kroki