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 en tu navegador. Project IDX requiere cookies de terceros en la mayoría de los navegadores para autenticar los 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 el panel Protección contra seguimiento. Activa el parámetro de configuración Cookies de terceros para permitir temporalmente las 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:
   • Configuración avanzada > Bloquear todas las cookies
   • Privacidad > Impedir 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.

Ópera

1. Abre idx.google.com.
2. Abre el menú y haz clic en Configuración.
3. Ve a la sección Privacidad y seguridad y expande la opción Cookies de terceros.
4. Selecciona Bloquear cookies de terceros en el modo Incógnito o Permitir cookies de terceros.
5. Abre idx.google.com.

Arc

1. Ve a arc://settings.
2. Ve a la sección Privacidad y seguridad y expande la opción 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 lugar de trabajo en IDX es un entorno de desarrollo que contiene todo lo necesario 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 el desarrollo de apps. Es similar a crear un proyecto nuevo en el entorno de desarrollo local de escritorio, con la excepción de que tienes una computadora y un SO completos configurados y dedicados exclusivamente a la compilación de 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 de nivel de sistema de diferentes aplicaciones aislados entre sí.

Si estás compilando una app nueva, usa plantillas de lugares de trabajo administrados en IDX para comenzar rápidamente. También puedes importar las bases de código de tu aplicación existente en IDX.

Punto clave: Existe un límite para la cantidad de lugares de trabajo que puedes crear. Si tienes un Perfil del desarrollador de Google, puedes crear hasta 5 lugares de trabajo. Para crear un Perfil del desarrollador de Google directamente desde IDX una vez que hayas alcanzado el límite del lugar de trabajo, haz clic en Completar configuración en la notificación del panel de la plantilla.

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

• 
• 
• 
• 

1. Abre Project IDX.

2. Cuando abras IDX por primera vez, se te solicitará que leas y aceptes las Condiciones del Servicio de los productos de Google, la IA generativa y el SDK de Android. También puedes habilitar las comunicaciones sobre actualizaciones y anuncios del producto, o estudios de usuarios para mejorar nuestro producto. Selecciona las opciones que sean adecuadas para ti. Haz clic en los vínculos proporcionados para leer las Condiciones del Servicio, selecciona la opción para aceptarlas y haz clic en Continuar. Luego, puedes decidir Habilitar las funciones de IA desde la primera vez que usas IDX, o bien hacer clic en Ahora no (siempre puedes activarlas más adelante) para inhabilitarlas. Si las habilitas en esta pantalla, lee la nota sobre IA y privacidad y, luego, haz clic en Continuar para mantener la configuración o en Atrás para desactivar las funciones de IA.

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

   • Plantillas: Crea un lugar de trabajo precargado con los archivos y paquetes básicos que podrías necesitar. Selecciona una de las plantillas destacadas o haz clic en See all templates para obtener una lista completa de los frameworks, las APIs y los lenguajes disponibles. También puedes encontrar la plantilla Blank workspace en la biblioteca de plantillas.
   • Repositorio de GitHub:Selecciona Importar un repositorio para clonar un repositorio de GitHub en tu lugar de trabajo.

plantillas

1. Explora las plantillas por tipo de aplicación o usa el cuadro de búsqueda de la esquina superior derecha para filtrar toda la biblioteca de plantillas por palabra clave. La plantilla 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 lugar de trabajo nuevo en función de tus selecciones.

Siempre agregamos plantillas nuevas, así que vuelve a consultar más tarde o cuéntanos qué quieres ver.

Importación de GitHub

1. Ingresa la URL del repositorio.

2. Haz clic en Crear. IDX crea un lugar de trabajo nuevo en función de tus selecciones.

3. Autentícate en GitHub después de que se cargue el lugar de trabajo.

4. Ejecuta npm install (o flutter pub get) en la terminal IDX después de importar el proyecto. De forma predeterminada, IDX no instala dependencias de npm 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 administrador de paquetes puramente funcional y asigna identificadores únicos a cada dependencia, lo que, en última instancia, significa que tu entorno puede contener varias versiones de la misma dependencia, sin problemas. También es reproducible y declarativo. En el contexto de IDX, esto significa que puedes compartir tu archivo de configuración Nix en diferentes lugares 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 del repositorio de código. Este archivo te permite especificar los paquetes instalados, las variables de entorno y las extensiones de Code-OSS.

Consulta el siguiente archivo .idx/dev.nix de ejemplo para obtener una configuración básica del entorno de lugar de trabajo 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 agregas o actualizas el archivo de configuración dev.nix, IDX muestra 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 que necesita tu configuración.

Depura fallas de compilación del entorno

Como 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 lugar de trabajo no incluye ninguna de las configuraciones que definiste y solo ejecuta código OSS básico. Esto te permite corregir errores en el archivo de configuración dev.nix y volver 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

• Obtén una vista previa de tu app.

• Comparte tu lugar de trabajo.