AppSheet 앱에 Chat 추가하기

1. 시작하기 전에

채팅 앱은 Google Chat에서 실행되는 웹 애플리케이션이나 서비스를 의미합니다. 이제 AppSheet를 사용하면 모든 AppSheet 앱이 채팅 앱으로 실행되도록 만들 수 있습니다. 이와 같이 사용 설정하고 게시하면 AppSheet 앱에 표시되는 데이터에 추가 폼 팩터가 제공됩니다.

학습할 내용

  • 기존 템플릿 예시 앱을 활용해 채팅 앱을 사용 설정하는 방법
  • 채팅 앱의 동작을 맞춤설정하는 방법
  • 기존 Workspace Chat 스페이스에 채팅 앱을 추가하는 방법
  • 채팅 자동화를 빌드하여 Chat 스페이스에 메시지를 전송하는 방법

빌드할 항목

이 Codelab은 기존 템플릿 앱을 활용해 채팅 앱으로 사용 설정, 구성, 게시하는 방법을 안내합니다. 그런 다음 기존 Chat 스페이스에 채팅 앱을 추가하여 자동화를 통해 채팅 메시지를 브로드캐스트하는 방법을 알아봅니다.

필요한 항목

2. 단순 인벤토리 템플릿 앱 복사하기

시작하려면 단순 인벤토리 템플릿 앱을 복사하세요. 그러면 이 Codelab에서 이 앱의 채팅을 사용할 수 있게 됩니다.

  1. AppSheet(appsheet.com) 홈페이지로 이동한 다음 Create(만들기) > App(앱) > Start with a template(템플릿으로 시작하기)를 차례로 클릭합니다.

템플릿으로 App Start 만들기

  1. Simple Inventory(단순 인벤토리) 템플릿 앱 카드에서 Copy(복사)를 클릭합니다.

단순 인벤토리 템플릿에서 복사 클릭

  1. Clone your app(앱 복제하기) 대화상자에서 앱 제목을 Simple Inventory Chat(단순 인벤토리 채팅)으로 지정합니다.

앱 복제하기 대화상자

템플릿 앱의 사본이 새로 생성되어 AppSheet 편집기에 로드됩니다.

AppSheet 편집기의 단순 인벤토리 앱 템플릿 사본

  1. 앱이 로드되면 앱이 배포되지 않아 봇이 앱 소유자에게만 이메일을 전달한다는 경고 메시지가 표시됩니다. Chat을 사용 설정하려면 앱을 배포해야 하므로 편집기에서 Manage(관리) 페이지를 클릭해 앱을 배포하세요. 그런 다음 Publish(게시)와 Move app to deployed state(앱을 배포된 상태로 이동)를 차례로 클릭합니다.

앱 배포하기

3. 새로운 채팅 앱을 만들고 맞춤설정하기

다음 단계는 현재 AppSheet 애플리케이션에서 새로운 채팅 앱을 만드는 방법입니다.

채팅 앱 만들기

  1. AppSheet 탐색기의 Chat 설정 페이지로 이동하여 Chat 설정을 확인합니다.

AppSheet 편집기의 Chat 설정 페이지

  1. 채팅 앱 설정을 시작하려면 Create(만들기)를 클릭합니다.
  2. Enable(사용 설정) 대화상자에서 Next(다음)를 클릭하여 계속합니다.

사용 설정 대화상자 이미지

중요: 채팅 앱을 만드는 데 몇 분 정도 소요된다는 메시지가 표시됩니다. 이 페이지를 새로고침하지 마세요.

페이지를 삭제하지 말라는 설명 메시지

  1. 채팅 앱이 만들어지면 Customize(맞춤설정) 페이지가 나타납니다.

이 시점에는 채팅 앱이 만들어져 이미 게시된 것입니다. 이후의 맞춤설정 단계는 모두 선택사항입니다.

채팅 앱 맞춤설정 페이지

  1. First Message(첫 번째 메시지)를 클릭하고 Message text(메시지 텍스트)를 설정해 Chat이 열릴 때 처음 표시할 메시지를 맞춤설정합니다. 채팅 앱이 처음 렌더링될 때 표시하고자 하는 커스텀 메시지를 추가하세요.

