Python NiceGUI: Xây dựng giao diện web mạnh mẽ một cách dễ dàng

NiceGUI là một framework UI dựa trên Python giúp bạn dễ dàng tạo giao diện web. Nó cho phép nhà phát triển xây dựng giao diện người dùng đồ họa (GUI) cho ứng dụng web mà không cần biết HTML, CSS hay JavaScript. 

Trong bài viết này, tôi sẽ giải thích cách bạn có thể dùng NiceGUI để tạo các giao diện thân thiện với người dùng. Nhưng nếu bạn mới làm quen với Python, hãy học khóa Giới thiệu về Python rồi tiếp tục với lộ trình kỹ năng Lập trình Python để củng cố kỹ năng của bạn. 

NiceGUI là gì?

NiceGUI là thư viện Python giúp tạo giao diện người dùng dựa trên web chỉ với mã Python. Nếu bạn là một nhà phát triển Python muốn xây dựng UI nhưng muốn tránh HTML, CSS hoặc JavaScript, NiceGUI là dành cho bạn. Nó được hỗ trợ bởi ba công nghệ chính: 

• FastAPI cho các thao tác backend.
• Vue.js cho tương tác frontend.
• Tailwind CSS để tạo kiểu. 

Tuy nhiên (và đây mới là điểm mấu chốt của NiceGUI) bạn không cần hiểu những công nghệ này để dùng NiceGUI hiệu quả. Nó đủ linh hoạt để xử lý cả các ứng dụng web nhỏ lẫn dự án phức tạp hơn. Đây là một thế mạnh quan trọng của NiceGUI — tính dễ tiếp cận. Bạn có thể tạo giao diện hoạt động với rất ít mã, ngay cả khi bạn còn mới với Python. Hãy xem đoạn mã dưới đây và tôi sẽ minh họa điều đó.

Bắt đầu với NiceGUI

Ở đây, tôi sẽ trình bày quy trình cài đặt và hướng dẫn bạn tạo ứng dụng đơn giản đầu tiên.

Quy trình cài đặt

Có vài cách để cài đặt NiceGUI, tùy theo sở thích của bạn. Sau đây là cách thực hiện. Chạy các lệnh sau trong terminal hoặc command prompt. Tôi đưa ra các lựa chọn tùy công cụ bạn dùng.

Cài đặt qua pip 

pip install niceguiĐược hỗ trợ bởi

Cài đặt qua PyPI

python3 -m pip install niceguiĐược hỗ trợ bởi

Cài đặt qua Docker

docker pull zauberzeug/niceguiĐược hỗ trợ bởi

Cài đặt qua conda-forge

Trước hết, thêm conda-forge vào danh sách kênh của bạn như sau:

conda config --add channels conda-forge
conda config --set channel_priority strictĐược hỗ trợ bởi

Sau khi bật kênh conda-forge, chạy lệnh sau để cài đặt NiceGUI: 

conda install niceguiĐược hỗ trợ bởi

Ứng dụng đơn giản đầu tiên

Bạn đã cài đặt NiceGUI, vậy đã đến lúc tạo giao diện đầu tiên của chúng ta. Hãy bắt đầu với ví dụ cơ bản — hiển thị một lời chào đơn giản. Trước tiên, tạo một tệp Python mới (ví dụ, app.py). Sau đó, viết đoạn mã sau:

# Importing the module 
from nicegui import UI

# pass the text
ui.label('Hello World')

# run it
ui.run()Được hỗ trợ bởi

Bây giờ hãy chạy mã. Bạn có thể lưu và thực thi bằng cách nhấp nút run hoặc gõ lệnh sau trong terminal:

python app.pyĐược hỗ trợ bởi

Hiển thị nhãn bằng NiceGUI. Ảnh: Tác giả.

Các tính năng chính của NiceGUI

NiceGUI ngày càng phổ biến nhờ sự đơn giản, tính tương tác và khả năng tích hợp. Dưới đây là những điểm khiến nó trở thành framework hữu ích cho nhà phát triển.

Giao diện thân thiện

Không giống các công cụ như Streamlit hay Dash, bạn có thể dùng NiceGUI để tạo GUI với rất ít mã. Đây là ví dụ: 

