Reaksi baca tulis google sheets

Kami ingin situs web yang dibuat khusus dan burung kecil memberi tahu kami bahwa React adalah apa yang dilakukan anak-anak keren saat ini — seperti, lebih cepat, dapat diskalakan, dan mudah diperbarui dibandingkan dengan Wordpress? . Seperti semuanya. Oh, Posting… apa? . Firebase? . Mengapa kita tidak bisa menggunakan Google Sheets saja?. — Ya, sekarang kamu bisa

Saya minta maaf karena membandingkan Bereaksi dengan Wordpress. Mereka adalah monster yang benar-benar berbeda dan melayani tujuan yang berbeda — React adalah framework Javascript dan Wordpress adalah Content Management System (CMS). Seseorang dapat mengikat Wordpress ke kursi dan memasang semua Hostel (ketiga bagian) di atasnya, atau memujinya seperti para penggemar Patriots memuja Tom Brady (maaf, saya adalah penggemar Eagles selalu dan selamanya). Tapi saya, seperti kebanyakan orang lain yang saya kenal, telah pindah dari Wordpress. Untuk berbagai alasan — alasan yang paling cocok untuk Reddit, menurut saya. Oke, kembali ke React things

Saya menjalankan Inisiatif FAWN (Situs Web Gratis dan Dapat Diakses untuk Nirlaba) beberapa tahun yang lalu sebagai bagian dari startup sukarelawan saya EvoXLabs. Sebagian besar, ini adalah situs web informasi, yang membutuhkan pembaruan sesering mungkin. Namun, pembaruan bukan bagian dari kesepakatan karena gagasan di balik inisiatif tersebut adalah untuk mempromosikan dan mengadvokasi aksesibilitas di situs web. Ini juga salah satu alasan mengapa React adalah pilihannya — bukan karena secara ajaib membuat situs web dapat diakses tetapi karena tidak terdiri dari banyak widget yang menarik secara visual dan fungsional yang dibuat tanpa aksesibilitas sama sekali. Ya, Angular dan Vue hampir sama dalam hal ini, tetapi React adalah racunnya. Pokoknya update. Untuk pembaruan, ada dua cara. baik staf/sukarelawan organisasi merasa nyaman dengan React atau mereka dapat menavigasi melalui database tradisional. Ini, dengan sangat cepat, menjadi masalah dan bersamaan dengan kurangnya sumber daya untuk memenuhi permintaan, Inisiatif FAWN menjadi tidak aktif dan sejak saat itu

Sekitar setahun yang lalu, saya mulai memikirkan cara lain, sebagai pengembang React, dapat berkontribusi pada tujuan yang saya pedulikan. Bisakah saya tetap membuat situs web untuk organisasi nirlaba tanpa menjadi hambatan bagi mereka untuk menambah/menghapus/memodifikasi konten sendiri? . Di dunia teknologi, jawabannya adalah daftar yang akan menjadi bukunya sendiri. Di luar dunia teknologi, hanya ada satu jawaban yang muncul secara signifikan – Google Spreadsheet. File Excel/CSV adalah yang kedua dalam daftar itu, tetapi orang-orang ragu tentang seluruh proses membuat perubahan dan menyebarkan file. Untungnya, Google Sheets, seperti kebanyakan produk Google lainnya, memiliki API yang cukup mengagumkan. Dan di mana ada API, di situ ada cahaya

Google Sheets tidak dapat dibandingkan dengan database tradisional dan sama sekali bukan pengganti database tradisional. Tapi satu tempat di mana Google Sheets sebagai database darurat bisa sangat bermanfaat adalah kemampuannya untuk melacak riwayat out-of-the-box, yang dalam database tradisional ditangani melalui cara tambahan.

Oke, jadi kita punya API. Bereaksi adalah kerangka kerja Javascript. Jadi, fetch panggilan, kan? . Harus sederhana, ya?

