Podgląd aplikacji

Projekt IDX umożliwia wyświetlenie podglądu Twojej pracy przez renderowanie podglądu na żywo aplikacji obok edytora kodu. Podglądy z internetu IDX renderują wbudowaną ramkę (iFrame) serwera WWW aplikacji i emulator Androida działający w chmurze.

Włączanie i konfigurowanie środowiska podglądu

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

1. Włącz podgląd w pliku konfiguracji .idx/dev.nix. IDX automatycznie generuje ten plik, gdy utworzysz nowy obszar roboczy, i uwzględni wszystkie 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 poniższym 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";
       };
       # 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 IDX znajdziesz na stronie Nix + IDX.

2. Przebuduj środowisko:

   • Uruchom polecenie Projekt IDX: twardy restart z palety poleceń (Cmd + Shift + P/Ctrl + Shift + P).
   • W powiadomieniu o zaktualizowaniu konfiguracji środowiska kliknij Utwórz ponownie środowisko.

   Gdy ponownie utworzysz środowisko po zmodyfikowaniu pliku dev.nix, w obszarze roboczym pojawi się panel podglądu z kartami Android i Sieć (w zależności od włączonych elementów). Odtworzenie środowiska może jednak trochę potrwać. Zamknij obszar roboczy i otwórz go ponownie w panelu IDX.

Ważne: aby wyświetlić podgląd aplikacji na osobnej karcie przeglądarki, kliknij ikonę Otwórz w nowym oknie na pasku narzędzi okna podglądu. Ten wyskakujący link jest też przydatny, gdy chcesz zaprezentować swoje postępy w pracy znajomemu lub współpracownikowi za pomocą udostępniania obszaru roboczego.

Korzystanie z podglądów aplikacji

IDX oferuje podglądy stron internetowych w Chrome i emulatorach Androida (w obszarach roboczych Flutter), które pozwalają zainstalować aplikację w środowisku podglądu. Dzięki temu można ją w pełni przetestować bezpośrednio z poziomu obszaru roboczego.

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

IDX łączy się z funkcjonowaniami bazowymi platform (np. npm run start i flutter hot-reload), które uruchamiają się z pamięci, co zapewnia ścisłą wewnętrzną pętlę podczas programowania. W tej sekcji omawiamy różne typy przeładowań, które pomogą Ci rozwiązać problemy, jeśli domyślne działanie IDX nie sprawdza się w Twoim przypadku.

• Automatyczne ponowne wczytywanie z pamięci: ponowne ładowanie z pamięci jest wykonywane automatycznie przy zapisywaniu pliku. Czasami jest to określane jako Hot Module Replacement (czyli HMR). Aktualizacje aplikacji „na gorąco” bez ponownego wczytywania strony (w przypadku aplikacji internetowych) lub bez ponownego uruchamiania i ponownego instalowania aplikacji (emulatory). To podejście sprawdza się w celu utrzymania stanu aplikacji, ale czasem może nie działać zgodnie z oczekiwaniami.

• Ręczne ponowne pełne ładowanie: ta opcja odpowiada odświeżeniu strony (w przypadku aplikacji internetowych) lub ponownym uruchomieniu aplikacji (w przypadku emulatorów). Zalecamy odświeżanie pełnego kodu, by wychwycić istotne zmiany w kodzie źródłowym, np. podczas refaktoryzacji dużych fragmentów kodu.

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

Wszystkie opcje ponownego wczytywania są dostępne za pomocą paska narzędzi podglądu lub palety poleceń (Cmd+Shift+P na Macu lub Ctrl+Shift+P w ChromeOS, Windows lub Linux) w kategorii IDX.

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

1. Kliknij ikonę odświeżania, aby odświeżyć stronę. Wymusza to ponowne załadowanie do końca. Jeśli chcesz użyć innego rodzaju odświeżenia, kliknij strzałkę obok ikony ponownego ładowania, aby rozwinąć menu.

2. Wybierz z menu odpowiednią opcję odświeżania: Hot Załaduj ponownie, Pełne ponowne załadowanie lub Twarde ponowne uruchomienie.

   

Skonfiguruj automatyczne zapisywanie i ładowanie z pamięci

Domyślnie IDX automatycznie zapisuje Twoją pracę 1 sekundę po tym, jak przestaniesz pisać, a w ten sposób automatycznie ładują się ponownie z pamięci. Jeśli chcesz, aby IDX zapisywał Twoją pracę z inną częstotliwością, zmień ustawienie automatycznego zapisywania. Możesz też wyłączyć automatyczne zapisywanie.

Skonfiguruj automatyczne zapisywanie

1. Otwórz projekt IDX.
2. Kliknij ikonę Ustawienia. Pojawi się okno Ustawienia.
3. Wyszukaj Files: Auto Save (Pliki: automatyczne zapisywanie) i sprawdź, czy pole jest ustawione na „afterOpóźnienie”.
4. Wyszukaj Pliki: opóźnienie automatycznego zapisywania. Pojawi się pole opóźnienia automatycznego zapisu.
5. Wpisz nowy odstęp czasu automatycznego zapisywania wyrażony w milisekundach. Zmiany w Twoich informacjach są teraz zapisywane automatycznie na podstawie nowego ustawienia opóźnienia automatycznego zapisywania.

Wyłącz autozapis

1. Otwórz projekt 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.