Apa Itu Collections di Kotlin?

Setelah berkenalan dan mempelajari data class, selanjutnya kita akan mencoba untuk mempelajari collection. Bayangkan ketika kita ingin menyimpan dan memanipulasi sebuah objek. 

Kita perlu sebuah komponen yang mampu menambahkan, menghapus, mencari, bahkan mengurutkan sebuah data. Semua tugas itu bisa kita lakukan dengan bantuan collection.

 Collections sendiri merupakan sebuah objek yang bisa menyimpan kumpulan objek lain termasuk data class. 

Dengan collection kita bisa menyimpan banyak data sekaligus. Di dalam collections terdapat beberapa objek turunan, di antaranya adalah List, Set, dan Map. Mari kita pelajari satu per satu objek turunan tersebut.

List

Yang pertama adalah List. Dengan List kita dapat menyimpan banyak data menjadi satu objek. 

Sebagai contoh, kita bisa membuat sebuah List yang berisi sekumpulan data angka, karakter atau yang lainnya. Yang menarik, sebuah List tidak hanya bisa menyimpan data dengan tipe yang sama. 

Namun juga bisa berisi bermacam - macam tipe data seperti Int, String, Boolean atau yang lainnya. Cara penulisannya pun sangat mudah. Perhatikan saja beberapa contoh kode berikut.

val numberList : List<Int> = listOf(1, 2, 3, 4, 5)

Kode di atas adalah contoh dari satu objek List yang berisi kumpulan data dengan tipe Integer. Karena kompiler bisa mengetahui tipe data yang ada dalam sebuah objek List, maka tak perlu kita menuliskannya secara eksplisit. Ini tentunya akan menghemat kode yang kita ketikkan:

val numberList = listOf(1, 2, 3, 4, 5)
val charList = listOf('a', 'b', 'c')

Sedangkan untuk membuat List dengan tipe data yang berbeda, cukup masukkan saja data tersebut seperti kode berikut:

val anyList = listOf('a', "Kotlin", 3, true)

Karena setiap objek pada Kotlin merupakan turunan dari kelas Any, maka variabel anyList tersebut akan memiliki tipe data List<Any>. Jika kita tampilkan list di atas maka konsol akan menampilkan:
[a, Kotlin, 3, true]

Bahkan kita pun bisa memasukkan sebuah data class ke dalam List tersebut:

val anyList = listOf('a', "Kotlin", 3, true, User())

Ketika bermain dengan sebuah List, tentunya ada saat di mana kita ingin mengakses posisi tertentu dari List tersebut. Untuk melakukannya, kita bisa menggunakan fungsi indexing seperti berikut:

println(anyList[3])

Perhatikan kode di atas. Fungsi indexing ditandai dengan tanda [ ]. Jika Anda mengira bahwa konsol akan menampilkan angka 3, maka tebakan Anda kurang tepat. Karena dalam sebuah List, indeks dimulai dari 0. Maka ketika kita akan mengakses data pada anyList yang berada pada indeks ke-3, artinya data tersebut merupakan data pada posisi ke-4. Jadi data yang akan ditampilkan pada konsol adalah true.

Lalu apa yang akan terjadi jika kita berusaha menampilkan item dari List yang berada di luar dari ukuran List tersebut? Sebagai contoh, Anda ingin mengakses indeks ke-5 dari anyList:

println(anyList[5])

Hasilnya adalah eror! Kompiler akan memberitahukan bahwa perintah itu tidak bisa dijalankan. Berikut pesan eror yang akan muncul:

Exception in thread "main" java.lang.ArrayIndexOutOfBoundsException: 5

Pesan di atas memberitahu kita bahwa List telah diakses dengan indeks ilegal. Ini akan terjadi jika indeks yang kita inginkan negatif atau lebih besar dari atau sama dengan ukuran List tersebut.

