Comienza a usar Project IDX

Sigue leyendo para conocer los conceptos básicos que necesitas para comenzar a usar Project IDX.

Antes de comenzar

Antes de comenzar, es posible que debas habilitar las cookies de terceros para tu navegador. Project IDX requiere cookies de terceros en la mayoría de los navegadores. para autenticar lugares de trabajo.

Chrome
  1. Abre Configuración.
  2. Abre la pestaña Privacidad y seguridad.
  3. Asegúrate de que la opción Permitir todas las cookies esté habilitada.
  4. Abre idx.google.com.
  5. Haz clic en el ícono de visibilidad en la barra de direcciones. visibility_off para abrir Panel Protección contra seguimiento. Activa el de cookies de terceros para permitir temporalmente cookies de terceros. Esto habilita las cookies en IDX durante 90 días.
Safari
  1. Abre Safari > Configuración...
  2. Desactiva las siguientes opciones de configuración:
    • Avanzado > Bloquear todas las cookies
    • Privacidad > Evita el seguimiento entre sitios
  3. Abre idx.google.com.
Firefox

No es necesario que habilites las cookies de terceros en Firefox. Ve a idx.google.com.
Opera
  1. Abre idx.google.com.
  2. Abre el menú y haz clic en Configuración.
  3. Visita la página Privacidad y Seguridad y expande la Cookies de terceros.
  4. Selecciona Bloquear cookies de terceros en el modo Incógnito o Permitir cookies de terceros
  5. Abre idx.google.com.
Arco
  1. Ve a arc://settings.
  2. Ve a la sección Privacidad y seguridad y expande el Cookies de terceros.
  3. Selecciona Bloquear cookies de terceros en el modo Incógnito o Permitir cookies de terceros
  4. Abre idx.google.com.
Valiente

No es necesario que habilites las cookies de terceros para Brave. Ve a idx.google.com.

Crea un lugar de trabajo

Un espacio de trabajo en IDX es un entorno de desarrollo que contiene todo que necesitas para desarrollar tu aplicación. Contiene tu código, un editor de código (con complementos relevantes para tu proyecto) y cadenas de herramientas que admiten la en el desarrollo de software. Es similar a creando un proyecto nuevo en el entorno de desarrollo local de computadoras, excepto que tienen una computadora completa y un SO preconfigurados y dedicados exclusivamente crear una aplicación.

Los lugares de trabajo de Project IDX están optimizados para contener una base de código a la vez, por lo que puedes mantener los entornos y las dependencias a nivel del sistema de diferentes aplicaciones aisladas entre sí.

Si estás compilando una app nueva, usa plantillas de espacio de trabajo administrado en IDX para lo siguiente: comenzar rápidamente. Como alternativa, puedes importar tu aplicación existente de código abierto en IDX.

Para crear un lugar de trabajo nuevo, sigue estos pasos:

  • Una captura de pantalla del flujo de integración de IDX en el que se aceptan las condiciones
  • Captura de pantalla del flujo de integración de IDX que habilita las funciones basadas en IA
  • Captura de pantalla del flujo de integración de IDX en la que se muestra una nota sobre la IA y la privacidad
  • Captura de pantalla del panel de IDX que muestra plantillas destacadas y la importación de GitHub

  1. Abre Project IDX.

  2. Cuando abras IDX por primera vez, se te pedirá que leas y aceptes el condiciones del servicio de los productos de Google, la IA generativa y el SDK de Android. También puedes habilitar las comunicaciones sobre actualizaciones de productos y anuncios o estudios de usuarios para mejorar nuestro producto. Selecciona las opciones que que tenga sentido para ti. Haz clic en los vínculos proporcionados para leer las Condiciones del Servicio y, luego, selecciona la opción para aceptarlas y haz clic en Continuar. Luego, puedes decidir Habilita las funciones basadas en IA desde el primer uso de IDX o déjalas desactivadas antes del haciendo clic en Ahora no (puedes activarlas más tarde). Si los habilitas en esta pantalla, lee el nota sobre IA y privacidad y, luego, haz clic en Continuar para mantener tu configuración o Regresa para desactivar las funciones basadas en IA.

  3. Selecciona el tipo de lugar de trabajo que deseas crear:

    • Plantillas: Crea un espacio de trabajo precargado con los archivos básicos y paquetes que podrías necesitar. Selecciona una de las plantillas destacadas o haz clic en Consulta todas las plantillas para obtener una lista completa de los frameworks, las APIs, y también idiomas. También puedes encontrar la plantilla Espacio de trabajo en blanco en la biblioteca de plantillas.
    • Git Repository: Selecciona Import a repo para clonar un repositorio en tu lugar de trabajo.

