Menampilkan dan Modifikasi Data Firebase pada Google Sheet menggunakan Apps Script

Menampilkan dan Modifikasi Data Firebase pada Google Sheet menggunakan Apps Script

Overview…

Pernahkah kamu membutuhkan data dinamis pada laporan atau dokumen Google Sheet mu? Awalnya saya kesulitan bagaimana suatu aplikasi dapat mengirimkan data pada database sekaligus meng-update data pada Google Sheet, sampai pada akhirnya teman saya menyarankan untuk mencoba Apps Script. Apps Script dapat diintegrasikan dengan Firebase, dan kebetulan database yang saya gunakan yaitu realtime database Firebase. Pada blog ini saya ingin memberikan tutorial singkat bagaimana mengolah data pada Google Sheet menggunakan Apps Script dan Firebase.

Google Apps Script & Firebase

Google Apps Script merupakan bahasa script berbasis JavaScript yang dapat digunakan untuk kustomisasi pada Google Apps seperti Docs, Sheets, dan Forms sesuai dengan kebutuhan tertentu.
Apps Script dapat melakukan hal-hal berikut :

– Menambah custom menus, dialogs, dan sidebars pada Google Docs, Sheets, dan Forms

– Menulis custom functions pada Google Sheets

– Membuat dan publish web apps

– Melakukan interaksi dengan Google services seperti AdSense, Analytics, Calendar, Drive, Gmail, dan Maps

– Membuat add-ons yang dapat digunakan pada Google Docs, Sheets, dan Forms, dan dapat di-publish ke Google add-on store

– Konversi Android App ke dalam bentuk Android add-on

Adapun Firebase adalah service Google yang dapat digunakan untuk membangun infrastruktur backend pada aplikasi / web. Contoh kasus pada blog ini yaitu integrasi Apps Script dengan realtime database Firebase.

Init

Berikut langkah-langkah untuk menyiapkan project :

– Buat project baru pada https://console.firebase.google.com/ (jika kamu belum memiliki akun Firebase, silakan daftar terlebih dahulu, free)

– Buka menu database > rules, dan ubah data seperti berikut (set open agar memudahkan pengembangan):

{
 "rules": {
 ".read": true,
 ".write": true
 }
}

– Buat database baru dan isikan data seperti berikut :

– Buat Google Sheet baru

– Buka tab tools > script editor

– Buka tab resources > libraries, masukan kode MYeP8ZEEt1ylVDxS7uyg9plDOcoke7-2l pada box add libraries, dan set version 11 Public Release. Kode di atas adalah code library Firebase app.

Functions

– Menampilkan data

Pada halaman Apps Script mu, ketik kode berikut :

function getBacaan() {
 var firebaseUrl = "https://project_mu.firebaseio.com/artikel";
 var base = FirebaseApp.getDatabaseByUrl(firebaseUrl);
 var data = base.getData();
 return data.bacaan; 
}

function getJudul() {
 var firebaseUrl = "https://project_mu.firebaseio.com/artikel";
 var base = FirebaseApp.getDatabaseByUrl(firebaseUrl);
 var data = base.getData();
 return data.judul; 
}

Kedua function di atas digunakan untuk mengambil data dari database Firebase. Pada Google Sheet custom function Apps Script dapat dipanggil dengan menuliskan fungsi sebagai formula pada cell tertentu, contoh =function().

Pada gambar di atas saya memanggil function getJudul() pada cell C3.

– Update data

Untuk melakukan write data, terlebih dahulu kita harus mendapatkan kode database secret dari project Firebase. Masuk ke dalam console firebase > pilih project mu > pada pojok kiri atas klik button gear (setting) > pilih tab services accounts > klik database secrets > show secret code, copy

Pada halaman Apps Script, masukkan function berikut :

function updateJudul(judul) {
 if(judul!=null && judul!=undefined && judul!=0){
 var database = FirebaseApp.getDatabaseByUrl("https://project_mu.firebaseio.com/", "database_secret");
 var data = { "judul": judul };
 database.updateData("artikel/",data);
 return "judul berhasil diubah menjadi " + judul;
 }else{
 return "failed";
 }
}

Function di atas digunakan untuk mengupdate judul sesuai dengan parameter judul. Sama seperti menampilkan data, untuk mengupdate data kamu cukup memanggil function sebagai formula pada cell tertentu, namun ingat karena kita akan passing parameter string, maka parameter harus diberi tanda petik, misal =updateJudul(“judul mu disini”).

Ketika formula =updateJudul() diproses, maka data Firebase akan langsung ter-update sesuai dengan parameter judul yang diberikan, namun pada Sheet data judul tidak dapat langsung berubah dan harus di refresh dahulu. Jika kamu ingin data cell Judul langsung berubah ketika menjalankan formula updateJudul(), kamu harus menambahkan function onEdit(e) pada Apps Script mu untuk melakukan deteksi terhadap segala perubahan yang terjadi pada sheet. Berikut adalah contoh function onEdit :

function onEdit(e){
 var ss = SpreadsheetApp.getActiveSpreadsheet();
 var sheet = ss.getSheets()[0];
 var range = sheet.getRange("C3");
 range.clearContent();
 SpreadsheetApp.flush();
 range.setValue("=getJudul()");
}

Function onEdit(e) di atas akan selalu dijalankan jika terjadi perubahan apapun pada Sheet. Fungsi SpreadsheetApp.flush() digunakan untuk membersihkan cache sheet, sehingga data baru dapat langsung ditampilkan setelah menjalankan proses update.

Explore…

Paparan tutorial di atas adalah sebagian kecil dari keseluruhan fitur dari Google Apps Script. Banyak fungsi-fungsi kompleks lainnya yang dapat kamu gunakan sesuai dengan kebutuhanmu dan tersedia pada dokumentasi Google Apps Script. Bukan hanya Sheet, Apps Script juga dapat diterapkan pada Google Docs dan Forms juga. Selamat bereksplorasi! Semoga tutorial sederhana ini dapat membantu.

Coder / Musician