Design Pattern MVC pada Aplikasi Scrum Booster

Design pattern yang digunakan pada aplikasi kami adalah design patter MVC (Model, View, Controller), atau ada yang menyebutnya MTV (Model, Template, View), saya akan menjelaskan bagaimana kami menerapkan model MVC kami pada aplikasi kami.

Setiap page konten pada aplikasi kami, kami bagi menjadi 3 bagian di mana bagian-bagian tersebut adalah model MVC, ini salah satu contoh hierarki kode pada page kami.

Hierarki kode pada suatu page di aplikasi Scrum Booster

Controller

ApiProvider.dart didedikasikan sebagai controller pada aplikasi kami, tugasnya adalah untuk mengumpulkan JSON dari API yang telah disediakan, lalu JSON tersebut dipindahkan ke Model.dart

///ApiProvider.dart
fetchPosts() async {
  try {
    response = await client.get(
        util.getConfiguration()['base_url']+"phase/$PHASE_ID/details"
    );
  } catch (e) {
    print("API isn't available");
  }

  var jsonBody = json.decode(response.body);

  model = SprintEvaluationModel.fromJson(jsonBody);

Model

Model.dart didedikasikan sebagai model pada aplikasi kami, ia punya tugas sebagai penengah antara controller dan view, di dalamnya berisi variabel-variabel yang diisi oleh data yang didapat oleh ApiProvider.dart

///Model.dart
class SprintEvaluationModel {
  List<dynamic> _ceremonies;
  List<dynamic> _problems;

  SprintEvaluationModel.fromJson(Map<String, dynamic> parsedJson) {
    _ceremonies = parsedJson['ceremonies'];
    _problems = parsedJson['problems'];
  }

  List<dynamic> get ceremonies => _ceremonies;
  List<dynamic> get problems => _problems;
}

View

SprintEvaluation.dart didekasikan sebagai view pada aplikasi kami, di dalamnya terdapat kode yang membentuk widget-widget pada aplikasi kami, kode inilah yang hasil rendernya “dilihat” oleh pemakai aplikasi, widget-widget yang ada diisi oleh variabel-variabel yang didapat dari Model.dart

///SprintEvaluation.dart
class SprintEvaluation extends StatefulWidget {
  final util = new Util();
  final SprintEvaluationApiProvider apiProvider;
  List<Widget> listView = [new Container(),];

  SprintEvaluationModel phaseDetailsDataJSON;
  var phaseCeremoniesDataJSON;
  var phaseProblemsDataJSON;

  SprintEvaluation({
    Key key,
    this.apiProvider,
  }) : super(key: key);

  @override
  _SprintEvaluationState createState() {
    _sprintEvaluationState = new _SprintEvaluationState();
    return _sprintEvaluationState;
  }
}

Hasilnya seperti ini:

Page Sprint Evaluation yang sudah menggunakan design patter MVC

Untuk mengintegrasikan API yang tersedia, kami harus membuat aplikasi kami memiliki design pattern MVC yang telah di-refactor dari kode kami sebelumnya di mana kode tersebut hanya menampilkan page dummy