Начните работу с Project IDX

Project IDX предоставляет облачную среду для совместной разработки, которая упрощает процесс создания приложений благодаря практически безграничной комбинации платформ и библиотек .

После настройки рабочего пространства IDX вы можете за считанные секунды поделиться с командой полнофункциональной и гибкой средой разработки: рабочие пространства IDX доступны с любого устройства и оснащены интегрированными инструментами для оптимизации процесса разработки.

Чтобы начать:

• Включите сторонние файлы cookie в своем браузере .
• Настройте IDX для первого использования .
• Создайте рабочее пространство .
• Настройте свое рабочее пространство .

Прежде чем начать

Прежде чем начать, вам может потребоваться включить сторонние файлы cookie для вашего браузера. Project IDX требует наличия сторонних файлов cookie в большинстве браузеров для аутентификации рабочих областей.

Хром

1. Откройте Настройки .
2. Откройте вкладку Конфиденциальность и безопасность .
3. Убедитесь, что параметр «Разрешить все файлы cookie» включен.
4. Откройте idx.google.com .
5. Нажмите значок видимости в адресной строке Visibility_off , чтобы открыть панель «Защита от отслеживания» . Включите настройку «Сторонние файлы cookie» , чтобы временно разрешить использование сторонних файлов cookie. Это позволяет использовать файлы cookie на IDX в течение 90 дней.

Сафари

1. Откройте Safari > Настройки... .
2. Отключите следующие настройки:
   • Дополнительно > Блокировать все файлы cookie
   • Конфиденциальность > Запретить межсайтовое отслеживание
3. Откройте idx.google.com .

Firefox

Вам не нужно включать сторонние файлы cookie для Firefox. Перейдите на idx.google.com .

Опера

1. Откройте idx.google.com .
2. Откройте меню и нажмите «Настройки» .
3. Перейдите в раздел «Конфиденциальность и безопасность» и разверните параметр «Сторонние файлы cookie» .
4. Выберите «Блокировать сторонние файлы cookie в режиме инкогнито» или «Разрешить сторонние файлы cookie» .
5. Откройте idx.google.com .

Дуга

1. Перейдите в настройки arc:// .
2. Перейдите в раздел «Конфиденциальность и безопасность» и разверните параметр «Сторонние файлы cookie» .
3. Выберите «Блокировать сторонние файлы cookie в режиме инкогнито» или «Разрешить сторонние файлы cookie» .
4. Откройте idx.google.com .

Храбрый

Вам не нужно включать сторонние файлы cookie для Brave. Перейдите на idx.google.com .

Настроить IDX

• 
• 
• 
• 

Если вы используете IDX впервые, вам необходимо инициализировать IDX. Если вы уже использовали IDX со своей текущей учетной записью, вы можете перейти к созданию рабочей области .

Чтобы настроить IDX в первый раз:

1. Откройте проект IDX .

   При первом запуске IDX вам будет предложено прочитать и принять условия обслуживания.

2. Ознакомьтесь с Условиями использования Google и Условиями использования Android SDK и, если вы согласны, установите флажок Я принимаю Условия использования Google и Условия использования Android SDK, включенные в настоящий документ.

3. При желании вы можете подписаться на получение обновлений и объявлений о продуктах, а также участвовать в исследованиях по улучшению IDX.

4. При появлении запроса на включение функций AI:

   • Чтобы настроить поддержку ИИ в IDX для всех рабочих пространств, нажмите «Включить функции ИИ» . Прочтите примечание об искусственном интеллекте и конфиденциальности и нажмите « Продолжить», чтобы включить функции искусственного интеллекта и открыть IDX, или нажмите « Вернуться» .

   • Чтобы отложить помощь ИИ, нажмите Не прямо сейчас .

Панель управления IDX загружается. Теперь вы готовы создать рабочее пространство .

Совет. Вы можете повторно включить функции искусственного интеллекта в любое время.

Создайте рабочее пространство

Рабочая область в IDX — это среда разработки, содержащая все необходимое для разработки приложения. Он содержит ваш код, редактор кода (с плагинами, соответствующими вашему проекту) и наборы инструментов, поддерживающих разработку приложений. Это похоже на создание нового проекта в локальной среде разработки настольных компьютеров, за исключением того, что у вас есть весь компьютер и операционная система, предварительно настроенные и предназначенные исключительно для создания вашего приложения, работающие в вашем браузере в облаке и доступные, где бы вы ни находились.

Рабочие области Project IDX оптимизированы для использования единой базы кода, поэтому вы можете изолировать друг от друга среды и зависимости на уровне системы различных приложений. Вы можете создать несколько рабочих пространств для использования с разными приложениями и платформами.

Ключевой момент: существует ограничение на количество рабочих пространств, которые вы можете создать. Если у вас есть профиль разработчика Google , вы можете создать до пяти рабочих областей. Чтобы создать профиль разработчика Google непосредственно из IDX после достижения ограничения рабочего пространства, нажмите «Завершить настройку» в уведомлении на панели управления шаблоном.

Чтобы создать новую рабочую область, выполните следующие действия:

1. Откройте проект IDX .

