Menggunakan Chrome DevTools Untuk Kebutuhan Crawling dengan Network Debugging

Chrome DevTools adalah satu set alat untuk menulis dan men-debug web yang menjadi bawaan Google Chrome.

Dalam kesempatan ini saya akan membahas terkait tentang menggunakan Chrome DevTool untuk Mendapatkan XHR atau XmlHttpRequest yang merupakan WebApi yang ada di browser modern, AJAX merupakan sebuah metode yang melakukan transaksi rahasia dibelakang anda untuk membuat anda secara tidak sadar menerima respond dari server.

Dalam contoh kali ini saya akan memberikan contoh penggunaan Network Debugging untuk Keperluan Crawling XHR dalam bentuk json.

Disini saya berniat untuk melakukan crawling untuk mendapatkan data Sosial,Kependudukan,Ekonomi,Perdagangan,Pertanian dan Pertambangan.

Tujuan :

Tujuan dari yang akan kita lakukan adalah melakukan Crawling Table Data secara Otomatis Untuk Semua Kategori dari data BPS Tematik Interaktif

Tabel Diatas merupakan Data yang Akan Kita Ambil Nantinya

Data diatas merupakan salah satu sample data yang akan kita ambil,
dimana kita memerlukan semua data dari berbagai kategori yang perlu kita dapatkan

Tahap Persiapan :

1. Browser Chrome
2. Python3
3. Jupyter Notebook
4. Library Pandas

Website :

https://sig.bps.go.id/webgis/tematik-interaktif

1.Membuka Chrome Developer Mode

“Untuk Membuka Developer Mode Kita dapat menggunakan
Shortcut Ctrl + Shift + I Pada Windows
atau
Cmd+Opt+I Pada Mac
atau
dengan Klik kanan pada browser ,lalu Klik Inspect”

Setelah itu kita menuju ke tab Network Untuk Melihat Lalulintas Jaringan yang terjadi

2.Mendapatkan XHR Request

Setelah Kita Membukan Tab Network pada Developer Mode,
selanjutna kita perlu melakukan request baru dengan memilih data yang ingin kita ambil,disini saya memilih data inflasi berdasarkan publik perbulan

Setelah kita melakukan request,
maka kita akan mendapatkan informasi terkait request yang terjadi,kemana request ditujukan,dan respon yang diberikan

Disini kita dapat melihat detail request dan respon terhadap request tersebut

Dari header tersebut kita dapat mendapatkan informasi bahwa request diberikan dengan mengakses ker URL :

https://sig.bps.go.id/rest/getdataseries?getdatadetail=531

dan mendapatkan status OK
kita juga dapat melihat Preview data yang kita terima dengan menuju ke tab Preview

Kita juga dapat melakukan Akses Ke WEB API tersebut

Dari URL
https://sig.bps.go.id/rest/getdatadetail?id=531

Kita Dapat menarik kesimpulan bahwa id=531
adalah ID untuk judul data yang diambil

Langkah Berikutnya adalah melakukan Request tabel data

dengan menekan button hijau

Lalu kita akan menerima request baru,berupa request untuk mendapatkan data dari tabel
Berikut adalah URL Request Tersebut

https://sig.bps.go.id/rest/getdataseries?data_id=531&series_id=(3267%2C3269%2C3270%2C3271%2C3272%2C3273%2C3274%2C3275%2C3276%2C3277%2C3278%2C3279%2C5846%2C5848%2C5849%2C5850%2C5851%2C5852%2C5853%2C5854%2C5855%2C5856%2C5104%2C5105%2C5106%2C5107%2C5108%2C5109%2C5110%2C5112%2C5113%2C5114%2C5115%2C5116%2C5203%2C5204%2C5205%2C5206%2C5207%2C5208%2C5209%2C5210%2C5211%2C5276%2C5277%2C10161%2C10149%2C10150%2C10151%2C10152%2C10153%2C10154%2C10155%2C10156%2C10157%2C10158%2C10159%2C10160)

Lalu Output jika kita membuka URL Tersebut adalah JSON untuk tabel tersebut

Dari kedua Web API Tersebut Kita dapat mengambil Kesimpulan bahwa :

1.Untuk WebApi Pertama kita memerlukan 1 parameter yaitu ID untuk Mendapatkan informasi data series untuk digunakan pada WebApi kedua

2.Untuk WebApi kedua kita memerlukan 2 parameter yaitu Parameter data_id yang merupakan sama dengan parameter WebApi pertama dan juga series_id yang bisa didapatkan dengan informasi dari WebApi pertama

Setelah kita mendapatkan kesimpulan atau alur logika dari kedua WebApi Tersebut,Kita dapat melakukan Crawling data ,disini saya menggunakan Python3.

3.Crawling WebApi

Berikut Adalah SourceCode untuk Melakukan Crawling :

zahrul100/Crawl_BPS_WebAPI

Refrensi :

Chrome DevTools | Google Developers