Membangun Dashboard Data Interaktif dengan Streamlit: Panduan Lengkap dari Nol

# Buat dan aktifkan virtual environment (opsional tapi disarankan)
python -m venv venv
source venv/bin/activate      # Linux / macOS
# venv\Scripts\activate       # Windows

# Install Streamlit
pip install streamlit

# Cek versi yang terpasang
streamlit --version

# app.py
import streamlit as st

st.title("Halo, Streamlit! 👋")
st.write("Aplikasi web pertamaku, ditulis murni dengan Python.")
st.write("Tanpa HTML, tanpa CSS, tanpa JavaScript.")

streamlit run app.py

import streamlit as st

st.title("Judul Besar")
st.header("Ini Header")
st.subheader("Ini Subheader")

st.markdown("Teks dengan **Markdown** dan *italic*.")
st.write("st.write bisa menampilkan hampir semua tipe data.")
st.text("Teks polos tanpa format.")
st.caption("Keterangan kecil di bawah elemen.")

st.code("print('Halo Dunia')", language="python")

import streamlit as st

nama = st.text_input("Siapa namamu?")
umur = st.slider("Berapa umurmu?", 0, 100, 25)
bahasa = st.selectbox("Bahasa favorit:", ["Python", "JavaScript", "Go", "Rust"])
suka_ngoding = st.checkbox("Saya suka ngoding")
tombol = st.button("Kirim")

if tombol:
    st.write(f"Halo {nama}, kamu {umur} tahun dan suka {bahasa}.")
    if suka_ngoding:
        st.success("Mantap! Terus semangat ngoding 🚀")
    else:
        st.warning("Coba deh mulai dari Python, dijamin seru!")

import streamlit as st
import pandas as pd
import numpy as np

# Data contoh
df = pd.DataFrame(
    np.random.default_rng(42).normal(size=(50, 3)),
    columns=["Penjualan", "Pengunjung", "Konversi"],
)

st.subheader("DataFrame interaktif")
st.dataframe(df)             # bisa di-scroll & diurutkan
st.table(df.head(10))        # tabel statis

st.subheader("Chart instan")
st.line_chart(df)
st.bar_chart(df[["Penjualan"]])
st.area_chart(df)

import streamlit as st
import matplotlib.pyplot as plt

fig, ax = plt.subplots()
ax.plot([1, 2, 3, 4], [10, 20, 25, 40], marker="o")
ax.set_title("Grafik Matplotlib")
ax.set_xlabel("Bulan")
ax.set_ylabel("Penjualan")

st.pyplot(fig)

# dashboard.py
import streamlit as st
import pandas as pd
import numpy as np

# 1) Muat data (dicache agar tidak diproses ulang tiap interaksi)
@st.cache_data
def load_data():
    rng = np.random.default_rng(42)
    n = 1000
    return pd.DataFrame({
        "tanggal": pd.date_range("2024-01-01", periods=n, freq="D"),
        "kategori": rng.choice(["Elektronik", "Pakaian", "Makanan", "Buku"], n),
        "penjualan": rng.integers(50_000, 5_000_000, n),
        "unit": rng.integers(1, 100, n),
    })

df = load_data()

st.title("📊 Dashboard Penjualan")
st.caption("Contoh dashboard interaktif dengan Streamlit")

# 2) Filter di sidebar
st.sidebar.header("Filter")
kategori = st.sidebar.multiselect(
    "Pilih kategori",
    options=df["kategori"].unique(),
    default=list(df["kategori"].unique()),
)
rentang = st.sidebar.slider("Rentang baris", 0, len(df) - 1, (0, len(df) - 1))

# 3) Terapkan filter
filtered = df[df["kategori"].isin(kategori)].iloc[rentang[0]:rentang[1] + 1]

# 4) Kartu KPI
total = filtered["penjualan"].sum()
total_unit = filtered["unit"].sum()
rata = filtered["penjualan"].mean()

c1, c2, c3 = st.columns(3)
c1.metric("Total Penjualan", f"Rp {total:,.0f}")
c2.metric("Unit Terjual", f"{total_unit:,}")
c3.metric("Rata-rata", f"Rp {rata:,.0f}")

# 5) Visualisasi
st.subheader("Penjualan per kategori")
st.bar_chart(filtered.groupby("kategori")["penjualan"].sum())

st.subheader("Data mentah")
st.dataframe(filtered, use_container_width=True)

# ml_app.py
import streamlit as st
import joblib

# Cache model agar hanya dimuat sekali, tidak setiap interaksi
@st.cache_resource
def load_model():
    return joblib.load("model_iris.pkl")

model = load_model()

st.title("🌷 Klasifikasi Bunga Iris")

sepal_panjang = st.slider("Panjang sepal (cm)", 4.0, 8.0, 5.8)
sepal_lebar = st.slider("Lebar sepal (cm)", 2.0, 4.5, 3.0)
petal_panjang = st.slider("Panjang petal (cm)", 1.0, 7.0, 4.4)
petal_lebar = st.slider("Lebar petal (cm)", 0.1, 2.5, 1.4)

if st.button("Prediksi"):
    hasil = model.predict(
        [[sepal_panjang, sepal_lebar, petal_panjang, petal_lebar]]
    )[0]
    nama = ["Setosa", "Versicolor", "Virginica"][hasil]
    st.success(f"Prediksi: **{nama}**")

import streamlit as st
import time

# cache_data untuk hasil fungsi (data)
@st.cache_data
def proses_lambat(n):
    time.sleep(3)  # simulasi proses berat
    return n * n

st.write("Hasil:", proses_lambat(21))
# Eksekusi pertama menunggu 3 detik; eksekusi berikutnya langsung

import streamlit as st

tab1, tab2, tab3 = st.tabs(["Data", "Chart", "Info"])

with tab1:
    st.write("Konten tab Data")

with tab2:
    st.line_chart([1, 2, 3, 4, 5])

with tab3:
    st.info("Konten tab Info")

with st.expander("Klik untuk melihat detail"):
    st.write("Konten tersembunyi di dalam expander.")

streamlit
pandas
numpy
scikit-learn
joblib