1

WebDash 1.0: Website Monitoring Konten Website BPS se-Indonesia

1. Mekanisme Pengumpulan Data Monitoring

Tahun ini, direktorat diseminasi statistik membangun sebuah aplikasi

berbasis web yang berfungsi untuk memonitoring konten website BPS baik pusat,

provinsi, dan kabupaten/kota. Aplikasi ini dikembangkan dengan

memvisualisasikan data hasil monitoring ke dalam sebuah grafik/tabel.

Secara umum, data hasil monitoring dikumpulkan melalui sebuah

agen/controller Yii yang dipasang di tiap domain website yang secara berkala

melaporkan summary hasil monitoring ke dalam sebuah database terpusat,

sehingga koleksi hasil monitoring website BPS se-Indonesia terkumpul dalam

sebuah database. Proses pengkoleksian data hasil monitoring merupakan

komunikasi machine-to-machine, yaitu antara server website dengan server

mediator (penghubung/pusat node) melalui komunikasi webservice. Pertukaran

data monitoring website ini menggunakan format pertukaran JSON (JavaScript

Object Notation) yang ringan, mudah dibaca, serta mudah diterjemahkan oleh

berbagai jenis sistem platform. Format ini dibuat berdasarkan bagian dari Bahasa

Pemprograman JavaScript, Standar ECMA-262 Edisi ke-3 - Desember 1999.

Proses pengumpulan data monitoring memiliki mekanisme di mana setiap

subdomain website BPS akan secara rutin dan terjadwal mengirimkan seluruh

data monitoring kontennya ke server mediator ketika website tersebut menerima

sebuah request dari mediator. Hal ini berarti bahwa secara rutin dan terjadwal,

mediator akan mengirimkan request ke seluruh subdomain website BPS dan

menerima data hasil monitoringnya. Proses pengkoleksian data monitoring

selanjutnya disimpan ke dalam sebuah database server beserta log request,

sehingga admin mediator dapat memonitor proses request tersebut apakah

berjalan lancar/error.

Proses pengumpulan data monitoring ke mediator juga nantinya akan

dapat dilakukan oleh admin masing-masing website BPS selain melalui

mekanisme terjadwal yang dilakukan mandiri oleh mediator. Admin website

masing-masing selanjutnya dapat memperbaharui data monitoringnya (ad-hock)

2

dengan melakukan sebuah request update monitoring websitenya melalui website

monitoring.

Gambar 1. Skema Besar Pengumpulan Data Monitoring

Application Programming Interface (API) monitoring website BPS di

desain dengan memanfaatkan mediator sebagai penghubung antara website pusat,

provinsi dan kabupaten/kota (objek yang diamati) dengan sistem dashboard

monitoring website BPS se-Indonesia. Pada komunikasi API tahap pertama ini,

mediator berfungsi sebagai jembatan sekaligus juga sebagai tempat untuk

menyimpan semua variabel monitoring dari seluruh domain website BPS, yang

selanjutnya mediator mengeluarkan sebuah service-service permintaan data

monitoring melalui web API internal BPS (hanya untuk developer internal BPS).

API monitoring internal ini selanjutnya yang akan dikonsumsi oleh sistem

dashboard monitoring website untuk kemudian divisualisasikan (gambar dan

grafik).

internet

Website BPS

Agent

monitoring

Website BPS

Agent

monitoring

Website BPS

Agent

monitoring

…..

Mediator

(1) API Request terjadwal/ad-

hock

(2) API Monitoring

Android monitoring

DDS

Desktop monitoring

DDS

Website monitoring

DDS

Admin website BPS, Pimpinan, dan pegawai BPS (pusat, provinsi, kab/kota)

3

Data yang dikumpulkan oleh agen monitoring meliputi:

A. Menurut kondisi terakhir saat monitoring (total):

- Jumlah total publikasi di website - Jumlah BRS Bahasa Indonesia - Jumlah BRS Bahasa Inggris - Jumlah Berita Kegiatan - Jumlah Link tabel statis - Jumlah Subjek Statistik pada Tabel Statis - Jumlah Link Tabel Dinamis - Jumlah Subjek Statistik pada Link Tabel Dinamis - Tanggal Terakhir update Publikasi - Tanggal Terakhir update BRS Bahasa Indonesia - Tanggal Terakhir update BRS Bahasa Inggris - Tanggal Terakhir update Berita Kegiatan - Tanggal Terakhir update Link Tabel Statis - Tanggal Terakhir update Link Tabel Dinamis - jumlah subjek statistik link tabel statis menurut tahun data (10 tahun

terakhir) - jumlah link tabel statis menurut tahun data (10 tahun terakhir) - Jumlah subjek statistik link tabel dinamis menurut tahun data (10 tahun

terakhir) - Jumlah link tabel dinamis menurut tahun data (10 tahun terakhir) - jumlah subjek statistik yang tersimpan di data tabel dinamis per tahun (10

tahun terakhir) - jumlah variabel yang tersimpan di data tabel dinamis per tahun (10 tahun

terakhir)

