Lewati ke isi

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

Mata Pelajaran: Pemrograman Perangkat Bergerak (Flutter)

Tema: Aplikasi TCG Pokemon (Sprint 3)

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: Fitur Pembelian Set (Pack) Pokemon

Buatkan tampilan di mana user dapat membeli set/pack Pokemon berdasarkan saldo yang dimiliki.

Ketentuan: 1. Tampilkan alert atau peringatan apabila jumlah saldo user tidak mencukupi untuk melakukan pembelian.
2. Integrasikan fitur pembelian dengan menggunakan API berikut:

  • URL Endpoint API: https://api-tcg-backend.vercel.app/api/store/buy-pack
  • Method HTTP: POST

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

Format body request yang perlu dikirimkan (dikirim sesuai set_id pokemon yang dipilih): 

{
    "set_id": "neo3"
}

Contoh response dari server apabila berhasil: 

{
    "kartu_didapat": [
        {
            "user_id": "34801de5-f465-4fb0-b699-ff85d797233b",
            "card_id": "neo3-47",
            "card_name": "Paras",
            "image_url": "https://assets.tcgdex.net/en/neo/neo3/47/low.png",
            "set_id": "neo3",
            "acquired_at": "0001-01-01T00:00:00Z"
        },
        {
            "user_id": "34801de5-f465-4fb0-b699-ff85d797233b",
            "card_id": "neo3-56",
            "card_name": "Staryu",
            "image_url": "https://assets.tcgdex.net/en/neo/neo3/56/low.png",
            "set_id": "neo3",
            "acquired_at": "0001-01-01T00:00:00Z"
        },
        {
            "user_id": "34801de5-f465-4fb0-b699-ff85d797233b",
            "card_id": "neo3-55",
            "card_name": "Snubbull",
            "image_url": "https://assets.tcgdex.net/en/neo/neo3/55/low.png",
            "set_id": "neo3",
            "acquired_at": "0001-01-01T00:00:00Z"
        },
        {
            "user_id": "34801de5-f465-4fb0-b699-ff85d797233b",
            "card_id": "neo3-12",
            "card_name": "Porygon2",
            "image_url": "https://assets.tcgdex.net/en/neo/neo3/12/low.png",
            "set_id": "neo3",
            "acquired_at": "0001-01-01T00:00:00Z"
        },
        {
            "user_id": "34801de5-f465-4fb0-b699-ff85d797233b",
            "card_id": "neo3-49",
            "card_name": "Qwilfish",
            "image_url": "https://assets.tcgdex.net/en/neo/neo3/49/low.png",
            "set_id": "neo3",
            "acquired_at": "0001-01-01T00:00:00Z"
        }
    ],
    "message": "Berhasil membeli pack dan mendapatkan kartu!",
    "pack_dibeli": "Neo Revelation",
    "sisa_saldo": 110000,
    "transaction_id": ""
}

Tantangan Animasi: Setelah proses request pembelian berhasil, tampilkan kartu-kartu Pokemon yang didapatkan ke layar user, dan buatkan animasi (fade in, scale, dll) pada kartu-kartu tersebut agar tampilannya menjadi makin menarik.

Soal 2: Daftar Koleksi Kartu (My Card Collection)

Buatkan halaman My Card Collection untuk menampilkan daftar semua kartu yang pernah didapatkan atau dimiliki oleh user. Integrasikan halaman tersebut dengan API berikut:

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

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

Contoh response dari server: 

