Планируйте и создавайте приложения с помощью плагина Conductor.

1. Введение

В этом практическом занятии вы научитесь планировать и создавать программные приложения с помощью плагина Conductor . Conductor — это разработанный Google плагин с открытым исходным кодом, который позволяет использовать функции разработки, основанной на спецификациях, такие как планирование и отслеживание реализации. Вы начнете с создания приложения «с нуля». Затем вы будете рассматривать его как проект «на стадии разработки», внося в него изменения для добавления аутентификации и хранилища данных.

Что вы будете делать

  • Установите плагин Conductor в Antigravity CLI или Claude Code.
  • Создайте веб-приложение типа "Picker Wheel" с нуля, используя возможности планирования и реализации Conductor.
  • Добавьте персонализацию в приложение, внедрив аутентификацию и хранение данных с помощью Firebase.

Что вы узнаете

  • Как использовать плагин Conductor для планирования, реализации и анализа нового приложения.
  • Как использовать плагин Conductor для добавления функций в уже существующее приложение.

Что вам понадобится

  • Веб-браузер, например Chrome.
  • Проект Google Cloud с включенной функцией выставления счетов.
  • Установлен Node.js (рекомендуется версия 18+).
  • Локальный редактор кода, например Visual Studio Code.
  • Агент для программирования, например, Antigravity CLI или Claude Code.

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

Создайте проект в Google Cloud.

  1. В консоли Google Cloud на странице выбора проекта выберите или создайте проект Google Cloud .
  2. Убедитесь, что для вашего облачного проекта включена функция выставления счетов. Узнайте, как проверить, включена ли функция выставления счетов для проекта .

Запустить Cloud Shell

Cloud Shell — это среда командной строки, работающая в Google Cloud и поставляемая с предустановленными необходимыми инструментами.

  1. В верхней части консоли Google Cloud нажмите кнопку «Активировать Cloud Shell» .
  2. После подключения к Cloud Shell подтвердите свою аутентификацию: 
    gcloud auth list
  3. Убедитесь, что ваш проект настроен: 
    gcloud config get project
  4. Если параметры вашего проекта заданы не так, как ожидалось, настройте их следующим образом: 
    export PROJECT_ID=<YOUR_PROJECT_ID>
gcloud config set project $PROJECT_ID

Включить API

Включите Firebase Management API в своем проекте Google Cloud.

gcloud services enable firebase.googleapis.com

Добавьте Firebase в свой проект.

Интерфейс командной строки Firebase CLI предустановлен в Cloud Shell. В Cloud Shell войдите в систему, используя ту же учетную запись Google, которая предоставляет вам доступ к проекту Google Cloud. Если вы работаете локально, установите Firebase CLI, следуя инструкциям .

firebase login

Выполните следующую команду, чтобы добавить Firebase в свой проект Google Cloud:

firebase projects:addfirebase

Если вы впервые используете firebase CLI, ответьте на все заданные вопросы.

Выход из облачной оболочки

Вы можете закрыть окно Cloud Shell. В следующем разделе мы настроим вашу локальную среду.

3. Установите и аутентифицируйте агенты CLI для программирования.

На этом этапе вы подготовите локальную среду разработки , установив и авторизовав Antigravity CLI или Claude Code в локальном редакторе кода, используя свои учетные данные Google Cloud.

Установите и аутентифицируйте Antigravity CLI.

  1. Установите последнюю версию Antigravity CLI . 
    # MacOS and Linux
curl -fsSL https://antigravity.google/cli/install.sh | bash

# Windows Powershell
irm https://antigravity.google/cli/install.ps1 | iex

# Windows CMD
curl -fsSL https://antigravity.google/cli/install.cmd -o install.cmd && install.cmd && del install.cmd
  2. Перезагрузите терминал , чтобы agy был добавлен в переменную PATH.
  3. Убедитесь, что в процессе установки установлена ​​последняя версия . 
    agy --version
  4. Пройдите аутентификацию, используя свои учетные данные Google Cloud.
    • Запустите интерфейс командной строки Antigravity. 
      agy
    • Когда появится запрос на выбор способа входа , выберите «Использовать проект Google Cloud» . Откройте защищенный URL-адрес авторизации в веб-браузере. Войдите в систему, используя утвержденные учетные данные, и завершите аутентификацию. Браузер отобразит уникальный буквенно-цифровой код авторизации. Скопируйте этот код, вернитесь в терминал и вставьте его в командную строку.
  5. Завершите работу Antigravity CLI , введя команду /exit в терминале CLI, прежде чем продолжить.

Установите и аутентифицируйте код Клода.

