Lewati ke isi

LKPD: Transaksi & Otorisasi API

Identitas

  • Mata Pelajaran: Pemrograman Mobile (Flutter)
  • Topik: Integrasi API Transaksi dengan Token JWT

A. Tujuan Pembelajaran

Siswa mampu: 1. Mengirim request POST dengan data kompleks (Nested JSON). 2. Menambahkan Header Authorization (Bearer Token) pada request. 3. Membuat logika Checkout sederhana. 4. Membuat halaman Success Page sebagai umpan balik transaksi.

B. Skenario

Aplikasi toko online belum lengkap kalau tidak bisa belanja. Di tugas ini, kalian akan membuat fitur Checkout.

Saat user menekan tombol "Bayar" di keranjang/halaman checkout: 1. Aplikasi mengambil Token dari penyimpanan lokal. 2. Aplikasi mengirim data transaksi beserta Token ke Server. 3. Jika sukses, User diarahkan ke halaman "Terima Kasih".

C. Spesifikasi API

  • Endpoint: {{ API_URL }}/transactions
  • Method: POST
  • Headers:
  • Content-Type: application/json
  • Authorization: Bearer <TOKEN_KALIAN_DISINI>

1. Request Body (Data yang dikirim)

Struktur datanya sedikit kompleks karena ada array details (daftar barang yang dibeli).

{
    "recipient_name": "Nama Penerima",
    "recipient_address": "Alamat Lengkap",
    "recipient_phone": "08123456789",
    "subtotal": 300000,
    "total_amount": 350000,
    "details": [
        {
            "product_id": 1,
            "quantity": 1,
            "price": 100000,
            "subtotal": 100000
        },
        {
            "product_id": 2,
            "quantity": 1,
            "price": 200000,
            "subtotal": 200000
        }
    ]
}

2. Response Sukses (201 Created)

{
    "id": "8b5ee0bd-1219-46d3-9c32-f53bde727a9f",
    "user_id": 1,
    "recipient_name": "Nama Penerima",
    # ... data lainnya
    "status": "pending",
    "details": [...]
}

D. Langkah Kerja

Langkah 1: Siapkan Model

Gunakan app.quicktype.io untuk membuat model dari JSON Request di atas. - Name: TransactionPayload (atau sesuka kalian). - Language: Dart. - Simpan di lib/models/transaction_model.dart.

Tips: Hati-hati dengan struktur details yang berupa List of Object. Pastikan Quicktype membacanya sebagai struktur yang benar.

Langkah 2: Buat Transaction Service

Buat file lib/services/transaction_service.dart. Kalian ditantang untuk melengkapi kode berikut agar bisa mengirim data transaksi + Token.

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:flutter_secure_storage/flutter_secure_storage.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';

class TransactionService {
  final storage = const FlutterSecureStorage();
  final String baseUrl = dotenv.env['API_URL'] ?? 'http://localhost:8080';

  // TUGAS 1: Lengkapi fungsi ini!
  Future<bool> checkout(Map<String, dynamic> dataTransaksi) async {
    // A. Ambil Token dari Secure Storage
    // Coding disini...

    // B. Cek jika token tidak ada, lempar error
    // Coding disini...

    // C. Siapkan URL
    // Coding disini...

    // D. Kirim Request POST
    // Jangan lupa tambahkan Header:
    // 'Authorization': 'Bearer <token_kalian>'
    // Coding disini...

    // E. Cek Status Code (Harusnya 201)
    // Coding disini...

    return false; // Hapus baris ini jika sudah selesai coding
  }
}

Langkah 3: Integrasi ke Tombol Checkout

Di halaman Keranjang atau Checkout kalian: 1. Susun data transaksi (hardcode dulu tidak apa-apa untuk latihan). 2. Panggil TransactionService. 3. Jika sukses -> Pindah ke Halaman Success.

// TUGAS 2: Panggil service saat tombol ditekan
void onCheckoutPressed() async {
    // 1. Siapkan data transaksi (Map / Model) sesuai contoh JSON di atas

    // 2. Panggil TransactionService().checkout(...)

    // 3. Jika berhasil, pindah halaman ke SuccessPage
    // context.go('/success');
}

Langkah 4: Halaman Success Page

Buat file lib/pages/success_page.dart. - Tampilkan Icon Centang Besar / Gambar Transaksi Berhasil. - Teks "Terima Kasih, pesanan Anda sedang diproses". - Tombol "Kembali ke Home" yang mengarah ke /home.

E. Tugas / Challenge

  1. Pastikan kalian login terlebih dahulu untuk mendapatkan Token.
  2. Lakukan transaksi menggunakan data dummy.
  3. Cek apakah sukses masuk ke database (atau setidaknya balasan server 201).
  4. Tantangan: Buat form inputan Alamat Pengiriman sebelum tombol checkout, agar data recipient_address dinamis!

F. Troubleshooting

  • 401 Unauthorized: Token yang dikirim salah atau kadaluarsa. Cek penulisan Bearer (ada spasi).
  • 400 Bad Request: JSON Body tidak sesuai (cek nama field).
  • Connection Refused: Pastikan server API menyala.