Google Sheets 데이터 활용하기

플렉스튜디오에서 구글 시트를 API를 설정했다면 이제 애플리케이션에서 데이터를 저장하고, 조회하고, 수정하고, 삭제하는 기능까지 구현할 수 있어요. 이번 글에서는 플렉스튜디오 시나리오에서 구글 시트를 연동해 CRUD 작업을 구현하는 방법을 소개할게요.

설명을 위해 건강과 생활습관을 주제로 가상의 설문조사 애플리케이션을 준비했어요. 사용자는 이름과 이메일 주소, 설문 응답 내용을 입력하고 ‘응답 제출하기’ 버튼을 클릭하면 그 값은 구글시트에 저장돼요. 사용자가 제출한 응답 내용을 관리자가 확인하고 수정, 삭제할 수 있죠. 각 단계를 하나씩 따라해 보세요.

플렉스튜디오 유튜브에서 영상 강의 보러 가기👇

1단계 : 사용자 응답을 구글 시트에 저장하기

① 구글 시트 컬럼명 정의

플렉스튜디오에서 구글 시트 서비스를 통해 섹터를 전달하면 컬렉션 키와 구글 시트의 첫 번째 행에 정의된 컬럼명을 비교하여 값을 반영해요. 이번 강의에서는 예시로 name, mail, important, exercise, sleep, info, remark를 입력했어요.

📌 플렉스튜디오 용어 사전

• 컬렉션(Collection) : 시나리오가 시작해서 종료될 때까지 모든 데이터의 흐름을 관리하는 곳
• 섹터(Sector) : 컬렉션의 데이터 단위이며 Key와 value의 쌍으로 데이터를 보관
• 컬렉션 키(Collection key) : 섹터 내부의 데이터에 대한 key이며 실제 데이터의 명칭과 같은 역할

② 저장 이벤트 연결

1. Dev 모드로 전환 후, ‘응답 제출하기’버튼을 선택

2. 우측 이벤트 프로퍼티에서 “스텝 이동 직전 실행” 항목에 이벤트 연결 (이벤트명 : save)

3. 편집 탭으로 이동하면 서비스 추가

③ 구글 시트 서비스 설정

1. 서비스 종류: GoogleSheet

2. 모듈명: Append

3. 서비스 정보 입력
   • spreadsheet 아이디 : 구글 시트 URL 중 긴 문자열
   • Sheet 명 : 시트 하단 탭 이름
   • 기준 컬럼명 : 삭제나 수정을 할 때 기준 키 값으로 사용할 컬럼명을 입력하는 곳
   • 기준 컬럼명 예시 : mail

4. 보내는 데이터 예시 : 카테고리 ‘survey’

5. 받는 데이터: 제거

④ 디버거 실행

1. 시나리오 우측 상단의 화살표 (▶) 클릭하여 디버거 실행

2. 애플리케이션에 응답 내용 입력 후 ‘응답 제출하기’ 클릭

3. 클릭 후 로그 확인 (이벤트가 실행되며 구글 시트 서비스도 함께 호출)

4. 디버거 실행 후 구글 시트에 데이터 반영되었는지 확인

2단계 : 구글 시트에서 데이터를 조회해 앱에 표시하기

① 첫 번째 스텝에서 조회 이벤트 설정

