Tutorial PySide6: Membangun Aplikasi GUI dengan Python

Mari hadapi kenyataan: para pemangku kepentingan non-teknis, atau pengguna akhir, tidak tertarik pada Jupyter Notebook atau skrip Python yang Anda buat sebagai praktisi data. Mereka ingin dapat berinteraksi dengan solusi dan melihat hasilnya sendiri.

Inilah alasan kita perlu mengubah pekerjaan kita menjadi laporan insight, dasbor, atau aplikasi sains data. Sementara laporan, dasbor, dan aplikasi web sudah umum, ada alternatif yang kurang dieksplorasi: aplikasi desktop.

Bayangkan Anda dapat merancang aplikasi tempat pengguna bisa mengklik tombol, mengisi formulir, dan menavigasi melalui menu—semuanya melalui antarmuka yang jelas dan menyenangkan di desktop Anda. Keren, bukan?

Dalam tutorial ini, kami akan memperkenalkan PySide6, membantu Anda dengan instalasi awal, dan membangun aplikasi desktop pertama Anda. Kami juga akan menjelajahi widget yang umum digunakan, menyertakan visualisasi data dari pustaka sains data populer, dan berbagi sumber daya yang berguna.

Apa itu PySide6?

PySide6 adalah toolkit yang memungkinkan Anda membuat aplikasi perangkat lunak menggunakan bahasa pemrograman Python dengan antarmuka grafis yang menarik dan intuitif.

Ini seperti sekumpulan balok bangunan untuk perangkat lunak, memungkinkan bahkan pemula pemrograman untuk menyusun elemen visual dan interaktif yang membentuk sebuah aplikasi. Dengan PySide6, Anda dapat mengubah ide menjadi aplikasi nyata yang berfungsi di Windows, Mac, Linux, dan bahkan platform seluler.

Menyiapkan PySide6

Untuk penyiapan, kami mengasumsikan Anda sudah memasang Python, dan memiliki IDE biasa Anda. Proses instalasinya cukup mudah.

Buka terminal Anda dan jalankan perintah berikut, dan Anda siap melanjutkan.

pip3 install pyside6

Membangun Aplikasi PySide6 Pertama Anda

Sekarang setelah Anda berhasil memasang pustakanya, langkah berikutnya adalah membangun aplikasi PySide6 pertama Anda. Ini juga menjadi cara untuk menguji apakah penyiapannya berjalan baik sekaligus memberi Anda gambaran aplikasi desktop.

Buat file Python bernama “main.py” lalu salin dan tempel kode berikut.

import sys
from PySide6.QtWidgets import QApplication, QLabel
app = QApplication(sys.argv)
label = QLabel('Hello, PySide6!')
label.show()
sys.exit(app.exec_())

Kita akan memahami kodenya sebentar lagi, tetapi terlebih dahulu, jalankan file Python melalui terminal sebagai berikut:

python3 run main.py

Selamat, Anda telah membangun aplikasi desktop pertama Anda! Anda seharusnya melihat tampilan seperti ini:

Aplikasi desktop “Hello, PySide6” (Gambar oleh penulis)

Sekarang mari kita uraikan skrip PySide6 sederhana yang kita lihat sebelumnya. Pertama, kita mengimpor modul-modul yang relevan:

import sys
from PySide6.QtWidgets import QApplication, QLabel

• sys adalah modul pustaka standar Python yang menyediakan akses ke beberapa variabel yang digunakan atau dipelihara oleh interpreter Python. Dalam konteks aplikasi PySide6, ini biasanya digunakan untuk argumen baris perintah. Lihat tutorial parsing argumen baris perintah kami untuk mempelajari lebih lanjut.
• QApplication dan QLabel diimpor dari PySide6.QtWidgets. QApplication adalah kelas manajemen aplikasi inti di PySide6, yang diperlukan untuk aplikasi GUI apa pun. QLabel adalah widget yang menampilkan teks, yang kita gunakan untuk menampilkan pesan sederhana.

Berikutnya, kita membuat instance dari QApplication.

app = QApplication(sys.argv)

Ini diperlukan di setiap aplikasi PySide6. sys.argv digunakan untuk meneruskan argumen baris perintah ke aplikasi. Bahkan jika Anda tidak menggunakan argumen baris perintah, sys.argv tetap diperlukan karena menginisialisasi QApplication dengan beberapa nilai bawaan.

label = QLabel('Hello, PySide6!')

Selanjutnya, kita membuat widget QLabel dengan teks "Hello, PySide6!". Ini adalah teks yang akan ditampilkan di jendela aplikasi kita.

label.show()

Baris ini membuat label terlihat. Secara bawaan, widget di PySide6 tidak terlihat sampai Anda menampilkannya secara eksplisit.

sys.exit(app.exec_())

