Menggunakan API Dan Fetch di dalam Web Sederhana

Hello Teman teman, selamat datang di Hg Games Studio. kali ini saya akan membagikan materi tentang bagaimana cara menerapkan Fetch dalam menampilkan data dari API TheSportDB.

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

Sumber : Tangkapan Layar Hg Games Studio  

 Sebelum menuliskannya langsung pada proyek dengan fetch, 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.

    Sumber : Tangkapan Layar Hg Games Studio

    Pada response JSON yang dihasilkan ternyata menampung satu key dengan nama teams yang memiliki value berupa sebuah array. Di dalam array tersebut menampilkan banyak data terkait klub olahraga (data) 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.

        Sedangkan 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”.

Sejauh ini apakah teman teman masih kesulitan  dalam menggunakan API tersebut ? 

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

Sumber : Tangkapan Layar Hg Games Studio

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:

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

Fungsi  fetch() akan mengembalikan promise resolve jika request berhasil dilakukan. Sedangkan untuk menangani respon dari request yang dibuat, kita gunakan .then() yang isinya variabel response sebagai response object yang didapat.

class DataSource {
   static searchClub(keyword) {
       return fetch(`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`)
       .then(response => {
          
       })
   }
}
 
export default DataSource;

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

class DataSource {
   static searchClub(keyword) {
       return fetch(`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`)
       .then(response => {
           return response.json();
       })
   }
}
 
export default DataSource;

Perlu teman teman tahu kalau 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 (Catatan : penamaan variabel tidaklah baku, namun gunakan penamaan yang menunjukkan arti dari nilai variabelnya).

class DataSource {
   static searchClub(keyword) {
       return fetch(`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`)
       .then(response => {
           return response.json();
       })
       .then(responseJson => {
          
       })
   }
}
 
export default DataSource;

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

Di dalam block tersebut .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”.

class DataSource {
   static searchClub(keyword) {
       return fetch(`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`)
       .then(response => {
           return response.json();
       })
       .then(responseJson => {
           if(responseJson.teams) {
               return Promise.resolve(responseJson.teams);
           } else {
               return Promise.reject(`${keyword} is not found`);
           }
       })
   }
}
 
export default DataSource;

Simpan perubahan yag sudah kita lakukan kemudian jalankan aplikasi dalam mode development menggunakan perintah:

npm run start-dev

Setelah proyek terbuka, coba 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.

render() {
       this.shadowDOM.innerHTML = `
           <style>
                ……..
           </style>
           <img class="fan-art-club" src="${this._club.fanArt}" alt="Fan Art">
           <div class="club-info">
               <h2>${this._club.name}</h2>
               <p>${this._club.description}</p>
           </div>`;
   }

Kita rubah juga 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:

render() {
       this.shadowDOM.innerHTML = `
           <style>
               * {
                   margin: 0;
                   padding: 0;
                   box-sizing: border-box;
               }
               :host {
                   display: block;
                   margin-bottom: 18px;
                   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
                   border-radius: 10px;
                   overflow: hidden;
               }
              
               .fan-art-club {
                   width: 100%;
                   max-height: 300px;
                   object-fit: cover;
                   object-position: center;
               }
              
               .club-info {
                   padding: 24px;
               }
              
               .club-info > h2 {
                   font-weight: lighter;
               }
              
               .club-info > p {
                   margin-top: 10px;
                   overflow: hidden;
                   text-overflow: ellipsis;
                   display: -webkit-box;
                   -webkit-box-orient: vertical;
                   -webkit-line-clamp: 10; /* number of lines to show */
               }
           </style>
           <img class="fan-art-club" src="${this._club.strTeamBadge}" alt="Fan Art">
           <div class="club-info">
               <h2>${this._club.strTeam}</h2>
               <p>${this._club.strDescriptionEN}</p>
           </div>`;
   }

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

Sumber : Tangkapan layar Hg Games Studio

ok guys! Kita sudah berhasil menerapkan Fetch pada proyek Club Finder.

Contoh Hasil Akhirnya bisa di klik disini

Share this post