Membuat App dengan App Designer

Setelah memahami bahwa GUI MATLAB adalah program event-driven, pertanyaannya menjadi praktis: bagaimana membuat jendela, tombol, dan label tanpa menghitung koordinat piksel satu per satu? App Designer menjawab kebutuhan itu — lingkungan pengembangan interaktif tempat kita merancang tata letak secara visual (drag-drop), lalu mengisi perilaku lewat callback yang dibuatkan kerangkanya secara otomatis. Chapter ini memandu kita membangun app counter pertama dari nol sampai berjalan. Cakupannya:

• membuka App Designer dan memilih template
• mengenal tiga area kerja editor
• langkah bernomor membangun app counter sederhana
• menyimpan sebagai .mlapp versus berkas .m

Membuka App Designer dan Memilih Template #

Ada dua pintu masuk: dari toolstrip MATLAB tab Apps klik Design App, atau ketik appdesigner di Command Window. App Designer menampilkan start page berisi daftar template — dokumentasi resmi menyebutkan antara lain Blank App, 2-Panel App with Auto-Reflow, dan 3-Panel App with Auto-Reflow (varian panel otomatis menata ulang komponen saat jendela diubah ukurannya). Template Blank App membuka berkas baru bernama app1 yang belum tersimpan. Untuk app counter kita, pilih Blank App.

Tiga Area Kerja Editor #

Editor App Designer terbagi menjadi tiga wilayah dengan tugas berbeda:

Toolbar editor juga punya dua mode yang saling melengkapi: Design View untuk mengatur tampilan visual, dan Code View untuk membaca serta menyunting kode programatik dari app yang sedang dirancang. Kedua mode menampilkan app yang sama — yang berbeda hanyalah sudut pandang kita.

Membangun App Counter Pertama #

Mari kita bangun app yang menampilkan jumlah penekanan tombol. Ikuti langkah-langkah berikut di App Designer:

1. Menaruh Komponen ke Kanvas #

Tarik satu Button dari Component Library ke Design Area, lalu tarik satu Label di atas tombol tersebut. Setiap komponen yang jatuh ke kanvas otomatis menjadi objek dengan nama properti app (app.Button, app.Label).

2. Mengatur Properti Komponen #

Pilih tombol, lalu di Component Browser ubah properti Text menjadi Hitung dan perbesar FontSize menjadi 14. Pilih label, lalu ubah Text menjadi Tombol belum ditekan. Perubahan di panel properti langsung terlihat di kanvas — tidak ada satu baris pun koordinat piksel yang perlu kita hitung.

3. Membuat Callback Secara Otomatis #

Klik kanan tombol → Callbacks → Add ButtonPushedFcn callback. App Designer otomatis beralih ke Code View, membuat property ButtonPushedFcn pada tombol, dan menambahkan fungsi callback kosong bernama ButtonPushed ke class app. Inilah hasil struktur class yang dibentuk App Designer (disederhanakan untuk fokus ke bagian penting):

classdef appCounter < matlab.apps.AppBase
    %APPCLASS App counter: struktur yang dibentuk App Designer.
    properties (Access = public)
        UIFigure    matlab.ui.Figure
        Button      matlab.ui.control.Button
        Label       matlab.ui.control.Label
        jumlahKlik  double = 0
    end

    methods (Access = private)
        % Callback yang dibuat otomatis untuk ButtonPushedFcn
        function ButtonPushed(app, event)
            app.jumlahKlik = app.jumlahKlik + 1;
            app.Label.Text = sprintf('Tombol ditekan %d kali', ...
                app.jumlahKlik);
        end

        function createComponents(app)
            % Blok ini dikelola App Designer: jangan disunting manual.
            app.UIFigure = uifigure;
            app.Button = uibutton(app.UIFigure, "push", ...
                "Text", "Hitung", "FontSize", 14);
            app.Label = uilabel(app.UIFigure, ...
                "Text", "Tombol belum ditekan");
        end
    end

    methods (Access = public)
        function app = appCounter
            createComponents(app)
            registerApp(app, app.UIFigure)
        end
    end
end

Mari kita bedah baris-baris kode di atas:

1. Baris 2 (classdef appCounter < matlab.apps.AppBase): setiap app App Designer adalah class yang mewarisi matlab.apps.AppBase — sesuai materi OOP kita, app adalah handle class yang hidup selama jendela tampil.
2. Baris 4-8 (properties (Access = public)): komponen dan state app menjadi properti class; jumlahKlik bertipe double dengan nilai awal 0 adalah state kita.
3. Baris 12-16 (function ButtonPushed(app, event)): callback menerima app (akses ke seluruh state dan komponen) dan event (data event); isinya kita tulis sendiri — inilah satu-satunya bagian yang perlu disunting.
4. Baris 25-28 (createComponents): blok pembentuk komponen yang dikelola App Designer; bagian ini diregenerasi setiap kali kita mengubah desain, sehingga suntingan manual akan tertimpa.
5. Baris 32-38 (function app = appCounter): constructor menjalankan createComponents lalu registerApp — app siap dipakai begitu objek dibuat.

4. Menjalankan App #

Tekan Run (atau F5). MATLAB menyimpan berkas app, lalu membuat objek appCounter — jendela tampil dengan tombol Hitung. Setiap penekanan tombol menaikkan app.jumlahKlik dan mengganti teks label menjadi Tombol ditekan 1 kali, Tombol ditekan 2 kali, dan seterusnya. Menutup jendela menghapus objek app.

Logika yang Sama, Terisolasi dan Teruji #

Callback di atas hanya tiga baris, tetapi logikanya (hitung klik, bentuk teks label) layak dipisah agar bisa diuji tanpa jendela — teknik yang akan terus kita pakai di bab-bab berikutnya. Berkas contoh.m di folder chapter ini memodelkan state app sebagai struct dan callback sebagai fungsi murni:

% Padanan properties app: state yang hidup selama app berjalan.
app = struct('jumlahKlik', 0, 'labelTeks', 'Tombol belum ditekan');

for k = 1:3
    app = tombolHitungDitekan(app);
    fprintf('klik %d -> Label.Text = "%s"\n', k, app.labelTeks);
end

app = tombolResetDitekan(app);
fprintf('reset -> Label.Text = "%s"\n', app.labelTeks);

Mari kita bedah baris-baris kode di atas:

1. Baris 2 (app = struct(...)): struct app menggantikan properti class — dua field yang sama persis dengan versi App Designer.
2. Baris 4-7 (for k = 1:3): tiga “penekanan tombol” disimulasikan dengan memanggil fungsi callback tombolHitungDitekan tiga kali; setiap pemanggilan mengembalikan state yang sudah diperbarui.
3. Baris 9-10 (tombolResetDitekan): callback tombol kedua — di berkas lengkapnya, kedua callback memakai fungsi bersama formatLabel() sehingga logika teks tidak diduplikasi.

Output yang Dihasilkan:

klik 1 -> Label.Text = "Tombol ditekan 1 kali"
klik 2 -> Label.Text = "Tombol ditekan 2 kali"
klik 3 -> Label.Text = "Tombol ditekan 3 kali"
reset -> Label.Text = "Tombol belum ditekan"
state akhir: jumlahKlik=0

Menyimpan dan Membagikan App #

Dokumentasi R2026b menyatakan App Designer dapat menyimpan app dengan ekstensi .mlapp maupun .m, bergantung pengaturan — keduanya punya konsekuensi berbeda:

Untuk membagikan app ke pengguna MATLAB lain, cukup kirim berkasnya — penerima menjalankannya dengan mengetik nama app, atau lewat tombol Run di App Designer. Kebutuhan yang lebih besar (app beserta data dan dependensinya sebagai satu paket) kita bahas di chapter terakhir melalui fitur Package App.

Ringkasan #

App Designer dibuka dengan appdesigner atau tab Apps; template Blank App memberi kita class turunan matlab.apps.AppBase berisi properti komponen, createComponents, dan callback yang dibuat otomatis saat kita memilih Add ButtonPushedFcn callback. Alur kerjanya: drag komponen dari Component Library ke Design Area, atur properti di Component Browser, isi callback di Code View, lalu jalankan dengan F5. App disimpan sebagai .mlapp (format MATLAB) atau .m (teks) sesuai pengaturan. Logika app counter sendiri — penambahan klik dan pembentukan teks label — kita uji terisolasi di contoh.m karena GUI-nya hanya hidup di desktop MATLAB.