Terakhir, baris ini memulai event loop aplikasi. Metode exec_() dari QApplication memasuki loop utama aplikasi, tempat semua event (seperti klik mouse dan penekanan tombol) diproses. Pemanggilan sys.exit() memastikan keluar dengan bersih saat aplikasi ditutup. Event loop berjalan hingga instance QApplication menerima sinyal keluar, seperti menutup jendela.

Seperti yang kita lihat pada output sebelumnya, skrip kita membuat aplikasi GUI dasar dengan jendela tunggal yang menampilkan teks “Hello, PySide6!”.

Menyertakan Widget PySide6 ke dalam Aplikasi GUI

Widget dalam konteks PySide6 dan GUI adalah balok bangunan dasar yang digunakan untuk membuat antarmuka pengguna pada aplikasi perangkat lunak. Anggap widget sebagai berbagai elemen yang Anda lihat dan interaksikan di aplikasi apa pun—seperti tombol, kotak teks, label, penggeser, dan menu tarik-turun.

Pada aplikasi PySide6 pertama, kita melihat widget label yang digunakan untuk menampilkan teks. Saat membangun GUI dengan PySide6, kita pada dasarnya menyusun widget-widget ini di sebuah jendela dengan cara yang sesuai untuk aplikasi kita. Setiap widget memiliki tujuan spesifik dan berinteraksi dengan pengguna secara berbeda.

Daftar lengkap widget dan penggunaannya dapat ditemukan di dokumentasi resmi, namun yang paling umum digunakan adalah:

• QLabel: Widget untuk menampilkan teks atau gambar. Sering digunakan untuk menampilkan instruksi, pesan, atau bahkan gambar di GUI.
• QPushButton: Tombol yang dapat diklik agar pengguna memicu tindakan tertentu. Ini salah satu widget paling mendasar dalam pengembangan GUI, digunakan untuk mengirim formulir, memulai proses, dan lainnya.
• QLineEdit: Widget ini memungkinkan pengguna memasukkan dan mengedit satu baris teks. Umum digunakan pada formulir dan pengaturan yang membutuhkan input teks, seperti memasukkan nama atau angka.
• QComboBox: Kombinasi daftar tarik-turun dan kolom teks, memungkinkan pengguna memilih opsi dari daftar pilihan yang telah ditentukan atau mengetik sendiri.
• QCheckBox: Menyajikan kotak yang dapat dicentang atau tidak. Biasanya digunakan untuk mengaktifkan atau menonaktifkan fitur atau untuk menyatakan persetujuan terhadap syarat dan ketentuan.
• QRadioButton: Dirancang untuk memilih satu opsi dari satu set, radio button memungkinkan satu pilihan dalam satu grup, cocok untuk opsi seperti jenis kelamin, rentang usia, atau pilihan eksklusif lainnya.
• QTextEdit: Widget untuk pengeditan teks multi-baris, menawarkan lebih banyak fungsi dibanding QLineEdit, seperti pemformatan teks, salin-tempel, dan pengguliran.
• QSlider: Menyediakan kontrol penggeser, alat yang berguna untuk memasukkan nilai numerik dalam rentang, seperti menyesuaikan volume atau menetapkan filter harga.
• QSpinBox: Widget yang memungkinkan pengguna memilih angka dari rentang tertentu. Pengguna dapat menaikkan atau menurunkan angka menggunakan panah kecil naik dan turun.
• QProgressBar: Menampilkan progres suatu tugas. Secara visual merepresentasikan persentase penyelesaian, berguna untuk melacak progres pada proses seperti unggah atau unduh berkas.
• QTableWidget: Berguna untuk menampilkan data dalam format tabel. Memungkinkan pengorganisasian data ke dalam baris dan kolom, sehingga lebih mudah menampilkan dan berinteraksi dengan data terstruktur.

Mari kita buat aplikasi yang menggunakan widget-widget umum ini dan menampilkannya:

import sys
from PySide6.QtWidgets import QApplication, QMainWindow, QLabel, QPushButton, QLineEdit, QComboBox, QCheckBox, QRadioButton, QTextEdit, QSlider, QSpinBox, QProgressBar, QTableWidget, QTableWidgetItem, QVBoxLayout, QHBoxLayout, QWidget

