Mata Kuliah Lab Pemrograman • Bisnis Digital

Merancang & Menguji REST API

Pertemuan 8 — Perancangan dan Pengujian REST API untuk Mendukung Fungsionalitas Aplikasi

Selama ini aplikasi Anda hanya menampilkan data yang ditulis langsung di kode. Hari ini kita membuka jalan agar aplikasi bisa "berbicara" dengan server sungguhan — mengambil, mengirim, dan mengubah data lewat jembatan bernama REST API.

RPS MINGGU 9 • 2X50 MENIT

Tujuan Pembelajaran Hari Ini

Melanjutkan navigasi dan routing dari Pertemuan 7, hari ini Anda akan menyambungkan aplikasi ke sumber data nyata:

CAPAIAN 1 — RANCANG

MERANCANG REST API

Memahami struktur endpoint, method HTTP, dan format data JSON untuk merancang permintaan data yang rapi dan konsisten.

CAPAIAN 2 — UJI

MENGUJI REST API

Mampu memanggil API dari React Native serta menguji endpoint dengan Postman untuk memastikan fungsionalitas berjalan benar.

Sub-CPMK Minggu 9: mahasiswa mampu merancang dan menguji REST API untuk mendukung fungsionalitas aplikasi yang telah dibangun.

Bagian 1 dari 3

Apa Itu REST API?

Bagaimana aplikasi mobile "berbicara" dengan server untuk mengambil dan mengirim data.

Analogi: Pelayan Restoran

ANDA (KLIEN)

APLIKASI MOBILE

Anda duduk di meja dan memesan lewat pelayan — Anda tidak masuk ke dapur sendiri untuk mengambil makanan.

DAPUR (SERVER)

DATABASE & LOGIKA

Dapur menyimpan bahan dan resep (data), lalu menyiapkan pesanan sesuai permintaan yang diterima pelayan.

Glosarium — REST API: aturan standar yang mengatur bagaimana aplikasi (klien) meminta atau mengirim data ke server lewat alamat tertentu, menggunakan format permintaan dan jawaban yang konsisten — seperti pelayan yang menjembatani pesanan Anda ke dapur.

Anatomi Alamat: Endpoint

Setiap permintaan data punya alamat tujuan, disebut endpoint — mirip alamat rumah agar kurir tahu ke mana harus mengantar.

https://api.tokoumkm.com/produk?kategori=batik&limit=10

BASE URL

Alamat utama server: api.tokoumkm.com

PATH

Sumber data yang dituju: /produk

QUERY PARAM

Filter tambahan setelah tanda ?: kategori, limit

HTTP Method → Operasi CRUD

Selain alamat, setiap permintaan punya method yang menyatakan jenis aksi — mirip empat tombol dasar pada sistem kasir.

Method	Aksi (CRUD)	Contoh Kasus UMKM
GET	Mengambil data (Read)	Menampilkan daftar produk batik
POST	Menambah data (Create)	Mendaftarkan produk baru ke katalog
PUT	Mengubah data (Update)	Mengubah harga produk yang sudah ada
DELETE	Menghapus data (Delete)	Menghapus produk yang sudah tidak dijual

Glosarium — CRUD: singkatan dari Create, Read, Update, Delete — empat operasi dasar yang hampir selalu dibutuhkan aplikasi untuk mengelola data.

Kode Status: Jawaban dari Server

Setiap kali server menjawab permintaan, ia menyertakan status code — angka tiga digit penanda hasil, seperti lampu indikator.

2XX • SUKSES

200 OK data berhasil diambil.
201 Created data baru berhasil dibuat.

4XX • KESALAHAN KLIEN

400 permintaan tidak valid.
404 data/endpoint tidak ditemukan.

5XX • KESALAHAN SERVER

500 server mengalami error internal saat memproses permintaan.

Format Data: JSON

Data yang dikirim dan diterima REST API dibungkus dalam format JSON — pasangan kunci dan nilai yang mudah dibaca manusia maupun mesin.

{
  "id": 12,
  "nama": "Kaos UMKM",
  "harga": 75000,
  "tersedia": true
}

Glosarium — JSON (JavaScript Object Notation): format pertukaran data berbasis teks yang menyusun informasi sebagai pasangan kunci: nilai di dalam kurung kurawal, dipakai hampir semua REST API modern karena ringan dan mudah diproses JavaScript.

Hitung dari Nol: Merancang Pagination

