Python NiceGUI: Güçlü Web Arayüzlerini Kolayca Oluşturun

NiceGUI, web arayüzleri oluşturmayı kolaylaştıran Python tabanlı bir UI framework’üdür. Geliştiricilerin, HTML, CSS veya JavaScript bilmeden web uygulamaları için grafik kullanıcı arayüzleri (GUI) oluşturmalarına olanak tanır. 

Bu yazıda, kullanıcı dostu arayüzleri NiceGUI ile nasıl oluşturabileceğinizi anlatacağım. Ancak Python’a yeni başladıysanız, önce Python’a Giriş kursumuzu alın ve ardından becerilerinizi pekiştirmek için Python Programlama beceri yoluna ilerleyin. 

NiceGUI nedir?

NiceGUI, yalnızca Python kodu kullanarak web tabanlı kullanıcı arayüzleri oluşturmaya yardımcı olan bir Python kütüphanesidir. Bir Python geliştiricisiyseniz ve UI oluşturmak istiyor ancak HTML, CSS veya JavaScript’ten uzak durmak istiyorsanız, NiceGUI tam size göre. Üç ana teknolojiyle desteklenir: 

• FastAPI arka uç işlemleri için.
• Vue.js ön uç etkileşimi için.
• Tailwind CSS stil vermek için. 

Yine de (ve aslında NiceGUI’nin esas noktası bu) NiceGUI’yi etkili biçimde kullanmak için bu teknolojileri anlamanız gerekmez. Hem küçük web uygulamalarını hem de daha karmaşık projeleri kaldıracak kadar esnektir. Bu da NiceGUI’nin temel güçlü yanlarından biridir: erişilebilirlik. Python’a yeni olsanız bile, az kodla işlevsel arayüzler oluşturabilirsiniz. Aşağıdaki koda bakalım; ne demek istediğimi göstereyim.

NiceGUI ile Başlarken

Burada kurulum sürecini ele alacak ve ilk basit uygulamanızı oluşturma konusunda sizi yönlendireceğim.

Kurulum süreci

NiceGUI’yi kurmanın birkaç yöntemi vardır, tercihinize bağlı olarak. İşte nasıl yapılacağı. Aşağıdaki komutları terminalinizde veya komut isteminde çalıştırın. Kullandığınız araca göre seçenekler sunuyorum.

pip ile kurulum 

pip install niceguiAltyapı:

PyPI üzerinden kurulum

python3 -m pip install niceguiAltyapı:

Docker ile kurulum

docker pull zauberzeug/niceguiAltyapı:

conda-forge ile kurulum

Önce conda-forge kanalını şu şekilde kanal listenize ekleyin:

conda config --add channels conda-forge
conda config --set channel_priority strictAltyapı:

conda-forge kanalını etkinleştirdikten sonra, NiceGUI’yi kurmak için şu komutu çalıştırın: 

conda install niceguiAltyapı:

İlk basit uygulama

NiceGUI’yi kurdunuz; şimdi ilk arayüzümüzü oluşturalım. Basit bir örnek alalım — basit bir merhaba mesajı gösterelim. Önce yeni bir Python dosyası oluşturun (ör. app.py). Ardından şu kodu yazın:

# Importing the module 
from nicegui import UI

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

# run it
ui.run()Altyapı:

Şimdi kodu çalıştırın. Dosyayı kaydedip run düğmesine tıklayarak çalıştırabilir veya terminalde şu komutu yazabilirsiniz:

python app.pyAltyapı:

Etiketi NiceGUI ile görüntüleme. Görsel: Yazar.

NiceGUI’nin Temel Özellikleri

NiceGUI, sadeliği, etkileşimi ve entegrasyon yetenekleri sayesinde popülerleşiyor. İşte geliştiriciler için onu faydalı bir framework yapan unsurların özeti.

Kullanıcı dostu arayüz

Streamlit veya Dash gibi diğer araçlardan farklı olarak, NiceGUI ile çok az kodla grafik kullanıcı arayüzleri oluşturabilirsiniz. İşte bir örnek: 

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

Yukarıdaki kodda bir düğme tanımlıyor ve tıklama olayını işliyorum. Düğmeye tıkladığımda button was pressed mesajı beliriyor. Hepsi bu. Bu en karmaşık örnek değil; ancak, yapılandırma veya karmaşık mantık olmadan bu işlevsel UI’ı ne kadar hızlı kurduğumu görebilirsiniz.

