Management Request Response API pada Flutter

Sore ini Senja tertimbun oleh Awan 😁

Hari ini kita akan memanfaatkan form Login yang telah kita buat sebelumnya   klik disini 👇, untuk berinteraksi dengan API dengan memanfaatkan libarary http. Serta kita mencoba memanagement proses request response sehingga dapat digunakan untuk  proses lain seperti melakukan register dan sebagainya.

Pertama yang perlu dilakukan adalah menambahkan dependency baru, buka file pubspec.yaml dan tambahkan dependencynya :

http: ^0.12.0+4

Setelah itu install dependencynya dengan perintah flutter pub get. kemudian kita buat file baru dengan nama ApiService.dart . dan membuat beberapa class, seperti berikut :

class URLS : class ini nantinya dapat menampung semua URL yang anda gunakan, dan anda mendeklarasikan seperti berikut :

class URLS {
  static const String BASE_URL_LOCALONE = 'http://127.0.0.12:3030';
  static const String BASE_URL_LOCALTWO = 'http://127.0.0.21:3030';
  static const String BASE_URL_LOCALTHRE = 'http://127.0.0.16:3030'; 
}

class APIService :  class ini digunakan untuk menampung beberapa function :

- function static endpoint : function ini berfungsi untuk mengembalikan return yang sesuai dengan parameter yang diinginkan, dengan adanya function ini  source code  akan terlihat lebih clean karena sudah di handle oleh function ini .

static Endpoint(String endpoint) {
    switch (endpoint) {
      case "login":
        return "${URLS.BASE_URL_LOCAL}/user/login";
      case "register":
        return "${URLS.BASE_URL_LOCAL}/user/register";
      case "forgetPassword":
        return "${URLS.BASE_URL_LOCAL}/user/forgetpassword";
      default:
        break;
    }
}

- function header service : function ini berfungsi untuk menghandle header dari request

static header(String typeheader) { 
    switch (typeheader){
      case "private":
        return {HttpHeaders.authorizationHeader: "input header in here"};
      default:
        return "";
    } 
}

- Global Endpoint Service :  function ini dapat menghandle semua request dan response yang diinginkan oleh user dimana user tinggal memasukkan endpoint dan parameter request, class ini sengaja dibuat untuk menyatukan semua class request, hal ini dikarenakan terkadang ada beberapa class request yang langsung mengembalikan data berupa array data tidak berupa string, walaupun hal itu tidak apa - apa, akan tetapi akan lebih baik jika terpisah.

static requestData (String endpoint, String typeheader, requestbody){
    return http.post(Endpoint(endpoint), headers: header(typeheader), body: requestbody);
}

- class Endpoint Service : class ini dibuat sebagai media penghantar antara tampilan dan backend untuk mendapatkan response data, hasil dari request akan selalu berbentuk string. sehingga dapat di jadikan apa saja  :

static EndpointService(String endpoint, requestdata ) async{
    final response = await requestData(endpoint, "", requestdata);
    return response.body;
}

Berikut ini saya menggunakan function diatas untuk proses Login :

void _login() {
    final form = formKey.currentState;
    if (form.validate()) {
      form.save();
    }
    var requestLogin = {"email": _email, "password": _password};
    var api = ApiService.EndpointService("login", requestLogin);
    
    api.then((response) {
      final Map parsed = json.decode(response);

      print("success"+parse["data"]["Username"].toString);

    }, onError: (error) {
      print(error.toString());
    });

Seperti itulah Menagement Request Response untuk saat ini. Mungkin akan berubah disaat saya menemukan cara yang lebih baik lagi   😊. Berikut link Githubnya, semoga bermanfaat :

https://github.com/sdiik/MaybeHelp/blob/master/APIRequestResponse