ReactJs + Chrome Extension Tutorial : Chrome Extension Untuk Cek Kuota Internet Smartfren

Blog udah mulai jamuran, bahkan tahun kemarin saya gak sempat nulis apa-apa :D. Entah kenapa saya malas sekali untuk menulis lagi di blog ini -,-. Kali ini saya mau menulis sedikit hasil belajar saya tentang teknologi frontend yang lagi kekinian, sebut saja ReactJs. Hanya sebuah tool kecil yang memudahkan saya untuk mengecek sisa kuota internet dari provider smartfren. Lumayan repot kalau hanya sekedar ingin mengecek sisa kuota internet smartfren. Saya hitung-hitung, ada sekitar kali 3 klik untuk menuju ke halaman detail sisa kuota internet. Mulai dari halaman Log In, klik menu My Smartfren, kemudian detail paket.

Maka dari itu, saya iseng untuk mengetahui alurnya. Sebenarnya cukup sederhana, ketika kita mengakses dashboard aplikasi smartfren, contoh, misal menggunakan modem MiFi m3y, kita cukup mengetikkan http://andromax.m3y di browser. Ketika memilih menu My Smartfren & melakukan inspect elementNetwork akan muncul kemana request API nya. Cuma ya memang harus mengirimkan parameter “IDX”, semacam unique code dari masing-masing modem. Jika sukses, akan didapatkan respon berupa “session_id” yang akan digunakan kembali untuk mengakses detail paket internet. Kira-kira begitulah alurnya 😀

Hasilnya setelah saya buat dalam bentuk chrome extension seperti gambar di atas. Lumayan, bisa menghemat beberapa kali klik, cukup sekali klik sudah muncul :D. Kita tinggal mendefinisikan value dari “IDX” di dalam file constant.js. Kemudian jalankan perintah yarn build untuk menghasilkan production code nya & buka halaman Manage Extension di browser Chrome, pilih menu Load unpacked extension, pilih folder build. Kira-kira seperti itu jadinya 😀

https://github.com/gedelumbung/reactjs-smartfren-balance

“Stay Foolish, Stay Hungry”

Happy Blogging and Keep Coding

Cheerrrss….!!!!

Leave a Reply

Your email address will not be published. Required fields are marked *