Lembar Kerja Peserta Didik (LKPD) - Ujian Tengah Semester (UTS)

Mata Pelajaran: Pemrograman Perangkat Bergerak (Flutter)

Tema: Aplikasi TCG Pokemon (Sprint 2)

Petunjuk Umum: 1. Kerjakan soal-soal di bawah ini dengan menggunakan framework Flutter.
2. Wajib menggunakan package berikut dalam merancang aplikasi: - Provider untuk manajemen state (State Management). - http untuk melakukan komunikasi request dengan API. - go_router untuk navigasi (Routing) antar screen/halaman.

---

Soal 1: Dashboard / Home Menampilkan Data Set Pokemon

Buatkan halaman dashboard / home aplikasi TCG pokemon, yang di dalamnya menampilkan data set pokemon dengan mengkonsumsi API berikut:

• URL Endpoint API: https://api-tcg-backend.vercel.app/api/pokemon/sets
• Method HTTP: GET

Catatan Penting: Pemanggilan request wajib menyertakan Bearer Token (Authorization Header) yang didapatkan saat login.

Contoh response yang dikembalikan:

[
    {
        "id": "base1",
        "name": "Base Set",
        "logo": "https://assets.tcgdex.net/en/base/base1/logo.png",
        "price": 50000,
        "description": "Pack booster Base Set resmi."
    },
    {
        "id": "base2",
        "name": "Jungle",
        "logo": "https://assets.tcgdex.net/en/base/base2/logo.png",
        "price": 50000,
        "description": "Pack booster Jungle resmi."
    },
    {
        "id": "basep",
        "name": "Wizards Black Star Promos",
        "logo": "https://assets.tcgdex.net/en/base/basep/logo.png",
        "price": 50000,
        "description": "Pack booster Wizards Black Star Promos resmi."
    },
    {
        "id": "base3",
        "name": "Fossil",
        "logo": "https://assets.tcgdex.net/en/base/base3/logo.png",
        "price": 50000,
        "description": "Pack booster Fossil resmi."
    }
]

Soal 2: Implementasi Infinity Scroll

Karena banyaknya data set yang dikembalikan, buatlah menggunakan algoritma Infinity Scroll (paginasi). Tampilkan 10 data set terlebih dahulu di halaman dashboard. Baru kemudian tampilkan 10 data set berikutnya apabila user malakukan scroll layar ke bawah (dan seterusnya).

Soal 3: Fitur Topup Saldo User

Buatkan halaman topup saldo user (desain tampilan dan antarmuka dibebaskan sesuai kreativitas masing-masing) dengan menggunakan API berikut:

• URL Endpoint API: https://api-tcg-backend.vercel.app/api/users/topup
• Method HTTP: POST

Catatan Penting: Pemanggilan request wajib menyertakan Bearer Token (Authorization Header).

Format body request yang perlu dikirim (contoh saldo 100.000):

{
    "amount": 100000
}

Contoh response yang dikembalikan apabila berhasil:

{
    "message": "Topup berhasil",
    "saldo_baru": 160000,
    "saldo_sebelumnya": 60000,
    "topup_amount": 100000
}