Setelah sebelumnya kita memfokuskan pada segi UI di Login Management pada
Flutter Part 1 ( klik disini
). Pada kala ini kita akan menfokuskan
pada Management request apinya 😁. Dalam Pembuatannya kita
create new file terlebih dahulu TokenBloc.dart, TokenEvent.dart
dan TokenState.dart.
TokenBloc adalah logic dari login, dimana dalam
bloc kita dapat mengatur flow dari login tersebut.
Pada kali ini kita membuat flow pertama hit token terlebih
dahulu jika response dari token success baru dilanjutkan dengan
proses login, jika failed maka akan di kembalikan ke
page login untuk menampilkan paga failed, dan saat proses
request data akan ditampilkan loading process.
class TokenBloc extends Bloc<TokenTokenEvent,
TokenState> {
ApiTokenRepository _apiTokenRepository = new
ApiTokenRepository();
@override
TokenState get initialState =>
TokenLoginInitialized();
@override
Stream<TokenState>
mapEventToState(TokenTokenEvent event) async* {
try{
if (event is
FetchLoginTokenEvent){
yield TokenLoginLoading();
TokenModel tokenModel =
await _apiTokenRepository.fetchToken();
if
(tokenModel.itemToken.isEmpty){
yield
TokenLoginFailed(tokenModel.error);
return;
}
final prefs = await
SharedPreferences.getInstance();
prefs.setString('token',
tokenModel.itemToken);
LoginModel loginModel =
await _apiTokenRepository.fetchLogin(event.username,
event.password);
if
(loginModel.error.isNotEmpty){
yield
LoginLoaded(loginModel);
return;
}
yield
TokenLoginFailed(loginModel.error);
}
}catch(error){
debugPrint(error);
}
}
}
TokenEvent adalah relation antara page login dengan
TokenBloc, dimana pada pada TokenEvent ini hanya ada dua
event yang diberikan yaitu
startLoginTokenEvent
dan FetchLoginTokenEvent.
startLoginTokenEvent : event pertama kali saat pertama kali login di tampilkan.
FetchLoginTokenEvent : event ini adalah event ketika klik login button.
abstract class TokenEvent{}
class startLoginTokenEvent extends TokenEvent{}
class FetchLoginTokenEvent extends TokenEvent{
String username;
String password;
FetchLoginTokenEvent(this.username,
this.password);
}
TokenState adalah relation antara Bloc dengan request. dimana dengan
state ini digunakan untuk menyampaikan response yang
diberikan backend ke TokenBloc yang kemudian di teruskan ke
UI dengan menggunakan event.
abstract class TokenState {}
class TokenLoginInitialized extends TokenState{}
class TokenLoginLoading extends TokenState {}
class TokenLoginFailed extends TokenState{
String errorMessage;
TokenLoginFailed(this.errorMessage);
}
class LoginLoaded extends TokenState{
LoginModel loginModel;
LoginLoaded(this.loginModel);
}
Setelah ketiga file ini terbuat kita mulai dengan pembuatan
request ke backend. Pada request ke backend kita
menggunakan dio library. dio library yang digunakan kali
menggunakan dio library yang telah kami modifikasi sehingga akan
memudahkan kita dalam proses request ke backend. ( klik ).
getTokenGenerate adalah singleSignon dalam aplikasi ini
atau secuity apa pada saat masuk kedalam main
application.
Future<TokenModel> getTokenGenerate()
async {
var bodyRequest = {
"client_id": "007",
"client_secret": "James
Bon",
};
try{
final response = await
ApiServiceHit("token", bodyRequest);
debugPrint('response
success : ${response.data.toString()}');
var accessToken =
response.data["data"]["access_token"].toString();
return
TokenModel(accessToken);
}catch(error){
debugPrint('Error request
: $error');
return
TokenModel.withError(error);
}
}
getLogin adalah request yang di berikan ke backend untuk
mendapatkan apa - apa yang dibutuhkan dalam main application.
Future<LoginModel> getLogin(String
username, String password)
async{
var bodyRequest = {
"username": username,
"password":
password,
};
try{
final response = await
ApiServiceHit("other", bodyRequest);
debugPrint('response
success : ${response.data.toString()}');
itemLogin item =
itemLogin(response.data["data"]["id_username"].toString(),response.data["data"]["username"].toString());
return
LoginModel(item);
}catch(error){
debugPrint('Error
request : $error');
return
TokenModel.withError(error);
}
}
Alangkah baiknya jika kedua function tersebut dimasukkan ke
dalam satu class untuk memudahkan dalam proses pembacaan
code :
class ApiTokenProvider {
ApiSession apiSession = new
ApiSession();
securityModule securitymodule =
new securityModule();
Future<TokenModel>
getTokenGenerate() async {
var bodyRequest = {
"client_id":
"007",
"client_secret":
"James Bon",
};
try{
final response =
await ApiServiceHit("token",
bodyRequest);
debugPrint('response success :
${response.data.toString()}');
var accessToken =
response.data["data"]["access_token"].toString();
return
TokenModel(accessToken);
}catch(error){
debugPrint('Error
request : $error');
return
TokenModel.withError(error);
}
}
Future<LoginModel> getLogin(String
username, String password)
async{
var bodyRequest = {
"username": username,
"password":
password,
};
try{
final response =
await ApiServiceHit("other", bodyRequest);
debugPrint('response
success : ${response.data.toString()}');
itemLogin item
=
itemLogin(response.data["data"]["id_username"].toString(),response.data["data"]["username"].toString());
return
LoginModel(item);
}catch(error){
debugPrint('Error
request : $error');
return
TokenModel.withError(error);
}
}
}
ApiTokenRepository adalah class yang memudahkan kita untuk memanggil
class provider dimanapun kita mau.
class ApiTokenRepository{
final ApiTokenProvider _apiTokenProvider
= new ApiTokenProvider();
Future<TokenModel> fetchToken()
=> _apiTokenProvider.getTokenGenerate();
Future<dynamic>
fetchLogin(username, password) =>
_apiTokenProvider.getLogin(username, password);
}
Berikut Link full source code dari dari Login Management pada
Flutter 😊:
Login Management API pada Flutter Part 2
Reviewed by sdiik
on
June 07, 2020
Rating:
Reviewed by sdiik
on
June 07, 2020
Rating:
No comments: