Description
Alat monitoring ini dibuat karena rasa malasku menunggu update masuk donasi dari postingan IG, Mengapa tidak menyambungkan Web dan Spreadsheet? agar publik tahu secara real time uang masuknya dah berapa. Tapi ini masih Beta saja.
Bisa di cek disini Ifthar.
Approach
Membangun fitur ini sangat menarik dan melibatkan berbagai teknologi web, seperti Appscript, Alpine JS, Vanilla JS, Uno CSS, DaisyUI, dan Astro JS. Mari kita lihat cara kerjanya dengan lebih sederhana.
Setelah mendapatkan data dari API, kita ubah responsnya menjadi format JSON. Dari situ, kita bisa mengambil nilai-nilai penting seperti 'kebutuhan', 'totalDonasi', 'kekurangan', dan 'terkumpul' lalu mengolahnya menjadi bentuk yang lebih mudah dipahami. Kemudian, kita gunakan fungsi yang telah dibuat untuk mengubah angka menjadi format Rupiah yang rapi.
Pertama, kita atur format mata uang Rupiah menggunakan fitur bawaan JavaScript. Ini membantu mengubah angka menjadi format Rupiah secara otomatis. Lalu, kita ambil data donasi secara real-time dari sebuah API yang dihubungkan ke Google Spreadsheet melalui Appscript. Jadi, setiap kali ada perubahan donasi di spreadsheet, data tersebut langsung tersedia melalui API.
Akhirnya, kita hitung persentase dana terkumpul dengan mengubah 'terkumpul' menjadi angka desimal, mengalikannya dengan 100, dan membulatkannya hingga dua angka di belakang koma. Hasilnya adalah tampilan persentase yang mudah dimengerti oleh pengguna.
Seluruh proses ini dibuat menggunakan Vanilla JS dan diperindah dengan Alpine JS untuk interaksi di bagian depan, serta Uno CSS dan DaisyUI untuk tampilan yang menarik. Framework Astro JS digunakan untuk menggabungkan semua elemen ini menjadi situs web yang efisien dan berkinerja tinggi.
Technology
- Appscript
- Alpine JS
- Vanilla JS
- Uno Css
- DaisyUI
- Astro JS