기본 AppSheet 데이터베이스를 사용해 노코드 앱 빌드하기

1. 시작하기 전에

AppSheet 데이터베이스(ASDB)는 AppSheet 앱을 지원하는 데이터를 구성하고 관리하기 위한 AppSheet의 퍼스트 파티 기본 데이터베이스입니다. ASDB의 인터페이스와 개선된 성능은 Google Sheets, BigQuery, Cloud SQL과 같이 흔히 사용되는 다른 외부 데이터 소스에 비해 앱 개발자와 최종 사용자 모두에게 더 우수한 환경을 제공합니다. AppSheet 데이터베이스는 모든 AppSheet 애플리케이션에 기본 데이터 옵션으로 포함되어 제공됩니다.

학습할 내용

  • 예시 데이터 또는 Google 시트에서 가져온 데이터를 사용하여 새 AppSheet 데이터베이스를 만드는 방법
  • AppSheet 데이터베이스 편집기에서 데이터를 맞춤설정하는 방법
  • AppSheet 데이터베이스에서 AppSheet 애플리케이션을 생성하는 방법
  • 테이블 구조 변경사항을 반영하도록 데이터베이스를 변경하고 AppSheet에서 테이블을 재생성하는 방법

빌드할 항목

이 Codelab에서는 새 AppSheet 데이터베이스를 생성하고 맞춤설정하는 방법을 알아봅니다. 우선 AppSheet 데이터베이스에서 제공하는 기본 데이터로 처음부터 만든 다음 Google 시트의 기존 데이터로도 만들어 봅니다. 그러고 나서 AppSheet 데이터베이스에서 새로운 AppSheet 애플리케이션을 생성하는 방법을 살펴봅니다. 마지막으로 데이터베이스 편집기에서 데이터베이스 테이블을 변경한 다음 AppSheet 앱 편집기에서 테이블을 재생성하는 방법을 알아봅니다.

필요한 항목

2. 새 AppSheet 데이터베이스를 처음부터 만들고 맞춤설정하기

먼저 시작용 기본 데이터베이스를 사용하여 새 AppSheet 데이터베이스를 처음부터 만들고 맞춤설정해 보겠습니다. 이렇게 하면 Codelab의 후반 단계를 중단하지 않고도 데이터베이스 편집기를 실험해 볼 수 있습니다.

  1. AppSheet(appsheet.com) 홈페이지로 이동한 다음 Create(만들기) > Database(데이터베이스) > New database(새 데이터베이스)를 클릭합니다.

처음부터 새 데이터베이스 만들기

  1. 새로운 예시 데이터베이스가 생성되면서 AppSheet 데이터베이스 편집기가 열립니다.

AppSheet 데이터베이스 편집기의 새 예시 데이터베이스 이미지

  1. 데이터베이스 이름을 Untitled database에서 Tasks DB로 변경하여 맞춤설정합니다. 기본 제목인 Untitled database를 더블클릭하여 데이터베이스 이름을 수정하면 됩니다.
  2. 테이블 이름을 Table 1에서 Tasks로 변경합니다. 탭을 더블클릭하여 수정합니다.
  3. 첫 번째 열을 Title에서 Task로 변경합니다.
  4. 왼쪽 상단의 +를 클릭하여 새로운 레코드를 추가합니다.

왼쪽 상단의 +를 클릭하여 새 레코드를 추가하는 방법 이미지

  1. Status(상태) 열을 더블클릭하여 'Enum' 유형과 'Dropdown(드롭다운)' 항목 유형이 어떻게 사용되고 있는지 확인합니다.

'Status(상태)' 열의 속성 편집기. 유형으로는 'Enum', 항목 유형으로는 'Dropdown(드롭다운)'이 사용됨.

  1. 선택사항: = 기호 옆의 버튼을 클릭해 각 드롭다운 옵션에 색상을 지정하세요.

