Использование Duet AI на протяжении всего жизненного цикла разработки программного обеспечения

1. Обзор

День в жизни разработчика Google Cloud обычно включает в себя использование нескольких продуктов и сервисов Google Cloud. Эти продукты позволяют разработчикам разрабатывать, тестировать, развертывать приложения и управлять ими в облаке. С помощью Duet AI разработчик может повысить продуктивность использования продуктов Google Cloud, используя интерактивный чат Duet AI, помощь по коду и встроенные интеграции.

В этой лаборатории используется искусственный интеллект Duet для развертывания продуктового веб-приложения Cymbal Superstore. Затем вы разработаете и развернете новую функцию, а также создадите интерфейсную и серверную часть приложения. Вы также получите помощь Duet в написании тестов для вашего приложения и увидите, как Duet можно интегрировать с другими инструментами Google Cloud.

Цели

Вы узнаете, как:

  • Улучшите существующее веб-приложение с помощью Duet AI.
  • Разверните приложение в Cloud Run.
  • Предложите Duet AI объяснить ошибку в приложении и предоставить исправление.
  • Разработайте тесты для приложения с помощью Duet AI.
  • Просматривайте журналы приложений с помощью Duet AI.

Предварительные условия

  • Аккаунт Google Cloud Platform и проект с включенной оплатой
  • Базовый опыт работы с Linux

2. Настройка

В этом разделе описано все, что вам нужно сделать, чтобы начать работу с этой лабораторной работой.

Создать проект

Чтобы упростить очистку, давайте создадим новый облачный проект Google.

  • Перейдите на https://console.cloud.google.com .
  • Нажмите на раскрывающийся список выбора проекта.
  • Выберите Создать проект.
  • Дайте ему запоминающееся имя, например, введение в контейнеры.

Включите Duet AI в проекте Google Cloud

Теперь мы включим Duet AI API в нашем проекте Google Cloud. Следуйте инструкциям ниже:

  1. Перейдите на панель управления вашего визита https://console.cloud.google.com и убедитесь, что вы выбрали проект Google Cloud, с которым планируете работать для этой лабораторной работы. Нажмите на значок Duet AI, который вы видите в правом верхнем углу.

a4d8a7253b056abb.png

  1. Окно чата Duet AI откроется в правой части консоли. Нажмите кнопку «Включить», как показано ниже. Если вы не видите кнопку «Включить» и вместо этого видите интерфейс чата, вполне вероятно, что вы уже включили Duet AI для проекта и можете сразу перейти к следующему шагу.

58296b10f18b7a37.png

  1. Как только он будет включен, вы сможете протестировать Duet AI, задав ему один или два запроса. Показаны несколько примеров запросов, но вы можете попробовать что-то вроде «Что такое Cloud Run?»

8953fb4afeeddb1a.png

Duet AI ответит на ваш вопрос. Вы можете нажать на значок _ в правом верхнем углу, чтобы закрыть окно чата Duet AI.

Включите ИИ Duet в Cloud Shell IDE

Для остальной части работы над кодом мы будем использовать Cloud Shell IDE. Нам необходимо включить и настроить Duet AI в Cloud Shell IDE, шаги приведены ниже:

  1. Запустите Cloud Shell с помощью значка, показанного ниже. Запуск экземпляра Cloud Shell может занять минуту или две.

3b59c357d06c5ab1.png

  1. Нажмите кнопку «Редактор» или «Открыть редактор» (в зависимости от обстоятельств) и подождите, пока не появится Cloud Shell IDE. Вы будете использовать «новый» редактор, а не устаревший редактор.

а54576c01be31a97.png

  1. Нажмите кнопку Cloud Code — Войти в нижней строке состояния, как показано на рисунке. Авторизуйте плагин согласно инструкциям. Если в строке состояния вы видите «Cloud Code — нет проекта», выберите его, а затем выберите конкретный проект Google Cloud из списка проектов, с которыми вы планируете работать.

9b77ab79e8c135e6.png

  1. Нажмите кнопку Duet AI в правом нижнем углу, как показано, и выберите правильный проект Google Cloud, для которого мы включили Cloud AI Companion API.

