• Обновление Jun 23, 2025
  • 4 минут чтения
  • Pete Hartnett
  • Lianna Churchill
 Prev Next

В этой статье вы узнаете:

  • Различные части редактора приложений Tulip.
  • Основные визуальные элементы, которые можно добавить в приложение (также называемые виджетами)
  • Как добавить базовую логику с помощью кнопок
  • Как завершить приложение для регистрации данных

This topic is featured in the Introduction to app building course in Tulip University.

Если вы все еще знакомитесь с редактором приложений Tulip App Editor, эта статья для вас. На примере приложения с рабочими инструкциями мы рассмотрим все основные инструменты редактора приложений.

Редактор приложений позволяет создавать приложения для операторов без написания кода.

Вот как это выглядит:

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

Вводное видео

Note

We're constantly improving the applications that come in new instances. If you joined Tulip recently, the apps in your instance might look different than what you see in images in this article. No worries, the ideas are the still same even if the content is a little different.

Описание редактора приложений

Редактор приложений - это место, где вы создаете и редактируете свое приложение. На следующей схеме показаны различные части, из которых состоит редактор приложений:

App Editor.png

  1. Добавить шаг/группу шагов - добавление нового шага или группы шагов
  2. Панель шагов/записей - просмотр шагов на вкладке шагов или переключение на вкладку записей для просмотра используемых таблиц
  3. Рабочая область - пространство для создания интерфейса приложения
  4. Добавить виджет актива - добавьте форму, значок или логотип в приложение.
  5. Добавить виджет кнопки - добавление кнопки в приложение
  6. Добавить виджет ввода - добавление поля ввода в приложение
  7. Добавить текстовый виджет - добавьте текстовое поле в ваше приложение
  8. Вставить виджет - вставьте различные виджеты, такие как изображения, анализы, атрибуты машин и многое другое.
  9. Добавить виджет камеры - добавьте снимок с обычной камеры или камеры со штрих-кодом.
  10. Перевести - Tulip Player автоматически переведет приложение на выбранный вами язык через ваш профиль Tulip.
  11. Создать снимок - сохранить текущую версию приложения, создав ее дубликат.
  12. Протестировать - протестировать приложение в режиме разработчика
  13. Запустить - Запустить приложение в Tulip Player
  14. Опубликовать - опубликовать ваше приложение
  15. Вперед/назад - перемещение элемента в рабочей области вперед или за другие элементы
  16. Боковая панель - настройка триггеров и стилистических компонентов на вкладке "Виджет", вкладке "Шаг" и вкладке "Приложение".

С помощью инструмента панорамирования и масштабирования вы можете:

  • Перемещать поверхность редактирования приложения
  • Увеличить или уменьшить масштаб.

Список шагов слева показывает список шагов, включая базовый макет.

Базовый макет

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

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

Подробнее о базовых макетах можно узнать здесь.

Шаги

Вы можете щелкнуть по шагу, чтобы просмотреть содержащиеся в нем элементы.

Щелкните правой кнопкой мыши на шаге, чтобы продублировать его, сгруппировать шаги или удалить.

Подробнее о шагах можно узнать здесь.

Панель инструментов

Панель инструментов в верхней части экрана содержит визуальные элементы, которые можно добавить в приложение. Это такие элементы, как фигуры, фотографии, текст, видео и кнопки. Чтобы добавить новый визуальный элемент в приложение, просто нажмите и перетащите его в нужное место.

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

Контекстная панель

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

Здесь есть три вкладки:

  • Вкладка "Шаг
  • вкладка приложения
  • Вкладка виджета

Вкладка "Шаг

Вкладка "Шаг" показывает:

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

Вкладка App

Вкладка "Приложение":

  • Позволяет распечатывать шаги в приложении.
  • Позволяет настроить таймер цикла для всего приложения.
  • Показывает список всех переменных, связанных с этим приложением
  • Позволяет задать разрешение приложения в соответствии с вашим интерфейсом.
  • Позволяет добавлять комментарии, если изменения просматривают несколько администраторов
  • Дает возможность создать логику, которая будет выполняться при запуске, завершении или отмене этого приложения

Вкладка "Виджеты

Если щелкнуть элемент в приложении, в боковой панели откроется еще одна вкладка под названием "Вкладка виджетов". Здесь вы можете настроить формат различных визуальных элементов приложения, а также их поведение при взаимодействии с ними.

Добавление логики в приложение

Логика определяет, что происходит в приложении, когда оператор взаимодействует с ним. Для начала давайте воспользуемся простой кнопкой с триггером для перехода от шага к шагу.

  1. Нажмите кнопку Кнопки на панели инструментов и выберите Кнопка.
  2. Перетащите кнопку в нужное место.

  1. Добавьте метку к кнопке и настройте параметры формата/цвета с помощью контекстной панели справа.

  1. Чтобы добавить логику к кнопке, нажмите + рядом с Триггерами на боковой панели.

Триггеры позволяют добавлять логику в приложения без использования кода. Триггеры используют последовательность when, if, then, else.

Триггер, который мы создадим здесь, имеет следующую логику:

Когда: Кнопка нажата

Затем: Текущее время сохраняется в переменной

Переход: Перейти к шагу → Далее.

  1. Нажмите кнопку Сохранить.

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

После того как вы создали основную логику приложения, вы можете нажать кнопку Test в правом верхнем углу. Это запустит ваше приложение в режиме разработчика, и вы сможете протестировать его.

Завершение работы приложения и регистрация данных

Кнопка Завершить позволяет Tulip записать в журнал все данные приложения, связанные с каждым оператором.

В этом примере мы добавим еще одну кнопку на последнем шаге приложения.

  1. Выберите последний шаг вашего приложения.
  2. Нажмите кнопку Кнопки и выберите Завершить.
  3. Перетащите новую кнопку в нужное место.

Дальнейшее чтение

Используйте эти пошаговые руководства, чтобы создать полноценное приложение, используя эти концепции:

Вы нашли то, что искали?

Вы также можете зайти на community.tulip.co, чтобы задать свой вопрос или узнать, сталкивались ли другие с подобным вопросом!