Erste Schritte mit Project IDX

Lesen Sie weiter, um mehr über die Grundlagen von Project IDX zu erfahren.

Hinweis

Bevor du beginnst, musst du möglicherweise Drittanbieter-Cookies für deinen Browser aktivieren. Projekt-IDX erfordert in den meisten Browsern Drittanbieter-Cookies, um Arbeitsbereiche zu authentifizieren.

Chrome

1. Öffnen Sie die Einstellungen.
2. Öffnen Sie den Tab Datenschutz und Sicherheit.
3. Achte darauf, dass Alle Cookies zulassen aktiviert ist.
4. Öffnen Sie idx.google.com.
5. Klicken Sie in der Adressleiste auf das Sichtbarkeitssymbol visibility_off, um den Bereich Tracking-Schutz zu öffnen. Aktiviere die Einstellung Drittanbieter-Cookies, um Drittanbieter-Cookies vorübergehend zuzulassen. Dadurch werden Cookies auf IDX 90 Tage lang aktiviert.

Safari

1. Öffnen Sie Safari > Einstellungen....
2. Deaktivieren Sie die folgenden Einstellungen:
   • Erweitert > Alle Cookies blockieren
   • Datenschutz > Websiteübergreifendes Tracking verhindern
3. Öffnen Sie idx.google.com.

Firefox

Für Firefox müssen keine Drittanbieter-Cookies aktiviert werden. Rufen Sie idx.google.com auf.

Oper

1. Öffnen Sie idx.google.com.
2. Öffnen Sie das Menü und klicken Sie auf Einstellungen.
3. Maximieren Sie im Abschnitt Datenschutz und Sicherheit die Option Drittanbieter-Cookies.
4. Wähle Drittanbieter-Cookies im Inkognitomodus blockieren oder Drittanbieter-Cookies zulassen aus.
5. Öffnen Sie idx.google.com.

Bogen

1. Rufen Sie arc://settings auf.
2. Maximieren Sie im Abschnitt Datenschutz und Sicherheit die Option Drittanbieter-Cookies.
3. Wähle Drittanbieter-Cookies im Inkognitomodus blockieren oder Drittanbieter-Cookies zulassen aus.
4. Öffnen Sie idx.google.com.

Mutig

Du musst für Brave keine Drittanbieter-Cookies aktivieren. Rufen Sie idx.google.com auf.

Arbeitsbereich erstellen

Ein Arbeitsbereich in IDX ist eine Entwicklungsumgebung, die alles enthält, was Sie für die Entwicklung Ihrer Anwendung benötigen. Es enthält Ihren Code, einen Code-Editor (mit für Ihr Projekt relevanten Plug-ins) und Toolchains, die die Anwendungsentwicklung unterstützen. Das ist mit dem Erstellen eines neuen Projekts in Ihrer lokalen Desktop-Entwicklungsumgebung vergleichbar, mit der Ausnahme, dass ein vollständiger Computer und ein ganzes Betriebssystem vorkonfiguriert sind und ausschließlich für die Erstellung einer Anwendung vorgesehen sind.

Projekt-IDX-Arbeitsbereiche sind so optimiert, dass sie jeweils nur eine Codebasis enthalten, sodass Sie die Umgebungen und Abhängigkeiten auf Systemebene verschiedener Anwendungen voneinander isoliert halten können.

Wenn Sie eine neue Anwendung erstellen, können Sie für einen schnellen Einstieg Vorlagen für einen verwalteten Arbeitsbereich in IDX verwenden. Alternativ können Sie die Codebasis Ihrer vorhandenen Anwendung in IDX importieren.

Wichtig :Die Anzahl der Arbeitsbereiche, die Sie erstellen können, ist begrenzt. Wenn Sie ein Google-Entwicklerprofil haben, können Sie bis zu 5 Arbeitsbereiche erstellen. Wenn Sie das Arbeitsbereichslimit erreicht haben und direkt über IDX ein Google-Entwicklerprofil erstellen möchten, klicken Sie in der Benachrichtigung im Vorlagen-Dashboard auf Einrichtung abschließen.

So erstellen Sie einen neuen Arbeitsbereich:

• 
• 
• 
• 

1. Öffnen Sie Projekt-IDX.

2. Beim ersten Öffnen von IDX werden Sie aufgefordert, die Nutzungsbedingungen für Google-Produkte, Generative AI und das Android SDK zu lesen und zu akzeptieren. Du kannst auch Mitteilungen zu Produktupdates und -ankündigungen oder Nutzerstudien zur Verbesserung unseres Produkts abonnieren. Wählen Sie die Optionen aus, die für Sie am sinnvollsten sind. Klicken Sie auf die angegebenen Links, um die Nutzungsbedingungen zu lesen, wählen Sie die Option zum Akzeptieren der Nutzungsbedingungen aus und klicken Sie auf Weiter. Als Nächstes können Sie bei Ihrer ersten Verwendung von IDX KI-Features aktivieren oder auf Nicht jetzt klicken. Sie können sie jederzeit aktivieren. Wenn Sie sie auf diesem Bildschirm aktivieren, lesen Sie den Hinweis zu KI und Datenschutz und klicken Sie dann auf Weiter, um Ihre Einstellungen beizubehalten, oder auf Zurück, um die KI-Funktionen zu deaktivieren.