from nicegui import ui
	ui.label('Hello NiceGUI!')
	ui.button('BUTTON', on_click=lambda: ui.notify('button was pressed'))
	ui.run()Được hỗ trợ bởi

Trong đoạn mã trên, tôi định nghĩa một nút và xử lý sự kiện nhấp. Khi tôi bấm nút, thông điệp button was pressed bật lên. Vậy là xong. Đây không phải ví dụ phức tạp nhất, nhưng bạn có thể thấy tôi thiết lập UI hoạt động này rất nhanh mà không cần cấu hình hay logic rườm rà.

Giao diện NiceGUI với nút và thông báo. Ảnh: Tác giả.

Tương tác thời gian thực

Với NiceGUI, bạn cũng có thể tạo UI tương tác theo thời gian thực phản hồi tức thì trong trình duyệt. Khi bạn thay đổi ở backend, các cập nhật đó sẽ được phản ánh ngay ở frontend nhờ kết nối WebSocket. Kênh liên lạc liên tục giữa máy chủ và khách này giúp bạn không phải tải lại trang để thấy cập nhật. 

from nicegui import ui
slider = ui.slider(min=0, max=100, value=50)
ui.label().bind_text_from(slider, 'value')
ui.run()Được hỗ trợ bởi

Khi bạn di chuyển thanh trượt, nhãn cập nhật tức thì mà không cần tải lại trang. Điều này cho thấy ưu thế của NiceGUI so với các framework như Streamlit và Dash, nơi cập nhật có thể đòi hỏi nhiều công sức hơn.

Tạo một thanh trượt. Ảnh: Tác giả. 

Thành phần trực quan và bố cục

NiceGUI có các lựa chọn bố cục, bao gồm nút, thanh trượt, biểu đồ và phần tử 3D. Bạn có thể sắp xếp chúng theo hàng, cột và thẻ (card) để tạo giao diện mà không cần viết HTML hay CSS. Đây là ví dụ:

from nicegui import ui
with ui.column():
    ui.button('Button 1')
    ui.button('Button 2')
with ui.row():
    with ui.card().style('width: 300px; height: 150px'):
        ui.label('Temperature')
        ui.slider(min=0, max=100, value=20)
    
    with ui.card().style('width: 500px; height: 400px'):  # Adjusting the size of the card
        ui.label('Line Chart')
        ui.echart({
            'title': {'text': 'Sample Line Chart', 'left': 'center', 'textStyle': {'fontSize': 18}},
            'xAxis': {
                'type': 'category',
                'data': ['Category A', 'Category B', 'Category C'],
                'axisLabel': {'rotate': 0}  # Ensures the labels are not rotated
            },
            'yAxis': {'type': 'value'},
            'series': [{
                'name': 'Values',
                'data': [1, 2, 3],
                'type': 'line',
                'smooth': True,  # Makes the line smoother
                'label': {'show': True}  # Shows data points on the chart
            }]
        })
ui.run()Được hỗ trợ bởi

Tôi dùng đoạn mã này để tạo bố cục tương tác. Mã trước hết import module cần thiết từ NiceGUI. Sau đó tạo một cột chứa hai nút và một hàng với hai thẻ. Thẻ đầu chứa điều khiển nhiệt độ, gồm nhãn và thanh trượt để điều chỉnh. Thẻ thứ hai chứa biểu đồ đường. Cuối cùng, ui.run() chạy mã để hiển thị kết quả.

Tạo các thành phần trực quan và bố cục. Ảnh: Tác giả.

Tích hợp với thư viện bên ngoài

Nếu bạn quan tâm đến khoa học dữ liệu hoặc trực quan hóa, tôi có tin vui — NiceGUI hoạt động tốt với các thư viện Python phổ biến như NumPy, Matplotlib và Plotly. Giả sử bạn làm các dự án khoa học dữ liệu cần xử lý hoặc trực quan hóa phức tạp. Khi đó, bạn có thể dùng các thư viện này như bình thường trong Python, và NiceGUI sẽ hiển thị kết quả cho bạn trên giao diện web. 