색상 선택 도구로 'Dropdown(드롭다운)' 옵션 색상 지정

  1. 선택사항: 편집기로 실험을 더 하려면 새로운 색상과 함께 Status(상태) Enum에 새 옵션을 추가하세요(Add option(옵션 추가) 클릭).
  2. 선택사항: Color(색상), Progress(진행 상태), Yes(예)/No(아니요), Phone(전화) 같은 다양한 열 유형을 실험해 보고 어떻게 작동하는지 살펴보세요.

ASDB의 지원 데이터 유형이 모두 나와 있는 컨텍스트 메뉴

데이터베이스 편집기를 사용해 자유롭게 실험해 보세요. 다음 단계에서는 새 데이터베이스를 만들어 봅니다.

3. Google 시트에서 가져와 새 데이터베이스를 만들고 맞춤설정하기

다음 단계는 Google 시트의 데이터를 가져오는 방법입니다.

시트로 데이터베이스 만들기

  1. 우선 이 공개 Google 시트의 사본을 만든 후 ASDB: IO Codelab으로 이름을 바꿉니다.

이 시트에는 TasksOwners라는 두 개의 탭이 있습니다.

  1. 이전 단계에서처럼 AppSheet(appsheet.com) 홈페이지로 이동한 후 Create(만들기) > Database(데이터베이스) > Import from Sheets(Sheets에서 가져오기)를 클릭합니다.

시트 가져오기로 데이터베이스 만들기

  1. Google Drive 파일 선택 도구에서 시트 사본(ASDB: IO Codelab 또는 사용자가 지정한 이름)을 선택합니다.

그러면 시트의 데이터를 사용한 AppSheet 데이터베이스가 새로 생성됩니다.

데이터베이스 편집기에서 시트를 사용해 생성한 AppSheet 데이터베이스의 스크린샷

Tasks 테이블에 참조 추가하기

다음으로 Tasks 테이블에서 Owners 테이블에 대한 참조를 추가해 보겠습니다.

  1. AppSheet 데이터베이스의 Tasks 테이블에서 Owner(소유자) 열을 더블클릭해 설정을 수정합니다.
  2. 유형을 Text(텍스트)에서 References(참조) > Reference(참조)로 변경합니다.

참조 유형 선택

  1. 참조할 테이블Owners로 설정한 다음 Save(저장)를 클릭합니다.

유형은 'Reference(참조)'로, 참조할 테이블은 'Owners(소유자)'로 설정된 대화상자

  1. 열 유형 변경에 관한 경고 메시지가 표시됩니다. 이 경우 이 열의 데이터가 새로운 열 유형과 호환되므로 Yes(예)를 클릭해 계속 진행할 수 있습니다.

열 유형 변경 Yes(예)/No(아니요) 대화상자

  1. 그러면 AppSheet 데이터베이스가 Owners 테이블의 해당 행을 Tasks 테이블의 이름과 일치시키려고 시도합니다. 일치하는 데이터 세트가 있으므로 AppSheet 데이터베이스가 Owners 행에 대한 올바른 참조로 Owner(소유자) 열을 채웁니다.

올바른 Owner(소유자) 열 값이 나와 있는 ASDB 편집기의 Tasks 테이블

  1. 참조를 테스트하기 위해 Owner(소유자) 셀을 클릭하고 Sarah와 같은 다른 소유자로 업데이트해 봅니다.

참조에서 제공되는 팝업 메시지에서 다른 소유자 선택

선택하면 새로운 값(Sarah)이 Tasks 테이블의 Owner(소유자) 셀에 나타납니다.

다른 소유자를 선택하면 Sarah라는 소유자 이름이 Tasks 테이블의 Owner(소유자) 열에 나타납니다.

참조된 테이블의 Label(라벨) 열 변경하기