메시지 내용 맞춤설정

  1. Configure actions(작업 구성)로 스크롤을 내리고 Action(작업)을 클릭합니다.

작업 구성 페이지

  1. 나타나는 Action(작업) 메뉴에서 첫 번째 옵션인 Slash command: Open app view(슬래시 명령어: 앱 뷰 열기)를 선택합니다.

작업 컨텍스트 메뉴

  1. 다음을 입력합니다.

App View(앱 보기)

Inventory_log(드롭다운에서 선택)

Name(이름)

/log

Description(설명)

View the inventory log

슬래시 명령어 옵션

  1. Next(다음)를 클릭하여 계속합니다.

축하합니다. AppSheet에서 만든 첫 채팅 앱이 이제 배포되었습니다.

채팅 앱이 배포된 화면

4. 채팅 앱 설치하기

이제 배포된 앱을 사용하려면 Chat 환경에 설치해야 합니다.

설치하려면 다음 단계를 따르세요.

  1. Google Chat을 엽니다.
  2. Chat 오른쪽에 있는 + 아이콘을 클릭합니다.
  3. Simple Inventory Chat(단순 인벤토리 채팅) 앱을 검색합니다.

Chat에 채팅 앱 추가

  1. 결과에서 앱을 찾은 후 클릭하여 설치합니다.

설치 후 Chat 창에 표시된 채팅 앱

설치하면 채팅 앱이 메뉴 카드가 포함된 채팅 메시지를 전송합니다.

  1. 앱을 테스트하려면 Inventory Log(인벤토리 로그) 또는 Chat 카드의 다른 링크를 클릭합니다.

현재 인벤토리가 Chat 창에 표시됩니다.

단순 인벤토리 채팅 앱

  1. 선택사항: 또 다른 링크인 Items(항목)를 클릭합니다. 그러면 새로운 창에서 앱이 열립니다. Chat UI에서는 Items(항목) 뷰가 지원되지 않기 때문입니다.

Chat 뷰에서 지원되지 않는 Items(항목) 뷰

  1. 선택사항: 단순 인벤토리 채팅 앱의 채팅 앱 버전도 추가로 실험해 보세요.

5. Chat 스페이스에 채팅 앱 추가하기

다음 단계로 Chat 스페이스에 채팅 앱을 추가하겠습니다. 채팅 앱을 통해 여러 사람에게 브로드캐스트하고자 할 때 유용한 기능입니다.

새로운 Chat 스페이스 만들기

계속하려면 Chat 스페이스를 사용해야 합니다.

  1. 왼쪽 하단의 Chat 창에서 Spaces(스페이스) 옆의 + 아이콘을 클릭해 새 스페이스를 추가합니다.

Chat 스페이스 컨텍스트 메뉴

  1. Create a space(스페이스 만들기)를 클릭합니다.
  2. 대화상자에서 새 스페이스 이름을 원하는 대로 지정합니다. 이 Codelab에서는 이 스페이스를 Inventory Chat Space(인벤토리 Chat 스페이스)라고 지칭하므로 이 이름을 사용하는 것이 좋습니다.

스페이스 만들기 대화상자

  1. Create(만들기)를 클릭하여 새 스페이스 만들기를 완료합니다.

완료되면 Chat 창의 왼쪽 하단에 새 Chat 스페이스가 나타납니다.

스페이스 UI

새로운 Chat 스페이스에 채팅 앱 추가하기

  1. 채팅 앱을 Chat 스페이스에 추가하려면 스페이스를 클릭한 다음 Chat 스페이스 이름의 오른쪽에 있는 아래쪽 화살표를 클릭합니다. 그러면 컨텍스트 드롭다운 메뉴가 호출됩니다.
  2. 여기에서 Apps & integrations(앱 및 통합)를 클릭합니다.

Apps & integrations(앱 및 통합)

이때 표시되는 대화상자에서 스페이스에 앱을 추가할 수 있습니다.

  1. + Add apps(+ 앱 추가) 버튼을 클릭합니다.

인벤토리 Chat 스페이스에 앱을 추가합니다.

  1. 대화상자에서 Simple Inventory Chat(단순 인벤토리 채팅) 앱을 찾아 Add(추가)를 클릭합니다.

