Cara menggunakan google sheets connector

Question

Google Sheet merupakan aplikasi yang disediakan secara gratis oleh google yang berfungsi serupa excel yang dapat menangkap, menampilkan dan mengolah data dalam bentuk baris dan kolom yang dapat dibuka secara online dan dapat diakses secara barsama-sama.

Table of Contents Show

Membuat Form HTML
Menambahkan Fungsionalitas
Membuat Google Sheets menjadi REST API
POST Data ke Google Sheets
Bagaimana cara mengakses Google sheet?
Apa saja yang bisa dilakukan dengan Google sheet?
Langkah memasukkan data ke Google Sheet?
Google sheet digunakan untuk apa?

Dengan google sheet kita dapat berkolaborasi dan berbagi sheet dengan pengguna lain yang dapat dibatasi hak aksesnya dengan read only maupun read edit.

Selanjutnya tabel data yang dibuat menggunakan google sheet dapat ditampilkan melalui website yang dibuat dengan wordpress dengan cara sebagai berikut :

The Google Sheets connector has been deprecated. To use a Google Sheet data source, you'll need to access it through the Google Drive connector instead.

Tip: To connect to a Google Sheet that isn't in your drive, you can paste the URL into the search box.

Connect to Google Drive. For more information, see Google Drive.
Find your Google Sheet by browsing, searching by name, or pasting the URL into the search box.
Select the Google Sheet.

Note that the Google Sheet can't contain a pivot table on any tab or the connection will fail.

Pernah kepikiran ga sih, kita pengen kirim data langsung ke Google Sheet tapi langsung dari aplikasi kita ( form yang dibuat oleh kita ) bukan melalui Google Form? Nah mungkin pembahasan kali ini bisa jadi salah satu solusinya. Disini kita akan mengupas bagaimana caranya mengirimkan data (POST) dari aplikasi kita ke Google Sheets seperti umumnya REST API.

Membuat Form HTML

Langkah pertama yang kita lakukan adalah membuat form HTML yang dibutuhkan. Disini form yang akan kita buat hanya ada tiga input kolom saja yaitu, input kolom Nama, Umur dan Pekerjaan dan aplikasi yang akan kita buat juga hanya akan menggunakan styling yang sederhana.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Sheet Rest API</title>

    <style>
        h1 {
            text-align: center;
            margin-top: 40px;
        }

        input {
            margin-bottom: 10px;  
        }

        form {
            margin: 0 auto;
            width: 120px;
        }
    </style>
</head>
<body>

    <h1>Google Sheet Rest API</h1>

    <form action="" class="form" id="form">
        <div class="form-control">
            <label for="pekerjaan">Nama</label> <br>
            <input type="text" id="nama" name="nama" class="nama" required>
        </div>

        <div class="form-control">
            <label for="umur">Umur</label> <br>
            <input type="text" id="umur" name="umur" class="umur" required>
        </div>

        <div class="form-control">
            <label for="pekerjaan">Pekerjaan</label> <br>
            <input type="text" id="pekerjaan" name="pekerjaan" class="pekerjaan" required>
        </div>

        <input type="submit" value="Submit" id="submit">   
    </form>
</body>
</html>

Tampilan form yang kita buat diatas akan seperti ini

Menambahkan Fungsionalitas

Selanjutnya kita tambahkan fungsionalitasnya. Kita buat file dengan nama script.js dan tambahkan kode dibawah ini.

const form = document.getElementById('form');
const inputNama = document.getElementById('nama');
const inputUmur = document.getElementById('umur');
const inputPekerjaan = document.getElementById('pekerjaan');

form.addEventListener('submit', (e) => {
  e.preventDefault();

  let data = {
    nama: inputNama.value,
    umur: inputUmur.value,
    pekerjaan: inputPekerjaan.value,
  };

  console.log(data);
});

Dan jangan lupa kita hubungkan file HTML kita dengan script diatas. Tambahkan kode di bawah ini ke dalam file html kita sebelum tag penutup body </body>

<script src="script.js"></script>

Pada kode diatas kita menggunakan event handler, dimana ketika kita melakukan submit form, nilai dari semua kolom input kita tampung di dalam variabel dengan nama data dengan bentuk objek. Lalu kita cetak ke console dengan menggunakan fungsi

const form = document.getElementById('form');
const inputNama = document.getElementById('nama');
const inputUmur = document.getElementById('umur');
const inputPekerjaan = document.getElementById('pekerjaan');

