Pierwsze kroki z projektem IDX

Czytaj dalej, aby poznać podstawy korzystania z projektu IDX.

Zanim zaczniesz

Zanim zaczniesz, być może musisz włączyć w przeglądarce pliki cookie innych firm. Project IDX w większości przeglądarek wymaga plików cookie innych firm do uwierzytelniania obszarów roboczych.

Chrome

1. Otwórz Ustawienia.
2. Otwórz kartę Prywatność i bezpieczeństwo.
3. Upewnij się, że opcja Zezwalaj na wszystkie pliki cookie jest włączona.
4. Otwórz idx.google.com.
5. Kliknij ikonę widoczności na pasku adresu visibility_off, aby otworzyć panel Ochrona przed śledzeniem. Włącz ustawienie Pliki cookie innych firm, aby tymczasowo zezwolić na pliki cookie innych firm. Włącza to obsługę plików cookie w IDX przez 90 dni.

Safari

1. Otwórz Safari > Ustawienia...
2. Wyłącz te ustawienia:
   • Zaawansowane > Blokuj wszystkie pliki cookie
   • Prywatność > Zapobieganie śledzeniu w witrynach
3. Otwórz idx.google.com.

Firefox

W przeglądarce Firefox nie musisz włączać plików cookie innych firm. Wejdź na idx.google.com.

Opera

1. Otwórz idx.google.com.
2. Otwórz menu i kliknij Ustawienia.
3. Otwórz sekcję Prywatność i bezpieczeństwo, a potem rozwiń opcję Pliki cookie innych firm.
4. Wybierz Blokuj pliki cookie innych firm w trybie incognito lub Zezwalaj na pliki cookie innych firm.
5. Otwórz idx.google.com.

Łuk

1. Otwórz stronę arc://settings.
2. Otwórz sekcję Prywatność i bezpieczeństwo, a potem rozwiń opcję Pliki cookie innych firm.
3. Wybierz Blokuj pliki cookie innych firm w trybie incognito lub Zezwalaj na pliki cookie innych firm.
4. Otwórz idx.google.com.

Merida Waleczna

W przypadku Brave nie musisz włączać plików cookie innych firm. Wejdź na idx.google.com.

Utwórz obszar roboczy

Obszar roboczy w IDX to środowisko programistyczne, które zawiera wszystko, czego potrzebujesz do stworzenia aplikacji. Zawiera on Twój kod, edytor kodu (z wtyczkami odpowiednimi do Twojego projektu) oraz łańcuchy narzędzi, które umożliwiają tworzenie aplikacji. Działa to podobnie do tworzenia nowego projektu w lokalnym środowisku programistycznym pulpitu, z tym że to cały komputer i system operacyjny są już skonfigurowane i przeznaczone wyłącznie do tworzenia aplikacji.

Obszary robocze IDX projektu są zoptymalizowane tak, aby zawierały 1 bazę kodu naraz, co pozwala odizolować od siebie środowiska i zależności systemu na poziomie różnych aplikacji.

Jeśli tworzysz nową aplikację, użyj szablonów zarządzanych obszarów roboczych w IDX, aby szybko rozpocząć pracę. Możesz też zaimportować istniejące bazy kodu aplikacji do IDX.

Ważne: liczba obszarów roboczych, które możesz utworzyć, jest ograniczona. Jeśli masz profil dewelopera w Google Play, możesz utworzyć maksymalnie 5 obszarów roboczych. Aby utworzyć profil dewelopera w Google Play bezpośrednio w IDX po osiągnięciu limitu obszaru roboczego, w powiadomieniu w panelu szablonów kliknij Dokończ konfigurację.

Aby utworzyć nowy obszar roboczy, wykonaj te czynności:

• 
• 
• 
• 

1. Otwórz Projekt IDX.

2. Przy pierwszym otwarciu IDX pojawi się prośba o przeczytanie i zaakceptowanie warunków korzystania z usług Google, generatywnej AI oraz pakietu Android SDK. Możesz też wyrazić zgodę na powiadomienia o aktualizacjach usługi i ogłoszenia lub badania opinii użytkowników, aby ulepszać nasze usługi. Wybierz opcje, które najbardziej Ci odpowiadają. Klikaj podane linki, aby zapoznać się z warunkami korzystania z usługi, a następnie wybierz opcję ich zaakceptowania i kliknij Dalej. Następnie możesz włączyć funkcje AI przy pierwszym użyciu IDX lub wyłączyć je, klikając Nie w tej chwili (w każdej chwili możesz je włączyć później). Jeśli włączysz je na tym ekranie, przeczytaj uwagę na temat AI i prywatności, a następnie kliknij Dalej, aby zachować ustawienia, lub Wstecz, aby wyłączyć funkcje AI.