class DemoWindow(QMainWindow):
   def __init__(self):
       super().__init__()

       # Main Widget and Layout
       main_widget = QWidget()
       self.setCentralWidget(main_widget)
       main_layout = QVBoxLayout(main_widget)

       # Function to add widget with label
       def add_widget_with_label(layout, widget, label_text):
           hbox = QHBoxLayout()
           label = QLabel(label_text)
           hbox.addWidget(label)
           hbox.addWidget(widget)
           layout.addLayout(hbox)

       # QLabel
       self.label = QLabel('Hello PySide6!')
       add_widget_with_label(main_layout, self.label, 'QLabel:')

       # QPushButton
       self.button = QPushButton('Click Me')
       self.button.clicked.connect(self.on_button_clicked)
       add_widget_with_label(main_layout, self.button, 'QPushButton:')

       # QLineEdit
       self.line_edit = QLineEdit()
       add_widget_with_label(main_layout, self.line_edit, 'QLineEdit:')

       # QComboBox
       self.combo_box = QComboBox()
       self.combo_box.addItems(['Option 1', 'Option 2', 'Option 3'])
       add_widget_with_label(main_layout, self.combo_box, 'QComboBox:')

       # QCheckBox
       self.check_box = QCheckBox('Check Me')
       add_widget_with_label(main_layout, self.check_box, 'QCheckBox:')

       # QRadioButton
       self.radio_button = QRadioButton('Radio Button')
       add_widget_with_label(main_layout, self.radio_button, 'QRadioButton:')

       # QTextEdit
       self.text_edit = QTextEdit()
       add_widget_with_label(main_layout, self.text_edit, 'QTextEdit:')

       # QSlider
       self.slider = QSlider()
       add_widget_with_label(main_layout, self.slider, 'QSlider:')

       # QSpinBox
       self.spin_box = QSpinBox()
       add_widget_with_label(main_layout, self.spin_box, 'QSpinBox:')

       # QProgressBar
       self.progress_bar = QProgressBar()
       add_widget_with_label(main_layout, self.progress_bar, 'QProgressBar:')

       # QTableWidget
       self.table_widget = QTableWidget(5, 3) 
       for i in range(5):
           for j in range(3):
               item = QTableWidgetItem(f"Cell {i+1},{j+1}")
               self.table_widget.setItem(i, j, item)
       add_widget_with_label(main_layout, self.table_widget, 'QTableWidget:')

   def on_button_clicked(self):
       self.label.setText('Button Clicked!')

# Run the application
app = QApplication(sys.argv)
window = DemoWindow()
window.show()
sys.exit(app.exec_())

Output-nya sebagai berikut:

Aplikasi desktop widget (Gambar oleh penulis)

Kita telah berhasil membuat aplikasi desktop yang menyertakan widget-widget paling umum. Untuk memudahkan pemahaman, kami menambahkan label untuk masing-masing widget di sampingnya. Walau ini aplikasi contoh, kini kita dapat memilih dan menggunakan salah satu widget populer ini untuk aplikasi yang lebih kompleks.

Aplikasi Visualisasi Data menggunakan PySide6, Matplotlib, dan Seaborn

Untuk membuat aplikasi ini, pertama kita pilih dataset populer dan membuat visualisasi mandiri. Langkah ini mirip dengan analisis data eksploratif sehari-hari yang kita lakukan dalam pekerjaan sains data. Lalu kita bungkus visualisasi tersebut ke dalam aplikasi desktop, seperti halnya mengubah laporan dan analisis menjadi aplikasi desktop interaktif.

Sebelum memulai, pastikan kita memiliki semua pustaka yang diperlukan dengan menjalankan perintah berikut di terminal.

pip3 install matplotlib seaborn

Langkah 1: Membuat visualisasi mandiri sederhana

Di sini, kita memuat “iris dataset” populer yang tersedia secara native di paket visualisasi Python—Seaborn. Kita menggunakan paket yang sama, bersama Matplotlib, untuk membuat visualisasi. Untuk pemahaman menyeluruh tentang plotting dengan Seaborn, Anda dapat melihat panduan visualisasi Python Seaborn kami.

import seaborn as sns
import matplotlib.pyplot as plt
# Load the Iris dataset
iris = sns.load_dataset("iris")

Kemudian, kita membuat visualisasi sebagai berikut:

plt.figure(figsize=(6, 4))
sns.scatterplot(data=iris, x="sepal_length", y="sepal_width", hue="species")
plt.title("Sepal Length vs Sepal Width")
plt.show()

Visualisasi pertama yang kita lihat adalah scatter plot panjang sepal vs. lebar sepal, diberi warna berdasarkan spesies.

Visualisasi #1: Panjang sepal vs. lebar sepal (Gambar oleh penulis)

Visualisasi kedua adalah histogram panjang petal, diberi warna berdasarkan spesies.

plt.figure(figsize=(6, 4))
sns.histplot(iris, x="petal_length", hue="species", kde=True)
plt.title("Histogram of Petal Length")
plt.show()

Dan kita melihat outputnya sebagai berikut:

Visualisasi #2: Histogram panjang petal (Gambar oleh penulis)

Terakhir, mari plotkan box plot yang menunjukkan distribusi lebar petal di berbagai spesies.

