• Programming,  Software

    A little new project

    Seperti program-program saya yang lain, saya biasanya remake program yang pernah saya buat sebelumnya dengan versi yang lebih baik lagi. Kali ini yang saya sedang remake adalah PaKe atawa Password Keeper. Versi sebelumnya dibuat dengan php tanpa ada javascript 1 baris pun.

    Bentuknya lebih mirip dengan encrypted note taking app dengan konsep struktur folder dan file, jadi bikin folder nanti foldernya bisa diisi file atau folder lain, jadi  infinite folder depth, maksudnya bisa bikin folder di dalam folder di dalam folder, dst.

    Kemarin waktu nyari semut dapet gajah, saya dapet Joplin yang editornya enak banget. Akhirnya saya mau bikin Note-Taking App yang benar-benar fleksibel dan agak unik. Featurnya kurang-lebih begini:

    1. Seperti Joplin, note terdiri dari struktur Notebook -> Notes (Caption) -> Content.
    2. Data disimpan dalam variabel JSON.
    3. Data disimpan di local storage (jadi bisa offline) unencrypted.
    4. Data bisa di-eksport ke file text dengan keadaan terenkripsi.
    5. Bisa import data dari file text.
    6. Bisa upload ke cloud (next release).

    Tiga poin pertama sudah selesai. Poin 4 dan 5 harusnya bisa selesai cepat, dan selanjutnya tinggal poin ke-6. Untuk project ini saya pake beberapa 3rd party: Pen, Alertify, Stanford Javascript Crypto Library. Untuk project ini saya coba menghindari penggunaan JQuery.

    Dan seperti project lainnya, selalu diselingi saya nyari-nyari program penunjang. Dan saya akhirnya dapet teks editor reliable yang cukup kecil dan ringan: CudaText. Btw, nama projectnya NoteJS.

  • Database,  Programming

    Mengolah data APBD DKI

    Berawal kekecewaan terhadap data.go.id, saya nyari-nyari data tentang DKI, khususnya tentang APBD, ketemu  di Portal Data Pemda DKI. Dan langsung saya download: 21,5 MB CSV tanpa kompresi.

    Langkah pertama: buka dengan text viewer. LTF Viewer adalah program andalan saya untuk melihat data text besar, jangankan yang puluhan MB, data text ratusan MB aja dengan cepat bisa dibuka. Setelah dibuka terlihat bahwa data csv terdiri dari 55.467 baris (termasuk header di baris pertama).

    LTF Viewer. Open big text file in less than one second.

    Langkah kedua: coba lihat dengan pivot viewer. Dengan berbekal mesin pencari google, saya dapat program pivot viewer bernama Tad. Gampang banget makenya, langsung buka file csv, abis itu tinggal klik-klik aja nentuin urutan field pivotnya.

    Pivot view dengan Tad.

    Langkah ketiga: convert menjadi SQLite. Saya menggunakan program sqlite3 di Ubuntu yang jalan di Windows 10 (WSL: Windows Subsystem for Linux). Cepet banget konversinya.

    Ubuntu @ Windows Subsystem for Linux

    Data format csv bisa dibilang format universal untuk sharing data, selain csv ada json dan xml, tapi untuk kemudahan dan kepraktisan, gak ada yang ngalahin csv. Format csv memang mudah untuk dishare (portable) tetapi susah untuk diolah, jadi lebih baik untuk diconvert ke SQLite. 

    Langkah keempat: normalisasi. Memang data hasil convert dari csv sudah bisa langsung diolah, tapi saya mau data terstruktur biar gampang buat user interfacenya. Tabel hasil konversi otomatis nanti berubah, tapi kita bisa membuat view untuk kebutuhan pivot table. Untuk mengolah database SQLite saya pakai: SQLiteStudio (Free and OpenSource).

    Program favorit untuk mengolah data SQLite.

    Mudahnya menggunakan SQLite, karena struktur table di SQLite tidak mengenal tipe data, jadi pada saat import kita tidak perlu buat tabel dengan struktur data yang pas. Kalau pake MySQL atau yang lainnya, tiap field harus pas tipe datanya, bahkan untuk varchar harus didefinisikan berapa panjang maksimal datanya. Kalau panjang maksimalnya kurang dari data yang mau diinput akan menimbulkan error dan data gagal diinsert.

    This is a long journey, brace yourself and click “Read More”

    — Blog writer —
  • Programming

    Tentang sedjat1.dx.am

    Awalnya, saya cuma punya 1 blog di sedjat1.zz.mu, pada suatu saat saya gak bisa akses web itu sama sekali. Sesudah beberapa jam saya gak bisa akses akhirnya saya putuskan untuk bikin blog lagi di hosting gratis yang lain. Dengan berbekal backup database yang ada di notebook, akhirnya saya bisa menduplikasi sedjat1.zz.mu ke blog.sedjat1.dx.am.

    Di tempat baru saya sengaja bikin sub domain sendiri untuk blog karena niatnya, saya bikin blog yang aneh bin ajaib, beda dari yang lain. Blog yang bentuknya seperti terminal console, yang kalo mau liat isinya, harus ngetik perintah dulu, biar kaya jaman DOS.

    Penampilan sedjat1.dx.am, bar putih yang paling bawah itu ngedip kaya kursor terminal.

    Rencananya kalo ngasih perintah dir baru muncul list entri blognya, terus ada perintah open untuk baca entry blog. Dan rencananya juga, engine blog nyimpen berkas blognya bukan di database. Karena ini buatan jaman dulu banget, jadi scriptnya juga masih cupu (klik READ MORE untuk source codenya).

    Tapi ternyata, sesudah blog baru selesai diinstall, ternyata hosting lama saya masih bisa di akses, akhirnya jadi punya 2 blog. Dan yang ini jadi blog ketiga. Uhuy.

  • Programming

    Data Harvest: POM.GO.ID

    Awalnya sederhana aja, abis baca “Kolom” di detik.com langsung inget, di Indonesia ada BPOM (Badan Pengawas Obat dan Makanan) dan dari websitenya kita bisa tau apakah sebuah produk obat dan makanan benar-benar aman untuk dikonsumsi. Entri pertama dari penelusuran Google dengan keyword “bpom” langsung tepat, dan disana ada sub-result menuju web yang saya mau: Cek Produk BPOM.

    Saya langsung cari nama produk berdasarkan kata kunci air kemasan yang ada di meja saya: Pristine. Hasilnya ada 9 data dan semuanya gak ada sangkut pautnya sama air mineral keluaran grup sinarmas. Saya coba ulang dengan nomor registrasinya: MD 265210006138, baru deh nongol datanya. Ternyata “Pristine” itu merk, sedangkan nama produknya sendiri adalah “Air Minum pH Tinggi”.

    Abis baca keterangan sekilas, langsung aja reflek: klik-kanan – View Source. Keliatan deh raw html-nya, ternyata halaman pencarian dibuat dengan table standar, data diload oleh script php (tidak pakai ajax) dan paging sederhana. Semua parameter ada di address bar browser, dan diantara parameter yang ada, si programmer nyisipin session php. Mungkin niatnya supaya datanya gak bisa di lihat tanpa melalui browser, tapi downside-nya orang gak bisa ngasih tautan referensi ke entri tertentu. Oh iya, satu lagi, baris data hasil pencarian bisa di klik untuk menampilkan detail entrinya, dan ini diload dengan ajax.

    Data detail muncul setelah row di-klik.

    Karena liat langsung raw html agak susah, jadi Ctrl+Shift+I untuk ngeluarin DevTools dari browser. Jaman dulu yg begini susah banget, satu2nya tools yang lumayan mumpuni addon dari Firefox yang namanya Firebug, tapi berhubung browser2 modern udah meng-embed fungsi ini jadi Firebug di-mati-in deh.

    Inspeksi raw html tabel hasil pencarian

    Dari inspeksi elemen, bisa dilihat dalam tiap <tr> produk ada custom attribute bernama urldetil yang digunakan untuk me-load data detail dari produk dengan ajax call.

    Request AJAX untuk mengambil data detail.
    Response berupa halaman html yang siap ditampilkan.

    Nah, sebenernya data detail ini yang harusnya di harvest, dan data dari table hasil search dibutuhkan untuk mendapatkan ID dari itemnya. Jadi ini langkah-langkah untuk harvest datanya:

    • Buka https://cekbpom.pom.go.id dan simpan cookie, ambil session_id php.
    • Request ke url untuk search https://cekbpom.pom.go.id/index.php/home/produk/ {PHP_SESSION_ID}/all/row/{ROW_PER_PAGE}/page/{PAGE_NUMBER}/order/4/DESC/search/{KATEGORI}/{KATA-KUNCI-PENCARIAN}
    • Parse response html-nya, ambil tiap urldetil dan request lagi ke
      https://cekbpom.pom.go.id/index.php/home/detil/{PHP_SESSION_ID}/produk/{URLDETIL}
    • Parse lagi response-nya untuk mendapatkan data detail.

    Cara paling gampang dan cepat yang terpikir oleh saya adalah dengan menggunakan PHP. Script yang saya gunakan bukan untuk dibuka oleh browser, tapi script php dipanggil lewat terminal php -f namafile.php [parameter]. Setelah beberapa kali mencoba, saya dapat draft kasarnya, beberapa parameter masih di hardcode dan hasil berupa json disimpan ke dalam satu file (klik READ MORE untuk source-code php-nya).