1. Обзор
В этом практическом занятии вы создадите веб-приложение "Snake & Beats" — ретро-игру в "Змейку" со встроенным музыкальным плеером. Вы используете Gemini для генерации однофайлового React-приложения с неоновой эстетикой, затем пройдёте проверку версий и развернёте его в Cloud Run.
Что вы будете делать
- Создание и ввод запроса : Используйте режим «Создание» в Google AI Studio, чтобы сгенерировать работающую игру на основе одного запроса.
- Уточните настройки с помощью системных инструкций : «Проверьте настроение» вашего ИИ, задав постоянный образ для будущих правок.
- Сохранить в GitHub : Создайте новый репозиторий непосредственно из AI Studio.
- Развертывание в Cloud Run : отправьте свою игру в Google Cloud Run одним щелчком мыши.
Что вы узнаете
- Как использовать режим сборки в Google AI Studio для быстрого создания прототипов приложений.
- Как использовать системные инструкции для поддержания единого стиля программирования на протяжении итераций.
- Как подключить Google AI Studio к GitHub и Cloud Run.
Что вам понадобится
- Веб-браузер Chrome
- Аккаунт Gmail
- Облачный проект с включенной функцией выставления счетов.
- Ключ API Gemini
- Аккаунт на GitHub
2. Прежде чем начать
- В консоли Google Cloud на странице выбора проекта выберите или создайте проект Google Cloud.
- Убедитесь, что для вашего облачного проекта включена функция выставления счетов. Узнайте, как проверить, включена ли функция выставления счетов для проекта .
3. Создание и подсказка (Основа)
Начнём с создания всего приложения за один раз. Войдите в Google AI Studio и убедитесь, что вы находитесь в интерфейсе сборки .
- Введите запрос на сборку : Вставьте следующий подробный запрос в окно чата:
Build a React web app that is a Music Player and a Snake Game combined. Use Tailwind CSS with a dark neon aesthetic. I want to be able to play Snake in the center window while the demo music plays in the background. Add 3 dummy ai generated music. Include controls for the music (play/pause/skip) and a score counter for the game.
- Выберите свою модель : в правой панели настроек убедитесь, что для максимально быстрой генерации кода выбрана модель Gemini 3.0 Pro (или последняя предварительная версия).
- Запуск : Нажмите «Сборка» (или нажмите Cmd + Enter).
- Предварительный просмотр : Gemini сгенерирует код и, как правило, отобразит предварительный просмотр в реальном времени справа (как показано ниже):
4. Доработка с помощью аннотаций, изображений и озвучивания.
Иногда сложно описать визуальные изменения словами. Режим аннотаций позволяет рисовать на предварительном просмотре приложения, чтобы мгновенно передать своё видение.
Использовать режим аннотирования
- Активируйте режим аннотирования : в интерфейсе AI Studio (проверьте левую боковую панель или нижнюю панель инструментов окна предварительного просмотра) выберите инструмент «Аннотирование» или «Уточнение».
- Разметьте свое приложение :
- Рисование : Используйте инструмент «Рамка», чтобы обвести прямоугольником счетчик очков.
- Комментарий : Введите подсказку, прикрепленную к этому полю: «Сделать этот шрифт крупнее, цифровым и с помехами».
- Эскиз : Используйте инструмент «Стрелка», чтобы указать на кнопки «Воспроизведение»/«Пауза».
- Комментарий : Тип: "Замените эти значки на светящиеся неоновые иконки."
- Итерация : Нажмите «Добавить в чат», а затем нажмите «Отправить запрос» . Gemini интерпретирует ваши визуальные обозначения и текстовые команды для обновления кода.
- Проверка : Посмотрите предварительную версию обновления в режиме реального времени. Ваши визуальные отзывы теперь должны отражаться в коде!
Голосовой ввод (The Spoken Vibe)
Иногда "атмосферу" проще описать словами, чем словами.
- Действие : Нажмите на значок микрофона в строке ввода (рядом с кнопкой «+»).
- Скажите: «Эй, анимация змеи слишком медленная. Ускорьте её и сделайте так, чтобы хвост оставлял светящийся след».
- Отправка: Gemini преобразует вашу речь в текст и применяет изменения.
5. Настройка системных инструкций и пересборка.
В отличие от обычной командной строки, системные инструкции сохраняются на протяжении всей сессии. Это лучшее место для определения стандартов кодирования, соглашений об именовании или конкретного визуального стиля, который не должен меняться.
- Откройте расширенные настройки : в интерфейсе Google AI Studio (режим сборки) найдите раздел «Системные инструкции». Если он не виден, нажмите «Настройки» (значок шестеренки) или «Расширенные настройки» вверху или сбоку панели чата.
- Добавьте инструкцию "Vibe" : вставьте следующую инструкцию в текстовое поле. Это определяет образ "Glitch Art" для нашей игры:
You are a Retro-Futurist UI Designer and Senior React Engineer. Visual Style: 'Glitch Art'. Use raw, pixelated fonts, jarring color contrasts (Cyan vs. Magenta), and CSS animations that simulate screen tearing or static noise. Tone: Cryptic and machine-like.
- Инициирование изменений : Изменение системной инструкции не приводит к автоматическому переписыванию кода. Необходимо указать Gemini применить новые правила.
- Закройте панель настроек.
- В поле ввода «Чат/Подсказка» введите: «Перестройте пользовательский интерфейс приложения в строгом соответствии с новыми системными инструкциями».
- Нажмите «Выполнить / Отправить».
- Обратите внимание на обновление : компания Gemini подтвердит изменение.
6. Сохранить в GitHub
Вместо того чтобы скачивать файлы и возиться с командной строкой, мы воспользуемся встроенной интеграцией GitHub для мгновенной инициализации репозитория.
- Найдите интеграцию : на верхней панели инструментов интерфейса Google AI Studio найдите значок GitHub, расположенный между значками «Загрузить» и «Развернуть».
- Подключите свою учетную запись : нажмите на значок. Если вы делаете это впервые, вам будет предложено разрешить Google AI Studio доступ к вашей учетной записи GitHub.
- Создание репозитория : Появится диалоговое окно с заголовком «Заполните информацию ниже, чтобы создать свой репозиторий».
- Название репозитория : Введите название, например, «Игра в змейку, созданная с помощью ИИ и React».
- Описание репозитория : Введите описание репозитория.
- Видимость : выберите «Общедоступный» (чтобы было легко поделиться) или «Частный».
- Отправьте изменения в GitHub : нажмите кнопку "Создать репозиторий Git".
7. Развертывание в облаке.
Теперь, когда приложение готово и сохранено на GitHub, давайте развернем его в Cloud Run.
- Начать развертывание : Нажмите на выделенную ниже кнопку. Она расположена в правом верхнем углу страницы AI Studio.
- Выберите проект : Щелкните раскрывающийся список «Выберите облачный проект» и выберите свой проект из раскрывающегося списка.
- Устранение неполадок : Если вы не можете найти свой проект в выпадающем списке, нажмите «Импорт проекта» и выберите свой проект на панели «Импорт проекта».
- Проверка наличия платёжной информации : После выбора проекта будет выполнена проверка на наличие в нём платёжной информации. Эта проверка пройдёт автоматически, поскольку мы привязали платёжный аккаунт к проекту в разделе «Перед началом работы».
- Развертывание : Нажмите кнопку «Развернуть приложение» и дождитесь развертывания приложения в Cloud Run. Примечание: Имя службы Cloud Run будет сгенерировано автоматически.
- Развертывание должно завершиться через пару минут, и вы получите URL-адрес приложения. Перейдя по этому URL-адресу, вы сможете увидеть развернутое веб-приложение в режиме реального времени в интернете!
8. Уборка
Чтобы избежать списания средств с вашего аккаунта Google Cloud за ресурсы, использованные в этой статье, выполните следующие действия:
- В консоли Google Cloud перейдите на страницу «Управление ресурсами» .
- В списке проектов выберите проект, который хотите удалить, и нажмите кнопку «Удалить».
- В диалоговом окне введите идентификатор проекта, а затем нажмите «Завершить», чтобы удалить проект.
9. Поздравляем!
Поздравляем! Вы успешно завершили разработку приложения с помощью vibe-code в AI Studio и развернули его в Cloud Run!!
AI Studio — это идеальная платформа для разработки и тестирования приложений, позволяющая пользователям мгновенно визуализировать свои разработки в действии.
Бесшовная интеграция AI Studio с Cloud Run позволяет пользователям без труда развертывать свои приложения непосредственно в Google Cloud. Использование Cloud Run предоставляет все преимущества бессерверной среды, абстрагируясь от сложностей и накладных расходов, связанных с управлением инфраструктурой.