Streamlit: Mengubah Notebook Jadi Aplikasi Data Internal

Streamlit adalah pustaka Python yang ngubah script biasa jadi aplikasi web, tanpa kamu perlu nulis satu baris HTML atau JavaScript.

Masalah yang dia selesaiin nyata banget. Notebook analisismu bagus, tapi orang gudang gak akan pernah buka Jupyter cuma buat ganti satu tanggal filter.

Di sini aku bawa satu notebook rekap penjualan sampai jadi aplikasi yang bisa dibuka tim lewat browser, lengkap dengan filter, cache, dan tombol unduh.

Apa itu Streamlit dan gimana cara kerjanya?

Streamlit jalanin file Python biasa dari baris pertama sampai terakhir, lalu nampilin apa pun yang kamu panggil lewat fungsi st. sebagai elemen di halaman web. Setiap kali pengguna ngubah filter atau nekan tombol, seluruh script dijalanin ulang dari atas dengan nilai baru. Model jalan ulang ini yang bikin kodenya tetap lurus dan gampang dibaca.

Bandingin sama framework web biasa yang minta kamu ngatur route, template, dan state. Di Streamlit, urutan baris kode sama dengan urutan tampilan di layar.

Pasang dulu:

pip install streamlit pandas
streamlit hello

Perintah kedua ngebuka aplikasi contoh bawaan. Kalau itu jalan, lingkunganmu udah siap.

Gimana bikin aplikasi Streamlit pertama?

Bikin file app.py, isi lima baris, jalanin. Itu seluruh siklusnya.

import streamlit as st
import pandas as pd

st.title("Rekap Penjualan toko_berkah")
st.write("Data transaksi harian, diperbarui tiap pagi jam 7.")

df = pd.read_csv("toko_berkah_transaksi.csv", parse_dates=["tanggal"])
st.dataframe(df.head(20))

Jalanin dari terminal:

streamlit run app.py

Browser kebuka di localhost:8501. Simpan file, halamannya nawarin tombol muat ulang.

Sampai sini kamu udah punya aplikasi web. Yang kurang cuma interaksi dan kecepatan.

Gimana nambah filter yang bisa dipakai tim?

Widget di Streamlit balikin nilai langsung sebagai variabel Python. st.selectbox balikin pilihan yang lagi aktif, st.date_input balikin objek tanggal. Kamu pakai nilai itu buat nyaring dataframe kayak biasa, tanpa perlu ngurus event handler.

import streamlit as st
import pandas as pd

st.set_page_config(page_title="Rekap toko_berkah", layout="wide")
st.title("Rekap Penjualan toko_berkah")

df = pd.read_csv("toko_berkah_transaksi.csv", parse_dates=["tanggal"])

# semua filter ditaruh di sidebar biar layar utama lega
with st.sidebar:
    st.header("Filter")

    rentang = st.date_input(
        "Rentang tanggal",
        value=(df["tanggal"].min(), df["tanggal"].max()),
    )

    kategori = st.multiselect(
        "Kategori produk",
        options=sorted(df["kategori"].unique()),
        default=sorted(df["kategori"].unique()),
    )

    minimal = st.slider("Nilai transaksi minimal (Rp)", 0, 5_000_000, 0, step=100_000)

mask = (
    (df["tanggal"] >= pd.Timestamp(rentang[0]))
    & (df["tanggal"] <= pd.Timestamp(rentang[1]))
    & (df["kategori"].isin(kategori))
    & (df["nominal"] >= minimal)
)
terfilter = df[mask]

st.caption(f"{len(terfilter):,} transaksi cocok dengan filter.")

Blok with st.sidebar: mindahin semua widget ke panel kiri. Ini kebiasaan kecil yang bikin aplikasimu langsung kelihatan rapi.

Widget yang paling sering kepakai

Fungsi	Buat apa	Balikin apa
st.selectbox	Pilih satu dari daftar	Nilai yang dipilih
st.multiselect	Pilih beberapa sekaligus	List nilai
st.slider	Pilih angka atau rentang	Angka atau tuple
st.date_input	Pilih tanggal atau rentang tanggal	date atau tuple date
st.text_input	Isian teks bebas	String
st.checkbox	Nyalain atau matiin opsi	True atau False
st.file_uploader	Terima file dari pengguna	Objek file
st.button	Picu aksi sekali klik	True saat diklik

Gimana nampilin angka dan grafik yang kebaca?

Kartu angka besar biasanya bagian pertama yang dilihat orang. st.metric bikin kartu itu lengkap dengan panah naik turun.

total = terfilter["nominal"].sum()
jumlah_struk = terfilter["no_struk"].nunique()
rata_struk = total / jumlah_struk if jumlah_struk else 0

kol1, kol2, kol3 = st.columns(3)
kol1.metric("Total penjualan", f"Rp {total:,.0f}")
kol2.metric("Jumlah transaksi", f"{jumlah_struk:,}")
kol3.metric("Rata-rata per struk", f"Rp {rata_struk:,.0f}")

