Membaca data dari google sheets javascript

Question

Artikel ini akan membantu Anda melepaskan diri. Ini akan menunjukkan cara menarik data dari Google Spreadsheet ke HTML dan untuk memulai, mari kita mulai dengan satu pertanyaan yang penting

Table of Contents Show

Bagaimana cara menarik data dari Google Spreadsheet ke tabel HTML?
Gunakan Google Apps Script untuk menarik data dari Google Spreadsheet ke HTML
Langkah pertama. Siapkan data Google Spreadsheet
Langkah kedua. Buat proyek Skrip Google Apps baru
Langkah ketiga. Menyiapkan proyek
Langkah empat. Tambahkan potongan kode
Langkah lima. Penyebaran
Gunakan kode rendah n8n untuk menarik data dari Google Spreadsheet ke HTML
Langkah pertama. Putar instance n8n
Langkah kedua. Mengimpor alur kerja
Langkah ketiga. Konfigurasi
Langkah empat. Menjalankan alur kerja
Bagaimana cara membaca data dari lembar Google?
Bagaimana cara mengambil data dari lembar Google ke HTML?
Bisakah Anda menggunakan JavaScript dengan Google Sheets?
Bagaimana cara membaca data dari Google sheet nodejs?

Bagaimana cara menarik data dari Google Spreadsheet ke tabel HTML?

Anda dapat menarik data dari Google Spreadsheet ke tabel HTML setidaknya dengan dua cara. dengan Skrip Aplikasi Google atau dengan alur kerja n8n

Metode pertama menggunakan Google App Script, sebuah layanan Google. Pendekatan ini memerlukan penulisan beberapa kode JavaScript yang dapat menarik data dari Google Spreadsheet ke situs web. Terbukti, pendekatan ini tidak ideal untuk orang non-teknis karena memerlukan beberapa pengalaman pengkodean

Bisakah ini dilakukan tanpa perlu menulis kode apa pun — Anda mungkin bertanya?

Ya

Pendekatan kedua menggunakan n8n untuk menyiapkan alur kerja otomatis yang mewujudkan tujuan kita tanpa kode. Itu hanya perlu menghubungkan Google Sheet dan Membuat node HTML yang akan bekerja sama untuk menarik data dari google spreadsheet ke HTML

Membungkus pikiran seseorang untuk menyiapkan alur kerja n8n untuk pertama kalinya bisa sangat melelahkan, tetapi itu sangat berharga

Di bawah, saya akan mendemonstrasikan kedua pendekatan tersebut, dan pada akhirnya, Anda akan melihat bagaimana n8n menyederhanakan banyak hal secara radikal

Gunakan Google Apps Script untuk menarik data dari Google Spreadsheet ke HTML

Untuk yang belum tahu, Google App Script adalah layanan berbasis cloud yang memungkinkan Anda menulis JavaScript khusus, yang disebut skrip yang berinteraksi dengan produk Google seperti Gmail, Google sheets, Google docs, dll. Itu menambahkan lapisan ekstra fungsi khusus untuk produk ini

Misalnya, Anda dapat menerapkan web scraping dengan Google Apps Script atau bahkan chatbot

Meskipun kemungkinannya tidak terbatas dengan Google Apps Script, yang lebih erat dengan bagian ini adalah bagaimana kami dapat membuat tabel HTML dari data spreadsheet dengan alat ini. Ambil langkah-langkah berikut untuk melakukannya

Langkah pertama. Siapkan data Google Spreadsheet

Buat salinan data Google Spreadsheet di sini. Ini adalah daftar pengguna dengan nama depan dan belakang mereka

Langkah kedua. Buat proyek Skrip Google Apps baru

Kunjungi skrip. google. com dan di kiri atas, klik Proyek Baru. Perhatikan bagaimana antarmuka tempat Anda mendarat memiliki tab File, Layanan, Perpustakaan, dan kode. file gs

Langkah ketiga. Menyiapkan proyek

