Membuat konverter Flutter dengan API key di server

Aplikasi Flutter seluler adalah klien publik, sehingga tidak boleh memuat bearer key exchangerate.dev. Simpan kunci di proxy server /api/fx, kirim {from,to} dari Flutter, lalu simpan kurs, sumber, sesi pasar, dan waktu pengamatan bersama dalam model bertipe.

Simpan kredensial di server

Route server menerima from dan to, menambahkan Authorization: Bearer $EXCHANGERATE_API_KEY, memanggil /v1/latest/{from}?symbols={to}, lalu mengembalikan hanya field yang dibutuhkan. Simpan kunci di lingkungan server. Aplikasi menerima URL proxy melalui --dart-define=FX_PROXY_BASE_URL=…; aplikasi tidak pernah menerima kunci layanan asal.

GET /api/fx?from=USD&to=EUR

{"from":"USD","to":"EUR","rate":0.9245,"source":"live","market_session":"open","data_updated_at":"2026-09-29T10:00:00Z"}

Tambahkan dependensi HTTP

Buat aplikasi Flutter, tambahkan paket http terkini ke pubspec.yaml, dan simpan konverter Flutter lengkap sebagai lib/main.dart. Jalankan dengan flutter run --dart-define=FX_PROXY_BASE_URL=https://your-app.example/api/fx. Unduh proxy Node minimal, atur EXCHANGERATE_API_KEY di lingkungan server, lalu jalankan node flutter-currency-converter-proxy.mjs dengan Node 20 atau lebih baru. Proxy mendengarkan port loopback 8787 untuk pengujian lokal. Sebelum menghubungkan perangkat, sediakan akses melalui backend HTTPS Anda dengan autentikasi dan pembatasan permintaan; proxy memvalidasi mata uang dan jumlah, meneruskan kunci, dan hanya mengembalikan field kurs bertipe yang dibutuhkan. File memakai widget Material standar dan model FxQuote. Panduan jaringan resmi Flutter menjelaskan pemasangan paket dan pola permintaan.

Validasi kurs sebelum ditampilkan

Model menolak rate yang hilang, tidak positif, tidak terbatas, atau bukan angka, serta data_updated_at yang hilang. Ini mencegah halaman error HTML, bug proxy, atau JSON kosong menjadi hasil konversi. Klien membatasi permintaan hingga sepuluh detik dan menampilkan status selain 2xx.

class FxQuote {
  final String from;
  final String to;
  final double rate;
  final String source;
  final String marketSession;
  final DateTime dataUpdatedAt;
}

Tampilkan proses, error, dan waktu data

Layar menonaktifkan tombol selama permintaan berlangsung, menampilkan indikator pemuatan, dan menyimpan pesan yang terbaca saat proxy gagal. Setelah berhasil, layar menampilkan jumlah, kurs, sumber, sesi pasar, waktu pengamatan, usia cache aplikasi sejak perangkat mengambil respons, dan usia pengamatan sejak data_updated_at. Pengguna dapat membedakan pengamatan intrahari pada hari perdagangan dari referensi harian.

Bulatkan tampilan, pertahankan nilai

Untuk mata uang contoh, tampilkan JPY dengan 0 desimal serta USD, EUR, GBP, dan IDR dengan 2; tampilkan kurs dengan 6 desimal agar mudah dibaca. Ini hanya pembulatan tampilan. Pertahankan nilai numerik asli dan gunakan strategi desimal atau fixed-point pada bagian akuntansi produksi; jangan memakai nilai tampilan floating-point biner sebagai catatan penyelesaian pembayaran.

Uji alur pengguna

Jalankan aplikasi dengan respons proxy uji, lalu uji timeout, HTTP 401/429, JSON tidak valid, kurs yang hilang, dan data_updated_at lama. Jaringan khusus platform Flutter, TLS, serta deployment proxy tetap memerlukan pengujian perangkat atau emulator; file ini contoh klien yang dapat dijalankan, bukan layanan proxy yang sudah dihosting.