3. Wählen Sie den Arbeitsbereichstyp aus, den Sie erstellen möchten:

   • Vorlagen: Erstellen Sie einen Arbeitsbereich, in dem die grundlegenden Dateien und Pakete, die Sie möglicherweise benötigen, vorinstalliert sind. Wählen Sie eine der Vorlagen aus oder klicken Sie auf Alle Vorlagen ansehen, um eine vollständige Liste der verfügbaren Frameworks, APIs und Sprachen zu erhalten. Die Vorlage Leerer Arbeitsbereich finden Sie auch in der Vorlagenbibliothek.
   • GitHub-Repository: Wählen Sie Repository importieren aus, um ein GitHub-Repository in Ihren Arbeitsbereich zu klonen.

Vorlagen

1. Sie können die Vorlagen nach Anwendungstyp durchsuchen oder das Suchfeld oben rechts verwenden, um die gesamte Vorlagenbibliothek nach Suchbegriff zu filtern. Die Vorlage Leerer Arbeitsbereich ist in der Kategorie Sonstiges verfügbar.

2. Geben Sie einen Namen für den Arbeitsbereich ein und legen Sie bei Bedarf weitere Optionen fest.

3. Klicken Sie auf Erstellen. Anhand Ihrer Auswahl wird in IDX ein neuer Arbeitsbereich erstellt.

Wir fügen ständig neue Vorlagen hinzu. Schauen Sie also regelmäßig vorbei oder teilen Sie uns mit, was Sie sehen möchten.

GitHub-Import

1. Geben Sie die Repo-URL ein.

2. Klicken Sie auf Erstellen. Anhand Ihrer Auswahl wird in IDX ein neuer Arbeitsbereich erstellt.

3. Authentifizieren Sie sich bei GitHub, nachdem der Arbeitsbereich geladen wurde.

4. Führen Sie nach dem Importieren des Projekts npm install (oder flutter pub get) im IDX-Terminal aus. Standardmäßig installiert IDX beim Importieren eines Projekts keine npm-Abhängigkeiten.

Arbeitsbereich konfigurieren

IDX verwendet Nix, um die Umgebungskonfiguration für jeden Arbeitsbereich zu definieren. Nix ist ein rein funktionierender Paketmanager und weist jeder Abhängigkeit eindeutige Kennzeichnungen zu. Dies bedeutet letztendlich, dass Ihre Umgebung nahtlos mehrere Versionen derselben Abhängigkeit enthalten kann. Sie ist außerdem reproduzierbar und deklarativ. Im Kontext von IDX bedeutet dies, dass Sie Ihre Nix-Konfigurationsdatei über Arbeitsbereiche hinweg freigeben können, um dieselbe Umgebungskonfiguration zu laden. Weitere Informationen zu Nix und IDX

Datei .idx/dev.nix erstellen oder bearbeiten

Die Umgebungskonfiguration wird in der Datei .idx/dev.nix in Ihrem Code-Repository definiert. Mit dieser Datei können Sie installierte Pakete, Umgebungsvariablen und Code-OSS-Erweiterungen angeben.

Die folgende Beispieldatei .idx/dev.nix enthält eine grundlegende Konfiguration der Arbeitsbereichsumgebung, durch die Anwendungsvorschauen in IDX aktiviert werden:

{ 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";
      };
    };
  };
}

Neue Konfiguration anwenden

Jedes Mal, wenn Sie die Konfigurationsdatei dev.nix hinzufügen oder aktualisieren, wird in IDX rechts unten die Aufforderung Rebuild the Environment (Umgebung neu erstellen) angezeigt. Die Dauer der Neuerstellung der Umgebung hängt von der Anzahl der Pakete ab, die für Ihre Konfiguration erforderlich sind.

Fehler beim Erstellen der Umgebung beheben

Da es sich bei Konfigurationsdateien um maschinenlesbaren Code handelt, können sie Fehler enthalten. In diesem Fall kann die Umgebung unter Umständen nicht erstellt und nicht gestartet werden. IDX zeigt eine Option zum Starten einer Recovery-Umgebung an. Dieser Arbeitsbereich enthält keine der von Ihnen definierten Konfigurationen, sondern führt nur einfachen Code-OSS aus. Dadurch haben Sie die Möglichkeit, Fehler in Ihrer dev.nix-Konfigurationsdatei zu beheben und die Umgebung neu zu erstellen.

Letztendlich werden IDX-Umgebungs-Build-Fehler aufdecken. Zunächst müssen Sie das Problem selbst beheben.

Nächste Schritte

• Vorschau der App ansehen

• Geben Sie Ihren Arbeitsbereich frei.