React Developer - REA4

PROA

Professional Academy

React - List & Axios

Agenda

Apa saja yang akan dibahas?

  • Theming
  • List
  • API
  • Axios
  • QnA

Theming

  • Dari kemarin kita membuat background colornya, seluruhnya sendiri kan?
  • Tapi, pada akhirnya kita akan buatnya satu satu, atau bahkan akan membuat Component sendiri lagi untuk mengatur backgroundnya / padding / marginnya.
  • Tapi bagaimana bila ada cara untuk membuat temanya supaya bisa lebih seragam?
  • Nah, karena kita menggunakan Material UI, maka kita bisa menggunakan theme
  • Bisa dilihat di sini yah!

Theming (ii)

Wah kelihatannya cukup ribet yah !

Ada juga tools yang bisa membantu kita dalam menemukan color pallete / warna / cara penulisan tema yang ada

Hati hati ! untuk tools MUI Theme Creator, penulisan codenya dalam typescript, sehingga ada sedikit modifikasi kode yang harus dilakukan yah !

Yuk bikin Theme

Mari kita coba untuk membuat kode theme kita sendiri yah !

  • Buat sebuah project baru react
  • Install MUI, Gunakan Font Roboto, Gunakan Font Icon, set App.css untuk fontnya ke Roboto
  • Buat custom theme yang kita inginkan
  • Kode akhirnya bisa dilihat di sini yah

List

Yuk sekarang kita coba untuk membuat Listing Movie yang cuakep

  • Untuk awalnya sekarang ini kita akan menggunakan data dari file JSON terlebih dahulu yah
  • Data JSON dapat diambil di sini yah

List - Demo

Langkah pembuatan list dalam demo ini adalah:

  1. Buat file src/data/movies.json
  2. Copy paste isi dari JSON yang diberikan di atas pada file movies.json
  3. Buat Card yang akan menampilkan gambar poster, judul film, rating, dan overview
  4. Buka dokumentasi yang ada pada MUI tentang card di sini
  5. Buat file src/containers/ListMovies.css, file ini akan berisi file CSS yang kita inginkan untuk membuat Listing dari Film yang ingin kita buat
  6. Buat file src/containers/ListMovies.jsx, file ini akan berisi Component ListMovies yang digunakan untuk menampilkan keseluruhan data yang kita inginkan
  7. Modifikasi file App.js untuk menampilkan Component ListMovies yang kita buat sebelumnya
  8. Buat file src/components/CardMovie.jsx, file ini akan berisi Component "satuan" untuk setiap Movie yang akan dibaca dari ListMovies (Poster, Judul Film, dst ditampilkan di sini)

List - Demo (ii)

  1. Modifikasi file src/containers/ListMovies.jsx untuk menampilkan Component `CardMovie` yang kita buat sebelumnya
  2. Sampai pada titik ini kita sudah berhasil menampilkan data JSON, tapi hanya satu saja... dan ada satu masalah lagi, yaitu gambarnya belum nampak loh ! Ya, ini karena data image tersebut kita ambil dari posisi yang salah. Untuk gambar sebenarnya ini diambil dari TMDB (yang akan dibahas nanti) yang semua imagenya harus ada prefix (awalan), yaitu https://image.tmdb.org/t/p/w200. Nah sekarang kita akan memodifikasi hal tersebut pada file CardMovie.jsx yah
  3. Yak sampai di titik ini, seharusnya gambar sudah muncul, tapi hanya satu saja yang muncul. Bagaimana bila kita ingin menampilkan CardMovie yang berisi 3 data terakhir dari JSON yang kita miliki sekarang ini? Mari kita modifikasi file ListMovies.jsx.
  4. Voila ! Sampai di titik ini kita sudah berhasil melakukan pemetaan yang dinamis yah terhadap data yang kita miliki.
  5. Kode akhir dapat dilihat di sini

List - Demo (iii)

