Обзор дизайнера веб-приложений AppMaster.io

Обзор дизайнера веб-приложений AppMaster.io

Дизайнер веб-приложений — это визуальный конструктор с удобным drag&drop интерфейсом. Вам не нужно знать программирование, чтобы разобраться в нем, как и другие no-code инструменты нашей платформы, он интуитивно понятен.

Чтобы начать работу, перейдите на вкладку Web Apps (Веб-приложения) — отобразятся все приложения, созданные в рамках вашего проекта. Здесь вы можете открыть их для редактирования, удалить или создать новые.

Для настройки выбранного приложения — кликните на его превью.

AppMaster.io Web Designer select web application

Окно редактирования

Окно редактирования веб-приложения позволяет настроить его внешний вид, обмен данными с бэкендом, а также некоторые общие параметры.

В поле информации о проекте (1) вы увидите его название, сможете перейти к настройкам, поделиться им, открыть документацию по API, а также посмотреть опубликованную версию вашего веб-приложения. Кнопка публикации (2) позволяет опубликовать проект — применить все сохраненные изменения, которые вы внесли в дизайнере веб-приложений и других разделах AppMaster.io Studio.

AppMaster.io Web Designer Interface

Ниже отображается название вашего приложения (1). Под ним — вкладки (2) перехода между настройками приложения и его формами авторизации и регистрации (они настраиваются отдельно). 

Справа (3) вы можете экспортировать файл конфигурации (config.json) или сбросить его к параметрам по умолчанию, открыть настройки текущего веб-приложения и сохранить изменения, которые в него внесли (без публикации).

AppMaster.io Web Designer Interface

Компоненты

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

Компоненты делятся на 3 группы:

  1. Создание структуры и пунктов меню — добавляют страницы и группы страниц. 
  2. Разметка страницы и добавления форм, кнопок, списков, карт, etc.
  3. Модальные (всплывающие) окна.

AppMaster.io Web Designer Interface Components

Цвет компонента совпадает с цветом секции, в которую его можно добавить. Например, компонент «Page» предназначен для «Main Menu», а «Modal» — для «App components».

Список компонентов и их подробное описание мы скоро добавим в документы. 

Секции

Секция страницы (1) появляется после того, как вы добавите хотя бы одну страницу в ваше приложение (2).

AppMaster.io Web Designer Interface Sections

Выше основного холста располагается хедер (1). Он будет отображаться в самом верху окна веб-приложения, на всех его страницах. Сюда можно добавить кнопки выхода и возврата, логотип, контакты, переключатель языков, etc.

Слева расположено меню (2). В секцию App components (3) можно добавить модальные окна, которые будут доступны на всех страницах приложения. Модальные окна не видны пользователям до момента, пока не произойдет событие, которое их вызывает.

Ниже находится «корзина» (4) для быстрого удаления компонентов со страницы перетаскиванием (также можно нажать значок корзины в окне настроек).

AppMaster.io Web Designer Interface Sections

Под основной секцией расположена Page components (1). Модальные окна, которые вы добавите сюда, будут доступны только на текущей странице.

Самая нижняя секция — футер (2), работает аналогично хедеру.

AppMaster.io Web Designer Interface Section Footer

Начало работы

Лучшая схема работы: прежде, чем создавать веб-приложение в AppMaster.io, продумайте его макет и спроектируйте бэкенд. После этого можно добавлять нужные компоненты и сразу связывать их с базой данных и бизнес-процессами.

Подробную информацию о нашей no-code платформе вы можете найти в нашей документации, а примеры настроек — в нашем блоге и на ютуб-канале .

Начните прямо сейчас

Хотите попробовать сами?

Лучший способ понять всю мощь AppMaster.io - это увидеть все своими глазами. Создайте собственное приложение за считанные минуты с 14-дневным пробным планом

Воплотите свои идеи в жизнь