이 글에서 배우게 될 내용입니다:
- Tulip 앱 편집기의 다양한 부분
- 앱에 추가할 수 있는 기본 시각적 요소(위젯이라고도 함)
- 버튼을 사용하여 기본 로직을 추가하는 방법
- 데이터를 기록하기 위해 앱을 완성하는 방법
This topic is featured in the Introduction to app building course in Tulip University.
아직 Tulip 앱 편집기에 익숙하지 않다면 이 문서가 도움이 될 것입니다. 작업 지침 앱의 예를 사용하여 앱 편집기의 모든 주요 도구를 살펴보겠습니다.
앱 에디터를 사용하면 코드를 작성하지 않고도 운영자를 위한 앱을 만들 수 있습니다.
앱 에디터의 모습은 다음과 같습니다:
앱 편집기에서 프로세스의 디지털 시각적 요소인 일련의 단계를 만들 수 있습니다.
소개 동영상
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.
앱 편집기 분석
앱 편집기는 앱을 빌드하고 편집하는 곳입니다. 다음 다이어그램은 앱 편집기를 구성하는 여러 부분을 보여줍니다:
- 스텝/스텝 그룹 추가 - 새 스텝 또는 스텝 그룹을 추가합니다.
- 단계/기록 패널 - 단계 탭을 통해 단계를 보거나 기록 탭으로 전환하여 사용된 테이블을 봅니다.
- 작업 공간 - 앱 인터페이스를 만들 수 있는 공간입니다.
- 자산 위젯 추가 - 앱에 도형, 아이콘 또는 로고를 추가합니다.
- 버튼 위젯 추가 - 앱에 버튼을 추가합니다.
- 입력 위젯 추가 - 앱에 입력 필드를 추가합니다.
- 텍스트 위젯 추가 - 앱에 텍스트 상자를 추가합니다.
- 위젯 임베드 - 이미지, 분석, 기계 속성 등과 같은 다양한 위젯을 임베드합니다.
- 카메라 위젯 추가 - 일반 카메라 또는 바코드 카메라 스냅샷을 추가합니다.
- 번역 - 튤립 플레이어가 튤립 프로필을 통해 선택한 언어로 앱을 자동으로 번역합니다.
- 스냅샷 생성 - 앱의 현재 버전을 저장하여 복제본을 만듭니다.
- 테스트 - 개발자 모드를 통해 앱을 테스트합니다.
- 실행 - Tulip 플레이어에서 앱을 실행합니다.
- 게시 - 앱 게시
- 앞으로/뒤로 - 작업 영역 내의 요소를 다른 요소 앞 또는 뒤로 이동합니다.
- 사이드 창 - 위젯 탭, 단계 탭 및 앱 탭에서 트리거 및 스타일 구성 요소를 설정합니다.
이동 및 확대/축소 도구를 사용할 수 있습니다:
- 애플리케이션의 편집 표면 이동
- 확대 또는 축소
왼쪽의 단계 목록에는 기본 레이아웃을 포함한 단계 목록이 표시됩니다.
기본 레이아웃
기본 레이아웃에서 서식 또는 레이아웃을 편집하면 앱의 각 개별 단계에 자동으로 적용됩니다.
오른쪽의 컨텍스트 창에서 개별 요소를 '잠금 해제'하여 단일 단계에서 기본 레이아웃을 변경할 수 있습니다.
여기에서 기본 레이아웃에 대해 자세히 알아보세요.
스텝
단계를 클릭하면 해당 단계에 포함된 요소를 볼 수 있습니다.
단계를 마우스 오른쪽 버튼으로 클릭하여 복제하거나 단계를 그룹화하거나 삭제할 수 있습니다.
여기에서 단계에 대해 자세히 알아보세요.
도구 모음
화면 상단의 도구 모음에는 앱에 추가할 수 있는 시각적 요소가 포함되어 있습니다. 도형, 사진, 텍스트, 동영상 및 버튼과 같은 요소가 여기에 포함됩니다. 앱에 새 시각적 요소를 추가하려면 해당 요소를 클릭하고 원하는 위치로 드래그하기만 하면 됩니다.
툴바의 오른쪽에는 툴팁 앱 에디터에서 개체를 레이어링하는 데 사용할 수 있는 추가 도구가 있습니다.
컨텍스트 창
화면 오른쪽의 컨텍스트 창은 앱의 모든 서식과 로직을 처리하는 곳입니다. 위젯 구성에 대한 자세한 내용은 여기를 참조하세요.
세 개의 탭이 있습니다:
- 단계 탭
- 앱 탭
- 위젯 탭
단계 탭
단계 탭에 표시됩니다:
- 전체 단계에 대한 서식 옵션
- 이 단계의 목표 주기 시간을 지정할 수 있습니다.
- 기본 레이아웃에 지정된 레이아웃으로 재설정할 수 있습니다.
- 현재 단계를 삭제할 수 있습니다.
- 이 단계가 열리거나 닫힐 때마다 실행될 로직을 작성할 수 있는 기능을 제공합니다. 트리거에 대해서는 나중에 자세히 설명하겠습니다.
앱 탭
앱 탭입니다:
- 앱에서 단계를 인쇄할 수 있습니다.
- 전체 앱의 사이클 타이머를 조정할 수 있습니다.
- 이 앱과 관련된 모든 변수 목록을 표시합니다.
- 의도한 인터페이스에 맞게 앱 해상도를 지정할 수 있습니다.
- 여러 관리자가 변경 사항을 검토하는 경우 댓글을 추가할 수 있습니다.
- 이 앱이 시작, 완료 또는 취소될 때마다 실행되는 로직을 작성할 수 있는 기능을 제공합니다.
위젯 탭
앱에서 요소를 클릭하면 측면 창에 위젯 탭이라는 다른 탭이 표시됩니다. 여기에서 앱의 다양한 시각적 요소의 형식과 상호 작용 시 동작을 조정할 수 있습니다.
앱에 로직 추가
로직은 운영자가 앱과 상호 작용할 때 앱에서 일어나는 일을 결정합니다. 먼저 트리거가 있는 간단한 버튼을 사용하여 단계 간에 이동해 보겠습니다.
- 도구 모음에서 버튼을 클릭하고 버튼을 선택합니다.
- 버튼을 원하는 위치로 드래그합니다.
- 버튼에 레이블을 추가하고 오른쪽에 있는 컨텍스트 창을 사용하여 형식/색상 옵션을 조정합니다.
- 버튼에 로직을 추가하려면 사이드 패널에서 트리거 옆의 +를 클릭합니다.
트리거를 사용하면 코드를 사용하지 않고도 애플리케이션에 로직을 추가할 수 있습니다. 트리거는 when, if, then, else 시퀀스를 사용합니다.
여기서 빌드할 트리거의 로직은 다음과 같습니다:
When: 버튼이 눌림
Then: 현재 시간이 변수에 저장됩니다.
Transition에 저장합니다: 단계 → 다음으로 이동합니다.
- 저장을 클릭합니다.
이 버튼은 사용자를 다음 단계로 이동합니다. 일반적으로 사용자가 이전 단계로 이동할 수 있는 버튼도 추가하고 싶을 것입니다.
애플리케이션의 기본 로직을 구축했으면 오른쪽 상단의 테스트를 클릭할 수 있습니다. 그러면 개발자 모드에서 애플리케이션이 시작되므로 앱을 테스트할 수 있습니다.
앱 완성 및 데이터 기록
완료 버튼을 클릭하면 Tulip이 각 운영자와 관련된 모든 앱 데이터를 기록합니다.
이 예제에서는 앱의 마지막 단계에 버튼을 하나 더 추가하겠습니다.
- 앱의 마지막 단계를 선택합니다.
- 버튼을 클릭하고 완료를 선택합니다.
- 새 버튼을 원하는 위치로 드래그합니다.
추가 읽기
이 단계별 가이드를 사용하여 이러한 개념을 사용하여 전체 앱을 빌드하세요:
원하는 것을 찾았나요?
community.tulip.co로 이동하여 질문을 게시하거나 다른 사람들이 비슷한 질문에 직면했는지 확인할 수도 있습니다!