afa42f64a331ad70.png

  1. После того, как вы выберете и авторизуете свой проект Google Cloud, убедитесь, что вы видите это в сообщении о состоянии Cloud Code в строке состояния и что у вас также включен Duet AI справа в строке состояния, как показано ниже:

11656bd6a7ddfea4.png

Duet AI готов к использованию!

3. Использование дуэта AI

В рамках этой лабораторной работы вы будете создавать веб-приложение. Лаборатория указывает множество мест, где можно попробовать Duet. Но если вам интересно, вы также можете найти время и спросить Дуэта в любом месте лаборатории.

Например, вы будете использовать Terraform для создания и развертывания базового приложения. Если вы не знаете, что такое Terraform, вы можете спросить Duet. Если вы хотите понять, что делает каждый из шагов, Duet может их объяснить. Хотите действительно открыть код и спросить о конкретных строках? Попробуйте Дуэт.

4. Создайте веб-приложение

В этой лаборатории используется продуктовое веб-приложение Cymbal Superstore. В последующих задачах этой лабораторной работы вы будете использовать Duet AI для разработки и развертывания новой функции в этом приложении. Прежде чем вы сможете увидеть, как Duet AI помогает вам понять существующий код, вам понадобится некоторый существующий код для работы, поэтому сейчас вы создадите внешние и внутренние компоненты этого приложения.

Работая над этим проектом, вы будете перемещаться между Cloud Shell и редактором Cloud Shell. Самый простой способ сделать это — использовать кнопки в верхней части экрана:

750038c738f1f405.png

Настройка среды

Выполните команды в Cloud Shell.

  1. Установите идентификатор проекта:
gcloud config set project <Google Cloud Project ID>
  1. Чтобы запустить помощник по учетным данным Docker, выполните следующую команду:
gcloud auth configure-docker
  1. Если вас спросят, хотите ли вы продолжить, введите Y.
  2. Чтобы загрузить код приложения Cymbal Superstore, выполните следующую команду из корневого каталога Cloud Shell. Он получит код Cymbal Superstore с Github.
git clone https://github.com/GoogleCloudPlatform/cymbal-superstore
  1. Для правильной работы этого кода вам потребуется включить несколько API. В Cloud Shell введите следующую команду:
gcloud services enable cloudresourcemanager.googleapis.com compute.googleapis.com artifactregistry.googleapis.com serviceusage.googleapis.com run.googleapis.com bigquery.googleapis.com 
  1. Перейдите в каталог Terraform в загруженном коде:
cd cymbal-superstore/terraform
  1. Поскольку в этой лабораторной работе не будет использоваться Spanner, мы будем использовать версию инструкций Terraform, в которой Spanner не устанавливается. В Cloud Shell введите следующую команду:
mv main.tf.nospanner main.tf
  1. Чтобы избежать необходимости вводить имя и номер вашего проекта каждый раз при запуске команды Terraform, создайте файл с именем terraform.tfvars в этом каталоге terraform . Добавьте в этот файл две строки с информацией ниже и сохраните файл. Эту информацию вы можете найти в панели управления проекта.
project_id="Your project id"
project_number=Your project number
  1. Инициализируйте Terraform с помощью строки:
terraform init
  1. Наконец, разверните ресурсы Terraform в своем проекте, используя команду ниже. Во время этого развертывания вам может быть предложено ввести «да». Это может занять до 10 минут, поэтому вы можете потратить время на изучение диаграммы архитектуры по адресу https://github.com/GoogleCloudPlatform/cymbal-superstore/blob/main/assets/architecture.png . Вы также можете взглянуть на существующий код и использовать Duet, чтобы помочь нам понять его.
terraform apply

После успешного завершения этой команды вы должны увидеть вывод, аналогичный следующему:

