Podgląd aplikacji

Projekt IDX umożliwia wyświetlanie podglądu pracy przez renderowanie widoku na żywo aplikacji obok edytora kodu. Podglądy IDX renderują wbudowaną ramkę (iFrame) serwera WWW aplikacji oraz emulator Androida w chmurze.

Włączanie i konfigurowanie środowiska podglądu

Aby wyświetlić podgląd aplikacji na obszarze roboczym, musisz skonfigurować środowisko podglądu.

1. Włącz podgląd w pliku konfiguracji .idx/dev.nix. IDX automatycznie generuje ten plik podczas tworzenia nowego obszaru roboczego i uwzględnia odpowiednie środowiska podglądu na podstawie wybranego szablonu. Jeśli pliku nie ma w repozytorium kodu IDX, utwórz go. Ustaw atrybut idx.previews na true i 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 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";
           # 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 pliku IDX znajdziesz w artykule Nix + IDX.

2. Odbuduj środowisko:

   • Uruchom polecenie Project IDX: Hard restart (Projekt IDX): z palety poleceń (Cmd + Shift + P/Ctrl + Shift + P).
   • W powiadomieniu Aktualizacja konfiguracji środowiska kliknij Ponownie utwórz środowisko.

   Gdy ponownie kompilujesz środowisko po zmodyfikowaniu pliku dev.nix, w obszarze roboczym pojawi się panel podglądu z kartami Android i Internet (w zależności od tego, co zostało włączone). Odbudowanie środowiska może jednak chwilę potrwać. Spróbuj zamknąć obszar roboczy, a następnie otwórz go ponownie z panelu IDX.

Ważna informacja: aby wyświetlić podgląd aplikacji w osobnej karcie przeglądarki, kliknij ikonę otwórz w nowym oknie na pasku narzędzi okna podglądu. Ten link do okna wyskakującego jest też przydatny do prezentowania postępów w pracy znajomemu lub współpracownikowi za pomocą udostępniania obszaru roboczego.

Korzystanie z podglądów aplikacji

IDX oferuje podgląd w internecie w emulatorach Chrome i Androida (w obszarach roboczych Fluttera), które instalują aplikację w środowisku podglądu, dzięki czemu możesz przetestować ją w całości, od początku do końca, bezpośrednio w obszarze roboczym.

Odświeżaj podgląd w przeglądarce i na urządzeniach z Androidem

IDX korzysta z funkcji szybkiego przeładowania w podstawowych frameworkach (takich jak npm run start i flutter hot-reload), aby zapewnić ścisłą wewnętrzną pętlę programistyczną. W tej sekcji opisujemy różne typy ponownego wczytywania, aby ułatwić Ci rozwiązywanie problemów, gdy domyślne działanie indeksu IDX nie jest odpowiednie w Twoim przypadku.

• Automatyczne szybkie wczytywanie: szybkie wczytywanie jest wykonywane automatycznie po zapisaniu pliku. Funkcja Hot Module Replacement (Hot Module Replacement) (Hot Module Replacement) (Hot Module Replacement) (Hot Module Replacement) – w przypadku aplikacji internetowych (w przypadku aplikacji internetowych) i w przypadku emulatorów aktualizuje się z pamięcią ponownie bez ponownego wczytywania strony (w przypadku aplikacji internetowych). To podejście doskonale sprawdza się w przypadku zachowania stanu aplikacji, ale czasami może nie 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 wykorzystanie pełnego ponownego załadowania, aby przechwytywać istotne zmiany w kodzie źródłowym, np. przy refaktoryzacji dużych fragmentów kodu.

• Ręczny twardy reset: ta opcja powoduje całkowite ponowne uruchomienie systemu wersji próbnej IDX, co obejmuje zatrzymanie i ponowne uruchomienie serwera WWW aplikacji.

Wszystkie opcje ponownego załadowania są dostępne na pasku narzędzi podglądu lub na palecie poleceń (Cmd+Shift+P na Macu lub Ctrl+Shift+P w ChromeOS, Windowsie i Linuksie) w kategorii IDX.

Aby użyć paska narzędzi podglądu, wykonaj te czynności:

1. Aby odświeżyć stronę, kliknij ikonę odświeżania. 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 przesłać podgląd aplikacji w przeglądarce, 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ę 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 Twojego obszaru roboczego, korzystając z jednej z tych opcji:

   • Opcja A: ustaw podgląd obszaru roboczego jako publiczny, wybierając Ustaw podgląd jako publiczny. Dzięki temu każdy w internecie może uzyskać dostęp do serwera podglądu w Twoim obszarze roboczym podczas jego aktywnego stanu, dopóki nie wyłączysz dostępu publicznego.

   • Opcja B. Udostępniaj swój obszar roboczy tylko tym osobom, którym chcesz przyznać dostęp, wybierając Zarządzaj dostępem do obszaru roboczego.

     Ostrzeżenie: dzięki temu użytkownicy będą mogli wprowadzać zmiany w kodzie i uzyskiwać dostęp do innych informacji prywatnych, takich jak tokeny uwierzytelniania zapisane w obszarze roboczym. Udostępniaj informacje tylko zaufanym osobom. Więcej informacji znajdziesz w artykule Udostępnianie obszaru roboczego.

3. Kliknij Kopiuj URL podglądu, aby skopiować bezpośredni link do podglądu obszaru roboczego, który możesz potem wysłać do osób, które chcesz uzyskać opinię.

Skonfiguruj automatyczne zapisywanie i ponowne wczytywanie „na gorąco”

Domyślnie IDX automatycznie zapisuje efekty Twojej pracy po 1 sekundzie od momentu, gdy przestaniesz pisać, i uruchamia automatyczne odświeżanie strony z pamięci. Jeśli chcesz, aby IDX zapisywała Twoją pracę w innym odstępie czasu, zmień ustawienie automatycznego zapisywania. Możesz też wyłączyć automatyczne zapisywanie.

Skonfiguruj automatyczne zapisywanie

1. Otwórz Project IDX.
2. Kliknij ikonę Ustawienia. Pojawi się okno Ustawienia.
3. Wyszukaj Files: Auto Save (Pliki: automatyczne zapisywanie) i sprawdź, czy pole jest ustawione na „afterDelay” (poOpóźnienie).
4. Wyszukaj Pliki: opóźnienie automatycznego zapisywania. Pojawi się pole Opóźnienie automatycznego zapisu.
5. Wpisz nowy przedział opóźnienia automatycznego zapisywania w milisekundach. Zmiany dotyczące miejsca pracy są teraz zapisywane automatycznie zgodnie z nowym ustawieniem opóźnienia automatycznego zapisywania.

Wyłącz automatyczne zapisywanie

1. Otwórz Project IDX.
2. Kliknij ikonę Ustawienia. Pojawi się okno Ustawienia.
3. Wyszukaj Pliki: automatyczne zapisywanie.
4. Kliknij menu i wybierz wyłącz. Automatyczne zapisywanie jest teraz wyłączone.