Posted inPython

Build Dashboard dữ liệu xịn trong 15 phút với Streamlit: Tạm biệt nỗi lo Frontend

Python tutorial - IT technology blog
Python tutorial - IT technology blog

Cơn ác mộng mang tên “Làm giao diện” cho dân Backend

Thứ Hai tuần trước, mình thức trắng đêm để lọc 500MB log server nhằm tìm nguyên nhân gây nghẽn cổ chai. Sau khi dùng Python xử lý xong xuôi, sếp ghé vai bảo: “Gửi cái báo cáo trực quan chút cho bên vận hành xem nhé”. Lúc đó mình thực sự bế tắc. Nếu dùng Flask hay Django, mình sẽ phải vật lộn với route, template HTML và mớ CSS hỗn độn để vẽ được cái biểu đồ ra hồn.

Vấn đề nằm ở chi phí cơ hội. Bỏ ra 2 ngày code CSS chỉ để đổi lấy một cái biểu đồ hình tròn là một sự lãng phí tài nguyên khủng khiếp. Nhiều anh em IT thường chọn cách xuất đại ra file Excel cho nhanh. Tuy nhiên, cách này nhìn rất thiếu chuyên nghiệp và khó theo dõi biến động theo thời gian.

Tại sao Streamlit là “chân ái” so với các giải pháp khác?

Trước khi bắt tay vào code, hãy cùng nhìn lại xem tại sao Streamlit lại đang làm mưa làm gió trong cộng đồng Data Engineer.

  • Flask/Django + Plotly.js: Đây là giải pháp “nồi đồng cối đá”. Bạn có thể tùy biến mọi pixel nhưng cái giá phải trả là thời gian. Bạn cần ít nhất 3-5 ngày để dựng một hệ thống hoàn chỉnh nếu không muốn code chạy lỗi tưng bừng.
  • Power BI/Tableau: Kéo thả rất nhanh nhưng bản quyền thường rơi vào khoảng $10-$20/user mỗi tháng. Quan trọng hơn, việc tích hợp các logic xử lý Python phức tạp vào những công cụ này là một cực hình.
  • Streamlit: Bạn viết 100% bằng Python. Không HTML. Không JavaScript. Chỉ cần sửa code và nhấn Save, giao diện sẽ tự động cập nhật ngay lập tức.

Nếu bạn cần một công cụ monitoring hệ thống hoặc làm prototype nhanh cho khách hàng, Streamlit chính là lựa chọn số một. Mình đã tiết kiệm được khoảng 80% thời gian làm UI kể từ khi chuyển sang dùng thư viện này.

Hướng dẫn triển khai Dashboard trong 15 phút

Việc chuẩn bị cực kỳ đơn giản. Chỉ cần một dòng lệnh để “vác” toàn bộ thư viện cần thiết về máy của bạn.

pip install streamlit pandas plotly openpyxl

Bước 1: Thiết lập khung xương ứng dụng

Đầu tiên, hãy tạo file app.py. Đây là đầu não chứa toàn bộ logic giao diện của chúng ta.

import streamlit as st
import pandas as pd
import plotly.express as px

# Cấu hình trang
st.set_page_config(page_title="IT Ops Dashboard", layout="wide")

st.title("📊 Dashboard Hiệu Năng Server")
st.markdown("Hệ thống theo dõi sức khỏe tài nguyên thời gian thực.")

Bước 2: Chuẩn bị dữ liệu

Trong thực tế, bạn sẽ lấy dữ liệu từ SQL hoặc API. Để anh em dễ hình dung, mình sẽ giả lập một tập dữ liệu gồm 10 ngày vận hành server.

def load_data():
    data = {
        'Ngày': pd.date_range(start='2023-10-01', periods=10, freq='D'),
        'CPU_Usage': [45, 55, 60, 40, 80, 95, 30, 50, 70, 65],
        'RAM_Usage': [30, 35, 40, 32, 50, 60, 28, 40, 45, 42],
        'Status': ['OK', 'OK', 'Warning', 'OK', 'Critical', 'Critical', 'OK', 'OK', 'Warning', 'OK']
    }
    return pd.DataFrame(data)

df = load_data()

Bước 3: Thêm bộ lọc thông minh

Streamlit giúp việc tạo sidebar dễ như ăn kẹo. Chỉ với vài dòng code, bạn đã có ngay một bộ lọc trạng thái chuyên nghiệp.

st.sidebar.header("Cấu hình bộ lọc")
status_filter = st.sidebar.multiselect(
    "Trạng thái server:",
    options=df["Status"].unique(),
    default=df["Status"].unique()
)

# Lọc dữ liệu theo lựa chọn
df_filtered = df[df["Status"].isin(status_filter)]

Bước 4: Hiển thị chỉ số và Biểu đồ

Bây giờ là lúc show hàng. Chúng ta sẽ chia màn hình thành 3 cột để hiển thị các thông số quan trọng nhất (Metrics).

col1, col2, col3 = st.columns(3)
col1.metric("CPU Avg", f"{df_filtered['CPU_Usage'].mean():.1f}%")
col2.metric("RAM Max", f"{df_filtered['RAM_Usage'].max()}% ")
col3.metric("Tổng số sự kiện", len(df_filtered))

# Vẽ biểu đồ đường
fig_cpu = px.line(df_filtered, x='Ngày', y='CPU_Usage', title='Diễn biến CPU Usage')
st.plotly_chart(fig_cpu, use_container_width=True)

# Bảng dữ liệu chi tiết
st.subheader("Chi tiết log hệ thống")
st.dataframe(df_filtered)

Kích hoạt ứng dụng

Lưu file lại, mở terminal và gõ lệnh thần thánh này:

streamlit run app.py

Trình duyệt sẽ tự động mở tại cổng 8501. Hãy thử kéo thả bộ lọc, bạn sẽ thấy biểu đồ phản hồi ngay lập tức mà không cần load lại trang.

Vài lưu ý nhỏ từ kinh nghiệm thực tế

Dù Streamlit rất tiện, nhưng nó có một nhược điểm: mỗi khi bạn click vào nút gì đó, nó sẽ chạy lại toàn bộ code từ đầu đến cuối. Với tập dữ liệu lớn hàng triệu dòng, giao diện sẽ bắt đầu có hiện tượng giật lag.

Bí kíp ở đây là hãy tận dụng decorator @st.cache_data. Nó giúp lưu kết quả xử lý vào bộ nhớ đệm, giúp ứng dụng chạy nhanh gấp 10 lần. Nếu muốn share cho đồng nghiệp, bạn chỉ cần đóng gói vào Docker là xong, cực kỳ gọn nhẹ.

Anh em cứ mạnh dạn vọc thêm các widget khác như st.slider hay st.camera_input. Nếu có chỗ nào chưa thông, cứ để lại comment phía dưới, mình sẽ giải đáp tận tình nhé!

Share:
Tags: