Редактирование проекта
После создания проекта открывается редактор. Он состоит из двух частей: панели чата слева и области просмотра справа.
Панель чата
В панели чата отображается переписка с GigaStudio. Здесь вы описываете изменения, которые нужно внести в проект; модель вносит правки в код и обновляет превью.
В шапке панели отображается название проекта. Чтобы переименовать проект, нажмите на иконку карандаша рядом с названием.
Кнопка ··· открывает меню проекта с двумя действиями:
- открыть репозиторий — переходит в репозиторий GitVerse, связанный с проектом;
- удалить проект — удаляет проект и связанный контейнер.
Редактирование через чат
Чтобы изменить проект, опишите задачу в поле ввода и нажмите кнопку отправки. GigaStudio внесет правки в код и обновит превью.
Формулируйте задачи конкретно — указывайте, что именно и как нужно изменить:
| Хуже | Лучше |
|---|---|
| «Измени цвет» | «Сделай кнопку «Заказать» зеленой» |
| «Добавь блок» | «Добавь секцию с тремя преимуществами сервиса после героя» |
| «Что-то не так с формой» | «В форме обратной связи поле email не проверяет формат адреса» |
Инлайн-редактирование
Инлайн-редактирование позволяет выбрать элемент прямо в превью и описать задачу для него.
Чтобы включить инлайн-редактирование, нажмите на иконку курсора на плавающей панели слева от превью. Чтобы отключить — нажмите еще раз на иконку или на клавишу Esc.
Как выбрать элемент
Наведите курсор на нужный элемент в превью и нажмите на него. Над элементом появится тултип с названием компонента и полем ввода. Введите задачу и нажмите кнопку отправки.
Выбранный элемент добавляется как тег в поле чата. Вы можете выбрать несколько элементов подряд — каждый добавится отдельным тегом. Чтобы убрать элемент из списка, нажмите × на теге.
После отправки GigaStudio применит изменения к выбранным элементам.
Область просмотра
Область просмотра занимает правую часть экрана. В ней отображается результат — работающее приложение или код проекта.
Панель инструментов
Адресная строка показывает URL запущенного контейнера. Нажмите на строку, чтобы скопировать ссылку.
Кнопка обновления (иконка со стрелкой) слева от адресной строки обновляет превью.
Справа от адресной строки расположены кнопки управления отображением:
- иконки десктоп, планшет, телефон — переключают ширину превью, чтобы проверить адаптивность приложения;
- полноэкранный режим — разворачивает превью на весь экран;
- открыть в новой вкладке — открывает приложение в отдельной вкладке браузера;
- превью и редактор кода (
</>) — переключают режим отображения.
Режим превью
В режиме превью отображается работающее приложение. Вы можете взаимодействовать с ним прямо в редакторе: проверять интерфейс, переходить по страницам, тестировать функциональность.
Режим редактора кода
В режиме редактора кода открывается встроенный редактор с файловым деревом проекта. Вы можете просматривать и редактировать файлы напрямую.
Файловое дерево слева отображает структуру проекта. Нажмите на файл, чтобы открыть его в редакторе. Открытые файлы отображаются в виде вкладок в верхней части редактора.
NOTE
Изменения, внесенные вручную в редакторе кода, сохраняются в репозитории GitVerse так же, как и изменения от GigaStudio.