[ Electron + Vue ] 구글 드라이브 Google Sheet 연동하기

데스크톱 앱을 만들면서 서버를 안쓰고 만들다보니 버전 관리 및 정보를 어디선가 가져와야 할 것같아

구글 시트를 이용해서 가져오는 방식을 사용

 

이 방식은 구글 시트의 접근이 누구나 가능하게 만들어서 공유하는 방식이기 때문에

보안이 중요한 데이터는 사용을 안하는 것이 좋다.

---

Google Drive

우선 구글 시트로 버전과 업데이트 날짜 업데이트 내용만을 사용

 

우선 해당 시트를 공유해야하는데 데이터를 가져오기 위해서는 단순 링크 공유 방식이 아니라 web에 올려서 크롤링을 하는 방식으로 데이터를 가져오기 때문에 publish to Web으로 해당 시트를 공유해준다.

 

.tsv 파일로 만들어 해당 내용에 쉼표나 데이터 구조를 안정적으로 가져와서 사용할 수 있도록 한다.

이제 publish를 누르면 해당 공유 링크가 생성되는데 이 링크를 이용하면 엑셀에 입력한 데이터를 가져올 수 있다.

---

Useage 

웹에서 데이터를 가져오기 위해서 note-fetch를 활용

 

일반 웹에서는 그냥 js로 데이터를 가져올 수 있는데 electron 에서는 electron의 메인 프로세스를 이용해서 데이터를 가져와야한다.

따라서 preload.js에 fetchSheet 함수를 등록해주고, 메인 프로세스로 공유된 링크를 node-fetch로 데이터를 가져와준다.

contextBridge.exposeInMainWorld('electronAPI', {
    fetchSheet: () => ipcRenderer.invoke('fetch-sheet'),
});

 

import fetch from 'node-fetch';

ipcMain.handle('fetch-sheet', async () => {
    const url = "link";
    const res = await fetch(url);
    return await res.text();
});

 

이제 앱이 처음 시작했을때 해당 fetchSheet() 함수를 실행시킨다.

메인프로세스에 등록한 구글 시트 데이터를 가져온 후

tsv파일이므로 \t를 를 활용하여 각 셀을 구분

 

이후 각 변수에 마지막 버전 정보와 패치 내용 데이터를 저장

import {ref} from "vue";

export interface VersionControl {
    version: string;
    date: string;
    patchNoteKo: string;
    patchNoteEn: string;
}

export const currentVersion = ref('1.0.0');
export const newVersion = ref('')
export const newPatchNote = ref<VersionControl[]>([])

export async function fetchSheet() {
    const tsvText = await window.electronAPI?.fetchSheet();
    if (!tsvText) return;

    const [headerLine, ...rows] = tsvText.trim().split('\n');
    const headers = headerLine.split('\t');

    // TSV 헤더와 VersionControl 키 매핑
    const headerMap: Record<string, keyof VersionControl> = {
        version: 'version',
        date: 'date',
        'patchNote-ko': 'patchNoteKo',
        'patchNote-en': 'patchNoteEn',
    };

    const data: VersionControl[] = rows.map(row => {
        const values = row.split('\t');
        const obj = {} as VersionControl;

        headers.forEach((header, idx) => {
            const key = headerMap[header.trim()];
            if (key) obj[key] = values[idx];
        });

        return obj;
    });

    newPatchNote.value = data

    const lastItem = data.length ? data[data.length - 1] : null;

    if (lastItem) {
        newVersion.value = lastItem.version
    }
}

 

그럼 electron 에서 엑셀에서 가져온 데이터를 보여주고 css작업을 해주면 엑셀의 데이터가 변경됨에 따라서 electron에서 엑셀의 수정된 내용이 반영되는 것을 볼 수 있다.