Semakin hari layanan internet web "gratis" semacam google berlomba menyajikan kemudahan bagi penggunanya, seperti saya yang kebetulan sedang mencari cara menampilkan grafik IOT secara dinamic. Pada platform IOT semacam antares / telkomiot bisa memanfaatkan fasilitas widget grafik dan pernah juga saya bahas menggunakan webhook pada antares (baca disini). Namun teringat saya pada request seorang mahasiswa yang kesulitan melakukan embeeded / tempel grafiknya di laporan tugas akhirnya dan pada waktu itu saya pake jembatan di google collab untuk menampilkan grafik di quickchart.io.
Lalu gambar grafik iot diatas kok bisa dinamis dan interaktif begitu ? Mari saya kasi tau caranya ..
Pertama kita butuh mikrokontroler untuk mengirimkan data atau bisa juga gunakan simulator saja dan yang saya pilihkan bernama wokwi yang sudah sering dibahas di blog ini. Jadi kita akan membuat simulator pengirim data tegangan dan arus (secara random) yang bisa dibuka pada link wokwi disini.
Script nya akan mengirim data secara POST menuju alamat endpoint webhooks dan format datanya berupa JSON. Untuk mengetest apakah data terkirim dengan benar dapat menggunakan tester webhooks / POST online bernama requestcatcher seperti pada gambar berikut :
Lalu kita lanjutkan mengirimkan weebhook ke Google sheets seperti yang saya tulis terdahulu (baca disini) menggunakan antares, dan kini tanpa antares langsung dari ESP32 menuju googlesheets dan hasilnya tiap item pada JSON akan di tambahkan ke baris baru kebawah terus menerus jika ada data baru yg masuk.
Lalu bagaimana caranya membuat agar datanya hanya dibatasi 20 data terakhir sehingga grafiknya dapat lebih mudah dilihat ? Ternyata googlesheets memiliki fasilitas APPS SCRIPTS yang bisa menjadi coding otomasi dari webhooks ke googlesheets. Secara default maka apps scripts yang disediakan adalah berhubungan dengan webhooks, namun kita bisa hapus dan kemudian kreasikan sendiri (thanks to chatgpt).
Script yang saya tambahkan seperti berikut
function doPost(e) {
try {
if (!e || !e.postData) {
throw new Error("No postData received. Check the incoming request.");
}
// Log the raw data for debugging
Logger.log(e.postData.contents);
// Parse the incoming JSON data
var jsonData = JSON.parse(e.postData.contents);
// Extract voltage and current from the JSON payload
var voltage = jsonData.volt || "N/A"; // Default to "N/A" if missing
var current = jsonData.amp || "N/A"; // Default to "N/A" if missing
var timestamp = new Date().toISOString(); // Get the current timestamp
// Get the active sheet and append the data as a new row
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
sheet.appendRow([timestamp, voltage, current]);
// Keep only the last 20 rows (delete older rows if necessary)
var lastRow = sheet.getLastRow();
if (lastRow > 21) { // Keep the header row
sheet.deleteRow(2); // Always delete the second row (keep header row intact)
}
return ContentService.createTextOutput("Data added to Google Sheets");
} catch (error) {
// Log the error for debugging
Logger.log("Error: " + error.message);
return ContentService.createTextOutput("Error: " + error.message);
}
}
Dan kemudian hasilnya grafik/charts yang saya buat sesuai harapan menjadi hanya 20 baris data saja.
Seperti yang kita ketahui, google sheets secara keseluruhan maupun grafiknya saja dapat dipublish sebagai gambar ataupun grafik interaktif, sehingga bisa ditempel secara iframe pada website seperti pada grafik paling atas tulisan saya ini.
Bagaimana ? Mudah bukan ? Secara default google yang memberikan fasilitas secara gratis ini, mengatur refresh rate tiap 5 menit untuk meng-update tampilan grafiknya. Jadi kendalanya grafik tidak terlalu realtime tapi cukup menggembirakan bagi saya yang pecinta gratisan...hehehehe..
