Bagaimana Anda mendapatkan data dari google sheets di react js?

Saya ingin membaca dan menulis Google Sheets dengan React untuk memperbarui data aplikasi yang saya buat dengan Glideapps, pembuat aplikasi tanpa kode yang menggunakan Google Sheets sebagai sumber data

Butuh waktu cukup lama bagi saya untuk mencari tahu bagaimana melakukan itu. Tapi ternyata solusinya cukup mudah

TL;DR

1. Hasilkan file kunci akun layanan Google, dapatkan nilai private_key dan client_email
2. Dapatkan spreadsheet_id dan sheet_id Anda
3. Bagikan spreadsheet Anda dengan izin pengeditan dengan alamat email di bidang client_email Anda
4. Pastikan baris pertama di spreadsheet Anda berisi kolom header. Nilai-nilai ini akan menjadi "kunci" di objek data Anda
5. Instal google-spreadsheet dan gunakan untuk terhubung ke Google Sheets. Ada contoh yang sangat bagus dalam dokumen di sini, dan saya telah menyertakan cuplikan cara menambahkan ke spreadsheet di bagian bawah postingan ini

Berikut adalah petunjuk langkah demi langkah terperinci dengan tangkapan layar

1) Buka konsol pengembang Google
https. //menghibur. developer. google. com/

Klik "Pilih proyek" lalu klik "Proyek baru", beri nama

Klik "Kredensial" lalu klik "Kelola akun layanan", lalu klik "Buat akun layanan"

Tambahkan nama dan deskripsi, lalu klik "Buat"

Klik "Lanjutkan" pada halaman "Izin akun layanan", karena ini opsional

Klik "Selesai" pada halaman "Beri pengguna akses ke akun layanan ini", karena ini juga opsional

Klik "Buat kunci" di bawah kolom Tindakan

Pilih "JSON" default dan Google akan mengunduh file kunci ke folder unduhan default Anda

Jika Anda membuka file JSON, ada dua bidang yang Anda perlukan. "private_key" dan "client_email"

2) Buka Google Sheets Anda dan temukan spreadsheet_id dan sheet_id

3) PENTING Ingatlah untuk membagikan spreadsheet Anda dengan alamat email di file kunci Anda dengan kunci client_email

Anda akan segera melihat pesan "orang ditambahkan".

4) Pastikan baris pertama Anda berisi nama kolom

5) Ada contoh yang sangat bagus di Google-Spreadsheet untuk membaca dan menulis ke Spreadsheet

Ini cuplikan untuk menambahkan baris baru ke spreadsheet yang saya tulis

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

Masuk ke mode layar penuh Keluar dari mode layar penuh

Bagaimana cara mengambil data dari Google sheet menggunakan react JS?

Bagaimana cara menghubungkan Google Sheets dengan reaksi?

Bagaimana cara mengekstrak data dari Google Sheets?

Bagaimana cara mendapatkan data dari Google Sheets ke Javascript?