Создаём веб-приложение с Claude Code: добавляем в проект Git

Привет! Меня зовут Игорь Росляков, я технический писатель. Я готовлю серию статей-туториалов по видео Александра Сербула, руководителя больших данных, высоконагруженных систем и машинного обучения в компании Битрикс24.

Видео и статьи записаны и написаны специально для вайбкодеров без технического бэкграунда, которые хотят создавать надёжные веб-приложения. В туториалах мы будем использовать ИИ-агента для работы с приложениями на React — Claude Code.

Сами не программируем — всю работу проводит ИИ-агент, а мы пишем запросы и контролируем результат.

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

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

Что сделаем и о чём расскажем сегодня

У нас есть IT-проект. Он несложный и для учебных целей — мы показываем, как работать с агентом, чего ожидать и какие команды давать.

В статьях мы поэтапно добавляем всё, что есть в настоящих рабочих проектах: возможность вносить изменения, сжатые сборки для публикации в интернете, развёртывание на сервере.

Следующий шаг, который реализуем в статье — система контроля версий Git. Git отслеживает выбранные файлы проекта и сохраняет их состояние в разные моменты работы.

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

Ниже — описание всех программ, которые нужны для получения такого же проекта, как у нас. Но устанавливать их все отдельно до работы необязательно: достаточно написать агенту первый промпт, и он сам установит всё необходимое, если дать ему доступ.

Какие программы использует наш проект:

• Node.js для сборки сайта. Скачать можно на официальной странице: nodejs.org.

• Git Bash понадобится пользователям Windows: через него можно запускать команды из статьи. Скачать на официальной странице: git-scm.com/download/win
  На macOS и Linux те же команды выполняются во встроенном терминале.

• Язык программирования Python не нужен для самого сайта, потому что сайт будет написан на другом языке, JavaScript. Но Python полезен при разработке: ИИ-ассистент часто пишет на нём небольшие вспомогательные скрипты и быстро проверяет идеи. Скачать: python.org/downloads.

• Для деплоя в интернете нужен сервер. Мы используем серверы платформы вайбкодинга Битрикс24 Вайбкод. Для их использования (и для большинства других серверов) нужна платная подписка на виртуальный сервер или собственный сервер.

Некоторые термины, которыми мы будем пользоваться

Скрытый текст

Это цикл статей о создании фронтенд-проекта на React.

Есть несколько основных терминов и технологий, которые появляются в нашем проекте. Если вам интересно, что это такое, вот краткий словарь-глоссарий:

Словарь терминов // спойлер

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

Фронтенд — это только видимая часть сайта или веб-приложения. То есть страницы, кнопки, меню, формы для заполнения, с которыми может взаимодействовать пользователь — это всё фронтенд.

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

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

JavaScript — язык программирования, который помогает делать страницы интерактивными. Благодаря JavaScript сайт может реагировать на действия пользователя, например открывать меню или показывать уведомления.

TypeScript — это расширение JavaScript, которое добавляет более строгую проверку кода. Это помогает раньше находить ошибки и делает проект понятнее, даже для ИИ-агента.

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

Vite — технология для запуска и сборки фронтенд-проекта. Vite помогает быстро открыть проект на компьютере во время разработки, а потом подготовить его к публикации.

Tailwind нужен для настройки внешнего вида интерфейса. С его помощью разработчик устанавливает для компонентов отступы, цвета, размеры, шрифты и другие визуальные свойства.

API — набор команд, через которые одна программа управляет возможностями другой.

Репозиторий — папка проекта, размещённая в системе хранения кода, например на GitHub.

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

Порт — условный номер канала, через который программа принимает обращения внутри сервера. В нашем случае Nginx слушает порт 3000.

На какой стадии проект сейчас и как его повторить

Мы работаем с агентом Claude во вкладке Code:

Ниже перечисляем все запросы к агенту с пояснениями, чтобы довести чистый проект примерно до того состояния, в котором он находится сейчас у нас.

Промпт 1. Создаём основу проекта

Создай минимальный пустой сайт на React, Vite и Tailwind CSS. Подключи компоненты shadcn/ui. TypeScript пока не используй — мы добавим его отдельно.

Промпт 2. Добавляем навигацию и форму заявки

