Design Pattern MVP (Model View Presenter)

Design Pattern MVP (Model View Presenter)

Play this article

Pada arsitektur Model-View-Presenter (MVP), terdapat beberapa pola desain yang umum digunakan untuk mengatur dan mempermudah pengembangan aplikasi. Berikut adalah beberapa pola desain yang sering digunakan dalam MVP:

  1. Model:

    • Pola desain Model mewakili logika bisnis dan akses ke data. Ini berisi kode untuk mengambil data dari database, API, atau sumber data lainnya, serta mengatur pemrosesan data dan logika aplikasi.

    • Biasanya, model terdiri dari kelas-kelas POJO (Plain Old Java Objects) atau PODO (Plain Old Dart Objects) untuk mewakili data dan fungsi yang berhubungan dengan data.

  2. View:

    • Pola desain View bertanggung jawab atas tampilan antarmuka pengguna (UI). Ini berisi kode yang menampilkan informasi kepada pengguna dan menangani interaksi dari pengguna.

    • View tidak seharusnya berisi logika bisnis; sebaliknya, ia hanya mengirimkan tindakan dari pengguna ke presenter dan menampilkan data dari presenter.

  3. Presenter:

    • Pola desain Presenter bertindak sebagai perantara antara Model dan View. Ia berfungsi untuk menghubungkan logika bisnis dalam Model dengan tampilan dalam View.

    • Presenter mengambil perintah dari View (misalnya, ketika pengguna mengklik tombol) dan memprosesnya melalui Model. Setelah Model menyelesaikan tugasnya, Presenter mengirimkan hasilnya kembali ke View untuk ditampilkan ke pengguna.

    • Presenter juga berfungsi sebagai pemisah untuk memastikan bahwa View dan Model tetap independen satu sama lain.

  4. Observer/Observable:

    • Pola desain Observer/Observable sering digunakan untuk menghubungkan Model dan View. Ketika data di Model berubah, View perlu diberi tahu sehingga tampilan dapat diperbarui sesuai.

    • Presenter bertindak sebagai subjek (Observable), yang akan memberitahu View (Observer) tentang perubahan data di Model. Ini memungkinkan tampilan untuk selalu mencerminkan kondisi data terbaru.

  5. Dependency Injection:

    • Pola desain Dependency Injection digunakan untuk mengelola dependensi antara kelas-kelas dalam arsitektur MVP.

    • Dengan Dependency Injection, Anda dapat menghindari ketergantungan langsung antara View dan Model dengan menggunakan kerangka kerja atau pustaka yang tepat (misalnya, Dagger untuk Java atau Flutter's built_value untuk Dart).

    • Ini mempermudah pengujian dan membuat kode lebih modular.

Penting untuk diingat bahwa MVP adalah salah satu dari beberapa pendekatan arsitektur yang dapat digunakan dalam pengembangan perangkat lunak. Pola desain di atas membantu Anda dalam menerapkan MVP secara efektif, mengurangi ketergantungan, dan memisahkan logika bisnis dari tampilan.

Contoh Code

Berikut code sederhana yang bisa kamu pahami dan cermati untuk Pola desain MVP dalam bahasa pemograman dart (Untuk aplikasi Flutter).Kami akan menggunakan contoh aplikasi Kalkulator sederhana dengan empat operasi matematika dasar:penjumlahan,pengurangan,perkalian dan pembagian.

//Model 
class CalculatorModel {
  double calculate(String operation, double num1, double num2) {
    switch (operation) {
      case '+':
        return num1 + num2;
      case '-':
        return num1 - num2;
      case '*':
        return num1 * num2;
      case '/':
        return num1 / num2;
      default:
        throw Exception("Invalid operation");
    }
  }
}

Dibawah ini adalah view dari si model

// View.dart
import 'package:flutter/material.dart';

class CalculatorView {
  final TextEditingController number1Controller = TextEditingController();
  final TextEditingController number2Controller = TextEditingController();
  final TextEditingController resultController = TextEditingController();

  void showResult(double result) {
    resultController.text = result.toString();
  }
}

dan Selanjutnya adalah Presenternya

// Presenter.dart
import 'model.dart';
import 'view.dart';

class CalculatorPresenter {
  final CalculatorModel _model;
  final CalculatorView _view;

  CalculatorPresenter(this._view) : _model = CalculatorModel();

  void calculate(String operation) {
    double num1 = double.tryParse(_view.number1Controller.text) ?? 0.0;
    double num2 = double.tryParse(_view.number2Controller.text) ?? 0.0;

    try {
      double result = _model.calculate(operation, num1, num2);
      _view.showResult(result);
    } catch (e) {
      _view.showResult(0.0);
    }
  }
}

Selanjutnya ,dalam main.dart kita akan menggabungkan model,view, dan Presenter untuk mengatur antarmuka pengguna dan logika bisnis.

import 'package:flutter/material.dart';
import 'presenter.dart';
import 'view.dart';

void main() {
  runApp(CalculatorApp());
}

class CalculatorApp extends StatelessWidget {
  final CalculatorView _view = CalculatorView();
  final CalculatorPresenter _presenter = CalculatorPresenter(CalculatorView());

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('MVP Calculator')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              TextField(controller: _view.number1Controller, keyboardType: TextInputType.number),
              SizedBox(height: 10),
              TextField(controller: _view.number2Controller, keyboardType: TextInputType.number),
              SizedBox(height: 20),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  ElevatedButton(onPressed: () => _presenter.calculate('+'), child: Text('+')),
                  ElevatedButton(onPressed: () => _presenter.calculate('-'), child: Text('-')),
                  ElevatedButton(onPressed: () => _presenter.calculate('*'), child: Text('*')),
                  ElevatedButton(onPressed: () => _presenter.calculate('/'), child: Text('/')),
                ],
              ),
              SizedBox(height: 20),
              TextField(controller: _view.resultController, readOnly: true),
            ],
          ),
        ),
      ),
    );
  }
}

Dalam contoh diatas,kita telah membuat aplikasi kalkulator sederhana menggunakan pola MVP.Model betnggung jawab untuk perhitungan matematika,View untuk menampilkan elemen antar pengguna dan Presenter untuk menghubungkan Model dan View.Ini Memungkinkan Aplikasi untuk mempertahankan pemisahan tugas yang baik dan memudahkan pengujian.