AppSheet 데이터베이스에서는 모든 테이블의 Label(라벨) 열을 선택할 수 있기 때문에 상위 테이블에 표시하고자 하는 열을 지정할 수 있습니다. 이 방법으로 연결된 AppSheet 프런트엔드 앱의 상위 테이블에 표시되는 값도 제어할 수 있습니다. 따라서 Tasks 테이블에 Owners 테이블의 Name(이름) 열을 표시하는 대신(이전 단계 설명 참조) Owners 테이블의 Email(이메일) 열을 표시할 수 있습니다.

  1. 이 작업을 수행하려면 Email(이메일) 열 헤더의 오른쪽에 마우스를 가져가면 표시되는 세로 생략 부호를 클릭하여 Owners 테이블의 Label(라벨) 열Email(이메일)로 변경하면 됩니다.

열 헤더 오른쪽의 세로 생략 부호가 표시된 이미지

그러면 열의 컨텍스트 메뉴가 호출됩니다.

'Use column as label(열을 라벨로 사용)'이 선택된 상태로 표시되는 열 컨텍스트 메뉴

  1. 컨텍스트 메뉴에서 Use column as label(열을 라벨로 사용)을 선택하여 열 라벨Email(이메일) 열로 설정합니다.

헤더의 왼쪽 상단에 열 라벨 마커가 표시된 이메일 열 헤더

  1. Tasks 테이블을 참조하는 열 라벨로 Email(이메일) 열이 선택되었는지 확인하려면 Tasks 테이블 탭을 클릭하고 Owner(소유자) 열에 이메일 주소가 표시되는지 살펴보면 됩니다. Owner(소유자) 열을 업데이트하려면 브라우저를 새로고침해야 할 수 있습니다.

참조된 Owners 테이블의 Email(이메일) 열이 열 라벨로 설정되어 이메일 주소가 표시되는 Tasks 테이블의 Owner(소유자) 열

4. AppSheet 데이터베이스에서 AppSheet 앱 생성하기

데이터베이스 맞춤설정을 마쳤다면 데이터베이스에서 바로 AppSheet 앱을 생성할 수 있습니다. 커스텀 프런트엔드 UI를 원하거나 자동화 또는 보안 필터 등을 추가해야 하는 경우에 유용한 기능입니다. 이 작업을 수행하는 방법은 다음과 같습니다.

  1. ASDB 편집기의 오른쪽에서 Apps(앱)를 클릭합니다.

오른쪽에 'Apps(앱)' 버튼이 강조 표시된 AppSheet 데이터베이스 편집기 스크린샷

그러면 새로운 앱을 생성할 수 있는 컨텍스트 메뉴가 오른쪽에 호출됩니다.

이전과 동일한 스크린샷에 'New AppSheet app(새 AppSheet 앱)' 버튼이 있는 대화상자가 표시됨

  1. New AppSheet app(새 AppSheet 앱)을 클릭하여 새 앱을 생성합니다.

생성된 AppSheet 앱의 스크린샷

앱이 생성될 때 다음과 같은 경고 메시지가 표시됩니다.

Column "Owner" in Tasks_Schema has a reference to an unknown table or slice "Owners". Open the column definition to select a source table.

생성된 앱에 Tasks 테이블만 있는데 Owner(소유자) 열에 알 수 없는 Owners 테이블에 대한 참조가 포함되어 있어 발생하는 오류입니다.

이 오류를 해결하려면 Owners 테이블을 AppSheet 앱에 추가하면 됩니다.

  1. AppSheet 편집기의 Data(데이터) 페이지에서 +를 클릭합니다.

'+' 아이콘이 강조 표시된 데이터 페이지

  1. Add data(데이터 추가) 컨텍스트 메뉴에서 데이터 소스로 AppSheet Database(AppSheet 데이터베이스)를 선택합니다.

데이터 추가 컨텍스트 메뉴

  1. 그런 다음 ASDB: IO Codelab 데이터베이스(또는 이전 단계에서 데이터베이스에 지정한 이름)를 선택합니다.

