Preview, Code и связи приложений

До первого коммита в History предпросмотр показывает иллюстрированные этапы создания. После этого открывается приложение, когда его браузерный предпросмотр готов. Если ни у одного приложения проекта не включён браузерный предпросмотр, Preview сообщает о его недоступности, а не возвращает экран создания, даже пока Amazi продолжает работу.

Проверка в Preview

Preview открывает зарегистрированное браузерное приложение в изолированном runtime разработки. Используйте его, чтобы:

• выбрать приложение;
• перейти по доступным маршрутам;
• изменить размер viewport и проверить адаптивность.

Для мобильных приложений на React Native/Expo Preview показывает веб-версию в редакторе. Android или iOS там не запускаются, поэтому функции, которым нужен телефон, проверяются отдельно на устройстве. WebView-приложение открывает сайт внутри мобильной оболочки: сам сайт можно посмотреть отдельно, но у оболочки нет Preview в Amazi. О сборке Android и ограничениях iOS читайте на странице Поддерживаемые приложения.

Первичная настройка, установка зависимостей или перезапуск runtime могут временно показывать подготовку. В центре отображаются заголовок и полоса загрузки, а под заголовком — текущий статус. Если Preview долго недоступен, попросите агента проверить сборку и состояние запуска.

Адрес разработки — непублично перечисляемая, но доступная по ссылке страница. Членство в проекте контролирует выдачу адреса через Amazi, однако чувствительные страницы и API должно защищать само приложение. Никогда не передавайте секреты через браузерные переменные.

Укажите элемент интерфейса

Чтобы упомянуть страницу целиком, введите @ в чате проекта и откройте Страницы над Интеграциями. Список соответствует маршрутам выбранного в превью приложения. Выберите маршрут для добавления чипа; нажатие на него открывает страницу, при необходимости запрашивая параметры маршрута.

Чипы выделенных элементов показывают HTML-тег (h1, p, div, span и другие) вместо номера, в том числе в очереди и отправленных сообщениях. В старых сообщениях без сохранённого тега отображается имя исходного файла. Наведение на чип отправленного сообщения показывает ссылку на исходник и напоминание, что элемент мог измениться, в том числе при кириллице в названии приложения или файла.

Если у приложения включён подходящий adapter Next.js или Vite JSX source selection, включите инструмент и отметьте один или несколько элементов страницы. Amazi добавит в composer точные ссылки на исходный код, чтобы агент нашёл их. Для самого Preview adapter не нужен. Отчёт о маршрутах доступен только с подходящим adapter router navigation.

Если выделение элементов или быстрая навигация недоступны, нажмите на перечёркнутую кнопку, чтобы открыть короткое пояснение. Понятно закрывает окно; Попросить агента проверить подготавливает сообщение в чате, которое можно проверить и отправить. Пути по-прежнему можно вводить вручную. У навигации и выделения элементов разные adapters: работающая навигация сама по себе не включает выделение.

Просмотр Code

Code читает сохранённое рабочее пространство через product API. Открывайте каталоги, поддерживаемые текстовые и графические файлы и скачивайте исходники для внешней копии. Изменения активной задачи обновляют данные файлов без замены самого пространства.

Связи приложений

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

Вкладка «Связи приложений» показывает зарегистрированные приложения, подключённые интеграции и наблюдаемые HTTP-соединения. Выберите «Разработка» или «Продакшен», чтобы посмотреть нужную среду. Адаптеры поддерживают серверные запросы Node.js и Python, а также браузерные fetch/XHR-запросы приложений Vite и Next.js. Нажмите на связь, чтобы увидеть адреса, HTTP-методы, число наблюдений и последнюю активность.

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

Карточка приложения без адаптера запросов показывает предупреждение, даже если на схеме остались старые связи. Нажмите на карточку, затем «Попросить агента», чтобы подготовить сообщение о подключении подходящего адаптера. Проверьте и отправьте его в чате. Разработка применяет сохранённые настройки; для продакшена нужна новая публикация. Новые приложения из стартовых шаблонов Node.js, Python, Vite и Next.js уже включают подходящие адаптеры. Импортированные и существующие приложения можно настроить через агента.

Каждая публикация сохраняет адаптеры запросов своей версии. Чтобы применить последующие изменения адаптеров в продакшене, опубликуйте обновлённую версию; уже запущенные публикации сохраняют прежние настройки.

Сбор не гарантирует учёт каждого запроса. Другие среды выполнения, неподдерживаемые HTTP-клиенты, WebSocket, запросы из workers и загрузки ресурсов браузером не отслеживаются; политика безопасности сайта также может блокировать браузерный сбор. Отсутствие линии не доказывает независимость приложений, а прошлые запросы восстановить нельзя. Если тариф владельца не включает доступ к диаграмме, приложения и подключённые интеграции остаются видимыми без связей. Это ограничение отображения не останавливает обмен данными между приложениями и разработку агентом. Возможности и настройки приложений меняются по инструкции на странице Приложения.

Редактирование кода и действия дерева

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

В Code открыт один файл. В хедере показан путь с сокращением длинных имён и отдельная кнопка Save, если редактирование доступно. Search files ищет по дереву. Рядом — Expand all / Collapse all; автоматическое раскрытие и поиск пропускают игнорируемые каталоги, но вручную их открыть можно.

Нажмите правой кнопкой на файл или папку. В меню сгруппированы Open, Reference in chat, затем New file, New folder, Upload files, Rename и Delete, когда они применимы. Создание и переименование используют окно ввода имени, удаление требует подтверждения. Корона обозначает ограничения тарифа. Ручное скачивание, создание, редактирование, загрузка, переименование и удаление требуют функции управления кодом и подходящей роли проекта. Это ограничение не мешает агенту изменять файлы приложения, когда вы просите выполнить разработку в чате.

Save сохраняет текст и создаёт файловую ревизию. Ctrl/Cmd+S не сохраняет код проекта. Неизменённое содержимое не создаёт пустую ревизию. В сообщении ревизии указано число изменённых файлов. При смене файла, выходе из Code, переходе со страницы или её закрытии появляется предупреждение о несохранённых правках. Отправка запроса в чат сбрасывает черновик редактора, чтобы агент начал с сохранённых файлов. Во время работы агента ручные изменения временно заблокированы. Если файл изменился до сохранения, перечитайте актуальное содержимое перед повторной попыткой.

Ctrl/Cmd-клик по поддерживаемым импортам JavaScript и TypeScript открывает файл проекта. Если импорт не разрешён, появится ошибка перехода. Это навигация по исходникам, а не обещание всех возможностей языкового сервера IDE.

Действия выбранного элемента

Go to element подсвечивает элемент в превью, Go to file открывает его исходник в Code. Наведение открывает поповер, клик удерживает его открытым для мыши и сенсорного экрана. Select element использует курсор с отметками клика. При выборе или подсветке элемента он превращается в крестик: нажатие снимает подсветку и выключает режим выбора. Чипы остаются в сообщении до отдельного удаления. После изменений исходников ссылки на элементы могут устареть.