Salah satu hal terbaik tentang React adalah perutean. Anda tidak perlu memuat ulang seluruh halaman saat menavigasi melalui halaman dan hanya subkomponen. Itu sebabnya cepat. Jadi, katakanlah Anda memiliki beberapa komponen (dalam konteks ini, identik dengan halaman) dan masing-masing memiliki panggilan fetch. Apa yang terjadi? . Dan panggilan jaringan dapat menurunkan kinerja secara substansial. Tapi itu belum semuanya. Setiap kali panggilan Google Sheets API dilakukan, itu dihitung berdasarkan kuota panggilan. Dari bagian Batas Penggunaan Google Sheets API v4

Versi Google Sheets API ini memiliki batas 500 permintaan per 100 detik per proyek, dan 100 permintaan per 100 detik per pengguna. Batas baca dan tulis dilacak secara terpisah. Tidak ada batasan penggunaan harian

Singkat cerita, mengingat kendala ini, yang benar-benar kami sukai adalah membatasi panggilan jaringan sebanyak mungkin. Ini membuat situs web kami lebih cepat dan kami memanfaatkan kuota secara maksimal. Jika lalu lintas yang Anda harapkan melebihi batas penggunaan, basis data tradisional mungkin paling cocok untuk kebutuhan Anda. Bagian selanjutnya tentang "Kapan Tidak Menggunakan Google Sheets" mencakup skenario semacam itu

Metis adalah Higher-Order Component (HOC) yang memungkinkan React Apps menggunakan Google Sheets sebagai Basis Data Sementara. Dan jika Anda bertanya-tanya, Metis dinamai Dewi Kebijaksanaan Yunani. Ada dua komponen utama Metis. GoogleSheetsProvider dan withGoogleSheets

GoogleSheetsProvider

GoogleSheetsProvider sangat mirip dengan React

REACT_APP_GOOGLE_SHEETS_API_KEY=[YOUR-API-KEY]
REACT_APP_GOOGLE_SHEETS_DOC_ID=[YOUR-DOC-ID]

dengan Google Spreadsheet

withGoogleSheets_ adalah Komponen Tingkat Tinggi yang membuatnya sangat mudah untuk mengambil data dari lembar tertentu dari konteks (dilakukan melalui GoogleSheetsProvider) dan membuatnya tersedia untuk komponen melalui

REACT_APP_GOOGLE_SHEETS_API_KEY=[YOUR-API-KEY]
REACT_APP_GOOGLE_SHEETS_DOC_ID=[YOUR-DOC-ID]

Secara default, withGoogleSheets dikirimkan dengan komponen yang sangat mendasar untuk dirender jika pengambilan data dari Google Sheets API tidak berhasil (izin salah, kuota tercapai, dll. ). HOC ini memungkinkan komponen default ini untuk dikustomisasi serta diganti dengan komponen kustom yang sama sekali berbeda

withGoogleSheets_ dirancang untuk mengambil nama sheet tunggal atau array nama sheet sebagai argumen untuk mengambil data dari. Mengambil semua lembar tanpa menentukan masing-masing juga didukung dan didokumentasikan dengan baik dengan contoh

Contoh Dasar

Instalasi

npm install react-db-google-sheets --save

lingkungan

REACT_APP_GOOGLE_SHEETS_API_KEY=[YOUR-API-KEY]
REACT_APP_GOOGLE_SHEETS_DOC_ID=[YOUR-DOC-ID]

Aplikasi. js

import React from 'react';
import GoogleSheetsProvider from 'react-db-google-sheets';const App = () => (
  <GoogleSheetsProvider>
    <MyApp />
  </GoogleSheetsProvider>
);export default App;

Komponen (ucapkan Halo. js)

import React from 'react';
import { withGoogleSheets } from 'react-db-google-sheets';const Hello = props => (
  <div>
    {props.db.sheet1.map(data => (
      <span>{data.id}</span>
    ))}
  </div>
);export default withGoogleSheets('sheet1')(Hello);

Lebih banyak contoh disebutkan dalam dokumentasi dan di bawah subfolder contoh di Repo GitHub

