Cara membaca data dari google spreadsheet menggunakan javascript

Beberapa bulan yang lalu saya mencoba melakukan operasi CRUD di Google Spreadsheet dengan Sheets API V4 untuk aplikasi Javascript saya. Saya menggunakan Bereaksi. js untuk ujung depan dan Node. js untuk backend. itu sangat menyakitkan. Saya memiliki token google saya di backend, mengirimkannya ke frontend, tetapi ketika saya mencoba mengakses API dengan React/Javascript, itu tidak berfungsi. Akhirnya, saya menemukan apa yang Anda perlukan untuk membuatnya berfungsi, dan cara memperluas penggunaan API. Saya akan langsung ke intinya tentang cara melakukannya dan menjelaskan lebih detail nanti

Saya menggunakan aplikasi buat-reaksi. Tapi itu harus bekerja pada aplikasi Javascript apa pun yang menggunakan pengambilan. Anda dapat melihat kemungkinan apa yang dapat dilakukan API ini dengan game ini

www. snowballfinances. com/sheets

Ini adalah game Penganggaran yang dibuat dengan React dan Spreadsheets. Menikmati

Saya juga menulis ebook untuk membagikan semua yang telah saya pelajari tentang Google API dari awal. Harap beri tahu saya jika Anda tertarik. )

Bereaksi dan Google API

Pelajari cara memanipulasi Google API dari awal. Otentikasi, Manajemen Spreadsheet, Kalender Google, token…

react-ultimate-guide-googleapis. vercel. aplikasi

Saya tidak menyarankan menggunakan IDE online, Anda akan mengalami masalah CORS. Ada banyak tutorial tentang pembuatan-reaksi-aplikasi (apa yang saya gunakan), pengaturannya tidak boleh lebih dari 5 menit. Ini penyiapan cepat

npm i -g create-react-app_

create-react-app my-app

cd my-app

Buka di editor kode favorit Anda

Inilah yang Anda butuhkan untuk membuat ini berfungsi

1. Spreadsheet dan ID-nya
2. Token untuk dikirim ke Sheets API dengan cakupan yang benar
3. Permintaan fetch() dengan informasi yang benar (badan, header autentikasi)

Mari kita selangkah demi selangkah. Kami akan mulai dengan sesuatu yang sederhana, memperbarui nilai 10 di sel A1

1. ID lembar bentang

Ini adalah bagian yang sederhana. Pergi ke seprai. google. com, masuk dengan akun Google Anda dan buat spreadsheet. Setelah Anda melihat spreadsheet, ID spreadsheet akan ada di URL, seperti yang ditunjukkan di bawah ini

Jadi ID kita dalam hal ini adalah. 1nIrrHDVn0Jx3AbyWowfvLoBkvHg7jqvtP5LH1yRI2Ks

Gunakan spreadsheetID Anda sendiri. Yang ini hanya untuk tujuan penjelasan

2. Token

Untuk mendapatkan token dari Google, Anda memerlukan sistem Google OAuth. Kami akan mendapatkan token dari Google Auth2 Playground

OAuth 2. 0 Taman bermain

OAuth 2. 0 Playground memungkinkan Anda bermain dengan OAuth 2. 0 dan API yang mendukungnya

developer. google. com

Silakan ke situs web yang ditautkan di atas

Sekarang, di kolom kiri, temukan Google Sheets API V4

Klik di atasnya, lalu klik cakupannya. https. // www. googleapis. com/auth/spreadsheets

Tanda centang akan muncul di sebelah kirinya

Terakhir, klik Otorisasi API. Ini adalah tombol biru di atas

Anda akan diminta untuk masuk dengan Google dan memberikan akses. Masuk, lalu tekan Izinkan sehingga Anda dapat menggunakan ruang lingkup

Setelah Anda masuk dan mengotorisasinya, Anda akan mendapatkan kode Otorisasi, seperti yang ditunjukkan di bawah ini. Klik Tukarkan kode otorisasi untuk token

Peringatan. Pastikan untuk berada di Langkah 2, Anda TIDAK perlu langkah 3

Dan itu dia. Anda baru saja mendapatkan "Token akses". Salin di suatu tempat. Secara teknis, kami siap memperbarui spreadsheet Anda. Jadi mari kita lanjutkan dan lakukan itu

