Вайб-кодинг: создайте своё небольшое приложение

При вайб-кодинге (англ. vibe coding) вы обычными словами описываете, что хотите создать. Ассистент пишет код, показывает результат и дорабатывает его по вашим отзывам. Уметь программировать не нужно. Так можно сделать, например, викторину для тренинга, небольшую игру или полезный инструмент для коллег.

Вам нужно только настольное приложение. Устанавливать Node.js и git не нужно: они уже встроены в приложение.

1. Выберите рабочую папку

Создайте на компьютере пустую папку, например Викторина-для-тренинга, и выберите её рабочей папкой чата. Как это сделать, описано в разделе Локальный доступ к файлам. Ассистент работает только в этой папке.

2. Опишите, что вам нужно

Расскажите как можно конкретнее, что вы хотите создать. Например:

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

Такую простую страницу ассистент показывает с помощью встроенного веб-сервера приложения. Результат появляется во встроенном браузере: кнопка Браузер (значок глобуса) справа на верхней панели. Подробнее читайте в разделе Локальные серверы и встроенный браузер.

Что-то не нравится? Просто скажите, что нужно изменить:

Сделай кнопки зелёными, а при неправильном ответе показывай правильный.

Свои фотографии и просмотр страницы ассистентом

Прикрепите фото к сообщению и попросите:

Помести это фото на веб-страницу.

Ассистент сохранит фото в папке проекта, например в img/, и разместит его на странице. Так можно сделать и с изображением, которое ассистент только что создал для вас.

Что-то не так со страницей во встроенном браузере? Попросите:

Посмотри, что не так на странице.

Ассистент посмотрит текст, снимок экрана и сообщения об ошибках страницы. См. Просмотр страницы ассистентом.

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

3. Приложения побольше

Если вам нужно что-то побольше, например приложение с несколькими экранами, ассистент может создать проект, скажем, на Vite и React:

Создай в этой папке приложение React с Vite, в котором коллеги могут бронировать переговорную комнату. Установи всё, запусти приложение и покажи результат.

Создание такого проекта (например, с помощью npm create vite@latest) вы одобряете на карточке команды. Затем ассистент устанавливает пакеты. Это вы тоже одобряете или включаете Разрешить установку пакетов без вопроса. См. Установка пакетов. Не хотите карточку для каждой команды? Выберите Доверять этому проекту на первой карточке.

4. Сохраняйте версии

Версия — это снимок вашего проекта. Если какое-то изменение не понравилось, можно вернуться к предыдущей версии. В подходящий момент попросите ассистента:

Сохрани версию.

В первый раз ассистент создаёт для папки историю версий. Файлы, похожие на секреты, например пароли или ключи (в том числе ключи Google API), никогда не попадают в версию. Ассистент сообщает, если что-то пропускает.

5. Разместите проект на GitHub

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

Подключение GitHub

Каждый подключает свою учётную запись GitHub. Ещё нет учётной записи? Сначала создайте бесплатную на github.com/signup.

1. Перейдите в Настройки и в разделе Состояние рабочего стола найдите панель GitHub.
2. Нажмите Подключить GitHub. Приложение покажет код и откроет github.com/login/device в браузере.
3. Введите код на GitHub (его можно скопировать кнопкой Копировать код) и дайте разрешение. Если страница не открылась, нажмите Открыть GitHub.
4. Теперь панель показывает Подключено как @ваше-имя.

Что запрашивает GitHub. GitHub показывает приложение AI-School Desktop от HandiHow-B-V и запрашивает доступ к вашим репозиториям (repo): чтение и запись, в том числе в частных репозиториях. Этот доступ нужен, чтобы создавать и обновлять проект. Давайте разрешение, только если страница открыта на github.com.

Код истёк? Код действует примерно 15 минут. Если он истёк, снова нажмите Подключить GitHub.

Репозитории организации:

• Если организация ограничивает сторонние приложения, нажмите Request (запросить доступ) рядом с организацией на экране разрешения. Это можно сделать и позже на github.com/settings/applications > AI-School Desktop.
• Владелец организации одобряет запрос в Settings > Third-party access > OAuth application policy организации.
• Без этого одобрения ваши собственные репозитории работают, а репозитории организации — нет.

Другая учётная запись? Нажмите Отключить и выйдите из github.com в браузере (или используйте приватное окно), прежде чем подключаться снова. Иначе GitHub использует учётную запись, в которую вы уже вошли.

заметка

Старые версии приложения показывают «Вход через GitHub пока недоступен в этой версии приложения.» В этом случае обновите приложение.

Публикация и обновление

Затем попросите, например:

Размести этот проект на GitHub.

Ассистент покажет карточку с метками Встроено в приложение и Сеть вкл., а также с точным адресом. Нажмите Выполнить, чтобы продолжить, или Отклонить, чтобы остановиться. Новый репозиторий будет приватным, если вы не попросите создать публичный. Если адрес не github.com или репозиторий становится публичным, карточка предупреждает об этом. При публикации вы видите, какие файлы будут отправлены.

Позже можно писать, например:

• «Опубликуй новую версию онлайн.» Ассистент отправляет ваши новые версии на GitHub.
• «Загрузи последнюю версию.» Ассистент загружает изменения с GitHub.
• «Скачай проект https://github.com/naam/project в эту папку.» Ассистент скачивает существующий проект.

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

6. Советы по безопасности

• Новые репозитории приватные. Делайте репозиторий публичным, только если код могут видеть все.
• Никогда не добавляйте в приложение пароли, ключи или другие секреты.
• Используете ключ Google API (начинается с AIza, например веб-ключ приложения Firebase)? Поместите его в файл, который ассистент не включает в версии, например .env. Если ключ остаётся в коде, этот файл не публикуется онлайн.
• Прежде чем нажать Выполнить, всегда проверяйте адрес на карточке.
• Подключение хранится в зашифрованном виде в вашей учётной записи пользователя на этом компьютере. Ассистент никогда не видит ваш ключ GitHub. Если вы работаете на общем компьютере, после завершения работы нажмите Отключить.
• Отключить удаляет подключение только с этого компьютера. Чтобы полностью отозвать доступ, сделайте это на GitHub в разделе Settings > Applications.