Di aplikasi e-commerce modern, pencarian dan pemfilteran katalog produk dilakukan melalui API backend yang mendukung filtering dan pagination untuk menghemat penggunaan bandwidth data.
Anda diminta membuat endpoint REST API Express.js untuk:
POST /api/products/search
{
"query": "phone",
"category": "ELECTRONICS",
"page": 1,
"limit": 2
}
{
"data": [
{ "id": "P1", "name": "Smartphone X", "category": "ELECTRONICS", "price": 800 }
],
"pagination": {
"page": 1,
"limit": 2,
"totalItems": 1,
"totalPages": 1
}
}
const catalog = [
{ id: "P1", name: "Smartphone X", category: "ELECTRONICS", price: 800 },
{ id: "P2", name: "Laptop Pro", category: "ELECTRONICS", price: 1500 },
{ id: "P3", name: "Wireless Headphones", category: "ELECTRONICS", price: 200 },
{ id: "P4", name: "Running Shoes", category: "FASHION", price: 120 },
{ id: "P5", name: "Denim Jacket", category: "FASHION", price: 90 }
];
page (default: 1) dan limit (default: 10). Jika page < 1 atau limit < 1 → HTTP 400 "Invalid pagination parameters".category diisi, filter produk yang memiliki product.category === category (exact match).query diisi, filter produk yang nama produknya mengandung substring query (case-insensitive search).totalItems: Jumlah total produk yang lolos filter.totalPages: Math.ceil(totalItems / limit) (jika totalItems 0, totalPages = 0).(page - 1) * limit hingga page * limit.HTTP 200 dengan objek { data: [...], pagination: { page, limit, totalItems, totalPages } }.Debouncing vs Throttling pada Search Input Component Di bagian komentar kode solusi Anda, jelaskan perbedaan teknik optimization frontend:
- Debouncing: Penundaan eksekusi hingga user berhenti mengetik selama X ms (misal 300ms).
- Throttling: Pengaturan eksekusi fungsi maksimal 1 kali setiap X ms.
- Kapan waktu terbaik menggunakan Debouncing vs Throttling di aplikasi Web?