1. Dev 모드 → ‘step1’ 클릭→ 스텝 이벤트 사용` 속성 활성화
   • 시나리오가 시작되자마자 구글 시트에서 데이터를 불러오는 구조로 만들어요.
   • 이벤트 발생 시점 : 최초 시작 전(Init) / 이벤트명 : query 로 이벤트 연결
2. 편집 탭으로 이동하면 서비스 추가

② 구글 시트 서비스 설정

3. 서비스 정보 입력
   • spreadsheet 아이디 : 구글 시트 URL 중 긴 문자열
   • Sheet 명 : 시트 하단 탭 이름
   • 기준 컬럼명 : 삭제나 수정을 할 때 기준 키 값으로 사용할 컬럼명을 입력하는 곳
   • 기준 컬럼명 예시 : mail

4. 보내는 데이터: 제거
5. 받는 데이터: 카테고리 ‘survey + 덮어쓰기 설정

③ 디버거 실행

1. 시나리오 우측 상단의 화살표 (▶) 클릭하여 디버거 실행
2. 스텝 시작 전 이벤트 실행 → 구글 시트 서비스 호출
3. 조회된 데이터가 카테고리에 정상적으로 반영되는지 확인

3단계 : 구글 시트의 특정 데이터 삭제하기

① 삭제 버튼에 이벤트 연결

1. 시나리오에서 ‘삭제’ 버튼 클릭
2. 우측 프로퍼티에서 Dev모드 →  ‘클릭 이벤트 사용’ 체크 → 이벤트명 : delete → 연결 아이콘 클릭 
3. 편집 탭으로 이동하면 서비스 추가

② 구글 시트 서비스 설정

1. 서비스 종류: GoogleSheet
2. 모듈명: Clear
3. 서비스 정보 입력
   • spreadsheet 아이디 : 구글 시트 URL 중 긴 문자열
   • Sheet 명 : 시트 하단 탭 이름
   • 기준 컬럼명 : 삭제나 수정을 할 때 기준 키 값으로 사용할 컬럼명을 입력하는 곳
   • 기준 컬럼명 예시 : mail
4. 보내는 데이터: 카테고리 ‘survey’ 
5. '필터설정’ 버튼 클릭하기
   • 필터 종류 : 상태 필터
   • Status 필터 : Active
6. 받는 데이터: 제거

③ 디버거 실행

1. 시나리오 우측 상단의 화살표 (▶) 클릭하여 디버거 실행
2. 활성화된 데이터를 확인할 때: 디버거 하단 ‘Collection’ → Active
   • 사용자가 특정 항목을 선택하면 활성화된 섹터 확인 가능
3. ‘삭제’ 버튼을 클릭하면 이벤트 실행 → 구글 시트 서비스 호출

4. 구글 시트에도 반영이 되는지 확인
   • 기준 컬럼은 삭제되지 않으므로, 설계 시 주의 필요

4단계 : 구글 시트의 특정 데이터 수정하기

① 승인 버튼에 이벤트 연결

1. ‘승인’ 버튼 클릭 후 우측 프로퍼티 확인

2. 시트에 컬럼명 추가
   • 승인 버튼의 콜렉션 키가 ‘approve’일 때 구글 시트에 동일한 컬럼명이 존재해야 데이터 수정 가능

3. 우측 프로퍼티에서 Dev모드 →  ‘클릭 이벤트 사용’ 체크 → 이벤트명 : update → 연결 아이콘 클릭 
4. 편집 탭으로 이동하면 서비스 추가

② 구글 시트 서비스 설정

1. 서비스 종류: GoogleSheet
2. 모듈명: Update
3. 서비스 정보 입력
   • spreadsheet 아이디 : 구글 시트 URL 중 긴 문자열
   • Sheet 명 : 시트 하단 탭 이름
   • 기준 컬럼명 : 삭제나 수정을 할 때 기준 키 값으로 사용할 컬럼명을 입력하는 곳
   • 기준 컬럼명 예시 : mail
4. 보내는 데이터: 카테고리 ‘survey’ 
5. ‘필터설정’ 버튼 클릭하기
   • 필터 종류 : 상태 필터
   • Status 필터 : Active
6. 받는 데이터: 제거
   
   

③ 디버거 실행

1. 시나리오 우측 상단의 화살표 (▶) 클릭하여 디버거 실행
2. 활성화된 데이터를 확인할 때: 디버거 하단 ‘Collection’ → Active
   • 사용자가 특정 항목을 선택하면 활성화된 섹터 확인 가능
3. ‘승인’ 버튼을 클릭하면 이벤트 실행 → 구글 시트 서비스 호출
4. 구글 시트에도 ‘approve’ 값이 변경되었는지 확인

다음 강의 : 구글 시트 연동 시 발생할 수 있는 오류와 해결 방법

지금 바로 플렉스튜디오에서 구글 시트를 연동해보고, 손쉽게 애플리케이션을 완성해보세요! 다음 글에서는 구글 시트 연동 시 발생할 수 있는 오류와 해결 팁을 정리해 드릴게요.