가이드 2: 데이터 작업

중급 App Maker 기술

access_time 15~20분

제작할 앱

간단한 직원 데이터베이스 앱을 제작합니다. 앱 사용자는 다음을 수행할 수 있습니다.

  • 새 직원 레코드를 만들고 데이터 입력
  • 직원 레코드 수정
  • 레코드 탐색
  • 레코드 정렬
  • 레코드 삭제

학습 내용

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

  • 데이터 모델을 만들고 필드 추가. 모델, 필드, 레코드, 데이터 소스, 데이터 결합 등 데이터 관련 개념을 배웁니다.
  • 페이지에 양식 및 표 위젯 추가. 이러한 위젯을 수정하는 방법과 작동 방식을 배웁니다. 또한 삽입 양식과 수정 양식의 차이점도 배웁니다.

앱 만들기

  1. 직장 또는 학교에서 제공한 G Suite 계정으로 로그인합니다.
  2. App Maker를 엽니다.
  3. 빈 앱을 만듭니다.
    • App Maker에 시작 대화상자가 표시되는 경우에는 새 앱 만들기를 클릭합니다.
    • 그렇지 않으면 메뉴 menu chevron_right 새로 만들기 chevron_right 빈 애플리케이션을 클릭합니다.
  4. 앱의 이름을 직원 데이터베이스로 바꿉니다.

모델 만들기

모델을 만들고 필드를 정의합니다. 모델에는 앱에서 사용할 수 있는 데이터가 포함되어 있습니다. 모델 필드는 표의 열과 유사합니다(예: 이름, 이메일, 고용일). 모델은 표의 행과 같이 레코드에 데이터를 저장합니다. 이 가이드에서는 Google Cloud SQL 모델을 사용합니다.

  1. 왼쪽 탐색 메뉴에서 데이터를 가리킨 다음 add를 클릭합니다. 모델 만들기 대화상자가 열리고 Google Cloud SQL이 선택되어 있습니다.
  2. 다음을 클릭합니다.
  3. 모델에 직원 데이터라는 이름을 지정합니다.
  4. 만들기를 클릭합니다. App Maker가 모델을 만들고 모델 편집기를 엽니다.
  5. 데이터 소스 탭을 클릭합니다. App Maker가 자동으로 만든 직원 데이터라는 데이터 소스 하나가 모델에 있는 것을 확인하세요. 데이터 소스는 데이터베이스의 데이터 중 앱 UI에 제공되는 데이터를 설정합니다.
  6. 직원 데이터를 클릭하여 데이터 소스 편집기를 열고 데이터 소스 설정을 살펴봅니다.

    기본값으로 모든 데이터가 제공되고(쿼리가 설정되지 않음), 데이터 소스가 자동으로 로드되며(자동으로 데이터 로드가 선택됨), 변경사항이 자동으로 저장됩니다(수동 저장 모드가 선택되지 않음). 이 앱은 기본값만으로 충분하지만, 다른 앱의 경우에는 사용자의 쿼리를 먼저 전달하려면 자동으로 데이터 로드를 사용 중지하는 것이 좋습니다. 사용자가 데이터 소스의 레코드에 명시적으로 변경사항을 저장하도록 하려면 수동 저장 모드를 사용 설정하는 것이 좋습니다. 변경사항 저장 버튼을 클릭해야 할 수도 있기 때문입니다.

모델에 필드 추가

필드 탭에서 각 필드에 다음을 수행합니다.

  1. 새 필드 추가를 클릭하고 필드 유형을 선택합니다.
  2. 이름 필드에 필드 이름을 입력합니다. 설명 및 기타 설정은 변경하지 않고 그대로 둘 수 있습니다.

    다음 필드를 추가합니다.

    필드 이름필드 유형
    Name문자열
    Email문자열
    HireDate날짜
    Active부울

UI용 페이지 설정

앱에는 한 개의 시작 페이지가 있습니다. 페이지 이름을 지정하고 모델의 데이터 소스를 할당하세요. 페이지를 만들 때는 미리 정의된 데이터 소스가 없습니다. 페이지의 데이터 소스를 선택하면 페이지의 위젯이 자동으로 데이터 소스를 상속합니다.

  1. 왼쪽 사이드바에서 새 페이지를 가리키고 더보기 more_vert chevron_right 이름 바꾸기를 클릭합니다.
  2. 직원 페이지를 입력하고 확인을 클릭합니다.
  3. 속성 편집기(편집기 edit가 선택되면 표시됨)에서 데이터 소스 속성을 클릭합니다.
  4. 직원 데이터를 클릭하여 데이터 소스로 선택합니다.

