Dashboard Application

A. Aplikasi Dashboard Berbasis Web

Dalam kehidupan sehari-hari, kata dashboard sering terdengar secara khusus jika berbicara mengenai kendaraan seperti mobil. Pada sebuah mobil, dashboard berfungsi untuk mengetahui kondisi kedaraan terkini. Seperti berapa kecepatannya saat melaju, jarak yang sudah ditempuh, seberapa banyak bahan bakar yang masih tersedia, dan lain-lainnya. Demikian pun suatu aplikasi, seperti aplikasi berbasis web yang pada umumnya mempunyai dashboard. Menurut Stephen Few dashboard adalah “a visual display of the most important information needed to achieve one or more objectives, consolidated and arranged on a single screen so the information can be monitored at a glance”. Artinya, tampilan yang dibutuhkan dari informasi yang sangat penting untuk mencapai tujuan, diatur sedemikian rupa sehingga informasi bisa dilihat pada satu layar dan satu kali lihat saja. 

Berdasarkan jenisnya, dashboard dibagi menjadi 3 jenis yaitu strategis, analitis, dan operasional.

1. Dashboard Strategis

Menampilkan ringkasan dan informasi strategis perusahaan yang biasanya digunakan oleh level manajemen atau direksi. Data total penjualan, total laba, dan marjin keuntungan merupakan beberapa contoh yang ditampilkan pada dashboard strategis.

2. Dashboard Analitis

Menampilkan analisis data sehingga didapatkan pola, trend, serta insight dari suatu studi kasus atau permasalahan. Misalnya, pengguna ingin mengetahui informasi 5 produk dengan penjualan tertinggi atau persentase pelanggan churn pada bulan berjalan.

3. Dashboard Operasional

Menampilkan data terkini (bahkan diperbaharui secara real time) dari suatu kegiatan operasional bisnis. Jumlah pengunjung website dan beban kerja server merupakan beberapa contoh informasi yang terdapat pada dashboard operasional.


B. Dashboard sebagai Pendukung Untuk Pengambil Keputusan

Jika pada kendaraan mobil dashboard digunakan untuk melihat kondisi kendaraan, maka pada sebuah aplikasi dashboard memberikan gambaran besar tentang kondisi perusahaan. Mengapa demikian? Sebelum menjawab pertanyaan tersebut, perhatikan potongan dashboard berikut ini:
Potongan dashboard tersebut menampilkan informasi terkini seperti Visitor Report, Inventory, Mentions, Download, Direct Message, Direct Chat, Latest Member, dan Browser Usege. Dengan demikian, cukup dengan mengakses halaman dashboard kita sudah dapat mengetahui kondisi perusahaan saat ini. Lalu bagaimana dengan pengambilan keputusan? Sebagai contoh, dari halaman dashboard tersebut terdapat Visitor Report (laporan pengunjung). Dengan mengetahui laporan pengunjung seperti asal negara maka dapat memudahkan manajemen untuk mengambil langkah yang diperlukan untuk meningkatkan pelayanan. Misalnya, dari laporan tersebut menunjukkan bahwa pengunjung didominasi oleh Jepang sehingga perlu untuk menambah opsi bahasa Jepang pada halaman website. Contoh lainnya adalah Browser Usage (penggunaan peramban). Dengan informasi tersebut, dapat membantu pengembang aplikasi untuk menentukan prioritas browser yang diperlukan.


C. Tools Framework untuk Dashboard

Dashboard merupakan halaman yang sangat penting karena menampilkan kesimpulan terkait kondisi perusahaan saat ini. Oleh karen itu, banyak pegiat maupun organisasi yang merancang framework untuk membuat dashboard yang cukup menarik. Hingga saat ini, cukup banyak framework yang digunakan untuk membuat dashboard baik yang bersifat gratis maupun yang berbayar. Dengan banyaknya framework tersebut, tentu saja akan memberikan banyak pilihan bagi para software developer untuk memilih framework yang akan digunakan. Berikut ini dua framework bersifat opensource (gratis) yang cukup populer dan banyak digunakan untuk membuat dashboard.

1. Admin LTE

Admin LTE adalah salah satu template yang sering digunakan oleh web developer sebagai template backend (administrator) pada proyek yang dikerjakan. Bahkan dapat dikatakan, template ini adalah template dashboard nomor 1. Template adminLTE dibuat menggunakan framework CSS Boostrap oleh provider Colorlib. Dikutip dari websitenya, “Best open source admin dashboard & control panel theme. Built on top of Bootstrap, AdminLTE provides a range of responsive, reusable, and commonly used components”.

Berikut beberapa kelebihan yang dimiliki AdminLTE:

 Verified HTML5 and CSS3 syntax by W3C services
 Mobile first design. Fits many resolutions, from large desktops to small mobile devices.
 Featuring Font Awesome, Ion Icons, and Glyphicons.
 Choose a skin that matches your branding or edit the LESS variables to create your own.
 Support for printing any page. The invoice page makes a perfect example.
 Although AdminLTE is full of features, it was designed to be fast and lightweight.
 Support for most major browsers including Safari, IE9+, Chrome, FF, and Opera.
 Over 18 plugins and an aditional 3 custom made plugins just for AdminLTE.
 World’s largest community for free admin dashboard & control panel theme.

Adapun fitur yang ditawarkan oleh template ini adalah sebagai berikut:

 Cross-browser Compatibility
 Important Charts Equipped
 4 Distinct Layout Option
 Version 1 & 2 Available
 Made with Bootstrap 3
 Cool jQuery Effect
 Google Fonts
 Stylish UI
 Smooth CSS3 Animation
 Easy to Use & Customize
 Built with HTML5 & CSS3
 Available Documentation
 Multi-level Dropdown Menu

2. SB Admin 2

SB Admin 2 merupakan salah template bootstrap yang didesain untuk membuat halaman dashboard. Template ini dikembangkan oleh team Start Bootstrap. Dikutip dari websitenya, “SB Admin 2 is a free, open source, Bootstrap 4 based admin theme perfect for quickly creating dashboards and web applications. It's modern design style with subtle shadows and a card-based layout could be described as flat material, and is inspired by the principles of material design along with a simple, attractive color system”.

Adapun fitur yang disiapkan oleh pengembang framework ini adalah sebagai berikut:

 A modern, material design inspired layout
 Custom card and button components
 Custom utility classes for extended functionality
 Layout built using flexbox for seamless responsive behavior
 Intuitive collapsable sidebar and top bar navigation structure
 Built using SASS for customization of Bootstrap default SASS variables
 Includes dependency management using npm
 Advanced workflow environment based on npm and Gulp with live reloading via browserSync
 Chart.js interactive responsive charts
 dataTables sortable, searchable tables
 Minimal use of jQuery and JavaScript to make it easier to rewrite using JS frameworks
 Latest Font Awesome 5 (free version)


Sumber:


Comments

Post a Comment