Bagaimana cara menggunakan google spreadsheet api sebagai reaksi?

Google Sheets API adalah antarmuka RESTful yang memungkinkan Anda membaca dan mengubah data spreadsheet. Penggunaan paling umum dari API ini mencakup tugas-tugas berikut

• Buat spreadsheet
• Membaca dan menulis nilai sel spreadsheet
• Perbarui pemformatan spreadsheet
• Kelola Lembar Terhubung

Di bawah ini adalah daftar istilah umum yang digunakan di Sheets API

Objek utama di Google Spreadsheet yang dapat berisi beberapa sheet, masing-masing dengan informasi terstruktur yang terdapat di dalam sel. Sumber daya Spreadsheet mewakili setiap spreadsheet dan memiliki nilai spreadsheetId unik, berisi huruf, angka, tanda hubung, atau garis bawah. Anda dapat menemukan ID spreadsheet di URL Google Spreadsheet

https://docs.google.com/spreadsheets/d/spreadsheetId/edit#gid=0

Halaman atau tab di dalam spreadsheet. Sumber daya Lembar mewakili setiap lembar dan memiliki judul unik dan nilai sheetId numerik. Anda dapat menemukan ID sheet di URL Google Sheets

https://docs.google.com/spreadsheets/d/aBC-123_xYz/edit#gid=sheetId_

Bidang teks atau data individual dalam lembar. Sel disusun dalam baris dan kolom, dan dapat dikelompokkan sebagai rentang sel. Sumber daya CellData mewakili setiap sel, tetapi tidak memiliki nilai ID yang unik. Sebaliknya, koordinat baris dan kolom mengidentifikasi sel

Sintaks yang digunakan untuk mendefinisikan sel atau rentang sel dengan string yang berisi nama sheet ditambah koordinat sel awal dan akhir menggunakan huruf kolom dan nomor baris. Metode ini adalah yang paling umum dan berguna saat mereferensikan rentang sel absolut

Sintaks yang digunakan untuk mendefinisikan sel atau rentang sel dengan string yang berisi nama sheet ditambah koordinat sel awal dan akhir menggunakan nomor baris dan nomor kolom. Metode ini kurang umum daripada notasi A1, tetapi dapat berguna saat mereferensikan rentang sel relatif terhadap posisi sel tertentu.

Sel atau rentang sel yang ditentukan dengan nama khusus untuk menyederhanakan referensi di seluruh aplikasi. A mewakili rentang bernama

Sel atau rentang sel yang ditentukan yang tidak dapat dimodifikasi. A mewakili rentang yang dilindungi

Langkah selanjutnya

• Untuk mempelajari tentang mengembangkan dengan Google Workspace API, termasuk menangani autentikasi dan otorisasi, lihat Mengembangkan di Google Workspace

  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 saja. 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. mendapatkan. 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

  Bagaimana cara membaca data dari spreadsheet Google menggunakan reaksi?

  Langkah Pertama. buat Google Spreadsheet dan klik “Publikasikan ke Web. ” Langkah Kedua. Instal pustaka meja. Langkah Ketiga. Tulis komponen React yang mengambil data dari Google sheets .

  Bagaimana cara menghubungkan Google Spreadsheet API?

  Penginstalan dan penyiapan .

  Akses Konsol Google API saat masuk ke akun Google Anda

  Buat proyek baru dan beri nama

  Klik AKTIFKAN API DAN LAYANAN

  Temukan dan aktifkan Google Sheet API

  Buat kredensial baru ke Google Sheets API

  Bisakah saya menggunakan Google Sheets sebagai API?

  Google Sheets API adalah antarmuka RESTful yang memungkinkan Anda membaca dan mengubah data spreadsheet . Penggunaan paling umum dari API ini mencakup tugas-tugas berikut. Buat spreadsheet. Membaca dan menulis nilai sel spreadsheet.

  Bisakah Anda memanggil REST API dari Google Sheets?

  Memanggil REST API di Google Sheets semudah memasang aplikasi Apipheny, lalu membuka aplikasi di Google Sheet Anda, memasukkan permintaan API Anda, dan mengeklik “Jalankan” . Teruslah membaca untuk petunjuk tentang cara mengimpor data REST API ke Google Sheets.