Преобразование технической документации в работающий программный прототип с помощью Google Antigravity

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

Изображение предоставлено редактором.

# Введение

Создание документа с требованиями к продукту (PRD) — распространенный процесс в управлении продуктами и обычная задача в таких секторах, как разработка программного обеспечения и технологическая индустрия в целом. Но история не заканчивается на PRD, и следующий важный шаг — превращение его в продукт, например, в работающее программное обеспечение.

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

Хотя в рамках данной статьи невозможно подробно описать весь процесс создания программного обеспечения, мы выделим ключевые аспекты использования Antigravity для этой цели, а также приведем несколько показательных фрагментов созданного программного обеспечения для иллюстрации.

# Переход от производственной среды к программному прототипу

Приготовьтесь, ведь именно в процессе, который мы сейчас опишем, происходит волшебство. При правильном использовании Google Antigravity может частично выступать в роли ведущего инженера. Это загружаемая IDE, доступная для различных операционных систем: представьте её как модифицированную версию VS Code, где вместо простого набора кода вы можете управлять агентами искусственного интеллекта, которые напишут его за вас.

Разумеется, первым шагом является загрузка и установка Antigravity на ваш компьютер.

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

Начнём с того, что откроем тему оформления — кстати, я настоятельно рекомендую выбрать тему «Токийская ночь»! — и в проводнике файлов создадим новую пустую папку проекта, назвав её flora-friend-app. Если вы знакомы с VS Code, то пользовательский интерфейс Antigravity покажется вам очень знакомым.

Ниже вы можете увидеть результат открытия недавно созданной папки под названием «flora-friend-app», которая в данный момент пуста:

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

Для начала отправим вам это сообщение (пока не нажимайте кнопку «Отправить»), в котором вас попросят представить план реализации веб-приложения, адаптированного для мобильных устройств:

Выполняйте обязанности старшего Full Stack инженера. Проанализируйте прилагаемый PRD для проекта «FloraFriend». Разработайте комплексный план реализации для создания мобильного веб-приложения с использованием Next.js, Tailwind CSS и Shadcn UI. Пока не пишите код; сначала строго сгенерируйте артефакт плана.

К этому запросу должен прилагаться фактический документ с описанием требований к программному обеспечению (PRD), например, такой, какой вы могли получить, следуя предыдущей статье о NotebookLM для генерации PRD, — или ваш собственный документ. В любом случае, у вас есть два основных варианта прикрепления PRD : либо вручную вставить код в запрос сразу после него, либо включить файл PRD (.docx, .pdf или аналогичный) в папку проекта, которую мы создали ранее. Если вы выберете вариант копирования и вставки, аккуратно используйте клавиши Shift + Enter на клавиатуре, чтобы создать пару новых строк, и вставьте PRD сразу после запроса, прежде чем отправлять полный запрос. Отличная новость: LLM-ы Google Gemini, которые питают Antigravity и его агентов, имеют огромный размер контекстного окна; другими словами, мы можем включить очень длинный текст для контекстуализации нашего запроса без лишних сложностей.

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

В правой части окна менеджера агентов появляется контрольный список с перечислением этапов проекта, например, «инициализация приложения Next.js (…)». Здесь у нас есть возможность просмотреть этот список и отправить дополнительные запросы с помощью кнопки «Просмотр», чтобы изменить пункты или добавить новые, например, отправив запрос:

Добавьте в задачи бэкэнда компонент «build component: Plantcard (with snooze logic)» и логику выходного дня.

Новые или измененные пункты «волшебным образом» появятся в контрольном списке.

Давайте продолжим и предположим, что нас устраивает текущий план. Это непростой шаг, поскольку найти нужную кнопку для перехода к следующему этапу неочевидно, особенно после нескольких взаимодействий для уточнения. Ключ к успеху — прокрутить вверх сгенерированные блоки артефактов в чате и найти тот, который помечен как «План реализации». Откройте его и справа нажмите кнопку «Продолжить». Именно здесь агенты начинают полноценную работу, выполняя такие действия, как установка зависимостей, создание схемы базы данных с несколькими соответствующими таблицами с помощью файла schema.sql и так далее. Ниже приведен пример кода, сгенерированного для выполнения этих действий:

Весь процесс пошаговый, требующий ручной проверки и утверждения с вашей стороны перед переходом к следующему шагу, но вы постепенно увидите, как пункты контрольного списка планирования проекта будут отмечены галочками. Иногда вам потребуется вручную установить некоторые зависимости в PATH или выполнить аналогичные действия, чтобы агенты могли продолжать свою работу. Но по сути, все, что требуется, — это внимательное взаимодействие и подсказки!

В качестве заключительного примера, вот как может выглядеть фрагмент кода для финальной версии приложения:

// components/PlantCard.tsx import { useState } from 'react'; import { Card, Button, Badge } from '@/components/ui'; import { WaterDropIcon, SnoozeIcon } from '@/icons'; interface PlantProps { name: string; species: string; nextWatering: Date; onSnooze: (id: string) => void; onWater: (id: string) => void; } export default function PlantCard({ name, species, nextWatering, onSnooze, onWater }: PlantProps) { const isOverdue = new Date() > nextWatering; return (

Следующая запланированная: {nextWatering.toLocaleDateString()}

); }

# Завершение

В этой статье показано, как использовать Google Antigravity, один из новейших инструментов в пакете Google AI, для создания прототипов программного обеспечения. В частности, мы продемонстрировали логику преобразования технической документации в прототип программного обеспечения.

Иван Паломарес Карраскоса — лидер, писатель, спикер и консультант в области искусственного интеллекта, машинного обучения, глубокого обучения и магистратуры. Он обучает и направляет других в применении ИИ в реальном мире.

Источник: www.kdnuggets.com