간단한 데이터베이스와 데이터를 빠르고 쉽게 편집할 수 있는 기능이 필요한 경우 Google Sheets는 모든 특성을 갖춘 데이터베이스의 탁월한 대안이 될 수 있습니다.

Google Sheets를 이용하면 다음 작업이 쉬워집니다.

• Google Spreadsheets 응용 프로그램을 사용해 데이터를 만들고 편집
• 다른 사람들과 시트 공유
• 어떤 장치에서도 시트에 액세스
• 백업 및 버전 내역 가져오기
• 이동 중에 새 열을 추가하여 데이터베이스를 손쉽게 변경

하지만 Google Sheets는 실제 데이터베이스가 아니고ㅎ 다음 사항에 제한적입니다.

• 크기(표에 있는 행의 개수가 수천 개 이상이어서는 안 됨)
• 기능(예: 기본 제공 쿼리, 조인, 일관성 검사)

다음 몇 가지 섹션에서는 기존 Northwind 데이터베이스에 기반을 둔 간단한 예시로 위의 사항들에 대해 자세히 설명하겠습니다.

시트 생성하기

첫 번째 단계는 Google Sheets에서 Northwind 스프레드시트를 만드는 것이었습니다.

스프레드시트(데이터베이스)에는 다음과 같이 8개의 시트(표)가 포함되어 있습니다.

Northwind를 선택한 이유는 일반적인 데이터 형식(문자열, 숫자, 날짜, 부울)이 모두 포함된 유명한 단순 데이터베이스이고 크기가 작기 때문입니다(가장 큰 용량의 표의 항목 수가 2,000개를 조금 넘음).

주의할 점:

1. 시트가 대표하는 표의 이름을 따서 시트의 이름이 지정됩니다.
2. 각 시트의 첫 행에는 열 이름이 들어 있습니다.

시트 공유

스프레드시트가 준비되었으면 "공유" 버튼을 클릭하여 응용 프로그램이 이 스프레드시트에 액세스할 수 있게 합니다.

다음과 같이 누구나 이 데이터를 볼 수 있게 허용하고 몇 명의 특정 사용자는 이 시트를 편집할 수 있게 할 것입니다.

API 키를 가져와 프로그래밍 방식으로 시트에 액세스

응용 프로그램에는 시트에 액세스하기 위한 API 키가 필요합니다. API 키는 호출 응용 프로그램을 식별하기 위해 API로 전달되는 고유한 코드입니다. API 키는 API가 어떻게 사용되고 있는지(예: API의 악의적인 사용 또는 남용 방지 목적으로) 추적하고 제어하기 위해 Google Sheets에 의해 사용됩니다.

Google 응용 프로그램을 위한 API 키는 다음과 같이 Google API 콘솔에서 생성할 수 있습니다.

위 이미지에 강조 표시된 버튼을 클릭하여 API 키를 클립보드로 복사할 수 있습니다. 복사한 값은 다음 단계에서 필요합니다.

API 키를 만들 때 어떤 유형의 응용 프로그램이 이 키를 사용할 수 있는지(예: 특정 웹 사이트), 어떤 API를 함께 사용할 수 있는지(예: Google Sheets API) 지정하여 키를 제한할 수 있습니다. 이렇게 하면 누구도 자신의 응용 프로그램에서 여러분의 키를 사용할 수 없게 됩니다.

응용 프로그램에서 시트에 액세스

이제 시트에 액세스할 수 있고 API 키도 있으므로 응용 프로그램에서 시트를 사용할 준비가 되었습니다.

사용자가 목록에서 제품 범주를 선택할 수 있게 해주는 UI부터 시작해 보겠습니다. 범주를 선택하면 응용 프로그램이 제품 정보가 포함된 그리드와 제품 단가가 포함된 차트를 보여줍니다.

다음과 같이 Google Sheets에 연결된 GoogleSheet 객체를 만드는 것부터 시작하겠습니다.

 const API_KEY = 'AIzaSyCvuXEzP57I5CQ9ifZDG2_K8M3nDa1LOPE';
 const SHEET_ID_NW = '1qnf-FCONZj_AmOlyNkpIA3mKvP8FQtVOr7K8Awpo360';
 let gsNWind = new GoogleSheet(SHEET_ID_NW, API_KEY, {
     sheets: [ 'Products', 'Categories', 'Suppliers' ]
 });

생성자는 로드하고자 하는 시트를 지정합니다. 어떤 것도 지정하지 않은 경우 모든 시트를 로드합니다.

그 다음에는 사용자가 제품 범주를 보고 선택할 수 있도록 다음과 같이 ComboBox를 추가해 보겠습니다.

 let categoryCombo = new ComboBox('#categoryCombo', {
     placeholder: '(All Categories)',
     isRequired: false,
     displayMemberPath: 'CategoryName',
     itemsSource: gsNWind.getSheet('Categories'),
     selectedIndexChanged: (s, e) => {
         let cat = s.selectedItem;
         gsNWind.getSheet('Products').filter = (item => {
             return cat == null || cat.CategoryID == item.CategoryID;
         });
     }
 });

이것은 100% 표준 Wijmo 코드로서, 해당 데이터는 어느 데이터 소스에서도 로드할 수 있습니다.

사용자가 범주를 선택하면 콤보박스는 "Products(제품)" 시트에 필터를 적용하여 해당 범주의 제품만 표시되게 합니다.