Informasi Tambahan: Sejauh ini kita baru belajar menginisialisasikan atau mengakses data dari sebuah List. Pastinya Anda bertanya, apakah bisa kita memanipulasi data pada List tersebut? Jawabannya tidak. Apa pasal? List tersebut bersifat immutable alias tidak bisa diubah. Namun jangan khawatir. Kotlin standard library juga menyediakan collection dengan tipe mutable. Artinya kita melakukan perubahan pada nilainya dengan cara seperti menambah, menghapus, atau mengganti nilai yang sudah ada. Caranya pun cukup mudah. Anda hanya perlu menggunakan fungsi mutableListOf seperti berikut: val anyList = mutableListOf('a', "Kotlin", 3, true, User()) Dengan begitu, anyList sekarang merupakan sebuah List yang bersifat mutable dan kita bisa memanipulasi data di dalamnya. anyList.add('d') // menambah item di akhir list anyList.add(1, "love") // menambah item pada indeks ke-1 anyList[3] = false // mengubah nilai item pada indeks ke-3 anyList.removeAt(1) // menghapus item User() berdasarkan index atau posisi nilai di dalam Array

z

Belajar Menggunakan Fetch di Javascript

Solution: Menerapkan Fetch pada Proyek Club Finder

Apakah Anda sudah berhasil menerapkan Fetch dalam menampilkan data dari API TheSportDB? Jika belum, yuk kita lakukan bersama-sama!

Pada dokumentasi API menyebutkan bahwa, untuk mendapatkan daftar klub olahraga kita dapat menggunakan target url: https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=Arsenal

Sebelum menuliskan langsung pada proyek dengan fetch, biasakan ketika hendak mengkonsumsi API biasakan untuk mencobanya menggunakan aplikasi Postman terlebih dahulu. 

Jika target url tersebut diakses melalui Postman dengan GET Request, maka akan menghasilkan response dengan struktur JSON yang tampak pada tab Body.

Pada response JSON yang dihasilkan menampung satu key dengan nama teams yang memiliki value berupa sebuah array. 

Di dalam array tersebut menampilkan banyak data terkait klub olahraga yang memiliki nama Arsenal. 

Kita dapat memanfaatkan key strTeam untuk mendapatkan nama klub, strTeamBadge untuk mendapatkan logo klub, dan strDescriptionEN untuk mendapatkan deskripsi singkat dalam bahasa inggris.

Lantas untuk mencari data team berdasarkan kata kunci lain kita dapat mengubah kata “Arsenal” menggunakan kata kunci yang kita inginkan, misalnya “Barcelona”. 

Sehingga melakukan request terhadap url: https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=Barcelona akan menghasilkan response JSON dengan informasi klub olahraga terkait “Barcelona”.

Cukup mudah bukan untuk menggunakan API tersebut?

Nah, Setelah memahami cara penggunaan API-nya, sekarang mari kita mulai tuliskan fungsi fetch pada proyek Club Finder. Langkah awal buka kembali proyek Club Finder pada text editor yang Anda gunakan.

Kemudian buka berkas data-source.js pada src -> script -> data -> data-source.js. Kita refactor fungsi searchClub dengan menghapus seluruh logika yang ada di dalamnya, kemudian tuliskan fungsi fetch seperti ini:

1. class DataSource {
2.    static searchClub(keyword) {
3.        return fetch(`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`)
4.    }
5. }
6.  
7. export default DataSource;

Seperti yang sudah kita ketahui, fungsi fetch() akan mengembalikan promise resolve jika request berhasil dilakukan. Maka untuk menangani respon dari request yang dibuat, kita gunakan .then() yang di dalamnya berisi variabel response sebagai response object yang didapat.

1. class DataSource {
2.    static searchClub(keyword) {
3.        return fetch(`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`)
4.        .then(response => {
5.           
6.        })
7.    }
8. }
9.  
10. export default DataSource;

Kemudian di dalam blok then tersebut, kita ubah nilai response menjadi JSON dengan memanggil method response.json().

1. class DataSource {
2.    static searchClub(keyword) {
3.        return fetch(`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`)
4.        .then(response => {
5.            return response.json();
6.        })
7.    }
8. }
9.  
10. export default DataSource;

Karena method response.json() juga mengembalikan nilai promise, maka untuk mendapatkan nilai yang dibawa oleh resolve kita perlu menambahkan .then lainnya (chaining promise). 

Di dalam .then yang kedua ini, berikan parameter dengan nama responseJson (penamaan variabel tidaklah baku, namun gunakan penamaan yang menunjukkan arti dari nilai variabelnya).

