Вводный курс
10 модулей
5 недели

Как это работает

Скопировать

В этом разделе подробно рассматривается работа веб-дизайнера в AppMaster. Узнайте о инструментах, которые позволят вам легко разрабатывать и настраивать веб-приложения.


Конструктор веб-приложений AppMaster позволяет разрабатывать приложения, включающие в себя не только дизайн интерфейса, но и бизнес-логику, а также интеграцию со сторонними сервисами. С помощью AppMaster Web Designer вы сможете легко создавать быстрые, масштабируемые и удобные приложения, используя всего один инструмент.

Интерфейс

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

  • Layouts: разработка шаблонов для всех типов экранов вашего приложения.
  • Pages: создание страниц с использованием ранее разработанных шаблонов.
  • UI Components: создание отдельных элементов пользовательского интерфейса.

Layout (Шаблоны страниц)

Создание и использование шаблонов страниц в AppMaster Web Designer

Шаблоны страниц обеспечивают быструю разработку согласованной структуры страниц. Шаблон может включать общие компоненты страниц, логику и стили, которые применяются к страницам веб-приложения. Таким образом, исчезает необходимость в создании повторяющихся элементов на разных страницах и дублировании логики.

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

Использование шаблонов значительно сокращают время создания интерфейса, оптимизацию проекта и упрощает внесения изменений в рабочее приложение. Кроме того, шаблоны облегчают проведение A/B-тестирования. Так же, использование шаблонов значительно оптимизируют навигацию по приложению, исключая перезагрузку всей страницы, при переходах обновляется только динамический контент, что повышает производительность приложения и экономит память.

Pages (Страницы)

Создание и использование страниц в AppMaster Wed Designer

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

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

UI Elements (Элементы пользовательского интерфейса)

Using UI elements with drag-and-drop in AppMaster Web Designer

UI элементы - это основные составные части вашего веб-приложения. Они представляют собой базовые элементы, такие как текст, кнопки, изображения, таблицы, поля ввода и другие.

С помощью технологии "drag-and-drop" элементы можно легко перемещать на рабочую область и сразу же видеть, как будет выглядеть будущее веб-приложение. Из атомарных элементов можно создавать более сложные компоненты, вкладывая их друг в друга. Все части приложения собираются из UI-элементов, включая макеты и страницы.

Таким образом, AppMaster Web App Designer представляет собой WYSIWYG ("Что видишь, то и получишь") редактор для создания веб-приложений.

Кастомизация

AppMaster Web Designer web app Theme Builder

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

В настройках приложения можно настроить данные для отображения в браузере и в результатах поиска: название приложения, описание, а также favicon.

Бизнес-логика

После создания интерфейса приложения, вы можете приступить к построению его бизнес-логики, которая включает в себя:

  • Создание Local DB (СКОРО!).
  • Создание глобальных переменных.
  • Настройка тригеров приложения и элементов.
  • Построение бизнес-процессов.
  • Выполнение бизнес-процессов по расписанию (СКОРО!).
  • Настройка локализации для разных языков (СКОРО!).

Интеграция со сторонними сервисами

Вы можете интегрировать ваше веб-приложение со сторонними сервисами. AppMaster предоставляет большую библиотеки модулей для расширения функционала веб-приложений. Там вы найдете модули авторизации в социальных сетях (Google, Apple, Linked In, Facebook), календари, интергации с провайдерами карт (Google Maps, Mapbox), платежные сервисы и многое другое. Полный список доступных интеграций можно найти в разделе Модули в AppMaster Web App Designer (СКОРО!).

Was this article helpful?
Все еще ищете ответ?
Cообщество