Podgląd aplikacji

Firebase Studio oferuje kilka sposobów wyświetlania podglądu i testowania aplikacji podczas jej tworzenia. Obejmuje to korzystanie z App Prototyping agent i wbudowanego narzędzia do wyświetlania podglądu w przeglądarce oraz narzędzi do wyświetlania podglądu w przeglądarce i na Androidzie 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 plik .idx/dev.nix.

   Firebase Studio automatycznie generuje ten plik podczas tworzenia nowego obszaru roboczego i uwzględnia w nim wszystkie odpowiednie środowiska podglądu na podstawie wybranego szablonu. Jeśli pliku nie ma w repozytorium Firebase Studio kodu, 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. Ponownie skompiluj środowisko:

   • W palecie poleceń (Cmd+Shift+P/Ctrl+Shift+P) uruchom polecenie Firebase Studio: Hard restart.
   • W powiadomieniu Environment config updated (Zaktualizowano konfigurację środowiska) kliknij Rebuild environment (Ponownie skompiluj środowisko).

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

Korzystanie z podglądu aplikacji

Firebase Studio oferuje podgląd w przeglądarce w emulatorach Chrome i Androida w obszarach roboczych Flutter, które instalują aplikację w środowisku podglądu. Dzięki temu możesz w pełni przetestować aplikację bezpośrednio z obszaru roboczego.

Odświeżanie podglądu w przeglądarce i na Androidzie

Firebase Studio korzysta z funkcji gorącego przeładowania podstawowych platform (takich jak npm run start i flutter hot-reload), aby zapewnić Ci uproszczony wewnętrzny cykl programowania. Firebase Studio zapewnia te rodzaje przeładowania:

• Automatyczne szybkie przeładowanie: szybkie przeładowanie jest wykonywane automatycznie po zapisaniu pliku. Szybkie przeładowanie, czasami nazywane szybką wymianą modułów (lub HMR), aktualizuje aplikację bez przeładowywania strony (w przypadku aplikacji internetowych) lub bez ponownego uruchamiania lub ponownej instalacji aplikacji (w przypadku emulatorów). To podejście jest przydatne do zachowania stanu aplikacji na żywo, ale nie zawsze może działać zgodnie z oczekiwaniami.

• Ręczne pełne przeładowanie: 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 przeładowania, aby uwzględnić 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's, co obejmuje zatrzymanie i ponowne uruchomienie serwera WWW aplikacji.

Wszystkie opcje przeładowania są dostępne na pasku narzędzi podglądu lub w palecie poleceń (Cmd+Shift+P na Macu lub Ctrl+Shift+P w ChromeOS, Windowsie lub Linuxie) w kategorii Firebase Studio.

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

1. Aby odświeżyć stronę, kliknij ikonę Reload (Przeładuj). Spowoduje to pełne przeładowanie. Aby wybrać inny rodzaj odświeżenia, kliknij strzałkę obok ikony przeładowania, aby rozwinąć menu.

2. W menu wybierz odpowiednią opcję odświeżenia: Hot Reload (Szybkie przeładowanie), Full Reload (Pełne przeładowanie) lub Hard Restart (Twarde ponowne uruchomienie).

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

Aby udostępnić podgląd aplikacji w przeglądarce innym osobom w celu uzyskania opinii, 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ę Share Preview Link (Udostępnij link do podglądu) po prawej stronie paska adresu, aby otworzyć menu udostępniania.

2. Zezwól innym osobom na dostęp do Twojego obszaru roboczego, korzystając z jednej z tych opcji:

   • Make preview public (Udostępnij podgląd): 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 gdy obszar roboczy jest aktywny i dopóki nie wyłączysz dostępu publicznego.

   • Manage workspace access (Zarządzaj dostępem do obszaru roboczego). Udostępnij obszar roboczy tylko osobom, którym chcesz przyznać dostęp.

3. Kliknij Copy preview URL (Skopiuj adres URL podglądu), aby skopiować bezpośredni link do podglądu obszaru roboczego, który możesz następnie wysłać osobom, 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 przeładowania

Domyślnie Firebase Studio automatycznie zapisuje Twoją pracę sekundę po tym, jak przestaniesz pisać, co powoduje automatyczne szybkie przeładowanie. Jeśli chcesz Firebase Studio zapisać swoją pracę w innym odstępie czasu, zmień ustawienie automatycznego zapisywania. Możesz też wyłączyć automatyczne zapisywanie.

Odłączenie backendu podglądu

Możesz bezpiecznie zignorować komunikat „Preview backend disconnected” (Odłączono backend podglądu).

Dalsze kroki

• Publikowanie za pomocą Firebase.
• Monitorowanie aplikacji.