Modul Pemrograman Mobile

Android Web API

A. Tujuan
1. Mahasiswa mengetahui apa itu API dan bagaimana cara mengimplementasikannya
ke Pengembangan Android
2. Mahasiswa Mampu memahami tahapan dalam membangun aplikasi Android dengan
menggunakan API.

B. Teori

Web API (Application Programming Interface) adalah suatu layanan yang

mengizinkan dua aplikasi saling terhubung melalui jaringan, sehingga kita dapat
mengambil dan mengirim data ke layanan tersebut dengan mudah. Salah satu dari
standar perancangan dari Web API adalah REST API. REST ini hampir selalu
menggunakan HTTP (Hypertext Transfer Protocol) untuk berkomunikasi data. HTTP
adalah protokol yang memungkinkan Anda saling bertukar data antar server dan client.
Pada protokol ini, terdapat beberapa request method yang biasa digunakan untuk proses
CRUD (Create Read Update Delete), di antaranya adalah:

● POST : Untuk membuat data (Create)

● GET : Untuk membaca data (Read)
● PUT : Untuk mengubah data (Update)
● DELETE : Untuk menghapus data (Delete)

JSON (Javascript Object Notation) merupakan format pertukaran &

penyimpanan data yang ringan dan mudah dibaca (dibanding XML). Format ini dapat
digunakan di hampir semua bahasa pemrograman. Sebagai contoh anda memiliki
database seperti ini :
 Maka Format JSON dari tabel tersebut adalah seperti ini :

Saat kita menarik data akan ada dua response yang diberikan yaitu OnSuccess() dan
OnFailure(). OnSuccess() berlaku ketika kita berhasil mendapatkan data dengan status
code 200, sedangkan OnFailure() akan mengembalikan status code seperti di bawah ini:
C. Praktikum

TUJUAN

Pada praktikum kali ini kita akan mencoba menarik data API dari GitHub User dan
menampilkan dengan ListView.
1. Buat proyek baru di Android Studio dengan kriteria sebagai berikut :

Nama Project GitHub Users

Target & Minimum Target SDK Phone and Tablet, Api Level 21
Tipe Activity Empty Activity
Activity Name MainActivity

2. Kita akan menggunakan Library AsyncHttpClient (LoopJ) untuk menarik API dan
juga Library Glide untuk memuat gambar dari internet, silahkan tambahkan di
build.gradle :
1. implementation 'com.loopj.android:android-async-http:1.4.9'
2. implementation 'com.github.bumptech.glide:glide:4.12.0'

3. Buka activity_main.xml dan tambahkan komponen ListView lalu sesuaikan kodenya

seperti berikut :
1. <androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. xmlns:app="http://schemas.android.com/apk/res-auto"
6. tools:context=".MainActivity">
7.
8. <ListView
9. android:id="@+id/lv_list"
10. android:layout_width="match_parent"
11. android:layout_height="match_parent" />
12.
13. <ProgressBar
14. android:id="@+id/progressBar"
15. style="?android:attr/progressBarStyle"
16. android:layout_width="wrap_content"
17. android:layout_height="wrap_content"
18. app:layout_constraintBottom_toBottomOf="parent"
19. app:layout_constraintEnd_toEndOf="parent"
20. app:layout_constraintStart_toStartOf="parent"
21. app:layout_constraintTop_toTopOf="parent" />
22.
23. </androidx.constraintlayout.widget.ConstraintLayout>

4. Setelah itu buat kelas baru dengan klik kanan pada package utama → New → Java
Class. Beri nama User setter & getter untuk setiap variabelnya. Silakan sesuaikan
kodenya seperti berikut :
1. public class User {
2. private String photo;
3. private String name;
4. private String type;
5.
6. public String getType() {
7. return type;
8. }
9. public String getName() {
10. return name;
11. }
12. public String getPhoto() {
 13. return photo;
14. }
15. public void setPhoto(String photo) {
16. this.photo = photo;
17. }
18. public void setName(String name) {
19. this.name = name;
20. }
21. public void setType(String type) {
22. this.type = type;
23. }
24. }

