Refactoring Aplikasi Flutter Sederhana Dengan Implementasi BLOC

4 min readDec 20, 2020

Pengenalan

Refactoring merupakan suatu kegiatan untuk mengubah sistem tanpa mengubah perilaku sistem tersebut. Dalam kasus software development sering kita jumpai proses ini, baik secara sadar maupun tidak sadar. Tujuan utama refactoring ini adalah untuk efisiensi struktur kode program agar lebih mudah dipahami dan di-maintain kedepannya. Selain itu refactoring ini dapat menjadi disiplin dalam merancang suatu sistem.

Banyak yang beranggapan bahwa proses refactoring ini adalah hal yang membosankan dan membuang-buang waktu. Apabila developer pemula (termasuk saya) dihadapkan dengan deadline project yang ketat, terkadang kita akan sedikit mengabaikan fakta bahwa aplikasi yang kita buat mungkin akan terus di-maintain dalam waktu yang lama. Setelah itu baru kita menyadari banyak kekurangan pada kode program yang kita buat. Tidak perlu risau, menurut saya itu merupakan cara kita untuk terus belajar dan memperbaiki diri.

“Banyak jalan menuju roma”. Banyak cara juga untuk kita menyelesaikan suatu permasalahan, dalam hal ini kita dapat menggunakan arsitektur atau design pattern yang dirasa sesuai kebutuhan.

Aplikasi

Bagian ini saya anggap pembaca sudah bisa inisiasi dan setup Flutter serta sudah memiliki dasar pembuatan aplikasi Flutter pada project ini. Apabila pembaca baru mengenal Flutter silakan kunjungi terlebih dahulu tautan ini untuk setup project pertama.

Oke kita akan mulai membuat aplikasi sederhana menggunakan Flutter, seperti pada gambar header. Aplikasi ini akan menampilkan data dummy berupa artikel berita menggunakan mockapi.io sebagai REST API server. Langsung ke intinya, pada halaman depan aplikasi akan terlihat section untuk Headline dan Berita terbaru. Berikut ini adalah potongan kode program untuk halaman home.

Tahan dulu, saya tau mungkin dari beberapa pembaca ada yang beranggapan “panjang sekali baris kodenya”. Mulai dari sini kita akan fokus ke pembahasan artikel ini mengenai refactoring aplikasi menggunakan BLOC pattern.

BLoC

Mengutip dari laman https://www.didierboelens.com/2018/08/reactive-programming-streams-bloc/, BLoC merupakan singkatan dari Business Logic Components. BLoC sendiri merupakan pattern yang bertujuan memisahkan Business Logic dengan Widget (atau biasa kita gunakan sebagai user interface). Salah satu keuntungan mengimplementasikan pattern ini adalah, selain kode akan lebih rapih, kelas Widget ini nantinya hanya akan fokus terhadap UI serta memudahkan pembuatan unit test.

Refactoring

Tahap pertama kita akan menambahkan dependencies atau library pada pubspec project. Seperti pada kode berikut:

Kemudian kita akan membuat kelas untuk event, state, dan bloc. Kelas event ini merepresentasikan event atau aksi pada aplikasi. Sedangkan kelas state adalah layer presentasi. Kemudian kedua kelas abstraksi itu akan dijembatani oleh kelas bloc. Kelas bloc ini yang nantinya akan berkomunikasi dengan kelas widget atau ui aplikasi kita.

Pada file homescreen.dart sebelum di-refactor masih terdapat fungsi untuk hit endpoint berupa fetchHeadline() dan fetchArticle() yang termasuk kedalam komponen business logic. Fungsi hit endpoint tersebut kita pindahkan kedalam kelas bloc.

Selain itu kita dapat melakukan observasi atau tracking pergerakan state dengan menambahkan kode berikut pada file main.dart

Setelah itu kita akan melakukan ubahan pada kelas homescreen yang sudah ada sebelumnya dengan mengimplementasikan kelas bloc yang sudah dibuat.

Terlihat bahwa pada kelas yang sudah di-refactor ini fungsi business logic sudah dipindahkan kedalam kelas bloc. Ketika sudah mengimplementasikan bloc, kelas widget homescreen ini hanya fokus kepada ubahan UI nya saja.

Referensi

Kumpulan artikel dan resource yang menjadi inspirasi saya dalam mendokumentasikan kembali ilmu yang sudah sudah dipelajari:

Kesimpulan

Semoga pembahasan sederhana ini dapat memberikan gambaran bagi pembaca yang sedang atau akan melakukan refactoring pada aplikasi Flutter menggunakan BLoC. Saya menyadari banyak kekurangan dalam proses pembuatan aplikasi dan artikel ini, maka dari itu kritik dan saran yang membangun akan sangat membantu saya menjadi lebih baik lagi kedepannya. Hatur nuhun (Terima kasih).

Oh iya, kode program lengkap pada artikel ini dapat diakses pada repo github dibawah.

zona284/news_basic_app

A News Basic Flutter application. A few resources to get you started if this is your first Flutter project: [NEW] BLOC…

github.com