Dưới đây là ví dụ về cách bạn dùng NiceGUI cùng Matplotlib và NumPy để tạo một trực quan hóa dữ liệu cơ bản trên giao diện web. Trước tiên, cài các thư viện cần thiết bằng cách chạy:

pip install nicegui numpy matplotlibĐược hỗ trợ bởi

Giờ hãy tạo một script Python đơn giản để sinh biểu đồ và hiển thị bằng NiceGUI như sau:

import numpy as np
import matplotlib.pyplot as plt
from nicegui import ui

# Generate some data using NumPy
x = np.linspace(0, 10, 100)
y = np.sin(x)

# Create a Matplotlib plot
plt.plot(x, y)
plt.title('Sine Wave')
plt.xlabel('X-axis')
plt.ylabel('Y-axis')

# Save the plot to display it in the web interface
plt.savefig('sine_wave_plot.png')

# Define the NiceGUI interface
@ui.page('/')
def main_page():
    # Display the plot using NiceGUI
    ui.image('sine_wave_plot.png')

# Run the NiceGUI application
ui.run()Được hỗ trợ bởi

Biểu đồ tương tác dùng NiceGUI, Matplotlib và NumPy. Ảnh: Tác giả.

Tính năng nâng cao và trường hợp sử dụng

Giờ bạn đã biết những điều cơ bản về NiceGUI, hãy xem một số tính năng nâng cao. Chúng sẽ giúp bạn xây dựng các ứng dụng web phức tạp và tương tác hơn. 

Bảng điều khiển dữ liệu

Ngoài các bố cục cơ bản, bạn còn có thể tạo dashboard hiển thị dữ liệu trực tiếp bằng NiceGUI. Cách làm như sau:

• Dùng NiceGUI để cập nhật dữ liệu trên màn hình mà không cần tải lại trang.
• Thêm biểu đồ bằng các công cụ như Matplotlib hoặc Plotly.
• Cho phép người dùng thay đổi nội dung hiển thị bằng nút bấm và menu xổ xuống.

Ví dụ, tôi đã tạo một bảng điều khiển tài chính hiển thị giá cổ phiếu theo thời gian thực bằng NiceGUI và Matplotlib.

from nicegui import ui
import plotly.express as px
import pandas as pd

# Sample data
df = pd.DataFrame({
    'time': ['10:00', '10:05', '10:10'],
    'stock_price': [100, 102, 105]
})

# Create a Plotly line chart
fig = px.line(df, x='time', y='stock_price', title='Stock Price Over Time')

# Use NiceGUI to display the chart
with ui.card():
    ui.plotly(fig)
ui.run()Được hỗ trợ bởi

Bảng điều khiển cổ phiếu thời gian thực bằng NiceGUI và Plotly. Ảnh: Tác giả.

Bạn cũng có thể kết nối ứng dụng với một API truyền dữ liệu trực tiếp. Khi đó, Matplotlib hoặc Plotly sẽ giúp bạn tạo biểu đồ tự động làm mới khi dữ liệu mới đến, mang lại góc nhìn thị trường theo thời gian thực cho người dùng.

Giao diện học máy

NiceGUI cũng hoạt động tốt với các dự án máy học. Bạn có thể dùng nó như sau:

• Tạo màn hình dễ dùng để thay đổi cách mô hình vận hành.
• Hiển thị kết quả từ mô hình ngay khi có.
• Cho phép người dùng khám phá dữ liệu trước và sau khi huấn luyện.

Ví dụ, tôi đã tạo một giao diện cho hồi quy tuyến tính:

from nicegui import ui
import numpy as np
import plotly.graph_objects as go

X = np.array([1, 2, 3, 4, 5])
y = np.array([1, 6, 8, 7, 9])

# Slope and intercept
slope = 2.2
intercept = 0.6

# Create the initial figure with two traces
fig = go.Figure()
fig.add_trace(go.Scatter(x=X, y=y, mode='markers', name='Data'))  # Actual data points
# The prediction line uses the manually set slope and intercept
y_pred = slope * X + intercept
fig.add_trace(go.Scatter(x=X, y=y_pred, mode='lines', name='Prediction'))
fig.update_layout(title='Linear Regression Model',
                  xaxis_title='X',
                  yaxis_title='Y',
                  height=400)