Plantillas

La página de la biblioteca de plantillas de IDX, en la que se muestran las plantillas web disponibles

  1. Explora las plantillas por tipo de aplicación o utiliza la en la esquina superior derecha para filtrar toda la biblioteca de plantillas palabra clave. El espacio de trabajo en blanco está disponible en la categoría Varios.

  2. Ingresa un nombre para tu lugar de trabajo y configura las opciones adicionales.

  3. Haz clic en Crear. IDX crea un nuevo lugar de trabajo basado en tus selecciones.

Siempre agregamos plantillas nuevas, así que sigue consultando o cuéntanos qué quieres ver.

Importación de repositorios de Git

  1. Ingresa la URL del repositorio. El repositorio se puede alojar en GitHub, GitLab o Bitbucket.

  2. Haz clic en Crear. IDX crea un nuevo lugar de trabajo basado en tus selecciones.

  3. En el caso de los repositorios privados, se te pedirá que te autentiques en el proveedor correspondiente.

    • En GitHub, sigue las indicaciones para copiar un token de acceso
    • Para GitLab, puedes usar la contraseña de tu cuenta o crear un token de cuenta personal.
    • En Bitbucket, usa tu nombre de usuario (no tu correo electrónico) y una contraseña de la aplicación para autenticarte.

  4. Ejecuta npm install (o flutter pub get) en la terminal IDX después de importando tu proyecto. De forma predeterminada, IDX no instala npm. las dependencias cuando importas un proyecto.

Configura tu lugar de trabajo

IDX usa Nix para definir la configuración del entorno de cada lugar de trabajo. Nix es un un administrador de paquetes funcional y asigna identificadores únicos a cada dependencia lo que, en última instancia, significa que tu entorno puede varias versiones de la misma dependencia, sin problemas. También se usa reproducible y declarativa. En el contexto de IDX, esto significa que puedes comparte tu archivo de configuración de Nix entre espacios de trabajo para cargar la misma configuración del entorno. Obtén más información sobre Nix + IDX.

Crea o edita el archivo .idx/dev.nix

La configuración del entorno se define en el archivo .idx/dev.nix de tu código en un repositorio de confianza. Este archivo te permite especificar los paquetes instalados, el entorno variables y extensiones de Code-OSS.

Consulta el siguiente archivo .idx/dev.nix de ejemplo para un entorno de lugar de trabajo básico que habilita las vistas previas de la app en 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";
      };
    };
  };
}

Aplicar configuración nueva

Cada vez que agregues o actualices el archivo de configuración dev.nix, se usará IDX Se mostrará un mensaje en la esquina inferior derecha para Volver a compilar el entorno. El tiempo que lleva volver a compilar el entorno depende de la cantidad de paquetes tus necesidades de configuración.

Depura fallas de compilación del entorno

Dado que los archivos de configuración son código legible por máquina, pueden tener errores. Si esto sucede, es posible que el entorno no se compile y no se inicie. IDX muestra una opción para iniciar un entorno de recuperación. Este espacio de trabajo no incluye cualquiera de las configuraciones que definiste y simplemente se ejecuta Code-OSS. De esta manera, podrás corregir errores en tu dev.nix. de Terraform y vuelve a compilar el entorno.

Con el tiempo, IDX mostrará errores de compilación del entorno. Por ahora, tendrás que solucionar los problemas por tu cuenta.

Próximos pasos