Comienza a usar Project IDX

Project IDX proporciona un entorno de desarrollo colaborativo basado en la nube que simplifica el proceso de compilación de aplicaciones con una combinación casi ilimitada de frameworks y bibliotecas.

Después de configurar un espacio de trabajo de IDX, puedes compartir un entorno de desarrollo flexible y completamente funcional con tu equipo en segundos: se puede acceder a los espacios de trabajo de IDX desde cualquier dispositivo y vienen con herramientas integradas para optimizar tu proceso de desarrollo.

Para comenzar, sigue estos pasos:

• Habilita las cookies de terceros en tu navegador.
• Configura IDX para tu primer uso.
• Crea un lugar de trabajo.
• Configura tu lugar de trabajo.

Antes de comenzar

Antes de comenzar, es posible que debas habilitar las cookies de terceros en tu browser. Project IDX requiere cookies de terceros en la mayoría de los navegadores para autenticar los espacios 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 de Cookies de terceros para permitirlas temporalmente. Esto habilita las cookies en IDX durante 90 días.

Safari

1. Abre Safari > Configuración….
2. Desactiva los siguientes parámetros de configuración:
   • Configuración avanzada > Bloquear todas las cookies
   • Privacidad > Evitar el seguimiento entre sitios
3. Abre idx.google.com.

Firefox

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

Opera

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.

Arco

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.

Configura IDX

• 
• 
• 
• 

Si es la primera vez que usas IDX, deberás inicializarlo. Si ya usaste IDX con tu cuenta actual, puedes continuar con Crear un espacio de trabajo.

Para configurar IDX por primera vez, haz lo siguiente:

1. Abre Project IDX.

   La primera vez que abras IDX, se te pedirá que leas y aceptes las condiciones del servicio.

2. Revisa las Condiciones del Servicio de Google y los Términos y Condiciones del SDK de Android y, si los aceptas, habilita la casilla de verificación Acepto las Condiciones del Servicio de Google y los Términos y Condiciones del SDK de Android incorporados en este documento.

3. De manera opcional, habilita la recepción de actualizaciones y anuncios de productos, y participa en estudios de investigación para mejorar IDX.

4. Cuando se te solicite que habilites las funciones de IA, haz lo siguiente:

   • Para configurar la asistencia de IA en IDX para todos los espacios de trabajo, haz clic en Habilitar funciones de IA. Revisa la nota sobre la IA y la privacidad, haz clic en Continuar para habilitar las funciones de IA y abrir IDX, o haz clic en Atrás.

   • Para aplazar la asistencia de IA, haz clic en No ahora.

Se carga el panel de IDX. Ya está todo listo para crear un lugar de trabajo.

Nota: Puedes volver a habilitar las funciones de IA en cualquier momento.

Crea un lugar de trabajo

Un lugar de trabajo en IDX es un entorno de desarrollo que contiene todo lo 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 el desarrollo de apps. Es como crear un proyecto nuevo en tu entorno de desarrollo de escritorio local, excepto que tienes una computadora y un sistema operativo completos preconfigurados y dedicados exclusivamente a compilar tu aplicación, que se ejecuta en tu navegador en la nube y a la que puedes acceder desde cualquier lugar.

Los espacios de trabajo de Project IDX están optimizados para contener una sola base de código, por lo que puedes mantener los entornos y las dependencias a nivel del sistema de diferentes aplicaciones aisladas entre sí. Puedes crear varios espacios de trabajo para usarlos con diferentes aplicaciones y frameworks.

Punto clave: Existe un límite para la cantidad de espacios de trabajo que puedes crear. Si tienes un Perfil del desarrollador de Google, puedes crear hasta cinco espacios de trabajo. Para crear un perfil de desarrollador de Google directamente desde IDX después de alcanzar el límite de espacio 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. Decide qué método quieres usar para inicializar un nuevo espacio de trabajo. Si estás compilando una app nueva, puedes crear rápidamente un nuevo lugar de trabajo con los siguientes métodos:

   • Usa una plantilla oficial de IDX: Project IDX proporciona plantillas compatibles oficialmente que precargan tu espacio de trabajo con los archivos, paquetes y dependencias básicos que podrías necesitar. Puedes elegir entre plantillas para apps web, apps de servidor, apps para dispositivos móviles, servicios de IA y AA, bases de datos y mucho más, incluido un espacio de trabajo en blanco que inicializa un espacio de trabajo con dependencias mínimas.

   • Importa un repositorio de GitHub: Puedes importar un repositorio directamente desde GitHub.

   • Usa una plantilla de Comunidad. Project IDX mantiene plantillas de la comunidad, que están abiertas a las contribuciones de la comunidad. Si usas una plantilla de la comunidad, te recomendamos que compartas las modificaciones útiles o las plantillas nuevas que crees.