2. Решите, какой метод вы хотите использовать для инициализации нового рабочего пространства. Если вы создаете новое приложение, вы можете быстро создать новое рабочее пространство, используя следующие методы:

   • Используйте официальный шаблон IDX. Project IDX предоставляет официально поддерживаемые шаблоны , которые предварительно загружают в ваше рабочее пространство основные файлы, пакеты и зависимости, которые могут вам понадобиться. Вы можете выбирать шаблоны для веб-приложений, серверных приложений, мобильных приложений, сервисов искусственного интеллекта и машинного обучения, баз данных и т. д., включая пустое рабочее пространство , которое инициализирует рабочее пространство с минимальными зависимостями.

   • Импортируйте репозиторий GitHub. Вы можете импортировать репозиторий непосредственно из GitHub.

   • Используйте шаблон сообщества . Project IDX поддерживает шаблоны сообщества , которые открыты для участия сообщества. Если вы используете шаблон сообщества, мы рекомендуем вам поделиться любыми полезными изменениями или новыми шаблонами, которые вы создаете .

Официальные шаблоны

1. Просмотрите шаблоны по типу приложения или используйте поле поиска в правом верхнем углу, чтобы отфильтровать всю библиотеку шаблонов по ключевому слову. Шаблон «Пустое рабочее пространство» доступен в категории «Разное» .

2. Введите имя своего рабочего пространства и задайте любые дополнительные параметры.

3. Нажмите Создать . IDX создает новое рабочее пространство на основе выбранного вами шаблона.

Мы постоянно добавляем новые шаблоны, поэтому следите за обновлениями или расскажите нам, что вы хотите увидеть.

Импорт репозитория Git

1. Нажмите Импортировать репозиторий .

2. Введите URL-адрес репо . Репозиторий может быть размещен на GitHub, GitLab или Bitbucket.

3. Нажмите Создать . IDX создает новое рабочее пространство на основе вашего выбора.

4. Если репозиторий является частным, вам будет предложено пройти аутентификацию у соответствующего провайдера:

   • Для GitHub следуйте инструкциям, чтобы скопировать токен доступа.
   • Для GitLab вы можете использовать пароль своей учетной записи или создать токен личной учетной записи.
   • Для Bitbucket используйте свое имя пользователя (не адрес электронной почты) и пароль приложения для аутентификации.

5. Запустите npm install (или flutter pub get ) в терминале IDX после импорта проекта.

   Совет: IDX не устанавливает зависимости по умолчанию при импорте проекта. Чтобы изменить это, добавьте перехватчик onCreate , который запускает npm install (или flutter pub get ) в ваш файл dev.nix . После добавления dev.nix в репозиторий проекта зависимости устанавливаются всякий раз, когда пользователи импортируют ваш репозиторий в IDX.

Шаблоны сообществ

1. Определите шаблон сообщества , который вы хотите использовать, затем скопируйте его URL-адрес.

2. Создайте мгновенно открываемый URL-адрес Project IDX в следующем формате:

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

   Например, если вы хотите создать новое рабочее пространство с помощью шаблона Three.js React, вы должны использовать этот URL-адрес:

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

3. Нажмите Создать . IDX создает новое рабочее пространство на основе шаблона, на который вы ссылаетесь.

Настройте свое рабочее пространство

IDX использует Nix для определения конфигурации среды для каждого рабочего пространства. Nix — это чисто функциональный менеджер пакетов, который присваивает уникальные идентификаторы каждой зависимости, что в конечном итоге означает, что ваша среда может беспрепятственно содержать несколько версий одной и той же зависимости. Он также воспроизводим и декларативен. В контексте IDX это означает, что вы можете использовать файл конфигурации Nix в разных рабочих областях для загрузки одной и той же конфигурации среды. Узнайте больше о Nix + IDX .

Создайте или отредактируйте файл .idx/dev.nix

Конфигурация среды определяется в файле .idx/dev.nix в вашем репозитории кода. В этом файле указаны все компоненты, которые будут добавлены в ваше рабочее пространство, включая:

• Системные инструменты, доступные в реестре пакетов Nix , включая компиляторы, пакеты (например, go или angular ) и утилиты командной строки, такие как дополнительные компоненты gcloud CLI .

• Расширения IDE из реестра OpenVSX , такие как отладчики для конкретных языков, средства форматирования кода, официальные расширения для облачных сервисов и многое другое.

• Общие сервисы , такие как Docker, обмен сообщениями Pub/Sub, базы данных, такие как Postgres и Redis, и многое другое .

См. следующий пример файла .idx/dev.nix для базовой конфигурации среды рабочей области, которая обеспечивает предварительный просмотр приложений в 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";
      };
    };
  };
}

Применить новую конфигурацию

Каждый раз, когда вы добавляете или обновляете файл конфигурации dev.nix , IDX отображает в правом нижнем углу запрос «Перестроить среду» . Время, необходимое для перестройки среды, зависит от количества пакетов, необходимых вашей конфигурации.

Ошибки сборки среды отладки

Поскольку файлы конфигурации представляют собой машиночитаемый код, они могут содержать ошибки. Если это произойдет, среда может не собраться и не запуститься. IDX отображает возможность запуска среды восстановления . Это рабочее пространство не включает в себя какую-либо определенную вами конфигурацию и просто запускает базовый код OSS. Это дает вам возможность исправить ошибки в файле конфигурации dev.nix и перестроить среду.

IDX в конечном итоге обнаружит ошибки сборки среды. На данный момент вам придется устранять неполадки самостоятельно.

Следующие шаги

• Предварительный просмотр вашего приложения

• Поделитесь своим рабочим пространством

• Создавайте собственные шаблоны для использования и обмена

• Используйте кнопку «Открыть в IDX», чтобы поделиться конфигурацией рабочей области или пользовательским шаблоном.