React로 Google 시트를 읽고 쓰는 방법

Google Sheets를 데이터 소스로 사용하는 코드 없는 앱 빌더인 Glideapps으로 빌드한 앱의 데이터를 업데이트하기 위해 React로 Google Sheets를 읽고 쓰고 싶습니다.

그 방법을 알아내는 데 꽤 오랜 시간이 걸렸습니다. 그러나 해결책은 매우 간단합니다.

요약:

1. Generate a Google service account key file, get private_key and client_email values.
2. Get your spreadsheet_id and sheet_id.
3. Share your spreadsheet with editing permission with the email address in your client_email field.
4. Make sure the 1st row in your spreadsheet contains the header fields. These values will be the "keys" in your data objects.
5. Install google-spreadsheet and use it to connect to Google Sheets. There are very good examples in the docs here, and I have included a snippet of how to append to the spreadsheet at the bottom of this post.

다음은 스크린샷과 함께 자세한 단계별 지침입니다.

1) Google의 개발자 콘솔로 이동합니다.
https://console.developers.google.com/

"프로젝트 선택"을 클릭한 다음 "새 프로젝트"를 클릭하고 이름을 지정합니다.



"자격 증명"을 클릭하고 "서비스 계정 관리"를 클릭한 다음 "서비스 계정 만들기"를 클릭합니다.



이름과 설명을 추가한 다음 "만들기"를 클릭합니다.


선택 사항이므로 "서비스 계정 권한"페이지에서 "계속"을 클릭합니다.

선택 사항이므로 "사용자에게 이 서비스 계정에 대한 액세스 권한 부여"페이지에서 "완료"를 클릭합니다.

조치 열에서 "키 작성"을 클릭하십시오.


기본 "JSON"을 선택하면 Google에서 기본 다운로드 폴더에 키 파일을 다운로드합니다.


JSON 파일을 열면 "private_key"및 "client_email"이라는 두 개의 필드가 필요합니다.


2) Google 스프레드시트로 이동하여 spreadsheet_id 및 sheet_id를 찾습니다.


3) 중요 키client_email가 있는 키 파일의 이메일 주소로 스프레드시트를 공유해야 합니다.


"사람이 추가되었습니다"메시지가 바로 표시되어야 합니다.


4) 첫 번째 행에 열 이름이 포함되어 있는지 확인하십시오.


5) Googe-Spreadsheet에는 스프레드시트를 읽고 쓰기 위한 아주 좋은 예가 있습니다.

다음은 내가 작성한 스프레드시트에 새 행을 추가하기 위한 스니펫입니다.

import { GoogleSpreadsheet } from "google-spreadsheet";

// Config variables
const SPREADSHEET_ID = process.env.REACT_APP_SPREADSHEET_ID;
const SHEET_ID = process.env.REACT_APP_SHEET_ID;
const CLIENT_EMAIL = process.env.REACT_APP_GOOGLE_CLIENT_EMAIL;
const PRIVATE_KEY = process.env.REACT_APP_GOOGLE_SERVICE_PRIVATE_KEY;

const doc = new GoogleSpreadsheet(SPREADSHEET_ID);

const appendSpreadsheet = async (row) => {
  try {
    await doc.useServiceAccountAuth({
      client_email: CLIENT_EMAIL,
      private_key: PRIVATE_KEY,
    });
    // loads document properties and worksheets
    await doc.loadInfo();

    const sheet = doc.sheetsById[SHEET_ID];
    const result = await sheet.addRow(row);
  } catch (e) {
    console.error('Error: ', e);
  }
};

const newRow = { Name: "new name", Value: "new value" };

appendSpreadsheet(newRow);