날씨앱

2022/09/08 오후 4시 24분

오후 4시 46분

기간: 2022/9/2~9/8(6일)

 

UI:https://dribbble.com/shots/16515389-Weather-App-Cards

Weather App Cards

 

사용 api: openweathermap

Current weather data: https://openweathermap.org/current

5 Day / 3 Hour Forecast: https://openweathermap.org/forecast5 

Weather condition codes https://openweathermap.org/weather-conditions#Icon-list

 

사용 라이브러리:

flutter_dotenv: ^5.0.2
provider: ^6.0.3
geolocator: ^9.0.1
http: ^0.13.5
intl: ^0.17.0

github: https://github.com/kangsudal/my_openweather_map

 

위젯트리:

 

흐름도:

fetchWeatherData는 fetchCurrentWeatherData로 바뀌었다.

Future<Position?> getLocation() : geolocator를 이용해 현재 위치 가져오기

Future<Weather?> fetchCurrentWeatherData() : 현재 온도, 날씨 요약 가져오기. 그에 따른 배경사진 지정.

Future<List<Forecast>?> fetchForecastData() : 3시간 단위로 예보 데이터를 가져온다.

Future<List<Forecast>?> fetchForecastData() async {
  //현재 위치를 가져온다.
  Position? position = await getLocation();
  var url = Uri.https('api.openweathermap.org', '/data/2.5/forecast', {
    'lat': position?.latitude.toString(),
    'lon': position?.longitude.toString(),
    'appid': dotenv.env['APIKEY'],
    'units': 'metric'
  });
  print('forecast:$url');
  try {
    http.Response response = await http.get(url);
    if (response.statusCode == 200) {
      Map<String, dynamic> jsonData = jsonDecode(response.body);
      List<Forecast> forecastArray=[];
      for(int idx=0; idx<5;idx++){
        forecastArray.add(Forecast.fromJson(jsonData,idx));
      }
      print(forecastArray);
      return forecastArray;
    } else {
      print(response.statusCode);
      return null;
    }
  } catch (e) {
    print('fetchForecastData(): $e');
    // print("openweathermap에서 데이터를 가져오지 못하였습니다.");
  }
}

 

후기:

국내 기상청 api로 초단기실시간현황 데이터는 가져올 수 있었지만, 초단기예보 데이터는 구조가 어려웠다.

그에비해 openweathermap은 json데이터를 parsing하기에 수월했다. 현지에 맞는 좀더 정확한 날씨 정보인 국내것을 쓰고싶었는데 아쉬웠다. 데이터 로딩시 CircularProgressIndicator를 사용하고싶어서 Provider대신 FutureBuilder를 많이 사용해보는 프로젝트였다.