가이드: 옵션 선택

버튼 위젯 중급 App Maker 기술

10~15분

제작할 앱

피자 주문 앱을 제작해 봅니다. 앱 사용자는 다음을 수행할 수 있습니다.

  • 피자를 주문하고 피자의 크기와 토핑 선택
  • 모든 주문을 하나의 표로 보기
  • 토핑 옵션 업데이트

학습 내용

이 가이드는 다음과 같은 교육 내용을 포함합니다.

  • 각종 입력 위젯 설정
  • 입력 위젯의 옵션을 설정하는 3가지 방법

또한 데이터 모델을 만들고, 페이지를 추가하고, 결합을 사용하여 위젯에서 옵션을 설정합니다. 자세한 내용은 다른 가이드에서 다룹니다.

앱 만들기

  1. 직장 또는 학교에서 제공한 G Suite 계정으로 로그인합니다.
  2. App Maker를 엽니다.
  3. 빈 앱을 만들고 '피자 주문'이라는 이름을 지정합니다.

앱의 데이터 모델 및 UI 설정

  1. Cloud SQL 모델을 추가하고 '주문'이라는 이름을 지정합니다.
  2. 다음 필드를 추가합니다.
필드 이름 유형
고객 이메일 문자열
사이즈 문자열
토핑 문자열
  1. Size 필드를 클릭한 다음 고급을 클릭합니다. 가능한 값 필드를 클릭하고 'small'과 같은 크기를 입력한 후 추가를 클릭합니다. 'medium' 및 'large'와 같은 다른 크기도 동일한 단계를 반복합니다. 완료를 클릭합니다.
  2. 왼쪽 탐색 메뉴에서 새 페이지를 클릭합니다. 속성 편집기에서 다음 속성을 설정합니다.

    1. 이름 - PizzaOrders
    2. 이름 표시 - Pizza Orders
    3. 데이터 소스 - Orders
  3. 위젯 팔레트 를 열고 페이지에 양식 위젯을 추가합니다.

    1. 데이터 소스를 '상속됨: Orders' 그대로 둡니다.
    2. 삽입 유형의 양식을 선택합니다.
    3. 양식 필드 선택 페이지에서 Id 체크박스의 선택을 해제합니다.

    데이터 소스의 필드에 해당하는 텍스트 필드로 양식이 자동으로 채워집니다. 다음 단계에서는 위젯을 추가하여 이러한 텍스트 필드 중 일부를 대체합니다. 텍스트 필드는 아직 삭제하지 않습니다. 위젯이 데이터 소스에 연결하는 방법을 보여주기 때문입니다.

  4. 양식 옆에 표 위젯을 추가합니다. 모든 기본값을 유지합니다.

선택 위젯 추가

이 섹션에서는 사용자가 피자 크기와 토핑을 선택할 수 있는 위젯을 설정합니다.

  1. 피자 크기를 선택할 수 있는 드롭다운 목록을 만듭니다.

    1. 고객 이메일 텍스트 필드 아래의 피자 주문 양식에 드롭다운 위젯을 추가합니다.
    2. 속성 편집기에서 드롭다운 위젯에 '사이즈 선택'이라는 이름을 지정합니다.
    3. label을 '사이즈 선태:'으로 설정합니다.
    4. 옵션을 클릭합니다. 드롭다운 옵션을 사이즈 필드의 가능한 값에 결합하려면 옵션@datasource.model.fields.Size.possibleValues로 설정합니다.
    5. values를 클릭하고 사이즈를 선택합니다. 이 설정은 @datasource.item.Size에 값을 결합합니다. 사이즈 텍스트 필드 위젯을 클릭하면 동일한 값이 있는 것을 볼 수 있습니다. value는 위젯을 데이터 소스에 연결합니다. 사용자가 주문을 작성하면 앱이 사이즈 필드를 위젯에 선택된 값으로 설정한 후 데이터 모델에 레코드를 추가합니다.
    6. 사이즈 텍스트 필드 위젯을 삭제합니다.
  2. 피자 토핑을 선택하는 다중 선택 위젯을 만듭니다.

    1. 사이즈 선택 드롭다운 목록 아래의 페이지에 다중 선택 위젯을 추가합니다.
    2. 속성 편집기에서 다중 선택 위젯에 '토핑 선택'이라는 이름을 지정합니다.
    3. label을 '토핑 선택:'으로 선택합니다.
    4. 옵션을 클릭합니다. 결합 코드 편집기에서 @datasource.text를 삭제하고 ["basil", "eggplant", "garlic", "tomatoes"](또는 좋아하는 다른 토핑)를 입력합니다.

      데이터 소스의 토핑 필드에 선택 가능하도록 설정된 값에 옵션을 결합하지 않았습니다. 가능한 값은 데이터 유효성 검사기로 사용되며 정확하게 일치합니다. 다중 선택 위젯의 경우 이 방법을 사용하려면 각 토핑 모든 토핑 조합을 입력해야 합니다. 예를 들어 'basil', 'eggplant', 'garlic', 'tomatoes', 'basil,eggplant', 'basil,garlic', 'basil,eggplant,garlic' 등이 있습니다.

    5. values를 클릭하고 결합을 @datasource.item.Toppings#strToArray()로 설정합니다. 토핑 텍스트 필드 위젯을 클릭하면 비슷한 값을 볼 수 있습니다. 사용자는 다중 선택 위젯에서 둘 이상의 토핑을 선택할 수 있으므로 #strToArray()를 사용하여 위젯에 있는 목록을 데이터 소스에 저장된 배열로 변환합니다.

    6. 토핑 텍스트 필드 위젯을 삭제합니다.

  3. 위젯 팔레트를 닫습니다(닫기 클릭).

  4. 앱을 미리보고 테스트합니다.

    1. 미리보기를 클릭하고 앱이 데이터에 액세스하도록 허용합니다.
    2. 주문하기 창에서 피자를 주문합니다. 제출을 클릭하면 표에 피자 주문이 추가됩니다.
    3. 미리보기 탭을 닫습니다.