데이터베이스 메뉴 옵션을 선택합니다.

  1. 이어서 표시되는 대화상자에서 기본값인 SELECT ALL(모두 선택) 체크박스를 선택한 다음 Add to app(앱에 추가)을 클릭합니다.

AppSheet 앱에 추가할 Owners 테이블을 선택하는 대화상자

Owners 테이블이 앱에 추가되었으므로 참조 오류가 더 이상 표시되지 않습니다.

참조 오류가 표시되지 않는 AppSheet 앱 스크린샷

  1. 이제 새로운 Owners AppSheet 테이블이 추가되었으므로 AppSheet의 Views(뷰) 페이지를 클릭하고 PRIMARY NAVIGATION(기본 탐색) 옆의 +를 클릭하여 이 데이터를 표시하는 새 뷰를 생성할 수 있습니다.

'+' 아이콘이 강조 표시된 뷰 페이지

  1. Add a new view(새 뷰 추가) 대화상자에서 Create a new view(새 뷰 만들기)를 클릭합니다.

새 뷰 추가 대화상자

  1. 새로운 뷰가 생성되면 다음과 같이 옵션을 설정합니다.

View name(뷰 이름): Owners, For this data(이 데이터 표시 대상): Owners, View type(뷰 유형): deck(자료)

Owners 뷰의 뷰 편집 페이지

축하합니다. 이제 앱이 완성되었습니다.

  1. Tasks와 Owners 간의 참조 관계를 테스트하려면 모바일 미리보기에서 Owners 뷰 또는 Tasks 뷰를 클릭한 다음 레코드를 선택하여 참조된 관련 레코드를 확인하세요.

오른쪽에 모바일 미리보기가 강조 표시되어 있는 AppSheet 앱 스크린샷

예를 들어 Owners 뷰를 클릭한 다음 레코드를 클릭하여 관련 Task 레코드를 드릴다운하고 확인할 수 있습니다.

Owner(소유자)를 선택하고 드릴다운을 통해 관련 Task를 확인하는 방법을 보여주는 이미지

5. 데이터베이스를 변경하고 Tasks 테이블 재생성하기

Appsheet 데이터베이스를 만들고 새로운 앱을 생성했으므로 이제 데이터베이스의 테이블을 변경해 보겠습니다. 열 데이터 유형을 변경하고 연결된 AppSheet 앱에 어떤 변화가 있는지 살펴보세요.

  1. 데이터베이스의 Tasks 테이블에서 Due Date(마감일) 열의 유형을 Date and time(날짜 및 시간) > Date(날짜)로 변경합니다.

ASDB 편집기에서 Task 테이블의 Due Date 열 유형을 '날짜'로 변경하기

AppSheet 앱으로 돌아오면 데이터베이스가 업데이트된 것을 감지하고 AppSheet 앱에서 다음과 같은 경고 메시지를 표시합니다.

App Schema for table 'Tasks' is out of sync with the schema in AppSheet database. Please regenerate the table structure

AppSheet의 편집기에서 데이터베이스의 스키마 변경사항을 감지한 후 경고 메시지를 제공함

  1. 재생성하려면 오른쪽 상단에 있는 재생성하기 아이콘 d1a956498c05d75f.png을 클릭합니다.
  2. 그러면 경고 대화상자가 트리거됩니다.

재생성 경고 대화상자

  1. Regenerate(재생성하기)를 클릭하여 계속 진행합니다. 그러면 앱의 Due Date(마감일) 열 유형이 Date(날짜) 유형으로 업데이트되면서 Task 레코드의 Edit(편집) 양식에 날짜 선택 도구 입력 요소가 사용 설정됩니다.

날짜 선택 입력 요소를 보여주는 AppSheet 앱 편집 양식

6. 수고하셨습니다.

AppSheet 데이터베이스(ASDB) Codelab을 완료했습니다.

추가 자료