[Flutter] 네이버 오픈 API를 사용한 책검색 앱

MVVM 방식, 네이버 오픈 API를 사용한 아주 간단한 앱을 구현했다.

복잡한 기능은 모두 빼고, 위 두 가지 기능의 실제 사용에 집중했다.

 

사용한 패키지: flutter_riverpod, http

 

 

결과화면

 

페이지 하나로 구성된 앱으로, 검색어를 입력하면 네이버 오픈 api 검색 기능을 이용해 책을 검색한다.

검색결과는 그리드뷰 리스트로 출력되며, 이미지만 표시된다.

 

파일 구조

 

 

book.dart

class Book {
  final String image;

  Book({required this.image});

  Book.fromJson(Map<String, dynamic> json) : this(image: json["image"]);

  Map<String, dynamic> toJson() => {"image": image};
}

네이버 API가 제공하는 정보 중 이미지만 사용할 예정이기에, class Book 내에 image 속성만 담았다.

 

 

book_repository.dart

import 'dart:convert';

import '/data/model/book.dart';
import 'package:http/http.dart';

class BookRepository {
  Future<List<Book>?> search(String query) async {
    try {
      Client client = Client();
      Response result = await client.get(
        Uri.parse(
          'https://openapi.naver.com/v1/search/book.json?query=$query&display=30',
        ),
        headers: {
          'X-Naver-Client-Id': '미리 발급받은 Id 입력',
          'X-Naver-Client-Secret': '미리 발급받은 Secret 입력',
        },
      );
      final json = jsonDecode(result.body);

      if (result.statusCode == 200) {
        return List.from(json['items']).map((e) => Book.fromJson(e)).toList();
      }
      return null;
    } catch (e) {
      print(e);
      return null;
    }
  }
}

api에 검색어를 포함한 url의 결과를 요청하면서, 필요한 인증 정보를 함께 보낸다.

Get요청 성공 시 응답코드 200이 반환되는데, 이 코드(statusCode)를 사용해 성공여부를 판단한다.

 

참고:

https://developer.mozilla.org/ko/docs/Web/HTTP/Status/200

200 OK - HTTP | MDN

 

Get 요청 성공 시 결과값(json String 타입) jsonDecode로 변환한 값을 사용해 List<Book> 의 형태로 반환한다.

home_page.dart, 

home_view_modle.dart 가 해당 리스트를 사용하여 화면에 결과를 출력할 수 있다.