Management Request Api Dengan Dio Pada Flutter

Selamat siang di bulan Ramadhan 😊

Setelah sebelumnya kita telah mencoba membuat management API dengan http Library  klik disini 👇. Pada kali ini kita akan mencoba melakukan management API dengan menggunakan Dio Library.

dio: ^3.0.9

Petama yang kita lakukan adalah menambahkan library Dio pada dependency.  dependency berada pada file pubspec.yaml.  setelah itu jalankan perintah flutter pub run pada terminal untuk menginstall dependency diatas.

Setelah dependency terinstall dengan baik, kemudian kita buat file baru dengan nama default_service.dart untuk membuat function management api :

const String BASE_URL = "https://diskusisenja.co.id";

BASE_URL adalah url default sebelum ketambahan endpoint.  kita memisahkan agar nanti bisa digunakan bersama dalam aplikasi.

Kemudian kita mengatur Dio librarynya tentang berapa waktu untuk membaca, mengirim dan dan menerima data. hal ini dilakukan untuk mengurangi over waiting pada aplikasi dan mengurangi penggunaan RAM yang berlebih pada proses penerimaan data serta untuk mencegah terjadinya proses injecting dari pengambilan data.

Dio ApiServiceTime() {
  Dio dio = new Dio();
  dio.options.connectTimeout = 3000;
  dio.options.receiveTimeout = 3000;
  dio.options.sendTimeout = 3000;
  return dio;
}

Setelah itu kita membuat function api header,  dimana function ini berfungsi untuk menangani header yang berbeda - beda saat proses hit backend dan memudahkan dalam  penyesuaian header pada setiap request yang kita lakukan.

Dio ApiServiceHeader(String type) {

switch(type){
    case "token":
      Dio dio = ApiServiceTime();
      dio.options.headers['content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
      dio.options.headers["authorization"] = "Basic 1234567";
      return dio;

    case "login":
      Dio dio = ApiServiceTime();
      dio.options.headers['content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
      dio.options.headers["Authorization"] = "Bearer 7654321";
      return dio;

   default :
     break;
  }
}

Untuk Endpoint sendiri kita bedakan functionnya sehingga kode yang dihasilkan lebih terlihat clean code dan tidak mengangun function lainnya

String ApiServiceEndpoint(String endpoint) {
  switch (endpoint) {
    case "token":
      return '$BASE_URL/oauth/token';
    case "other":
      return '$BASE_URL/unit/diskusi';
    default:
      break;
  }
}

Setelah itu kita buat function untuk mendefinisikan error yang terjadi pada saat request data. proses pembuatan fungsion ini untuk memudahkan user untuk tracking dimana letak kesalahan selama proses hit data ke backEnd

String ApiServiceHandleError(String error) {
  if (error is DioError) {
    DioError dioError = error as DioError;
    switch (dioError.type) {
      case DioErrorType.CANCEL:
        return "Request to Api server was cancelled";
      case DioErrorType.CONNECT_TIMEOUT:
        return "Connection timeout with API server";
      case DioErrorType.DEFAULT:
        return "Connection to API server failed due to internet connection";
      case DioErrorType.RECEIVE_TIMEOUT:
        return "Receive timeout in connection with API server";
      case DioErrorType.RESPONSE:
        return "Received invalid status code: ${dioError.response.statusCode}";
      case DioErrorType.SEND_TIMEOUT:
        return "Send timeout in connection with API server";
    }
  } else {
    return "Unexpected error occured";
  }

}

Tiba saatnya untuk membuat function API Service hit nya. dimana function ini untuk menghandle kebutuhan dari request seperti header, endpoint serta   body requestnya.

ApiServiceHit(String type, Map<String, String> bodyRequest)  {
  switch(type){
    case "token":
    return  ApiServiceHeader("token").post(ApiServiceEndpoint("token"), data: bodyRequest);
    default:
    return  ApiServiceHeader("other").post(ApiServiceEndpoint("other"), data: bodyRequest);
  }
}

Untuk menggunakan Setting Management API seperti diatas. pertama kita buat file baru dengan nama api_token_provider.dart. kemudian kita buat function untuk hit token  :

class ApiTokenProvider {
  Future<String> getTokenGenerate() async {
    var bodyRequest = {
      "client_id": "12345678",
      "client_type": "administrator", 
      "client_initial": "insideofart",
    };

    try {
      final response = await ApiServiceHit("token", bodyRequest); 
      var accessToken = response.data["data"]["access_token"].toString(); 
      return accessToken;
    } catch (error) {
      var messageError = ApiServiceHandleError(error);
      return messageError;
    }
  }
}

Seperti itulah management API dengan Dio hampir sama  http, tetapi  keduanya  memiliki perbedaan dalam pengambilan data response :

for http response get data : response.body
for dio response get data  : response.data

Seperti itulah, semoga bermanfaat 😊