{
    "data": [
        {
            "id": "36a14a81-0b15-4fbf-a207-885594206941",
            "user_id": "34801de5-f465-4fb0-b699-ff85d797233b",
            "transaction_id": "d4d091bd-7d62-48b8-a9f0-ddeee5ac3cb4",
            "card_id": "neo3-14",
            "card_name": "Suicune",
            "image_url": "https://assets.tcgdex.net/en/neo/neo3/14/low.png",
            "set_id": "neo3",
            "acquired_at": "0001-01-01T00:00:00Z"
        },
        {
            "id": "57613b64-4ccd-48bd-96ab-346b1d35636e",
            "user_id": "34801de5-f465-4fb0-b699-ff85d797233b",
            "transaction_id": "d4d091bd-7d62-48b8-a9f0-ddeee5ac3cb4",
            "card_id": "neo3-12",
            "card_name": "Porygon2",
            "image_url": "https://assets.tcgdex.net/en/neo/neo3/12/low.png",
            "set_id": "neo3",
            "acquired_at": "0001-01-01T00:00:00Z"
        },
        {
            "id": "7caa1b9d-8c6a-4183-9550-ce923d00e7a1",
            "user_id": "34801de5-f465-4fb0-b699-ff85d797233b",
            "transaction_id": "d4d091bd-7d62-48b8-a9f0-ddeee5ac3cb4",
            "card_id": "neo3-21",
            "card_name": "Raichu",
            "image_url": "https://assets.tcgdex.net/en/neo/neo3/21/low.png",
            "set_id": "neo3",
            "acquired_at": "0001-01-01T00:00:00Z"
        },
        {
            "id": "c4581401-c127-4d26-9699-6b21e800e5da",
            "user_id": "34801de5-f465-4fb0-b699-ff85d797233b",
            "transaction_id": "d4d091bd-7d62-48b8-a9f0-ddeee5ac3cb4",
            "card_id": "neo3-61",
            "card_name": "Healing Field",
            "image_url": "https://assets.tcgdex.net/en/neo/neo3/61/low.png",
            "set_id": "neo3",
            "acquired_at": "0001-01-01T00:00:00Z"
        },
        {
            "id": "d0849a00-ad86-473d-a2f8-9d3af089a9d1",
            "user_id": "34801de5-f465-4fb0-b699-ff85d797233b",
            "transaction_id": "d4d091bd-7d62-48b8-a9f0-ddeee5ac3cb4",
            "card_id": "neo3-8",
            "card_name": "Houndoom",
            "image_url": "https://assets.tcgdex.net/en/neo/neo3/8/low.png",
            "set_id": "neo3",
            "acquired_at": "0001-01-01T00:00:00Z"
        },
        {
            "id": "417cc3f6-570a-4b6d-a721-88929be26ceb",
            "user_id": "34801de5-f465-4fb0-b699-ff85d797233b",
            "card_id": "neo3-47",
            "card_name": "Paras",
            "image_url": "https://assets.tcgdex.net/en/neo/neo3/47/low.png",
            "set_id": "neo3",
            "acquired_at": "0001-01-01T00:00:00Z"
        },
        {
            "id": "cc5ca787-1ff3-4a74-a53e-56179bf519a2",
            "user_id": "34801de5-f465-4fb0-b699-ff85d797233b",
            "card_id": "neo3-56",
            "card_name": "Staryu",
            "image_url": "https://assets.tcgdex.net/en/neo/neo3/56/low.png",
            "set_id": "neo3",
            "acquired_at": "0001-01-01T00:00:00Z"
        },
        {
            "id": "d03db0bb-ed97-4ddd-8d80-299c05081578",
            "user_id": "34801de5-f465-4fb0-b699-ff85d797233b",
            "card_id": "neo3-55",
            "card_name": "Snubbull",
            "image_url": "https://assets.tcgdex.net/en/neo/neo3/55/low.png",
            "set_id": "neo3",
            "acquired_at": "0001-01-01T00:00:00Z"
        },
        {
            "id": "1e0d45cb-2821-4e7e-a199-10d079cdfdea",
            "user_id": "34801de5-f465-4fb0-b699-ff85d797233b",
            "card_id": "neo3-12",
            "card_name": "Porygon2",
            "image_url": "https://assets.tcgdex.net/en/neo/neo3/12/low.png",
            "set_id": "neo3",
            "acquired_at": "0001-01-01T00:00:00Z"
        },
        {
            "id": "43e0d383-9ffd-4270-84ef-a9a1253ef67d",
            "user_id": "34801de5-f465-4fb0-b699-ff85d797233b",
            "card_id": "neo3-49",
            "card_name": "Qwilfish",
            "image_url": "https://assets.tcgdex.net/en/neo/neo3/49/low.png",
            "set_id": "neo3",
            "acquired_at": "0001-01-01T00:00:00Z"
        }
    ],
    "message": "Berhasil mengambil koleksi kartu",
    "total_kartu": 10
}