Perkenalan App Designer

App Designer adalah editor visual di MATLAB untuk merancang dan membangun aplikasi berbasis antarmuka pengguna grafis (GUI, graphical user interface) tanpa menulis kode tata letak secara manual. Topik ini membahas anatomi jendela App Designer serta alur kerja penyusunan aplikasi dari komponen sampai callback, yakni fungsi yang dijalankan ketika sebuah peristiwa terjadi pada komponen, misalnya tombol ditekan. Alur tersebut diterapkan pada kasus panduan kalkulator dua operan dengan operasi tambah, kurang, kali, dan bagi. Inti perhitungan kalkulator dipisahkan dari tampilan menjadi fungsi biasa sehingga dapat diuji di Command Window, dan seluruh contoh inti pada topik ini dijalankan nyata.

Apa itu App Designer ?#

App Designer adalah lingkungan perancangan aplikasi yang diperkenalkan pada rilis R2016a sebagai penerus GUIDE, editor antarmuka lama yang berdiri di atas jendela figure dan fungsi uicontrol. Sebuah aplikasi disimpan sebagai satu berkas .mlapp yang memuat tata letak beserta seluruh kodenya, sehingga tampilan dan perilaku terpelihara dalam satu berkas yang sama. MathWorks menandai GUIDE sebagai fitur usang dan menganjurkan aplikasi baru dibangun dengan App Designer. Komponen yang dipasang oleh App Designer berasal dari keluarga uifigure, generasi komponen yang dirender sebagai komponen web dan memiliki tampilan serta perilaku yang lebih modern daripada komponen lama.

Jendela editor terbagi menjadi tiga wilayah kerja. Palet komponen di sisi kiri memuat daftar komponen yang siap ditarik, mulai dari kolom isian, tombol, sampai panel dan tab. Area rancangan di tengah menampilkan wujud jendela aplikasi yang sedang dibangun lengkap dengan garis bantu perataan yang memudahkan peletakan. Tampilan kode (Code View) menampilkan kode yang dihasilkan editor beserta tempat callback ditulis. Anatomi ketiga wilayah itu tampak pada diagram berikut.

Ketiga wilayah tersebut membentuk siklus kerja yang sama untuk aplikasi sekecil kalkulator maupun sebesar dasbor pemantauan data. Komponen ditarik dari palet ke area rancangan, properti komponen diatur, lalu perilakunya diisi di tampilan kode. Editor menghasilkan kode tata letak secara otomatis sehingga penulis aplikasi hanya menulis bagian yang menentukan perilaku.

Alur kerja dari komponen sampai callback#

Pembangunan kalkulator dua operan di App Designer berjalan dalam lima langkah berurutan.

1. Buka editor dengan mengetik appdesigner di Command Window, lalu pilih template Blank App.
2. Tarik komponen dari palet ke area rancangan, yaitu dua EditField bertipe numeric untuk kedua operan, satu DropDown untuk operasi, satu Button untuk memicu perhitungan, dan satu Label untuk hasil.
3. Atur properti tiap komponen pada panel properti, misalnya Name menjadi BilanganPertama dan teks tombol menjadi Hitung.
4. Klik kanan tombol, buka tab Callbacks, lalu tambahkan callback pada properti ButtonPushedFcn yang otomatis membuat kerangka fungsinya di tampilan kode.
5. Isi badan callback dengan pemanggilan fungsi inti, kemudian jalankan aplikasi dengan tombol Run.

DropDown diisi empat pilihan operasi pada properti Items, dan pilihan yang sedang aktif terbaca dari properti Value sebagai teks. EditField bertipe numeric langsung memberikan angka pada properti Value sehingga callback tidak perlu mengonversi teks menjadi bilangan. Nama komponen yang bermakna menentukan nama properti pada objek app, misalnya komponen bernama BilanganPertama diakses sebagai app.BilanganPertama.Value.

Inti perhitungan terpisah dari tampilan#

Prinsip yang dipakai kasus panduan ini sederhana: callback hanya membaca masukan, memanggil fungsi inti, dan menuliskan hasil. Seluruh aturan perhitungan berada pada fungsi biasa dalam berkas .m terpisah sehingga dapat diuji di Command Window tanpa membuka aplikasinya. Pemisahan ini membuat kesalahan perhitungan ditemukan lebih cepat karena tidak perlu menekan tombol aplikasi setiap kali ingin menguji satu cabang logika.

Perilaku bawaan aritmetika perlu diamati lebih dahulu karena memengaruhi rancangan fungsi inti. Pembagian dua bilangan mengikuti standar floating point IEEE 754, sehingga pembagian dengan nol menghasilkan Inf dan bukan error.

a = 12;
b = 0;
c = a / b

c = Inf

Nilai Inf sah untuk perhitungan numerik, tetapi kalkulator harus menolak operasi itu dengan pesan yang dapat ditampilkan ke pengguna. Penolakan tersebut dinyatakan eksplisit di dalam fungsi inti berikut.

function hasil = hitung_kalkulator(a, b, kode)
% HITUNG_KALKULATOR inti perhitungan kalkulator dua operan.
%   hasil = HITUNG_KALKULATOR(a, b, kode) menghitung dua bilangan
%   menurut kode operasi 'tambah', 'kurang', 'kali', atau 'bagi'.
%   Pembagian dengan nol dan kode yang tak dikenal memicu error.
%   Tanpa argumen, contoh 12 tambah 4 dipakai.

if nargin < 3
  a = 12;
  b = 4;
  kode = 'tambah';
end

switch kode
  case 'tambah'
    hasil = a + b;
  case 'kurang'
    hasil = a - b;
  case 'kali'
    hasil = a * b;
  case 'bagi'
    if b == 0
      error('kalkulator:pembagianNol', ...
            'pembagian dengan nol tidak diizinkan');
    end
    hasil = a / b;
  otherwise
    error('kalkulator:kodeTakDikenal', ...
          'kode operasi tak dikenal: %s', kode);