Plantillas oficiales

1. Explora las plantillas por tipo de aplicación o usa el cuadro de búsqueda en la parte superior derecha para filtrar la biblioteca completa de plantillas por palabra clave. La plantilla Espacio de trabajo en blanco está disponible en la categoría Misceláneo.

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

3. Haz clic en Crear. IDX crea un lugar de trabajo nuevo en función de la plantilla que seleccionaste.

Siempre agregamos plantillas nuevas, así que vuelve a consultar con frecuencia o cuéntanos lo que quieres ver.

Importación de repositorios de Git

1. Haz clic en Importar un repositorio.

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

3. Haz clic en Crear. IDX crea un lugar de trabajo nuevo según tus selecciones.

4. Si el repositorio es privado, se te solicitará que te autentiques en el proveedor correspondiente:

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

5. Ejecuta npm install (o flutter pub get) en la terminal de IDX después de importar tu proyecto.

   Nota: IDX no instala dependencias de forma predeterminada cuando importas un proyecto. Para cambiar esto, agrega un gancho onCreate que ejecute npm install (o flutter pub get) a tu archivo dev.nix. Después de agregar dev.nix al repositorio de tu proyecto, las dependencias se instalan cada vez que los usuarios importan tu repositorio a IDX.

Plantillas de la comunidad

1. Identifica la plantilla de comunidad que deseas usar y, luego, copia su URL.

2. Crea una URL de Project IDX de apertura instantánea con el siguiente formato:

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

   Por ejemplo, si deseas crear un espacio de trabajo nuevo con la plantilla de React de Three.js, usarás esta URL:

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

3. Haz clic en Crear. IDX crea un lugar de trabajo nuevo basado en la plantilla a la que te referiste.

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 de Nix entre los lugares de trabajo para cargar la misma configuración de 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 repositorio de código. En este archivo, se especifican todos los componentes que se agregarán a tu espacio de trabajo, incluidos los siguientes:

• Herramientas del sistema disponibles en el registro de paquetes de Nix, incluidos compiladores, paquetes (como go o angular) y utilidades de línea de comandos, como componentes adicionales de la CLI de gcloud.

• Extensiones de IDE del registro OpenVSX, como depuradores específicos para cada lenguaje, formateadores de código, extensiones oficiales para servicios en la nube y mucho más.

• Servicios comunes, como docker, la mensajería de Pub/Sub, bases de datos como Postgres y Redis, y más.

Consulta el siguiente ejemplo de archivo .idx/dev.nix para obtener una configuración básica del entorno de trabajo que habilita las vistas previas de apps 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";
        # Optionally, specify a directory that contains your web app
        # cwd = "app/client";
      };
    };
  };
}

Aplica la configuración nueva

Cada vez que agregues o actualices el archivo de configuración dev.nix, IDX 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 que necesite tu configuración.

Errores de compilación del entorno de depuración

Debido a que los archivos de configuración son código legible por máquinas, pueden tener errores. Si esto sucede, es posible que el entorno no se compile ni se inicie. IDX muestra una opción para iniciar un entorno de recuperación. Este espacio de trabajo no incluye ninguna de las configuraciones que definiste y solo ejecuta Code OSS básico. Esto te brinda la oportunidad de 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, debes solucionar el problema por tu cuenta.

Próximos pasos

• Obtén una vista previa de tu app

• Cómo compartir tu espacio de trabajo

• Cómo crear plantillas personalizadas para usar y compartir

• Usa un botón "Abrir en IDX" para compartir la configuración de tu lugar de trabajo o la plantilla personalizada