form.addEventListener('submit', (e) => {
  e.preventDefault();

  let data = {
    nama: inputNama.value,
    umur: inputUmur.value,
    pekerjaan: inputPekerjaan.value,
  };

  console.log(data);
});

0 untuk mengecek apakah data dari kolom input berhasil dikirim atau tidak.

Membuat Google Sheets menjadi REST API

Langkah pertama adalah buat terlebih dahulu dokumen Spreadsheet baru di Google Sheets di sini
Ubah permission dari dokumen Spreadsheet kita dengan cara klik pada tombol Share.
Lalu klik pada Change to anyone with the link
Ubah hak akses dari Viewer menjadi Editor
Copy link dokumen Spreadsheet kita dengan mengklik tombol Copy link.
Klik Done jika sudah selesai.
Pergi ke halaman https://sheet.best/ dan lakukan login atau daftar akun jika belum mempunyai akun.
Buat koneksi baru dengan cara mengklik tombol + Connection
Isi kolom seperti Connection name dan tempel atau paste link dokumen Spreadsheet kita pada kolom Connection URL.
Klik tombol Connect. Setelah itu kalian akan menuju halaman connection, dimana pada halaman tersebut kita dapat melihat informasi tentang connection kita baik itu API Consumtion, Connection Used dan lainnya.
Klik pada tombol Details.
Copy Connection URL. Connection URL tersebut akan kita gunakan sebagai endpoint untuk melakukan protokol REST API HTTP ( POST, GET, PUT, DELETE ).

Nah sekarang dokumen Google Sheets kita sudah menjadi REST API, ayo kita coba melakukan

const form = document.getElementById('form');
const inputNama = document.getElementById('nama');
const inputUmur = document.getElementById('umur');
const inputPekerjaan = document.getElementById('pekerjaan');

form.addEventListener('submit', (e) => {
  e.preventDefault();

  let data = {
    nama: inputNama.value,
    umur: inputUmur.value,
    pekerjaan: inputPekerjaan.value,
  };

  console.log(data);
});

1 data ke dokumen Google Sheets tadi melalui form yang sudah kita buat sebelumnya.

POST Data ke Google Sheets

Kita tambahkan sebuah fungsi dengan nama

const form = document.getElementById('form');
const inputNama = document.getElementById('nama');
const inputUmur = document.getElementById('umur');
const inputPekerjaan = document.getElementById('pekerjaan');

form.addEventListener('submit', (e) => {
  e.preventDefault();

  let data = {
    nama: inputNama.value,
    umur: inputUmur.value,
    pekerjaan: inputPekerjaan.value,
  };

  console.log(data);
});

2 ke dalam file script.js kita. Tambahkan script dibawah ini ke dalam file script.js dan tempatkan setelah deklarasi variabel.

const postData = (url, data) => {
  fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (e) {
      console.log(`Error: ${e}`);
    });
};

Pada script diatas kita membuat fungsi

const form = document.getElementById('form');
const inputNama = document.getElementById('nama');
const inputUmur = document.getElementById('umur');
const inputPekerjaan = document.getElementById('pekerjaan');

form.addEventListener('submit', (e) => {
  e.preventDefault();

  let data = {
    nama: inputNama.value,
    umur: inputUmur.value,
    pekerjaan: inputPekerjaan.value,
  };

  console.log(data);
});

2 yang menerima parameter

const form = document.getElementById('form');
const inputNama = document.getElementById('nama');
const inputUmur = document.getElementById('umur');
const inputPekerjaan = document.getElementById('pekerjaan');

form.addEventListener('submit', (e) => {
  e.preventDefault();

  let data = {
    nama: inputNama.value,
    umur: inputUmur.value,
    pekerjaan: inputPekerjaan.value,
  };

  console.log(data);
});

5 dan data. Untuk melakukan POST data atau kirim data ke Google Sheets kita menggunakan fungsi Fetch API. Pada fetch tersebut kita tetapkan

const form = document.getElementById('form');
const inputNama = document.getElementById('nama');
const inputUmur = document.getElementById('umur');
const inputPekerjaan = document.getElementById('pekerjaan');

form.addEventListener('submit', (e) => {
  e.preventDefault();

  let data = {
    nama: inputNama.value,
    umur: inputUmur.value,
    pekerjaan: inputPekerjaan.value,
  };

  console.log(data);
});

7,

const form = document.getElementById('form');
const inputNama = document.getElementById('nama');
const inputUmur = document.getElementById('umur');
const inputPekerjaan = document.getElementById('pekerjaan');