수정 양식 추가

수정 양식으로 수행할 수 있는 작업은 다음과 같습니다.

  • 데이터베이스에 새 레코드 만들기
  • 레코드에 데이터 입력
  • 부울 필드, 날짜 필드, 가능한 값이 있는 필드와 같은 선택 사항이 있는 필드의 값 선택
  • 레코드의 데이터 수정
  • 데이터베이스에서 레코드 삭제

수정 양식을 추가하려면 다음 안내를 따르세요.

  1. 위젯 팔레트를 열고(위젯 클릭) 페이지에 양식 양식 위젯을 추가합니다.
  2. 상속됨: 직원 데이터에 페이지 데이터 소스를 설정했기 때문에 해당 데이터 소스가 자동으로 제안됩니다. 선택된 상태로 두고 다음을 클릭합니다.
  3. 양식 유형 선택 대화상자에서 수정을 선택한 후 다음을 클릭합니다.
  4. 양식의 옵션을 지정합니다.

    • 필드 - 양식에 포함할 데이터 소스 필드를 선택합니다.
    • 수정 가능 - 필드를 수정 가능한 것으로 설정합니다.

    이 가이드에서는 기본값을 그대로 사용합니다. 기본 옵션은 모든 데이터 소스 필드를 포함하는 양식을 만듭니다. ID를 제외한 모든 필드를 수정할 수 있습니다.

  5. 마침을 클릭합니다.

표 추가

표는 데이터를 행과 열로 표시합니다. 행은 모델의 레코드에 해당하고 열은 필드에 해당합니다. 사용자는 표를 사용하여 다음 작업을 수행할 수 있습니다.

  • 동시에 여러 레코드 보기 및 데이터 페이지 간 이동
  • 수정 가능한 필드에서 레코드 데이터 수정
  • 열별로 레코드 정렬
  • 레코드 삭제

테이블을 추가하려면 다음 안내를 따르세요.

  1. 위젯 에서 수정 양식 아래 페이지에 테이블 양식 위젯을 추가합니다. 수정 양식과 테이블의 왼쪽 가장자리를 맞춥니다.
  2. 상속됨: 직원 데이터에 페이지 데이터 소스를 설정했기 때문에 해당 데이터 소스가 자동으로 제안됩니다. 선택된 상태로 두고 다음을 클릭합니다.
  3. 표의 옵션을 지정합니다.

    • 필드 - 표에서 열로 사용할 데이터 소스 필드를 선택합니다.
    • 수정 가능 - 수정 가능한 필드를 선택합니다.

    이 가이드에서는 기본값을 그대로 사용합니다. 기본 옵션은 모든 데이터 소스 필드에 해당하는 열을 포함하는 표를 만들며, 이러한 열은 수정이 불가능합니다. 일반적으로 앱은 수정 가능한 필드가 너무 많지 않을 때 가장 잘 작동합니다. 이 가이드에 나와 있는 것처럼, 완전히 수정 가능한 표 대신, 레코드를 만들고 수정하는 팝업 대화상자와 레코드를 검토하는 읽기 전용 표를 제공하세요.

  4. 다음을 클릭합니다.

  5. 페이지가 매겨져 있고, 정렬 가능하며, 삭제 가능한 행 등 추가 옵션을 유지합니다.

  6. 마침을 클릭합니다.

앱 미리보기 및 테스트

  1. 오른쪽 상단 모서리에서 미리보기를 클릭하여 새 브라우저 탭에서 앱을 실행합니다.
  2. 허용을 클릭하면 앱이 특정 정보를 사용할 수 있습니다.
  3. 브라우저 창을 확대하여 전체 수정 양식과 표 상단을 맞춥니다.
  4. 직원 데이터 수정 양식에서 이름 필드에 이름을 입력해 봅니다. 아직 레코드가 없으므로 입력할 수 없습니다.
  5. 만들기를 클릭하여 레코드를 만듭니다. 앱이 표에 레코드를 추가합니다. 이는 데이터베이스의 실제 레코드입니다. 이제 데이터를 입력할 수 있으며 입력한 데이터는 자동으로 데이터베이스에 저장됩니다. 이 동작은 사용자가 레코드를 업데이트하려고 하는데 레코드를 만드는 방법이 직관적이지 않은 경우에 유용합니다. 이 가이드의 뒷부분에 설명된 삽입 양식은 사용자가 데이터를 더 직관적으로 추가할 수 있는 방법입니다.
  6. 양식을 작성합니다. 사용자가 데이터를 입력하고 값을 선택하면 App Maker가 값을 표에 추가합니다. Enter 키를 누르거나, 필드 바깥쪽을 클릭하거나, 항목을 선택하는 즉시 각 필드에 데이터가 적용됩니다.
  7. 만들기를 클릭하여 추가 레코드를 만들고 해당 레코드에 데이터를 입력합니다.
  8. 표에서 레코드 중 하나를 선택합니다. 레코드를 삭제하려면 수정 양식에서 삭제 delete를 클릭합니다. 수정 양식에는 자동 실행 취소 기능이 없지만 스크립트로는 자동 실행 취소를 수행할 수 있습니다.
  9. App Maker가 양식 하단에 추가하는 컨트롤을 확인합니다. 이를 사용하여 데이터 페이지를 탐색합니다.

