В этой статье мы рассмотрим пример использования 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 и его агентов, имеют огромный размер контекстного окна; другими словами, мы можем включить очень длинный текст для контекстуализации нашего запроса без лишних сложностей.
Примерно через минуту вы можете получить ответ, который будет выглядеть примерно так:
Пример вывода в менеджере агентов Antigravity.
В правой части окна менеджера агентов появляется контрольный список с перечислением этапов проекта, например, «инициализация приложения Next.js (…)». Здесь у нас есть возможность просмотреть этот список и отправить дополнительные запросы с помощью кнопки «Просмотр», чтобы изменить пункты или добавить новые, например, отправив запрос:
Добавьте в задачи бэкэнда компонент «build component: Plantcard (with snooze logic)» и логику выходного дня.
Новые или измененные пункты «волшебным образом» появятся в контрольном списке.
Давайте продолжим и предположим, что нас устраивает текущий план. Это непростой шаг, поскольку найти нужную кнопку для перехода к следующему этапу неочевидно, особенно после нескольких взаимодействий для уточнения. Ключ к успеху — прокрутить вверх сгенерированные блоки артефактов в чате и найти тот, который помечен как «План реализации». Откройте его и справа нажмите кнопку «Продолжить». Именно здесь агенты начинают полноценную работу, выполняя такие действия, как установка зависимостей, создание схемы базы данных с несколькими соответствующими таблицами с помощью файла schema.sql и так далее. Ниже приведен пример кода, сгенерированного для выполнения этих действий:
Сгенерирован файл 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 (
{name}
{species}
{/* Визуальный индикатор просроченных растений */} {isOverdue && (
Следующая запланированная: {nextWatering.toLocaleDateString()}
); }
# Завершение
В этой статье показано, как использовать Google Antigravity, один из новейших инструментов в пакете Google AI, для создания прототипов программного обеспечения. В частности, мы продемонстрировали логику преобразования технической документации в прототип программного обеспечения.
Иван Паломарес Карраскоса — лидер, писатель, спикер и консультант в области искусственного интеллекта, машинного обучения, глубокого обучения и магистратуры. Он обучает и направляет других в применении ИИ в реальном мире.
Источник: www.kdnuggets.com