1. class DataSource {
2.    static searchClub(keyword) {
3.        return fetch(`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`)
4.        .then(response => {
5.            return response.json();
6.        })
7.        .then(responseJson => {
8.           
9.        })
10.    }
11. }
12.  
13. export default DataSource;

responseJson merupakan nilai JSON yang dihasilkan dari perubahan object response dalam bentuk JSON melalui method .json() tadi.

Di dalam block .then yang kedua, kita kembalikan (return) dengan nilai promise resolve dengan membawa nilai jsonResponse.teams jika nilai array tidak null. 

Namun jika teams bernilai null, maka kembalikan dengan nilai promise reject dengan membawa nilai “${keyword} is not found”.

1. class DataSource {
2.    static searchClub(keyword) {
3.        return fetch(`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`)
4.        .then(response => {
5.            return response.json();
6.        })
7.        .then(responseJson => {
8.            if(responseJson.teams) {
9.                return Promise.resolve(responseJson.teams);
10.            } else {
11.                return Promise.reject(`${keyword} is not found`);
12.            }
13.        })
14.    }
15. }
16.  
17. export default DataSource;

Simpan perubahan tersebut dan jalankan aplikasi dalam mode development menggunakan perintah:

npm run start-dev

Setelah proyek terbuka, lakukan pencarian dengan keyword apapun yang Anda mau, di sini kita contohkan dengan “Barcelona”.

Yah, data yang ditampilkan undefined. Mengapa bisa demikian? Ini disebabkan karena kita belum menyesuaikan key berdasarkan response yang didapat dari public API. Kita harus menggunakan key strTeam untuk mendapatkan nama klub, strTeamBadge untuk mendapatkan logo klub, dan strDescriptionEN untuk mendapatkan deskripsi singkat dalam bahasa inggris.

Ketiga key tersebut kita tetapkan pada berkas src -> script -> component -> club-item.js. Lebih tepatnya pada fungsi render.

1. render() {
2.        this.shadowDOM.innerHTML = `
3.            <style>
4.                 ……..
5.            </style>
6.            <img class="fan-art-club" src="${this._club.fanArt}" alt="Fan Art">
7.            <div class="club-info">
8.                <h2>${this._club.name}</h2>
9.                <p>${this._club.description}</p>
10.            </div>`;
11.    }

Kita ubah properti this._club.fanArt menjadi this._club.strTeamBadge, this._club.name menjadi this._club.strTeam, dan this._club.description menjadi this._club.strDescriptionEN.

Sehingga fungsi render akan menjadi seperti ini:

1. render() {
2.        this.shadowDOM.innerHTML = `
3.            <style>
4.                * {
5.                    margin: 0;
6.                    padding: 0;
7.                    box-sizing: border-box;
8.                }
9.                :host {
10.                    display: block;
11.                    margin-bottom: 18px;
12.                    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
13.                    border-radius: 10px;
14.                    overflow: hidden;
15.                }
16.               
17.                .fan-art-club {
18.                    width: 100%;
19.                    max-height: 300px;
20.                    object-fit: cover;
21.                    object-position: center;
22.                }
23.               
24.                .club-info {
25.                    padding: 24px;
26.                }
27.               
28.                .club-info > h2 {
29.                    font-weight: lighter;
30.                }
31.               
32.                .club-info > p {
33.                    margin-top: 10px;
34.                    overflow: hidden;
35.                    text-overflow: ellipsis;
36.                    display: -webkit-box;
37.                    -webkit-box-orient: vertical;
38.                    -webkit-line-clamp: 10; /* number of lines to show */
39.                }
40.            </style>
41.            <img class="fan-art-club" src="${this._club.strTeamBadge}" alt="Fan Art">
42.            <div class="club-info">
43.                <h2>${this._club.strTeam}</h2>
44.                <p>${this._club.strDescriptionEN}</p>
45.            </div>`;
46. }

Simpan kembali perubahan kode yang dituliskan kemudian lakukan pencarian kembali pada aplikasi Club Finder. Seharusnya sekarang aplikasi sudah bisa menampilkan data dengan baik.

Voila! Anda sudah berhasil menerapkan Fetch pada proyek Club Finder.

Langkah dari solution ini bisa Anda temukan juga pada repository berikut: https://github.com/dicodingacademy/a163-bfwd-labs/tree/112-club-finder-fetch-solution