Aplikasi android untuk cek ongkir dengan API-Raja Ongkir | Flutter Mobile
Eksplorasi dan implementasi dart package-pub dev : http untuk mengambil data via API
Perkembangan teknologi memberikan kemudahan di segala sisi kehidupan, salah satunya pada bidang usaha barang dan jasa. Dengan teknologi , penjual dan pembeli tidak perlu bertemu secara langsung untuk melakukan transaksi jual-beli barang. Juga dalam hal pengiriman barang, penjual sangat terbantu dengan adanya jasa ekspedisi-kurir (jasa antar jemput barang) yang berfungsi sebagai perantara untuk mengantarkan barang dari penjual sampai ke tangan pembeli. Di sisi pembeli sendiri, mereka tidak perlu repot-repot datang ke penjual untuk mengambil barang yang dibeli, hanya tinggal menunggu barang datang sampai di depan rumah.
Berdasarkan uraian di atas, pada kesempatan kali ini kita akan membuat aplikasi android untuk cek ongkos kirim dari satu daerah ke daerah lain di wilayah Indonesia, menggunakan sdk flutter dan mengambil data dari API-Raja Ongkir untuk data biaya ongkos kirim. Raja Ongkir adalah platform gratis yang menyediakan data terpadu ongkos kirim di wilayah Indonesia. Untuk dapat mengakses wilayah yang lebih luas bahkan sampai ke luar negeri, pengguna dapat meng-upgrade ke akun Basic & Pro dengan fitur yang lebih bervariatif. Disini kita cukup menggunakan akun Starter (gratis) sebagai bahan latihan.
Langsung saja kita mulai:
Pertama buka website raja ongkir (klik disni) dan buat akun baru. Setelah akun sukses di buat, pergi ke menu profile dan pilih menu panel, di dalamnya terdapat API-key yang berfungsi untuk menghubungkan aplikasi kita dengan data sistem pada Raja Ongkir. Lihat gambar dibawah ini :
Langkah selanjutnya buat file flutter baru dengan nama file sesuka kalian, disini saya menggunakan nama file: flutter_mitra_ekspedisi, kemudian buka file yang telah dibuat pada text editor.
Masuk ke file pubspec.yaml dan tambahkan dependencies code berikut:
http: ^0.13.4dropdown_search: ^3.0.1
atau cari package http terupdate disini :
dan package dropdown_search terupdate disini:
Lihat detail gambar di bawah :
Selanjutnya simpan (tekan CTRL+ S) dan tunggu sampai package berhasil didownload.
Langkah selanjutnya masuk ke folder lib dan buat folder baru dengan nama models untuk menyimpan model class data kota wilayah di Indonesia. di dalam folder models tambahkan file dengan nama city.dart dan masukan code berikut ini:
Penjelasan singkat : code diatas untuk menyimpan class model city yang berfungsi untuk mengambil data lokasi wilayah di Indonesia berdasarkan data pada sistem Raja-Ongkir. Data diambil dalam format Json berupa wilayah kabupaten atau kota (exp: Kota Bekasi, Kabupaten Bekasi).
Langkah selanjutnya buat folder pages di dalam folder lib, dan buat 3 file baru yaitu :
file dengan nama home_page.dart untuk menyimpan code halaman yang akan ditampilkan pertama kali saat aplikasi dijalankan, masukan code berikut:
Selanjutnya masih di folder pages buat file baru dengan nama check_page.dart, file ini menyimpan code untuk menampilkan halaman yang berisi inputan textfield dan dropdown_search, yaitu search kota/ daerah asal, search kota/daerah tujuan, input berat paket satuan gram, dan search jenis kurir serta button yang mengarahkan ke halaman detail ongkos kirim, masukan code berikut:
Perhatikan bagian ini:
var key = 'API-key Anda'Ganti value ‘API-key Anda’ dan masukan code pada API-key Raja Ongkir yang telah anda simpan sebelumnya.
Buat file terakhir pada folder pages dengan nama detail_page.dart, dimana pada halaman ini menyimpan code untuk menampilkan halaman detail ongkos kirim dari data yang dimasukan pada halaman check_page.dart, masukan code berikut :
Perhatikan bagian ini:
var key = 'API-key Anda'Ganti value ‘API-key Anda’ dan masukan code pada API-key Raja Ongkir yang telah anda simpan sebelumnya.
Langkah Selanjutnya yaitu edit file main.dart yang terletak pada folder lib, file ini akan di eksekusi pertama kali pada saat aplikasi di jalankan, rubah codenya sebagai berikut :
Agar image, animasi dan custom font berjalan dengan baik, tambahkan folder baru pada file flutter kalian dengan nama folder assets dan tambahkan image serta google font dengan format .png, .gif, dan .tff berikut ini :
donwload semua file assets disini, lalu copy dan pastekan semua file ke dalam folder assets pada file flutter yang kalian buat.
Disclaimer : Anda dapat menggunakan image dan custom font anda sendiri, sesuaikan dengan nama file dengan pemanggilan assets pada codingan anda.
Selanjutnya daftarkan assets yang telah di buat pada file pubspc.yaml , masukan code seperti berikut :
# To add assets to your application, add an assets section, like this:assets:- assets/
dan masukan juga code berikut :
fonts:- family: BebasNeuefonts:- asset: assets/BebasNeue-Regular.ttfstyle: italic
Untuk lebih jelasnya lihat gambar berikut :
Selanjutnya save update pada file pubspc.yaml (tekan CTRL+ S) tunggu sampai update selesai dijalankan.
Setelah semua langkah berhasil di jalankan, saat nya untuk running aplikasi pada mode debugging.
Untuk running aplikasi, pertama pilih emulator yang akan digunakan , disini saya menggunakan mobile emulator Pixel 4 XL API 29, selanjutnya tekan F5 atau Fn + F5 dan tunggu sampai halaman aplikasi muncul. Apabila masih ada error, cek ulang source codenya pastikan tidak ada typo atau salah tempat copy paste code filenya dan lakukan update dependencies ke versi terbaru.
Hasilnya adalah sebagai berikut :
Kesimpulan
Kita sudah berasil membuat aplikasi android untuk cek ongkir dengan menggunakan sdk Flutter dan data dari API-Raja Ongkir, disini kita sudah mengimplementasikan penggunaan package http pada flutter untuk menghubungkan dengan API pada platfom Raja-Ongkir. Sekian dari saya semoga postingan ini bermanfaat, nantikan pembahasan selanjutnya.
Download full source code (github) bisa cek disini