st.subheader("Penjualan harian")
harian = terfilter.groupby("tanggal")["nominal"].sum()
st.line_chart(harian)

st.subheader("10 produk teratas")
top10 = (
    terfilter.groupby("nama_produk")["nominal"]
    .sum()
    .sort_values(ascending=False)
    .head(10)
)
st.bar_chart(top10)

st.columns(3) bikin tiga kolom sejajar. Kartu angka yang berjejer horizontal jauh lebih gampang dipindai dibanding bertumpuk ke bawah.

Kalau kamu butuh grafik yang lebih detail, st.plotly_chart dan st.pyplot nerima objek grafik dari Plotly dan matplotlib apa adanya. Notebook lamamu bisa dipindahin nyaris tanpa ubahan.

Kenapa aplikasi Streamlit bisa lambat dan gimana benerinnya?

Streamlit jalanin ulang seluruh script tiap kali ada interaksi. Kalau baris pertama script kamu baca file CSV 200 MB, file itu dibaca ulang setiap pengguna geser slider. Dekorator cache nyimpan hasil fungsi di memori dan makai ulang selama argumennya sama.

@st.cache_data(ttl=3600)
def muat_data(path: str) -> pd.DataFrame:
    df = pd.read_csv(path, parse_dates=["tanggal"])
    df["bulan"] = df["tanggal"].dt.to_period("M").astype(str)
    return df

df = muat_data("toko_berkah_transaksi.csv")

Argumen ttl=3600 bikin cache kadaluwarsa setelah satu jam, jadi data yang diperbarui pagi hari tetap kebaca. Tanpa ttl, cache bertahan sampai aplikasinya di-restart.

Dekorator	Dipakai buat
@st.cache_data	Hasil berupa data: dataframe, list, dict, angka
@st.cache_resource	Objek yang dipakai bersama: koneksi database, model yang udah dilatih

Aturan gampangnya: kalau hasilnya bisa disalin, pakai cache_data. Kalau hasilnya harus satu objek yang sama buat semua pengguna, pakai cache_resource.

Daftar lengkap perilaku cache dan batasannya ada di dokumentasi caching Streamlit.

Gimana nambah tombol unduh dan unggah file?

Dua fitur ini yang paling sering diminta tim non-teknis. Mereka mau hasil filternya bisa dibawa ke Excel.

csv = terfilter.to_csv(index=False).encode("utf-8")

st.download_button(
    label="Unduh hasil filter (CSV)",
    data=csv,
    file_name=f"rekap_{rentang[0]}_{rentang[1]}.csv",
    mime="text/csv",
)

berkas = st.file_uploader("Atau unggah file transaksi sendiri", type=["csv", "xlsx"])
if berkas is not None:
    if berkas.name.endswith(".csv"):
        df_baru = pd.read_csv(berkas)
    else:
        df_baru = pd.read_excel(berkas)
    st.success(f"Terbaca {len(df_baru):,} baris.")
    st.dataframe(df_baru.head())

Perhatiin if berkas is not None. Sebelum ada file yang diunggah, nilainya None, dan tanpa pengecekan ini aplikasimu error di muat pertama.

Contoh kasus: aplikasi rekap harian toko_berkah

Dataset ngulikdata untuk toko_berkah punya 11.407 transaksi selama 14 bulan dan 386 SKU aktif. Sebelum ada aplikasi, prosesnya begini.

Tiap Senin pagi, pemilik toko kirim WhatsApp minta rekap kategori tertentu. Aku buka notebook, ganti tanggal di sel ketiga, jalanin ulang, ekspor CSV, kirim balik. Rata-rata 25 menit, dan itu berulang 3 sampai 4 kali per minggu.

Setelah notebook diubah jadi aplikasi Streamlit dengan sidebar berisi tiga filter, permintaan rekap manual turun dari rata-rata 3,5 per minggu jadi 0,4 per minggu selama dua bulan pertama.

Hitungannya: sekitar 87 menit per minggu balik jadi waktu kerja lain. Waktu bikin aplikasinya sendiri 4 jam, jadi impasnya ketemu di minggu ketiga.

Yang gak aku duga: pemilik toko mulai nanya hal yang sebelumnya gak pernah ditanya. Begitu filternya ada di tangan dia, dia iseng cek kategori rokok per hari dalam seminggu dan nemuin pola yang jadi dasar perubahan jam restok.

Cara ngukur dampak kayak gini polanya sama dengan yang aku tulis di mengukur dampak kerja analis.

Gimana cara ngejalanin aplikasinya biar bisa diakses tim?

Tiga pilihan, urut dari yang paling sederhana.

1. Jaringan kantor. Jalanin di satu komputer yang nyala terus dengan streamlit run app.py --server.address 0.0.0.0 --server.port 8501. Tim akses lewat alamat IP komputer itu. Paling cepat, dan data gak keluar jaringan.
2. Server internal atau container. Bungkus pakai Docker, taruh di server kantor, kasih nama domain internal. Lebih rapi buat pemakaian jangka panjang.
3. Layanan hosting. Cocok kalau timmu tersebar dan datanya gak sensitif. Perhatiin dulu aturan data perusahaan sebelum ngunggah data pelanggan ke luar.

