Google Sheet sebagai Database Sederhana hanya dengan Vanilla Javascript
Belakangan ini saya berkontribusi dalam mengembangkan website portal untuk GDSC UII. Portal tersebut berfungsi untuk memusatkan informasi dan aktivitas yang ada di GDSC UII. Dikarenakan portal disebut di-deploy langsung oleh Github Pages, terdapat batasan pengembangan yang harus kami perhatikan, yaitu website hanya bersifat statis. Selain itu, Portal GDSC UII akan dikembangkan hanya menggunakan HTML, CSS, dan Javascript sederhana.
Umumnya, website statis adalah website yang menampilkan konten bukan berasal dari database. Konten ditampilkan secara statis sebagaimana kode html yang dibuat. Jika ingin menampilkan data secara dinamis, sebenarnya kita bisa memanfaatkan Firebase sebagai backend website, namun menurut saya, pada kasus Portal GDSC UII yang hanya menampilkan data, tidak perlu repot-repot untuk menggunakan Firebase hanya untuk menampilkan data yang jumlahnya sedikit. Lagipula yang bertugas menambah data adalah orang yang bukan berlatar belakang IT, terlalu merepotkan jika harus mengajarkan mereka cara menambah data dari Firebase. Karena sekali lagi, kami tidak akan membuat semacam CMS (Content Management System) sendiri hanya untuk Portal tersebut.
Setelah melakukan googling kesana kemari, saya menemukan solusi untuk menampilkan data secara dinamis dan non IT friendly, yaitu menggunakan Google Sheet sebagai Database. Orang hanya perlu mengedit data langsung dari Google Sheet yang terhubung, kemudian konten website akan menyesuaikan dari Google Sheet tersebut. Pada tulisan kali ini, saya akan membagikan cara memanfaatkan Google Sheet sebagai database sederhana.
Hal yang perlu disiapkan
- Google Sheet yang Publicly Shared, artinya Google Sheet harus dapat dilihat oleh semua orang yang memiliki link. Kali ini kita akan membuat Google Sheet dengan kolom nama dan email.
- API Key, cara mendapatkannya dapat dilihat di https://handsondataviz.org/google-sheets-api-key.html
- HTML + JS yang sudah terhubung. Buat file index.html dan script.js. Lalu pada file HTML, isi kode seperti berikut:
Let’s Code
Kita sekarang fokus pada file script.js. Buatlah fungsi untuk mendapatkan data dari Google Sheet yang telah dibuat. Isi fungsi tersebut lengkapnya adalah sebagai berikut:
Pada baris ke-2, kita perlu tahu ID dari Google Sheet yang telah kita buat sebelumnya. Untuk mengetahuinya, kita dapat melihat di URL Google Sheet yang kita punya. Contohnya seperti berikut:
Pada baris ke-3 isi sesuai dengan API Key yang kalian miliki. Pada kode baris ke-7, kita menggunakan sheet pertama pada Google Sheet. Jika ingin menggunakan sheet yang lain, Anda cukup merubah angka index yang lain sesuai letak urutan sheet-sheet pada Google Sheet. Contohnya jika ingin menggunakan sheet kedua, anda cukup mengganti kode baris ke-7 dengan:
const secondSheet = sheets[1]; // 1 karena index dimulai dari 0
Pada baris ke-13 dan 14, angka index di values[0] merujuk pada urutan kolom dari kiri ke kanan (dimulai dari 0). Kolom “Nama” terletak pada index ke-0 dan kolom “Email” terletak pada index ke-1.
Setelah sibuk membuat fungsi untuk mengambil data dari Google Sheet, saatnya menampilkan data ke HTML. Kita dapat memanfaatkan Javascript untuk memanipulasi DOM. Di bawah fungsi yang telah dibuat sebelumnya, silakan tambah kode berikut:
Sehingga full code pada file script.js adalah sebagai berikut:
Jika html dijalankan, maka hasil websitenya adalah sebagai berikut:
Kesimpulan
Mudah bukan? Dengan memanfaatkan Google Sheet, Anda dapat dengan mudah mengedit data langsung dari Google Sheet. Anda tidak perlu membuat aplikasi backend atau CMS sendiri hanya untuk membuat konten di tampilan menjadi dinamis. Selain itu, karena dibuat hanya dengan HTML dan Javascript, website dapat di-deploy langsung di Github Pages.
Sekian terimakasih tutorial kali ini. Semoga bermanfaat dan jangan lupa clapsnya.