plt.figure(figsize=(6, 4))
sns.boxplot(x="species", y="petal_width", data=iris)
plt.title("Box Plot of Petal Width")
plt.show()

Visualisasinya sebagai berikut:

Plot-plot ini memberikan berbagai insight tentang dataset Iris, menampilkan relasi dan distribusi berbagai fitur di seluruh spesies iris.

Langkah 2: Mengintegrasikan visualisasi ke dalam aplikasi desktop

Pertama, mari lihat kodenya, lalu memahaminya.

import sys
import seaborn as sns
from PySide6.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget
from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas
from matplotlib.figure import Figure

class IrisVisualizer(QMainWindow):
   def __init__(self):
       super().__init__()
       self.setWindowTitle("Iris Dataset Visualizations")
       self.setGeometry(100, 100, 1200, 900)  # x, y, width, height
       self.initUI()

   def initUI(self):
       central_widget = QWidget(self)
       self.setCentralWidget(central_widget)
       layout = QVBoxLayout(central_widget)

       # Adding multiple plots
       self.addScatterPlot(layout)
       self.addHistogram(layout)
       self.addBoxPlot(layout)

   def addPlotCanvas(self, layout, plot_func):
       canvas = FigureCanvas(Figure(figsize=(6, 4)))
       plot_func(canvas.figure)
       layout.addWidget(canvas)

   def addScatterPlot(self, layout):
       def scatter_plot(figure):
           iris = sns.load_dataset("iris")
           ax = figure.add_subplot(111)
           sns.scatterplot(data=iris, x="sepal_length", y="sepal_width", hue="species", ax=ax)
           ax.set_title("Sepal Length vs Sepal Width")

       self.addPlotCanvas(layout, scatter_plot)

   def addHistogram(self, layout):
       def histogram(figure):
           iris = sns.load_dataset("iris")
           ax = figure.add_subplot(111)
           sns.histplot(iris, x="petal_length", hue="species", kde=True, ax=ax)
           ax.set_title("Histogram of Petal Length")

       self.addPlotCanvas(layout, histogram)

   def addBoxPlot(self, layout):
       def box_plot(figure):
           iris = sns.load_dataset("iris")
           ax = figure.add_subplot(111)
           sns.boxplot(x="species", y="petal_width", data=iris, ax=ax)
           ax.set_title("Box Plot of Petal Width")

       self.addPlotCanvas(layout, box_plot)

# Run the application
app = QApplication(sys.argv)
window = IrisVisualizer()
window.show()
sys.exit(app.exec_())

Kita menyusun aplikasi di sekitar kelas IrisVisualizer, yang memperluas QMainWindow milik PySide6. Kelas ini menyiapkan jendela utama dan tata letaknya, bertindak sebagai wadah untuk visualisasi kita. Setiap plot disematkan ke dalam GUI menggunakan FigureCanvasQTAgg dari Matplotlib, yang memungkinkan figur Matplotlib ditampilkan sebagai widget PySide6.

Kunci integrasi kita terletak pada metode addPlotCanvas. Metode ini membuat figur Matplotlib, merender plot di atasnya, lalu menyematkan figur tersebut ke dalam tata letak aplikasi. Metode spesifik seperti addScatterPlot, addHistogram, dan addBoxPlot mendefinisikan plot individual, yang sebelumnya merupakan plot mandiri kita. Tata letak jendela utama diatur ke tata letak kotak vertikal (QVBoxLayout), yang menumpuk semua plot secara vertikal.

Mari kita lihat aplikasi akhir kita:

Aplikasi desktop visualisasi dataset Iris (Gambar oleh penulis)

Bukankah aplikasi ini lebih baik daripada plot di Jupyter Notebook? Tentu, ini contoh sederhana, tetapi setelah kita memahami konsep di balik pembuatan aplikasi ini, kita dapat meningkatkannya menjadi dasbor insight data atau aplikasi sains data yang lengkap.

Kesimpulan

Tutorial ini memperkenalkan PySide6, pustaka Python yang memungkinkan praktisi data membuat aplikasi desktop GUI menggunakan bahasa yang paling familiar—Python. Kita memulai dengan memasang PySide6 dan membuat aplikasi desktop pertama kita.

Kita kemudian memperluasnya untuk mencakup widget-widget paling umum yang digunakan dalam aplikasi desktop.

Terakhir, kita memahami cara menyertakan visualisasi dari pustaka populer seperti Seaborn dan Matplotlib langsung ke dalam aplikasi PySide6 kita.

Untuk pembelajaran lebih lanjut, kami mendorong Anda merujuk ke dokumentasi resmi dan mengikuti rasa ingin tahu Anda untuk membuat aplikasi favorit Anda. Alternatifnya, Anda juga dapat melihat tutorial kami yang membuat aplikasi desktop GUI di Python namun menggunakan pustaka alternatif, Tkinter.