MENU
    Знакомство с редактором приложений Tulip
    • 23 Jan 2025
    • 4 Минуты для чтения
    • Авторы

    Знакомство с редактором приложений Tulip


    Вводный текст

    Цель

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

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

    This topic is featured in the "Introduction to App Building" course in Tulip University.

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

    Прежде чем мы начнем, вот краткое напоминание: Редактор приложений позволяет создавать приложения для операторов без написания кода.

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

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

    Краткий обзор редактора приложений Tulip

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

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

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

    С помощью "правой кнопки мыши" можно дублировать, группировать шаги или удалять.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Чтобы создать новый шаг в приложении Tulip, нажмите на опцию Добавить шаг в левой части редактора приложений. Дизайн нового шага будет отражать базовый макет.

    Совет: вы также можете продублировать существующий шаг, если хотите повторно использовать дизайн или логику в новом шаге, нажав на значок шестеренки и выбрав "Duplicate Step".

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

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

    Вы можете добавить пользовательскую кнопку, выбрав "Кнопка" на панели инструментов в верхней части редактора приложений. Перетащите кнопку в нужное место.

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

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

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

    Действие или переход - это изменение, которое произойдет в приложении при срабатывании триггера.

    Существует множество действий и переходов, которые можно выполнить при нажатии кнопки.

    Этот триггер очень прост:

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

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

    А затем: Переход к шагу → Далее.

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

    После того как вы выстроили основную логику приложения, вы можете нажать на опцию Run or Test в правом верхнем углу редактора приложений. Это запустит ваше приложение в TTulip Player и позволит протестировать его на компьютере в режиме реального времени.

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

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

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

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

    Поздравляем! Это все, что вам нужно знать, чтобы создать простое приложение с рабочими инструкциями.

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

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


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

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


    Была ли эта статья полезной?