Brief-nya
Toko Kita adalah toko online kecil di Indonesia yang menjual kopi, peralatan dapur, alat tulis, perlengkapan rumah, dan beberapa barang elektronik. Situsnya dibuat dengan website builder drag-and-drop, dan tim sudah kebesaran untuk itu. Seorang freelancer sedang membuat aplikasi mobile, dan aplikasinya butuh API untuk berkomunikasi. Pemilik toko juga ingin halaman toko sederhana yang bekerja tanpa JavaScript, supaya cepat dimuat di koneksi yang lambat.
Kamu membangun keduanya dengan Flask. API-nya punya dua bagian: membuat pesanan, dan mencari produk. Halamannya me-render daftar produk dari template yang berbagi layout dengan bagian situs lainnya. Ini bagian back end di mana kesalahan bisa merugikan uang atau kepercayaan. Pesanan yang melewatkan validasi bisa menjual stok yang tidak dimiliki toko, dan halaman yang tidak meng-escape datanya bisa rusak gara-gara satu nama produk yang aneh. Tiketnya ketat soal keduanya.
Cara kerja tugas-tugasnya
Setiap tugas dicek otomatis dengan test client Flask: pengecek mengirim request ke aplikasimu lalu melihat status code, JSON, dan HTML yang kembali. Status code sama pentingnya dengan datanya. Client seperti aplikasi mobile memutuskan apa yang ditampilkan dari status code bahkan sebelum membaca body-nya. Tiketnya menyebut apa yang harus dilakukan setiap URL, bukan cara menyusun kodemu. Pesan error dan teks di halaman ditulis dalam bahasa Inggris persis seperti di tiket, karena itulah yang dicek. Ada petunjuk kalau kamu buntu, tapi coba setiap tugas tanpa membuka solusinya dulu.
Tugas-tugasnya
| # | Tugas | Keterampilan utama |
|---|---|---|
| 1 | API pesanan | Route POST dan GET, JSON, validasi, status code |
| 2 | Pencarian produk | Query string, filtering, pengurutan, 400 untuk input yang salah |
| 3 | Halaman toko | Template Jinja, extends, loop, filter buatan sendiri, escaping |
Setiap tugas memberikan datanya di kode awal (dictionary atau list PRODUCTS kecil), jadi tidak ada database yang perlu disiapkan. Tugas 3 juga memakai templates/base.html, layout yang dipakai bersama oleh setiap halaman di situs:
<!doctype html>
<html>
<head><title>{% block title %}Toko Kita{% endblock %}</title></head>
<body>
<nav><a href="/">Home</a> · <a href="/shop">Shop</a></nav>
<main>{% block content %}{% endblock %}</main>
<footer>© Toko Kita</footer>
</body>
</html>Kalau sudah siap, buka Task 1.