Wednesday, November 6, 2019

Mengenal dan Membuat Stuktur BLoC pada Flutter

Membuat Struktur BLoC pada Flutter
Membuat Design Pattern BLoC dengan Flutter - Dalam membuat aplikasi awalnya sering kali kita dibuat bingung dengan konsep utama (core concept) yang akan kita terapkan pada pembuatan Aplikasi. Karena hasl tersebut akan sangat mempengaruhi pengembangan aplikasi kita kedepanya, terutama jika pengembangan aplikasi tidak hanya dilakukan oleh individu melainkan sebuah tim.

Pemahaman dasar atas konsep yang akan diterapkan nantinya harus bisa dimengerti oleh setiap individu yang terlibat dalam pengembangan aplikasi tersebut sehingga kode yang dibuat terkesan kompak dan mudah dipahami oleh masing-masing individu.

Jika biasanya kita sering mendenger konsep design pattern dengan nama MVC (Model View Controller) pada pembuatan aplikasi, pada Flutter terdapat beberapa konsep design pattern lain yang cukup populer seperti Vanila, Scoped Model, dan BLoC. Memang pada dasarnya tujuan dari setiap desaign pattern untuk pembuatan aplikasi adalah sama, yaitu untuk membuat pembuatan kode aplikasi yang lebih terstruktur sehingga dapat memisahkan  atau mengelompkan kode sesuai bagian masing-masin terutama antara proses (logika bisnis) dan tampilan (presentasi).

Pada kesempatan kali ini kita akan mempelajari implementasi pattern BLoC saja, kenapa harus BLoC? Karena ada beberapa alasan kita perlu mempelajari pola BLoC dalam membuat aplikasi mobile dengan Flutter. Alasan utamanya adalah dengan pola BLoC kita dapat mengatur / memanag state lebih efektif dan efisien karena kita memisahkan antara tampilan / presentasi dengan proses / logika bisnis nya.

BLoC adalah kependekan dari Bussiness Logic Component dimana tujuan dasarnya adalah memisahkan bagian kode untuk tampilan dan kode untuk logika bisnis. Perlu anda ketahui juga bahwa BLoC adalah salah satu dari design pattern yang dirancang oleh google, sehingga kemungkinan besar pola ini akan dianut oleh banyak pengguna Flutter.

Dasar-Dasar BLoC

Setelah kita membahas sedikit tentang BLoC di atas, sebelum mengimplementasikan dalam sebuah kode Flutter kita perlu tahu dasar-dasar BLoC sehingga kita tidak dibingungkan oleh pola ini saat implementasi ke sebuah kode nantinya. Karena sesuai pengalaman saya, memahami suatu pola yang dibuat orang lain tentu saja tidak mudah untuk dicerna oleh logika kita karena sejujurnya saya termasuk orang yang lebih senang menciptakan pola saya sendiri sesuai idealisme saya sendiri.

Untuk itu perhatikan baik-baik dasar-dasar yang perlu anda ketahui dalam memahami BLoC ini, karena secara garis besar komponen pembentuk  pola BLoC sangatlah sederhana.

Stream

Stream adalah salah satu komponen utama pembentuk BLoC, sehingga Stream wajib anda ketahui terlebih dahulu sebelum anda mengimplementasikan BLoC kedalam kode aplikasi Flutter anda. Secara umum pengertian Stream adalah aliran sesuatu (data) secara terus menerus, jika anda familiar dengan pemrograman socket biasanya istilah stream sudah tidak asing lagi di telinga anda.

Event

Event adalah kejadian, interaksi yang dilakukan oleh user pada aplikasi membangkitkan sebuah event. Misalnya user menekan tombol akan membangkitkan even onButtonPressed (hanya contoh), dan lain sebagainya.

Pada implementasi BLoC, kita akan membuat semua interaksi user dalam bentuk suatu event yang mana event tersebut akan ditranformasikan ke dalam bentuk state Flutter.

Implementasi BLoC pada Kode Flutter

Setelah kita sedikit menyinggung Stream dan Event kini waktunya kita mencoba mengimplemtasikan stukur BLoC pada Flutter. Sebelum kita melangkah pada pembuatan contoh kode yang mengimplementasikan struktur BLoC. Perlu kita ketahui bahwa, Flutter mendukung library agar developer dapat mengimplementasikan struktur BLoC dengan kode yang sangat sederhana, yaitu menggunakan pacakage flutter_bloc.
Untuk itu, pada kasus contoh implementasi kode struktur BLoC kali ini kita menggunakan package flutter_bloc.
flutter_bloc: ^0.22.0
Sebagai tambahan, studi kasus pada contoh kode struktur BLoC kali ini adalah tentang pembuatan aplikasi counter sederhana yang mempunyai 2 fungsi utama yaitu increment dan decrement.
Sehingga event yang terlibat dalam contoh kode implementasi BLoC kali ini hanya terdiri dari 2 event yaitu increment dan decrement.

Untuk itu buatlah sebuah project Flutter denganstrutkru kode file seperti berikut ini:
  • main.dart (file utama)
  • bloc\counter\counter_event.dart (file kode event untuk counter)
  • bloc\counter\counter_bloc.dart (file kode implementasi BLoC untuk counter)
  • bloc\counter\counter_page.dart (file kode tampilan untuk halaman counter)
Kode-kode masing-masing file:

Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini

Share This
Previous Post
Next Post

Halo, Saya A.M Hirin seorang Penulis Buku IT, International Freelance Programmer, dan Senior Developer di Perusahaan Konsultan IT. Saya penggila kode dan sudah berkutat selama 15 tahun di dunia pemrograman. Anda membutuhkan bantuan terkait skill dan keahlian saya? Kontak saya melalui email : nump.info@gmail.com

0 komentar: