Podgląd aplikacji

Firebase Studio udostępnia podgląd, który renderuje podgląd na żywo aplikacji obok edytora kodu.

Włączanie i konfigurowanie środowiska podglądu

Jeśli używasz szablonu, podglądy są często już skonfigurowane. Jeśli w szablonie nie są jeszcze skonfigurowane podglądy, możesz je skonfigurować w pliku konfiguracji Nix projektu.

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

   Firebase Studio automatycznie generuje ten plik podczas tworzenia nowego obszaru roboczego i zawiera wszystkie odpowiednie środowiska podglądu na podstawie wybranego szablonu. Jeśli pliku nie ma w Twoim repozytorium kodu Firebase Studio, utwórz go, a następnie 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: twardy restart.
   • W powiadomieniu Konfiguracja środowiska została zaktualizowana kliknij Ponownie skompiluj środowisko.

   Gdy po zmodyfikowaniu pliku dev.nix ponownie zbudujesz środowisko, w Twoim obszarze roboczym pojawi się panel podglądu z kartą Android lub Sieć (lub obie te karty), w zależności od tego, co masz włączone.

Korzystanie z podglądów aplikacji

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

Odświeżanie podglądu na stronie internetowej i na Androidzie

Firebase Studio korzysta z funkcji szybkiego przeładowania w ramach frameworków (takich jak npm run start i flutter hot-reload), aby zapewnić Ci usprawniony wewnętrzny cykl programowania. Firebase Studio udostępnia te typy odświeżania:

• Automatyczne szybkie wczytywanie: szybkie wczytywanie jest wykonywane automatycznie po zapisaniu pliku. Czasem nazywa się to zastąpienie modułu na gorąco (HMR). Ta metoda odświeżania aktualizuje aplikację bez ponownego wczytywania strony (w przypadku aplikacji internetowych) lub bez ponownego uruchamiania lub ponownego instalowania aplikacji (w przypadku emulatorów). To podejście jest przydatne do zachowania stanu aplikacji, ale może nie działać zgodnie z oczekiwaniami.

• Ręczne pełne odświeżenie: ta opcja jest równoważna odświeżeniu strony (w przypadku aplikacji internetowych) lub ponownemu uruchomieniu aplikacji (w przypadku emulatorów). Zalecamy pełne przeładowanie, aby uwzględnić istotne zmiany w kodzie źródłowym, np. podczas refaktoryzacji dużych fragmentów kodu.

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

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

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

1. Kliknij ikonę Odśwież, aby odświeżyć stronę. Spowoduje to pełne ponowne załadowanie. Aby odświeżyć stronę w inny sposób, kliknij strzałkę obok ikony ponownego ładowania, aby rozwinąć menu.

2. W menu wybierz opcję odświeżania: Odśwież szybko, Odśwież całkowicie lub Twardy restart.

Udostępnianie podglądu w przeglądarce innym osobom

Aby uzyskać opinie na temat podglądu aplikacji w przeglądarce, możesz udostępnić go innym, umożliwiając im dostęp, a następnie udostępniając bezpośredni link do podglądu:

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

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

   • Upublicznij podgląd: udostępnij podgląd obszaru roboczego publicznie. Dzięki temu każdy w internecie może uzyskać dostęp do serwera wersji testowej działającego w Twoim obszarze roboczym podczas gdy Twój obszar roboczy jest aktywny i dopóki nie wyłączysz dostępu publicznego.

   • Zarządzaj dostępem do Workspace. Udostępniaj obszar roboczy tylko tym osobom, którym chcesz przyznać dostęp.

     .

3. Wybierz Kopiuj URL podglądu, aby skopiować bezpośredni link do podglądu Workspace, który możesz wysłać do osób, od których chcesz uzyskać opinię. Możesz też użyć kodu QR, który się pojawi, aby otworzyć podgląd na urządzeniu mobilnym.

Konfigurowanie automatycznego zapisywania i szybkiego przeładowywania

Domyślnie Firebase Studio automatycznie zapisuje Twoją pracę po 1 sekundzie od zaprzestania pisania, powodując automatyczne ponowne wczytywanie. Jeśli chcesz, aby Firebase Studio zapisywała Twoją pracę w innych odstępach czasu, zmień ustawienie automatycznego zapisywania. Możesz też wyłączyć automatyczne zapisywanie.

Dalsze kroki

• Opublikuj za pomocą Firebase.
• Monitoruj aplikację.