Python NiceGUI: crea potenti interfacce web con facilità

NiceGUI è un framework UI basato su Python che semplifica la creazione di interfacce web. Consente agli sviluppatori di creare interfacce grafiche utente (GUI) per applicazioni web senza conoscere HTML, CSS o JavaScript. 

In questo articolo, ti spiego come usare NiceGUI per creare interfacce facili da usare. Ma, se sei alle prime armi con Python, segui prima il corso Introduzione a Python e poi passa al percorso di competenze Python Programming per consolidare le tue abilità. 

Cos'è NiceGUI?

NiceGUI è una libreria Python che aiuta a creare interfacce utente web usando solo codice Python. Se sei uno sviluppatore Python che vuole realizzare una UI ma preferisce evitare HTML, CSS o JavaScript, NiceGUI fa per te. Si basa su tre tecnologie principali: 

• FastAPI per le operazioni di backend.
• Vue.js per l'interazione frontend.
• Tailwind CSS per lo stile. 

Tuttavia (ed è questo il vero punto di forza di NiceGUI) non devi capire queste tecnologie per usare NiceGUI in modo efficace. È abbastanza versatile da gestire sia piccole applicazioni web che progetti più complessi. Questa è una delle caratteristiche chiave di NiceGUI: l’accessibilità. Puoi creare interfacce funzionali con pochissimo codice, anche se sei nuovo a Python. Guardiamo il codice qui sotto e ti mostro cosa intendo.

Primi passi con NiceGUI

Qui tratto il processo di installazione e ti guido nella creazione della tua prima semplice applicazione.

Procedura di installazione

Esistono diversi metodi per installare NiceGUI, a seconda delle tue preferenze. Ecco come fare. Esegui i seguenti comandi nel terminale o nel prompt dei comandi. Ti propongo opzioni diverse a seconda dello strumento che usi.

Installazione via pip 

pip install niceguiOfferto da

Installazione via PyPI

python3 -m pip install niceguiOfferto da

Installazione via Docker

docker pull zauberzeug/niceguiOfferto da

Installazione via conda-forge

Per prima cosa, aggiungi conda-forge all'elenco dei canali in questo modo:

conda config --add channels conda-forge
conda config --set channel_priority strictOfferto da

Dopo aver abilitato il canale conda-forge, esegui il comando seguente per installare NiceGUI: 

conda install niceguiOfferto da

Prima semplice applicazione

Hai installato NiceGUI, quindi è il momento di creare la nostra prima interfaccia. Partiamo da un esempio di base — visualizzare un semplice messaggio di saluto. Per prima cosa, crea un nuovo file Python (ad es. app.py). Poi scrivi il seguente codice:

# Importing the module 
from nicegui import UI

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

# run it
ui.run()Offerto da

Ora esegui il codice. Puoi salvarlo ed eseguirlo cliccando il pulsante run oppure scrivendo il seguente comando nel terminale:

python app.pyOfferto da

Visualizzare l'etichetta con NiceGUI. Immagine dell'autore.

Funzionalità chiave di NiceGUI

NiceGUI sta diventando popolare per la sua semplicità, interattività e capacità di integrazione. Ecco una panoramica di ciò che lo rende un framework utile per gli sviluppatori.

Interfaccia facile da usare

A differenza di altri strumenti come Streamlit o Dash, puoi usare NiceGUI per creare interfacce grafiche con pochissime righe di codice. Ecco un esempio: 

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

Nel codice sopra, definisco un pulsante e gestisco il suo evento di clic. Quando ho cliccato il pulsante, compare il messaggio button was pressed. E questo è tutto. Non è l'esempio più complesso, ma puoi vedere quanto velocemente ho configurato questa UI funzionale senza configurazioni o logiche complicate.

Interfaccia NiceGUI con un pulsante e una notifica. Immagine dell'autore.

Interattività in tempo reale

Con NiceGUI puoi anche creare UI interattive in tempo reale che rispondono all'istante nel browser. Quando apporti modifiche al backend, gli aggiornamenti si riflettono immediatamente nel frontend, grazie alle connessioni WebSocket. Questa comunicazione continua tra server e client significa che non devi ricaricare la pagina per vedere gli aggiornamenti. 

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

Spostando lo slider, l'etichetta si aggiorna all'istante senza ricaricare la pagina. Questo mostra un vantaggio di NiceGUI rispetto a framework come Streamlit e Dash, dove gli aggiornamenti possono richiedere più lavoro.

Creazione di uno slider. Immagine dell'autore. 

Elementi visuali e layout

NiceGUI offre opzioni di layout, inclusi pulsanti, slider, grafici ed elementi 3D. Puoi disporre questi elementi in righe, colonne e card per creare interfacce senza scrivere HTML o CSS. Ecco un esempio:

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()Offerto da

Ho usato questo codice per creare un layout interattivo. Il codice importa il modulo necessario da NiceGUI, poi crea una colonna con due pulsanti e una riga con due card. La prima card contiene un controllo della temperatura, con un'etichetta e uno slider per regolare la temperatura. La seconda card contiene un grafico a linee. Infine, ui.run() esegue il codice per visualizzare il risultato.

Creazione di elementi visuali e layout. Immagine dell'autore.

Integrazione con librerie esterne

Se ti occupi di data science o visualizzazione, ho una buona notizia per te — NiceGUI funziona bene con librerie Python popolari come NumPy, Matplotlib e Plotly. Mettiamo il caso che lavori a progetti di data science che richiedono elaborazioni o visualizzazioni complesse. In questo caso, puoi usare queste librerie come faresti normalmente in Python e NiceGUI mostrerà i risultati in un'interfaccia web. 

Ecco un esempio di come usare NiceGUI insieme a Matplotlib e NumPy per creare una semplice visualizzazione dei dati in un'interfaccia web. Per prima cosa, installiamo le librerie necessarie eseguendo questo comando:

pip install nicegui numpy matplotlibOfferto da

Ora crea un semplice script Python per generare un grafico e visualizzarlo con NiceGUI in questo modo:

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()Offerto da

Grafico interattivo con NiceGUI, Matplotlib e NumPy. Immagine dell'autore.

Funzionalità avanzate e casi d'uso

Ora che conosci le basi di NiceGUI, vediamo alcune funzionalità avanzate. Ti aiuteranno a creare app web più complesse e interattive. 

Dashboard di dati

Oltre ai layout di base, con NiceGUI puoi creare anche dashboard che mostrano dati in tempo reale. Ecco come:

• Usa NiceGUI per aggiornare i dati a schermo senza ricaricare la pagina.
• Aggiungi grafici usando strumenti come Matplotlib o Plotly.
• Permetti agli utenti di modificare ciò che vedono con pulsanti e menu a discesa.

Per esempio, ho creato una dashboard finanziaria che mostra i prezzi azionari in tempo reale usando NiceGUI e 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()Offerto da

Dashboard azionaria in tempo reale con NiceGUI e Plotly. Immagine dell'autore.

Puoi anche collegare la tua app a un'API che trasmette dati in diretta. In questo modo, Matplotlib o Plotly ti aiuteranno a creare grafici che si aggiornano automaticamente all'arrivo di nuovi dati, offrendo agli utenti una vista del mercato in tempo reale.

Interfacce per il machine learning

NiceGUI si integra bene anche con progetti di machine learning. Ecco come puoi usarlo:

• Crea schermate semplici da usare per modificare il comportamento del modello.
• Mostra i risultati del modello man mano che arrivano.
• Permetti agli utenti di esplorare i dati prima e dopo l'addestramento.

Per esempio, ho creato un'interfaccia per una regressione lineare:

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()Offerto da

Integrazione di NiceGUI nel ML. Immagine dell'autore.

NiceGUI vs. altri framework UI Python

Quando inizi un nuovo progetto, potresti confrontare NiceGUI con alternative Python popolari come Streamlit, Dash e JustPy. Anche se ogni framework ha punti di forza e debolezze che possono influire sullo sviluppo del tuo progetto, confrontiamoli in termini di facilità d'uso e prestazioni.

Una volta costruita la tua app, vorrai condividerla con altri. La distribuzione rende l'app disponibile agli utenti, su internet o su una rete locale. Poiché le app NiceGUI sono basate su Python, hai diverse opzioni di distribuzione.

Opzioni di distribuzione in cloud

Puoi optare per Google Cloud Run o AWS — due tra le opzioni di distribuzione cloud più popolari. Questi sono i passaggi di base per distribuire la tua app su queste piattaforme:

• Assicurati che la tua app NiceGUI funzioni in locale.
• Regola impostazioni come host e porta per funzionare in ambiente cloud.
• Configura i file necessari per la piattaforma cloud scelta.
• Impacchetta la tua applicazione e inviala al container registry della piattaforma cloud.
• Usa gli strumenti della piattaforma cloud per distribuire la tua applicazione containerizzata.

Il processo di distribuzione può variare leggermente in base al tipo di piattaforma cloud che usi. Tuttavia, quasi tutte offrono interfacce e strumenti CLI semplici da usare che semplificano il processo, anche per chi è alle prime armi con l'hosting cloud.

Supporto Docker

Docker ti consente di impacchettare la tua app con tutte le sue dipendenze in un singolo container, facilmente distribuibile su qualsiasi sistema che supporti Docker. NiceGUI offre anche un'immagine Docker, il che lo rende ideale per la containerizzazione e astrae molte delle complessità della distribuzione.  

L'immagine Docker include tutte le dipendenze necessarie per garantire coerenza tra ambienti di sviluppo e produzione. Tuttavia, puoi estendere l'immagine ufficiale per includere ulteriori requisiti della tua applicazione. Il processo di distribuzione in genere prevede quanto segue: 

• Crea un Dockerfile per la tua applicazione.
• Crea un'immagine del container.
• Distribuisci quell'immagine sulla piattaforma di hosting scelta. 

Conclusione  

NiceGUI è un framework Python facile da usare, che funziona in tempo reale e si integra con altre librerie popolari. Che tu stia lavorando a un progetto piccolo o grande, NiceGUI è una buona scelta.

Per saperne di più su come le GUI stanno plasmando il futuro del lavoro, dai un'occhiata al tutorial GUIs and the Future of Work. Se stai lavorando su applicazioni di IA e cerchi un altro approccio per creare interfacce utente, leggi questo tutorial su Creare interfacce utente per applicazioni di IA con Gradio in Python.