Secara singkatnya langkah yang dilakukan tadi adalah:

  • Ambil data JSON dengan cara
    • import data from "/path/to/data.json"
    • (Ingat, pada React, kita tidak perlu menggunakan fs !
  • Buat Component CardMovie yang akan menampung satuan data Movie
  • Map data JSON yang kita miliki ke dalam Component CardMovie
  • Passing data dari map tersebut ke dalam Component CardMovie via Props

List - Conclusion

Nah sampai di sini kita sudah berhasil membuat Listing Movie berdasarkan data internal JSON yang dimiliki oleh aplikasi

Sekarang, bagaimanakah bila kita ingin mengkonsumsi data yang disediakan oleh penyedia data yang ada di internet?

Ingat yah, kata kuncinya adalah PENYEDIA, artinya harus ada yang menyediakan data tersebut. (Bukan sembarang ambil / men"curi" data, itu tekniknya berbeda lagi)

Untuk itu, mari kita coba belajar tentang API terlebih dahulu yah

API

Apa itu API?

  • API, kependekan dari Application Programming Interface, adalah suatu "penengah" dari perangkat lunak software intermediary yang memperbolehkan beberapa aplikasi untuk "berinteraksi" satu sama lain.
  • API itu ada banyak sekali bentuk (dan protokol) yang digunakan. Namun yang akan kita fokuskan di sini adalah REST API

REST API - Apa Itu ?

  • REST API adalah suatu tipe API yang berkomunikasi via HTTP request untuk melakukan suatu fungsi dasar basis data / database seperti CREATE, READ, UPDATE, DELETE data (sering disebut juga sebagai CRUD)
  • HTTP Method yang digunakan untuk request adalah umumnya sebagai berikut:
    • GET, ekuivalen dengan READ
    • POST, ekuivalen dengan CREATE
    • PUT, ekuivalen dengan UPDATE
    • DELETE, ekuivalen dengan DELETE
    • dll ...

REST API - Apa Itu ? (ii)

Mari kita coba lihat gambar berikut yang menyatakan REST API

Pada pembelajaran ini kita TIDAK membuat REST API yah, melainkan kita akan belajar untuk mengkonsumsi data yang disediakan oleh REST API

Mari sekarang kita belajar suatu tools yang memudahkan kita untuk belajar konsumsi data dari REST API yang bernama Postman

Postman

Dikutik dari web Postman, ini adalah sebuah Platform API untuk membangun dan menggunakan API.

Dengan menggunakan Postman ini, kita bisa me-"nembak" API yang ingin kita coba gunakan dengan HTTP Method tertentu dan dengan data (request) tertentu, untuk mendapatkan data kembalian (response) sesuai dengan ketentuan output dari API penyedia data.

Postman ini dapat digunakan dengan cara install (berupa program) ataupun dengan menggunakan web Postman langsung (dengan limitasi).

Namun untuk menggunakannya caranya sama: HARUS memiliki akun Postman.

Nah setelah membuat akun, mari kita coba untuk mengkonsumsi API pertama kita yah !

Konsumsi API dengan Postman

  • API itu bentuknya umumnya ada 3:
    • Bebas (Public) terbuka (bisa langsung digunakan tanpa perlu embel embel apapun)
    • Bebas (Public) terproteksi (harus menggunakan "tanda pengenal" berupa kunci / token)
    • Internal (Private), hanya untuk konsumsi internal suatu perusahaan saja
  • Pada pembelajaran ini kita akan menggunakan API yang Bebas Terproteksi untuk mengambil data film, yaitu dari TheMovieDataBase (TMDB)
    • Bikin akun baru pada TMDB
    • Buka pada bagian Settings, lalu API, untuk mendapatkan API Key (v3 Auth). Anggap ini sebagai password untuk bisa mengakses API
    • Kemudian mari buka dokumentasi dari API TMDB pada Tautan ini

Konsumsi API dengan Postman (ii)

Setelah kita mendapatkan key, maka kita bisa mencoba untuk me-"nembak" API TMDB yang kira kira bentuknya seperti ini (Ganti <<api_key>> dengan key yang kita dapatkan):) 

https://api.themoviedb.org/3/movie/76341?api_key=<<api_key>>

Untuk me-"nembak" Endpoint API TMDB ini kita akan menggunakan Postman (sesuai gambar di bawah), dan tekan tombol Send untuk melihat hasil kembalian dari API TMDB

Konsumsi API dengan Postman (iii)

Untuk Endpoint yang akan digunakan untuk pembelajaran ini adalah GET /movie/popular

Mari kita coba untuk mengkonsumsi Endpoint API TMDB ini dengan menggunakan Postman

Nah setelah berhasil kita coba untuk mengambil data ini, tentunya sekarang kita akan memiliki pertanyaan donk:

Bagaimanakah cara kita menggunakan data ini ke dalam aplikasi React yang kita buat?

Untuk menjawab itu, mari kita belajar tentang axios terlebih dahulu yah !

Axios

Nah dari tadi kita mencoba untuk melakukan Komunikasi dengan server penyedia API via HTTP Protocol bukan?

Axios adalah Library Javascript yang bisa kita gunakan untuk melakukan komunikasi dengan server penyedia API. (HTTP Request) dan sudah berbasis Promise

