Premiers pas avec le projet IDX

Lisez la suite pour connaître les principes de base à connaître pour commencer à utiliser Project IDX.

Avant de commencer

Avant de commencer, vous devrez peut-être activer les cookies tiers pour votre navigateur. Project IDX nécessite des cookies tiers dans la plupart des navigateurs pour authentifier les espaces de travail.

Chrome
  1. Ouvrez Paramètres.
  2. Ouvrez l'onglet Confidentialité et sécurité.
  3. Vérifiez que l'option Autoriser tous les cookies est activée.
  4. Accédez au site idx.google.com.
  5. Cliquez sur l'icône de visibilité dans la barre d'adresse visibility_off pour ouvrir le panneau Protection contre le suivi. Activez le paramètre Cookies tiers pour autoriser temporairement les cookies tiers. Cela active les cookies sur IDX pendant 90 jours.
Safari
  1. Ouvrez Safari > Paramètres.
  2. Désactivez les paramètres suivants :
    • Avancé > Bloquer tous les cookies
    • Confidentialité > Empêcher le suivi intersite
  3. Accédez au site idx.google.com.
Firefox

Vous n'avez pas besoin d'activer les cookies tiers pour Firefox. Accédez à idx.google.com.
Opéra
  1. Accédez au site idx.google.com.
  2. Ouvrez le menu et cliquez sur Paramètres.
  3. Accédez à la section Confidentialité et sécurité, puis développez l'option Cookies tiers.
  4. Sélectionnez Bloquer les cookies tiers en mode navigation privée ou Autoriser les cookies tiers.
  5. Accédez au site idx.google.com.
Arc
  1. Accédez à arc://settings.
  2. Accédez à la section Confidentialité et sécurité, puis développez l'option Cookies tiers.
  3. Sélectionnez Bloquer les cookies tiers en mode navigation privée ou Autoriser les cookies tiers.
  4. Accédez au site idx.google.com.
"Rebelle"

Vous n'avez pas besoin d'activer les cookies tiers pour Brave. Accédez à idx.google.com.

Créer un espace de travail

Un espace de travail dans IDX est un environnement de développement qui contient tout ce dont vous avez besoin pour développer votre application. Il contient votre code, un éditeur de code (avec des plug-ins pertinents pour votre projet) et des chaînes d'outils compatibles avec le développement d'applications. Cette opération s'apparente à la création d'un projet dans votre environnement de développement local pour ordinateur, à la différence que vous disposez d'un ordinateur et d'un système d'exploitation entiers préconfigurés et dédiés exclusivement à la création d'une application.

Les espaces de travail Project IDX sont optimisés pour contenir un codebase à la fois. Vous pouvez ainsi isoler les environnements et les dépendances au niveau du système des différentes applications les uns des autres.

Si vous créez une application, utilisez les modèles d'espaces de travail gérés dans IDX pour démarrer rapidement. Vous pouvez également importer le codebase de votre application existante dans IDX.

Pour créer un espace de travail, procédez comme suit:

  • Capture d'écran du processus d'intégration IDX acceptant les conditions
  • Capture d'écran du processus d'intégration IDX permettant d'activer les fonctionnalités d'IA
  • Capture d'écran du flux d'intégration d'IDX montrant une note sur l'IA et la confidentialité
  • Capture d'écran du tableau de bord IDX montrant la sélection de modèles et l'importation GitHub

  1. Ouvrez Project IDX.

  2. La première fois que vous ouvrez IDX, vous êtes invité à lire et à accepter les conditions d'utilisation des produits Google, de l'IA générative et du SDK Android. Vous pouvez également choisir de recevoir des communications sur les mises à jour et des annonces concernant le produit, ou des études utilisateur pour améliorer notre produit. Sélectionnez les options qui vous intéressent. Cliquez sur les liens fournis pour lire les conditions d'utilisation, sélectionnez l'option pour les accepter, puis cliquez sur Continuer. Vous pouvez ensuite décider d'activer les fonctionnalités d'IA lors de votre première utilisation d'IDX ou de les laisser désactivées en cliquant sur Pas maintenant (vous pourrez toujours les activer plus tard). Si vous les activez sur cet écran, lisez la note sur l'IA et la confidentialité, puis cliquez sur Continuer pour conserver vos paramètres ou sur Retour pour désactiver les fonctionnalités d'IA.

  3. Sélectionnez le type d'espace de travail que vous souhaitez créer:

    • Modèles:créez un espace de travail préchargé avec les fichiers et packages de base dont vous pourriez avoir besoin. Sélectionnez l'un des modèles proposés ou cliquez sur Afficher tous les modèles pour obtenir la liste complète des frameworks, API et langages disponibles. Vous trouverez également le modèle Blank Workspace (Espace de travail vide) dans la bibliothèque de modèles.
    • Dépôt GitHub:sélectionnez Importer un dépôt pour cloner un dépôt GitHub dans votre espace de travail.

