[Flutter] Google Book API 사용법

먼저, API(Application Programming Interface)란 다른 사람들이 내 컴퓨터에 있는 데이터에 접근할 수 있도록 만들어둔 기능이다.

 

API를 사용하기에 앞서, 비동기 개념에 대해 먼저 알아야한다.

네트워크 요청, 데이터베이스 접근 등과 같이 시간이 오래 걸리는 작업은 비동기 동작으로 처리를 하는것이 좋다.

비동기 동작이란, 하나의 일이 끝나기 전에 동시에 다른 일을 병행하는 방식을 말한다.

 

비동기 방식을 사용할 때 주의할 점이 있다.

예를 들어 HTTP 요청을 보낸 뒤 응답 받은 결과를 화면에 보여주는 코드를 비동기 방식으로 작성한다고 할 때, 응답을 받기 전에 결과를 보여주려고한다면 에러가 발생할 것이다.

요청을 보내기만하면 끝인 코드라면 비동기 방식으로 처리를 해도되지만, 위와 같은 경우는 동기 방식으로 처리해줘야한다.

이처럼 비동기 방식으로 동작하는 코드를 동기 방식으로 실행하는 방법에는 async & await 키워드를 사용하는 방법이 있다.

 

아래 예시를 보자. 대표적인 비동기 방식으로 동작하는 Future.delayed() 함수에, 작성 코드가 끝날 때 까지 기다리라는 의미의 async & awiat 를 사용하면 출력 결과가 바뀌는 것을 알 수 있다.

void main() async {
    print("1");
    await Future.delayed(Duration(seconds: 1), () {
        print("2");
    });
    print("3");
}
//async&await 추가 전 결과 : 1 -> 3 -> 2 (비동기 방식)
//async&await 추가 후 결과 : 1 -> 2 -> 3 (동기 방식)

 

이제  Google Book API를 활용하여 서버에 데이터를 요청(Request)하고, 응답(Respone) 받은 데이터를 화면에 보여주는 방법에 대해 알아보자.

 

먼저  터미널 창에 아래 명령어를 입력하여 Dart에서 네트워크 통신을 편하게 도와주는 통신 패키지인 dio 패키지를 설치한다.

(참고 : https://pub.dev/packages/dio/install)

$ flutter pub add dio //작성일 기준 버전 5.2.1

설치 후 pubspec.yaml 파일에 아래와 같이 보인다면 정상적으로 설치에 성공한 것이다.

/* pubspec.yaml */
...
dependencies:
    ...
    dio: ^5.2.1+1 //버전명

본 게시물에서는 GET 방식으로 요청을 보내고 Json 형태의 데이터를 응답받는 방법을 다룰 예정이다.

아래 코드는 '고양이'를 검색한 결과를 요청하고 응답 받은 결과 중 'id', 'title', 'subtitle'를 가져오는 코드이다.

사진의 네모 친 subtitle을 가져오려면 items라는 List의 2번째 인덱스에 속한 값이므로 data['items'][2]['volumeInfo']['subtitle'] 코드로 가져올 수 있다.

import 'package:dio/dio.dart';

...
void main() async {
    Response res = await Dio().get( //dio패키지의 get함수로 HTTP 요청(request)
        "https://www.googleapis.com/books/v1/volumes?q=고양이&startIndex=0&maxResults=40"
    );
    List items = res.data['items'];
    for(Map<String, dynamic> item in items) { //items을 순차적으로 item에 넣는 반복문
        String id = item['id'];
        String title = item['volumeInfo']['title'];
        String subtitle: item['volumeInfo']['subtitle'];
    }
}