B. Menurut tahun-bulan:

- Jumlah grafik dinamis

- Jumlah indikator strategis (website pusat dan provinsi)

- Jumlah indikator strategis kiri (website pusat dan provinsi)

- Jumlah indikator strategis kanan (website pusat dan provinsi)

- Jumlah running text

- Menu subjek statistik yang tampil di website

- Jumlah total publikasi ARC

- Jumlah total publikasi ARC Rilis

- Jumlah total publikasi ARC Belum Rilis

- Jumlah total publikasi ARC Tunda Rilis

- Jumlah total publikasi ARC Batal Rilis

- Jumlah total publikasi non ARC

- Jumlah pop-up

- Jumlah BRS Bahasa Indonesia (bulan)

- Jumlah BRS Bahasa Inggris (bulan)

4

C. Menurut tahun:

- list 20 popular tabel statis beserta hit

- list 20 unpopular tabel statis beserta hit

- list all hit subjek statistik tabel statis

- list 20 popular link tabel dinamis

- list 20 unpopular link tabel dinamis

- list all hit subjek statistik tabel dinamis

- list all hit subjek statistik brs

- list menu tabel subjek statistik yang tampil di website

- list all 20 hit publikasi teratas

- list all 20 hit publikasi terbawah

- list indikator strategis

- list link ke website menurut kategori

- list hit brs 20 teratas menurut tahun

- list hit brs 20 terbawah menurut tahun

- list all hit subjek statistik brs (id & en) menurut tahun

- list tabel publikasi ARC menurut tahun

- list 20 hit publikasi teratas menurut tahun

- list 20 hit publikasi terbawah menurut tahun

Jalur komunikasi API yang kedua adalah komunikasi mediator dengan sistem

dashboard. Pada tahap ini, mediator berfungsi sebagai service provider, yaitu

menyediakan sebuah layanan permintaan data monitoring melalui sebuah web

API dengan return format JSON. Layanan ini dapat dikonsumsi oleh sistem

dashboard yang pengembangan aplikasinya menggunakan pendekatan teknologi

web-based, desktop-based, maupun mobile-based. Karena data monitoring ini

dikemas dalam sebuah web API, maka jalur pertukaran informasi akan bersifat

seamless dan interoperable, dimana pengembangan sistem dashboard tidak akan

terikat pada sebuah teknologi baku untuk memvisualisasikan data hasil

monitoring website BPS se-Indonesia.

5

2. User Manual WebDash: Monitoring Konten Website BPS se-Indonesia

Pada Juli 2017 ini, Direktorat Diseminasi Statistik mengembangkan sebuah

portal monitoring konten website BPS se-Indonesia yang sebelumnya private API

monitoring telah selesai dibuat pada bulan Mei-Juni 2017 beserta server mediator

sebagai server node API. Selain versi web, monitoring juga dikembangkan dalam

versi Android yang hingga Juli 2017 aplikasi versi beta telah dirilis. Ke depan

monitoring berbasis desktop akan dikembangkan untuk memudahkan proses

analisis dan komputasi yang lebih kompleks, yang versi web/android mungkin

memiliki keterbatasan proses/performance.

User manual ini akan membahas portal monitoring konten website versi web,

di mana versi 1.0 ini telah dirilis pada pertangahan Juli 2017. Pada versi 1.0 ini

beberapa API monitoring belum sepenuhnya divisualisasikan meskipun data

monitoring sudah berhasil ditarik dan terkumpul di server mediator. Beberapa

API website usage (log) juga akan ditambahkan pada versi berikutnya, setelah

proses migrasi lingkungan server website BPS saat ini ke versi website 4.0

berhasil dijalankan.

2.1 Login ke WebDash

Gambar 1. Halaman Login

Apabila anda sudah melakukan sign-up dengan akun community BPS, maka anda

dapat langsung login ke sistem dengan email dan password community BPS.

6

Namun untuk pengguna pertama kali, klik tombol Create Account untuk

mendaftarkan akun community BPS ke sistem ini. Pada gambar 2 terlihat halaman

sign-up, masukkan email community dan password, kemudian klik tombol Sign

Up. Apabila sukses, selanjutnya anda dapat login ke sistem monitoring.

Gambar 2. Jendela Sign Up

2.2 Halaman Beranda

Gambar 3. Beranda

Setelah anda berhasil login, selanjutnya tampilan beranda akan tampil, di halaman

ini terdapat beberapa visualisasi monitoring, yaitu pada bagian atas akan tampak

jumlah total konten utama website (pada gambar login community terdeteksi

7

sebagai pegawai BPS RI, maka tampilan beranda menampilkan monitoring website

BPS RI, hal ini berbeda-beda sesuai satker BPS masing-masing) yang terdiri

jumlah total publikasi hingga jumlah total berita kegiatan (gambar 3). Selanjutnya

terdapat beberapa pie chart dan radar chart persentase konten utama dan jumlah

subjek statistik (gambar 3).

Secara umum, beranda menampilkan jendela visualisasi yang terdiri atas:

perbandingan statistik konten website BPS (gambar 4). Jika pengguna login

sebagai BPS pusat atau BPS provinsi, sumbu x visualisasi akan menampilkan

satker BPS provinsi se-Indonesia, namun jika pengguna login sebagai BPS

kab/kota, sumbu x visualisasi akan menampilkan seluruh BPS kab/kota di satu

provinsi tersebut. Hal ini berlaku juga untuk semua visualisasi yang sifatnya

perbandingan nilai antar satker.

Gambar 4. Perbandingan konten utama website BPS

Selain itu, halaman beranda menampilkan perbandingan jumlah subjek statistik

yang tampil pada menu utama (sebelah kiri pada frontend website), jumlah subjek

statistik pada tabel statis, jumlah subjek statistik pada link tabel dinamis (gambar

5). Visualisasi ini menampilkan bar chart yang saling beriringan antar kategori

Menu Subjek Tampil, Subjek Link Tabel Statis, Link Tabel Dinamis. Nilai

maksimum dan minimum jumlah subjek juga ditampilkan di sini dalam sebuah

garis yang sejajar dengan sumbu Y.

8

Gambar 5. Perbandingan Jumlah Subjek Tabel Statistik

Visualisasi selanjutnya adalah perbandingan konten pendukung website BPS yang

terdiri dari jumlah indikator strategis (untuk website BPS pusat dan provinsi),

jumlah grafik dinamis yang muncul/tampil di beranda, dan jumlah informasi

running text (gambar 6). Visualisasi ditampilkan dalam bentuk staked-bar dan line

bar.

Gambar 6. Perbandingan Konten Pendukung Website

Masih pada beranda, visualisasi berikutnya menampilkan jumlah publikasi dan

BRS pada tahun berjalan. Khusus BRS, menampilkan jumlah BRS baik berbahasa

Indonesia maupun inggris pada bulan berjalan. Visualisasi jumlah publikasi total

9

yang rilis pada tahun berjalan dibedakan menjadi informasi publikasi ARC dan non

ARC, serta jumlah total publikasi ARC yang diharapkan rilis (target). Lihat gambar

7 untuk lebih jelasnya.

Gambar 7. Perbandingan Publikasi dan BRS Tahun Berjalan

Visualisasi publikasi dimapilkan kembali dalam bentuk gauge, di mana dipecah ke

dalam 3 gauge, yaitu publikasi ARC rilis tahun berjalan (nilai maksimum gauge

adalah target total ARC publikasi), publikasi ARC yang belum rilis, dan publikasi

non-ARC yang sudah rilis per tanggal pengambilan data monitoring. Tiap

visualisasi pada bagian bawah menampilkan tanggal monitoring (gambar 8).

Gambar 8. Visualisasi Publikasi dalam bentuk Gauge

10

Gambar 9. BRS rilis bulan berjalan

Pada gambar 9 ditampilkan bar chart dan area chart yang menampilkan jumlah

BRS yang sudah rilis bulan ini dalam 1 tahun (di tahun berjalan). Pada gambar 10,

monitoring berkonsentrasi pada tabel dinamis, yaitu melihat jumlah variabel

(indikator) dan jumlah subjek yang sudah diinput pada tabel dinamis website.

Monitoring melihat jumlah variabel dan jumlah subjek di pecah menurut tahun

data (sumbu x).

Gambar 10. Variabel dan Subjek Tabel Dinamis menurut Tahun Data

Pada halaman beranda juga menampilkan bebrapa tabel hit view pada beberapa

konten website BPS, diantaranya 20 hit tertinggi dan terendah link tabel statis

11

(gambar 11 dan gambar 12), 20 hit tertinggi dan terendah Link Tabel Dinamis

(gambar 13 dan gambar 14), 20 hit tertinggi dan terendah BRS tahun berjalan

