Pierwsze kroki z projektem IDX

Czytaj dalej, aby poznać podstawy potrzebne do rozpoczęcia korzystania z Project IDX.

Zanim zaczniesz

Zanim zaczniesz, być może trzeba będzie włączyć pliki cookie innych firm w swojej przeglądarki. 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 jest włączona opcja Zezwalaj na wszystkie pliki cookie.
  4. Otwórz idx.google.com.
  5. Kliknij ikonę widoczności na pasku adresu. visibility_off, aby otworzyć Ochrona przed śledzeniem. Włącz Tymczasowe zezwalanie na pliki cookie innych firm plików cookie innych firm. Spowoduje to włączenie plików cookie w IDX na 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. Otwórz stronę idx.google.com.

Opera
  1. Otwórz idx.google.com.
  2. Otwórz menu i kliknij Ustawienia.
  3. Otwórz stronę Prywatność Bezpieczeństwo i rozwiń 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 arc://settings.
  2. Przejdź do sekcji Prywatność i bezpieczeństwo i rozwiń 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. Otwórz stronę idx.google.com.

Utwórz obszar roboczy

Obszar roboczy w IDX to środowisko programistyczne, które zawiera wszystko które są niezbędne do opracowania aplikacji. Zawiera edytor kodu (z wtyczkami odpowiednimi dla projektu) i łańcuchami narzędzi obsługującymi aplikacje w Google Cloud. Jest ona podobna do podczas tworzenia nowego projektu w lokalnym środowisku programistycznym Desktop Desktop, z wyjątkiem mają cały komputer i system operacyjny skonfigurowany wstępnie wyłącznie do podczas tworzenia aplikacji.

Obszary robocze Project IDX są zoptymalizowane tak, aby zawierały 1 bazę kodu dzięki czemu można zachować środowiska i zależności na poziomie systemu od siebie odizolowane.

Jeśli tworzysz nową aplikację, użyj szablonów zarządzanego obszaru roboczego w IDX, aby: można szybko rozpocząć. Możesz też zaimportować istniejącą aplikację bazy kodu do IDX.

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

  • Zrzut ekranu pokazujący proces rejestracji w IDX akceptujący warunki
  • Zrzut ekranu pokazujący proces wdrażania IDX, który włącza funkcje AI
  • Zrzut ekranu przedstawiający proces rejestracji do IDX z widocznymi uwagami na temat AI i prywatności.
  • Zrzut ekranu panelu IDX z polecanymi szablonami i importem z githuba
  1. Otwórz Projekt IDX

  2. Przy pierwszym otwarciu IDX zobaczysz prośbę o przeczytanie i zaakceptowanie Warunków korzystania z usług Google, generatywnej AI i pakietu SDK Androida. Możesz również wyrazić zgodę na otrzymywanie wiadomości o aktualizacjach produktów lub ogłoszenia lub badania opinii użytkowników. Wybierz opcje, które mają sens w Twoim przypadku. Kliknij dostępne linki, aby przeczytać warunki korzystania z usługi, a następnie wybierz odpowiednią opcję aby je zaakceptować, i kliknij Dalej. Następnie możesz określić, Włącz funkcje AI przy pierwszym użyciu IDX lub zostaw je wyłączone do kliknij Nie teraz (w każdej chwili możesz włącz je później). Jeśli włączysz je na tym ekranie, przeczytaj uwagi na temat AI i prywatności, a następnie kliknij Dalej, aby zachować Wróć, 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 pakietów, 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 z biblioteki szablonów.
    • Repozytorium Git:wybierz Importuj repozytorium, aby sklonować repozytorium do obszaru roboczego.

Szablony

Strona biblioteki szablonów IDX z dostępnymi szablonami internetowymi

  1. Przeglądaj szablony według typu aplikacji lub użyj w prawym górnym rogu, aby przefiltrować całą bibliotekę szablonów. słowa kluczowego. Pusty obszar roboczy Szablon 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 wybrane opcje.

Stale dodajemy nowe szablony, więc sprawdzaj co jakiś czas. lub powiedz nam, co chcesz zobaczyć.

Importowanie repozytorium Git

  1. Wpisz adres URL repozytorium. Repozytorium może być hostowane w serwisie GitHub, GitLab lub Bitbucket.

  2. Kliknij Utwórz. IDX tworzy nowy obszar roboczy na podstawie wybrane opcje.

  3. W przypadku repozytoriów prywatnych pojawi się prośba o uwierzytelnienie u odpowiedniego dostawcy.

    • W przypadku GitHuba postępuj zgodnie z instrukcjami, aby skopiować token dostępu
    • W przypadku GitLab możesz użyć hasła do konta lub utworzyć token konta osobistego.
    • W przypadku Bitbucket użyj nazwy użytkownika (nie adresu e-mail) i hasła do aplikacji, aby się uwierzytelnić.
  4. Uruchom npm install (lub flutter pub get) w terminalu IDX po importowanie projektu. Domyślnie IDX nie instaluje npm podczas importowania projektu.

Konfigurowanie obszaru roboczego

IDX korzysta z Nix aby zdefiniować konfigurację środowiska dla każdego obszaru roboczego. Nix to czysta funkcjonalnego menedżera pakietów i przypisuje do każdej zależności unikalne identyfikatory, Dzięki temu środowisko zawiera wiele wersji tej samej zależności. Jest także powtarzalna i deklaratywna. W kontekście IDX oznacza to, udostępniać plik konfiguracji Nix między obszarami roboczymi, aby wczytywać konfigurację środowiska. Więcej informacji o Nix + IDX

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

Konfiguracja środowiska jest zdefiniowana w pliku .idx/dev.nix w Twoim kodzie z repozytorium. Ten plik umożliwia określenie zainstalowanych pakietów, środowiska zmiennych i rozszerzenia Code OSS.

Zobacz przykładowy plik .idx/dev.nix przedstawiający podstawowe środowisko obszaru roboczego pozwalająca włączyć 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świetli komunikat Odbuduj środowisko. Czas potrzebny na odbudowanie środowiska zależy od liczby pakietów do Twoich potrzeb konfiguracyjnych.

Debugowanie błędów kompilacji środowiska

Pliki konfiguracji są kodem czytelnym dla komputera, dlatego mogą zawierać błędy. W takim przypadku środowisko może się nie skompilować i się nie uruchomić. IDX wyświetli opcję uruchomienia środowiska Recovery. Ten obszar roboczy nie pozwalają włączyć dowolną zdefiniowaną konfigurację i uruchamiać Kod OSS. Dzięki temu możesz naprawić błędy w pliku dev.nix pliku konfiguracji i ponownie skompiluj środowisko.

IDX w końcu wyświetli błędy kompilacji środowiska. Na razie musisz samodzielnie rozwiązać problem.

Dalsze kroki