В качестве альтернативы вы можете использовать плагин Conductor с Claude Code. Здесь мы установим и аутентифицируем Claude Code, используя ваши учетные данные Google Cloud.

  1. Установите последнюю версию Claude Code .
  2. Пройдите аутентификацию, используя свои учетные данные Google Cloud.
    • Начать код Клода. 
      claude
    • Введите /login , чтобы выбрать способ входа. Выберите вариант «Сторонняя платформа»: Amazon Bedrock, Microsoft Foundry или Vertex AI и Google Vertex AI . Для настройки Google Vertex AI выберите «Учетные данные приложения по умолчанию (аутентификация Google)» и завершите настройку в соответствии с подсказками.
  3. Перезапустите код Клода .

4. Установите плагин Conductor.

Conductor — это разработанный Google плагин с открытым исходным кодом, который обеспечивает возможности разработки, основанной на технических требованиях, такие как планирование и отслеживание реализации.

Установка через Antigravity CLI

  1. Установите плагин :
    • Антигравитационный CLI 
      agy plugins install https://github.com/gemini-cli-extensions/conductor
  2. Проверьте установку :
    • Запустите интерфейс командной строки Antigravity. 
      agy
    • Введите /conductor , и вы увидите список команд, таких как /conductor:conductor-setup , /conductor:conductor-new-track , conductor:conductor-implement и т. д.
  3. Выйдите из командной строки . Введите /exit в терминале, чтобы завершить сеанс работы с командной строкой, прежде чем продолжить.

Установка в коде Клода

  1. Зарегистрируйте репозиторий на торговой площадке и установите плагин Conductor непосредственно в своей сессии Claude Code. 
    /plugin marketplace add gemini-cli-extensions/conductor
/plugin install conductor
/reload-plugin
  2. Проверьте установку .
    • Введите /conductor , и вы увидите список команд, таких как /conductor-setup , conductor-new-track , conductor-implement и т. д.
  3. Выйдите из командной строки . Введите /exit в терминале Claude Code, чтобы завершить сеанс работы с командной строкой перед продолжением.

5. Развитие новых территорий: Колесо Пикера

Теперь, когда ваша среда настроена, вы создадите новое приложение с нуля. Вы создадите «Колесо выбора» — легковесное веб-приложение, которое вращается, чтобы выбрать случайный вариант.

Настройка контекста продукта

  1. Создайте и перейдите в новую директорию проекта . Теперь мы работаем над проектом в директории, расположенной в picker-wheel . Создайте эту директорию и перейдите в неё. 
    mkdir picker-wheel
cd picker-wheel
  2. Запустите Antigravity CLI . Начните новую сессию CLI из каталога вашего проекта, используя либо Antigravity CLI, либо Claude Code. 
    # Antigravity CLI
agy

# Claude Code
claude
    • Когда появится вопрос "Доверяете ли вы файлам в этой папке?", выберите "Доверять папке" (значок шестеренки).
  3. Инициализируйте Conductor . Выполните команду setup, чтобы создать структуру проекта и настроить среду Conductor. 
    # Antigravity CLI
/conductor:conductor-setup

# Claude Code
/conductor-setup
  4. Следуйте интерактивным подсказкам . Интерактивные подсказки, которые вы видите, не будут точно соответствовать этим примерам. Сосредоточьтесь на более простом проекте, чтобы ознакомиться с рабочим процессом Conductor.
    • Цель продукта : Веб-приложение, отображающее настраиваемое вращающееся колесо для выбора случайного элемента из списка.
      • Целевая аудитория → Широкая публика
      • Взаимодействие → Нажмите/щелкните, чтобы повернуть
      • Настройка → Базовая
      • Платформа → Ориентирована на настольные компьютеры
    • Рекомендации по продукту : Автоматическая генерация.
    • Технологический стек :
      • Языки программирования → TypeScript/JavaScript — идеально подходит для разработки полнофункциональных веб-приложений.
      • Фронтенд → Vue.js - Интуитивно понятные веб-интерфейсы
      • Бэкенд → Express.js - Быстрый бэкенд на Node.js
      • База данных → Нет - База данных не требуется
    • Рабочий процесс : Стандартный.
    • Требования к продукту :
      • Пользовательские истории → Настраиваемые параметры, четкое отображение победителя
      • Основные характеристики → Редактируемый список параметров, случайные цвета
      • Ограничения → Только на стороне клиента, высокая производительность
      • Нефункциональный → Высокое покрытие тестами, TypeScript и Vue.js, адаптивный дизайн
    Conductor будет генерировать контекстные файлы в каталоге conductor/ .