데이터 결합을 사용하여 토핑 옵션 설정

자주 바뀌는 메뉴가 있는데 토핑 옵션을 추가할 때마다 위젯 옵션을 수정하고 앱을 다시 배포하고 싶지는 않다면 어떻게 해야 할까요? 이 섹션에서는 토핑을 추가하는 페이지와 이를 볼 수 있는 표를 추가합니다. 새 옵션으로 토핑 선택기를 자동으로 업데이트하도록 데이터 결합을 설정합니다.

  1. Cloud SQL 모델을 추가하고 '토핑'이라는 이름을 지정합니다.
  2. 필드 탭에서 문자열 유형의 필드를 추가하고 '토핑'이라는 이름을 지정합니다.
  3. 새 페이지를 추가합니다. 속성 편집기에서 다음과 같이 변경합니다.
    1. 페이지에 '토핑 추가'라는 이름을 지정합니다.
    2. 데이터 소스를 토핑으로 설정합니다.
    3. 보안 섹션에서 이 페이지를 볼 수 있는 사람 메뉴를 클릭하고 관리자만을 선택합니다. 이 설정을 사용하면 고객이 페이지에 액세스하여 더 많은 토핑을 추가할 수 없습니다. 고객은 피자 주문 페이지에만 액세스할 수 있습니다.
  4. 위젯 팔레트 를 열고 페이지에 양식 위젯을 추가합니다.

    1. 데이터 소스를 상속됨: 토핑 그대로 둡니다.
    2. 삽입 양식 유형을 선택합니다.
    3. 양식 필드 선택 페이지에서 Id 체크박스의 선택을 해제합니다.
    4. (선택사항) 위젯의 폭이 더 좁아지도록 크기를 조절합니다.
  5. 삽입 양식 옆에 표를 추가합니다. 기본값을 그대로 둡니다.

  6. 주문하기 페이지로 이동합니다.

  7. 주문하기 양식에서 토핑 선택 다중 선택 위젯을 선택합니다.

  8. 속성 편집기에서 옵션을 클릭합니다. 앞에서 자바스크립트 배열을 삭제합니다. 애플리케이션 아래에서 데이터 소스 토핑 항목 프로젝션 토핑을 선택합니다. 이 값은 @datasources.Toppings.items..Topping입니다. 이제 위젯 옵션은 토핑 데이터 모델의 값입니다.

  9. 앱을 미리보고 테스트합니다.

    1. 미리보기를 클릭합니다.
    2. 피자 주문 페이지의 주문하기 창에 토핑 옵션이 없는 것을 확인합니다. 토핑 데이터베이스에 몇 가지 토핑을 추가해야 합니다.
    3. 페이지 선택기를 사용하여 토핑 추가 페이지로 이동합니다.
    4. 토핑을 추가합니다. 토핑을 추가하면 표에 채워집니다.
    5. 페이지 선택기를 사용하여 피자 주문 페이지로 이동합니다. 이제 주문하기 창에 방금 추가한 모든 토핑이 표시됩니다.

수고하셨습니다. 방금 여러 가지 방법으로 사용자가 옵션을 선택할 수 있도록 하는 앱을 만들었습니다.

다음 단계

  1. 데이터 결합을 사용하여 주문하기 양식의 피자 크기 옵션을 설정해 봅니다.
  2. 라디오 그룹 위젯을 사용하여 피자 크기 선택기를 설정해 봅니다.

    팁: 라디오 옵션에 Id 필드 대신 사이즈 필드 값이 표시되도록 하려면 데이터 모델로 가서 사이즈 필드를 클릭하고 표시 필드로 설정을 클릭합니다. 라디오 그룹을 사용하여 토핑을 선택해 보시겠어요?

  3. 공급업체 평점 템플릿 앱을 연구합니다. 업체 추가 페이지에는 회사의 리전을 선택하는 다중 선택 위젯이 있습니다. 리전은 회사 레코드와 관계가 있습니다.