FluentStack

Uji Kompetensi API Fundamentals

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

Uji Kompetensi API Fundamentals

Checkpoint kesiapan membaca API contract, memetakan response serta status, dan menjelaskan pagination maupun webhook dari sudut pandang frontend.

StatusMemuat progres
ReadinessMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Yang dicek

  • Menganalisis endpoint, method, input, success response, dan error response
  • Memilih frontend behavior dari status HTTP yang umum
  • Memetakan API response dan pagination metadata menjadi model UI
  • Menjelaskan webhook tanpa menggeser secret atau tanggung jawab server ke browser
APIHTTPRESTGraphQLData ContractsPaginationReadiness Checkpoint

Isi lesson

6 blok
  1. 1.
    Checkpoint: baca contract sebelum menulis integrationBelum selesaiWajib
  2. 2.
    QuizBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Writing practiceBelum selesaiWajib
  5. 5.
    Baca docs API sebagai contract kerja, bukan daftar istilahBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Checkpoint: baca contract sebelum menulis integration

Wajib

Feature Course Catalog perlu menampilkan daftar course, membuka detail, menambahkan note, dan memuat hasil berikutnya. Backend docs menyebut GET /api/courses?cursor=... untuk daftar, GET /api/courses/:id untuk detail, dan POST /api/course-notes untuk membuat note. Daftar success mengirim data serta next_cursor. Input note yang tidak valid menghasilkan 422 dengan field errors. Resource yang tidak ada menghasilkan 404. Request terlalu sering dapat menghasilkan 429. Payment status dapat berubah setelah payment provider memberi webhook ke application server.

Pada checkpoint ini, jangan membuat endpoint atau kode backend baru. Buktikan bahwa kamu dapat membaca contract, menentukan data yang harus diberi type, memetakan snake_case ke model UI, memilih UI recovery untuk status berbeda, serta menjelaskan kapan user dapat memuat halaman berikutnya. Kesiapan bukan berarti menghafal semua HTTP code; readiness berarti tahu pertanyaan contract dan tindakan frontend yang benar.

Bagian ini memengaruhi progres lesson.

Quiz

Wajib

Uji Kompetensi API Fundamentals

Jawab pertanyaan satu per satu. Kamu bisa ulang quiz jika belum mencapai target lulus.

Target lulus

70/100

Skor terbaik

0/100

Status

Belum dikerjakan

Blok ini wajib untuk menyelesaikan lesson. Progres quiz naik setelah skor mencapai target lulus.

Pertanyaan 1 dari 7

Target lulus: 70

Bagian paling penting yang perlu dibaca sebelum menghubungkan UI ke endpoint adalah

Coding practice

WajibDibuka di workspace khusus

Analyze course API contract checkpoint

Satukan type transport, status UI, dan cursor metadata untuk Course Catalog tanpa menjalankan API runtime.

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.

6 cek otomatis5 checklist
Belum selesaiBuka practice

Writing practice

Wajib

Latihan menulis

Tulis API integration note untuk Course Catalog. Sebutkan endpoint dan method untuk list, detail, serta create note; query atau body yang relevan; success response dan model UI yang kamu butuhkan; cara membedakan 401/403, 404, 422, 429, 5xx, dan network failure; pagination metadata dan behavior Load more; serta alur webhook payment dari provider sampai UI melihat data baru. Tutup dengan satu pertanyaan contract yang perlu kamu konfirmasi ke backend team dan satu QA scenario local. Jangan mengklaim request telah berjalan jika belum benar-benar diuji.

Tulis draft dulu sebelum menandai writing practice selesai.

Draft kosong

0/850 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Blok ini wajib untuk menyelesaikan lesson.

Documentation Bridge

Wajib

Baca docs API sebagai contract kerja, bukan daftar istilah

Buka sumber resmi sesuai contract yang sedang kamu integrasikan. Fokus pada contoh request, response, error, dan pagination; jangan melompat ke desain backend, schema GraphQL lanjutan, atau webhook security implementation sebelum module berikutnya.

MDN Web Docs

Overview of HTTP

Fokus baca

  • Request versus response dan peran client-server.
  • Method, path, header, body, serta status code pada message HTTP.
  • HTTP sebagai dasar API data exchange.

Abaikan dulu

  • Detail connection HTTP/1.x, HTTP/2 frame, dan proxy architecture.
  • CORS dan cookies yang menjadi fokus module auth/security berikutnya.
Buka dokumentasi

MDN Web Docs

HTTP request methods

Fokus baca

  • Intent GET, POST, PATCH, dan DELETE pada API contract.
  • Membaca safe serta idempotent sebagai label semantics, bukan aturan UI instan.

Abaikan dulu

  • Semua method jarang seperti CONNECT atau TRACE.
Buka dokumentasi

MDN Web Docs

HTTP response status codes

Fokus baca

  • Perbedaan kelompok 2xx, 4xx, dan 5xx.
  • Arti 401, 403, 404, 422, 429, dan 500 untuk recovery frontend.

Abaikan dulu

  • Menghafal setiap status code yang tidak dipakai project.
Buka dokumentasi

MDN Web Docs

Using the Fetch API

Fokus baca

  • Memeriksa response.ok atau status sebelum memakai success data.
  • Membedakan HTTP response error dan network exception.
  • Membaca JSON setelah contract dipahami.

Abaikan dulu

  • Streaming body, upload, dan Request configuration advanced.
Buka dokumentasi

GraphQL

GraphQL Learn

Fokus baca

  • Query, variable, schema, dan response data pada contoh sederhana.
  • Selection set field sesuai kebutuhan UI.

Abaikan dulu

  • Schema design, resolver implementation, federation, dan performance tuning.
Buka dokumentasi

Aksi setelah membaca

Pilih satu request nyata dari Local React App atau Local Next.js App. Catat endpoint, method, input, success/error response, status yang perlu ditangani, dan pagination metadata bila ada. Buat mapper ke model UI, lalu QA loading, empty, error, serta request berikutnya. Jika ada provider event, gambarkan alur server-to-server tanpa menyimpan secret di browser.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • API contract mencakup endpoint, method, input, success response, error response, serta pagination metadata.
  • REST dan GraphQL memiliki bentuk contract berbeda tetapi sama-sama membutuhkan type, mapper, error handling, dan QA.
  • Status HTTP dan network failure perlu diterjemahkan ke UI recovery yang sesuai context.
  • Pagination membuat frontend membaca metadata halaman; webhook memberi notifikasi server-ke-server, bukan secret untuk browser.
  • Kamu siap masuk ke Auth, Cookies, and Browser Security Boundaries untuk memahami identity serta security boundary di balik request tersebut.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian wajib checkpoint ini

Lanjutkan blok wajib berikutnya: Checkpoint: baca contract sebelum menulis integration.

Memuat progresReview module