플러터 Retrofit 사용하기
with YouTube Data API (1/3)
플러터 Retrofit 사용하기
Version : Flutter SDK 2.2.3, Dart SDK (in Flutter SDK) 2.13.4
플러터는 패키지라고 부르는 다양한 라이브러리를 제공하는 사이트가 있다. 해당 사이트에 retrofit을 검색하면 retrofit 패키지를 찾을 수 있다. 사용법과 예제도 제공하기 때문에 해당 내용을 잘 파악하면 필요한 곳에 적절히 응용할 수 있을 것이다.
여기서는 안드로이드에서 Retrofit을 사용하는 방법에서 다룬 내용과 유사하게 Retrofit을 통해 YouTube Data API를 호출하여 데이터를 받아오는 예제를 살펴본다. YouTube Data API 키 발급 방법은 이곳에서 참고하길 바란다.
여기서 사용할 API URL은 다음과 같다. YOUR_API_KEY에 앞서 발급받은 키를 넣으면 된다.
VIDEO_ID는 유튜브 영상을 재생할 때 나오는 URL 중 v= 뒤에 있는 문자열이다.
예를 들어 www.youtube.com/watch?v=dyRsYk0LyA8 영상에 대한 데이터를 가져오려면 id=dyRsYk0LyA8로 하면 된다.
https://www.googleapis.com/youtube/v3/videos?id=VIDEO_ID&key=YOUR_API_KEY&fields=items(id,snippet(publishedAt,title,thumbnails),statistics(viewCount))&part=snippet,statistics
1. 패키지 추가
새 플러터 프로젝트를 생성하고 패키지를 추가한다. 필요한 패키지는 아래와 같다. Dart SDK 2.13.4 버전 기준으로 호환되는 최신 버전으로 설정했기 때문에 아래 버전은 자신의 Dart SDK에 맞는 버전으로 변경해서 사용해도 된다.
dependencies:
flutter:
sdk: flutter
retrofit: ^2.0.1
json_annotation: ^4.0.1
cupertino_icons: ^1.0.2
dev_dependencies:
flutter_test:
sdk: flutter
retrofit_generator: ^2.0.0+3
build_runner: ^2.1.2
json_serializable: ^4.1.4
2. DataModel 정의
API URL을 브라우저로 접속해보면 응답 값을 확인할 수 있다. 다음과 같이 응답이 온다.
해당 응답 값에서 사용할 값에 대한 DataModel을 만든다. 여기서는 id, snippet의 publishedAt, title, thumbnails, statstics의 viewCount을 담는 모델을 생성한다. 모델 생성 시 멤버 변수의 자료형과 변수명은 응답 값과 일치해야 하는 것에 주의한다.
예를 들어 items를 담기 위한 모델 클래스로 VideoItems라는 클래스로 생성하면 멤버로는 String 타입의 id라는 변수명을 가진 변수가 필요하다. 또한 snippet이라는 변수명을 가진 멤버 변수가 필요한데 snippet은 publishedAt, title, thumbnails를 가져야 하기 때문에 해당 변수를 가지는 VideoSnippet이라는 클래스를 만들어서 snippet의 자료형으로 사용한다. 이런 식으로 thumbnails, statstics도 필요한 클래스를 만들어서 해당 클래스를 자료형으로 사용하면 된다.
그리고 retrofit을 사용하기 위한 모델 클래스를 만들 때는 json 데이터를 인코딩/디코딩하기 위한 직렬화가 필요하다. 직렬화를 편리하게 해주는 패키지가 바로 json_serializable과 json_annotation이다. json_annotation은 json_serializable이 직렬화를 하기 위한 코드를 생성하기 위해 사용되는 어노테이션을 정의한다. 직렬화를 하는 방법은 json_serializable 패키지 가이드를 참고하면 된다. 간략히 정리하면 다음과 같은 형태를 가져야 한다. (빨간 줄로 에러 표시가 되는 부분들이 있을 텐데 그건 추후에 자동 생성될 파일과 함수이기 때문에 지금은 신경 쓰지 않아도 된다.)
결론적으로 DataModel 클래스는 아래와 같이 구성된다.
[의문] 응답 값을 보면 thumbnails에 default가 존재한다. 그런데 dart에서 default는 키워드이기 때문에 변수명으로 사용할 수 없다. 이렇게 json의 키가 키워드이면 어떻게 사용할 수 있는 것일까?
3. 호출할 API 정의하기
YouTube Data API의 응답 값은 다음과 같은 json 형태이다.
{
"items": [
{
"id": "7lCDEYXw3mM",
"info": {
"date": "2013-06-20T23:12:38Z",
"title": "Google",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/7lCDEYXw3mM/default.jpg"
}
},
"statistics": {
"viewCount": "11372"
}
}
]
}
하지만 retrofit 패키지에서 제공하는 예제의 json 형태는 다음과 같다.
[
{
"id":"26",
"date":"2020-12-19T23:29:16.177Z",
"name":"Jay"
},
{
"id":"27",
"date":"2020-12-19T14:59:42.792Z",
"name":"Ola"
}
]
차이점이 있다. YouTube API의 json은 처음에 키가 있고 값이 List 형태이지만 예제의 json은 처음부터 List이다. 따라서 기본 예제를 그대로 사용할 수는 없고 변경이 필요하다. 변경해보자.
Retrofit 기본 예제에는 RestClient 클래스와 Task 클래스라는 DataModel이 같은 파일 내에 있다. 하지만 여기서는 DataModel을 별도로 클래스로 생성했기 때문에 API 호출 관련 코드만 존재한다. 이 코드가 호출부의 전체 코드이다.
4. Generator 실행
DataModel.g.dart와 Restclient.g.dart 파일을 생성하기 위해서 다음 명령어를 터미널에 입력한다. (build_runner은 앞서 추가한 패키지이다.)
flutter pub run build_runner build
안드로이드 스튜디오 터미널실행이 완료되면 DataModel.g.dart와 Restclient.g.dart 파일이 생성되고 기존 코드에서 에러로 표시되던 부분이 사라진다. 여기까지 성공했으면 retrofit 사용 준비는 끝이다.
5. API 호출 및 응답 데이터 사용하기
API를 호출하려면 RestClient에서 구현한 getYouTubeAPI 함수를 사용하면 된다. 파라미터는 API URL에서 각 쿼리에 맞는 부분을 넣어준다.
간단한 UI를 구성하여 응답받은 데이터 중에서 썸네일, 타이틀, 조회수 정보를 사용하여 다음과 같이 보여준다.
코드는 다음과 같다.
page0은 응답 값을 받기 전에 보여줄 초기 화면이고 응답을 받으면 setState()를 통해서 page1으로 갱신한다.