Modèles

Page de la bibliothèque de modèles IDX affichant les modèles Web disponibles

  1. Parcourez les modèles par type d'application ou utilisez le champ de recherche en haut à droite pour filtrer la bibliothèque complète de modèles par mot clé. Le modèle Espace de travail vide est disponible dans la catégorie Divers.

  2. Attribuez un nom à votre espace de travail et définissez d'éventuelles options supplémentaires.

  3. Cliquez sur Créer. IDX crée un espace de travail en fonction de vos sélections.

Nous ajoutons constamment de nouveaux modèles, donc consultez régulièrement cette page ou dites-nous ce que vous souhaitez voir.

Importation GitHub

  1. Saisissez l'URL du dépôt.

  2. Cliquez sur Créer. IDX crée un espace de travail en fonction de vos sélections.

  3. Authentifiez-vous auprès de GitHub après le chargement de l'espace de travail.

  4. Exécutez npm install (ou flutter pub get) dans le terminal IDX après avoir importé votre projet. Par défaut, IDX n'installe pas les dépendances npm lorsque vous importez un projet.

Configurer votre espace de travail

IDX définit la configuration de l'environnement de chaque espace de travail à l'aide de Nix. Nix est un gestionnaire de paquets purement fonctionnel et attribue des identifiants uniques à chaque dépendance, ce qui signifie au final que votre environnement peut contenir plusieurs versions de la même dépendance, de manière fluide. Elle est également reproductible et déclarative. Dans le contexte d'IDX, cela signifie que vous pouvez partager votre fichier de configuration Nix entre plusieurs espaces de travail afin de charger la même configuration d'environnement. Apprenez-en plus sur Nix + IDX.

Créer ou modifier le fichier .idx/dev.nix

La configuration de l'environnement est définie dans le fichier .idx/dev.nix de votre dépôt de code. Ce fichier vous permet de spécifier les packages installés, les variables d'environnement et les extensions Code OSS.

Consultez l'exemple de fichier .idx/dev.nix suivant pour découvrir la configuration d'un environnement d'espace de travail de base qui active les aperçus d'application dans 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";
      };
    };
  };
}

Appliquer la nouvelle configuration

Chaque fois que vous ajoutez ou mettez à jour le fichier de configuration dev.nix, IDX affiche une invite en bas à droite pour recompiler l'environnement. Le temps nécessaire pour recompiler l'environnement dépend du nombre de packages dont votre configuration a besoin.

Déboguer les échecs de compilation de l'environnement

Étant donné que les fichiers de configuration sont des codes lisibles par un ordinateur, ils peuvent contenir des erreurs. Dans ce cas, la compilation et le démarrage de l'environnement peuvent échouer. IDX affiche une option permettant de démarrer un environnement de récupération. Cet espace de travail n'inclut aucune des configurations que vous avez définies et exécute simplement un code OSS de base. Cela vous permet de corriger les erreurs dans votre fichier de configuration dev.nix et de recompiler l'environnement.

IDX affichera à terme des erreurs de compilation de l'environnement. Pour l’instant, vous devez résoudre vous-même le problème.

Étapes suivantes