Pemrograman Reaktif di Python Menggunakan Library Signified

Photo by Chris Weiher on Unsplash

Pemrograman reaktif adalah paradigma yang memungkinkan kita untuk menangani perubahan data secara otomatis dengan menghubungkan komponen-komponen dalam aplikasi melalui aliran data. Dalam konteks Python, kita bisa menggunakan berbagai library untuk mencapai tujuan ini. Salah satunya adalah Signified, yang memungkinkan penggunaan sinyal untuk menangani perubahan nilai secara otomatis.

Di bawah ini, kami akan menjelaskan bagaimana cara membuat aplikasi sederhana menggunakan Signified untuk pemrograman reaktif di Python, serta menjelaskan komponen dan alur program yang telah Anda buat.

Kali ini kita akan membuat dua window berbeda, yang satu untuk increment dan satunya lagi menampilkan nilai setelah di increment.

Komponen Utama Program

Program ini memiliki dua komponen utama:

1. IncrementWindow: Sebuah jendela yang memungkinkan pengguna untuk mengklik tombol untuk menaikkan nilai.
2. DisplayWindow: Sebuah jendela yang menampilkan nilai yang berubah setiap kali tombol di klik.

Selain itu, kita menggunakan Signal dari library Signified untuk memfasilitasi komunikasi antara dua jendela tersebut. Dan juga PyQt5 untuk membuat window-nya. Pertama-tama install kedua library tersebut

pip install pyqt5
pip install signified

Alur Program

1. Import Library

Tambahkan library terkait pada editor

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QPushButton, QLabel
from signified import Signal

2. Deklarasi Signal

Di sini, kita mendeklarasikan sebuah sinyal val dengan nilai awal 1. Sinyal ini akan menjadi tempat untuk menyimpan dan mengubah nilai yang akan digunakan dalam komunikasi antar jendela.

val = Signal(1)

3. IncrementWindow

class IncrementWindow(QWidget):
    def __init__(self, update_label):
        super().__init__()
        self.setWindowTitle("Increment Window")
        self.layout = QVBoxLayout()
        self.resize(150, 150)

        self.increment_button = QPushButton("Increment")
        self.increment_button.clicked.connect(self.increment)

        self.layout.addWidget(self.increment_button)
        self.setLayout(self.layout)

        # Signal to communicate with the display window
        self.value_signal = val
        self.counter = 0

        self.update_label = update_label

    def increment(self):
        self.counter += 1
        self.value_signal.value = self.counter
        try:
            self.update_label()
        except:
            pass

Kelas IncrementWindow membuat sebuah jendela dengan tombol "Increment". Setiap kali tombol diklik, nilai counter akan bertambah 1, dan nilai sinyal val akan diperbarui dengan nilai counter yang baru.

Fungsi increment() yang dipanggil saat tombol diklik akan memperbarui nilai val dan memicu pembaruan nilai pada jendela lain melalui metode update_label.

4. DisplayWindow

class DisplayWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("Display Window")
        self.layout = QVBoxLayout()
        self.resize(150, 150)

        self.label = QLabel("0")
        self.layout.addWidget(self.label)
        self.setLayout(self.layout)

    def update_label(self):
        self.label.setText(str(val))

Kelas DisplayWindow adalah jendela yang menampilkan nilai yang terkini dari sinyal val. Ketika sinyal val diperbarui, fungsi update_label() akan dipanggil, dan label akan diperbarui dengan nilai terbaru dari sinyal tersebut.

5. MainApp

class MainApp:
    def __init__(self):
        self.app = QApplication(sys.argv)

        self.display_window = DisplayWindow()
        self.increment_window = IncrementWindow(self.display_window.update_label)

    def run(self):
        self.display_window.show()
        self.increment_window.show()
        sys.exit(self.app.exec_())

Kelas MainApp menginisialisasi aplikasi PyQt5 dan menampilkan kedua jendela (DisplayWindow dan IncrementWindow). Jendela IncrementWindow menerima referensi ke fungsi update_label dari DisplayWindow, yang akan dipanggil untuk memperbarui tampilan saat nilai berubah.

6. Main Program

if __name__ == "__main__":
    app = MainApp()
    app.run()

Bagian ini menjalankan aplikasi dengan memulai MainApp dan memanggil metode run() untuk menampilkan jendela-jendela aplikasi.

Penjelasan Alur Kerja

• Ketika aplikasi dijalankan, dua jendela akan muncul: satu untuk menampilkan nilai (DisplayWindow), dan satu lagi dengan tombol untuk menaikkan nilai (IncrementWindow).
• Setiap kali tombol “Increment” diklik di jendela IncrementWindow, nilai counter akan meningkat, dan sinyal val akan diperbarui.
• Ketika nilai val berubah, fungsi update_label() di jendela DisplayWindow akan dipanggil secara otomatis untuk memperbarui tampilan nilai yang ditampilkan di label.

Berikut adalah program lengkapnya

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QPushButton, QLabel
from signified import Signal

val = Signal(1)

class IncrementWindow(QWidget):
    def __init__(self, update_label):
        super().__init__()
        self.setWindowTitle("Increment Window")
        self.layout = QVBoxLayout()
        self.resize(150, 150)

        self.increment_button = QPushButton("Increment")
        self.increment_button.clicked.connect(self.increment)

        self.layout.addWidget(self.increment_button)
        self.setLayout(self.layout)

        # Signal to communicate with the display window
        self.value_signal = val # <--- assign nilai val
        self.counter = 0

        self.update_label = update_label

    def increment(self):
        self.counter += 1
        self.value_signal.value = self.counter # <--- update nilai val
        try:
            self.update_label()
        except:
            pass

class DisplayWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("Display Window")
        self.layout = QVBoxLayout()
        self.resize(150, 150)

        self.label = QLabel("0")
        self.layout.addWidget(self.label)
        self.setLayout(self.layout)

    def update_label(self):
        self.label.setText(str(val)) # <--- tampilkan nilai val

class MainApp:
    def __init__(self):
        self.app = QApplication(sys.argv)

        self.display_window = DisplayWindow()
        self.increment_window = IncrementWindow(self.display_window.update_label)

    def run(self):
        self.display_window.show()
        self.increment_window.show()
        sys.exit(self.app.exec_())

if __name__ == "__main__":
    app = MainApp()
    app.run()

Kesimpulan

Program ini menunjukkan bagaimana pemrograman reaktif dapat diterapkan di Python menggunakan Signified. Sinyal val digunakan untuk menyinkronkan perubahan data antar jendela, dan setiap perubahan secara otomatis memicu pembaruan tampilan. Pendekatan ini membuat pengelolaan aliran data dalam aplikasi GUI menjadi lebih sederhana dan efisien.