가이드 5: 데이터 모델 연결

버튼 위젯 중급 App Maker 기술

약 30분

제작할 앱

부서별 직원 목록을 보여주는 HR 앱을 제작해 봅니다. 앱 사용자는 다음 작업을 수행할 수 있습니다.

  • 부서 및 직원 레코드 추가, 수정, 정렬, 삭제
  • 직원 레코드를 다음과 같은 두 가지 방식으로 보기

    • 부서별로만 보기
    • 부서별로 보기 또는 전체 보기

이 앱에는 페이지 간에 이동하는 기능이 없습니다. 미리보기 모드에서 페이지 선택기를 사용하여 페이지 사이를 이동합니다.

학습 내용

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

  • 데이터 모델 간의 관계 만들기. 이 가이드에서는 부서 모델과 직원 모델 간에 일대다 관계를 만듭니다. 부서당 여러 명의 직원이 있기 때문입니다.
  • 관계에 해당하는 레코드 표시(예: HR 부서의 모든 직원에 대한 레코드)

앱 만들기

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

부서 데이터 모델 설정

  1. Cloud SQL 데이터 모델을 추가하고 부서라는 이름을 지정합니다.
  2. 다음 필드를 추가합니다.

    필드 이름필드 유형
    Department문자열
    Location문자열
  3. 부서 필드를 클릭하고 표시 필드로 설정을 클릭합니다.

    부서를 표시 필드로 설정하면 App Maker가 필드 값을 사용하여 해당 모델의 레코드를 참조합니다. 예를 들어 이 가이드의 뒷부분에서 드롭다운 위젯을 추가하면 부서 필드가 결합 식 @datasource.items를 사용하여 드롭다운 옵션을 자동으로 채웁니다.

직원 데이터 모델 설정

  1. Cloud SQL 데이터 모델을 추가하고 직원라는 이름을 지정합니다.
  2. 다음 필드를 추가합니다.

    필드 이름필드 유형
    FirstName문자열
    LastName문자열
    Email문자열
    StartDate날짜

    직원 모델의 표시 필드를 설정할 필요가 없습니다.

관계 추가

  1. 부서 모델을 클릭하고 관계 탭을 클릭합니다.

  2. 관계 추가를 클릭합니다.

    1. 부서 모델 관계 쪽에서 개수 아래쪽 화살표를 클릭하고 을 선택합니다. 이 관계 쪽에는 기본 이름을 그대로 둡니다. 이 관계 쪽의 이름에 '부서'를 입력합니다.
    2. 다른 모델에서 모델 아래쪽 화살표를 클릭하고 직원을 선택합니다.
    3. 직원 모델 관계 쪽에서 개수 아래쪽 화살표를 클릭하고 를 선택합니다. 이 관계 쪽의 이름에 'Employees'를 입력합니다.
    4. 만들기를 클릭합니다.

부서를 추가할 수 있는 페이지 만들기

  1. 새 페이지 페이지의 이름을 부서 수정으로 바꿉니다. 페이지의 최상위 패널이 선택됩니다.
  2. 속성 편집기에서 데이터 소스 속성을 클릭하고 부서를 선택합니다.
  3. 페이지에 삽입 양식을 추가합니다. 양식의 기본 옵션을 유지합니다.
  4. 위젯 팔레트를 닫습니다(닫기 클릭).

직원을 추가할 수 있는 페이지 만들기

  1. 새 페이지를 추가합니다. 직원 수정라는 이름을 지정하고 데이터 소스를 직원으로 설정한 후 만들기를 클릭합니다.
  2. 페이지에 삽입 양식을 추가합니다. 양식의 기본 옵션을 유지합니다.
  3. 위젯 팔레트를 닫습니다.

부서별로 직원을 나열할 수 있는 페이지 만들기

관계를 사용하여 두 가지 방법으로 부서별 직원을 표로 만들 수 있습니다. 이 가이드에서는 두 가지 방법을 모두 보여줍니다.

  • 특정 부서만(이 섹션에서 설명) - 관계를 데이터 소스로 사용합니다. 이 데이터 소스를 사용하는 표는 페이지로 나누기 또는 열 기준 정렬을 지원하지 않습니다.
  • 특정 부서, 부서가 선택되지 않은 경우에는 모든 직원(다음 섹션에서 설명) - 관계에서 쿼리 필터를 사용합니다. 쿼리 필터를 사용하는 표는 페이지로 나누기를 지원합니다. 표를 열별로 정렬할 수도 있습니다.

실제 앱에서는 한 가지 방법을 선택하세요. 페이지가 매겨져 있고 정렬이 가능하고 부서에 직원이 한 명도 없는 경우에만 비워지므로 두 번째 방법을 사용하는 것이 좋습니다.

