Flutter: 날씨 앱(weather app) 만들기 2: JSON parsing

https://www.youtube.com/watch?v=ccq1yCmNzdk&list=PLQt_pzi-LLfoOpp3b-pnnLXgYpiFEftLB&index=14 

#1에서는 버튼을 누르면 날씨 정보를 가져왔는데, 앱이 실행되자마자 날씨 정보가 나타나도록 코드를 바꿔보자. 
onPressed를 null로 바꾸고, initState() 사용 

class _LoadingState extends State<Loading> {

  // _LoadingState 위젯이 생성될 때 딱 한번 호출되는 메서드 추가
  @override
  void initState() {
    super.initState();
        getLocation(); //initState 안에 추가함으로써 앱이실행되지마자 위치 정보가 뜰 수 있도록 수정함
  }

  void getLocation() async {
    // 현재 위치 가져오기
    Position position = await Geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high);
    print(position);
  }

인터넷이 안되거나 위치정보 동의를 거부하는 경우와 같이 예외적인 상황을 위해 exeption handling 필요 -> try-catch문 사용. 예외의 경우는 일반적으로 'e'를 사용하는데, 다른 걸로 사용해도 괜찮음.

에러가 발생하지 않고 메시지가 출력되도록.

 

https://pub.dev/packages/http/install을 참고해 http package 설치.
공식 문서 참고하여 인터넷 허용까지 추가.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.weather">
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> // 이전에 추가해둔 위치 동의
    <uses-permission android:name="android.permission.INTERNET" /> //인터넷 허용 동의

 

fetchData() 추가. get에 마우스를 올려보면 어떤 형태로 써야하는지 나옴.

문서를 보면, get()은 지정한 헤더들을 지정한 URL로 GET 요청을 보내는 함수이다. URL은 URI보다 더 작은 개념. 

 

API Reference > HTTP > Response를 살펴보면, Response란 미리 알려진 전체 응답 바디에 있는 HTTP 응답 클래스라고 한다.  여기서 새로운 인스턴스를 생성하고, 다양한 Properties를 이용하여 데이터를 사용할 수 있다. 

예를 들어, body 속성을 이용하면, 응답 바디 전체가

statusCode를 이용하면 상태코드가 나타난다. 

 

package 에 as http를 추가하여, get이 http 패키지로부터 왔다는 것을 명시 + get 함수를 불러올 때도 http. 표시해야함

이렇게 표기해줌으로써, 다른개발자가 은 http.Response를 보고 http 패키지로부터 나온 것을 파악한 후, 문서(> API reference)에서 이의 Response에 대한 정보를 확인할 수 있음

데이터 형식에 대해 알아보자면, XML은 html 태그와 비슷한데 (<p> <br>...), 다른 점은 사용자 임의로 태그를 만들고 키와 값을 설정하여 메타 정보를 추가할 수 있다. (오른쪽 그림 예시 참고)

JSON parsing을 해보자.  요청 성공시 (상태 코드 200) reponse body를 가져오고, 실패 시 에러메시지를 띄우도록.

- import 'dart:convert'; 문 추가 -> jsonDecode() 메서드를 사용할 수 있게됨. 인자값으로 응답 바디를 선언한 jsondata 변수를 전달해주자.
- myJson이라는 변수에 jsonDecode() 함수 호출  weather의 0번 인덱스에 있는 데이터 중 description을 가져와보자. 
  ㄴJSON의 값은 string, int 등 어떤 타입이 올지 모르므로 Dynamic 타입으로 지정해주어야 하기 때문에 변수 키워드를 'var'로 지정해주어야 한다.
  ㄴ 이 때 특이한 것은, jsonDecode(변수)['weather'][0]['description']; 형식으로 작성.

Troubleshooting: 여기서 나는  await get() 부분에서 에러가 발생하였다. 
-> http 버전을 강의에서 사용한 버전(http: ^0.12.2)으로 바꾸었더니, "Error: Cannot run with sound null safety, because the following dependencies don't support null safety: - package:http - package:http_parser"가 발생하였다.  null safety가 적용된 버전이라 그런 것 같다. . 이 블로그를 참고해서 안드로이드 스튜디오에서 --no-sound-null-safety 를 설정하니, 빌드가 잘 되었다!

의문) 왜 instance of 'Response'가 보이지?   Future<void> getLocation() async 에 Future를 붙여봐도 동일하네 +_+

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

class Loading extends StatefulWidget {
  const Loading({Key? key}) : super(key: key);

  @override
  _LoadingState createState() => _LoadingState();
}

class _LoadingState extends State<Loading> {

  // _LoadingState 위젯이 생성될 때 딱 한번 호출되는 메서드 추가
  @override
  void initState() {
    super.initState();
    getLocation(); //initState 안에 추가함으로써 앱이실행되지마자 위치 정보가 뜰 수 있도록 수정함
    fetchData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: null,
          child: Text('Get my location'),
        ),
      ),
    );
  }

  void fetchData() async {

    http.Response response = await http.get('https://samples.openweathermap.org/data/2.5/weather?q=London&appid=b1b15e88fa797225412429c1c50c122a1');
    print(response);

    if(response.statusCode == 200){
      String jsonDada = response.body; // 성공하면 응답 바디를 가져옴
      var myJson = jsonDecode(jsonDada)['weather'][0]['description']; // weather[0]의 description만 가져옴
      var windSpeed = jsonDecode(jsonDada)['wind']['speed'];
      print(jsonDada);
      print(myJson);
      print(windSpeed);
    } else (response.statusCode); // 성공하지 않으면 상태코드를 보여줌 
  }

  Future<void> getLocation() async {
    try {
      Position position = await Geolocator.getCurrentPosition(
          desiredAccuracy: LocationAccuracy.high);
      print(position);
    } catch (e) {
      print('Internet connect problem');
    }
    //
    // void requestPermission() async {
    //   //권한 요청하기
    //   LocationPermission permission = await Geolocator.requestPermission();
    // }
  }
}