Praktikum Dashboard Interaktif

Dokumen ini membahas cara membangun dashboard interaktif di R menggunakan Shiny dan paket shinydashboard — tampilan yang lebih terstruktur dibanding aplikasi Shiny biasa.

Catatan: Kode di halaman ini dijalankan di RStudio. Salin blok kode ke file app.R, lalu klik Run App.

Yang akan dipelajari:

• Perbedaan Shiny biasa dan shinydashboard
• Struktur layout dashboard (header, sidebar, body)
• Menampilkan beberapa visualisasi sekaligus dalam satu dashboard
• Mendistribusikan aplikasi ke shinyapps.io

---

1. Shinydashboard vs Shiny Biasa

shinydashboard adalah ekstensi Shiny yang menyediakan template dashboard siap pakai — lengkap dengan header, sidebar menu, dan kotak konten (box).

Instalasi

Perbandingan Struktur

	Shiny Biasa	shinydashboard
Layout utama	fluidPage()	dashboardPage()
Navigasi	tabsetPanel()	dashboardSidebar() + menuItem()
Konten	Bebas	Dalam box()
Tampilan	Minimalis	Dashboard profesional

💡 Petunjuk — Kapan perlu pakai shinydashboard?

Gunakan shinydashboard ketika:
(1) Ada banyak visualisasi yang perlu diatur dalam satu halaman
(2) Dibutuhkan navigasi antar halaman/tab
(3) Audiens mengharapkan tampilan seperti business intelligence dashboard

Cukup gunakan shiny biasa untuk aplikasi dengan satu atau dua visualisasi sederhana.

Pertanyaan: Jika Anda hanya perlu menampilkan satu histogram interaktif, apakah perlu shinydashboard?

---

2. Struktur Dasar Dashboard

💡 Petunjuk — Apa fungsi status dan solidHeader pada box()?

• status: warna garis atas box — "primary" (biru), "warning" (kuning), "danger" (merah), "success" (hijau)
  
• solidHeader = TRUE: mengisi header box dengan warna penuh (lebih mencolok)
  
• width: lebar dalam grid 12 kolom Bootstrap — width = 6 artinya setengah layar

Pertanyaan: Apa yang terjadi jika dua box dalam satu fluidRow() memiliki width = 8 dan width = 6? (Total > 12)

---

3. Dashboard dengan Beberapa Tab dan Visualisasi

💡 Petunjuk — Cara membaca tab dari sidebar yang dipilih

tabName di menuItem() harus persis sama dengan tabName di tabItem(). Shiny menggunakan string ini sebagai penghubung antara klik menu dan konten yang ditampilkan. Kesalahan ejaan akan membuat tab tidak muncul tanpa pesan error.

Pertanyaan: Jika dua menuItem() memiliki tabName yang sama, apa yang terjadi?

---

4. Mendistribusikan Dashboard ke Shinyapps.io

Setelah dashboard selesai, Anda bisa membagikannya melalui internet menggunakan shinyapps.io (gratis untuk penggunaan terbatas).

Langkah-langkah

💡 Petunjuk — Di mana mendapatkan token shinyapps.io?

1. Buka shinyapps.io dan buat akun gratis
   
2. Login → klik nama pengguna di pojok kanan atas → Tokens
   
3. Klik Show untuk melihat token dan secret
   
4. Salin dan tempel ke rsconnect::setAccountInfo()

Alternatif: di RStudio, klik Publish (ikon biru) di pojok kanan atas editor saat file app.R terbuka.

Pertanyaan: Apa batasan akun gratis shinyapps.io yang perlu diperhatikan sebelum deploy?

---

5. Latihan

Latihan 1 — Mudah: Tambahkan valueBox di Beranda

valueBox menampilkan angka ringkasan (seperti total, rata-rata) di kotak kecil yang mencolok — umum dalam dashboard bisnis.

Tambahkan tiga valueBox di Tab “Beranda” pada dashboard Bagian 2 yang menampilkan mean, min, dan max dari variabel yang dipilih.

✅ Jawaban Latihan 1

# UI:
icon("calculator"), color = "blue"
color = "red"

# Server:
output$min_val <- renderText({ round(min(faithful$eruptions), 2) })
output$max_val <- renderText({ round(max(faithful$eruptions), 2) })

Warna yang tersedia: "blue", "black", "purple", "green", "yellow", "red", "orange", "navy", "teal", "olive", "lime", "fuchsia", "maroon", "aqua".

---

Latihan 2 — Mudah: Tambahkan Tab Baru “Boxplot”

Tambahkan tab ketiga pada dashboard Bagian 3 yang menampilkan boxplot dari variabel mtcars yang dipilih pengguna.

✅ Jawaban Latihan 2

# tabName yang konsisten antara menuItem dan tabItem:
tabName = "boxplot"

# renderPlot untuk boxplot:
output$boxplot_out <- renderPlot({
  boxplot(
    mtcars[[input$var_box]],
    col  = "steelblue",
    main = paste("Boxplot:", input$var_box),
    ylab = input$var_box
  )
})

---

Latihan 3 — Sedang: Dashboard Lengkap dari Awal

Buat dashboard baru menggunakan dataset iris (bawaan R) dengan spesifikasi:

• Tab 1 “Eksplorasi”: scatter plot sepal length vs sepal width, diwarnai berdasarkan Species
• Tab 2 “Distribusi”: histogram salah satu variabel numerik (bisa dipilih lewat dropdown)
• Tab 3 “Data”: tabel lengkap dataset iris

✅ Jawaban Latihan 3

# Header:
dashboardHeader(title = "Dashboard Iris")

# tabName yang konsisten (contoh):
# menuItem → tabName = "eksplorasi", "distribusi", "data"
# tabItem  → tabName = "eksplorasi", "distribusi", "data"

# choices untuk histogram:
choices = var_iris

# Dataset untuk tabel:
datatable(iris, options = list(pageLength = 10))

Pastikan setiap tabName di menuItem() sama persis dengan tabName di tabItem() yang sesuai.

---

Ringkasan: Komponen Utama shinydashboard

Komponen	Fungsi
dashboardPage()	Pembungkus utama aplikasi
dashboardHeader()	Bar atas dengan judul
dashboardSidebar() + sidebarMenu()	Menu navigasi kiri
menuItem()	Satu item navigasi
dashboardBody() + tabItems()	Area konten utama
tabItem()	Konten satu tab
box()	Kotak konten dengan judul & warna
valueBox()	Kotak angka ringkasan
fluidRow()	Baris dalam grid 12 kolom