Mudah-mudahan, sekarang, Anda setidaknya tertarik dengan ide menggunakan Google Sheets sebagai basis data sementara untuk React Apps Anda. Tetapi Anda mungkin juga memikirkan beberapa skenario di mana ini bukanlah solusi yang baik. Itu benar - ada beberapa kasus seperti itu. Seperti segala sesuatu di dunia pemrograman, penggunaan alat hanya bergantung pada kebutuhan dan Metis sama sekali bukan pengecualian dari aturan itu.

Pertama, seperti yang disebutkan sebelumnya, jika Anda mengharapkan lalu lintas padat masuk ke situs web Anda, bahkan dengan penggunaan GoogleSheetsProvider untuk membatasi satu panggilan jaringan per pemuatan awal situs web, Anda harus menggunakan database tradisional atau mempertimbangkan paket berbayar untuk Google Sheets API . Kedua, untuk menggunakan Google Sheets sebagai basis data darurat, izin pada dokumen harus diatur agar dapat dilihat oleh publik. Jadi, jika data Anda berisi kata sandi atau informasi sensitif yang menjamin hak akses pengguna, Anda harus menggunakan database tradisional dan menerapkan protokol keamanan yang sesuai. Metis dan penggunaan Google Sheets sebagai database darurat dimaksudkan untuk data yang dapat dilihat oleh publik seperti di website informasi atau resume/portofolio

Terakhir, jika Anda memerlukan kunci asing (kolom yang berfungsi sebagai referensi silang antara tabel — sheet dalam terminologi Google Sheets), Anda sebaiknya menggunakan database relasional. Metis akan menyediakan fungsi pembantu dan panduan tentang cara mencapainya di masa mendatang menggunakan Google Spreadsheet, tetapi mengevaluasi kebutuhan Anda dan memutuskan alat apa yang terbaik untuk kasus penggunaan Anda sangat disarankan

Diperbarui. Setelah berbicara dengan beberapa orang, perlu ditegaskan kembali bahwa Google Sheets bukanlah database itu sendiri. Itu tidak menskalakan, tidak menggunakan manfaat dari database tradisional, karena itu bukan hanya satu. Tetapi mengingat kasus penggunaan yang sangat spesifik di mana skalabilitas tidak menjadi perhatian, di mana membangun CMS tidak praktis, dan di mana biaya pelatihan alat baru untuk pengelola konten yang tidak paham teknologi terlalu tinggi, Metis dapat bermanfaat. Mengevaluasi kebutuhan dan kasus penggunaan Anda, lalu memilih alat yang sesuai untuk tujuan tersebut sangatlah penting — dan bisa dibilang, harus menjadi faktor penentu awal antara menggunakan Metis atau tidak

Metis dimaksudkan sebagai alat untuk menambah/memodifikasi/menghapus konten di situs web Anda dengan kemudahan menggunakan Google Sheets tanpa harus khawatir tentang perubahan kode dan proses penerapan, dan yang lainnya. Anda bahkan dapat mengelola desain dan tata letak situs web dengan menentukan, misalnya, warna, ukuran font, dan komponen gaya lainnya, dalam lembar di Dokumen Google Sheets Anda. Kemungkinannya tidak terbatas dan kemudahan penggunaannya sangat seksi. Tetapi sekali lagi, Anda harus mengevaluasi kebutuhan Anda dan memilih alat yang paling sesuai dengan kebutuhan Anda

Cobalah Metis. Umpan balik, kontribusi, pertanyaan — semua diterima. Jangan ragu untuk mengajukan masalah pada repo GitHub atau kirimi saya email atau Tweet kepada saya dengan pertanyaan/masukan Anda

Bagaimana Anda membaca dan menulis di Google Sheets dengan reaksi?

Bagaimana cara membuat akses baca di Google Sheets?

Bagaimana cara Python membaca dan menulis ke Google Sheets?

Bagaimana Anda menulis teks di aplikasi Google Sheets?