FluentStack

REST API Basics

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 18: Backend Basics for Frontend EngineersAdvanced60 menitBahasa Indonesia

REST API Basics

Membaca resource, endpoint, method, query parameter, serta request/response dasar sebelum menghubungkan UI ke data server.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Menjelaskan API sebagai contract antara frontend dan server
  • Membaca resource, endpoint, method, query parameter, dan response body pada REST API sederhana
  • Membedakan GET untuk membaca dari POST untuk membuat data pada contoh dasar
  • Menentukan pertanyaan contract sebelum mulai menulis fetch
APIHTTPRESTRequestResponse

Isi lesson

6 blok
  1. 1.
    API adalah contract, bukan sekadar URL fetchBelum selesaiWajib
  2. 2.
    Membaca satu request daftar courseBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Cek pemahamanBelum selesaiWajib
  5. 5.
    Nama endpoint tidak cukup untuk menjelaskan contractBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

API adalah contract, bukan sekadar URL fetch

Wajib

Saat frontend meminta daftar course, browser tidak perlu tahu database atau framework yang dipakai server. Frontend perlu contract yang dapat dibaca: resource apa yang diminta, endpoint mana yang dipakai, method apa yang diizinkan, input apa yang dikirim, bentuk response apa yang diterima, dan apa arti setiap error. REST adalah salah satu gaya umum untuk menyusun contract ini di atas HTTP. Resource biasanya berupa kata benda seperti courses, profiles, atau enrollments; endpoint adalah alamat untuk mengakses atau mengubah resource tersebut.

Sebelum menulis fetch, baca contoh request dan response seperti membaca interface antar tim. GET /api/courses?level=advanced dapat berarti meminta kumpulan course dengan filter. POST /api/courses dapat berarti mengirim body untuk membuat course. Jangan menebak method, nama field, atau success response dari nama endpoint saja. Contract milik provider atau backend team adalah sumber kebenaran.

Bagian ini memengaruhi progres lesson.

Membaca satu request daftar course

Wajib
bash
GET /api/courses?level=advanced HTTP/1.1
Accept: application/json

HTTP/1.1 200 OK
Content-Type: application/json

{ "data": [{ "id": "html-forms", "title": "HTML Forms" }], "next_cursor": "course_2" }

GET adalah method request. /api/courses adalah endpoint resource, sedangkan level=advanced adalah query parameter yang mengubah hasil tanpa menjadi bagian path resource. Response 200 membawa JSON. Pada contract ini, array berada di data dan next_cursor dapat dipakai untuk meminta halaman berikutnya. Metadata seperti next_cursor perlu dipetakan, bukan dibuang atau dipakai component tanpa konteks.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Read course REST request

Tulis model request GET untuk daftar course advanced dan catat bagian contract yang dibaca sebelum fetch.

Tujuan awal: Fokus di tab TS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

5 cek otomatis4 checklist
Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Pada REST API sederhana, request mana paling tepat untuk membaca daftar course dengan filter level?

Progres lesson naik setelah jawaban benar.

Kesalahan umum

Wajib

Nama endpoint tidak cukup untuk menjelaskan contract

Endpoint yang terlihat sederhana tetap dapat memiliki pagination, permission, query parameter wajib, format tanggal, atau error shape khusus. Jangan membuat URL sendiri dari nama component lalu berharap server menebak maksudnya. Catat method, input, success response, dan failure response sebelum mulai integration.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • API contract menjelaskan cara frontend dan server bertukar data.
  • REST sering memakai resource, endpoint, HTTP method, query parameter, request body, dan response body.
  • GET membaca data; POST, PATCH, atau DELETE punya intent berbeda sesuai contract.
  • Baca contoh request serta response sebelum menulis fetch atau JSX.
  • Berikutnya, kita membandingkan REST dengan GraphQL tanpa menganggap salah satunya selalu lebih baik.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: API adalah contract, bukan sekadar URL fetch.

Memuat progresReview module