Python NiceGUI: Bangun Antarmuka Web yang Andal dengan Mudah

NiceGUI adalah kerangka kerja UI berbasis Python yang memudahkan pembuatan antarmuka web. Ini memungkinkan pengembang membangun graphical user interfaces (GUI) untuk aplikasi web tanpa perlu mengetahui HTML, CSS, atau JavaScript. 

Dalam artikel ini, saya akan menjelaskan cara menggunakan NiceGUI untuk membuat antarmuka yang ramah pengguna. Namun, jika Anda baru mengenal Python, ikuti terlebih dahulu kursus Introduction to Python kami lalu lanjutkan ke jalur keterampilan Python Programming untuk menguatkan keterampilan Anda. 

Apa itu NiceGUI?

NiceGUI adalah pustaka Python yang membantu membuat antarmuka pengguna berbasis web hanya dengan kode Python. Jika Anda adalah pengembang Python yang ingin membangun UI tetapi ingin menghindari HTML, CSS, atau JavaScript, NiceGUI cocok untuk Anda. Ini didukung oleh tiga teknologi utama: 

• FastAPI untuk operasi backend.
• Vue.js untuk interaksi frontend.
• Tailwind CSS untuk styling. 

Namun (dan inilah inti dari NiceGUI sebenarnya) Anda tidak perlu memahami teknologi-teknologi ini untuk menggunakan NiceGUI secara efektif. Ini cukup serbaguna untuk menangani aplikasi web kecil maupun proyek yang lebih kompleks. Ini adalah salah satu kekuatan utama NiceGUI — aksesibilitasnya. Anda dapat membuat antarmuka fungsional dengan kode minimal, bahkan jika Anda baru di Python. Mari lihat kode di bawah dan saya tunjukkan maksud saya.

Memulai dengan NiceGUI

Di sini, saya akan membahas proses instalasi dan memandu Anda membuat aplikasi sederhana pertama.

Proses instalasi

Ada beberapa metode untuk memasang NiceGUI, tergantung preferensi Anda. Berikut caranya. Jalankan perintah berikut di terminal atau command prompt Anda. Saya memberikan opsi sesuai alat yang Anda gunakan.

Instal via pip 

pip install niceguiDidukung oleh

Instal via PyPI

python3 -m pip install niceguiDidukung oleh

Instal via Docker

docker pull zauberzeug/niceguiDidukung oleh

Instal via conda-forge

Pertama, tambahkan conda-forge ke daftar kanal Anda seperti ini:

conda config --add channels conda-forge
conda config --set channel_priority strictDidukung oleh

Setelah mengaktifkan kanal conda-forge, jalankan perintah berikut untuk memasang NiceGUI: 

conda install niceguiDidukung oleh

Aplikasi sederhana pertama

Anda telah memasang NiceGUI, jadi saatnya membuat antarmuka pertama kita. Mari ambil contoh dasar — menampilkan pesan hello sederhana. Pertama, buat file Python baru (mis., app.py). Lalu, tulis kode berikut:

# Importing the module 
from nicegui import UI

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

# run it
ui.run()Didukung oleh

Sekarang jalankan kodenya. Anda bisa menyimpannya lalu mengeksekusinya dengan mengeklik tombol run atau menulis perintah berikut di terminal:

python app.pyDidukung oleh

Menampilkan label menggunakan NiceGUI. Gambar oleh Penulis.

Fitur Utama NiceGUI

NiceGUI menjadi populer karena kesederhanaan, interaktivitas, dan kemampuan integrasinya. Berikut ringkasan hal-hal yang membuatnya bermanfaat bagi pengembang.

Antarmuka yang ramah pengguna

Berbeda dengan alat lain seperti Streamlit atau Dash, Anda dapat menggunakan NiceGUI untuk membuat graphical user interface dengan kode minimal. Berikut contohnya: 

from nicegui import ui
	ui.label('Hello NiceGUI!')
	ui.button('BUTTON', on_click=lambda: ui.notify('button was pressed'))
	ui.run()Didukung oleh

