สร้าง Flutter currency converter โดยเก็บ API key บน server

แอป Flutter บนมือถือเป็น public client จึงห้ามใส่ exchangerate.dev bearer key ไว้ในแอป เก็บ key ใน server proxy /api/fx ส่ง {from,to} จาก Flutter และเก็บ rate, source, market session และ observation time ไว้ใน typed model เดียวกัน

เก็บ credential ไว้บน server

server route รับ from และ to เติม Authorization: Bearer $EXCHANGERATE_API_KEY เรียก /v1/latest/{from}?symbols={to} แล้วส่งกลับเฉพาะ field ที่ต้องใช้ เก็บ key ใน server environment แอปรับ proxy URL ผ่าน --dart-define=FX_PROXY_BASE_URL=… และไม่เคยได้รับ upstream key

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"}

เพิ่ม HTTP dependency

สร้าง Flutter app เพิ่มแพ็กเกจ http ล่าสุดใน pubspec.yaml และบันทึก Flutter converter ฉบับเต็ม เป็น lib/main.dart รันด้วย flutter run --dart-define=FX_PROXY_BASE_URL=https://your-app.example/api/fx. ดาวน์โหลด Node proxy แบบเล็ก ตั้ง EXCHANGERATE_API_KEY ใน server environment และใช้ Node 20 ขึ้นไป proxy ฟัง loopback port 8787 สำหรับ local test ก่อนเชื่อมอุปกรณ์ให้ใช้ HTTPS backend ที่มี authentication และ request limits proxy ตรวจ currency และ amount ส่งต่อ key และคืน typed quote fields ที่จำเป็น อ่าน Flutter networking guide เพิ่มเติม.

ตรวจอัตราก่อนแสดงผล

model ปฏิเสธ rate ที่หาย ไม่เป็นบวก ไม่ finite หรือไม่ใช่ตัวเลข รวมถึง data_updated_at ที่หาย ป้องกัน HTML error page, proxy bug หรือ JSON ว่างไม่ให้กลายเป็นผลลัพธ์ client จำกัด timeout ไว้สิบวินาทีและแสดงสถานะที่ไม่ใช่ 2xx

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

แสดง loading, error และเวลาข้อมูล

หน้าจอปิดปุ่มระหว่าง request และแสดง progress indicator เมื่อ proxy fail จะแสดง error ที่อ่านได้ เมื่อสำเร็จจะแสดง amount, rate, source, market session, observation time, app cache age ตั้งแต่ device รับ response และ observation age ตั้งแต่ data_updated_at เพื่อแยก intraday observation จาก daily reference

ปัดเศษเฉพาะ display

ตัวอย่างแสดง JPY เป็น 0 ตำแหน่ง และ USD, EUR, GBP, IDR เป็น 2 ตำแหน่ง โดยแสดง rate 6 ตำแหน่งเพื่ออ่านง่าย นี่เป็นเพียง display rounding ให้เก็บตัวเลขเดิมและใช้ decimal หรือ fixed-point ใน production accounting อย่าใช้ค่าทศนิยมแบบ binary ที่แสดงผลเป็น settlement record

ทดสอบ user flow

รันแอปด้วย proxy test response แล้วทดสอบ timeout, HTTP 401/429, invalid JSON, missing rate และ data_updated_at เก่า การตั้งค่า network, TLS และ proxy deployment ต้องทดสอบบนเครื่องจริงหรือ emulator ไฟล์นี้เป็น client example ที่รันได้ ไม่ใช่ hosted proxy