form.addEventListener('submit', (e) => {
  e.preventDefault();

  let data = {
    nama: inputNama.value,
    umur: inputUmur.value,
    pekerjaan: inputPekerjaan.value,
  };

  console.log(data);
});

8 dengan konten berupa

const form = document.getElementById('form');
const inputNama = document.getElementById('nama');
const inputUmur = document.getElementById('umur');
const inputPekerjaan = document.getElementById('pekerjaan');

form.addEventListener('submit', (e) => {
  e.preventDefault();

  let data = {
    nama: inputNama.value,
    umur: inputUmur.value,
    pekerjaan: inputPekerjaan.value,
  };

  console.log(data);
});

9 dan

<script src="script.js"></script>

0 yang berisi objek yang dikonversi menjadi string JSON dengan method

<script src="script.js"></script>

1

Selanjutnya kita panggil fungsi

const form = document.getElementById('form');
const inputNama = document.getElementById('nama');
const inputUmur = document.getElementById('umur');
const inputPekerjaan = document.getElementById('pekerjaan');

form.addEventListener('submit', (e) => {
  e.preventDefault();

  let data = {
    nama: inputNama.value,
    umur: inputUmur.value,
    pekerjaan: inputPekerjaan.value,
  };

  console.log(data);
});

2 tersebut ke dalam event submit handler ( script.js ) dan jangan lupa saat pemanggilan fungsi tersebut kita tambahkan argumen

const form = document.getElementById('form');
const inputNama = document.getElementById('nama');
const inputUmur = document.getElementById('umur');
const inputPekerjaan = document.getElementById('pekerjaan');

form.addEventListener('submit', (e) => {
  e.preventDefault();

  let data = {
    nama: inputNama.value,
    umur: inputUmur.value,
    pekerjaan: inputPekerjaan.value,
  };

  console.log(data);
});

5 dengan Connection URL dari sheet.best yang tadi sudah kita salin dan argumen data dengan variabel data.

postData(
    'https://sheet.best/api/sheets/159e9cac-caa4-467d-928f-45c185ef0ade',
    data
  );

  inputNama.value = '';
  inputUmur.value = '';
  inputPekerjaan.value = '';

Kita buka dokumen Google Sheets yang sudah kita buat sebelumnya dan isi pada kolom pertama dengan nama, umur dan pekerjaan. Pastikan mengisi kolom tersebut dengan benar karena nama kolom tersebut bersifat case sensitive.

Setelah itu kita coba lakukan submit melalui form yang sudah kita buat.

Dan kita refresh pada dokumen Google Sheets kita lalu lihat hasilnya

Hooray! Kita sudah berhasil menjadikan Google Sheets menjadi REST API, di atas kita hanya mencontohkan untuk melakukan POST data saja, tetapi kalian bisa mencoba yang lainnya seperti GET data, DELETE data, dan PUT data.

Terima kasih sudah membaca tulisan ini, jika ada masukkan atau pertanyaan bisa melalui komentar. See you next time!

Bagaimana cara mengakses Google sheet?

Anda dapat membuka Spreadsheet dengan salah satu cara berikut: Browser web apa pun—Buka sheets.google.com. Google Drive—Klik Baru. Google Spreadsheet, lalu buat dari awal atau dari template.

Apa saja yang bisa dilakukan dengan Google sheet?

Dengan Google Spreadsheet, Anda dapat membuat dan mengedit spreadsheet secara langsung di browser web—tanpa memerlukan software khusus. Beberapa orang dapat bekerja secara bersamaan, Anda dapat melihat saat orang lain membuat perubahan, dan setiap perubahan disimpan secara otomatis.

Langkah memasukkan data ke Google Sheet?

Memasukkan teks atau data: Klik sel, lalu masukkan teks. Menyisipkan item lainnya: Klik Sisipkan, lalu tambahkan diagram, gambar, fungsi, catatan, dan lainnya. Catatan: Anda juga dapat menambahkan fungsi ke sel dengan mengetik =. Untuk melihat fungsi yang tersedia, buka daftar fungsi spreadsheet Google.

Google sheet digunakan untuk apa?

Spreadsheet Google mendukung formula sel yang biasa ditemukan di sebagian besar paket spreadsheet desktop. Formula tersebut dapat digunakan untuk membuat fungsi yang melakukan pengolahan data dan kalkulasi string dan angka.

kode sheet