Bir düğme ve bildirim içeren NiceGUI arayüzü. Görsel: Yazar.

Gerçek zamanlı etkileşim

NiceGUI ile, tarayıcınızda anında yanıt veren gerçek zamanlı etkileşimli UI’lar da oluşturabilirsiniz. Arka uçta değişiklik yaptığınızda, WebSocket bağlantıları sayesinde bu güncellemeler ön yüzde hemen yansır. Sunucu ve istemci arasındaki bu kesintisiz iletişim, güncellemeleri görmek için sayfayı yenilemenizi gerektirmez. 

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

Kaydırıcıyı hareket ettirdikçe etiket, sayfa yeniden yüklenmeden anında güncellenir. Bu, güncellemelerin daha fazla çaba gerektirebildiği Streamlit ve Dash gibi framework’lere kıyasla NiceGUI’nin bir avantajını gösterir.

Bir kaydırıcı oluşturma. Görsel: Yazar. 

Görsel öğeler ve yerleşimler

NiceGUI; düğmeler, kaydırıcılar, grafikler ve 3D öğeler dahil olmak üzere yerleşim seçeneklerine sahiptir. Bu öğeleri satırlarda, sütunlarda ve kartlarda düzenleyerek HTML veya CSS yazmadan arayüzler oluşturabilirsiniz. İşte bir örnek:

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()Altyapı:

Bu kodu, etkileşimli bir yerleşim oluşturmak için kullandım. Kod, önce NiceGUI’den gerekli modülü içe aktarır. Ardından iki düğme içeren bir sütun ve iki kartlı bir satır oluşturur. İlk kartta bir etiket ve sıcaklığı ayarlamak için bir kaydırıcı bulunan bir sıcaklık kontrolü vardır. İkinci kartta ise bir çizgi grafik bulunur. Son olarak ui.run() sonucu görüntülemek için kodu çalıştırır.

Görsel öğeler ve yerleşimler oluşturma. Görsel: Yazar.

Harici kütüphanelerle entegrasyon

Veri bilimi veya görselleştirmeyle ilgileniyorsanız iyi haberlerim var — NiceGUI, NumPy, Matplotlib ve Plotly gibi popüler Python kütüphaneleriyle iyi çalışır. Diyelim ki karmaşık veri işleme veya görselleştirme gerektiren veri bilimi projeleri üzerinde çalışıyorsunuz. Bu durumda, bu kütüphaneleri Python’da alıştığınız gibi kullanabilir ve NiceGUI sonuçları sizin için web tabanlı bir arayüzde görüntüler. 

İşte NiceGUI’yi Matplotlib ve NumPy ile birlikte kullanarak web tabanlı bir arayüzde temel bir veri görselleştirmesi oluşturmanın bir örneği. Önce şu komutu çalıştırarak gerekli kütüphaneleri kuruyoruz:

pip install nicegui numpy matplotlibAltyapı:

Şimdi, bir grafik üretip NiceGUI ile görüntülemek için basit bir Python betiği oluşturun:

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()Altyapı:

NiceGUI, Matplotlib ve NumPy kullanılarak etkileşimli grafik. Görsel: Yazar.

Gelişmiş Özellikler ve Kullanım Senaryoları

Artık NiceGUI’nin temellerini biliyorsunuz; şimdi bazı gelişmiş özelliklerine bakalım. Bunlar, daha karmaşık ve etkileşimli web uygulamaları oluşturmanıza yardımcı olur. 

Veri panoları

Temel yerleşimlerin ötesinde, NiceGUI ile canlı veriler gösteren panolar da oluşturabilirsiniz. İşte nasıl:

• Sayfayı yenilemeden ekrandaki verileri güncellemek için NiceGUI’yi kullanın.
• Matplotlib veya Plotly gibi araçlarla grafikler ekleyin.
• Kullanıcıların gördüklerini düğmeler ve açılır menülerle değiştirmesine izin verin.

Örneğin, NiceGUI ve Matplotlib kullanarak canlı hisse senedi fiyatlarını gösteren bir finans panosu oluşturdum.

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()Altyapı:

NiceGUI ve Plotly ile gerçek zamanlı hisse senedi panosu. Görsel: Yazar.