3. Ambil Permintaan — kode

Sekarang, mari kirimkan permintaan fetch() yang benar. Untuk melihat parameter permintaan pengambilan yang benar, kita akan membuka dokumentasi Sheets API V4. Anda dapat melewatkan pergi ke situs web, jawabannya ada di bawah. Tetapi jika Anda ingin memperluas fungsionalitas, Anda ingin memeriksanya nanti

metode. spreadsheet. pembaruan batch. API Lembar. Pengembang Google

Karena sifat kolaboratif dari spreadsheet, tidak ada jaminan bahwa spreadsheet akan mencerminkan…

developer. google. com

Kode permintaan POST

Seperti yang Anda lihat (jika Anda membuka tautan), itu akan menjadi permintaan POST

https. // pengembang. google. com/sheets/api/reference/rest/v4/spreadsheets/batchUpdate

Saya merasa terbantu ketika saya melihat kode lengkapnya terlebih dahulu. Saya menggunakan Bereaksi. js buat-reaksi-aplikasi. Berikut adalah kode untuk memperbarui sel A1 ke 10

Penting. Ini AKAN berfungsi di lingkungan lokal mana pun tempat Anda dapat menggunakan fetch(). Anda TIDAK terbatas pada Bereaksi

Kode ini akan memperbarui spreadsheet Anda dengan angka 10 di sel A1

Peringatan. Anda perlu MENGGANTI SHEET_ID dan ACCESS_TOKEN dengan info Anda. Punyaku tidak akan bekerja

Itu berhasil

Ketika saya menjalankan React. js, saya mengklik tombol dan pembaruan sheet

Beri tahu saya jika itu tidak berhasil di komentar dan saya akan dengan senang hati membantu. Kita akan melihat bagaimana saya membuat objek lebih detail di bawah ini

Tutorial selanjutnya memberikan penjelasan yang lebih mendalam

Membangun objek

Permintaan pengambilan mengambil argumen string. fetch('https://sheets.googleapis.com/v4/spreadsheets/SHEET_ID_HERE/batchUpdate')_

Bagian itu tidak terlalu sulit untuk diketahui, sekarang mari kita lihat Authorization Headers. Di sini Anda akan menggunakan token yang kami dapatkan dari playround OAuth

fetch('https://sheets.googleapis.com/v4/spreadsheets/SHEET_ID_HERE/batchUpdate',{
method: 'POST',
headers:{
  Authorization: 'Bearer TOKEN_GOES_HERE',
  'content-type':'application/json',
}})

Besar

Sekarang bagian terpenting. tubuh. Kami menggunakan permintaan batchUpdate Google. Lihat akhir gambar di bawah ini

Url permintaan (/batchUpdate) adalah yang menentukan apa yang akan diperbarui pada sheet Anda, di mana, dan bagaimana caranya. Ada lusinan, dan saya ulangi, lusinan cara memperbarui spreadsheet Google. Saya telah memilih batchUpdate karena Anda memiliki banyak kendali atas nilai sel, format, perataan, dll. Contoh lain datang kemudian, tetapi pertama-tama mari kita selesaikan penjelasan yang ini

Tubuh

Dan begitulah. Anda telah membuat objek pertama untuk memperbarui spreadsheet

Penjelasan dan kegunaan lebih lanjut

Anda memiliki permintaan POST dengan ID Lembar Anda ke url batchUpdate Google yang berisi token, header autentikasi, dan badan. Permintaan ini menggunakan Google Sheets API v4 untuk memperbarui spreadsheet spesifik Anda

