Python NiceGUI: Crie interfaces da Web avançadas com facilidade

O NiceGUI é uma estrutura de interface do usuário baseada em Python que facilita a criação de interfaces da Web. Ele permite que os desenvolvedores criem interfaces gráficas de usuário (GUIs) para aplicativos da Web sem conhecer HTML, CSS ou JavaScript. 

Neste artigo, explicarei como você pode usar o NiceGUI para criar interfaces fáceis de usar. Mas, se você é novo no Python, faça nosso curso de Introdução ao Python e depois avance para o curso de habilidades de Programação em Python para fortalecer suas habilidades. 

O que é NiceGUI?

NiceGUI é uma biblioteca Python que ajuda a criar interfaces de usuário baseadas na Web usando apenas código Python. Se você é um desenvolvedor Python que deseja criar uma interface de usuário, mas também quer evitar HTML, CSS ou JavaScript, o NiceGUI é para você. Ele é apoiado por três tecnologias principais: 

• FastAPI para operações de back-end.
• Vue.js para interação de front-end.
• Tailwind CSS para estilização. 

No entanto (e esse é o verdadeiro objetivo do NiceGUI), você não precisa entender essas tecnologias para usar o NiceGUI de forma eficaz. É versátil o suficiente para lidar tanto com pequenos aplicativos da Web quanto com projetos mais complexos. Esse é um dos principais pontos fortes do NiceGUI: sua acessibilidade. Você pode criar interfaces funcionais com o mínimo de código, mesmo que seja um novato em Python. Vejamos o código abaixo e mostrarei a você o que quero dizer.

Primeiros passos com o NiceGUI

Aqui, abordarei o processo de instalação e orientarei você na criação do seu primeiro aplicativo simples.

Processo de instalação

Há vários métodos para instalar o NiceGUI,, dependendo de suas preferências. Veja como você pode fazer isso. Execute os seguintes comandos em seu terminal ou prompt de comando. Estou dando opções dependendo da ferramenta que você usa.

Instalar via pip 

pip install nicegui

Instalar via PyPI

python3 -m pip install nicegui

Instalar via Docker

docker pull zauberzeug/nicegui

Instalar via conda-forge

Primeiro, adicione conda-forge à sua lista de canais como este:

conda config --add channels conda-forge
conda config --set channel_priority strict

Depois de ativar o canal conda-forge, execute o seguinte comando para instalar o NiceGUI: 

conda install nicegui

Primeiro aplicativo simples

Você instalou o NiceGUI, então é hora de criar nossa primeira interface. Vamos dar um exemplo básico: exibir uma mensagem simples de olá. Primeiro, crie um novo arquivo Python (por exemplo, app.py). Em seguida, escreva o seguinte código:

# Importing the module 
from nicegui import UI

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

# run it
ui.run()

Agora, execute o código. Você pode salvá-lo e executá-lo clicando no botão Executar ou escrevendo o seguinte comando no terminal:

python app.py

Exiba o rótulo usando o NiceGUI. Imagem do autor.

Principais recursos do NiceGUI

A NiceGUI está se tornando popular por sua simplicidade, interatividade e recursos de integração. Aqui está um resumo do que faz dele uma estrutura útil para os desenvolvedores.

Interface amigável ao usuário

Diferentemente de outras ferramentas, como Streamlit ou Dash, você pode usar o NiceGUI para criar interfaces gráficas de usuário com o mínimo de código. Aqui está um exemplo: 

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

No código acima, defino um botão e manipulo seu evento de clique. Quando eu clico no botão, aparece a mensagem de que o botão foi pressionado . E é isso. Este não é o exemplo mais complicado, embora você possa ver a rapidez com que configurei essa UI funcional sem configurações ou qualquer lógica complexa.

Interface NiceGUI com um botão e notificação. Imagem do autor.

Interatividade em tempo real

Com o NiceGUI, você também pode criar UIs interativas em tempo real que respondem instantaneamente no navegador da Web. Quando você faz alterações no backend, essas atualizações são refletidas imediatamente no frontend, graças às conexões WebSocket. Essa comunicação contínua entre o servidor e o cliente significa que você não precisa atualizar a página para ver as atualizações. 

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

À medida que você move o controle deslizante, o rótulo é atualizado instantaneamente sem recarregar a página. Isso mostra uma vantagem do NiceGUI em comparação com estruturas como Streamlit e Dash, em que as atualizações podem exigir mais esforço.

Criando um controle deslizante. Imagem do autor. 

Elementos visuais e layouts

O NiceGUI tem opções de layout, incluindo botões, controles deslizantes, gráficos e elementos 3D. Você pode organizar esses elementos em linhas, colunas e cartões para criar interfaces sem escrever HTML ou CSS. Aqui está um exemplo:

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

Usei esse código para criar um layout interativo. O código primeiro importa o módulo necessário do NiceGUI. Em seguida, ele cria uma coluna contendo dois botões e uma linha com dois cartões. O primeiro cartão contém um controle de temperatura, que tem uma etiqueta e um controle deslizante para ajustar a temperatura. O segundo cartão contém um gráfico de linhas. Por fim, o site ui.run() executa o código para exibir o resultado.

Criação de elementos visuais e layouts. Imagem do autor.

Integração com bibliotecas externas