수고하셨습니다. 이제 데이터와 함께 작동하는 App Maker 앱이 완성되었습니다.

UI를 지원하는 기능 살펴보기

이 가이드를 닫기 전에 결합, 이벤트, 작업 등 UI를 지원하는 기능을 살펴보세요.

결합에 대해 알아보기

결합이란 위젯 속성과 다른 속성의 양방향 연결을 말합니다. 데이터 결합은 위젯 속성이 데이터 소스의 속성에 결합된 경우를 말합니다.

결합은 양방향이므로 결합된 속성 하나를 변경하면 다른 속성도 변경됩니다.

앱 UI가 결합을 사용하는 방법을 살펴보세요.

  1. 앱 미리보기 탭이 아직 열려 있으면 닫고 App Maker로 돌아갑니다.
  2. 직원 수정 양식에서 이름 텍스트 상자를 선택합니다.
  3. 속성 편집기에서 value 속성이 @datasource.item.Name으로 설정되어 있는지 확인합니다.

    이러한 결합은 수정 양식의 이름 값을 데이터 소스 레코드의 이름 값에 연결합니다. value 속성의 경로는 다음과 같이 결합을 정의합니다.

    • datasource - 위젯의 데이터 소스
    • item - 현재 선택된 항목(레코드)
    • Name - Name의 레코드 값
  4. 속성 편집기에서 label 속성을 선택합니다. @models.EmployeeData.fields.Name.displayName으로 설정되어 있는지 확인합니다.

    이 결합은 직원 데이터 모델에 있는 이름 필드의 displayName 속성과 수정 양식에 있는 이름 텍스트 상자의 label을 연결합니다. label 속성의 경로는 이 결합을 다음과 같이 정의합니다.

    • models.EmployeeData - 직원 데이터 모델
    • fields.Name.displayName - 이름 필드의 displayName 속성

이벤트 및 작업에 대해 알아보기

발생하는 일(이벤트)과 응답(작업)을 연결할 수 있습니다.

이벤트는 작업을 트리거합니다. 앱 이벤트는 다음과 같습니다.

  • 앱이 시작됨
  • 데이터 소스가 로드됨
  • 앱이 권한을 확인함
  • 사용자가 버튼을 클릭함
  • 앱이 데이터에 액세스하거나 데이터를 변경함
  • 앱이 데이터의 유효성을 검사함

작업은 이벤트에 대한 응답입니다. 다음 작업이 포함됩니다.

  • 새 항목 만들기
  • 현재 항목 삭제
  • 데이터 소스 다시 로드
  • 클라이언트 스크립트 실행

앱이 이벤트 및 작업을 사용하는 방법을 살펴보세요.

  1. 직원 데이터 수정 양식에서 만들기 버튼을 선택합니다.
  2. 속성 편집기에서 onClick을 찾습니다. onClick 이벤트는 사용자가 만들기 버튼을 클릭할 때 발생합니다. onClick 이벤트는 버튼이벤트 섹션 모두에 나열됩니다(동일한 항목이 편의상 두 위치에 표시됨).
  3. onClick을 클릭합니다. 이 메뉴에는 사용자가 버튼을 클릭할 때 실행할 수 있는 작업이 포함됩니다. 이 경우 작업은 커스텀 스크립트입니다. 커스텀 작업을 클릭하여 코드를 엽니다. 이 코드는 위젯에 할당된 데이터 소스에 항목을 만듭니다. App Maker에는 새 항목 만들기라는 미리 설정된 작업이 있지만 해당 작업은 삽입 양식용입니다.
  4. 캔버스(페이지 편집기)의 표에서 이름 헤더를 클릭합니다.
  5. 속성 편집기에서 onClick > 커스텀 작업을 클릭합니다. 사용자가 이름 헤더를 클릭하는 경우 이름 필드를 기준으로 표를 정렬하는 커스텀 스크립트가 작업입니다.