Selanjutnya, kita perlu mengaktifkan komunikasi antara proyek kita dan Google Sheets

Buka tab Layanan dan klik ikon +
Pilih Google Sheets API dari daftar di kotak popup Add a service. Dan klik Tambahkan

Langkah empat. Tambahkan potongan kode

Salin cuplikan di bawah dan tempelkan ke dalam kode. file gs

function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate();
}
 

function getData(){
  var spreadSheetId = "1wNk3LhnXqI66Z9-RMzBe7vIsog765Tq6LTaLasMn1R4";    //REPLACE WITH YOUR ID
  var dataRange     = "Data!A2:B";
 
  var range   = Sheets.Spreadsheets.Values.get(spreadSheetId, dataRange);
  var values  = range.values;
 
  return values;
}

Pastikan untuk mengganti spreadSheetId dengan ID Anda yang benar. Anda dapat mengambil ID spreadsheet Anda dari bilah URL browser Anda. Lihat bagian yang disorot dari gambar di bawah ini

Selanjutnya, Buka tab File dan klik ikon + → Pilih HTML → beri nama file Indeks → dan tekan tombol enter
Salin cuplikan di bawah dan tempel di Indeks yang dihasilkan. html

<!DOCTYPE html>
<html>
  <head>
    <!-- Loading datatables, a JS library from the CDN -->
    <script src="<https://code.jquery.com/jquery-3.5.1.js>"></script>
    <link rel="stylesheet" type="text/css" href="<https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css>">
    <script type="text/javascript" charset="utf8" src="<https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js>">
    </script>

    
    <script>
      /*
      * The line below invokes the getData() function in the Code.gs file, 
      * It passes the returned data to showData() function
      */
      google.script.run.withSuccessHandler(showData).getData();
    
      // This function leverages the JS datatables lib to render our table to the DOM
      // using the data the function receives
      function showData(dataArray){
        console.log()
        $(document).ready(function(){
          $('#table-data').DataTable({
            data: dataArray,

            columns: [
              {"title":"First Name"},
              {"title":"Last Name"}
            ]
          });
        });
      }      
    </script>
  </head>
 
  <body>
    <div>
      <table id="table-data">
          <!-- showData() function defined above would inject table data here -->
      </table>
    </div>
  </body>
</html>

_

Langkah lima. Penyebaran

Selanjutnya, klik Terapkan → Uji penerapan → Klik URL yang dihasilkan
Anda akan melihat tabel Anda ditampilkan seperti yang ditunjukkan pada gambar di bawah ini

Meskipun seseorang dapat menarik data dari Google Spreadsheet ke HTML dengan Google Apps Script, seperti yang disebutkan sebelumnya, pendekatan ini memerlukan penulisan beberapa kode

Gunakan kode rendah n8n untuk menarik data dari Google Spreadsheet ke HTML

Mari kita segera melihat bagaimana n8n menyederhanakan segalanya dengan menyajikan kepada kita pendekatan tanpa kode untuk melakukan hal yang sama

Prasyarat

pengaturan n8n. Cara termudah untuk memulai adalah dengan mengunduh aplikasi desktop gratis, tetapi Anda juga dapat mendaftar untuk n8n cloud atau hosting sendiri n8n
Google Sheet dengan baris tajuk dan beberapa data di dalamnya. Gunakan kembali data Google Sheets yang Anda salin di bagian sebelumnya
ID Lembar Google. Langkah ini telah didemonstrasikan pada bagian sebelumnya

Dengan semua prasyarat yang ditetapkan, lakukan langkah-langkah berikut untuk menyiapkan dan menjalankan alur kerja n8n yang akan menarik data dari Google Spreadsheet ke HTML

Langkah pertama. Putar instance n8n

Di sini saya akan memutar instance n8n. Jika Anda juga menggunakan buruh pelabuhan, kunjungi http. // localhost. 5678 akan membawa Anda ke UI editor

Langkah kedua. Mengimpor alur kerja

Di sini, kami akan mengimpor Google Spreadsheet n8n ke alur kerja HTML yang akan mengotomatiskan (dalam arti kode 0) tugas yang baru saja kami tunjukkan dengan Google Apps Script. Untuk melakukannya

Klik tombol Gunakan alur kerja menggunakan Google Spreadsheet ke HTML. Tindakan itu akan menyalin alur kerja ke clipboard Anda
Buka UI editor instance n8n Anda dan tempel alur kerja yang disalin. UI editor Anda harus diperbarui dengan alur kerja seperti yang ditunjukkan pada gambar di bawah

Alur kerja di atas memiliki tiga node

node Google Sheets yang membaca data dari spread kami,
node Buat file HTML yang menghasilkan tabel HTML menggunakan data yang diterima dari node Google Sheets,
Node webhook

Meskipun node Google Sheets dan Buat HTML sudah cukup jelas, node webhook mungkin bukan untuk pemula. Anda dapat memahami dasar-dasar webhook di sini. Dan kemudian Anda dapat melihat lebih mendalam pada simpul webhook di sini

Langkah ketiga. Konfigurasi

Perhatikan bagaimana node Google Sheets disorot dengan warna merah. Kita perlu mengkonfigurasinya. Mengonfigurasi Node ini memerlukan penambahan kredensial Akun Google Anda ke node tersebut. Lihat cara memasukkan kredensial untuk node Google
Dengan menambahkan kredensial Anda, tambahkan ID Spreadsheet Anda (lihat langkah sebelumnya) ke node Google Sheets seperti yang ditunjukkan pada gambar di bawah

Langkah empat. Menjalankan alur kerja

Aktifkan alur kerja atau jalankan secara manual
Terakhir, kunjungi URL yang disediakan oleh node webhook di browser Anda (URL produksi jika alur kerja aktif, uji URL jika alur kerja dijalankan secara manual) untuk melihat data spreadsheet Anda ditampilkan sebagai tabel HTML seperti yang ditunjukkan pada gambar di bawah ini

Dan itu dia

Tanpa menulis satu baris kode pun, kami telah menarik data n8n dari Google Spreadsheet ke HTML. Sekarang Anda melihat bagaimana n8n bernilai investasi?

Memang, tabel HTML yang dihasilkan belum sempurna. Jika Anda menginginkan alur kerja yang lebih canggih yang memungkinkan Anda menyesuaikan tampilan tabel HTML, Anda harus memeriksa alur kerja ini

Apa berikutnya?

Kali ini kami memperbesar bagaimana alur kerja n8n siap pakai dapat digunakan untuk menampilkan data dari Google Spreadsheet di situs web

Namun, ada banyak hal yang bisa dilakukan dengan n8n. Misalnya, Anda bisa

Transfer data dari HTML ke Google Spreadsheet
Mengikis data dari situs web ke Google Sheets
Atau sambungkan Google Sheets ke MySql

Selain menghubungkan HTML dengan Google Spreadsheet, Anda juga dapat menggunakan n8n untuk mengotomatiskan seluruh operasi dalam organisasi Anda, atau dengan cepat menjalankan seluruh solusi backend tanpa kode/kode rendah. Dengan n8n, kemungkinannya tidak terbatas

Bungkus

Pada artikel ini, Anda telah melihat cara menarik data dari Google Spreadsheet ke html setidaknya dengan dua cara. dengan Google App Script atau dengan alur kerja otomatis n8n

Kami mendemonstrasikan bagaimana tugas yang biasanya membutuhkan pengalaman pemrograman jika dilakukan dengan alat lain seperti Google Apps Script dapat diselesaikan di n8n dengan sedikit atau tanpa kode

Siap mengubah tugas rutin Anda menjadi alur kerja otomatis?

Mendaftar untuk akun cloud n8n untuk memulai dengan mudah dan memulai proses otomatisasi dengan n8n. Platform ini juga menawarkan ratusan integrasi siap pakai dan ratusan template otomasi, memungkinkan tim Anda merancang alur kerja khusus yang Anda perlukan