9c9d2378167312eb.png

  1. Обновите свой интерфейс, чтобы он взаимодействовал с серверной частью inventory_cr_endpoint в ваших выходных данных. Для этого скопируйте значение вашего inventory_cr_endpoint , откройте cymbal-superstore/frontend/.env.production и замените значение REACT_APP_INVENTORY_URL .
  2. Перезапустите terraform apply . Это займет всего минуту, так как ваше внешнее приложение React будет повторно развернуто в Cloud Storage с использованием обновленного внутреннего URL-адреса.
  3. Откройте ваш frontend_ip в браузере. Вы должны увидеть интерфейс Cymbal Superstore. Для распространения изменений может потребоваться несколько минут, поэтому вам, возможно, придется проверить несколько раз.

b864d3efe9a26eaa.png

  1. Нажмите «Новые поступления» в левой части главной страницы Cymbal. Вы должны увидеть макет страницы с заполнителями продуктов. Это ожидаемо, поскольку в следующей задаче этой лабораторной работы вы будете реализовывать серверный код API инвентаризации для обслуживания страницы новых продуктов.

f4d7579f73ee8ed2.png

5. Измените серверную часть веб-приложения.

Давайте теперь воспользуемся Duet AI, чтобы добавить функциональность серверной части нашего веб-приложения.

В этой задаче вы предлагаете Duet AI завершить код для реализации конечной точки /newproducts в приложении. Вы создадите конечную точку на серверной стороне для получения новых продуктов из Firestore и протестируете эту конечную точку перед развертыванием изменения.

Разработка конечной точки /newproducts

  1. Откройте файл cymbal-superstore/backend/index.ts в редакторе Cloud Shell.
  2. В файле index.ts прокрутите до комментария к DEMO TASK START около строки 95, где вы увидите группу строк, закомментированных для этой задачи. Удалите все строки с комментариями и замените их следующей подсказкой Duet AI:
// Get new products from Firestore (added < 7 days ago) and quantity > 0 (in stock)
  1. Чтобы предложить Duet AI сгенерировать код функции, выделите весь комментарий, а затем щелкните лампочку ( Лампа Code OSS Duet AI ).
  2. В меню Дополнительные действия выберите Создать код.
  3. Наведите указатель мыши на сгенерированный код и на панели инструментов Duet AI нажмите «Принять». Duet AI заполняет код функции для конечной точки /newproducts.

Примечание. Duet AI может создать несколько версий кода для вашего приглашения. Выбрать конкретную версию можно, пролистав список на панели инструментов.

  1. Сгенерированный код должен быть похож на следующий:
app.get("/newproducts", async (req: Request, res: Response) => {
  const products = await firestore
    .collection("inventory")
    .where("timestamp", ">", new Date(Date.now() - 604800000))
    .where("quantity", ">", 0)
    .get();
  const productsArray: any[] = [];
  products.forEach((product) => {
    const p: Product = {
      id: product.id,
      name: product.data().name,
      price: product.data().price,
      quantity: product.data().quantity,
      imgfile: product.data().imgfile,
      timestamp: product.data().timestamp,
      actualdateadded: product.data().actualdateadded,
    };
    productsArray.push(p);
  });
  res.send(productsArray);
});

Многие строки могут быть подчеркнуты, чтобы предупредить вас о потенциальных проблемах с лицензированием. Для этой лабораторной работы вы можете применить быстрое исправление, но в будущем проверяйте эти предупреждения!

  1. Если сгенерированный код не похож на пример на предыдущем шаге, вы можете заменить его сейчас или посмотреть, как Duet может помочь в отладке позже. Также есть версия кода с ожидаемой ошибкой в ​​файле scripts/solutioncode-with-bug.ts .
  2. Сохраните файл index.ts .

Тестирование и отладка конечной точки /``newproducts

  1. В Cloud Shell перейдите в каталог cymbal-superstore/backend . Введите команду:
npm run start

Это запустит конечную точку.

  1. Чтобы увидеть результаты конечной точки, откройте другой терминал, используя + в строке меню Cloud Shell, и выполните команду:
curl localhost:8000/newproducts