3. Wybierz typ obszaru roboczego, który chcesz utworzyć:

   • Szablony: utwórz obszar roboczy wstępnie wypełniony podstawowymi plikami i pakietami, których możesz potrzebować. Wybierz jeden z polecanych szablonów lub kliknij Zobacz wszystkie szablony, aby zobaczyć pełną listę dostępnych platform, interfejsów API i języków. Szablon Pusty obszar roboczy znajdziesz też w bibliotece szablonów.
   • Repozytorium GitHub: wybierz Importuj repozytorium, aby sklonować repozytorium GitHub do obszaru roboczego.

Szablony

1. Przeglądaj szablony według typu aplikacji lub skorzystaj z pola wyszukiwania w prawym górnym rogu, aby przefiltrować całą bibliotekę szablonów według słowa kluczowego. Szablon Pusty obszar roboczy jest dostępny w kategorii Różne.

2. Wpisz nazwę obszaru roboczego i ustaw dodatkowe opcje.

3. Kliknij Utwórz. IDX tworzy nowy obszar roboczy na podstawie Twoich wyborów.

Cały czas dodajemy nowe szablony, więc zaglądaj do niej regularnie lub powiedz nam, co Cię interesuje.

Import z GitHuba

1. Wpisz URL repozytorium.

2. Kliknij Utwórz. IDX tworzy nowy obszar roboczy na podstawie Twoich wyborów.

3. Po wczytaniu obszaru roboczego uwierzytelnij się w usłudze GitHub.

4. Po zaimportowaniu projektu uruchom npm install (lub flutter pub get) w terminalu IDX. Domyślnie IDX nie instaluje zależności npm podczas importowania projektu.

Konfigurowanie obszaru roboczego

IDX używa Nix do definiowania konfiguracji środowiska dla każdego obszaru roboczego. Nix to w pełni funkcjonalny menedżer pakietów, który przypisuje unikalne identyfikatory do każdej zależności. Dzięki temu Twoje środowisko może bezproblemowo zawierać wiele wersji tej samej zależności. Są też powtarzalne i deklaratywne. W kontekście IDX oznacza to, że możesz udostępnić plik konfiguracji Nix innym obszarom roboczym, aby wczytać tę samą konfigurację środowiska. Dowiedz się więcej o Nix + IDX.

Utwórz lub edytuj plik .idx/dev.nix

Konfigurację środowiska definiuje się w pliku .idx/dev.nix w repozytorium kodu. Ten plik umożliwia określenie zainstalowanych pakietów, zmiennych środowiskowych i rozszerzeń kodu OSS.

W tym przykładowym pliku .idx/dev.nix znajdziesz podstawową konfigurację środowiska Workspace, która włącza podgląd aplikacji w IDX:

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_18
  ];

  # Sets environment variables in the workspace
  env = {
    SOME_ENV_VAR = "hello";
  };

  # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
  idx.extensions = [
    "angular.ng-template"
  ];

  # Enable previews and customize configuration
  idx.previews = {
    enable = true;
    previews = {
      web = {
        command = [
          "npm"
          "run"
          "start"
          "--"
          "--port"
          "$PORT"
          "--host"
          "0.0.0.0"
          "--disable-host-check"
        ];
        manager = "web";
      };
    };
  };
}

Zastosuj nową konfigurację

Za każdym razem, gdy dodajesz lub aktualizujesz plik konfiguracji dev.nix, IDX w prawym dolnym rogu wyświetla monit o odbudowanie środowiska. Czas potrzebny na ponowne skompilowanie środowiska zależy od liczby pakietów potrzebnych w konfiguracji.

Debugowanie błędów kompilacji środowiska

Pliki konfiguracji są kodem zrozumiałym dla komputera, więc mogą zawierać błędy. Jeśli tak się stanie, środowisko może się nie udać i nie uruchomić. IDX wyświetla opcję uruchomienia środowiska przywracania. Ten obszar roboczy nie zawiera żadnej zdefiniowanej konfiguracji i tylko uruchamia podstawowy system operacyjny Code OSS. Dzięki temu możesz naprawić błędy w pliku konfiguracji dev.nix i odbudować środowisko.

IDX ostatecznie wyświetli błędy kompilacji środowiska. Na razie możesz rozwiązywać problemy samodzielnie.

Dalsze kroki

• Wyświetl podgląd aplikacji.

• Udostępnij obszar roboczy.