[Flutter] http 네트워크 통신 / 카카오 API 로 데이터 받아오기_2

[Flutter] http 네트워크 통신 / 카카오 API 로 데이터 받아오기_2

 

 

안녕하세요,

오늘은 카카오 API를 활용하여 Flutter HTTP 통신을 하는 방법을 이어서 설명드리겠습니다.

이전 포스팅에서 REST API 키를 받아오는 것까지 완료하셨나요?

아직 안하신분은 아래 링크에서 확인하고 와주세요~!

 

https://ohyenam.tistory.com/42

[Flutter] http 네트워크 통신 / 카카오 API 로 데이터 받아오기

 

---

Daum 동영상 정보 가져오기

---

 

카카오 API를 활용해서 Daum 에 등록되어있는 동영상 데이터들을 가져와보겠습니다.

동영상 말고도, 지도, 책, 카카오 앱 관련 다양한 데이터를 제공하고 있으니,  자세한 내용은 아래링크를 참고해주세요!

 

https://developers.kakao.com/docs/latest/ko/daum-search/dev-guide#search-video

Kakao Developers

 저희는 동영상 정보를 가져와야하기때문에, Daum - 동영상 검색 데이터 개발가이드를 참고합니다.

 

 

그럼 개발 가이드를 활용해서 코드를 작성해보겠습니다.

아참! 코드를 작성하기전에 Flutter http 패키지를 적용해야합니다

 

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.4

 

pubspec.yaml 파일에 위 내용을 추가해주시고 Pub get을 진행해주세요.

그럼 간단하게 http 패키지가 적용됩니다!

 

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: HttpJson());
  }
}

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

  @override
  State<HttpJson> createState() => _HttpJsonState();
}

class _HttpJsonState extends State<HttpJson> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          getJSONData();
        },
        child: Icon(Icons.file_download),
      ),
      body: Container(
        child: Center(
          child: Text('test'),
        ),
      ),
    );
  }

  Future<String?> getJSONData() async {
    var url = 'https://dapi.kakao.com/v2/search/vclip?target=title&query=오징어게임';
    var response = await http.get(Uri.parse(url),
        headers: {"Authorization": "KakaoAK 24e46bad35177bd68da7f1fbe3b26e6f"});
    print(response.body);
    return "Success!!";
  }
}

 

Floating Action button을 만들어서 버튼을 눌렀을때 JSON데이터를 가져오도록 작성하였습니다.

getJSONData에서 정의한 url의 의미를 아래에서 확인해봅시다.

 

카카오에서 제공해주는 개발 가이드와 비교해서 살펴보겠습니다.

getJSONData에서 작성한 url 입니다.

'https://dapi.kakao.com/v2/search/vclip?target=title&query=오징어게임'

- Host + GET : Daum 동영상을 검색하는 카카오 API 명

 - tartget / query는 검색할 파라미터 (동영상 제목이 '오징어게임'인 영상을 검색)

파라미터에 대한 정보는 개발가이드에서 확인하실 수 있습니다.

 

HTTP header 값에는 Authorization 값을 넣어줍니다.

카카오API와 통신해야하므로 REST API 값을 입력해야합니다.

이전에 글에서 얻었던 키 값을 입력하시면 됩니다. 

 

FloatingAction 버튼을 누르면 아래와 같이 데이터가 들어오는 것을 확인할 수 있습니다.

이렇게 받아온 데이터를 다양한 형태로 보여줄 수 있는데요!

다음 글에서는 카카오API에서 가져온 정보를 ListView로 보여주는 방법을 작성해보겠습니다.