연습: 첫 번째 앱 빌드

  • 에 게시됨 May 27, 2025
  • 3 읽은 시간(초)
  • Pete Hartnett
  • Lianna Churchill
 Prev Next

이 연습에서는 다음과 같은 내용을 다룹니다. 단계에 메시지 표시하기- 사용자 지정 메시지 입력하기- 메시지 수 만들기- 가장 최근 메시지 표시 날짜 및 시간 문서화하기

이 연습에서는 여러 가지 기능적인 앱 구성 요소를 빌드하여 앱의 기본을 배웁니다.

연습이 끝나면 다음과 같은 Hello World 앱이 완성됩니다:

ex first app full walkthrough

연습 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. 입력을 클릭하고 변수를 선택합니다. 위젯 탭에서 데이터 소스 선택 필드를 클릭합니다. 앱 정보 옆의 화살표를 클릭하고 앱 이름을 선택합니다.
  5. 변수를 클릭하고 사각형 위 왼쪽 상단 모서리로 끌어옵니다.ex first app base layout2
  6. 변수를 두 개 더 추가합니다:
  7. 앱 정보 데이터 소스 목록에서 스텝 이름을 선택합니다. 이 변수를 오른쪽 상단에 배치합니다.
  8. 앱 정보 데이터 소스 목록에서 로그인한 사용자를 선택합니다. 이 변수를 왼쪽 하단에 배치합니다.
  9. 마지막으로 버튼을 클릭하고 메뉴를 선택합니다. 버튼을 클릭하고 화면 하단으로 드래그합니다.

기본 레이아웃은 다음과 같이 표시됩니다:ex first app base layout

다음으로 단계별로 기능을 구축하겠습니다.

헬로 월드 버튼 추가

  1. 단계 탭에서 제목 없는 단계를 선택합니다. 두 번 클릭하여 이름을 바꾸고 "메시지 표시"를 입력합니다.
  2. 버튼을 클릭하고 버튼을 선택합니다. 버튼 주위의 사각형을 사용하여 버튼의 크기를 더 크게 조정합니다. 버튼을 화면 중앙에 배치합니다.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 문에 다음 로직을 추가합니다**: 메시지 표시** → 정적 값 → 텍스트 → "Hello World"

트리거는 다음과 일치해야 합니다:ex first app Hello world button trigger

  1. 저장을 클릭합니다.

앱을 테스트하면 다음과 같이 작동합니다:ex first app display hello world message

연습 2: 입력 데이터 저장하기

이 연습에서는 입력 텍스트를 변수에 저장하는 로직을 작성합니다.

  1. 새 단계를 추가하고 이름을 "메시지 저장"으로 지정합니다.
  2. 입력을 클릭하고 텍스트를 선택합니다.
  3. 위젯 탭에서 데이터 소스 상자를 클릭합니다. 변수 추가를 선택합니다.
  4. 변수 이름을 "메시지"로 지정하고 + 생성을 클릭합니다.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. 편집기 오른쪽의 측면 화살표를 클릭하여 시각화 창을 확장합니다. 값 아래에서 + 필드 추가를 클릭하고 레코드 수를 선택합니다.ex first analysis visualization panel fields
  7. 분석 제목을 클릭하고 이름을 "헬로 횟수"로 바꾼 다음 저장을 클릭합니다.
  8. 오른쪽 상단 모서리에서 저장 후 닫기를 클릭합니다.

개발자 모드에서는 완료 내용이 저장되지 않으므로 실행을 클릭하여Tulip 플레이어에서 이 분석을 테스트합니다.ex first app exercise 3 test

연습 4: 표현식을 사용하여 마지막 인사 계산하기

이 연습에서는 앱이 마지막으로 인사말을 한 시간을 표시하기 위해 변수에 저장하는 표현식을 트리거에 작성합니다.

  1. 사이드 패널에서 앱 탭으로 이동합니다.
  2. 변수 옆에서 X를 선택합니다.
  3. 변수 생성을 클릭합니다.
  4. 변수 이름을 "마지막으로 인사한 시간"으로 지정하고 + 생성을 클릭합니다.ex first app create new variable
  5. 메시지 표시 단계에서 안녕하세요 버튼을 클릭하고 새 트리거를 추가합니다.
  6. 트리거에 다음 작업을 추가합니다**. 데이터 조작** → 저장 → 표현식: '마지막으로 인사한 시간은' + ' ' + 앱 정보.현재 날짜 및 시간.현재 시간 → 변수 → 마지막으로 인사한 시간.

ex first app trigger store hello expression

  1. 헬로 횟수 단계에서 텍스트를 클릭하고 변수를 선택합니다.
  2. 사이드 패널의 데이터 옵션 아래에서 빈 데이터 소스 필드를 클릭한 다음 마지막으로 인사한 시간 변수를 선택합니다.

앱을 테스트하면 표현식이 마지막으로 인사한 시간 변수에 저장되고 타임스탬프로 표시됩니다.ex first app ex 4 test

다음 단계

이제 첫 번째 앱을 만들었으니 여기에서 앱을 게시하고 실행하는 방법을 알아보세요.

앱 빌드에 대해 자세히 알아보기:* 앱 빌드 기본 사항* Tulip 앱 편집기 소개* 효과적인 기본 레이아웃을 디자인하는 방법

Tulip 인증 앱 빌더 되기:기본 앱 빌더 인증받기

원하는 정보를 찾았나요?

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