def update_model():
    
    y_pred = slope * X + intercept

    # Update the results with the fixed slope and intercept
    result.set_text(f"Slope: {slope:.2f}, Intercept: {intercept:.2f}")

    # Update the prediction line in the plot
    chart.update_traces(y=y_pred, selector=dict(name="Prediction"))

# Create the UI
with ui.card().classes('w-full'):
    ui.label('Linear Regression Demo').classes('text-h6')
    ui.button('Update Model', on_click=update_model).classes('my-2')
    result = ui.label(f"Slope: {slope:.2f}, Intercept: {intercept:.2f}")
    chart = ui.plotly(fig).classes('w-full')

ui.run()Được hỗ trợ bởi

NiceGUI tích hợp vào ML. Ảnh: Tác giả.

NiceGUI so với các framework UI Python khác

Khi bắt đầu một dự án mới, bạn có thể so sánh NiceGUI với các lựa chọn phổ biến như Streamlit, Dash và JustPy. Dù mỗi framework đều có điểm mạnh, điểm yếu ảnh hưởng đến quá trình phát triển, hãy so sánh chúng về mức độ dễ dùng và hiệu năng.

Khi bạn đã xây dựng xong ứng dụng, bạn sẽ muốn chia sẻ với người khác. Triển khai giúp ứng dụng có sẵn cho người dùng, dù là trên internet hay mạng nội bộ. Vì ứng dụng NiceGUI dựa trên Python, bạn có nhiều lựa chọn triển khai.

Tùy chọn triển khai đám mây

Bạn có thể chọn Google Cloud Run hoặc AWS — hai lựa chọn triển khai đám mây phổ biến nhất. Đây là các bước cơ bản để triển khai ứng dụng trên các nền tảng này:

• Đảm bảo ứng dụng NiceGUI hoạt động ổn cục bộ.
• Điều chỉnh cài đặt như host và port để hoạt động trong môi trường đám mây.
• Thiết lập các tệp cấu hình cần thiết cho nền tảng đám mây đã chọn.
• Đóng gói ứng dụng và đẩy lên container registry của nền tảng đám mây.
• Dùng công cụ của nền tảng đám mây để triển khai ứng dụng đã container hóa.

Quy trình triển khai có thể hơi khác nhau tùy nền tảng đám mây bạn dùng. Tuy nhiên, hầu hết các nền tảng đều cung cấp giao diện và công cụ CLI dễ dùng, giúp đơn giản hóa quy trình này, ngay cả với người mới.

Hỗ trợ Docker

Docker cho phép bạn đóng gói ứng dụng cùng toàn bộ phụ thuộc vào một container duy nhất, có thể dễ dàng triển khai trên mọi hệ thống hỗ trợ Docker. NiceGUI cũng cung cấp một Docker image, rất lý tưởng cho việc đóng gói container và trừu tượng hóa nhiều phức tạp của quá trình triển khai.  

Docker image bao gồm mọi phụ thuộc cần thiết để đảm bảo tính nhất quán giữa môi trường phát triển và sản xuất. Tuy vậy, bạn có thể mở rộng image chính thức để thêm các yêu cầu bổ sung cho ứng dụng của mình. Quy trình triển khai thường gồm các bước sau: 

• Tạo Dockerfile cho ứng dụng.
• Build image container.
• Triển khai image đó lên nền tảng lưu trữ bạn chọn. 

Kết luận  

NiceGUI là một framework Python dễ dùng, hoạt động thời gian thực và có thể kết hợp với các thư viện phổ biến khác. Dù bạn đang làm dự án nhỏ hay lớn, NiceGUI đều là lựa chọn đáng cân nhắc.

Để tìm hiểu thêm về cách GUI đang định hình tương lai công việc, hãy xem hướng dẫn GUIs and the Future of Work. Nếu bạn đang xây dựng ứng dụng AI và muốn một cách tiếp cận khác để tạo giao diện người dùng, hãy xem hướng dẫn Xây dựng giao diện người dùng cho ứng dụng AI với Gradio trong Python.