Вы можете увидеть ошибку curl: (52) Empty reply from server в новом терминале и длинное сообщение об ошибке с подробностями 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' в терминале, на котором работает конечная точка.

  1. Давайте исправим эту ошибку. Но сначала нам нужно понять, что означает сообщение об ошибке. Для этого мы спросим Duet. Откройте чат Duet AI из меню в левой части редактора Cloud Shell и задайте следующие вопросы:
I'm querying Cloud Firestore and getting this error: 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' What does it mean?

Duet должен предоставить вам несколько вариантов исправления, включая удаление одного из фильтров неравенства. Чтобы решить эту проблему, удалите строку .where("quantity", ">", 0) из index.ts , чтобы в нашем запросе был только один фильтр.

  1. Повторите первые два шага выше, чтобы перезагрузить сервер и получить список продуктов. Теперь все должно быть успешно, но если нет, используйте Duet, чтобы выяснить проблему (или используйте исправленное решение в scripts/solutioncode-bug-fixed.ts чтобы двигаться дальше).

Развертывание изменения

Чтобы развернуть измененное приложение, просто перезапустите terraform apply из каталога terraform в Cloud Shell. Затем вы сможете просмотреть приложение по IP-адресу, предоставленному Terraform.

6. Написание тестов

Важная задача, которой часто не уделяется приоритетное внимание, — создание тестов кода в проекте. Как вы, возможно, догадались, Duet может помочь в создании этих тестов.

Давайте создадим тесты для только что созданного кода newproducts .

  1. Откройте backend/index.test.ts . Используйте чат Duet AI для создания теста функции newproducts() с приглашением:
Help me write an Express.js test using Jest, in typescript, for the GET /newproducts handler in index.ts. Should check if the response code is 200 and the list of new products is length 8.

Вы заметите, что он предоставляет строки import , которые уже есть в файле. Скопируйте только тест describe() в файл в указанные строки. Сохраните файл.

В качестве альтернативы вы можете улучшить приглашение и указать Duet не включать операторы импорта, чтобы вы получали только тот код, который вам нужен.

  1. Чтобы увидеть результаты теста, зайдите в Cloud Shell, измените каталог на backend папку и выполните команду:
npm run test

7. Ведение журнала

Duet AI может помочь вашему проекту даже после его развертывания. В этом разделе мы рассмотрим логи с помощью Duet AI.

Вернитесь в облачную консоль и убедитесь, что Duet запущен. Спросите Дуэта, где найти логи. Не стесняйтесь попробовать свою собственную подсказку, но если она не дает подходящего ответа, следующая подсказка должна сработать.

How can I view the Cloud Run logs for the service called 'inventory'?

Duet AI должен предложить перейти на страницу Cloud Run, выбрать службу инвентаризации, а затем изучить журналы этой службы. Вы должны увидеть что-то вроде:

b7c50b67e49ee71a.png

Выберите один из предметов и попросите Duet AI объяснить его. Вы должны получить описание записи на естественном языке.

Вы также можете просмотреть записи журнала в обозревателе журналов, который можно открыть с помощью параметра «Ведение журнала» в главном меню. Преимущество просмотра записей журнала из обозревателя журналов заключается во встроенной возможности объяснения записей, как показано ниже:

2574adab06524ad4.png

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

Поздравляем: вы успешно использовали Duet AI, чтобы понять код, который вы, возможно, никогда раньше не видели. Вы усовершенствовали этот код, создали для него тесты и использовали Duet для понимания записей журнала.

Очистка

Удалить проект

Для очистки мы просто удаляем наш проект.

  • В меню навигации выберите IAM & Admin.
  • Затем нажмите на настройки в подменю.
  • Нажмите на значок корзины с текстом «Удалить проект».
  • Следуйте инструкциям подсказок

В этой лабораторной работе мы увидели, как:

  • Улучшите существующее веб-приложение с помощью Duet AI.
  • Разверните приложение в Cloud Run.
  • Предложите Duet AI объяснить ошибку в приложении и предоставить исправление.
  • Разработайте тесты для приложения с помощью Duet AI.
  • Просматривайте журналы приложений с помощью Duet AI.