Pada kode di atas, saya mendefinisikan sebuah tombol dan menangani event kliknya. Saat saya mengklik tombol, muncul pesan button was pressed. Dan selesai. Ini bukan contoh paling rumit, tetapi Anda dapat melihat betapa cepatnya saya menyiapkan UI fungsional ini tanpa konfigurasi atau logika kompleks apa pun.

Antarmuka NiceGUI dengan tombol dan notifikasi. Gambar oleh Penulis.

Interaktivitas real-time

Dengan NiceGUI, Anda juga dapat membuat UI interaktif real-time yang merespons seketika di peramban web Anda. Saat Anda melakukan perubahan di backend, pembaruan tersebut langsung tercermin di frontend berkat koneksi WebSocket. Komunikasi berkelanjutan antara server dan klien ini berarti Anda tidak perlu memuat ulang halaman untuk melihat pembaruan. 

from nicegui import ui
slider = ui.slider(min=0, max=100, value=50)
ui.label().bind_text_from(slider, 'value')
ui.run()Didukung oleh

Saat Anda menggeser slider, label diperbarui seketika tanpa memuat ulang halaman. Ini menunjukkan keunggulan NiceGUI dibandingkan kerangka kerja seperti Streamlit dan Dash, di mana pembaruan mungkin memerlukan upaya lebih.

Membuat slider. Gambar oleh Penulis. 

Elemen visual dan tata letak

NiceGUI memiliki opsi tata letak, termasuk tombol, slider, bagan, dan elemen 3D. Anda dapat menata elemen-elemen ini dalam baris, kolom, dan kartu untuk membuat antarmuka tanpa menulis HTML atau CSS. Berikut contohnya:

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()Didukung oleh

Saya menggunakan kode ini untuk membuat tata letak interaktif. Kode terlebih dahulu mengimpor modul yang diperlukan dari NiceGUI. Lalu membuat kolom yang berisi dua tombol dan sebuah baris dengan dua kartu. Kartu pertama berisi kontrol suhu, yang memiliki label dan slider untuk mengatur suhu. Kartu kedua berisi bagan garis. Terakhir, ui.run() menjalankan kode untuk menampilkan hasilnya.

Membuat elemen visual dan tata letak. Gambar oleh Penulis.

Integrasi dengan pustaka eksternal

Jika Anda berkecimpung di data science atau visualisasi, saya punya kabar baik — NiceGUI bekerja dengan baik bersama pustaka Python populer seperti NumPy, Matplotlib, dan Plotly. Misalnya, Anda mengerjakan proyek data science yang memerlukan pemrosesan atau visualisasi data yang kompleks. Dalam kasus ini, Anda dapat menggunakan pustaka-pustaka tersebut seperti biasa di Python, dan NiceGUI akan menampilkan hasilnya untuk Anda dalam antarmuka berbasis web. 

Berikut contoh bagaimana Anda dapat menggunakan NiceGUI bersama Matplotlib dan NumPy untuk membuat visualisasi data dasar dalam antarmuka berbasis web. Pertama, kita pasang pustaka yang diperlukan dengan menjalankan ini:

pip install nicegui numpy matplotlibDidukung oleh

Sekarang, buat skrip Python sederhana untuk menghasilkan plot dan menampilkannya menggunakan NiceGUI seperti ini:

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()Didukung oleh

Plot interaktif menggunakan NiceGUI, Matplotlib, dan NumPy. Gambar oleh Penulis.

Fitur Lanjutan dan Use Case

Sekarang Anda memahami dasar-dasarnya, mari lihat beberapa fitur lanjutan NiceGUI. Fitur-fitur ini akan membantu Anda membangun aplikasi web yang lebih kompleks dan interaktif. 

Dasbor data

Selain tata letak dasar, Anda bahkan dapat membuat dasbor yang menampilkan data live menggunakan NiceGUI. Begini caranya:

• Gunakan NiceGUI untuk memperbarui data di layar tanpa memuat ulang halaman.
• Tambahkan bagan dan grafik menggunakan alat seperti Matplotlib atau Plotly.
• Biarkan pengguna mengubah tampilan dengan tombol dan menu dropdown.

Sebagai contoh, saya membuat dasbor keuangan yang menampilkan harga saham live menggunakan NiceGUI dan 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()Didukung oleh

