Hola Sobat Ngoding, Kali ini saya ingin berbagi tips yang bisa kalian jadikan refrensi untuk membangun aplikasi kalian. Tips ini
saya gunakan disemua aplikasi yang sudah saya bangung dengan flutter, dan tips ini sangat membantu aku banget dalam tracking error dan tracking log serta maintanance yang sangat mudah.
Kebutuhan
Hal dasar yang kita butuhkan untuk membuat Rest API Client ini adalah HTTP, kalian bisa lihat documentasinya dimari ya Documentasi HTTP.
Langkah-Langkah
-
Pasang dulu lib HTTP nya ya
-
Buat folder dibawah lib dengan nama
api
atau apapun yang kalian inginkan -
Buat 3 file dengan nama
- api_db.dart
- api_client.dart
- api.dart
- Edit file
api.dart
, Kita anggap kelas Api.dart adalah bapak dari kelas ApiClient.dart maka kita akan membuat abstrak kelas sebagai dasar kebutuhan dari kelas ApiClient nantinya, maka akan jadi seperti dibawah ini :
import 'package:flutter/cupertino.dart';
abstract class Api {
Future<void> get(
{String url,
Map<String, String> headers,
VoidCallback callback(
bool status, String message, Map<String, dynamic> response)});
Future<void> post(
{String url,
Map<String, String> headers,
Map<String, String> body,
VoidCallback callback(
bool status, String message, Map<String, dynamic> response)});
Future<void> put(
{String url,
Map<String, String> headers,
Map<String, String> body,
VoidCallback callback(
bool status, String message, Map<String, dynamic> response)});
Future<void> delete(
{String url,
Map<String, String> headers,
VoidCallback callback(
bool status, String message, Map<String, dynamic> response)});
}
- Edit file
api_client.dart
menjadi seperti ini guys :
import 'dart:convert';
import 'package:flutter/cupertino.dart';
import 'api.dart';
import 'api_db.dart';
import 'package:http/http.dart' as http;
class ApiClient extends Api implements ApiDb {
static ApiClient _client = ApiClient._singleTon();
factory ApiClient() {
return _client;
}
ApiClient._singleTon();
laporkanError(String judulError, String pesanError) {
// buat method untuk laporan
}
@override
Future<void> delete(
{String url,
Map<String, String> headers,
Function(bool status, String message, Map<String, dynamic> response)
callback}) async {
http.delete(url, headers: headers).then((res) {
callback(res.statusCode == 200,
res.statusCode == 200 ? "Sukses" : "Gagal", jsonDecode(res.body));
debugPrint("print apa aja yang kamu butuhkan");
}).catchError((err) {
callback(false, err.toString(), null);
laporkanError("judulError", "pesanError");
}).timeout(Duration(seconds: 30), onTimeout: () {
callback(false, "Timeout", null);
laporkanError("judulError", "pesanError");
});
}
@override
Future<void> get(
{String url,
Map<String, String> headers,
Function(bool status, String message, Map<String, dynamic> response)
callback}) async {
http.get(url, headers: headers).then((res) {
callback(res.statusCode == 200,
res.statusCode == 200 ? "Sukses" : "Gagal", jsonDecode(res.body));
}).catchError((err) {
callback(false, err.toString(), null);
}).timeout(Duration(seconds: 30), onTimeout: () {
callback(false, "Timeout", null);
});
}
@override
Future<void> post(
{String url,
Map<String, String> headers,
Map<String, String> body,
Function(bool status, String message, Map<String, dynamic> response)
callback}) async {
http.post(url, headers: headers, body: body).then((res) {
callback(res.statusCode == 200,
res.statusCode == 200 ? "Sukses" : "Gagal", jsonDecode(res.body));
}).catchError((err) {
callback(false, err.toString(), null);
}).timeout(Duration(seconds: 30), onTimeout: () {
callback(false, "Timeout", null);
});
}
@override
Future<void> put(
{String url,
Map<String, String> headers,
Map<String, String> body,
Function(bool status, String message, Map<String, dynamic> response)
callback}) async {
http.put(url, headers: headers, body: body).then((res) {
callback(res.statusCode == 200,
res.statusCode == 200 ? "Sukses" : "Gagal", jsonDecode(res.body));
}).catchError((err) {
callback(false, err.toString(), null);
}).timeout(Duration(seconds: 30), onTimeout: () {
callback(false, "Timeout", null);
});
}
}
Penjelasan kode
static ApiClient _client = ApiClient._singleTon();
factory ApiClient() {
return _client;
}
ApiClient._singleTon();
adalah kode yang menunjukan bahwa kelas api client hanya boleh di inisialisasi sekali artinya singleTon metode ini akan membuat kelas apiclient hanya akan dipanggil dari 1 PID memory yang pertama kali intasiasi.
pada kode
laporkanError(String judulError, String pesanError) {
// buat method untuk laporan
}
digunakan untuk mentrack setiap ada error pada proses pemanggilan restApi ke server
kode yang lain adalah kode yang akan kita gunakan untuk melakukan proses transaksi antara server dan client.
Penjelasan Method .then
.then((res){
})
metode ini digunakan untk menangkap response sukses berkomunikasi dengan server, baik itu 404 atau 200
Penjelasan Method .catchError
.catchError((err) {
callback(false, err.toString(), null);
})
method ini akan menangkap semua error yang terjadi, baik karena error parsing atau karena error tidak dapat menghubungi server
Penjelasan Method .timeOut
.timeout(Duration(seconds: 30), onTimeout: () {
callback(false, "Timeout", null);
});
Ini yang terakhir adalah error saat reques tidak dapat feedback dari server setelah 30detik, kalian bisa merubahnya sesuai kebutuhan kalian.
Menambahkan BASE_URL dan EndPoint
Untuk menambahkan BASE_URL dan EndPoint, temen2 buka dan edit file api_db.dart
sebagai kumpulan dari semua endpoint yang kita miliki.
Lihatlah contoh dibawah:
class ApiDb {
static const BASE_URL = "https://contoh-url.com";
static const LOGIN = BASE_URL+"/login";
static const REGISTER = BASE_URL"/register";
// tambahkan sesuai kebutuhan temen2
}
Cara Penggunaan
Untuk menggunakan kelas yang sudah kita buat tadi, temen-temen bisa menggunakan dengan cara seperti dibawah
final ApiClient _client = new ApiClient();
login(){
_clint.post(
url:LOGIN,
headers:{},
body:{"username":"thengoding","password":"thengoding"},
callback:(status,message,response){
if(status){
//Menuju halama utama
}else{
//Tampilkan errornya kenapa
}
return;
}
);
}
Semua Return yang diperoleh akan dilempar ke parameter callback
dimana yang dilemapr berupa
status : Boolean
message : String
response : Map<String,dynamic>
Kelebihan Menggunakan Tips ini
- Mudah Maintanancenya
- Print Lognya cukup di satu kelas dan tidak perlu print log di tempat dia di instasiasi
- Memudahkan Tracking Api Error Reporting
- Menghindari Redundance Code
Cukup sekian kawan kawan tips flutter dari saya, semoga bermanfaat :-) …
Kode itu ibarat Cinta, Butuh dimengerti dan dafahami.. asik asik - Penulis