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

1. Введение

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

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

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

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

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

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

  • Веб-браузер, например Chrome.
  • Проект Google Cloud с включенной функцией выставления счетов.
  • Установлен Node.js (рекомендуется версия 18+).
  • Локальный редактор кода, например Visual Studio 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. Установите Gemini CLI и Conductor локально.

На этом этапе вы подготовите локальную среду разработки , установив Gemini CLI и расширение Conductor с помощью локального редактора кода и терминала.

Установите Gemini CLI.

  1. Установите последнюю версию Gemini CLI глобально с помощью npm: 
    npm install -g @google/gemini-cli
  2. Перезагрузите терминал , чтобы gemini был добавлен в переменную PATH.
  3. Убедитесь, что в процессе установки установлена ​​последняя версия : 
    gemini --version
  4. Создайте и перейдите в новую директорию проекта : В следующем разделе мы создадим проект в директории, созданной picker-wheel . Создайте эту директорию сейчас и перейдите в следующую директорию: 
    mkdir picker-wheel
cd picker-wheel
  5. Аутентификация :
    • Запустите Gemini CLI. 
      gemini
    • Когда появится вопрос "Доверяете ли вы файлам в этой папке?", выберите "Доверять папке" (значок шестеренки).
    • Когда вас спросят: «Как вы хотите пройти аутентификацию для этого проекта?», выберите Vertex AI . Следуйте руководству по аутентификации , чтобы получить ключ API Google Cloud и установить переменную среды GOOGLE_API_KEY . Ознакомьтесь с различными уровнями использования и соответствующими им ограничениями скорости запросов к API.
  6. Выход из Gemini CLI : Чтобы завершить сеанс работы с Gemini CLI в режиме реального времени, введите команду /quit в терминале CLI.

Установите удлинитель проводника.

Conductor — это разработанное Google расширение для Gemini CLI с открытым исходным кодом, которое обеспечивает контекстно-ориентированные функции разработки, такие как планирование и отслеживание реализации.

  1. Установите расширение : 
    gemini extensions install https://github.com/gemini-cli-extensions/conductor
  2. Проверьте установку :
    • Запустите Gemini CLI. 
      gemini
    • Введите /conductor , и вы увидите список команд, таких как setup , newTrack , implement и т. д.
  3. Выход из Gemini CLI : Чтобы завершить сеанс работы с Gemini CLI в режиме реального времени, введите команду /quit в терминале CLI.

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

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

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

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

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

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

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

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

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

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

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

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

  1. В следующем примере "модернизированной инфраструктуры" мы будем использовать Firebase для аутентификации и хранения данных. Установите расширение Firebase для Gemini CLI, чтобы Conductor мог его использовать. 
    gemini extensions install https://github.com/gemini-cli-extensions/firebase
  2. Запуск Gemini CLI : Начните новую сессию Gemini CLI из каталога вашего проекта. 
    gemini
  3. Начать новый трек : Начать новый трек. 
    /conductor:newTrack "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. Реализация : Если всё выглядит хорошо, можно начинать реализацию. 
    /conductor:implement
  7. Проверка : Перезагрузите приложение. Вы должны увидеть обновленное приложение.Колесо выбора с возможностью входа

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

6. Уборка

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

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

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

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

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

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

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

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

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