end
end

Fungsi ini menerima dua bilangan dan satu kode operasi, memilih cabang perhitungan dengan switch, dan mengembalikan hasilnya sebagai satu nilai. Cabang bagi memeriksa penyebut sebelum membagi, dan cabang otherwise menolak kode operasi di luar daftar. Panggilan error dengan dua argumen menyertakan penanda kesalahan lebih dahulu lalu templat pesannya, dan bentuk 'pesan %s' mengizinkan pesan memuat data seperti nama kode yang ditolak. Blok nargin memasang contoh bawaan sehingga berkas tetap selesai tanpa error ketika dijalankan tanpa argumen.

Kedua jalur kesalahan itu diuji dari Command Window dengan pola try dan catch berikut.

fprintf('12 kali 4 = %g\n', hitung_kalkulator(12, 4, 'kali'));
fprintf('12 bagi 4 = %g\n', hitung_kalkulator(12, 4, 'bagi'));

try
  hitung_kalkulator(12, 0, 'bagi');
catch kesalahan
  fprintf('tertangkap: %s\n', kesalahan.message);
end

try
  hitung_kalkulator(12, 4, 'pangkat');
catch kesalahan
  fprintf('tertangkap: %s\n', kesalahan.message);
end

12 kali 4 = 48
12 bagi 4 = 3
tertangkap: pembagian dengan nol tidak diizinkan
tertangkap: kode operasi tak dikenal: pangkat

Dua panggilan pertama menempuh cabang normal dan mencetak hasil 48 serta 3. Dua panggilan berikutnya memicu error yang ditangkap catch, dan objek kesalahan memuat pesan lengkap pada bidang message sehingga alasan kegagalan terbaca tanpa menghentikan sesi. Callback akan memakai pola yang sama untuk mengalihkan pesan tersebut ke label hasil.

Callback yang memanggil fungsi inti#

Callback di App Designer tersimpan sebagai metode dari kelas aplikasi dan menerima dua argumen, yaitu app yang merujuk aplikasi itu sendiri dan event yang memuat data peristiwa penekanan tombol. Ketika tombol ditekan, MATLAB memanggil callback ini secara otomatis dan meneruskan kedua argumen tersebut. Komponen diakses melalui properti objek app dengan nama yang ditetapkan pada langkah alur kerja. Berkas hitung_kalkulator.m cukup berada pada folder yang sama dengan berkas .mlapp atau pada path pencarian MATLAB agar callback dapat memanggilnya.

% tidak-dijalankan
function TombolHitungPushed(app, event)
  a = app.BilanganPertama.Value;
  b = app.BilanganKedua.Value;
  kode = app.DropDownOperasi.Value;
  try
    hasil = hitung_kalkulator(a, b, kode);
    app.LabelHasil.Text = sprintf('%g', hasil);
  catch kesalahan
    app.LabelHasil.Text = kesalahan.message;
  end
end

Badan callback hanya memuat beberapa baris karena seluruh aturan sudah dimiliki fungsi inti. Ketika perhitungan berhasil, hasil dituliskan ke LabelHasil sebagai teks. Ketika fungsi inti memicu error, catch menangkapnya dan pesannya ditampilkan pada label yang sama sehingga pengguna membaca alasan kegagalan alih-alih aplikasi berhenti. Argumen event tidak dipakai pada contoh ini, dan bentuk ~ dapat menggantikannya bila datanya memang tidak diperlukan.

Kesalahan umum#

• Menaruh seluruh logika di dalam callback. Penyebabnya adalah editor membuka callback lebih dahulu sehingga perhitungan ditulis langsung di sana. Akibatnya, logika tidak dapat diuji tanpa menjalankan aplikasi. Perbaikannya adalah memindahkan perhitungan ke fungsi biasa dan memanggilnya dari callback.
• Membiarkan pembagian nol mengalir sebagai Inf. Penyebabnya adalah aritmetika bawaan memang tidak menolaknya. Akibatnya, label hasil menampilkan Inf tanpa penjelasan bagi pengguna. Perbaikannya adalah memeriksa penyebut di fungsi inti dan memanggil error dengan pesan yang siap ditampilkan.
• Mengakses komponen dengan nama bawaan. Penyebabnya adalah nama bawaan seperti EditField dan EditField2 dibiarkan tidak diubah. Akibatnya, app.EditField menjadi ambigu dan mudah tertukar saat callback ditulis. Perbaikannya adalah mengatur Name yang bermakna pada panel properti sebelum menulis kode.

Ringkasan#

• App Designer adalah editor visual yang diperkenalkan pada R2016a, menyimpan aplikasi sebagai berkas .mlapp, dan membangun antarmuka dari komponen uifigure.
• Alur kerjanya menarik komponen dari palet, mengatur properti, menambahkan callback pada ButtonPushedFcn, lalu mengisi badannya di tampilan kode.
• Inti perhitungan ditulis sebagai fungsi biasa hitung_kalkulator sehingga teruji di Command Window, termasuk penolakan pembagian nol lewat error serta try dan catch.
• Callback tetap tipis karena hanya membaca Value, memanggil fungsi inti, dan menuliskan hasil atau pesan error ke label.

Referensi#

• MATLAB App Designer — MathWorks — halaman rujukan resmi fungsi appdesigner yang membuka editor App Designer.
• uifigure — MathWorks — rujukan resmi jendela aplikasi generasi baru yang menjadi dasar komponen di App Designer.
• App Designer — MathWorks — halaman produk yang merangkum kemampuan perancangan aplikasi secara visual.