부서별로만 직원을 나열하는 페이지를 만들려면 다음 안내를 따르세요.

  1. 페이지를 만들고 관계 데이터 소스라는 이름을 지정하고 데이터 소스를 부서로 설정한 후 만들기를 클릭합니다.
  2. 앱 사용자가 부서를 선택할 수 있도록 드롭다운 목록을 추가합니다.

    1. 위젯 을 클릭하고 관계 데이터 소스 페이지에 드롭다운 위젯을 추가합니다.
    2. options 속성을 클릭하고 더보기 옵션 데이터 소스 항목을 선택합니다. 확인을 클릭합니다. 그러면 가능한 드롭다운 값이 데이터 소스의 표시 필드로 설정됩니다(이 경우 부서 필드의 값).
    3. value 속성을 클릭하고 더보기 옵션 데이터 소스 항목을 선택합니다. 확인을 클릭합니다. 그러면 위젯의 값이 사용자가 선택한 항목으로 설정됩니다.
    4. label 속성을 클릭하고 부서 선택을 입력합니다.
  3. 직원 레코드를 표시할 표를 추가합니다.

    1. 드롭다운 위젯 아래의 페이지에 테이블 표 위젯 위젯을 추가합니다. 테이블의 왼쪽과 드롭다운 위젯을 정렬합니다.
    2. 부서: 직원(관계) 데이터 소스를 선택하고 다음을 클릭합니다. 이 데이터 소스를 사용하면 테이블에 드롭다운 위젯 값과 일치하는 모든 직원이 표시됩니다.
    3. 표의 기본 옵션을 유지합니다. 다음, 마침을 차례로 클릭합니다.
  4. 위젯 팔레트를 닫습니다.

부서별로 직원을 나열하거나 모든 직원을 나열할 수 있는 페이지 만들기

  1. 페이지를 만들고 쿼리 필터라는 이름을 지정하고 데이터 소스를 직원으로 설정한 후 만들기를 클릭합니다.
  2. 사용자가 부서를 선택할 수 있도록 드롭다운 목록을 추가합니다.

    1. 위젯 을 클릭하고 쿼리 필터 페이지에 드롭다운 을 추가합니다.
    2. value 속성에서 결합 식 더보기 옵션 데이터 소스 쿼리 필터 부서 _같음을 선택합니다. 확인을 클릭합니다.
    3. options 속성에서 왼쪽에 있는 애플리케이션 패널의 결합 식을 선택하고 데이터 소스 부서 항목을 선택합니다. 확인을 클릭합니다.
    4. label 속성을 클릭하고 부서 선택을 입력합니다.
    5. 속성 편집기의 이벤트 섹션을 열고 onValueEdit를 클릭하고 데이터 소스 다시 로드를 선택하여 데이터 소스를 다시 로드한 다음 앱 사용자가 드롭다운 목록의 값을 변경할 때 쿼리를 다시 실행합니다.
  3. 부서 선택과 일치하는 직원 레코드를 표시할 표를 추가합니다.

    1. 드롭다운 아래의 페이지에 테이블 표 위젯을 추가합니다. 테이블의 왼쪽과 드롭다운 위젯을 정렬합니다.
    2. 데이터 소스 상속됨: 직원이 선택되어 있습니다. 테이블의 기본 옵션을 유지합니다. 다음 다음 마침을 클릭합니다.
  4. 위젯 팔레트를 닫습니다.

앱 미리보기 및 테스트

  1. 오른쪽 상단 모서리에서 미리보기를 클릭하여 새 브라우저 탭에서 앱을 실행합니다.
  2. 계정을 선택하고 허용을 클릭하여 앱이 특정 정보를 사용하도록 허용합니다.
  3. 부서 데이터를 입력합니다.
    1. 페이지 선택기에서 부서 수정를 선택합니다.
    2. 부서 수정 양식에서 여러 부서의 이름과 위치를 입력합니다. 만들기를 클릭하여 각각의 새 레코드를 만듭니다.
  4. 직원 데이터를 입력합니다.
    1. 페이지 선택기에서 직원 수정를 선택합니다.
    2. 직원 수정 양식에서 여러 직원의 정보를 입력합니다. 만들기를 클릭하여 각각의 새 레코드를 만듭니다. 직원에 해당하는 여러 부서를 선택합니다.
  5. 표의 관계 데이터 소스를 사용하는 페이지에서 부서별로 직원을 봅니다.

    1. 페이지 선택기에서 관계 데이터 소스를 선택합니다.
    2. 드롭다운 목록에서 부서를 선택합니다. 표에 해당 부서의 직원 레코드가 포함됩니다. 부서를 선택하지 않으면 표가 비어 있습니다.
  6. 쿼리 필터를 사용하여 표의 데이터를 로드하는 페이지에서 부서별로 직원을 봅니다.

    1. 페이지 선택기에서 쿼리 필터를 선택합니다.
    2. 부서를 선택하지 않으면 표에 모든 직원 레코드가 포함됩니다. 드롭다운에서 부서를 선택합니다. 이제 표에 해당 부서의 직원 레코드가 포함됩니다.

수고하셨습니다. 관계를 사용하는 App Maker 앱이 완성되었습니다.

다음 단계

  1. 관계에 대해 자세히 알아봅니다.
  2. 관계 샘플 앱을 연구합니다. 방금 만든 앱과 비슷합니다.
  3. 쿼리 데이터 소스필터에 대해 알아봅니다.