Создать новый трек

В Conductor "трек" обозначает элемент или единицу работы.

  1. Начните создание новой дорожки, используя /conductor-new-rack . Conductor может предложить начальную дорожку, исходя из контекста продукта. В качестве альтернативы вы можете предложить свою собственную или попросить Conductor предложить дорожку.
  2. Просмотрите сгенерированный план . Conductor создаст файлы index.md , spec.md и plan.md в папке conductor/tracks/{track-id}/ . Уделите немного времени, чтобы прочитать их. Если все выглядит хорошо, Conductor предложит вам сохранить и подтвердить начальные файлы настройки.

Внедрить трек

  1. Начало реализации .
    # Antigravity CLI
/conductor:conductor-implement

# Claude Code
/conductor-implement
    Теперь конструктор займется реализацией плана, написав код для проекта.
  2. Проверьте приложение . На протяжении всего этапа внедрения Conductor будет предлагать вам вручную протестировать приложение. Например, он попросит вас открыть локальный веб-сервер, просмотреть приложение в браузере и проверить внесенные изменения. После завершения внедрения вы должны увидеть работающее колесо выбора. Применение колеса для захвата
  3. Проверьте реализацию . В качестве последнего шага вы можете попросить Conductor проверить реализацию. Он должен проверить исходный код, синхронизировать документацию проекта и заархивировать трек. 
    # Antigravity CLI
/conductor:conductor-review

# Claude Code
/conductor-review

6. Итерация освоения существующих территорий: добавление персонализации.

Теперь перейдём к разработке "заброшенного" программного обеспечения. Вы улучшите веб-приложение для выбора настроек из предыдущего раздела, чтобы авторизованные пользователи могли сохранять и восстанавливать свои конфигурации выбора настроек.

Создать трек персонализации

  1. В следующем примере "модернизированной инфраструктуры" мы будем использовать Firebase для аутентификации и хранения данных. Установите необходимые навыки Firebase , чтобы Conductor мог их использовать.
  2. Запустите агент командной строки . Начните новую сессию командной строки. 
    # Antigravity CLI
/new

# Claude Code
/new
  3. Начать новый трек . Начать новый трек. 
    # Antigravity CLI
/conductor:conductor-new-track "I want users to be able to log in to their
accounts and save their picker wheel configurations."

# Claude Code
/conductor-new-track "I want users to be able to log in to their accounts
and save their picker wheel configurations."
  4. Следуйте интерактивным подсказкам . Интерактивные подсказки, которые вы видите, не будут точно соответствовать этим примерам. Сосредоточьтесь на более простом проекте, чтобы ознакомиться с рабочим процессом Conductor.
    • Цель трассы :
      • Поставщик аутентификации → Firebase Auth
      • Сохраненные настройки → Параметры колеса
      • Хранилище данных → Firestore
      • Интерфейс входа в Firestore → Модальное окно
    Conductor сгенерирует контекстные файлы для нового трека в папке conductor/tracks/{track-id} .
  5. Просмотрите сгенерированный план . Уделите немного времени чтению файлов index.md , spec.md и plan.md расположенных в папке conductor/tracks/{track-id}/ .
  6. Внедрить . Если всё выглядит хорошо, можно начинать внедрение. 
    # Antigravity CLI
/conductor:conductor-implement

# Claude Code
/conductor-implement
  7. Проверьте и перезагрузите приложение. Вы должны увидеть обновленное приложение.Колесо выбора с возможностью входа

Вот эталонный код для реализации. Для корректного запуска приложения необходимо указать ваш проект Firebase в .firebaserc и конфигурацию Firebase в firebase.ts .

7. Уборка

Чтобы избежать дальнейших списаний средств с вашего аккаунта Google Cloud, удалите ресурсы, созданные в ходе этого практического занятия.

Удалите проект Firebase и проект Google Cloud.

Самый простой способ навести порядок — полностью удалить проект.

  1. В консоли Google Cloud выберите созданный вами проект.
  2. Нажмите УДАЛИТЬ .

В качестве альтернативы, если вы хотите сохранить проект, но удалить ресурсы:

  1. Удаление базы данных Firestore : перейдите в консоль Firebase > Firestore и удалите базу данных.
  2. Отключите аутентификацию : перейдите в консоль Firebase > Метод аутентификации , отключите Google .

8. Поздравляем!

Поздравляем! Вы успешно использовали плагин Conductor в выбранном вами агенте программирования (Antigravity CLI или Claude Code) для создания веб-приложения с нуля, а затем доработали его, добавив сложные функции, такие как аутентификация и интеграция с базой данных.

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