(gambar 15 dan gambar 16), 20 hit tertinggi dan terendah publikasi tahun

berjalan (gambar 17 dan gambar 18), 20 hit tertinggi dan terendah publikasi

(Total) (gambar 19 dan gambar 20).

Gambar 11. 20 Hit Tertinggi Link Tabel Statis

Gambar 12. 20 Hit Terendah Link Tabel Statis

12

Gambar 13. 20 Hit Tertinggi Link Tabel Dinamis

Gambar 14. 20 Hit Terendah Link Tabel Dinamis

13

Gambar 15. 20 Hit Tertinggi BRS Tahun Berjalan

Gambar 16. 20 Hit Terendah BRS Tahun Berjalan

14

Gambar 17. 20 Hit Tertinggi Publikasi Tahun Berjalan

Gambar 18. 20 Hit Terendah Publikasi Tahun Berjalan

15

Gambar 19. 20 Hit Tertinggi Publikasi (Total)

Gambar 20. 20 Hit Terendah Publikasi (Total)

2.3 Fitur Pada Jendela Visualisasi

Menu tampilan wesbite monitoring juga dapat di minimize dengan mengklik

tombol , sehingga space untuk tampilan visualisasi lebih luas (gambar 21).

Website monitoring ini juga mendukung tampilan responsive mengikuti ukuran

layar browser, sehingga ketika pengguna mengakses website ini pada desktop,

16

tabelt, maupun smartphone, tampilan akan secara otomatis menyesuaikan

(gambar 22).

Gambar 21. Tampilan Menu utama di Minimize

Gambar 22. Fitur Responsive

Secara umum, setiap jendela visualisasi memiliki tombol fungsi baik di bagian

bawah, maupun di bagian kanan atas. Pada bagian kanan atas setiap jendela

visualisasi terdapat tombol zoom . Tombol ini berfungsi untuk lebih

memperjelas visualisasi menjadi satu jendela utuh di browser pengguna (gambar

23).

17

Gambar 23. Fitur Zoom Visualisasi

Selain itu, dengan mendekatkan kursor pada setiap objek visualisasi (bar, line,

legenda, pie, radar, gauge, dll) akan muncul sebuah tooltip yang menjelaskan baik

data dan nama variabel objek yang diamati. Pada gambar 24 terdapat contoh

ketika kita mendekatkan kursor pada slah satu staked-bar yang paling tinggi,

terdapat informasi tooltip mengenai nama satkernya (sumbu x), beserta nilai

staked-nya.

Gambar 24. Vitur Tooltip Information pada Visualisasi

Manipulasi legenda (tampilkan dan sembunyikan) pada jendela visualisasi juga

dapat dilakukan dengan mengklik item pada legenda tersebut. Pada contoh di

18

bawah ini (gambar 25) terdapat beberapa legenda yang tampil bersamaan yang

mungkin pengguna tidak dapat melihat insight secara jelas. Dengan men-disable

beberapa legenda dan hanya mengaktifkan legenda jumlah link tabel statis dan

dinamis, pengguna dapat lebih berkonsentrasi mengenai perbandingan statistik

jumlah link tabel.

Gambar 25. Fitur Show-Hide Legenda Visualisasi

Gambar 26. Fitur View Data CSV pada Visualisasi

Setiap jendela visualisasi memiliki fitur view data dengan format CSV yang dapat

dilihat dengan menekan tombol di bagian kanan bawah visualisasi. Format data

19

pada visualisasi akan tampil, dan pengguna dapat melakukan copy data tersebut

dengan men-select all pada view CSV (gambar 26). Pada kanan bawah visualisasi

juga terdapat tombol yang apabila di klik, pengguna dapat langsung

mengunduh visualisasi tersebut ke dalam file image berformat PNG (gambar 27).

Gambar 27. Fitur Unduh PNG pada Visualisasi

Gambar 28. Fitur Sort By pada Tabel Visualisasi

Pada Jendela Visualisasi tabel, terdapat fitur sort by kategori pada kolom baik

ascending maupun descending, pada gambar 28, pengguna dapat mengklik di

20

kolom subjek statistik pada tabel 20 hit tertinggi tabel statis untuk melihat nama

link tabel status menurut subjek statistik (descending order). Pada bagian atas kiri

tabel terdapat beberapa tombol fitur export data tabel, yaitu copy to clipboard,

download data format csv, download data format excel, dan print tabel ke printer.

dengan Adobe Flash plug-in tanpa Adobe Flash plug-in

Tombol export ke excel sangat bergantung pada plugin Adobe Flash pada browser

pengguna, jika plugin Adobe Fash tidak diaktifkan/belum terinstal pada browser,