Katalog UMKM punya 47 produk. Agar tidak diambil sekaligus, data dipecah per halaman lewat query parameter page dan limit.

Langkah	Perhitungan	Nilai
Total data produk	diketahui dari database	47
Item per halaman (limit)	ditentukan tim	10
Total halaman dibutuhkan	47 ÷ 10 = 4,7 → dibulatkan ke atas	5
Offset untuk ambil halaman 3	(3 − 1) × 10	20

ENDPOINT HALAMAN 3

/produk?page=3&limit=10

Server melompati 20 data pertama, lalu mengambil 10 berikutnya

Coba Sendiri: Rancang Pagination API Anda

Ubah total data dan limit per halaman, lalu amati jumlah halaman dan offset tiap halaman yang dihasilkan.

Bagian 2 dari 3

Memanggil REST API dari Aplikasi

Dari rancangan endpoint di atas kertas menuju kode React Native yang benar-benar mengambil data dari server.

Mengambil Data dengan fetch

React Native menyediakan fungsi fetch untuk mengirim permintaan HTTP. Dipasangkan dengan async/await agar kode menunggu jawaban server sebelum melanjutkan.

// Fungsi async menunggu jawaban server
async function ambilProduk() {
  const respons = await fetch('https://api.tokoumkm.com/produk');
  const data = await respons.json();
  return data;
}

Glosarium — async/await: pola penulisan kode yang membuat program "menunggu" hasil suatu proses (seperti permintaan ke server) sebelum menjalankan baris berikutnya, tanpa membekukan seluruh tampilan aplikasi.

Menangani Jawaban & Kegagalan

Koneksi internet bisa putus, server bisa error — kode yang baik selalu siap menangani kegagalan dengan try/catch.

async function ambilProduk() {
  try {
    const respons = await fetch('https://api.tokoumkm.com/produk');
    if (!respons.ok) throw new Error('Gagal: ' + respons.status);
    return await respons.json();
  } catch (error) {
    console.log('Terjadi kesalahan:', error.message);
  }
}

Studi Kasus: Kirim Data Login

Berbeda dari GET, method POST mengirim data lewat body — misalnya email dan kata sandi saat pengguna login.

async function login(email, sandi) {
  const respons = await fetch('https://api.tokoumkm.com/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email, sandi })
  });
  return await respons.json();
}

Glosarium — headers & body: headers adalah "amplop" berisi info tambahan tentang permintaan (mis. jenis data yang dikirim); body adalah "isi surat" berupa data sesungguhnya yang dikirim ke server.

Alur Lengkap: Permintaan → Jawaban

Panah penuh = permintaan (request) berjalan; panah putus-putus = jawaban (response) berisi JSON dan status code kembali ke aplikasi.

Bagian 3 dari 3

Menguji REST API

Sebelum disambungkan ke tampilan aplikasi, endpoint perlu diuji langsung — tanpa harus membuka aplikasi mobile.

Alat Uji: Postman

Postman memungkinkan Anda mengirim permintaan ke endpoint dan memeriksa jawabannya tanpa harus membuka aplikasi mobile terlebih dahulu.

1 • PILIH METHOD

Pilih GET, POST, PUT, atau DELETE sesuai aksi yang ingin diuji.

2 • ISI ENDPOINT & BODY

Masukkan alamat endpoint, lalu isi data JSON di body bila diperlukan.

3 • KIRIM & PERIKSA

Tekan Send, lalu periksa status code dan isi JSON pada jawaban.

Menguji lewat Postman lebih cepat daripada lewat aplikasi mobile karena Anda tidak perlu menunggu tampilan dibangun ulang setiap kali mencoba.

Hitung dari Nol: Success Rate Pengujian

Tim menguji 25 permintaan ke berbagai endpoint toko UMKM lewat Postman. Mari hitung tingkat keberhasilannya.

Langkah	Perhitungan	Nilai
Total permintaan diuji	diketahui dari log Postman	25
Berhasil (status 200/201)	dihitung dari log	21
Gagal (404 + 500)	3 + 1	4
Success rate	21 ÷ 25 × 100	84%

HASIL PENGUJIAN

84%

4 endpoint perlu diperbaiki sebelum rilis

