Bagian 1: Perancangan Antarmuka

Analisis di Command Window hanya bisa dipakai orang yang menulis kodenya. Aplikasi analisis data yang kita bangun di proyek ini menyerahkan analisis yang sama kepada pembaca non-programmer: pemilik toko membuka jendela, menekan satu tombol, memilih kolom dari dropdown, dan membaca grafik beserta ringkasan statistiknya. Sebelum satu baris GUI ditulis, bagian ini menetapkan dulu keputusan yang paling mahal diubah belakangan — alur pengguna, tata letak, teknologi antarmuka, dan desain state. Cakupannya:

• tujuan dan batas aplikasi yang jelas,
• alur pengguna dari buka jendela sampai membaca hasil,
• wireframe empat baris grid beserta daftar komponen,
• keputusan teknologi: uifigure programatik dan arsitektur dua lapis,
• desain state: data yang hidup setelah tombol ditekan.

Tujuan Aplikasi dan Batasnya #

Pengguna target kita punya berkas catatan bulanan (penjualan dan suhu) tetapi tidak pernah membuka MATLAB. Tugas aplikasi satu kalimat: muat CSV, tampilkan tren dan statistiknya, tanpa perintah apa pun. Dari kalimat itu kita turunkan fitur — dan sekaligus batas yang sengaja tidak dibangun:

Batas seperti “tanpa penyimpanan hasil” bukan kemunduran — cakupan kecil membuat aplikasi selesai dan teruji, sementara daftar pengembangan lanjutan kita susun di Bagian 4.

Alur Pengguna #

Alur pengguna dirancang sebelum tampilan karena tampilan selalu bisa dipoles, alur yang salah harus dibongkar. Seluruh hidup aplikasi berputar pada satu siklus load → pilih → lihat:

Diagram tersebut memuat dua putaran kecil. Putaran pertama: mengganti Kolom Y hanya menggambar ulang grafik — berkas tidak dibaca ulang karena data sudah hidup di memori. Putaran kedua: menekan Muat Data lagi berguna ketika pengguna mengedit CSV dengan editor teks lalu ingin memuat versi terbaru. Kedua putaran inilah yang menentukan state apa saja yang harus disimpan aplikasi.

Alur dua langkah ini juga keputusan menolak alternatifnya. Menu bertingkat — pilih berkas, pilih analisis, pilih output — akan menambah klik tanpa menambah kemampuan: analisis kita memang selalu statistik ringkas, dan sumber datanya memang selalu satu berkas. Bila kelak kebutuhan tumbuh (banyak berkas, banyak jenis analisis), menu baru bisa ditambahkan tanpa merombak alur — struktur state yang kita desain di akhir bagian ini sudah menopangnya.

Wireframe Antarmuka #

Dari alur tersebut, wireframe disusun sebagai empat baris grid — kontrol di atas, grafik memenuhi tengah, ringkasan di bawah:

┌────────────────────────────────────────────────┐
│ Analisis Data Penjualan                        │ baris 1 'fit'
├─────────────┬───────────┬──────────────────────┤
│ [Muat Data] │ Kolom Y:  │ [penjualan        ▼] │ baris 2 'fit'
├─────────────┴───────────┴──────────────────────┤
│                                                │
│                  ( UIAxes )                    │ baris 3 '1x'
│                                                │
├────────────────────────────────────────────────┤
│ 12 baris | kolom Y: penjualan                  │
│ mean 291.7 | std 58.5 | min 200.0 | maks 380.0 │ baris 4 'fit'
│ korelasi bulan-penjualan: 0.997                │
└────────────────────────────────────────────────┘

Baris 'fit' hanya setinggi isinya — judul, kontrol, dan ringkasan ringkas; baris '1x' memakan seluruh sisa ruang untuk grafik, area yang paling penting bagi mata pengguna. Saat jendela diperbesar, grafik ikut membesar sementara tiga baris lain tetap. Daftar komponen wireframe ini sekaligus menjadi daftar belanja kode kita di Bagian 2:

Keputusan Teknologi: uifigure Programatik #

Section App Designer menawarkan dua jalur modern: App Designer (drag-drop) atau uifigure programatik (100% kode). Untuk proyek ini kita memilih jalur programatik, dengan alasan yang paling menonjol pada kolom pertama tabel berikut:

Karena seluruh aplikasi hidup dalam aplikasiAnalisis.m, setiap perubahan — menambah komponen, mengubah callback — terlihat sebagai perubahan teks yang bisa dibuat versinya dengan Git, identik dengan cara kita memelihara seluruh kode proyek ini. Konsekuensinya jujur kita terima: kita menulis setiap properti dengan tangan, justru cara terbaik untuk memahami apa yang sebenarnya dihasilkan App Designer di balik layar.

Arsitektur Dua Lapis #

Keputusan kedua memisahkan aplikasi menjadi dua lapisan dengan kontrak data di antaranya. Lapisan UI (aplikasiAnalisis.m) hanya tahu komponen dan callback; lapisan logika (muatCSV.m, analisisInti.m, buatDataContoh.m) tidak mengenal satu komponen pun — keduanya bertukar data lewat struct:

Kontraknya sederhana namun ketat: keluaran muatCSV() adalah persis masukan analisisInti(). Callback tombol tinggal merangkai keduanya — muat, hitung, tulis hasil ke komponen — tanpa memuat satu rumus pun.

Kontrak itu pantas ditulis sebagai tabel karena seluruh berkas di src/ akan menandukannya. Bentuk struct yang lewat di antara lapisan:

Satu entri terakhir patut ditegaskan: laporan adalah teks jadi. Lapisan UI tidak memformat angka — MATLAB versi app dan Octave versi uji menghasilkan teks yang sama persis, sehingga output di Command Window selama pengembangan identik dengan yang tampil di label aplikasi.

Desain State #

Alur pengguna menuntut data bertahan hidup melewati akhir callback: pilihan Kolom Y yang diganti harus bisa langsung digambar ulang tanpa membaca berkas lagi. Karena app kita berupa satu berkas fungsi dengan nested functions, state cukup hidup sebagai variabel di fungsi utama — semua nested functions membaca dan menulis variabel yang sama:

State juga menjelaskan apa yang tidak perlu kita bangun. Aplikasi tidak menyimpan apa pun ke disk — menutup jendela menghapus seluruh state, dan itu wajar karena data sumbernya tetap ada di CSV; CloseRequestFcn tidak diperlukan karena tidak ada perubahan yang hilang. Ketiadaan fitur yang disengaja ini mengikuti prinsip yang sama dengan batas fitur di awal bagian: sedikit state berarti sedikit tempat galat bersembunyi.

Rancangan lengkap: alur, wireframe, komponen, kontrak data, dan state. Bagian 2 mewujudkannya menjadi jendela sungguhan — mulai dari uifigure dan grid layout sampai kelima komponennya.