Chat 스페이스에 앱 추가

스페이스에 채팅 앱이 추가되면 스페이스에 메시지가 전송됩니다.

새로운 채팅 앱이 추가된 Chat 창

이제 Chat 스페이스에 새로운 채팅 앱이 설치되었으므로 채팅 앱으로 돌아가 Automation(자동화)을 추가하여 이 Chat 스페이스에 메시지를 보냅니다.

6. Chat 자동화를 빌드하여 Chat 스페이스에 메시지 전송하기

다음 단계는 채팅 앱을 게시하는 방법입니다.

  1. AppSheet 애플리케이션으로 돌아가서 Chat 설정 페이지를 다시 엽니다(아직 열지 않은 경우).
  2. Customize(맞춤설정)를 클릭하여 채팅 앱 설정을 엽니다.
  3. + Action(+ 작업) 버튼을 클릭하여 Chat 작업의 컨텍스트 메뉴를 호출합니다.

작업 버튼

  1. Message when data changes(데이터 변경 시 메시지 전송) 옵션을 클릭합니다. 그러면 데이터가 변경될 때마다 메시지를 전송하는 완전 자동화가 생성됩니다.

작업 컨텍스트 메뉴

AppSheet 편집기에 새로운 자동화가 표시됩니다.

중요: 오른쪽 상단의 Save(저장)를 클릭하지 마세요. 자동화를 추가로 구성해야 합니다.

  1. Send a chat message(채팅 메시지 보내기) 프로세스를 클릭합니다.

Chat 자동화

오른쪽에 설정 창이 열립니다.

  1. Message Content(메시지 콘텐츠)와 Space ID(s)(스페이스 ID)에서 Add(추가)를 클릭합니다.

Chat 자동화에 Chat 스페이스 추가하기

  1. Inventory Chat Space(인벤토리 Chat 스페이스) 옵션을 클릭하여 이 Chat 스페이스에 메시지를 보내도록 자동화를 구성합니다.
  2. Message Text(메시지 텍스트)를 The Items table was updated(항목 테이블이 업데이트되었습니다)로 업데이트합니다.
  3. Send an app view (optional)(앱 뷰 보내기(선택사항)) 설정 드롭다운에서 Items_Detail(항목_세부정보)을 선택합니다.

Message Content(메시지 콘텐츠)를 완성해야 합니다.

마지막 메시지 콘텐츠 설정

  1. AppSheet 편집기의 오른쪽 상단에서 Save(저장)를 클릭합니다.

이제 채팅 앱이 Chat 스페이스로 메시지를 보내도록 구성되었습니다.

7. Chat 자동화 테스트하기

다음 단계에서는 자동화를 테스트하여 Chat 스페이스로 메시지를 보내는지 확인할 수 있습니다. AppSheet 편집기의 미리보기 창에서 항목 테이블의 레코드를 업데이트합니다. 그러면 자동화가 트리거되면서 Chat 스페이스에 메시지를 보냅니다.

  1. AppSheet 편집기의 미리보기 창에서 모바일 아이콘63e1499db148fde8.png을 클릭하여 모바일 뷰로 앱을 표시합니다. 그런 다음 레코드(예: Saw(톱))를 클릭합니다.

모바일 미리보기 창의 앱

  1. 레코드 Details(세부정보) 뷰에서 Edit(수정) 아이콘을 클릭합니다.

레코드 세부정보 뷰

  1. Description(설명)을 Cordless powered circular saw(무선 전동 원형톱)으로 변경합니다.

레코드의 설명 수정

  1. 미리보기 창에서 Save(저장)를 클릭하면 Chat 스페이스로 전송되는 메시지가 트리거됩니다.

메시지가 수신되면 Chat 알림음이 울립니다.

  1. Chat 창으로 돌아간 다음 왼쪽 하단의 Chat 스페이스를 클릭하면 Items_Detail(항목_세부정보) 채팅 카드와 함께 Items table was updated(항목 테이블이 업데이트되었습니다)라는 새 메시지가 표시됩니다.

채팅 앱의 메시지가 표시된 Chat UI

8. 수고하셨습니다.

AppSheet 채팅 앱 Codelab을 완료했습니다.

추가 자료