삽입 양식과 수정 양식 비교

양식이라는 주제를 끝내기 전에 수정 양식과 삽입 양식을 비교해 보세요.

이 가이드의 앞부분에서는 사용자가 수정 양식을 사용하여 데이터베이스의 레코드를 수정할 수 있다고 배웠습니다. 레코드가 없는 경우 사용자가 레코드를 만들어야 데이터를 입력할 수 있습니다. 반대로, 삽입 양식은 처음에 데이터베이스가 아닌 데이터 소스에 있는 단일 초안 레코드에 데이터를 저장합니다. 사용자가 준비되면 초안 레코드의 내용을 데이터베이스에 명시적으로 저장합니다.

삽입 양식을 사용하면 다음을 수행할 수 있습니다.

  • 초안 레코드의 필드에서 데이터를 입력하고 값 선택
  • 초안 레코드의 내용을 데이터베이스의 새 레코드에 저장. 데이터가 복사되면 초안 레코드가 비워집니다.

삽입 양식 추가

  1. 위젯 에서 수정 양식 옆에 있는 페이지에 양식 양식 위젯을 추가합니다.
  2. 상속됨: 직원 데이터 데이터 소스가 기본적으로 선택되어 있습니다. 선택된 상태로 두고 다음을 클릭합니다.
  3. 삽입을 선택하고 다음을 클릭합니다. 모든 필드가 양식에 표시되고 수정 가능하도록 모든 필드를 선택합니다.
  4. 마침을 클릭합니다.

삽입 양식의 작동 방식 살펴보기

  1. 오른쪽 상단 모서리에서 미리보기를 클릭하여 새 브라우저 탭에서 앱을 실행합니다.
  2. 표에 레코드가 포함되어 있으면 레코드가 하나도 존재하지 않을 때까지 행을 가리키고 삭제 delete를 클릭하는 과정을 계속합니다.
  3. 직원 데이터 만들기 양식을 채웁니다. 직원 수정 양식과 달리 데이터를 직접 입력할 수 있지만 데이터가 표에 추가되지는 않습니다. 데이터를 입력하면 App Maker가 데이터를 데이터베이스가 아닌 데이터 소스의 초안 레코드에 저장합니다. 레코드를 데이터베이스에 저장해야만 표가 업데이트됩니다.
  4. 제출을 클릭하여 데이터베이스에 실제 레코드를 만듭니다. App Maker가 초안 레코드의 데이터를 실제 레코드로 복사한 다음 초안 레코드를 비웁니다. 이제 데이터가 데이터베이스에 있기 때문에 데이터가 표에 있습니다. 데이터는 현재 선택된 레코드의 데이터가 들어 있는 수정 양식에도 나타납니다.

    수정 양식에 데이터를 입력하면 삽입 양식의 값이 초안 레코드에 결합되므로 데이터가 삽입 양식에 표시되지 않습니다.

삽입 양식을 만드는 방법 살펴보기

  1. 앱 미리보기 탭이 아직 열려 있으면 닫고 App Maker로 돌아갑니다.
  2. 직원 데이터 만들기 양식에서 이름 텍스트 상자를 선택합니다.
  3. 속성 편집기에서 value 속성이 @datasource.item.Name으로 설정되어 있는지 확인합니다. 하지만 이 양식은 삽입 양식이므로 이러한 결합은 삽입 양식의 이름 값을 데이터 소스 초안 레코드이름 값에 연결합니다. 초안 레코드 및 생성 모드 데이터 소스에 대해 자세히 알아보세요.
  4. 이제 제출 버튼을 선택합니다. onClick 이벤트의 작업이 새 항목 만들기인지 확인합니다. 삽입 양식에서 새 항목 만들기 작업이 수행하는 작업은 다음과 같습니다.
    1. 데이터베이스에 새 레코드 만들기
    2. 초안 레코드의 내용을 새 레코드로 복사
    3. 초안 레코드 지우기

다음 단계

  • 가이드 3 진행 - 앱 스타일 지정에 대해 알아봅니다.
  • 데이터에 대해 자세히 알아보기 - 모델에 대한 문서를 읽어 봅니다.
  • 샘플 앱 연구 - Hello Data 앱은 이 가이드와 동일한 작업 과정을 거치지만 수정 양식이 일부 변경되었습니다.