Svelte with Google SpreadSheet Api

참고
1. 구글 공식 문서 https://developers.google.com/sheets/api/quickstart/js
2. Svelte에 Google 붙이기 https://dev.to/safaiyeh/svelte-google-sign-in-out-3n1n

배경

엑셀 파일에 있는 데이터를 python으로 읽은 뒤, 필요한 로직에 따라 업무를 실행하는 엑셀 업무 자동화 스크립트를 만들어 팀원에게 줬었다.
1년? 정도는 무리 없이 사용했지만, 업데이트의 필요성을 느껴 업데이트를 결심했다. 혼자 하는 프로젝트다 보니, 배워 볼 겸 Svelte를 선택했다.
로컬 파일에 있는 Excel을 사용해야 했기에 어떤 방식으로 하는게 좋을까 하다가, Database를 구글 스프레드시트로 사용하는 방식에 흥미가 생기게 되었다. 결국 엑셀 > 구글 스프레드 시트, Python > Svelte로 치환하게 되었다.

진행

검색 결과 구글 스프레드 시트를 사용하는 방법이 여러가지 있지만, 최대한 구글에서 제공하는 방식대로 사용하고 싶었다. 구글 공식 QuickStart 문서에서 JavaScript로 구글 스프레드 시트를 읽어서 보여주는 예제를 친절하게 설명해주고 있었고, 여기까지는 무리 없이 따라 했으나, Svelte로 올리는 것은 아무리 검색해도 나오지 않았고, npm을 사용하는 방식도 node로만 작동해서 거의 반포기 상태 였으나.. 참고 문서 2번에서 svelte에 google login을 붙이는 예제를 찾아냈고, 가능할거라 생각하여 그냥 JS로 만든 QuickStart를 Svelte의 방식대로 재작성했다.

app.svelte

<script>
    const CLIENT_ID = 'YOUR_CLIENT_ID';
    const API_KEY = 'API_KEY';
    const DISCOVERY_DOCS = ["https://sheets.googleapis.com/$discovery/rest?version=v4"];
    const SCOPES = "https://www.googleapis.com/auth/spreadsheets.readonly";

    let login = false
    let datas = []

    function handleClientLoad() {
    	gapi.load('client:auth2', initClient);
    }

    function initClient() {
        gapi.client.init({
            apiKey: API_KEY,
            clientId: CLIENT_ID,
            discoveryDocs: DISCOVERY_DOCS,
            scope: SCOPES
        }).then(function () {
            gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
            updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
        }, function(error) {
            console.log(error);
        });
        }

    
    function updateSigninStatus(isSignedIn) {
    	if (isSignedIn) {
            login = true
        	listMajors();
    	} else {
        	login = false
    	}
    }

    function handleAuthClick(event) {
    	gapi.auth2.getAuthInstance().signIn();
    }

    function handleSignoutClick(event) {
    	gapi.auth2.getAuthInstance().signOut();
    	datas = []
    }
    

    async function listMajors() {
        let res = await gapi.client.sheets.spreadsheets.values.get({
        spreadsheetId: '1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms',
        range: 'Class Data!A2:E',
    	})
        let range = res.result
        if (range.values.length > 0) {
            console.log(range.values)
            datas = range.values
        }
        else {
            console.log('No data found')
        }
    }
 
</script>
  
<svelte:head>
    <script src="https://apis.google.com/js/api.js" on:load={handleClientLoad} async defer></script>
</svelte:head>
  
<div>   
    <p>Google Sheets API Quickstart</p>

    {#if login}
    <button id="signout_button" on:click={handleSignoutClick}>Sign Out</button>
    {:else}
    <button id="authorize_button" on:click={handleAuthClick}>Authorize</button>
    {/if}

    <div>
        {#each datas as row }
        <tr>
            <td>{row[0]}</td>
            <td>{row[1]}</td>
            <td>{row[2]}</td>
            <td>{row[3]}</td>
            <td>{row[4]}</td>
        </tr>
    {/each}
    </div>
</div>
  

• external plugins을 불러오는 방식에서 on:load라는 기능을 찾아 간편히 해결.
• 데이터를 업데이트하는 방식을 appendPre 함수에서 그냥 datas로 할당으로 처리.
• listMajors 함수를 async, await 방식으로 업데이트
• 나머지 함수들은 그냥 냅뒀다..
• 로그인, 로그아웃 하는 방식을 svelte on:click으로 수정

아마 json 관련 오류가 뜰 수 도 있는데 이 때는 https://stackoverflow.com/questions/60779816/how-to-access-local-json-file-via-svelte 참고.

CLIENT-ID, API_KEY 세팅은 QuickStart에 있는 아래의 문서를 따라하면 쉽게 만들 수 있다.
https://developers.google.com/workspace/guides/create-credentials