Latihan menghitung success rate ini adalah kebiasaan dasar quality assurance yang dipakai tim developer profesional, mirip cara toko online menghitung persentase pesanan yang terkirim tepat waktu. Dari dua puluh lima permintaan yang diuji, dua puluh satu membalas status sukses di kelompok 2xx, sementara empat sisanya gagal — tiga karena endpoint salah alamat berstatus 404 dan satu karena server error berstatus 500. Angka delapan puluh empat persen ini dihitung dengan membagi jumlah yang berhasil dengan total percobaan, lalu dikalikan seratus, persis rumus persentase yang sudah Anda kenal sejak sekolah menengah. Angka ini juga jadi sinyal buat tim: sebelum aplikasi dirilis ke pengguna, empat endpoint yang gagal tadi wajib diperbaiki dulu, karena pengguna sungguhan tidak akan mentolerir aplikasi yang sering gagal memuat data.

Kesalahan Umum Pemula

KESALAHAN 1

Lupa menulis await sebelum fetch atau respons.json(). Akibatnya kode membaca data yang belum selesai diambil, sehingga hasilnya kosong atau error.

KESALAHAN 2

Tidak memeriksa status code sebelum memakai data jawaban. Kode langsung mengasumsikan sukses, padahal server bisa saja membalas 404 atau 500.

Ingat: selalu gunakan await pada proses fetch, dan selalu periksa respons.ok atau status code sebelum menampilkan data ke pengguna.

Dua kesalahan ini adalah penyebab paling sering aplikasi mahasiswa menampilkan layar kosong atau macet saat praktik minggu-minggu awal menyambungkan API. Kesalahan pertama terjadi karena lupa bahwa fetch butuh waktu untuk mendapat jawaban dari server — tanpa await, kode Anda melompat ke baris berikutnya sebelum data benar-benar sampai, seperti Anda membuka kulkas dan langsung mengira isinya kosong padahal belum sempat melihat ke dalam. Kesalahan kedua terjadi ketika mahasiswa terlalu percaya diri bahwa server selalu membalas sukses, padahal koneksi bisa terputus atau endpoint bisa salah ketik — akibatnya aplikasi mencoba menampilkan data yang sebenarnya berisi pesan error dari server. Kalau nanti aplikasi Anda menampilkan tulisan aneh seperti "undefined", cek dulu apakah Anda sudah memeriksa status code sebelum memakai datanya.

Latihan Praktik (30 Menit)

Rancang dan uji satu endpoint REST API untuk katalog UMKM pilihan Anda sendiri, lalu panggil dari kode React Native.

Instruksi

Rancang endpoint GET /produk lengkap dengan query parameter page dan limit.
Uji endpoint tersebut di Postman, catat status code yang muncul.
Tulis fungsi fetch dengan async/await dan try/catch untuk memanggilnya dari React Native.
Hitung success rate dari minimal 5 kali percobaan pengujian Anda sendiri.

Kerjakan berpasangan. Dosen akan berkeliling untuk memeriksa hasil pengujian Postman dan kode fetch Anda.

Rangkuman & Tugas Mandiri

MERANCANG

ENDPOINT & JSON

Alamat endpoint, method HTTP (GET/POST/PUT/DELETE), status code, dan format JSON adalah bahasa dasar REST API.

MENGUJI

FETCH & POSTMAN

fetch + async/await memanggil API dari React Native; Postman menguji endpoint sebelum disambungkan ke tampilan.

Tugas Sebelum Pertemuan 9

Selesaikan latihan praktik dan unggah ke repository proyek masing-masing.
Uji tambahan satu endpoint POST (mis. tambah produk), catat success rate-nya.

Sebelum kita tutup, mari Anda rangkum sendiri dalam satu kalimat: REST API adalah jembatan komunikasi berstandar antara aplikasi dan server, dengan endpoint sebagai alamat, method sebagai jenis aksi, status code sebagai indikator hasil, dan JSON sebagai bahasa datanya. Kemampuan memanggilnya lewat fetch dan mengujinya lewat Postman adalah keterampilan yang akan terus Anda pakai sampai proyek akhir semester, termasuk saat integrasi database minggu depan dan dummy API dua minggu setelahnya. Bayangkan aplikasi katalog UMKM Anda sekarang sudah bisa "berbicara" dengan data sungguhan, persis seperti aplikasi Tokopedia atau BBCA mobile yang Anda pakai sehari-hari. Terima Kasih atas partisipasi aktif Anda hari ini — pastikan tugas mandiri diselesaikan karena Pertemuan 9 akan langsung membangun struktur database yang menjadi sumber data endpoint yang baru saja Anda rancang.