Ketika mau bikin web tapi db nya masih di Google Sheets
Photo by Mika Baumeister on Unsplash
Kadang sebagai developer kita pengen gitu bantuin komunitas kita untuk “modernize” aplikasinya biar informasinya lebih accessible dan readable. Tapi kepentok dengan issue kalo datanya sekarang ini masih disimpen di excel atau google sheets.
Mau dipindah ke RDBMS kok males (apalagi kalo banyak), kalo enggak dipindah gimana cara web app kita bisa dapet datanya.
Saya juga kemarin nemu issue begitu, salah satu komunitas saya mau bikin sebuah web untuk yaa semacam portal informasi sekaligus biar anggota bisa ngecek apakah membershipnya sudah diapprove atau belum. Tapi masalahnya semua datanya di Google Sheets, masalah yang lain jumlah membernya udah di angka 8000-an, jadi kan mau bikin MySQL (eh MariaDB) ya males, kalo mau langsung pake gimana caranya?
Setelah saya kulik lagi, ternyata web yang ingin dibuat ini enggak ada CRUD nya, jadi saya “cuma” butuh bisa baca/read aja data dari si Google Sheets.
Okay, jadi begini caranya, sakjane super simple…
Pertama kita perlu siapkan table dari Google Sheets nya, pastikan row nomor 1 berisi label dari data-data kita
Table Google Sheets
Inget ya, harus banget, row pertama adalah row labelnya. Jika kita sudah memastikan kalo bentuknya kurang lebih kaya gitu, langkah selanjutnya kita menuju ke File -> Share -> Publish to Web
Setelahnya bakal muncul dialog/modal, untuk kolom pilihan yang sebelah kiri, saya biasanya cuma pilih Sheet instead of Entire Document , untuk yang pilihan sebelah kanan kita pilih publish sebagai Comma Separated Value (CSV) .
Jadi… sederhananya kita akan akses datanya melalui data CSV, ketika datanya sudah CSV kita selanjutnya bisa lakukan fetching data dengan library apapun bisa pake axios atau fetch .
The preparations are done… now let’s fetch the datas…. 🥁
Untuk case ini saya pake axios, kalau ada yang pake yang lain, bisa menyesuaikan eaps…
Sebelumnya kita perlu bikin parser CSV dulu, ini bisa pake library csv2json, tapi saya pake function sendiri supaya bisa dipake di client side maupun ketika di server side.
// @ts-ignore
export function parseCSV(csvText) {
const rows = csvText.split(/\r?\n/); // Split CSV text into rows, handling '\r' characters
const headers = rows[0].split(","); // Extract headers (assumes the first row is the header row)
const data = []; // Initialize an array to store parsed data
for (let i = 1; i < rows.length; i++) {
const rowData = rows[i].split(","); // Split the row, handling '\r' characters
const rowObject = {};
for (let j = 0; j < headers.length; j++) {
// @ts-ignore
rowObject[headers[j]] = rowData[j];
}
data.push(rowObject);
}
return data;
}
Then… kita fetch aja datanya
const GOOGLE_SHEETS_LINK = "your link here";
const fetchData = async () => {
const response = await axios.get(GOOGLE_SHEETS_LINK);
const { data } = response; // this will return data csv
if (data) {
return parseCSV(data); // parse csv to array of object
}
return [];
}
Dari fetch di atas kita akan dapat response seperti ini yang selanjutnya bisa kita consume di component kita
[
{ label1: "data", label2: "data" } // dst
]
Done, it’s as simple as that!
Dengan begini kita bisa consume data dari Google Sheets ke component kita. Apalagi ketika kita melakukan update pada sheets/table kita tadi, secara otomatis akan reflect ke API yang kita consume, jadi enggak perlu khawatir harus republish-republish.
But still… ini hanya quick temporary measurement dan untuk have fun aja. Kalau temen-temen butuh fitur yang lebih lengkap dan lebih advance terkait data management ini, saya tetep sarankan untuk dimigrate pakai RDBMS yang lebih proper, sekalipun bukan MySQL.
That’s it, have a good day everyone!