Прохождение: Создайте свое первое приложение

  • Опубликовано May 27, 2025
  • 4 минут чтения
  • Pete Hartnett
  • Lianna Churchill
 Prev Next

В этом прохождении вы узнаете:- Отображение сообщения на шаге- Ввод пользовательского сообщения- Создание подсчета сообщений- Документирование даты и времени отображения последнего сообщения

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

В конце упражнений у вас будет приложение Hello World, которое будет выглядеть следующим образом:

ex first app full walkthrough{height="" width=""}.

Упражнение 1: Создание приложения Hello World

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

Создайте приложение

  1. На вкладке "Приложения" нажмите "Приложения".Apps tab
  2. Нажмите + Создать приложение в правом верхнем углу.
  3. Назовите приложение "Hello World - Пример". По желанию вы можете добавить описание, чтобы другие пользователи знали, для чего это приложение.Name app ex
  4. Нажмите + Создать.На странице сведений о приложении вы можете либо нажать кнопку Редактировать в правом верхнем углу, либо нажать на название шага Без названия, чтобы войти в редактор приложений.Прежде чем создавать что-либо, давайте добавим несколько основных элементов дизайна в базовый макет.

Дизайн базового макета

  1. На вкладке Шаги слева выберите Базовый макет.
  2. Нажмите Значки и выберите форму прямоугольника. Настройте ширину прямоугольника, чтобы он занимал весь экран приложения, затем нажмите и перетащите его в верхнюю часть экрана. Чтобы изменить цвет прямоугольника, нажмите на квадрат "Заливка" на вкладке "Виджет" и выберите тускло-серый цвет.ex first app base layout1
  3. Выделите фигуру и нажмите CTRL/CMD + C, чтобы скопировать. Перетащите второй прямоугольник в нижнюю часть экрана.
  4. Нажмите Вход и выберите Переменная. На вкладке Виджет щелкните в поле Выбрать источник данных. Щелкните стрелку рядом с App Info и выберите App name.
  5. Щелкните и перетащите переменную в верхний левый угол, поверх прямоугольника.ex first app base layout2
  6. Добавьте еще две переменные:
  7. Выберите имя шага из списка источников данных App Info. Расположите эту переменную в правом верхнем углу.
  8. Выберите зарегистрированного пользователя из списка источников данных приложения. Расположите эту переменную в левом нижнем углу.
  9. И наконец, нажмите кнопку Кнопки и выберите Меню. Нажмите и перетащите кнопку в нижнюю часть экрана.

Ваш базовый макет будет выглядеть так:ex first app base layout{height="" width=""}.

Далее мы создадим функциональность на шаге.

Добавление кнопки hello world

  1. На вкладке Steps выберите Untitled Step. Дважды щелкните на нем, чтобы переименовать его, и введите "Display message".
  2. Нажмите кнопку Buttons и выберите кнопку. Измените размер кнопки, чтобы она стала больше, используя квадраты вокруг кнопки. Расположите кнопку в центре экрана.ex first app add button
  3. Добавьте следующие стили к кнопке:
  4. Текст - "Hello World"
  5. Цвет кнопки - Зеленый
  6. Иконка - Инструмент "Панорамирование

Кнопка будет выглядеть так:ex first app button style

Далее мы добавим триггер к этой кнопке, чтобы сделать ее функциональной.

Добавление триггера для кнопки

  1. Выберите кнопку Hello World и перейдите в раздел Триггеры на вкладке Виджет. Нажмите +, чтобы добавить новый триггер.ex first app add a new trigger
  2. Назовите триггер "Hello world".
  3. В операторе Then добавьте следующую логику**:Show Message** → Static Value → Text → "Hello World".

Ваш триггер должен выглядеть следующим образом:ex first app Hello world button trigger

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

Когда вы протестируете приложение, оно будет работать следующим образом:ex first app display hello world message

Упражнение 2: Хранение входных данных

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

  1. Добавьте новый шаг и назовите его "Хранить сообщение".
  2. Щелкните Input и выберите Text.
  3. На вкладке Виджет щелкните в поле источника данных. Выберите + Добавить переменную.
  4. Назовите переменную "message" и нажмите + Создать.ex first app Add variable

Когда вы протестируете приложение, введенный текст сохранится в переменной "message". Вы можете увидеть сохраненное значение на панели переменных в левой части окна режима разработчика.ex first app store message

Упражнение 3: Подсчет количества приветствий

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

  1. На шаге Отображение сообщения нажмите кнопку Встроить и выберите Анализ. Щелкните и перетащите виджет слева от кнопки Hello world.
  2. Нажмите кнопку Выбрать анализ, а затем Создать анализ.
  3. Щелкните в раскрывающемся списке Типы отображения и выберите Одно значение.ex first app single value display
  4. Перейдите на вкладку Операции и добавьте новую операцию.
  5. Выберите Функции агрегации и затем Подсчет записей.ex first app count of records operation
  6. Нажмите боковую стрелку в правой части редактора, чтобы развернуть панель визуализации. Ниже Value нажмите + Add field и выберите Count of Records.ex first analysis visualization panel fields
  7. Нажмите на заголовок анализа и переименуйте его в "Count of hellos", затем нажмите Save.
  8. Нажмите кнопку Сохранить и закрыть в правом верхнем углу.

Поскольку завершения не сохраняются в режиме разработчика, нажмите кнопку Выполнить, чтобы проверить этот анализ вTulip Player.ex first app exercise 3 test

Упражнение 4: Вычисление последнего приветствия с помощью выражения

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

  1. В боковой панели перейдите на вкладку App.
  2. Рядом с переменными выберите X.
  3. Нажмите + Создать переменную.
  4. Назовите переменную "Last time you said hello" и нажмите + Create.ex first app create new variable
  5. На шаге Отображение сообщения нажмите кнопку Hello world и добавьте новый триггер.
  6. Добавьте в триггер следующее действие**:Манипуляция данными** → Хранилище → Выражение: 'Последний раз вы сказали "привет" в' + ' ' + App Info.Current Date and Time.Current Time → Переменная → Последний раз вы сказали "привет

ex first app trigger store hello expression

  1. На шаге Подсчет количества приветствий щелкните Текст и выберите Переменная.
  2. На боковой панели в разделе Параметры данных щелкните пустое поле Источник данных, а затем выберите переменную Последний раз, когда вы сказали "Привет".

При тестировании приложения выражение сохраняется в переменной Last time you said hello и отображается в виде временной метки.ex first app ex 4 test

Следующие шаги

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

Узнайте больше о создании приложений:* Основы создания приложений* Знакомство с редактором приложений Tulip* Как разработать эффективный базовый макет

Станьте сертифицированным разработчиком приложений Tulip:* Базовая сертификация разработчика приложений

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

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