이번 섹션에서는 OpenWeatherMap API를 Flutter 애플리케이션에 통합하는 방법에 대해 알아보겠습니다. OpenWeatherMap은 실시간 날씨 데이터, 기온, 습도, 바람 속도 등 여러 가지 유용한 날씨 정보를 제공합니다. 이 API는 무료 및 유료 플랜을 제공하며, 오늘은 무료 플랜을 기준으로 설명하겠습니다.
1. OpenWeatherMap API 가입 및 API 키 얻기
첫 번째 단계는 OpenWeatherMap 웹사이트에 가입하여 API 키를 얻는 것입니다. 아래의 단계를 따라주세요:
- OpenWeatherMap 웹사이트로 이동합니다.
- 상단 메뉴의 “Sign Up”을 클릭하여 계정을 생성합니다.
- 이메일 주소와 비밀번호를 입력한 후 가입 절차를 완료합니다.
- 로그인 후 “API keys” 메뉴로 이동하여 자동 생성된 기본 API 키를 확인합니다.
- 필요에 따라 새 API 키를 생성할 수 있습니다.
2. Flutter 프로젝트 설정
이제 Flutter 프로젝트를 설정해 보겠습니다. 새로운 Flutter 애플리케이션을 생성하거나 기존 프로젝트를 사용할 수 있습니다.
flutter create weather_app프로젝트 디렉터리로 이동합니다:
cd weather_app다음으로, HTTP 요청을 보내기 위해 필요한 패키지를 pubspec.yaml 파일에 추가합니다:
dependencies:
flutter:
sdk: flutter
http: ^0.13.3
모든 의존성을 설치하기 위해 다음 명령어를 실행합니다:
flutter pub get3. 날씨 데이터 모델 생성
OpenWeatherMap API에서 수신받은 JSON 데이터를 학습하기 위해 Dart 모델 클래스를 생성합니다. 예를 들어, 날씨 데이터를 위한 클래스를 생성해 보겠습니다.
class Weather {
final String city;
final double temperature;
final String description;
Weather({required this.city, required this.temperature, required this.description});
factory Weather.fromJson(Map json) {
return Weather(
city: json['name'],
temperature: json['main']['temp'] - 273.15, // 켈빈을 섭씨로 변환
description: json['weather'][0]['description'],
);
}
}
4. HTTP 요청으로 날씨 데이터 가져오기
이제 날씨 정보를 가져오기 위해 HTTP 요청을 작성할 차례입니다. http 패키지를 사용하여 OpenWeatherMap API에 GET 요청을 보냅니다.
다음은 날씨 정보를 가져오는 함수를 작성하는 예제입니다:
import 'dart:convert';
import 'package:http/http.dart' as http;
Future fetchWeather(String city) async {
final apiKey = 'YOUR_API_KEY_HERE'; // 여기에 귀하의 API 키를 입력하세요
final response = await http.get(Uri.parse('https://api.openweathermap.org/data/2.5/weather?q=$city&appid=$apiKey'));
if (response.statusCode == 200) {
return Weather.fromJson(json.decode(response.body));
} else {
throw Exception('Failed to load weather data');
}
}
5. 사용자 인터페이스 작성
이제 날씨 정보를 표시하기 위한 간단한 사용자 인터페이스를 작성해 보겠습니다. Flutter의 구성 요소를 사용하여 사용자가 입력한 도시 이름에 따라 날씨 정보를 표시합니다.
다음은 기본 UI 코드 예제입니다:
import 'package:flutter/material.dart';
class WeatherApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Weather App',
home: Scaffold(
appBar: AppBar(
title: Text('날씨 정보'),
),
body: WeatherInfo(),
),
);
}
}
class WeatherInfo extends StatefulWidget {
@override
_WeatherInfoState createState() => _WeatherInfoState();
}
class _WeatherInfoState extends State {
String city = '';
Weather? weather;
final TextEditingController controller = TextEditingController();
@override
Widget build(BuildContext context) {
return Column(
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
controller: controller,
decoration: InputDecoration(labelText: '도시 이름 입력'),
),
),
ElevatedButton(
onPressed: () {
setState(() {
city = controller.text.trim();
});
fetchWeather(city).then((value) {
setState(() {
weather = value;
});
}).catchError((error) {
showDialog(
context: context,
builder: (_) => AlertDialog(
title: Text('오류'),
content: Text(error.toString()),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('확인'),
),
],
),
);
});
},
child: Text('날씨 조회'),
),
if (weather != null)
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
'도시: ${weather!.city}\n온도: ${weather!.temperature.toStringAsFixed(1)}°C\n상태: ${weather!.description}',
style: TextStyle(fontSize: 20),
),
),
],
);
}
}
void main() {
runApp(WeatherApp());
}
6. 앱 실행 및 결과 확인
위에서 작성한 코드를 디바이스 또는 에뮬레이터에서 실행하여 결과를 확인할 수 있습니다. 이제 입력란에 도시 이름을 입력하고 “날씨 조회” 버튼을 누르면 API 요청을 통해 가져온 날씨 정보를 화면에 표시합니다.
7. 에러 처리 및 개선 사항
현재 구현된 예시는 기본적인 기능만 제공하므로, 여러 가지 개선 사항을 추가할 수 있습니다. 예를 들어:
- 위치 기반 날씨 정보 제공: 사용자의 현재 위치를 기반으로 자동으로 날씨 정보를 가져오는 기능 추가
- 날씨 정보 캐싱: 동일한 요청에 대한 응답 시간을 줄이기 위해 캐싱 메커니즘 추가
- 색상 및 디자인 개선: 사용자 경험을 높이기 위해 UI 디자인을 다듬기
- 다양한 날씨 정보 제공: 온도 외에도 습도, 바람의 속도 등의 추가 정보 표시
8. 마무리
이번 포스트에서는 Flutter와 OpenWeatherMap API를 활용하여 실시간 날씨 정보를 가져오는 방법을 상세하게 설명했습니다. 실습을 통해 API 사용법을 익히고 다양한 기능을 추가하는 데 도움이 되었기를 바랍니다. 앞으로도 Flutter를 이용하여 많은 혁신적인 애플리케이션을 만들어 보시기 바랍니다!