Dasbor saham real-time menggunakan NiceGUI dan Plotly. Gambar oleh Penulis.

Anda juga dapat menghubungkan aplikasi Anda ke API yang mengalirkan data live. Untuk melakukannya, Matplotlib atau Plotly akan membantu Anda membuat bagan yang menyegarkan secara otomatis saat data baru tiba, memberi pengguna tampilan pasar secara real-time.

Antarmuka machine learning

NiceGUI juga bekerja dengan baik untuk proyek machine learning. Begini cara Anda dapat menggunakannya:

• Buat layar yang mudah digunakan untuk mengubah cara kerja model Anda.
• Tampilkan hasil dari model Anda secara langsung saat terjadi.
• Biarkan pengguna menjelajahi data sebelum dan sesudah pelatihan model.

Sebagai contoh, saya membuat antarmuka untuk regresi linear:

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()Didukung oleh

NiceGUI terintegrasi ke ML. Gambar oleh Penulis.

NiceGUI vs. Kerangka UI Python Lainnya

Saat memulai proyek baru, Anda mungkin membandingkan NiceGUI dengan alternatif Python populer seperti Streamlit, Dash, dan JustPy. Meskipun setiap kerangka memiliki kelebihan dan kekurangan yang dapat memengaruhi pengembangan proyek Anda, mari bandingkan dari sisi kemudahan penggunaan dan performa.

Setelah Anda membangun aplikasi, Anda akan ingin membagikannya. Deployment membuat aplikasi Anda tersedia bagi pengguna, baik di internet maupun jaringan lokal. Karena aplikasi NiceGUI berbasis Python, Anda memiliki beberapa opsi deployment.

Opsi deployment cloud

Anda dapat memilih Google Cloud Run atau AWS — dua opsi deployment cloud paling populer. Ini langkah dasar untuk mendeploy aplikasi Anda di platform tersebut:

• Pastikan aplikasi NiceGUI Anda berfungsi secara lokal.
• Sesuaikan pengaturan seperti host dan port agar berfungsi di lingkungan cloud.
• Siapkan berkas konfigurasi yang diperlukan untuk platform cloud pilihan Anda.
• Kemas aplikasi Anda dan dorong ke container registry milik platform cloud.
• Gunakan alat platform cloud untuk mendeploy aplikasi tercontainerisasi Anda.

Proses deployment dapat sedikit berbeda tergantung jenis platform cloud yang Anda gunakan. Namun, hampir semua platform cloud menyediakan antarmuka dan alat CLI yang mudah digunakan untuk menyederhanakan proses ini, bahkan bagi yang baru di hosting cloud.

Dukungan Docker

Docker memungkinkan Anda mengemas aplikasi beserta seluruh dependensinya ke dalam satu kontainer, yang dapat dengan mudah dideploy pada sistem apa pun yang mendukung Docker. NiceGUI juga menawarkan image Docker, yang membuatnya ideal untuk kontainerisasi dan mengabstraksi banyak kompleksitas deployment.  

Image Docker mencakup semua dependensi yang diperlukan untuk memastikan konsistensi antara lingkungan pengembangan dan produksi. Namun, Anda dapat memperluas image resmi untuk menyertakan kebutuhan tambahan bagi aplikasi Anda. Proses deployment umumnya meliputi hal-hal berikut: 

• Buat Dockerfile untuk aplikasi Anda.
• Bangun image kontainer.
• Deploy image tersebut ke platform hosting pilihan Anda. 

Kesimpulan  

NiceGUI adalah kerangka Python yang mudah digunakan, bekerja secara real-time, dan dapat dipadukan dengan pustaka populer lainnya. Jadi, apakah Anda mengerjakan proyek kecil atau besar, NiceGUI adalah pilihan yang baik.

Untuk mempelajari lebih lanjut tentang bagaimana GUI membentuk masa depan pekerjaan, lihat tutorial GUIs and the Future of Work. Jika Anda mengerjakan aplikasi AI dan mencari pendekatan lain untuk membangun antarmuka pengguna, lihat tutorial ini tentang Membangun Antarmuka Pengguna untuk Aplikasi AI dengan Gradio di Python.