Ayrıca uygulamanızı canlı veri yayınlayan bir API’ye bağlayabilirsiniz. Bunu yapmak için, Matplotlib veya Plotly yeni veriler geldikçe otomatik yenilenen grafikler oluşturmanıza yardımcı olur ve kullanıcılara gerçek zamanlı piyasa görünümü sunar.

Makine öğrenimi arayüzleri

NiceGUI, makine öğrenimi projeleriyle de iyi çalışır. İşte nasıl kullanabileceğiniz:

• Modelinizin çalışma şeklini değiştirmenizi sağlayan, kullanımı kolay ekranlar oluşturun.
• Modelinizin sonuçlarını anlık olarak gösterin.
• Kullanıcıların modeli eğitmeden önce ve sonra veriyi keşfetmesine izin verin.

Örnek olarak, doğrusal regresyon için bir arayüz oluşturdum:

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()Altyapı:

ML ile NiceGUI entegrasyonu. Görsel: Yazar.

NiceGUI ve Diğer Python UI Framework’leri

Yeni bir projeye başlarken, NiceGUI’yi Streamlit, Dash ve JustPy gibi popüler Python alternatifleriyle karşılaştırabilirsiniz. Her framework’ün, projenizin geliştirilmesini etkileyebilecek güçlü ve zayıf yönleri olsa da, gelin bunları kullanım kolaylığı ve performans açısından karşılaştıralım.

Uygulamanızı oluşturduktan sonra, onu başkalarıyla paylaşmak isteyeceksiniz. Dağıtım, uygulamanızı internet veya yerel ağ üzerinden kullanıma açar. NiceGUI uygulamaları Python tabanlı olduğundan, birden fazla dağıtım seçeneğiniz vardır.

Bulut dağıtım seçenekleri

En popüler bulut dağıtım seçeneklerinden ikisi olan Google Cloud Run veya AWS’i tercih edebilirsiniz. Uygulamanızı bu platformlarda dağıtmanın temel adımları şunlardır:

• NiceGUI uygulamanızın yerelde sorunsuz çalıştığından emin olun.
• Bulut ortamında çalışması için ana makine (host) ve port gibi ayarları düzenleyin.
• Seçtiğiniz bulut platformu için gerekli yapılandırma dosyalarını hazırlayın.
• Uygulamanızı paketleyip bulut platformunun konteyner kaydına gönderin.
• Platformun araçlarını kullanarak konteynerleştirilmiş uygulamanızı dağıtın.

Kullandığınız bulut platformunun türüne göre dağıtım süreci biraz değişebilir. Ancak neredeyse tüm bulut platformları, bu süreci bulut barındırmaya yeni olanlar için bile kolaylaştıran kullanıcı dostu arayüzler ve CLI araçları sunar.

Docker desteği

Docker, uygulamanızı tüm bağımlılıklarıyla tek bir konteynere paketlemenize olanak tanır; bu da Docker’ı destekleyen herhangi bir sistemde kolayca dağıtılabilir. NiceGUI ayrıca bir Docker imajı sunar; bu da konteynerleştirme için idealdir ve dağıtımın birçok karmaşıklığını soyutlar.  

Bu Docker imajı, geliştirme ve üretim ortamları arasında tutarlılığı sağlamak için gerekli tüm bağımlılıkları içerir. Ancak, resmi imajı uygulamanızın ek gereksinimlerini dahil edecek şekilde genişletebilirsiniz. Dağıtım süreci genel olarak şunları içerir: 

• Uygulamanız için bir Dockerfile oluşturun.
• Bir konteyner imajı oluşturun.
• Bu imajı seçtiğiniz barındırma platformuna dağıtın. 

Sonuç  

NiceGUI, kullanımı kolay, gerçek zamanlı çalışan ve diğer popüler kütüphanelerle birlikte kullanılabilen bir Python framework’üdür. Bu nedenle küçük ya da büyük bir projede çalışıyor olun, NiceGUI iyi bir tercihtir.

GUI’lerin işin geleceğini nasıl şekillendirdiği hakkında daha fazla bilgi edinmek için GUI’ler ve İşin Geleceği başlıklı öğreticiyi inceleyin. Yapay zekâ uygulamaları üzerinde çalışıyor ve kullanıcı arayüzleri oluşturmak için farklı bir yaklaşım arıyorsanız, Python ile Gradio Kullanarak Yapay Zekâ Uygulamaları için Kullanıcı Arayüzleri Oluşturma öğreticisine göz atın.