[✈️] 항공권 가격 검색 앱 개발해보기 <5> 서버 연동

항공권 데이터를 받아오는 기능을 구현할건데, 플러터에서 직접 데이터를 로드하면 항공사에서 차단할 수 있어서 대신 중간 서버가 필요하다.

먼저 파이썬이 설치되어있다는 가정하에
터미널에서 pip install fastapi uvicorn로 서버를 만드는 프레임워크인 FastAPI를 설치한다.

이후 server를 담당할 파일을 다른 경로에 만들고 (데이터는 일단 하드코딩)

from fastapi import FastAPI, Query

app = FastAPI()

@app.get("/search")
def search(from_city: str = Query(..., alias="from"), to_city: str = Query(..., alias="to"), date: str = Query(...)):
    return [
        {
            "airline": "Jeju Air",
            "departTime": "14:45",
            "price": 120000
        },
        {
            "airline": "Korean Air",
            "departTime": "08:30",
            "price": 180000
        }
    ]

 

서버 파일이 있는 폴더의 터미널에서
python -m uvicorn server:app --reload
를 입력하여 서버를 열 수 있고,

 

인터넷 브라우저에 
http://127.0.0.1:8000/search?from=ICN&to=NRT&date=2026-01-20&type=depart
이런식으로 입력하여 요청을 테스트 해 볼 수 있다.

 

플러터에서도 이런식으로 매개변수들을 입력하여 요청을 보내 함수를 호출할 것이다.

 

플러터에서, 먼저 HTTP 라이브러리를 추가해준다
flutter pub add http
flutter pub get

 

이후 api를 호출할 코드를 작성한 뒤

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

class TicketApi {
  static const String baseUrl = "http://127.0.0.1:8000";

  static Future<List<dynamic>> searchFlights({
    required String from,
    required String to,
    required String date,
  }) async {
    final url = Uri.parse(
      "$baseUrl/search?from=$from&to=$to&date=$date",
    );

    final response = await http.get(url);

    if (response.statusCode == 200) {
      return jsonDecode(response.body);
    } else {
      throw Exception("서버 오류: ${response.statusCode}");
    }
  }
}

 

검색 버튼에 연결해주기에 앞서 사용자의 입력을 서버에서 원하는 형태로 변환해주어야 한다.

 

final Map<String, String> _destinationCode = {
    '도쿄': 'NRT',
    '오사카': 'KIX',
    '후쿠오카': 'FUK',
  };

  String _formatDate(DateTime date) {
    return "${date.year.toString().padLeft(4, '0')}-"
          "${date.month.toString().padLeft(2, '0')}-"
          "${date.day.toString().padLeft(2, '0')}";
  }

  String get _fromCode {
    if (_flightTypeIndex == 0) return "ICN"; // 출발편
    return _destinationCode[_selectedDestination]!; // 도착편
  }

  String get _toCode {
    if (_flightTypeIndex == 0) return _destinationCode[_selectedDestination]!;
    return "ICN";
  }

 

그리고 전에 만들었던 TicketResult 클래스에 형태를 변환하는 함수를 하나 만들어주고,

factory TicketResult.fromJson(Map<String, dynamic> json) {
    return TicketResult(
      airline: json['airline'],
      departTime: json['departTime'],
      price: json['price'],
    );
  }

 

최종적으로 검색 버튼에 연결해준다.

 

Future<void> onSearchPressed() async {
    try {
      final rawList = await TicketApi.searchFlights(
        from: _fromCode,
        to: _toCode,
        date: _formatDate(_selectedDate!),
      );

      final List<TicketResult> parsed = rawList
          .map((json) => TicketResult.fromJson(json))
          .toList();

      // 가격 오름차순 정렬
      parsed.sort((a, b) => a.price.compareTo(b.price));

      setState(() {
        _results = parsed;
      });
    }
    catch (e) {
      if (!mounted) return;
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text("오류가 발생했습니다"),
          backgroundColor: Colors.red,
        ),
      );
    }
  }

 

그리고 검색 버튼을 눌러보면... 호출이 되지 않는다.

 

이유는 PC의 로컬호스트는 127.0.0.1:8000이 맞지만, 안드로이드 에뮬레이터는 10.0.2.2:8000이기 때문이다.

 

그럼 TicketApi의 Url 코드를

static String get baseUrl {
    // 웹 브라우저에서 실행 중
    if (kIsWeb) {
      return "http://127.0.0.1:8000";
    }

    // 안드로이드 (에뮬레이터 or 실제폰)
    if (Platform.isAndroid) {
      return "http://10.0.2.2:8000";
    }

    // iOS 시뮬레이터, macOS, Windows
    return "http://127.0.0.1:8000";
  }

 

플랫폼에 맞게 대응시켜주면 server.py에 하드코딩한 데이터가 불러와진 모습이다.

 

검색 버튼을 눌러 데이터를 받아온 모습

 

 

* 추가로 날짜를 입력하지 않으면 에러가 발생하여 기본적으로 오늘 날짜가 선택되도록 수정했다.

/// 날짜 선택
  Widget _buildDateButton() {
    return ElevatedButton(
      onPressed: () async {
        final pickedDate = await showDatePicker(
          context: context,
          initialDate: _selectedDate ?? DateTime.now(),
          firstDate: DateTime.now(),
          lastDate: DateTime.now().add(const Duration(days: 365)),
        );

        if (pickedDate != null) {
          setState(() {
            _selectedDate = pickedDate;
          });
        }
      },
      child: Text(
        _selectedDate == null ? '${DateTime.now().month}/${DateTime.now().day}' : '${_selectedDate!.month}/${_selectedDate!.day}',
      ),
    );
  }