Buat kata sandi database atau kunci API, jangan ditulis di kode. Taruh di file .streamlit/secrets.toml lalu panggil lewat st.secrets["db_password"], dan masukin file itu ke .gitignore.

Kesalahan umum waktu bikin aplikasi Streamlit

Gak pakai cache sama sekali. Penyebab nomor satu aplikasi terasa lambat. Bungkus fungsi baca data pakai @st.cache_data sejak awal.

Nyimpan variabel di luar cache dan berharap nilainya bertahan. Semua variabel biasa direset tiap kali script jalan ulang. Kalau kamu butuh nyimpan nilai antar interaksi, pakai st.session_state.

Nampilin dataframe 500 ribu baris utuh. Browser bakal berat. Tampilkan ringkasannya, kasih tombol unduh buat data lengkapnya.

Nulis kata sandi langsung di kode. Kode ini bakal masuk repositori dan kebaca semua orang. Pakai file secrets.

Nyalin seluruh notebook tanpa dirapikan. Sel eksperimen dan sel yang gagal ikut kebawa, dan aplikasinya jadi lambat karena ngitung hal yang gak ditampilin. Sisain cuma alur yang beneran menghasilkan output.

Gak ngasih tahu data terakhir diperbarui kapan. Tanpa itu, tim bakal ragu angkanya masih berlaku atau nggak. Tulis satu baris st.caption berisi waktu pembaruan terakhir.

FAQ

Apa Streamlit gratis dipakai buat aplikasi kantor?

Pustakanya sumber terbuka dan gratis, termasuk buat pemakaian di perusahaan. Kamu bisa jalanin di laptop, server kantor, atau container tanpa biaya lisensi. Yang berbayar itu layanan hosting tingkat lanjut. Buat aplikasi internal, jalanin di server kantor sendiri biasanya paling murah sekaligus paling aman soalnya datanya gak keluar jaringan.

Kenapa aplikasi Streamlit-ku lambat banget?

Biasanya karena data dibaca ulang setiap kali pengguna geser filter. Streamlit jalanin ulang seluruh script dari baris pertama tiap ada interaksi. Bungkus fungsi pembaca data dan perhitungan berat pakai dekorator @st.cache_data, jadi hasilnya disimpan dan dipakai lagi. Satu perubahan ini sering mangkas waktu muat dari belasan detik jadi kurang dari satu detik.

Bisa gak Streamlit dikasih login biar gak semua orang bisa buka?

Bisa, dan pilihannya beberapa. Paling gampang taruh aplikasinya di jaringan internal kantor yang cuma bisa diakses dari kantor. Kalau butuh login per orang, pasang reverse proxy kayak nginx dengan autentikasi di depannya. Jangan simpan kata sandi di dalam kode, pakai file secrets yang disediakan Streamlit.

Streamlit atau Power BI, mana yang harus aku pilih?

Power BI lebih pas buat dashboard tetap yang isinya angka bisnis rutin dan dipakai banyak orang. Streamlit lebih pas kalau aplikasinya butuh jalanin kode Python, misalnya model prediksi, simulasi harga, atau pembersihan data yang diunggah pengguna. Banyak tim pakai dua-duanya: Power BI buat laporan harian, Streamlit buat alat khusus.

Perlu belajar HTML dan JavaScript dulu buat pakai Streamlit?

Gak perlu. Seluruh tampilan dibikin dari fungsi Python, dan Streamlit yang ngurus bagian web-nya. Kalau kamu udah bisa nulis pandas dan matplotlib di notebook, kamu udah punya semua bekal yang dibutuhkan. HTML baru kepakai kalau kamu mau ngutak-atik gaya tampilan, dan itu pun jarang dibutuhin buat aplikasi internal.

Penutup

Tiga hal yang perlu kamu bawa.

Streamlit jalanin ulang seluruh script tiap interaksi. Paham ini bikin kamu ngerti kenapa cache jadi wajib dan kenapa variabel biasa gak bertahan.

Mulai dari satu notebook yang udah kamu pakai berulang. Jangan bikin aplikasi buat analisis yang belum pernah diminta siapa pun.

Taruh filter di sidebar, angka utama di tiga kolom atas, tombol unduh di bawah. Susunan itu udah nutup 90 persen kebutuhan aplikasi internal.

Ambil satu notebook rekapmu sore ini dan ubah jadi app.py. Satu jam pertama biasanya cukup buat versi yang udah bisa dipakai orang lain.

Buat isi aplikasinya, hasil segmentasi pelanggan dan dekomposisi time series dua-duanya cocok jadi halaman terpisah. Konsep dashboard dan KPI di glossary bantu kamu nentuin angka mana yang layak ditaruh di kartu atas.