Se você gosta de ciência ou visualização de dados, tenho boas notícias para você: o NiceGUI funciona bem com bibliotecas populares do Python, como NumPy, Matplotlib e Plotly. Digamos que você trabalhe em projetos de ciência de dados que exijam processamento ou visualização de dados complexos. Nesse caso, você pode usar essas bibliotecas como faria normalmente no Python, e o NiceGUI exibirá os resultados para você em uma interface baseada na Web. 

Aqui está um exemplo de como você pode usar o NiceGUI junto com o Matplotlib e o NumPy para criar uma visualização básica de dados em uma interface baseada na Web. Primeiro, instalamos as bibliotecas necessárias executando o seguinte:

pip install nicegui numpy matplotlib

Agora, crie um script Python simples para gerar um gráfico e exibi-lo usando o NiceGUI, assim:

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

Gráfico interativo usando NiceGUI, Matplotlib e NumPy. Imagem do autor.

Recursos avançados e casos de uso

Agora que você conhece os conceitos básicos do NiceGUI, vamos examinar alguns de seus recursos avançados. Eles ajudarão você a criar aplicativos da Web mais complexos e interativos. 

Painéis de dados

Além dos layouts básicos, você pode até criar painéis que mostram dados ao vivo usando o NiceGUI. Veja como:

• Use o NiceGUI para atualizar os dados na tela sem recarregar a página.
• Adicione tabelas e gráficos usando ferramentas como Matplotlib ou Plotly.
• Permita que os usuários alterem o que veem com botões e menus suspensos.

Por exemplo, criei um painel financeiro que mostra os preços das ações em tempo real 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()

Painel de ações em tempo real usando NiceGUI e Plotly. Imagem do autor.

Você também pode conectar seu aplicativo a uma API que transmite dados ao vivo. Para isso, o Matplotlib ou o Plotly ajudarão você a criar gráficos que se atualizam automaticamente à medida que novos dados chegam, oferecendo aos usuários uma visão do mercado em tempo real.

Interfaces de aprendizado de máquina

O NiceGUI também funciona bem com projetos de aprendizado de máquina. Veja como você pode usá-lo:

• Crie telas fáceis de usar para alterar o funcionamento do seu modelo.
• Mostre os resultados do seu modelo à medida que eles acontecem.
• Permita que os usuários explorem os dados antes e depois do treinamento do modelo.

Como exemplo, criei uma interface para uma regressão 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()

NiceGUI integrado ao ML. Imagem do autor.

NiceGUI vs. Outras estruturas de interface do usuário do Python

Ao iniciar um novo projeto, você pode comparar o NiceGUI com alternativas populares do Python, como Streamlit, Dash e JustPy. Embora cada estrutura tenha pontos fortes e fracos que podem afetar o desenvolvimento do seu projeto, vamos compará-las em termos de facilidade de uso e desempenho.

Depois de criar seu aplicativo, você vai querer compartilhá-lo com outras pessoas. A implantação torna seu aplicativo disponível para os usuários, seja na Internet ou em uma rede local. Como os aplicativos NiceGUI são baseados em Python, você tem várias opções de implantação.

Opções de implementação na nuvem

Você pode optar pelo Google Cloud Run ou pelo AWS, duas das opções mais populares de implementação na nuvem. Estas são as etapas básicas para que você implemente seu aplicativo nessas plataformas:

• Certifique-se de que seu aplicativo NiceGUI esteja funcionando localmente.
• Ajuste as configurações como host e porta para trabalhar em um ambiente de nuvem.
• Defina os arquivos de configuração necessários para a plataforma de nuvem que você escolheu.
• Empacote seu aplicativo e envie-o para o registro de contêineres da plataforma de nuvem.
• Use as ferramentas da plataforma de nuvem para implementar seu aplicativo em contêiner.

O processo de implementação pode variar um pouco, dependendo do tipo de plataforma de nuvem que você usa. No entanto, quase todas as plataformas de nuvem oferecem interfaces fáceis de usar e ferramentas de CLI que simplificam esse processo, mesmo para os novatos em hospedagem na nuvem.

Suporte ao Docker

O Docker permite que você empacote seu aplicativo com todas as suas dependências em um único contêiner, que pode ser facilmente implantado em qualquer sistema compatível com o Docker. O NiceGUI também oferece uma imagem do Docker, o que o torna ideal para a conteinerização e abstrai muitas das complexidades da implantação.  

A imagem do Docker inclui todas as dependências necessárias para garantir a consistência entre os ambientes de desenvolvimento e produção. No entanto, você pode ampliar a imagem oficial para incluir requisitos adicionais para o seu aplicativo. O processo de implantação geralmente envolve o seguinte: 

• Crie um Dockerfile para seu aplicativo.
• Crie uma imagem de contêiner.
• Implemente essa imagem na plataforma de hospedagem que você escolheu. 

Conclusão  

O NiceGUI é uma estrutura Python que é fácil de usar, funciona em tempo real e pode ser usada com outras bibliotecas populares. Portanto, quer você esteja trabalhando em um projeto pequeno ou grande, o NiceGUI é uma boa opção.

Para saber mais sobre como as GUIs estão moldando o futuro do trabalho, confira o tutorial GUIs e o futuro do trabalho. Se você estiver trabalhando em aplicativos de IA e estiver procurando outra abordagem para criar interfaces de usuário, confira este tutorial sobre como criar interfaces de usuário para aplicativos de IA com Gradio em Python.