Tulip 앱 편집기 소개

목적

이 문서에서는 학습합니다:

• Tulip 앱 편집기의 다양한 부분
• 앱에 추가할 수 있는 기본 시각적 요소(위젯이라고도 함)
• 버튼을 사용하여 기본 로직을 추가하는 방법
• 데이터를 기록하도록 앱을 완성하는 방법

:::(Info) (참고:) 이 주제는 Tulip University의"앱 제작 입문" 과정에 포함되어 있습니다.:::

아직 Tulip 앱 편집기에 익숙하지 않다면 이 문서가 도움이 될 것입니다. 시각적 작업 지침 앱의 예를 사용하여 앱 에디터의 모든 주요 도구를 살펴보겠습니다.

시작하기 전에 간단히 알려드리겠습니다: 앱 에디터를 사용하면 코드를 작성하지 않고도 운영자를 위한 앱을 만들 수 있습니다.

앱 에디터의 모습은 다음과 같습니다:

앱 편집기를 사용하면 운영자가 앱 내에서 사용할 수 있는 일련의 단계 또는 화면을 만들 수 있습니다. 스텝을 스텝 그룹으로 구성하여 사용 편의성을 높일 수도 있습니다.
:::(Warning) (참고:)새로운 인스턴스로 제공되는 애플리케이션을 지속적으로 개선하고 있습니다. 최근에 Tulip에 가입했다면 인스턴스의 앱이 이 문서의 이미지에 표시된 것과 다를 수 있습니다. 걱정하지 마세요. 콘텐츠가 조금 다르더라도 아이디어는 동일하니까요:::

Tulip 앱 편집기에 대한 간략한 개요

왼쪽의 단계 목록에는 기본 레이아웃을 포함한 단계 목록이 표시됩니다.

기본 레이아웃 에 적용한 서식 또는 레이아웃 편집 사항은 앱의 각 개별 단계에 자동으로 적용됩니다.

오른쪽의 컨텍스트 창에서 개별 요소를 '잠금 해제'하여 각 스텝 내에서 기본 레이아웃을 변경할 수 있습니다.

'오른쪽 클릭'을 사용하여 스텝을 복제, 그룹화 또는 삭제할 수 있습니다.

단계를 클릭하면 해당 단계에 포함된 요소를 볼 수 있습니다.

화면 상단의 도구 모음에는 앱에 추가할 수 있는 시각적 요소가 포함되어 있습니다. 도형, 사진, 텍스트, 동영상 및 버튼과 같은 요소가 여기에 포함됩니다. 앱에 새로운 시각적 요소를 추가하려면 해당 요소를 클릭하고 원하는 위치로 드래그하기만 하면 됩니다.

툴바의 오른쪽에는 툴립 앱 에디터에서 개체를 레이어링하는 데 사용할 수 있는 추가 도구가 있습니다.

화면 오른쪽의 컨텍스트 창은 앱의 모든 서식과 로직을 처리하는 곳입니다. 위젯 구성에 대한 자세한 내용은 여기를 참조하세요.

세 개의 탭이 있습니다:

• 단계 탭
• 앱 탭
• 위젯 탭

단계 탭에 표시됩니다:

• 전체 단계에 대한 서식 지정 옵션
• 이 단계의 목표 주기 시간을 지정할 수 있습니다.
• 기본 레이아웃에 지정된 레이아웃으로 재설정할 수 있습니다.
• 현재 단계를 삭제할 수 있습니다.
• 이 단계가 열리거나 닫힐 때마다 실행될 로직을 작성할 수 있는 기능을 제공합니다. 트리거에 대해서는 나중에 자세히 설명하겠습니다.

앱 탭:

• 앱에서 단계를 인쇄할 수 있습니다.
• 전체 앱의 사이클 타이머를 조정할 수 있습니다.
• 이 앱과 관련된 모든 변수 목록을 표시합니다.
• 의도한 인터페이스에 맞게 앱 해상도를 지정할 수 있습니다.
• 여러 관리자가 변경 사항을 검토하는 경우 댓글을 추가할 수 있습니다.
• 이 앱이 시작, 완료 또는 취소될 때마다 실행되는 로직을 작성할 수 있는 기능을 제공합니다.

앱에서 요소를 클릭하면 컨텍스트 창에 위젯 탭이라는 다른 탭이 표시됩니다. 여기에서 앱의 다양한 시각적 요소의 형식과 상호 작용 시 동작을 조정할 수 있습니다.

이동 및 확대/축소 도구를 사용할 수 있습니다:

• 애플리케이션의 편집 표면 이동
• 확대 또는 축소

앱에 단계 추가하기

튤립 앱에서 새 단계를 만들려면 앱 편집기 왼쪽의 단계 추가 옵션을 클릭합니다. 새 스텝의 디자인은 기본 레이아웃을 반영합니다.

프로 팁: 새 스텝에서 디자인이나 로직을 재사용하려는 경우 기어 아이콘을 클릭하고 "스텝 복제"를 선택하여 기존 스텝을 복제할 수도 있습니다.

앱에 로직 추가하기

이제 새 스텝을 추가하는 방법을 살펴보았으므로 오퍼레이터가 스텝 간에 이동할 수 있는 방법을 제공해야 합니다. Tulip에서 트리거를 사용하여 이 로직을 만들 수 있습니다. 먼저 간단한 버튼을 사용하여 단계 간에 이동해 보겠습니다.

앱 에디터 상단의 툴바에서 '버튼'을 선택하여 사용자 지정 버튼을 추가할 수 있습니다. 버튼을 원하는 위치로 드래그합니다.

버튼에 레이블을 추가하고 오른쪽에 있는 컨텍스트 창을 사용하여 형식/색상 옵션을 조정합니다.

버튼에 로직을 추가하려면 컨텍스트 창에서 트리거 옆의 "+" 기호를 클릭합니다.

트리거를 사용하면 코드를 사용하지 않고도 간단한 when, if, then, else 시퀀스를 사용하여 애플리케이션에 로직을 추가할 수 있습니다. "+" 기호를 클릭하면 트리거 편집기가 열립니다.

액션 또는 트랜지션은 트리거가 실행될 때 앱에서 발생하는 변경 사항입니다.

버튼을 눌렀을 때 수행할 수 있는 액션과 전환에는 여러 가지가 있습니다.

이 트리거는 간단합니다:

언제: 버튼이 눌릴 때

Then: 현재 시간이 변수에 저장됩니다.

그리고 나서: 단계 → 다음으로 이동합니다.

이 버튼을 사용하면 다음 단계로 이동할 수 있습니다. 일반적으로 사용자가 이전 단계로 이동할 수 있는 버튼도 추가하고 싶을 것입니다.

애플리케이션의 기본 로직을 구축한 후에는 앱 에디터의 오른쪽 상단에서 실행 또는 테스트 옵션을 클릭할 수 있습니다. 그러면 TTulip 플레이어에서 애플리케이션이 실행되고 컴퓨터에서 실시간으로 앱을 테스트할 수 있습니다.

앱 완료하여 데이터 기록하기

운영자의 앱 사용 데이터를 모두 기록하려면 완료 버튼을 추가해야 합니다.

이 예제에서는 앱의 마지막 단계에 완료 버튼을 추가하여 완료를 기록하겠습니다.

도구 모음에서 "버튼" 옵션을 클릭하고 완료 버튼을 선택합니다. 앱의 마지막 단계로 드래그합니다.

축하합니다! 간단한 작업 지시 애플리케이션을 만드는 데 필요한 모든 것이 완료되었습니다.

더 읽어보기

이 단계별 가이드를 사용하여 이러한 개념을 사용하여 전체 앱을 구축하세요.

• 튤립 앱 만들기
• 완전한 결함 보고 앱 구축하기
• 작업 지시 데이터를 캡처하는 앱 빌드하기

원하는 것을 찾았나요?

community.tulip.co로 이동하여 질문을 게시하거나 다른 사람들이 비슷한 문제에 직면했는지 확인할 수도 있습니다!