maka tombol Excel akan tidak tampil. Tombol CSV akan mengaktifkan fitur unduh

data tabel ke file berformat CSV (gambar 29), tombol excel akan memberikan

pengguna file format excel (gambar 30, gambar 31), dan tombol print akan

mencetak tabel ke printer yang terhubung ke komputer pengguna (gambar 32).

Gambar 29. File Tabel Data format CSV

21

Gambar 30. Export ke Excel

Gambar 31. File Excel hasil Download

22

Gambar 32. Fitur Print Tabel Data

Gambar 33. Fitur Search Kata Kunci

Fitur lain pada visualisasi tabel adalah pencarian kata kunci pada textbox search di

kanan atas. Pada contoh di gambar 33, pengguna ingin melihat judul tabel link

tabel statis yang merupakan 20 hit view tertinggi, untuk dilihat judul tabel yang

mengandung kata miskin, maka tabel akan mem-filter seluruh kolom yang miliki

kata ‘miskin’ pada tiap sel tabel.

23

2.4 Halaman Personal

Gambar 34. Halaman Personal

Pada halaman ini, semua visualisasi ditampilkan khusus untuk seluruh visualisasi

yang sifatnya mandiri (menilai website satker sendiri) tanpa ada visualisasi

perbandingan dengan website satker lain. Kedepan, halaman ini akan

memungkinkan pengguna untuk membuat layout visualisasinya sendiri (meramu)

visualisasi mana yang ingin menjadi insight utama pada monitoring website

satkernya.

2.5 Halaman Compare

Gambar 35. Tabel Tanggal Update Terakhir

24

Pada halaman compare terdapat beberapa visualisasi, diantaranya: tabel tanggal

terakhir update konten (gambar 35) yang menampilkan tanggal terakhir update

menurut konten utama dan menurut satker. Format tanggal yang ditampilkan

adalah 4 digit tahun-2 digit bulan-2 digit hari.

Gambar 36. Fitur Filter Wilayah pada Halaman Compare

Gambar 37. Fitur Sort by pada Halaman Compare

Pada sebelah kanan atas, terdapat tombol filter wilayah yang apabila diklik

akan memunculkan dropdown wilayah menurut provinsi, untuk memfilter baris

tabel (gambar 36). Tombol ini juga muncul pada jendela visualisasi lainnya

(gambar 38) yang apabila wilayah dipilih, akan menampilkan visualisasi di

25

wilayah tersebut. Misal: memilih Aceh akan memvisualisasikan perbandingan

monitoring untuk seluruh kab/kota di provinsi Aceh.

Dengan menggunakan fitur sort order kolom, pengguna juga dapat melihat tanggal

update paling baru/lama menurut judul kolom. Pada contoh di gambar 37, dengan

melakukan sort descending pada kolom publikasi, terlihat satker mana yang

publikasinya terakhir diupdate/rilis.

Gambar 38. Fitur Pilih Wilayah pada Halaman Compare

Gambar 39. Data Monitoring di Seluruh Satker BPS (Pusat, Provinsi, Kab/Kota)

Pada halaman Compare, setiap jendela Visualisasi, khususnya berbentuk

tabel/tabulasi data, pada jendela sebelah kanan tatas terdapat ikon globe yang

apabila diklik akan mengarahkan pengguna ke halaman tabulasi seluruh satker

26

pada data monitoring terkait (gambar 39). Seluruh data monitoring terkait di

seluruh satker BPS akan ditampilkan dalam satu tabel.

2.6 Halaman Setting

Gambar 40. Halaman Setting – Add New user

Pada halaman setting, pengguna dapat menambahkan user yang mungkin tidak

memiliki akun community, atau ingin menambahkan akun kantor dengan email

community kantor (karena login community hanya tersedia untuk email pribadi

pegawai). Fitur ini untuk memfasilitasi login selain dengan email pribadi

community. Yang berhak untuk menambahkan user adalah pengguna yang sudah

sukses login dengan akun community pribadi.

Gambar 41. Halaman Setting – User List

27

Pada halaman setting juga terdapat tabel user list, yaitu daftar user yang sudah

terdaftar dalam website monitoring dalam satu satkernya (gambar 41).

2.7 Halaman Message

Gambar 42. Fitur Message

Pada website monitoring terdapat juga fitur message yang merupakan jalur

komunikasi tak langsung antar pengguna dalam satu satker, antar satker kab/kota

dan provinsi, maupun antar provinsi dan pusat. Fitur ini dibuat untuk

memfasilitasi komunikasi perihal hasil monitoring antar pegawai/pengumuman

fitur dan informasi lainnya.