Веб-приложение может содержать разные элементы интерфейса. Чтобы лучше понимать, что вообще можно добавить на свой сайт, мы сделали для вас сайт с визуальной библиотекой самых популярных фронтенд-компонентов shadcn/ui. Посмотреть это можно по адресу: app-117900122a91.vibecode.bitrix24.tech/. Выглядит примерно так:

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

Добавь компонент Menubar с разделами «Главная», «О компании» и «Заявка».
На странице «Заявка» создай форму с помощью компонента Form. После отправки формы показывай окно Dialog с подтверждением.

Промпт 3. Ваша кастомизация. Превращаем каркас в полноценный сайт

На этом этапе нужно описать тематику проекта, название компании, содержание страниц, язык интерфейса и требования к оформлению. В нашем примере это сайт студии JRPG-игр Tojita-Hon-Games.

Преобразуй текущий проект в сайт японской компании Tojita-Hon-Games, которая занимается разработкой JRPG-игр.
Подбери бесплатное изображение для фона. Добавь на главную страницу раздел с сотрудниками компании: для каждого сотрудника укажи имя, должность, возраст и краткую биографию, а также добавь фотографию из бесплатного источника.
Подбирай изображения, фон и цвета так, чтобы текст оставался хорошо читаемым. Весь текст на сайте должен быть на русском языке.

Промпт 4. Настраиваем сборку готовой версии сайта

Сборка сайта — это готовая версия проекта, подготовленная для запуска и публикации.

Во время разработки сайт состоит из исходных файлов, которые разработчику и агенту удобно редактировать. Команда сборки обрабатывает их, объединяет нужные части, уменьшает размер файлов и создаёт отдельную папку с готовым сайтом. Потом эту папку загружают на сервер.

Настрой процесс сборки проекта для публикации. После создания сборки запускай её локальный предпросмотр в браузере.

Промпт 5. Создаём документацию проекта

Команда ниже создаёт файл CLAUDE.md с основными сведениями о проекте. Ассистент сможет использовать его в следующих сессиях, чтобы учитывать структуру проекта, команды запуска и принятые правила работы.

/init

Промпт 6. Готовимся к деплою в режиме чтения

Даём агенту указания подготовиться и собрать всю информацию, чтобы сразу сделать работу максимально правильно.

Будем разворачивать статический сайт на платформу Битрикс24 Вайбкод. Изучи процесс по документации https://vibecode.bitrix24.tech/v1/me и по дополнительной инструкции https://github.com/AlexanderSerbul/vibecoders-front-ui-gallery/tree/main/deploy.Ключ для чтения: vibe_api_ВАШ_КЛЮЧ
Скопируй папку deploy из этого репозитория в проект, задай имя приложения <имя-проекта> и выбери самый дешёвый тариф сервера, которого достаточно для статики. Сам деплой пока не запускай.

Промпт 7. Деплой и публикация

После предыдущего промпта стоит проверить тариф, который выбрал агент. Потом можно давать команду к деплою:

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

Промпт 8. После следующих правок — обновление опубликованного сайта 

Деплой — это фиксация, слепок кода на момент публикации. Сервер отдаёт ровно те файлы, что мы залили, и сам не обновляется, когда мы правим проект дальше. Поэтому, когда мы заменим что-то в коде, на живом сайте изменения отобразятся не сразу. Чтобы правки попали в интернет, нужно пересобрать и залить заново.

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

Что такое Git, GitHub и коммиты

Пока мы работали над сайтом, ИИ-агент Claude Code менял файлы прямо в папке проекта. 

После удачной правки текущее состояние проекта можно сохранить, чтобы позже сравнить его с новой версией или вернуться назад, если что-то сломается. Для этого используют систему контроля версий Git. Она хранит историю изменений проекта в виде отдельных сохранений — коммитов. 

Коммит — сохранённое состояние проекта в определённый момент. У него есть название и идентификатор, а Git может показать, какие изменения появились по сравнению с предыдущим коммитом.

Официальная страница с документацией на английском: git-scm.com

Упрощённо работа выглядит так: изменили проект — проверили результат — создали коммит. Например, мы можем отдельно сохранить разные этапы работы: «Добавлена форма заявки», «Настроена сборка», «Добавлена страница с тарифами». С Git можно увидеть разницу между ними или восстановить нужное состояние.

Зачем Git, если код пишет Claude: Claude умеет исправлять код, но Git даёт ему точную историю проекта. Агент может посмотреть, какие файлы изменились, и сравнить текущую версию с предыдущей. Мы тоже увидим историю коммитов и сможем выбрать нужную точку возврата.

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

Ещё есть GitHub — это сервис для хранения Git-репозиториев в интернете. Репозиторием называется папка проекта, в которой Git отслеживает изменения. Git работает с историей на нашем компьютере, а GitHub хранит удалённую копию проекта. Благодаря этому код можно открыть с другого устройства, передать другому разработчику или использовать для автоматического деплоя.

В статье мы подключим Git к проекту, создадим первый коммит и отправим репозиторий на GitHub.

Для тех, кто хочет узнать больше про Git и его команды

Внутри Git — огромное количество возможностей для работы с версиями. Работая с ИИ-агентом, помнить их самому необязательно, но может быть полезно примерно понимать, что происходит.

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

Игра Learn Git Branching — интерактивный тренажер, который работает прямо в браузере. Пользователь вводит настоящие команды Git, а справа видит, как меняется схема коммитов и веток. Есть последовательные задания от базовых коммитов до более сложной работы с ветками.

Игра Oh My Git! с сюжетом и отдельными уровнями. Она визуализирует репозиторий и постепенно знакомит игрока с коммитами, ветками, объединением изменений и другими операциями. Игра открытая и доступна для Windows, macOS и Linux.

Introduction to GitHub от GitHub Skills — практическое упражнение, которое знакомит с репозиториями, ветками, коммитами и pull request:

Добавляем репозиторий

Git-репозиторий — папка проекта, в которой Git отслеживает файлы и хранит историю их версий. Чтобы создать такое пространство, нужно дать команду агенту:

Добавь в проект репозиторий Git

Агент создаёт репозиторий и сразу делает первый коммит:

Репозиторий можно увидеть в списке файлов, если ввести в терминале команду ls -al. Она покажет всё, что есть в папке проекта. Для этого можно открыть терминал через агента и выполнить команду там:

В списке появилась скрытая папка .git. В ней Git хранит служебную информацию об истории проекта. Вручную её содержимое менять не нужно.

Упрощаем ответы агента

Сейчас Claude Code выдаёт нам кучу дополнительной информации, которая может быть полезна разработчику, но человека без технического опыта может сбивать: ветки, автор коммита, информация о важных технических компонентах вроде node_modules, dist, и .vibe-server. Мы не будем работать с этими вещами напрямую, поэтому нам пока необязательно знать эти вещи так глубоко.

Попробуем переучить агента и попросим выдавать только важную информацию на понятном языке. Сначала проверим этот подход только на работе с Git, а если результат нас устроит, перенесём это на весь проект.

Когда работаешь с Git, объясняй результат коротко и простым языком для человека без технического опыта.

После каждого действия сообщай только:
1. Что было сделано.
2. Как называется созданный коммит.
3. Его короткий идентификатор.
4. Все ли важные файлы проекта сохранены.
5. Что пользователь может сделать дальше.

Не перечисляй количество файлов, название ветки, настройки Git, технические детали .gitignore, соавторов, внутренние пути и другие подробности, если я сам об этом не спросил.
Если обнаружена важная проблема, например в репозиторий мог попасть пароль, API-ключ или лишние тяжелые файлы, сообщи об этом отдельной короткой фразой понятным языком.
Пиши не больше 5-7 коротких строк. Не используй профессиональный жаргон без пояснения.

Пример хорошего ответа:
Репозиторий создан.
Первый коммит называется «Save the finished version of the site».
Его идентификатор — 4b61fc3.
Файлы проекта сохранены. Пароли, API-ключи и временные файлы в репозиторий не попали.
Чтобы посмотреть историю версий, попросите меня показать коммиты или выполните команду git log —oneline.

Смотрим историю коммитов

Между коммитами можно перемещаться. Это удобно делать, если виден их список с описанием.

Чтобы увидеть все коммиты, попросим агента их показать:

Покажи полную историю коммитов с описанием, чтобы было понятно, в каком состоянии находился проект на каждом коммите

Мы пока сделали всего один коммит, и агент это честно показывает:

Теперь немного наполним историю изменений.

Откроем библиотеку визуальных компонентов и выберем еще несколько элементов для проекта. Внесём два изменения и после каждого будем просить агента сделать коммит.

Сначала добавим вкладки с возможностью перетаскивания. Этот элемент называется Sortable Tabs:

Пишем запрос агенту:

Добавь на главную раздел «Из чего состоят игры»,  используй для этого Sortable Tabs. Наполни вкладки черновым контентом, подходящим по смыслу

Сначала проверяем результат. Агент присылает в чат скриншот, а на соседней вкладке можно включить предпросмотр dev-сервера. Раздел и вкладки появились и работают:

Просим агента сделать коммит:

Сохрани отдельным коммитом

Вносим ещё одну правку — попросим добавить диаграммы популярных разных игровых платформ и жанров. Этот элемент называется Chart, выглядеть будет примерно так:

Пишем запрос:

Добавь отдельный раздел-вкладку Исследования. Пока что добавь туда одну вкладку с Chart-диаграммами популярности разных игровых жанров и консолей, чтобы можно было смотреть результаты за разные годы.

Проверяем результат в предпросмотре внутри интерфейса агента:

Можно повторять запрос на коммит:

Сохрани отдельным коммитом

Теперь, если запросить историю коммитов, агент покажет 3 разных коммита:

Возвращаемся к одному из коммитов

Чтобы проверить Git в деле, сначала попросим вернуться к 1-му коммиту:

Временно верни проект к коммиту 4b61fc3

Наши последние изменения исчезают: пропали разделы «Из чего состоят игры» и «Исследования»:

Тут всё-таки нужно внести небольшое техническое пояснение.

При прямом переключении на конкретный коммит Git обычно переходит в режим detached HEAD: проект показывает выбранную версию, но пользователь больше не находится в обычной рабочей ветке. Этот режим подходит для просмотра, однако продолжать разработку и создавать коммиты в нем без понимания последствий рискованно. Поэтому, пока открыта старая версия, не просите агента сохранять новые изменения.

Команда для возвращения должна указывать ветку:

Верни проект в последнюю версию ветки main

После этого желательно попросить агента подтвердить:

Проверь, что мы снова находимся в ветке main и можем продолжать работу

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

Создаём удалённый репозиторий на GitHub

Для создания репозитория в облаке нам нужно зарегистрироваться на GitHub — это бесплатно.

После этого можно создавать репозитории кнопкой + рядом с иконкой профиля:

Чтобы агент получил доступ к репозиторию на GitHub, пришлите ему ссылку и попросите объяснить, что нужно сделать, чтобы агент мог отправлять коммиты туда:

Я сделал удалённый репозиторий https://github.com/igorrosliakov-bitrix24/Tojita-Games.gitТы можешь отправлять туда коммиты?

Способ авторизации зависит от настроек компьютера и аккаунта GitHub. Вот мой пример: у меня есть сохранённый ключ от GitHub, но у ключа нет прав доступа именно к новому конкретному репозиторию.

Чтобы сделать новый ключ, сначала нужно зайти в Настройки / Settings:

Потом — в Настройки разработчика / Developer settings:

Раскройте вкладку Personal access tokens и выберите Fine-grained tokens:

В настройках создания ключа укажите репозиторий, к которому нужно дать доступ, а ниже — выберите доступ к Содержимому / Contents с правом на Чтение и запись / Read and write:

Github создаст ключ-токен. Можно отправить токен в чат, но агент может отказаться принимать его и сказать, что это нарушение безопасности. Поэтому для надёжности лучше ввести его самостоятельно в терминале, когда Git запросит пароль.

Я просто выполнил в Терминале те команды, которые прислал агент. Для этого достаточно скопировать команды, вставить их в терминал и нажать Enter.

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

Следуем пояснениям агента, в моём случае они были здесь:

После отправки коммитов просим агента проверить подключение к удалённому репозиторию. Сами тоже проверяем — заходим на GitHub и видим, что всё загрузилось:

Репозиторий показывает 3 коммита — если на них нажать, информацию можно посмотреть подробнее:

Теперь новые коммиты можно отправлять в удалённый репозиторий на GitHub. А ещё этот репозиторий можно будет скопировать себе на любую локальную машину и в любой момент продолжить работу.

GitHub получит только те коммиты, которые мы туда отправили. Новые локальные изменения сами по себе в удалённом репозитории не появляются.

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

Что дальше

В следующих статьях мы продолжим совершенствовать наш проект: расскажем про другие возможности деплоя, добавим автотесты для самопроверки и SEO-оптимизацию, чтобы веб-приложение могло появляться выше в результатах поиска.

Источник: habr.com