Python NiceGUI: Krachtige webinterfaces bouwen met gemak

NiceGUI is een Python-gebaseerd UI-framework waarmee je eenvoudig webinterfaces maakt. Het stelt ontwikkelaars in staat grafische gebruikersinterfaces (GUI’s) voor webapplicaties te bouwen zonder kennis van HTML, CSS of JavaScript. 

In dit artikel leg ik uit hoe je met NiceGUI gebruiksvriendelijke interfaces bouwt. Ben je nieuw met Python? Volg dan eerst onze cursus Introduction to Python en ga daarna verder met de skill track Python Programming om je vaardigheden te versterken. 

Wat is NiceGUI?

NiceGUI is een Python-bibliotheek waarmee je webgebaseerde gebruikersinterfaces maakt met uitsluitend Python-code. Als je een Python-ontwikkelaar bent die een UI wil bouwen maar HTML, CSS of JavaScript wil vermijden, dan is NiceGUI iets voor jou. Het wordt ondersteund door drie hoofdtechnologieën: 

• FastAPI voor backend-bewerkingen.
• Vue.js voor frontend-interactie.
• Tailwind CSS voor styling. 

Maar (en dit is eigenlijk de kern van NiceGUI) je hoeft deze technologieën niet te begrijpen om NiceGUI effectief te gebruiken. Het is veelzijdig genoeg voor zowel kleine webapps als complexere projecten. Dat is een van de grootste krachten van NiceGUI: de toegankelijkheid. Je kunt met minimale code functionele interfaces maken, zelfs als je net met Python begint. Kijk naar de onderstaande code en ik laat je zien wat ik bedoel.

Aan de slag met NiceGUI

Hier behandel ik het installatieproces en begeleid ik je bij het maken van je eerste eenvoudige applicatie.

Installatieproces

Er zijn verschillende manieren om NiceGUI te installeren, afhankelijk van je voorkeur. Zo doe je dat. Voer de volgende opdrachten uit in je terminal of opdrachtprompt. Ik geef opties afhankelijk van de tool die je gebruikt.

Installeren via pip 

pip install niceguiMogelijk gemaakt door

Installeren via PyPI

python3 -m pip install niceguiMogelijk gemaakt door

Installeren via Docker

docker pull zauberzeug/niceguiMogelijk gemaakt door

Installeren via conda-forge

Voeg eerst conda-forge toe aan je lijst met kanalen zoals dit:

conda config --add channels conda-forge
conda config --set channel_priority strictMogelijk gemaakt door

Na het inschakelen van het conda-forge-kanaal, voer je de volgende opdracht uit om NiceGUI te installeren: 

conda install niceguiMogelijk gemaakt door

Eerste eenvoudige applicatie

Je hebt NiceGUI geïnstalleerd, dus het is tijd om onze eerste interface te maken. Laten we een basisvoorbeeld nemen — een eenvoudige begroeting tonen. Maak eerst een nieuw Python-bestand (bijv. app.py). Schrijf daarna de volgende code:

# Importing the module 
from nicegui import UI

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

# run it
ui.run()Mogelijk gemaakt door

Voer nu de code uit. Je kunt het bestand opslaan en uitvoeren door op de knop run te klikken of door de volgende opdracht in de terminal te schrijven:

python app.pyMogelijk gemaakt door

De labeltekst weergeven met NiceGUI. Afbeelding door de auteur.

Belangrijkste functies van NiceGUI

NiceGUI wordt populair door zijn eenvoud, interactiviteit en integratiemogelijkheden. Hier is een overzicht van wat het een handig framework maakt voor ontwikkelaars.

Gebruiksvriendelijke interface

In tegenstelling tot andere tools zoals Streamlit of Dash kun je met NiceGUI grafische gebruikersinterfaces maken met minimale code. Hier is een voorbeeld: 

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

In de bovenstaande code definieer ik een knop en handel ik de klikactie af. Wanneer ik op de knop klikte, verschijnt het bericht button was pressed. En dat is het. Dit is niet het meest geavanceerde voorbeeld, maar je ziet hoe snel ik deze functionele UI opzet zonder configuraties of complexe logica.

NiceGUI-interface met een knop en melding. Afbeelding door de auteur.

Realtime interactiviteit

Met NiceGUI kun je ook realtime interactieve UI’s maken die direct reageren in je webbrowser. Als je wijzigingen aanbrengt in de backend, worden die updates meteen zichtbaar aan de frontend dankzij WebSocket-verbindingen. Deze continue communicatie tussen server en client betekent dat je de pagina niet hoeft te verversen om updates te zien. 

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

Terwijl je de slider beweegt, werkt het label direct bij zonder de pagina te herladen. Dit laat een voordeel van NiceGUI zien ten opzichte van frameworks als Streamlit en Dash, waar updates meer moeite kunnen kosten.

Een slider maken. Afbeelding door de auteur. 

Visuele elementen en lay-outs

NiceGUI heeft lay-outopties, waaronder knoppen, sliders, grafieken en 3D-elementen. Je kunt deze elementen rangschikken in rijen, kolommen en kaarten om interfaces te maken zonder HTML of CSS te schrijven. Hier is een voorbeeld:

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()Mogelijk gemaakt door

Ik gebruikte deze code om een interactieve lay-out te maken. De code importeert eerst de benodigde module van NiceGUI. Daarna maakt hij een kolom met twee knoppen en een rij met twee kaarten. De eerste kaart bevat een temperatuursregeling met een label en een slider om de temperatuur aan te passen. De tweede kaart bevat een lijngrafiek. Tot slot voert ui.run() de code uit om het resultaat te tonen.

Visuele elementen en lay-outs maken. Afbeelding door de auteur.

Integratie met externe bibliotheken

Als je met data science of visualisatie bezig bent, heb ik goed nieuws voor je — NiceGUI werkt goed samen met populaire Python-bibliotheken zoals NumPy, Matplotlib en Plotly. Stel dat je aan data science-projecten werkt die complexe gegevensverwerking of visualisatie vereisen. In dat geval kun je deze bibliotheken gebruiken zoals je normaal in Python zou doen, en NiceGUI toont de resultaten voor je in een webinterface. 

Hier is een voorbeeld van hoe je NiceGUI samen met Matplotlib en NumPy kunt gebruiken om een eenvoudige datavisualisatie in een webinterface te maken. Installeer eerst de benodigde bibliotheken door dit uit te voeren:

pip install nicegui numpy matplotlibMogelijk gemaakt door

Maak nu een eenvoudig Python-script om een plot te genereren en deze met NiceGUI te tonen, zoals dit:

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()Mogelijk gemaakt door

Interactieve plot met NiceGUI, Matplotlib en NumPy. Afbeelding door de auteur.

Geavanceerde functies en use-cases

Je kent nu de basis van NiceGUI, dus laten we enkele geavanceerde functies bekijken. Die helpen je om meer complexe en interactieve webapps te bouwen. 

Datadashboards

Naast basislay-outs kun je zelfs dashboards maken die live data tonen met NiceGUI. Zo doe je dat:

• Gebruik NiceGUI om data op het scherm bij te werken zonder de pagina te herladen.
• Voeg grafieken toe met tools zoals Matplotlib of Plotly.
• Laat gebruikers aanpassen wat ze zien met knoppen en keuzemenu’s.

Zo heb ik een financieel dashboard gemaakt dat live aandelenkoersen toont met NiceGUI en 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()Mogelijk gemaakt door

Realtime aandelendashboard met NiceGUI en Plotly. Afbeelding door de auteur.

Je kunt je app ook koppelen aan een API die live data streamt. Gebruik daarvoor Matplotlib of Plotly om grafieken te maken die automatisch verversen zodra er nieuwe data binnenkomt, zodat gebruikers een realtime marktoverzicht krijgen.

Machine learning-interfaces

NiceGUI werkt ook goed met machine learning-projecten. Zo kun je het gebruiken:

• Maak gebruiksvriendelijke schermen om de werking van je model aan te passen.
• Toon resultaten van je model terwijl ze binnenkomen.
• Laat gebruikers data verkennen vóór en na het trainen van het model.

Als voorbeeld maakte ik een interface voor een lineaire regressie:

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()Mogelijk gemaakt door

NiceGUI geïntegreerd in ML. Afbeelding door de auteur.

NiceGUI vs. andere Python UI-frameworks

Als je een nieuw project start, kun je NiceGUI vergelijken met populaire Python-alternatieven zoals Streamlit, Dash en JustPy. Hoewel elk framework sterke en zwakke punten heeft die de ontwikkeling van je project kunnen beïnvloeden, laten we ze vergelijken op het gebied van gebruiksgemak en prestaties.

Zodra je je app hebt gebouwd, wil je die met anderen delen. Deployen maakt je app beschikbaar voor gebruikers, of dat nu op internet is of op een lokaal netwerk. Omdat NiceGUI-apps Python-gebaseerd zijn, heb je meerdere deploymentopties.

Cloud-deployments

Je kunt kiezen voor Google Cloud Run of AWS — twee van de populairste opties voor clouduitrol. Dit zijn de basisstappen om je app op deze platforms te deployen:

• Zorg dat je NiceGUI-app lokaal goed werkt.
• Pas instellingen zoals host en poort aan voor een cloudomgeving.
• Stel de benodigde configuratiebestanden in voor je gekozen cloudplatform.
• Verpak je applicatie en push deze naar de container registry van het cloudplatform.
• Gebruik de tools van het cloudplatform om je gecontaineriseerde applicatie te deployen.

Het deploymentproces kan licht variëren afhankelijk van het type cloudplatform dat je gebruikt. Bijna alle cloudplatforms bieden echter gebruiksvriendelijke interfaces en CLI-tools die dit proces vereenvoudigen, zelfs voor wie nieuw is met cloudhosting.

Docker-ondersteuning

Met Docker kun je je app met alle afhankelijkheden verpakken in één container, die eenvoudig kan worden uitgerold op elk systeem dat Docker ondersteunt. NiceGUI biedt ook een Docker-image, wat het ideaal maakt voor containerisatie en veel complexiteit van deployment abstraheert.  

De Docker-image bevat alle benodigde afhankelijkheden om consistentie te garanderen tussen ontwikkel- en productieomgevingen. Je kunt de officiële image echter uitbreiden met extra requirements voor je applicatie. Het deploymentproces bestaat doorgaans uit het volgende: 

• Maak een Dockerfile voor je applicatie.
• Bouw een containerimage.
• Deploy die image naar je gekozen hostingplatform. 

Conclusie  

NiceGUI is een Python-framework dat makkelijk te gebruiken is, realtime werkt en samen kan worden gebruikt met andere populaire bibliotheken. Of je nu aan een klein of groot project werkt, NiceGUI is een goede keuze.

Wil je meer leren over hoe GUI’s de toekomst van werk vormgeven? Bekijk dan de tutorial GUIs and the Future of Work. Werk je aan AI-applicaties en zoek je een andere manier om user interfaces te bouwen? Bekijk dan deze tutorial over Building User Interfaces For AI Applications with Gradio in Python.