5. Setelah itu buat berkas item_user.xml untuk tampilan list dengan cara klik kanan pada
direktori layout → new → layout resource file dan kemudian beri
nama item_user.xml. Sesuaikan kodenya seperti berikut :
1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:padding="16dp">
6.
7. <ImageView
8. android:id="@+id/img_photo"
9. android:layout_width="100dp"
10. android:layout_height="100dp"
11. android:scaleType="fitXY" />
12.
13. <TextView
14. android:id="@+id/txt_name"
15. android:layout_width="wrap_content"
16. android:layout_height="wrap_content"
17. android:layout_marginStart="26dp"
18. android:layout_toEndOf="@id/img_photo"
19. android:text="user"
20. android:textSize="18sp"
21. android:textStyle="bold" />
22.
23.
24. <TextView
25. android:id="@+id/txt_type"
26. android:layout_width="wrap_content"
27. android:layout_height="wrap_content"
28. android:layout_below="@id/txt_name"
29. android:layout_marginStart="26dp"
30. android:layout_marginTop="10dp"
31. android:layout_toRightOf="@id/img_photo"
32. android:ellipsize="end"
33. android:maxLines="3"
34. android:text="type" />
35. </RelativeLayout>

6. Selanjutnya kita akan mencoba menggunakan UserAdapter. Silakan buat kelas baru
klik kanan pada package utama → New → Java Class dan kemudian beri nama
UserAdapter. Kemudian buatlah setter & getter serta implement methods. Silakan
sesuaikan kodenya seperti berikut :
1. public class UserAdapter extends BaseAdapter {
2.
 3. private Context context;
4. private ArrayList<User> users;
5.
6. public void setUsers(ArrayList<User> users) {
7. this.users = users;
8. }
9.
10. public UserAdapter(Context context) {
11. this.context = context;
12. users = new ArrayList<>();
13. }
14.
15. @Override
16. public int getCount() {
17. return 0;
18. }
19.
20. @Override
21. public Object getItem(int i) {
22. return null;
23. }
24.
25. @Override
26. public long getItemId(int i) {
27. return 0;
28. }
29.
30. @Override
31. public View getView(int i, View view, ViewGroup
viewGroup) {
32. return null;
33. }
34. }

7. Sekarang lengkapi methode terlebih dahulu. Silakan sesuaikan kodenya seperti

berikut :
1. @Override
2. public int getCount() {
3. return users.size();
4. }
5.
6. @Override
7. public Object getItem(int i) {
8. return users.get(i);
9. }
10.
11. @Override
12. public long getItemId(int i) {
13. return i;
14. }
15.
16. @Override
17. public View getView(int i, View view, ViewGroup viewGroup)
{
18. if (view == null) {
19. view =
LayoutInflater.from(context).inflate(R.layout.item_user,
viewGroup, false);
20. }
21.
 22. ViewHolder viewHolder = new ViewHolder(view);
23. User user = (User) getItem(i);
24. viewHolder.bind(user);
25.
26. return view;
27. }

Kemudian buat kelas ViewHolder di dalam kelas UserAdapter dan tambahkan kode
berikut:

28. private class ViewHolder {

29. private TextView txtName;
30. private TextView txtDescription;
31. private ImageView imgPhoto;
32.
33. ViewHolder(View view) {
34. txtName = view.findViewById(R.id.txt_name);
35. txtDescription = view.findViewById(R.id.txt_type);
36. imgPhoto = view.findViewById(R.id.img_photo);
37. }
38.
39. void bind(User user) {
40. txtName.setText(user.getName());
41. txtDescription.setText(user.getType());
42. Glide.with(context)
43. .load(user.getPhoto())
44. .into(imgPhoto);
45. }
46. }

Sehingga hasil akhir kelas UserAdapter seperti berikut :

47. public class UserAdapter extends BaseAdapter {

48.
49. private Context context;
50. private ArrayList<User> users;
51.
52. public void setUsers(ArrayList<User> users) {
53. this.users = users;
54. }
55.
56. public UserAdapter(Context context) {
57. this.context = context;
58. users = new ArrayList<>();
59. }
60.
61. @Override
62. public int getCount() {
63. return users.size();
64. }
65.
66. @Override
67. public Object getItem(int i) {
68. return users.get(i);
69. }
70.
71. @Override
72. public long getItemId(int i) {
73. return i;
 74. }
75.
76. @Override
77. public View getView(int i, View view, ViewGroup
viewGroup) {
78. if (view == null) {
79. view =
LayoutInflater.from(context).inflate(R.layout.item_user,
viewGroup, false);
80. }
81.
82. ViewHolder viewHolder = new ViewHolder(view);
83. User user = (User) getItem(i);
84. viewHolder.bind(user);
85.
86. return view;
87. }
88.
89. private class ViewHolder {
90. private TextView txtName;
91. private TextView txtDescription;
92. private ImageView imgPhoto;
93.
94. ViewHolder(View view) {
95. txtName = view.findViewById(R.id.txt_name);
96. txtDescription =
view.findViewById(R.id.txt_type);
97. imgPhoto = view.findViewById(R.id.img_photo);
98. }
99.
100. void bind(User user) {
101. txtName.setText(user.getName());
102. txtDescription.setText(user.getType());
103. Glide.with(context)
104. .load(user.getPhoto())
105. .into(imgPhoto);
106. }
107. }
108. }

8. Inisialisasikan beberapa variable dan hubungkan dengan XML yang ada

1. public class MainActivity extends AppCompatActivity {
2.
3. private static final String TAG =
MainActivity.class.getSimpleName();
4.
5. private ListView listUsers;
6. private ProgressBar progressBar;
7. private UserAdapter adapter;
8. private ArrayList<User> user;
9.
10. @Override
11. protected void onCreate(Bundle savedInstanceState) {
12. super.onCreate(savedInstanceState);
13. setContentView(R.layout.activity_main);
14.
15. if (getSupportActionBar() != null) {
 16. getSupportActionBar().setTitle("List of Github
Users");
17. }
18.
19. progressBar = findViewById(R.id.progressBar);
20. listUsers = findViewById(R.id.lv_list);
21.
22. adapter = new UserAdapter(this);
23.
24. }
25.
26. }

9. Buatlah sebuah function getListUsers() untuk mengambil data dari API, kemudian
tambahkan header untuk token dan request pada method AsyncHttpClient().
1. private void getListUsers() {
2. progressBar.setVisibility(View.VISIBLE);
3. AsyncHttpClient client = new AsyncHttpClient();
4. String url = "https://api.github.com/users";
5. client.addHeader("Authorization", "token
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");
6. client.addHeader("User-Agent", "request");
7.
8. client.get(url, new AsyncHttpResponseHandler() {
9.
10. });
11. }

10. Akan terdapat error pada AsyncHttpResponseHandler() silahkan di klik dan tekan
alt + enter lalu Implement Methods. Hasilnya akan seperti ini
1. client.get(url, new AsyncHttpResponseHandler() {
2.
3. @Override
4. public void onSuccess(int statusCode, Header[] headers,
byte[] responseBody) {
5.
6. }
7.
8. @Override
9. public void onFailure(int statusCode, Header[] headers,
byte[] responseBody, Throwable error) {
10.
11. }
12. });
13.

11. Lengkapi method onSuccess() dengan kode berikut

1. @Override
2. public void onSuccess(int statusCode, Header[] headers, byte[]
responseBody) {
 3. // Jika koneksi berhasil
4. progressBar.setVisibility(View.INVISIBLE);
5.
6. ArrayList<User> listUser = new ArrayList<>();
7.
8. String result = new String(responseBody);
9. Log.d(TAG, result);
10. try {
11.
12. JSONArray dataArray = new JSONArray(result);
13. for (int i = 0; i < dataArray.length(); i++) {
14. JSONObject dataJson = dataArray.getJSONObject(i);
15. String name = dataJson.getString("login");
16. String type = dataJson.getString("type");
17. String photo = dataJson.getString("avatar_url");
18.
19. User user = new User();
20. user.setPhoto(photo);
21. user.setName(name);
22. user.setType(type);
23.
24. listUser.add(user);
25. }
26.
27. user = listUser;
28.
29. adapter = new UserAdapter(MainActivity.this);
30. adapter.setUsers(listUser);
31.
32. listUsers.setAdapter(adapter);
33. } catch (Exception e) {
34. Toast.makeText(MainActivity.this, e.getMessage(),
Toast.LENGTH_SHORT).show();
35. e.printStackTrace();
36. }
37. }

12. Lalu lengkapi metode onFailure() dengan kode berikut

1. @Override
2. public void onFailure(int statusCode, Header[] headers, byte[]
responseBody, Throwable error) {
3. // Jika koneksi gagal
4. progressBar.setVisibility(View.INVISIBLE);
5. String errorMessage;
6. switch (statusCode) {
7. case 401:
8. errorMessage = statusCode + " : Bad Request";
9. break;
10. case 403:
 11. errorMessage = statusCode + " : Forbidden";
12. break;
13. case 404:
14. errorMessage = statusCode + " : Not Found";
15. break;
16. default:
17. errorMessage = statusCode + " : " +
error.getMessage();
18. break;
19. }
20. Toast.makeText(MainActivity.this, errorMessage,
Toast.LENGTH_SHORT).show();
21. }

13. Panggil function getListUsers() dan buat listView.setOnItemClickListener()

1. getListUsers();
2.
3. listUsers.setOnItemClickListener(new
AdapterView.OnItemClickListener() {
4. @Override
5. public void onItemClick(AdapterView<?> adapterView, View
view, int i, long l) {
6. Toast.makeText(MainActivity.this, user.get(i).getName(),
Toast.LENGTH_SHORT).show();
7. Log.d("Lihat", user.get(i).getName());
8. }
9. });

14. Sehingga MainActivity.java akan seperti ini

1. public class MainActivity extends AppCompatActivity {
2.
3. private static final String TAG =
MainActivity.class.getSimpleName();
4.
5. private ListView listUsers;
6. private ProgressBar progressBar;
7. private UserAdapter adapter;
8. private ArrayList<User> user;
9.
10. @Override
11. protected void onCreate(Bundle savedInstanceState) {
12. super.onCreate(savedInstanceState);
13. setContentView(R.layout.activity_main);
14.
15. if (getSupportActionBar() != null) {
16. getSupportActionBar().setTitle("List of Users");
17. }
18.
19. progressBar = findViewById(R.id.progressBar);
20. listUsers = findViewById(R.id.lv_list);
21.
22. adapter = new UserAdapter(this);
23.
24. getListUsers();
25.
26. listUsers.setOnItemClickListener(new
AdapterView.OnItemClickListener() {
27. @Override
28. public void onItemClick(AdapterView<?> adapterView,
View view, int i, long l) {
29. Toast.makeText(MainActivity.this,
user.get(i).getName(), Toast.LENGTH_SHORT).show();
30. Log.d("Lihat", user.get(i).getName());
31. }
32. });
33. }
34.
35. private void getListUsers() {
36. progressBar.setVisibility(View.VISIBLE);
37. AsyncHttpClient client = new AsyncHttpClient();
38. String url = "https://api.github.com/users";
39. client.addHeader("Authorization", "token
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");
40. client.addHeader("User-Agent", "request");
41.
42. client.get(url, new AsyncHttpResponseHandler() {
43. @Override
44. public void onSuccess(int statusCode, Header[]
headers, byte[] responseBody) {
45. // Jika koneksi berhasil
46. progressBar.setVisibility(View.INVISIBLE);
47.
48. ArrayList<User> listUser = new ArrayList<>();
49.
50. String result = new String(responseBody);
51. Log.d(TAG, result);
52. try {
53.
54. JSONArray dataArray = new JSONArray(result);
55. for (int i = 0; i < dataArray.length(); i++)
{
56. JSONObject dataJson =
dataArray.getJSONObject(i);
57. String name =
dataJson.getString("login");
58. String type =
dataJson.getString("type");
59. String photo =
dataJson.getString("avatar_url");
60.
61. User user = new User();
62. user.setPhoto(photo);
63. user.setName(name);
64. user.setType(type);
65.
66. listUser.add(user);
67. }
68.
69. user = listUser;
70.
71. adapter = new
UserAdapter(MainActivity.this);
72. adapter.setUsers(listUser);
73.
74. listUsers.setAdapter(adapter);
75. } catch (Exception e) {
76. Toast.makeText(MainActivity.this,
e.getMessage(), Toast.LENGTH_SHORT).show();
77. e.printStackTrace();
78. }
79. }
80.
81. @Override
82. public void onFailure(int statusCode, Header[]
headers, byte[] responseBody, Throwable error) {
83. // Jika koneksi gagal
84. progressBar.setVisibility(View.INVISIBLE);
85. String errorMessage;
86. switch (statusCode) {
87. case 401:
88. errorMessage = statusCode + " : Bad
Request";
89. break;
90. case 403:
91. errorMessage = statusCode + " :
Forbidden";
92. break;
93. case 404:
94. errorMessage = statusCode + " : Not
Found";
95. break;
96. default:
97. errorMessage = statusCode + " : " +
error.getMessage();
98. break;
99. }
100. Toast.makeText(MainActivity.this,
errorMessage, Toast.LENGTH_SHORT).show();
101. }
102. });
103. }
 104. }

15. Selesai, Jalankan aplikasi Github Users. Hasilnya akan seperti ini