Дизайнер веб-приложений — это визуальный конструктор с удобным drag&drop интерфейсом. Вам не нужно знать программирование, чтобы разобраться в нем, как и другие no-code инструменты нашей платформы, он интуитивно понятен.
Чтобы начать работу, перейдите на вкладку Web Apps (Веб-приложения) — отобразятся все приложения, созданные в рамках вашего проекта. Здесь вы можете открыть их для редактирования, удалить или создать новые.
Для настройки выбранного приложения — кликните на его превью.
Окно редактирования
Окно редактирования веб-приложения позволяет настроить его внешний вид, обмен данными с бэкендом, а также некоторые общие параметры.
В поле информации о проекте (1) вы увидите его название, сможете перейти к настройкам, поделиться им, открыть документацию по API, а также посмотреть опубликованную версию вашего веб-приложения. Кнопка публикации (2) позволяет опубликовать проект — применить все сохраненные изменения, которые вы внесли в дизайнере веб-приложений и других разделах AppMaster.io Studio.
Ниже отображается название вашего приложения (1). Под ним — вкладки (2) перехода между настройками приложения и его формами авторизации и регистрации (они настраиваются отдельно).
Справа (3) вы можете экспортировать файл конфигурации (config.json) или сбросить его к параметрам по умолчанию, открыть настройки текущего веб-приложения и сохранить изменения, которые в него внесли (без публикации).
Компоненты
Область компонентов содержит блоки, необходимые для создания и настройки интерфейса веб-приложения. Чтобы добавить компонент в интерфейс — перетащите его мышью в одну из секций экрана.
Компоненты делятся на 3 группы:
- Создание структуры и пунктов меню — добавляют страницы и группы страниц.
- Разметка страницы и добавления форм, кнопок, списков, карт, etc.
- Модальные (всплывающие) окна.
Цвет компонента совпадает с цветом секции, в которую его можно добавить. Например, компонент «Page» предназначен для «Main Menu», а «Modal» — для «App components».
Список компонентов и их подробное описание мы скоро добавим в документы.
Секции
Секция страницы (1) появляется после того, как вы добавите хотя бы одну страницу в ваше приложение (2).
Выше основного холста располагается хедер (1). Он будет отображаться в самом верху окна веб-приложения, на всех его страницах. Сюда можно добавить кнопки выхода и возврата, логотип, контакты, переключатель языков, etc.
Слева расположено меню (2). В секцию App components (3) можно добавить модальные окна, которые будут доступны на всех страницах приложения. Модальные окна не видны пользователям до момента, пока не произойдет событие, которое их вызывает.
Ниже находится «корзина» (4) для быстрого удаления компонентов со страницы перетаскиванием (также можно нажать значок корзины в окне настроек).
Под основной секцией расположена Page components (1). Модальные окна, которые вы добавите сюда, будут доступны только на текущей странице.
Самая нижняя секция — футер (2), работает аналогично хедеру.
Начало работы
Лучшая схема работы: прежде, чем создавать веб-приложение в AppMaster.io, продумайте его макет и спроектируйте бэкенд. После этого можно добавлять нужные компоненты и сразу связывать их с базой данных и бизнес-процессами.
Подробную информацию о нашей no-code платформе вы можете найти в нашей документации, а примеры настроек в нашем блоге и на ютуб-канале .
