Tutorial Android #2: Mengintegrasikan Retrofit untuk Konsumsi API Laravel
Halo para kurir data! Setelah berhasil menyiapkan Android Studio, sekarang saatnya kita menghubungkan aplikasi Android kita dengan API Laravel yang sudah dibangun di seri sebelumnya. Kita akan menggunakan Retrofit, sebuah library yang memudahkan kita mengirim dan menerima data dari internet. Anggap Retrofit ini seperti "Gojek" yang mengantarkan data dari server ke aplikasi kita. Siap jadi kurir handal?
Apa yang akan kita lakukan?
- ✅ Menambahkan library Retrofit, Gson Converter, dan OkHttp ke project Android.
- ✅ Memberi izin internet di AndroidManifest.xml.
- ✅ Membuat model class untuk menampung data dari API (contoh: data user, login response).
- ✅ Membuat interface yang mendefinisikan endpoint API kita.
- ✅ Membuat Retrofit client singleton (ApiClient) untuk memanggil API.
- ✅ Menambahkan logging interceptor agar kita bisa melihat request dan response di Logcat.
- ✅ Menguji koneksi dengan memanggil endpoint sederhana (misal: /api/user) dan menampilkan hasilnya di TextView.
- ✅ Menangani error dan menampilkan Toast.
Langkah 1: Menambahkan Dependencies ke build.gradle
Buka project Android Studio, lalu di panel kiri cari Gradle Scripts → build.gradle (Module: app). Tambahkan baris berikut di dalam blok dependencies:
// Retrofit & Gson implementation 'com.squareup.retrofit2:retrofit:2.9.0' implementation 'com.squareup.retrofit2:converter-gson:2.9.0' // OkHttp & Logging Interceptor (untuk debugging) implementation 'com.squareup.okhttp3:okhttp:4.11.0' implementation 'com.squareup.okhttp3:logging-interceptor:4.11.0'
Setelah menambahkan, klik "Sync Now" yang muncul di pojok kanan atas. Tunggu sampai proses sync selesai. Proses ini akan mengunduh library-library yang kita butuhkan.
Langkah 2: Memberi Izin Internet di AndroidManifest.xml
Aplikasi kita butuh izin untuk mengakses internet. Buka app/src/main/AndroidManifest.xml, tambahkan baris berikut sebelum tag <application>:
<uses-permission android:name="android.permission.INTERNET" />
Jadi file manifest akan seperti ini:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.banktabunganapp">
<uses-permission android:name="android.permission.INTERNET" />
<application ... >
...
</application>
</manifest>
Izin ini penting karena kita akan berkomunikasi dengan server Laravel yang mungkin berada di localhost atau internet.
Langkah 3: Membuat Model Class (POJO)
Model class adalah representasi data dari API. Kita akan mulai dengan model sederhana untuk menerima data user dari endpoint /api/user (endpoint ini membutuhkan token, tapi untuk testing kita bisa buat endpoint test dulu). Tapi karena kita belum punya token, kita bisa panggil endpoint yang tidak perlu autentikasi, misalnya /api/test (jika kita buat). Untuk latihan, kita asumsikan ada endpoint GET /api/test yang mengembalikan JSON seperti:
{
"message": "Halo dari Laravel!",
"status": "success"
}
Buat class baru dengan nama TestResponse.java di folder java/com.example.banktabunganapp (atau package sesuai project). Isinya:
package com.example.banktabunganapp;
import com.google.gson.annotations.SerializedName;
public class TestResponse {
@SerializedName("message")
private String message;
@SerializedName("status")
private String status;
public String getMessage() {
return message;
}
public String getStatus() {
return status;
}
}
Penjelasan: @SerializedName digunakan Gson untuk mencocokkan nama field JSON dengan variabel Java. Nama variabel bisa beda asalkan serialized name sesuai.
Langkah 4: Membuat Interface API
Buat interface baru bernama ApiService.java:
package com.example.banktabunganapp;
import retrofit2.Call;
import retrofit2.http.GET;
import retrofit2.http.POST;
import retrofit2.http.Body;
import retrofit2.http.Field;
import retrofit2.http.FormUrlEncoded;
// tambahkan import lain sesuai kebutuhan
public interface ApiService {
// Contoh endpoint test (GET)
@GET("test")
Call<TestResponse> getTestMessage();
// Nanti kita tambahkan endpoint login, register, dll
// @POST("login")
// @FormUrlEncoded
// Call<LoginResponse> login(@Field("email") String email, @Field("password") String password);
}
Perhatikan bahwa kita menggunakan @GET("test") artinya endpoint relatif terhadap base URL. Base URL nanti kita set di Retrofit builder.
Langkah 5: Membuat Retrofit Client Singleton
Buat class ApiClient.java yang akan menyediakan instance Retrofit dan ApiService:
package com.example.banktabunganapp;
import okhttp3.OkHttpClient;
import okhttp3.logging.HttpLoggingInterceptor;
import retrofit2.Retrofit;
import retrofit2.converter.gson.GsonConverterFactory;
public class ApiClient {
private static final String BASE_URL = "http://10.0.2.2:8000/api/"; // untuk emulator Android, localhost di komputer adalah 10.0.2.2
private static Retrofit retrofit = null;
private static ApiService apiService = null;
public static Retrofit getClient() {
if (retrofit == null) {
// Tambahkan logging interceptor
HttpLoggingInterceptor logging = new HttpLoggingInterceptor();
logging.setLevel(HttpLoggingInterceptor.Level.BODY);
OkHttpClient client = new OkHttpClient.Builder()
.addInterceptor(logging)
.build();
retrofit = new Retrofit.Builder()
.baseUrl(BASE_URL)
.addConverterFactory(GsonConverterFactory.create())
.client(client)
.build();
}
return retrofit;
}
public static ApiService getService() {
if (apiService == null) {
apiService = getClient().create(ApiService.class);
}
return apiService;
}
}
Penjelasan:
BASE_URLmenggunakan10.0.2.2karena emulator Android menganggap localhost komputer sebagai alamat tersebut. Jika pakai HP sungguhan via USB, pakai IP komputer di jaringan (misal 192.168.1.10).HttpLoggingInterceptorberguna untuk melihat request dan response di Logcat (tab Logcat di Android Studio). Level BODY akan menampilkan isi JSON.
Langkah 6: Uji Coba di MainActivity
Sekarang kita akan memanggil API test dari MainActivity.java. Tambahkan sebuah TextView di layout activity_main.xml untuk menampilkan hasil. Misal:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:id="@+id/tvMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Menunggu data..."
android:textSize="18sp"/>
</LinearLayout>
Lalu di MainActivity.java:
package com.example.banktabunganapp;
import android.os.Bundle;
import android.widget.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;
public class MainActivity extends AppCompatActivity {
private TextView tvMessage;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tvMessage = findViewById(R.id.tvMessage);
// Panggil API test
ApiService service = ApiClient.getService();
Call<TestResponse> call = service.getTestMessage();
call.enqueue(new Callback<TestResponse>() {
@Override
public void onResponse(Call<TestResponse> call, Response<TestResponse> response) {
if (response.isSuccessful()) {
TestResponse testResponse = response.body();
tvMessage.setText(testResponse.getMessage());
Toast.makeText(MainActivity.this, "Status: " + testResponse.getStatus(), Toast.LENGTH_SHORT).show();
} else {
tvMessage.setText("Error: " + response.code());
}
}
@Override
public void onFailure(Call<TestResponse> call, Throwable t) {
tvMessage.setText("Gagal: " + t.getMessage());
Toast.makeText(MainActivity.this, "Network error", Toast.LENGTH_SHORT).show();
}
});
}
}
Kode ini melakukan panggilan asynchronous (enqueue) sehingga tidak memblokir UI. Jika sukses, TextView akan menampilkan pesan dari server. Jika gagal, akan menampilkan error.
/api/test tersedia. Jika belum, buat route sederhana di routes/api.php:
Route::get('/test', function() {
return response()->json(['message' => 'Halo dari Laravel!', 'status' => 'success']);
});
Langkah 7: Melihat Logging di Logcat
Jalankan aplikasi di emulator. Buka tab Logcat di bagian bawah Android Studio. Filter dengan kata kunci "OkHttp" atau cukup lihat semua log. Kamu akan melihat request URL, header, dan response JSON yang dikembalikan server. Ini sangat membantu untuk debugging!
⚠Penanganan Error
Di onFailure, biasanya terjadi karena masalah jaringan (koneksi mati, server mati, timeout). Kita tampilkan Toast agar pengguna tahu. Di onResponse, kita cek response.isSuccessful() untuk memastikan status code 200-299. Jika tidak, kita bisa ambil error body.
Langkah Selanjutnya
Dengan Retrofit yang sudah terpasang, kita siap untuk membuat fitur-fitur selanjutnya:
- Login & Register (mengirim email, password, menerima token).
- Menyimpan token di SharedPreferences.
- Mengirim token di header Authorization untuk request yang membutuhkan autentikasi.
Di tutorial #3, kita akan membuat halaman login dan registrasi yang sesungguhnya. Sampai jumpa!
Kesimpulan
- ✅ Retrofit, Gson, OkHttp berhasil ditambahkan ke project.
- ✅ Izin internet diberikan.
- ✅ Model class dan interface API dibuat.
- ✅ Retrofit client singleton dengan logging interceptor.
- ✅ Uji coba panggilan API test berhasil.
- ✅ Logging memudahkan debugging.
Daftar Tutorial Android (Lanjutan)
- #3: Halaman Login dan Registrasi Nasabah
- #4: Dashboard Nasabah – RecyclerView dan Saldo
- #5: Ubah Password dan Edit Profil
- dan seterusnya...