Membuat aplikasi android dengan mengambil data dari API
Di tutorial ini akan membahas cara mengambil data dari API (Application Programming Interface).
Apa itu API? selengkapnya bisa baca disini https://id.wikipedia.org/wiki/Antarmuka_pemrograman_aplikasi
Untuk mengambil data dari API untuk ditampilakn di aplikasi android memerlukan library network yang dapat menghubungkan antara android dengan Web API. Di android ada beberapa library yang bisa digunakan seperti Retrofit, Volley, FastAndroid Network (FAN).
Pada tutorial kali ini kita akan menggunakan retrofit.
Langkah ke 1:
Buat new project File -> new Project-> pilih empty activity -> pilih language java kemudian klik finish dan tunggu sampai build selesai.
Langkah ke 2:
Buka Build.gradle(Module) kemudian tambahkan library retrofit.
implementation 'com.squareup.retrofit2:retrofit:2.1.0'Tambahkan library gson converter untuk convert json format secara otomatis.
implementation 'com.squareup.retrofit2:converter-gson:2.1.0'Tambahkan library logging interceptor untuk mengetahui response dari API ketika men-debug aplikasi.
implementation "com.squareup.okhttp3:logging-interceptor:3.3.0"Tambahkan library glide untuk menampilkan gambar. karena kita akan mengambil url gambar dan menampilkannya di aplikasi android.
implementation 'com.github.bumptech.glide:glide:4.9.0'Setelah semuanya tambahkan, kemudian klik sync Now di pojok kanan atas dan tunggu sampai build selesai.
Langkah ke : 3
Setelah build selesai kita buat class untuk retrofit. buat class dengan cara klik kanan pada package com.domainanda.foodapp kemudian pilih java class dan beri nama Retrofit builder.
setelah itu masukan kode berikut.
public class RetrofitBuilder {
public static Retrofit builder(Context context) {
OkHttpClient.Builder okhttpBuilder = new OkHttpClient().newBuilder();
okhttpBuilder.connectTimeout(60, TimeUnit.SECONDS);
okhttpBuilder.writeTimeout(60, TimeUnit.SECONDS);
okhttpBuilder.readTimeout(60, TimeUnit.SECONDS);
HttpLoggingInterceptor interceptor = new HttpLoggingInterceptor();
interceptor.setLevel(HttpLoggingInterceptor.Level.BODY);
okhttpBuilder.addInterceptor(interceptor);
GsonBuilder gsonBuilder = new GsonBuilder();
gsonBuilder.setLenient();
Gson gson = gsonBuilder.create();
Retrofit retrofit = new Retrofit.Builder()
.baseUrl("https://azharsaepudin.github.io/FootBallPlayer/")
.client(okhttpBuilder.build())
.addConverterFactory(GsonConverterFactory.create(gson))
.build();
return retrofit;
}
}pada code diatas terdapat sebuah Url. https://azharsaepudin.github.io/FootBallPlayer/
kita akan mengabil data API dari url tersebut. berikut url lengkapnya.
https://azharsaepudin.github.io/FootBallPlayer/getDataFood.json
Anda bisa lihat bahwa di url tersebut terdapat data yang ditampilkan dengan format JSON.
data tersebut akan kita tampilkan kedalam aplikasi android.
Langkah ke 4:
Buat sebuah kelas lagi dengan nama FoodApi kemudian pilih type menjadi interface. setelah selesai maka masukan code dibawah ini.
public interface FoodApi {
@GET("getDataFood.json")
Call<FoodResponse<FoodItem>> getFood();
}Langkah ke 5:
Buat class lagi dengan nama FoodResponse yang berfungsi untuk membaca data response dari API. kemudian masukan code dibawah ini.
public class FoodResponse<T> {
boolean success;
String message;
List<T> data;
public boolean isSuccess() {
return success;
}
public void setSuccess(boolean success) {
this.success = success;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public List<T> getData() {
return data;
}
public void setData(List<T> data) {
this.data = data;
}
}Langkah ke 6:
Buat class lagi dengan nama FoodItem. kelas POJO ini berfungsi untuk membaca response value yang berupa jsonArray. harap diperhatikan nama variabel di FoodItem harus sama dengan parameter pada json.
public class FoodItem {
String name_food;
String description;
String price;
String code;
String image;
public void setName_food(String name_food) {
this.name_food = name_food;
}
public String getName_food() {
return name_food;
}
public void setDescription(String description) {
this.description = description;
}
public String getDescription() {
return description;
}
public void setPrice(String price) {
this.price = price;
}
public String getPrice() {
return price;
}
public void setCode(String code) {
this.code = code;
}
public String getCode() {
return code;
}
public void setImage(String image) {
this.image = image;
}
public String getImage() {
return image;
}
}Langkah ke 7:
Buat class lagi dengan nama MyService. class ini akan digunakan untuk penghubung antara retrofit builder, interface foodApi yang nantinya kita akan instance di MainActivity.
public class MyService {
FoodApi foodApi;
public MyService(Context context) {
foodApi = RetrofitBuilder
.builder(context)
.create(FoodApi.class);
}
public FoodApi getInstance() {
return foodApi;
}
}Langkah ke 8:
Bukalah main_activity.xml. buat sebuah recyclerview untuk menampilkan data dari api ke dalam recyclerview.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_food"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>Langkah ke 9:
Buat satu class lagi untuk adapter recyclerview dengan nama FoodAdapter. kemudian tambahkan codingan dibawah ini.
public class FoodAdapter extends RecyclerView.Adapter<FoodAdapter.ViewHolder> {
List<FoodItem> data;
Activity activity;
public FoodAdapter(List<FoodItem> data, Activity activity){
this.data = data;
this.activity = activity;
}
@NonNull
@Override
public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
return new ViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item_food, parent, false));
}
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
holder.bind(data.get(position));
}
@Override
public int getItemCount() {
return data != null ? data.size() : 0;
}
public class ViewHolder extends RecyclerView.ViewHolder {
TextView foodName, description, tv_code, price;
ImageView imageView;
public ViewHolder(@NonNull View itemView) {
super(itemView);
foodName = itemView.findViewById(R.id.foodName);
description = itemView.findViewById(R.id.description);
tv_code = itemView.findViewById(R.id.tv_code);
price = itemView.findViewById(R.id.price);
imageView = itemView.findViewById(R.id.imageView);
}
public void bind(FoodItem foodItem) {
foodName.setText(foodItem.name_food);
description.setText(foodItem.description);
tv_code.setText(foodItem.code);
price.setText(foodItem.price);
Glide.with(activity).load(foodItem.getImage()).into(imageView);
}
}
}setelah dibuat class tersebut maka akan terdapat error pada list_item_food itu dikarenakan kita belum membuat desain untuk recyclerview. buatlah sebuah resouce file dengan cara buka res-> layout kemudian klik kanan pada layout dan tambahkan Layout resource file dan berinama list_item_food.
Setelah itu masukan code berikut.
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="4dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="4dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/foodName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:textColor="@color/black"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/imageView"
app:layout_constraintTop_toTopOf="parent"
tools:text="nasi goreng" />
<TextView
android:id="@+id/price"
android:textColor="@color/green"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/tv_code"
app:layout_constraintTop_toBottomOf="@+id/description"
app:layout_constraintVertical_bias="0.0"
tools:text="15000" />
<TextView
android:id="@+id/tv_code"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/imageView"
app:layout_constraintTop_toBottomOf="@+id/description"
app:layout_constraintVertical_bias="0.0"
tools:text="IDR" />
<TextView
android:id="@+id/description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/imageView"
app:layout_constraintTop_toBottomOf="@+id/foodName"
tools:text="deskripsi makanan" />
<ImageView
android:id="@+id/imageView"
android:scaleType="centerCrop"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>jangan lupa tambahkan color pada res->value->color.xml
<color name="white">#FFFFFFFF</color>
<color name="green">#49B54F</color>Langkah ke 10:
Pastikan sampai langkah ke 9 tidak terjadi error.
setelah dipastikan tidak ada error, selanjutnya kita buka MainActivity.java kemudian tambahkan code berikut.
MyService myService;
FoodAdapter adapter;
RecyclerView rv_food;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
rv_food = findViewById(R.id.rv_food);
myService = new MyService(this); //instance myservice
rv_food.setHasFixedSize(true);
rv_food.setLayoutManager(new LinearLayoutManager(this));
getDataFood();
}setelah memasukan code tersebut pasti akan terjadi error pada getDataFood(); maka dari itu kita buat method untuk getDataFood.
public void getDataFood(){
myService.getInstance().getFood().enqueue(new Callback<FoodResponse<FoodItem>>() {
@Override
public void onResponse(Call<FoodResponse<FoodItem>> call, Response<FoodResponse<FoodItem>> response) {
FoodResponse resp = response.body(); //retrofit response
if (resp.getData() != null && resp.getData().size() > 0){
adapter = new FoodAdapter(resp.getData(),MainActivity.this);
rv_food.setAdapter(adapter);
}
}
@Override
public void onFailure(Call<FoodResponse<FoodItem>> call, Throwable t) {
Toast.makeText(MainActivity.this, t.getMessage(), Toast.LENGTH_SHORT).show();
}
});
}pada retrofit response kita akan mengambil data dari API yang berformat JSON. kemudian data tersebut masuk ke sini
FoodResponse resp = response.body();
kemudian dalam resp itu terdapat data array resp.getData()
data yang berasal dari resp.getData() kita masukan ke dalam recyclerView
adapter = new FoodAdapter(resp.getData(),MainActivity.this);
rv_food.setAdapter(adapter);sehingga code keseluruhan MainActivity.java sebagai berikut:
public class MainActivity extends AppCompatActivity {
MyService myService;
FoodAdapter adapter;
RecyclerView rv_food;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
rv_food = findViewById(R.id.rv_food);
myService = new MyService(this);
rv_food.setHasFixedSize(true);
rv_food.setLayoutManager(new LinearLayoutManager(this));
getDataFood();
}
public void getDataFood(){
myService.getInstance().getFood().enqueue(new Callback<FoodResponse<FoodItem>>() {
@Override
public void onResponse(Call<FoodResponse<FoodItem>> call, Response<FoodResponse<FoodItem>> response) {
FoodResponse resp = response.body();
if (resp.getData() != null && resp.getData().size() > 0){
adapter = new FoodAdapter(resp.getData(),MainActivity.this);
rv_food.setAdapter(adapter);
}
}
@Override
public void onFailure(Call<FoodResponse<FoodItem>> call, Throwable t) {
Toast.makeText(MainActivity.this, t.getMessage(), Toast.LENGTH_SHORT).show();
}
});
}
}Langkah ke 11:
Tambahkan intenet permission pada AndroidManifest. dengan cara double click pada folder Manifests. tabhakan code berikut.
<uses-permission android:name="android.permission.INTERNET"/>jika menggunakan url http bukan https maka perlu menambahkan code berikut.
android:usesCleartextTraffic="true"sehingga code pada AndroidManifest sebagai berikut.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.azhar.foodapp">
<uses-permission android:name="android.permission.INTERNET"/>
<application
android:usesCleartextTraffic="true"
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.FoodApp">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>Kemudian jalankan aplikasinya. hasilnya seperti ini.
Selamat anda sudah bisa mengambil data dari Web API.
Source code lengkapnya bisa dilihat disini.
