http-HTTP 통신

Date: 2024.09.06 Updated: 2024.09.06

카테고리: Package

태그: API API요청 flutter package http통신

Flutter에서 http 패키지는 HTTP 요청을 수행하는 데 사용됩니다. 이 패키지를 사용하면 REST API와 상호 작용하거나 웹 서버와 통신할 수 있습니다. 간단한 예제를 통해 이 패키지를 사용하는 방법을 설명하겠습니다.

설치

먼저, pubspec.yaml 파일에 http 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.14.0  # 최신 버전으로 변경될 수 있습니다.

그런 다음, 패키지를 설치합니다:

flutter pub get

사용 예제

다음은 http 패키지를 사용하여 HTTP GET 요청을 보내고, 응답을 처리하는 예제입니다.

import 'dart:convert';  // jsonDecode를 사용하기 위해 필요
import 'package:http/http.dart' as http;

void main() async {
  // 비동기적으로 HTTP 요청을 수행합니다.
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));

  // 응답 상태 코드가 200이면 성공적인 응답입니다.
  if (response.statusCode == 200) {
    // 응답 본문을 JSON으로 디코딩합니다.
    final data = jsonDecode(response.body);

    // JSON 데이터에서 원하는 정보를 추출합니다.
    print('Title: ${data['title']}');
    print('Body: ${data['body']}');
  } else {
    // 상태 코드가 200이 아니면 오류 메시지를 출력합니다.
    print('Request failed with status: ${response.statusCode}.');
  }
}

설명

HTTP GET 요청:
- http.get() 메서드를 사용하여 지정된 URL로 GET 요청을 보냅니다.
- Uri.parse()를 통해 URL을 Uri 객체로 변환합니다.
응답 처리:
- response.statusCode를 통해 HTTP 응답 상태 코드를 확인합니다.
- 응답 본문은 response.body에 포함되며, jsonDecode()를 사용하여 JSON 형식으로 변환합니다.
데이터 사용:
- JSON 데이터에서 필요한 값을 추출하고 활용합니다.

이 예제는 가장 기본적인 사용법을 보여주며, POST 요청, 헤더 추가, 쿼리 파라미터 포함 등 더 복잡한 요청을 처리하려면 http 패키지의 추가 기능을 사용할 수 있습니다.

HTTP패키지를 사용하여 날씨정보를 API로 받아오는 코드를 해봅시다.

플러터에서 날씨 API를 사용하여 현재 위치의 날씨, 바람, 미세먼지 정보를 화면에 표시하는 애플리케이션을 만드는 방법을 설명하겠습니다.

여기에 필요한 주요 단계는 다음과 같습니다:

날씨 API와 미세먼지 API 선택
Flutter 프로젝트 설정
현재 위치를 가져오기 위한 권한 설정
API 호출 및 데이터 처리
UI 구성

이번 예제에서는 OpenWeatherMap API를 사용하여 날씨 정보를 가져오고, AirVisual API를 사용하여 미세먼지 정보를 가져오겠습니다.

1. API 키 발급

OpenWeatherMap: OpenWeatherMap에서 계정을 만들고 API 키를 발급받습니다.
AirVisual: AirVisual에서 계정을 만들고 API 키를 발급받습니다.

2. Flutter 프로젝트 설정

pubspec.yaml 파일 수정

dependencies:
  flutter:
    sdk: flutter
  http: ^0.14.0
  geolocator: ^9.0.0  # 위치 정보를 얻기 위한 패키지
  flutter_dotenv: ^6.0.0  # 환경 변수를 관리하기 위한 패키지

환경 변수 설정

루트 디렉터리에 .env 파일을 만들고 API 키를 저장합니다.

OPENWEATHER_API_KEY=your_openweather_api_key
AIRVISUAL_API_KEY=your_airvisual_api_key

3. 코드 작성

main.dart

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:geolocator/geolocator.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';

void main() async {
  await dotenv.load();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WeatherScreen(),
    );
  }
}

class WeatherScreen extends StatefulWidget {
  @override
  _WeatherScreenState createState() => _WeatherScreenState();
}

class _WeatherScreenState extends State<WeatherScreen> {
  String? weatherDescription;
  double? temperature;
  double? windSpeed;
  int? aqi;

  @override
  void initState() {
    super.initState();
    _fetchWeatherData();
  }

  Future<void> _fetchWeatherData() async {
    try {
      Position position = await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.high);
      double latitude = position.latitude;
      double longitude = position.longitude;

      String weatherUrl = 'https://api.openweathermap.org/data/2.5/weather?lat=$latitude&lon=$longitude&appid=${dotenv.env['OPENWEATHER_API_KEY']}&units=metric';
      String airQualityUrl = 'http://api.airvisual.com/v2/nearest_city?lat=$latitude&lon=$longitude&key=${dotenv.env['AIRVISUAL_API_KEY']}';

      final weatherResponse = await http.get(Uri.parse(weatherUrl));
      final airQualityResponse = await http.get(Uri.parse(airQualityUrl));

      if (weatherResponse.statusCode == 200 && airQualityResponse.statusCode == 200) {
        final weatherData = jsonDecode(weatherResponse.body);
        final airQualityData = jsonDecode(airQualityResponse.body);

        setState(() {
          weatherDescription = weatherData['weather'][0]['description'];
          temperature = weatherData['main']['temp'];
          windSpeed = weatherData['wind']['speed'];
          aqi = airQualityData['data']['current']['pollution']['aqius'];
        });
      } else {
        // Handle errors
        print('Error: ${weatherResponse.statusCode}');
        print('Error: ${airQualityResponse.statusCode}');
      }
    } catch (e) {
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Weather Info')),
      body: Center(
        child: weatherDescription == null
            ? CircularProgressIndicator()
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('Weather: $weatherDescription'),
                  Text('Temperature: ${temperature?.toStringAsFixed(1)}°C'),
                  Text('Wind Speed: ${windSpeed?.toStringAsFixed(1)} m/s'),
                  Text('Air Quality Index: $aqi'),
                ],
              ),
      ),
    );
  }
}

4. 권한 설정

AndroidManifest.xml (Android 설정)

android/app/src/main/AndroidManifest.xml에 위치 접근 권한을 추가합니다.

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

Info.plist (iOS 설정)

ios/Runner/Info.plist에 위치 접근 권한 요청을 추가합니다.

<key>NSLocationWhenInUseUsageDescription</key>
<string>We need your location to provide weather information.</string>

5. 실행

이제 flutter run 명령어로 앱을 실행하여 현재 위치의 날씨와 미세먼지 정보를 화면에 표시할 수 있습니다.

6. Status Code 참고…

HTTP 상태 코드는 웹 서버가 클라이언트의 요청을 처리한 결과를 나타내는 3자리 숫자 코드입니다. 상태 코드는 클라이언트(예: 웹 브라우저)가 서버의 응답을 해석하는 데 도움이 됩니다. 각 상태 코드는 특정 의미를 가지고 있으며, 일반적으로 5개의 범주로 분류됩니다:

1. 1xx (정보)

100 Continue: 클라이언트가 요청의 나머지를 계속 보내도 된다는 신호입니다.
101 Switching Protocols: 클라이언트가 요청한 프로토콜로 서버가 전환 중임을 나타냅니다.

2. 2xx (성공)

200 OK: 요청이 성공적으로 처리되었음을 나타냅니다. 대부분의 성공적인 GET, POST 요청에서 이 코드를 받습니다.
201 Created: 요청이 성공적으로 처리되었으며, 새로운 리소스가 생성되었음을 나타냅니다. 보통 POST 요청 후에 사용됩니다.
204 No Content: 요청이 성공적으로 처리되었지만 응답 본문이 없음(예: DELETE 요청 후)으로 사용됩니다.

3. 3xx (리다이렉션)

301 Moved Permanently: 요청한 리소스가 영구적으로 다른 URL로 이동되었음을 나타냅니다. 클라이언트는 새로운 URL로 요청을 보내야 합니다.
302 Found: 요청한 리소스가 임시로 다른 URL에 있으며, 클라이언트가 이후 요청에는 원래 URL을 사용해야 함을 나타냅니다.
304 Not Modified: 클라이언트의 캐시된 버전이 최신이며, 서버에서 데이터가 수정되지 않았음을 나타냅니다.

4. 4xx (클라이언트 오류)

400 Bad Request: 서버가 요청을 이해하지 못했거나 잘못된 구문이 포함되어 있을 때 발생합니다.
401 Unauthorized: 요청이 인증되지 않았으며, 클라이언트가 인증을 제공해야 함을 나타냅니다.
403 Forbidden: 클라이언트가 요청한 자원에 대한 접근 권한이 없음을 나타냅니다.
404 Not Found: 요청한 자원을 서버에서 찾을 수 없음을 나타냅니다.
405 Method Not Allowed: 요청에 사용된 HTTP 메서드가 자원에 대해 허용되지 않음을 나타냅니다.

5. 5xx (서버 오류)

500 Internal Server Error: 서버에서 요청을 처리하는 중에 오류가 발생했음을 나타냅니다.
502 Bad Gateway: 서버가 게이트웨이 역할을 하는 중에 잘못된 응답을 받았음을 나타냅니다.
503 Service Unavailable: 서버가 일시적으로 요청을 처리할 수 없는 상태임을 나타냅니다. 보통 서버 유지보수 중일 때 발생합니다.

각 상태 코드는 서버가 클라이언트의 요청을 어떻게 처리했는지를 명확하게 전달하며, 클라이언트는 이러한 코드를 기반으로 적절한 처리를 할 수 있습니다.

HERKSS GITHUB BLOG