Pada pengembangan aplikasi, Design Pattern (polapola perancangan) merupakan hal yang penting untuk diterapkan untuk memudahkan developer. Kali ini, penulis mau bahas tentang MVC, yaitu ModelViewController.

MVC adalah salah satu compound Design Pattern yang memisahkan urusan antara komponen Model, View dan Controller. Intinya, kode tentang View, tidak dicampurkan dalam kode Model, dan seterusnya. MVC dapat membantu developer dalam mengembangkan aplikasi dengan lebih mudah. Jika developer tidak menggunakan Design Pattern pada aplikasi yang mereka buat, maka kemungkinan kesulian untuk mengembangankan, me-maintain, atau bahkan menguji aplikasi menjadi semakit sulit.

Eits, MVC bukannya Arsitektur? kok Design Pattern!??

MVC dikategorikan sebagai Compound Design Pattern pada buku Design Pattern oleh Gamma, Johnson, Vlissides, Helm (dikenal sebagai Gang of Four). Sedangkan, banyak developer yang mengkategorikan MVC debagai arsitektur UI dan bukan sebagai arsitektur aplikasi.

Awalnya, MVC berasal dari industri web, yang kemudian dibawa ke industri mobile. Diagram MVC memang bermacam-macam, tergantung penerapannya. Penulis menggambil diagram MVC versi Apple.

Diagram MVC

MVC versi Apple

Ada tiga komponen utama pada MVC, yaitu Model, View dan Controller. Masing-masing komponen memiliki tugas yang berbeda. Alur komunikasi mulai dari View (user berinteraksi pada layar), kemudian Controller merespon dan meneruskan ke Model, dan kembali lagi ke Controller hingga ke View.

Model

Model yaitu segala sesuatu yang berhubungan dengan object (POJO), database, networking, parsing, dan lainnya, atau bisa juga disebut mengolah data.

Controller

Controller bertugas menjembatani antar Model dengan View. Contohnya mengambil data dari View, meneruskan ke Model, mengambil data kembalian dari Model dan ditersukan ke View.

View

View bertugas untuk menampilkan data yang di dapat dari controller, menerima data input dari user, atau lainnya.

Jika diterapkan pada aplikasi Android atau iOS, maka dapat digambarkan pada diagram dibawah.

MVC pada Android / iOS

Pada diagram diatas, Activity / Fragment (Android) dan ViewController (pada iOS) dianggap sebagai Controller, karena menjembatani antara Model dan View. Sedangkan xml (Android) dan Storyboard / xib (iOS) dianggap sebagai View. Sedangkan, model tetap sama.

Studi kasus: Autentikasi

Untuk memperdalam pemahaman tentang MVC, penulis membuat diagram studi kasus autentikasi pada aplikasi mobile (Android / iOS) yang dapat dilihat dibawah.

Studi kasus autentikasi

View mengirim data (misalkan email dan password) kepada Controller. Kemudian, Controller mengirim data ke Model yaitu NetworkAPI untuk melakukan autentikasi. Setelah melakukan request, kembalian object User didapat. Kemudian akan dikembalikan ke Controller dan ditampilkan ke View.

MVC berlaku pada setiap tampilan. Jika memiliki tampilan ProfileView, maka akan ada ProfileViewController / ProfileActivity dan ada pula Profile pada Model (Misalkan mengambil data profile yang disediakan oleh NetworkAPI atau kelas profile POJO.)

Solutif?

Tergantung kebutuhan software, skala aplikasi dan lainnya. Intinya, MVC dapat membantu developer untuk mengembangkan aplikasi menjadi aplikasi yang lebih mudah dikembangkan, maintain, dan lainnya. Perlu diingat bahwa kita mengembangkan software, soft” yang dimaksud adalah aplikasi harus mudah diubah, ditambah, atau memang akan mudah berubah tergantung kebutuhan. Maka jangan hanya bergantung pada MVC jika memang dirasa tidak cukup.


Apa selanjutya?

Ada Design Pattern lain yang melakukan pemisahan urusan kode selain MVC, yaitu MVVM (Model-View-ViewModel). Ada pula MVP (Model-View-Presenter), MVI (Model-View-Intent), VIP (Clean Swift), VIPER (View-Interactor-Presenter-Entity-Router), Clean architecture dan lainnya. Masing-masing memiliki pro dan kontra apakah termasuk arsitektur, design pattern, atau arsitektur UI. Saran penulis, pelajari dan terapkan sesuai kebutuhan developer / aplikasi.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s