Anda dapat menggunakan semua ini dalam sebuah aplikasi. Katakanlah Anda ingin pengguna mengisi formulir yang memperbarui sheet Anda (/batchUpdate), atau memiliki fungsi yang mengekstrak informasi dari spreadsheet (/batchGet), atau memperbarui format sel, atau membuat sheet secara dinamis, ini semua mungkin (saya' . ). Untuk mempelajari cara membuat permintaan pengambilan yang benar dengan parameter yang benar, Google memiliki cara untuk menguji permintaan API dan membuat objek untuk Anda. Anda dapat membuka bagian Ikhtisar dari setiap permintaan

Setiap kali saya membuat metode untuk berinteraksi dengan API, saya menggunakan referensi ini terlebih dahulu, lalu mengujinya di Postman, dan terakhir mengkodekannya. Lihat tautan ikhtisar batchUpdate di bawah ini (url yang sama dengan gambar di atas)

metode. spreadsheet. pembaruan batch. API Lembar. Pengembang Google

Karena sifat kolaboratif dari spreadsheet, tidak ada jaminan bahwa spreadsheet akan mencerminkan…

developer. google. com

Otentikasi- apa yang saya lakukan

Ada banyak cara untuk mengintegrasikan otentikasi dengan Google ke dalam aplikasi Anda, saya akan memberi tahu Anda bagaimana saya melakukannya

Saya menggunakan Paspor. js di Node. js backend untuk mengautentikasi pengguna saya dengan Google. Cakupan yang saya gunakan, yang sangat penting untuk manipulasi lembar, adalah drive. cakupan file karena hanya menyediakan akses aplikasi ke sheet yang dibuatnya, dan tidak lebih. Kami menggunakan cakupan spreadsheet dalam tutorial ini untuk mengakses API dari aplikasi apa pun

Setelah pengguna diautentikasi, saya mengirimkan token, yang harus Anda dapatkan kembali setelah mengautentikasi dengan Paspor, ke klien. Sekarang kliennya, Bereaksi. js, memiliki akses ke API, dan dari klien saya mengirim permintaan ke Google Sheets API v4. Saya sering menggunakan batchUpdate. Metode lain yang saya gunakan adalah /values/batchUpdate (berbeda dari batchUpdate), /batchClear, dan /values

Aplikasi saya membuat spreadsheet di akun Google pengguna, lalu memperbaruinya atau memeriksanya

Cara lain yang lebih mudah untuk melakukannya

Salah satu alternatif untuk apa yang saya lakukan, yang saya rekomendasikan, adalah Firebase, yang melakukan keajaiban vodoo untuk Anda di sisi Google untuk autentikasi (tidak perlu server), lalu mengembalikan token yang dapat Anda gunakan. Tutorial paling berguna yang bisa saya temukan ada di sini

https. // www. Youtube. com/watch?v=zq0TuNqV0Ew&t=195s

Ada sedikit penyiapan, tetapi berhasil. Anda akan mendapatkan token yang dapat Anda gunakan

Satu contoh lagi. spreadsheet. nilai / dapatkan

Saya akan meninggalkan Anda dengan satu contoh lagi tentang cara mendapatkan informasi dari spreadsheet dalam rentang tertentu

metode. spreadsheet. nilai-nilai. Dapatkan. API Lembar. Pengembang Google

Edit deskripsi

developer. google. com

Katakanlah saya ingin mendapatkan nilai kolom berikut

Dalam hal ini, saya ingin mengakses semua nilai dalam rentang A1. B5. Yah, Google memiliki metode yang melakukan hal itu

Untuk ini saya akan menggunakan permintaan /values/{range}. Lihat di bawah struktur URL permintaan

Saya akan membuat jenis pengambilan lain yang lebih sederhana (karena ini adalah permintaan GET), dan bagian terbaiknya. dalam kode yang jauh lebih sedikit. Saya menggunakan React dari lingkungan dev lokal saya

Aplikasi ini memiliki tombol yang mendapatkan kisaran nilai A1. B5. Sekarang Anda memiliki akses ke informasi tersebut

Cukup mengagumkan bukan?

Beri tahu saya jika Anda memiliki pertanyaan, saya akan dengan senang hati memandu Anda, atau bahkan memeriksa kode Anda

Lihat situs web saya

Saya harus belajar bagaimana menggunakan API ini untuk startup yang saya bangun. Buka www. snowballfinances. com (belum untuk seluler) untuk melihat semua aplikasi Google Sheets API. Saya mengajari orang keuangan pribadi dengan menggunakan alat nyata, lalu mengubahnya menjadi permainan. Beri tahu saya jika Anda ingin mendengar lebih banyak

Juga, jika Anda ingin mempelajari lebih lanjut tentang fungsi Javascript Async/Await, lihat tutorial saya yang lain

Bisakah Anda menggunakan JavaScript dengan Google Sheets?

Bagaimana cara mengambil data dari Google Spreadsheet?

Bagaimana cara menarik data dari Google Sheets ke HTML?

Bagaimana cara menggunakan fungsi JavaScript di Google Sheets?