Axios - How To?

Cara menggunakan axios

// POST Request
import axios from 'axios';

// Cara 1: Gunakan axios langsung
axios({
  method: 'POST',
  url: 'https://example.com/path/to/endpoint',
  data: { firstData: "value1", secondData: "value2" }
})
  // ingat ini promise based yah axiosnya !
  .then(response => {
    // handle success
  })

// Cara 2: Gunakan axios method aliases (post)
axios.post(
  'https://example.com/path/to/endpoint', // url
  { firstData: "value1", secondData: "value2" }, // data
  {
    // options lainnya (OPTIONAL, bila dibutuhkan)
  }
)
  .then(response => {
    // handle success
  });

Axios - How To? (ii)

Axios Method Aliases

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

/*
Notes:
  Ketika menggunakan cara alias, property url, method, dan data tidak perlu 
  didefinisikan di dalam config lagi
*/

Axios - How To? (iii)

Axios Response Schema (Hasil kembalian / response yang dibuat oleh axios) 

{
  // `data` adalah response kembalian yang diberikan oleh server / API
  data: {},

  // `status` adalah HTTP Status Code yang diberikan oleh server / API
  status: 200,

  // `statusText` adalah HTTP Status Text yang diberikan oleh server / API
  statusText: 'OK',

  // `headers` adalah HTTP headers yang diberikan oleh server / API
  // seluruh nama header adalah dalam bentuk lower case dan bisa diakses dengan
  // notasi bracket `[]`
  // contoh: `response.headers['content-type']`
  headers: {},

  // `config` adalah config yang diberikan oleh kembalian response ini
  config: {},

  // `request` adalah request yang diberikan oleh kembalian response ini
  request: {}
}

Axios - Demo

Mari kita coba untuk mengubah kode sebelumnya menjadi data asli dari TMDB dengan menggunakan Axios

Adapun langkah pengerjaannya adalah sebagai berikut:

  1. Install axios dengan npm install axios
  2. Buat container baru dengan nama ListMoviesReal.jsx
  3. Masukkan Kode untuk membuat ListMoviesReal.jsx dengan axios dan useEffect
  4. Modifikasi App.js untuk menerima Container ListMoviesReal.jsx
  5. PS: Kita tidak perlu memodifikasi CardMovie lagi walaupun kita pakai di 2 tempat yang berbeda !
  6. PS2: Terima kasih sistem Component !

Contoh kode lengkap bisa dilihat di sini

Axios - Demo (ii)

Sampai di sini kita sudah berhasil menarik data dari API TMDB

Tapi... di sini kita berasa ada yang janggal bukan?

Apa yang terjadi, seandainya kita punya banyak tarikan data dari TMDB?

Pastinya akan ada banyak sekali perulangan terhadap string URL yang dibuat bukan?

Bagaimana cara kita mengakalinya?

Salah satunya adalah dengan menggunkana axios Instance

Axios - Instance

Cara untuk membuat suatu instance axios dengan konfigurasi tertentu agar kode tidak berulang

Contoh penulisan kode dengan axios instance:

import axios from 'axios';

// Kita akan membuat instance axios di tempat lain
const instance = axios.create({
  // Perhatikan baseURL ini adalah url dasar untuk setiap API
  // yang ingin ditembak dengan axios
  baseURL: 'https://api.example.com',
  // Header yang ingin diberikan pada tiap request
  headers: { ... },
  // Params yang ingin diberikan pada tiap request
  params: { ... },
  // Timout (waktu yang diperbolehkan untuk request ini berjalan)
  // Lebih dari waktu = timeout (response ditolak) dalam milisecond
  timeout: 1000,
});

export default instance;

Axios - Instance (Demo)

Mari kita coba untuk mengubah kode kita dengan menggunakan axios instance:

  1. Buat sebuah file /src/apis/tmdb.js
  2. Masukkan kode axios instance pada tmdb.js
  3. Ubah file /src/containers/ListMovieReal.jsx untuk melakukan import dari /src/apis/tmdb.js, bukan dari axios langsung lagi

Contoh kode lengkap bisa dilihat di sini

Conclusion

Nah sampai di titik ini artinya kita sudah berhasil menggunakan Axios untuk bisa me-"nembak" data dari REST API pihak ketiga bernama TMDB.

Selamat belajar !

QnA

Referensi

  • https://mui.com/material-ui/customization/theming/
  • https://bareynol.github.io/mui-theme-creator/
  • https://material.io/inline-tools/color/
  • https://mui.com/material-ui/react-card/#main-content
withered-flowers (2022)