Cara Membuat Google Sheets Menjadi REST API

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 console.log() 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 POST data ke dokumen Google Sheets tadi melalui form yang sudah kita buat sebelumnya.

POST Data ke Google Sheets

Kita tambahkan sebuah fungsi dengan nama postData 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 postData yang menerima parameter url dan data. Untuk melakukan POST data atau kirim data ke Google Sheets kita menggunakan fungsi Fetch API. Pada fetch tersebut kita tetapkan method: 'POST', header dengan konten berupa application/json dan body yang berisi objek yang dikonversi menjadi string JSON dengan method JSON.stringify().

Selanjutnya kita panggil fungsi postData tersebut ke dalam event submit handler ( script.js ) dan jangan lupa saat pemanggilan fungsi tersebut kita tambahkan argumen url 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!

Dokumentasi resmi sheet best dapat dibaca lewat https://docs.sheet.best/

Untuk source codenya bisa dilihat di Github

juliansyahrifqi