API Integration Pada Flutter Menggunakan Dio dan GetX
Intro
Well, halo semua. Kembali lagi dengan artikel setahun sekali saya ini hehehe. Mohon maaf ya saya (*sok) sibuk, jadi baru bisa menulis sekaligus mendapat ide menulis lagi muehehehe 😈. So untuk artikel kali ini saya menulis tentang technical skill berkaitan dengan Flutter lagi, yaitu fetching API menggunakan Dio sekaligus state management menggunakan GetX, untuk kamu yang belum tau apa itu GetX bisa coba baca artikel ini dahulu sebagai pendahuluan ya. Untuk yang sudah siap, let’s go!
API
Bagi para programmer kebanyakan sudah tidak asing dengan kata API atau Application Programming Interface yaitu salah satu mekanisme yang memungkinkan dua komponen atau lebih pada perangkat lunak untuk saling berkomunikasi menggunakan serangkaian definisi dan protokol. Mungkin sebagai gambaran API bisa disebut jembatan yang bertugas sebagai jalan/jalur penghubung untuk pengiriman data dari server ke client dansebaliknya atau kalo bingung ya back-end ke front-end dan sebaliknya. Kurang lebih seperti itu cara termudah bagi saya untuk menjelaskannya ke teman-teman, kalau kurang tepat boleh dikoreksi ya!
Dio
Siapa sih Dio ? orang mana sih ?, eits ini bukan nama orang ya, ini merupakan salah satu library pada Flutter yang sering digunakan untuk pengolahan api yang dikembangkan oleh anggota tim Flutter, Jianying Li. Kurang lebih seperti axios pada javascript kalau teman-teman pernah mendengar. Dio sendiri juga bersifat open source, ringan, dan fleksibel untuk Dart dan Flutter. Dio dibangun menggunakan sistem http bawaan dari Dart dan menyediakan fitur dan fungsionalitas tambahan untuk menyederhanakan permintaan HTTP. Sehingga diharapkan pekerjaan kita sebagai developer bisa lebih efektif dan efisien menggunakan Dio dibandingkan kita membangun atau menggunakan protokol pengolah API bawaan dari Dart.
Sepertinya penjelasan singkat terkait istilah atau sistem yang akan saya jelaskan sudah cukup ya, untuk lengkapnya teman-teman bisa membaca sendiri pada referensi yang saya cantumkan pada akhir artikel, so let’s go to practice! :D
First
Silahkan teman-teman membuat project Flutter baru dengan nama bebas terserah teman-teman, kemudian tambahkan beberapa library berikut pada pubspec.yaml di dalam dependencies
dependencies:
.
.
.
dio:
get:
cached_network_image:Kemudian jalankan command flutter pub get pada terminal. Setelah itu kita melakukan persiapan file yang mungkin dibutuhkan. Di dalam folder lib, buatlah struktur folder dan file kurang lebih seperti ini:
lib ---
|--- config
| |--- constants.dart
| |--- index.dart
| |--- size.dart
|
|--- controllers
| |--- pokemon
| |--- index.dart
|
|--- models
| |--- pokemon
| |--- index.dart
|
|--- services
| |--- pokemon
| |--- index.dart
|
|--- ui
| |--- screen
| |--- pokemon_detail
| |--- index.dart
| |--- pokemon_list
| |--- index.dart
|
|--- main.dartKemudian berikut sudah saya urutkan pengerjaan atau pengisian file-nya masing-masing supaya meminimalisir error.
config/constants.dart
config/index.dart
Kemudian kita perlu membuat class model Pokemon yang berisi data apa saja yang ingin kita ambil dari API dan akan kita tampilkan pada aplikasi kita. Teman-teman juga perlumengetahui bahwa untuk mobile development, biasanya developer akan membuat suatu class model sendiri sehingga API yang didapatkan perlu di-convert ke dalam class model yang telah dibuat sehingga pada code ini juga ada contoh dasar konversi data API menjadi class model Flutter. Sebagai reminder, karena artikel ini hanya tutorial, maka seterusnya saya akan memberi contoh yang simpel tapi menurut saya memiliki dasar yang baik, sehingga harapannya teman-teman bisa mengembangkannya sendiri 😉.
models/pokemon/index.dart
Setelahnya adalah pembuatan services, ini merupakan module dimana kita mengimplementasikan Dio sebagai protokol yang akan melakukan pemanggilan API dan mengambil data dari API tersebut. Dan disini kita juga perlu melakukan mapping dari response API kita (untuk kasus ini, bentuk response dalam bentuk JSON) menjadi class model yang telah kita buat tadi.
services/pokemon/index.dart
Setelah selesai, kita akan membuat controller yang nantinya akan digunakan sebagai function yang akan dijalankan pada UI, sehingga client tidak memiliki akses langsung ke dalam API melainkan melalui controller terlebih dahulu. Dan biasanya untuk pemrograman yang lebih kompleks, logic-logic yang diperlukan juga berada di controller sehingga UI hanya bertugas mengkonsumsi dan menampilkan data, sedangkan services hanya bertugas sebagai penghubung ke server melalui API, semua logika pengolahan biasanya berada di dalam file controller.
controllers/pokemon/index.dart
Setelah semua module yang kita perlukan selesai, maka saatnya kita menggunakannya pada UI screen sehingga data yang sudah kita ambil bisa ditampilkan ke client.
ui/screens/pokemon_list/index.dart
ui/screens/pokemon_detail/index.dart
main.dart
Penjelasan
Pada main.dart kita mengganti MaterialApp menjadi GetMaterialApp yang sebenarnya kedua widget tersebut sama saja akan tetapi pada widget GetMaterialApp tersebut sudah ditambahkan beberapa properti kustom dari GetX sehingga memudahkan developer dalam pengembangan aplikasi seperti routing, builder, dll.
Kemudian pada ui/screens/pokemon_list/index.dart, kita menginisiasi PokemonController menggunakan fungsi Get.put yang berarti GetX hanya akan membangun controller apabila user mengakses screen tersebut, sehingga setelah controller berhasil dibangun, kita bisa menggunakan semua function dan variabel yang berada didalam controller tersebut.
Setelah itu untuk menampilkan list dari pokemon yang sudah kita dapatkan, kita menggunakan function yang bernama Obx. Obx sendiri digunakan ketika teman-teman ingin memperbarui widget(data pada widget) tersebut berdasarkan nilai variabel yang dapat diamati menggunakan .obs, jadi setiap kali ada perubahan nilai, Obx akan memperbarui widget secara otomatis pada aplikasi. Kemudian pada screen ini kita hanya akan menampilkan nama pokemon saja, lalu saat kita menekan nama dari salah satu pokemon, kita akan berpindah ke screen detail yang akan memuncul kan nama dan gambar pokemon tersebut.
Beralih pada ui/screens/pokemon_detail/index.dart, disini kita juga memanggil PokemonController akan tetapi kita menggunakan Get.find, kenapa ? karena pada screen sebelumnya kita sudah membangun PokemonController, jadi pada screen ini kita tidak perlu membangun ulang, melainkan memakai controller yang sudah terbangun tadi menggunakan Get.find ini sehingga mengurangi wasting memory karena pembangunan atau inisiasi yang tidak diperlukan. Pada screen ini juga kita akan mengambil API baru lagi berdasarkan nama pokemon yang kita pilih pada screen pokemon_list dan kemudian kita tampilkan gambar dari pokemon yang sudah kita pilih tersebut.
Untuk screen detail ini saya memerlukan initState untuk memanggil API detail pokemon menggunakan controller, sehingga data dari API tersebut akan ter-update pada variabel pokemon didalam controller sehingga screen detail ini akan selalu memperbarui gambar dan namanya sesuai data API yang sudah didapatkan.
Setelah semua selesai, teman-teman akan mendapatkan hasil kurang lebih seperti ini.
Penutup
Yak kita sudah sampai diujung artikel dan semoga teman-teman juga berhasil mengerjakan aplikasi dasar dan simpel diatas hehehe 😊. But yah, ini artikel yang lumayan panjang tapi disini kita mendapat pengetahuan baru tentang apa itu API dan cara pengolahan dasar API pada Flutter, penggunaan Dio, dan dibantu GetX sebagai state management-nya. Tetapi ingat ini hanya salah satu dari berbagai cara yang bisa digunakan pada Flutter jadi jangan membatasi diri teman-teman apabila mungkin ada cara yang lebih better daripada yang saya bagikan.
Sebagai penutup, semoga artikel sederhana yang saya tulis ini bisa bermanfaat bagi kita semua dan saya menerima segala masukan untuk meningkatkan kualitas artikel saya menjadi lebih baik dan mudah untuk dipahami lagi ya! 😘
See you ! untuk pembacaan kita selanjutnya :D
