Premiers pas avec le projet IDX

Project IDX fournit un environnement de développement collaboratif dans le cloud qui simplifie le processus de création d'applications avec une combinaison presque illimitée de frameworks et de bibliothèques.

Une fois que vous avez configuré un espace de travail IDX, vous pouvez partager un environnement de développement flexible et entièrement fonctionnel avec votre équipe en quelques secondes: les espaces de travail IDX sont accessibles depuis n'importe quel appareil et sont fournis avec des outils intégrés pour simplifier votre processus de développement.

Pour commencer :

• Activez les cookies tiers dans votre navigateur.
• Configurez IDX pour la première fois.
• Créez un espace de travail.
• Configurez votre espace de travail.

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 les Paramètres.
2. Ouvrez l'onglet Confidentialité et sécurité.
3. Assurez-vous que l'option Autoriser tous les cookies est activée.
4. Ouvrez 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. Les cookies sont ainsi activés sur l'IDX pendant 90 jours.

Safari

1. Accédez à Safari > Paramètres.
2. Désactivez les paramètres suivants :
   • Avancé > Bloquer tous les cookies
   • Confidentialité > Empêcher le suivi intersite
3. Ouvrez idx.google.com.

Firefox

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

Opera

1. Ouvrez idx.google.com.
2. Ouvrez le menu, puis 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. Ouvrez 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 à idx.google.com.

Rebelle

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

Configurer IDX

• 
• 
• 
• 

Si vous utilisez IDX pour la première fois, vous devez l'initialiser. Si vous avez déjà utilisé IDX avec votre compte actuel, vous pouvez passer à l'étape Créer un espace de travail.

Pour configurer l'IDX pour la première fois:

1. Ouvrez Project IDX.

   La première fois que vous ouvrez IDX, vous êtes invité à lire et à accepter les conditions d'utilisation.

2. Lisez les conditions d'utilisation de Google et les conditions d'utilisation du SDK Android, puis, si vous les acceptez, cochez la case J'accepte les conditions d'utilisation de Google et les conditions d'utilisation du SDK Android intégrées aux présentes.

3. Vous pouvez également choisir de recevoir des informations sur les produits et des annonces, et de participer à des études de recherche pour améliorer IDX.

4. Lorsque vous êtes invité à activer les fonctionnalités d'IA:

   • Pour configurer l'assistance par l'IA dans IDX pour tous les espaces de travail, cliquez sur Activer les fonctionnalités d'IA. Lisez la note sur l'IA et la confidentialité, puis cliquez sur Continuer pour activer les fonctionnalités d'IA et ouvrir IDX, ou sur Retour.

   • Pour différer l'assistance par IA, cliquez sur Pas pour le moment.

Le tableau de bord IDX s'affiche. Vous êtes maintenant prêt à créer un espace de travail.

Remarque :Vous pouvez réactiver les fonctionnalités d'IA à tout moment.

Créer un espace de travail

Dans IDX, un espace de travail 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. C'est comme créer un projet dans votre environnement de développement pour ordinateur de bureau local, sauf que vous disposez d'un ordinateur et d'un système d'exploitation entièrement préconfigurés et dédiés exclusivement à la création de votre application, exécutée dans le cloud dans votre navigateur et accessible où que vous soyez.

Les espaces de travail Project IDX sont optimisés pour contenir un seul codebase. Vous pouvez ainsi isoler les environnements et les dépendances au niveau du système des différentes applications. Vous pouvez créer plusieurs espaces de travail à utiliser avec différentes applications et plates-formes.

Point clé :Le nombre d'espaces de travail que vous pouvez créer est limité. Si vous disposez d'un profil du développeur Google, vous pouvez créer jusqu'à cinq espaces de travail. Pour créer un profil de développeur Google directement depuis IDX une fois que vous avez atteint la limite d'espace de travail, cliquez sur Complete Setup (Terminer la configuration) dans la notification du tableau de bord du modèle.

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

1. Ouvrez Project IDX.

2. Choisissez la méthode que vous souhaitez utiliser pour initialiser un nouvel espace de travail. Si vous créez une application, vous pouvez rapidement créer un espace de travail à l'aide des méthodes suivantes:

   • Utilisez un modèle IDX officiel:Project IDX fournit des modèles officiellement compatibles qui préchargent votre espace de travail avec les fichiers, packages et dépendances de base dont vous pourriez avoir besoin. Vous pouvez choisir parmi des modèles pour les applications Web, les applications serveur, les applications mobiles, les services d'IA et de ML, les bases de données, etc., y compris un espace de travail vide qui initialise un espace de travail avec des dépendances minimales.

   • Importer un dépôt GitHub:vous pouvez choisir d'importer un dépôt directement depuis GitHub.

   • Utilisez un modèle de communauté. Project IDX gère des modèles de la communauté, qui sont ouverts aux contributions de la communauté. Si vous utilisez un modèle de la communauté, nous vous encourageons à partager les modifications utiles ou les nouveaux modèles que vous créez.

Modèles officiels

1. Parcourez les modèles par type d'application ou utilisez le champ de recherche en haut à droite pour filtrer l'intégralité de la bibliothèque 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 les options supplémentaires.

3. Cliquez sur Créer. IDX crée un nouvel espace de travail basé sur le modèle que vous avez sélectionné.

Nous ajoutons régulièrement de nouveaux modèles. N'hésitez pas à revenir régulièrement ou à nous dire ce que vous souhaitez voir.

Importation de dépôt Git

1. Cliquez sur Importer un dépôt.

2. Saisissez l'URL du dépôt. Le dépôt peut être hébergé sur GitHub, GitLab ou Bitbucket.

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

4. Si le dépôt est privé, vous êtes invité à vous authentifier auprès du fournisseur concerné:

   • Pour GitHub, suivez les instructions pour copier un jeton d'accès.
   • Pour GitLab, vous pouvez utiliser le mot de passe de votre compte ou créer un jeton de compte personnel.
   • Pour Bitbucket, utilisez votre nom d'utilisateur (et non votre adresse e-mail) et un mot de passe d'application pour vous authentifier.

5. Exécutez npm install (ou flutter pub get) dans le terminal IDX après avoir importé votre projet.

   Remarque :IDX n'installe pas les dépendances par défaut lorsque vous importez un projet. Pour modifier ce paramètre, ajoutez un hook onCreate qui exécute npm install (ou flutter pub get) à votre fichier dev.nix. Une fois que vous avez ajouté dev.nix au dépôt de votre projet, les dépendances sont installées chaque fois que les utilisateurs importent votre dépôt dans IDX.

Modèles de communauté

1. Identifiez le modèle de communauté que vous souhaitez utiliser, puis copiez son URL.

2. Créez une URL Project IDX à ouverture instantanée avec le format suivant:

   https://idx.google.com/new?template=TEMPLATE_URL
   

   Par exemple, si vous souhaitez créer un espace de travail avec le modèle React Three.js, utilisez cette URL:

   https://idx.google.com/new?template=https://github.com/project-idx/community-templates/tree/main/threejs-react
   

3. Cliquez sur Créer. IDX crée un espace de travail basé sur le modèle que vous avez référencé.

Configurer votre espace de travail

IDX utilise Nix pour définir la configuration de l'environnement pour chaque espace de travail. Nix est un gestionnaire de paquets purement fonctionnel qui attribue des identifiants uniques à chaque dépendance. Cela signifie que votre environnement peut contenir plusieurs versions de la même dépendance, sans problème. Il est également reproductible et déclaratif. Dans le contexte de l'IDX, cela signifie que vous pouvez partager votre fichier de configuration Nix entre les espaces de travail pour charger la même configuration d'environnement. En savoir 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 spécifie tous les composants à ajouter à votre espace de travail, y compris:

• Outils système disponibles dans le registre de paquets Nix, y compris les compilateurs, les paquets (comme go ou angular) et les utilitaires de ligne de commande, comme les composants supplémentaires de la CLI gcloud.

• Extensions IDE du registre OpenVSX, comme les débogueurs spécifiques à la langue, les outils de formatage du code, les extensions officielles pour les services cloud, etc.

• Services courants, comme Docker, la messagerie Pub/Sub, les bases de données telles que Postgres et Redis, et plus.

Consultez l'exemple de fichier .idx/dev.nix suivant pour une configuration d'environnement d'espace de travail de base qui active les aperçus d'applications 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";
        # Optionally, specify a directory that contains your web app
        # cwd = "app/client";
      };
    };
  };
}

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 reconstruire l'environnement dépend du nombre de paquets dont votre configuration a besoin.

Échecs de compilation de l'environnement de débogage

Étant donné que les fichiers de configuration sont du code lisible par l'ordinateur, ils peuvent contenir des erreurs. Dans ce cas, la compilation de l'environnement peut échouer et ne pas démarrer. IDX affiche une option permettant de démarrer un environnement de récupération. Cet espace de travail n'inclut aucune configuration que vous avez définie et n'exécute que Code OSS de base. Vous pouvez ainsi corriger les erreurs dans votre fichier de configuration dev.nix et reconstruire l'environnement.

IDX finira par détecter les erreurs de compilation de l'environnement. Pour le moment, vous devez résoudre le problème vous-même.

Étapes suivantes

• Prévisualiser votre application

• Partager votre espace de travail

• Créer des modèles personnalisés à utiliser et à partager

• Utiliser un bouton "Ouvrir dans IDX" pour partager la configuration de votre espace de travail ou votre modèle personnalisé