- Распечатать
Знакомство с редактором приложений Tulip
Назначение
В этой статье вы узнаете:
- Различные части редактора приложений Tulip App Editor
- Основные визуальные элементы, которые вы можете добавить в приложение (также называемые виджетами)
- Как добавить базовую логику с помощью кнопок
- Как дополнить ваше приложение для регистрации данных
:::(Info) (Примечание:) Эта тема рассматривается в курсе"Введение в создание приложений" в Tulip University. :::
Если вы все еще знакомитесь с редактором приложений Tulip, эта статья для вас. На примере приложения визуальных рабочих инструкций мы рассмотрим все основные инструменты редактора приложений.
Прежде чем мы начнем, вот краткое напоминание: Редактор приложений позволяет создавать приложения для операторов без написания кода.
Вот как это выглядит:
Редактор приложений позволяет создать серию шагов или экранов, которые операторы могут использовать в приложении. Шаги также могут быть организованы в группы шагов для лучшего удобства использования.
:::(Warning) (ПРИМЕЧАНИЕ:) Мы постоянно совершенствуем приложения, которые появляются в новых экземплярах. Если вы подключились к Tulip недавно, приложения в вашем экземпляре могут отличаться от тех, что вы видите на картинках в этой статье. Не беспокойтесь. Идеи одинаковы, даже если содержание немного отличается. :::
Краткий обзор редактора приложений Tulip
Список шагов слева показывает список шагов, включая базовый макет.
{height="" width="300"}.
Любые изменения форматирования или макета, внесенные в базовый макет, будут автоматически применены к каждому отдельному шагу приложения.
Вы можете изменить базовый макет внутри каждого Шага, "разблокировав" отдельные элементы в контекстной панели справа.
С помощью "правой кнопки мыши" можно дублировать, группировать шаги или удалять.
Вы можете щелкнуть на шаге, чтобы просмотреть элементы, которые он содержит.
Панель инструментов в верхней части экрана содержит визуальные элементы, которые можно добавить в приложение. Это такие элементы, как фигуры, фотографии, текст, видео и кнопки. Чтобы добавить новый визуальный элемент в приложение, просто нажмите и перетащите его в нужное место.
В правой части панели инструментов находятся дополнительные инструменты, которые можно использовать для наложения слоев на объекты в редакторе приложений Tulip.
Контекстная панель в правой части экрана - это место, где вы управляете всем форматированием и логикой приложения. Подробнее о конфигурации виджетов читайте здесь.
Здесь есть три вкладки:
- Вкладка Step
- вкладка приложения
- Вкладка виджета
На вкладке Шаг отображаются:
- Параметры форматирования для всего шага
- Позволяет указать целевое время цикла для этого шага
- Позволяет вернуться к макету, указанному на базовом макете
- Позволяет удалить текущий шаг
- Дает возможность создать логику, которая будет выполняться каждый раз, когда этот шаг открывается или закрывается - мы поговорим о триггерах чуть позже.
Вкладка "Приложение":
- Позволяет распечатать шаги в приложении.
- Позволяет настроить таймер цикла для всего приложения.
- Показывает список всех переменных, связанных с этим приложением
- Позволяет задать разрешение приложения в соответствии с вашим интерфейсом.
- Позволяет добавлять комментарии, если изменения просматривают несколько администраторов.
- Дает возможность создать логику, которая будет выполняться всякий раз, когда это приложение запускается, завершается или отменяется.
При нажатии на элемент приложения в контекстной панели откроется еще одна вкладка под названием Widget Tab. Здесь вы можете настроить формат различных визуальных элементов приложения, а также его поведение при взаимодействии с ним.
С помощью инструмента панорамирования и масштабирования вы можете:
- перемещать поверхность редактирования вашего приложения
- Увеличить или уменьшить масштаб
Добавление шагов в приложение
Чтобы создать новый шаг в приложении Tulip, нажмите на опцию Добавить шаг в левой части редактора приложений. Дизайн нового шага будет отражать базовый макет.
{height="" width="300"}.
Совет: вы также можете продублировать существующий шаг, если хотите повторно использовать дизайн или логику в новом шаге, нажав на значок шестеренки и выбрав "Дублировать шаг".
{height="" width="300"}.
Добавление логики в приложение
Теперь, когда мы рассмотрели, как добавлять новые шаги, нам нужно дать операторам возможность переходить от шага к шагу. Мы можем создать эту логику в Tulip с помощью триггеров. Для начала давайте воспользуемся простой кнопкой для перехода от шага к шагу.
Вы можете добавить пользовательскую кнопку, выбрав "Кнопка" на панели инструментов в верхней части редактора приложений. Перетащите кнопку в нужное место.
Добавьте метку для кнопки и настройте параметры формата/цвета с помощью контекстной панели справа.
{height="" width="300"}.
Чтобы добавить логику к кнопке, нажмите знак "+" рядом с Триггеры в контекстной панели.
Триггеры позволяют добавлять логику в приложения без необходимости использования кода, используя простую последовательность when, if, then, else. Это редактор триггеров, который открывается после нажатия знака "+".
Действие или переход - это изменение, которое произойдет в приложении при срабатывании триггера.
Существует множество действий и переходов, которые можно выполнить при нажатии кнопки.
Этот триггер прост:
Когда: Кнопка нажата
Затем: Текущее время сохраняется в переменной
И затем: Перейти к шагу → Далее.
{height="" width="1000"}.
Эта кнопка позволяет перейти к следующему Шагу. Обычно вы хотите добавить кнопку, позволяющую пользователям перейти к предыдущему шагу.
После того, как вы создали основную логику приложения, вы можете нажать на опцию Run or Test в правом верхнем углу редактора приложений. Это запустит ваше приложение в TTulip Player и позволит вам протестировать приложение на вашем компьютере в режиме реального времени.
Завершение приложения для регистрации данных
Вам необходимо добавить кнопку Завершить, чтобы Tulip регистрировал все данные, полученные в результате использования приложения оператором.
В данном примере мы добавим еще одну кнопку на последнем шаге приложения для регистрации завершения работы.
Выберите опцию "Кнопки" на панели инструментов и выберите кнопку "Завершить". Перетащите ее на последний шаг вашего приложения.
{height="" width="450"}.
Поздравляем! Это все, что вам нужно знать для создания простого приложения с рабочими инструкциями.
Дальнейшее чтение
Используйте эти пошаговые руководства для создания полноценного приложения с использованием этих концепций.
- Создание приложения Tulip
- Постройте полное приложение для составления отчетов о дефектах
- Создайте приложение для сбора данных о рабочих заказах
Вы нашли то, что искали?
Вы также можете зайти на community.tulip.co, чтобы задать свой вопрос или узнать, сталкивались ли другие с подобным вопросом!