[]
데모 테마 디자이너 도움말 API
다른 샘플 다운로드
(Showing Draft Content)

Google Sheets 개요

Google Sheets can serve as a simple database that allows you the ability to edit the data quickly and straightforwardly. After creating your Google Sheet and setting the read/write access, you'll need to generate an API key.


Google Sheets는 데이터를 빠르고 간단하게 편집할 수 있는 간단한 데이터베이스로 사용할 수 있습니다. Google Sheet를 만들고 읽기/쓰기 권한을 설정한 후, API 키를 생성해야 합니다.

애플리케이션에서 시트를 접근하기

애플리케이션에서 Google Sheet에 접근하려면 먼저 API 키를 생성해야 합니다. Google 애플리케이션용 API 키는 Google API 콘솔에서 생성할 수 있습니다.


이제 시트에 대한 접근이 설정되고 API 키가 생성되었으니, 애플리케이션에서 데이터를 사용하기 시작할 수 있습니다.


먼저, GoogleSheet 클래스를 가져와야 합니다.:

import { GoogleSheet } from '@mescius/wijmo.cloud';

그 다음, API 키를 사용하여 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를 추가하고, 사용자가 선택한 카테고리의 데이터를 표시할 FlexGrid와 데이터베이스에서 제품의 단가를 보여줄 FlexChart를 추가합니다.


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;
        });
    }
});

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')
});

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')
});

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