다음 코드는 FlexGrid에 제품을 표시하는 데 사용됩니다.

 let supplierMap = new DataMap(gsNWind.getSheet('Suppliers'),
                               'SupplierID', 'CompanyName');
 let productGrid = new FlexGrid('#productGrid', {
     ...gridOptions,
     autoGenerateColumns: false,
     columns: [
         { binding: 'ProductName', header: 'Product Name' },
         { binding: 'UnitPrice', header: 'Unit Price', format: 'n2' },
         { binding: 'QuantityPerUnit', header: 'Quantity Per Unit' },
         { binding: 'SupplierID', header: 'Supplier', dataMap: supplierMap },
         { binding: 'UnitsInStock', header: 'In Stock', format: 'n0' },
         { binding: 'UnitsOnOrder', header: 'On Order', format: 'n0' },
     ],
     itemsSource: gsNWind.getSheet('Products')
 });

앞서 언급했듯이 위 코드 역시 100% 표준 Wijmo 코드입니다.

DataMap을 "SupplierID" 열에 적용하여 그리드가 공급자 ID 대신에 회사 이름을 표시하게 합니다. DataMap은 "Suppliers(공급자)" 시트에 따라 달라집니다.

끝으로 제품의 단가를 표시하기 위해 FlexChart를 추가합니다.

 let productChart = new FlexChart('#productChart', {
     chartType: 'Bar',
     axisX: { majorGrid: true, axisLine: false },
     axisY: { majorGrid: false, axisLine: false, reversed: true },
     legend: { position: 'Bottom' },
     bindingX: 'ProductName',
     series: [
         { binding: 'UnitPrice', name: 'Product Unit Prices (US$)' }
     ],
     itemsSource: gsNWind.getSheet('Products')
 });

이제 다음과 같이 응용 프로그램이 준비되었습니다. 

사용자가 범주를 선택하거나 데이터를 정렬하면 그리드와 차트가 자동으로 업데이트됩니다.

이것은 응용 프로그램으로서는 꽤 훌륭한 시작입니다.

특정 사용자가 시트를 편집하도록 허용하기

이 시점에서 응용 프로그램은 이 데이터만 표시할 수 있습니다. 편집을 허용하려면 사용자 인증 구성표를 추가해야 합니다.

위에서 우리는 시트를 공유할 때 몇 명의 사용자에게 편집 권한을 추가했습니다. 편집 권한을 허용하려면 사용자가 누구인지 서버가 알아야 합니다. 바로 이때 OAuth가 개입합니다. OAuth는 사용자 인증을 위한 개방형 프로토콜입니다. 몇 가지 OAuth 구현 방법이 있는데, 이 중 한 가지를 사용하면 됩니다. 유일한 필수 조건은 요청에 포함될 accessToken을 어느 시점에서는 얻어야 한다는 것입니다.

이제 OAuth2 클래스를 사용하여 샘플에 OAuth 지원을 추가할 것입니다. 먼저 다음과 같이 OAuth2 객체를 만듭니다.

const SCOPES = [ 'https://www.googleapis.com/auth/userinfo.email' ];
 const API_KEY = 'AIzaSyCvuXEzP57I5CQ9ifZDG2_K8M3nDa1LOPE';
 const CLIENT_ID = '….apps.googleusercontent.com';
 let auth = new OAuth2(API_KEY, CLIENT_ID, SCOPES);

SCOPES 변수는 사용하려는 서비스가 무엇인지 서버에 알려줍니다. 이 경우 다룰 주요 대상은 이메일이므로 "이메일" 범위만 요청하겠습니다. 액세스할 정보는 사용자가 아닌 응용 프로그램에 속해 있습니다.

API_KEY 및 CLIENT_ID는 OAuth가 응용 프로그램을 식별할 수 있게 허용합니다.

이제 OAuth2 객체가 있으므로 사용자가 로그인 또는 로그아웃할 수 있도록 이 객체를 사용해 버튼을 제공할 수 있습니다.

 // button to log in/out
 let oAuthBtn = document.getElementById('auth_btn');

 // click button to log user in or out
 oAuthBtn.addEventListener('click', () => {
     if (auth.user) {
         auth.signOut();
     } else {
         auth.signIn();
     }
 });

이제 사용자가 로그인 또는 로그아웃할 수 있으므로 다음과 같이 userChanged 이벤트를 수신하여 버튼과 Spreadsheet의 accessToken을 업데이트해야 합니다. 

 // update button/sheet state when user changes
 auth.userChanged.addHandler(s => {
     let user = s.user;

     // update button caption
     oAuthBtn.textContent = user ? 'Sign Out' : 'Sign In';

     // update Spreadsheet access token
     gsNWind.accessToken = user ? s.accessToken : null;
 });

이제 다 끝났습니다. 사용자는 버튼을 클릭하여 로그인할 수 있습니다. 로그인에 성공하면 시트를 공유할 때 선택한 사용자가 데이터를 편집할 수 있도록 서버는 accessToken을 사용하여 사용자를 식별하고 권한을 부여하거나 거부합니다.

권한이 부여된 사용자는 그리드에서 데이터를 편집할 수 있습니다. 변경 사항은 Google Sheets 객체에 적용됩니다. GoogleSheet 객체는 평상시와 같이 항목 편집, 추가 및 삭제를 지원합니다.

라이브 데모 체험

• Google Sheet JavaScript 데모
• Google Sheet Angular 데모
• Google Sheet React 데모
• Google Sheet Vue 데모