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
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
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
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
BungkusPada 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